/* ==========================================================================
   Essentiellement Soi — Design system (refonte 2026, voie A)
   Couleurs & tailles échantillonnées au pixel sur medias/2026/JPG/HOME.
   Palette TEXTE stricte : navy (tout le texte) + corail (2 titres/CTA) + teal (filets).
   ========================================================================== */

@font-face{font-family:"Oxygen";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/oxygen-light.woff2") format("woff2");}
@font-face{font-family:"Oxygen";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/oxygen-regular.woff2") format("woff2");}
@font-face{font-family:"Oxygen";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oxygen-bold.woff2") format("woff2");}

:root{
  --navy:#215168;        /* TOUT le texte (titres + corps), la graisse fait la hiérarchie */
  --navy-deep:#10385C;   /* fond header + footer */
  --navy-700:#0F2E48;
  --coral:#EC7553;       /* 2 titres (Se reconnaître, Des expériences) + boutons + carrés */
  --coral-dark:#D9613E;
  --teal:#5FB3AA;        /* filets / soulignements / menu actif */
  --menu:#A6C0CD;        /* texte du menu (atténué) */
  --cream:#FFF7F5;       --white:#FFFFFF;
  --line:#eee9e6;

  --ff:"Oxygen",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --container:1180px;    --pad:24px;
  --radius:14px;   --radius-sm:9px;   --radius-pill:999px;
  --shadow-sm:0 8px 24px rgba(33,81,104,.06);
  --shadow-md:0 16px 44px rgba(33,81,104,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);font-weight:400;font-size:16px;line-height:1.7;
  color:var(--navy);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:72px}
.section--cream{background:var(--cream)}
.center{text-align:center}

/* -------- Typographie ----------------------------------------------------- */
.kicker{display:inline-flex;align-items:center;gap:.5em;color:var(--navy);
  font-weight:700;letter-spacing:-1px;text-transform:uppercase;font-size:1.2rem;margin-bottom:1rem;opacity:1}
.kicker::before,.kicker::after{content:"-"}
.kicker--start{justify-content:flex-start}
.kicker--teal{color:#7BC8CA;background-color:#fff;padding:10px 20px;border-radius:50px;margin-top:10px}
/* Fix z-index : la section passe au-dessus du lavis coral qui déborde de .anne-zone
   (sinon le lavis, positionné z-index:0, se peint par-dessus et masque le pill blanc). */
.moments{position:relative;z-index:1}
.title{font-weight:700;color:var(--navy);line-height:1.1;letter-spacing:-.01em;
  font-size:clamp(2.05rem,3.5vw,2.85rem)}         /* ~46px @1366 */
.title--coral{color:var(--coral)}
.lead{font-weight:600;color:var(--navy);font-size:1.40rem;line-height:1.55}
.section-head{max-width:100%}
.section-head.center{margin-inline:auto}
.section-head .title{margin-bottom:.55rem}

/* -------- Boutons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:700;font-size:1rem;line-height:1;padding:15px 30px;border-radius:var(--radius-pill);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--coral{background:var(--coral);color:#fff;box-shadow:0 10px 24px rgba(236,117,83,.26)}
.btn--coral:hover{background:#F2937A}
.btn--navy{background:var(--navy-deep);color:#fff;box-shadow:0 10px 24px rgba(16,56,92,.20)}
.btn--navy:hover{background:#7BC8CA}
.btn .ico{width:1.15em;height:1.15em}

.sq-btn{width:35px;height:50px;border-radius:0;background:#EE7554;color:#fff;flex:0 0 auto;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;padding-top:10px;transition:background .2s var(--ease)}
.sq-btn:hover{background:var(--coral-dark)}
.sq-btn .ico{width:20px;height:20px}
.sq-btn img{width:23px;height:auto;display:block}

/* filet teal (soulignement de titres) */
.uline{display:block;width:53px;height:3px;background:var(--teal);border-radius:2px}

/* -------- Header ---------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy-deep);color:#fff}
.site-header .bar{display:flex;align-items:center;justify-content:center;gap:20px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__blob{width:30px;height:30px;object-fit:contain}
.brand__name{font-weight:700;font-size:1.08rem;white-space:nowrap;position:relative;color:#fff}
/* wordmark attenue sur les pages ou l'accueil n'est pas la page active (maquettes) */
.brand:not([aria-current="page"]) .brand__name{color:#AAC0C9}
.brand[aria-current="page"] .brand__name::after{content:"";position:absolute;left:0;width:58px;bottom:-3px;height:3px;background:#7BC8CA;border-radius:2px}
.nav{display:flex;align-items:center;gap:26px;margin-left:16px}
.nav a{font-size:15px;font-weight:700;color:#AAC0C9;position:relative;padding:6px 0;transition:color .18s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
/* soulignement teal du menu actif / au survol (spec header + maquettes pages interieures) */
.nav a:hover::after,.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;width:58px;bottom:2px;height:3px;background:#7BC8CA;border-radius:2px}
.header-tools{display:flex;align-items:center;gap:14px;margin-left:26px;align-self:stretch}
.social{display:flex;align-items:center;gap:11px}
.social a{color:rgba(255,255,255,.9);transition:color .18s,transform .18s}
.social a:hover{color:#fff;transform:translateY(-1px)}
.social .sep{width:3px;height:17px;background:#7BC8CA;flex:0 0 auto}
.header-sep{display:none}
.header-sq{display:flex;gap:10px;align-self:stretch;align-items:flex-start}
.burger{display:none;width:44px;height:44px;border-radius:8px;color:#fff}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px auto;border-radius:2px;transition:.25s var(--ease)}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* -------- Hero (photo + DOUBLE vague : teal translucide + blanche) ------- */
.hero{position:relative;height:750px;background:var(--navy) bottom/cover no-repeat;overflow:hidden}
/* Élément plein cadre (bas toujours blanc) ; la rotation se fait sur le CONTENU
   du viewBox (cf. accueil.php) → aucun coin découvert possible.
   Hauteur = échelle du viewBox (700u) ; la marge haute transparente évite que la
   crête soit rognée par le bord du SVG quand on incline (sinon bord photo visible). */
.hero__waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:357px;display:block}

/* -------- Section "Revenir" : 3 cartes ----------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.moment{background:#AAC0C952;border-radius:var(--radius);
  padding:36px 30px 34px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.moment:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.moment__ico{width:100px;height:80px;object-fit:contain;margin:0 auto 14px}
.moment h3{color:var(--navy);font-weight:700;font-size:1.70rem;margin-bottom:0}
.moment .uline{margin:0 auto 1.5rem}
.moment__lead{color:var(--navy);font-weight:700;font-size:.98rem;margin-bottom:.85rem}
.moment p{color:var(--navy);font-size:1.04rem;line-height:1.65;opacity:.9}

.big-note{max-width:760px;margin:60px auto 0;color:var(--navy);font-size:1.19rem;line-height:1.55}

/* -------- Split (Anne) ---------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:stretch}
.split__media{display:flex}
.split__media img{width:100%;height:100%;min-height:440px;border-radius:var(--radius);box-shadow:var(--shadow-md);object-fit:cover}
/* Photo Anne : un peu plus étroite (-30px) et plus haute (+100px) */
.anne-zone .split__media{align-items:flex-start;justify-content:flex-end}
.anne-zone .split__media img{width:calc(100% - 30px);height:647px;min-height:0}
.prose p{margin-bottom:2rem;color:var(--navy);font-size:1rem;font-weight:400;line-height:1.45}
.prose .intro{font-size:1.4rem;line-height:1.4;font-weight:600;margin-bottom:.7rem}
.prose .b{font-weight:400;color:var(--navy)}
.prose .soft{color:var(--navy);opacity:1}
.bullets{margin:.3rem 0 .6rem}
.bullets li{position:relative;padding-left:18px;color:var(--navy);font-size:1rem;font-weight:400;margin:.05rem 0;line-height:1.45}
.bullets li::before{content:"•";position:absolute;left:0;top:-.05em;color:var(--navy);font-weight:700}

/* -------- Lavis coral décoratif (derrière Anne + Se reconnaître) --------- */
.anne-zone{position:relative;overflow-x:clip}
.anne-zone>section{position:relative;z-index:1}
/* le contenu texte reste au-dessus, mais la PHOTO passe sous le lavis pour l'effet "derrière la photo" */
.anne-zone__wash{position:absolute;z-index:0;pointer-events:none;left:50%;top:16%;width:126%;max-width:none;height:auto;transform:translateX(-50%)}

/* -------- Raisons (Se reconnaître) --------------------------------------- */
.reasons li{position:relative;padding:18px 0 18px 30px;border-top:1px solid rgba(33,81,104,.16);color:var(--navy);line-height:1.5}
.reasons li:first-child{border-top:0}
.reasons li::before{content:"";position:absolute;left:2px;top:24px;width:11px;height:11px;border-radius:50%;background:var(--coral)}

/* -------- Services (4 col, titres NAVY + filet teal) --------------------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.service{text-align:center;display:flex;flex-direction:column;background:#FAFAFB;border:1px solid #F0F0F1;
  border-radius:var(--radius);padding:32px 22px 0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Bouton calendrier des cartes : classe DÉDIÉE (ne partage plus .sq-btn du header) — hauteur 44px */
.service__cal{width:35px;height:44px;border-radius:0;background:#EE7554;color:#fff;flex:0 0 auto;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;padding-top:0;transition:background .2s var(--ease)}
.service__cal:hover{background:var(--coral-dark)}
.service__cal img{width:23px;height:auto;display:block}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.service__ico{width:82px;height:82px;object-fit:contain;margin:0 auto 14px}
.service h3{color:var(--navy);font-weight:700;font-size:1.35rem;margin-bottom:0}
.service .uline{margin:.55rem auto .9rem}
.service p{color:var(--navy);font-size:.92rem;line-height:1.6;opacity:.9}
.service p + p{margin-top:.85rem}
.service__foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;padding-top:22px}
.more-link{color:#AAC0C9;font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:.4em;transition:color .18s}
.more-link:hover{color:var(--coral)}
.more-link .ico{width:1em;height:1em;transition:transform .2s}
.service:hover .more-link .ico{transform:translateX(3px)}

/* -------- Témoignages ----------------------------------------------------- */
.testi{position:relative;padding-left:66px}
.testi::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:#D2DBDD}
.testi__avatar{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;
  background:#E0F6F4;display:flex;align-items:center;justify-content:center;z-index:1}
.testi__avatar img{width:50px;height:auto}
.testi__dots{display:flex;gap:7px;margin-bottom:18px}
.testi__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#DCE3E4;cursor:pointer;transition:background .2s,transform .2s}
.testi__dots button:hover{transform:scale(1.18)}
.testi__dots button.on{background:#92BEBF}
.testi__viewport{position:relative}
.testi__slide{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease)}
.testi__slide.is-active{position:relative;opacity:1;visibility:visible}
.testi p{color:var(--navy);font-size:.98rem;line-height:1.40}
.testi .who{margin-top:18px;color:#7BC8CA;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem}
.testi .who::before{content:"- "}
.testi .who::after{content:" -"}

/* -------- Vague footer + Footer ------------------------------------------ */
.footer-wave{display:block;width:100%;height:180px;margin-bottom:-1px}
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.82);position:relative}
.site-footer .blob{position:absolute;top:-160px;left:calc(50vw - 372px);transform:translateX(-50%);width:200px;opacity:1;pointer-events:none;z-index:0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:40px;padding-block:58px 40px;position:relative;z-index:1}
.foot-brand{align-self:center;text-align:center}
.foot-brand__name{font-weight:300;color:#AAC0C9;font-size:2.25rem;line-height:1;letter-spacing:.01em}
.foot-brand__tag{color:#AAC0C9;font-size:.95rem;margin-top:5px}
.foot-col{border-left:1px solid #fff;padding-left:26px}
.foot-col h4{color:#fff;font-weight:700;font-size:1rem;line-height:1.5;margin-bottom:.5rem}
.foot-col p{color:#fff;font-weight:400;font-size:.98rem;line-height:1.5;margin:0}
.foot-col a{color:#fff}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-col .btn:hover{text-decoration:none}
.footer-bottom{border-top:0;padding:20px 0 100px 0;text-align:center;font-size:.85rem;color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:#fff;text-decoration:underline}

/* -------- Reveal ---------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}.btn:hover,.moment:hover,.service:hover{transform:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:992px){
  .nav,.header-tools .social,.header-sep{display:none}
  .burger{display:block;order:3}
  .header-tools{margin-left:auto;gap:10px}
  .site-header .bar{gap:12px;justify-content:space-between}
  .nav{position:fixed;inset:52px 0 auto 0;background:var(--navy-deep);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px var(--pad) 22px;transform:translateY(-120%);
    transition:transform .3s var(--ease);box-shadow:0 20px 40px rgba(0,0,0,.25);max-height:calc(100vh - 52px);overflow:auto}
  body.nav-open .nav{display:flex;transform:none}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.05rem;color:#fff}
  .split{grid-template-columns:1fr}
  .split__media{order:-1;max-width:460px;margin-inline:auto}
  .grid-4{grid-template-columns:1fr 1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .foot-col:first-of-type{grid-column:1/-1}
}
@media (max-width:680px){
  :root{--pad:18px}
  .hero{height:340px}
  .hero__waves{height:179px}
  .carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scrollbar-width:none}
  .carousel::-webkit-scrollbar{display:none}
  .carousel>*{scroll-snap-align:center;flex:0 0 80%}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .foot-col{border-left:0;padding-left:0}
  .testi__blob{display:none}
}

/* ==========================================================================
   Page "A propos / L'approche" (anne-orban.php)
   Reutilise le design system de la home. Ajouts strictement necessaires,
   AUCUNE modif de la palette ni du rendu de la home.
   ========================================================================== */
/* Rythme vertical cale sur la maquette (plus resserre que la home), scope a cette page */
.page-apropos .section{padding-block:52px}
.page-apropos .prose p{margin-bottom:1.5rem}
.page-apropos .subtitle{margin-bottom:1.4rem}
.page-apropos .parcours{margin-top:30px}

/* Kicker teal des pages interieures (variante plate, sans pill) — maquette */
.kicker--accent{color:#7BC8CA}

/* Sous-titre sous un titre de section (ex : "La presence derriere chaque rencontre") — 22px, standard des sous-titres */
/* .prose .subtitle (0,2,0) bat .prose p (0,1,1) : sinon la taille/graisse du sous-titre sont ecrasees */
.subtitle,.prose .subtitle{font-weight:600;color:var(--navy);font-size:1.375rem;line-height:1.35;margin-bottom:1.4rem}

/* Parcours d'Anne : liste 2 colonnes, puces corail + filet (variante de .reasons) */
/* max-width alignee sur .narrative pour que liste et texte en dessous partagent les memes bords */
.parcours{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;max-width:1080px;margin:38px auto 0}
.parcours__col li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid rgba(33,81,104,.16);
  color:var(--navy);font-size:1rem;line-height:1.5}
.parcours__col li::before{content:"";position:absolute;left:2px;top:22px;width:11px;height:11px;border-radius:50%;background:var(--coral)}

/* Blocs narratifs centres (intro + cloture de "Un accompagnement") */
.narrative{max-width:1080px;margin-inline:auto;text-align:center}
.narrative p{color:var(--navy);font-size:1rem;line-height:1.55}
.narrative p + p{margin-top:1.4rem}

/* Split "pages interieures" : colonne texte plus large, media plus etroit (maquette) */
.split--media-narrow{grid-template-columns:1.14fr 1fr}

/* Section 1 "Plus qu'un lieu" : photo collee sous le header, texte redescendu */
.apropos-hero .split{align-items:start}
.apropos-hero .split__media{display:block}
.apropos-hero .prose{padding-top:50px}

/* Carrousel photo (zone administrable a venir) — puces style HP (temoignages) */
.pcar{width:100%}
.pcar__viewport{position:relative;height:600px;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.pcar__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease)}
.pcar__slide.is-active{opacity:1;visibility:visible}
.pcar__slide img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;min-height:0}
.pcar__dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.pcar__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#DCE3E4;cursor:pointer;transition:background .2s,transform .2s}
.pcar__dots button:hover{transform:scale(1.18)}
.pcar__dots button.on{background:#92BEBF}

/* Zone lavis : deborde verticalement (comme la HP) pour remonter derriere la photo Anne
   et redescendre derriere "LES MOMENTS DE SOUFFLE" (la pastille blanche coupe le corail).
   overflow-x:clip herite de .anne-zone empeche tout scroll horizontal. */
/* Bande calee au calcul : bord haut a 158px au-dessus de DEPUIS 2017, bord bas a 23px
   au-dessus de LES MOMENTS (offsets mesures sur la maquette XD). A 1366px de reference. */
.apropos-zone .anne-zone__wash{top:489px;width:100%;height:1193px}

/* Photo d'Anne : portrait cale a droite, hauteur propre (le texte est court) */
/* object-position:top => on garde le haut (toute la tete visible), on rogne par le bas */
.apropos-anne .split__media{align-items:flex-start;justify-content:flex-end}
.apropos-anne .split__media img{width:min(100%,455px);height:540px;object-position:top}

@media (max-width:992px){
  .split--media-narrow{grid-template-columns:1fr}
  /* Fix mobile : le carrousel .pcar (slides en position:absolute = largeur
     intrinseque nulle) + margin-inline:auto faisait retracter .split__media a
     ~0. width:100% le fait remplir la colonne. Concerne les sections a pcar
     (apropos-hero de yoga + anne-orban). */
  .apropos-hero .split__media{width:100%}
}
@media (max-width:680px){
  .parcours{grid-template-columns:1fr;column-gap:0;margin-top:26px}
  .apropos-anne .split__media img{width:100%;height:380px}
}

/* ==========================================================================
   Page "Le Yoga" (yoga.php)
   Reutilise le design system (home) + composants "pages interieures"
   (.page-apropos). Ajouts SCOPES .page-yoga : aucune modif de la home ni de
   anne-orban. Cale au pixel sur le XD (artboard Yoga) : titres 45px,
   sous-titres 22px REGULAR, corps 16px, titres de cartes 25px.
   Kickers : "L'esprit" + "bien plus qu'une pratique" = teal ;
   "collectif & individuel" = navy.
   ========================================================================== */

/* Grille 2 colonnes (composant, comme .grid-3 / .grid-4) */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

/* Sous-titres de section : 22px REGULAR (le XD Yoga = Oxygen-Regular, pas 600) */
.page-yoga .subtitle,.page-yoga .prose .subtitle{font-weight:400;color:var(--navy)}

/* Paragraphes mis en gras dans la maquette (runs Oxygen-Bold du XD) */
.page-yoga .prose-strong{font-weight:700;color:var(--navy)}

/* Rythme inter-sections = 52px COMMUN a toutes les pages interieures (directive Stephane
   2026-07-13 : meme structure partout ; ex-override yoga 78px retire). La vague .yoga-wash
   (calee en px) est recalee en consequence ci-dessous. */

/* (1) Hero : marge du 1er bloc de texte = defaut commun (50px), identique a anne-orban/soins
   (directive Stephane 2026-07-13 : meme marge sur toutes les pages ; ex-override 60px retire) */

/* Bande a vagues teal (#7BC8CA) derriere hero + section 2 : passe DERRIERE la photo
   (sections en z-index:1, bande en z-index:0) et se termine en vague apres les cartes.
   --wash-op = opacite de la bande (ajustable). Position calee au rendu vs maquette. */
/* VAGUE AUTHENTIQUE (SVG XD fourni par Stéphane) : galet Tracé 102 clippé par Tracé 103,
   roté -63°. Placement CALCULÉ : alignement de la crête sur la maquette = match 0.0px,
   échelle 1:1, offset artboard = svg-natif +(-582,+2) -> viewBox svg "582 558 1366 1140".
   opacité 0.1 = valeur du SVG source. */
.page-yoga{--wash-op:0.1}
.yoga-wash-zone{position:relative;overflow-x:clip}
.yoga-wash-zone>section{position:relative;z-index:1}
/* Position page = carte linéaire mesurée (bas photo art653->page660 ; section3 art1663->page1754,
   pente 1.083). Haut bande art560->page559 (wrapper top=60 -> top=499) ; bas art1700->page1794 -> height 1235. */
/* ⚠️ RECALEE 2026-07-13 apres passage padding-block 78->52 (rythme commun) : hero+section2
   remontent de ~52px -> height 1235->1183 (le haut top:499 reste dans le hero, inchange). */
.yoga-wash{position:absolute;left:0;width:100%;max-width:none;top:499px;height:1183px;
  z-index:0;pointer-events:none;opacity:var(--wash-op)}

/* (2) "collectif ou individuel" : paragraphe intro pleine largeur sous le titre */
.page-yoga .yoga-duo__intro{margin-top:18px;color:var(--navy);font-size:1rem;line-height:1.6}
.page-yoga .yoga-duo .grid-2{margin-top:40px}

/* Cartes Yoga : titres 25px, corps 16px (XD). Picto : ratio garde (jamais deformer) */
.page-yoga .service h3{font-size:1.5625rem}       /* 25px */
.page-yoga .service p{font-size:1rem}             /* 16px (au lieu de .92rem) */
.page-yoga .service__ico{width:auto;height:84px;max-width:130px}
/* Grandes cartes de la section 2 : plus d'air + picto 103px (XD) */
.page-yoga .service--lg{padding:40px 40px 0}
.page-yoga .service--lg .service__ico{height:103px}

/* (3) "ateliers et retraites" : texte a gauche, 2 cartes a droite */
.page-yoga .yoga-ret__split{display:grid;grid-template-columns:1.02fr 1fr;
  gap:clamp(34px,4.5vw,60px);align-items:start;margin-top:34px}
.page-yoga .yoga-ret__cards{gap:22px}

@media (max-width:992px){
  .page-yoga .yoga-ret__split{grid-template-columns:1fr}
  /* Hero mobile : photo empilee au-dessus du texte -> offset reduit, IDENTIQUE sur TOUTES
     les pages interieures (directive Stephane 2026-07-13 : meme structure partout). */
  .apropos-hero .prose{padding-top:24px}
  /* Bande teal : positionnee en px absolus (layout desktop) -> masquee en mobile */
  .yoga-wash{display:none}
}
@media (max-width:680px){
  .grid-2{grid-template-columns:1fr}
}

/* ==========================================================================
   Page "Les soins" (soins.php)
   Reutilise le design system (home) + composants "pages interieures"
   (.page-apropos). Ajouts SCOPES .page-soins : aucune modif de la home, de
   anne-orban ni de yoga. Cale sur le XD (artboard-fa2bfebc) : titre hero 45px,
   sous-titres 22px REGULAR, titres de cartes 25px, corps 16px.
   Kickers : "besoin d'un moment" + "Le bon cadeaux" = teal ;
   "Soins & Rituels" (pose sur le lavis) = navy.
   ========================================================================== */

/* Sous-titres 22px REGULAR (XD) + paragraphe hero mis en gras (run Oxygen-Bold) */
.page-soins .subtitle,.page-soins .prose .subtitle{font-weight:400;color:var(--navy)}
.page-soins .prose-strong{font-weight:700;color:var(--navy)}

/* (1) Hero : marge au-dessus du 1er bloc de texte = defaut commun (.apropos-hero .prose
   padding-top:50px) pour que le kicker soit a la MEME hauteur que anne-orban et yoga.
   (directive Stephane 2026-07-13 : marge du 1er texte identique sur toutes les pages) */
/* Coins arrondis EN BAS seulement (dessus droit), comme .pcar__viewport des autres pages */
.page-soins .soins-hero__photo{height:600px;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.page-soins .soins-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%;border-radius:0;box-shadow:none;min-height:0}

/* (2) "Un voyage vers soi" : 2 colonnes decalees (masonry fige).
   La colonne droite (Voyage) demarre plus haut que le titre de section a gauche :
   on descend la colonne gauche de ~100px (offset mesure sur la maquette). */
.page-soins .soins-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.page-soins .soins-col{display:flex;flex-direction:column;gap:40px}
.page-soins .soins-col--left{padding-top:100px}
.page-soins .soins-voyage .section-head{margin-bottom:6px}

/* Lavis coral (#FAD0BD op 0.17, extrait du XD) DERRIERE la colonne gauche, deborde a gauche.
   Le contenu (container) passe au-dessus via z-index. overflow-x:clip empeche le scroll horizontal.
   REGLE GENERALE (Stephane 2026-07-13) : la CRETE du galet remonte TOUJOURS DERRIERE la
   .split__media (photo hero). Valeur exacte fixee par Stephane (a appliquer telle quelle). */
.page-soins .soins-wash-zone{position:relative;overflow-x:clip}
.page-soins .soins-wash-zone > .container{position:relative;z-index:1}
.page-soins .soins-wash{position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);top:-360px;width:153.7%;max-width:none;height:auto}

/* Cartes soin : photo pleine largeur + corps centre (titre navy 25px, filet teal,
   accroche gras / paragraphe regular / cloture gras). */
.page-soins .soin{background:#FAFAFB;border:1px solid #F0F0F1;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.page-soins .soin:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.page-soins .soin__photo{width:100%;height:300px;object-fit:cover;display:block}
.page-soins .soin__body{padding:26px 30px 26px;text-align:center}
.page-soins .soin h3{color:var(--navy);font-weight:700;font-size:1.5625rem;line-height:1.2;margin:0}
.page-soins .soin .uline{margin:.7rem auto 1.1rem}
.page-soins .soin__lead{color:var(--navy);font-weight:700;font-size:1rem;line-height:1.5;margin-bottom:1rem}
.page-soins .soin p{color:var(--navy);font-size:1rem;line-height:1.6}
.page-soins .soin p + p{margin-top:1rem}
.page-soins .soin__close{font-weight:700}
.page-soins .soin__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.page-soins .soin__foot .more-link{font-size:.92rem}

/* Le bon cadeaux (CTA en colonne droite, aligne a gauche) */
.page-soins .soins-cadeau{padding:34px 4px 0;text-align:left}
.page-soins .soins-cadeau .kicker{margin-bottom:1rem}
.page-soins .soins-cadeau .title{margin-bottom:1rem}
.page-soins .soins-cadeau .subtitle{margin-bottom:1.6rem}

@media (max-width:992px){
  .page-soins .soins-grid{grid-template-columns:1fr;gap:34px}
  .page-soins .soins-col{gap:34px}
  .page-soins .soins-col--left{padding-top:0}
  /* Lavis positionne en px absolus (layout desktop) -> masque en mobile (comme yoga) */
  .page-soins .soins-wash{display:none}
  /* Fix mobile carrousel/photo hero (comme yoga/anne-orban) */
  .page-soins .apropos-hero .split__media{width:100%}
  /* hauteur photo hero = 600px commune (defaut), identique au carrousel des autres pages */
}
@media (max-width:680px){
  .page-soins .soin__photo{height:240px}
}

/* ==========================================================================
   Page "Les ateliers" (et-aussi.php)
   Reutilise le design system (home) + composants "pages interieures"
   (.page-apropos) + carrousel .pcar (comme yoga) + cartes .soin (comme soins).
   Ajouts SCOPES .page-ateliers : aucune modif de la home, anne-orban, yoga, soins.
   Source XD (artboard-b68cafbd) : titre hero 45px, sous-titres 22px REGULAR,
   titres de cartes 25px, corps 16px. Kickers : "Besoin d'une pause" + "Le bon
   cadeaux" = teal ; "Ateliers" (sur le lavis) = navy. Titre section = corail.
   ========================================================================== */

/* Sous-titres 22px REGULAR (XD) + runs Oxygen-Bold du hero rendus via <strong> */
.page-ateliers .subtitle,.page-ateliers .prose .subtitle{font-weight:400;color:var(--navy)}
.page-ateliers .prose strong{font-weight:700;color:var(--navy)}

/* (2) "Un temps pour ralentir" : 2 colonnes decalees (masonry fige).
   Gauche = titre de section + Relaxation sonore + Le bon cadeaux.
   Droite = Marche nocturne + Yoga rando (demarre en haut).
   Le grand vide sous le titre (maquette) = margin-bottom de la section-head gauche. */
.page-ateliers .ateliers-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.page-ateliers .ateliers-col{display:flex;flex-direction:column;gap:40px}
.page-ateliers .ateliers-col--left .section-head{margin-bottom:56px}

/* Lavis vert (#3D8F1C op 0.107, MEME galet que soins, extrait du XD) centre sur le
   contenu, deborde a gauche/haut ; contenu au-dessus via z-index ; overflow-x:clip.
   REGLE GENERALE (Stephane 2026-07-13) : la CRETE du galet doit TOUJOURS remonter DERRIERE la
   .split__media (photo hero) de la page. Valeur exacte fixee par Stephane (a appliquer telle quelle). */
.page-ateliers .ateliers-wash-zone{position:relative;overflow-x:clip}
.page-ateliers .ateliers-wash-zone > .container{position:relative;z-index:1}
.page-ateliers .ateliers-wash{position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);top:-355px;width:153.7%;max-width:none;height:auto}

/* Cartes soin (identiques a soins.php : photo 300px + corps centre, accroche/close gras) */
.page-ateliers .soin{background:#FAFAFB;border:1px solid #F0F0F1;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.page-ateliers .soin:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.page-ateliers .soin__photo{width:100%;height:300px;object-fit:cover;display:block}
.page-ateliers .soin__body{padding:26px 30px 26px;text-align:center}
.page-ateliers .soin h3{color:var(--navy);font-weight:700;font-size:1.5625rem;line-height:1.2;margin:0}
.page-ateliers .soin .uline{margin:.7rem auto 1.1rem}
.page-ateliers .soin__lead{color:var(--navy);font-weight:700;font-size:1rem;line-height:1.5;margin-bottom:1rem}
.page-ateliers .soin p{color:var(--navy);font-size:1rem;line-height:1.6}
.page-ateliers .soin p + p{margin-top:1rem}
.page-ateliers .soin__close{font-weight:700}
.page-ateliers .soin__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.page-ateliers .soin__foot .more-link{font-size:.92rem}

/* Le bon cadeaux (CTA en colonne gauche, aligne a gauche) */
.page-ateliers .soins-cadeau{padding:34px 4px 0;text-align:left}
.page-ateliers .soins-cadeau .kicker{margin-bottom:1rem}
.page-ateliers .soins-cadeau .title{margin-bottom:1rem}
.page-ateliers .soins-cadeau .subtitle{margin-bottom:1.6rem}

@media (max-width:992px){
  /* 1 colonne : on "aplatit" les 2 colonnes (display:contents) pour ordonner les
     cartes dans un ordre de lecture naturel : titre, Marche, Relaxation, Yoga, cadeau. */
  .page-ateliers .ateliers-grid{grid-template-columns:1fr;gap:34px}
  .page-ateliers .ateliers-col{display:contents}
  .page-ateliers .ateliers-col--left .section-head{margin-bottom:0;order:1}
  .page-ateliers .ateliers-col--right .soin:nth-of-type(1){order:2}
  .page-ateliers .ateliers-col--left .soin{order:3}
  .page-ateliers .ateliers-col--right .soin:nth-of-type(2){order:4}
  .page-ateliers .ateliers-col--left .soins-cadeau{order:5;padding-top:10px}
  .page-ateliers .ateliers-wash{display:none}
  .page-ateliers .apropos-hero .split__media{width:100%}
}
@media (max-width:680px){
  .page-ateliers .soin__photo{height:240px}
}

/* ==========================================================================
   Page "Les retraites" - liste (evenements.php) + detail (evenements_details.php)
   Reutilise le design system (home) + composants "pages interieures"
   (.page-apropos) + carrousel .pcar (comme yoga) + cartes .soin (comme soins).
   DYNAMIQUE : les cartes sont generees depuis t_agenda. Ajouts SCOPES .page-retraites.
   Source XD : liste artboard-b503d3ce, detail artboard-24d4c505.
   ========================================================================== */

/* Sous-titres 22px REGULAR (coherence pages interieures) + gras hero via <strong>/.prose-strong */
.page-retraites .subtitle,.page-retraites .prose .subtitle{font-weight:400;color:var(--navy)}
.page-retraites .prose-strong{font-weight:700;color:var(--navy)}

/* (2) "Les parentheses essentielles" : 2 colonnes decalees (le titre de section dans la
   colonne gauche pousse ses cartes vers le bas -> decalage naturel vs colonne droite). */
.page-retraites .retraites-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.page-retraites .retraites-col{display:flex;flex-direction:column;gap:40px}
.page-retraites .retraites-col--left .section-head{margin-bottom:16px}

/* Lavis coral (MEME galet que soins, wash-soins.svg) derriere les cartes, deborde, touche les 2 bords. */
.page-retraites .retraites-wash-zone{position:relative;overflow-x:clip}
.page-retraites .retraites-wash-zone > .container{position:relative;z-index:1}
/* REGLE GENERALE (Stephane 2026-07-13) : la CRETE du galet remonte TOUJOURS DERRIERE la
   .split__media (photo hero). Valeur exacte fixee par Stephane (a appliquer telle quelle). */
.page-retraites .retraites-wash{position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);top:-360px;width:153.7%;max-width:none;height:auto}

/* 🚨 Le galet DEBORDE vers le haut dans le hero -> le hero (photo comprise) DOIT passer AU-DESSUS
   du lavis, sinon le galet se peint PAR-DESSUS la photo (bug "lavis devant la photo").
   Le hero recoit donc son propre contexte d'empilement au-dessus du lavis (z-index 0). */
.page-ateliers .apropos-hero,
.page-soins .apropos-hero,
.page-retraites .apropos-hero{position:relative;z-index:1}

/* Cartes retraite (composant .soin verbatim soins/ateliers). Affiche portrait (agenda_img). */
.page-retraites .soin{background:#FAFAFB;border:1px solid #F0F0F1;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.page-retraites .soin:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.page-retraites .soin__photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;display:block;background:#EEF2F1}
.page-retraites .soin__body{padding:26px 30px 30px;text-align:center}
.page-retraites .soin h3{color:var(--navy);font-weight:700;font-size:1.5625rem;line-height:1.2;margin:0}
.page-retraites .soin .uline{margin:.7rem auto 1.1rem}
.page-retraites .soin p{color:var(--navy);font-size:1rem;line-height:1.6}
.page-retraites .soin p + p{margin-top:1rem}
.page-retraites .soin__dates{color:var(--coral);font-weight:700;margin-top:1rem}
.page-retraites .soin__note{color:var(--navy);font-weight:400;font-size:.9rem;opacity:.85}
.page-retraites .soin__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.page-retraites .soin__foot .more-link{font-size:.92rem}
.page-retraites .soin:hover .more-link .ico{transform:translateX(3px)}

/* Le bon cadeaux (CTA, en bas de la colonne droite, aligne a gauche comme soins/ateliers) */
.page-retraites .soins-cadeau{padding:34px 4px 0;text-align:left}
.page-retraites .soins-cadeau .kicker{margin-bottom:1rem}
.page-retraites .soins-cadeau .title{margin-bottom:1rem}
.page-retraites .soins-cadeau .subtitle{margin-bottom:1.6rem}

/* ---- Detail d'une retraite ---- */
/* Affiche : montree ENTIERE (portrait, pas de crop cover comme les photos d'ambiance). */
.page-retraite-detail .retraite-affiche{height:auto;box-shadow:var(--shadow-md);border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.page-retraite-detail .retraite-affiche img{width:100%;height:auto;display:block;object-fit:contain;border-radius:0;box-shadow:none;min-height:0}
.page-retraite-detail .retraite-meta{color:var(--coral);font-weight:700}
.page-retraite-detail .retraite-cta__btn{margin-top:.4rem}
/* Corps = contenu libre agenda_txt, largeur de lecture confortable, styles design system. */
.page-retraite-detail .retraite-corps .prose{max-width:860px;margin-inline:auto}
.page-retraite-detail .retraite-txt h2,.page-retraite-detail .retraite-txt h3{color:var(--navy);font-weight:700;line-height:1.25;margin:2rem 0 .8rem}
.page-retraite-detail .retraite-txt h3{font-size:1.4rem}
.page-retraite-detail .retraite-txt p{margin-bottom:1.2rem}
.page-retraite-detail .retraite-txt strong{font-weight:700;color:var(--navy)}
.page-retraite-detail .retraite-txt em{font-style:italic;opacity:.9}
.page-retraite-detail .retraite-txt ul{margin:0 0 1.2rem;padding-left:1.2rem;color:var(--navy)}
.page-retraite-detail .retraite-txt li{margin-bottom:.4rem;line-height:1.6}
.page-retraite-detail .retraite-cta{text-align:center;margin-top:2.4rem}

/* Les autres retraites (ex-sidebar "Agenda" du legacy) : mini-cartes cliquables. */
.page-retraites .retraites-autres__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);margin-top:8px}
.page-retraites .retraite-mini{display:flex;flex-direction:column;background:#FAFAFB;border:1px solid #F0F0F1;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.page-retraites .retraite-mini:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.page-retraites .retraite-mini__photo{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#EEF2F1}
.page-retraites .retraite-mini__body{padding:18px 20px 22px;text-align:center}
.page-retraites .retraite-mini__body h3{color:var(--navy);font-weight:700;font-size:1.15rem;line-height:1.25;margin:0 0 .4rem}
.page-retraites .retraite-mini__dates{color:var(--coral);font-weight:700;font-size:.9rem}

@media (max-width:992px){
  .page-retraites .retraites-grid{grid-template-columns:1fr;gap:34px}
  .page-retraites .retraites-col{display:contents}
  .page-retraites .retraites-col--left .section-head{margin-bottom:0}
  .page-retraites .retraites-wash{display:none}
  .page-retraites .apropos-hero .split__media{width:100%}
  .page-retraites .retraites-autres__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .page-retraites .retraites-autres__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Modal inscription newsletter (composant global, ouverte par [data-newsletter]).
   FRONT seul pour l'instant (decision Stephane 2026-07-13) ; backend a brancher.
   ========================================================================== */
.nl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease)}
.nl-modal.is-open{opacity:1;visibility:visible}
body.nl-open{overflow:hidden}
.nl-modal__overlay{position:absolute;inset:0;background:rgba(16,56,92,.55)}
.nl-modal__panel{position:relative;z-index:1;width:100%;max-width:460px;background:#fff;
  border-radius:var(--radius);box-shadow:0 20px 60px rgba(16,56,92,.30);
  padding:38px 34px 34px;transform:translateY(12px) scale(.98);transition:transform .25s var(--ease)}
.nl-modal.is-open .nl-modal__panel{transform:none}
.nl-modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;
  align-items:center;justify-content:center;border:0;background:transparent;color:var(--navy);
  cursor:pointer;border-radius:50%;transition:background .2s,color .2s}
.nl-modal__close:hover{background:#F0F4F5;color:var(--coral)}
.nl-modal__kicker{display:inline-block;color:var(--teal);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.nl-modal__title{color:var(--navy);font-weight:700;font-size:1.6rem;line-height:1.2;margin:0 0 .6rem}
.nl-modal__lead{color:var(--navy);font-size:1rem;line-height:1.55;margin:0 0 1.4rem}
.nl-form{display:flex;flex-direction:column;gap:.7rem}
.nl-form__label{color:var(--navy);font-weight:700;font-size:.9rem}
.nl-form__input{width:100%;padding:13px 15px;border:1px solid #D6DEE1;border-radius:12px;
  font:inherit;color:var(--navy);background:#FBFCFC;transition:border-color .2s,box-shadow .2s}
.nl-form__input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(124,200,202,.25)}
.nl-form__consent{display:flex;gap:.6rem;align-items:flex-start;color:var(--navy);
  font-size:.86rem;line-height:1.45;margin:.2rem 0 .4rem;cursor:pointer}
.nl-form__consent input{margin-top:.2rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--coral)}
.nl-form__submit{margin-top:.3rem;align-self:flex-start}
.nl-form__status{font-size:.9rem;line-height:1.45;margin:.4rem 0 0;min-height:1em}
.nl-form__status.is-ok{color:#2E7D5B}
.nl-form__status.is-err{color:var(--coral)}
.nl-form__status.is-info{color:var(--navy)}
@media (max-width:520px){
  .nl-modal__panel{padding:32px 22px 26px}
  .nl-modal__title{font-size:1.4rem}
}

/* ==========================================================================
   Modal "document" (charte vie privee, conditions generales, conditions retraites).
   Composant global ouvert par [data-doc-open="<id>"] (voir partials/legal.php +
   assets/js/app.js). Meme langage visuel que .nl-modal, panneau plus large et
   corps scrollable (documents longs). Ajout du 03/08/2026.
   ========================================================================== */
.doc-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease)}
.doc-modal.is-open{opacity:1;visibility:visible}
body.doc-open{overflow:hidden}
.doc-modal__overlay{position:absolute;inset:0;background:rgba(16,56,92,.55)}
.doc-modal__panel{position:relative;z-index:1;width:100%;max-width:760px;max-height:88vh;background:#fff;
  border-radius:var(--radius);box-shadow:0 20px 60px rgba(16,56,92,.30);display:flex;flex-direction:column;
  transform:translateY(12px) scale(.98);transition:transform .25s var(--ease)}
.doc-modal.is-open .doc-modal__panel{transform:none}
.doc-modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;
  align-items:center;justify-content:center;border:0;background:transparent;color:var(--navy);
  cursor:pointer;border-radius:50%;transition:background .2s,color .2s;z-index:2}
.doc-modal__close:hover{background:#F0F4F5;color:var(--coral)}
.doc-modal__head{flex:0 0 auto;padding:34px 40px 20px;border-bottom:1px solid var(--line)}
.doc-modal__kicker{display:inline-block;color:var(--teal);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.doc-modal__title{color:var(--navy);font-weight:700;font-size:1.55rem;line-height:1.2;margin:0;padding-right:32px}
.doc-modal__meta{color:var(--navy);opacity:.65;font-size:.88rem;margin:.5rem 0 0}
.doc-modal__body{flex:1 1 auto;overflow-y:auto;padding:24px 40px 34px;font-size:.95rem;line-height:1.7}
/* la zone de lecture recoit le focus a l'ouverture (scroll au clavier) : pas de liseré,
   le panneau de la modale est deja le repere visuel */
.doc-modal__body:focus,.doc-modal__body:focus-visible{outline:none}
.doc-modal__body h3{color:var(--navy);font-weight:700;font-size:1.06rem;line-height:1.35;margin:1.75rem 0 .1rem}
.doc-modal__body h3:first-child,.doc-modal__body h4:first-child{margin-top:0}
.doc-modal__body h3::after{content:"";display:block;width:44px;height:2px;background:var(--teal);margin:.55rem 0 .75rem}
.doc-modal__body h4{color:var(--navy);font-weight:700;font-size:.98rem;margin:1.4rem 0 .5rem}
.doc-modal__body p{margin:0 0 .75rem}
.doc-modal__body ul{margin:0 0 .95rem;padding:0;list-style:none}
.doc-modal__body li{position:relative;padding-left:20px;margin-bottom:.3rem}
.doc-modal__body li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--coral)}
.doc-modal__body a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.doc-modal__body a:hover{color:var(--coral)}
.doc-modal__body .doc-updated{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.88rem;opacity:.8}
.doc-modal__body .doc-sign{color:var(--navy);font-weight:700;font-size:.9rem;margin:0}
/* Liens legaux du pied de page (memes styles que les anciens <a>) */
.foot-legal{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.foot-legal:hover{color:#fff;text-decoration:underline}
@media (max-width:680px){
  .doc-modal{padding:12px}
  .doc-modal__panel{max-height:92vh}
  .doc-modal__head{padding:28px 22px 16px}
  .doc-modal__title{font-size:1.28rem}
  .doc-modal__body{padding:20px 22px 26px;font-size:.92rem}
}

/* ==========================================================================
   Page "La location" (location.php) - NOUVEAU design (voie A, refonte 2026).
   Reutilise le design system (home) + composants "pages interieures" (.page-apropos)
   + carrousel .pcar (comme retraites). TARIFS dynamiques (t_location_tarifs) + apercu.
   Source XD : artboard-a6c2216c. Ajouts SCOPES .page-location.
   Kickers : "Location" + "Tarifs" = teal (kicker--accent) ; "L'espace" = navy.
   ========================================================================== */

/* Sous-titres 22px REGULAR (coherence pages interieures) */
.page-location .subtitle,.page-location .prose .subtitle{font-weight:400;color:var(--navy)}

/* Le galet mauve deborde vers le haut -> le hero (photo comprise) passe AU-DESSUS du lavis. */
.page-location .apropos-hero{position:relative;z-index:1}

/* (2) "L'espace" : split texte gauche + liste a puces droite.
   Lavis mauve = "Groupe 127" du XD (artboard-a6c2216c) EXTRAIT TEL QUEL : galet "Trace 102"
   #C898BF clippe par le quad "Trace 103", groupe rote -77 deg, opacity 0.10 (valeur XD,
   confirmee par mesure au pixel sur le JPG : mediane (249,244,248)).
   Contenu au-dessus via z-index ; overflow-x:clip empeche le scroll horizontal. */
.page-location .espace-wash-zone{position:relative;overflow-x:clip}
.page-location .espace-wash-zone > .container{position:relative;z-index:1}
/* GEOMETRIE MESUREE (ne pas retoucher a l'oeil) :
   - viewBox du SVG symetrique autour du centre de l'artboard (683) -> left:50%/translateX(-50%)
     pose le galet exactement ou la maquette le veut, a TOUTE largeur d'ecran, et il touche
     les 2 bords (il deborde de -188 a gauche / +224 a droite sur l'artboard 1366).
   - width = 1814.98/1366 = 132.87% (echelle maquette, proportions gardees, height:auto).
   - top : REGLE FIGEE (Stephane) = la crete remonte DERRIERE la photo du hero.
     Maquette : galet top=617.2, bas de la PHOTO hero=653 -> la crete remonte de 35.8px
     derriere la photo. Page : la photo = .pcar__viewport (bottom=660) et NON .split__media
     (bottom=684, qui inclut les puces du carrousel) -> galet top = 660-35.8 = 624.2 ;
     zone top=837 -> top=-213px. Recoupement : a 7px de la position absolue de la maquette
     (= l'ecart de la photo elle-meme), donc les 2 criteres convergent. */
.page-location .espace-wash{position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);top:-213px;width:132.87%;max-width:none;height:auto}
/* Les Tarifs passent AU-DESSUS du lavis (z-index) mais SANS fond opaque : un background:#fff
   ici tranchait le galet a l'horizontale (bug signale par Stephane : "coupe", "dessous pas en
   vague"). Le bas du galet DOIT rester visible en vague, comme sur la maquette. */
.page-location .tarifs{position:relative;z-index:1}
.page-location .espace-grid{align-items:center}
.page-location .espace-list{list-style:none;margin:0;padding:0;align-self:center}
.page-location .espace-list li{position:relative;padding:0 0 20px 32px;margin-bottom:20px;
  border-bottom:1px solid #D6DEE1;color:var(--navy);font-size:1rem;line-height:1.5}
.page-location .espace-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.page-location .espace-list li::before{content:"";position:absolute;left:0;top:.28em;
  width:12px;height:12px;border-radius:50%;background:var(--coral)}

/* (3) "Tarifs" : 2 vignettes administrables, centrees. */
/* 03/08/2026 : le sous-titre s'est allonge (phrase "conditions avantageuses" demandee par
   Anne) -> largeur bornee pour garder des lignes lisibles et centrees, comme les autres pages. */
.page-location .tarifs .section-head .subtitle{max-width:790px;margin-inline:auto}
.page-location .tarifs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,42px);
  margin-top:40px;max-width:1080px;margin-inline:auto}
.page-location .tarif{background:#fff;border:1px solid #EEF1F2;border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:46px 34px 34px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.page-location .tarif__price{color:var(--navy);line-height:1;display:flex;align-items:baseline;justify-content:center}
.page-location .tarif__montant{font-weight:700;font-size:3rem;letter-spacing:-.01em}
.page-location .tarif__unite{font-weight:700;font-size:1.35rem;margin-left:.12em}
.page-location .tarif__libelle{color:var(--navy);font-size:1.35rem;margin:.7rem 0 0}
.page-location .tarif__rule{width:46px;height:3px;border-radius:3px;background:#7BC8CA;margin:1.05rem 0 1.35rem}
.page-location .tarif__desc{color:var(--navy);font-weight:300;font-size:1rem;line-height:1.6;margin:0 0 1.6rem}
.page-location .tarif__mail{margin-top:auto;width:44px;height:44px;border-radius:10px;background:var(--coral);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(236,117,83,.28);transition:transform .2s var(--ease),background .2s}
.page-location .tarif__mail:hover{transform:translateY(-2px);background:#F2937A}
.page-location .tarif__mail .ico{width:20px;height:20px}

@media (max-width:992px){
  .page-location .espace-wash{display:none}
  .page-location .apropos-hero .split__media{width:100%}
  .page-location .espace-grid{gap:22px}
}
@media (max-width:680px){
  .page-location .tarifs-grid{grid-template-columns:1fr;max-width:420px}
  .page-location .apropos-hero .prose{padding-top:24px}
}


/* ==========================================================================
   Page Agenda / Réservation (agenda2.php) — calé sur PDF réservation p03
   ========================================================================== */
.page-agenda .subtitle{font-weight:400}

/* Filtres pilules (UI, filtrage client-side) */
.agenda-filters{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 6px}
.afilter{font-weight:700;font-size:1rem;color:var(--navy);border:0;border-radius:var(--radius-pill);
  padding:11px 26px;background:#DDE4EA;cursor:pointer;line-height:1;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.afilter:hover{transform:translateY(-1px)}
.afilter.is-active{box-shadow:0 7px 16px rgba(33,81,104,.20)}
.afilter--collectif{background:#A9DED9}
.afilter--individuel{background:#CFE6E5}
.afilter--soins{background:#F6D8CC}
.afilter--ateliers{background:#CDE7C2}
.afilter--retraites{background:#F2CDBF}

/* Calendrier (FullCalendar 6) */
.agenda-cal{margin-top:34px}
.page-agenda .fc{--fc-border-color:#EAEFF2;--fc-today-bg-color:#F4FAF9;--fc-page-bg-color:#fff;font-family:var(--ff)}
.page-agenda .fc .fc-toolbar.fc-header-toolbar{margin-bottom:18px;align-items:center}
.page-agenda .fc .fc-toolbar-title{font-size:1.7rem;font-weight:700;color:var(--navy)}
.page-agenda .fc .fc-button{background:#313E4E;border:0;border-radius:10px;padding:9px 15px;box-shadow:none!important;
  color:#fff;font-size:1rem;transition:background .15s}
.page-agenda .fc .fc-button-primary:not(:disabled):hover{background:var(--navy)}
.page-agenda .fc .fc-button-primary:not(:disabled):active,
.page-agenda .fc .fc-button-primary:focus{background:var(--navy)}
.page-agenda .fc .fc-prev-button{border-radius:10px 0 0 10px}
.page-agenda .fc .fc-next-button{border-radius:0 10px 10px 0;margin-left:2px}
/* maquette = prev/next + titre seulement : masquer "aujourd'hui" + sélecteur de vue */
.page-agenda .fc .fc-today-button,
.page-agenda .fc .fc-toolbar-chunk:last-child{display:none}

/* en-têtes jours + cases */
.page-agenda .fc .fc-col-header-cell{background:transparent;padding:12px 0}
.page-agenda .fc .fc-col-header-cell-cushion{color:var(--navy);font-weight:700;font-size:1.05rem;
  text-decoration:none;text-transform:capitalize}
.page-agenda .fc-theme-standard td,.page-agenda .fc-theme-standard th{border-color:#EAEFF2}
.page-agenda .fc-theme-standard .fc-scrollgrid{border-color:#EAEFF2}
.page-agenda .fc .fc-daygrid-day-number{color:var(--navy);font-weight:600;font-size:1rem;padding:9px 11px;text-decoration:none}
.page-agenda .fc .fc-day-other .fc-daygrid-day-number{color:#AEBFC9;font-weight:400}
.page-agenda .fc-daygrid-day-frame{min-height:142px}

/* événements = chips arrondies (couleur BDD conservée), nom + heure en blanc */
.page-agenda .fc-daygrid-event{border:0!important;border-radius:var(--radius-pill)!important;
  margin:2px 8px;padding:3px 12px;box-shadow:none!important;cursor:pointer}
.page-agenda .fc-daygrid-event:hover{filter:brightness(1.06)}
.page-agenda .fc-daygrid-event .fc-event-main{color:#fff}
.page-agenda .fc-daygrid-event .fc-event-main-frame{display:flex;gap:5px;align-items:baseline;
  font-size:.72rem;font-weight:600;line-height:1.35}
.page-agenda .fc-daygrid-event .fc-event-time{font-weight:700;flex:0 0 auto}
.page-agenda .fc-daygrid-event .fc-event-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* créneaux "à réserver" (disponibilités) : chips claires "+ …" */
.page-agenda .fc-event-disponible{background:#FCE3DA!important;border:0!important}
.page-agenda .fc-event-disponible .fc-event-main{color:var(--coral-dark)}
.page-agenda .fc-event-seance-disponible{background:#DCEFEC!important;border:0!important}
.page-agenda .fc-event-seance-disponible .fc-event-main{color:#2a7d6f}
/* cours/soins déjà réservés : atténué */
.page-agenda .fc-event-soin,.page-agenda .fc-event-individuel,
.page-agenda .fc-event-seance-individuelle{opacity:.55}
.page-agenda .fc-pill{display:block;height:15px}
.page-agenda .fc-daygrid-event-harness{margin-top:0}

/* légende */
.agenda-legend{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  width:max-content;margin:26px auto 0;padding:16px 22px;border-radius:var(--radius)}
.agenda-legend .lg-item{display:flex;align-items:center;gap:12px;color:var(--navy);font-size:1rem}
.agenda-legend .lg-dot{width:34px;height:14px;border-radius:var(--radius-pill);flex:0 0 auto}

@media (max-width:680px){
  .agenda-filters{gap:10px}
  .afilter{padding:9px 18px;font-size:.92rem}
}


/* ---- Agenda : messages flash + Mes réservations ---- */
.page-agenda .agenda-flash{border-radius:var(--radius);padding:14px 20px;margin:0 0 22px;font-weight:600}
.page-agenda .agenda-flash--ok{background:#E6F5F1;color:#2a7d6f}
.page-agenda .agenda-flash--ko{background:#FBE7E0;color:var(--coral-dark)}
.resa-list{display:flex;flex-direction:column;gap:12px;margin-top:22px;max-width:660px}
.resa-item{display:flex;align-items:center;gap:16px;background:#FAFAFB;border:1px solid #F0F0F1;border-radius:var(--radius);padding:15px 20px}
.resa-dot{width:34px;height:14px;border-radius:var(--radius-pill);flex:0 0 auto}
.resa-info{display:flex;flex-direction:column;gap:2px;color:var(--navy);flex:1}
.resa-when{font-size:.92rem;opacity:.85}
.resa-del{color:var(--coral);font-weight:700;font-size:.92rem}
.resa-del:hover{color:var(--coral-dark);text-decoration:underline}
.resa-locked{color:#AEBFC9;font-size:.85rem;font-style:italic}

/* ---- Modals réservation : comportement Bootstrap conservé, look design system (pas de bootstrap.css) ---- */
#modalCours,#modalSoin{display:none;position:fixed;inset:0;z-index:1050;overflow-y:auto;padding:4vh 16px}
#modalCours.show,#modalSoin.show{display:block}
.modal-backdrop{position:fixed;inset:0;z-index:1040;background:#10385C;opacity:.5!important}
.modal-dialog{max-width:820px;margin:0 auto}
.modal-xl{max-width:1040px}
.modal-content{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line)}
.modal-title{color:var(--navy);font-weight:700;font-size:1.5rem}
.modal-header .close{font-size:1.7rem;line-height:1;color:var(--navy);opacity:.55;background:none;border:0;cursor:pointer}
.modal-header .close:hover{opacity:1;color:var(--coral)}
.modal-body{padding:26px 30px}
#modalCours .row,#modalSoin .row{display:flex;flex-wrap:wrap;margin:0 -10px}
#modalCours [class*="col-"],#modalSoin [class*="col-"]{padding:0 10px;flex:1 1 0}
#modalCours .col-md-12,#modalSoin .col-md-12{flex:0 0 100%}
#modalCours .col-md-6,#modalSoin .col-md-6{flex:0 0 50%;max-width:50%}
#modalCours .form-group,#modalSoin .form-group{margin-bottom:16px}
#modalCours label,#modalSoin label{display:block;color:var(--navy);font-weight:700;font-size:.9rem;margin-bottom:6px}
#modalCours .form-control,#modalSoin .form-control{width:100%;font-family:var(--ff);font-size:1rem;color:var(--navy);padding:13px 16px;border:1px solid #E3E9EC;border-radius:var(--radius-sm);background:#fff}
#modalCours .form-control:focus,#modalSoin .form-control:focus{outline:0;border-color:var(--teal)}
#modalCours .btn,#modalSoin .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:1rem;padding:13px 26px;border-radius:var(--radius-pill);border:0;cursor:pointer;line-height:1}
#modalCours .btn-primary,#modalSoin .btn-primary{background:var(--coral);color:#fff}
#modalCours .btn-primary:hover,#modalSoin .btn-primary:hover{background:#F2937A}
#modalCours .btn-success,#modalSoin .btn-success{background:var(--teal);color:#fff}
#modalCours .btn-success:hover,#modalSoin .btn-success:hover{background:#54a49b}
/* bouton de confirmation final (btn-lg) = CTA coral centré, cf. maquette */
#modalCours .btn-success.btn-lg,#modalSoin .btn-success.btn-lg{background:var(--coral);color:#fff;width:fit-content!important;min-width:260px;margin:10px auto 0}
#modalCours .btn-success.btn-lg:hover,#modalSoin .btn-success.btn-lg:hover{background:#F2937A}
#modalCours .btn-outline-primary,#modalSoin .btn-outline-primary{background:#fff;color:var(--navy);border:1px solid #D7E2E6}
#modalCours .btn-outline-primary.btn-primary,#modalSoin .btn-outline-primary.btn-primary,#modalCours .btn-outline-primary:hover,#modalSoin .btn-outline-primary:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
#modalCours .btn-outline-success,#modalSoin .btn-outline-success{background:#fff;color:var(--teal);border:1px solid #Bfe3df}
#modalCours .btn-block,#modalSoin .btn-block{width:100%}
#modalCours .alert,#modalSoin .alert{border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:16px;font-size:.95rem}
#modalCours .alert-info,#modalSoin .alert-info{background:#EAF5F3;color:#2a7d6f}
#modalCours .alert-success,#modalSoin .alert-success{background:#E6F5F1;color:#2a7d6f}
#modalCours .alert-danger,#modalSoin .alert-danger{background:#FBE7E0;color:var(--coral-dark)}
#modalCours .alert-warning,#modalSoin .alert-warning{background:#FDF3E3;color:#9a6b1e}
#modalCours .d-flex,#modalSoin .d-flex{display:flex}
#modalCours .flex-wrap,#modalSoin .flex-wrap{flex-wrap:wrap}
#modalCours .text-center,#modalSoin .text-center{text-align:center}
#modalCours .text-muted,#modalSoin .text-muted{color:#7d94a0}
#modalSoin #recapReservation,#modalSoin #recapReservationSeance,#modalCours #recapReservation{background:#EAF5F3;border-radius:var(--radius);padding:18px 22px;color:var(--navy)}
@media(max-width:680px){ #modalCours .col-md-6,#modalSoin .col-md-6{flex:0 0 100%;max-width:100%} }


/* ---- Modals réservation : cartes soins/cours (classes Bootstrap stylées maison) ---- */
#modalSoin .justify-content-between,#modalCours .justify-content-between{justify-content:space-between}
#modalSoin .align-items-center,#modalCours .align-items-center{align-items:center}
#modalSoin .text-right,#modalCours .text-right{text-align:right;white-space:nowrap;flex:0 0 auto;margin-left:18px}
#modalSoin .card,#modalCours .card{border:1px solid #EAEFF2;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:#fff}
#modalSoin .card-header,#modalCours .card-header{background:#FAFAFB!important;padding:16px 20px;border:0}
#modalSoin .card-body,#modalCours .card-body{padding:18px 20px;background:#fff!important;border-top:1px solid #EAEFF2}
#modalSoin .card h5,#modalSoin .card h6,#modalCours .card h6{color:var(--navy)!important;font-weight:700;font-size:1.05rem;margin:0}
#modalSoin .card small,#modalCours .card small{display:block;margin-top:5px;color:#7d94a0;font-size:.88rem}
#modalSoin .badge,#modalCours .badge{display:inline-block;padding:5px 13px;border-radius:var(--radius-pill);font-size:.8rem;font-weight:700;line-height:1.2}
#modalSoin .badge.bg-primary,#modalCours .badge.bg-primary{background:#DCEFEC;color:#2a7d6f}
#modalSoin .badge.bg-warning,#modalCours .badge.bg-warning{background:#FDF3E3;color:#9a6b1e}
#modalSoin .text-right strong,#modalCours .text-right strong{color:var(--coral)!important;font-size:1.2rem;margin-left:8px}
#modalSoin h5,#modalCours h5{color:var(--navy);font-weight:700;font-size:1.15rem}
#modalSoin .mb-3,#modalCours .mb-3{margin-bottom:16px}
#modalSoin .mb-0,#modalCours .mb-0{margin-bottom:0}
#modalSoin .mb-4,#modalCours .mb-4{margin-bottom:22px}
#modalSoin .mt-3,#modalCours .mt-3{margin-top:16px}
#modalSoin .badge.bg-dark,#modalCours .badge.bg-dark{background:var(--navy);color:#fff}
/* date sélectionnée : bandeau teal (override du bleu inline) */
#modalSoin p[style*="f0f8ff"],#modalCours p[style*="f0f8ff"]{background:#EAF5F3!important;color:var(--navy);border-radius:var(--radius)!important;padding:14px 18px!important}

/* =========================================================================
   Espace membre : login.php + mes-reservations.php (design system, desktop)
   ========================================================================= */
.container--narrow{max-width:1000px;margin-inline:auto}
.page-login .section-head{text-align:center;margin-inline:auto;margin-bottom:30px}
.page-login .section-head .kicker{justify-content:center}

/* encart d'information (pilule teal, cf. maquette) */
.login-note{display:flex;gap:16px;align-items:flex-start;background:#EAF5F3;color:#2a6f64;
  border-radius:var(--radius);padding:20px 24px;margin:0 auto 30px;max-width:820px;line-height:1.55;font-size:1rem}
.login-note__ico{flex:0 0 auto;color:var(--teal);margin-top:1px}

/* messages */
.login-alert{max-width:820px;margin:0 auto 26px;border-radius:var(--radius);padding:15px 22px;font-size:1rem}
.login-alert a{font-weight:700;text-decoration:underline}
.login-alert--ok{background:#E6F5F1;color:#2a7d6f}
.login-alert--ko{background:#FBE7E0;color:var(--coral-dark)}

/* grille des 2 cartes */
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.login-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:32px 30px}
.login-card__title{color:var(--navy);font-weight:700;font-size:1.4rem;margin:0 0 4px}
.login-card__lead{color:#7d94a0;margin:0 0 22px;font-size:.98rem}

/* champs de formulaire (labels teal maj + gros inputs arrondis, cf. maquette) */
.login-form .fld{margin-bottom:18px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.login-form label{display:block;color:var(--teal);font-weight:700;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.login-form label span{color:var(--coral)}
.fld__input{width:100%;font-family:var(--ff);font-size:1rem;color:var(--navy);
  padding:15px 18px;border:1px solid #E3E9EC;border-radius:var(--radius-sm);background:#fff;transition:border-color .15s,box-shadow .15s}
.fld__input::placeholder{color:#AEBFC9}
.fld__input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,179,170,.15)}

/* boutons pill (réutilisables) */
.btn-resa{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--ff);
  font-weight:700;font-size:1rem;padding:14px 30px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  line-height:1;color:#fff;transition:background .15s,transform .05s;text-decoration:none}
.btn-resa:hover{text-decoration:none}
.btn-resa:active{transform:translateY(1px)}
.btn-resa--coral{background:var(--coral)}
.btn-resa--coral:hover{background:#F2937A;color:#fff}
.btn-resa--teal{background:var(--teal)}
.btn-resa--teal:hover{background:#54a49b;color:#fff}
.login-form .btn-resa{margin-top:6px}

@media(max-width:820px){
  .login-grid{grid-template-columns:1fr}
  .fld-row{grid-template-columns:1fr}
}

/* ---- Mes réservations / mon compte ---- */
.page-account .section-head{text-align:center;margin-inline:auto;margin-bottom:26px}
.page-account .section-head .kicker{justify-content:center}
.account-bar{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.account-logout{display:inline-flex;align-items:center;gap:.4em;color:#7d94a0;font-weight:700;font-size:.95rem;text-decoration:none}
.account-logout:hover{color:var(--coral)}
.page-account .resa-list{max-width:820px;margin:0 auto}
/* bouton désinscription (reset + picto) ; s'applique aussi au lien .resa-del d'agenda2 */
.resa-del{display:inline-flex;align-items:center;gap:.35em;background:none;border:0;cursor:pointer;font-family:var(--ff);padding:0;text-decoration:none}
.account-empty{max-width:560px;margin:10px auto 0;text-align:center;color:#7d94a0;background:#FAFAFB;border:1px solid var(--line);border-radius:var(--radius);padding:44px 30px}
.account-empty svg{color:#C9D6DE;margin-bottom:12px}
.account-empty p{font-size:1.05rem;margin:0 0 20px}

/* Modale de confirmation (non native) */
.confirm-ov{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(16,56,92,.5);padding:20px}
.confirm-ov.is-open{display:flex}
.confirm-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);max-width:440px;width:100%;padding:30px 30px 26px;text-align:center}
.confirm-box h3{color:var(--navy);font-weight:700;font-size:1.3rem;margin:0 0 12px}
.confirm-box p{color:var(--navy);line-height:1.55;margin:0 0 24px}
.confirm-box .confirm-when{color:#7d94a0;font-size:.95rem}
.confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-resa--ghost{background:#F0F3F5;color:var(--navy)}
.btn-resa--ghost:hover{background:#E3E9EC;color:var(--navy)}

/* ---- Contact & bon cadeau (contact.php) ---- */
.page-cadeau .section-head{text-align:center;margin-inline:auto;margin-bottom:34px}
.cadeau-form{max-width:900px;margin:0 auto}
.cadeau-form textarea.fld__input{min-height:130px;resize:vertical;font-family:var(--ff)}
/* select stylé comme un input, avec chevron custom */
.cadeau-form select.fld__input{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235FB3AA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:46px}
.cadeau-form select.fld__input:required:invalid{color:#AEBFC9}
.cadeau-form option{color:var(--navy)}
.cadeau-actions{display:flex;justify-content:center;margin-top:28px}

/* ==========================================================================
   Deroule "Infos pratiques" (.fold) — cartes Yoga (.service) et Soins (.soin).
   Ajout du 03/08/2026 (demande Anne : le lien menait directement au calendrier,
   il ouvre desormais les infos complementaires). Mise en forme calee sur la
   planche XD "Essentiellement soi _ Soins - 2" (etat deplie) : intertitres gras
   alignes a gauche, listes a puces, puces coral pour les blocs pratiques.
   ========================================================================== */
.more-link--fold{padding:0;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.more-link--fold.is-open .ico{transform:rotate(90deg)}
.service:hover .more-link--fold.is-open .ico,
.soin:hover .more-link--fold.is-open .ico{transform:rotate(90deg)}
/* Un deroule ouvert ne doit agrandir QUE sa carte : sans ceci la rangee de grille s'etire
   (align-items:stretch) et la carte voisine affiche un grand vide (signale par Stephane
   le 03/08/2026). Classe posee/retiree par app.js, donc l'etat au repos ne change pas. */
.grid-2.has-open-fold{align-items:start}
.fold{display:none;text-align:left;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.fold.is-open{display:block;animation:foldIn .28s var(--ease)}
@keyframes foldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fold h4,.soin .fold h4,.service .fold h4{color:var(--navy);font-weight:700;font-size:.95rem;
  line-height:1.4;margin:1.4rem 0 .55rem}
.fold > h4:first-child{margin-top:0}
.fold p,.soin .fold p,.service .fold p{color:var(--navy);font-size:.95rem;line-height:1.65;
  margin:0 0 .7rem;text-align:left;opacity:1}
.fold p + p{margin-top:0}
.fold ul{margin:0 0 .3rem;padding:0;list-style:none}
/* respiration entre une liste et le paragraphe qui la suit (cf. maquette "Soins - 2").
   Meme specificite que la regle .fold p ci-dessus, sinon margin-top:0 l'emporte. */
.fold ul + p,.soin .fold ul + p,.service .fold ul + p{margin-top:.9rem}
.fold li,.soin .fold li,.service .fold li{position:relative;padding-left:16px;color:var(--navy);
  font-size:.95rem;line-height:1.55;margin-bottom:.25rem;text-align:left}
.fold li::before{content:"•";position:absolute;left:1px;top:0;line-height:1.55;color:var(--navy)}
.fold .fold-list--coral > li::before{color:var(--coral)}
.fold .fold-sub{margin:.35rem 0 .35rem 14px}
.fold .fold-sub li::before{color:var(--navy)}
.fold a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.fold a:hover{color:var(--coral)}

/* ==========================================================================
   Renvoi vers un document legal (.cond-note + .doc-link) — page Retraites.
   Ajout du 03/08/2026 : acces aux "Conditions particulieres de participation
   aux retraites" (PDF d'Anne), visible mais sobre, dans le langage du site.
   ========================================================================== */
.cond-note{max-width:660px;margin:60px auto 0;text-align:center}
.cond-note .uline{margin:0 auto 18px}
.cond-note p{color:var(--navy);font-size:.95rem;line-height:1.6;opacity:.85;margin:0 0 14px}
.doc-link{display:inline-flex;align-items:center;gap:.5em;padding:0;border:0;background:none;
  font:inherit;font-weight:700;font-size:.95rem;color:var(--navy);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  text-decoration-color:var(--teal);transition:color .18s,text-decoration-color .18s}
.doc-link:hover{color:var(--coral);text-decoration-color:var(--coral)}
.doc-link .ico{width:1.15em;height:1.15em;flex:0 0 auto}
.page-retraite-detail .cond-note{margin-top:44px}

/* ==========================================================================
   Modale "Je souhaite réserver l'espace" (page La location, 03/08/2026).
   Reprend l'enveloppe .doc-modal + le langage de formulaire login/bon cadeau
   (.login-form/.fld/.btn-resa). Dates multiples : ajout/retrait de champs.
   ========================================================================== */
.resa-modal .doc-modal__panel{max-width:620px}
.resa-modal .doc-modal__body{padding-top:26px}
.resa-modal .fld__input{background:#FBFCFC}
.resa-form textarea.fld__input{resize:vertical;font-family:var(--ff)}
.resa-dates{display:flex;flex-direction:column;gap:10px}
.resa-date{display:flex;align-items:center;gap:8px}
.resa-date .fld__input{flex:1 1 auto;min-width:0}
.resa-date__rm{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:#F0F3F5;
  color:var(--navy);display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s}
.resa-date__rm:hover{background:#FBE7E0;color:var(--coral-dark)}
.resa-date__rm[hidden]{display:none}
.resa-adddate{margin-top:12px;display:inline-flex;align-items:center;gap:.45em;color:var(--teal);
  font-family:var(--ff);font-weight:700;font-size:.9rem;transition:color .18s}
.resa-adddate:hover{color:var(--coral)}
.resa-form__status{font-size:.92rem;line-height:1.5;margin:.2rem 0 0;min-height:1em;color:var(--navy)}
.resa-form__status.is-ok{color:#2a7d6f;font-weight:700}
.resa-form__status.is-err{color:var(--coral-dark);font-weight:700}
.resa-actions{display:flex;justify-content:center;margin-top:18px}
.resa-form.is-sent .resa-actions,.resa-form.is-sent .resa-adddate{opacity:.55}
@media (max-width:680px){
  .resa-modal .fld-row{grid-template-columns:1fr}
}

/* Pastilles des carrousels de cartes : creees par app.js UNIQUEMENT en mobile, mais elles
   restent dans le DOM si la fenetre est ensuite elargie (rotation, redimensionnement) ->
   masquees par defaut, affichees seulement dans le bloc smartphone ci-dessous. N'existe pas
   dans le HTML desktop d'origine : aucun impact sur la version validee. */
.cdots{display:none}

/* ==========================================================================
   VERSION SMARTPHONE (06/08/2026) — calee sur la maquette
   medias/2026/JPG/"iPhone 14 Ex. Home.jpg" (393 px de large).
   🛑 TOUT est enferme dans des media queries : la version DESKTOP validee par
   la cliente n'est pas touchee (aucune regle hors @media dans ce bloc).
   Les pages sans maquette mobile suivent la meme philosophie : pleine largeur,
   titres alignes a gauche, cartes empilees, boutons larges.
   ========================================================================== */
@media (max-width:680px){

  /* -- En-tete : TOUT sur une seule ligne (consigne Stephane 06/08/2026, apres essai sur
        Android) : le logo a gauche, puis a droite les 2 pictos et le burger. La maquette
        montrait un burger centre et les pictos sous le bandeau : ecarte, moins pratique. -- */
  .site-header .bar{justify-content:space-between;gap:10px;min-height:56px;flex-wrap:nowrap}
  .brand{display:flex;min-width:0}
  .brand__name{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand__blob{width:26px;height:26px;flex:0 0 auto}
  .header-tools{margin-left:auto;gap:8px;align-self:center;flex:0 0 auto}
  .header-sq{gap:6px;align-items:center}
  .header-sq .sq-btn{width:38px;height:38px;padding-top:0;align-items:center;border-radius:6px}
  .header-sq .sq-btn img{width:19px}
  .burger{width:38px;height:38px;flex:0 0 auto}
  .nav{inset:56px 0 auto 0;max-height:calc(100vh - 56px)}

  /* -- Vagues : en dessous de ~700px, la hauteur FIXE des SVG (calee sur le desktop) les
        etirait fortement en vertical (`preserveAspectRatio="none"`) -> effet ecrase signale
        par Stephane. On laisse desormais le navigateur calculer la hauteur d'apres le viewBox :
        la forme garde ses proportions d'origine. -- */
  .footer-wave{height:auto;aspect-ratio:1600/210}
  .hero__waves{height:auto;aspect-ratio:1450/700}

  /* -- Titres : taille proportionnelle a la largeur d'ecran, bornee. Un mot long
        ("accompagnement") ne doit JAMAIS toucher les bords (signale par Stephane sur
        Android). `overflow-wrap` est le filet de securite ultime. -- */
  .title,.section-head .title{font-size:clamp(1.6rem,7.8vw,2.15rem);line-height:1.15;
    overflow-wrap:break-word}
  h1.title{font-size:clamp(1.7rem,8.2vw,2.3rem)}
  .section-head.center .lead{font-size:1.02rem;line-height:1.45}
  .soin h3,.service h3,.moment h3{overflow-wrap:break-word}

  /* -- Carrousels de cartes (les 3 "moments", les 4 univers) : le defilement
        horizontal existe deja ; on ajoute les PASTILLES de la maquette. -- */
  .carousel{padding-bottom:6px}
  .carousel>*{flex:0 0 84%}
  .cdots{display:flex;justify-content:center;gap:9px;margin-top:18px}
  .cdots button{width:8px;height:8px;border-radius:50%;background:#CBD9DE;padding:0;
    border:0;transition:background .2s,transform .2s}
  .cdots button.on{background:var(--teal);transform:scale(1.15)}

  /* -- Section "Une rencontre / Anne Orban" : la maquette mobile place le TEXTE d'abord,
        puis la PHOTO, et le bouton chevauche le bas de la photo. `display:contents` sur la
        colonne de texte permet de reordonner ces 3 elements sans toucher au HTML desktop. -- */
  .anne-zone .split{display:flex;flex-direction:column}
  .anne-zone .prose{display:contents}
  .anne-zone .prose > *{order:1}
  .anne-zone .split__media{order:2;margin:20px 0 0;width:100%}
  .anne-zone .prose > .btn{order:3;align-self:center;margin-top:-30px;position:relative;z-index:2}

  /* -- Boutons : larges, comme la maquette -- */
  .btn{padding:15px 22px;font-size:.98rem}
  .section .btn--coral,.soins-cadeau .btn--coral{width:100%;max-width:340px}

  /* -- Temoignages : picto centre SUR un filet horizontal, pastilles dessous, texte
        pleine largeur (le desktop a un filet vertical a gauche : on le bascule). -- */
  .testi{padding-left:0;padding-right:0;padding-top:6px}
  .testi::before{left:0;right:0;top:52px;bottom:auto;width:auto;height:1px}
  .testi__avatar{position:relative;left:auto;top:auto;transform:none;margin:0 auto;z-index:1}
  .testi__dots{justify-content:center;margin:16px 0 20px}
  .testi__viewport,.testi__slide{padding-left:0;border-left:0}

  /* -- Pied de page : colonne centree avec filets de separation (maquette) -- */
  .site-footer .footer-grid{grid-template-columns:1fr;gap:0;text-align:center}
  .site-footer .foot-col{border-left:0;padding:22px 0 0;position:relative}
  .site-footer .foot-col::before{content:"";display:block;width:132px;height:1px;
    background:rgba(255,255,255,.28);margin:0 auto 22px}
  .site-footer .foot-brand{text-align:center}
  .site-footer .btn--coral{width:auto;max-width:none}
  .footer-bottom{padding-bottom:70px;line-height:1.9}
}

/* Tres petits ecrans : on resserre encore la typographie du hero. */
@media (max-width:380px){
  .hero__inner .title,.hero .title{font-size:2.1rem}
}

/* Lien secondaire sous le bouton « Je réserve ma place » d'une retraite (06/08/2026) :
   le bouton mène au calendrier, ce lien ouvre la demande d'informations par e-mail. */
.retraite-cta__alt{margin:14px 0 0;text-align:center}
.retraite-cta__alt .doc-link{font-weight:400;font-size:.92rem}