/* Feuille des pages de cas pratiques (modèle commun aux quatre cas), reprise de la maquette dans l'ordre d'origine. */
/* ============ DESIGN SYSTEM, cf. src/styles/tokens.css ============ */
:root{
--navy-50:#5F7080; --navy-25:#87969F;
--violet-mid:#9069FA; --violet-10:#F6F3FF;
  /* violet-ink : seul violet autorisé pour du texte sur fond teinté. 5,37:1 sur violet-10. */
  --on-navy-70:#C6D2DE; --on-navy-25:#8FA2B4;

  /* Bricolage Grotesque remplace Syne : chasse plus etroite, hauteur d'x
     plus basse, donc un bloc de titre plus vertical a corps egal. Variable
     a axe optique, le navigateur ajuste le dessin selon la taille. */
  /* NOUVEAU JETON, à valider : libellés de statistique en chasse fixe.
     Police système, aucun chargement supplémentaire. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --fs-h3:1.22rem;
  --fs-h2:clamp(1.7rem,3.4vw,2.5rem); --fs-h1:clamp(2rem,4.3vw,3.05rem);
  --lh-tight:1.08; --lh-snug:1.38; 
--stack-2:16px; --stack-3:24px;     --pad-card:clamp(18px,1.8vw,24px);

  --hero-y:clamp(38px,4.4vw,62px);
  --hero-y-end:clamp(30px,3vw,38px);

  /* Rythme propre au corps d'article */
  /* Entre deux grandes thematiques. Mesure a 1 440 px : 2,4vw donnait
     34,6 px, ce qui separait a peine deux sections de ce qui separe
     deux paragraphes a l'interieur d'une section, 20 px. L'ecart passe
     a 49 px, soit deux fois et demie le pas interne : la hierarchie se
     lit sans avoir besoin d'un filet. */
  --prose-gap:clamp(40px,3.4vw,60px);
  --prose-flow:20px;                  /* entre deux paragraphes */

--r-xl:30px;     --shadow-card:0 14px 34px rgba(14,46,73,.12);
  --shadow-tile:0 10px 26px rgba(14,46,73,.14);
  --t-fast:.15s ease; --t-base:.22s ease;
}
@media (min-width:1100px){ :root{ --gutter:32px; } }
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-size:var(--fs-base);font-weight:var(--fw-text);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth;scroll-padding-top:96px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Interlettrage resserre et interlignage reduit a chaque niveau : c'est ce
   resserrement, autant que le changement de famille, qui corrige
   l'impression d'aplati. Les valeurs descendent avec le corps, un titre
   large supportant un serrage que le petit corps ne supporte pas. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:var(--lh-tight);text-wrap:balance;margin:0}
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;line-height:1.04}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:1.08}
h3{font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.28}
h4{letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  background:none;border:0;padding:0;border-radius:0;
  color:var(--violet);font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;line-height:1.5;
}
/* Filet du surtitre : barre oblique, reprise du signe « / » de la charte. */
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:none;transform:rotate(-38deg)}
.dark .eyebrow,.cta-txt .eyebrow{background:none;color:var(--violet-light)}
/* Sur --paper-alt, le violet tombe à 4,20:1 : les surtitres des sections
   teintées passent au violet encre, 5,39:1. */
.alt .eyebrow,.dh .eyebrow{color:var(--violet-ink)}
.lead{font-size:var(--fs-lead);color:var(--navy-70);max-width:58ch;font-weight:var(--fw-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:auto;min-height:48px;font-family:var(--display);font-weight:700;font-size:1rem;padding:.85em 1.7em;text-decoration:none;border:2px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:none}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--violet);color:#fff}
.btn-sm{padding:.65em 1.3em;font-size:var(--fs-sm)}
.btn-lg{padding:1em 2em;font-size:1.02rem}
.ph{background:var(--ph);border:1px dashed var(--ph-line);border-radius:var(--r-sm);display:grid;place-items:center;text-align:center;color:var(--ph-text);font-size:0.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:var(--stack-1)}
.todo{display:inline-block;background:var(--sky-20);color:var(--sky-ink);border-radius:var(--r-xs);font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.28em .6em;border:1px solid #B5E0F6}
/* ---------- NAV ---------- */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--stack-3);min-height:74px}
.nav-links>a{position:relative;text-decoration:none;font-weight:600;font-size:var(--fs-sm);padding-bottom:5px}
.nav-links>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--violet);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .34s cubic-bezier(.33,0,.2,1);
}
.nav-links>a:hover::after,
.nav-links>a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.nav-links>a[aria-current]::after{transform:scaleX(1);transform-origin:left center}
.nav-cta{display:flex;justify-content:flex-end;align-items:center;gap:var(--stack-2)}
.halo-wrap::before{
  content:"";position:absolute;inset:-3px;border-radius:var(--r-pill);z-index:0;opacity:0;
  background:conic-gradient(from var(--halo-ang),
    transparent 0 66%,
    rgba(166,130,251,.22) 76%,
    var(--violet-light) 87%,
    #ffffff 93%,
    var(--violet-light) 97%,
    transparent 100%);
}
.halo-wrap.halo-on::before{
  animation:haloTour 2.9s cubic-bezier(.42,0,.58,1) 1 forwards,
            haloFondu 2.9s linear 1 forwards;
}
/* =================================================================
   1. HAUT DE PAGE
   Titre à gauche, logo client en grand à droite, barre d'ancres,
   puis deux cartes blanches : statistiques, puis preuve.
   ================================================================= */
.dh{background:var(--paper-alt);padding-block:var(--hero-y) 0;border-bottom:1px solid var(--line)}
.fil-zone{background:var(--violet-20);padding-block:11px}
.fil{display:flex;align-items:center;gap:.55em;flex-wrap:wrap;font-size:1rem;color:#4A3C86}
.fil-zone .fil a:hover{color:var(--violet)}
.fil b{font-weight:var(--fw-strong);color:#2F2563}
.fil a{text-decoration:none}
.fil a:hover{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.fil svg{width:13px;height:13px;flex:none;opacity:.6}
.dh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,2.6vw,44px);align-items:center}
.dh-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:none;min-width:0}
.dh-copy>*+*{margin-top:var(--flow-base)}
.dh-copy .eyebrow{white-space:nowrap}
/* Surtitre et nom du client sur la meme ligne. Le nom etait repete
   sous le titre, en "Client : X", alors que le lecteur l'a deja vu ici
   et le revoit dans la colonne de gauche, dans le fil d'Ariane et sur
   le logo. Trois fois suffisent, quatre font redite.
   Le nom reprend la graisse et l'oeil du surtitre mais pas sa couleur :
   en violet il se lirait comme une seconde categorie, en bleu nuit il
   se lit comme ce qu'il est, un nom propre. */
