/* Feuille propre à la page accueil, reprise de la maquette dans l'ordre d'origine. */
:root{
  /* ---------- COULEURS (charte) ---------- */
  --navy-50:#5F7080;      /* 5,10:1 sur blanc, texte secondaire conforme AA */
  --navy-25:#87969F;      /* decoratif uniquement, jamais du texte */
  --etoile:#B87F0C;        /* or assombri : 3,45:1 sur blanc, seuil non textuel */
  --navy-deep:#06182A;     /* fond sombre profond, blocs neon et offres */
  --navy-card:#0C2338;     /* carte posee sur navy-deep */
  --on-navy-70:#C6D2DE;
  --on-navy-25:#8FA2B4;

  /* ---------- TYPO ---------- */
  /* Bricolage Grotesque remplace Syne : chasse plus etroite, hauteur
     d'x plus basse, donc un bloc de titre plus vertical a corps egal.
     C'est une variable a axe optique, le navigateur ajuste le dessin
     selon la taille sans reglage supplementaire. */

  /* ---------- SYSTÈME D'ESPACEMENT ----------
     Une seule source de vérité. Aucun padding ni margin
     en dur ailleurs dans la feuille de style.            */
  --head-gap:clamp(28px,3.5vw,48px);     /* titre de section -> contenu */
  --stack-2:14px;
  --stack-3:22px;
  --pad-card:clamp(24px,2.6vw,34px);     /* padding intérieur des cartes */

  /* ---------- RAYONS ---------- */
  --r-xl:30px;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--body);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* ---------- CONTENEURS ET RYTHME ---------- */
section.tight{padding-block:var(--section-y-sm)}
.dark{background:var(--navy);color:#fff}
/* 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:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5.5vw,4.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(1.65rem,3.4vw,2.55rem);font-weight:800;letter-spacing:-.025em;line-height:1.08}
h3{font-size:1.22rem;letter-spacing:-.012em;line-height:1.28}
h4{letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.eyebrow{
  display:inline-block;background:var(--navy);color:#fff;border-radius:var(--r-xs);
  font-family:var(--display);font-weight:700;font-size:0.78rem;
  text-transform:uppercase;letter-spacing:.14em;padding:.5em .85em;line-height:1.5;
}
.dark .eyebrow,.offres .eyebrow{background:var(--violet);color:#fff}
.lead{font-size:1.08rem;color:var(--navy-70);max-width:62ch;font-weight:var(--fw-text)}
.dark .lead{color:#C6D2DE}
/* signature double barre de la charte */
/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.85em 1.7em;text-decoration:none;border:2px solid transparent;
  border-radius:var(--r-pill);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.dark .btn-ghost{border-color:#fff;color:#fff}
.dark .btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:.65em 1.3em;font-size:1rem}
.btn-fleche svg{width:17px;height:17px;flex:none;display:block;transition:transform .18s ease}
.btn-fleche:hover svg{transform:translateX(4px)}
.btn-lg{padding:1em 2em;font-size:1.02rem}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--violet);color:#fff}
/* ---------- PLACEHOLDERS ---------- */
.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:.14em;text-transform:uppercase;
  font-weight:600;padding:var(--stack-1);
}
.todo{
  display:inline-block;background:var(--sky-20);color:#1C6A94;border-radius:var(--r-xs);
  font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.28em .6em;border:1px solid #B5E0F6;
}
/* ---------- NAVIGATION ---------- */
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,.nav-trigger{
  text-decoration:none;font-weight:600;font-size:1rem;font-family:var(--body);
  color:inherit;background:none;border:0;cursor:pointer;line-height:1.5;
  border-bottom:2px solid transparent;padding:0 0 2px;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-links>a:hover,.nav-trigger:hover{border-bottom-color:var(--violet)}
.nav-cta{display:flex;justify-content:flex-end}
/* ---------- MEGA MENU EXPERTISES ---------- */
.nav-trigger .chev{width:14px;height:14px;transition:transform .22s ease;flex:none}
.nav-item.open .nav-trigger{border-bottom-color:var(--violet)}
.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;
}
.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;
  border-bottom:0!important;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:1rem;
  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;
}
/* ---------- HERO, colonne unique centree ---------- */
/* Respiration haute reduite : sous la barre de navigation, la pleine
   hauteur de section repoussait le titre trop bas dans l'ecran. */
