/* v3-article.css : feuille partagée par tous les articles et les pages de lecture.
   Tirée du gabarit tools/v3/gabarits/site-article.html (maquette validée), puis
   tools/v3/gabarits/article-complements.css, puis le sous-ensemble Tailwind
   des anciens corps. Générée par tools/v3/genere-articles.mjs : ne pas éditer. */
/* ════════════════════════════════════════════════════════════════════
   Maquette · Article de blog (gabarit), DA-52 B en alternance.
   Une page de LECTURE : le confort d'abord, le mouvement seulement aux
   seuils (entrée de page, entrée d'un tableau ou d'un chiffre), jamais
   pendant qu'on lit.
   UNE idée, discrète : LE FIL DE LECTURE. La barre centrale du trident,
   réduite à un trait bleu, suit le lecteur : elle ouvre la photo d'en-tête
   (le masque part d'une barre verticale et s'élargit), elle glisse dans le
   sommaire jusqu'à la section en cours, elle mesure la progression sous la
   nav. Les pastilles numérotées (« la source qui s'allume ») marquent
   l'essentiel, les étapes et les sources.
   ALTERNANCE (BRIEF-13 / BRIEF-14) :
     · nuit  : l'en-tête (catégorie, date, titre, chapô, auteure)
     · blanc : UNE seule grande feuille pour tout l'article (on ne coupe pas
               la lecture), la photo d'en-tête posée à cheval sur le seuil
     · nuit  : « À lire aussi », trois articles réels
     · blanc : CTA compact (pré-audit)
     · nuit  : le pied de page
   ════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Syne';font-weight:400 800;font-display:swap;src:url(/assets/syne.woff2) format("woff2")}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/assets/manrope.woff2) format("woff2")}

/* ── 1. Jetons ───────────────────────────────────────────────────── */
:root{
  --nuit:#0B1428; --nuit-2:#101A33;
  --bleu:#2563EB; --bleu-1:#1D4ED8; --bleu-2:#3B82F6; --bleu-3:#60A5FA; --bleu-4:#93C5FD; --bleu-5:#DBEAFE; --bleu-6:#EAF2FF;
  --papier:#F6F9FF; --papier-2:#EEF3FB; --blanc:#FFFFFF; --ciel:#EAF2FF;
  --encre:#0F172A; --e1:#1E293B; --e2:#334155; --e3:#56607A;
  --pl:rgba(15,23,42,.10); --pl-2:rgba(15,23,42,.18); --pl-3:rgba(15,23,42,.34);
  --t1:#F1F6FF; --t2:rgba(234,242,255,.80); --t3:rgba(234,242,255,.66);
  --nl:rgba(234,242,255,.10); --nl-2:rgba(234,242,255,.18); --nl-3:rgba(234,242,255,.32);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --glow-btn:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(37,99,235,.75),0 14px 36px -12px rgba(37,99,235,.9);
  --glow-btn-on:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(96,165,250,.95),0 18px 48px -10px rgba(59,130,246,1);
  --sec:clamp(3.75rem,7vw,6rem);
  --wrap:75rem; --gut:clamp(1rem,4vw,2.5rem); --nav:72px;
  /* la lecture : colonne de 65 à 75 caractères, sommaire en marge, chiffres en marge droite */
  --measure:36.5rem; --toc:15rem; --side:12rem; --col-gap:clamp(2.5rem,4.2vw,4.25rem);
  --over:clamp(4.5rem,13vw,12rem);
  --ease:cubic-bezier(.22,.8,.2,1); --ease-io:cubic-bezier(.65,0,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --syne:'Syne',system-ui,sans-serif; --man:'Manrope',system-ui,sans-serif;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nuit);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--nuit);color:var(--t1);font:400 1.0625rem/1.7 var(--man);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(37,99,235,.22);color:var(--encre)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--syne)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}
.tone-n :focus-visible{outline-color:var(--bleu-4)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:400;padding:.7rem 1rem;border-radius:var(--r-s);background:var(--bleu);color:#fff;font-weight:600}
.skip:focus{top:1rem}
main{overflow-x:clip}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--nav) + 1.5rem)}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* les deux tons : nuit (texte clair) et feuille blanche (encre) */
.tone-n{background:var(--nuit);color:var(--t1)}
.tone-n{--encre:#F1F6FF;--e1:rgba(234,242,255,.86);--e2:rgba(234,242,255,.80);--e3:rgba(234,242,255,.66);
  --pl:rgba(234,242,255,.11);--pl-2:rgba(234,242,255,.2);--pl-3:rgba(234,242,255,.36);
  --papier:rgba(234,242,255,.05);--papier-2:#101A33;--bleu-1:#93C5FD}
.tone-n ::selection{background:rgba(37,99,235,.55);color:#fff}

/* ── ALTERNANCE : la feuille blanche (même geste que l'accueil et le blog) ──
   Posée sur la nuit, coins arrondis ; un peu plus étroite que l'écran quand elle
   monte, elle s'élargit jusqu'aux bords quand elle le remplit (clip-path piloté au
   défilement : --sx, --sr). Pendant la lecture elle est pleine largeur : rien ne bouge. */
.paper{--t1:#0F172A;--t2:#334155;--t3:#56607A;--nl:rgba(15,23,42,.10);--nl-2:rgba(15,23,42,.18);--nl-3:rgba(15,23,42,.34);
  position:relative;z-index:2;background:var(--blanc);color:var(--encre);
  clip-path:inset(0 var(--sx,0px) round var(--sr,40px))}
.dawn{position:relative;z-index:1;height:0;pointer-events:none}
.dawn::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:clamp(120px,22vh,220px);
  background:radial-gradient(60% 100% at 50% 100%,rgba(147,197,253,.16),rgba(96,165,250,.05) 55%,transparent 80%)}

/* ── 3. Composants communs ───────────────────────────────────────── */
/* sur-titre : petit trident en trois traits, la seule trace graphique de la marque */
.kick{display:inline-flex;align-items:center;gap:.7rem;font:700 .7rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-1)}
.kick::before{content:"";flex:none;width:11px;height:12px;background:
  linear-gradient(currentColor,currentColor) 0 4px/2px 8px no-repeat,
  linear-gradient(currentColor,currentColor) 4.5px 0/2px 12px no-repeat,
  linear-gradient(currentColor,currentColor) 9px 4px/2px 8px no-repeat;opacity:.9}
.tone-n .kick{color:var(--bleu-4)}
.h2{margin-top:1rem;font-weight:600;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.035em}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.3rem;padding:0 1.65rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:650 .95rem/1 var(--man);letter-spacing:.01em;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);box-shadow:var(--glow-btn);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 62%)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-btn-on)}
.btn:hover::before{opacity:1}
.btn svg{width:13px;height:13px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{height:2.55rem;padding:0 1.15rem;font-size:.85rem}
.arrow{display:inline-block;width:12px;height:12px;flex:none;transition:transform .5s var(--ease)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease-out)}
a:hover .ul,a:focus-visible .ul{background-size:100% 1px}

/* révélations : états cachés seulement avec JS, jamais en mouvement réduit.
   Dans le corps de l'article, seuls les blocs (encadré, chiffres, tableaux) en ont : le texte courant ne bouge jamais. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease) calc(var(--d,0)*1s),transform 1.1s var(--ease-out) calc(var(--d,0)*1s)}
.js .rv.in{opacity:1;transform:none}

/* badge maquette */
.da-badge{position:absolute;top:calc(var(--nav) + 12px);right:var(--gut);z-index:60;padding:.38rem .7rem;border-radius:var(--r-pill);border:1px solid var(--nl-2);background:rgba(11,20,40,.6);font:650 .62rem/1 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);transition:color .3s,border-color .3s}
.da-badge:hover{color:var(--t1);border-color:var(--nl-3)}

/* ── 4. Navigation : clair sur la nuit, encre sur la feuille blanche (selon la section dessous) ── */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);color:var(--t1);border-bottom:1px solid transparent;
  --n2:var(--t2);--nlx:var(--nl-2);--lat:#EAF2FF;
  transition:background-color .5s,border-color .5s,color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s}
.nav.is-scrolled{background:rgba(11,20,40,.84);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(234,242,255,.1)}
.nav.on-p{color:var(--encre);--n2:var(--e2);--nlx:var(--pl);--lat:#0F172A}
.nav.on-p.is-scrolled{background:rgba(255,255,255,.88);border-bottom-color:var(--pl)}
.nav.is-open{color:var(--t1);--n2:var(--t2);--nlx:var(--nl-2);--lat:#EAF2FF;background:rgba(11,20,40,.96);border-bottom-color:rgba(234,242,255,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.nav-in{height:100%;display:flex;align-items:center;gap:1.25rem}
.lockup{display:flex;align-items:center;gap:.7rem;margin-right:auto;border-radius:8px}
.lk-mark{width:30px;height:30px;flex:none}
.lk-mark .lat{fill:var(--lat);transition:fill .5s}
.lk-txt{display:flex;flex-direction:column;gap:.32rem}
.lk-name{font:700 1rem/1 var(--syne);letter-spacing:.3em}
.lk-sub{font:650 .5rem/1 var(--man);letter-spacing:.24em;color:var(--n2);white-space:nowrap;opacity:.85}
.menu ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.menu a,.sub-btn{position:relative;display:inline-flex;align-items:center;gap:.35rem;height:2.5rem;padding:0 .6rem;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font:500 .875rem/1 var(--man);color:var(--n2);transition:color .3s}
.menu a:hover,.sub-btn:hover,.menu a[aria-current="page"],.sub-btn[aria-expanded="true"]{color:inherit}
.menu>ul>li>a[aria-current="page"]::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.35rem;height:1.5px;border-radius:2px;background:var(--bleu)}
.sub-btn svg{width:10px;height:10px;transition:transform .35s var(--ease)}
.has-sub{position:relative}
.has-sub:hover .sub-btn svg,.sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + .6rem);left:50%;width:18rem;margin-left:-9rem;padding:.5rem;border-radius:var(--r-m);background:rgba(16,26,51,.97);border:1px solid rgba(234,242,255,.18);box-shadow:0 30px 70px -24px rgba(2,6,20,.85);color:var(--t1);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub-btn[aria-expanded="true"]+.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu .sub a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;height:auto;padding:.8rem .95rem;border-radius:12px;color:var(--t1)}
.menu .sub a:hover{background:rgba(234,242,255,.05)}
.sub b{font:600 .95rem/1 var(--syne)}
.sub span{font:400 .78rem/1.3 var(--man);color:var(--t3)}
.sub-more{display:flex;flex-wrap:wrap;gap:.2rem .1rem;margin:.35rem 0 0;padding:.6rem .55rem .3rem;border-top:1px solid rgba(234,242,255,.1)}
.menu .sub-more a{height:auto;padding:.35rem .45rem;font-size:.78rem;color:var(--t3)}
.menu .sub-more a:hover{color:var(--t1);background:none}
.nav.on-p .sub{background:#fff;border-color:var(--pl);box-shadow:0 30px 70px -24px rgba(15,23,42,.28);color:var(--encre)}
.nav.on-p .menu .sub a{color:var(--encre)}
.nav.on-p .menu .sub a:hover{background:var(--papier)}
.nav.on-p .sub span,.nav.on-p .menu .sub-more a{color:var(--e3)}
.nav.on-p .sub-more{border-top-color:var(--pl)}
.nav.on-p .menu .sub-more a:hover{color:var(--encre)}
.nav :focus-visible{outline-color:var(--bleu-4)}
.nav.on-p :focus-visible{outline-color:var(--bleu)}
.burger{display:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--nlx);background:none;cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:50%;width:15px;height:1.5px;margin-left:-7.5px;background:currentColor;border-radius:1px;transition:transform .45s var(--ease)}
.burger span:first-child{top:calc(50% - 3.5px)}
.burger span:last-child{top:calc(50% + 2.5px)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mnav{position:absolute;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));overflow:auto;overscroll-behavior:contain;padding:.5rem var(--gut) 2rem;background:var(--nuit);border-top:1px solid var(--nl)}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--nl);font:500 1.1rem/1.2 var(--syne);color:var(--t1)}
.mnav a[aria-current="page"]{color:var(--bleu-4)}
.mnav .mn-sub a{padding-left:1rem;font:500 .95rem/1.2 var(--man);color:var(--t2)}
.mnav .btn{width:100%;margin-top:1.4rem}
/* la progression de lecture : un trait bleu au bas de la nav, seulement pendant l'article */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.prog.on{opacity:1}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#93C5FD,#2563EB 60%,#1D4ED8);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.nav.is-open .prog{opacity:0}