.eb-ligne{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.eb-sep{width:1px;height:14px;background:var(--line);flex:none}
.eb-client{
  font-family:var(--display);font-weight:700;color:var(--navy);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;line-height:1.5;
}
.dh-copy .eb-ligne+h1{margin-top:var(--flow-tight)}
.dh-copy .eyebrow+h1{margin-top:var(--flow-tight)}
.dh-copy h1{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.06;max-width:24ch}
/* Logo client en grand */
.dh-mark{
  --mark:clamp(200px,22vw,290px);
  position:relative;overflow:hidden;
  width:var(--mark);aspect-ratio:1;flex:none;
  border-radius:var(--r-xl);display:grid;place-items:center;
  background:linear-gradient(145deg,#fff,#E8ECF4);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
/* Halo violet qui dérive lentement derrière le logo */
.dh-mark::before{
  content:"";position:absolute;z-index:0;width:62%;aspect-ratio:1;top:-8%;left:-12%;
  border-radius:var(--r-pill);
  background:radial-gradient(circle,rgba(144,105,250,.52),rgba(166,130,251,.16) 56%,transparent 72%);
  filter:blur(6px);
  animation:markDrift 22s ease-in-out infinite;
}
@keyframes markDrift{
  0%  {transform:translate(0,0)}
  25% {transform:translate(76%,14%)}
  50% {transform:translate(52%,80%)}
  75% {transform:translate(-4%,54%)}
  100%{transform:translate(0,0)}
}
/* Le sigle ou le logo est calé sur la taille du carré, jamais en débordement. */
.dh-mark .inner{position:relative;z-index:1;
  width:60%;aspect-ratio:1;border-radius:var(--r-pill);
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  padding:13%;
  font-family:var(--display);font-weight:800;font-size:calc(var(--mark) * .17);
  line-height:1.22;letter-spacing:-.02em;color:var(--navy);
}
/* Le contenu ne dépasse jamais du rond, texte accentué compris. */
.dh-mark .inner>*{max-width:100%;max-height:100%}
.dh-mark .inner img{object-fit:contain;display:block}
/* ---- Regle des logos clients, valable sur tous les cas pratiques ----
   Deux cas, et c'est la forme du fichier qui tranche, pas le gout.
   Un logo qui est deja un disque ou une pastille pleine porte la classe
   plein : il occupe le rond bord a bord, son propre bord faisant office
   de bord du rond, et la marge interieure est annulee. Centre avec
   marge, un tel logo donnait un petit disque flottant dans un grand
   rond blanc, deux cercles concentriques pour rien.
   Un logotype pose sur fond transparent garde le reglage par defaut :
   centre, avec les 13 % de marge, et le blanc du rond lui sert de fond.
   Sans cette marge ses lettres toucheraient le filet. */
/* Troisieme cas : un logotype horizontal a fond transparent. Pose au
   milieu avec la marge interieure commune, son encre ne couvre qu'un
   tiers de la pastille et le nom devient illisible. La classe "large"
   reduit la marge pour lui rendre sa largeur, sans jamais le rogner. */
.dh-mark .inner.large{padding:6%}
/* La pastille porte un degrade violet-bleu, fait pour des initiales
   blanches. Un logotype a fond transparent y disparait : on remet le
   fond blanc et le filet, comme pour un logo deja rond. */
.side-id .mk.large{padding:0 2px;background:#fff;border:1px solid var(--line)}
/* Un pictogramme compact a fond transparent a le meme probleme que le
   logotype : le degrade violet-bleu passe derriere lui. Fond blanc. */
.side-id .mk.transp{background:#fff;border:1px solid var(--line);padding:5px}
.side-id .mk.transp img{width:100%;height:auto}
.autre .mk.transp{background:#fff;border:1px solid var(--line);padding:5px}
.autre .mk.transp img{width:100%;height:auto}
/* Grande pastille du haut de page : 76 % du diametre, mesure pour que
   les coins du carre ne touchent pas le bord du rond. Le fichier -net
   est deja recadre sur son encre, donc 76 % d'image valent 76 % de
   logo visible, contre 33 % avec le fichier calibre pour le bandeau. */
/* Piege : un padding en pourcentage se calcule sur la largeur du BLOC
   CONTENEUR, ici .dh-mark, et non sur l'element lui-meme. La pastille
   ne fait que 60 % de ce bloc, donc 7 % ici valent 11,7 % de la
   pastille de chaque cote, soit 76,5 % de diametre utile, mesure. */
.dh-mark .inner.transp{padding:7%}
.dh-mark .inner.transp img{width:100%;height:auto}
.side-id .mk.large img{width:100%;height:auto}
.autre .mk.large{padding:0 2px;background:#fff;border:1px solid var(--line)}
.autre .mk.large img{width:100%;height:auto}
.dh-mark .inner.plein{padding:0;overflow:hidden}
.dh-mark .inner.plein img{width:100%;height:100%;border-radius:var(--r-pill)}
.side-id .mk.plein{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line)}
.side-id .mk.plein img{width:100%;height:100%;object-fit:cover}
.dh-bar .mk-sm.plein{padding:0;overflow:hidden}
.dh-bar .mk-sm.plein img{width:100%;height:100%;object-fit:cover}
/* Barre d'ancres, façon Speero */
.dh-bar{
  margin-top:var(--stack-3)!important;
  display:flex;align-items:center;gap:var(--stack-2) var(--stack-3);flex-wrap:wrap;
}
.dh-bar .client{font-size:var(--fs-sm);color:var(--navy-50)}
.dh-bar .client b{color:var(--navy);font-family:var(--display);font-weight:700}
/* Libelle de la barre d'ancres. Il tient la place que le nom du client
   occupait avant de remonter au surtitre, et il fait le travail que le
   nom ne faisait pas : dire que la suite se clique.
   "Acces rapide" plutot que "Sommaire" : la colonne de gauche et le
   panneau mobile portent deja ce mot, et ils listent les six sections
   quand cette barre n'en raccourcit que quatre. Deux objets differents
   meritent deux noms differents.
   Capitales et interlettrage repris du surtitre, mais en gris : c'est
   une etiquette, pas un titre, et elle ne doit pas peser plus que les
   liens qu'elle annonce. Gris mesure au pixel sur le fond reel du haut
   de page, #F3F5F9 : 4,67:1, AA pour du texte. */
.dh-lab{
  font-family:var(--display);font-weight:700;color:var(--navy-50);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.16em;
  line-height:1.5;flex:none;
}
.dh-bar .sep{width:1px;height:18px;background:var(--line);flex:none}
.dh-bar .liens{display:contents}
.dh-bar .mk-sm{display:none}
.dh-bar a{
  position:relative;text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:var(--fs-sm);padding-bottom:4px;
}
.dh-bar a svg{display:none}
.dh-bar a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--violet);
  transform:scaleX(0);transform-origin:right center;transition:transform .34s cubic-bezier(.33,0,.2,1);
}
.dh-bar a:hover::after,.dh-bar a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
/* Cartes de preuve, posées à cheval sur la section suivante */
.proof{margin-top:clamp(30px,3.6vw,48px);transform:translateY(clamp(26px,3.4vw,46px))}
.card-w{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);padding:clamp(26px,3vw,40px);
}
/* auto-fit et non repeat(3) : un cas peut n'avoir que deux reperes
   verifiables, et trois colonnes en laisseraient une vide. */
.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--stack-3)}
.stat{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:calc(var(--stack-3) / -2);top:8%;bottom:8%;width:1px;background:var(--line)}
.stat .n{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1;
  font-size:clamp(2.4rem,4.6vw,3.5rem);color:var(--navy);
}
.stat .n em{font-style:normal;color:var(--violet)}
/* Repere sans chiffre : une fleche a la place du nombre, calee sur la
   hauteur des nombres voisins. 0,78 em et non 1, parce qu'un glyphe
   chiffre n'occupe pas toute sa boite quand une icone si. */
.stat .n .fl-h{width:.78em;height:.78em;display:block;stroke-width:2.6}
.stat .l{
  font-family:var(--mono);font-size:1rem;letter-spacing:.01em;line-height:1.45;
  color:var(--navy-50);font-weight:500;max-width:22ch;
}
/* =================================================================
   2. CORPS : colonne latérale collante + article
   ================================================================= */
.body-zone{padding-block:calc(var(--section-y) + clamp(26px,3.4vw,46px)) var(--section-y)}
.body-grid{display:grid;grid-template-columns:clamp(260px,24vw,320px) 1fr;gap:clamp(34px,5vw,86px);align-items:start}
.side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:var(--stack-3)}
/* Dates de la page, en pied d'article. Le filet du haut les detache du
   dernier bloc sans ouvrir une section de plus. Le gris 5F7080 mesure
   5,10:1 sur le blanc de l'article, AA pour du texte. */