.hero{padding-top:clamp(34px,4vw,60px)}
/* Le surtitre du fold porte le portrait a la place du signe oblique. */
.eyebrow-photo::before{display:none}
.eyebrow-photo{gap:.6em}
.eyebrow-face{
  width:30px;height:30px;border-radius:50%;flex:none;display:block;
  object-fit:cover;box-shadow:0 0 0 1px rgba(113,91,250,.3);
}
.hero-centre{display:flex;flex-direction:column;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:1120px}
.hero h1 .hl{color:var(--violet)}
.hero h1{font-size:clamp(2.2rem,5.5vw,4.1rem);line-height:1.04;max-width:19ch;margin-inline:auto}
.hero-copy .lead{max-width:74ch;margin-inline:auto;font-size:clamp(1.1rem,1.35vw,1.3rem);line-height:1.6}
.hero-cta{display:flex;gap:var(--stack-2);flex-wrap:wrap;justify-content:center}
/* Ligne de preuve sous le bouton : volume accompagne + note Google */
.preuve{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,1.5vw,18px);
  font-size:0.95rem;line-height:1.5;color:var(--navy-70);font-weight:var(--fw-text);
}
.preuve strong{color:var(--navy);font-weight:700}
.preuve-bloc{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.preuve-filet{width:1px;height:20px;background:var(--line);flex:none}
.preuve-google{width:20px;height:20px;flex:none;display:block}
.etoiles{display:inline-flex;gap:2px;line-height:0}
.etoiles svg{width:15px;height:15px;display:block;fill:var(--etoile)}
@media (max-width:560px){
  .preuve{gap:8px 14px}
  .preuve-filet{display:none}
}
/* ---------- BANDEAU LOGOS DÉFILANT ---------- */
.band-label{
  font-size:0.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-50);font-weight:600;margin-bottom:var(--stack-3);text-align:center;
}
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:var(--stack-3);width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .ph{width:168px;height:72px;flex:none;border-radius:var(--r-sm)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - (var(--stack-3) / 2)))}}
/* ---------- BANDEAU CLIENTS : libelle a gauche, defilement a droite ---------- */
.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-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 34s 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}
/* Bande de preuve, pas une section a part entiere : respiration reduite.
   Fond bleu de charte, accent neon violet : une nappe lumineuse derriere
   les logos et un filet degrade anime sur l'arete basse. */
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)}
/* Bande des formations : meme mecanique, fond blanc, tuiles grisees pour
   que le carre se detache du fond. */
/* Pas de cadre autour des logos : la marque porte seule, plus grande, et la
   bande se resserre fortement en hauteur. */
/* Bande de formations : respiration minimale, c'est un liseré de preuve. */
section.bande-formations{background:var(--paper);padding-block:clamp(10px,1.1vw,16px)}
/* Rapprochements demandés entre blocs voisins. */
#temoignages{padding-bottom:clamp(26px,2.8vw,42px)}
#chiffres{padding-top:clamp(14px,1.6vw,24px)}
#parcours{padding-bottom:clamp(44px,5vw,74px)}
#reassurance{padding-top:clamp(44px,5vw,74px)}
/* Les visuels de formation sont dans un cadre large et court : la bande
   perd en hauteur sans que les marques retrecissent. */
.bande-formations .tuile{
  background:none;border:0;padding:0;
  width:clamp(118px,11.5vw,160px);aspect-ratio:320 / 128;
}
.bande-formations .marquee-carre .marquee-track{
  --g:clamp(26px,3vw,48px);
  animation-duration:42s;animation-direction:reverse;
}
@media (max-width:860px){
  .bandeau{grid-template-columns:minmax(0,1fr);gap:var(--stack-3)}
  .bandeau-titre{text-align:center}
}
/* ---------- EN-TÊTE DE SECTION ---------- */
.sec-head{display:flex;flex-direction:column;gap:var(--stack-2);align-items:center;text-align:center;margin-bottom:var(--head-gap)}
.sec-head .lead{max-width:62ch;margin-inline:auto}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
/* ---------- DOUBLE ENTRÉE, cartes à encoche ----------
   L'encoche est un masque radial centré sur le centre du bouton rond, de
   rayon « demi-bouton + jeu ». Centre et rayon étant égaux, le disque
   découpé est tangent aux deux bords : la carte se creuse exactement
   autour du bouton, et le jeu reste constant sur tout le pourtour. */
