/* Feuille propre à la page cmo, 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. */
  --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; 
  --etoile:#B87F0C;   /* or sombre, 4,69:1 sur blanc, mesuré */
--stack-2:16px; --stack-3:24px;     --pad-card:clamp(20px,2vw,28px);

  --hero-y:clamp(38px,4.4vw,62px); --hero-y-end:clamp(30px,3vw,38px);
  --head-gap:clamp(28px,3.4vw,44px);

--r-xl:30px;     --shadow-card:0 14px 34px rgba(14,46,73,.12);
  --t-fast:.15s ease; --t-base:.22s ease;
  --t-marquee:48s;
}
@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:calc(var(--nav-h,74px) + 84px)}
/* Les cas pratiques sur un fond violet tres pale : le gris neutre ne
   distinguait pas la zone de preuve du reste de la page. */
/* Fondu du blanc vers la teinte en haut et en bas : une coupure franche
   faisait apparaitre deux lignes horizontales en travers de la page. */
/* Fond teinte des cas pratiques : base gris tres clair, nappes ciel et
   grises a peine posees, fortement floutees, et un fondu blanc
   en haut et en bas pour que la zone ne se decoupe pas en deux lignes
   horizontales en travers de la page.
   Les nappes vivent dans .zt-fond, qui porte son propre contexte
   d'empilement (z-index:0 sur un element positionne) : ses fondus sont
   en z-index 1 et passent donc toujours au-dessus des nappes, quel que
   soit l'ordre du DOM. overflow:hidden est pose sur .zt-fond et non sur
   la section : sur la section il rognerait les levees au survol des
   cartes de cas pratiques. */
/* overflow-x:clip et non hidden : clip ne cree pas de conteneur de
   defilement, donc rien ne casse en vertical. Il retient le debordement
   lateral de la piste des cas, qui se donne de la marge pour ses ombres. */
.zone-teintee{position:relative;background:#F4F6FA;overflow-x:clip}
@supports not (overflow-x:clip){ .zone-teintee{overflow-x:hidden} }
.zone-teintee>.wrap{position:relative;z-index:1}
.zt-fond{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.zt-fond i{position:absolute;display:block;border-radius:50%;filter:blur(92px)}
.zt-fond .z1{left:-12%;top:-20%;width:62%;aspect-ratio:1.1;background:rgba(79,193,253,.24)}
.zt-fond .z2{right:-14%;top:2%;width:58%;aspect-ratio:1;background:rgba(79,193,253,.17)}
.zt-fond .z3{left:24%;bottom:-34%;width:64%;aspect-ratio:1.2;background:rgba(135,150,159,.24)}
.zt-fond .z4{right:6%;bottom:-18%;width:40%;aspect-ratio:1.3;background:rgba(95,112,128,.16)}
.zt-fond::before,.zt-fond::after{
  content:"";position:absolute;left:0;right:0;z-index:1;
  height:clamp(80px,9vw,150px);
}
/* Sur ce fond teinte le violet de surtitre perd du contraste. Version
   assombrie, mesuree sur la zone la plus chargee du fond. */
.zone-teintee .eyebrow{color:#5231DB}
/* Variante violette : les cas et les offres ne doivent pas se lire
   comme un seul et meme bloc de fond. */
.zt-violet{background:#F5F1FD}
.zt-violet .zt-fond .z1{background:rgba(113,91,250,.24)}
.zt-violet .zt-fond .z2{background:rgba(166,130,251,.22)}
.zt-violet .zt-fond .z3{background:rgba(144,105,250,.26)}
.zt-violet .zt-fond .z4{background:rgba(79,193,253,.16)}
.zt-fond::before{top:0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%)}
.zt-fond::after{bottom:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%)}
.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{color:var(--violet-light)}
/* Sur le gris clair des sections alternees, le violet de surtitre tombe
   a 4,20:1. Le violet d'encre le remonte a 5,40:1, mesure. */
.alt .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}
/* Fleche embarquee dans les CTA : elle avance au survol. */
.btn svg{width:17px;height:17px;flex:none;display:block;transition:transform var(--t-fast)}
.btn:hover svg.fl-d{transform:translateX(4px)}
/* Deux CTA cote a cote dans le fold : jamais pleine largeur. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--stack-2)}
.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}
/* En-tête de section, rythme identique partout */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:var(--head-gap);gap:0}
.sec-head>*+*{margin-top:var(--flow-base)}
.sec-head .eyebrow+h2{margin-top:var(--flow-tight)}
.sec-head.mid{align-items:center;text-align:center}
.sec-head.mid .lead{margin-inline:auto}
/* ---------- NAV ---------- */
/* Fond blanc plein, sans voile floute. Mesure a l'appui : au-dessus des
   blocs sombres de la page, un blanc translucide a 72 % fait tomber les
   liens de la nav a 1,24:1. Le verre depoli n'est tenable ici que
   pres de l'opacite, ce qui revient a du blanc : autant l'assumer net. */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:#fff;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,.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)}
/* ---------- Sous-navigation d'ancres ----------
   Barre secondaire qui apparait une fois la ligne de flottaison passee.
   Elle est fixe et non collante : collante, il aurait fallu lui reserver
   une bande d'une cinquantaine de pixels entre le fold et le bloc
   suivant, visible en permanence y compris dans le fold.
   --nav-h est mesure en JS : la hauteur de l'en-tete varie avec la
   largeur, la barre doit se poser juste dessous quelle qu'elle soit. */
.sousnav{
  position:fixed;left:0;right:0;z-index:45;
  top:calc(env(safe-area-inset-top,0px) + var(--nav-h,74px) + 10px);
  pointer-events:none;opacity:0;transform:translateY(-14px);
  /* visibility, et pas seulement opacity : sans elle les sept liens
     restaient atteignables au clavier alors que la barre est invisible. */
  visibility:hidden;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.7,.3,1),visibility 0s linear .34s;
}
.sousnav.vu{opacity:1;transform:none;visibility:visible;transition-delay:0s}
/* Voile qui prolonge l'en-tete derriere la pastille : sans lui, le
   contenu de la page defilait dans l'interstice de 10 px entre les deux
   barres et derriere la moitie basse de la pastille. Il s'efface vers le
   bas pour ne pas poser une arete blanche en travers de la page. */
/* Fond blanc derriere la pastille : il epouse sa forme et s'arrete avec
   elle, en haut comme en bas. Etale sur toute la largeur il tirait une
   bande blanche en travers des blocs sombres de la page. */
.sousnav-cadre{position:relative;display:flex;max-width:100%}
.sousnav-cadre::before{
  content:"";position:absolute;z-index:-1;inset:-11px -26px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.72);
  filter:blur(13px);
}
.sousnav.vu .sousnav-barre{pointer-events:auto}
.sousnav>.wrap{display:flex;justify-content:center;min-width:0}
.sousnav-barre{
  display:flex;align-items:center;gap:2px;
  max-width:100%;padding:6px;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:0 14px 34px -12px rgba(14,46,73,.3);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.sousnav-barre::-webkit-scrollbar{display:none}
.sousnav a{
  text-decoration:none;white-space:nowrap;flex:none;
  font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--navy-70);
  padding:.5em 1.05em;border-radius:var(--r-pill);line-height:1.5;
  transition:background var(--t-base),color var(--t-base);
}
.sousnav a:hover,.sousnav a:focus-visible{background:var(--violet-10);color:var(--navy)}
/* Repere de position : un contour, pas un aplat. L'aplat bleu nuit
   pesait plus lourd que le bouton d'action de la barre du dessus. */
.sousnav a[aria-current]{color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.sousnav a[aria-current]:hover{background:none}
/* Le verre depoli vient apres la definition de base, sinon la cascade
   le ferait ecraser par elle. */
@media (max-width:760px){
  .sousnav>.wrap{padding-inline:12px}
  .sousnav a{font-size:.94rem;padding:.46em .9em}
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .sousnav-barre{
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
  }
}
/* =================================================================
   ROLE : trois configurations
   Trois cartes de meme hauteur, celle du milieu marquee. Le pied de
   carte est colle en bas par margin-top:auto, les listes n'ont pas
   la meme longueur d'une carte a l'autre.
   ================================================================= */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-items:stretch}
