/* ==========================================================================
   SENSIVIA COACHING — SYSTÈME DE DESIGN
   ---------------------------------------------------------------------------
   Site multi-pages. Feuille de style unique, partagée par toutes les pages.

   Direction : premium, aéré, résolument moderne — mais jamais tape-à-l'œil.
   Animations volontairement discrètes (fondu + légère montée au défilement,
   micro-interactions au survol). Aucun décor, aucune métaphore "eau/bien-être"
   traitée littéralement. La signature graphique est typographique et
   structurelle : grands titres serif, arc de points repris du logo, asymétrie
   assumée plutôt que blocs centrés.

   Polices : Fraunces + Instrument Sans, licence SIL OFL, servies depuis ce
   site (../fonts) — jamais depuis Google Fonts (transmission de l'IP du
   visiteur à Google à chaque page, voir checklist.md §4).
   ======================================================================== */

@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/instrument-sans.woff2') format('woff2');
}
@font-face{
  font-family:'Alex Brush';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/alex-brush.woff2') format('woff2');
}

/* ---------- Jetons de marque -------------------------------------------- */
:root{
  --fond:#FCFAF6;
  --creme:#F1EEE7;
  --papier:#FFFFFF;
  --encre:#292B1D;
  --sauge:#6B7A5C;
  --sauge-profond:#3A4530;
  --sauge-bouton:#5C6B52; /* vert sauge affirmé, réservé aux boutons pleins — plus clair et plus "sauge" que le vert très sombre utilisé pour les fonds pleine largeur */
  --terracotta:#A9713F;
  --terracotta-fonce:#875A31;
  --or:#C9862E;
  --or-fonce:#8E5A1E;
  --or-clair:#E0A957;
  --ligne:rgba(107,122,92,.22);
  --ligne-forte:rgba(107,122,92,.42);

  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Alex Brush","Segoe Script",cursive;

  --t-xs:clamp(.72rem,.70rem + .10vw,.79rem);
  --t-sm:clamp(.86rem,.83rem + .16vw,.97rem);
  --t-md:clamp(1.02rem,.97rem + .24vw,1.15rem);
  --t-lg:clamp(1.18rem,1.06rem + .5vw,1.55rem);
  --t-xl:clamp(1.55rem,1.25rem + 1.3vw,2.4rem);
  --t-2xl:clamp(2rem,1.4rem + 2.4vw,3.5rem);
  --t-3xl:clamp(2.6rem,1.5rem + 4.4vw,5.6rem);

  --sec:clamp(4.5rem,3rem + 7vw,9.5rem);
  --gut:clamp(1.4rem,.6rem + 3.4vw,4.2rem);
  --max:82rem;

  --vitesse:.5s;
  --aisance:cubic-bezier(.16,.8,.24,1);
}

/* ---------- Réinitialisation --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100svh;background:var(--fond);color:var(--encre);
  font-family:var(--sans);font-size:var(--t-md);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--sauge-profond);color:var(--fond)}
:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-3xl);line-height:.98;letter-spacing:-.028em}
h2{font-size:var(--t-2xl);line-height:1.08;letter-spacing:-.02em}
h3{font-size:var(--t-lg);line-height:1.3;letter-spacing:-.005em}
p{text-wrap:pretty;max-width:62ch}

/* Grain très léger, statique — richesse tactile sans mouvement.
   Discret par construction : 3 % d'opacité, jamais animé. */
body::before{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.025;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Repère "contenu manquant" ------------------------------------
   Volontairement voyant : c'est le garde-fou. Impossible de le laisser
   passer en ligne par mégarde. Voir Docs/Core/quality-standards.md, règle 1.9. */
.manque{
  display:inline-block;background:#FFE9A8;color:#5A4405;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82em;
  padding:.1em .5em;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(160,120,10,.5);
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evite{
  position:fixed;left:1rem;top:1rem;z-index:999;background:var(--sauge-profond);
  color:var(--fond);padding:.7rem 1.2rem;border-radius:3px;text-decoration:none;
  transform:translateY(-8rem);transition:transform .2s ease;font-size:var(--t-sm);
}
.evite:focus{transform:translateY(0)}

/* ---------- Structure ----------------------------------------------------*/
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  color:var(--sauge-profond);display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:1.9rem;height:1px;background:var(--or);flex:none}

/* Arc de points — repris de l'arc pointillé du logo. Signature graphique
   récurrente, utilisée comme séparateur entre les temps forts d'une page. */
.arc{display:flex;gap:.6rem;align-items:center}
.arc span{width:5px;height:5px;border-radius:50%;background:var(--or);opacity:.9}
.arc span:nth-child(2){width:4px;height:4px;opacity:.68}
.arc span:nth-child(3){width:3.4px;height:3.4px;opacity:.5}
.arc span:nth-child(4){width:2.8px;height:2.8px;opacity:.36}
.arc span:nth-child(5){width:2.2px;height:2.2px;opacity:.24}

/* ---------- Boutons -------------------------------------------------------*/
/* Traitement "verre liquide" : fond translucide + backdrop-filter (le flou
   capte ce qu'il y a derrière), liseré et reflet clairs qui simulent une
   arête de verre, ombre douce en dessous pour l'effet de flottement. Les
   couleurs de fond restent volontairement proches de l'opaque (0.88–0.92)
   pour que le contraste du texte reste conforme AA malgré la transparence —
   voir les calculs de contraste faits avant ce choix. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.2rem;padding:.9rem 2.1rem;border-radius:999px;font-weight:600;
  font-size:var(--t-sm);letter-spacing:.01em;text-decoration:none;border:1px solid rgba(255,255,255,.55);
  overflow:hidden;isolation:isolate;
  backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -8px 14px -10px rgba(20,18,10,.4),0 14px 32px -14px rgba(20,18,10,.55);
  transition:transform var(--vitesse) var(--aisance),box-shadow var(--vitesse) var(--aisance);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(41,43,29,.94);
  transform:translateX(-101%);transition:transform var(--vitesse) var(--aisance);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 62%);
}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -8px 14px -10px rgba(20,18,10,.35),0 20px 40px -16px rgba(20,18,10,.6)}
.btn:active{transform:translateY(0)}
.btn--plein{background:rgba(92,107,82,.92);color:var(--fond);border-color:rgba(255,255,255,.35)}
.btn--plein:hover::before{transform:translateX(0)}
.btn--ligne{background:rgba(255,255,255,.3);border-color:var(--ligne-forte);color:var(--encre)}
.btn--ligne::before{background:rgba(241,238,231,.96)}
.btn--ligne:hover::before{transform:translateX(0)}
.btn--clair{background:rgba(224,169,87,.88);color:var(--sauge-profond);border-color:rgba(255,255,255,.45)}
.btn--clair::before{background:rgba(252,250,246,.96)}
.btn--clair:hover::before{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.btn::before,.btn{transition:none}}

/* Deuxième porte d'entrée, volontairement discrète mais jamais cachée :
   certaines personnes ont besoin d'écrire avant de parler. */
.lien-discret{
  display:inline-block;margin-top:1.1rem;font-size:var(--t-sm);color:inherit;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-color:currentColor;opacity:.92;
  transition:opacity var(--vitesse) ease;
}
.lien-discret:hover{opacity:1}

.lien-fil{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--t-sm);
  text-decoration:none;padding-bottom:.2rem;background-image:linear-gradient(var(--or),var(--or));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size var(--vitesse) var(--aisance);
}
.lien-fil:hover{background-size:100% 1px}
.lien-fil svg{width:1em;height:1em;transition:transform var(--vitesse) var(--aisance)}
.lien-fil:hover svg{transform:translateX(3px)}