.path{
  position:relative;display:flex;flex-direction:column;isolation:isolate;
  padding:clamp(28px,3vw,42px);
  border:0;border-radius:var(--r-lg);text-decoration:none;color:var(--navy);
  min-height:clamp(230px,22vw,280px);
  transition:transform .18s ease;
}
/* Le fond reste un calque a part : il porte le degrade sous le contenu. */
.path-fond{position:absolute;inset:0;z-index:0;border-radius:inherit;display:block}
.path h3,.path p,.path .path-cta{position:relative;z-index:1}
.path{color:#fff}
.path h3{font-size:clamp(1.45rem,2.1vw,1.95rem);letter-spacing:-.01em;line-height:1.15;color:#fff}
.path p{color:var(--on-navy-70);font-weight:var(--fw-text);font-size:1.02rem;max-width:34ch;
  margin-top:var(--stack-2)}
.path:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(14,46,73,.3)}
/* Cartes sombres : meme famille navy, l'une tiree vers le violet pour la
   conversion, l'autre vers le ciel pour le marketing. */
.path-bas .path-fond{background:linear-gradient(140deg,#272270 0%,#161B4E 46%,#0B1B30 100%)}
.path-haut .path-fond{background:linear-gradient(140deg,#0F3C5F 0%,#0D2641 50%,#161B4A 100%)}
/* Action secondaire : ce n'est pas l'action principale de la page, elle ne
   doit pas rivaliser avec le bouton de prise de rendez-vous. */
.path-cta{
  align-self:flex-start;margin-top:auto;padding-top:0;
  display:inline-flex;align-items:center;gap:.6em;
  background:none;border:2px solid rgba(255,255,255,.55);color:#fff;
  border-radius:var(--r-pill);
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3;
  padding:.8em 1.5em;margin-top:clamp(26px,3vw,40px);
  transition:background .18s ease,color .18s ease;
}
.path-cta svg{width:17px;height:17px;flex:none;display:block;
  transition:transform .18s ease}
.path:hover .path-cta{background:#fff;border-color:#fff;color:var(--navy)}
.path:hover .path-cta svg{transform:translateX(4px)}
.path-cta{transition:background .18s ease,color .18s ease,border-color .18s ease}
.path:focus-visible{outline:3px solid var(--sky);outline-offset:4px}
/* ---------- SEPARATEURS ----------
   Une barre courte pour marquer une coupure legere entre deux blocs,
   un trace courbe quand la coupure merite un geste graphique. */
.separateur-courbe{
  position:relative;height:clamp(108px,12vw,182px);overflow:hidden;pointer-events:none;
}
.separateur-courbe svg{width:100%;height:100%;display:block}
/* Essai demande : tube neon. Quatre couches superposees, de la plus large
   et la plus floue a la plus fine et la plus nette, plus une onde de
   lumiere qui parcourt le tube.
   Le flou est pose sur l'element SVG entier, jamais sur le trace : applique
   sur le trace, il serait etire par le viewBox non uniforme et donnerait un
   halo ovale au lieu d'un halo rond.
   pathLength="100" normalise la longueur du trace : les pointilles de
   l'onde se calculent en centiemes, quelle que soit la largeur d'ecran. */
/* Halo flou sous le trace, idiome neon du site, applique a TOUS les traces
   courbes de la page : les deux separateurs et le fond de la FAQ.
   Le flou est pose sur l'element SVG entier, jamais sur le trace : applique
   sur le trace, il serait etire par le viewBox non uniforme et donnerait un
   halo ovale au lieu d'un halo rond. */
.couche-lueur{position:absolute;inset:0;filter:blur(13px);opacity:.9}
.couche-lueur .trait-net{stroke:var(--violet-light);stroke-width:21}
.couche-nette{position:relative}
/* ---------- SITUATIONS ---------- */
.situ{display:flex;gap:var(--stack-3);align-items:flex-start;padding-block:var(--stack-3);
  border-top:1px solid var(--line);
  opacity:0;transform:translateX(-34px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.situ.vu{opacity:1;transform:none}
.situ:last-of-type{border-bottom:1px solid var(--line)}
.situ .n{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--violet-light);flex:none;width:2.2ch}
.situ p{font-weight:var(--fw-text);color:var(--navy-70)}
.situ strong{font-weight:700;color:var(--navy);display:block;font-family:var(--display)}
/* ---------- OFFRES, bloc sombre ---------- */
.offres{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.offres>.wrap{position:relative;z-index:1}
.offres .sec-head h2{color:#fff}
.offres .sec-head .lead{color:var(--on-navy-70)}
.offres-lueur{
  position:absolute;z-index:0;left:50%;top:14%;transform:translateX(-50%);
  width:62%;aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(84,56,223,.34),rgba(6,24,42,0) 70%);
  filter:blur(32px);
}
.offre{
  position:relative;display:flex;flex-direction:column;gap:0;
  padding:clamp(28px,2.8vw,38px);padding-top:clamp(56px,4.6vw,66px);
  background:linear-gradient(168deg,#102A42 0%,#0A1F33 54%,#07182A 100%);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
}
.offre-vedette{
  background:linear-gradient(168deg,#262176 0%,#181A52 44%,#0B1933 100%);
  border-color:rgba(166,130,251,.42);
  box-shadow:0 26px 60px rgba(84,56,223,.3);
}
.offre .tag{
  position:absolute;top:16px;right:16px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:700;font-size:0.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);background:#fff;padding:.42em .95em;line-height:1.4;
}
.offre-vedette .tag{background:var(--violet-light);color:#1B1240}
.offre h3{color:#fff;font-size:clamp(1.3rem,1.7vw,1.6rem)}
.offre .promesse{color:var(--on-navy-70);font-weight:var(--fw-text);font-size:1.02rem;
  margin-top:var(--stack-2);line-height:1.55}
.offre h3+.promesse{margin-top:14px}
.offre .promesse+ul{margin-top:clamp(24px,2.4vw,32px)}
.offre ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85em;
  color:var(--on-navy-70);font-weight:var(--fw-text);font-size:1rem;line-height:1.55}
.offre li{display:flex;gap:.7em;align-items:flex-start}
.offre li svg{
  flex:none;width:19px;height:19px;margin-top:.22em;border-radius:50%;
  padding:3.5px;background:rgba(255,255,255,.1);color:#fff;
}
.offre-vedette li svg{background:rgba(166,130,251,.3);color:#fff}
.offre .meta{
  margin-top:auto;padding-top:var(--stack-4);border-top:1px dashed rgba(255,255,255,.16);
  font-size:1rem;color:var(--on-navy-25);letter-spacing:.02em;font-weight:500;text-align:center;
}
/* Exception documentee : dans une carte d'offre le bouton prend la largeur,
   c'est la zone cliquable de la carte. */
.offre .btn{width:100%;justify-content:center;margin-top:var(--stack-3)}
.offre .btn-contour{border-color:rgba(255,255,255,.4);color:#fff;background:none}
.offre .btn-contour:hover{background:#fff;color:var(--navy);border-color:#fff}
/* ---------- RÉASSURANCE ----------
   Fond blanc, chaque point dans sa carte. Le filet de charte en haut donne
   le reperage couleur sans alourdir : violet, violet clair, ciel, violet. */
.rassure-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);
  gap:clamp(30px,4vw,64px);align-items:center}
.rassure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
/* Portrait seul, sans anneaux : le disque de couleur est deja dans le
   fichier image, un cercle de plus n'apportait rien et bridait la taille. */
.photo-ronde{width:100%;max-width:460px;margin-inline:auto;display:block}
.photo-ronde .face{width:100%;height:auto;display:block;pointer-events:none}
.rassure-item{
  position:relative;display:flex;flex-direction:column;gap:var(--stack-2);align-items:flex-start;
  padding:clamp(24px,2.4vw,32px);
  background:var(--paper);border:1px solid #E3E7F0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 8px 22px rgba(14,46,73,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.rassure-item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--violet);
}
.rassure-item:nth-child(2)::before{background:var(--violet-light)}
.rassure-item:nth-child(3)::before{background:var(--sky)}
.rassure-item:nth-child(4)::before{background:#5438DF}
.rassure-item:hover{transform:translateY(-3px);border-color:#CDBFFC;
  box-shadow:0 16px 34px rgba(84,56,223,.12)}
.rassure-ico{
  width:46px;height:46px;flex:none;border-radius:var(--r-md);
  background:var(--violet-20);color:var(--violet);display:grid;place-items:center;
}
.rassure-item:nth-child(3) .rassure-ico{background:var(--sky-20);color:#1C6A94}
.rassure-ico svg{width:23px;height:23px;display:block}
.rassure h3{font-size:1.1rem;line-height:1.3}
.rassure p{color:var(--navy-70);font-weight:var(--fw-text);font-size:1rem;line-height:1.55}
@media (max-width:980px){
  /* Regle constante du site : sur mobile le texte passe avant le visuel. */
  .rassure-split{grid-template-columns:minmax(0,1fr);gap:var(--stack-4)}
  .rassure-split .rassure{order:1}
  .rassure-split .photo-ronde{order:2;max-width:340px}
}
@media (max-width:560px){ .rassure{grid-template-columns:minmax(0,1fr)} }
/* ---------- CAS PRATIQUES : rail horizontal, identique a la page CRO ---------- */
.cas-split{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.6fr);
  gap:clamp(28px,4vw,64px);align-items:stretch}
.cas-txt{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left}
.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;margin-inline:0}
.cas-nav{display:flex;gap:12px;margin-top:auto;padding-top:var(--stack-4)}
.cas-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 .16s ease,background .16s ease,color .16s ease,opacity .16s ease;
}
.cas-nav button:hover:not(:disabled){border-color:var(--violet);background:var(--violet);color:#fff}
.cas-nav button:disabled{opacity:.3;cursor:default}
.cas-nav svg{width:19px;height:19px}
/* Degagement pour la levee au survol et l'ombre coloree, sinon rognees
   par le masque de degrade. */
.casr-rail{
  padding:26px 0 26px 14px;margin:-26px 0 -26px -14px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 54px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 54px),transparent);
}
/* overflow-x:auto force overflow-y:auto : la piste rogne donc aussi en
   hauteur, et la carte soulevee au survol se coupait net en haut. Le
   degagement est pris en rembourrage interieur, annule par une marge
   negative de meme valeur pour ne rien decaler. */
.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:-22px 0 -34px;padding:22px 0 34px;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;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad-card);
  transition:border-color .16s ease,box-shadow .22s ease,transform .22s ease;
}
.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:700;color:#4B3699;
  background:#F6F3FF;border:1px solid #DFD5FD;border-radius:var(--r-pill);padding:.2em .8em;
}
.casr .dte{font-family:var(--display);font-size:1rem;color:var(--navy-50);font-weight:600}
.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 : 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);
}
.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)}
@media (max-width:980px){
  /* En colonne unique, l'appel a l'action passe sous les cas. Il est
     imbrique dans .cas-txt, donc hors de portee d'un simple order :
     display:contents dissout cette boite et remonte ses enfants comme
     elements de la grille, qui peuvent alors etre ordonnes.
     Contrepartie : .cas-txt perd son align-items, et un element de
     grille s'etire par defaut. Le surtitre, le bouton et les fleches
     reprennent donc un alignement a gauche explicite, sinon le bouton
     ferait toute la largeur, ce que la charte interdit. */
  .cas-split{grid-template-columns:minmax(0,1fr);gap:0}
  .cas-txt{display:contents}
  .cas-txt .lead{max-width:none}
  .cas-txt .eyebrow{order:1;justify-self:start}
  .cas-txt h2{order:2}
  .cas-txt .lead{order:3}
  .casr-rail{order:4;margin-top:var(--stack-4)}
  .cas-nav{order:5;justify-self:start;margin-top:var(--stack-3);padding-top:0}
  .cas-txt>.btn{order:6;justify-self:start;margin-top:var(--stack-4)}
}
@media (max-width:640px){
  .casr{width:min(78%,290px)}
  .cas-nav button{width:46px;height:46px}
}
/* ---------- STATISTIQUES ---------- */
.stats{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,64px);
  padding-top:clamp(34px,3.8vw,52px);
}
/* Trait anime, place EN HAUT : il separe les avis des chiffres.
   Le violet circule de la gauche vers la droite. */
.stats::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}}
.stat-nb{
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(3.6rem,9.6vw,8.6rem);color:var(--navy);
  font-variant-numeric:tabular-nums;display:block;
}
.stat-nb .suf{font-size:.7em;letter-spacing:-.02em}
.stat-lib .todo{display:inline-block;margin-top:8px}
.stat-lib{
  margin-top:clamp(14px,1.4vw,20px);font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.35;color:var(--navy);max-width:21ch;
}
@media (max-width:760px){
  .stats{grid-template-columns:minmax(0,1fr);gap:var(--stack-4)}
  .stat-nb{font-size:clamp(3rem,16vw,4.6rem)}
  .stat-lib{max-width:none}
}
/* ---------- MÉTHODE : sommaire collant et panneaux empilés ----------
   Chaque panneau est collant au même décalage haut. Ils se recouvrent donc
   l'un après l'autre : on ne voit jamais deux étapes en même temps. Le
   z-index croissant garantit que le suivant passe DEVANT le précédent, 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 et elle disparaît au premier
   défilement. D'où align-items:stretch ici et le collage sur l'enfant. */
