/* Feuille propre à la page qui-suis-je, reprise de la maquette dans l'ordre d'origine. */
:root{
--navy-50:#87969F;
--violet-10:#F6F3FF;
  /* Bleu de la charte, déclinaison foncée pour un fond de section. */
  --bleu-fond-1:#0A4269; --bleu-fond-2:#126289;
  /* 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;
  --head-gap:clamp(28px,3.5vw,48px);
--stack-2:14px; --stack-3:22px;     --pad-card:clamp(24px,2.6vw,34px);
}
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}
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(2rem,4.3vw,3.05rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);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{background:var(--violet)}
.lead{font-size:1.05rem;color:var(--navy-70);max-width:62ch;font-weight:var(--fw-text)}
/* RÈGLE DE CHARTE, TEXTE SUR FOND DE COULEUR
   Toute section posée sur un fond sombre ou coloré redéfinit ses couleurs de
   texte. Rien n'hérite de --navy-70, qui est prévu pour du texte sur blanc et
   tombe à 1,89:1 sur le navy. Valeurs mesurées sur le fond le plus clair de
   chaque section, minimum AA. */
.dark,.foot-cta,.section-bleu{color:#fff}
.dark h2,.dark h3,.dark h4,
.foot-cta h2,.foot-cta h3,.foot-cta h4,
.section-bleu h2,.section-bleu h3,.section-bleu h4{color:#fff}
.dark .lead,.foot-cta .lead{color:#D7E2EC}
/* 10,61:1 sur navy */
.dark .sig,.foot-cta .sig,.foot-txt .sig{color:#A8B8C7}
/* 6,87:1 sur navy */
/* Le bleu est plus clair que le navy : son texte secondaire est plus clair
   aussi, et tient même sur une carte blanche translucide posée dessus. */
.section-bleu p,.section-bleu li,.section-bleu .sig{color:#E6F2FA}
/* 5,89:1 sur le bleu, 4,68:1 sur carte */
.section-bleu .avis-main p,.section-bleu .avis-main li{color:var(--navy-70)}
.btn{display:inline-flex;align-items:center;gap:.5em;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);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-lg{padding:1em 2em;font-size:1.02rem}
.ph{background:var(--ph);border:1px dashed var(--ph-line);border-radius:var(--r-sm);display:grid;place-items:center;text-align:center;color:var(--ph-text);font-size:0.78rem;letter-spacing:.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}
/* ---------- 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}
/* Marque Pierre Bochet. La version bleue s'utilise sur fond clair,
   c'est elle qui sert partout sauf dans le pied de page. */
.nav-links>a{text-decoration:none;font-weight:600;font-size:1rem;border-bottom:2px solid transparent;padding-bottom:2px}
.nav-links>a:hover,.nav-links>a[aria-current]{border-bottom-color:var(--violet)}
.nav-cta{display:flex;justify-content:flex-end}
/* ---------- HERO, floraison ---------- */
.hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.hero h1 .hl{color:var(--violet)}
.hero-photo{position:relative;display:flex;align-items:center;justify-content:center}
.bloom{position:absolute;inset:6% 4% 4% -10%;background:var(--violet-light);border-radius:56% 44% 48% 52% / 44% 52% 48% 56%;animation:bloom 22s ease-in-out infinite}
.bloom.b2{inset:12% -4% 10% 2%;background:var(--violet);opacity:.22;animation:bloom2 28s ease-in-out infinite}
@keyframes bloom{
  0%{transform:scale(.97) rotate(0deg);border-radius:56% 44% 48% 52% / 44% 52% 48% 56%}
  33%{transform:scale(1.015) rotate(2.5deg);border-radius:46% 54% 56% 44% / 54% 46% 54% 46%}
  66%{transform:scale(1) rotate(-2deg);border-radius:52% 48% 44% 56% / 48% 56% 44% 52%}
  100%{transform:scale(.97) rotate(0deg);border-radius:56% 44% 48% 52% / 44% 52% 48% 56%}
}
@keyframes bloom2{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.05) rotate(-4deg)}100%{transform:scale(1) rotate(0deg)}}
.hero-photo .ph{position:absolute;inset:0 0 8% 6%;height:auto;border-radius:var(--r-lg)}
/* Badge du fold : le visuel porte sa propre forme et sa transparence.
   L'ombre portée suit le découpage, pas une boîte rectangulaire. */
.hero-badge{position:relative;z-index:1;display:block;width:100%;max-width:400px;height:auto;
  filter:drop-shadow(0 24px 46px rgba(14,46,73,.20)) drop-shadow(0 5px 12px rgba(14,46,73,.09));
  animation:pendule 9s ease-in-out infinite;transform-origin:50% 0%}
@keyframes pendule{
  0%,100%{transform:translateY(0) rotate(-1.1deg)}
  50%{transform:translateY(-9px) rotate(.7deg)}
}
/* ---------- CHIFFRES ---------- */
/* Chiffres dans le fold, en petit, entre le texte et les boutons.
   Chaque chiffre est posé sur un filet vertical, comme un repère de marge. */
.kpis{display:flex;flex-wrap:wrap;gap:clamp(20px,2.8vw,40px)}
.kpi{display:flex;flex-direction:column;gap:3px;padding-left:14px;
  border-left:2px solid var(--violet-light)}
.kpi .v{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.2vw,1.85rem);
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.kpi .k{font-size:0.95rem;color:var(--navy-70);font-weight:var(--fw-text);line-height:1.35}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--stack-2)}
/* Le glyphe LinkedIn prend la couleur du bouton, donc il bascule avec lui
   au survol. Taille calée sur la hauteur de x du libellé, pas plus. */
/* Dans le bouton, le logo est la version monochrome, tracé repris du fichier
   officiel sans sa plaque bleue. LinkedIn autorise cette déclinaison. En
   currentColor il prend la couleur du bouton secondaire, navy au repos,
   blanc au survol, sans valeur en dur. */
.ico-li{width:25px;height:25px;flex:none;display:block}
/* ---------- BASES ---------- */
.sec-head{display:flex;flex-direction:column;gap:var(--stack-2);align-items:flex-start;margin-bottom:var(--head-gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
/* ---------- MES DEUX CASQUETTES ----------
   Deux cartes côte à côte en desktop, l'une claire, l'autre sombre, posées
   sur le navy. L'angle supérieur gauche est coupé en biais : c'est le signe
   « / » de la charte, repris en découpe de carte. */
.casquettes{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);align-items:stretch}
.casq{position:relative;display:flex;flex-direction:column;gap:var(--stack-2);
  padding:clamp(22px,2.4vw,32px);border-radius:var(--r-md);
  clip-path:polygon(38px 0, 100% 0, 100% 100%, 0 100%, 0 38px)}
.casq-clair{background:var(--paper);color:var(--navy)}
.casq-fonce{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.casq-tete{display:flex;align-items:center;gap:14px}
.casq-num{flex:none;font-family:var(--mono);font-weight:700;font-size:0.9rem;
  letter-spacing:.06em;padding:.42em .78em;border-radius:var(--r-pill);
  border:1px dashed var(--line);color:var(--violet-ink)}
.casq-fonce .casq-num{border-color:rgba(255,255,255,.34);color:#C0A6FF}
.casq-fil{flex:1;height:1px;background-image:linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
  background-size:12px 1px;background-repeat:repeat-x}
.casq-fonce .casq-fil{background-image:linear-gradient(90deg,rgba(255,255,255,.34) 0 6px,transparent 6px 12px)}
.casq-go{flex:none;width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--violet);color:#fff;text-decoration:none;
  transition:transform .22s cubic-bezier(.3,1.3,.5,1),background .22s ease}
.casq-go svg{width:19px;height:19px}
.casq-go:hover{transform:translate(2px,-2px) rotate(8deg);background:var(--violet-ink)}
.casq-badge{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:0.74rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--r-xs);
  background:var(--violet-20);color:var(--violet-ink)}
.casq-fonce .casq-badge{background:rgba(192,166,255,.18);color:#DCCFFF} /* 5,59:1 sur son fond ; #C0A6FF mesurait 3,93:1 */
/* La carte claire est posée sur une section sombre : son titre doit
   reprendre la couleur du texte sur fond blanc, sinon il hérite du blanc
   de la section et disparaît. */
.casq h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.18}
.casq-clair h3{color:var(--navy)}
.casq-fonce h3{color:#fff}
.casq>p{font-weight:var(--fw-text);font-size:1rem;line-height:1.55;color:var(--navy-70)}
.casq-fonce>p{color:#D7E2EC}
.casq-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.casq-tags li{font-size:0.92rem;font-weight:var(--fw-text);line-height:1;
  padding:.56em .9em;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--navy-70)}
.casq-fonce .casq-tags li{border-color:rgba(255,255,255,.26);color:#E3EAF2}
.casq-lien{margin-top:auto;padding-top:var(--stack-2);display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;
  color:var(--violet-ink)}
.casq-fonce .casq-lien{color:#C0A6FF}
.casq-lien .casq-fl{transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.casq-lien:hover .casq-fl,.casq-lien:focus-visible .casq-fl{transform:translateX(5px)}
/* Soulignement qui se deroule au survol, en plus du glissement de la
   fleche. Il est trace par un degre de fond sur le seul libelle et non par
   text-decoration : une decoration porte sur tout le lien, fleche comprise,
   et sa taille ne s'anime pas. La couleur est currentColor, donc le
   soulignement herite du contraste deja mesure du texte, sur la carte
   claire comme sur la carte sombre. */
.casq-txt{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .24s ease}
.casq-lien:hover .casq-txt,.casq-lien:focus-visible .casq-txt{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){
  .casq-lien .casq-fl,.casq-txt{transition:none}
}
/* ---------- PARCOURS, mosaïque ----------
   Grille de 12 colonnes, cartes de largeurs et de hauteurs inégales, deux
   décalages verticaux : le rythme régulier du reste de la page est rompu
   volontairement sur ce seul bloc. Les millésimes sont en lettrage évidé,
   la couleur pleine est le violet de la charte, jamais le navy du bloc CTA. */
.parcours{background:var(--paper)}
/* Les cartes entrent par un décalage latéral de 26 px. Pendant l'animation
   elles dépassent la grille, d'où le clip : il coupe le débordement sans
   créer de contexte de défilement. */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;overflow-x:clip;
  column-gap:clamp(14px,1.6vw,22px);row-gap:clamp(16px,1.8vw,26px)}
.mo-head{grid-column:7 / 13;grid-row:1;align-self:start;padding-top:clamp(4px,1vw,14px)}
.mo{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(16px,2.2vw,30px);overflow:hidden;border-radius:var(--r-md);
  padding:clamp(18px,1.9vw,26px);
  background:var(--paper);border:1px solid var(--line)}
.m1{grid-column:1 / 6;  grid-row:1}
.m2{grid-column:2 / 7;  grid-row:2}
.m3{grid-column:7 / 13; grid-row:2; margin-top:clamp(18px,2.4vw,38px)}
.m4{grid-column:1 / 7;  grid-row:3}
.m5{grid-column:8 / 13; grid-row:3; margin-top:clamp(22px,3vw,48px)}
.m6{grid-column:3 / 11; grid-row:4}
/* Millésime évidé, aligné à droite comme sur la référence. */
.mo-an{display:block;text-align:right;font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,5.8vw,5.1rem);line-height:.9;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:transparent;
  -webkit-text-stroke:1.4px var(--violet-light);
  text-stroke:1.4px var(--violet-light);
  user-select:none}
.mo-an i{display:block;font-style:normal;font-size:.26em;letter-spacing:.14em;
  margin-top:.5em;color:var(--violet-ink);-webkit-text-stroke:0;text-stroke:0}
/* Repli si le lettrage évidé n'est pas pris en charge. */
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .mo-an{color:var(--violet-20)}
  .plein .mo-an{color:rgba(255,255,255,.34)}
}
.mo-txt h3{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.25;margin-bottom:6px}
.mo-txt p{color:var(--navy-70);font-weight:var(--fw-text);font-size:1rem;line-height:1.5}
/* Cartes pleines : violet de la charte, mesuré à 6,98:1 pour le texte blanc. */
.plein{background:linear-gradient(150deg,#5438DF 0%,var(--violet) 62%,#4E33D6 100%);border-color:transparent}
.plein .mo-an{-webkit-text-stroke-color:rgba(255,255,255,.78);text-stroke:1.4px rgba(255,255,255,.78)}
.plein .mo-an i{color:#fff}
.plein .mo-txt h3{color:#fff}
/* Blanc pur : au point le plus clair du dégradé violet, toute teinte plus
   douce tombe sous 4,5:1. Même règle que la bande de chiffres. */
.plein .mo-txt p{color:#fff}
/* ---------- APPARITION ----------
   Chaque élément a son propre mouvement, pas un fondu unique.
   Les cartes de gauche entrent par la gauche, celles de droite par la
   droite, la carte finale monte droit : le mouvement raconte la grille. */
.m1,.m2,.m4{--dx:-26px}
.m3,.m5{--dx:26px}
.m6{--dx:0px}
.mosaic.anime .mo{opacity:0;
  transform:translate3d(var(--dx,0),34px,0) scale(.982);
  transition:opacity .66s cubic-bezier(.22,.9,.26,1),transform .72s cubic-bezier(.22,.9,.26,1);
  transition-delay:var(--delai,0ms)}
.mosaic.anime .mo.in{opacity:1;transform:none}
/* Les cartes pleines arrivent un peu plus franchement, elles portent
   les deux moments où quelque chose se lance. */
.mosaic.anime .plein{transform:translate3d(var(--dx,0),38px,0) scale(.962)}
.mosaic.anime .plein.in{transform:none}
/* Le millésime se dévoile par le bas, comme un volet qui s'ouvre. */
.mosaic.anime .mo .mo-an{clip-path:inset(0 0 102% 0);transform:translate3d(0,6px,0);
  transition:clip-path .72s cubic-bezier(.3,.9,.25,1),transform .72s cubic-bezier(.3,.9,.25,1);
  transition-delay:calc(var(--delai,0ms) + 150ms)}
.mosaic.anime .mo.in .mo-an{clip-path:inset(0 0 -2% 0);transform:none}
/* Le suffixe de période arrive après le millésime. */
.mosaic.anime .mo .mo-an i{opacity:0;transition:opacity .4s ease;
  transition-delay:calc(var(--delai,0ms) + 600ms)}
.mosaic.anime .mo.in .mo-an i{opacity:1}
/* Titre puis texte, chacun son temps. */
.mosaic.anime .mo .mo-txt h3{opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .46s ease,transform .46s cubic-bezier(.22,.9,.26,1);
  transition-delay:calc(var(--delai,0ms) + 300ms)}
.mosaic.anime .mo .mo-txt p{opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .46s ease,transform .46s cubic-bezier(.22,.9,.26,1);
  transition-delay:calc(var(--delai,0ms) + 400ms)}
.mosaic.anime .mo.in .mo-txt h3,
.mosaic.anime .mo.in .mo-txt p{opacity:1;transform:none}
/* Le titre du bloc se monte en trois temps : filet, titre, chapô.
   Il passe avant la carte 2016 pour capter l'œil en premier. */
.mosaic.anime .mo-head>*{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.26,1)}
.mosaic.anime .mo-head>*:nth-child(1){transition-delay:0ms}
.mosaic.anime .mo-head>*:nth-child(2){transition-delay:110ms}
.mosaic.anime .mo-head>*:nth-child(3){transition-delay:220ms}
.mosaic.anime .mo-head.in>*{opacity:1;transform:none}
/* ---------- TERRAINS ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:var(--stack-2);width:max-content;animation:slideX 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(calc(-50% - (var(--stack-2) / 2)))}}
.terrain{position:relative;width:clamp(230px,26vw,300px);aspect-ratio:4/3;flex:none;border-radius:var(--r-md);overflow:hidden}
.terrain .ph{width:100%;height:100%;border-radius:0}
.terrain-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
/* Voile sombre en bas de la vignette : garantit le contraste de la pastille
   quelle que soit la photo, mesuré au-dessus de 4,5:1. */
.terrain::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,46,73,.30) 0%,rgba(14,46,73,0) 42%)}
.terrain .chip{position:absolute;z-index:1;top:12px;left:12px;background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:0.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.45em .8em;border-radius:var(--r-xs)}
.terrain:nth-child(even) .chip{background:var(--violet)}
/* ---------- FAÇON DE TRAVAILLER ---------- */
/* Quatre principes en grille : plus rapide à balayer qu'une liste empilée,
   et chaque carte tient en une seule phrase. */
/* ---------- TUNNEL, MA FAÇON DE TRAVAILLER ----------
   Cinq paliers empilés qui se resserrent, le dernier étant l'appel à
   l'action. La forme porte le sens : on part large, on se resserre, on
   aboutit à une seule décision. Chaque palier est détouré en trapèze par
   clip-path, et la pente d'un palier est reprise exactement par le suivant,
   ce qui donne une arête continue. Une seule variable règle la pente, donc
   l'adaptation mobile tient en une ligne. */
/* L'en-tête se centre pour s'aligner sur l'axe du tunnel. C'est le seul
   bloc de la page dont le contenu est symétrique, le titre le suit. */
.sec-head-centre{align-items:center;text-align:center}
.tunnel{--p:5.4%;display:flex;flex-direction:column;gap:6px}
.tn{
  --t:calc(var(--i) * var(--p));
  --b:calc((var(--i) + 1) * var(--p));
  clip-path:polygon(var(--t) 0, calc(100% - var(--t)) 0,
                    calc(100% - var(--b)) 100%, var(--b) 100%);
  /* La marge intérieure suit la pente, sinon le texte touche le biseau. */
  padding-block:clamp(22px,2.4vw,30px);
  padding-inline:calc(var(--b) + clamp(20px,2.6vw,36px));
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
/* Rampe neutre vers violet, quatre paliers. Texte navy sur les quatre. */
.tn-1{background:#F2F5FA}
.tn-2{background:#E7F1FB}
.tn-3{background:#E9EAFD}
.tn-4{background:var(--violet-20)}
.tn-n{font-family:var(--mono);font-weight:700;font-size:0.8rem;letter-spacing:.14em;
  color:var(--violet-ink);line-height:1}
.tn strong{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.5vw,1.25rem);
  color:var(--navy);line-height:1.25}
.tn p{color:var(--navy-70);font-weight:var(--fw-text);font-size:1rem;line-height:1.5;
  max-width:54ch;margin:0}
/* Dernier palier : le seul bloc saturé de la section, donc le seul point
   de clic possible à l'oeil. Il reste un trapèze, pas un bouton posé dedans. */
.tn-cta{flex-direction:row;justify-content:center;gap:12px;text-decoration:none;
  background:linear-gradient(150deg,#5438DF 0%,var(--violet) 58%,#4E33D6 100%);
  color:#fff;font-family:var(--display);font-weight:800;
  font-size:clamp(1.02rem,1.4vw,1.18rem);
  padding-block:clamp(20px,2.2vw,28px);
  /* Marge intérieure resserrée : le contenu tient sur une ligne, il n'a
     besoin que de dégager le biseau. Sinon le libellé passe à la ligne
     sous 400 px et l'ensemble perd sa lisibilité de bouton. */
  padding-inline:calc(var(--b) + 12px);
  transition:filter .16s ease,gap .16s ease}
/* Le libellé ne se laisse pas comprimer par le flex : un appel à l'action
   sur deux lignes avec la flèche à côté ne se lit plus comme un bouton. */
.tn-cta-txt{white-space:nowrap}
.tn-cta svg{width:21px;height:21px;flex:none;display:block}
.tn-cta:hover{filter:brightness(1.1);gap:18px}
.tn-cta:focus-visible{outline:3px solid var(--sky);outline-offset:-6px}
/* ---------- PARTENAIRES ---------- */
.part-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,60px);align-items:center}
.part-txt{display:flex;flex-direction:column;gap:var(--stack-4)}
/* Collectifs sous le texte : logos en rond, un par un, on les présente.
   Ils ne sont plus en carte, pour laisser le focus sur le bloc de droite. */
.collectifs{display:flex;flex-direction:column;gap:var(--stack-2);
  padding-top:var(--stack-3);border-top:1px solid var(--line)}
.col-lab{font-family:var(--display);font-weight:700;font-size:0.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-ink)}
.col-liste{display:flex;gap:clamp(22px,3vw,38px);flex-wrap:wrap}
.col-item{display:flex;align-items:center;gap:12px}
.col-logo{display:block;width:60px;height:60px;border-radius:var(--r-pill);object-fit:cover;
  border:1px solid var(--line);background:var(--paper);flex:none;
  box-shadow:0 6px 18px rgba(14,46,73,.10)}
.col-nom{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy)}
/* Bloc partenaires, seul en colonne de droite : c'est lui qui porte le focus. */
.part-reseau{position:relative;display:flex;flex-direction:column;gap:var(--stack-2);
  padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#F7F5FF,#EFF1FA);border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(14,46,73,.09)}
/* Le chiffre passe dans la police de texte, pas celle des titres : il tranche
   avec le reste du bloc. Le contraste de couleur entre le chiffre et le
   libellé est conservé. */
.part-reseau .big{font-family:var(--body);font-weight:700;font-size:clamp(2.8rem,4vw,3.5rem);
  line-height:.92;color:var(--violet);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.part-reseau .name{font-family:var(--display);font-weight:700;
  font-size:clamp(1.18rem,1.7vw,1.42rem);line-height:1.2;color:var(--navy)}
.pr-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bulles{position:relative;height:clamp(240px,28vw,310px);margin-top:4px}
.bulle{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;
  padding:.46em .92em;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:0.82rem;letter-spacing:.02em;
  background:var(--paper);border:1px solid #D4CBFB;color:var(--violet-ink);
  box-shadow:0 6px 16px rgba(14,46,73,.07);will-change:transform}
.bulle:nth-child(2n){border-color:#AEDCF7;color:#1C6A94}
.bulle:nth-child(3n){border-color:#CBBDFB;color:var(--violet-ink)}
/* ---------- AVIS ---------- */
/* Section avis sur fond bleu de la charte. Tous les contrastes ont été
   mesurés sur la teinte la plus claire du dégradé, #126289. */
.section-bleu{background:linear-gradient(152deg,var(--bleu-fond-1) 0%,var(--bleu-fond-2) 100%);color:#fff}
.section-bleu h2{color:#fff}
.section-bleu .eyebrow{color:#9FDCFF}
.section-bleu .lead{color:#D7EAF6}
.section-bleu .todo{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.34)}
.avis{display:grid;grid-template-columns:.85fr 1.3fr .85fr;gap:var(--grid-gap);align-items:center}
.avis-mini{display:flex;flex-direction:column;gap:var(--stack-2);padding:var(--pad-card);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-lg)}
.avis-mini p{font-size:1rem;color:#fff;font-weight:var(--fw-text)}
.avis-mini .avis-who strong{color:#fff}
.avis-mini .avis-who span{color:#E6F2FA}
.avis-mini .avis-who .ph{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.avis-who{display:flex;gap:var(--stack-1);align-items:center;font-size:1rem}
.avis-who .ph{width:34px;height:34px;border-radius:var(--r-pill);font-size:0;padding:0;flex:none}
.avis-face{width:40px;height:40px;border-radius:var(--r-pill);object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.7)}
.avis-main .avis-face{border-color:var(--line)}
.avis-who strong{font-family:var(--display);font-weight:700;display:block;line-height:1.2}
.avis-who span{color:var(--navy-50)}
/* Carte principale en blanc : c'est elle qui ressort sur le fond bleu. */
.avis-main{display:flex;flex-direction:column;gap:var(--stack-3);padding:clamp(28px,3vw,40px);
  background:var(--paper);color:var(--navy);border-radius:var(--r-lg);
  box-shadow:0 22px 48px rgba(6,38,62,.26)}
.avis-main blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.8vw,1.35rem);line-height:1.35;color:var(--navy)}
.avis-main .rate{color:var(--navy)}
.avis-main .avis-who{color:var(--navy-70)}
.avis-main .avis-who strong{color:var(--navy)}
.avis-main .avis-who span{color:var(--navy-70)}
.rate{display:flex;align-items:center;gap:var(--stack-1);font-size:1rem;font-weight:600}
.stars{display:inline-flex;gap:2px;align-items:center}
.stars svg{width:16px;height:16px;display:block}
/* Dégradé violet plein : le sky d'origine se confondait avec le fond bleu. */
.avis-stat{display:flex;flex-direction:column;gap:var(--stack-1);padding:var(--pad-card);border-radius:var(--r-lg);color:#fff;background:linear-gradient(150deg,#5438DF 0%,var(--violet) 58%,#4E33D6 100%)}
/* Le G de Google est posé sur une pastille blanche : la charte Google demande
   un fond clair, et le dégradé violet de la carte ne le permet pas.
   Alt vide, le mot Google est déjà écrit dans la ligne juste en dessous. */
.avis-logo{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:14px;background:var(--paper);flex:none;margin-bottom:2px}
.avis-logo img{display:block;width:26px;height:26px}
.avis-stat .big{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1}
/* La barre reprend le signe de la charte. Allégée en graisse et en taille
   pour que les deux chiffres restent les éléments lus, mais en blanc plein :
   aucune opacité sur un texte posé sur le violet. */
.big-sur{font-weight:400;font-size:.72em;margin-inline:.04em;vertical-align:.04em}
.avis-stat .sub{font-size:1rem;color:#fff;font-weight:var(--fw-text)}
.avis-stat .ph{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:#fff;font-size:0;padding:0;margin-bottom:var(--stack-1)}
/* ---------- AU-DELÀ DU TRAVAIL ---------- */
.perso{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5.5vw,80px);align-items:center}
.vcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack-2);height:clamp(380px,48vw,470px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.vcol{overflow:hidden}
.vtrack{display:flex;flex-direction:column;gap:var(--stack-2)}
.vtrack.up{animation:slideUp 34s linear infinite}
.vtrack.down{animation:slideDown 40s linear infinite}
@keyframes slideUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - (var(--stack-2) / 2)))}}
@keyframes slideDown{from{transform:translateY(calc(-50% - (var(--stack-2) / 2)))}to{transform:translateY(0)}}
/* Pause au survol. La règle CSS seule ne suffit pas partout : un élément
   portant un mask-image ne reçoit pas toujours le survol selon le moteur.
   Elle est donc doublée par un pilotage au pointeur, piloté depuis le
   parent non masqué, qui écrit animation-play-state en ligne. */
.vcols:hover .vtrack{animation-play-state:paused}
.hobby{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;flex:none}
.hobby .ph{width:100%;height:100%;border-radius:0}
.hobby-img{display:block;width:100%;height:100%;object-fit:cover}
/* Voile bas : assure le détachement de l'étiquette sur une photo claire. */
.hobby::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,46,73,.34) 0%,rgba(14,46,73,0) 38%)}
.hobby span{position:absolute;z-index:1;left:10px;bottom:10px;background:rgba(14,46,73,.88);color:#fff;font-family:var(--display);font-weight:700;font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;padding:.35em .7em;border-radius:var(--r-xs)}
/* Colonne de droite : deux listes, davantage d'air entre elles et entre
   les lignes. Les livres portent un picto de livre, le reste une puce. */
.perso-txt{display:flex;flex-direction:column;gap:clamp(34px,4vw,52px)}
.liste h4{font-family:var(--display);font-weight:700;font-size:0.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-ink);margin:0 0 var(--stack-3);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.liste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--stack-3)}
.liste li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.55;
  font-weight:var(--fw-text);color:var(--navy-70)}
.liste li::before{content:"";flex:none;width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--violet-light);margin-top:.62em}
.liste li b{font-weight:600;color:var(--navy);display:block;margin-bottom:2px}
/* Livres : picto vectoriel, tracé au trait, couleur héritée du texte. */
.livres li::before{content:none}
.ico-livre{flex:none;width:25px;height:28px;margin-top:.1em;color:var(--violet-ink);
  overflow:visible}
.livres li .tit{font-weight:600;color:var(--navy);display:block;margin-bottom:2px}
/* ---------- FAQ ---------- */
.faq{max-width:860px}
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.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:var(--stack-3);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-body{padding-bottom:var(--stack-3);display:flex;flex-direction:column;gap:var(--stack-3)}
.acc-body p{color:var(--navy-70);font-weight:var(--fw-text);max-width:66ch}
.ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--stack-3)}
.ctx div{padding-top:var(--stack-1);border-top:3px solid var(--violet)}
.ctx div:nth-child(2){border-top-color:var(--violet-light)}
.ctx div:nth-child(3){border-top-color:var(--sky)}
.ctx strong{display:block;font-family:var(--display);font-weight:700;font-size:1rem;margin-block:6px 3px}
.ctx span{font-size:0.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink);font-weight:700;font-family:var(--display)}
.ctx p{font-size:1rem}
.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--stack-3)}
.outil-cat h5{font-family:var(--display);font-weight:700;font-size:0.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink);margin:0 0 var(--stack-1)}
.outil-cat ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.outil-cat li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:.28em .8em;font-size:1rem;font-weight:500;color:var(--navy-70)}
/* ---------- FOOTER CTA ---------- */
/* Les cercles concentriques débordent volontairement de la photo. Sur mobile
   le plus large sortait de 16 px à droite et rendait la page défilable
   horizontalement. "clip" coupe au bord de la section sans créer de contexte
   de défilement, donc l'en-tête collant n'est pas affecté. */