/* ---------- En-tête -------------------------------------------------------*/
.entete{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-block:1.4rem;transition:padding var(--vitesse) ease,background-color var(--vitesse) ease,
    box-shadow var(--vitesse) ease,backdrop-filter var(--vitesse) ease;
}
.entete .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,3rem)}
.entete.descendu{
  padding-block:.85rem;background:rgba(252,250,246,.78);
  backdrop-filter:blur(26px) saturate(200%);-webkit-backdrop-filter:blur(26px) saturate(200%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 1px 0 var(--ligne),0 16px 34px -22px rgba(41,43,29,.45);
}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--encre);margin-right:auto}
.marque img{height:2.35rem;width:auto}
.marque b{font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:.13em;text-transform:uppercase}

.nav-princ{display:none;gap:clamp(1.3rem,2.4vw,2.4rem)}
@media(min-width:1040px){.nav-princ{display:flex}}
.nav-princ a{
  font-size:var(--t-sm);text-decoration:none;color:var(--sauge);position:relative;padding-bottom:.3rem;
  white-space:nowrap;
}
.nav-princ a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--or-fonce);
  transition:right var(--vitesse) var(--aisance);
}
.nav-princ a:hover,.nav-princ a[aria-current="page"]{color:var(--encre)}
.nav-princ a:hover::after,.nav-princ a[aria-current="page"]::after{right:0}

.entete .btn{display:none;white-space:nowrap}
@media(min-width:640px){.entete .btn{display:inline-flex;min-height:2.5rem;padding:.55rem 1.1rem;font-size:var(--t-xs)}}

/* Icônes de suivi discrètes dans le bandeau de menu, même esprit "verre
   liquide" que .verre-social au pied de page mais en version réduite et
   ton sur ton, pour ne pas concurrencer la navigation principale. */
.entete__social{display:none;gap:.5rem}
@media(min-width:1040px){.entete__social{display:flex}}
.entete__social a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2.05rem;height:2.05rem;border-radius:50%;color:var(--sauge);
  background:linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,.08));
  backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 9px -7px rgba(41,43,29,.3),0 8px 16px -12px rgba(41,43,29,.4);
  overflow:hidden;isolation:isolate;
  transition:transform var(--vitesse) var(--aisance),color var(--vitesse) ease,background var(--vitesse) ease,box-shadow var(--vitesse) var(--aisance);
}
.entete__social a::before{
  content:"";position:absolute;top:-45%;left:-15%;width:75%;height:75%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 68%);
  transform:rotate(-25deg);pointer-events:none;
}
.entete__social svg{width:.92rem;height:.92rem;position:relative;z-index:1}
.entete__social a:hover{color:var(--encre);transform:translateY(-2px) scale(1.08)}
@media(prefers-reduced-motion:reduce){.entete__social a{transition:none}}

.menu-mobile__social{display:flex;gap:.6rem;margin-top:1.6rem}
.menu-mobile__social a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;color:var(--sauge);
  background:linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,.08));
  backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 9px -7px rgba(41,43,29,.3),0 8px 16px -12px rgba(41,43,29,.4);
  overflow:hidden;isolation:isolate;
}
.menu-mobile__social svg{width:1.05rem;height:1.05rem;position:relative;z-index:1}