.meth{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr);
  gap:clamp(26px,4vw,72px);align-items:stretch}
.meth-cote{position:relative}
.meth-colle{position:sticky;top:clamp(110px,14vh,150px)}
.meth-label{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:#8095A8;font-weight:600;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}
/* Filet de liaison entre les pastilles */
.meth-pas:not(:last-child)::after{content:"";position:absolute;left:21px;top:calc(50% + 22px);
  width:1px;height:calc(100% - 44px);background:rgba(255,255,255,.16)}
.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;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.26);color:#9FB0C0;background:transparent;
  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:#8095A8;font-weight:600}
.meth-txt b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#C6D2DE;
  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,.2)}
.meth-pas.actif .meth-txt b{color:#fff}
/* --haut : ligne de collage commune. Les cartes font au moins la hauteur
   d'écran restante et ne sont séparées d'aucun espace : la suivante
   recouvre donc entièrement la précédente, on n'en voit jamais deux. */
.meth-pile{--haut:clamp(96px,12vh,132px)}
.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;
  min-height:max(350px, calc(100svh - var(--haut) - 56px));
  background:linear-gradient(165deg,#12304A 0%,#0B2135 55%,#071A2C 100%);
  border:1px solid rgba(255,255,255,.11);border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,46px);
  box-shadow:0 26px 60px rgba(3,12,24,.55);
}
.meth-badge{align-self:flex-start}
.meth-badge{
  display:inline-flex;align-items:center;gap:.6em;border-radius:var(--r-pill);
  background:rgba(113,91,250,.18);border:1px solid rgba(166,130,251,.38);
  color:#CDBFFC;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-light)}
.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:330px;margin-inline:auto;display:block}
.meth-visuel svg{width:100%;height:auto;display:block}
.mv-grille{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1}
.mv-axe{stroke:rgba(255,255,255,.14);stroke-width:1}
.mv-zone{fill:rgba(113,91,250,.26);stroke:var(--violet-light);stroke-width:2;
  stroke-linejoin:round}
