@font-face{font-family:'Berlin Sans FB';src:url('../fonts/BRLNSR.TTF') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Berlin Sans FB';src:url('../fonts/BRLNSDB.TTF') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Berlin Sans FB';src:url('../fonts/BRLNSB.TTF') format('truetype');font-weight:700;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}   /* titre principal SEO/a11y, hors-ecran (non spam : c'est le vrai h1 de la page) */
:root{
  --marine:#1D3F73;--marine-deep:#122A52;--turquoise:#04BCB3;--corail:#E83B66;--jaune:#FAD82E;--bleuvif:#079ED4;
  --fond:#F2FAFA;--muted-fg:#4a6b99;--muted:#E3F4F4;--bleuclair:#C8F0EE;--fade:.8s;
  --ease-out:cubic-bezier(.19,1,.22,1);--ease-back:cubic-bezier(.175,.885,.32,1.275);--ease-reveal:cubic-bezier(.16,1,.3,1);
  --font-title:'Berlin Sans FB','Bricolage Grotesque',system-ui,sans-serif;
  --font-ui:'Montserrat',system-ui,sans-serif;--font-body:'Sarabun',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* ===== Échelle typographique fluide (vp 360→1920px, corps >=16px, max = tailles desktop) — priorité mobile adaptatif ===== */
  --fs-eyebrow:clamp(0.8125rem,0.798rem + 0.064vw,0.875rem);
  --fs-small:clamp(0.875rem,0.846rem + 0.128vw,1rem);
  --fs-body:clamp(1rem,0.957rem + 0.192vw,1.1875rem);
  --fs-lead:clamp(1.125rem,1.038rem + 0.385vw,1.5rem);
  --fs-h3:clamp(1.25rem,1.135rem + 0.513vw,1.75rem);
  --fs-h2:clamp(1.625rem,1.423rem + 0.897vw,2.5rem);
  --fs-h1:clamp(2rem,1.596rem + 1.795vw,3.75rem);
  --fs-btn:clamp(0.9375rem,0.909rem + 0.128vw,1.0625rem);
  --lh-tight:1.12;--lh-snug:1.25;--lh-body:1.6;
}
html{scrollbar-width:none;-ms-overflow-style:none}   /* pas d'ascenseur natif : navigation par nos dots + flèche */
html::-webkit-scrollbar{width:0;height:0;display:none}
body{font-family:var(--font-body);color:var(--marine);background:var(--fond);overflow-x:clip}   /* clip (pas hidden) : n'etablit PAS de conteneur de scroll -> le document racine defile -> la barre d'URL mobile se replie (fullscreen), et toujours pas de scroll horizontal */
@supports not (overflow:clip){body{overflow-x:hidden}}
/* anti-débordement des titres (mots FR longs) sur mobile */
h1,h2,h3,h4,.approche-title,.cform-title,.qsn-name,.vsec-title,.ps-title{overflow-wrap:break-word;text-wrap:balance}
.section{width:100%;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1.4rem,4vh,3.2rem);padding:calc(84px + 5.5vh) 1.2rem 4vh;position:relative;overflow-x:clip}   /* clip : l'horizon (235%) sort de l'ecran sans creer de scroll horizontal */
/* will-change reserve au desktop (souris) : ces elements ne bougent qu'au mousemove/tilt -> aucune couche GPU permanente sur mobile */
@media (hover:hover){.rig .boussole-horizon,.contact-emblem,.qsn-field,.qsn-card{will-change:transform}}
/* mobile/tablette : on ne rend pas les sections hors ecran (allege le chargement) ; taille reservee -> pas de saut de scroll. Jamais sur #boussole (hero visible d'emblee). */
@media (max-width:768px){#leconstat,#nosvaleurs,#quisommesnous,#contact{content-visibility:auto;contain-intrinsic-size:auto 100dvh}}
/* Le Pôle : blanc qui se fond DOUCEMENT vers le bleu clair, en haut et en bas (oriente le regard) */
#boussole{background:linear-gradient(to bottom,#fff 0%,#fff 22%,#daf0f2 31%,#daf0f2 62%,#fff 69%,#fff 100%)}
/* SCALE DU BLOC (methode validee) : #boussole = cadre ; .blk-scale = mise en page 4K INTACTE, mise a l'echelle uniforme par --k. A k=1 (4K) = byte-identique. Medaillons inclus => verrouilles. */
#boussole{display:block;padding:0;gap:0;overflow:hidden}
#boussole > .blk-scale{min-height:100svh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.4rem,4vh,3.2rem);padding:calc(84px + 1.5vh) 1.2rem 2.5vh;position:relative;transform:scale(var(--k,1));transform-origin:center center}   /* scale statique (change au resize seulement) : pas de will-change permanent */
/* flux responsive : constats+titre puis boussole, centrés en groupe */
.top-stack{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,4.5vh,3.2rem);width:100%;max-width:1100px;padding:0 1rem}   /* au-dessus des mains (z-10) : la bulle constat passe devant tout */
/* ===== MENU + CONSTATS ×140%, barre menu fond bleu (boussole intouchée) ===== */
html.embed .hdr{display:none}
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,3rem);background:var(--marine);backdrop-filter:blur(10px)}
.logo-wrap{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.6rem)}
.slogan{font-family:var(--font-ui);font-weight:600;font-size:clamp(.62rem,.73vw,.70rem);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hdr-actions{display:flex;align-items:center;gap:.7rem}
.cinema-step-chips{display:flex;align-items:center;gap:.5rem;margin-right:.5rem}
.hdr-burger{display:none;background:rgba(255,255,255,.14);border:none;color:#fff;width:44px;height:44px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.hdr-burger svg{width:24px;height:24px;display:block}
.hdr-burger svg[hidden]{display:none}
.btn-step-chip{font-family:var(--font-ui);font-size:.98rem;font-weight:700;padding:.42rem .91rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:all .2s}
.btn-step-chip.active{background:#fff;color:var(--marine);border-color:#fff}
.btn-step-chip[data-step="2"].active{color:var(--corail)}   /* « Le Pôle » actif = texte rouge charte */
.constats-bar{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.constats-bar .lbl{font-family:var(--font-ui);font-weight:700;font-size:clamp(1rem,2.6vmin,1.33rem);color:var(--marine)}
.approche-title{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;color:var(--marine);font-size:clamp(1.25rem,4vmin,2.5rem);text-align:center;margin:0 auto}
.pill-wrap{position:relative}

/* ====== LA BOUSSOLE (design conservé) ====== */
.rig{position:relative;width:calc(min(84vw,52vh,560px) * .88);aspect-ratio:1;display:grid;place-items:center}
/* horizon/chemin en perspective, super fin, filigrane — la boussole posée dessus */
.rig .boussole-horizon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:235%;height:44px;z-index:0;pointer-events:none;opacity:.7;transition:transform .35s var(--ease)}
.rig .boussole-horizon svg{width:100%;height:100%}
.ring{position:absolute;border-radius:50%}
.ring.outer{inset:8%;border:2px dashed rgba(29,63,115,.22);animation:spin 55s linear infinite reverse}   /* pointillé : tourne en sens inverse de la boussole */
.ring.inner{inset:24%;border:1.5px solid rgba(4,188,179,.5)}

.core{position:absolute;width:30%;aspect-ratio:1;z-index:5;display:grid;place-items:center;overflow:visible;pointer-events:none;filter:drop-shadow(0 12px 26px rgba(18,42,82,.22))}
.core img{width:165%;height:165%;animation:compass-sweep 40s linear infinite}   /* boussole : balancier ±90 → ±180 → ±360 (le suivi souris est lissé en JS, pas en transition) */
.core.js img{animation:none}   /* JS actif : le balancier + le suivi souris sont pilotés en JS (une seule source) */
/* ===== ASSEMBLAGE DE LA BOUSSOLE (révélé à l'arrivée sur Le Pôle : centre → mains → bouton) ===== */
/* textes : fondu + glissement */
#boussole .approche-title,#boussole .boussole-fwd{opacity:0;transform:translateY(14px) scale(.96);transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out)}
#boussole .constats-bar{opacity:0;filter:blur(10px);transition:opacity 1.6s var(--ease-reveal),filter 1.6s var(--ease-reveal)}   /* constat = fondu-flou subtil, en dernier */
#boussole .constats-bar.show{opacity:1;filter:blur(0)}
#boussole .boussole-phrase{opacity:0;filter:blur(10px);transition:opacity 1.6s var(--ease-reveal),filter 1.6s var(--ease-reveal)}   /* la phrase se révèle en fondu-flou, après « Cliquez une main » */
#boussole .boussole-phrase.show{opacity:.92;filter:blur(0)}
#boussole .constats-bar.show,#boussole .approche-title.show,#boussole .boussole-fwd.show{opacity:1;transform:none}
/* cercles (cœur + mains) : grandissent OPAQUES depuis leur propre centre — pas de fondu qui masque la croissance */
#boussole .core,#boussole .hand{transform:scale(0);transform-origin:50% 50%;transition:transform .7s var(--ease-back)}
#boussole .core.show,#boussole .hand.show{transform:none}
/* anneaux vert/gris : grandissent par la taille depuis le centre (le spin conserve le transform) */
#boussole .ring{transition:inset .7s var(--ease-back)}
#boussole .ring.outer{inset:48%}
#boussole .ring.inner{inset:48%}
#boussole .ring.outer.show{inset:8%}
#boussole .ring.inner.show{inset:24%}
/* libellés : tous en même temps, en dernier */
#boussole .tag{opacity:0;transition:opacity .45s var(--ease-out)}
#boussole.tags-shown .tag{opacity:1}
/* info-bulle « cliquez » : pulse pour signaler la boussole cliquable, disparaît au 1er clic */
.click-hint{opacity:0;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-weight:600;font-size:.82rem;color:var(--marine);background:#fff;border:1px solid var(--muted);padding:.4rem .95rem;border-radius:999px;box-shadow:0 6px 18px rgba(29,63,115,.12)}
.click-hint svg{width:15px;height:15px;color:var(--turquoise)}
.click-hint.show{animation:hintpulse 2.4s ease-in-out infinite}
.click-hint.gone{display:none}
@keyframes hintpulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* temps proportionnel à l'angle parcouru (2160° au total) → même rythme sur tous les swings */
@keyframes compass-sweep{
  0%{transform:rotate(0deg)}
  4.17%{transform:rotate(90deg)}
  12.5%{transform:rotate(-90deg)}
  25%{transform:rotate(180deg)}
  41.67%{transform:rotate(-180deg)}
  66.67%{transform:rotate(360deg)}
  100%{transform:rotate(-360deg)}
}
.core:hover img{animation-duration:8s}

/* 4 mains — vrais SVG cadrés dans un cercle blanc */
.hand{position:absolute;width:30%;aspect-ratio:1;border:none;background:none;cursor:pointer;z-index:10;display:grid;place-items:center}
.disc{position:relative;width:94%;height:94%;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;grid-area:1/1;box-shadow:0 12px 30px rgba(29,63,115,.14);transition:.35s var(--ease)}
/* halo glassmorphe (remplace l'ombre portee) — meme rayon circulaire */
.hand::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:108%;height:108%;border-radius:50%;background:rgba(255,255,255,.42);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 6px rgba(255,255,255,.6);z-index:-1;pointer-events:none}
.disc img{width:95.7%;height:95.7%;object-fit:contain;pointer-events:none}   /* cercle -6% mais main à taille identique */
/* positions cardinales */
.hand.eleve{top:0;left:0}
.hand.etab{top:0;right:0}
.hand.famille{bottom:0;left:0}
.hand.part{bottom:0;right:0}
.hand:hover .disc{transform:scale(1.06);box-shadow:0 16px 40px var(--glow)}
.hand.eleve{--glow:rgba(250,216,46,.55)}.hand.etab{--glow:rgba(7,158,212,.5)}
.hand.famille{--glow:rgba(4,188,179,.5)}.hand.part{--glow:rgba(232,59,102,.5)}

/* labels pilule colorés */
.tag{position:absolute;font-family:var(--font-title);font-weight:600;font-size:clamp(.80rem,1.32vw,1.02rem);
  white-space:nowrap;color:#fff;padding:.3em .95em;border-radius:999px;box-shadow:0 6px 16px rgba(29,63,115,.18);z-index:12;left:50%;transform:translateX(-50%)}
/* labels hors du cercle, gap fixe de 5px */
.hand.eleve .tag{background:var(--jaune);color:var(--marine);top:100%;margin-top:12px}
.hand.etab .tag{background:var(--bleuvif);top:100%;margin-top:12px}
.hand.famille .tag{background:var(--turquoise);bottom:100%;margin-bottom:12px}
.hand.part .tag{background:var(--corail);bottom:100%;margin-bottom:12px}
/* tags de droite decales vers la droite pour ne pas deborder sur la boussole (demande cliente) */
.hand.etab .tag,.hand.part .tag{transform:translateX(-25%)}
/* phrase sous "Cliquez une main" (charte : corps Sarabun, marine, centre, discret) */
.boussole-phrase{font-family:var(--font-body);color:var(--marine);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;max-width:56ch;text-align:center;margin:1.1rem auto 0;opacity:.92}

/* ====== CARTE PÔLE (superposition, container transform) ====== */
/* ANCIEN VOILE (pour revenir : décommenter la ligne ci-dessous et supprimer le bloc glass) */
/* .polesurface{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(18,42,82,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s var(--ease)} */
.polesurface{position:fixed;inset:0;z-index:100;overscroll-behavior:contain;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(15,32,66,.42);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  opacity:0;visibility:hidden;transition:.3s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .polesurface{background:rgba(15,32,66,.9)}
}
/* LIQUID GLASS (réfraction) — activé UNIQUEMENT sur Chromium via la classe html.liquid (posée en JS) ;
   défaut universel = glassmorphism blur+saturate ci-dessus (Firefox/Safari/iPhone). Retirer : la classe JS + ce bloc + le <svg id=lg-liquid> */
html.liquid .polesurface{backdrop-filter:blur(4px) url(#lg-liquid) saturate(150%)}
.polesurface.open{opacity:1;visibility:visible}
.ps-card{width:min(680px,100%);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;border-radius:24px;padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--marine);
  color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.45);
  transform:scale(.9);transition:.35s var(--ease)}
.polesurface.open .ps-card{transform:scale(1)}
/* ===== MOBILE : modals en feuille plein écran (sheet app-like) ===== */
@media(max-width:640px){
  /* la sheet opaque couvre tout l'écran -> le backdrop-filter (blur/liquid) est INVISIBLE mais recalculé chaque frame = grosse chauffe GPU. On le coupe. */
  .polesurface,html.liquid .polesurface{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(15,32,66,.92)}
  .polesurface{place-items:end stretch;padding:0}
  .polesurface .ps-card,#partModal.polesurface .pp-poster{width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:22px 22px 0 0;
    padding-top:max(2rem,calc(env(safe-area-inset-top) + .9rem));padding-bottom:max(1.4rem,env(safe-area-inset-bottom));
    transform:translateY(100%);opacity:1;transition:transform .42s var(--ease)}
  .polesurface.open .ps-card,#partModal.open.polesurface .pp-poster{transform:translateY(0)}
  /* poignée décorative retirée : non fonctionnelle (glisser pour fermer), source de confusion */
  .polesurface.sheet-drag .ps-card,#partModal.sheet-drag .pp-poster{transition:none}
}
@supports not (height:100dvh){@media(max-width:640px){.ps-card,#partModal .pp-poster{height:100vh;max-height:100vh}}}
/* Ascenseur : agit UNIQUEMENT sur le corps central (.ps-scroll) ; entête (×) + pied (boutons) figés */
.ps-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;scroll-padding-bottom:24px;padding-right:1.1rem;margin-right:-1.1rem;padding-bottom:.6rem;transition:scrollbar-color .35s var(--ease)}
.ps-scroll.scrolling{scrollbar-color:rgba(255,255,255,.35) transparent}
.ps-scroll::-webkit-scrollbar{width:8px}
.ps-scroll::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.ps-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box;transition:background .35s var(--ease)}
.ps-scroll.scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
.ps-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}
#charte .ps-scroll.scrolling,#qsnModal .ps-scroll.scrolling{scrollbar-color:rgba(29,63,115,.35) transparent}
#charte .ps-scroll.scrolling::-webkit-scrollbar-thumb,#qsnModal .ps-scroll.scrolling::-webkit-scrollbar-thumb{background:rgba(29,63,115,.35)}
.ps-top{flex:0 0 auto;display:flex;justify-content:flex-end;gap:.6rem;align-items:center;margin-bottom:1.2rem}
.ps-actions{flex:0 0 auto}
/* onglets de bascule pôle retirés — une carte n'affiche que le pôle cliqué */
.ps-close{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:1.3rem;cursor:pointer;margin:-.5rem -.4rem 0 0}
.ps-title{font-family:var(--font-title);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--tc)}
.ps-appro{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.45;color:#eaf2fb;margin:.6rem 0 1.55rem}
.ps-headrow{display:contents}   /* desktop : transparent (aucun impact layout, pied d'origine conservé) */
/* MOBILE/TABLETTE : les 3 pills (prestations/partenaires/charte) sur UNE ligne, même taille, défilement horizontal au glissé */
@media (max-width:820px){
  .ps-headrow{display:flex;flex-wrap:nowrap;align-items:center;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:.2rem 0 1rem;padding-bottom:.15rem}
  .ps-headrow::-webkit-scrollbar{display:none}
  .ps-headrow>*{flex:0 0 auto}
  .ps-headrow .ps-switch{width:auto;background:none;border:none;padding:0;gap:.4rem;display:flex}
  .ps-headrow .ps-seg,.ps-headrow .ps-charte-m,.ps-headrow .ps-presta-btn{flex:0 0 auto;font-size:.72rem;letter-spacing:.03em;padding:.55rem .95rem;white-space:nowrap;margin:0}
  .ps-headrow .ps-seg{border:1px solid rgba(255,255,255,.18)}
  .ps-headrow .ps-seg.is-active{border-color:transparent}
}
.ps-presta-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--tc);color:var(--marine-deep);font-family:var(--font-ui);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:.65rem 1.2rem;border:none;border-radius:999px;cursor:pointer}
.ps-presta-btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}.ps-presta-btn.open svg{transform:rotate(180deg)}
.ps-presta{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .35s var(--ease),margin .4s var(--ease),padding .4s var(--ease)}
.ps-presta.open{max-height:4000px;opacity:1;margin-top:1.5rem}
.ps-sep{border-top:1px dashed rgba(255,255,255,.2);margin:0 0 1.5rem}
.ps-group{margin-bottom:1.7rem}
.ps-pub{font-family:var(--font-title);font-weight:700;font-size:.74rem;letter-spacing:.05em;color:var(--marine-deep);background:var(--tc);padding:.22em .65em;border-radius:4px;display:inline-block}
.ps-intro{font-family:var(--font-title);font-weight:600;font-size:1.05rem;margin:.7rem 0 .55rem}
.ps-list{list-style:none;font-size:.95rem;line-height:1.7;color:#dbe7f5}.ps-list li{display:flex;gap:.5rem;align-items:flex-start}.ps-list li svg{color:var(--tc);flex-shrink:0;margin-top:.2em;width:16px;height:16px}
/* ===== Prestations : 3 cartes compactes + UN panneau detail pleine largeur dessous ===== */
.presta-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.1rem;align-items:stretch}
.presta-card{flex:0 0 calc((100% - 1.9rem)/3);display:flex;flex-direction:column;align-items:center;gap:.55rem;background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:1.2rem 1rem;text-align:center;cursor:pointer;color:inherit;font:inherit;box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.presta-card:not(.nodetail):hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.presta-card:hover{background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
.presta-card.nodetail{cursor:default}
.presta-card.active{border-color:var(--tc);background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.07));box-shadow:0 0 0 1px var(--tc),0 4px 12px -8px color-mix(in srgb,var(--tc) 18%,transparent),0 0 6px color-mix(in srgb,var(--tc) 9%,transparent),inset 0 -7px 14px -14px color-mix(in srgb,var(--tc) 16%,transparent)}
.presta-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);color:var(--tc)}
.presta-ico svg{width:30px;height:30px}
.pico{display:block;width:48px;height:48px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* icônes prestations en blanc pour établissements/famille/partenaires (contraste sur fond marine) ; élève garde le jaune */
.ps-card[data-pole="1"] .pico,.ps-card[data-pole="2"] .pico,.ps-card[data-pole="3"] .pico{background:#fff}
.presta-name{font-family:var(--font-title);font-weight:600;font-size:1.02rem;color:#fff;line-height:1.4;min-height:2.9em;display:flex;align-items:center;justify-content:center}
.presta-chev{margin-top:auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;transition:background .2s var(--ease)}
.presta-chev svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.presta-card.active .presta-chev{background:var(--tc);border-color:var(--tc);color:var(--marine-deep)}
.presta-card.active .presta-chev svg{transform:rotate(180deg)}
.presta-panel{max-height:0;opacity:0;overflow:hidden;margin-top:0;border-radius:14px;text-align:left;position:relative;contain:layout paint;transition:opacity .3s var(--ease),margin .35s var(--ease)}
.presta-panel.open{max-height:none;opacity:1;margin-top:1.15rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--tc);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.presta-h{font-family:var(--font-title);font-weight:700;color:var(--tc);font-size:1.15rem;margin-bottom:.5rem}
.presta-obj{font-family:var(--font-body);font-size:.98rem;line-height:1.55;color:#fff;margin-bottom:.6rem;text-align:justify;hyphens:auto}
.presta-obj strong{color:var(--tc)}
.presta-det{font-family:var(--font-body);font-size:.92rem;line-height:1.6;color:#cddaeb;text-align:justify;hyphens:auto}
/* le contenu détail se révèle en fondu+glissement à CHAQUE clic (élément recréé) */
/* calques du panneau détail : cross-fade (ancien/nouveau superposés) pendant l'anim de hauteur (WAAPI) */
.presta-layer{padding:1.2rem 1.3rem 1.2rem 1.5rem;will-change:opacity}
.presta-layer--out{position:absolute;inset:0;pointer-events:none}
/* Accordéon par carte : masqué en desktop (le bloc partagé .presta-panel gère l'affichage) */
.presta-acc{display:none}
/* ====== MOBILE (<=640px) : cartes en accordéon empilé, en-tête icône+titre+flèche horizontal ====== */
@media (max-width:640px){
  .presta-grid{flex-direction:column;align-items:stretch;gap:.7rem}
  .presta-card{flex:0 0 auto;width:100%;flex-direction:row;align-items:center;gap:.85rem;text-align:left;padding:.85rem 1rem}
  .presta-ico{width:44px;height:44px;flex:0 0 auto}
  .presta-ico svg{width:24px;height:24px}
  .presta-ico .pico{width:33px;height:33px}
  .presta-name{min-height:0;display:block;flex:1 1 auto;font-size:1rem}
  .presta-chev{margin-top:0;margin-left:auto;flex:0 0 auto;width:30px;height:30px}
  .presta-acc{display:block;max-height:0;opacity:0;overflow:hidden;text-align:left;transition:max-height .4s var(--ease),opacity .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease)}
  .presta-acc.open{max-height:2000px;opacity:1;margin:.15rem 0 .35rem;padding:1rem 1.1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--tc);border-radius:12px}
  .presta-panel{display:none!important}
}
/* ===== Bascule prestations / partenaires ===== */
.ps-presta-btn[hidden],.ps-switch[hidden],.ps-presta[hidden],.ps-partners[hidden]{display:none!important}
.ps-switch{display:inline-flex;gap:.25rem;padding:.28rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.ps-seg{font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:#cddaeb;background:transparent;border:none;border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.ps-seg.is-active{background:var(--tc);color:var(--marine-deep)}
/* ===== Grille partenaires : 2/ligne, tuile glass (photo+nom) + profession dessous ===== */
.ps-partners{margin-top:1.1rem}
.part-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.part-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.part-card.part-in{animation:partIn .5s var(--ease-back) both}
@keyframes partIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.part-card.part-in{animation:none}}
.part-tile{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:1.7rem 1.2rem;box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.part-card:hover .part-tile{transform:translateY(-3px);border-color:var(--tc);background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.06));box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.part-photo{position:relative;width:136px;height:136px;flex:0 0 auto}
.part-photo::before{content:"";position:absolute;inset:-8px -13px -16px -9px;background:var(--tc);border-radius:46% 54% 43% 57%/60% 62% 38% 40%;transform:rotate(-7deg)}
.part-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:46% 54% 43% 57%/60% 62% 38% 40%}
.part-name{font-family:var(--font-title);font-weight:700;font-size:1.06rem;line-height:1.25;color:var(--tc);text-align:center;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.part-spec{font-family:var(--font-body);font-size:.9rem;line-height:1.35;color:#cddaeb}
/* ===== Pop-up poster partenaire ===== */
#partModal{z-index:130}
/* auto-hide scrollbar du poster partenaire (comme les autres cartes) */
.pp-poster{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .35s var(--ease)}
.pp-poster.scrolling{scrollbar-color:rgba(255,255,255,.32) transparent}
.pp-poster::-webkit-scrollbar{width:8px}
.pp-poster::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box;transition:background .35s var(--ease)}
.pp-poster.scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32)}
#partModal .pp-poster{position:relative;width:min(92vw,560px);max-height:94vh;overflow:auto;background:#fff;color:var(--marine);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.45);padding:clamp(1.5rem,4.5vw,2.8rem);display:flex;flex-direction:column;align-items:center}
#partModal .ps-close{position:absolute;top:.8rem;right:.9rem;background:rgba(29,63,115,.10);color:var(--marine);z-index:3}
.pp-dots{position:absolute;width:52px;height:52px;background-image:radial-gradient(var(--corail) 1.5px,transparent 1.8px);background-size:12px 12px;opacity:.85;z-index:1;pointer-events:none}
.pp-dots-tl{top:clamp(1rem,3vw,1.7rem);left:clamp(1rem,3vw,1.7rem);clip-path:polygon(0 0,100% 0,0 100%)}
.pp-dots-br{bottom:clamp(1rem,3vw,1.7rem);right:clamp(1rem,3vw,1.7rem);clip-path:polygon(100% 0,100% 100%,0 100%)}
#partModal .pp-bio{margin-bottom:3.6rem}   /* réserve l'espace bas → les points corail restent SOUS le texte (retour cliente) */
.pp-name{font-family:var(--font-title);font-weight:700;color:var(--corail);font-size:clamp(1.4rem,4.6vw,2.15rem);line-height:1.08;text-align:center;max-width:82%;margin-top:clamp(1.4rem,4.5vw,2.2rem)}
.pp-spec{font-family:var(--font-body);color:var(--marine);font-size:clamp(.9rem,2.5vw,1.12rem);text-align:center;margin-top:.4rem;max-width:82%}
.pp-photo{position:relative;width:clamp(150px,36%,220px);aspect-ratio:1/1;flex:0 0 auto;margin:clamp(1rem,2.6vw,1.7rem) 0}
.pp-photo::before{content:"";position:absolute;inset:-9px -16px -20px -11px;background:var(--corail);border-radius:46% 54% 43% 57%/60% 62% 38% 40%;transform:rotate(-7deg)}
.pp-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:46% 54% 43% 57%/60% 62% 38% 40%}
.pp-bio{font-family:var(--font-body);color:var(--marine);font-size:clamp(.82rem,2.15vw,1rem);line-height:1.55;text-align:left;border-left:4px solid var(--corail);padding-left:1rem;width:100%}
/* entrée du poster partenaire (scale) = DESKTOP seulement (mobile = sheet plein écran) */
@media(min-width:641px){
  #partModal .pp-poster{opacity:0;transform:scale(.93) translateY(12px);transition:opacity .4s var(--ease),transform .5s var(--ease-back)}
  #partModal.open .pp-poster{opacity:1;transform:none}
}
/* révélation en cascade du contenu (desktop + mobile) */
#partModal .pp-name,#partModal .pp-spec,#partModal .pp-photo,#partModal .pp-bio{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
#partModal.open .pp-name{opacity:1;transform:none;transition-delay:.16s}
#partModal.open .pp-spec{opacity:1;transform:none;transition-delay:.36s}
#partModal.open .pp-photo{opacity:1;transform:none;transition-delay:.56s}
#partModal.open .pp-bio{opacity:1;transform:none;transition-delay:.76s}
@media(prefers-reduced-motion:reduce){#partModal .pp-poster,#partModal .pp-name,#partModal .pp-spec,#partModal .pp-photo,#partModal .pp-bio{opacity:1;transform:none;transition:none}}
@media (max-width:640px){
  .ps-switch{display:flex;width:100%}
  .ps-seg{flex:1 1 0;padding:.6rem .4rem;font-size:.72rem}
  .part-grid{gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  .part-card{min-width:0}
  .part-tile{padding:1rem .6rem;gap:.7rem}
  .part-photo{width:min(104px,27vw);height:min(104px,27vw)}
  .part-photo::before{inset:-5px -7px -9px -6px}
  .part-name{font-size:.95rem;min-height:2.4em}
  .part-spec{font-size:.82rem}
}
/* Mobile : le poster partenaire = bottom-sheet a la HAUTEUR du contenu (pas 100dvh) -> pas de grand vide */
/* Mobile : poster partenaire = carte PLEINE, contenu centre verticalement + aere */
@media (max-width:640px){
  #partModal.polesurface .pp-poster{aspect-ratio:auto;height:100dvh;max-height:100dvh;overflow:auto;justify-content:center;padding-bottom:calc(max(1.4rem,env(safe-area-inset-bottom)) + 20dvh)}   /* le +20dvh en bas remonte l'ensemble (moins de vide en haut) */
  #partModal .pp-spec{margin-top:.8rem}
  #partModal .pp-photo{margin:clamp(2rem,6vw,3rem) 0}
  #partModal .pp-bio{margin-top:clamp(.9rem,3vw,1.5rem);text-align:left}
}
.ps-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.3rem}
.ps-contact{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--marine-deep);font-family:var(--font-ui);font-weight:700;font-size:.82rem;padding:.7rem 1.3rem;border:none;border-radius:999px;cursor:pointer;text-decoration:none}
.ps-contact svg{width:16px;height:16px}
/* ===== CARTE CHARTE ÉTHIQUE (calque empilé — même modèle que la carte pôle) ===== */
#charte{z-index:120}
.ps-charte{display:inline-flex;align-items:center;gap:.5rem;background:var(--tc,var(--turquoise));color:var(--marine-deep);font-family:var(--font-ui);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;padding:.7rem 1.3rem;border:none;border-radius:999px;cursor:pointer}
/* charte en ligne : MOBILE/TABLETTE uniquement (desktop garde son pied d'origine), texte blanc */
.ps-charte-m{display:none}
.ps-charte.ps-charte-m{color:#fff;margin:.1rem 0 .2rem}
@media(max-width:820px){
  .ps-charte-m{display:inline-flex}
  #pole .ps-actions{display:none}
}
.ps-charte[hidden]{display:none}
.ps-charte svg{width:16px;height:16px}
.charte-preamble{font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.55;color:#eaf2fb;margin:.4rem 0 1.3rem}
.charte-rubtitle{font-family:var(--font-title);font-weight:600;font-size:1.02rem;color:var(--tc,#fff);margin-bottom:.7rem}
.charte-rubs{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:.55rem}
.charte-rubs li{counter-increment:r;display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:#dbe7f5}
.charte-rubs li::before{content:counter(r);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--tc,var(--turquoise));color:#fff;font-family:var(--font-ui);font-weight:700;font-size:.72rem;display:grid;place-items:center;margin-top:.05em}
/* ===== RÉVÉLATION EN CASCADE DU CONTENU DES CARTES (Heimdall : stagger 60/35ms, easeOutExpo, translateY 14px) ===== */
.reveal-child{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-back),filter .7s var(--ease-out);transition-delay:var(--rc-delay,0ms);will-change:opacity,transform}
.reveal-child.show{opacity:1;transform:none}
/* entrée carte par carte (prestations/partenaires) — animation, pas transition (évite le conflit avec la transition propre de la carte) */
.card-in{animation:cardIn .6s var(--ease-back) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.reveal-child.done{will-change:auto}
/* focus-in premium sur la carte pôle uniquement (présentation) ; la charte reste sobre */
#pole .ps-title.reveal-child,#pole .ps-appro.reveal-child{filter:blur(6px)}
#pole .ps-title.reveal-child.show,#pole .ps-appro.reveal-child.show{filter:blur(0)}
/* la charte = un CONTRAT : carte claire (pas le marine), fond clair légèrement contrasté */
#charte{background:rgba(200,222,238,.55)}
#charte .ps-card{background:#fdfefe;color:var(--marine);border:1px solid #d5e2ee;box-shadow:0 30px 70px rgba(29,63,115,.20)}
#charte .ps-close{background:rgba(29,63,115,.10);color:var(--marine)}
#charte .ps-sep{border-top-color:rgba(29,63,115,.18)}
#charte .charte-preamble{color:#33456b}
#charte .charte-rubtitle{color:var(--tc)}
#charte .charte-rubs li{color:#3a5680}
#charte .ps-contact{background:var(--marine);color:#fff}

/* ============================================================
   SYSTÈME DE CALQUES — actes dynamiques AVANT la boussole.
   La transition entre actes = simple fondu neutre (PLACEHOLDER) :
   c'est le hook où l'autre agent branche ses vraies transitions.
   ============================================================ */
/* Hero spécial : Constat + Approche = overlays plein écran superposés (SOUS le menu), skippables.
   Coupe nette = placeholder (l'autre agent branche ses vraies transitions). */
.act-overlay{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--fade) var(--ease-out),visibility 0s var(--fade)}
.act-overlay.current{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--fade) var(--ease-out),visibility 0s}
/* révélation séquentielle des blocs d'un acte (rejouée à chaque entrée) */
/* Narration au scroll : révélation séquentielle (constat, nos valeurs) */
/* Reveal narration en ANIMATION (pas en transition) : n'entre pas en conflit avec
   la propriété `transition` propre des cartes (qsn-card .25s, .stat .3s...) qui
   écrasait le fondu. sr-done libère ensuite transform/opacity (hover, tilt). */
.sr,.sr-fade{opacity:0;will-change:opacity,transform}
.sr.show{animation:srReveal .9s var(--ease-back) both;animation-delay:var(--sr-delay,0ms)}
.sr-fade.show{animation:srFade .9s var(--ease-out) both;animation-delay:var(--sr-delay,0ms)}
.sr.sr-done,.sr-fade.sr-done{animation:none;opacity:1;will-change:auto}
@keyframes srReveal{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes srFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sr,.sr-fade{opacity:1!important;animation:none!important}}
.act-overlay .seq{opacity:0;transform:translateY(22px)}
.act-overlay .seq.show{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-back)}
/* bouton qui « se charge » le temps de la transition */
.cta.playing{position:relative;overflow:hidden}
.cta.playing::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.28);animation:ctaload var(--barms,4.5s) linear forwards;pointer-events:none}
@keyframes ctaload{to{width:100%}}
/* flèches des boutons : bounce continu et discret */
@keyframes arrowX{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes arrowY{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.cta svg{animation:arrowX 1.5s ease-in-out infinite}
.act-fwd svg{animation:arrowY 1.5s ease-in-out infinite}

/* ===== ACTE 1 — CONSTAT (scopé, contenu client éditable) ===== */
.act-constat{background:linear-gradient(to bottom,#fff 0%,#fff 50%,#daf0f2 68%,#fff 88%,#fff 100%);color:var(--marine)}
/* Constat désormais bloc scroll (plus un overlay) : contenu visible sans l'anim de transition */
#leconstat .seq{opacity:1;transform:none}   /* bande bleue au pied des silhouettes */
.act-constat .hero{position:relative;overflow:hidden}
.constat-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#constat-canvas{opacity:0;transition:opacity 1.2s var(--ease-out)}   /* la carte de caractères se révèle à l'atterrissage */
#constat-canvas.reveal{opacity:1}
@media(prefers-reduced-motion:reduce){#constat-canvas{opacity:1;transition:none}}
.constat-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 42% at 50% 34%,rgba(4,188,179,.09),transparent 70%)}
#constat-canvas{position:absolute;inset:0;width:100%;height:100%}
.act-constat .hero-inner{position:relative;z-index:1}
.act-constat .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(84px + 3vh) clamp(1.4rem,6vw,5.5rem) 5vh}
.act-constat .hero-inner{width:100%;max-width:1280px;margin:0 auto}
.act-constat .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;font-weight:700;color:var(--turquoise);margin-bottom:1.1rem}
.act-constat .eyebrow::before{content:"";width:34px;height:2px;background:var(--turquoise);display:inline-block}
.act-constat h2{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;font-size:clamp(1.75rem,6vw,4.4rem);color:var(--marine);margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.act-constat h2 .hl{color:var(--corail)}
.act-constat .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.act-constat .stat{border-radius:20px;padding:clamp(1.4rem,2vw,1.9rem);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(9px) saturate(150%);-webkit-backdrop-filter:blur(9px) saturate(150%);box-shadow:0 24px 50px rgba(29,63,115,.24),0 8px 18px rgba(29,63,115,.18),0 2px 5px rgba(29,63,115,.12),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.act-constat .stat:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(29,63,115,.22),0 8px 18px rgba(29,63,115,.12)}
.act-constat .stat.s1{background:radial-gradient(ellipse at center,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 52%),color-mix(in srgb,var(--muted) 80%,transparent);color:var(--marine)}
.act-constat .stat.s2{background:radial-gradient(ellipse at center,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 52%),color-mix(in srgb,var(--bleuclair) 80%,transparent);color:var(--marine)}
.act-constat .stat.s3{background:radial-gradient(ellipse at center,rgba(0,0,0,.07) 0%,rgba(0,0,0,0) 52%),color-mix(in srgb,var(--turquoise) 85%,transparent);color:#fff}
.act-constat .num{font-family:var(--font-title);font-weight:700;line-height:1.05;letter-spacing:-.01em;font-size:clamp(1.45rem,2.4vw,1.9rem);margin-bottom:.7rem;color:inherit}
.act-constat .txt{font-size:clamp(1rem,1.1vw,1.05rem);line-height:1.5;color:inherit}
.act-constat .src{font-family:var(--font-body);font-style:italic;font-size:.78rem;margin-top:.9rem;color:var(--muted-fg)}
.act-constat .stat.s3 .src{color:rgba(255,255,255,.85)}
.act-constat .cta-row{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:clamp(2rem,4vw,3rem);flex-wrap:wrap}
.act-constat .cta{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-ui);font-weight:700;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;background:var(--marine);color:#fff;border:none;padding:.95rem 1.7rem;border-radius:999px;cursor:pointer;transition:.25s var(--ease);box-shadow:0 10px 26px rgba(29,63,115,.2)}
.act-constat .cta:hover{background:var(--turquoise);color:#fff;transform:translateY(-2px)}
.act-constat .cta svg{width:18px;height:18px}

/* ===== ACTE 2 — APPROCHE (scopé, contenu client éditable) ===== */
.act-approche{color:var(--fond)}
.act-approche .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(rgba(29,63,115,.93),rgba(29,63,115,.93)),url('../assets/compass-feet.webp');background-size:cover;background-position:48.47% 11.74%;padding:calc(84px + 3vh) clamp(1.4rem,6vw,5.5rem) 5vh}
.act-approche .hero-inner{width:100%;max-width:900px;margin:0 auto}
.act-approche .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;font-weight:700;color:var(--turquoise);margin-bottom:1.2rem}
.act-approche .eyebrow::before{content:"";width:34px;height:2px;background:var(--turquoise);display:inline-block}
.act-approche h2{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;font-size:clamp(2.1rem,5.2vw,3.9rem);color:#fff;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.act-approche .body p{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.65;color:#dbe7f5;max-width:64ch}
.act-approche .body p+p{margin-top:1.2rem}
.act-approche .body .k{font-weight:700;color:#fff}
.act-approche .cta-row{margin-top:clamp(2rem,4vw,3rem)}
.act-approche .cta{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-ui);font-weight:700;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;background:var(--turquoise);color:#fff;border:none;padding:.95rem 1.7rem;border-radius:999px;cursor:pointer;transition:.25s var(--ease);box-shadow:0 10px 30px rgba(4,188,179,.28)}
.act-approche .cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(4,188,179,.42)}
.act-approche .cta svg{width:18px;height:18px}
/* bouton PAUSE (gauche du CTA) : cercle même couleur que le bouton, icône II blanche — met en pause la transition auto */
.act-approche .cta-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.act-pause{flex:0 0 auto;width:clamp(2.7rem,3.2vw,3rem);aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.act-pause svg{width:20px;height:20px;display:block}
.act-pause svg[hidden]{display:none}
.act-pause:hover{transform:translateY(-2px)}
.act-constat .act-pause{background:var(--marine);box-shadow:0 10px 26px rgba(29,63,115,.2)}
.act-approche .act-pause{background:var(--turquoise);box-shadow:0 10px 30px rgba(4,188,179,.28)}
.cta.playing.paused::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.act-pause{display:none}}

/* keyframes partagées par les actes */
@media(max-width:820px){.act-constat .stats{grid-template-columns:1fr;gap:1rem}}
@media (prefers-reduced-motion: reduce){
  .core img,.ring.outer{animation:none}
  .act-overlay .seq{opacity:1;transform:none;transition:none}
  .cta.playing::after{animation:none;width:0}
  .cta svg,.act-fwd svg{animation:none}
  .act-overlay{transition:none}
  #boussole .constats-bar,#boussole .boussole-phrase,#boussole .approche-title,#boussole .boussole-fwd,#boussole .core,#boussole .hand,#boussole .ring,#boussole .tag{opacity:1;transform:none;filter:none;transition:none}
  #boussole .ring.outer{inset:8%}#boussole .ring.inner{inset:24%}
  .reveal-child{transition:none;transform:none;filter:none;opacity:1;will-change:auto}
  .click-hint.show{animation:none;opacity:1}
  .photo-collage .ph{opacity:1;transform:none;filter:none;transition:none}
}

/* ===== EXPERTS — design deck (fond marine) + photo Céline ; d'autres blocs s'empileront dessous ===== */
.act-expertise{background:var(--marine);color:#eaf2fb;min-height:100svh;display:flex;align-items:center;padding:calc(84px + 3vh) clamp(1.4rem,6vw,5.5rem) 5vh}
.act-expertise .exp-grid{display:grid;grid-template-columns:auto 1.1fr 1.15fr;gap:clamp(1.4rem,4vw,3.2rem);align-items:center;max-width:1200px;margin:0 auto;width:100%}
.act-expertise .exp-photo{width:clamp(120px,13vw,170px);height:clamp(120px,13vw,170px);border-radius:50%;overflow:hidden;flex:0 0 auto;box-shadow:0 14px 34px rgba(0,0,0,.32);border:3px solid rgba(4,188,179,.55)}
.act-expertise .exp-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.act-expertise .eyebrow2{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;font-weight:700;color:var(--turquoise);display:block;margin-bottom:.6rem}
.act-expertise h2{font-family:var(--font-title);font-weight:700;line-height:1.08;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-top:.2rem}
.act-expertise .role{font-family:var(--font-ui);color:var(--turquoise);font-weight:600;margin:.3rem 0}
.act-expertise .years{font-size:clamp(1.1rem,2vw,1.5rem);color:var(--jaune);font-family:var(--font-title);font-weight:700;margin-bottom:.2rem}
.act-expertise .lead{font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.6;color:#dbe7f5;margin-top:1rem;max-width:52ch}
.act-expertise .quote{border-left:4px solid var(--corail);padding-left:clamp(.8rem,2vw,1.6rem);font-family:var(--font-title);font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.4;color:#eaf2fb;font-style:italic}
.act-expertise .quote cite{display:block;font-style:normal;font-size:clamp(.75rem,.9vw,.88rem);color:#9fb6d4;margin-top:.7rem;font-family:var(--font-ui)}
.act-expertise .cta-fwd-row{display:flex;margin-top:1.6rem;justify-content:flex-start}
@media(max-width:900px){.act-expertise .exp-grid{grid-template-columns:1fr;justify-items:center;text-align:center}.act-expertise .quote{border-left:none;border-top:4px solid var(--corail);padding-left:0;padding-top:1rem}.act-expertise .cta-fwd-row{justify-content:center}}

/* ===== ACTE 5 — CONTACT (scopé ; base verbatim, enrichissements à peupler) ===== */
.act-contact{background:var(--marine);color:#eaf2fb;min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* Emblème filigrane (mains + boussole) sur le fond bleu, gris estompé, parallaxe souris */
.act-contact .contact-wrap{position:relative;z-index:1}
.act-contact .contact-wrap{text-align:center;max-width:850px;margin:0 auto;padding:calc(84px + 3vh) 1.4rem 4vh}
.act-contact .chash{font-family:var(--font-title);font-weight:700;font-size:clamp(1.8rem,5vmin,3rem);color:var(--turquoise);margin-bottom:1.6rem}
.act-contact .clinks{display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.4vw,1.2rem);justify-content:center;margin:1.4rem 0}
.act-contact .clinks a{font-family:var(--font-ui);color:#eaf2fb;text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.65rem 1.4rem;font-size:clamp(.92rem,1.3vw,1.1rem);transition:all .25s var(--ease)}
.act-contact .clinks a:hover{border-color:var(--turquoise);background:rgba(4,188,179,.15);transform:translateY(-2px)}
.act-contact .cslogan{font-family:var(--font-ui);letter-spacing:.16em;text-transform:uppercase;font-size:clamp(.75rem,.9vw,.88rem);color:#9fb6d4;margin-top:1.2rem}
.site-footer{background:var(--marine-deep,#122A52);text-align:center;padding:1.15rem 1rem;border-top:1px solid rgba(255,255,255,.06)}
.site-footer p{margin:0;font-family:var(--font-ui);font-size:.78rem;letter-spacing:.02em;color:rgba(255,255,255,.42)}
/* ===== FORMULAIRE CONTACT (repris V2 pole accompagnement — verbatim champs) ===== */
.contact-grid{display:flex;flex-direction:column;align-items:center;gap:1.8rem;text-align:left;margin-top:2rem}
.cform-card{width:100%;max-width:860px;background:#fff;border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.cform-eyebrow{display:block;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:700;color:var(--turquoise);margin-bottom:.4rem}
.cform-title{font-family:var(--font-title);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--marine);margin-bottom:1.4rem}
.cform{display:flex;flex-direction:column;gap:1rem}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cfield{display:flex;flex-direction:column;gap:.35rem}
.cfield label{font-family:var(--font-ui);font-weight:600;font-size:.85rem;color:var(--marine)}
.cfield label .opt{color:var(--muted-fg);font-weight:400}
.cfield input,.cfield textarea{font-family:var(--font-body);font-size:.95rem;color:var(--marine);background:#fff;border:1.5px solid #cdd9e8;border-radius:10px;padding:.7rem .9rem;width:100%;transition:border-color .2s}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--turquoise)}
.cfield textarea{resize:vertical;min-height:120px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:border-color .2s,scrollbar-color .35s var(--ease)}
.cfield textarea.scrolling{scrollbar-color:rgba(29,63,115,.35) transparent}
.cfield textarea::-webkit-scrollbar{width:8px}
.cfield textarea::-webkit-scrollbar-thumb{background:transparent;border-radius:999px;border:2px solid transparent;background-clip:padding-box;transition:background .35s var(--ease)}
.cfield textarea.scrolling::-webkit-scrollbar-thumb{background:rgba(29,63,115,.32)}
.cfield.invalid input,.cfield.invalid textarea{border-color:var(--corail)}
.cf-err{color:var(--corail);font-size:.76rem;font-family:var(--font-ui)}
.cform-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-ui);font-weight:700;font-size:.92rem;background:var(--corail);color:#fff;border:none;border-radius:999px;padding:.9rem 1.4rem;cursor:pointer;transition:opacity .2s,transform .2s}
.cform-submit:hover{opacity:.92;transform:translateY(-1px)}
.cform-submit:disabled{opacity:.6;cursor:default}
.cform-submit svg{width:18px;height:18px}
.cform-ok{background:rgba(4,188,179,.14);border:1px solid rgba(4,188,179,.4);color:#eaf2fb;border-radius:12px;padding:1.2rem;text-align:center;font-family:var(--font-ui);font-weight:600}
.contact-side{width:100%;max-width:860px;display:flex;flex-direction:column;align-items:center;gap:1rem}
.contact-side .clinks{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:0}
.contact-side .cslogan{margin-top:.2rem;text-align:center}
.contact-revoir{display:flex;justify-content:center;margin-top:3.2rem}
/* ===== CONTACT 2 COLONNES (formulaire | bloc coordonnées) — PDF cliente ===== */
.act-contact .contact-wrap{max-width:1200px}
.contact-grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);align-items:stretch;text-align:left;margin-top:1rem;width:100%}
.contact-endrow{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-top:3rem}
.contact-grid2 .cform-card{max-width:none}
.coord-card{background:var(--marine-deep);border-radius:20px;padding:clamp(1.8rem,3vw,2.4rem);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:1.6rem;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.coord-map{width:100%;flex:1 1 auto;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.28);line-height:0}
.coord-map iframe{width:100%;height:100%;min-height:180px;border:0;display:block}
@media(max-width:640px){.coord-map{flex:0 0 auto}.coord-map iframe{height:180px;min-height:0}}
.coord-addr{display:flex;align-items:center;justify-content:center;gap:.9rem;font-family:var(--font-body);font-size:var(--fs-body);color:#eaf2fb;line-height:1.4;text-decoration:none;transition:color .2s var(--ease);margin-bottom:.5rem}
.coord-addr span{text-align:left}
.coord-addr:hover{color:#fff}
.coord-addr:hover .coord-pin{color:var(--corail)}
.coord-pin{width:34px;height:34px;flex:0 0 auto;color:var(--corail)}
.coord-pills{display:flex;flex-direction:column;gap:1rem;width:100%}
.coord-pill{display:flex;align-items:center;justify-content:flex-start;gap:1.05rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.7rem 1.6rem;color:#eaf2fb;text-decoration:none;font-family:var(--font-ui);font-size:var(--fs-small);transition:background .2s var(--ease),border-color .2s var(--ease)}
.coord-pill svg{width:20px;height:20px;flex:0 0 auto;color:var(--turquoise)}
.coord-pill:hover{background:rgba(4,188,179,.16);border-color:var(--turquoise)}
.coord-social{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.2rem}
.coord-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;transition:background .2s var(--ease),transform .2s var(--ease)}
.coord-social a:hover{background:var(--turquoise);transform:translateY(-2px)}
.coord-social svg{width:20px;height:20px}
/* homogénéise le poids optique : Facebook et Linktree remplissent moins leur cadre */
.coord-social a[aria-label="Facebook"] svg{transform:scale(1.18)}
.coord-social a[aria-label="Linktree"] svg{transform:scale(1.6)}
.coord-hash{font-family:var(--font-title);font-weight:700;font-size:var(--fs-h3);color:var(--turquoise);margin-top:.4rem}
@media(max-width:820px){.cform-row{grid-template-columns:1fr}.contact-grid2{grid-template-columns:1fr}}
/* ===== BANDEAU CONTACT FLOTTANT (rail droite / FAB mobile) ===== */
.contact-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.contact-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-radius:16px 0 0 16px;overflow:hidden;box-shadow:0 6px 20px rgba(29,63,115,.28)}
.crail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;width:78px;padding:.65rem .4rem;color:#fff;text-decoration:none}
.crail--a{background:var(--marine)}
.crail--b{background:var(--turquoise)}
.crail--b .crail-label{color:#fff}
.crail-ico{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;color:var(--marine);transition:transform .2s var(--ease)}
.crail-ico svg{width:17px;height:17px}
.crail-ico--img img{width:120%;height:120%;object-fit:cover;display:block}
.crail.is-wa .crail-ico svg{color:#25D366;width:19px;height:19px}
/* survol : la pastille grossit, l'icone fait un "pop" (rebond + petit tour) — Kinesis, transform only */
.crail:hover .crail-ico{transform:scale(1.14)}
.crail:hover .crail-ico svg{animation:railPop .5s var(--ease-back)}
@keyframes railPop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.35) rotate(-10deg)}72%{transform:scale(.9) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
/* WhatsApp : léger rappel périodique pour attirer l'œil vers le CTA */
.crail.is-wa .crail-ico{animation:waNudge 4.5s ease-in-out infinite}
@keyframes waNudge{0%,90%,100%{transform:none}93%{transform:scale(1.14) rotate(-6deg)}96%{transform:scale(.96) rotate(4deg)}98%{transform:scale(1.05)}}
.crail.is-wa:hover .crail-ico{animation:none;transform:scale(1.14)}   /* au survol, le pop reprend la main */
@media(prefers-reduced-motion:reduce){.crail:hover .crail-ico svg,.crail.is-wa .crail-ico{animation:none}}
.crail:focus-visible{outline:3px solid var(--marine);outline-offset:-3px}
.crail-label{font-family:var(--font-ui);font-weight:700;font-size:.62rem;line-height:1.12;text-align:center}
.contact-rail__toggle{display:none}
body.modal-open .contact-rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s .2s}
body.contact-inview .contact-rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility 0s .25s}   /* rail masqué quand la section Contact est à l'écran (redondant avec les pastilles) */
@media(max-width:820px){
  .contact-rail{right:0;bottom:16px;top:auto;transform:none}   /* bloc collé au bord droit (comme desktop) */
  .contact-rail__toggle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:0;border-radius:50%;background:var(--marine);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(29,63,115,.35);order:2;align-self:flex-end}
  .contact-rail__toggle svg{width:24px;height:24px}
  .contact-rail__toggle .ico-close{display:none}
  .contact-rail.is-open .contact-rail__toggle .ico-open{display:none}
  .contact-rail.is-open .contact-rail__toggle .ico-close{display:block}
  .contact-rail__list{order:1;margin-bottom:10px;transform:translateY(12px) scale(.92);opacity:0;visibility:hidden;pointer-events:none;transform-origin:bottom right;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
  .contact-rail.is-open .contact-rail__list{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .crail{width:74px;padding:.55rem .35rem}
  .crail-ico{width:38px;height:38px}
  .crail-ico svg{width:17px;height:17px}
  .crail.is-wa .crail-ico svg{width:19px;height:19px}
  .crail-label{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.crail-ico,.contact-rail__list,.contact-rail{transition:none}}
/* menu mobile : slogan masqué, chips scrollables (hauteur 84px préservée) */
/* ===== MENU MOBILE / TABLETTE : hamburger + panneau deroulant (root fixe 16px, layout dedie) ===== */
@media(max-width:820px){
  :root{font-size:16px}                              /* mobile : pas de downscale 4K, texte lisible + layout reflow */
  .slogan{display:none}
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none}   /* mobile : fond marine plein, pas de blur (perf + net) */
  .hdr-burger{display:inline-flex}
  /* menu = overlay PLEIN ÉCRAN sous le header (couvre la page, boutons centrés) */
  .cinema-step-chips{position:fixed;top:84px;left:0;right:0;bottom:0;flex-direction:column;justify-content:center;gap:.75rem;margin:0;max-width:none;
    background:var(--marine);padding:2rem clamp(1.2rem,6vw,3rem) calc(2rem + env(safe-area-inset-bottom));
    overflow-y:auto;display:none}
  .hdr.menu-open .cinema-step-chips{display:flex;animation:menuIn .28s var(--ease-out) both}
  @keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .btn-step-chip{width:100%;justify-content:center;min-height:54px;font-size:1.08rem}
  .hdr.menu-open ~ .contact-rail{opacity:0;visibility:hidden;pointer-events:none}   /* menu ouvert : on masque le FAB contact */
}
#charte .charte-rubtitle{color:var(--marine)}   /* contraste AA sur carte charte claire */

/* Bouton d'avancée (tunnel après la boussole) */
.act-fwd{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-weight:700;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;background:var(--turquoise);color:#fff;border:none;padding:.95rem 1.7rem;border-radius:999px;cursor:pointer;transition:.25s var(--ease);box-shadow:0 10px 26px rgba(4,188,179,.28)}
/* boutons de nav des sections : meme taille que le bouton boussole (scale --k comme le .blk-scale) */
#leconstat .act-fwd,#nosvaleurs .act-fwd,#quisommesnous .act-fwd,#contact .act-fwd{transform:scale(var(--k,1));transform-origin:center}
/* même hover que « Le constat » (boussole) : le scale n'écrase plus le soulèvement */
#leconstat .act-fwd:hover,#nosvaleurs .act-fwd:hover,#quisommesnous .act-fwd:hover,#contact .act-fwd:hover{transform:scale(var(--k,1)) translateY(-3px);box-shadow:0 16px 40px rgba(4,188,179,.42)}
.act-fwd:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(4,188,179,.42)}
.act-fwd svg{width:18px;height:18px}
.boussole-fwd{display:flex;justify-content:center;margin-top:1.5rem}
/* ===== BLOCS V3 : Nos valeurs + Qui sommes-nous (charte inchangee) ===== */
.vsec{min-height:100svh;display:flex;align-items:center;padding:calc(84px + 4vh) clamp(1.4rem,6vw,5.5rem) 5vh;position:relative;overflow-x:clip}
.vsec-light{background:var(--fond);color:var(--marine)}
.vsec-marine{background:var(--marine);color:#eaf2fb}
/* Nos valeurs : MEME fond + couleurs que le bloc Approche (compass-feet + marine) */
.vsec-approche{background:linear-gradient(rgba(29,63,115,.93),rgba(29,63,115,.93)),url('../assets/compass-feet.webp');background-size:cover;background-position:48.47% 11.74%;color:#dbe7f5;padding-bottom:calc(84px + 4vh)}
.vsec-title{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;font-size:clamp(2.1rem,5.2vw,3.9rem);color:#fff}
.vsec-approche .vintro{color:#dbe7f5}
.vsec-approche .valeur-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-top:4px solid var(--turquoise);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.vsec-approche .valeur-card h3{color:#fff;font-family:var(--font-body);font-weight:700}
.vsec-approche .valeur-card p{color:#cddaeb}
.vwrap{width:100%;max-width:1100px;margin:0 auto;position:relative;z-index:1}
/* ===== Champ de profondeur "Qui sommes-nous" (esprit boussole, scopé) ===== */
#quisommesnous{overflow:hidden}   /* clippe le fond : ne déborde plus sur le bloc du dessus */
.qsn-field{position:absolute;inset:-40px;z-index:0;pointer-events:none;overflow:hidden;opacity:.7;background:url('../assets/fond-qui-sommes-nous.webp?v=2') center top/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 80%);mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 80%)}
.qsn-field::after{content:none}
.qsn-orbit{display:none}
.qsn-aura{position:absolute;border-radius:50%;filter:blur(72px);transform:translate(-50%,-50%);animation:qsnbreathe 14s ease-in-out infinite alternate}
.qsn-aura.a-turq{width:42vmax;height:38vmax;left:-26vmax;top:-18vmax;background:radial-gradient(circle,rgba(4,188,179,.17),transparent 62%)}
.qsn-aura.a-bleu{width:40vmax;height:40vmax;left:26vmax;top:-20vmax;background:radial-gradient(circle,rgba(7,158,212,.13),transparent 62%);animation-delay:-4s}
.qsn-aura.a-jaune{width:38vmax;height:36vmax;left:-24vmax;top:20vmax;background:radial-gradient(circle,rgba(250,216,46,.12),transparent 62%);animation-delay:-8s}
.qsn-aura.a-corail{width:36vmax;height:38vmax;left:26vmax;top:22vmax;background:radial-gradient(circle,rgba(232,59,102,.10),transparent 62%);animation-delay:-2s}
@keyframes qsnspin{to{transform:rotate(360deg)}}
@keyframes qsnbreathe{to{filter:blur(86px);opacity:.85}}
@media(prefers-reduced-motion:reduce){.qsn-orbit,.qsn-aura{animation:none}}
.vhead{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.vtitle{font-family:var(--font-title);font-weight:700;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--marine);margin-top:.3rem}
.vintro{font-family:var(--font-body);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;max-width:60ch;margin:.9rem auto 0;color:var(--muted-fg)}
.valeurs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(1rem,2vw,1.6rem)}
.valeur-card{background:#fff;border:1px solid #e0ebf3;border-radius:18px;padding:clamp(1.3rem,2vw,1.8rem);box-shadow:0 12px 30px rgba(29,63,115,.08);border-top:4px solid var(--turquoise)}
.valeur-card h3{font-family:var(--font-title);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--marine);margin-bottom:.5rem}
.valeur-card p{font-family:var(--font-body);font-size:clamp(1rem,1.1vw,1.05rem);line-height:1.55;color:var(--muted-fg)}
/* ===== Qui sommes-nous : 3 cartes BLEUES (ouvrent un pop-up) + quote ===== */
.qsn-title{font-family:var(--font-title);font-weight:700;font-size:clamp(1.9rem,4.4vmin,2.8rem);color:var(--turquoise);text-align:center;margin:0 0 clamp(1.8rem,3.4vw,2.6rem)}
.qsn-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;max-width:820px;margin:0 auto;perspective:1100px}
.qsn-card{flex:0 0 calc((100% - 3.2rem)/3);display:flex;flex-direction:column;align-items:center;gap:.6rem;background:linear-gradient(155deg,#26518d,var(--marine));border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1.5rem 1rem;text-align:center;cursor:pointer;color:#fff;font:inherit;box-shadow:0 12px 28px rgba(29,63,115,.22),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.qsn-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(29,63,115,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.qsn-ico{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.12);color:#fff;transition:box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.qsn-card:hover .qsn-ico{border-color:rgba(4,188,179,.7);box-shadow:inset 0 0 18px rgba(4,188,179,.4),inset 0 1px 0 rgba(255,255,255,.45),0 0 0 5px rgba(4,188,179,.28),0 0 28px rgba(4,188,179,.75),0 10px 28px rgba(4,188,179,.5)}   /* halo turquoise lumineux + lueur interne (cercle allumé, reste transparent) */
.qsn-ico .pico{width:58px;height:58px}
.qsn-ico svg{width:28px;height:28px}
.qsn-cname{font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:#fff;line-height:1.4;min-height:2.9em;display:flex;align-items:center;justify-content:center}
.qsn-plus{width:34px;height:34px;border-radius:50%;background:var(--turquoise);color:#fff;display:grid;place-items:center;margin-top:auto;box-shadow:0 6px 16px rgba(4,188,179,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.qsn-plus svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.qsn-card:hover .qsn-plus{transform:scale(1.18);box-shadow:0 10px 24px rgba(4,188,179,.55),0 0 0 6px rgba(4,188,179,.14)}
.qsn-card:hover .qsn-plus svg{transform:rotate(90deg)}
.qsn-intro{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2rem);flex-wrap:wrap;margin-bottom:1.2rem}
.qsn-photo{width:clamp(110px,12vw,150px);height:clamp(110px,12vw,150px);border-radius:50%;overflow:hidden;flex:0 0 auto;border:3px solid rgba(4,188,179,.5)}
.qsn-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.qsn-name{font-family:var(--font-title);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--marine)}
.qsn-role{font-family:var(--font-ui);color:var(--turquoise);font-weight:600;margin:.2rem 0}
.qsn-years{font-family:var(--font-body);font-weight:700;color:var(--marine)}
.qsn-content h4{font-family:var(--font-body);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--marine);margin:1.2rem 0 .5rem}
.qsn-content h4:first-child{margin-top:0}
.qsn-content p{font-family:var(--font-body);font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.65;color:#3a5170;margin-bottom:.8rem;text-align:justify;hyphens:auto}
/* pop-up qsn = carte blanche (comme la charte) */
#qsnModal{perspective:1200px}
#qsnModal .ps-card{background:#fdfefe;color:var(--marine);border:1px solid #d5e2ee;box-shadow:0 30px 70px rgba(29,63,115,.20)}
#qsnModal .ps-close{background:rgba(29,63,115,.10);color:var(--marine)}
/* ascenseur auto-hide : le thumb foncé n'apparait qu'en .scrolling (cf. lignes ~196-197) */
/* quote aérée haut + bas */
.qsn-sep{display:none}   /* retiré : gênait la boussole en arrière-plan ; l'espacement suffit à séparer cartes/citation */
.qsn-quote{text-align:center;max-width:760px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 1rem}
.qsn-quote p{font-family:var(--font-title);font-weight:600;font-size:clamp(.91rem,1.68vw,1.33rem);color:var(--marine);line-height:1.35;font-style:italic;margin:0}
.qsn-quote cite{display:block;margin-top:.8rem;font-family:var(--font-ui);font-style:normal;color:var(--turquoise);font-weight:600}
@media(max-width:820px){.qsn-intro{flex-direction:column;text-align:center}.vsec{min-height:auto}.qsn-grid{flex-direction:column}.qsn-card{flex:0 0 auto;width:100%;flex-direction:row;text-align:left}.qsn-cname{min-height:0;flex:1;justify-content:flex-start}.qsn-plus{margin-top:0;margin-left:auto}}
@media(max-width:600px){
  .qsn-card{padding:1.05rem 1.25rem;gap:1rem}
  .qsn-ico{width:62px;height:62px;flex:0 0 62px}
  .qsn-ico .pico{width:34px;height:34px}
  .qsn-ico svg{width:24px;height:24px}
  .qsn-cname{font-size:.98rem}
  .qsn-plus{width:32px;height:32px;flex:0 0 32px;margin-left:.6rem}
}
/* ===== NAV VERTICALE DES BLOCS (z<overlays → auto-masquée pendant les actes) ===== */
.pagedots{position:fixed;left:clamp(.8rem,2vw,1.6rem);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:.7rem;align-items:center;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);padding:.7rem .5rem;border-radius:999px;box-shadow:0 8px 24px rgba(29,63,115,.14)}
.pdot{width:11px;height:11px;border-radius:999px;border:none;background:rgba(29,63,115,.25);cursor:pointer;transition:.3s var(--ease);padding:0}
.pdot:hover{background:rgba(29,63,115,.45)}
.pdot.active{height:26px;background:var(--turquoise)}
.pageup{position:fixed;left:clamp(.8rem,2vw,1.6rem);bottom:clamp(1.2rem,4vh,2.6rem);z-index:55;width:44px;height:44px;border-radius:50%;border:none;background:var(--marine);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(29,63,115,.3);transition:.3s var(--ease)}
.pageup:hover{transform:translateY(-2px)}
.pageup[hidden]{display:none}
.pageup svg{width:20px;height:20px}
/* mobile : la nav en points (et la flèche) est inutile et chevauche le contenu -> masquée */
@media(max-width:820px){.pagedots,.pageup{display:none!important}}

/* ============================================================
   MOBILE / TACTILE — standard : corps >=16px, cibles >=44px,
   hauteur reelle (100dvh), boussole radiale conservee (validee #109)
   ============================================================ */
/* hauteur qui suit la barre d'URL mobile (fallback 100svh deja en place) */
@supports (height:100dvh){
  .section{min-height:100dvh}
  .act-constat .hero,.act-approche .hero{min-height:100dvh}
  .act-expertise,.act-contact{min-height:100dvh}
}
@media (max-width:768px){
  /* boussole : formule de base (min(84vw,52vh,560px)*.88) = ~288px sur 390, tient sans override */
  /* .photo-collage deja masquee <1200px ; horizon conserve (fait partie du motif) */
  /* cibles tactiles >=44px (WCAG 2.5.5 / Apple HIG) */
  .btn-step-chip{min-height:44px;display:inline-flex;align-items:center}
  .act-contact .clinks a{min-height:44px;display:inline-flex;align-items:center}
  .act-pause{min-width:44px;min-height:44px}
  .pdot{width:14px;height:14px}.pdot.active{height:30px}
  /* champs de saisie >=16px : evite le zoom auto iOS */
  .cfield input,.cfield textarea{font-size:16px}
  /* corps de texte lisible */
  .act-approche .body p{font-size:clamp(1rem,4vw,1.15rem)}
  /* labels boussole : jamais coupés — retour à la ligne autorisé, largeur bornée, ancrés vers l'intérieur */
  .tag{white-space:normal;max-width:44vw;text-align:center;line-height:1.14;font-size:clamp(.6rem,3vw,.92rem);padding:.28em .8em;overflow-wrap:break-word}
  .hand.etab .tag,.hand.part .tag{left:auto;right:0;transform:none}
  .hand.eleve .tag,.hand.famille .tag{left:0;right:auto;transform:none}
}
/* MOBILE : halos des mains STATIQUES (pas de backdrop-filter relu à chaque frame au-dessus du compas qui tourne — grosse économie GPU/chauffe sur Mali) */
@media (max-width:640px){
  .hand::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.55);box-shadow:0 8px 22px rgba(29,63,115,.16),inset 0 1px 6px rgba(255,255,255,.6)}
  .qsn-quote .qbr{display:none}   /* mobile : citation en continu (retour naturel, pas de saut force) */
  .act-constat .stat{backdrop-filter:none;-webkit-backdrop-filter:none}   /* pas de reflou GPU par frame au scroll au-dessus du canvas */
}
@media (max-width:820px){
  .core{filter:none}   /* mobile/tablette : le compas tourne en CSS -> pas de drop-shadow re-rasterisé chaque frame (chauffe au repos) */
}

/* ===== [DEF — retour cliente] Boussole DESKTOP : photos retirées, accroches permanentes reliées aux mains, boussole agrandie ===== */
.hand-note{display:none}
@media(min-width:1201px){
  .rig{width:min(92vw,64vh,720px)}                 /* boussole agrandie + mains plus écartées (espace libéré par les photos) */
  .hand{overflow:visible}
  .hand.eleve{--hc:var(--jaune)}.hand.etab{--hc:var(--bleuvif)}.hand.famille{--hc:var(--turquoise)}.hand.part{--hc:var(--corail)}
  .hand-note{display:block;position:absolute;top:50%;transform:translateY(-50%);width:clamp(190px,16vw,250px);font-family:var(--font-body);font-size:clamp(.82rem,1vw,1rem);line-height:1.4;color:var(--marine);z-index:11;pointer-events:none}
  /* mains gauche : accroche à gauche, trait fin coloré côté main */
  .hand.eleve .hand-note,.hand.famille .hand-note{right:132%;text-align:right;padding-right:.9rem;border-right:2px solid var(--hc)}
  .hand.eleve .hand-note::after,.hand.famille .hand-note::after{content:"";position:absolute;top:50%;left:100%;width:26%;height:2px;background:linear-gradient(to right,var(--hc) 62%,transparent)}   /* s'estompe au contact du cercle */
  /* mains droite : accroche à droite */
  .hand.etab .hand-note,.hand.part .hand-note{left:132%;text-align:left;padding-left:.9rem;border-left:2px solid var(--hc)}
  .hand.etab .hand-note::after,.hand.part .hand-note::after{content:"";position:absolute;top:50%;right:100%;width:26%;height:2px;background:linear-gradient(to left,var(--hc) 62%,transparent)}   /* s'estompe au contact du cercle */
  /* pastilles titres : +10% et décalées pour ne pas toucher le halo glassmorph du cercle */
  .hand .tag{font-size:clamp(.88rem,1.45vw,1.12rem);padding:.34em 1.05em}
  .hand.eleve .tag,.hand.etab .tag{margin-top:16px}
  .hand.famille .tag,.hand.part .tag{margin-bottom:16px}
}

/* [DEF — retour cliente] DESKTOP : carte acteur -> pas de titre/accroche (cartes visibles en haut dès le clic). Mobile inchangé. */
@media(min-width:641px){
  #pole .ps-title,#pole .ps-appro,#pole .ps-sep{display:none}
}