.foot-cta{background:var(--navy);color:#fff;padding-block:var(--section-y);overflow-x:clip}
.foot-cta-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center}
/* Trois cercles concentriques en bordure seule : la photo passe devant,
   le décor ne lui vole pas la vedette. */
/* width:100% est indispensable : le seul enfant est une image en position
   absolue, donc sans elle le bloc n'a aucune largeur propre et disparaît dès
   que la grille le centre, c'est-à-dire sur mobile. */
/* Le bloc mesure exactement l'emprise du plus grand anneau, et non celle de
   la photo. Avant, les anneaux débordaient de leur boîte et se faisaient
   couper à plat sur les écrans intermédiaires. Tout est désormais contenu,
   donc la grille gère seule le placement à toutes les largeurs. */
.foot-photo{position:relative;aspect-ratio:1/1;width:100%;max-width:440px;
  display:grid;place-items:center}
/* Trois anneaux de 1,5 px, mêmes diamètres qu'avant, toujours vides : le
   navy de la section reste visible à l'intérieur. Le dégradé est dans le
   TRAIT, pas dans le disque. Technique : le dégradé conique remplit l'élément,
   puis un masque radial ne garde que la couronne de 1,5 px au bord. Une
   bordure CSS ne sait pas porter de dégradé, d'où le masque.
   L'angle est une propriété enregistrée, sinon il n'est pas interpolable
   et l'animation saute d'un coup au lieu de tourner. */