.dates{
  margin-top:var(--prose-gap);padding-top:var(--stack-3);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--navy-50);
}
.dates span{display:inline-block}
.dates time{font-variant-numeric:tabular-nums}
.side-id{display:flex;align-items:center;gap:12px}
.side-id .mk{
  width:44px;height:44px;flex:none;border-radius:var(--r-pill);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--violet),var(--sky));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.01em;
}
.side-id .nm{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.2;letter-spacing:-.01em}
.side-id .ty{display:block;font-family:var(--body);font-weight:var(--fw-text);font-size:1rem;color:var(--navy-50);line-height:1.4;letter-spacing:0}
.side-block{padding-top:var(--stack-3);border-top:1px solid var(--line)}
.side-block h4,.side-toc h4{
  font-family:var(--display);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-50);margin-bottom:10px;
}
.side-block p{font-size:var(--fs-sm);color:var(--navy-70);line-height:1.6}
.side-toc{padding-top:var(--stack-3);border-top:1px solid var(--line)}
.side-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.side-toc a{
  display:flex;gap:10px;align-items:baseline;text-decoration:none;
  padding:9px 0 9px 14px;margin-left:-1px;border-left:2px solid var(--line);
  font-size:var(--fs-sm);font-weight:var(--fw-text);color:var(--navy-50);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.side-toc a .no{font-family:var(--mono);font-size:0.92rem;flex:none}
.side-toc a:hover{color:var(--navy)}
.side-toc a[aria-current="true"]{color:var(--navy);font-weight:var(--fw-strong);border-left-color:var(--violet)}
/* Mini bloc d'action, colonne de gauche */
.side-cta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--violet-10);border:1px solid #DFD5FD;
  padding:22px 20px 20px;text-align:center;
}
.side-cta h4{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.3;letter-spacing:-.01em}
.side-cta p{margin-top:10px;font-size:1rem;color:var(--navy-70);line-height:1.55}
.side-cta p+.btn{margin-top:18px}
/* Deuxième exception assumée à « jamais de bouton pleine largeur » :
   colonne de 300px, action unique. La première est le tiroir mobile. */
.side-cta .btn{width:100%;padding-inline:1em}
/* La duree ne se dit qu'une fois, et apres le bouton. Elle etait
   annoncee dans le paragraphe du haut puis repetee ici : le lecteur
   lisait "trente minutes" deux fois avant d'avoir vu l'action. Le
   paragraphe dit maintenant ce qu'on fait, le bouton dit l'action, et
   la duree ferme en plus petit, sans disparaitre. */
.side-cta .note{margin-top:12px;font-size:0.92rem;color:var(--navy-50)}
/* ---- Article ---- */
.prose{min-width:0;max-width:74ch}
.prose ul,.prose ol{margin:0;padding:0;list-style:none}
.tldr{
  background:var(--paper-alt);border:1px solid var(--line);border-left:3px solid var(--violet);
  border-radius:var(--r-md);padding:clamp(20px,2.4vw,30px);
}
.tldr h2{
  font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--violet-ink);
  margin-bottom:var(--stack-2);
}
.tldr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tldr li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-base);color:var(--navy);line-height:1.6}
.tldr li svg{width:16px;height:16px;flex:none;margin-top:6px;color:var(--violet)}
.prose section{padding-block:0}
/* la règle globale des sections ne vaut pas dans l'article */
.prose>section{margin-top:var(--prose-gap)}
.prose section>*+*{margin-top:var(--prose-flow)}
.prose section>h2{margin-bottom:0}
/* Une section qui ouvre directement sur une liste a puces collait son
   titre au premier element : la liste n'a pas de marge haute propre et
   le titre a sa marge basse annulee, il restait 6 px mesures a
   l'ecran. On pose ici l'ecart d'un paragraphe, le meme que partout
   ailleurs dans l'article. */