.bascule-menu{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;background:none;border:0;margin-left:.3rem;
}
@media(min-width:1040px){.bascule-menu{display:none}}
.bascule-menu span{position:relative;width:20px;height:14px;display:block}
.bascule-menu span::before,.bascule-menu span::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--encre);
  transition:transform var(--vitesse) var(--aisance),opacity var(--vitesse) ease;
}
.bascule-menu span::before{top:0}
.bascule-menu span::after{bottom:0}
.menu-ouvert .bascule-menu span::before{transform:translateY(6.5px) rotate(45deg)}
.menu-ouvert .bascule-menu span::after{transform:translateY(-6.5px) rotate(-45deg)}

/* Menu mobile plein écran */
.menu-mobile{
  position:fixed;inset:0;z-index:90;background:var(--fond);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--vitesse) var(--aisance),visibility var(--vitesse),transform var(--vitesse) var(--aisance);
}
.menu-ouvert .menu-mobile{opacity:1;visibility:visible;transform:none}
.menu-mobile nav{display:flex;flex-direction:column;gap:.4rem}
.menu-mobile a{
  font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.4rem);text-decoration:none;color:var(--encre);
  padding-block:.55rem;border-bottom:1px solid var(--ligne);
}
.menu-mobile a[aria-current="page"]{color:var(--sauge-profond)}
.menu-mobile .btn{margin-top:2.2rem;align-self:flex-start;font-family:var(--sans);font-size:var(--t-sm);border-bottom:0}
.menu-mobile a.btn--plein{color:var(--fond)}
@media(min-width:1040px){.menu-mobile{display:none}}

/* ---------- Bandeau (œuvre en tête de page) ---------------------------------
   L'image occupe le haut de page comme une toile accrochée dans l'entrée
   d'un cabinet. Le bandeau complet (accueil) porte le logo en plaque
   discrète ; la version fine (pages intérieures) n'est qu'un rappel textural,
   pour unifier le site sans en alourdir chaque page. */
.bandeau{position:relative;width:100%;overflow:hidden;height:clamp(50vh,48vw,68vh);min-height:340px;background:var(--sauge-profond)}
.bandeau img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Le léger zoom est réservé à la toile de fond : .bandeau img cible aussi le
   logo de la plaque (descendant de .bandeau), d'où ce sélecteur plus précis. */
.bandeau > picture img{transform:scale(1.015)}
/* Le bandeau se fond en douceur dans la page plutôt que de s'arrêter net —
   public hypersensible, on évite les ruptures franches entre les blocs.
   Ce voile (dont le halo radial central) se peint par-dessus tout le
   contenu du bandeau par défaut : la plaque doit rester en z-index:1 pour
   ne pas récupérer une ombre grisâtre dessus. */
.bandeau::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%,rgba(18,13,8,.32) 0%,transparent 72%),
    linear-gradient(180deg,transparent 0%,transparent 92%,var(--fond) 100%),
    linear-gradient(180deg,rgba(26,18,12,.12) 0%,rgba(26,18,12,.04) 38%,rgba(26,18,12,.5) 100%);
}
/* La plaque est une vraie carte opaque plutôt que du texte posé sur la
   toile : un logo blanc ou vert sur une peinture chargée ne garantit
   jamais assez de contraste, quelle que soit la zone de l'image derrière.
   Ici la lisibilité ne dépend plus du tout de la photo. */
.bandeau__plaque{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;
  background:
    radial-gradient(ellipse 60% 55% at 18% -10%,rgba(255,255,255,.8),rgba(255,255,255,0) 68%),
    linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(252,250,246,.78) 45%,rgba(252,250,246,.84) 100%);
  backdrop-filter:blur(34px) saturate(220%);-webkit-backdrop-filter:blur(34px) saturate(220%);
  border:1px solid rgba(255,255,255,.8);border-radius:28px;
  padding:clamp(1.9rem,3.5vw,3.2rem) clamp(2.2rem,6vw,4.5rem);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -14px 22px -16px rgba(20,14,8,.3),
    inset 12px 0 26px -24px rgba(255,255,255,.9),inset -12px 0 26px -24px rgba(20,14,8,.18),
    0 34px 76px -30px rgba(20,14,8,.55),0 4px 12px -6px rgba(20,14,8,.2);
  width:clamp(19rem,52vw,34rem);
  max-width:92vw;
  overflow:hidden;isolation:isolate;
}
/* Reflet qui balaie la carte une fois à l'arrivée sur la page, comme la
   lumière glissant sur une vitre — puis reste immobile pour ne pas
   distraire durablement un public hypersensible. */