@property --tour{syntax:"<angle>";initial-value:0deg;inherits:false}
.foot-photo .cercle{position:absolute;top:50%;left:50%;border-radius:var(--r-pill);
  transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from var(--tour),
    var(--violet-light) 0deg, var(--sky) 90deg, var(--violet) 180deg,
    var(--violet-light) 270deg, var(--violet-light) 360deg);
  -webkit-mask:radial-gradient(farthest-side,
    transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,
    transparent calc(100% - 1.5px), #000 calc(100% - 1.5px))}
/* Anneaux resserrés autour de la photo : elle occupe 75 % de la boîte au
   lieu de 66 %, pour une boîte plus petite. L'image gagne en présence
   pendant que le bloc raccourcit. */
.foot-photo .c1{width:100%;height:100%;opacity:.45;animation:tourne 26s linear infinite}
.foot-photo .c2{width:89%;height:89%;opacity:.7;animation:tourne 18s linear infinite reverse}
.foot-photo .c3{width:78%;height:78%;opacity:1;animation:tourne 22s linear infinite}
@keyframes tourne{to{--tour:360deg}}
/* Photo d'origine, inchangée, posée au centre. Ces trois valeurs calent son
   propre disque à l'intérieur du plus petit anneau, sans le toucher.
   Elles sont calculées sur la géométrie du fichier, disque de 1074 px de
   diamètre centré en (590, 778) dans une image de 1147 x 1372.
   Ne pas y toucher sans remesurer la photo. */
.foot-face{position:absolute;z-index:1;width:80.1%;left:8.8%;top:-4.33%;
  height:auto;display:block;pointer-events:none}
@keyframes souffle{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.045)}
}
.foot-photo .ph{position:relative;z-index:1;width:100%;height:100%;border-radius:var(--r-lg);
  background:var(--navy-soft);border-color:var(--navy-70);color:#9FB0C0}
.foot-txt{display:flex;flex-direction:column;gap:var(--stack-3);align-items:flex-start}
.foot-txt .sig{font-size:1rem;font-weight:var(--fw-text)}
/* Ligne de réassurance sous le bouton. Elle lève les trois objections de
   la prise de rendez-vous dans l'ordre où elles viennent : le temps que ça
   prend, ce que ça coûte, ce que ça engage. Petite, jamais au niveau du
   bouton, et couleur redéfinie parce qu'elle est posée sur le navy. */
.reassurance{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 16px;font-size:0.85rem;font-style:italic;
  font-weight:var(--fw-text);color:#C2CFDB}
.reassurance li{display:flex;align-items:center;gap:9px}
/* Un tiret et non un point : il reprend le signe de la charte, et il se lit
   comme une énumération discrète plutôt que comme une liste à puces. */
.reassurance li::before{content:"";width:12px;height:1.5px;flex:none;border-radius:1px;
  background:var(--violet-light)}
/* ---------- PIED DE PAGE ----------
   Bande bleue, plus saturée que le navy du bloc CTA juste au-dessus pour
   que les deux ne se confondent pas. La marque blanche n'existe que là. */
.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}
/* 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){
  .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}
  .hero-grid,.part-grid,.perso,.foot-cta-grid{grid-template-columns:1fr}
  /* Bloc de rendez-vous sur mobile : tout est centré, et la photo passe
     après le texte. Règle de la charte, le visuel est toujours le dernier
     élément d'un bloc empilé. Le bouton garde sa largeur propre. */
  .foot-cta-grid{justify-items:center;text-align:center}
  .foot-txt{align-items:center}
  .foot-photo{order:2;margin-inline:auto}
  .foot-txt .reassurance{justify-content:center}
  .hero-photo{max-width:320px;order:-1}
  .casquettes,.avis{grid-template-columns:1fr}
  /* Pente de moitié : en dessous, le libellé du bouton ne tiendrait plus
     dans la largeur du dernier palier. */
  .tunnel{--p:3%}
  /* La découpe en biais rétrécit sur petit écran, sinon elle mange le numéro. */
  .casq{clip-path:polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px)}
  /* Mosaïque : on retombe sur une colonne, titre en premier, décalages
     verticaux annulés. Le millésime reste à droite, plus petit. */
  .mosaic{grid-template-columns:1fr;row-gap:var(--stack-3)}
  .mo-head,.m1,.m2,.m3,.m4,.m5,.m6{grid-column:1 / -1;grid-row:auto;margin-top:0}
  .mo{gap:var(--stack-3)}
  .mo-an{font-size:clamp(2.6rem,11.5vw,3.6rem)}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .grid-3,.ctx,.outils{grid-template-columns:1fr}
  .kpis{gap:18px}
  .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}
  .tl{padding-left:32px}
  .tl-item::before{left:-32px}
  .vcols{height:340px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .marquee-track,.bloom,.vtrack,.foot-photo .cercle,.pied-filet{animation:none}
  .hero-badge{animation:none;transform:none}
}
/* ---------- OVERRIDES DESIGN SYSTEM, largeur et pied de page ---------- */
@media (min-width:1100px){ :root{ --gutter:32px; } }
.pied-grille{grid-template-columns:1.7fr 1fr 1fr}
.foot-brand{display:flex;flex-direction:column;gap:var(--stack-3);max-width:38ch}
.pied-col ul 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;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;
}
/* 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 badge remplit la pastille : pas de fond ni de bordure sous un logo
   qui porte déjà sa propre forme ronde. */
