/* ==========================================================================
   YogaÉmotions — chrome commun (ne dépend d'AUCUNE variable des pages :
   mêmes largeurs, marges et tailles partout). : en-tête, menu, menu mobile, pied de page.
   Chargé par TOUTES les pages avant leur CSS propre. Les variables sont
   préfixées --ye- pour ne jamais dépendre des tokens redéfinis page par page.
   Le HTML correspondant est produit par inc/chrome.php (entete_site / pied_site).
   ========================================================================== */
:root{
  --ye-paper:#FBF8F2; --ye-linen:#F2EDE4; --ye-petrol:#1B3C45; --ye-muted:#6E7E82;
  --ye-accent:#2C8FB0; --ye-accent-soft:#4AA6C6; --ye-line:rgba(27,60,69,.14);
  --ye-serif:"Fraunces",Georgia,serif; --ye-sans:"Mulish",system-ui,sans-serif;
  --ye-mono:"Spline Sans Mono",ui-monospace,monospace;
  --ye-pad:clamp(1.2rem,4vw,4rem);
  --ye-maxw:1200px;   /* largeur du pied de page, identique sur toutes les pages */
}

/* ---------- En-tête ---------- */
header.ye-entete{line-height:1.5;font-size:16px;position:sticky;top:0;z-index:70;background:rgba(251,248,242,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ye-line);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--ye-pad)}
.ye-brand{line-height:1.2;font-weight:400;font-family:var(--ye-serif);font-size:1.25rem;color:var(--ye-petrol);text-decoration:none;white-space:nowrap;letter-spacing:0}
.ye-brand b{font-weight:500}
nav.ye-nav{display:flex;gap:1.15rem;font-family:var(--ye-sans);font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none}
nav.ye-nav a{color:var(--ye-muted);text-decoration:none;transition:color .2s}
nav.ye-nav a:hover,nav.ye-nav a.here{color:var(--ye-accent)}

/* ---------- Menu mobile ---------- */
.ye-burger{display:none;background:none;border:1px solid var(--ye-line);border-radius:999px;width:44px;height:44px;cursor:pointer;color:var(--ye-petrol);align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,border-color .25s}
.ye-burger:hover{background:rgba(27,60,69,.05)}
.ye-burger svg{width:20px;height:20px;display:block}
.ye-voile{position:fixed;inset:0;background:rgba(16,34,40,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:90}
.ye-voile.open{opacity:1;visibility:visible}
.ye-panneau{position:fixed;top:0;right:0;bottom:0;width:min(310px,84vw);background:var(--ye-paper);z-index:95;display:flex;flex-direction:column;padding:1.1rem 1.4rem 2rem;transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.2,1);overflow-y:auto;box-shadow:-18px 0 44px -24px rgba(16,34,40,.55);font-family:var(--ye-sans)}
.ye-panneau.open{transform:none}
.ye-panneau-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.ye-panneau-haut span{font-family:var(--ye-serif);font-size:1.15rem;color:var(--ye-petrol)}
.ye-panneau-haut span b{font-weight:500}
.ye-panneau .ye-fermer{background:none;border:1px solid var(--ye-line);border-radius:999px;width:40px;height:40px;cursor:pointer;color:var(--ye-petrol);display:inline-flex;align-items:center;justify-content:center}
.ye-panneau .ye-fermer svg{width:18px;height:18px}
.ye-panneau a{font-family:var(--ye-sans);font-size:1.02rem;font-weight:500;color:var(--ye-petrol);text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--ye-line);transition:color .2s,padding-left .2s}
.ye-panneau a:hover{color:var(--ye-accent);padding-left:.3rem}
.ye-panneau a.here{color:var(--ye-accent)}
.ye-panneau a.ye-tel{margin-top:auto;padding-top:1.6rem;border:0;font-size:.92rem;color:var(--ye-muted)}
.ye-panneau a.ye-tel b{display:block;font-weight:600;font-size:1.05rem;color:var(--ye-accent);margin-top:.2rem}
body.menu-ouvert{overflow:hidden}
@media (max-width:820px){
  .ye-burger{display:inline-flex}
  nav.ye-nav{display:none}
}

