/* ==========================================================================
   SECTORWEB — compléments de la page « Référencement naturel »
   Repris tel quel du <style> en ligne de referencement-naturel.html.
   ========================================================================== */

/* Comparatif SEO / SEA */
/* Taux de clic par position */
.ctr{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);overflow:hidden}
.ctr .row{display:grid;grid-template-columns:112px 1fr 76px;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--gridline)}
.ctr .row:last-child{border-bottom:0}
.ctr .p{font-family:var(--f-mono);font-size:12px;color:var(--slate)}
.ctr .t{height:8px;border-radius:var(--r-pill);background:var(--gridline);overflow:hidden}
.ctr .t i{display:block;height:100%;border-radius:var(--r-pill);background:var(--stone)}
.ctr .row.top .t i{background:var(--ember)}
.ctr .row.top .p,.ctr .row.top .v{color:var(--ink)}
.ctr .v{font-family:var(--f-mono);font-size:12.5px;color:var(--slate);text-align:right}
/* Crawl → index → classement */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.flow > div{background:var(--canvas);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.flow .n{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.flow h3{font-size:16px;font-weight:500;line-height:1.3}
.flow p{font-size:13.5px;color:var(--slate);line-height:1.6}
@media(max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}
/* Fourchettes de budget */
.budgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.budget{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.budget .lbl{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--slate)}
.budget .amt{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.budget .amt em{font-style:normal;font-size:14px;color:var(--slate);font-weight:400}
.budget p{font-size:13.5px;color:var(--slate);line-height:1.6}
@media(max-width:660px){.budgets{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------------------
   Tableau comparatif : seul le nombre de colonnes est propre à cette page.
   Le reste du dessin vient de sections.css.
   -------------------------------------------------------------------------- */
.cmp .r{
  grid-template-columns:1fr 1.1fr 1.1fr;
}