.prose section>h2+.bul,.prose section>h2+ul,.prose section>h2+ol{margin-top:var(--prose-flow)}
.prose .chip{
  display:inline-block;background:var(--paper-alt);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.34em 1.05em;
  font-family:var(--body);font-weight:var(--fw-strong);font-size:1rem;line-height:1.4;
  color:var(--navy-70);letter-spacing:0;margin-bottom:var(--flow-tight);
}
.prose .chip+h2{margin-top:0}
.prose h2+p{margin-top:var(--stack-3)}
.prose h3{margin-top:var(--stack-3)!important;color:var(--navy)}
.prose p{color:var(--navy-70);font-size:var(--fs-base);line-height:var(--lh-base)}
.prose p b,.prose li b{color:var(--navy);font-weight:var(--fw-strong)}
.prose ul.bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--stack-3)}
.prose ul.bul li{position:relative;padding-left:22px;color:var(--navy-70)}
.prose ul.bul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:var(--r-pill);background:var(--violet-light)}
.prose ul.bul strong{
  display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;
  line-height:1.35;letter-spacing:-.005em;color:var(--navy);
}
.prose ul.bul p{margin-top:6px}
/* Étapes numérotées de la méthode */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--stack-2);counter-reset:s}
.steps li{
  list-style:none;display:block;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--pad-card);
  transition:border-color var(--t-fast),box-shadow var(--t-base);
}
.steps li:hover{border-color:#CBBDFB;box-shadow:0 10px 26px rgba(113,91,250,.1)}
/* Numéro et titre sur une ligne, texte pleine largeur dessous :
   mêmes marges à gauche et à droite dans toute la carte. */
.step-head{display:flex;align-items:center;gap:14px}
.step-head::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--violet-ink);
  background:var(--violet-10);border-radius:var(--r-sm);padding:7px 10px;line-height:1;
}
.steps h3{margin-top:0!important}
.steps p{margin-top:12px;font-size:var(--fs-sm)}
/* Tableau avant / après */
.tab{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tab caption{text-align:left;font-size:1rem;color:var(--navy-50);padding-bottom:10px}
.tab th,.tab td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tab thead th{
  font-family:var(--mono);font-size:0.82rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy-50);font-weight:600;border-bottom:1.5px solid var(--line);
}
.tab tbody th{font-family:var(--body);font-weight:var(--fw-strong);color:var(--navy)}
.tab td{color:var(--navy-70);font-family:var(--mono);font-size:1rem}
.tab td.up{color:var(--violet);font-weight:700}
.tab tbody tr:last-child th,.tab tbody tr:last-child td{border-bottom:0}
/* Verbatim en plein corps */
.pull{
  position:relative;border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);
  background:linear-gradient(140deg,#0E2E49,#24276E 60%,#3C2F9E);color:#fff;overflow:hidden;
}
.pull::after{content:"";position:absolute;width:40%;aspect-ratio:1;right:-8%;top:-34%;background:radial-gradient(circle,rgba(166,130,251,.5),transparent 68%);filter:blur(8px)}
.pull .qm{font-family:var(--display);font-weight:800;font-size:3rem;line-height:.6;color:var(--violet-light);display:block}
.pull q{display:block;quotes:none;margin-top:14px;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45;letter-spacing:-.01em}
.pull .who{margin-top:18px;display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);color:var(--on-navy-70)}
.pull .who .av{width:42px;height:42px;flex:none;border-radius:var(--r-pill);overflow:hidden}
.pull .who .av .ph{height:100%;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#D4DEEA;font-size:0.58rem}
.pull .who .av.plein{background:#fff}
.pull .who .av.plein img{width:100%;height:100%;object-fit:cover;display:block}
.pull .who .av img{width:100%;height:100%;object-fit:cover;display:block}
.pull .who b{display:block;color:#fff;font-weight:var(--fw-strong)}
/* ---- Carrousel d'exemples visuels ---- */
.car-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--stack-3);flex-wrap:wrap}
.car-nav{display:flex;gap:10px;flex:none}
.car-nav button{
  width:44px;height:44px;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;border:1.5px solid var(--line);color:var(--navy);display:grid;place-items:center;
  transition:border-color var(--t-fast),background var(--t-fast),opacity var(--t-fast);
}
.car-nav button:hover:not(:disabled){border-color:var(--violet);background:var(--violet-10);color:var(--violet)}
.car-nav button:disabled{opacity:.35;cursor:default}
.car-nav svg{width:17px;height:17px}
.car-rail{
  margin-top:var(--stack-3);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
}
.car-track{
  display:flex;gap:var(--stack-3);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:4px;cursor:grab;
}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-track.drag *{pointer-events:none}
.car-item{flex:none;width:clamp(240px,58%,380px);scroll-snap-align:start}
/* 16 sur 10 et non 4 sur 3 : c'est le cadre auquel les visuels sont
   ramenes a la fabrication, par ajout de marge et non par rognage. */
/* Le ratio des apercus est un reglage de page, pas une constante : il
   suit le format des visuels du cas. Ici 4 sur 3, parce que quatre des
   cinq fichiers sont carres ; sur un cas aux visuels larges, 16 sur 10
   convient mieux. Les fichiers sont fabriques a ce ratio. */
.car-item .shot{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden}
/* Aperçus au format paysage (Bugali) : champ format_apercus: "16/10" du cas. */
:where(.apercus-16-10) .car-item .shot{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden}
.car-item .shot .ph{height:100%;border-radius:var(--r-md)}
.car-item .cap{margin-top:12px;font-size:1rem;color:var(--navy-50);line-height:1.5}
/* ---------- APERCU AGRANDI ----------
   Un apercu de carrousel fait 380 px de large au mieux : aucun de ces
   visuels n'y est lisible, ils portent tous du texte. Le clic ouvre
   donc l'image en grand.
   L'apercu est un bouton et non une image cliquable : il est atteint
   au clavier, annonce comme une action, et declenche a l'espace comme
   a l'entree sans une ligne de script. La fenetre est un dialog natif,
   qui apporte la fermeture a l'echappement, le piege a focus et le
   retour du focus sur le bouton d'origine, tout cela sans code. */
.car-item button.shot{display:block;width:100%;padding:0;border:1px solid var(--line);
  background:var(--paper-alt);cursor:zoom-in;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.car-item .shot img{width:100%;height:100%;object-fit:cover;display:block}
.car-item button.shot:hover,.car-item button.shot:focus-visible{
  border-color:#DFD5FD;box-shadow:0 14px 30px -14px rgba(14,46,73,.3);transform:translateY(-2px)}
/* Pastille de loupe : sans elle, rien ne dit qu'un apercu s'ouvre.
   Elle ne vise que le bouton : un emplacement encore vide reste un
   div, et il ne doit pas promettre une action qui n'existe pas. */
.car-item button.shot{position:relative}
.car-item button.shot::after{
  content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;
  border-radius:var(--r-pill);background:rgba(14,46,73,.72) no-repeat center/15px 15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:.92;pointer-events:none;
}
.zoom{
  width:min(96vw,1400px);max-width:none;max-height:92vh;
  padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:0 40px 90px -30px rgba(6,20,34,.7);
}
.zoom::backdrop{background:rgba(6,20,34,.86)}
.zoom img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:var(--paper-alt)}
.zoom-cap{padding:14px var(--pad-card);font-size:var(--fs-sm);color:var(--navy-70);line-height:1.5}
/* La croix est posee sur l'image, en pastille sombre : les visuels ont
   des fonds clairs et des fonds violets, une croix sans pastille
   disparaitrait sur l'un des deux. Mesure du blanc sur la pastille,
   12,4:1. 44 px de cote, la cible tactile minimale. */
.zoom-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border:0;border-radius:var(--r-pill);
  background:rgba(6,20,34,.78);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--t-fast);
}
.zoom-x:hover,.zoom-x:focus-visible{background:rgba(6,20,34,.95)}
.zoom-x svg{width:19px;height:19px}
/* Fleches de defilement. Posees sur les bords de l'image et non sous
   elle : le pouce et la souris les trouvent la ou l'oeil regarde deja.
   Meme pastille sombre que la croix, pour la meme raison : les visuels
   ont des fonds clairs et des fonds violets. */
