/* =====================================================================
   Kerity · « style Transition » · feuille partagée des pages st-*.html
   Extraite le 22/09 soir de page-service-transition.html (bloc <style>, l.60-618),
   à l'identique, SAUF la police : Newsreader au lieu de Fraunces (choix d'Axel).
   Chemin de la police ronde corrigé pour le dossier css/.
   ===================================================================== */
@font-face{
  font-family:"Arial Rounded Kerity";
  src:url("/identite/Arial%20Rounded%20MT%20Regular.ttf") format("truetype");
  font-display:swap;
}
:root{
  --canard:#225f7c;          /* le canard du logo (point sur le i) */
  --canard-nuit:#132f3d;
  --creme:#fbf9f3;
  --creme-doux:#f4f0e6;
  --encre:#141a1d;
  --gris:#5f6a6e;
  --filet:#e3ddd0;
  --display:"Newsreader", Georgia, serif;
  --texte:"Jost", -apple-system, "Segoe UI", sans-serif;
  --ronde:"Arial Rounded Kerity", "Arial Rounded MT Bold", "Jost", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Safari iOS grossit le texte de lui-même (text autosizing) : les titres
   gonflent et débordent de leur cadre. Cette règle lui rend la main au CSS. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* garde-fou horizontal posé sur le seul body : sur html, overflow:clip
   supprime le défilement de la page entière (clip n'est pas hidden). */
body{overflow-x:clip}
body{background:var(--creme);color:var(--encre);font:400 18px/1.7 var(--texte)}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4.5vw,52px)}

:focus-visible{outline:2px solid var(--canard);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;
    transition-delay:calc(var(--rang,0) * .15s)}
  .reveal.vu{opacity:1;transform:none}
}

/* le point Kerity : la seule fantaisie autorisée */
.point::after{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;
  background:var(--canard);margin-left:.35em;vertical-align:.06em}

/* étiquettes petites capitales */
.etiquette{font:500 .72rem/1 var(--texte);letter-spacing:.28em;text-transform:uppercase;color:var(--gris)}

/* ---------- boutons ---------- */
.btn{display:inline-block;font:500 .8rem/1 var(--texte);letter-spacing:.16em;text-transform:uppercase;
  color:var(--creme);background:var(--encre);border:1px solid var(--encre);
  padding:1.05rem 2rem;border-radius:0;text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--canard);border-color:var(--canard)}
.btn.filaire{background:transparent;color:var(--encre)}
.btn.filaire:hover{background:var(--encre);color:var(--creme)}
.btn.blanc{background:transparent;color:var(--creme);border-color:var(--creme)}
.btn.blanc:hover{background:var(--creme);color:var(--encre)}

