/* Landing Mediacom87 — modèle v3 : blanc, encre chaude, accent orange (aplats orange vif + encre, texte orange brûlé). Contrastes AA/AAA. */
:root{
  --bg:#ffffff; --bg-alt:#f4f4f3; --ink:#17120f; --text:#33302d; --muted:#57524d;
  --rule:#dcdad7; --rule-strong:#17120f;
  --accent:#9a3412; --accent-hover:#7c2d12; --accent-soft:#ffedd5; --accent-ink:#7c2d12;
  --on-accent:#ffffff; --cta:#17120f; --cta-text:#d6d1cc;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
/* Contrastes sur blanc : ink 18.6:1 · text 12.6:1 · muted 7.7:1 · accent 7.3:1 · accent-ink sur accent-soft 8.9:1 · cta-text sur cta 12.4:1 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,dl,dd{margin:0}
code{font-family:var(--mono);font-size:.88em;background:var(--bg-alt);border:1px solid var(--rule);padding:0 5px;border-radius:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:10}
.skip:focus{left:8px}

/* Header */
.site-header{border-bottom:1px solid var(--rule);background:var(--bg)}
.site-header .wrap{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.brand img{width:28px;height:28px}
.nav{display:flex;gap:clamp(14px,2vw,28px);white-space:nowrap;overflow-x:auto;max-width:100%;font-size:15px}
.nav a{color:var(--text);text-decoration:none;padding:4px 0}
.nav a:hover{color:var(--accent);text-decoration:underline}
.langs{display:flex;gap:4px;font:13px var(--mono)}
.langs a{color:var(--muted);text-decoration:none;padding:4px 6px;border-radius:3px}
.langs a:hover{color:var(--accent)}
.langs a[aria-current]{color:var(--on-accent);background:var(--ink)}

/* Hero */
.hero .wrap{padding-top:96px;padding-bottom:88px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);padding-top:64px;gap:48px}}
.eyebrow{margin-bottom:24px;font:500 13px var(--mono);letter-spacing:.02em;color:var(--accent)}
.hero h1{margin-bottom:24px;font:600 clamp(36px,5vw,58px)/1.06 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.lead{max-width:580px;margin-bottom:36px;font-size:19px;line-height:1.6;color:var(--text);text-wrap:pretty}
.actions{display:flex;gap:12px 24px;align-items:center;flex-wrap:wrap;font-size:16px}
.actions .quiet{color:var(--muted)}
.btn{display:inline-block;padding:14px 24px;font-size:16px;font-weight:600;text-decoration:none;border-radius:4px;background:var(--accent);color:var(--on-accent)}
.btn:hover{background:var(--accent-hover);color:var(--on-accent);text-decoration:none}
.btn-ghost{display:inline-block;padding:13px 23px;font-size:16px;font-weight:600;text-decoration:none;border-radius:4px;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;text-decoration:none}
.hero-visual{min-width:0}

/* Journal (visuel hero) */
.log{border:1px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff;font:13px/1.5 var(--mono)}
.log-head{display:flex;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff}
.log-row{display:grid;grid-template-columns:46px minmax(0,1fr) max-content;gap:14px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--rule)}
.log-row span:first-child{color:var(--muted)}
.log-row span:nth-child(2){color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-row span:last-child{white-space:nowrap;color:var(--accent-ink);background:var(--accent-soft);padding:0 6px;border-radius:3px}
.log-foot{padding:12px 16px;color:var(--text);background:var(--bg-alt)}

/* Bandeau chiffres */
.stats{background:var(--ink);color:#fff}
.stats dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stats dl>div{display:flex;gap:14px;align-items:baseline;padding:26px 0;border-left:1px solid #3a332e;padding-left:24px}
.stats dl>div:first-child{border-left:0;padding-left:0}
.stats dt{font:600 30px var(--sans);letter-spacing:-.02em}
.stats dd{font-size:15px;color:var(--cta-text)}

/* Sections numérotées */
.sec .wrap{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 64px}
@media (max-width:900px){.sec .wrap{grid-template-columns:minmax(0,1fr);padding-top:64px;padding-bottom:64px}}
.sec + .sec:not(.alt) .wrap{border-top:1px solid var(--rule)}
.sec.alt{background:var(--bg-alt);border-block:1px solid var(--rule)}
.sec-label p{padding-top:12px;border-top:3px solid var(--accent);font:500 13px var(--mono);color:var(--accent-ink);max-width:180px}
.sec-body{min-width:0}
.sec h2{margin-bottom:12px;font:600 clamp(28px,3.2vw,38px)/1.15 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.sec-sub{margin-bottom:44px;font-size:18px;color:var(--muted);max-width:640px}
.sec h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.sec p,.sec li,.sec dd{text-wrap:pretty}

/* Liste à filets (problème) */
.rules{counter-reset:r}
.rules>div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;padding:26px 0;border-top:1px solid var(--rule)}
.rules>div::before{counter-increment:r;content:counter(r,decimal-leading-zero);grid-row:span 2;font:500 14px/1.7 var(--mono);color:var(--accent)}
.rules>div:last-child{border-bottom:1px solid var(--rule)}
.rules p{max-width:640px;color:var(--text)}

/* Grille 3 colonnes (filtres) */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:3px solid var(--ink)}
.cols>div{padding:24px 24px 28px 0}
.cols>div+div{padding-left:24px;border-left:1px solid var(--rule)}
@media (max-width:820px){.cols>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.cols h3{margin-bottom:10px}
.cols p:not(.chip){font-size:16px;color:var(--text)}
.chip{display:inline-block;margin-bottom:14px;padding:3px 9px;border-radius:3px;font:500 12px var(--mono);background:var(--accent-soft);color:var(--accent-ink)}
.chip.strong{background:var(--accent);color:var(--on-accent)}

/* Comparatif */
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:6px;background:#fff}
.compare{width:100%;min-width:680px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.compare tbody tr:last-child>*{border-bottom:0}
.compare thead th{font-weight:600;color:var(--ink);background:var(--bg-alt);border-bottom:1px solid var(--ink)}
.compare thead th.mine{background:var(--accent);color:var(--on-accent);border-bottom-color:var(--accent)}
.compare tbody th{width:34%;font-weight:500;color:var(--ink)}
.compare td{color:var(--text)}
.compare td.mine{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.notes{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px 48px;font-size:16px;color:var(--text)}
.notes strong{color:var(--ink);font-weight:600}

/* Grille définitions (back-office) */
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 48px}
.defs>div{padding:22px 0 26px;border-top:1px solid var(--rule)}
.defs dt{margin-bottom:6px;font-weight:600;font-size:17px}
.defs dd{font-size:16px;color:var(--text)}

/* Listes (confidentialité) */
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px 48px;font-size:16px}
.lists>div{border-top:3px solid var(--ink);padding-top:20px}
.lists h3{margin-bottom:14px}
.lists ul{list-style:none;padding:0;display:grid;gap:0}
.lists li{padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);color:var(--text);position:relative}
.lists li::before{content:"";position:absolute;left:2px;top:20px;width:10px;height:2px;background:var(--accent)}

/* Vidéo */
.video{width:100%;height:auto;border-radius:6px;border:1px solid var(--ink);background:var(--ink)}

/* Specs */
.specs{font-size:16px;border-top:3px solid var(--ink)}
.specs>div{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--rule)}
.specs dt{color:var(--muted);font:500 14px/1.9 var(--mono)}
.specs dd{color:var(--ink)}

/* CTA */
.cta{background:var(--cta);color:#fff}
.cta .wrap{padding-top:96px;padding-bottom:96px;display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-end;justify-content:space-between}
.cta-text{flex:1 1 520px;min-width:0}
.cta h2{margin-bottom:16px;font:600 clamp(30px,3.6vw,44px)/1.1 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.cta p{max-width:560px;font-size:18px;color:var(--cta-text)}
.cta a{color:#fff}
.cta a.quiet{color:var(--cta-text)}
.cta .btn{background:#fff;color:var(--ink)}
.cta .btn:hover{background:var(--accent-soft);color:var(--ink)}
.cta :focus-visible{outline-color:#fff}

/* Footer */
.site-footer{background:var(--cta);border-top:1px solid #3a332e}
.site-footer .wrap{padding-top:24px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--cta-text)}
.site-footer a{color:#fff}

/* Aplats orange vif : texte encre dessus (6.1:1). Le texte orange sur blanc reste en orange brûlé #9a3412 (7.3:1). */
:root{--fill:#f26a1b;--fill-hover:#d9560c}
.btn,.chip.strong,.compare thead th.mine{background:var(--fill);color:var(--ink)}
.btn:hover{background:var(--fill-hover);color:var(--ink)}
.compare thead th.mine{border-bottom-color:var(--fill)}
.sec-label p{border-top-color:var(--fill)}
.log-head{border-bottom:4px solid var(--fill)}
.stats{border-bottom:4px solid var(--fill)}
.cta .btn{background:var(--fill);color:var(--ink)}
.cta .btn:hover{background:#fff;color:var(--ink)}