.mv-pt{fill:var(--violet-light)}
.mv-lib{fill:#9FB0C0;font-family:var(--display);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.mv-boite{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.18);stroke-width:1}
.mv-boite-on{fill:rgba(113,91,250,.2);stroke:var(--violet-light);stroke-width:1.6}
.mv-barre{fill:rgba(255,255,255,.28)}
.mv-barre-on{fill:var(--violet-light)}
.mv-txt{fill:#fff;font-family:var(--display);font-size:13px;font-weight:700}
.mv-trait{fill:none;stroke:var(--violet-light);stroke-width:2;stroke-linecap:round}
.mv-trait-pale{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-linecap:round}
@media (max-width:900px){
  .meth-corps{grid-template-columns:minmax(0,1fr)}
  .meth-visuel{order:2;max-width:300px;margin-top:var(--stack-3)}
  .meth-texte{order:1}
}
.meth-carte h3{color:#fff;font-size:clamp(1.4rem,2.1vw,1.9rem);margin-top:var(--stack-3);line-height:1.18}
.meth-texte p{color:var(--on-navy-70);font-weight:var(--fw-text);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(--on-navy-70);
  font-weight:var(--fw-text);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-light)}
@media (max-width:900px){
  /* 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 collant d'un 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. */
  .meth{display:block}
  .meth-cote{
    position:sticky;top:72px;z-index:4;
    padding:10px var(--gutter) 6px;margin-inline:calc(var(--gutter) * -1);
    background:rgba(6,24,42,.88);
  }
  .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 6 px 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-pile{margin-top:var(--stack-4)}
  .meth-item{position:static;padding-bottom:var(--stack-3)}
  .meth-carte{min-height:0}
}
@supports (backdrop-filter:blur(12px)){
  @media (max-width:900px){
    .meth-cote{
      background:rgba(6,24,42,.86);
      -webkit-backdrop-filter:blur(12px) saturate(140%);
      backdrop-filter:blur(12px) saturate(140%);
    }
  }
}
/* ---------- FOND NÉON ----------
   Chaque vague est une ellipse très large dont seul le bord HAUT est
   visible : le dégradé vertical y pose un liseré blanc puis violet, et
   s'éteint vers le bas. C'est ce liseré qui dessine la courbe lumineuse.
   Un calque flouté par-dessous fait la diffusion. Aucune image. */
.neon{
  --rim:clamp(118px,12vw,180px);   /* hauteur du liseré au-dessus du bas */
  /* Pas d'overflow:hidden ici : il annulerait le collage du sommaire et des
     panneaux. Le decoupage se fait sur .neon-fond, qui epouse exactement la
     boite de la section, donc rien ne deborde. */
  position:relative;background:var(--navy-deep);color:#fff;isolation:isolate;
  padding-bottom:calc(var(--rim) + clamp(86px,9vw,130px));
}
.neon>.wrap{position:relative;z-index:1}
/* Le fond est strictement borné au bloc : overflow:hidden sur la section ET
   sur ce calque. Une version collante le faisait déborder sur la section
   suivante, elle est abandonnée. */
.neon-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Halo haut, pour que le néon soit présent dès l'entrée dans le bloc. */
.neon-halo{
  position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  width:78%;aspect-ratio:2.6 / 1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(84,56,223,.3) 0%,rgba(6,24,42,0) 70%);
  filter:blur(44px);
}
/* Chaque vague est une ellipse posée sur le bas de la section puis
   redescendue de sa propre hauteur moins --rim : son bord HAUT se retrouve
   donc toujours à --rim pixels du bas, et seul ce bord est visible.
   Le dégradé vertical y pose un liseré blanc puis violet qui s'éteint. */
.vague{
  position:absolute;bottom:0;border-radius:50%;display:block;
  transform:translateY(calc(100% - var(--rim)));
}
.v1,.v1-flou{width:188%;aspect-ratio:2.9 / 1;left:-32%}
.v2,.v2-flou{width:66%;aspect-ratio:1.15 / 1;right:-28%;
  transform:translateY(calc(100% - var(--rim) - 44px))}
.v1{
  background:linear-gradient(to bottom,
    rgba(255,255,255,.96) 0%,
    rgba(196,169,252,.92) 1%,
    rgba(142,118,251,.66) 4.5%,
    rgba(94,72,232,.4) 11%,
    rgba(62,42,170,.2) 22%,
    rgba(6,24,42,0) 44%);
  filter:blur(1.5px);
}
.v2{
  background:linear-gradient(to bottom,
    rgba(255,255,255,.9) 0%,
    rgba(166,130,251,.8) 1%,
    rgba(113,91,250,.48) 5%,
    rgba(79,193,253,.2) 14%,
    rgba(6,24,42,0) 34%);
  filter:blur(2px);
}
.v1-flou{
  background:linear-gradient(to bottom,rgba(140,112,252,.32) 0%,rgba(80,60,210,.17) 16%,rgba(6,24,42,0) 38%);
  filter:blur(40px);
}
.v2-flou{
  background:linear-gradient(to bottom,rgba(140,112,252,.3) 0%,rgba(70,140,220,.15) 18%,rgba(6,24,42,0) 36%);
  filter:blur(42px);
}
/* ---------- TÉMOIGNAGES ---------- */
.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 .ph{width:26px;height:26px;border-radius:var(--r-pill);font-size:0;padding:0;flex:none}
.google-badge .score{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1}
.google-badge .src{font-size:0.82rem;color:var(--navy-50);font-weight:500}
.stars{display:inline-flex;gap:2px;align-items:center}
.stars svg{width:17px;height:17px;display:block}
.google-badge .gimg{width:26px;height:26px;flex:none;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);
}
.temoin-logo{height:34px;display:flex;align-items:center}
.temoin-logo img{max-height:100%;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-xs);padding:.3em .7em;
}
.temoin blockquote{margin:0;font-weight:var(--fw-text);color:var(--navy);
  font-size:1.08rem;line-height:1.6}