/* ---------- placeholders photo : la description en texte ---------- */
.photo-slot{position:relative;overflow:hidden;background:linear-gradient(155deg,#0f272f,#1c4354 55%,#2c5a6b)}
.photo-slot.chaud{background:linear-gradient(155deg,#2a2018,#4a3826 55%,#6b563a)}
.photo-slot.vegetal{background:linear-gradient(155deg,#101d14,#1e3626 55%,#2c4a33)}
.photo-slot::after{content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.32'/%3E%3C/svg%3E")}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-slot .desc{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:8%;text-align:center}
.photo-slot .desc p{font-family:var(--display);font-style:italic;font-size:clamp(.85rem,1.4vw,1.05rem);
  line-height:1.55;color:rgba(251,249,243,.75);max-width:34em}
.photo-slot .desc p b{display:block;font-family:var(--texte);font-style:normal;font-weight:500;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,249,243,.55);margin-bottom:10px}

/* ---------- en-tête « maison » : logo centré en haut de page ; barre compacte après le héro ---------- */
header.site{background:var(--creme)}
.masthead{border-bottom:1px solid var(--filet);background:var(--creme)}
header.site.compact{position:fixed;top:0;left:0;right:0;z-index:100;
  box-shadow:0 8px 24px -18px rgba(19,47,61,.4)}
@media (prefers-reduced-motion:no-preference){
  header.site.compact{animation:nav-descend .3s ease}
}
@keyframes nav-descend{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.compact .masthead .wrap{flex-direction:row;justify-content:space-between;align-items:center;
  gap:20px;padding-top:12px;padding-bottom:12px}
.compact .masthead img{height:18px}
.compact .rubriques{padding-bottom:0}
.masthead .wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:24px}
.masthead img{height:28px;width:auto}
.rubriques{display:flex;gap:clamp(14px,3vw,38px);flex-wrap:wrap;justify-content:center;padding-bottom:15px}
.rubriques a{font:400 .8rem/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.rubriques a:hover{color:var(--canard);border-bottom-color:var(--canard)}
.rubriques a.actif{color:var(--canard);border-bottom-color:var(--canard)}
@media (max-width:700px){
  .masthead .wrap{padding-top:16px;gap:10px}
  .masthead img{height:20px}
  .rubriques{gap:12px}
  .rubriques a{font-size:.62rem;letter-spacing:.12em}
}


/* ---------- sous-menu de rubrique (arborescence du 22/09) ----------
   25/09 : au survol, le sous-menu s'ouvre sur toute la largeur, sous la barre ;
   ses liens commencent à l'aplomb du bouton (position calculée par script : --sm-x) */
.masthead{position:relative}
.rub-groupe{position:static;display:inline-flex}
.rub-groupe>a{position:relative}
.rub-groupe>a::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:30px} /* pont : le survol tient entre le bouton et le panneau */
.sous-menu{position:absolute;top:100%;left:0;right:0;transform:translateY(-6px);
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:16px 0 22px var(--sm-x,clamp(20px,4.5vw,52px));
  background:var(--creme);border-bottom:1px solid var(--filet);box-shadow:0 16px 24px -22px rgba(19,47,61,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
.rub-groupe:hover .sous-menu,
.rub-groupe:focus-within .sous-menu{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);transition-delay:0s}
.sous-menu a{padding:8px 0;border-bottom:0;text-align:left;letter-spacing:.14em}
.sous-menu a:hover{color:var(--canard);border-bottom:0}
.mob-fille{padding-left:22px;opacity:.82}

/* lien souligné (grammaire Hermès) */
.lien-souligne{display:inline-block;font:500 .78rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;padding-bottom:10px;border-bottom:1px solid var(--encre);
  transition:color .2s,border-color .2s}
.lien-souligne:hover{color:var(--canard);border-color:var(--canard)}

/* ---------- loader : le point du i sur le vrai logo ---------- */
#loader{position:fixed;inset:0;z-index:200;background:var(--creme);display:flex;
  align-items:center;justify-content:center;opacity:1;visibility:visible;
  transition:opacity .45s ease,visibility 0s linear 0s}
/* visibility ne bascule qu'APRÈS le fondu, sinon la sortie se fait d'un coup */
#loader.cache{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s}
#loader .logo-scene{width:min(230px,56vw)}
#loader .logo-scene svg{width:100%;height:auto;display:block;overflow:visible}
#loader svg .point-i{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  #loader svg .point-i{animation:point-rebond .8s cubic-bezier(.45,0,.55,1) infinite alternate}
}
@keyframes point-rebond{
  from{transform:translateY(0)}
  to{transform:translateY(-160%)}
}

/* ---------- héro : la grande image Hermès, plein écran ---------- */
.hero{display:flex;flex-direction:column;height:calc(100svh - var(--header-h,150px))}
.hero .image{position:relative;flex:1;min-height:0;overflow:hidden}
.hero .image .voile{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(9,22,28,.55),rgba(9,22,28,.38) 45%,rgba(9,22,28,.14) 80%,transparent)}
.hero .legende{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92%,46em);z-index:3;color:var(--creme);text-align:center}
.etiquette-hero{display:block;font:500 .7rem/1 var(--texte);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(251,249,243,.75);margin-bottom:16px}
.hero .legende .devise{font-family:var(--ronde);font-size:clamp(1rem,1.9vw,1.35rem);
  line-height:1.5;letter-spacing:.04em;color:var(--creme)}
.hero .legende .sous{margin:14px auto 0;font:300 1rem/1.6 var(--texte);color:rgba(251,249,243,.8);max-width:38em}
.hero .legende .actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:24px}
.hero .legende .alt{font:400 .88rem/1 var(--texte);color:rgba(251,249,243,.85);
  text-decoration:underline;text-underline-offset:4px}
.hero .legende .alt:hover{color:var(--creme)}
@media (max-width:700px){.hero{height:auto}.hero .image{flex:none;min-height:520px}}
@media (prefers-reduced-motion:no-preference){
  .hero .image img{animation:hero-lent 9s ease-out both}
  .hero .legende>*{opacity:0;transform:translateY(14px);animation:hero-monte .8s ease forwards}
  .hero .legende .devise{animation-delay:.25s}
  .hero .legende .sous{animation-delay:.5s}
  .hero .legende .actions{animation-delay:.75s}
}
@keyframes hero-lent{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes hero-monte{to{opacity:1;transform:none}}

/* ---------- sections : la respiration Hermès ---------- */
section.calme{padding:var(--esp-section,clamp(72px,9vw,140px)) 0 0}
.sec-tete{max-width:660px;margin:0 auto;text-align:center}
.sec-tete h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-top:16px}
.sec-tete .chapo{margin-top:16px;color:var(--gris)}

/* les trois portes : rangée stricte, photos contrastées, un écran */
section.portes{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vh,52px) 0}
.portes .cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(22px,3.5vh,44px)}
@media (max-width:860px){.portes .cartes{grid-template-columns:1fr}section.portes{min-height:0}}
.porte{display:flex;flex-direction:column;text-decoration:none}
.porte .photo-slot{aspect-ratio:auto;height:clamp(220px,40vh,480px)}
@media (max-width:860px){.porte .photo-slot{aspect-ratio:auto;height:56vw;max-height:340px}}
.porte .corps{padding:16px 4px 0}
.porte h3{font-size:1.5rem;margin-top:10px}
.porte p{margin-top:10px;font-size:.97rem;color:var(--gris)}
.porte .lien{display:inline-flex;gap:8px;align-items:center;margin-top:16px;
  font:500 .76rem/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;color:var(--encre)}