/* 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;overflow:hidden}
.social-li:hover{background:none;border-color:rgba(255,255,255,.7)}
.pied-bas a:hover{color:#C0A6FF}
@media (max-width:980px){
  .pied-grille{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .pied-grille{grid-template-columns:1fr}
}
/* ---------- 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){
  .hero-photo{order:2;margin-inline:auto}
  .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)}
/* Sur --paper-alt, le violet tombe à 4,20:1 : les surtitres des sections
   teintées passent au violet encre, 5,39:1. */
.alt .eyebrow{color:var(--violet-ink)}
/* 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)}
.sec-head .eyebrow+h2,
.cta-txt .eyebrow+h2,
.foot-txt .eyebrow+h2,
.cta-txt>.btn,.foot-txt>.btn{margin-top:var(--flow-cta)}
/* RYTHME DU FOLD
   Le fold ne suit pas le pas commun des blocs de section : son escalier
   s'ouvre en descendant, de l'étiquette jusqu'au bouton, pour que l'appel
   à l'action ne se lise pas comme la suite du paragraphe. Quatre pas
   fluides, qui se resserrent proportionnellement sur petit écran. */
.hero-copy>*{margin-top:0}
.hero-copy>.eyebrow+h1{margin-top:clamp(18px,1.8vw,24px)}
.hero-copy>h1+.lead{margin-top:clamp(20px,2.2vw,30px)}
.hero-copy>.lead+.kpis{margin-top:clamp(30px,3.4vw,48px)}
.hero-copy>.kpis+.hero-actions{margin-top:clamp(34px,3.9vw,56px)}
.cta-txt .btn+.reassurance,.cta-txt .reassurance+.sig,
.foot-txt .btn+.sig,.foot-txt .btn+.reassurance{margin-top:var(--stack-3)}
/* ---------------- 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-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);
}
/* Le tiroir mobile sert la même marque : plus de fond de couleur à poser. */
.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é. */
/* =================================================================
   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} }