/* ── 5. En-tête (nuit) : compact. Catégorie, date, titre, chapô, auteure ── */
.head{position:relative;z-index:3;isolation:isolate;display:flow-root;padding:calc(var(--nav) + clamp(1.6rem,4.5vh,2.8rem)) 0 0}
/* une seule lueur, motivée : elle tombe du haut sur le titre */
.head::before{content:"";position:absolute;z-index:-1;inset:0 0 20% 0;pointer-events:none;background:radial-gradient(52% 70% at 30% 0%,rgba(37,99,235,.22),transparent 72%)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:550 .76rem/1.4 var(--man);letter-spacing:.03em;color:var(--t3)}
.crumb a{color:var(--t2);transition:color .3s}
.crumb a:hover{color:var(--t1)}
.crumb span[aria-hidden]{opacity:.45}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:clamp(1.4rem,3.4vh,2.1rem)}
/* pastille de catégorie : une source allumée (comme les pages d'expertise) */
.pill{display:inline-flex;align-items:center;gap:.6rem;height:2rem;padding:0 .95rem 0 .8rem;border-radius:var(--r-pill);border:1px solid rgba(147,197,253,.32);background:rgba(37,99,235,.12);
  font:650 .68rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--bleu-5)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--bleu-3);box-shadow:0 0 0 3px rgba(96,165,250,.18),0 0 12px rgba(96,165,250,.9)}
.meta-d{font:650 .7rem/1 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.meta-d time{color:var(--t2)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--nl-3)}
/* le titre : la première moitié en blanc plein, la promesse plus légère (Syne variable) */
.title{margin-top:1.1rem;max-width:19.5em;font-weight:620;font-size:clamp(2.2rem,4.5vw,4.25rem);line-height:1.02;letter-spacing:-.038em;text-wrap:balance;color:var(--t1)}
.title .ln{display:block;overflow:hidden;padding:0 .04em .1em;margin:0 -.04em -.1em}
.title .ln>span{display:inline-block}
.title .ln-b{font-weight:480;color:var(--bleu-4)}
.js .title .ln>span{transform:translateY(105%)}
.lit .title .ln>span{transform:none;transition:transform 1.25s var(--ease-out) .08s}
.lit .title .ln-b>span{transition-delay:.2s}
.head-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.6rem clamp(2rem,6vw,6rem);margin-top:clamp(1.3rem,3vh,1.9rem)}
.chapo{max-width:38rem;font:500 clamp(1.06rem,1.35vw,1.22rem)/1.6 var(--man);color:var(--t2);text-wrap:pretty}
/* la carte auteure : photo, nom, rôle, temps de lecture */
.byline{display:flex;align-items:center;gap:.95rem;padding:.6rem 1.25rem .6rem .6rem;border-radius:var(--r-pill);border:1px solid var(--nl-2);background:rgba(234,242,255,.04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .4s,background-color .4s}
.byline:hover{border-color:var(--nl-3);background:rgba(234,242,255,.07)}
.byline img{width:3.4rem;height:3.4rem;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(11,20,40,1),0 0 0 3.5px rgba(96,165,250,.7)}
.by-t{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.by-n{font:600 1rem/1.15 var(--syne);color:var(--t1)}
.by-r{font:500 .8rem/1.3 var(--man);color:var(--t3)}
.by-m{display:flex;align-items:center;gap:.4rem;margin-top:.1rem;font:650 .7rem/1 var(--man);letter-spacing:.06em;color:var(--bleu-4)}
.by-m svg{width:12px;height:12px}

/* la photo d'en-tête : posée à cheval sur le seuil nuit / feuille. Le masque part
   d'une barre verticale (la barre centrale du trident) et s'ouvre jusqu'au cadre. */
.hero-fig{position:relative;z-index:3;margin-top:clamp(2rem,5vh,3rem);margin-bottom:calc(-1*var(--over))}
.hero-ph{position:relative;overflow:hidden;aspect-ratio:2.25/1;border-radius:var(--r-l);background:#101A33;box-shadow:0 0 0 1px rgba(234,242,255,.06),0 50px 90px -50px rgba(2,6,20,.85),0 24px 50px -30px rgba(15,23,42,.35);
  clip-path:inset(0 0 0 0 round var(--r-l))}
.hero-ph img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:60% 42%;filter:saturate(.94) contrast(1.01)}
.js .hero-ph{clip-path:inset(0 calc(50% - 7px) 0 calc(50% - 7px) round 7px)}
.js .hero-ph img{transform:scale(1.16)}
.lit .hero-ph{clip-path:inset(0 0 0 0 round var(--r-l));transition:clip-path 1.6s var(--ease-io) .45s}
.lit .hero-ph img{transform:scale(1);transition:transform 2.4s var(--ease-out) .45s}
.hero-cap{display:flex;justify-content:flex-end;margin-top:.7rem;font:550 .72rem/1.4 var(--man);letter-spacing:.02em;color:#56607A}

/* ── 6. Le corps : UNE grande feuille blanche ─────────────────────── */
.sheet-art{padding:calc(var(--over) + clamp(2.6rem,5vw,4rem)) 0 clamp(4rem,8vw,6.5rem)}
.art-grid{display:grid;grid-template-columns:var(--toc) minmax(0,1fr);gap:0 var(--col-gap);align-items:start}

/* le sommaire collant : le signet (barre bleue) glisse jusqu'à la section lue */
.toc{position:sticky;top:calc(var(--nav) + 2rem);max-height:calc(100vh - var(--nav) - 3rem);overflow:auto;scrollbar-width:none;padding-bottom:1rem}
.toc::-webkit-scrollbar{display:none}
.toc-k{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--pl-2);font:700 .66rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--e3)}
.toc-k b{font:700 .7rem/1 var(--man);letter-spacing:.06em;color:var(--bleu-1);font-variant-numeric:tabular-nums}
.toc-toggle{display:none}
.toc-rail{position:relative}
.toc-list{position:relative;list-style:none;margin:0;padding:.55rem 0 0;counter-reset:toc}
.toc-list::before{content:"";position:absolute;left:0;top:.55rem;bottom:0;width:1px;background:var(--pl)}
.signet{position:absolute;left:-.5px;top:0;width:2px;height:var(--h,0px);border-radius:2px;background:var(--bleu);transform:translateY(var(--y,0px));opacity:0;
  box-shadow:0 0 10px rgba(37,99,235,.45);transition:transform .7s var(--ease-out),height .7s var(--ease-out),opacity .4s}
.signet.on{opacity:1}
.toc-list li{counter-increment:toc}
.toc-list a{display:grid;grid-template-columns:1.7rem minmax(0,1fr);gap:.2rem;padding:.5rem 0 .5rem .95rem;font:500 .84rem/1.4 var(--man);color:var(--e3);transition:color .4s}
.toc-list a::before{content:counter(toc,decimal-leading-zero);font:700 .64rem/1.95 var(--man);letter-spacing:.08em;color:var(--e3);font-variant-numeric:tabular-nums;transition:color .4s}
.toc-list a:hover{color:var(--encre)}
.toc-list a.is-past{color:var(--e2)}
.toc-list a[aria-current="true"]{color:var(--encre);font-weight:650}
.toc-list a[aria-current="true"]::before{color:var(--bleu)}
.toc-left{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem;padding-top:.95rem;border-top:1px solid var(--pl);font:600 .74rem/1.3 var(--man);letter-spacing:.03em;color:var(--e3)}
.toc-left svg{width:13px;height:13px;color:var(--bleu)}

/* ── 7. La colonne de lecture ─────────────────────────────────────── */
.prose{max-width:var(--measure);min-width:0;counter-reset:h2;font:400 1.125rem/1.78 var(--man);color:var(--e1);font-feature-settings:"kern","liga"}
.art-corps p{margin:0 0 1.3em;text-wrap:pretty;hyphens:manual}
.art-corps>p:first-child{font-size:1.24rem;line-height:1.66;color:var(--encre)}
.art-corps strong{font-weight:700;color:var(--encre)}
/* intertitres : numéro de section (CSS, non indexé) au-dessus d'un filet, puis le titre */
.art-corps h2{counter-increment:h2;margin:3.8rem 0 1.15rem;font-weight:600;font-size:clamp(1.6rem,2.35vw,2.1rem);line-height:1.14;letter-spacing:-.026em;color:var(--encre);text-wrap:balance}
.art-corps h2::before{content:counter(h2,decimal-leading-zero);display:flex;align-items:center;gap:.8rem;margin-bottom:1.05rem;padding-top:1.4rem;border-top:1px solid var(--pl-2);
  font:700 .68rem/1 var(--man);letter-spacing:.2em;color:var(--bleu)}