.conf{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1.5px solid #E4DCF8;border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px) var(--pad-card);
  box-shadow:0 22px 50px -24px rgba(43,30,100,.3);
}
.conf-no{
  font-family:var(--mono);font-size:1rem;font-weight:700;letter-spacing:.08em;
  color:var(--violet-ink);
}
.conf h3{margin-top:10px;font-size:1.3rem}
.conf-qd{margin-top:10px;font-size:var(--fs-sm);color:var(--navy-70)}
.conf ul{list-style:none;margin:var(--stack-3) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.conf li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);color:var(--navy-70)}
.conf li svg{width:16px;height:16px;flex:none;margin-top:6px;color:var(--violet-ink)}
.conf-pied{
  margin-top:auto;padding-top:var(--stack-3);
  font-family:var(--mono);font-size:1rem;color:var(--navy-50);
}
.conf.focus{
  background:linear-gradient(152deg,#7050F0 0%,#5C3CE4 54%,#4C2DD0 100%);
  border-color:rgba(255,255,255,.3);color:#fff;
  box-shadow:0 34px 70px -20px rgba(60,34,180,.68), inset 0 1px 0 rgba(255,255,255,.24);
}
.conf.focus h3{color:#fff}
.conf.focus .conf-no{color:rgba(255,255,255,.8)}
.conf.focus .conf-qd,.conf.focus li{color:#fff}
.conf.focus li svg{color:#fff}
.conf.focus .conf-pied{color:rgba(255,255,255,.9)}
.conf-marque{
  position:absolute;top:-13px;right:clamp(18px,2vw,26px);
  font-family:var(--mono);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;
  background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:.42em 1em;line-height:1;
}
/* =================================================================
   CANAUX : grille de pastilles, puis le reseau d'experts
   ================================================================= */
/* =================================================================
   LE ROLE : moment de marque
   Fond blanc, la marque en grand, nette en haut puis dissoute vers le
   bas. Trois calques, et le partage des roles compte :
   - .flou : copie floutee, SANS masque. Un masque force le decoupage
     au bord de la boite (mask-clip vaut border-box et ne se desactive
     pas), ce qui coupe net l'etalement du flou sur les cotes et laisse
     deux aretes verticales. Sans masque, le flou deborde librement.
   - .net : copie nette, masquee. Aucun filtre, donc aucun debord a
     couper : le masque ne cree ici aucune arete.
   - .voile : degrade vers le blanc exact du fond, debordant la boite.
     C'est lui qui termine la disparition. Comme sa couleur d'arrivee
     est celle du fond, il ne peut pas laisser de delimitation.
   ================================================================= */
#role{position:relative;overflow:hidden;background:var(--paper);text-align:center;
  padding-top:clamp(34px,4vw,60px)}
#constat{padding-bottom:clamp(34px,4vw,60px)}
.role-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.role-marque{
  position:relative;width:min(62vw,440px);
  margin-bottom:clamp(6px,1vw,14px);
  /* Le dessin est un B suivi de deux traits en bas a droite. Centrer
     l'image entiere reviendrait a decaler le B vers la gauche, or c'est
     le B que l'oeil prend pour reference.
     Mesure refaite au getBBox sur le fichier, le 15 octobre 2026 :
     viewBox 97 71 207 191 ; les deux traces du B couvrent 103,30 a
     215,59, son centre tombe donc a 159,45, soit 30,167 % de la largeur
     de l'image. On pousse l'ensemble de 19,833 % pour l'amener a 50 %.
     Verifie ensuite au pixel sur une capture : encre du B de 598 a 840,
     centre 719, pour une section centree sur 720.
     Le decalage porte sur le conteneur et non sur les images : le voile
     de degrade suit, et garde exactement le meme recouvrement. Les deux
     traits depassent a droite, ce qui est leur place dans le dessin. */
  transform:translateX(19.833%);
}
.role-marque img{display:block;width:100%;height:auto}
.role-marque .net{
  position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 84%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 84%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.role-marque .flou{position:absolute;inset:0;filter:blur(16px);opacity:.5}
.role-marque .voile{
  position:absolute;left:-18%;right:-18%;bottom:-7%;height:56%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 56%,#fff 100%);
}
#role h2{position:relative;z-index:2;max-width:20ch}
#role p{position:relative;z-index:2;margin-top:var(--flow-base);color:var(--navy-70);font-size:var(--fs-lead);max-width:52ch}
.role-duo{
  margin-top:clamp(26px,3vw,40px)!important;
  font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.9vw,1.4rem);
  letter-spacing:.1em;text-transform:uppercase;color:var(--violet-ink)!important;
}
/* ---------- LE PERIMETRE, EN MOSAIQUE ----------
   Une grande carte a gauche sur deux rangees, une large en haut a
   droite, deux carrees dessous. Quatre informations differentes, que
   le visiteur choisit au lieu de lire une liste de douze lignes. */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.bcarte{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px) var(--pad-card);
  box-shadow:0 20px 44px -26px rgba(14,46,73,.26);
}
.bcarte h3{font-size:1.22rem}
.bcarte p{margin-top:12px;font-size:var(--fs-sm);color:var(--navy-70)}
/* Deux rangees sur douze colonnes : les deux cartes de posture a parite
   en haut, puis le ruban des canaux sur trois quarts et le reseau sur
   le quart restant. */
.b-duo{grid-column:1 / span 6}
.b-indiv{grid-column:7 / span 6}
.b-canaux{grid-column:1 / span 9;overflow:hidden}
.b-reseau{grid-column:10 / span 3;justify-content:center;text-align:center}
.b-reseau .res-n{
  margin-top:var(--stack-3);
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.4rem,3.4vw,3.2rem);color:var(--violet-ink);
}
/* Canaux en pastilles flottantes, forme reprise du bloc du reseau de
   la page Qui suis-je. Le ruban defilant qui occupait cette place
   imposait son rythme : un canal passait, on n'avait pas le temps de
   chercher le sien. Ici les quatorze pastilles sont toutes visibles
   a la fois et derivent lentement, le regard choisit.
   Les pastilles sont posees en position absolue et deplacees au
   transform par le script en pied de page : elles sont donc hors
   flux et inatteignables au clavier, d'ou aria-hidden sur le bloc.
   La liste reelle des canaux est juste au-dessus en .sr, c'est elle
   que lisent les lecteurs d'ecran et les moteurs. */
/* Le bloc est teinte, exactement comme celui du reseau sur Qui suis-je.
   Sans teinte, des pastilles blanches posees sur le blanc de la carte ne
   tiennent que par leur bordure a 1,42:1 et leur ombre : la forme
   disparait. Sur ce fond, la pastille blanche se detache, et le texte
   reste mesure sur le blanc de la pastille, a 5,88:1 et 5,93:1. */
.cbulles{
  position:relative;height:clamp(230px,24vw,290px);margin-top:var(--stack-4);
  border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,#F4F1FF,#ECEFF9);
  border:1px solid var(--line);
}
.cbulle{
  position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;
  padding:.46em .92em;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:0.84rem;letter-spacing:.02em;
  background:var(--paper);border:1px solid #D4CBFB;color:var(--violet-ink);
  box-shadow:0 6px 16px rgba(14,46,73,.07);will-change:transform;
}
/* Deux teintes de bordure alternees, pour que la derive ne donne pas
   une nappe uniforme. La couleur du texte change avec, et les deux
   ont ete mesurees sur le blanc de la carte. */
.cbulle:nth-child(2n){border-color:#AEDCF7;color:#1C6A94}
.cbulle:nth-child(3n){border-color:#CBBDFB;color:var(--violet-ink)}
/* Canaux groupes par famille : quatre intentions, pas douze lignes. */
.fam{list-style:none;margin:var(--stack-3) 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.fam>li{display:flex;flex-direction:column;gap:9px}
.fam b{
  font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--violet-ink);font-weight:700;
}
.fam ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.fam ul li{
  font-size:.94rem;font-weight:var(--fw-strong);color:var(--navy);line-height:1.3;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.36em .85em;
}
.b-pied{margin-top:auto;padding-top:var(--stack-3);font-size:var(--fs-sm);color:var(--navy-70)}
/* =================================================================
   MISSIONS : trois colonnes, la duree en premiere lecture
   L'en-tete est centre, la liste reste alignee a gauche : quatre
   lignes de texte centrees se lisent mal.
   ================================================================= */
.missions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.mission{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,38px) var(--pad-card);
  box-shadow:0 22px 50px -26px rgba(14,46,73,.26);
}
.mission.vedette{background:var(--violet-10);border-color:#DFD5FD}
/* Le visuel passe en tete de carte, la duree repasse en mention : c'est
   le contexte client qui doit se lire en premier, pas le nombre de mois. */
.mis-vis{width:100%;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--stack-3)}
.mis-vis .ph{height:100%;border-radius:var(--r-md);font-size:.72rem}
.mission .qui{
  text-align:center;font-family:var(--display);font-weight:700;
  font-size:1.16rem;line-height:1.3;color:var(--navy);
}
.mission .mis-meta{
  margin-top:10px;text-align:center;
  font-family:var(--mono);font-size:1rem;color:var(--navy-50);
}
.mis-liste{list-style:none;margin:var(--stack-3) 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.mis-liste li{
  position:relative;padding-left:24px;
  font-size:var(--fs-sm);color:var(--navy-70);line-height:1.55;
}
.mis-liste li::before{
  content:"\2192";position:absolute;left:0;top:0;color:var(--violet-ink);font-weight:700;
}
.mis-liste b{color:var(--navy);font-weight:var(--fw-strong)}
.mis-liste b::after{content:" :"}
/* =================================================================
   COMPARATIF : tableau a trois options
   Le cadre defile en largeur reduite, un tableau de quatre colonnes
   ne se replie pas proprement.
   ================================================================= */
.compar-cadre{overflow-x:auto;scrollbar-width:thin;border:1px solid var(--line);border-radius:var(--r-lg)}
.compar{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff}
.compar th,.compar td{
  padding:16px 20px;text-align:left;vertical-align:top;
  font-size:var(--fs-sm);line-height:1.5;
  border-bottom:1px solid var(--line);
}
.compar thead th{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);
  background:var(--paper-alt);border-bottom:1px solid var(--line);text-align:center;
}
.compar-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.2vw,44px)}
.compar tbody th{font-weight:var(--fw-strong);color:var(--navy);width:19%}
.compar td{color:var(--navy-70)}
/* La colonne retenue passe en premier et se tient par un liseré violet
   continu, pas seulement par une teinte de fond. */
/* Le blanc sur --violet mesure 4,57:1, trop juste pour un en-tete de
   16,8 px. Le violet d'encre le porte a 5,90:1, pour la meme lecture. */