.bandeau__plaque::before{
  content:"";position:absolute;top:-30%;left:-35%;width:38%;height:160%;
  background:linear-gradient(78deg,transparent 0%,rgba(255,255,255,.05) 35%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.05) 65%,transparent 100%);
  transform:translateX(-40%) rotate(0deg);pointer-events:none;z-index:0;
  animation:reflet-verre-plaque 1.8s cubic-bezier(.4,0,.2,1) .6s 1 both;
}
.bandeau__plaque::after{
  content:"";position:absolute;left:8%;right:8%;bottom:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,14,8,.14),transparent);pointer-events:none;z-index:0;
}
@keyframes reflet-verre-plaque{
  0%{transform:translateX(-40%) rotate(0deg);opacity:0}
  12%{opacity:1}
  100%{transform:translateX(340%) rotate(0deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.bandeau__plaque::before{animation:none;opacity:0}}
.bandeau__plaque > *{position:relative;z-index:1}
.bandeau__plaque .bandeau__logo{width:100%;height:auto}
.bandeau__plaque .catchphrase{
  font-family:var(--sans);font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracotta-fonce);margin-top:.1rem;
}

/* En-tête toujours plein (jamais transparent) quand il coiffe un bandeau :
   la toile n'a pas besoin d'un logo qui flotte dessus pour être lue. */
.bandeau + .entete{background:rgba(252,250,246,.78);backdrop-filter:blur(26px) saturate(200%);-webkit-backdrop-filter:blur(26px) saturate(200%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 1px 0 var(--ligne)}

/* L'en-tête est fixed et se pose par-dessus le bandeau : sur un bandeau
   aussi court, il peut couvrir plus de la moitié de sa hauteur. --h-entete
   est une estimation volontairement généreuse de sa hauteur réelle
   (~86 à 92px selon la largeur), utilisée ci-dessous pour que le repère de
   marque se centre dans l'espace VISIBLE sous l'en-tête, pas dans la boîte
   entière du bandeau (sans quoi il se retrouve à moitié caché derrière). */
.bandeau--fin{height:clamp(210px,22vw,260px);min-height:0}
.bandeau--fin::after{
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,rgba(18,13,8,.28) 0%,transparent 75%),
    linear-gradient(180deg,transparent 0%,transparent 80%,var(--fond) 100%),
    linear-gradient(180deg,rgba(26,18,12,.1) 0%,rgba(26,18,12,.22) 100%);
}
/* Repère de marque repris sur chaque bandeau fin des pages intérieures —
   même logique que la plaque de l'accueil : une carte claire, pas du texte
   posé sur l'image, pour que ce soit lisible quelle que soit la zone de la
   peinture derrière. */
.bandeau__label{
  --h-entete:6rem;
  position:absolute;left:50%;top:calc(var(--h-entete) + (100% - var(--h-entete))/2);
  transform:translate(-50%,-50%);z-index:1;
  background:rgba(252,250,246,.8);backdrop-filter:blur(28px) saturate(220%);-webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.75);border-radius:999px;
  padding:.6rem 1.5rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 36px -20px rgba(20,14,8,.45);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,2.8vw,1.55rem);
  letter-spacing:.09em;text-transform:uppercase;color:var(--sauge-profond);white-space:nowrap;
}
@media(max-width:420px){.bandeau__label{white-space:normal;text-align:center}}
/* Le bandeau fin pousse déjà le contenu sous l'en-tête fixe : la grande
   respiration du haut de .hero--simple (prévue pour l'en-tête flottant
   seul) devient superflue et créerait un vide inutile. */
.bandeau ~ main .hero--simple{padding-top:clamp(2.2rem,1.7rem + 2vw,3.6rem)}

/* ---------- Collage "se reconnaître" ----------------------------------------
   Cartes dispersées et légèrement penchées autour du titre, façon collage —
   choix assumé du client plutôt qu'une grille sage. Bascule en liste simple
   sous 880px : le positionnement absolu ne tient pas sur un petit écran. */
.collage{position:relative;min-height:700px;display:flex;align-items:center;justify-content:center;margin-block:1rem}
.collage__titre{position:relative;z-index:1;text-align:center;max-width:38rem}
.collage__carte{
  position:absolute;left:var(--cx);top:var(--cy);
  width:min(84vw,300px);padding:1.5rem 1.7rem;border-radius:16px;
  background:rgba(255,255,255,.4);backdrop-filter:blur(34px) saturate(220%);-webkit-backdrop-filter:blur(34px) saturate(220%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),0 24px 50px -30px rgba(41,43,29,.45);
  font-family:var(--serif);font-size:var(--t-md);color:var(--sauge-profond);line-height:1.5;
  transition:transform var(--vitesse) var(--aisance),box-shadow var(--vitesse) var(--aisance);
}
.js .collage__carte.rev{transform:translateY(24px) rotate(var(--cr))}
/* Une fois révélée, chaque carte dérive doucement en boucle autour de sa
   position — inspiré de la vidéo de référence du client (mouvement continu,
   pas une simple rotation sur place). Amplitude volontairement modérée pour
   ne jamais empiéter sur le titre central ni distraire un public
   hypersensible ; coupée en mode apaisé et si le système demande moins
   de mouvement. */
.js .collage__carte.rev.pret{
  animation:carte-derive var(--cd,28s) ease-in-out infinite;
  animation-delay:var(--cdelay,0s);
}
@keyframes carte-derive{
  0%,100%{transform:translate(0,0) rotate(var(--cr))}
  25%{transform:translate(10px,-8px) rotate(var(--cr))}
  50%{transform:translate(3px,9px) rotate(var(--cr))}
  75%{transform:translate(-10px,3px) rotate(var(--cr))}
}
.js .collage__carte.rev.pret:hover{
  animation:none;transform:rotate(0deg) translateY(-5px) scale(1.02);
  box-shadow:0 30px 60px -28px rgba(41,43,29,.5);z-index:2;
}
.calme .collage__carte{animation:none!important}
@media(prefers-reduced-motion:reduce){.collage__carte{animation:none!important}}
@media(max-width:880px){
  .collage{min-height:0;display:grid;gap:1.1rem}
  .collage__titre{order:-1;max-width:none}
  .js .collage__carte.rev,.js .collage__carte.rev.pret,.js .collage__carte.rev.pret:hover{position:static;width:100%;transform:none;animation:none}
}
@media(prefers-reduced-motion:reduce){.collage__carte{transition:none}}