.porte .lien::after{content:"→";transition:transform .25s}
.porte:hover .lien{color:var(--canard)}
.porte:hover .lien::after{transform:translateX(5px)}
.porte:hover .photo-slot{filter:brightness(1.08)}
.porte .photo-slot{transition:filter .3s}

/* parcours : bande deux colonnes */
.parcours-bande{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;
  margin-top:clamp(38px,5vw,64px)}
.parcours-bande .photo-slot{aspect-ratio:3/4;max-width:480px}
@media (max-width:860px){.parcours-bande{grid-template-columns:1fr}
  .parcours-bande .photo-slot{aspect-ratio:4/3;max-width:none}}
.parcours-bande .texte h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-top:16px}
.parcours-bande .texte p{margin-top:18px;color:var(--gris)}
.parcours-bande .texte p strong{font-weight:500;color:var(--encre)}
.marques{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--filet)}
.marques span{font:500 .74rem/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.parcours-bande .lien-page{display:inline-block;margin-top:26px;font:400 .92rem/1 var(--texte);
  text-decoration:underline;text-underline-offset:5px}
.parcours-bande .lien-page:hover{color:var(--canard)}

/* étapes : filets fins */
.deroule .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(38px,5vw,64px)}
@media (max-width:860px){.deroule .etapes{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.etape{position:relative;padding-top:20px}
.etape::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--encre)}
.etape .no{font-family:var(--display);font-size:1.05rem;color:var(--canard)}
.etape h3{font-size:1.3rem;margin-top:10px}
.etape p{margin-top:10px;font-size:.96rem;color:var(--gris)}
@media (prefers-reduced-motion:no-preference){
  .etapes .etape{opacity:0;transform:translateY(16px);
    transition:opacity .6s ease,transform .6s ease}
  .etapes .etape::before{transform:scaleX(0);transform-origin:left;transition:transform .8s ease,opacity .5s ease}
  /* 25/09 (AGN-13) : décalage par rang, posé par le script (--rang), quel que soit le nombre d'étapes */
  .etapes .etape,.etapes .etape::before{transition-delay:calc(var(--rang,0) * .3s)}
  .etapes.anime .etape{opacity:1;transform:none}
  /* 25/09 (AGN-12, validé par Axel) : les filets se remplissent une fois chacun, l'un après
     l'autre (0,8 s, pause 0,3 s) ; tous pleins, ils restent 1,5 s, s'effacent ensemble en
     fondu, et la série recommence. Le rythme est piloté par js/kerity-transition.js (.plein). */
  .etapes.anime .etape::before{transition-delay:0s}
  .etapes.anime .etape.plein::before{transform:scaleX(1)}
  .etapes.anime.efface .etape::before{opacity:0}
  .etapes.anime.net .etape::before{transition:none}
}
.deroule .action{text-align:center;margin-top:clamp(38px,5vw,60px)}

/* cartes duo coaching / conseil */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,30px);margin-top:clamp(34px,4.5vw,56px)}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.carte-duo{background:#fff;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .3s ease}
.carte-duo:hover{box-shadow:0 24px 50px -30px rgba(19,47,61,.5)}
.carte-duo .photo-slot{margin:clamp(18px,2.5vw,30px);aspect-ratio:4/3}
.carte-duo .corps{text-align:center;padding:0 24px clamp(24px,3vw,38px)}
.carte-duo h3{font-style:italic;font-size:clamp(1.35rem,2.4vw,1.8rem)}
.carte-duo .lien-souligne{margin-top:18px}

/* dessin à la main + titre manuscrit */
.main-dessin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:center;
  margin-top:clamp(34px,4.5vw,56px)}