.compar .moi{
  background:var(--violet-10);color:var(--navy);font-weight:var(--fw-strong);
  border-inline:2px solid var(--violet-ink);
}
.compar thead .moi{
  background:var(--violet-ink);color:#fff;font-weight:700;
  border-inline:2px solid var(--violet-ink);border-bottom-color:var(--violet-ink);
}
.compar tbody tr:last-child .moi{border-bottom:2px solid var(--violet-ink)}
.compar tbody tr:last-child th,.compar tbody tr:last-child td{border-bottom:0}
/* Carte d'offre unique : meme mecanique que la paire, centree. */
.duo.solo{grid-template-columns:minmax(0,980px);justify-content:center}
@media (max-width:980px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento>*{grid-column:auto;grid-row:auto}
  /* Largeur reduite de 76 a 68 vw : le decalage de 20 % qui centre le B
     pousse les deux traits vers la droite, et a 76 vw leur pointe sortait
     de 5 px a 390 px de large. 68 vw les ramene dans le cadre. */
  .role-marque{width:min(68vw,280px)}
}
@media (max-width:980px){
  .trio{grid-template-columns:minmax(0,1fr)}
  .conf-marque{right:auto;left:var(--pad-card)}
  .reseau{grid-template-columns:minmax(0,1fr);text-align:left}
}
@media (max-width:640px){
  .fam ul li{font-size:.92rem}
  /* Sous 640 px la carte ne fait plus que 342 px de large : quatorze
     pastilles a 0,84rem s'y empilent sur six rangees et se touchent en
     permanence. On descend la taille et on monte la hauteur du bloc. */
  .cbulle{font-size:0.78rem;padding:.42em .78em}
  .cbulles{height:clamp(300px,82vw,360px)}
}
.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. FOLD
   ================================================================= */
/* Fold centre, une seule colonne. La hauteur est calee pour laisser
   depasser environ la moitie de la bande de logos sous la ligne de
   flottaison : 74 px de nav + 88 px de bande visible. */
.hero{position:relative;padding-block:var(--hero-y) var(--hero-y-end);
  display:grid;align-items:center;min-height:calc(100svh - 74px - 88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:min(100%,1080px);margin-inline:auto;min-width:0;gap:0}
.hero-copy h1{max-width:34ch}
.hero-copy .lead{max-width:78ch}
/* Le fold centre respire plus que le reste de la page : rien ne borne
   les blocs lateralement, c'est le vide vertical qui les separe. */
.hero-copy{--fold-tight:clamp(18px,1.6vw,26px);--fold-base:clamp(26px,2.4vw,38px);
  --fold-cta:clamp(36px,3.4vw,54px)}
.hero-copy>*+*{margin-top:var(--fold-base)}
.hero-copy .eyebrow+h1,.hero-copy .dispo+h1{margin-top:var(--fold-tight)}
.hero-copy>.hero-actions,.hero-copy>.hero-sous{margin-top:var(--fold-cta)}
.hero-copy>.hero-actions+.hero-sous{margin-top:var(--fold-base)}
.hero-copy h1 .hl{color:var(--violet)}
.hero-actions{justify-content:center}
/* Deux reassurances sur une ligne, separees par un filet vertical.
   Pas de pictogramme : la coche promettait une validation que ces deux
   mentions ne portent pas, ce sont des precisions de perimetre. */
.hero-sous{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(14px,1.7vw,24px)}
.hero-sous span{font-size:var(--fs-sm);color:var(--navy-50);line-height:1.45}
.hero-sous span+span{position:relative;padding-left:clamp(14px,1.7vw,24px)}
.hero-sous span+span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1.15em;background:var(--line);
}
/* ---------- Mention de disponibilite ----------
   Pas d'encadre : un simple filet neon sous le texte. */
.dispo{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy-70);
  line-height:1.5;
}
.dispo::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--sky-ink);
  box-shadow:0 0 0 3px rgba(79,193,253,.3);
}
/* ---------- Nappes de fond ----------
   Trois taches de couleur tres diluees et fortement floutees. Le blanc
   reste la couleur dominante du fold : aucune nappe ne depasse 22 %
   d'opacite avant flou. Purement decoratif. */
.fold-zone{position:relative;overflow:hidden}
.fold-zone>.hero>.wrap,.fold-zone>.bande-clients>.wrap{position:relative;z-index:1}
.nappe{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nappe span{position:absolute;border-radius:50%;display:block;filter:blur(62px)}
.nappe .n1{left:50%;top:52%;width:min(86vw,1120px);aspect-ratio:1.6;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(166,130,251,.26) 0%,rgba(166,130,251,.10) 50%,rgba(166,130,251,0) 74%)}
.nappe .n2{left:16%;top:16%;width:min(56vw,700px);aspect-ratio:1.25;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(79,193,253,.22) 0%,rgba(79,193,253,0) 70%)}
.nappe .n3{left:84%;top:80%;width:min(58vw,740px);aspect-ratio:1.3;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(113,91,250,.20) 0%,rgba(113,91,250,0) 70%)}
/* Voile blanc au centre : la couleur vit sur les bords, le bloc de texte
   repose sur du blanc. C'est ce voile qui garantit les contrastes, et non
   la seule faiblesse des nappes. */
.nappe::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 58% 62% at 50% 50%,
    #fff 0%, #fff 46%, rgba(255,255,255,.76) 66%, rgba(255,255,255,0) 84%);
}
/* =================================================================
   2. BANDEAU DE LOGOS DÉFILANT
   Repris tel quel de la page d'accueil : fond bleu de charte, nappe neon
   violette derriere les logos, filet degrade anime sur l'arete basse,
   logos dans des tuiles carrees.
   ================================================================= */
