/* Corerank — Ressources (guides, baromètres, hub). DA V45, clair/sombre. v1 */
:root{
  --bg:#050507;--bg2:#0B0B10;--sur:#101018;--glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.12);
  --ink:#F4F3F0;--ink2:rgba(244,243,240,.68);--ink3:rgba(244,243,240,.50);--line:rgba(255,255,255,.1);
  --acc:#8FB8FF;--acc-ink:#050507;--cta:#8FB8FF;--cta-ink:#050507;--soft:rgba(143,184,255,.1);
  --s1:#3987e5;--s2:#d95926;--s3:#9085e9;--s4:#22a08a;--s5:#c264b0;--err:#FF9B93;
  --fd:'Instrument Sans',system-ui,sans-serif;--fs:'Instrument Serif',Georgia,serif;--fm:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--r:20px;color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#ECECEA;--bg2:#F5F5F3;--sur:#FFFFFF;--glass:rgba(0,0,0,.05);--glass-b:rgba(0,0,0,.1);--ink:#0B0B10;--ink2:rgba(11,11,16,.7);--ink3:rgba(11,11,16,.60);--line:rgba(0,0,0,.1);--acc:#1E4FD8;--acc-ink:#fff;--cta:#1E4FD8;--cta-ink:#fff;--soft:rgba(30,79,216,.08);--s1:#2a78d6;--s2:#eb6834;--s3:#4a3aa7;--s4:#0a8a6c;--s5:#a8449a;--err:#B3261E;color-scheme:light}
}
:root[data-theme="light"]{--bg:#ECECEA;--bg2:#F5F5F3;--sur:#FFFFFF;--glass:rgba(0,0,0,.05);--glass-b:rgba(0,0,0,.1);--ink:#0B0B10;--ink2:rgba(11,11,16,.7);--ink3:rgba(11,11,16,.60);--line:rgba(0,0,0,.1);--acc:#1E4FD8;--acc-ink:#fff;--cta:#1E4FD8;--cta-ink:#fff;--soft:rgba(30,79,216,.08);--s1:#2a78d6;--s2:#eb6834;--s3:#4a3aa7;--s4:#0a8a6c;--s5:#a8449a;--err:#B3261E;color-scheme:light}
:root[data-theme="dark"]{--bg:#050507;--bg2:#0B0B10;--sur:#101018;--glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.12);--ink:#F4F3F0;--ink2:rgba(244,243,240,.68);--ink3:rgba(244,243,240,.50);--line:rgba(255,255,255,.1);--acc:#8FB8FF;--acc-ink:#050507;--cta:#8FB8FF;--cta-ink:#050507;--soft:rgba(143,184,255,.1);--s1:#3987e5;--s2:#d95926;--s3:#9085e9;--s4:#22a08a;--s5:#c264b0;--err:#FF9B93;color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fd);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:76px}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ch{font-family:var(--fs);font-style:italic;color:var(--acc);font-size:1rem;display:block;margin-bottom:10px}
.cap{font-size:.76rem;letter-spacing:.02em;color:var(--ink3)}
.src{font-size:.74rem;color:var(--ink3)}

/* ─── nav (identique home) ─── */
.nav{position:fixed;inset:14px 14px auto;z-index:80;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.pill{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:100px;background:color-mix(in srgb,var(--bg2) 92%,transparent);border:1px solid var(--glass-b);font-size:.88rem;font-weight:500;transition:background .25s,transform .3s var(--ease);white-space:nowrap;color:var(--ink);cursor:pointer}
.pill:hover{background:var(--glass-b);transform:translateY(-1px)}
.pill .dot{width:16px;height:16px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--bg);font-size:.55rem;font-weight:700}
.pill.cta{background:var(--cta);color:var(--cta-ink);border-color:transparent;font-weight:600}
.nav .grp{display:flex;gap:8px;align-items:center;pointer-events:auto}
.nav .mid{display:none;gap:6px;pointer-events:auto}
.nav .mid .pill{height:36px;font-size:.8rem;font-weight:400}
.nav .mid .pill.on{background:var(--glass-b)}
.tgl{height:42px;width:42px;border-radius:50%;border:1px solid var(--glass-b);background:color-mix(in srgb,var(--bg2) 92%,transparent);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:1.1rem}
.nav .cta{display:none}
@media(min-width:760px){.nav .cta{display:inline-flex}}
@media(min-width:1180px){.nav .mid{display:flex}}
.menu{position:fixed;inset:0;z-index:85;background:color-mix(in srgb,var(--bg) 94%,transparent);display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .4s;padding:24px}
.menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease),visibility 0s}
.menu ul{list-style:none;display:grid;gap:6px;text-align:center}
.menu li a{display:block;font-size:clamp(1.7rem,5.6vw,3.6rem);letter-spacing:-.04em;line-height:1.15;color:var(--ink2)}
.menu li a:hover{color:var(--ink)}
.menu li a small{display:block;font-family:var(--fs);font-style:italic;font-size:.45em;letter-spacing:0;color:var(--ink3)}
.menu li.cta a{color:var(--acc)}
.menu .x{position:absolute;top:14px;right:14px}
.bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:82;display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-radius:100px;background:color-mix(in srgb,var(--bg2) 94%,transparent);border:1px solid var(--glass-b)}
.bar span{font-size:.82rem;color:var(--ink2)}
.bar .pill{height:38px}
@media(min-width:760px){.bar{display:none}body{padding-bottom:0}}
@media(max-width:759px){#cr-chat{bottom:78px!important}#cr-btt{bottom:132px!important}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:81;transition:width .1s linear}

/* ─── layout ─── */
.w{width:min(1180px,100% - 40px);margin-inline:auto}
.hd{padding:120px 0 40px}
.hd .crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--ink3);margin-bottom:22px}
.hd .crumb a:hover{color:var(--ink)}
.hd .crumb span::before{content:"/";margin-right:6px}
.hd h1{font-size:clamp(2.2rem,6vw,4.4rem);max-width:20ch}
.hd .std{font-size:1.2rem;color:var(--ink2);max-width:58ch;margin-top:22px;line-height:1.5}
.hd .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:.84rem;color:var(--ink3);align-items:center}
.hd .meta b{color:var(--ink);font-weight:500}
.hd .meta img{width:34px;height:34px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.hd .meta .by{display:flex;align-items:center;gap:10px}
.grid{display:grid;gap:40px}
@media(min-width:1100px){.grid{grid-template-columns:minmax(0,68ch) 300px;gap:72px;align-items:start}}
.rail{display:none}
@media(min-width:1100px){.rail{display:block;position:sticky;top:84px}}
.toc{border-left:1px solid var(--line);padding-left:16px;display:grid;gap:8px;font-size:.86rem;color:var(--ink3)}
.toc a{display:block;transition:color .2s}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc b{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:4px}

/* ─── article ─── */
.art{font-size:1.06rem}
.art>*+*{margin-top:1.15em}
.art h2{font-size:clamp(1.7rem,3.4vw,2.35rem);margin-top:2.4em;scroll-margin-top:84px}
.art h2 .n{font-family:var(--fs);font-style:italic;color:var(--acc);font-size:.7em;margin-right:.35em}
.art h3{font-size:1.28rem;margin-top:1.8em;letter-spacing:-.02em}
.art p{color:var(--ink2);max-width:68ch}
.art p.lead,.art .ans{color:var(--ink);font-weight:500}
.art .ans{font-size:1.08rem;padding-left:16px;border-left:2px solid var(--acc)}
.art ul,.art ol{padding-left:22px;color:var(--ink2);max-width:66ch;display:grid;gap:.5em}
.art li::marker{color:var(--acc)}
.art strong{color:var(--ink);font-weight:600}
.art a{color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--acc) 55%,transparent);transition:border-color .2s}
.art a:hover{border-color:var(--acc)}
.art code{font-family:var(--fm);font-size:.86em;background:var(--soft);padding:1px 6px;border-radius:5px}
.art pre{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;overflow-x:auto;font-family:var(--fm);font-size:.84rem;line-height:1.5;color:var(--ink2)}
.art .wrap{overflow-x:auto}
.art table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
.art th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:600}
.art td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.art td:first-child{color:var(--ink);font-weight:500}
.art figure{margin-top:1.6em}
.art figcaption{font-size:.78rem;color:var(--ink3);margin-top:8px}