/* ---------- Guider vers l'équilibre -----------------------------------------*/
.equilibre{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;margin-top:2rem}
.equilibre__carte{
  background:rgba(255,255,255,.36);backdrop-filter:blur(34px) saturate(220%);-webkit-backdrop-filter:blur(34px) saturate(220%);
  border:1px solid rgba(255,255,255,.7);border-radius:20px;overflow:hidden;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),0 20px 44px -30px rgba(41,43,29,.4);
  transition:transform var(--vitesse) var(--aisance),box-shadow var(--vitesse) var(--aisance);
}
.equilibre__carte:hover{transform:translateY(-5px);box-shadow:0 28px 54px -28px rgba(41,43,29,.45)}
.equilibre__photo{aspect-ratio:4/3;overflow:hidden}
.equilibre__photo img{width:100%;height:100%;object-fit:cover;display:block}
.equilibre__carte h3{padding:1.4rem 1.6rem 0}
.equilibre__sous{padding:0 1.6rem;margin-top:.3rem;font-weight:600;color:var(--terracotta-fonce);font-size:var(--t-sm)}
.equilibre__carte > p{padding:.6rem 1.6rem 1.6rem;font-size:var(--t-sm);line-height:1.7;color:var(--sauge)}
@media(prefers-reduced-motion:reduce){.equilibre__carte{transition:none}}

/* ---------- Signature typographique -----------------------------------------*/
.signature{font-family:var(--script);font-size:2.3rem;line-height:1;color:var(--terracotta-fonce)}

/* ---------- Héros de page --------------------------------------------------*/
.hero{padding-block:clamp(8rem,6rem + 6vw,11.5rem) var(--sec)}
.hero--simple{padding-block:clamp(8rem,6rem + 6vw,11.5rem) clamp(3rem,2rem + 3vw,5rem)}
/* Variante sous bandeau : le en-tête ne flotte plus par-dessus (il est
   déjà plein), donc plus besoin de la grande respiration du haut. Colonne
   unique et centrée — la toile vient de porter le grand geste visuel. */
.hero--sous-bandeau{padding-block:clamp(3.2rem,2.5rem + 3vw,5.5rem) var(--sec);text-align:center}
.hero--sous-bandeau .hero__grille{grid-template-columns:1fr;justify-items:center}
.hero--sous-bandeau .hero__chapo,.hero--sous-bandeau .hero__note{margin-inline:auto}
.hero--sous-bandeau .hero__actions{justify-content:center}
.hero--sous-bandeau h1{margin-inline:auto}
.hero__grille{display:grid;gap:clamp(2.5rem,1rem + 6vw,5rem);align-items:end}
@media(min-width:960px){.hero__grille{grid-template-columns:1.15fr .85fr}}
.hero h1{margin-block:1.5rem 1.7rem;font-size:clamp(2.1rem,1.3rem + 3.2vw,4.2rem)}
/* Mot-signature en script — seul accent du site à sortir de la paire
   serif/sans. Réservé à un mot par page tout au plus : un signe de
   ponctuation manuscrit, pas un système. */
.hero h1 em{
  font-family:var(--script);font-style:normal;font-weight:400;color:var(--terracotta-fonce);
  display:inline-block;line-height:1;padding-inline:.1em;font-size:1.28em;vertical-align:-.07em;
}
.hero__chapo{font-size:var(--t-lg);line-height:1.5;color:var(--sauge);max-width:38ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
.hero__note{margin-top:2.3rem;padding-top:1.4rem;border-top:1px solid var(--ligne);font-size:var(--t-sm);color:var(--sauge);max-width:46ch}

.portrait{position:relative}
.portrait__cadre{position:absolute;inset:1.5rem -1.5rem -1.5rem 1.5rem;border:1px solid var(--ligne-forte);pointer-events:none}
.portrait__zone{
  position:relative;aspect-ratio:4/5;background:linear-gradient(155deg,var(--creme),#EAE2CF 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:2.2rem;text-align:center;
  overflow:hidden;
}
.portrait__zone::after{
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.portrait__zone svg,.portrait__zone img.symbole{width:4rem;height:auto;opacity:.4;position:relative}
.portrait__zone p{font-size:var(--t-sm);color:var(--sauge);max-width:26ch;position:relative}
.portrait__zone img.portrait__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
}
.portrait__zone--photo::after{display:none}

/* ---------- Duo texte / image (portrait à côté d'un texte) -----------------*/
.duo{display:grid;gap:clamp(2.5rem,4vw,5rem);align-items:start}
@media(min-width:900px){.duo{grid-template-columns:.82fr 1.18fr}}
.duo .portrait{position:sticky;top:7rem}

/* Variante légère du duo : simple photo arrondie (sans le cadre "à
   compléter" de .portrait), pour les photos de vie déjà disponibles sur
   les pages Prestations et Contact. */
.duo__photo{position:sticky;top:7rem;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(41,43,29,.4)}
.duo__photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:899px){.duo__photo{position:static}}

/* Carte photo centrée avec légende, pour une seconde photo plus libre au
   fil d'une page (ex. la photo extérieure sur la page À propos). */
.photo-encart{max-width:24rem;margin:3rem auto 0;text-align:center}
.photo-encart img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;
  box-shadow:0 30px 60px -30px rgba(41,43,29,.4);
}
.photo-encart figcaption{margin-top:1rem;font-size:var(--t-sm);font-style:italic;color:var(--sauge)}
@media(max-width:899px){.duo .portrait{position:static}}

/* ---------- Sections -------------------------------------------------------*/
.sec{padding-block:var(--sec);position:relative}
.sec--creme{background:var(--creme)}
.entete-sec{display:grid;gap:1.5rem;margin-bottom:clamp(2.5rem,2rem + 2.5vw,4rem)}
@media(min-width:900px){.entete-sec{grid-template-columns:1.3fr .9fr;align-items:end}}
.entete-sec h2{max-width:16ch}
.entete-sec .col-b{font-size:var(--t-md);color:var(--sauge);max-width:44ch}