.bandeau{
  display:grid;grid-template-columns:minmax(0,17%) minmax(0,1fr);
  gap:clamp(18px,2.6vw,40px);align-items:center;
}
.bandeau-titre{
  font-family:var(--display);font-weight:700;line-height:1.25;
  font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--navy);
  margin:0;text-wrap:balance;
}
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;width:max-content}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-carre{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent);
}
.marquee-carre .marquee-track{
  --g:clamp(12px,1.3vw,18px);
  gap:var(--g);animation:slideCarre var(--t-marquee) linear infinite;
}
@keyframes slideCarre{from{transform:translateX(0)}to{transform:translateX(calc(-50% - (var(--g) / 2)))}}
.tuile{
  width:clamp(88px,8.4vw,112px);aspect-ratio:1;flex:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  display:grid;place-items:center;padding:clamp(10px,1vw,15px);
}
.tuile img{width:100%;height:100%;object-fit:contain;display:block}
section.bande-clients{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0E2E49 0%,#0A2439 100%);
  padding-block:clamp(14px,1.6vw,24px);
}
.bande-clients>.wrap{position:relative;z-index:1}
.bande-lueur{
  position:absolute;z-index:0;pointer-events:none;
  left:22%;right:-4%;top:28%;height:190%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,
    rgba(140,116,251,.34) 0%, rgba(84,56,223,.15) 44%, rgba(10,36,57,0) 72%);
  filter:blur(34px);
}
.bande-filet{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--violet) 0%,var(--sky) 24%,var(--violet-light) 48%,
    var(--violet) 66%,var(--sky) 84%,var(--violet) 100%);
  background-size:220% 100%;animation:filetBande 12s linear infinite;
}
@keyframes filetBande{from{background-position:0% 0}to{background-position:220% 0}}
.bande-clients .bandeau-titre{color:#fff}
.bande-clients .tuile{border-color:rgba(255,255,255,.14)}
/* =================================================================
   POUR QUI : bloc de rupture
   Quatre nappes saturees fortement floutees font le degrade, une carte
   sombre et opaque porte le texte. Les teintes restent celles de la
   charte : navy, violet, violet clair, ciel.
   ================================================================= */
#pour-qui{position:relative;overflow:hidden;background:#071A2C}
#pour-qui>.wrap{position:relative;z-index:1}
.pq-fond{position:absolute;inset:0;z-index:0;pointer-events:none}
.pqn{position:absolute;display:block;border-radius:50%;filter:blur(78px)}
.pqn.n1{left:-6%;top:-18%;width:62%;aspect-ratio:1.1;background:#1F57C9;opacity:.72}
.pqn.n2{right:-10%;top:-24%;width:58%;aspect-ratio:1;background:#6A3BF5;opacity:.68}
.pqn.n3{right:-4%;bottom:-26%;width:64%;aspect-ratio:1.15;background:#2E9FE0;opacity:.5}
.pqn.n4{left:14%;bottom:-30%;width:52%;aspect-ratio:1.2;background:#9069FA;opacity:.46}
/* Verre depoli : la carte laisse passer le degrade, flou. Le repli sans
   backdrop-filter reste opaque, sinon les textes passeraient sous le seuil. */
.pq-carte{
  max-width:min(100%,860px);margin-inline:auto;
  background:rgba(6,20,34,.86);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,52px);
  box-shadow:0 36px 90px rgba(3,12,24,.42), inset 0 1px 0 rgba(255,255,255,.1);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pq-carte{
    background:rgba(7,22,38,.52);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    backdrop-filter:blur(26px) saturate(140%);
  }
  .pq-liste li{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.14)}
}
.pq-tete{text-align:center;margin-bottom:clamp(24px,2.8vw,40px)}
.pq-tete .eyebrow{justify-content:center;color:#C9B6FF}
.pq-tete h2{color:#fff;margin:0 auto;max-width:22ch}
.pq-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pq-liste li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,22px);
  align-items:start;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:clamp(16px,1.8vw,24px);
}
.pq-no{font-family:var(--mono);font-size:.92rem;font-weight:700;color:#C9B6FF;
  letter-spacing:.06em;padding-top:.25em}
.pq-liste h3{color:#fff;font-size:1.1rem;line-height:1.3;margin:0}
.pq-liste p{color:#C6D2DE;font-size:var(--fs-sm);line-height:1.55;margin:8px 0 0}
/* Les trois reserves tiennent sur une ligne : trois colonnes egales,
   pas de puce, un filet vertical entre elles. */
.pq-exclu{margin-top:clamp(24px,2.8vw,38px);padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid rgba(255,255,255,.14)}
.pq-exclu b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:#C9B6FF;margin-bottom:14px;text-align:center;
}
.pq-exclu ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.pq-exclu li{position:relative;font-size:.94rem;color:#fff;line-height:1.45}
.pq-exclu li+li{padding-left:clamp(14px,1.8vw,28px)}
.pq-exclu li+li::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;
  width:1px;background:rgba(255,255,255,.2)}
@media (max-width:760px){
  .pq-exclu ul{grid-template-columns:1fr;gap:10px}
  .pq-exclu li+li{padding-left:0;padding-top:10px}
  .pq-exclu li+li::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}
/* =================================================================
   2 bis. CE QUE LE CRO CHANGE
   Texte a droite, tableau de bord sombre a gauche. En colonne unique le
   titre passe devant et le visuel ferme le bloc.
   ================================================================= */
/* Ecart resserre : les deux colonnes ont desormais des hauteurs proches,
   une gouttiere large creusait un vide au milieu du bloc. */
/* 58 / 42 : le texte porte l'argument, le tableau n'est qu'un appui. */
/* Les deux colonnes partent du haut : le titre doit se lire en premier,
   a hauteur du haut du tableau de bord, pas centre a mi-hauteur. */
.impact-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  gap:clamp(26px,3vw,52px);align-items:start}
/* Les deux blocs se suivent sans transition de fond : 216 px de vide
   cumule entre eux cassaient l'enchainement. Ramene a 150 px. */
#impact{padding-bottom:clamp(44px,4.6vw,74px)}
#vision{padding-top:clamp(44px,4.6vw,74px)}
.impact-txt{min-width:0}
.impact-txt>*+*{margin-top:var(--flow-base)}
.impact-txt .eyebrow+h2{margin-top:var(--flow-tight)}
.impact-txt h2{max-width:30ch}
.impact-txt .lead{max-width:54ch}
.impact-txt p:not(.lead){color:var(--navy-70);max-width:62ch;line-height:1.62}
/* ---------- Tableau de bord ----------
   Volontairement pauvre en details : six lignes de ce que l'accompagnement
   produit, rien d'autre. Elles entrent l'une apres l'autre a l'arrivee. */
.tdb{
  min-width:0;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#103250 0%,#0D2B45 46%,#0A2337 100%);
  border-radius:var(--r-lg);padding:clamp(22px,2.3vw,32px);
  box-shadow:0 26px 60px rgba(14,46,73,.28);
  display:flex;flex-direction:column;gap:clamp(18px,1.9vw,26px);
  --tdb-lib:#A0B1C1;
}
.tdb-lueur{
  position:absolute;z-index:0;pointer-events:none;
  left:30%;right:-20%;top:28%;height:130%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,rgba(140,116,251,.30) 0%,rgba(84,56,223,.12) 46%,rgba(10,35,55,0) 72%);
  filter:blur(42px);
}
.tdb>*:not(.tdb-lueur){position:relative;z-index:1}
/* Un seul libelle, et c'est du texte, pas un titre : le bloc a deja son
   h2 dans la colonne de gauche, ce panneau n'en est que l'appui. */
.tdb-sur{margin:0;display:block;font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tdb-lib);line-height:1.4}
.tdb-gains{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tdb-gains li{
  display:flex;align-items:center;gap:clamp(10px,1.1vw,14px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);padding:clamp(12px,1.2vw,16px) clamp(13px,1.3vw,18px);
  color:#fff;font-size:1rem;line-height:1.35;
  opacity:0;transform:translateY(10px);
}
.tdb.anime .tdb-gains li{animation:tdbEntre .52s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay:calc(var(--i) * 110ms)}
@keyframes tdbEntre{to{opacity:1;transform:none}}
.tdb-gains .coche{
  width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:rgba(79,193,253,.18);color:var(--sky);
}
.tdb-gains .coche svg{width:13px;height:13px;display:block}
.tdb-pied{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-wrap:wrap;
  padding-top:clamp(10px,1.1vw,14px);border-top:1px solid rgba(255,255,255,.1)}
.seg{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);
  padding:.34em .8em;line-height:1.2}
.tdb-note{font-size:.88rem;color:var(--on-navy-70);line-height:1.35}
@media (prefers-reduced-motion:reduce){
  .tdb .tdb-gains li{animation:none;opacity:1;transform:none}
}
/* =================================================================
   3. LE CONSTAT
   ================================================================= */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.pane{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-card);
  display:flex;flex-direction:column;gap:var(--stack-2);
  transition:border-color var(--t-fast),box-shadow var(--t-base),transform var(--t-base);
}
.pane:hover{border-color:#CBBDFB;box-shadow:0 14px 32px rgba(113,91,250,.1);transform:translateY(-3px)}
.pane .ico{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--sky));
}
.pane .ico.b{background:linear-gradient(140deg,var(--violet-light),var(--violet))}
.pane .ico.c{background:linear-gradient(140deg,var(--sky),var(--violet-mid))}
.pane .ico svg{width:22px;height:22px}
.pane p{color:var(--navy-70);font-size:var(--fs-sm)}
/* =================================================================
   3. MA VISION
   Fond blanc, en-tete centre, trois principes sur une rangee. Ils
   apparaissent l'un apres l'autre et restent : chaque carte porte une
   ouverture declenchee par le defilement, puis le CTA.
   ================================================================= */
.piliers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
/* Les trois cartes sont la des le depart : seul leur contenu se deplie,
   l'un apres l'autre, et reste ouvert. */
.pilier{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  gap:clamp(12px,1.2vw,16px);
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--pad-card);
  transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
/* Depliage sur max-height plutot que sur grid-template-rows : dans une
   rangee de grille a hauteurs egales, le 1fr ne contribue pas a la
   hauteur intrinseque et le texte se faisait couper. */
.pil-corps{max-height:0;overflow:hidden;
  transition:max-height .6s cubic-bezier(.22,.7,.3,1)}
.pilier.ouvert .pil-corps{max-height:520px}
/* Schema de chaque constat. Il ne decore pas : il montre le mecanisme
   decrit juste au-dessus, et il se lit sans legende.
   Deux niveaux de trait seulement. Ce qui porte le sens est en violet
   encre, mesure a 5,88:1 sur le blanc de la carte ouverte. Ce qui sert
   de decor construit est en 87969F, a 3,05:1, le minimum AA pour un
   element graphique porteur d'information. Les aplats clairs ne disent
   jamais rien a eux seuls, ils sont toujours bordes par l'un des deux. */
.pil-graph{
  margin-top:var(--stack-3);padding-top:var(--stack-3);
  border-top:1px dashed var(--ph-line);
}
/* max-width obligatoire. Sous 980 px les piliers passent en une seule
   colonne : a 900 px de fenetre le schema s'etirait a 327 px de haut,
   le depliage de la carte est plafonne a 520 px et le coupait. A 340 px
   de large, le rapport 240 sur 96 donne 136 px de haut quelle que soit
   la fenetre. */
.pil-graph svg{display:block;width:100%;max-width:340px;height:auto;margin:12px auto 0}
.pil-graph .sg-actif{fill:none;stroke:var(--violet-ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pil-graph .sg-neutre{fill:none;stroke:#87969F;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pil-graph .sg-pointille{fill:none;stroke:#87969F;stroke-width:1.7;
  stroke-dasharray:5 5;stroke-linecap:round}
.pil-graph .sg-plein{fill:var(--violet-ink)}
.pil-graph .sg-gris{fill:var(--ph)}
.pil-in p{opacity:0;transition:opacity .45s ease .14s}
.pilier.ouvert .pil-in p{opacity:1}
/* La carte en cours de lecture se detache, les precedentes restent lisibles. */
.pilier.ouvert{background:#fff;border-color:#DFD5FD;box-shadow:0 16px 36px rgba(14,46,73,.1)}
.pilier .k{
  font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--violet-ink);
  background:#fff;border:1px solid #DFD5FD;border-radius:var(--r-sm);
  padding:8px 10px;line-height:1;align-self:flex-start;
}
.pil-ti{font-family:var(--display);font-weight:700;font-size:1.22rem;line-height:1.3;
  letter-spacing:-.005em;color:var(--navy);margin:0}
.pilier p{font-size:var(--fs-sm);color:var(--navy-70);margin:0;line-height:1.55}
/* Le CTA ne parait qu'une fois les trois principes lus. */
/* Le CTA parait quand le lecteur a depasse les trois principes. Arrivee
   longue et amortie, pour qu'elle ne surprenne pas. */
.vision-cta{
  display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px);
  opacity:0;transform:translateY(22px) scale(.97);filter:blur(3px);
}
.vision-cta.vu{animation:ctaEntre 1.1s cubic-bezier(.16,.84,.26,1) forwards}
@keyframes ctaEntre{to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  .vision-cta{opacity:1;transform:none;filter:none;animation:none}
  .pilier .pil-corps{max-height:340px}
  .pilier .pil-in p{opacity:1}
}
/* =================================================================
   5. PÉRIMÈTRE
   ================================================================= */
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);counter-reset:nv}
.niveau{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--stack-2);
}
.niveau::before{
  counter-increment:nv;content:counter(nv);
  position:absolute;top:0;right:var(--pad-card);transform:translateY(-50%);
  width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--violet);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem;line-height:1;
}
.niveau .tag{
  align-self:flex-start;font-size:1rem;font-weight:var(--fw-strong);color:var(--violet-ink);
  background:var(--violet-10);border:1px solid #DFD5FD;border-radius:var(--r-pill);padding:.26em .85em;
}
.niveau p{color:var(--navy-70);font-size:var(--fs-sm)}
.niveau ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.niveau li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--navy-70)}
.niveau li svg{width:15px;height:15px;flex:none;margin-top:6px;color:var(--violet)}
/* =================================================================
   6. LES DEUX FORMULES, structure de la référence :
   étiquette en haut à droite, repère chiffré, liste, filet pointillé,
   action pleine largeur. Les cartes ne s'étirent pas l'une sur l'autre.
   ================================================================= */