/* À retenir : citable */
.key{margin-top:2em;padding:22px 24px 20px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);position:relative}
.key::before{content:"À retenir";font-family:var(--fs);font-style:italic;color:var(--acc);font-size:.95rem;display:block;margin-bottom:8px}
.key p{color:var(--ink);font-size:1.12rem;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.key .src{display:block;margin-top:10px}
.key .big{font-family:var(--fs);font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:var(--ink);display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}

/* Push 1 : encart après le 2e H2 */
.push{margin-top:2.4em;border-radius:var(--r);background:var(--cta);color:var(--cta-ink);padding:26px 26px 22px;display:grid;gap:12px}
.push b{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2;font-weight:500;color:var(--cta-ink)}
.push p{color:var(--cta-ink);opacity:.85;max-width:52ch}
.push .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.push .btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:100px;background:var(--cta-ink);color:var(--cta);font-weight:600;border:0;font-size:.95rem}
.push .alt{font-size:.84rem;opacity:.8;border-bottom:1px solid color-mix(in srgb,var(--cta-ink) 35%,transparent)}
.push .re{font-size:.8rem;opacity:.75}

/* Push 2 : carte rail */
.rail .card{margin-top:28px;border-radius:var(--r);border:1px solid var(--line);background:var(--sur);padding:20px;display:grid;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rail .card.show{opacity:1;transform:none}
.rail .card b{font-size:1.05rem;letter-spacing:-.02em;line-height:1.25;font-weight:500}
.rail .card p{font-size:.86rem;color:var(--ink2)}
.rail .card .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:100px;background:var(--cta);color:var(--cta-ink);font-weight:600;font-size:.88rem}
.rail .card .sub{font-size:.76rem;color:var(--ink3)}

