/* TestDébit — feuille de style
   Palette : papier froid, encre marine, bleu signal (download), vert-bleu (upload).
   Une seule famille : IBM Plex Sans (latin) + IBM Plex Sans Arabic. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/plex-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/plex-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/plex-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/plex-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/plex-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plex-latinext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/plex-latinext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --ink:#0F2240; --ink2:#4A5970; --muted:#6B7A90; --line:#DCE3EC;
  --signal:#0A5FD8; --signal-ink:#0848A6; --teal:#0F8F7E; --ok:#16825D; --warn:#B86E00; --bad:#C2363A;
  --panel:#0F2240; --panel2:#17305A; --panel-line:#27416C; --p-text:#E8EEF7; --p-muted:#9FB0C9; --p-dl:#5AA8FF; --p-ul:#3FD0B9;
  --r:10px; --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[lang="ar"]{--font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%}
a{color:var(--signal-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--signal)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--surface);padding:8px 14px;border-radius:6px;z-index:99}
.skip:focus{top:8px}
h1,h2,h3{line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(28px,4.2vw,40px);margin:0 0 10px}
h2{font-size:clamp(21px,2.6vw,26px);margin:36px 0 10px}
h3{font-size:19px;margin:24px 0 6px}
p{margin:0 0 14px}

/* ---------- header ---------- */
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
header.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;white-space:nowrap}
.logo em{font-style:normal;font-weight:500;color:var(--muted)}
.logo:hover{color:var(--ink)}
nav.main{display:flex;gap:22px}
nav.main a{color:var(--ink2);text-decoration:none;font-size:15.5px;font-weight:500;padding:20px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink);border-bottom-color:var(--signal)}
.langs{display:flex;gap:2px;margin-inline-start:auto;font-size:14px}
.langs a{color:var(--muted);text-decoration:none;padding:4px 8px;border-radius:6px}
.langs a:hover{color:var(--ink);background:var(--paper)}
.langs a[aria-current]{color:var(--ink);font-weight:600;background:var(--paper)}
nav.main .langs{display:none}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0}
.menu-btn span{width:18px;height:2px;background:var(--ink);transition:transform .2s}
@media (max-width:860px){
  header.top .wrap{gap:12px}
  .menu-btn{display:flex}
  header.top .langs{margin-inline-start:auto}
  header.top .langs a:not([aria-current]){display:none}
  nav.main .langs{display:flex;margin:12px 0 0;gap:8px}
  header.top nav.main .langs a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:15px;color:var(--ink2)}
  nav.main .langs a[aria-current]{background:var(--paper);color:var(--ink);border-color:var(--line)}
  body.nav-open header.top .wrap>.langs{visibility:hidden}
  nav.main{display:none;position:absolute;top:64px;inset-inline:0;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:6px 20px 14px}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  nav.main a[aria-current]{border-bottom-color:var(--line);color:var(--signal-ink)}
  body.nav-open nav.main{display:flex}
  body.nav-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  body.nav-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
}

/* ---------- ads (vides tant qu'AdSense n'est pas configuré) ---------- */
.ad{margin:20px auto;text-align:center;overflow:hidden;max-width:100%}
.ad-empty{display:none}
.ad::before{content:"Publicité";display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
html[lang="ar"] .ad::before{content:"إعلان";letter-spacing:0} html[lang="en"] .ad::before{content:"Advertisement"}
.ad .adsbygoogle{display:inline-block;margin:0 auto}
.ad-banner .adsbygoogle{width:320px;height:100px}
.ad-banner{min-height:118px}
@media (min-width:800px){.ad-banner .adsbygoogle{width:728px;height:90px}.ad-banner{min-height:108px}}
.ad-rect .adsbygoogle{width:300px;height:250px}
.ad-rect{min-height:268px}

/* ---------- breadcrumbs / intro ---------- */
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.intro{text-align:center;max-width:760px;margin:26px auto 18px}
.intro p{color:var(--ink2);font-size:17px;margin:0}
.intro.left{text-align:start;margin-inline:0}

/* ---------- panneau de mesure ---------- */
/* ---------- scène du test (pleine largeur, sombre) ---------- */
html,body{overflow-x:clip}
.stage{position:relative;margin:0 calc(50% - 50vw);padding:26px 20px 30px;color:var(--p-text);overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%,rgba(31,107,255,.30),transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 10%,rgba(63,208,185,.10),transparent 70%),
    linear-gradient(180deg,#0A1630 0%,#0C1B3A 60%,#0A1630 100%)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,160,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,230,.07) 1px,transparent 1px);
  background-size:36px 36px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 75%)}