/* align-items:start, et non stretch : la carte de gauche porte une
   prestation de moins, elle a le droit de s'arreter plus haut. Les
   lignes du haut restent alignees par la hauteur minimale du chapeau. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);align-items:start}
/* Rembourrage horizontal aligné sur le jeton de carte du site, pour que
   le bouton pleine largeur ne flotte pas au milieu de la carte. */
/* Les deux cartes vivent sur fond sombre : le texte est clair par defaut
   et seule la carte recommandee change de fond.
   Le repere chiffre est remonte sur la ligne du titre : empile, il
   ajoutait a lui seul une centaine de pixels de hauteur par carte. */
.offre{
  position:relative;color:#fff;
  background:rgba(29,52,86,.9);
  border:1.5px solid rgba(201,182,255,.5);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -28px rgba(3,12,24,.55),
             inset 0 1px 0 rgba(255,255,255,.16),
             0 0 0 1px rgba(113,91,250,.22);
  padding:clamp(22px,2.2vw,30px) var(--pad-card);
  display:flex;flex-direction:column;
}
.offre .badge{
  display:inline-block;margin-bottom:9px;
  font-family:var(--mono);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r-pill);padding:.34em .95em;line-height:1;
}
.off-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--stack-3);flex-wrap:wrap}
.off-tete>div{min-width:0}
.offre h3{font-size:1.45rem;max-width:none;color:#fff}
.offre .repere{display:flex;align-items:baseline;gap:9px;flex:none}
.offre .repere .val{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,2.4vw,2.5rem);line-height:1;letter-spacing:-.03em;color:#fff}
.offre .repere .unite{font-family:var(--display);font-weight:700;font-size:1.05rem;color:rgba(255,255,255,.82)}
.offre .sous{margin-top:12px;font-size:var(--fs-sm);color:rgba(255,255,255,.86);max-width:52ch}
.offre>.btn{margin-top:auto}
.offre ul{list-style:none;margin:var(--stack-3) 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.offre li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);color:var(--on-navy-70)}
.offre li svg{width:16px;height:16px;flex:none;margin-top:6px;color:#C9B6FF}
/* Ligne d'héritage. Le cadre se décale de son propre rembourrage vers
   la gauche : le pictogramme et le texte restent donc alignés sur les
   coches du dessous. align-self arrête le cadre au texte, pas au bord. */
.offre li.inclus{
  align-self:flex-start;align-items:center;gap:11px;
  padding:9px 14px;margin:0 0 5px -14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:var(--r-sm);
}
.offre li.inclus svg{width:16px;height:16px;margin-top:0}
.offre li.inclus b{color:#fff;font-weight:var(--fw-strong)}
/* Filet pointillé avec mention centrée */
.offre .sep{
  display:flex;align-items:center;gap:14px;margin-top:var(--stack-3);
  font-family:var(--mono);font-size:1rem;color:rgba(255,255,255,.8);white-space:nowrap;
}
.offre .sep::before,.offre .sep::after{content:"";flex:1;border-top:1px dotted rgba(255,255,255,.34)}
/* Quatrième exception assumée à « jamais de bouton pleine largeur » :
   carte d'offre, action unique, convention des grilles tarifaires. */
/* Le filet et le bouton forment un pied de carte : ils se tiennent, ils
   ne flottent pas chacun dans son vide. */
.offre>.btn{width:100%;margin-top:14px}
/* Verre depoli, comme le bloc Pour qui. Le repli sans backdrop-filter
   reste opaque, sinon les textes passeraient sous le seuil. */
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .offre{
    background:rgba(36,62,100,.46);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    backdrop-filter:blur(26px) saturate(140%);
  }
}
/* Le chapeau et le texte de presentation ont une hauteur plancher :
   les deux listes demarrent donc a la meme hauteur, sans sous-grille.
   La sous-grille egalisait aussi la ligne des listes, ce qui creusait
   un vide d'une centaine de pixels dans la carte la plus courte. */
@media (min-width:981px){
  .off-tete{flex-wrap:nowrap}
  .offre .off-tete{min-height:4.6rem}
  .offre .sous{min-height:3.4rem}
}
/* ---------- Fond du bloc des offres ----------
   Meme mecanique que le bloc Pour qui : quatre nappes saturees
   fortement floutees sur une base tres sombre. Les deux blocs de
   rupture de la page se repondent donc. */
#offre{position:relative;overflow:hidden;background:#071A2C}
#offre>.wrap{position:relative;z-index:1}
#offre .sec-head h2{color:#fff}
#offre .sec-head .lead{color:var(--on-navy-70)}
#offre .eyebrow{color:#C9B6FF}
#offre .aiguillage{color:rgba(255,255,255,.95)}
#offre .aiguillage a{color:#DCCBFF}
#offre .aiguillage a:hover{color:#fff}
#offre .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
#offre .btn-ghost:hover,#offre .btn-ghost:focus-visible{background:#fff;color:var(--navy)}
/* Aiguillage discret sous les deux cartes */
.aiguillage{
  margin-top:var(--stack-4);text-align:center;
  font-size:var(--fs-base);color:var(--navy-70);
}
.aiguillage a{
  color:var(--violet-ink);font-weight:var(--fw-strong);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.aiguillage a:hover{color:var(--navy)}
/* =================================================================
   MÉTHODE : sommaire collant et panneaux empiles
   Chaque panneau colle au meme decalage haut : ils se recouvrent l'un
   apres l'autre, on ne voit jamais deux etapes en meme temps. Le z-index
   croissant met le suivant devant, et la carte est opaque pour masquer
   celle du dessous. La colonne de gauche doit occuper toute la hauteur
   de la ligne de grille, sinon son collage n'a aucune course.
   ================================================================= */
.meth{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.5fr);
  gap:clamp(26px,4vw,72px);align-items:stretch}
.meth-cote{position:relative}
.meth-colle{position:sticky;top:clamp(166px,21vh,196px)}
.meth-label{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-50);font-weight:700;display:block;margin-bottom:var(--stack-3)}
.meth-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.meth-pas{display:flex;gap:var(--stack-2);align-items:center;padding-block:10px;position:relative}
.meth-pas:not(:last-child)::after{content:"";position:absolute;left:21px;top:calc(50% + 22px);
  width:1px;height:calc(100% - 44px);background:var(--line)}
.meth-rond{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.92rem;
  border:1px solid var(--line);color:var(--navy-50);background:#fff;
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.meth-txt{display:flex;flex-direction:column;min-width:0}
.meth-txt em{font-style:normal;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-50);font-weight:700}
.meth-txt b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy-70);
  transition:color .25s ease}
.meth-pas.actif .meth-rond{background:var(--violet);border-color:var(--violet);color:#fff;
  box-shadow:0 0 0 6px rgba(113,91,250,.16)}
.meth-pas.actif .meth-txt b{color:var(--navy)}
/* --haut : ligne de collage commune. Les cartes ne sont separees d'aucun
   espace, la suivante recouvre donc entierement la precedente. */