/* Push 3 : fin d'article */
.end{margin-top:3.2em;display:grid;gap:18px;border-top:1px solid var(--line);padding-top:32px}
.end h2{font-size:1.7rem;margin:0}
.end ul{list-style:none;padding:0;display:grid;gap:10px}
.end li{padding-left:22px;position:relative;color:var(--ink2)}
.end li::before{content:"→";position:absolute;left:0;color:var(--acc)}
.end form{display:grid;gap:8px;max-width:520px}
.end input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--ink);font:400 1rem var(--fd);outline:none}
.end input:focus{border-color:var(--acc)}
.end button{border:0;border-radius:100px;padding:15px 22px;background:var(--cta);color:var(--cta-ink);font-weight:600;cursor:pointer;font-size:1rem}
.end .alt{font-size:.82rem;color:var(--ink3)}
.end .alt a{color:var(--ink2);border-bottom:1px solid var(--line)}

/* Aller plus loin */
.plus{margin-top:3em}
.plus h2{font-size:1.4rem;margin-bottom:14px}
.plus ul{list-style:none;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.plus li{background:var(--bg2)}
.plus a{display:grid;gap:3px;padding:16px 18px;border:0;transition:background .2s}
.plus a:hover{background:var(--sur)}
.plus a b{font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.plus a small{font-size:.82rem;color:var(--ink3)}
.plus a .k{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:600}

/* FAQ */
.faq{margin-top:2.6em;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details{background:var(--bg2)}
.faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:500;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fs);font-size:1.5rem;color:var(--acc);line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 20px;color:var(--ink2);max-width:66ch}

/* auteur */
.who{margin-top:3em;display:flex;gap:18px;align-items:center;padding:20px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line)}
.who img{width:64px;height:64px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.who b{display:block;font-weight:500}
.who p{font-size:.9rem;color:var(--ink2);margin-top:4px}
.who a{color:var(--ink);border-bottom:1px solid var(--line)}

footer{position:relative;z-index:1;margin-top:80px;padding:28px 20px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--ink3);font-size:.78rem}
footer nav{display:flex;gap:14px;flex-wrap:wrap}
footer nav a:hover{color:var(--ink)}