.zoom-nav{
  position:absolute;top:calc(50% - 22px);z-index:2;
  width:44px;height:44px;border:0;border-radius:var(--r-pill);
  background:rgba(6,20,34,.72);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--t-fast),opacity var(--t-fast);
}
.zoom-nav:hover,.zoom-nav:focus-visible{background:rgba(6,20,34,.95)}
.zoom-nav[disabled]{opacity:.28;cursor:default}
.zoom-nav svg{width:20px;height:20px}
.zoom-prec{left:12px}
.zoom-suiv{right:12px}
/* Rang de l'apercu dans la serie. Sans lui, on ne sait pas combien il
   en reste, et on clique jusqu'a retomber sur le premier. */
.zoom-cap{display:flex;align-items:baseline;gap:14px;justify-content:space-between}
.zoom-rang{flex:none;font-family:var(--mono);font-size:1rem;color:var(--navy-50);
  font-variant-numeric:tabular-nums}
.zoom-cadre{display:block}
@media (max-width:760px){
  .zoom{width:96vw}
  /* Afficher le visuel en entier sur 374 px ne le rend pas lisible :
     on le laisse deborder a 900 px et on rend sa boite defilante, ce
     qui donne au doigt ce que l'agrandissement donne en bureau.
     overscroll-behavior contient le geste dans la boite, sinon le
     defilement se propage a la page sous la fenetre modale. */
  .zoom-cadre{overflow:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;max-height:62vh}
  .zoom-cadre img{width:900px;max-width:none;max-height:none}
  .zoom-cap{padding-block:12px}
}
/* =================================================================
   3. AUTRES CAS, pleine largeur
   ================================================================= */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head>*+*{margin-top:var(--flow-base)}
.sec-head .eyebrow+h2{margin-top:var(--flow-tight)}
.autres-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.autre{
  display:flex;flex-direction:column;gap:var(--stack-2);text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-card);
  transition:border-color var(--t-fast),box-shadow var(--t-base),transform var(--t-base),background var(--t-fast);
}
.autre:hover{border-color:#CBBDFB;background:var(--violet-10);box-shadow:0 14px 32px rgba(113,91,250,.12);transform:translateY(-3px)}
.autre .top{display:flex;align-items:center;gap:12px}
/* Meme regle que partout : un logo deja rond remplit la pastille. */
.autre .mk.plein{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line)}
.autre .mk.plein img{width:100%;height:100%;object-fit:cover;display:block}
.autre .mk{
  width:48px;height:48px;flex:none;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--paper-alt);border:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:1rem;color:var(--navy);
}
.autre .nm{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.25;letter-spacing:-.01em}
.autre .nm span{display:block;font-family:var(--body);font-weight:var(--fw-text);font-size:1rem;color:var(--navy-50);letter-spacing:0;line-height:1.4}
.autre .ph-line{font-size:var(--fs-sm);color:var(--navy-70);line-height:1.55;flex:1}
.autre .go{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;
  font-size:var(--fs-sm);color:var(--violet);
}
.autre .go svg{width:15px;height:15px;transition:transform var(--t-fast)}
.autre:hover .go svg{transform:translateX(4px)}
/* ---------- BLOC CTA ---------- */
.cta-zone{padding-block:var(--section-y)}
.cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(34px,4.6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;
  background:linear-gradient(118deg,#0E2E49 0%,#24276E 28%,#5438DF 55%,#2B2B7D 78%,#0E2E49 100%);
  background-size:260% 260%;
  animation:drift 26s ease-in-out infinite;
  color:#fff;isolation:isolate;
}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-card::after{
  content:"";position:absolute;z-index:-1;width:44%;aspect-ratio:1;right:-5%;top:-26%;
  background:radial-gradient(circle,rgba(166,130,251,.55),transparent 68%);filter:blur(10px);
}
.cta-txt{display:flex;flex-direction:column;align-items:flex-start}
.cta-txt>*+*{margin-top:var(--flow-base)}
.cta-txt .eyebrow+h2{margin-top:var(--flow-tight)}
.cta-txt p+.btn{margin-top:var(--flow-cta)}
.cta-txt .btn+.reassurance{margin-top:var(--stack-2)}
.cta-txt .reassurance+.sig{margin-top:var(--stack-2)}
.cta-txt h2{color:#fff;max-width:17ch}
.cta-txt p{color:var(--on-navy-70);font-weight:var(--fw-text);font-size:var(--fs-lead);max-width:44ch}
.cta-txt .sig{font-size:1rem;color:var(--on-navy-25);font-weight:var(--fw-text)}
.reassurance{display:flex;gap:var(--stack-3);flex-wrap:wrap}
.reassurance span{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-sm);color:var(--on-navy-70);font-weight:var(--fw-text)}
.reassurance svg{width:16px;height:16px;flex:none;color:var(--violet-light)}
/* ---------- ORBITE D'OUTILS, reprise de la page d'accueil ----------
   Deux anneaux concentriques tournent en sens inverse, chacun portant
   des bulles d'outils. La marque est posee devant, immobile.
   Chaque bulle subit TROIS rotations : celle du rail, animee, celle de
   .pos, fixe et egale a l'angle de placement, et la contre-rotation.
   Les trois doivent s'annuler, sinon un logo reste penche de son angle
   de placement. Ce visuel est le meme sur tous les cas pratiques : il
   est simple, il tourne sans rien demander, et il montre les outils du
   metier au moment ou le lecteur decide de prendre rendez-vous. */
.cta-visual{position:relative;aspect-ratio:1;--lueur:30px;--etal:8px}
.orbite{position:absolute;inset:0}
.orbite::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(8,26,44,.82) 0%, rgba(8,26,44,.55) 46%, rgba(8,26,44,0) 72%)}
.anneau{position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.17);transform:translate(-50%,-50%);pointer-events:none}
.a1{width:94%;height:94%}
.a2{width:62%;height:62%}
.rail{position:absolute;inset:0;pointer-events:none}
.r1{animation:orbite 76s linear infinite}
.r2{animation:orbite 56s linear infinite reverse}
@keyframes orbite{to{transform:rotate(360deg)}}
.pos{position:absolute;inset:var(--in);transform:rotate(var(--a))}
.r1 .pos{--in:7%}
.r2 .pos{--in:22%}
.bulle{
  position:absolute;top:0;left:50%;width:var(--d);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),
             0 0 var(--lueur) var(--etal) var(--halo);
}
.r1 .bulle{--d:15%}
.r2 .bulle{--d:19%}
.r1 .bulle{animation:contre 76s linear infinite}
.r2 .bulle{animation:contre 56s linear infinite reverse}
@keyframes contre{
  from{transform:rotate(calc(-1 * var(--a)))}
  to{transform:rotate(calc(-1 * var(--a) - 360deg))}
}
.bulle img{width:100%;height:100%;object-fit:contain;display:block}
.t-violet{--halo:rgba(113,91,250,.62)}
.t-clair {--halo:rgba(166,130,251,.58)}
.t-ciel  {--halo:rgba(79,193,253,.55)}
.t-or    {--halo:rgba(242,179,61,.50)}
.orb-marque{position:absolute;inset:0;margin:auto;
  width:36%;height:36%;z-index:2;display:block;pointer-events:none;
  filter:drop-shadow(0 0 38px rgba(113,91,250,.60))
         drop-shadow(0 10px 26px rgba(6,20,40,.45))}