.meth-pile{--haut:clamp(152px,19vh,178px)}
.meth-item{position:sticky;top:var(--haut);padding-bottom:0}
.meth-item:nth-child(1){z-index:1}
.meth-item:nth-child(2){z-index:2}
.meth-item:nth-child(3){z-index:3}
.meth-item:nth-child(4){z-index:4}
.meth-carte{
  display:flex;flex-direction:column;justify-content:center;
  /* Assez haute pour que la suivante recouvre entierement la precedente,
     pas plus : sur fond clair, le vide se voit beaucoup plus que sur la
     carte sombre de la page d'accueil. */
  min-height:max(420px, calc(100svh - var(--haut) - 240px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,48px);
  box-shadow:0 26px 60px rgba(14,46,73,.12);
}
.meth-badge{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.6em;border-radius:var(--r-pill);
  background:var(--violet-10);border:1px solid #DCCFFB;color:#4B3699;
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;padding:.45em 1em;
}
.meth-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}
.meth-corps{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,3vw,48px);align-items:center;width:100%}
.meth-visuel{width:100%;max-width:320px;margin-inline:auto;display:block}
.meth-visuel svg{width:100%;height:auto;display:block}
.mv-cadre{fill:none;stroke:var(--line);stroke-width:1.4}
.mv-fond{fill:var(--paper-alt)}
.mv-on{fill:var(--violet-10);stroke:#CBBDFB;stroke-width:1.4}
.mv-trait{fill:none;stroke:var(--violet);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mv-trait-pale{fill:none;stroke:#C9D2DE;stroke-width:2;stroke-linecap:round}
.mv-pt{fill:var(--violet)}
.mv-pt-pale{fill:#C9D2DE}
.mv-lib{fill:var(--navy-50);font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.meth-carte h3{color:var(--navy);font-size:clamp(1.4rem,2.1vw,1.9rem);
  margin-top:var(--stack-3);line-height:1.18}
.meth-texte p{color:var(--navy-70);font-size:1.06rem;margin-top:var(--stack-2);max-width:48ch}
.meth-carte ul{list-style:none;margin:var(--stack-3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:.55em}
.meth-carte li{display:flex;gap:.7em;align-items:flex-start;color:var(--navy-70);
  font-size:1rem;line-height:1.5}
.meth-carte li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;
  border-radius:50%;background:var(--violet)}
/* Fin de pile : une seule invitation, courte. */
/* Meme fond que le bloc de rendez-vous en bas de page, en plus bas :
   c'est la meme invitation, a un autre moment de la lecture. */
.meth-fin{
  margin-top:clamp(28px,3vw,46px);
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
  gap:clamp(20px,2.4vw,40px);
  border-radius:var(--r-lg);color:#fff;
  padding:clamp(20px,2.2vw,30px) clamp(24px,2.8vw,44px);
  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;
}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.meth-fin p{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.4vw,1.25rem);color:#fff;line-height:1.3;max-width:none}
.meth-fin .btn{flex:none}
@media (max-width:900px){
  /* Progression en mobile, meme logique que le bloc etapes de l'accueil.
     La progression repassait en grille a une colonne : elle defilait donc
     hors de l'ecran des la premiere carte. Ici .meth redevient un bloc, ce
     qui fait de .meth-cote un enfant normal et non un element de grille.
     La difference est decisive : le bloc englobant d'un element collant
     qui est element de GRILLE est borne a sa propre rangee, celui d'un
     enfant de bloc court sur toute la hauteur du parent, donc sur toutes
     les cartes.
     Le decalage de 130 px colle la barre sous les deux en-tetes de cette
     page : la navigation de 70 px et la sous-navigation, fixee a 80 px et
     haute de 50, donc finissant a 130. Tout interstice laisserait voir la
     carte glisser entre les deux. */
  .meth{display:block}
  .meth-cote{
    position:sticky;top:130px;z-index:4;
    padding:10px var(--gutter) 6px;margin-inline:calc(var(--gutter) * -1);
    /* Fond clair, contrairement a l'accueil ou la section est bleu nuit.
       Le filet du bas est indispensable ici : sans lui, une barre blanche
       translucide posee sur un fond blanc ne se distingue pas du contenu
       qui glisse dessous. */
    background:rgba(255,255,255,.97);
    box-shadow:0 1px 0 var(--line);
  }
  .meth-colle{position:static}
  .meth-label{margin-bottom:var(--stack-1)}
  /* Une seule ligne, qui se parcourt au doigt. Le rembourrage vertical
     protege l'anneau de l'etape active : overflow-x impose overflow-y,
     l'anneau serait rogne sans lui. */
  .meth-liste{
    flex-direction:row;flex-wrap:nowrap;gap:var(--stack-3);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-block:8px;
    scrollbar-width:none;
  }
  .meth-liste::-webkit-scrollbar{display:none}
  .meth-pas{flex:none;scroll-snap-align:center;padding-block:0}
  .meth-pas:not(:last-child)::after{display:none}
  /* .meth n'est plus une grille : l'ecart que donnait son gap est remis ici. */
  .meth-pile{margin-top:var(--stack-4)}
  .meth-item{position:static;padding-bottom:var(--stack-3)}
  .meth-carte{min-height:0}
  .meth-corps{grid-template-columns:minmax(0,1fr)}
  .meth-visuel{order:2;max-width:290px;margin-top:var(--stack-3)}
  .meth-texte{order:1}
  .meth-fin{flex-wrap:wrap;flex-direction:column;align-items:flex-start}
}
@supports (backdrop-filter:blur(12px)){
  @media (max-width:900px){
    .meth-cote{
      /* 0,90 et non 0,80 : sous 0,90 l'etiquette d'etape de la carte
         reste lisible au travers du flou et salit la barre. */
      background:rgba(255,255,255,.90);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
      backdrop-filter:blur(14px) saturate(140%);
    }
  }
}
/* =================================================================
   CHIFFRES, sous les temoignages
   Un filet neon tres fin les separe des avis, comme sur la page
   d'accueil : le violet circule de gauche a droite, lentement.
   ================================================================= */
.chiffres{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,48px);
  margin-top:clamp(34px,3.8vw,54px);padding-top:clamp(30px,3.4vw,46px);
}
.chiffres::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,
    #E3E7F0 0%, #E3E7F0 14%, var(--violet-light) 26%, var(--violet) 34%,
    var(--sky) 42%, #E3E7F0 54%, #E3E7F0 100%);
  background-size:260% 100%;
  animation:traitStat 7s linear infinite;
}
@keyframes traitStat{from{background-position:120% 0}to{background-position:-160% 0}}
.chiffre{display:flex;flex-direction:column;gap:6px}
/* Syne n'a pas de chiffres a chasse fixe : "111" mesure 7 % de moins
   que "000", et la police ne porte pas la variante tabular-nums. La
   largeur du texte changeait donc a chaque image du decompte.
   Pire, le suffixe faisait partie du noeud anime : au demarrage il
   apparaissait d'un coup, puis le nombre passait de un a trois
   chiffres, soit un saut mesure de 114 px en deux images.
   Correction en deux temps : le suffixe sort du noeud anime, il n'est
   plus jamais redessine, et la boite des chiffres est reservee a sa
   largeur finale des le premier rendu, en ch, l'unite valant la chasse
   du zero. Rien ne bouge plus autour du nombre. */
.chiffre .n{display:inline-flex;align-items:baseline;gap:.1em}
.chiffre .v{display:inline-block;min-width:calc(var(--c,1) * 1ch);
  font-variant-numeric:tabular-nums}
.chiffre .su{font-style:normal}
.chiffre .n{font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,3.8vw,3rem);line-height:1;letter-spacing:-.025em;color:var(--navy)}
.chiffre .n em{font-style:normal;color:var(--violet)}
.chiffre .l{font-family:var(--mono);font-size:1rem;line-height:1.45;
  color:var(--navy-70);max-width:20ch}
/* =================================================================
   TÉMOIGNAGES, composant repris de la page d'accueil
   ================================================================= */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.sec-head.mid .google-badge{margin-inline:auto}
.google-badge{
  display:inline-flex;align-items:center;gap:var(--stack-2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55em 1.1em;
}
.google-badge .gimg{width:26px;height:26px;flex:none;display:block}
.google-badge .score{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1}
.stars{display:inline-flex;gap:2px;align-items:center}
.stars svg{width:17px;height:17px;display:block}
/* Carte d'avis : logo du client en haut, titre, verbatim, puis la personne. */
.temoin{
  display:flex;flex-direction:column;gap:var(--stack-3);padding:clamp(26px,2.6vw,36px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
}
/* Rangee de la marque dans une carte d'avis. Sa hauteur est celle de la
   plus grande marque, 52 px, et non celle des logotypes.
   Deux mesures selon la forme, et c'est voulu. A hauteur egale, une
   marque ronde de 34 px couvrait 907 px2 quand le logotype Outwork en
   couvrait 2 856 : elle paraissait trois fois plus petite alors
   qu'elles faisaient la meme hauteur. Les marques compactes sont donc
   posees a 52 px, les logotypes larges plafonnes a 38 px de haut, ce
   qui ramene les deux surfaces a 2 100 et 2 470 px2.
   Rien de commun avec le bandeau du haut de page, ou la contrainte est
   inverse : la tuile y est carree et large, c'est la marque ronde qu'il
   faut reduire pour qu'elle n'ecrase pas ses voisines. Les deux blocs
   ont donc leurs propres fichiers, suffixes -plein pour celui-ci. */
.temoin-logo{height:52px;display:flex;align-items:center}
/* Logos clients en couleur : ce sont des preuves, pas de l'ambiance. */
.temoin-logo img{max-height:38px;width:auto;display:block}
/* Une marque ronde ou carree n'est pas un mot : elle prend la hauteur
   entiere de la rangee, et max-height est neutralise pour cela. */
.temoin-logo img.rond{height:52px;width:52px;max-height:none;border-radius:var(--r-pill)}
.temoin-logo img.carre{height:52px;width:52px;max-height:none;border-radius:13px}
.temoin-logo .mot{
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.01em;color:var(--navy-50);
}
.temoin-logo .vide{
  font-size:0.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ph-text);
  border:1px dashed var(--ph-line);border-radius:var(--r-sm);padding:.3em .7em;
}
.temoin h3{font-size:1.18rem;line-height:1.3}
.temoin blockquote{margin:0;color:var(--navy-70);font-size:1.02rem}
.temoin .who{
  display:flex;gap:var(--stack-2);align-items:center;margin-top:auto;
  padding-top:var(--stack-3);border-top:1px solid var(--line);
}
.temoin .who img,.temoin .who .ph{width:44px;height:44px;border-radius:var(--r-pill);flex:none;font-size:0;padding:0}
/* Initiales, en attendant les photos. Un rond gris vide se lit comme un
   chargement rate ; deux initiales se lisent comme un choix. Le violet
   encre sur le violet clair du fond mesure 8,02:1, soit AA et AAA. */
.temoin .who .ini{
  width:44px;height:44px;border-radius:var(--r-pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:0.95rem;letter-spacing:.02em;
  background:var(--violet-10);border:1px solid #DFD5FD;color:var(--violet-ink);
}
.temoin .who img{object-fit:cover;display:block}
.temoin .who div{font-size:1rem;line-height:1.4}
.temoin .who strong{display:block;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3}
.temoin .who span{font-size:0.95rem;color:var(--navy-50)}
/* =================================================================
   10. OUTILS, familles à gauche, outils de la famille à droite
   ================================================================= */
/* align-items:stretch : le panneau de droite épouse la hauteur de la pile de gauche. */
.out-split{display:grid;grid-template-columns:minmax(260px,.86fr) minmax(0,1.5fr);gap:clamp(26px,3.6vw,56px);align-items:stretch}
.out-liste{display:flex;flex-direction:column;gap:10px}
.out-onglet{
  width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--stack-2);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;color:inherit;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-base);
}
.out-onglet:hover{border-color:#CBBDFB}
.out-onglet .t{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--navy)}
.out-onglet .s{grid-column:1;font-size:1rem;color:var(--navy-50);line-height:1.4;margin-top:4px}
.out-onglet .chev{grid-column:2;grid-row:1 / span 2;width:20px;height:20px;color:var(--navy-25);transition:transform var(--t-base),color var(--t-fast)}
.out-onglet[aria-selected="true"]{
  border-color:var(--violet);background:var(--violet-10);
  box-shadow:0 12px 28px rgba(113,91,250,.12);
}
.out-onglet[aria-selected="true"] .chev{transform:translateX(4px);color:var(--violet-ink)}
.out-onglet[aria-selected="true"] .s{color:var(--navy-70)}
/* Panneau sombre en dégradé, les logos s'y détachent en blanc.
   Sept emplacements au maximum : trois en haut, quatre en bas. */
.out-vue{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,46px);
  display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(142deg,#0E2E49 0%,#17305F 46%,#2B2B7D 100%);
}
.out-vue::after{
  content:"";position:absolute;z-index:0;width:60%;aspect-ratio:1;left:-14%;bottom:-40%;
  background:radial-gradient(circle,rgba(113,91,250,.42),rgba(79,193,253,.12) 56%,transparent 74%);
  filter:blur(10px);
}
.out-panneau{position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
.out-panneau[hidden]{display:none}
.out-panneau h3{font-size:1.16rem;margin-bottom:0;color:#fff;flex:none}
/* Douze colonnes : trois blocs de 4 puis quatre blocs de 3. */
/* La grille absorbe l'espace libre et centre ses rangées dedans :
   sans cela les logos restaient collés en haut du panneau étiré. */
.out-grille{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,2.6vw,34px) var(--stack-3);
  align-items:center;align-content:center;
  flex:1;margin-block:var(--stack-3) var(--stack-4);
}
.out-outil{grid-column:span 3;display:flex;align-items:center;justify-content:center;min-height:46px;text-align:center}
.out-outil:nth-child(-n+3){grid-column:span 4}
.out-outil .lg{
  font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.25;color:#fff;
}
.out-outil .lg img{max-height:34px;max-width:100%;object-fit:contain;display:block}
.out-outil.vide .lg{
  font-family:var(--body);font-weight:var(--fw-text);font-size:1rem;color:var(--on-navy-25);
  border:1px dashed rgba(255,255,255,.26);border-radius:var(--r-pill);padding:.3em 1em;
}
.out-plus{
  margin-top:0;padding-top:var(--stack-3);border-top:1px solid rgba(255,255,255,.16);
  font-size:1rem;color:var(--on-navy-70);
}
/* ---------- Banderole diagonale, logos de formation ----------
   Le bandeau est incliné, pas le texte qu'il contient : la rotation
   porte sur la bande, les logos restent lisibles à l'horizontale
   de leur propre ligne. */
/* La bande sert de coupure avec le bloc suivant : elle se colle au bas
   de sa section et mord sur la section d'après. Le rembourrage absorbe
   le débordement de la rotation, la marge négative annule le blanc. */
.diag{
  position:relative;z-index:2;overflow:hidden;
  margin-top:0;
  padding-block:42px;margin-bottom:-42px;
}
.diag-band{
  background:var(--navy);color:#fff;
  width:112%;margin-left:-6%;
  padding-block:26px;
  transform:rotate(-2.2deg);
  box-shadow:0 18px 44px rgba(14,46,73,.18);
}
.diag-in{display:flex;align-items:center;gap:clamp(20px,2.6vw,42px);padding-left:clamp(26px,6vw,104px)}
.diag-lab{
  flex:none;display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--display);font-weight:700;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.18em;line-height:1.5;color:var(--violet-light);
}
.diag-lab::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:none;transform:rotate(-38deg)}
.diag-marq{
  position:relative;overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 80px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 80px),transparent);
}
.diag-track{display:flex;width:max-content;animation:defile 38s linear infinite}
.diag-marq:hover .diag-track{animation-play-state:paused}
.diag-grp{display:flex;align-items:center;gap:clamp(26px,3.6vw,56px);padding-right:clamp(26px,3.6vw,56px)}
.diag-logo{
  flex:none;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:1.08rem;color:rgba(255,255,255,.74);
}
.diag-logo img{max-height:26px;width:auto;object-fit:contain;display:block}
/* =================================================================
   12. CAS PRATIQUES, texte à gauche, défilement de cartes à droite
   ================================================================= */
