/* Feuille propre à la page cro, 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}
.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)}
.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 ---------- */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--stack-3);min-height:74px}
.nav-links>a{position:relative;text-decoration:none;font-weight:600;font-size:var(--fs-sm);padding-bottom:5px}
.nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--violet);transform:scaleX(0);transform-origin:right center;transition:transform .34s cubic-bezier(.33,0,.2,1)}
.nav-links>a:hover::after,.nav-links>a:focus-visible::after,.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,.76);
  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,.8);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
  }
}
.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. */
.impact-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  gap:clamp(26px,3vw,52px);align-items:center}
/* 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:340px}
.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:1px solid rgba(255,255,255,.24);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -28px rgba(3,12,24,.55), inset 0 1px 0 rgba(255,255,255,.12);
  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%);
  }
}
/* Carte recommandee : violet plein, plus clair et plus sature que le
   fond du bloc. C'est le seul element qui prend de la couleur ici. */
.offre.focus,
.offre.focus:is(.offre){
  background:linear-gradient(152deg,#7050F0 0%,#5C3CE4 54%,#4C2DD0 100%);
  border-color:rgba(255,255,255,.3);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 34px 70px -20px rgba(60,34,180,.68), inset 0 1px 0 rgba(255,255,255,.24);
}
/* Sur le violet plein, le gris-bleu des listes tombait a 3,9:1.
   Blanc legerement voile : mesure au-dessus du seuil AA. */
.offre.focus li{color:#fff}
.offre.focus .sous{color:#fff}
.offre.focus .repere .unite{color:rgba(255,255,255,.95)}
.offre.focus .sep{color:rgba(255,255,255,.95)}
.offre.focus .badge{background:rgba(14,46,73,.22);border-color:rgba(255,255,255,.45)} /* voile sombre : le blanc ne descend pas sous 5,6:1 ; le voile blanc le ramenait à 3,7:1 */
.offre.focus li svg{color:#fff}
/* 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. */
#offres{position:relative;overflow:hidden;background:#071A2C}
#offres>.wrap{position:relative;z-index:1}
#offres .sec-head h2{color:#fff}
#offres .eyebrow{color:#C9B6FF}
#offres .aiguillage{color:rgba(255,255,255,.95)}
#offres .aiguillage a{color:#DCCBFF}
#offres .aiguillage a:hover{color:#fff}
#offres .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
#offres .btn-ghost:hover,#offres .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-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.violet{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, haute de 52 px : c'est la
   mesure de la plus grande marque, pas 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 un logotype en couvrait
   environ 2 800 : elle paraissait trois fois plus petite alors que les
   deux faisaient la meme hauteur. Les marques rondes prennent donc les
   52 px entiers, les logotypes sont plafonnes a 38 px de haut. */
.temoin-logo{height:52px;display:flex;align-items:center}
/* Logos clients en couleur, a pleine opacite : ce sont des preuves, pas
   des elements d'ambiance. Le gris et l'opacite reduite les faisaient
   passer pour de la decoration. */
.temoin-logo img{max-height:38px;width:auto;display:block}
.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}
.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)}
/* Les visuels de cas sont fabriques en 16 sur 10 ; la vignette du rail
   est en 4 sur 3, donc cover et non contain : mieux vaut rogner un peu
   a gauche et a droite que poser deux bandes. */
.casr-vis img{width:100%;height:100%;object-fit:cover;display:block}
.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. */
/* Carte mise en avant : le texte blanc est mesuré sur la teinte la plus
   claire du dégradé. --violet 4,59:1, #5438DF 6,98:1, --sky-ink 5,93:1.
   L'ancienne fin sur --sky tombait à 2,02:1 et le blanc à 82 % à 1,78:1. */
.casr.vedette{
  background:linear-gradient(152deg,var(--violet),#5438DF 62%,var(--sky-ink));
  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(14,46,73,.22);border-color:rgba(255,255,255,.36);color:#fff}
.casr.vedette .dte,.casr.vedette .casr-cli{color:#fff}
.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}
  .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{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} }
/* ---------- AJOUTS DU 15 OCTOBRE 2026 ---------- */
/* La pastille Google est devenue un lien vers la fiche : elle garde
   exactement son apparence, on ajoute seulement l'etat de survol. */
/* Le logo Figures est une marque ronde, pas un mot : elle s'inscrit dans
   un carre a la hauteur de la rangee, sinon la regle width:auto l'etirerait
   a la largeur d'un logotype. max-height est neutralise, sans quoi le
   plafond des logotypes la ramenerait a 38 px. */
.temoin-logo img.rond{height:52px;width:52px;max-height:none;border-radius:var(--r-pill)}
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)}
/* Temoignages en tablette : deux par rangee, centres.
   Entre 641 et 980 px, la rangee glissante se lit mal, il y a la place
   pour deux cartes. On annule donc le defilement herite de la regle
   mobile, y compris son masque : un mask-image force la mise en couche
   et rogne les ombres des cartes.
   La troisieme carte occupe seule sa rangee, on la centre et on la borne
   a la largeur d'une colonne pour qu'elle ne s'etale pas sur deux. */
@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}
}