.art-corps h3{margin:2.5rem 0 .7rem;font-weight:600;font-size:clamp(1.18rem,1.5vw,1.34rem);line-height:1.28;letter-spacing:-.016em;color:var(--encre);text-wrap:balance}
.art-corps h2+h3{margin-top:1.6rem}
/* liens : bien visibles, soulignés, plus marqués au survol ; liens sortants signalés par une flèche */
.art-corps a{color:var(--bleu-1);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:rgba(37,99,235,.38);border-radius:3px;
  transition:text-decoration-color .3s,background-color .3s,color .3s}
.art-corps a:hover{text-decoration-color:currentColor;background:rgba(37,99,235,.08);color:#1E40AF}
.art-corps a[target="_blank"]::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.22em;vertical-align:.04em;background:currentColor;opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5h5.5V7M8.3 1.7 1.5 8.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5h5.5V7M8.3 1.7 1.5 8.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* listes : puce = petite barre bleue (le trait du trident) */
.art-corps ul,.art-corps ol{margin:0 0 1.5em;padding:0;list-style:none}
.art-corps li{position:relative;margin:0 0 .75em;padding-left:1.6rem}
.art-corps ul>li::before{content:"";position:absolute;left:.3rem;top:.5em;width:2.5px;height:.8em;border-radius:2px;background:var(--bleu)}
/* listes numérotées : pastilles (la source qui s'allume) */
.art-corps ol{counter-reset:ol}
.art-corps ol>li{counter-increment:ol;padding-left:2.7rem}
.art-corps ol>li::before{content:counter(ol);position:absolute;left:0;top:.18em;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(37,99,235,.45);
  font:700 .74rem/1 var(--man);color:var(--bleu-1);font-variant-numeric:tabular-nums;background:#fff}

/* la checklist : les pastilles reliées par un fil, comme un calendrier */
.art-corps ol.steps>li:not(:last-child)::after{content:"";position:absolute;left:.875rem;top:calc(.18em + 1.85rem);bottom:calc(-.75em - .1rem);width:1px;background:linear-gradient(var(--pl-3),var(--pl))}

/* l'essentiel en 30 secondes : un encart ciel, six pastilles qui s'allument une à une */
.essentiel{position:relative;isolation:isolate;overflow:hidden;margin:2.6rem 0 1rem;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.3rem,3vw,2.4rem) clamp(1.1rem,2vw,1.6rem);border-radius:var(--r-l);
  background:linear-gradient(165deg,#EAF2FF 0%,#F4F8FF 62%,#EEF4FF 100%);border:1px solid rgba(37,99,235,.14);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 64px -48px rgba(29,78,216,.45)}
.essentiel::before{content:"";position:absolute;z-index:-1;right:-14rem;top:-16rem;width:32rem;height:32rem;border-radius:50%;background:radial-gradient(closest-side,rgba(147,197,253,.45),transparent)}
.prose .essentiel h2{margin:0 0 1.3rem;font-size:clamp(1.4rem,2vw,1.75rem)}
.prose .essentiel h2::before{border-top:0;padding-top:0;margin-bottom:.8rem;content:counter(h2,decimal-leading-zero) "  ·  En bref"}
.prose .essentiel ul{margin:0;counter-reset:es}
.prose .essentiel li{counter-increment:es;margin:0;padding:.95rem 0 .95rem 2.9rem;border-top:1px solid rgba(37,99,235,.13);font-size:1.02rem;line-height:1.65}
.prose .essentiel li::before{content:counter(es);left:0;top:.95rem;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(37,99,235,.45);background:#fff;
  font:700 .72rem/1 var(--man);color:var(--bleu-1);transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s,box-shadow .8s var(--ease)}
.prose .essentiel li strong{display:block;margin-bottom:.15rem;font:600 1.05rem/1.35 var(--syne);letter-spacing:-.01em}
.essentiel.lit li::before{background:var(--bleu);border-color:var(--bleu);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14),0 0 16px rgba(59,130,246,.45)}
.js .essentiel li::before{transition-delay:calc(var(--i,0)*.13s + .25s)}

/* les chiffres clés : en marge droite sur grand écran (comme une note), en carte dans le texte ailleurs */
.fig{float:right;clear:right;width:var(--side);margin:.35rem calc(-1*var(--side) - var(--col-gap)) 1.2rem 0;padding:1rem 0 0;border-top:2px solid var(--bleu)}
.fig b{display:block;font:300 clamp(2rem,2.4vw,2.45rem)/1 var(--man);letter-spacing:-.045em;color:var(--encre);font-variant-numeric:tabular-nums}
.fig b small{font-size:.5em;letter-spacing:-.01em;color:var(--bleu);font-weight:500;margin-left:.1em}
.fig span{display:block;margin-top:.55rem;font:500 .82rem/1.45 var(--man);color:var(--e2)}
.fig cite{display:block;margin-top:.45rem;font:700 .6rem/1.3 var(--man);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--e3)}
/* la répartition Yext : une barre empilée qui se remplit une fois */
.fig-bar{display:flex;gap:2px;height:8px;margin-top:.9rem;border-radius:4px;overflow:hidden;background:var(--papier-2)}
.fig-bar i{display:block;height:100%;width:var(--w);transform-origin:0 50%}
.fig-bar i:nth-child(1){background:#1D4ED8}.fig-bar i:nth-child(2){background:#3B82F6}.fig-bar i:nth-child(3){background:#93C5FD}
.js .fig-bar i{transform:scaleX(0)}
.js .fig.in .fig-bar i{transform:none;transition:transform 1.2s var(--ease-out) calc(.25s + var(--k,0)*.18s)}
.fig-leg{list-style:none;margin:.7rem 0 0!important;padding:0!important}
.prose .fig-leg li{margin:0;padding:.18rem 0 .18rem 1rem;font:550 .76rem/1.35 var(--man);color:var(--e2)}
.prose .fig-leg li::before{left:0;top:.5rem;width:7px;height:7px;border-radius:2px}
.prose .fig-leg li:nth-child(1)::before{background:#1D4ED8}.prose .fig-leg li:nth-child(2)::before{background:#3B82F6}.prose .fig-leg li:nth-child(3)::before{background:#93C5FD}
.fig-leg b{display:inline;font:700 .76rem/1 var(--man);letter-spacing:0;color:var(--encre)}

/* tableaux : lisibles, en-têtes discrets, première colonne en Syne ; ils débordent dans la marge sur grand écran */
.tbl{position:relative;margin:1.8rem 0 1.9rem;border:1px solid var(--pl-2);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -50px rgba(15,23,42,.45)}
.tbl table{width:100%;border-collapse:collapse;font:400 .95rem/1.55 var(--man);color:var(--e1)}
.tbl th{padding:.95rem 1.1rem;text-align:left;vertical-align:bottom;background:var(--papier);border-bottom:1px solid var(--pl-2);font:700 .64rem/1.35 var(--man);letter-spacing:.16em;text-transform:uppercase;color:var(--e3)}
.tbl td{padding:1.05rem 1.1rem;vertical-align:top;border-top:1px solid var(--pl)}
.tbl tbody tr:first-child td{border-top:0}
.tbl td:first-child{font:600 1rem/1.35 var(--syne);letter-spacing:-.01em;color:var(--encre)}
.tbl tbody tr{transition:background-color .35s}
.tbl tbody tr:hover{background:rgba(234,242,255,.55)}
/* la ligne qui produit les sources : un trait bleu à gauche, un fond ciel */
.tbl tr.is-key{background:linear-gradient(90deg,rgba(234,242,255,.95),rgba(234,242,255,.55))}
.tbl tr.is-key td:first-child{box-shadow:inset 3px 0 0 var(--bleu)}
/* cas clients : départ et arrivée seulement, le chiffre d'arrivée mis en valeur */
.tbl .n{display:block;font:300 2rem/1.05 var(--man);letter-spacing:-.045em;color:var(--encre);font-variant-numeric:tabular-nums}
.tbl .n0{display:block;font:300 2rem/1.05 var(--man);letter-spacing:-.045em;color:var(--e3)}
.tbl .gain{display:block;height:4px;margin:.55rem 0 .45rem;border-radius:2px;background:var(--papier-2);overflow:hidden;max-width:11rem}
.tbl .gain i{display:block;height:100%;width:var(--w);border-radius:2px;background:linear-gradient(90deg,#93C5FD,#2563EB);transform-origin:0 50%}
.js .tbl .gain i{transform:scaleX(0)}
.js .tbl.in .gain i{transform:none;transition:transform 1.4s var(--ease-out) .35s}
.tbl-cases td{vertical-align:middle}

/* FAQ visible : chaque question est un bloc, la réponse toujours dépliée */
.prose .qa{position:relative;padding:1.4rem 0 .3rem 2.7rem;border-top:1px solid var(--pl);counter-increment:qa}
.prose .faq-list{counter-reset:qa;margin-top:1.6rem;border-bottom:1px solid var(--pl)}
.prose .qa::before{content:"Q";position:absolute;left:0;top:1.55rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--encre);color:#fff;font:700 .72rem/1 var(--man)}
.prose .qa h3{margin:0 0 .55rem;font-size:1.2rem}
.prose .qa p{margin-bottom:1.1rem;font-size:1.05rem}

/* sources : liste resserrée, numérotée en pastilles */
.prose .sources{counter-reset:src;margin-top:1.2rem}
.prose .sources li{counter-increment:src;margin:0;padding:.7rem 0 .75rem 2.5rem;border-top:1px solid var(--pl);font-size:.92rem;line-height:1.6;color:var(--e2)}
.prose .sources li:last-child{border-bottom:1px solid var(--pl)}
.prose .sources li::before{content:counter(src);left:0;top:.78rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--pl-2);background:none;font:700 .66rem/1 var(--man);color:var(--e3)}
.prose .sources a{font-weight:600}

/* fin d'article : partager, puis l'auteure */
.share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:3rem;padding:1.15rem 0;border-top:1px solid var(--pl-2);border-bottom:1px solid var(--pl)}
.share>span{font:700 .68rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--e3)}
.share .liens{display:flex;gap:.5rem}
.share a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--pl-2);color:var(--encre);transition:background-color .4s var(--ease),border-color .4s,color .4s,transform .5s var(--ease)}
.share a:hover{background:var(--bleu);border-color:var(--bleu);color:#fff;transform:translateY(-2px)}
.share svg{width:16px;height:16px;fill:currentColor}
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem 1.4rem;align-items:start;margin-top:2rem;padding:clamp(1.3rem,2.6vw,1.9rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--pl)}
.author img{width:5.2rem;height:5.2rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(37,99,235,.5)}
.author h3{font:700 .66rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--e3)}
.author .nom{margin-top:.6rem;font:600 1.3rem/1.2 var(--syne);letter-spacing:-.015em;color:var(--encre)}
.author .role{margin-top:.25rem;font:600 .85rem/1.4 var(--man);color:var(--bleu-1)}
.author .bio{margin-top:.75rem;font-size:.96rem;line-height:1.65;color:var(--e2)}
.author .lien{display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;font:700 .84rem/1 var(--man);color:var(--bleu-1)}
.author .lien:hover .arrow{transform:translateX(4px)}