.cas-split{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);align-items:center}
.cas-txt{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cas-txt>*+*{margin-top:var(--flow-base)}
.cas-txt .eyebrow+h2{margin-top:var(--flow-tight)}
.cas-txt>.btn{margin-top:var(--flow-cta)}
.cas-txt .lead{max-width:34ch}
.cas-nav{display:flex;gap:12px;margin-top:var(--stack-3)}
/* Flèches des témoignages : masquées en desktop, où la grille est fixe. */
.temo-nav{display:none}
.cas-nav button,.temo-nav button{
  width:52px;height:52px;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),color var(--t-fast),opacity var(--t-fast);
}
.cas-nav button:hover:not(:disabled),.temo-nav button:hover:not(:disabled){border-color:var(--violet);background:var(--violet);color:#fff}
.cas-nav button:disabled,.temo-nav button:disabled{opacity:.3;cursor:default}
.cas-nav svg,.temo-nav svg{width:19px;height:19px}
/* Pas de mask-image ici. Un masque force la mise en couche du
   sous-arbre : l'ombre portee des cartes etait alors rognee aux bords
   de la carte et reapparaissait en rectangle gris a angles vifs, au
   survol comme au repos. Le defilement est signale par les deux
   fleches, pas par un fondu.
   overflow-x:auto force overflow-y:auto : le couple marge negative et
   rembourrage, porte par la piste elle-meme et non par le rail, donne
   a l'ombre et a la levee la place de s'afficher dans les quatre
   directions. */
.casr-rail{padding:0;margin:0}
.casr-track{
  display:flex;gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:-30px -26px -54px;padding:30px 26px 54px;scroll-padding-left:26px;cursor:grab;
}
.casr-track::-webkit-scrollbar{display:none}
.casr-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.casr-track.drag *{pointer-events:none}
.casr{
  flex:none;width:clamp(240px,25vw,300px);scroll-snap-align:start;
  display:flex;flex-direction:column;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);
}
.casr:hover{border-color:#CBBDFB;box-shadow:0 16px 36px rgba(113,91,250,.12);transform:translateY(-3px)}
.casr-vis{width:100%;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--stack-3)}
.casr-vis .ph{height:100%;border-radius:var(--r-md);font-size:0.72rem}
.casr-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tagp{
  font-size:1rem;font-weight:var(--fw-strong);color:var(--violet-ink);
  background:var(--violet-10);border:1px solid #DFD5FD;border-radius:var(--r-pill);padding:.2em .8em;
}
.casr .dte{font-family:var(--mono);font-size:1rem;color:var(--navy-50)}
.casr h3{font-size:1.16rem}
.casr-cli{margin-top:auto;padding-top:12px;font-size:1rem;color:var(--navy-50);line-height:1.4}
/* Carte mise en avant : panneau violet, visuel décalé par-dessus. */
.casr.vedette{
  background:linear-gradient(152deg,var(--violet),var(--violet-mid) 62%,var(--sky));
  border-color:transparent;color:#fff;box-shadow:0 16px 36px -10px rgba(84,56,223,.5);
}
/* Aucun débordement : le visuel reste cadré dans la carte, avec le même
   rembourrage de chaque côté. La carte en avant se distingue par sa
   couleur, jamais par sa géométrie. */