@media (max-width:760px){.main-dessin{grid-template-columns:1fr}}
.titre-manuscrit{font:400 clamp(1.5rem,3vw,2.1rem)/1.25 "La Belle Aurore",cursive;color:var(--encre)}
.main-dessin .cadre-dessin svg{width:100%;height:auto}
.main-dessin .texte p{font-size:1.06rem;color:var(--gris);max-width:34em}
.main-dessin .liens{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px}

/* bande matière + chiffres */
.bande-chiffres{position:relative;max-width:1240px;width:calc(100% - clamp(40px,9vw,104px));
  margin:var(--esp-section,clamp(72px,9vw,140px)) auto 0;overflow:hidden}
.bande-chiffres .photo-slot{position:absolute;inset:0}
.bande-chiffres .voile{position:absolute;inset:0;background:rgba(25,26,16,.5)}
.bande-chiffres .contenu{position:relative;z-index:2;color:var(--creme);text-align:center;
  padding:clamp(50px,7vw,90px) clamp(20px,5vw,60px)}
.bande-chiffres h2{font-style:italic;font-size:clamp(1.5rem,2.8vw,2rem);color:var(--creme)}
.bande-chiffres .chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(28px,4vw,46px)}
@media (max-width:700px){.bande-chiffres .chiffres{grid-template-columns:1fr;gap:30px}}
.bande-chiffres .val{font:400 clamp(1.6rem,3.4vw,2.6rem)/1.1 var(--display);letter-spacing:.04em}
.bande-chiffres .val small{font-size:.45em;letter-spacing:.18em;vertical-align:.4em}
.bande-chiffres .leg{margin-top:8px;font:300 .95rem/1.4 var(--texte);color:rgba(251,249,243,.8)}
.bande-chiffres .lien-souligne{margin-top:clamp(26px,4vw,42px);color:var(--creme);border-color:var(--creme)}
.bande-chiffres .lien-souligne:hover{color:#bcd6e4;border-color:#bcd6e4}

/* bloc document */
.bloc-doc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,80px);align-items:center;
  margin-top:clamp(34px,4.5vw,56px)}
@media (max-width:760px){.bloc-doc{grid-template-columns:1fr}}
.bloc-doc .scene{display:flex;justify-content:center;padding:clamp(10px,2vw,26px) 0}
.couverture{width:min(280px,80%);aspect-ratio:210/297;background:#fffdf8;
  border:1px solid var(--filet);transform:rotate(-3.5deg);
  box-shadow:0 30px 60px -25px rgba(19,47,61,.4),0 6px 18px -8px rgba(19,47,61,.18);
  padding:9% 8%;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:6%}
@media (prefers-reduced-motion:no-preference){
  .couverture{animation:carnet-flotte 6s ease-in-out infinite}
}
@keyframes carnet-flotte{
  0%,100%{transform:rotate(-3.5deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-10px)}
}
.couverture .titre-doc{font:400 1.05rem/1.35 "La Belle Aurore",cursive}
.couverture .sous-doc{font:300 .5rem/1.4 var(--texte);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.couverture svg{width:70%;height:auto;margin-top:4%}
.couverture .pied-doc{margin-top:auto}
.couverture .pied-doc img{height:14px;margin:0 auto}
.bloc-doc h2{font-style:italic;font-size:clamp(1.5rem,2.8vw,2rem)}
.bloc-doc .precision{color:var(--gris);margin-top:10px}
.bloc-doc .liens{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px}

/* la bande témoin : large mais jamais collée aux bords (relevé Hermès) */
.temoin{margin-top:var(--esp-section,clamp(72px,9vw,140px))}
.temoin .cadre{position:relative;max-width:1240px;
  width:calc(100% - clamp(40px,9vw,104px));margin:0 auto}
/* jamais de min-height avec aspect-ratio : la hauteur minimale imposerait
   une largeur (420 x 21/8 = 1103px) et ferait déborder la page. */
.temoin .photo-slot{width:100%;min-height:0;aspect-ratio:21/8}
@media (max-width:860px){.temoin .photo-slot{aspect-ratio:3/2}}
@media (max-width:560px){.temoin .photo-slot{aspect-ratio:4/5}}
.temoin .contenu{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 clamp(20px,6vw,80px)}
.temoin .voile{position:absolute;inset:0;z-index:2;background:rgba(9,22,28,.45)}
.temoin blockquote{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.9rem);
  line-height:1.5;color:var(--creme);max-width:30em}
.temoin .qui{margin-top:18px;font:500 .72rem/1 var(--texte);letter-spacing:.26em;
  text-transform:uppercase;color:rgba(251,249,243,.7)}