.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 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);font-weight:var(--fw-text)}
.temoin .who div{font-size:1rem;line-height:1.4}
.temoin .who strong{font-family:var(--display);font-weight:700;display:block}
.temoin .who span{color:var(--navy-50)}
/* ---------- FAQ : titre à gauche, questions en cartes à droite ----------
   Le trait de fond est un SVG étiré sur toute la section. Le viewBox est
   déformé par preserveAspectRatio="none", d'où vector-effect sur les tracés :
   l'épaisseur reste constante quelle que soit la largeur de l'écran. */
.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}
.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;
}
/* Liseré de charte sur le bord gauche, net sur le fond clair. */
.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);
  background:var(--violet-20);color:var(--violet);
  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);font-weight:var(--fw-text);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}
}
/* ---------- CTA FINAL, identique a la page Cas pratiques ---------- */
.cta-zone{padding-block:var(--section-y)}
.cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(34px,4.6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;
  background:linear-gradient(118deg,#0E2E49 0%,#24276E 28%,#5438DF 55%,#2B2B7D 78%,#0E2E49 100%);
  background-size:260% 260%;
  animation:drift 26s ease-in-out infinite;
  color:#fff;isolation:isolate;
}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-card::after{
  content:"";position:absolute;z-index:-1;width:44%;aspect-ratio:1;right:-5%;top:-26%;
  background:radial-gradient(circle,rgba(166,130,251,.55),transparent 68%);filter:blur(10px);
}
.cta-txt{display:flex;flex-direction:column;align-items:flex-start}
.cta-txt .eyebrow{background:none;color:var(--violet-light);padding-left:0}
.cta-txt h2{color:#fff;max-width:17ch}
.cta-txt p{color:var(--on-navy-70);font-weight:var(--fw-text);font-size:1.15rem;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:1rem;color:var(--on-navy-70);font-weight:var(--fw-text)}
.reassurance svg{width:16px;height:16px;flex:none;color:var(--violet-light)}
/* ---------- ORBITE D'OUTILS ----------
   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%}
.r2 .bulle{--d:19%}
.r1 .bulle{animation:contre 76s linear infinite}
.r2 .bulle{animation:contre 56s linear infinite reverse}
@keyframes contre{
  from{transform:rotate(calc(-1 * var(--a)))}
  to{transform:rotate(calc(-1 * var(--a) - 360deg))}
}
.bulle img{width:100%;height:100%;object-fit:contain;display:block}
.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))}
.cta-txt>*+*{margin-top:var(--flow-base)}
.cta-txt .eyebrow+h2{margin-top:var(--flow-tight)}
.cta-txt p+.btn{margin-top:var(--flow-cta)}
.cta-txt .btn+.reassurance{margin-top:var(--stack-3)}
@media (max-width:980px){
  .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:clamp(28px,5vw,40px);border-radius:var(--r-lg)}
  .cta-txt h2,.cta-txt p{max-width:none}
}
/* ---------- PIED DE PAGE ---------- */
/* ---------- 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}
}
/* ---------- BANDEAU MAQUETTE ---------- */
/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-inner{grid-template-columns:auto 1fr;row-gap:var(--stack-2);padding-block:var(--stack-2)}
  .nav-links{order:3;grid-column:1 / -1;gap:var(--stack-3);justify-content:flex-start;align-items:flex-start}
  .nav-item{flex-direction:column;align-items:flex-start;flex:1 1 100%}
  .mega{
    position:static;transform:none;width:100%;margin-top:var(--stack-2);
    box-shadow:none;display:none;
  }
  .nav-item.open .mega{display:block;transform:none}
  .mega::before{display:none}
  .grid-3,.etapes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .grid-3,.grid-2,.etapes{grid-template-columns:1fr}
  .nav-links{gap:var(--stack-3)}
  .nav-links a{font-size:1rem}
  .marquee .ph{width:132px;height:62px}
  .cta-final .ph{height:220px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .situ{opacity:1;transform:none}
  .marquee-track{animation:none}
  .stats::after{animation:none;background-position:0 0}
  .bande-filet{animation:none}
  .cta-card{animation:none;background-size:100% 100%}
  .rail,.bulle{animation:none}
}
/* ---------- OVERRIDES DESIGN SYSTEM, largeur et pied de page ---------- */
@media (min-width:1100px){ :root{ --gutter:32px; } }
footer ul a:hover{color:var(--violet-light)}
.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;font-family:var(--display);font-weight:800;font-size:0.82rem;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.social:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
@media (max-width:980px){
}
@media (max-width:640px){
}
/* ---------- RÈGLES GLOBALES, rythme mobile et boutons ----------
   1. Un bouton ne prend jamais toute la largeur, sa taille suit son libellé.
   2. Hauteur tactile minimale de 48px.
   3. Sur mobile, le texte passe toujours avant le visuel.
   ---------------------------------------------------------------- */
.btn{width:auto;min-height:48px;justify-content:center}
@media (max-width:980px){
  .vcols{order:2}
  .cta-final .box{order:2}
}
@media (max-width:640px){
  .hero-copy{gap:24px}
  .sec-head{gap:16px}
  .cta-final{gap:32px}
}
@media (max-width:480px){
  .btn-lg{font-size:1rem;padding:.9em 1.6em}
  .nav .btn-sm{min-height:40px}
}
/* =================================================================
   SYSTÈME TYPOGRAPHIQUE ET RYTHME, source : src/styles/tokens.css
   Josefin Sans a des traits fins : graisse 500, jamais 300,
   et aucun texte lu sous 16px.
   ================================================================= */
:root{

  /* Échelle d'espacement, multiples de 8 */
--stack-2:16px; --stack-3:24px; 
  /* Rythme interne d'un bloc de texte */
}
body{
  font-size:var(--fs-base);
  font-weight:var(--fw-text);
  line-height:var(--lh-base);
  text-rendering:optimizeLegibility;
}
.lead{font-size:var(--fs-lead);font-weight:var(--fw-text)}
/* Surtitre : un libellé, jamais un pavé qui ressemble à un bouton */
.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,.foot-cta .eyebrow,.cta-txt .eyebrow{background:none;color:var(--violet-light)}
/* Rythme des blocs de texte, identique partout */
.hero-copy,.sec-head,.cta-txt,.foot-txt{gap:0}
.hero-copy>*+*,.sec-head>*+*,.cta-txt>*+*,.foot-txt>*+*{margin-top:var(--flow-base)}
.hero-copy .eyebrow+h1,
.sec-head .eyebrow+h2,
.cta-txt .eyebrow+h2,
.foot-txt .eyebrow+h2,
.hero-copy>.btn,
.cta-txt>.btn,.foot-txt>.btn{margin-top:var(--flow-cta)}
.hero-copy>.lead+.hero-cta{margin-top:var(--flow-cta)}
.hero-copy>.hero-cta+.preuve{margin-top:clamp(20px,2.2vw,28px)}
.cta-txt .btn+.reassurance,.cta-txt .reassurance+.sig,.foot-txt .btn+.sig{margin-top:var(--stack-2)}
/* ---------------- MOBILE : on respire davantage ---------------- */
@media (max-width:640px){
  :root{
    --flow-tight:16px;
    --flow-base:28px;     /* titre et sous-titre nettement séparés */
    --flow-cta:36px;
    --hero-y:44px; --hero-y-end:40px;
    --section-y:64px; --section-y-sm:44px;
    --head-gap:32px; --grid-gap:20px;
  }
  .sec-head{margin-bottom:var(--head-gap)}
}
@media (max-width:480px){
  :root{--flow-base:26px;--flow-cta:34px}
}
/* =================================================================
   RÈGLES D'INTERACTION GLOBALES
   1. Lien de navigation : le trait se trace de la gauche vers la droite.
   2. Bouton principal du fold : halo tournant après 20 s sans défilement.
   ================================================================= */
.nav-links>a,.nav-trigger{position:relative;border-bottom:0;padding-bottom:5px}
.nav-links>a::after,.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-links>a:hover::after,.nav-links>a:focus-visible::after,
.nav-trigger:hover::after,.nav-trigger:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.nav-links>a[aria-current]::after,
.nav-item.open .nav-trigger::after{transform:scaleX(1);transform-origin:left center}
.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;
}
.hero-copy>.halo-wrap{margin-top:var(--flow-cta)}
.hero-cta>.halo-wrap{margin-top:0}
/* =================================================================
   MENU BURGER, tablette et mobile (<= 980px)
   Barre : logo à gauche, puis bouton d'action, puis burger.
   Le panneau entre par la gauche, l'arrière-plan passe en flou.
   ================================================================= */
.nav-cta{display:flex;justify-content:flex-end;align-items:center;gap:var(--stack-2)}
.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;left:0;bottom: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;transition:transform var(--t-fast),opacity var(--t-fast)}
.drawer-nav a:hover{color:var(--violet-light)}
.drawer-nav a:hover svg{transform:translateX(4px);opacity:1}
.drawer-nav a[aria-current]{color:var(--violet-light)}
.drawer-foot{margin-top:auto;padding:24px 22px 0}
.drawer-foot::before{content:"";display:block;height:1px;background:rgba(255,255,255,.14);margin-bottom:24px}
/* Exception assumée à la règle "jamais de bouton pleine largeur" :
   dans le tiroir, le bouton est la seule action, il occupe la largeur. */