/* ─── hub ─── */
.tabs{display:flex;gap:6px;margin:30px 0 26px;flex-wrap:wrap}
.tabs .pill{height:38px}
.tabs .pill.on{background:var(--ink);color:var(--bg);border-color:transparent}
.hub h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:56px 0 18px}
.cards{display:grid;gap:14px}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.three{grid-template-columns:1fr 1fr 1fr}}
.cards a{display:grid;gap:8px;padding:22px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .2s;align-content:start}
.cards a:hover{transform:translateY(-2px);border-color:var(--acc)}
.cards .k{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:600}
.cards b{font-size:1.2rem;letter-spacing:-.02em;line-height:1.2;font-weight:500}
.cards p{font-size:.9rem;color:var(--ink2)}
.cards .d{font-size:.76rem;color:var(--ink3);margin-top:auto;padding-top:8px}
.cards a.pil{background:var(--cta);color:var(--cta-ink);border-color:transparent}
.cards a.pil .k,.cards a.pil p,.cards a.pil .d{color:var(--cta-ink);opacity:.85}
.cards a.pil b{color:var(--cta-ink);font-size:1.5rem}
.obs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.obs a,.obs>div{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:18px 20px;background:var(--bg2);align-items:center;transition:background .2s}
.obs a:hover{background:var(--sur)}
.obs b{font-size:1.15rem;letter-spacing:-.02em;font-weight:500}
.obs small{display:block;font-size:.84rem;color:var(--ink2)}
.obs .st{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600;white-space:nowrap}
.obs .st.new{color:var(--acc)}