/* ---------- Pied de page ---------- */
footer.ye-pied{line-height:1.6;font-size:16px;background:var(--ye-petrol);color:rgba(251,248,242,.72);padding:2.6rem 0;margin-top:0;font-family:var(--ye-sans)}
footer.ye-pied .ye-pied-wrap{width:min(var(--ye-maxw),100% - 2*var(--ye-pad));margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1.4rem}
footer.ye-pied .ye-brand{color:var(--ye-paper)}
footer.ye-pied nav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.82rem;row-gap:.4rem}
footer.ye-pied nav a{line-height:1.6;text-decoration:none;color:rgba(251,248,242,.85);transition:color .2s}
footer.ye-pied nav a:hover{color:var(--ye-accent-soft)}
footer.ye-pied .ye-legal{text-align:right}
footer.ye-pied .ye-mono{display:block;font-family:var(--ye-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
footer.ye-pied .ye-mono+.ye-mono{opacity:.7}
footer.ye-pied .ye-mono a{color:inherit}
@media (max-width:700px){
  footer.ye-pied .ye-pied-wrap{flex-direction:column;align-items:flex-start}
  footer.ye-pied .ye-legal{text-align:left}
}

/* ---------- Variante « sur image » (accueil) : l'en-tête flotte, transparent,
   en blanc sur la photo, puis devient une barre opaque dès que la photo est
   passée (classe .solid posée par site.js via data-hero). ---------- */
header.ye-entete.ye-sur-image{position:fixed;left:0;right:0;top:var(--bh,0px);background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:1.05rem var(--ye-pad);transition:background .4s,padding .4s,box-shadow .4s}
header.ye-entete.ye-sur-image .ye-brand{color:var(--ye-paper);font-size:1.35rem;text-shadow:0 1px 12px rgba(16,34,40,.5)}
header.ye-entete.ye-sur-image nav.ye-nav{gap:1.9rem}
header.ye-entete.ye-sur-image nav.ye-nav a{color:var(--ye-paper);text-shadow:0 1px 10px rgba(16,34,40,.5)}
header.ye-entete.ye-sur-image nav.ye-nav a:hover{color:var(--ye-accent-soft)}
header.ye-entete.ye-sur-image nav.ye-nav a.here{color:var(--ye-paper)}
header.ye-entete.ye-sur-image nav.ye-nav a.here::after{content:"";display:block;height:1px;background:currentColor;margin-top:3px;opacity:.75}
header.ye-entete.ye-sur-image .ye-burger{color:var(--ye-paper);border-color:rgba(251,248,242,.5)}
header.ye-entete.ye-sur-image.solid{background:rgba(251,248,242,.86);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 1px 0 var(--ye-line);padding-top:.7rem;padding-bottom:.7rem}
header.ye-entete.ye-sur-image.solid .ye-brand,header.ye-entete.ye-sur-image.solid nav.ye-nav a,header.ye-entete.ye-sur-image.solid .ye-burger{color:var(--ye-petrol);text-shadow:none;border-color:var(--ye-line)}
header.ye-entete.ye-sur-image.solid nav.ye-nav a:hover,header.ye-entete.ye-sur-image.solid nav.ye-nav a.here{color:var(--ye-accent)}

/* ---------- Menu latéral à points (.rail) sur mobile ----------
   Les pages le masquaient sous 900 px. Version compacte : points seuls,
   collés au bord droit, dans la marge, sans étiquette (la section active
   reste repérable au point plein). */
@media (max-width:900px){
  .rail{display:flex!important;left:auto!important;right:3px!important;gap:9px!important;align-items:flex-end!important;opacity:.75;mix-blend-mode:normal!important}
  .rail a{padding:3px!important;gap:0!important;justify-content:flex-end!important}
  .rail .lbl{display:none!important}
  .rail .dot{width:6px!important;height:6px!important}
}