/* ---------- PIED DE PAGE ---------- */
/* =================================================================
   SOMMAIRE COLLANT EN BAS D'ÉCRAN (<= 980px)
   Remplace le sommaire de la colonne latérale. Apparaît après le fold,
   disparaît à la fin du contenu du cas pratique.
   ================================================================= */
.mtoc{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#fff;border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -10px 30px rgba(14,46,73,.16);
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.33,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mtoc.on{transform:translateY(0)}
.mtoc-bar{
  width:100%;display:flex;align-items:center;gap:12px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:15px var(--gutter);min-height:56px;
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);
}
.mtoc-bar .lab{flex:1}
.mtoc-bar svg{width:20px;height:20px;flex:none}
.mtoc-bar .ico{color:var(--violet)}
.mtoc-bar .chev{color:var(--navy-50);transition:transform .3s ease}
.mtoc.open .mtoc-bar .chev{transform:rotate(180deg)}
.mtoc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.mtoc.open .mtoc-panel{grid-template-rows:1fr}
.mtoc-in{overflow:hidden}
/* Trois entrées visibles, le reste au défilement interne */
.mtoc-list{
  max-height:171px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border-top:1px solid var(--line);
}
.mtoc-list a{
  display:flex;gap:12px;align-items:baseline;
  padding:16px var(--gutter);text-decoration:none;
  font-size:var(--fs-sm);font-weight:var(--fw-text);color:var(--navy-70);
  border-bottom:1px solid var(--line);
}
.mtoc-list .no{font-family:var(--mono);font-size:0.92rem;color:var(--navy-50);flex:none}
.mtoc-list a[aria-current="true"] .no{color:var(--violet)}
.mtoc-list a:last-child{border-bottom:0}
.mtoc-list a[aria-current="true"]{color:var(--violet);font-weight:var(--fw-strong)}
.mtoc-cta{padding:16px var(--gutter) 18px;border-top:1px solid var(--line)}
/* Troisième exception assumée à « jamais de bouton pleine largeur » :
   barre collante, action unique. */
.mtoc-cta .btn{width:100%}
/* ---------- PIED DE PAGE ----------
   Bande bleue, plus saturée que le navy du bloc d'appel à l'action qui la
   précède, pour que les deux ne se confondent pas. La marque blanche
   n'existe que là. Identique sur les six pages. */