/* ─── baromètre ─── */
.pod{display:grid;gap:10px;margin-top:1.6em}
.pod .row{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center}
.pod .rk{font-family:var(--fs);font-style:italic;color:var(--ink3);font-size:1.1rem}
.pod .bar2{position:relative;height:38px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.pod .bar2 i{position:absolute;inset:0 auto 0 0;background:var(--s1);opacity:.85;border-radius:10px 0 0 10px}
.pod .bar2 span{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 12px;font-weight:500;font-size:.92rem;color:var(--ink)}
.pod .row:first-child .bar2 i{background:var(--acc)}
.mods{display:grid;gap:10px;margin-top:1.6em}
@media(min-width:640px){.mods{grid-template-columns:repeat(4,1fr)}}
.mods div{padding:14px;border-radius:14px;background:var(--sur);border:1px solid var(--line)}
.mods small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.mods b{display:block;font-size:1.05rem;font-weight:500;margin-top:6px;letter-spacing:-.01em}
.mods span{font-size:.8rem;color:var(--ink2)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ─── baromètre data (v2) ─── */
.tiles{display:grid;gap:12px;margin-top:1.6em}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{padding:18px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);display:grid;gap:6px;align-content:start}
.tile>b{font-weight:500;letter-spacing:-.01em}
.tile .idx{font-family:var(--fs);font-size:3rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0 8px}
.tile .idx small{font-size:.9rem;color:var(--ink3);font-family:var(--fd);margin-left:4px}
.cmp{display:grid;grid-template-columns:78px 1fr 30px;gap:8px;align-items:center;font-size:.78rem;color:var(--ink2)}
.cmp i{display:block;height:8px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.cmp i b{display:block;height:100%;border-radius:4px}
.cmp em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.chart{margin-top:1.6em;padding:16px 8px 8px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line)}
.chart svg{width:100%;height:auto;display:block;font-family:var(--fd)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .tk{font-size:11px;fill:var(--ink3)}
.chart .lb{font-size:12px;fill:var(--ink);font-weight:500}
.chart .ev{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
.chart figcaption{padding:10px 10px 4px}
.stacks{display:grid;gap:12px;margin-top:1.6em}
.srow{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;font-size:.9rem;font-weight:500}
.stack{position:relative;height:34px;border-radius:8px;overflow:hidden;background:var(--bg2)}
.stack i{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:3px}
.stack i span{font-size:.74rem;font-weight:600;color:#fff;mix-blend-mode:normal;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--ink2);margin-top:2px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.two{display:grid;gap:14px;margin-top:1.6em}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.acts,.eco{padding:16px 18px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);display:grid;gap:10px}
.acts>b{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.arow{display:grid;grid-template-columns:150px 1fr 54px;gap:10px;align-items:center;font-size:.86rem}
.arow i{display:block;height:12px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.arow i b{display:block;height:100%;border-radius:6px;background:var(--acc)}
.arow em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.eco{margin-top:1.6em}
.tt td small{display:block;font-size:.74rem;color:var(--ink3);font-weight:400}
.tt td{font-variant-numeric:tabular-nums;white-space:nowrap}.tt td:first-child{white-space:normal}
.mini{display:inline-block;width:64px;height:8px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;vertical-align:middle;margin-right:8px}
.mini i{display:block;height:100%;border-radius:4px}
.pages{display:grid;gap:14px;margin-top:1.6em}
@media(min-width:1000px){.pages{grid-template-columns:repeat(3,1fr)}}
.pg{padding:16px 18px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);display:grid;gap:8px;align-content:start;min-width:0}
.pg>b{font-weight:500}
.pg>small{font-size:.76rem;color:var(--ink3)}
.pg ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px;font-size:.78rem}
.pg li{display:grid;grid-template-columns:1fr auto;gap:8px;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:6px;min-width:0}
.pg li span{overflow-wrap:anywhere;font-family:var(--fm);font-size:.72rem}
.pg li em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}
.pc{display:grid;gap:5px;margin-top:6px;font-size:.76rem;color:var(--ink2)}
.pc span{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center}
.pc span i{display:block;height:6px;border-radius:3px;order:-1;grid-column:1}
.pc span{grid-template-columns:auto 1fr auto}
.pc span i{width:auto;min-width:6px;max-width:60px}
.pc em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.art p.hk{margin-top:1.6em;padding:14px 18px;border-radius:14px;background:var(--soft);color:var(--ink);font-weight:500;max-width:none}
.art p.hk a{border-bottom-color:var(--acc)}
.cmp em:empty{display:none}.cmp{grid-template-columns:78px 1fr}
.tiles.four{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(min-width:900px){.tiles.four{grid-template-columns:repeat(4,1fr)}}
.tile.na{border-style:dashed;background:transparent}
.tile.na .idx{color:var(--ink3);font-size:2rem}
.tile.na .idx small{display:block;font-size:.7rem;margin:4px 0 0;letter-spacing:.04em;text-transform:uppercase}
.tile.na p{font-size:.8rem;color:var(--ink2);line-height:1.45;max-width:none}
.tile.na p a{color:var(--acc);border-bottom:1px solid color-mix(in srgb,var(--acc) 50%,transparent)}
.tile.na>small{color:var(--ink3)}
.arow.on span{color:var(--ink);font-weight:500}
.arow.on i b{background:var(--acc)}

/* ─── correctifs mobile (v3) ─── */
.grid>*{min-width:0}
.art{min-width:0}
.tiles,.tiles.four{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
@media(min-width:900px){.tiles.four{grid-template-columns:repeat(4,1fr)}.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.srow{grid-template-columns:1fr;gap:4px}.arow{grid-template-columns:1fr 44px;grid-template-areas:"n v" "b b"}.arow span{grid-area:n}.arow em{grid-area:v}.arow i{grid-area:b}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.art h3{color:var(--ink)}
.tt caption{caption-side:top;text-align:left;font-size:.78rem;color:var(--ink3);padding-bottom:10px}
.tt thead th{vertical-align:bottom}
.tt thead th span{display:block;font-size:.66rem;letter-spacing:.04em;color:var(--ink3);font-weight:400;text-transform:none;margin-top:2px}
.tt tbody th{text-align:left;font-weight:500;color:var(--ink);font-size:.92rem;padding:10px;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0}
.tt tbody th small{display:block;font-size:.74rem;color:var(--ink3);font-weight:400;margin-top:2px}
.tt td.nv{white-space:nowrap}
.tt td.nv em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:8px;font-size:.88rem}
.tt .zero{color:var(--s2);font-weight:600}
.tt.dt td em{font-style:normal;color:var(--ink3);font-size:.82rem}

/* ─── pilier : tableau de critères + cartes moteurs ─── */
.crit td{font-size:.88rem;line-height:1.45}
.crit tbody th{width:26%;min-width:130px}
.crit td .s{display:block;font-size:.72rem;color:var(--ink3);margin-top:6px}
@media(min-width:900px){.crit td:nth-child(2){width:38%}}
.mo{display:grid;gap:12px;margin-top:1.6em}
@media(min-width:820px){.mo{grid-template-columns:1fr 1fr}}
.mo>div{padding:18px 20px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.mo b{font-size:1.05rem;font-weight:500;letter-spacing:-.01em}
.mo p{font-size:.88rem;color:var(--ink2);max-width:none;line-height:1.5}
.mo p.l{color:var(--ink3);font-size:.82rem;padding-bottom:8px;border-bottom:1px solid var(--line)}
.art ol.crit{list-style:none;padding:0;counter-reset:c;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.6em;max-width:none}
.art ol.crit li{background:var(--bg2);padding:18px 20px;display:grid;grid-template-columns:26px 1fr;gap:4px 14px;align-items:baseline}
.art ol.crit .n{grid-row:1/span 4;font-family:var(--fs);font-style:italic;font-size:1.15rem;color:var(--acc);text-align:right}
.art ol.crit b{font-weight:500;letter-spacing:-.01em;font-size:1.02rem;color:var(--ink)}
.art ol.crit p{margin:0;font-size:.9rem;line-height:1.5;max-width:64ch}
.art ol.crit p.w{color:var(--ink2)}
.art ol.crit p.d{color:var(--ink);padding-left:12px;border-left:2px solid var(--acc);margin-top:6px}
.art ol.crit .src{margin-top:4px}
@media(max-width:560px){.art ol.crit li{grid-template-columns:1fr}.art ol.crit .n{grid-row:auto;text-align:left}}

/* CTA tôt (variante B du test éditorial) */
/* Bloc CTA en milieu d'article : meme habillage que .cta-tot, classe distincte
   pour que le suivi GA4 ne les confonde pas avec la cohorte B du test A/B. */
/* Message d'erreur de formulaire : annonce aux lecteurs d'ecran, et ne repose pas sur la couleur seule */
.ag-error,.form-error{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid var(--err);
  background:color-mix(in srgb,var(--err) 10%,transparent);color:var(--ink);font-size:.92rem;line-height:1.45}
.ag-error::before,.form-error::before{content:"⚠ ";font-weight:700}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--err)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--err) 22%,transparent)}
.cta-mid{margin:1.6em 0 2em;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:14px;background:var(--bg2)}
.cta-mid p{margin:0;font-size:.95rem;color:var(--ink2);line-height:1.55}
.cta-mid p+p{margin-top:10px}
.cta-mid .t{font-weight:600;color:var(--ink);font-size:1rem}
.cta-mid .act a{color:var(--acc);border-bottom:1px solid var(--line);display:inline-block;padding:7px 0;min-height:34px;line-height:20px}
.cta-mid .act a:hover{border-bottom-color:var(--acc)}
@media(max-width:700px){.cta-mid .act a{padding:9px 0;min-height:44px}}
.cta-tot{margin:1.6em 0 2em;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:14px;background:var(--bg2)}
.cta-tot p{margin:0;font-size:.95rem;color:var(--ink2);line-height:1.55}
.cta-tot p+p{margin-top:10px}
.cta-tot b{color:var(--ink)}
.cta-tot .act{font-size:.9rem;color:var(--ink3)}
.cta-tot .act a{color:var(--acc);border-bottom:1px solid var(--line);white-space:nowrap}
.cta-tot .act a:hover{border-bottom-color:var(--acc)}
@media(max-width:560px){.cta-tot .act a{white-space:normal}}

/* ---- Focus clavier sur les champs ----
   Les inputs portent outline:none (0,1,1 de specificite) qui l'emportait sur
   la regle globale :focus-visible (0,1,0) : au clavier, on ne voyait plus ou
   on se trouvait. On redonne un contour visible, sans l'afficher a la souris. */
input:focus-visible,textarea:focus-visible,select:focus-visible,
.form input:focus-visible,.end input:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-color:var(--acc)}

/* ---- Tableaux d'article sur petit écran ----
   Mesuré à 390px : deux tableaux dépassaient leur conteneur (409 et 357px pour
   350 disponibles). Ils défilent bien dans .wrap, mais rien ne le disait.
   On ajoute un dégradé de bord qui signale qu'il reste du contenu à droite,
   et on serre les cellules pour réduire le débordement. */
.art .wrap{position:relative;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to right,var(--bg) 30%,transparent),
             linear-gradient(to left,var(--bg) 30%,transparent) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
@media(max-width:620px){
  .art table{font-size:.86rem}
  .art th,.art td{padding-left:9px;padding-right:9px}
}

/* ---- Taille des cibles dans les articles (WCAG 2.2 : 24px minimum) ---- */
.art a,.toc a,.plus a,.who a,footer a{min-height:24px}
.toc a,.plus a{display:inline-block;padding:4px 0}
@media(max-width:700px){
  .toc a,.plus a,footer a{min-height:40px;padding:9px 0;display:inline-block}
  .end .alt a{display:inline-block;padding:6px 0;min-height:34px}
}

/* ---- Cibles restantes mesurées sur article à 390px ----
   Le plus grave : les deux liens du bloc CTA tôt (.cta-tot .act a) faisaient
   17px de haut. C'est le CTA central du test de conversion : un lien qu'on
   rate au doigt fausse la mesure autant qu'il coûte un lead. */
.cta-tot .act a{display:inline-block;padding:7px 0;min-height:34px;line-height:20px}
@media(max-width:700px){
  /* Deux tentatives abandonnees ici, mesurees puis annulees :
     - flex-direction:column laissait le separateur « · » seul sur sa ligne ;
     - font-size:0 sur le parent pour le masquer cassait l'espacement des mots,
       chaque mot passait a la ligne.
     Le padding seul suffit : 44px de haut sans toucher a la disposition. */
  .cta-tot .act{line-height:2.4}
  .cta-tot .act a{padding:9px 0;min-height:44px}
}
.crumb a,.crumb span{display:inline-block;min-height:24px;padding:2px 0}
.art a.pill,.art .go,.art a[class*=cta]{min-height:34px;display:inline-flex;align-items:center}
@media(max-width:700px){ .art a.pill,.art .go,.art a[class*=cta]{min-height:44px} }
/* liens d'appel à l'action isolés dans le corps de l'article (pas dans une phrase) */
.art > a, .art p > a:only-child{display:inline-block;min-height:34px;line-height:24px;padding:5px 0}
@media(max-width:700px){ .art > a, .art p > a:only-child{min-height:44px;line-height:34px} }

/* --- lien d'evitement (WCAG 2.4.1) --- */
.evite{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 18px;min-height:44px;box-sizing:border-box;border-radius:10px;background:var(--bg);color:var(--ink);font:600 15px/1.2 system-ui,sans-serif;text-decoration:none}
.evite:focus{left:12px;top:12px;outline:2px solid currentColor;outline-offset:2px}
main#cr-contenu:focus{outline:none}

/* --- menu plein ecran : defilable et degage des barres basses --- */
.menu{overflow-y:auto;overscroll-behavior:contain;align-content:safe center;justify-items:center}
body:has(#cr-cookie) .menu,body:has(#cr-bar) .menu{padding-bottom:112px}
@media(max-height:640px){.menu li a{font-size:clamp(1.3rem,4.4vw,2.2rem)}.menu ul{gap:2px}}

/* ─── Impression ────────────────────────────────────────────────────────── */
@media print{
  /* elements d'interface : rien a imprimer */
  .menu,.nav,header.nav,.bar,.nb,.tgl,.ctl,.pager,.evite,
  #cr-bar,#cr-cookie,#cr-btt,#cr-chat,#cr-panel,#cr-exit,#cr-exit-bg,#cr-lead,#cr-lead-bg,
  canvas,video,iframe,.stage .pin canvas{display:none!important}

  /* le film de la home occupe 300vh a l'ecran : on le replie */
  .stage{height:auto!important;min-height:0!important}
  .stage .pin{position:static!important;height:auto!important;display:block!important}
  .frame{position:static!important;opacity:1!important;visibility:visible!important;
         transform:none!important;page-break-inside:avoid;margin:0 0 14pt}

  /* les blocs reveles au defilement doivent etre visibles sur le papier */
  .pre,[class*="reveal"]{opacity:1!important;transform:none!important;visibility:visible!important}

  /* carrousel horizontal -> liste verticale */
  .track,.cards,.ugrid{display:block!important;overflow:visible!important;transform:none!important}
  .track>*,.cards>*,.u{width:auto!important;margin:0 0 10pt;page-break-inside:avoid}

  html,body{background:#fff!important;color:#000!important}
  body{font-size:11pt;line-height:1.45}
  main,.wrap,section{max-width:none!important;padding:0!important;margin:0!important}
  h1,h2,h3{page-break-after:avoid;color:#000!important}
  h1{font-size:20pt}h2{font-size:15pt}h3{font-size:12pt}
  p,li,td{orphans:3;widows:3}
  table,figure,blockquote,details{page-break-inside:avoid}
  details{display:block!important}details>*{display:block!important}
  a{color:#000!important;text-decoration:underline}
  /* on imprime la destination des liens externes, pas celle des ancres */
  a[href^="http"]:not([href*="corerank.fr"])::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  img{max-width:100%!important;page-break-inside:avoid}
  footer{border-top:1px solid #999;padding-top:8pt;font-size:9pt}
  @page{margin:16mm 14mm}
}