/* ---------- Révélation discrète au défilement ------------------------------
   Fondu + très légère montée (14px). Rien d'autre. Emilie a explicitement
   demandé d'éviter les animations excessives : on marque la modernité par
   la typographie et la mise en page, pas par le mouvement. */
.js .rev{opacity:0;transform:translateY(16px);transition:opacity .8s var(--aisance),transform .9s var(--aisance)}
.js .rev.pret{opacity:1;transform:none}
.js .rev-grp .rev:nth-child(2){transition-delay:.08s}
.js .rev-grp .rev:nth-child(3){transition-delay:.16s}
.js .rev-grp .rev:nth-child(4){transition-delay:.24s}
.js .rev-grp .rev:nth-child(5){transition-delay:.32s}
.js .rev-grp .rev:nth-child(6){transition-delay:.4s}

/* ---------- Ruban défilant (accueil uniquement) ----------------------------*/
.ruban{overflow:hidden;border-block:1px solid var(--ligne);padding-block:1.5rem}
.ruban-in{display:flex;width:max-content;animation:glisse 60s linear infinite}
.ruban:hover .ruban-in{animation-play-state:paused}
.ruban span{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--sauge);
  font-size:clamp(1rem,1.6vw,1.3rem);display:inline-flex;align-items:center;white-space:nowrap;
}
.ruban span::after{content:"·";color:var(--or);font-style:normal;margin-inline:clamp(1.6rem,3vw,3rem)}
@keyframes glisse{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.ruban-in{animation:none}}

/* ---------- Cartes de verre ---------------------------------------------------
   Remplace les listes empilées "ligne après ligne, séparées d'un filet" pour
   les trois blocs qui présentent un contenu numéroté (situations, piliers,
   étapes). Glassmorphism mesuré : cartes dépolies flottant sur deux halos de
   couleur de marque très doux, jamais de couleur vive plaquée sur la carte
   elle-même. Les halos vivent sur la section (.sec--verre), pas sur la grille,
   pour qu'ils débordent proprement derrière plusieurs rangées de cartes. */
.sec--verre{position:relative;overflow:hidden}
.sec--verre::before,.sec--verre::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.sec--verre::before{width:24rem;height:24rem;background:rgba(169,113,63,.11);top:-8rem;left:-6rem}
.sec--verre::after{width:29rem;height:29rem;background:rgba(107,122,92,.24);bottom:-10rem;right:-8rem}
.sec--verre>.wrap{position:relative;z-index:1}

.situations,.etapes,.trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}

.situation,.etape,.trois article{
  position:relative;padding:2rem 1.9rem;border-radius:16px;
  background:rgba(255,255,255,.32);backdrop-filter:blur(34px) saturate(220%);-webkit-backdrop-filter:blur(34px) saturate(220%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),0 20px 44px -30px rgba(41,43,29,.4);
  transition:transform .45s var(--aisance),box-shadow .45s var(--aisance),background .45s ease;
}
.situation:hover,.etape:hover,.trois article:hover{
  transform:translateY(-4px);background:rgba(255,255,255,.6);box-shadow:0 28px 54px -28px rgba(41,43,29,.45);
}
/* Léger tilt au survol, propre à cette section — une variation sur le
   "verre liquide" des boutons plutôt qu'une redite de l'effet dispersé
   utilisé juste au-dessus pour les cartes "se reconnaître". */
.trois article:nth-child(1):hover{transform:translateY(-6px) rotate(-1.4deg)}
.trois article:nth-child(2):hover{transform:translateY(-6px) rotate(1.2deg)}
.trois article:nth-child(3):hover{transform:translateY(-6px) rotate(-1deg)}

.situation__n,.trois article .num{
  display:block;font-family:var(--serif);font-size:var(--t-2xl);line-height:1;color:var(--terracotta-fonce);
  opacity:.4;margin-bottom:.6rem;font-variant-numeric:tabular-nums;letter-spacing:0;
}
.situation p{font-size:var(--t-md);line-height:1.55;font-family:var(--serif);color:var(--encre)}
.trois article h3{margin-bottom:.5rem}
.trois article p{font-size:var(--t-sm);line-height:1.75;color:var(--sauge)}

.etape__tag{
  display:inline-block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  color:var(--sauge-profond);background:rgba(107,122,92,.14);padding:.35em .85em;border-radius:999px;margin-bottom:.9rem;
}
.etape h3{margin-bottom:.5rem}
.etape p{color:var(--sauge);font-size:var(--t-sm);line-height:1.75}
.minutage{margin-top:.9rem;display:grid;gap:.6rem}
.minutage li{list-style:none;padding-left:1.3rem;position:relative;font-size:var(--t-sm);color:var(--sauge);line-height:1.7}
.minutage li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--or)}
.minutage b{color:var(--encre);font-weight:600}

@media(prefers-reduced-motion:reduce){.situation,.etape,.trois article{transition:none}}

/* ---------- Limites — honnêteté sur le champ d'action -----------------------*/
.limites{margin-top:1rem;max-width:66ch;display:grid;gap:1.1rem}
.limites li{list-style:none;padding-left:1.5rem;position:relative;font-size:var(--t-md);line-height:1.7;color:var(--sauge)}
.limites li::before{content:"–";position:absolute;left:0;color:var(--terracotta-fonce)}
.limites strong{color:var(--encre);font-weight:600}