.pied-col h4{font-family:var(--display);color:#fff;font-size:0.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 var(--stack-2)}
footer a{text-decoration:none;color:#D7E2EC;transition:color .16s ease}
footer a:hover{color:#C0A6FF}
.socials{display:flex;gap:var(--stack-1)}
.social{width:44px;height:44px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
/* Plaque pleine : le logo occupe tout le disque, pas de marge interieure. */
.social-plein{padding:0;border-color:transparent;background:none}
.social:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
/* Le bleu LinkedIn tombe à 2,16:1 sur le bleu du pied de page. Le logo est
   une marque déposée, sa couleur ne se change pas : on le détache avec un
   anneau clair, qui n'appartient pas au logo. */
.social-li{background:none;border-color:rgba(255,255,255,.34);padding:0}
.social-li:hover{background:none;border-color:rgba(255,255,255,.7)}
/* Appel a l'action secondaire du pied de page. Le pied n'est pas une
   section .dark : btn-ghost y prendrait --navy pour sa bordure et son
   texte, invisible sur le degrade bleu nuit. La fleche est portee ici
   et non par btn-fleche, qui n'existe pas sur toutes les pages. */
.pied-cta{margin-top:var(--stack-3);border-color:rgba(255,255,255,.42);color:#fff}
.pied-cta:hover{background:#fff;border-color:#fff;color:var(--navy)}
.pied-cta svg{width:17px;height:17px;flex:none;display:block;transition:transform .18s ease}
@media (max-width:980px){
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pied-grille{grid-template-columns:1fr}
  .pied-col{padding-top:0}
  /* Pied de page centre en mobile uniquement. Sous 640 px les trois
     colonnes sont empilees : un alignement a gauche laisserait des blocs
     de largeurs tres inegales. Au-dela, on garde l'alignement a gauche
     d'origine, qui structure la grille a trois colonnes.
     .pied-col passe en colonne flex parce que son bouton est un enfant
     direct du nav, hors de la liste : text-align seul ne centrerait pas
     un element en inline-flex.
     La ligne du bas est redeclaree ici et non dans la base : posee dans
     la base avant sa declaration d'origine, elle perdait contre son
     space-between a specificite egale. */
  .pied-grille{text-align:center}
  .pied-marque{align-items:center}
  .pied-col{display:flex;flex-direction:column;align-items:center}
  .pied-col ul{align-items:center}
  .socials{justify-content:center}
  .pied-bas>.wrap{justify-content:center;text-align:center}
}
@media (max-width:980px){ .mtoc{display:block} }
@media (prefers-reduced-motion:reduce){ .mtoc{transition:none} }
/* =================================================================
   MENU BURGER (<= 980px)
   ================================================================= */
.burger{
  display:none;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  background:none;border:1.5px solid var(--line);border-radius:14px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.burger:hover{border-color:var(--violet);background:var(--violet-10)}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(14,46,73,.5);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s;
}
.drawer{
  position:fixed;top:0;bottom:0;left:auto;right:0;z-index:90;
  width:min(86vw,370px);background:var(--navy);color:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .36s cubic-bezier(.33,0,.2,1);
  box-shadow:0 0 50px rgba(0,0,0,.4);
  overflow-y:auto;overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  visibility:hidden;
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.14)}
.drawer-close{
  width:44px;height:44px;flex:none;cursor:pointer;background:none;
  border:1.5px solid var(--violet-light);border-radius:12px;color:#fff;display:grid;place-items:center;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.drawer-close:hover{background:var(--violet);border-color:var(--violet)}
.drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);
  padding:20px 0;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;
  border-bottom:1px solid rgba(255,255,255,.12);transition:color var(--t-fast);
}
.drawer-nav a:last-child{border-bottom:0}
.drawer-nav a svg{width:17px;height:17px;flex:none;opacity:.55;transform:none}
.drawer-nav a:hover{color:var(--violet-light)}
.drawer-nav>a svg{transition:transform var(--t-fast),opacity var(--t-fast)}
.drawer-nav>a:hover svg{transform:translateX(4px);opacity:1}
.drawer-nav a[aria-current]{color:var(--violet-light)}
.drawer-foot{margin-top:0;padding:26px 22px 0}
.drawer-foot::before{content:"";display:block;height:1px;background:rgba(255,255,255,.14);margin-bottom:26px}
/* Première exception assumée : action unique du tiroir. */
.drawer-foot .btn{width:100%}
.drawer-foot .note{margin-top:14px;text-align:center;font-size:1rem;color:var(--on-navy-25);font-weight:var(--fw-text)}
.drawer .btn-primary:hover,.drawer .btn-primary:focus-visible{background:var(--violet-light);color:var(--navy)}
.drawer-group-btn{
  width:100%;background:none;border:0;cursor:pointer;color:#fff;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);
  padding:20px 0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;
  transition:color var(--t-fast);
}
.drawer-group-btn:hover{color:var(--violet-light)}
.drawer-group-btn .chev{width:18px;height:18px;flex:none;opacity:.6;transition:transform .3s ease,opacity var(--t-fast)}
.drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.dsub{display:flex!important;align-items:flex-start;gap:12px;padding:14px 0 14px 2px;border-bottom:0!important;text-decoration:none;justify-content:flex-start!important}
.dsub:last-child{padding-bottom:22px}
.dico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--violet),var(--sky))}
.dico.alt{background:linear-gradient(140deg,var(--violet-light),var(--violet))}
.dico svg{width:20px;height:20px}
.dsub svg,.dsub:hover svg{transform:none!important}
.dico,.dsub:hover .dico{transform:none}
.dtxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.dtxt strong{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.25;letter-spacing:-.01em;color:#fff}
.dtxt small{font-family:var(--body);font-weight:var(--fw-text);font-size:1rem;line-height:1.4;color:var(--on-navy-25)}
.dsub:hover .dtxt strong{color:var(--violet-light)}
.dsub:hover .dtxt small{color:var(--on-navy-70)}
/* =================== RESPONSIVE ===================
   Règle d'or mobile : le texte d'abord, le visuel en dernier.
   ================================================== */
@media (max-width:1180px){
  .body-grid{grid-template-columns:clamp(240px,26vw,290px) 1fr;gap:clamp(28px,3.6vw,52px)}
}
@media (max-width:980px){
  .nav-links{display:none}
  /* Respiration verticale : le bouton ne doit jamais toucher les bords. */
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);min-height:66px;padding-block:11px}
  .burger{display:inline-flex}

  /* Le haut de page : le titre d'abord, le logo après. */
  .dh-grid{grid-template-columns:1fr;gap:var(--stack-4)}
  .dh-copy{max-width:none;order:1}
  .dh-mark{order:2;width:clamp(150px,34vw,210px)}

  .statband{grid-template-columns:1fr;gap:var(--stack-4)}
  .stat+.stat::before{left:0;right:0;top:calc(var(--stack-4) / -2);bottom:auto;width:auto;height:1px}

  /* La colonne latérale cesse d'être collante et passe au-dessus.
     Le sommaire et l'action partent dans la barre collante du bas. */
  .body-grid{grid-template-columns:1fr;gap:var(--stack-3)}
  .side{position:static;gap:var(--stack-3)}
  /* Le fold porte déjà le logo et le nom : la colonne latérale disparaît. */
  .side{display:none}
  .prose{max-width:none}

  .autres-grid{grid-template-columns:repeat(2,1fr)}
  .cta-card{grid-template-columns:1fr;gap:var(--stack-4)}
  .cta-txt{order:1}
  /* width:100 % obligatoire : tous les enfants de l'orbite sont en
     position absolue, sans elle le bloc n'a aucune largeur propre et
     disparait. */
  .cta-visual{order:2;width:100%;max-width:420px;aspect-ratio:1;margin-inline:auto;
    --lueur:18px;--etal:5px}
}
@media (max-width:760px){
  .cta-card{padding:clamp(28px,5vw,40px);border-radius:var(--r-lg)}
  .cta-txt h2,.cta-txt p{max-width:none}
  .car-head{align-items:flex-start}

  /* Réassurance du bloc d'action : une seule ligne, points médians au lieu des coches */
  .cta-card{padding:26px 22px}
  .reassurance{flex-wrap:nowrap;gap:0;align-items:baseline}
  .reassurance svg{display:none}
  .reassurance span{white-space:nowrap;font-size:1rem}
  .reassurance span+span::before{content:"·";margin:0 .55em;color:var(--violet-light);font-weight:700}

  /* Le logo quitte sa grande vignette et se range à côté du nom du client */
  .dh-mark{display:none}
  .dh-bar .mk-sm{
    display:flex;width:44px;height:44px;flex:none;
    border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
    box-shadow:0 4px 12px rgba(14,46,73,.1);
    font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.22;color:var(--navy);
  }

  /* Accès rapide : des tuiles tapables, deux par ligne, et non des liens soulignés */
  .dh-bar{display:block;margin-top:var(--stack-3)!important}
  .dh-bar .sep{display:none}
  .dh-bar .client{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  /* En mobile la barre passe en tuiles sur deux colonnes : l'etiquette
     se pose au-dessus, elle ne peut plus etre sur la meme ligne. */
  .dh-lab{display:block;margin-bottom:10px}
  .dh-bar .liens{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .dh-bar a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
    padding:12px 14px;min-height:50px;font-size:1rem;padding-bottom:12px;
    transition:border-color var(--t-fast),background var(--t-fast);
  }
  .dh-bar a::after{content:none}
  .dh-bar a:active{border-color:var(--violet);background:var(--violet-10)}
  .dh-bar a svg{display:block;width:14px;height:14px;color:var(--violet);flex:none}
}
/* ---------------- MOBILE ---------------- */
@media (max-width:640px){
  :root{
    --gutter:18px;
    --flow-tight:16px; --flow-base:28px; --flow-cta:36px;
    --hero-y:40px; --hero-y-end:38px;
    --section-y:64px; --section-y-sm:44px;
    --prose-gap:46px; --prose-flow:20px;
  }
  html{scroll-padding-top:84px}
  .proof{transform:none;margin-top:var(--stack-4);padding-bottom:var(--section-y-sm)}
  .card-w{padding:24px 20px}
  .statband{gap:var(--stack-3)}
  .stat{align-items:flex-start;text-align:left}
  .stat .n{font-size:2.1rem}
  .stat .l{max-width:none}
  .stat+.stat::before{top:calc(var(--stack-3) / -2)}
  .body-zone{padding-block:var(--section-y-sm) var(--section-y)}
  .tldr{padding:20px 18px}
  .steps li{padding:18px 16px}
  .pull{padding:24px 20px}
  .card-w,.tldr,.steps li,.pull,.autre{border-radius:var(--r-md)}
  .sec-head{margin-bottom:var(--stack-4)}
  .car-rail{margin-top:var(--stack-2)}
  .autres-grid{grid-template-columns:1fr}
  .car-item{width:min(82%,330px)}
  .fil-zone{padding-block:10px}
  .tab{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:480px){
  :root{--gutter:16px;--flow-base:26px;--flow-cta:34px}
  .dh-copy h1{font-size:clamp(1.78rem,7.6vw,2.1rem)}
  .nav-inner{min-height:0;padding-block:10px}
  .nav .btn-sm{padding:.55em 1em;font-size:1rem;min-height:42px}
  .btn-lg{font-size:1rem;padding:.9em 1.6em}
  .card-w{padding:22px 18px}
  .stat .n{font-size:2.6rem}
  .steps li{gap:12px}
  .reassurance{gap:var(--stack-2) var(--stack-3)}
}
@media (max-width:420px){
  .nav .btn-sm{padding:.55em .95em}
  .drawer{width:min(90vw,340px)}
}
@media (max-width:380px){
  :root{--gutter:14px}
  .cta-card{padding:22px 18px}
  .reassurance span{font-size:.94rem}
  .reassurance span+span::before{margin:0 .42em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .cta-card{animation:none;background-size:100% 100%}
  .car-track{scroll-behavior:auto}
  .drawer,.scrim{transition:none}
}
/* =================================================================
   CENTRAGE OPTIQUE DES PASTILLES RONDES
   Un texte centré dans un rond est centré sur sa boîte de ligne,
   qui réserve de la place sous la ligne de base pour les jambages.
   Un sigle en capitales se retrouve donc décalé, et un accent comme
   le tréma de Ü aggrave le décalage. La valeur exacte dépend des
   métriques de la police : elle est mesurée au rendu par le script
   en bas de page, jamais estimée.
   ================================================================= */
.logo,.cas-logo,.dh-mark .inner,.side-id .mk,.autre .mk,.social{
  display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;
}
/* Le petit sigle mobile garde son display:none par défaut : la règle
   de centrage ne doit surtout pas le réafficher en desktop. */
.dh-bar .mk-sm{align-items:center;justify-content:center;line-height:1;text-align:center}
.logo>*,.cas-logo>*,.dh-mark .inner>*,.dh-bar .mk-sm>*,.side-id .mk>*,.autre .mk>*{
  display:block;line-height:1;max-width:100%;max-height:100%;
}
.logo img,.cas-logo img,.dh-mark .inner img,.side-id .mk img,.autre .mk img{
  object-fit:contain;
}
/* Décalage mesuré, posé par le script. Zéro tant qu'il n'a pas tourné. */
/* =================================================================
   MENU DÉROULANT DES EXPERTISES, desktop
   Même composant que sur la page d'accueil. En dessous de 980px,
   le relais est pris par le groupe dépliable du tiroir.
   ================================================================= */
.nav-trigger{
  position:relative;text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  font-family:var(--body);color:inherit;background:none;border:0;cursor:pointer;
  line-height:1.5;padding:0 0 5px;display:inline-flex;align-items:center;gap:6px;
}
.nav-trigger::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--violet);transform:scaleX(0);transform-origin:right center;
  transition:transform .34s cubic-bezier(.33,0,.2,1);
}
.nav-trigger:hover::after,
.nav-trigger:focus-visible::after,
.nav-item.open .nav-trigger::after,
.nav-item.actif .nav-trigger::after{transform:scaleX(1);transform-origin:left center}
.nav-trigger .chev{width:14px;height:14px;flex:none;transition:transform .22s ease}
.mega{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,-8px);
  width:min(440px,calc(100vw - (var(--gutter) * 2)));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(14,46,73,.16);
  padding:var(--stack-2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:60;
}
/* Pont invisible : le survol ne se coupe pas entre le lien et le panneau. */
.mega::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:18px}
.mega-link{
  display:flex;gap:var(--stack-2);align-items:flex-start;
  padding:var(--stack-2);border-radius:var(--r-sm);text-decoration:none;
  transition:background .15s ease;
}
.mega-link:hover{background:var(--paper-alt)}
.mega-ico{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--sky));
}
.mega-link:nth-child(2) .mega-ico{background:linear-gradient(140deg,var(--violet-light),var(--violet))}
.mega-txt strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--navy)}
.mega-txt span{display:block;font-size:1rem;font-weight:var(--fw-text);color:var(--navy-70);line-height:1.5;margin-top:2px}
@media (max-width:980px){ .nav-item{display:none} }