/* ── 8. « À lire aussi » (nuit) : trois articles réels ────────────── */
.more{padding:var(--sec) 0 clamp(4rem,7vw,6rem)}
.more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;flex-wrap:wrap}
.more-all{display:inline-flex;align-items:center;gap:.5rem;font:700 .84rem/1 var(--man);color:var(--bleu-4)}
.more-all:hover .arrow{transform:translateX(4px)}
.cards{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.card{display:flex;flex-direction:column;min-width:0}
.card .pic{position:relative;overflow:hidden;aspect-ratio:16/10.5;border-radius:var(--r-m);background:#101A33;box-shadow:0 0 0 1px rgba(234,242,255,.08),0 34px 70px -40px rgba(2,6,20,.9)}
.card .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform 1.6s var(--ease-out),filter .8s}
.card:hover .pic img{transform:scale(1.05);filter:saturate(1.02)}
.js .card .pic{clip-path:inset(0 0 100% 0 round var(--r-m))}
.js .card.in .pic{clip-path:inset(0 0 0 0 round var(--r-m));transition:clip-path 1.3s var(--ease-io) calc(var(--d,0)*1s)}
.c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;margin-top:1.1rem;font:700 .64rem/1.4 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.c-meta .cat{color:var(--bleu-4)}
.c-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--nl-3)}
.c-t{margin-top:.6rem;font-weight:600;font-size:clamp(1.12rem,1.4vw,1.3rem);line-height:1.22;letter-spacing:-.015em;color:var(--t1);text-wrap:pretty}
.c-x{margin-top:.6rem;font-size:.92rem;line-height:1.6;color:var(--t2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font:700 .82rem/1 var(--man);color:var(--bleu-4)}
.card:hover .c-go .arrow{transform:translateX(4px)}

/* ── 9. CTA compact (feuille blanche, juste avant le pied de page) ── */
.cta{padding:clamp(3.2rem,6vw,4.8rem) 0}
.cta-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem 3rem;padding:clamp(1.7rem,3.4vw,2.7rem) clamp(1.4rem,4vw,3.1rem);border-radius:var(--r-l);
  background:linear-gradient(120deg,var(--ciel) 0%,#F3F7FF 58%,var(--ciel) 100%);color:var(--encre);border:1px solid rgba(37,99,235,.14);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 64px -46px rgba(29,78,216,.5)}
.cta-panel::before{content:"";position:absolute;right:-6rem;top:50%;width:34rem;height:34rem;margin-top:-17rem;z-index:-1;background:radial-gradient(closest-side,rgba(147,197,253,.55),rgba(219,234,254,.3) 55%,transparent);transition:transform 1.2s var(--ease)}
.cta-panel:hover::before{transform:scale(1.12)}
.cta-t{margin-top:.8rem;font:580 clamp(1.6rem,2.7vw,2.35rem)/1.1 var(--syne);letter-spacing:-.03em;color:var(--encre);text-wrap:balance}
.cta-t em{font-style:normal;color:var(--bleu)}
.cta-p{margin-top:.7rem;max-width:40rem;font-size:.96rem;line-height:1.6;color:var(--e2)}
.cta-r{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.reassure{font:600 .78rem/1.5 var(--man);letter-spacing:.03em;color:var(--e3);text-align:right}

/* ── 10. Pied de page (nuit) ──────────────────────────────────────── */
.foot{padding:clamp(3.5rem,6vw,5rem) 0 2rem;background:var(--nuit);color:var(--t1)}
.foot .lk-mark .lat{fill:#EAF2FF}
.foot .lk-sub{color:var(--t3)}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:2rem}
.foot-brand p{margin-top:1.1rem;max-width:18rem;font-size:.88rem;line-height:1.6;color:var(--t3)}
.foot h2{font:700 .68rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)}
.foot ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem;font-size:.9rem}
.foot ul a{color:var(--t2);transition:color .3s}
.foot ul a:hover,.foot ul a[aria-current="page"]{color:var(--t1)}
.foot address{margin-top:1.2rem;font-style:normal;font-size:.9rem;line-height:1.7;color:var(--t2)}
.foot-bar{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--nl);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--t3)}
.foot-bar a:hover{color:var(--t1)}
.credits{margin-top:1rem;font-size:.72rem;line-height:1.6;color:rgba(234,242,255,.55)}
.credits a{text-decoration:underline;text-decoration-color:rgba(234,242,255,.25);text-underline-offset:2px}