.temoin .note{margin-top:22px;font:300 .8rem/1.5 var(--texte);color:rgba(251,249,243,.55);max-width:34em}

/* conseils */
.conseils .cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(38px,5vw,64px)}
@media (max-width:860px){.conseils .cartes{grid-template-columns:1fr}}
.conseil{text-decoration:none;display:flex;flex-direction:column}
.conseil .photo-slot{aspect-ratio:16/10}
.conseil .corps{padding:20px 4px 0}
.conseil .theme{font:500 .68rem/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;color:var(--canard)}
.conseil h3{font-size:1.22rem;margin-top:8px}
.conseil .date{display:block;margin-top:10px;font:300 .8rem/1.4 var(--texte);color:var(--gris)}
.conseil:hover h3{color:var(--canard)}

/* appel final */
.appel{padding:clamp(90px,11vw,170px) 0;text-align:center}
.appel h2{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:17em;margin:16px auto 0}
.appel .devise{font-family:var(--ronde);font-size:1.02rem;letter-spacing:.04em;color:var(--canard);
  max-width:34em;margin:22px auto 0}
.appel p.detail{max-width:34rem;margin:16px auto 0;color:var(--gris)}
.appel .btn{margin-top:38px}

/* pied de page : calme, sur crème */
footer.site{border-top:1px solid var(--filet);background:var(--creme-doux);
  padding:clamp(50px,6vw,80px) 0 40px;font-size:.92rem;color:var(--gris)}
footer.site .colonnes{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
@media (max-width:860px){footer.site .colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .colonnes{grid-template-columns:1fr}}
footer.site .logo-pied img{height:52px;width:auto}
footer.site h4{font:500 .7rem/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;
  color:var(--encre);margin-bottom:14px}
footer.site ul{list-style:none;display:grid;gap:9px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--canard);text-decoration:underline;text-underline-offset:4px}
footer.site .bas{border-top:1px solid var(--filet);margin-top:44px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 30px;font-size:.78rem}

/* ---------- palier mobile : la typo des titres descend vraiment ----------
   Les clamp() avaient des bornes basses trop hautes (30px et 34px sur un
   écran de 371px). Ce bloc ne s'applique qu'en dessous de 560px : le rendu
   desktop et tablette reste identique. */
@media (max-width:560px){
  .sec-tete h2{font-size:1.55rem}
  .parcours-bande .texte h2{font-size:1.55rem}
  .appel h2{font-size:1.7rem}
  .appel .detail,.appel .devise{font-size:.95rem}
  .carte-duo h3{font-size:1.18rem}
  .bande-chiffres h2,.bloc-doc h2{font-size:1.28rem}
  .temoin blockquote{font-size:1.05rem}
  .porte h3{font-size:1.25rem}
  .etape h3{font-size:1.12rem}
  .conseil h3{font-size:1.08rem}
  .titre-manuscrit{font-size:1.35rem}
  .hero .legende .devise{font-size:1.02rem}
  .hero .legende .sous{font-size:.94rem}
  body{font-size:17px}
  /* en-tête : 120px de haut, c'était un sixième de l'écran.
     En mobile la barre devient logo + bouton Menu, sur une seule ligne. */
  .masthead .wrap{flex-direction:row;align-items:center;justify-content:space-between;
    padding-top:13px;padding-bottom:13px;gap:16px}
  .masthead img{height:19px}
  .masthead .rubriques{display:none}
  .masthead .menu-bouton{display:inline-flex}
}

/* ---------- menu mobile ---------- */
.menu-bouton{display:none;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:6px 2px;color:var(--encre);font:500 .62rem/1 var(--texte);
  letter-spacing:.2em;text-transform:uppercase}
.menu-bouton .barres{display:inline-flex;flex-direction:column;gap:5px;width:20px}
.menu-bouton .barres i{display:block;height:1px;background:var(--encre)}
.menu-bouton .barres i:last-child{width:13px;margin-left:auto}

#menu-mobile{position:fixed;inset:0;z-index:150;background:var(--creme);
  display:flex;flex-direction:column;padding:22px clamp(20px,6vw,40px) 40px;
  opacity:0;transition:opacity .3s ease}
/* sans cette règle, l'ID bat l'attribut [hidden] : le panneau reste posé
   par-dessus la page, invisible, et intercepte tous les clics. */
#menu-mobile[hidden]{display:none}
#menu-mobile.ouvert{opacity:1}
#menu-mobile .tete{display:flex;align-items:center;justify-content:space-between}
#menu-mobile .tete img{height:19px;width:auto}
#menu-mobile .fermer{background:none;border:0;cursor:pointer;color:var(--gris);
  font:500 .62rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;padding:6px 2px}