/* ---------- Comparaison (ce que ce n'est pas / ce que c'est) ---------------*/
.oppose{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);margin-top:1rem}
@media(max-width:700px){.oppose{grid-template-columns:1fr}}
.oppose > div{background:var(--fond);padding:clamp(1.8rem,3vw,2.6rem)}
.sec--creme .oppose > div{background:var(--creme)}
.oppose h4{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem;font-weight:600}
.oppose .non h4{color:var(--terracotta-fonce)}
.oppose .oui h4{color:var(--sauge-profond)}
.oppose li{font-size:var(--t-sm);line-height:1.8;color:var(--sauge);padding-left:1.2rem;position:relative;margin-bottom:.75rem}
.oppose li::before{content:"–";position:absolute;left:0;color:var(--or)}

/* ---------- Tarifs -----------------------------------------------------------*/
.tarifs{display:grid;gap:1px;background:var(--ligne)}
@media(min-width:820px){.tarifs{grid-template-columns:repeat(2,1fr)}}
.tarif{background:var(--fond);padding:clamp(1.9rem,1rem + 2.5vw,3rem)}
.sec--creme .tarif{background:var(--creme)}
.tarif--phare{background:var(--papier);box-shadow:inset 0 0 0 1px var(--or-clair)}
.tarif__tag{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--terracotta-fonce);font-weight:600;margin-bottom:.6rem;display:block}
.tarif h3{margin-bottom:.3rem}
.tarif__sous{font-size:var(--t-sm);color:var(--sauge);margin-bottom:1rem}
.tarif__prix{font-family:var(--serif);font-size:var(--t-xl);color:var(--sauge-profond)}
.tarif__prix small{font-family:var(--sans);font-size:var(--t-sm);color:var(--sauge);font-weight:400}
.tarif ul{margin-top:1.3rem;display:grid;gap:.65rem;font-size:var(--t-sm);color:var(--sauge)}
.tarif li{display:flex;gap:.7rem;align-items:flex-start}
.tarif li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--or);margin-top:.62em}
.encart{
  margin-top:2.4rem;padding:1.6rem 1.9rem;background:var(--sauge-profond);color:var(--fond);
  font-size:var(--t-sm);border-radius:2px;max-width:60ch;
}
.encart strong{font-weight:600}

/* ---------- Citation / témoignage --------------------------------------------*/
.citation-bloc{position:relative;max-width:60rem}
.citation-bloc .guillemet{
  font-family:var(--serif);font-size:6rem;line-height:1;color:var(--or-clair);opacity:.55;
  position:absolute;left:-.15em;top:-1.2rem;pointer-events:none;
}
.citation-bloc blockquote{
  position:relative;margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--t-xl);line-height:1.44;color:var(--encre);white-space:pre-line;
}
.citation-bloc footer{margin-top:1.8rem;font-size:var(--t-sm);color:var(--sauge)}

/* ---------- FAQ ----------------------------------------------------------------*/
.faq{max-width:56rem}
.faq details{border-top:1px solid var(--ligne)}
.faq details:last-of-type{border-bottom:1px solid var(--ligne)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:1.5rem;font-family:var(--serif);
  font-size:var(--t-lg);line-height:1.35;display:flex;gap:1.5rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--or);font-family:var(--sans);font-size:1.5rem;
  line-height:1;flex:none;transition:transform var(--vitesse) var(--aisance);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--sauge)}
.faq p{padding-bottom:1.7rem;color:var(--sauge);max-width:58ch}

/* ---------- Formulaire ----------------------------------------------------------*/
.forme{max-width:34rem}
.champ-g{margin-bottom:1.5rem}
.champ-g label{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--sauge);margin-bottom:.6rem;font-weight:600}
.champ-g input,.champ-g textarea{
  width:100%;background:var(--papier);border:1px solid var(--ligne-forte);border-radius:2px;
  font-family:var(--sans);font-size:var(--t-md);color:var(--encre);padding:.9rem 1rem;
  transition:border-color var(--vitesse) ease,box-shadow var(--vitesse) ease;
}
.champ-g input:focus,.champ-g textarea:focus{border-color:var(--or-fonce);box-shadow:0 0 0 3px rgba(201,134,46,.15)}
.rgpd{display:flex;gap:.8rem;align-items:flex-start;margin:1.6rem 0 1.8rem;font-size:var(--t-sm);line-height:1.6;color:var(--sauge)}
.rgpd input{margin-top:.3rem;accent-color:var(--or-fonce);width:1rem;height:1rem;flex-shrink:0}
.confirmation{margin-top:1.4rem;font-size:var(--t-sm);color:var(--sauge-profond);background:var(--creme);padding:1rem 1.3rem;border-radius:2px}
.confirmation[hidden]{display:none}

/* ---------- Cartes de contact ----------------------------------------------------*/
.canaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--ligne);margin-top:1rem}
.canal{background:var(--fond);padding:clamp(1.7rem,2vw,2.2rem)}
.sec--creme .canal{background:var(--creme)}
.canal .eyebrow{margin-bottom:.9rem}
.canal .btn{width:100%;white-space:nowrap}
.canal p{font-size:var(--t-sm);color:var(--sauge);margin-top:.9rem;overflow-wrap:anywhere}

/* ---------- Pied de page --------------------------------------------------------*/
.pied{background:var(--sauge-bouton);color:var(--fond);padding-block:clamp(3.5rem,2.5rem + 3vw,5.5rem);font-size:var(--t-sm)}
.pied__logo-lien{display:inline-block;margin-bottom:1.1rem}
.pied__logo-lien img{width:11.5rem;height:auto}
.pied a{color:rgba(252,250,246,.92);text-decoration:none}
.pied__grille{display:grid;gap:2.6rem}
@media(min-width:780px){.pied__grille{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pied h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--or-clair);margin-bottom:1.1rem;font-weight:600}
.pied ul{display:grid;gap:.65rem}
.pied a:hover{text-decoration:underline}
.pied p{color:rgba(252,250,246,.9);max-width:30ch}