/* ── 11. Responsive ───────────────────────────────────────────────── */
/* grand écran : les tableaux s'étendent dans la marge droite, celle des chiffres clés */
@media (min-width:1240px){
  .tbl{margin-right:calc(-1*(var(--side) + var(--col-gap)))}
}
@media (max-width:1239px){
  /* les chiffres clés reviennent dans le texte : une carte, le nombre à gauche */
  .fig{float:none;width:auto;margin:1.8rem 0 2rem;padding:1.1rem 1.25rem;border:1px solid var(--pl);border-left:3px solid var(--bleu);border-radius:4px var(--r-m) var(--r-m) 4px;background:var(--papier);
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.2rem;align-items:center}
  .fig b{grid-row:1/4;min-width:6.5rem}
  .fig span{margin-top:0}
  .fig-bar,.fig-leg{grid-column:1/-1}
  .fig cite{grid-column:2}
  .fig.fig-split b{grid-row:auto}
  .fig.fig-split cite{grid-column:1/-1}
}
@media (max-width:1180px){
  .menu{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1023px){
  [id]{scroll-margin-top:calc(var(--nav) + 4.6rem)}
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .prose{margin-inline:auto;width:100%}
  /* le sommaire devient une barre collante, repliable : section en cours + numéro */
  .toc{z-index:30;top:var(--nav);max-height:none;overflow:visible;margin:-1.2rem calc(-1*var(--gut)) 2.2rem;padding:0;
    background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--pl);border-top:1px solid var(--pl)}
  .toc-k,.toc-left,.signet{display:none}
  .js .toc-toggle{display:flex}
  .toc-toggle{width:100%;align-items:center;gap:.75rem;height:3.3rem;padding:0 var(--gut);border:0;background:none;cursor:pointer;text-align:left;color:var(--encre)}
  .tt-k{flex:none;font:700 .62rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--e3)}
  .tt-n{flex:none;font:700 .72rem/1 var(--man);color:var(--bleu);font-variant-numeric:tabular-nums}
  .tt-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 .9rem/1.2 var(--syne);letter-spacing:-.01em}
  .toc-toggle svg{flex:none;width:12px;height:12px;color:var(--e2);transition:transform .45s var(--ease)}
  .toc.open .toc-toggle svg{transform:rotate(180deg)}
  .toc-panel{padding:0 var(--gut) .6rem}
  html:not(.js) .toc{position:static}
  .js .toc:not(.open) .toc-panel{display:none}
  /* le panneau se déroule PAR-DESSUS le texte (aucun saut de mise en page) */
  .js .toc.open .toc-panel{position:absolute;left:0;right:0;top:100%;max-height:min(62vh,30rem);overflow:auto;overscroll-behavior:contain;background:#fff;border-bottom:1px solid var(--pl-2);box-shadow:0 30px 50px -30px rgba(15,23,42,.35);animation:drop .45s var(--ease-out)}
  @keyframes drop{from{opacity:0;transform:translateY(-6px)}}
  .toc-list{padding-top:.2rem}
  .toc-list::before{display:none}
  .toc-list a{padding:.62rem 0;border-top:1px solid var(--pl);font-size:.9rem}
  .head-row{grid-template-columns:minmax(0,1fr)}
  .byline{justify-self:start}
}
@media (max-width:860px){
  .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cards .card:last-child{grid-column:1/-1}
  .cards .card:last-child .pic{aspect-ratio:16/8}
  .cta-panel{grid-template-columns:minmax(0,1fr)}
  .cta-r{align-items:flex-start}
  .reassure{text-align:left}
}
@media (max-width:700px){
  :root{--over:clamp(2.6rem,12vw,4.5rem)}
  .hero-ph{aspect-ratio:16/10.5;border-radius:18px}
  .lit .hero-ph{clip-path:inset(0 0 0 0 round 18px)}
  .prose{font-size:1.0625rem;line-height:1.74}
  .art-corps>p:first-child{font-size:1.14rem;line-height:1.64}
  .art-corps h2{margin-top:3rem}
  .essentiel{margin-inline:calc(-.5*var(--gut))}
  /* tableaux au doigt : chaque ligne devient une carte, chaque cellule garde son intitulé */
  .tbl{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl table,.tbl tbody{display:block}
  .tbl tr{display:block;margin-bottom:.8rem;padding:.2rem 1.05rem .35rem;border:1px solid var(--pl-2);border-radius:16px;background:#fff}
  .tbl tbody tr:hover{background:#fff}
  .tbl tr.is-key{background:linear-gradient(180deg,#EAF2FF,#F6F9FF);border-color:rgba(37,99,235,.3)}
  .tbl tr.is-key td:first-child{box-shadow:none}
  .tbl td{display:block;position:relative;padding:.7rem 0 .7rem 7.4rem;border-top:1px solid var(--pl);font-size:.93rem}
  .tbl td::before{content:attr(data-label);position:absolute;left:0;top:.95rem;width:6.6rem;font:700 .58rem/1.45 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--e3)}
  .tbl td:first-child{padding:.85rem 0 .55rem;border-top:0;font-size:1.08rem}
  .tbl td:first-child::before{display:none}
  .tbl-cases td{vertical-align:top}
  .tbl .n,.tbl .n0{font-size:1.65rem}
  .qa{padding-left:2.4rem}
  .author{grid-template-columns:minmax(0,1fr)}
  .more-head{align-items:flex-start;flex-direction:column}
  .cards{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .cards .card:last-child{grid-column:auto}
  /* au doigt : vignette et titre côte à côte, plus compact */
  .card{display:grid;grid-template-columns:7.2rem minmax(0,1fr);column-gap:1rem;align-items:start;padding-top:1.4rem;border-top:1px solid var(--nl)}
  .card:first-child{padding-top:0;border-top:0}
  .card .pic,.cards .card:last-child .pic{grid-row:1/5;aspect-ratio:1/1;border-radius:12px}
  .c-meta{margin-top:0;font-size:.58rem}
  .c-t{font-size:1.05rem}
  .c-x{display:none}
  .c-go{margin-top:.6rem}
}
@media (max-width:520px){
  :root{--nav:64px}
  .nav-in{gap:.55rem}
  .lockup{gap:.5rem}
  .lk-mark{width:26px;height:26px}
  .lk-name{font-size:.88rem;letter-spacing:.24em}
  .lk-sub{font-size:.44rem;letter-spacing:.2em}
  .nav .btn-sm{height:2.35rem;padding:0 .85rem;font-size:.78rem}
  .burger{width:2.35rem;height:2.35rem}
  .da-badge{top:calc(var(--nav) + 8px)}
  .head{padding-top:calc(var(--nav) + 2.6rem)}
  .title{font-size:clamp(1.95rem,8.6vw,2.6rem);line-height:1.05}
  .chapo{font-size:1.04rem}
  .byline{width:100%;border-radius:20px;padding-right:.9rem}
  .hero-cap{justify-content:flex-start}
  .foot-grid{gap:2rem 1.25rem}
  .btn{padding:0 1.2rem}
}

/* ── 12. Mouvement réduit : tout lisible, statique ────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
  .js .rv{opacity:1!important;transform:none!important}
  .js .title .ln>span{transform:none!important}
  .js .hero-ph{clip-path:inset(0 0 0 0 round var(--r-l))!important}.js .hero-ph img{transform:none!important}
  .js .card .pic{clip-path:none!important}
  .js .fig-bar i,.js .tbl .gain i{transform:none!important}
}
.safe .rv{opacity:1!important;transform:none!important}
.safe .title .ln>span{transform:none!important}
.safe .hero-ph{clip-path:inset(0 0 0 0 round var(--r-l))!important}.safe .hero-ph img{transform:none!important}
.safe .card .pic{clip-path:none!important}
.safe .fig-bar i,.safe .tbl .gain i{transform:none!important}

/* ════════════════════════════════════════════════════════════════════
   Compléments au gabarit d'article (site-article.html) pour les 124 corps
   réels et les pages de lecture : tout ce que la maquette Perpignan n'avait
   pas (h4, citations, figures, code, filets, listes de définitions, légendes
   de tableau, accordéons, anciens composants Tailwind). Même langage : encre
   sur la feuille blanche, bleu de la marque, pastilles, filets fins.
   ════════════════════════════════════════════════════════════════════ */

/* la colonne de lecture sert de conteneur : les anciens corps y règlent leurs grilles.
   Un conteneur isole les compteurs CSS : la numérotation des H2 repart de son premier
   enfant (portée : ce premier enfant et tous ses suivants). */
.art-corps{container:corps/inline-size}
.art-corps>:first-child{counter-reset:h2}
/* un H2 en flex (icône + titre, anciens corps) : le numéro et son filet passent sur leur propre ligne */
.art-corps h2[class*="flex"]{flex-wrap:wrap}
.art-corps h2[class*="flex"]::before{flex:0 0 100%}
/* le premier paragraphe (chapeau de corps), que le corps soit enveloppé ou non */
.art-corps>div:first-child>p:first-child{font-size:1.24rem;line-height:1.66;color:var(--encre)}
/* l'en-tête de la fiche « mis à jour » */
.meta-m{font:650 .7rem/1 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.meta-m time{color:var(--t2)}

/* ── titres de rang 4, emphase, petits éléments ── */
.art-corps h4{margin:2rem 0 .55rem;font:650 1.06rem/1.35 var(--syne);letter-spacing:-.01em;color:var(--encre)}
.art-corps em{font-style:italic}
.art-corps sup{font-size:.7em;line-height:0}
.art-corps small{font-size:.85em}
.art-corps mark{background:rgba(147,197,253,.4);color:inherit;border-radius:2px;padding:0 .1em}
.art-corps hr{margin:2.6rem 0;border:0;border-top:1px solid var(--pl-2)}
.art-corps img{max-width:100%;height:auto;border-radius:var(--r-m)}
.art-corps figure{margin:2rem 0}
.art-corps figcaption{margin-top:.6rem;font:550 .78rem/1.5 var(--man);color:var(--e3)}
.art-corps svg{display:inline-block;vertical-align:middle;flex:none;max-width:100%}

/* ── citations : un filet bleu, l'italique de la voix rapportée ── */
.art-corps blockquote{position:relative;margin:2rem 0;padding:1.15rem 1.4rem 1.15rem 1.6rem;border-left:3px solid var(--bleu);border-radius:4px var(--r-m) var(--r-m) 4px;background:var(--papier);
  font-size:1.06rem;line-height:1.7;color:var(--e1)}
.art-corps blockquote p{margin:0 0 .7em}
.art-corps blockquote>:last-child{margin-bottom:0}
.art-corps blockquote cite,.art-corps blockquote footer{display:block;margin-top:.6rem;font:700 .66rem/1.4 var(--man);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--e3)}

/* ── code ── */
.art-corps code{font:500 .86em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.12em .4em;border-radius:6px;background:var(--papier-2);color:#1E3A8A;overflow-wrap:anywhere}
.art-corps pre{margin:1.8rem 0;padding:1.15rem 1.3rem;overflow-x:auto;border-radius:var(--r-m);background:#0B1428;color:#DCE7F8;font-size:.88rem;line-height:1.65;box-shadow:0 30px 60px -50px rgba(15,23,42,.6)}
.art-corps pre code{padding:0;background:none;color:inherit;font-size:inherit;overflow-wrap:normal}

/* ── listes de définitions ── */
.art-corps dl{margin:1.4rem 0 1.8rem}
.art-corps dt{margin-top:1.1rem;font:650 1.04rem/1.4 var(--syne);color:var(--encre)}
.art-corps dd{margin:.35rem 0 0;padding-left:1rem;border-left:2px solid var(--pl-2)}

/* ── tableaux : compléments au .tbl du gabarit ── */
.tbl{overflow-x:auto}
.tbl caption{caption-side:top;padding:.9rem 1.1rem .2rem;text-align:left;font:700 .66rem/1.45 var(--man);letter-spacing:.16em;text-transform:uppercase;color:var(--e3)}
.tbl table.sans-tete tr:first-child td{border-top:0}
.tbl td code{white-space:nowrap}
/* les anciens tableaux portaient leurs propres classes : le style du site l'emporte */
.art-corps .tbl :is(table,thead,tbody,tr,th,td)[class]{background:none;border-color:var(--pl);white-space:normal}
.art-corps .tbl th[class]{background:var(--papier);color:var(--e3);padding:.95rem 1.1rem;font:700 .64rem/1.35 var(--man);letter-spacing:.16em;text-transform:uppercase}
.art-corps .tbl td[class]{padding:1.05rem 1.1rem;font-size:.95rem;line-height:1.55;color:var(--e1);font-weight:400}
.art-corps .tbl td[class]:first-child{font:600 1rem/1.35 var(--syne);color:var(--encre)}
.art-corps .tbl table[class]{min-width:0;border-collapse:collapse;border:0;width:100%;box-shadow:none;border-radius:0}

/* ── FAQ : réponses en plusieurs blocs, accordéons ouverts ── */
.prose .faq-a>:last-child{margin-bottom:1.1rem}
.prose .qa .faq-a p{font-size:1.05rem}
.prose .qa>p[data-faq-q]{margin:0 0 .55rem;font:600 1.2rem/1.35 var(--syne);letter-spacing:-.016em;color:var(--encre)}
.prose .qa>p[data-faq-q] strong{font-weight:inherit}
.art-corps details{margin:.8rem 0}
.art-corps summary{cursor:pointer;list-style:none;font:600 1.08rem/1.4 var(--syne);color:var(--encre)}
.art-corps summary::-webkit-details-marker{display:none}
.art-corps details[open]>summary{margin-bottom:.6rem}

/* ── sources : listes à paragraphes ── */
.prose .sources li p{margin:0}

/* un ancien corps enveloppé dans « prose » (Tailwind Typography) ne doit pas reprendre la
   colonne du gabarit (.prose) ni remettre à zéro la numérotation des H2 */
.art-corps .prose{max-width:none;min-width:0;counter-reset:none;font:inherit;color:inherit}

/* ── anciens composants Tailwind : ce que leur « preflight » faisait ──
   (avant le sous-ensemble généré, qui l'emporte à spécificité égale) */
.art-corps .not-prose :where(p,h3,h4,h5,ul,ol,li,dl,dd,blockquote,figure){margin:0}
.art-corps .not-prose :where(ul,ol){padding:0;list-style:none}
.art-corps .not-prose :where(li){padding-left:0}
.art-corps .not-prose :where(li)::before{content:none}
.art-corps .not-prose :where(blockquote){padding:0;border:0;background:none}
.art-corps .not-prose :where(a){font-weight:inherit}
/* une boîte décorée (fond, bordure ou arrondi) n'ajoute pas de marge à son premier et dernier enfant */
.art-corps :is([class*="rounded"],[class*="bg-"],[class*="border"],.not-prose)>:first-child{margin-top:0}
.art-corps :is([class*="rounded"],[class*="bg-"],[class*="border"],.not-prose)>:last-child{margin-bottom:0}
/* sections enveloppantes : le H2 qui les ouvre garde son filet, sans double marge */
.art-corps section[class*="my-"]>h2:first-child,.art-corps section[class*="mb-"]>h2:first-child{margin-top:0}
/* listes à puces maison (icône dans l'élément) : pas de seconde puce */
.art-corps ul:is(.list-none,[class*="space-y"])>li,.art-corps li[class*="flex"]{padding-left:0}
.art-corps ul:is(.list-none,[class*="space-y"])>li::before,.art-corps li[class*="flex"]::before{content:none}
.art-corps ul.list-disc>li,.art-corps ol.list-decimal>li{padding-left:.25rem}
.art-corps ul.list-disc>li::before,.art-corps ol.list-decimal>li::before{content:none}
.art-corps ul.list-disc>li::marker,.art-corps ol.list-decimal>li::marker{color:var(--bleu);font-weight:700}
/* titres H2 sur fond sombre (anciens encadrés d'appel) : le filet et le numéro passent en clair */
.art-corps [class*="text-white"] h2,.art-corps h2[class*="text-white"]{color:#fff}
.art-corps [class*="text-white"] h2::before,.art-corps h2[class*="text-white"]::before{color:var(--bleu-4);border-top-color:rgba(234,242,255,.22)}
.art-corps [class*="text-white"] :is(p,li,strong){color:inherit}
.art-corps [class*="text-white"] a:not([class*="text-"]){color:#fff}
/* les liens-boutons des anciens encadrés : pas de soulignement d'article */
.art-corps a[class*="rounded-full"][class*="px-"]{display:inline-flex;text-decoration:none;font-weight:700;margin:.3rem .3rem 0 0}
.art-corps a[class*="rounded-full"][class*="px-"]::after{content:none}

/* ── mobile ── */
@media (max-width:700px){
  .art-corps>div:first-child>p:first-child{font-size:1.14rem;line-height:1.64}
  .art-corps .tbl td[class]{padding:.7rem 0 .7rem 7.4rem;font-size:.93rem}
  .art-corps .tbl td[class]:first-child{padding:.85rem 0 .55rem;font-size:1.08rem}
  .tbl td:not([data-label]),.art-corps .tbl td[class]:not([data-label]){padding-left:0}
  .tbl td:not([data-label])::before{content:none}
  .tbl caption{padding:0 0 .7rem}
  .art-corps pre{margin-inline:calc(-.5*var(--gut));border-radius:12px}
  .crumb [aria-current]{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* l'encadré « L'essentiel » : un titre en gras suivi de « : » reste en ligne */
.prose .essentiel li.es-ligne strong{display:inline;font:700 1.02rem/1.65 var(--man);letter-spacing:0}

/* sous-ensemble Tailwind des anciens corps (généré par lecture-tailwind.mjs) */
.art-corps .-mb-20:not(h2){margin-bottom:-3rem}
.art-corps .-ml-20:not(h2){margin-left:-5rem}
.art-corps .-mr-20:not(h2){margin-right:-5rem}
.art-corps .-mr-8:not(h2){margin-right:-2rem}
.art-corps .-mt-20:not(h2){margin-top:-3rem}
.art-corps .-mt-8:not(h2){margin-top:-2rem}
.art-corps .-z-10{z-index:-10}
.art-corps .absolute{position:absolute}
.art-corps .bg-amber-100{background-color:#FEF3C7}
.art-corps .bg-amber-50{background-color:#FFFBEB}
.art-corps .bg-amber-500{background-color:#E59E22}
.art-corps .bg-black\/30{background-color:rgba(15,23,42,0.3)}
.art-corps .bg-blue-100{background-color:#DBEAFE}
.art-corps .bg-blue-100\/50{background-color:rgba(219,234,254,0.5)}
.art-corps .bg-blue-400{background-color:#60A5FA}
.art-corps .bg-blue-50{background-color:#EFF6FF}
.art-corps .bg-blue-50\/30{background-color:rgba(239,246,255,0.3)}
.art-corps .bg-blue-50\/50{background-color:rgba(239,246,255,0.5)}
.art-corps .bg-blue-500{background-color:#3B82F6}
.art-corps .bg-blue-500\/10{background-color:rgba(59,130,246,0.1)}
.art-corps .bg-blue-500\/20{background-color:rgba(59,130,246,0.2)}
.art-corps .bg-blue-600{background-color:#2563EB}
.art-corps .bg-blue-700{background-color:#1D4ED8}
.art-corps .bg-emerald-100{background-color:#DBEAFE}
.art-corps .bg-emerald-50{background-color:#EFF6FF}
.art-corps .bg-emerald-500{background-color:#3B82F6}
.art-corps .bg-emerald-600{background-color:#2563EB}
.art-corps .bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-st))}
.art-corps .bg-gradient-to-bl{background-image:linear-gradient(to bottom left,var(--tw-st))}
.art-corps .bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-st))}
.art-corps .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-st))}
.art-corps .bg-gray-50{background-color:#F8FAFC}
.art-corps .bg-green-100{background-color:#DBEAFE}
.art-corps .bg-green-50{background-color:#EFF6FF}
.art-corps .bg-green-600{background-color:#2563EB}
.art-corps .bg-green-700{background-color:#1D4ED8}
.art-corps .bg-indigo-100{background-color:#DBEAFE}
.art-corps .bg-indigo-50{background-color:#EFF6FF}
.art-corps .bg-indigo-50\/50{background-color:rgba(239,246,255,0.5)}
.art-corps .bg-orange-100{background-color:#FEF3C7}
.art-corps .bg-orange-50{background-color:#FFFBEB}
.art-corps .bg-orange-500{background-color:#E59E22}
.art-corps .bg-purple-100{background-color:#DBEAFE}
.art-corps .bg-purple-400{background-color:#60A5FA}
.art-corps .bg-purple-50{background-color:#EFF6FF}
.art-corps .bg-purple-500{background-color:#3B82F6}
.art-corps .bg-purple-600{background-color:#2563EB}
.art-corps .bg-red-100{background-color:#FEE2E2}
.art-corps .bg-red-50{background-color:#FEF2F2}
.art-corps .bg-red-50\/50{background-color:rgba(254,242,242,0.5)}
.art-corps .bg-rose-100{background-color:#FEE2E2}
.art-corps .bg-rose-50{background-color:#FEF2F2}
.art-corps .bg-slate-100{background-color:#F1F5F9}
.art-corps .bg-slate-200{background-color:#E2E8F0}
.art-corps .bg-slate-300{background-color:#CBD5E1}
.art-corps .bg-slate-400{background-color:#94A3B8}
.art-corps .bg-slate-50{background-color:#F8FAFC}
.art-corps .bg-slate-500{background-color:#64748B}
.art-corps .bg-slate-800{background-color:#1E293B}
.art-corps .bg-slate-900{background-color:#0F172A}
.art-corps .bg-transparent{background-color:transparent}
.art-corps .bg-white{background-color:#FFFFFF}
.art-corps .bg-white\/10{background-color:rgba(255,255,255,0.1)}
.art-corps .bg-white\/20{background-color:rgba(255,255,255,0.2)}
.art-corps .bg-white\/5{background-color:rgba(255,255,255,0.05)}
.art-corps .bg-white\/60{background-color:rgba(255,255,255,0.6)}
.art-corps .bg-yellow-100{background-color:#FEF3C7}
.art-corps .bg-yellow-50{background-color:#FFFBEB}
.art-corps .block{display:block}
.art-corps .border{border-width:1px;border-style:solid}
.art-corps .border-2{border-width:2px;border-style:solid}
.art-corps .border-4{border-width:4px;border-style:solid}
.art-corps .border-amber-100{border-color:#FEF3C7}
.art-corps .border-amber-200{border-color:#FDE68A}
.art-corps .border-amber-500{border-color:#E59E22}
.art-corps .border-b{border-bottom-width:1px;border-bottom-style:solid}
.art-corps .border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.art-corps .border-blue-100{border-color:#DBEAFE}
.art-corps .border-blue-100\/50{border-color:rgba(219,234,254,0.5)}
.art-corps .border-blue-200{border-color:#BFDBFE}
.art-corps .border-blue-400{border-color:#60A5FA}
.art-corps .border-blue-500{border-color:#3B82F6}
.art-corps .border-blue-500\/30{border-color:rgba(59,130,246,0.3)}
.art-corps .border-blue-600{border-color:#2563EB}
.art-corps .border-collapse{border-collapse:collapse}
.art-corps .border-emerald-100{border-color:#DBEAFE}
.art-corps .border-emerald-200{border-color:#BFDBFE}
.art-corps .border-emerald-600{border-color:#2563EB}
.art-corps .border-green-200{border-color:#BFDBFE}
.art-corps .border-green-500{border-color:#3B82F6}
.art-corps .border-indigo-100{border-color:#DBEAFE}
.art-corps .border-l-2{border-left-width:2px;border-left-style:solid}
.art-corps .border-l-4{border-left-width:4px;border-left-style:solid}
.art-corps .border-l-blue-400{border-left-color:#60A5FA}
.art-corps .border-l-blue-500{border-left-color:#3B82F6}
.art-corps .border-orange-200{border-color:#FDE68A}
.art-corps .border-orange-600{border-color:#C27A12}
.art-corps .border-purple-100{border-color:#DBEAFE}
.art-corps .border-purple-200{border-color:#BFDBFE}
.art-corps .border-purple-500{border-color:#3B82F6}
.art-corps .border-purple-600{border-color:#2563EB}
.art-corps .border-red-100{border-color:#FEE2E2}
.art-corps .border-red-500{border-color:#E35454}
.art-corps .border-rose-100{border-color:#FEE2E2}
.art-corps .border-slate-100{border-color:#F1F5F9}
.art-corps .border-slate-200{border-color:#E2E8F0}
.art-corps .border-slate-300{border-color:#CBD5E1}
.art-corps .border-slate-700{border-color:#334155}
.art-corps .border-t{border-top-width:1px;border-top-style:solid}
.art-corps .border-white{border-color:#FFFFFF}
.art-corps .border-white\/10{border-color:rgba(255,255,255,0.1)}
.art-corps .border-white\/20{border-color:rgba(255,255,255,0.2)}
.art-corps .border-white\/30{border-color:rgba(255,255,255,0.3)}
.art-corps .border-white\/50{border-color:rgba(255,255,255,0.5)}
.art-corps .border-yellow-200{border-color:#FDE68A}
.art-corps .bottom-0{bottom:0}
.art-corps .bottom-8{bottom:2rem}
.art-corps .cursor-pointer{cursor:pointer}
.art-corps .divide-gray-200>*+*{border-color:#E2E8F0}
.art-corps .divide-slate-100>*+*{border-color:#F1F5F9}
.art-corps .divide-slate-200>*+*{border-color:#E2E8F0}
.art-corps .flex{display:flex}
.art-corps .flex-col{flex-direction:column}
.art-corps .flex-grow{flex-grow:1}
.art-corps .flex-shrink-0{flex-shrink:0}
.art-corps .flex-wrap{flex-wrap:wrap}
.art-corps .font-black{font-weight:800}
.art-corps .font-bold{font-weight:700}
.art-corps .font-display{font-family:var(--syne)}
.art-corps .font-light{font-weight:300}
.art-corps .font-medium{font-weight:500}
.art-corps .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.art-corps .font-normal{font-weight:400}
.art-corps .font-semibold{font-weight:600}
.art-corps .from-blue-200{--tw-from:#BFDBFE;--tw-st:var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to,transparent)}
.art-corps .from-blue-50{--tw-from:#EFF6FF;--tw-st:var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to,transparent)}
.art-corps .from-blue-600{--tw-from:#2563EB;--tw-st:var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to,transparent)}
.art-corps .from-slate-900{--tw-from:#0F172A;--tw-st:var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to,transparent)}
.art-corps .from-white{--tw-from:#FFFFFF;--tw-st:var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to,transparent)}
.art-corps .gap-12{gap:3rem}
.art-corps .gap-2{gap:.5rem}
.art-corps .gap-3{gap:.75rem}
.art-corps .gap-4{gap:1rem}
.art-corps .gap-6{gap:1.5rem}
.art-corps .gap-8{gap:2rem}
.art-corps .grid{display:grid}
.art-corps .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.art-corps .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.art-corps .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-corps .h-1{height:.25rem}
.art-corps .h-1\.5{height:.375rem}
.art-corps .h-10{height:2.5rem}
.art-corps .h-12{height:3rem}
.art-corps .h-16{height:4rem}
.art-corps .h-2{height:.5rem}
.art-corps .h-20{height:5rem}
.art-corps .h-32{height:8rem}
.art-corps .h-4{height:1rem}
.art-corps .h-48{height:12rem}
.art-corps .h-5{height:1.25rem}
.art-corps .h-6{height:1.5rem}
.art-corps .h-64{height:16rem}
.art-corps .h-8{height:2rem}
.art-corps .h-full{height:100%}
.art-corps .h-px{height:1px}
.art-corps .hidden{display:none}
.art-corps .inline-block{display:inline-block}
.art-corps .inline-flex{display:inline-flex}
.art-corps .inset-0{top:0;right:0;bottom:0;left:0}
.art-corps .italic{font-style:italic}
.art-corps .items-center{align-items:center}
.art-corps .items-end{align-items:flex-end}
.art-corps .items-start{align-items:flex-start}
.art-corps .justify-between{justify-content:space-between}
.art-corps .justify-center{justify-content:center}
.art-corps .leading-\[1\.1\]{line-height:1.1}
.art-corps .leading-relaxed{line-height:1.65}
.art-corps .leading-snug{line-height:1.35}
.art-corps .leading-tight{line-height:1.2}
.art-corps .left-0{left:0}
.art-corps .left-8{left:2rem}
.art-corps .left-\[39px\]{left:39px}
.art-corps .line-through{text-decoration-line:line-through}
.art-corps .list-decimal{list-style:decimal;padding-left:1.4em}
.art-corps .list-disc{list-style:disc;padding-left:1.25em}
.art-corps .list-none{list-style:none;padding-left:0}
.art-corps .m-0:not(h2){margin:0}
.art-corps .max-w-2xl{max-width:42rem}
.art-corps .max-w-3xl{max-width:48rem}
.art-corps .max-w-4xl{max-width:56rem}
.art-corps .max-w-7xl{max-width:80rem}
.art-corps .max-w-none{max-width:none}
.art-corps .mb-0:not(h2){margin-bottom:0}
.art-corps .mb-1:not(h2){margin-bottom:.25rem}
.art-corps .mb-10:not(h2){margin-bottom:2.25rem}
.art-corps .mb-12:not(h2){margin-bottom:2.5rem}
.art-corps .mb-16:not(h2){margin-bottom:2.75rem}
.art-corps .mb-2:not(h2){margin-bottom:.5rem}
.art-corps .mb-3:not(h2){margin-bottom:.75rem}
.art-corps .mb-4:not(h2){margin-bottom:1rem}
.art-corps .mb-6:not(h2){margin-bottom:1.5rem}
.art-corps .mb-8:not(h2){margin-bottom:2rem}
.art-corps .min-w-\[600px\]{min-width:600px}
.art-corps .min-w-\[800px\]{min-width:800px}
.art-corps .min-w-full{min-width:100%}
.art-corps .ml-auto:not(h2){margin-left:auto}
.art-corps .mr-2:not(h2){margin-right:.5rem}
.art-corps .mr-3:not(h2){margin-right:.75rem}
.art-corps .mr-4:not(h2){margin-right:1rem}
.art-corps .mt-0:not(h2){margin-top:0}
.art-corps .mt-0\.5:not(h2){margin-top:.125rem}
.art-corps .mt-1:not(h2){margin-top:.25rem}
.art-corps .mt-1\.5:not(h2){margin-top:.375rem}
.art-corps .mt-10:not(h2){margin-top:2.25rem}
.art-corps .mt-12:not(h2){margin-top:2.5rem}
.art-corps .mt-2:not(h2){margin-top:.5rem}
.art-corps .mt-3:not(h2){margin-top:.75rem}
.art-corps .mt-4:not(h2){margin-top:1rem}
.art-corps .mt-6:not(h2){margin-top:1.5rem}
.art-corps .mt-8:not(h2){margin-top:2rem}
.art-corps .mx-auto:not(h2){margin-left:auto;margin-right:auto}
.art-corps .my-10:not(h2){margin-top:2.25rem;margin-bottom:2.25rem}
.art-corps .my-12:not(h2){margin-top:2.5rem;margin-bottom:2.5rem}
.art-corps .my-16:not(h2){margin-top:2.75rem;margin-bottom:2.75rem}
.art-corps .my-20:not(h2){margin-top:3rem;margin-bottom:3rem}
.art-corps .my-6:not(h2){margin-top:1.5rem;margin-bottom:1.5rem}
.art-corps .my-8:not(h2){margin-top:2rem;margin-bottom:2rem}
.art-corps .no-underline{text-decoration-line:none}
.art-corps .opacity-10{opacity:0.1}
.art-corps .opacity-20{opacity:0.2}
.art-corps .opacity-50{opacity:0.5}
.art-corps .opacity-60{opacity:0.6}
.art-corps .opacity-80{opacity:0.8}
.art-corps .origin-left{transform-origin:left}
.art-corps .overflow-hidden{overflow:hidden}
.art-corps .overflow-x-auto{overflow-x:auto}
.art-corps .p-0{padding:0}
.art-corps .p-1\.5{padding:.375rem}
.art-corps .p-10{padding:2.25rem}
.art-corps .p-2{padding:.5rem}
.art-corps .p-3{padding:.75rem}
.art-corps .p-4{padding:1rem}
.art-corps .p-5{padding:1.25rem}
.art-corps .p-6{padding:1.5rem}
.art-corps .p-8{padding:2rem}
.art-corps .pb-2{padding-bottom:.5rem}
.art-corps .pb-20{padding-bottom:3rem}
.art-corps .pb-3{padding-bottom:.75rem}
.art-corps .pb-4{padding-bottom:1rem}
.art-corps .pb-8{padding-bottom:2rem}
.art-corps .pl-0{padding-left:0}
.art-corps .pl-4{padding-left:1rem}
.art-corps .pl-5{padding-left:1.25rem}
.art-corps .pl-6{padding-left:1.5rem}
.art-corps .pt-1{padding-top:.25rem}
.art-corps .pt-2{padding-top:.5rem}
.art-corps .pt-3{padding-top:.75rem}
.art-corps .pt-32{padding-top:3rem}
.art-corps .pt-4{padding-top:1rem}
.art-corps .pt-8{padding-top:2rem}
.art-corps .px-1{padding-left:.25rem;padding-right:.25rem}
.art-corps .px-2{padding-left:.5rem;padding-right:.5rem}
.art-corps .px-3{padding-left:.75rem;padding-right:.75rem}
.art-corps .px-4{padding-left:1rem;padding-right:1rem}
.art-corps .px-6{padding-left:1.5rem;padding-right:1.5rem}
.art-corps .px-8{padding-left:2rem;padding-right:2rem}
.art-corps .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.art-corps .py-1{padding-top:.25rem;padding-bottom:.25rem}
.art-corps .py-2{padding-top:.5rem;padding-bottom:.5rem}
.art-corps .py-3{padding-top:.75rem;padding-bottom:.75rem}
.art-corps .py-4{padding-top:1rem;padding-bottom:1rem}
.art-corps .relative{position:relative}
.art-corps .right-0{right:0}
.art-corps .rounded{border-radius:.375rem}
.art-corps .rounded-2xl{border-radius:1.25rem}
.art-corps .rounded-3xl{border-radius:1.5rem}
.art-corps .rounded-\[2\.5rem\]{border-radius:2.5rem}
.art-corps .rounded-bl-full{border-bottom-left-radius:9999px}
.art-corps .rounded-full{border-radius:9999px}
.art-corps .rounded-lg{border-radius:.75rem}
.art-corps .rounded-r-2xl{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem}
.art-corps .rounded-r-lg{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}
.art-corps .rounded-r-xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}
.art-corps .rounded-sm{border-radius:.25rem}
.art-corps .rounded-xl{border-radius:1rem}
.art-corps .shadow-inner{box-shadow:inset 0 2px 4px rgba(15,23,42,.06)}
.art-corps .shadow-lg{box-shadow:0 18px 36px -20px rgba(15,23,42,.28)}
.art-corps .shadow-md{box-shadow:0 10px 24px -14px rgba(15,23,42,.22)}
.art-corps .shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.06)}
.art-corps .shadow-xl{box-shadow:0 26px 50px -28px rgba(15,23,42,.32)}
.art-corps .shrink-0{flex-shrink:0}
.art-corps .space-y-1>*+*{margin-top:.25rem}
.art-corps .space-y-12>*+*{margin-top:2.5rem}
.art-corps .space-y-2>*+*{margin-top:.5rem}
.art-corps .space-y-3>*+*{margin-top:.75rem}
.art-corps .space-y-4>*+*{margin-top:1rem}
.art-corps .space-y-6>*+*{margin-top:1.5rem}
.art-corps .space-y-8>*+*{margin-top:2rem}
.art-corps .text-2xl:not(h2){font-size:1.45rem;line-height:1.85rem}
.art-corps .text-3xl:not(h2){font-size:1.75rem;line-height:2.1rem}
.art-corps .text-4xl:not(h2){font-size:2.1rem;line-height:2.4rem}
.art-corps .text-5xl:not(h2){font-size:2.6rem;line-height:1}
.art-corps .text-amber-500{color:#E59E22}
.art-corps .text-amber-600{color:#C27A12}
.art-corps .text-amber-700{color:#9A5B10}
.art-corps .text-amber-800{color:#7C4912}
.art-corps .text-amber-900{color:#663C12}
.art-corps .text-base:not(h2){font-size:1rem;line-height:1.6rem}
.art-corps .text-blue-100{color:#DBEAFE}
.art-corps .text-blue-200{color:#BFDBFE}
.art-corps .text-blue-300{color:#93C5FD}
.art-corps .text-blue-400{color:#60A5FA}
.art-corps .text-blue-50{color:#EFF6FF}
.art-corps .text-blue-500{color:#3B82F6}
.art-corps .text-blue-600{color:#2563EB}
.art-corps .text-blue-700{color:#1D4ED8}
.art-corps .text-blue-800{color:#1E40AF}
.art-corps .text-blue-900{color:#1E3A8A}
.art-corps .text-center{text-align:center}
.art-corps .text-emerald-100{color:#DBEAFE}
.art-corps .text-emerald-400{color:#60A5FA}
.art-corps .text-emerald-500{color:#3B82F6}
.art-corps .text-emerald-600{color:#2563EB}
.art-corps .text-emerald-700{color:#1D4ED8}
.art-corps .text-emerald-800{color:#1E40AF}
.art-corps .text-emerald-900{color:#1E3A8A}
.art-corps .text-gray-500{color:#64748B}
.art-corps .text-gray-900{color:#0F172A}
.art-corps .text-green-100{color:#DBEAFE}
.art-corps .text-green-500{color:#3B82F6}
.art-corps .text-green-600{color:#2563EB}
.art-corps .text-green-700{color:#1D4ED8}
.art-corps .text-green-800{color:#1E40AF}
.art-corps .text-green-900{color:#1E3A8A}
.art-corps .text-indigo-500{color:#3B82F6}
.art-corps .text-indigo-600{color:#2563EB}
.art-corps .text-indigo-800{color:#1E40AF}
.art-corps .text-indigo-900{color:#1E3A8A}
.art-corps .text-left{text-align:left}
.art-corps .text-lg:not(h2){font-size:1.125rem;line-height:1.7rem}
.art-corps .text-orange-500{color:#E59E22}
.art-corps .text-orange-600{color:#C27A12}
.art-corps .text-orange-800{color:#7C4912}
.art-corps .text-orange-900{color:#663C12}
.art-corps .text-purple-100{color:#DBEAFE}
.art-corps .text-purple-400{color:#60A5FA}
.art-corps .text-purple-500{color:#3B82F6}
.art-corps .text-purple-600{color:#2563EB}
.art-corps .text-purple-700{color:#1D4ED8}
.art-corps .text-purple-800{color:#1E40AF}
.art-corps .text-purple-900{color:#1E3A8A}
.art-corps .text-red-500{color:#E35454}
.art-corps .text-red-600{color:#C93A3A}
.art-corps .text-red-700{color:#A93030}
.art-corps .text-red-800{color:#8A2B2B}
.art-corps .text-red-900{color:#6F2626}
.art-corps .text-rose-500{color:#E35454}
.art-corps .text-rose-600{color:#C93A3A}
.art-corps .text-rose-800{color:#8A2B2B}
.art-corps .text-rose-900{color:#6F2626}
.art-corps .text-slate-200{color:#E2E8F0}
.art-corps .text-slate-300{color:#CBD5E1}
.art-corps .text-slate-400{color:#94A3B8}
.art-corps .text-slate-500{color:#64748B}
.art-corps .text-slate-600{color:#475569}
.art-corps .text-slate-700{color:#334155}
.art-corps .text-slate-800{color:#1E293B}
.art-corps .text-slate-900{color:#0F172A}
.art-corps .text-sm:not(h2){font-size:.875rem;line-height:1.4rem}
.art-corps .text-white{color:#FFFFFF}
.art-corps .text-xl:not(h2){font-size:1.25rem;line-height:1.6rem}
.art-corps .text-xs:not(h2){font-size:.75rem;line-height:1.1rem}
.art-corps .text-yellow-500{color:#E59E22}
.art-corps .text-yellow-600{color:#C27A12}
.art-corps .text-yellow-800{color:#7C4912}
.art-corps .to-blue-950{--tw-to:#172554}
.art-corps .to-emerald-200{--tw-to:#BFDBFE}
.art-corps .to-emerald-900{--tw-to:#1E3A8A}
.art-corps .to-indigo-50{--tw-to:#EFF6FF}
.art-corps .to-indigo-50\/50{--tw-to:rgba(239,246,255,0.5)}
.art-corps .to-orange-50\/50{--tw-to:rgba(255,251,235,0.5)}
.art-corps .to-purple-50{--tw-to:#EFF6FF}
.art-corps .to-purple-600{--tw-to:#2563EB}
.art-corps .to-purple-900{--tw-to:#1E3A8A}
.art-corps .to-slate-50{--tw-to:#F8FAFC}
.art-corps .to-slate-800{--tw-to:#1E293B}
.art-corps .to-transparent{--tw-to:transparent}
.art-corps .top-0{top:0}
.art-corps .top-8{top:2rem}
.art-corps .tracking-tight{letter-spacing:-.02em}
.art-corps .tracking-tighter{letter-spacing:-.04em}
.art-corps .tracking-wide{letter-spacing:.025em}
.art-corps .tracking-wider{letter-spacing:.06em}
.art-corps .tracking-widest{letter-spacing:.12em}
.art-corps .underline{text-decoration-line:underline}
.art-corps .uppercase{text-transform:uppercase}
.art-corps .via-blue-900{--tw-via:#1E3A8A}
.art-corps .via-purple-200{--tw-via:#BFDBFE}
.art-corps .w-1{width:.25rem}
.art-corps .w-1\.5{width:.375rem}
.art-corps .w-1\/5{width:20%}
.art-corps .w-10{width:2.5rem}
.art-corps .w-12{width:3rem}
.art-corps .w-16{width:4rem}
.art-corps .w-2{width:.5rem}
.art-corps .w-20{width:5rem}
.art-corps .w-32{width:8rem}
.art-corps .w-4{width:1rem}
.art-corps .w-48{width:12rem}
.art-corps .w-5{width:1.25rem}
.art-corps .w-6{width:1.5rem}
.art-corps .w-64{width:16rem}
.art-corps .w-8{width:2rem}
.art-corps .w-full{width:100%}
.art-corps .whitespace-nowrap{white-space:nowrap}
.art-corps .z-10{z-index:10}
.art-corps details[open] > summary .group-open\:bg-blue-600{background-color:#2563EB}
.art-corps details[open] > summary .group-open\:border-blue-600{border-color:#2563EB}
.art-corps details[open] > summary .group-open\:text-white{color:#FFFFFF}
@container corps (min-width:30rem){
.art-corps .sm\:block{display:block}
.art-corps .sm\:col-span-2{grid-column:span 2/span 2}
.art-corps .sm\:flex-row{flex-direction:row}
.art-corps .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container corps (min-width:34rem){
.art-corps .md\:col-span-1{grid-column:span 1/span 1}
.art-corps .md\:col-span-12{grid-column:span 12/span 12}
.art-corps .md\:col-span-2{grid-column:span 2/span 2}
.art-corps .md\:col-span-6{grid-column:span 6/span 6}
.art-corps .md\:gap-8{gap:2rem}
.art-corps .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.art-corps .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.art-corps .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-corps .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.art-corps .md\:mt-12:not(h2){margin-top:2.5rem}
.art-corps .md\:p-12{padding:2.5rem}
.art-corps .md\:p-16{padding:2.75rem}
.art-corps .md\:p-8{padding:2rem}
.art-corps .md\:px-8{padding-left:2rem;padding-right:2rem}
.art-corps .md\:text-2xl:not(h2){font-size:1.45rem;line-height:1.85rem}
.art-corps .md\:text-3xl:not(h2){font-size:1.75rem;line-height:2.1rem}
.art-corps .md\:text-4xl:not(h2){font-size:2.1rem;line-height:2.4rem}
.art-corps .md\:text-5xl:not(h2){font-size:2.6rem;line-height:1}
.art-corps .md\:text-base:not(h2){font-size:1rem;line-height:1.6rem}
.art-corps .md\:text-sm:not(h2){font-size:.875rem;line-height:1.4rem}
}
@container corps (min-width:46rem){
.art-corps .md\:block{display:block}
.art-corps .md\:flex{display:flex}
.art-corps .md\:flex-col{flex-direction:column}
.art-corps .md\:flex-row{flex-direction:row}
.art-corps .md\:flex-row-reverse{flex-direction:row-reverse}
.art-corps .md\:hidden{display:none}
.art-corps .md\:items-end{align-items:flex-end}
.art-corps .md\:left-1\/2{left:50%}
.art-corps .md\:pl-12{padding-left:3rem}
.art-corps .md\:pr-12{padding-right:3rem}
.art-corps .md\:text-right{text-align:right}
.art-corps .md\:w-1\/2{width:50%}
}
@container corps (min-width:46rem){
.art-corps .lg\:col-span-4{grid-column:span 4/span 4}
.art-corps .lg\:col-span-8{grid-column:span 8/span 8}
.art-corps .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-corps .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.art-corps .lg\:px-12{padding-left:3rem;padding-right:3rem}
.art-corps .lg\:text-6xl:not(h2){font-size:3rem;line-height:1}
}