#menu-mobile nav{display:grid;gap:4px;margin-top:auto;margin-bottom:auto}
#menu-mobile nav a{font-family:var(--display);font-size:1.75rem;font-weight:300;
  font-style:italic;text-decoration:none;color:var(--encre);padding:11px 0;
  border-bottom:1px solid var(--filet)}
#menu-mobile nav a:last-child{border-bottom:0}
#menu-mobile .btn{align-self:flex-start}
body.menu-ouvert{overflow:hidden}

/* les ancres ne doivent pas passer sous la barre fixe */
section[id],[id]{scroll-margin-top:96px}

/* ---------- pages de service : ajouts ---------- */
.fil-ariane{font:500 .72rem/1 var(--texte);letter-spacing:.08em;color:var(--gris)}
.fil-ariane a{color:var(--gris);text-decoration:none}
.fil-ariane a:hover{color:var(--canard)}
.fil-ariane .sep{margin:0 8px;opacity:.5}

/* le titre occupe l'écran : la bande d'identité arrive juste au pli */
.page-titre{position:relative;text-align:center;display:flex;align-items:center;
  min-height:calc(100svh - 168px);
  padding:clamp(56px,7vw,86px) 0 clamp(28px,4vw,46px)}
.page-titre > .wrap{width:100%}
.page-titre .fil-ariane{position:absolute;top:clamp(14px,2vw,22px);left:0;right:0}
@media (max-width:700px){.page-titre{min-height:0;padding-top:clamp(52px,9vw,70px)}}
.page-titre h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:19em;margin:16px auto 0}
.page-titre .accroche{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.3;color:var(--canard);
  max-width:20em;margin:14px auto 0}
.page-titre .chapo{max-width:44em;margin:18px auto 0;color:var(--gris);font-size:1.05rem}

.faq{max-width:760px;margin:var(--esp-tete,clamp(34px,4.5vw,54px)) auto 0}
.faq details{border-top:1px solid var(--filet);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--filet)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;font-family:var(--display);font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{font-family:var(--texte);font-size:1.4rem;color:var(--canard);flex:none}
.faq p{margin-top:14px;color:var(--gris);max-width:60ch}

.financement{background:var(--creme-doux)}
.financement .grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin-top:clamp(28px,3.5vw,40px)}
.financement .chiffre{background:#fff;padding:26px 22px;text-align:center}
.financement .chiffre .val{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);color:var(--canard)}
.financement .chiffre .leg{margin-top:8px;font-size:.85rem;color:var(--gris)}
.financement .note{max-width:640px;margin:22px auto 0;text-align:center;font-size:.85rem;color:var(--gris)}