/* Icônes "Suivre" en verre liquide : dégradé de blanc translucide + fort
   flou/saturation derrière, reflet en creux sur le bord haut, arc de
   brillance en ::before qui simule la courbure du verre. Posées sur le
   fond plein du pied de page — c'est là que l'effet de flottement se voit
   le mieux, pas de contrainte de contraste de texte à respecter dessus. */
.pied__social{display:flex;gap:.75rem;margin-top:.3rem}
.verre-social{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:50%;color:var(--fond);
  background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,.05));
  backdrop-filter:blur(22px) saturate(220%);-webkit-backdrop-filter:blur(22px) saturate(220%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.65),inset 0 -8px 12px -8px rgba(0,0,0,.3),0 12px 26px -16px rgba(0,0,0,.55);
  overflow:hidden;isolation:isolate;
  transition:transform var(--vitesse) var(--aisance),box-shadow var(--vitesse) var(--aisance),background var(--vitesse) ease;
}
.verre-social::before{
  content:"";position:absolute;top:-45%;left:-15%;width:75%;height:75%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 68%);
  transform:rotate(-25deg);pointer-events:none;
}
.verre-social svg{width:1.15rem;height:1.15rem;position:relative;z-index:1}
.verre-social:hover{
  transform:translateY(-3px) scale(1.07);color:var(--fond);
  background:linear-gradient(155deg,rgba(255,255,255,.48),rgba(255,255,255,.1));
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.75),inset 0 -8px 12px -8px rgba(0,0,0,.25),0 18px 34px -16px rgba(0,0,0,.6);
}
@media(prefers-reduced-motion:reduce){.verre-social{transition:none}}
.pied__bas{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid rgba(252,250,246,.22);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:var(--t-xs);
  color:rgba(252,250,246,.88);
}

/* ---------- Pages calmes (mentions légales, confidentialité) -------------------*/
.feuille{max-width:52rem}
.feuille h2{margin-top:2.75rem;margin-bottom:.9rem;padding-top:1.6rem;border-top:1px solid var(--ligne);font-size:var(--t-xl)}
.feuille h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.feuille p,.feuille li{margin-bottom:.9rem;max-width:64ch;color:var(--sauge)}
.feuille dl{display:grid;gap:.3rem;margin-bottom:1.2rem}
.feuille dt{font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--terracotta-fonce);margin-top:.7rem}
.feuille dd{margin:0 0 .2rem;color:var(--encre)}
.feuille table{width:100%;border-collapse:collapse;margin-bottom:1.2rem;font-size:var(--t-sm)}
.feuille th,.feuille td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--ligne);vertical-align:top;color:var(--sauge)}
.feuille th{color:var(--sauge-profond);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em}
.avert{background:var(--creme);border-left:3px solid var(--or-fonce);padding:1.3rem 1.6rem;margin-bottom:2.5rem;font-size:var(--t-sm);border-radius:0 2px 2px 0}

/* ---------- Accessibilité / impression ------------------------------------------*/
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .rev{opacity:1!important;transform:none!important}
}
@media print{.entete,.menu-mobile,.pied,.evite,.ruban{display:none}body{background:#fff;color:#000}body::before{display:none}}

/* ---------- Affichage apaisé --------------------------------------------------
   Un réglage réel, pas un simple mot dans le texte : reprend les mêmes
   coupures que prefers-reduced-motion, déclenchées ici par un choix
   explicite et mémorisé plutôt que par un réglage système que peu de
   monde connaît. */
html.calme{scroll-behavior:auto}
.calme *,.calme *::before,.calme *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
/* Le filet ci-dessus force une durée quasi nulle sur TOUTE animation — pour
   une animation en boucle infinie comme le ruban, ça ne l'arrête pas, ça la
   fait tourner des milliers de fois par seconde (défilement affolé au lieu
   d'être coupé). Il faut la couper franchement, pas l'accélérer. */
.calme .ruban-in{animation:none!important}
.calme .rev{opacity:1!important;transform:none!important}
.calme .situation:hover,.calme .etape:hover,.calme .trois article:hover{transform:none!important}
.calme .mini-affiche:hover{transform:none}
.calme .sec--verre::before,.calme .sec--verre::after{opacity:.45}
.calme .bandeau > picture img{filter:blur(3px) saturate(.8) brightness(1.02)}
.calme body::before{opacity:.012}

.bascule-calme{
  position:fixed;left:1.1rem;bottom:1.1rem;z-index:150;
  display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(255,255,255,.7);border-radius:999px;
  background:rgba(252,250,246,.8);backdrop-filter:blur(26px) saturate(220%);-webkit-backdrop-filter:blur(26px) saturate(220%);
  padding:.65rem 1.15rem .65rem .8rem;font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.06em;
  font-weight:600;color:var(--sauge-profond);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px -18px rgba(41,43,29,.4);
  transition:background var(--vitesse) ease,color var(--vitesse) ease;
}
.bascule-calme svg{width:1.15em;height:1.15em;flex:none}
.bascule-calme span{white-space:nowrap}
.bascule-calme[aria-pressed="true"]{background:var(--sauge-bouton);color:var(--fond)}
.bascule-calme:hover{background:var(--creme)}
.bascule-calme[aria-pressed="true"]:hover{background:var(--sauge-bouton)}
@media(max-width:560px){.bascule-calme span{display:none}.bascule-calme{padding:.7rem}}

/* Transitions douces entre pages (progressive enhancement, Chromium) —
   simple fondu croisé natif, aucune bibliothèque, aucun coût si non supporté. */
@view-transition{navigation:auto}