.casr.vedette .casr-vis .ph{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.casr.vedette h3{color:#fff}
.casr.vedette .tagp{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.36);color:#fff}
.casr.vedette .dte,.casr.vedette .casr-cli{color:rgba(255,255,255,.82)}
.casr.vedette:hover{border-color:transparent;box-shadow:0 22px 46px -10px rgba(84,56,223,.6)}
/* =================================================================
   QUESTIONS, forme reprise de la page d'accueil
   Titre a gauche, questions en cartes a droite, sur un trace de fond.
   Le viewBox est deforme par preserveAspectRatio="none", d'ou le
   vector-effect : l'epaisseur reste constante quelle que soit la largeur.
   ================================================================= */
.faq-zone{position:relative;overflow:hidden}
.faq-fond{position:absolute;inset:0;z-index:0;pointer-events:none}
.faq-fond svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.faq-fond .couche-lueur{filter:blur(13px);opacity:.9}
.faq-fond .couche-lueur .trait-net{stroke:var(--violet-light);stroke-width:21}
.trait{fill:none;stroke-linecap:round;stroke-width:13;vector-effect:non-scaling-stroke}
.trait-ombre{stroke:#EBD9FB}
.trait-net{stroke:var(--violet)}
.faq-grille{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.faq-grille .sec-head{margin-bottom:0;align-items:flex-start;text-align:left}
.faq{display:flex;flex-direction:column;gap:var(--stack-2)}
/* Les cartes sont posees SUR le trace de fond : elles ont donc besoin
   d'une elevation propre, sinon la courbe les traverse visuellement. */
.acc-item{
  position:relative;background:var(--paper);border:1px solid #E3E7F0;border-radius:var(--r-lg);
  padding-inline:clamp(20px,2vw,28px);overflow:hidden;
  box-shadow:0 10px 26px rgba(14,46,73,.08), 0 2px 6px rgba(14,46,73,.05);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.acc-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--violet),var(--sky));
  opacity:0;transition:opacity .2s ease;
}
.acc-item:hover{box-shadow:0 14px 32px rgba(14,46,73,.12);transform:translateY(-1px)}
.acc-item.open{border-color:#CDBFFC;box-shadow:0 18px 40px rgba(84,56,223,.16)}
.acc-item.open::before,.acc-item:hover::before{opacity:1}
.acc-q{
  width:100%;background:none;border:0;cursor:pointer;color:inherit;text-align:left;
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.35;
  padding-block:clamp(16px,1.6vw,22px);padding-inline:0;
  display:flex;justify-content:space-between;gap:var(--stack-3);align-items:center;
}
.acc-q .ico{
  flex:none;width:28px;height:28px;border-radius:var(--r-pill);
  /* violet-ink plutot que violet : 4,92:1 contre 3,84:1 sur ce fond. */
  background:var(--violet-20);color:var(--violet-ink);
  display:grid;place-items:center;font-size:1.25rem;line-height:1;
  transition:transform .32s ease,background .2s ease,color .2s ease;
}
.acc-item.open .acc-q .ico{transform:rotate(45deg);background:var(--violet);color:#fff}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>.acc-inner{overflow:hidden}
.acc-panel p{padding-bottom:clamp(16px,1.6vw,22px);color:var(--navy-70);max-width:62ch}
@media (max-width:900px){
  .faq-grille{grid-template-columns:minmax(0,1fr)}
  .faq-grille .sec-head{position:static;margin-bottom:var(--head-gap)}
  .faq-fond{display:none}
}
/* ---------- BLOC CTA ---------- */
/* Exception assumée : la FAQ répond aux dernières objections, le bloc
   d'action doit suivre immédiatement. */
#faq{padding-bottom:clamp(30px,3.2vw,46px)}
.cta-zone{padding-block:clamp(30px,3.2vw,46px) 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}
/* ---------- 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. */
.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%;animation:contre 76s linear infinite}
.r2 .bulle{--d:19%;animation:contre 56s linear infinite reverse}
@keyframes contre{
  from{transform:rotate(calc(-1 * var(--a)))}
  to{transform:rotate(calc(-1 * var(--a) - 360deg))}
}
/* Meme piege que le logo Collective du pied de page : sans rembourrage
   interieur, l'image occupe tout le disque et les logos carres sont
   rognes par le masque rond. Le rembourrage est en pourcentage, les
   bulles des deux anneaux n'ayant pas le meme diametre. */
.bulle img{width:100%;height:100%;object-fit:contain;display:block;
  padding:17%;box-sizing:border-box}
.bulle:empty::after{content:"";width:34%;height:34%;border-radius:50%;
  border:1.5px dashed var(--navy-50)}
.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))}
/* Le bloc de rendez-vous respire plus que le reste de la page : c'est le
   dernier ecran, rien ne doit s'y bousculer. */
.cta-txt{--cta-flow:clamp(22px,2.2vw,34px)}
.cta-txt>*+*{margin-top:var(--cta-flow)}
.cta-txt .eyebrow+h2{margin-top:clamp(14px,1.4vw,20px)}
.cta-txt p+.btn{margin-top:clamp(32px,3.4vw,52px)}
.cta-txt .btn+.reassurance{margin-top:clamp(20px,2vw,30px)}
.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}
.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)}
.reassurance svg{width:16px;height:16px;flex:none;color:var(--violet-light)}
/* ---------- FIL D'ARIANE ET PIED DE PAGE ---------- */
.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 a{text-decoration:none}
.fil-zone .fil a:hover{color:var(--violet)}
.fil svg{width:13px;height:13px;flex:none;opacity:.6}
.fil b{font-weight:var(--fw-strong);color:#2F2563}
/* ---------- MENU BURGER ---------- */
.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}
.drawer-foot .btn{width:100%}
.drawer-foot .note{margin-top:14px;text-align:center;font-size:1rem;color:var(--on-navy-25)}
.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}
.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.
   ================================================== */
/* ---------- 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:1180px){
  .out-outil,.out-outil:nth-child(-n+3){grid-column:span 6}
  .chiffres{grid-template-columns:repeat(2,1fr);gap:var(--stack-4)}
}
@media (max-width:980px){
  .nav-links{display:none}
  .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}

  .hero{min-height:calc(100svh - 66px - 80px)}
  .hero-copy{max-width:none}
  .nappe .n1{width:min(132vw,760px)}
  .trio,.niveaux,.duo,.autres-grid{grid-template-columns:1fr}
  /* Titre d'abord, visuel en dernier. */
  .impact-grid{grid-template-columns:1fr;gap:var(--stack-4)}
  .impact-txt{order:1}
  .tdb{order:2}
  .impact-txt h2,.impact-txt .lead,.impact-txt p:not(.lead){max-width:none}
  /* Témoignages : rangée glissante plutôt que trois cartes empilées. */
  .grid-3{
    display:flex;gap:var(--stack-3);overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:4px 0 10px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
  }
  .grid-3::-webkit-scrollbar{display:none}
  .grid-3 .temoin{flex:none;width:min(84%,330px);scroll-snap-align:start}
  /* Missions : rangee glissante, meme mecanique que les temoignages
     ci-dessus. Les trois cartes empilees faisaient 1 870 px de haut a
     390 px de large, mesure au navigateur : le visiteur ne voyait jamais
     qu'il y en avait trois, et devait defiler trois ecrans pour en sortir.
     align-items:stretch est pose explicitement : la base de .missions
     porte align-items:start, qui en flex laisserait trois cartes de
     hauteurs differentes cote a cote.
     Le padding du bas vaut 30 px et non 10 comme pour les temoignages :
     l'ombre des cartes de mission est bien plus etalee (50 px de flou,
     22 px de decalage) et overflow-x:auto impose overflow-y:auto, donc
     tout ce qui depasse la boite est rogne. 30 px la laissent passer. */
  .missions{
    display:flex;align-items:stretch;gap:var(--stack-3);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:4px 2px 30px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
  }
  .missions::-webkit-scrollbar{display:none}
  .missions .mission{flex:none;width:min(84%,330px);scroll-snap-align:start}
  .temo-nav{display:flex;justify-content:center;gap:12px;margin-top:var(--stack-3)}
  .temo-nav button{width:46px;height:46px}
  /* minmax(0,1fr) et non 1fr : le minimum implicite d'une piste de grille
     est le min-content de son contenu. Un enfant insécable faisait gonfler
     la colonne à 588 px dans un bloc de 390, d'où 214 px de défilement
     horizontal sur mobile. */
  .cas-split{grid-template-columns:minmax(0,1fr);gap:var(--stack-4)}
  .out-split{grid-template-columns:1fr;gap:var(--stack-3)}
  .out-grille{flex:0 1 auto;margin-block:var(--stack-3)}
  .cas-txt .lead{max-width:none}
  .piliers{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr;gap:var(--stack-4)}
  .cta-txt{order:1}
  /* width:100% obligatoire : tous les enfants 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:26px 22px;border-radius:var(--r-lg)}
  .cta-txt h2,.cta-txt p{max-width:none}
  .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}
  .trio{gap:var(--stack-2)}
  .niveaux{gap:var(--stack-4)}
}
@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;
    --head-gap:30px;
    --t-marquee:34s;
  }
  html{scroll-padding-top:84px}
  .chiffres{grid-template-columns:1fr;gap:var(--stack-3)}
  .out-vue{padding:22px 18px}
  .tdb-gains li{font-size:.96rem}
  .pane,.niveau,.avis,.autre{padding:20px 18px}
  .offre{padding:22px 18px}
  .etape{padding:18px 16px}
  .certif{grid-template-columns:auto 1fr;gap:12px;padding:14px 18px}
  .certif .an{grid-column:2;text-align:left}
  .tuile{width:88px}
  .casr{width:min(78%,290px)}
  .cas-nav button{width:46px;height:46px}
  .diag-band{transform:rotate(-3deg)}
  .diag-in{padding-left:var(--gutter);gap:var(--stack-2)}
  .diag-logo{font-size:1rem}
  .bandeau{grid-template-columns:1fr;gap:var(--stack-2)}
  .fil-zone{padding-block:10px}
  .offre{padding:24px 18px}
  .offre h3{max-width:none}
}
@media (max-width:480px){
  :root{--gutter:16px;--flow-base:26px;--flow-cta:34px}
  .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}
  /* En colonne, le filet vertical n'a plus de sens : il disparait. */
  .hero-sous{flex-direction:column;gap:var(--stack-1)}
  .hero-sous span+span{padding-left:0}
  .hero-sous span+span::before{display:none}
}
@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%}
  .marquee-track,.diag-track,.cruban-piste{animation:none}
  .bande-filet{animation:none}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .drawer,.scrim,.sousnav{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.
   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,.autre .mk,.avis .who .av,.social{
  display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;
}
.logo>*,.autre .mk>*{display:block;line-height:1;max-width:100%;max-height:100%}
.logo img,.autre .mk img{object-fit:contain}
/* =================================================================
   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} }
/* Pastille Google cliquable, meme traitement que sur la page CRO. */
a.google-badge{text-decoration:none;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease}
a.google-badge:hover{border-color:#C7B6FB;box-shadow:0 6px 18px rgba(14,46,73,.10)}
/* Avis en tablette : deux par rangee, la troisieme centree. On annule le
   defilement herite de la regle mobile, masque compris : un mask-image
   force la mise en couche et rogne les ombres des cartes. */
@media (min-width:641px) and (max-width:980px){
  .grid-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--grid-gap);overflow:visible;padding:0;
    -webkit-mask-image:none;mask-image:none}
  .grid-3 .temoin{width:auto}
  .grid-3 .temoin:nth-child(3){grid-column:1 / -1;justify-self:center;
    width:calc(50% - var(--grid-gap) / 2)}
  .temo-nav{display:none}
}