/* ---------- bloc 6 : le cadre et le tarif ---------- */
/* « section.calme » impose padding-bottom:0 : on égalise la spécificité pour le rétablir */
section.modalites{background:var(--creme-doux);padding-bottom:var(--esp-section,clamp(72px,9vw,140px))}
.modalites .grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin-top:clamp(28px,3.5vw,40px)}
@media (max-width:860px){.modalites .grille{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.modalites .carte{background:#fff;padding:clamp(26px,3vw,34px) clamp(22px,2.5vw,28px)}
.modalites .carte .etiquette{color:var(--canard)}
.modalites .carte h3{margin-top:12px;font-size:clamp(1.15rem,1.8vw,1.35rem)}
.modalites .carte p{margin-top:10px;color:var(--gris);font-size:.94rem}
.modalites .action{text-align:center;margin-top:clamp(30px,4vw,44px)}

/* ---------- bandeau « page exemple » ---------- */
.bandeau-exemple{background:#7a2e1f;color:#fbf0e8;font:400 .82rem/1.5 var(--texte);
  padding:10px 0;text-align:center;position:relative;z-index:60}
.bandeau-exemple b{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.74rem}
.simule{border-bottom:1px dotted rgba(122,46,31,.5);cursor:help}
.tag-simule{display:inline-block;vertical-align:.12em;margin-left:8px;padding:2px 7px;
  font:500 .6rem/1.5 var(--texte);letter-spacing:.14em;text-transform:uppercase;
  color:#7a2e1f;background:rgba(122,46,31,.1);border-radius:2px}

/* ---------- situations en texte, sans photo ---------- */
.portes .cartes.texte{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.portes .cartes.texte{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.cas{border-top:2px solid var(--encre);padding-top:clamp(18px,2.2vw,24px)}
.cas .dit{font-family:var(--display);font-style:italic;font-size:clamp(1.12rem,1.9vw,1.32rem);
  line-height:1.35}
.cas .qui-dit{display:block;margin-top:10px;font:500 .68rem/1 var(--texte);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.cas p{margin-top:14px;color:var(--gris);font-size:.95rem}
/* 25/09 (AGN-10) : réglages du module « Ça vous parle ? », remontés de st-bilan-competences.html */
section.portes.situations{padding-bottom:clamp(20px,3vw,40px)}
.portes.situations .cartes{gap:clamp(18px,3vw,40px);margin-top:clamp(30px,4vw,50px)}

/* ---------- le cas raconté ---------- */
.recit{background:var(--canard-nuit);color:var(--creme);margin-top:var(--esp-section,clamp(72px,9vw,140px));
  padding:clamp(60px,7vw,110px) 0}
.recit .sec-tete h2{color:var(--creme)}
.recit .sec-tete .etiquette{color:rgba(251,249,243,.6)}
.recit .sec-tete .chapo{color:rgba(251,249,243,.7)}
.recit .temps{max-width:780px;margin:var(--esp-tete,clamp(34px,4.5vw,54px)) auto 0}
.recit .temps > div{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,32px);
  padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid rgba(251,249,243,.16)}
.recit .temps > div:last-of-type{border-bottom:1px solid rgba(251,249,243,.16)}
.recit .temps .quand{font:500 .68rem/1.5 var(--texte);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,249,243,.55);padding-top:.35em;min-width:6.5em}
.recit .temps h3{font-size:clamp(1.1rem,1.9vw,1.3rem);color:var(--creme)}
.recit .temps p{margin-top:9px;color:rgba(251,249,243,.78);font-size:.96rem}
.recit blockquote{max-width:700px;margin:clamp(30px,4vw,46px) auto 0;text-align:center;
  font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.3vw,1.6rem);
  line-height:1.4}
.recit .qui{display:block;margin-top:16px;font:500 .7rem/1 var(--texte);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(251,249,243,.6)}
.recit .pied{max-width:700px;margin:clamp(26px,3.5vw,38px) auto 0;text-align:center}
.recit .mention{margin-top:18px;font-size:.78rem;color:rgba(251,249,243,.5);line-height:1.5}
@media (max-width:640px){
  .recit .temps > div{grid-template-columns:1fr;gap:8px}
  .recit .temps .quand{padding-top:0}
}

/* ---------- signature d'auteur ---------- */
.signature{border-top:1px solid var(--filet);margin-top:clamp(60px,8vw,110px);
  padding:clamp(44px,5.5vw,70px) 0}
.signature .bloc{max-width:820px;margin:0 auto;display:grid;
  grid-template-columns:clamp(96px,12vw,132px) 1fr;gap:clamp(22px,3.5vw,42px);align-items:start}
.signature .portrait{aspect-ratio:3/4;background:linear-gradient(155deg,#1c4354,#2c5a6b);
  display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;
  font:500 .56rem/1.4 var(--texte);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(251,249,243,.8)}
.signature h2{font-size:clamp(1.35rem,2.3vw,1.7rem)}
.signature .role{margin-top:8px;font:500 .7rem/1 var(--texte);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris)}
.signature p{margin-top:16px;color:var(--gris);font-size:.96rem}
.signature .lien-souligne{margin-top:20px}
@media (max-width:640px){
  .signature .bloc{grid-template-columns:1fr;max-width:420px}
  .signature .portrait{aspect-ratio:4/3}
}

/* ---------- le test embarqué ---------- */
.test-orientation{background:var(--canard-nuit);color:var(--creme);position:relative;overflow:hidden}
.test-orientation::before{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.25'/%3E%3C/svg%3E")}
.test-orientation .wrap{position:relative}
.test-intro{max-width:640px;margin:0 auto;text-align:center}
.test-intro .etiquette{color:rgba(251,249,243,.6)}
.test-intro h2{color:var(--creme);margin-top:14px}
.test-intro p{margin-top:14px;color:rgba(251,249,243,.72);max-width:44ch;margin-inline:auto}
.test-carte{max-width:640px;margin:clamp(28px,4vw,44px) auto 0;background:rgba(251,249,243,.06);
  border:1px solid rgba(251,249,243,.18);padding:clamp(26px,4vw,44px)}
.test-progress{height:3px;background:rgba(251,249,243,.15);overflow:hidden;margin-bottom:clamp(24px,3vw,34px)}
.test-progress i{display:block;height:100%;background:var(--canard);width:20%;transition:width .5s ease}
.test-etape{font:500 .68rem/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;color:rgba(251,249,243,.5)}
.test-question{font-family:var(--display);font-size:clamp(1.25rem,2.5vw,1.7rem);margin-top:14px;line-height:1.32}
.test-options{margin-top:24px;display:grid;gap:10px}
.test-options button{text-align:left;background:transparent;border:1px solid rgba(251,249,243,.28);
  color:var(--creme);padding:15px 18px;font:400 .95rem/1.4 var(--texte);cursor:pointer;
  transition:border-color .2s,background .2s}
.test-options button:hover{border-color:var(--canard)}
.test-options button.choisi{border-color:var(--canard);background:rgba(34,95,124,.35)}
.test-nav{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(22px,3vw,30px)}
.test-retour{background:none;border:none;color:rgba(251,249,243,.6);font:400 .84rem/1 var(--texte);
  cursor:pointer;text-decoration:underline;padding:0}
.test-retour:disabled{opacity:.25;cursor:default}
.test-compte{font:400 .78rem/1 var(--texte);color:rgba(251,249,243,.45)}
.test-etape-bloc.masque{display:none}
.test-resultat{text-align:center}
.test-resultat .icone{width:52px;height:52px;border-radius:50%;background:var(--canard);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.test-resultat h3{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.75rem)}
.test-resultat p{margin-top:14px;color:rgba(251,249,243,.75);max-width:46ch;margin-inline:auto}
.test-resultat .btn{margin-top:24px}

/* =====================================================================
   AJOUTS pour les pages st-*.html (22/09 soir), absents de Transition.
   Tout ce qui suit est nouveau ; ce qui précède est la copie de Transition.
   ===================================================================== */
/* nav figée : Contact en bouton, radius 3px (comme index-v2.html l.305-307) */
.rubriques a.nav-cta{border:1px solid var(--canard);border-radius:3px;padding:9px 20px;color:var(--canard)}
.rubriques a.nav-cta:hover{background:var(--canard);color:var(--creme);border-color:var(--canard)}
#menu-mobile nav a.nav-cta{color:var(--canard)}
/* crédit photo obligatoire (Claudine Coupé) */
.credit-photo{margin:18px 0 0;font-size:.8rem;color:var(--gris);text-align:center}
/* remplace les style="" de Transition */
.page-titre .action{margin-top:28px}
.recit .lien-souligne{color:#fff;border-color:rgba(251,249,243,.4)}
.signature .role.membre{letter-spacing:.06em;text-transform:none;font-weight:400}
.signature .role.membre a{color:var(--canard)}
footer.site .logo-pied p{margin-top:16px;max-width:26rem}
/* 4 étapes au lieu de 3 (piliers) */
.deroule .etapes.quatre{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.deroule .etapes.quatre{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.deroule .etapes.quatre{grid-template-columns:1fr}}
.etape h3 b{font-weight:400;font-style:italic;color:var(--canard-nuit)}
.etape p em{font-style:normal;color:var(--canard)}
/* cartes blanches sur bande crème (section.modalites) : liste et lien */
.modalites .carte ul{list-style:none;margin-top:14px;border-top:1px solid var(--filet)}
.modalites .carte li{padding:8px 0;border-bottom:1px solid var(--filet);font-size:.92rem}
.modalites .carte .but{margin-top:14px;font:italic 400 1rem/1.4 var(--display);color:var(--canard-nuit)}
.modalites .carte .lien-souligne{margin-top:18px}
.modalites .carte{display:flex;flex-direction:column}
.modalites .carte .lien-souligne{align-self:flex-start;margin-top:auto;padding-top:18px}
/* duo sans photo */
.carte-duo.sans-photo .corps{padding-top:clamp(26px,3vw,38px)}
.carte-duo .critere{margin-top:8px;font:400 1.05rem/1.4 var(--display);color:var(--canard)}
.carte-duo .corps p{margin-top:12px;color:var(--gris);font-size:.96rem}
.duo-note{text-align:center;margin-top:26px;color:var(--gris);font-style:italic;font-size:.95rem}
/* bande de marques centrée */
.marques.centre{justify-content:center;margin-top:clamp(30px,4vw,44px)}
.sec-suite{text-align:center;margin-top:clamp(30px,4vw,44px)}
/* 25/09 (AGN-7) : ligne-lien sous une section (« Vous dirigez une entreprise ? » + lien souligné) */
.ligne-lien{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:12px 26px;color:var(--gris)}
/* 25/09 (AGN-7) : 2 étapes (page Équipe, après le départ des blocs conseil) */
.deroule .etapes.deux{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
@media (max-width:860px){.deroule .etapes.deux{grid-template-columns:1fr}}
.modalites .carte .etiquette{line-height:1.6}