.drawer-foot .btn{width:100%}
.drawer-foot .note{
  margin-top:14px;text-align:center;font-size:1rem;color:var(--on-navy-25);font-weight:var(--fw-text);
}
@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}
}
@media (min-width:981px){
  .drawer,.scrim{display:none}
}
@media (max-width:420px){
  .nav .btn-sm{padding:.55em .95em}
  .drawer{width:min(90vw,340px)}
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .scrim{transition:none}
}
/* ---------- Tiroir : corrections ---------- */
/* Entrée par la droite */
.drawer{left:auto;right:0;transform:translateX(100%);box-shadow:0 0 50px rgba(0,0,0,.4)}
.drawer.open{transform:translateX(0)}
/* Le bouton d'action remonte sous les liens, il n'est plus collé en bas */
.drawer-foot{margin-top:0;padding-top:26px}
.drawer-foot::before{margin-bottom:26px}
/* Au survol, le bouton ne doit jamais se confondre avec le fond du tiroir */
.drawer .btn-primary:hover,
.drawer .btn-primary:focus-visible{background:var(--violet-light);color:var(--navy)}
/* Groupe dépliable, mêmes propositions qu'en desktop */
.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}
.dtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dtxt strong{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;color:#fff}
.dtxt small{font-size:1rem;line-height:1.4;color:var(--on-navy-70);font-weight:var(--fw-text)}
.dsub:hover .dtxt strong{color:var(--violet-light)}
/* ---------- Tiroir : corrections de survol et de hiérarchie ---------- */
/* La flèche n'avance que sur les liens de premier niveau.
   Les pictogrammes des expertises ne bougent jamais. */
.drawer-nav a svg{transform:none}
.drawer-nav>a svg{transition:transform var(--t-fast),opacity var(--t-fast)}
.drawer-nav>a:hover svg{transform:translateX(4px);opacity:1}
.dsub svg,.dsub:hover svg{transform:none!important}
.dico,.dsub:hover .dico{transform:none}
/* Titre et sous-titre d'une expertise : quatre écarts cumulés,
   famille, graisse, taille et couleur. */
.dtxt{gap:4px}
.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);letter-spacing:0;
}
.dsub:hover .dtxt small{color:var(--on-navy-70)}
/* =================================================================
   CENTRAGE OPTIQUE DES PASTILLES RONDES
   Un texte centré dans un rond est centré sur sa boîte de ligne,
   qui réserve de la place sous la ligne de base pour les jambages.
   Un sigle en capitales se retrouve donc décalé, et un accent comme
   le tréma de Ü aggrave le décalage. La valeur exacte dépend des
   métriques de la police : elle est mesurée au rendu par le script
   en bas de page, jamais estimée.
   ================================================================= */
.logo,.cas-logo,.dh-mark .inner,.dh-bar .mk-sm,.side-id .mk,.autre .mk,.social{
  display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;
}
.logo>*,.cas-logo>*,.dh-mark .inner>*,.dh-bar .mk-sm>*,.side-id .mk>*,.autre .mk>*{
  display:block;line-height:1;max-width:100%;max-height:100%;
}
.logo img,.cas-logo img,.dh-mark .inner img,.side-id .mk img,.autre .mk img{
  object-fit:contain;
}
/* Décalage mesuré, posé par le script. Zéro tant qu'il n'a pas tourné. */