.stage-in{position:relative;max-width:900px;margin:0 auto}
.stage .intro{margin:6px auto 22px}
.stage .intro h1{color:#fff}
.stage .intro p{color:#A9B9D3}
main > .crumbs + .stage{margin-top:4px}

.meter{color:var(--p-text);max-width:880px;margin:0 auto}
.metrics{display:grid;grid-template-columns:1fr 1fr .75fr .75fr;gap:10px}
.m{position:relative;display:flex;flex-direction:column;padding:12px 14px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(160,190,240,.10);transition:border-color .3s,background .3s,box-shadow .3s}
.mk{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--p-muted);font-weight:500;white-space:nowrap}
.mk svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m.dl .mk svg{color:var(--p-dl)} .m.ul .mk svg{color:var(--p-ul)}
.mv{font-size:clamp(30px,6vw,44px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;direction:ltr;text-align:start;margin-top:4px;color:#fff}
.m.sm .mv{font-size:clamp(22px,4vw,30px);margin-top:auto}
.mu{font-size:12.5px;color:var(--p-muted)}
.m.dl .mv{color:var(--p-dl)} .m.ul .mv{color:var(--p-ul)}
.m.active{background:rgba(255,255,255,.06)}
.m.active.dl{border-color:rgba(90,168,255,.55);box-shadow:0 0 0 1px rgba(90,168,255,.25),0 8px 30px -10px rgba(47,155,255,.6)}
.m.active.ul{border-color:rgba(63,208,185,.55);box-shadow:0 0 0 1px rgba(63,208,185,.25),0 8px 30px -10px rgba(47,211,166,.6)}
.m.active .mk{color:#fff}
.m.pop .mv{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (max-width:600px){.metrics{grid-template-columns:1fr 1fr;gap:8px}.m{padding:10px 12px}
  .m.sm{flex-direction:row;align-items:baseline;gap:5px;padding:9px 12px}.m.sm .mk{margin-inline-end:auto;align-self:center}.m.sm .mv{font-size:21px;margin:0}
  .stage{padding-top:20px}.stage .intro{margin-bottom:16px}.dial{margin-top:6px}}

.dial{position:relative;width:min(360px,86vw);margin:14px auto -46px;aspect-ratio:1/1}
.dial svg{width:100%;height:100%;overflow:visible}
.g-core{opacity:.0;transition:opacity .6s}
.dial.live .g-core{opacity:1}
.g-bg{fill:none;stroke:rgba(140,175,235,.13);stroke-width:14;stroke-linecap:round;transition:stroke .5s}
.dial.live .g-bg{stroke:rgba(140,175,235,.16)}
.g-fg{fill:none;stroke-width:14;stroke-linecap:round}
.g-head{fill:#fff}
.g-lbl{fill:#7F93B5;font-size:12.5px;font-family:var(--font);font-weight:500;transition:fill .3s}
.g-lbl.on{fill:#fff}
.g-tick{stroke:rgba(150,180,230,.28);stroke-width:1.6}
.g-tick.maj{stroke:rgba(170,200,245,.5);stroke-width:2.2}
#g-ticks line,#g-labels text{opacity:0;transition:opacity .35s ease calc(var(--i,0) * 22ms)}
.dial.live #g-ticks line,.dial.live #g-labels text{opacity:1}
.hub{fill:#0D1C3B;stroke:#fff;stroke-width:2.5}
.hub-dot{fill:#fff}
#g-needle{transition:opacity .3s;filter:drop-shadow(0 0 6px rgba(120,200,255,.7))}
.g-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.g-readout{display:flex;flex-direction:column;align-items:center;margin-top:150px;animation:fadeup .5s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-val{font-size:clamp(38px,9vw,50px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;direction:ltr;color:#fff;letter-spacing:-.02em;text-shadow:0 0 24px rgba(90,168,255,.45)}
.g-unit{font-size:13px;color:var(--p-muted);direction:ltr;margin-top:2px}
.g-phase{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;margin-top:8px;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.07)}
.g-phase:empty{display:none}
.g-phase::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.running .g-phase::before{animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* bouton GO : anneau dégradé tournant + ondes */
.go{position:relative;pointer-events:auto;width:172px;height:172px;border-radius:50%;border:none;cursor:pointer;padding:0;
  font-family:var(--font);color:#fff;background:radial-gradient(circle at 50% 35%,#1C4590 0%,#10275A 55%,#0B1A3C 100%);
  box-shadow:0 0 50px rgba(40,130,255,.45),inset 0 0 28px rgba(80,170,255,.35);transition:transform .25s ease,box-shadow .25s ease}
.go::before{content:"";position:absolute;inset:-4px;border-radius:50%;padding:4px;
  background:conic-gradient(#1E5BFF,#5BE7FF,#3FD0B9,#1E5BFF 70%,#1E5BFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.go-txt{position:relative;font-size:46px;font-weight:700;letter-spacing:.06em;text-shadow:0 0 18px rgba(120,200,255,.8)}
.go-rip{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(91,231,255,.55);opacity:0;pointer-events:none}
.go:hover{transform:scale(1.04);box-shadow:0 0 70px rgba(40,130,255,.65),inset 0 0 34px rgba(80,170,255,.5)}
.go:active{transform:scale(.97)}
.go.launch{animation:launch .45s cubic-bezier(.5,0,.75,0) forwards}
@keyframes launch{to{transform:scale(.15);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .go::before{animation:spin 3.2s linear infinite}
  .go-rip{animation:ripple 2.6s ease-out infinite}
  .go-rip.r2{animation-delay:1.3s}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

.graph{display:block;width:100%;max-width:720px;height:0;margin:0 auto;opacity:0;transition:opacity .4s,height .4s}
.graph.on{height:72px;opacity:1}
.ctrl{text-align:center;margin-top:14px;min-height:46px;position:relative}
.meter .btn.again{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:99px;padding:13px 24px;background:linear-gradient(90deg,#1E5BFF,#2F9BFF);box-shadow:0 8px 26px -8px rgba(47,155,255,.8)}
.meter .btn.again svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.meter .btn.again:hover{background:linear-gradient(90deg,#2A66FF,#45A8FF)}
.meter .btn.ghost{border-radius:99px;color:var(--p-text);border-color:rgba(160,190,240,.25);background:rgba(255,255,255,.04)}
.meter .btn.ghost:hover{background:rgba(255,255,255,.09);color:#fff}
.conn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ci{display:flex;gap:12px;align-items:center;min-width:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(160,190,240,.10)}
.ci svg{width:22px;height:22px;color:var(--p-dl);flex:none}
.ci div{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ci small{font-size:12.5px;color:var(--p-muted)}
.ci b{font-weight:600;font-size:15.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci span{font-size:12.5px;color:var(--p-muted);direction:ltr;text-align:start}
@media (max-width:520px){.conn{grid-template-columns:1fr;gap:8px}}

/* ---------- boutons ---------- */
.btn{display:inline-block;font-family:var(--font);font-size:16px;font-weight:600;line-height:1;padding:12px 20px;border-radius:6px;border:1px solid var(--signal);background:var(--signal);color:#fff;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--signal-ink);border-color:var(--signal-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--signal-ink)}
.btn.ghost:hover{background:rgba(10,95,216,.06);color:var(--signal-ink)}
button.link{font:inherit;font-size:14px;font-weight:500;color:var(--signal-ink);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}

/* ---------- résultat & historique ---------- */
.result{display:none;max-width:880px;margin:18px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.result.show{display:block}
.result h2{margin:0 0 12px;font-size:22px}
.verdict{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
@media (max-width:600px){.verdict{grid-template-columns:1fr}}
.verdict li{display:flex;gap:10px;align-items:baseline}
.verdict .ic{flex:none;width:18px;font-weight:700;text-align:center}
.ic.y{color:var(--ok)} .ic.m{color:var(--warn)} .ic.n{color:var(--bad)}
.plan{font-size:15.5px;color:var(--ink2)}
.plan select{font:inherit;font-size:15px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.tip{font-size:15.5px;color:var(--ink2)}
.history{max-width:880px;margin:24px auto 0}
.history h2{font-size:19px;margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{font-weight:600;color:var(--ink2);font-size:14.5px;border-bottom:2px solid var(--line)}
.history td{font-variant-numeric:tabular-nums}
.history .empty{color:var(--muted)}
.tablewrap{overflow-x:auto}

/* ---------- contenu ---------- */
.cols{max-width:760px;margin:0 auto}
.prose{max-width:760px}
.prose > p,.prose li{color:#24334A}
.prose ul,.prose ol{padding-inline-start:22px;margin:0 0 16px}
.prose li{margin:6px 0}
.prose h2{scroll-margin-top:84px}
.prose table{margin:10px 0 18px;background:var(--surface)}
.prose blockquote{margin:18px 0;padding:2px 0 2px 16px;border-inline-start:3px solid var(--line);color:var(--ink2);font-size:15.5px}
.prose.page{margin:26px 0 0}
.sub{color:var(--ink2)}
.cta-line{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:16px 0;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-line span{font-weight:600}
.tldr{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--signal);border-radius:6px;padding:14px 18px;margin:18px 0 20px;color:#24334A}
.tldr b:first-child{margin-inline-end:6px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:500;line-height:1;color:var(--signal-ink);background:rgba(10,95,216,.08);transition:transform .2s}
.faq details[open] summary::after{content:"−";background:var(--signal);color:#fff}
.faq summary:hover{color:var(--signal-ink)}
.faq p{margin:8px 0 0;color:#24334A}
.toc{border:1px solid var(--line);border-radius:6px;padding:10px 16px;margin:0 0 18px;background:var(--surface)}
.toc summary{cursor:pointer;font-weight:600}
.toc ol{margin:8px 0 2px;font-size:15.5px}

/* listes de guides (pas de cartes) */
.guides{list-style:none;margin:8px 0 18px;padding:0;border-top:1px solid var(--line)}
.guides li{padding:14px 0;border-bottom:1px solid var(--line)}
.guides a{font-weight:600;font-size:17.5px;text-decoration:none;color:var(--ink)}
.guides a:hover{color:var(--signal-ink);text-decoration:underline}
.guides p{margin:4px 0 0;color:var(--ink2);font-size:15.5px;line-height:1.55}
.g-cat{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.more{max-width:760px}
.more h2 a{color:var(--ink);text-decoration:none}
.more h2 a:hover{color:var(--signal-ink)}
.links2{max-width:760px;margin:10px auto 0;display:grid;grid-template-columns:1.5fr 1fr;gap:28px}
@media (max-width:700px){.links2{grid-template-columns:1fr;gap:0}}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:10px 0;border-bottom:1px solid var(--line)}
.plain a{font-weight:600}
.plain p{margin:2px 0 0;font-size:15px;color:var(--ink2)}
.others{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15.5px}
main > .more,main > .cols,main > .links2{margin-inline:auto}

/* article */
.art{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:48px;align-items:start;margin-top:22px}
@media (max-width:1040px){.art{grid-template-columns:1fr}.side{display:none}}
@media (min-width:1041px){.art .toc{display:none}}
.art-meta{color:var(--muted);font-size:15px;margin:0 0 6px}
.side{position:sticky;top:84px;font-size:15px}
.side-cta{background:var(--panel);color:var(--p-text);border-radius:var(--r);padding:16px 18px;margin-bottom:22px}
.side-cta p{margin:0 0 10px;font-weight:600}
.side-toc b{display:block;margin-bottom:6px}
.side-toc ol{margin:0;padding-inline-start:18px;line-height:1.5}
.side-toc li{margin:6px 0}
.side-toc a{color:var(--ink2);text-decoration:none}
.side-toc a:hover{color:var(--signal-ink);text-decoration:underline}
.author{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:28px 0}
.author p{margin:0;font-size:15px;color:var(--ink2)}
.author b{color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.pager a{text-decoration:none;color:var(--ink);font-weight:600;line-height:1.4}
.pager a:hover{color:var(--signal-ink)}
.pager small{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-bottom:2px}
.pager .nx{text-align:end}

/* questionnaire */
.quiz{max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.quiz fieldset{border:none;margin:0 0 18px;padding:0}
.quiz legend{font-weight:600;font-size:17.5px;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:8px 12px;cursor:pointer;font-size:15.5px;background:var(--surface)}
.opts input{accent-color:var(--signal)}
.opts label:has(input:checked){border-color:var(--signal);background:#EEF4FD}
.quiz-res{display:none;max-width:760px;margin:18px 0 0;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--signal);border-radius:6px;padding:16px 20px;scroll-margin-top:84px}
.quiz-res.show{display:block}
.quiz-res h2{margin:0 0 8px;font-size:22px}
.big{font-size:34px;font-weight:600;color:var(--signal-ink);direction:ltr;display:inline-block}

/* baromètre */
.baro{max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.bar-row{display:grid;grid-template-columns:140px 1fr 80px;gap:12px;align-items:center;margin:10px 0;font-size:15.5px}
.bar{height:10px;border-radius:5px;background:var(--paper);overflow:hidden}
.bar i{display:block;height:100%;background:var(--signal)}

/* ---------- footer ---------- */
footer{margin-top:56px;background:var(--surface);border-top:1px solid var(--line);padding:36px 0 30px;font-size:15px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1fr;gap:28px}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}
.fbrand p{color:var(--ink2);font-size:14px;margin:10px 0}
.fbrand .langs{margin:0}
footer h4{font-size:15px;margin:0 0 8px}
footer ul{list-style:none;margin:0;padding:0;line-height:1.5}
footer li{margin:7px 0}
footer ul a{color:var(--ink2);text-decoration:none}
footer ul a:hover{color:var(--ink);text-decoration:underline}
.copy{color:var(--muted);font-size:14px;margin:26px 0 0;border-top:1px solid var(--line);padding-top:16px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html[dir="rtl"] .mv,html[dir="rtl"] .ci span{text-align:right}

/* ---------- résultat : latence en charge + notes A-F ---------- */
.grades{margin:4px 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:16px;align-items:center}
.grades .ll{display:flex;flex-direction:column;line-height:1.3}
.grades .ll span{font-size:13.5px;color:var(--muted)}
.grades .ll b{font-size:26px;font-variant-numeric:tabular-nums}
.grades .ll small{font-size:13px;color:var(--ink2)}
.grades .ll small.bb0{color:var(--ok)} .grades .ll small.bb1{color:var(--warn)} .grades .ll small.bb2{color:var(--bad)}
.gr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gr li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.gr b{font-size:14.5px;font-weight:600;line-height:1.2}
.gr small{grid-column:2;font-size:12.5px;color:var(--muted)}
.gl{grid-row:span 2;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:22px;font-weight:700;color:#fff;background:var(--muted)}
.gl.gA{background:#12935F} .gl.gB{background:#3DA35D} .gl.gC{background:#B98A00} .gl.gD{background:#D2741C} .gl.gE{background:#CC4B37} .gl.gF{background:#A32630}
@media (max-width:640px){.grades{grid-template-columns:1fr}.gr{grid-template-columns:1fr}}
.ctx{display:flex;flex-wrap:wrap;gap:10px 18px;margin:6px 0 4px;font-size:15px;color:var(--ink2)}
.ctx label{display:flex;align-items:center;gap:6px}
.ctx select{font:inherit;font-size:15px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);max-width:200px}
.ctx-note{font-size:13px;color:var(--muted);margin:0 0 10px}
.result .plan{margin:4px 0}
.res-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.res-actions .btn{font-size:15px;padding:10px 16px}

/* ---------- liste des outils (accueil) ---------- */
.tools-list{max-width:760px;margin:10px auto 0}
ul.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media (max-width:700px){ul.cols2{grid-template-columns:1fr}}

/* ---------- diagnostic ---------- */
.dg{max-width:880px;margin:6px auto 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.dg h2{margin:0 0 10px;font-size:21px}
.dg-plan{display:flex;align-items:center;gap:8px;font-size:15.5px;color:var(--ink2);margin-bottom:10px}
.dg-plan select{font:inherit;font-size:15px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.dg-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.dg-steps li{counter-increment:s;display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.dg-steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--paper);border:1px solid var(--line);color:var(--ink2)}
.dg-steps li.cur::before{background:var(--signal);border-color:var(--signal);color:#fff}
.dg-steps li.done::before{content:"✓";background:var(--ok);border-color:var(--ok);color:#fff}
.dg-steps li div{flex:1;display:flex;flex-direction:column;line-height:1.35}
.dg-steps li small{color:var(--muted);font-size:14px;direction:ltr;text-align:start}
.dg-steps .btn{font-size:15px;padding:10px 14px;white-space:nowrap}
.dg-steps .btn:disabled{opacity:.4;cursor:default}
@media (max-width:560px){.dg-steps li{flex-wrap:wrap}.dg-steps li .btn{margin-inline-start:46px}}
.dg-msg{color:var(--bad);font-size:14.5px;margin:6px 0 0;min-height:1em}
.dg-verdict{margin:8px 0 10px;padding:14px 16px;border-radius:10px;background:var(--paper);border-inline-start:4px solid var(--signal)}
.dg-verdict h2{font-size:19px;margin:0 0 6px}
.dg-verdict p{margin:0 0 8px}

/* ---------- rapport ---------- */
.rp{max-width:880px}
.rp h2{font-size:21px;margin:22px 0 10px}
.rp-empty{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.rp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rp-c{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;line-height:1.3}
.rp-c small{color:var(--muted);font-size:13px}
.rp-c b{font-size:22px;font-variant-numeric:tabular-nums;word-break:break-word}
.rp-c span{font-size:13px;color:var(--ink2)}
.rp-warn{margin:12px 0 0;padding:10px 14px;border-radius:8px;background:#FFF5E0;color:#7A4A00;font-size:15px}
.rp-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
@media (max-width:700px){.rp-form{grid-template-columns:1fr}}
.rp-form label{display:flex;flex-direction:column;font-size:14px;color:var(--ink2);gap:4px}
.rp-form input,.rp textarea,.cl input,.cl select{font:inherit;font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.rp textarea{width:100%;line-height:1.55;resize:vertical}
.rp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media print{
  header.top,footer,.ad,.rp-actions,.rp-form,.crumbs,.intro p,main > article,.skip,.toast{display:none!important}
  body,html{background:#fff}
  .rp textarea{border:none;height:auto;min-height:0;overflow:visible;resize:none}
  .rp-c{break-inside:avoid}
}

/* ---------- pannes ---------- */
.pn{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px}
.pn.one{grid-template-columns:1fr;max-width:620px}
@media (max-width:900px){.pn{grid-template-columns:1fr}}
.pn-upd{font-size:13.5px;color:var(--muted);margin:-6px 0 10px;min-height:1em}
.pn-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--muted);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.pn-card header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pn-card h2{margin:0;font-size:20px}
.pn-st{font-size:13.5px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--paper);color:var(--ink2);white-space:nowrap}
.st-ok{border-top-color:var(--ok)} .st-ok .pn-st{background:#E3F5EC;color:var(--ok)}
.st-minor{border-top-color:var(--warn)} .st-minor .pn-st{background:#FFF1DC;color:var(--warn)}
.st-major{border-top-color:var(--bad)} .st-major .pn-st{background:#FDE5E6;color:var(--bad)}
.pn-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pn-nums div{display:flex;flex-direction:column;line-height:1.25}
.pn-nums b{font-size:22px;font-variant-numeric:tabular-nums}
.pn-nums i{font-style:normal;font-size:13px;color:var(--muted);font-weight:500}
.pn-nums small,.pn-chart small{font-size:12.5px;color:var(--muted)}
.pn-spark{display:block;width:100%;height:46px;margin-top:4px}
.pn-spark rect{fill:var(--signal);opacity:.75}
.st-major .pn-spark rect{fill:var(--bad)} .st-minor .pn-spark rect{fill:var(--warn)}
.pn-ask p{margin:0 0 8px;font-weight:600;font-size:15px}
.pn-btns{display:flex;flex-wrap:wrap;gap:6px}
.pn-btns .btn{font-size:14.5px;padding:9px 12px}
.pn-ask .pn-msg{font-weight:500;color:var(--ok);margin:8px 0 0;min-height:1em}
.pn-more{font-weight:600;font-size:15px}
.pn-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}

/* ---------- villes ---------- */
.ct{max-width:880px}
.ct-empty{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;color:var(--ink2)}

/* ---------- calculateur ---------- */
.cl{max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.cl-in{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.cl-in{grid-template-columns:1fr}}
.cl-in label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--ink2)}
.cl-row{display:flex;gap:8px;align-items:center}
.cl-row input{flex:1;min-width:0}
.cl-pre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0}
.cl-pre small{color:var(--muted);margin-inline-end:4px}
.chip{font:inherit;font-size:14px;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--signal);color:var(--signal-ink)}
.cl-res{background:var(--panel);color:#fff;border-radius:10px;padding:16px 18px;text-align:center}
.cl-res small{color:var(--p-muted)}
.cl-res b{display:block;font-size:clamp(32px,7vw,46px);line-height:1.15;font-variant-numeric:tabular-nums}
.cl-res p{margin:4px 0 0;font-size:13px;color:var(--p-muted)}
.cl h3{font-size:17px;margin:18px 0 6px}
.cl-t td{font-variant-numeric:tabular-nums}
.cl-t tr.me td{font-weight:700;color:var(--signal-ink)}
.dg-steps li.done .btn{display:none}
.pn-nums small{line-height:1.3}
.avg{font-size:15px;color:var(--ink2);margin:0 0 6px}.avg:empty{display:none}
.sources{margin:26px 0 8px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sources h2{font-size:18px;margin:0 0 8px}
.sources ul{margin:0;padding-inline-start:20px;font-size:15.5px}
.sources li{margin:3px 0}
.wgs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px}
@media (max-width:700px){.wgs{grid-template-columns:1fr}}
.wg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.wg h2{margin:0;font-size:18px}
.wg-prev{padding:14px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;min-height:84px}
.wg textarea{font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:none;width:100%}
.wg .btn{align-self:flex-start}
.logo .wm{font-weight:700;background:linear-gradient(90deg,#1E5BFF,#2FB6FF);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- effets du test (v6) ---------- */
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.g-center{z-index:2}
.g-sub{font-size:12.5px;color:#C9D6EA;margin-top:6px;font-variant-numeric:tabular-nums;min-height:1em}
.go-orb{position:absolute;inset:-14px;border-radius:50%;pointer-events:none}
.go-orb::after{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#5BE7FF;box-shadow:0 0 10px 3px rgba(91,231,255,.7)}
.go-orb.o2{inset:-26px}.go-orb.o2::after{width:5px;height:5px;background:#9CC2FF;box-shadow:0 0 8px 2px rgba(120,170,255,.6)}
.go-orb.o3{inset:-6px}.go-orb.o3::after{width:4px;height:4px;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.6)}
.go-shock{position:absolute;left:50%;top:50%;width:172px;height:172px;margin:-86px 0 0 -86px;border-radius:50%;border:3px solid rgba(91,231,255,.9);opacity:0;pointer-events:none}
.go-shock.on{animation:shock .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shock{0%{transform:scale(.6);opacity:1;border-width:6px}100%{transform:scale(2.1);opacity:0;border-width:1px}}
@media (prefers-reduced-motion:no-preference){
  .go-orb.o1{animation:spin 6s linear infinite}
  .go-orb.o2{animation:spin 9s linear infinite reverse}
  .go-orb.o3{animation:spin 3.8s linear infinite}
}
.dial.live .g-bg{animation:track .7s ease-out both}
@keyframes track{from{stroke-dasharray:0 900}to{stroke-dasharray:900 0}}

/* footer : colonnes repliables sur mobile */
details.fcol summary{list-style:none;cursor:default}
details.fcol summary::-webkit-details-marker{display:none}
details.fcol summary h4{display:inline}
@media (min-width:701px){details.fcol summary{pointer-events:none}details.fcol summary h4{display:block}}
@media (max-width:700px){
  details.fcol{border-top:1px solid var(--line);padding:12px 0}
  details.fcol summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  details.fcol summary::after{content:"+";font-size:20px;color:var(--muted)}
  details.fcol[open] summary::after{content:"−"}
  details.fcol summary h4{margin:0}
  details.fcol ul{margin-top:8px}
}
/* header sombre sur les pages avec le test */
header.top.dark{background:#0A1630;border-bottom-color:rgba(160,190,240,.12)}
header.top.dark .logo{color:#fff}
header.top.dark .logo em{color:#8FA3C4}
header.top.dark .logo .wm{background:linear-gradient(90deg,#5AA8FF,#5BE7FF);-webkit-background-clip:text;background-clip:text}
header.top.dark nav.main a{color:#B9C6DC}
header.top.dark nav.main a:hover,header.top.dark nav.main a[aria-current]{color:#fff}
header.top.dark .langs a{color:#9FB0C9}
header.top.dark .langs a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
header.top.dark .langs a:hover{background:rgba(255,255,255,.06);color:#fff}
header.top.dark .menu-btn{background:transparent;border-color:rgba(160,190,240,.25)}
header.top.dark .menu-btn span{background:#fff}
@media (max-width:860px){
  header.top.dark nav.main{background:#0A1630;border-bottom-color:rgba(160,190,240,.12)}
  header.top.dark nav.main a{border-bottom-color:rgba(160,190,240,.12)}
  header.top.dark nav.main a[aria-current]{color:#5BC8FF}
  header.top.dark nav.main .langs a{border-color:rgba(160,190,240,.25);color:#C9D6EA}
  header.top.dark nav.main .langs a[aria-current]{background:rgba(255,255,255,.08);color:#fff}
}
@media (max-width:700px){.fcols{gap:0}.fbrand{margin-bottom:14px}}

/* phase ping : l'échelle Mbps s'efface, explication visible */
.g-help{display:none;max-width:250px;margin-top:8px;font-size:12px;line-height:1.4;color:#AFC0DA;text-align:center}
.dial.pinging .g-help{display:block}
.dial.pinging #g-labels text{opacity:.18!important}
.dial.pinging #g-ticks line{opacity:.3!important}
.dial.pinging .g-readout{margin-top:120px}
.dial.pinging .g-val{color:#FFE2A3;text-shadow:0 0 24px rgba(255,196,77,.45)}

/* débit max + progression */
.mx{font-style:normal;color:#C9D6EA;font-variant-numeric:tabular-nums}
.g-prog{display:none;position:relative;width:150px;height:4px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.12)}
.g-prog i{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:linear-gradient(90deg,#1E5BFF,#5BE7FF);transition:width .3s}
.g-prog::after{content:attr(data-p);position:absolute;top:8px;left:0;right:0;text-align:center;font-size:11.5px;color:#9FB0C9;font-variant-numeric:tabular-nums}
.prog-on .g-prog{display:block}
.prog-on .g-sub{margin-top:22px}
html[dir="rtl"] .g-prog i{inset:0 0 0 auto}

/* ---------- verdict par usage (v7) ---------- */
.verdict{grid-template-columns:1fr 1fr;gap:8px}
.verdict li{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);line-height:1.3}
.vi{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.vi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vt{flex:1;font-size:14.5px;font-weight:500;min-width:0}
.vs{flex:none;font-size:12px;font-weight:700;padding:3px 8px;border-radius:99px}
.vy .vi{background:#E4F6EE;color:#12935F} .vy .vs{background:#E4F6EE;color:#0E7A4E}
.vm .vi{background:#FFF2DC;color:#C27A00} .vm .vs{background:#FFF2DC;color:#9A6200}
.vn .vi{background:#FDE7E8;color:#C2363A} .vn .vs{background:#FDE7E8;color:#A32630}
@media (max-width:600px){.verdict{grid-template-columns:1fr}}

/* ---------- notes jeux / visio / streaming (v7) ---------- */
.grades{display:block}
.grades .ll{margin-bottom:14px}
.gr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gr .gc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);--gc:#6B7A90;--gb:#EEF2F7}
.gc.gA{--gc:#12935F;--gb:#E4F6EE}.gc.gB{--gc:#3DA35D;--gb:#E8F6EA}.gc.gC{--gc:#C79300;--gb:#FFF5D9}
.gc.gD{--gc:#D2741C;--gb:#FFEEDD}.gc.gE{--gc:#CC4B37;--gb:#FDE8E4}.gc.gF{--gc:#A32630;--gb:#FBE3E5}
.gc .gi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--gb);color:var(--gc)}
.gc .gi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gc b{font-size:13.5px;font-weight:600;line-height:1.25}
.gring{position:relative;width:64px;height:64px}
.gring svg{width:64px;height:64px;transform:rotate(-90deg)}
.gring circle{fill:none;stroke-width:6}
.gring .rb{stroke:var(--gb)}
.gring .rf{stroke:var(--gc);stroke-linecap:round;stroke-dasharray:0 200;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)}
.gc .gl{position:absolute;inset:0;display:grid;place-items:center;width:auto;height:auto;border-radius:0;background:none!important;color:var(--gc);font-size:26px;font-weight:700}
.gc small{font-size:12.5px;color:var(--gc);font-weight:600;grid-column:auto}
@media (max-width:380px){.gr{gap:6px}.gc b{font-size:12.5px}}
.gc b{min-height:2.5em;display:flex;align-items:center}

/* ---------- éligibilité fibre ---------- */
.el{max-width:980px}
.el-form{display:flex;flex-wrap:wrap;gap:8px}
.el-form input{flex:1 1 260px;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.el-form .btn{padding:11px 18px}
.el-hint{font-size:14px;color:var(--muted);margin:8px 0 0}
.el-msg{min-height:1.2em;font-size:14.5px;color:var(--ink2);margin:6px 0}
.el-msg.err{color:var(--bad)}
.el-map{height:min(62vh,480px);border-radius:14px;border:1px solid var(--line);overflow:hidden;z-index:0}
.el-pin span{display:block;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--signal);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.el-pin.ok span{background:#12935F}
.el-res{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.el-res h2{margin:0 0 12px;font-size:20px}
.el-ops{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.el-op{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.el-logo{flex:none;min-width:118px;text-align:center;font-weight:700;font-size:14.5px;color:#fff;padding:8px 10px;border-radius:9px}
.l-iam .el-logo,.el-logo.l-iam{background:#C8102E}.el-logo.l-orange{background:#FF7900;color:#111}.el-logo.l-inwi{background:#7B2CBF}
.el-st{flex:1;font-weight:700;white-space:nowrap}
.el-op.st-yes .el-st{color:#12935F}.el-op.st-near .el-st{color:#B86E00}.el-op.st-no .el-st{color:var(--muted)}
.el-op.st-yes{border-color:#9AD9BC;background:#F2FBF6}
.el-op .btn{padding:8px 12px;font-size:14px}
.el-note{font-size:13.5px;color:var(--muted);margin:10px 0 0}
@media (max-width:520px){.el-logo{min-width:96px;font-size:13px}.el-op{flex-wrap:wrap}.el-op .btn{margin-inline-start:auto}}
/* offres */
.op-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:980px;margin:6px 0 4px}
@media (max-width:760px){.op-cards{grid-template-columns:1fr 1fr}}
.op-card{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:12px;text-decoration:none;color:#fff}
.op-card b{font-size:16px}.op-card span{font-size:12.5px;opacity:.9}
.op-card.l-iam{background:#C8102E}.op-card.l-orange{background:#FF7900;color:#111}.op-card.l-inwi{background:#7B2CBF}
.op-card.el-cta{background:var(--panel)}
.op-card:hover{filter:brightness(1.07);color:inherit}
.upd{font-size:13.5px}

/* ---------- guides en cartes avec image (v8) ---------- */
.guides.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.guides.cards li{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;transition:transform .2s,box-shadow .2s}
.guides.cards li:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(15,34,64,.45)}
.g-th{display:block;aspect-ratio:40/21;background:#0B1A3C}
.g-th img{display:block;width:100%;height:100%;object-fit:cover}
.g-tx{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.g-tx .g-cat{margin:0;font-size:12.5px;font-weight:600;color:var(--signal-ink);text-transform:uppercase;letter-spacing:.03em}
html[lang="ar"] .g-tx .g-cat{text-transform:none;letter-spacing:0}
.g-t{font-weight:600;font-size:16.5px;line-height:1.35;color:var(--ink);text-decoration:none}
.g-t:hover{color:var(--signal-ink);text-decoration:underline}
.g-tx p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{max-width:1060px}
.hero-img{margin:10px 0 18px}
.hero-img img{display:block;width:100%;height:auto;border-radius:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.tags a{font-size:14px;font-weight:600;padding:5px 11px;border-radius:99px;background:rgba(10,95,216,.08);color:var(--signal-ink);text-decoration:none}
.tags a:hover{background:var(--signal);color:#fff}
.sister{margin-top:12px;font-size:14px}
.plan-s{margin:26px 0}.plan-s h2{font-size:21px}.plan-s h2 a{color:inherit;text-decoration:none}