/* ===========================================================
   MAIN.CSS — Socle commun SARCANA
   Base, matière, typographie, composants, en-tête, pied de
   page, ouverture du site et mouvements.
   Les styles propres à chaque section vivent dans pages.css.
   =========================================================== */

/* ─── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-md));
  /* Sur macOS, l'écriture claire sur fond sombre s'engraisse sans
     ce lissage : les déliés de Grenze s'y perdent. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

/* ─── La matière ───────────────────────────────────────── */
/* Deux couches fixes au-dessus de toute la page, inertes au
   pointeur. C'est ce qui distingue une nuit imprimée d'un aplat
   de couleur : le grain casse l'uniformité, la vignette donne un
   centre à l'écran. Sans elles, n'importe quel fond sombre
   ressemble à un gabarit. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
}
body::before {
  background-image: var(--grain);
  background-size: 240px 240px;
  opacity: .05;
  mix-blend-mode: overlay;
}
body::after {
  background: radial-gradient(ellipse 118% 88% at 50% 42%,
    transparent 46%, rgba(12, 32, 39, .10) 100%);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* Un liseré neutre — jamais teinté de la marque — pour que le bord
   d'une photo ne se dissolve pas dans la nuit. */
img { outline: 1px solid rgba(22, 38, 43, .09); outline-offset: -1px; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--mauve-500);
  outline-offset: 3px;
  border-radius: var(--r-fin);
}
::selection { background: var(--mauve-300); color: var(--encre); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: var(--sp-sm);
  z-index: 2000;
  padding: var(--sp-xs) var(--sp-md);
  background: var(--mauve-700);
  color: var(--encre);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
}
.saut-contenu:focus { left: var(--sp-sm); }

/* ─── Typographie ──────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-serre);
  color: var(--texte);
  font-variant-ligatures: common-ligatures contextual;
  /* Un titre qui laisse un mot seul sur la dernière ligne trahit
     un gabarit. `balance` répartit les lignes. */
  text-wrap: balance;
}
p { margin: 0 0 var(--sp-sm); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.titan   { font-size: var(--fs-titan);   line-height: var(--lh-serre); }
.display { font-size: var(--fs-display); }
.h1      { font-size: var(--fs-h1); }
.h2      { font-size: var(--fs-h2); }
.h3      { font-size: var(--fs-h3); line-height: var(--lh-court); }
.h4      { font-size: var(--fs-h4); line-height: var(--lh-court); letter-spacing: var(--ls-normal); }

.main {
  display: block;
  font-family: var(--font-main);
  font-size: var(--fs-main);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-normal);
  color: var(--mauve-500);
  margin-bottom: -0.1em;
}
.main--sm { font-size: var(--fs-main-sm); }
.main--or { color: var(--or-700); }

/* Sur-titre : le repère de lecture du site. Un filet, puis des
   capitales très espacées. */
.sur-titre {
  display: flex;
  /* Le filet suit la première ligne, pas le centre du bloc : dès que le
     libellé passe sur deux lignes, ce qui arrive sur téléphone, un
     alignement centré le fait flotter au milieu du vide. */
  align-items: flex-start;
  gap: var(--sp-xs);
  margin: 0 0 var(--sp-sm);
  font-family: var(--font-texte);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-max);
  text-transform: uppercase;
  color: var(--mauve-500);
}
/* Les deux filets dans UNE règle : déclarés séparément, ils avaient dérivé
   et celui de droite se retrouvait plus bas que celui de gauche.

   Un filet ne se cale pas sur le milieu de la boîte de ligne mais sur le
   milieu optique des capitales, qui est plus bas : la boîte réserve de la
   place pour les descendantes que des capitales n'utilisent pas. Mesuré sur
   Karla : ascendante 0,909 em, descendante 0,273 em, hauteur de capitale
   0,655 em. D'où demi-conduite + ascendante moins la moitié de la capitale.
   La valeur en em sert de repli aux navigateurs sans l'unité `lh`. */
.sur-titre::before,
.sur-titre--centre::after {
  content: '';
  width: clamp(20px, 3vw, 42px);
  height: 1px;
  margin-top: .86em;
  margin-top: calc((1lh - 1.182em) / 2 + .5815em);
  flex: none;
  background: var(--filet-mauve);
}
/* 0,28 em d'interlettre sur un libellé de sept mots, c'est trois lignes
   sur un téléphone. L'espacement se resserre, la voix reste la même. */
@media (max-width: 699px) {
  .sur-titre { gap: var(--sp-2xs); letter-spacing: var(--ls-plus); }
}
.sur-titre--centre { justify-content: center; }

.chapo {
  font-size: var(--fs-chapo);
  font-weight: var(--fw-fin);
  line-height: var(--lh-aere);
  color: var(--texte-doux);
}
.texte-doux   { color: var(--texte-doux); }
.texte-faible { color: var(--texte-faible); }
.mesure        { max-width: var(--conteneur-texte); }
.mesure-courte { max-width: 52ch; }
.centre        { text-align: center; }
/* Un groupe de boutons ne se centre pas par `text-align` : c'est un flex,
   et ce sont ses items qu'il faut placer. Les pages interieures reprennent
   le geste du bloc rendez-vous de l'accueil. */
.btn-groupe--centre { justify-content: center; margin-top: var(--sp-lg); }
.centre .sur-titre { justify-content: center; }
.centre .mesure, .centre .mesure-courte { margin-inline: auto; }

/* Les tarifs et les durées changent d'un soin à l'autre : sans
   chiffres tabulaires, les colonnes dansent. */
.chiffre { font-variant-numeric: tabular-nums; }

.lien {
  color: var(--texte-accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition-property: background-size, color;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.lien:hover, .lien:focus-visible { background-size: 100% 1px; }

/* ─── Sections ─────────────────────────────────────────── */
/* Les fonds ne s'opposent plus en clair/sombre : ils se
   distinguent par la profondeur. L'écart de luminosité entre
   --panneau-fort et --panneau est faible ; c'est le filet
   et la matière qui marquent le passage. */
.section { position: relative; padding-block: var(--section-y); }
.section--ample { padding-block: var(--section-y-ample); }
.section--dense { padding-block: var(--section-y-dense); }

.section--profonde { background: var(--panneau-fort); }

/* ─── Sections à photo ──────────────────────────────────────
   La photo tient tout le fond de la SECTION, et le contenu se
   pose dessus dans un encart clair. C'est la composition que
   Laurence a retenue : on voit le paysage, et le texte a son
   propre support au lieu d'être posé à même l'image. */
.section--photo { background: none; isolation: isolate; }
.section--photo > .section__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}
.section--photo > .section__fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  outline: 0;
  filter: var(--etalonnage-paysage);
}
/* Deux couches. Le lavis relève la photo : sans lui, une ombre de
   sous-bois passe sous l'encart et le fait virer au gris. Le dégradé
   par-dessus éteint la photo sur ses bords haut et bas, de sorte que la
   section se fonde dans les sections claires qui l'encadrent au lieu de
   s'y découper net. Le paysage reste entier là où il compte : autour de
   l'encart. */
.section--photo > .section__fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--panneau-fort) 0%,
      rgba(241, 247, 248, .34) 14%,
      rgba(241, 247, 248, .24) 50%,
      rgba(241, 247, 248, .38) 86%,
      var(--panneau-fort) 100%),
    var(--lavis-paysage);
}

.encart {
  position: relative;
  padding: clamp(26px, 3.4vw, 54px) clamp(22px, 3vw, 48px);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--panneau);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
          backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: var(--relief-md);
}
.encart--fort { background: var(--panneau-fort); }

/* ─── Sections à lueur ──────────────────────────────────────
   « des dégradés blanc avec lueur de couleur ». Pas de photo,
   pas d'aplat : un fond clair d'où monte une seule de ses deux
   couleurs, très diluée. C'est ce qui sépare deux sections à
   photo sans jamais faire une troisième image.
   Retour de la cliente (11 septembre 2026) : « un peu moins
   blanc, très léger ». Le socle n'est donc plus le panneau
   presque blanc mais un passage entre les deux valeurs 050 de
   ses rampes, du mauve vers le pétrole : la surface entière
   appartient à sa palette, et les deux lueurs montent dessus.
   Premier réglage : les valeurs 050 des rampes, centre à #efedf2
   (L* 94,0, contre 96,8 avant). Second réglage le même jour, la
   cliente en voulant « encore un peu » : le socle passe aux jetons
   --lueur-*, à 40 % du chemin vers les 100, et les lueurs montent
   de quatre centièmes. Contraste re-mesuré ensuite, voir README. */
.section--lueur {
  background: linear-gradient(160deg, var(--lueur-mauve) 0%, var(--lueur-petrole) 100%);
}
.section--lueur::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 62% at 16% 8%, rgba(129, 95, 124, .24), transparent 68%),
    radial-gradient(ellipse 64% 74% at 92% 88%, rgba(30, 74, 84, .22), transparent 70%);
}
.section--lueur--petrole {
  background: linear-gradient(200deg, var(--lueur-petrole) 0%, var(--lueur-mauve) 100%);
}
.section--lueur--petrole::after {
  background:
    radial-gradient(ellipse 74% 58% at 84% 4%, rgba(30, 74, 84, .26), transparent 66%),
    radial-gradient(ellipse 58% 70% at 8% 92%, rgba(129, 95, 124, .20), transparent 72%);
}
.section--relief   { background: var(--panneau); }
.section--veloutee { background: var(--panneau-mauve); }
.section--petrole  { background: var(--panneau-petrole); }

/* Le filet de passage. Une ligne d'un pixel qui s'éteint sur les
   bords : elle sépare deux nuits voisines sans créer de tranche. */
.section--filet::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--filet-appuye) 22%, var(--filet-appuye) 78%, transparent);
}

/* ─── Conteneurs & grilles ─────────────────────────────── */
.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  position: relative;
}
.conteneur--large { max-width: var(--conteneur-large); }
.conteneur--texte { max-width: calc(var(--conteneur-texte) + var(--gouttiere) * 2); }

/* Grille éditoriale à 12 colonnes. Les blocs s'y posent en
   décalé — une composition symétrique répétée section après
   section est ce qui fait « gabarit ». */
.grille {
  display: grid;
  gap: clamp(var(--sp-md), 4vw, var(--sp-xl));
}
@media (min-width: 900px) {
  .grille { grid-template-columns: repeat(12, 1fr); }
  .col-1-5  { grid-column: 1 / 6; }
  .col-1-6  { grid-column: 1 / 7; }
  .col-1-7  { grid-column: 1 / 8; }
  .col-2-7  { grid-column: 2 / 8; }
  .col-3-11 { grid-column: 3 / 12; }
  .col-6-13 { grid-column: 6 / 13; }
  .col-7-13 { grid-column: 7 / 13; }
  .col-8-13 { grid-column: 8 / 13; }
  .aligne-bas { align-self: end; }
}

/* ─── Médias ───────────────────────────────────────────── */
.media { position: relative; }
.media img { width: 100%; }

.cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-carte);
  box-shadow: var(--relief-md);
}
.cadre img { width: 100%; height: 100%; object-fit: cover; }

/* Le voile n'est pas un dégradé de couleur posé sur la photo :
   il la désature d'abord, puis la reteinte. Une image de banque
   se reconnaît à ses couleurs avant sa composition. */
.cadre--voile img { filter: saturate(.42) contrast(1.06) brightness(.86); }
.cadre--voile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--voile-photo);
  pointer-events: none;
}
.cadre--teinte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(129, 95, 124, .18);
  mix-blend-mode: color;
  pointer-events: none;
}

.cadre-parallaxe { position: relative; overflow: hidden; }
/* Deux mouvements peuvent viser la meme image : le defilement et la
   souris. S'ils ecrivaient tous deux `transform`, le dernier ecraserait
   l'autre — c'est exactement le bug qui avait deporte le halo du pied.
   Chacun ecrit donc SA variable, et la composition se fait ici. */
.cadre-parallaxe img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0)
             scale(var(--zoom, 1));
}

/* Une image qui suit la souris doit avoir de la marge sous le cadre,
   sinon le deplacement decouvre un bord. 7 % de rab, soit ~18 px de
   chaque cote sur une image de 500 px. */
[data-souris] img { --zoom: 1.07; }
/* Les portraits bougent moins (data-souris="8") : 4 % de rab suffisent, et
   chaque pour cent de zoom est un bord de la photo qu'on ne voit plus. */
.cadre--portrait[data-souris] img { --zoom: 1.04; }

/* ─── Boutons ──────────────────────────────────────────── */
.btn {
  --btn-fond: transparent;
  --btn-texte: var(--encre);
  --btn-filet: var(--filet-appuye);
  --btn-remplissage: var(--encre);
  --btn-texte-actif: var(--panneau-fort);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-height: 46px;
  padding: 1.05em 2em;
  border: 1px solid var(--btn-filet);
  border-radius: var(--r-fin);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: var(--font-texte);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition-property: color, border-color, transform;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-remplissage);
  transform: scaleX(0);
  transform-origin: left center;
  transition-property: transform;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible {
  color: var(--btn-texte-actif);
  border-color: var(--btn-remplissage);
}
/* Un enfoncement franc mais court : c'est ce qui rend un bouton
   tactile plutôt que décoratif. */
.btn:active { transform: scale(.975); transition-duration: var(--t-eclair); }

.btn--primaire {
  --btn-fond: var(--mauve-700);
  --btn-texte: var(--mauve-050);
  --btn-filet: var(--mauve-300);
  --btn-remplissage: var(--mauve-300);
  --btn-texte-actif: var(--panneau-fort);
}
.btn--or {
  --btn-fond: transparent;
  --btn-texte: var(--or-700);
  --btn-filet: var(--filet-or);
  --btn-remplissage: var(--or-500);
  --btn-texte-actif: var(--panneau-fort);
}
.btn--whatsapp {
  --btn-fond: #1c6e53;
  --btn-texte: #f2f8f5;
  --btn-filet: #24855f;
  --btn-remplissage: #2ea173;
  --btn-texte-actif: #08201a;
}
/* Toute icone de bouton, quelle que soit sa variante. Sans cette regle,
   un SVG sans dimensions intrinseques occupe la place qu on lui laisse —
   et il la prend toute : 68 px de large dans un bouton mauve. */
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-groupe { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
/* Des que les boutons passent l'un sous l'autre, deux largeurs differentes
   se lisent comme un defaut d'alignement. Empiles, ils prennent la meme. */
@media (max-width: 619px) {
  .btn-groupe { display: grid; }
  .btn-groupe .btn { width: 100%; }
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 44px;
  padding-block: 11px 9px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  color: var(--mauve-500);
  border-bottom: 1px solid var(--filet);
  transition-property: color, border-color, gap;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.lien-fleche svg {
  width: 15px; height: 9px;
  transition-property: transform;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.lien-fleche:hover, .lien-fleche:focus-visible { color: var(--or-700); border-color: var(--filet-or); gap: var(--sp-xs); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ─── Halos ────────────────────────────────────────────── */
.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--halo-mauve);
  /* Un degrade circulaire dans une boite non carree laisse un bord net
     sur les cotes : on le force a epouser la boite. */
  background-size: 100% 100%;
  animation: souffle var(--t-souffle) var(--ease-doux) infinite;
}

/* Le centrage se fait avec la propriete translate, JAMAIS avec transform :
   celui-ci appartient a l animation de respiration, qui ecrasait donc le
   translateX(-50%) et rejetait le halo dans un coin. Les deux proprietes
   se composent au lieu d entrer en conflit. */
.halo { translate: var(--halo-x, 0) calc(var(--halo-y, 0px) + var(--derive, 0px)); }
.halo--centre    { left: 50%; --halo-x: -50%; }
.halo--centre-xy { left: 50%; top: 50%; --halo-x: -50%; --halo-y: -50%; }
.halo--petrole { background: var(--halo-petrole); }
.halo--or      { background: var(--halo-or); }
@keyframes souffle {
  0%, 100% { transform: scale(1);    opacity: .78; }
  50%      { transform: scale(1.11); opacity: 1; }
}

/* ─── Les lucioles ─────────────────────────────────────────────────── */
/* Deux animations superposées, et c'est la superposition qui fait la
   luciole plutôt que la poussière : « derive » porte le déplacement et le
   fondu, « veilleuse » fait battre la lueur. Une seule des deux donnerait
   soit un grain qui monte, soit un point qui clignote sur place.

   Les durées sont désaccordées d'un point à l'autre — un battement
   commun les ferait clignoter en chœur, ce qu'aucun insecte ne fait. */
.poussieres { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.poussieres span {
  position: absolute;
  width: var(--taille, 2px);
  height: var(--taille, 2px);
  border-radius: 50%;
  background: rgba(22, 38, 43, .40);
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .62),
              0 0 14px 4px rgba(201, 169, 97, .20);
  animation-name: derive, veilleuse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-duration: var(--derive, 24s), var(--battement, 2.6s);
  animation-delay: var(--attente, 0s), 0s;
}
@keyframes derive {
  0%   { opacity: 0;   transform: translate3d(0, 44px, 0) scale(.5); }
  12%  { opacity: .85; }
  74%  { opacity: .5; }
  100% { opacity: 0;   transform: translate3d(var(--derive-x, 30px), -190px, 0) scale(1.1); }
}
@keyframes veilleuse {
  0%, 100% { filter: brightness(.55); }
  50%      { filter: brightness(1.75); }
}
.poussieres span:nth-child(1)  { left: 7%;  bottom: 6%;  --derive: 21s; --battement: 2.3s; }
.poussieres span:nth-child(2)  { left: 18%; bottom: 2%;  --derive: 27s; --battement: 3.4s; --attente: 4s; --taille: 3px; }
.poussieres span:nth-child(3)  { left: 29%; bottom: 19%; --derive: 18s; --battement: 1.9s; --attente: 9s; }
.poussieres span:nth-child(4)  { left: 39%; bottom: 8%;  --derive: 30s; --battement: 4.1s; --attente: 2s; --derive-x: -22px; }
.poussieres span:nth-child(5)  { left: 48%; bottom: 27%; --derive: 23s; --battement: 2.7s; --attente: 13s; --taille: 3px; }
.poussieres span:nth-child(6)  { left: 57%; bottom: 4%;  --derive: 20s; --battement: 3.1s; --attente: 6s; }
.poussieres span:nth-child(7)  { left: 66%; bottom: 15%; --derive: 26s; --battement: 2.1s; --attente: 16s; --derive-x: -18px; }
.poussieres span:nth-child(8)  { left: 74%; bottom: 33%; --derive: 32s; --battement: 3.8s; --attente: 10s; }
.poussieres span:nth-child(9)  { left: 82%; bottom: 9%;  --derive: 22s; --battement: 2.5s; --attente: 19s; --taille: 4px; }
.poussieres span:nth-child(10) { left: 89%; bottom: 22%; --derive: 28s; --battement: 3.3s; --attente: 7s; }
.poussieres span:nth-child(11) { left: 95%; bottom: 3%;  --derive: 24s; --battement: 2.0s; --attente: 22s; --derive-x: -26px; }
.poussieres span:nth-child(12) { left: 13%; bottom: 37%; --derive: 34s; --battement: 4.4s; --attente: 15s; }

/* ─── Ouverture du site ────────────────────────────────── */
/* Le rideau. Sa lune apparaît sur la nuit profonde, un filet la
   traverse, puis le voile se retire. Une seule fois par visite
   (sessionStorage) : une animation d'ouverture rejouée à chaque
   page devient un péage. */
.rideau {
  position: fixed;
  inset: 0;
  z-index: var(--z-rideau);
  display: grid;
  place-items: center;
  background: var(--panneau-fort);
  animation: rideau-sortie .85s var(--ease-sortie) 1.25s forwards;
}
.rideau__marque {
  width: clamp(96px, 13vw, 148px);
  opacity: 0;
  outline: none;
  animation:
    marque-entree .95s var(--ease-sortie) .1s forwards,
    marque-sortie .72s var(--ease-doux) 1.2s forwards;
}
/* Le filet qui traverse : il donne au temps d'attente une
   direction, au lieu d'un simple fondu. */
.rideau__filet {
  position: absolute;
  left: 50%;
  bottom: clamp(80px, 16vh, 150px);
  width: min(210px, 42vw);
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--or-500), transparent);
  animation: filet-trace 1s var(--ease-sortie) .42s forwards;
}
@keyframes marque-entree {
  from { opacity: 0; transform: scale(.9)  translateY(12px); filter: blur(7px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    filter: blur(0); }
}
@keyframes marque-sortie {
  to { opacity: 0; transform: scale(1.07) translateY(-18px); filter: blur(4px); }
}
@keyframes filet-trace {
  40%  { transform: translateX(-50%) scaleX(1); opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}
@keyframes rideau-sortie {
  to { opacity: 0; visibility: hidden; }
}

/* Le contenu monte derrière le rideau plutôt que d'apparaître
   d'un coup quand il se retire. */
html:not(.sans-rideau) .entete,
html:not(.sans-rideau) main > :first-child {
  animation: contenu-entree 1.1s var(--ease-sortie) 1.3s backwards;
}
@keyframes contenu-entree {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Apparition au défilement ─────────────────────────── */
.js .apparait {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition-property: opacity, transform, filter;
  transition-duration: var(--t-lent);
  transition-timing-function: var(--ease-sortie);
}
.js .apparait.est-visible { opacity: 1; transform: none; filter: none; }
.js .apparait--voile  { filter: blur(6px); }
.js .apparait--gauche { transform: translate3d(-26px, 0, 0); }
.js .apparait--droite { transform: translate3d(26px, 0, 0); }
@media (max-width: 899px) {
  .js .apparait--gauche, .js .apparait--droite { transform: translate3d(0, 24px, 0); }
}
.js .apparait[data-rang="1"] { transition-delay: .07s; }
.js .apparait[data-rang="2"] { transition-delay: .14s; }
.js .apparait[data-rang="3"] { transition-delay: .21s; }
.js .apparait[data-rang="4"] { transition-delay: .28s; }
.js .apparait[data-rang="5"] { transition-delay: .35s; }
.js .apparait[data-rang="6"] { transition-delay: .42s; }

/* ─── En-tête ──────────────────────────────────────────── */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-entete);
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--encre);
  transition-property: height, background-color, box-shadow, backdrop-filter;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease);
}
/* Tant que la barre n'a pas pris son fond, elle repose directement sur la
   photo. Avec un fond sombre c'etait sans consequence ; avec une cascade
   eclairee, le numero de telephone tombait a 2,39:1. Un degrade qui ne se
   voit pas et qui s'efface des que la barre se pose. */
.entete::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 248, 248, .94), rgba(243, 248, 248, .52) 52%, transparent);
  transition-property: opacity;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease);
}
.entete.est-posee::before { opacity: 0; }
.entete__interieur { position: relative; z-index: 1; }

.entete.est-posee {
  height: var(--header-h-sm);
  background: var(--panneau-fort);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--filet), 0 10px 28px rgba(12, 32, 39, .10);
}
.entete__interieur {
  display: grid;
  /* Deux blocs seulement tant que la navigation est masquée : la marque
     et le bouton. Garder trois colonnes déclarées faisait glisser les
     actions dans celle du milieu — `display: none` retire la navigation
     de la grille, pas la colonne qu'elle occupait — et le bouton se
     posait au centre de l'écran. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}
@media (min-width: 1000px) {
  .entete__interieur { grid-template-columns: 1fr auto 1fr; gap: var(--sp-md); }
}
.entete__actions { justify-self: end; }

/* La colonne fait 1fr : sans cela le lien s'etale sur toute sa largeur
   et la moitie de la barre devient une zone cliquable invisible. */
.marque { display: flex; align-items: center; gap: var(--sp-xs); line-height: 1;
          justify-self: start; }
/* Une barre fixe prend la même place sur un écran de 844 px que sur un
   de 900 : sur mobile elle se resserre, lune comprise. */
@media (max-width: 699px) {
  .marque { gap: var(--sp-2xs); }
  .entete .marque__lune { width: 32px; height: 32px; }
  .entete .marque__nom { font-size: 17px; letter-spacing: var(--ls-plus); }
}
.marque__lune {
  width: 40px; height: 40px;
  flex: none;
  outline: none;
  transition-property: transform;
  transition-duration: var(--t-lent);
  transition-timing-function: var(--ease-sortie);
}
.marque:hover .marque__lune { transform: rotate(-7deg) scale(1.05); }
/* Le nom dessiné. Sa hauteur compte les ornements : les capitales n'en
   occupent que les deux cinquièmes, d'où une boîte plus haute que la lune.
   Ni liseré (il dessinerait un cadre autour d'un détourage) ni plafond de
   largeur (la colonne de la marque se cale sur son contenu). */
.marque__titre {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: 64px;
  outline: none;
  transition-property: height;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease);
}
.entete.est-posee .marque__titre { height: 52px; }
@media (max-width: 699px) {
  .entete .marque__titre { height: 48px; }
  .entete.est-posee .marque__titre { height: 44px; }
}
.marque__texte { display: flex; align-items: baseline; }
.marque__nom {
  font-family: var(--font-titre);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-max);
  text-transform: uppercase;
}
/* Conservé pour le pied de page, retiré de la barre. */
.marque__sous {
  font-size: var(--fs-nano);
  font-weight: var(--fw-moyen);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  color: var(--texte-faible);
}
.entete .marque__sous { display: none; }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: clamp(var(--sp-sm), 2.2vw, var(--sp-lg)); } }
/* Bas de casse, en Grenze. Le header faisait s'affronter deux systèmes
   de capitales — la marque et la navigation se disputaient le même rôle.
   La marque garde les capitales, la navigation prend la voix du texte. */
.nav__lien {
  position: relative;
  font-family: var(--font-titre);
  font-size: 19px;
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  padding-block: 7px;
  color: var(--texte-doux);
  transition-property: color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.nav__lien:hover { color: var(--encre); }
.nav__lien::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--mauve-500);
  transform: scaleX(0);
  transform-origin: right center;
  transition-property: transform;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.nav__lien:hover::after, .nav__lien:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__lien[aria-current="page"] { color: var(--encre); }
.nav__lien[aria-current="page"]::after { transform: scaleX(1); background: var(--or-500); }

.entete__actions { display: flex; align-items: center; gap: var(--sp-sm); }

/* Le numéro en clair, puis une pastille. Pour une thérapeute, un
   téléphone lisible en permanence vaut souvent mieux qu'un appel à
   l'action : la personne qui hésite compose, elle ne clique pas. */
.entete__tel {
  display: none;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-large);
  font-variant-numeric: tabular-nums;
  /* Un cran plus clair que le reste des mentions discretes : il se lit
     desormais sur une photo eclairee, pas sur une nuit. */
  color: var(--texte-doux);
  transition-property: color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.entete__tel:hover, .entete__tel:focus-visible { color: var(--encre); }
@media (min-width: 1120px) { .entete__tel { display: inline-flex; } }

.entete__cta {
  display: none;
  align-items: center;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid var(--mauve-300);
  border-radius: var(--r-pilule);
  background: var(--mauve-700);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  color: var(--mauve-050);
  transition-property: background-color, border-color, color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.entete__cta:hover, .entete__cta:focus-visible {
  background: var(--mauve-300);
  border-color: var(--mauve-300);
  color: var(--panneau-fort);
}
@media (min-width: 1000px) { .entete__cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  width: 46px; height: 46px;
  padding: 0 9px;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block; height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition-property: transform, opacity;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.burger span:nth-child(2) { width: 64%; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Menu plein écran ─────────────────────────────────── */
/* Il commence sous l'en-tête : le bouton qui l'ouvre reste visible et
   cliquable pour le refermer. Le panneau ne fait pas disparaître le
   moyen d'en sortir. */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h-sm) + var(--sp-lg)) var(--gouttiere) var(--sp-lg);
  background: var(--panneau-fort);
  color: var(--encre);
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--t-court), 0s;
  transition-timing-function: var(--ease);
  transition-delay: 0s, var(--t-court);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.menu:focus { outline: none; }
.menu.est-ouvert { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Un halo bas pour que le panneau ne soit pas un mur noir. */
.menu__halo {
  position: absolute;
  bottom: -34%; left: 50%;
  width: min(560px, 130vw);
  aspect-ratio: 1;
  --halo-x: -50%;
  pointer-events: none;
}

.menu__liste { list-style: none; margin: 0; padding: 0; flex: 1; }
.menu__liste li { border-bottom: 1px solid var(--filet); }
.menu__liste li:first-child { border-top: 1px solid var(--filet); }

.menu__lien {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding-block: clamp(var(--sp-sm), 3vw, var(--sp-md));
  font-family: var(--font-titre);
  font-size: clamp(27px, 7vw, 38px);
  font-weight: var(--fw-titre);
  color: var(--encre-douce);
  transition-property: color, padding-left;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease-sortie);
}
.menu__lien:hover, .menu__lien:focus-visible { color: var(--encre); padding-left: var(--sp-2xs); }

/* La page courante se signale par un filet mauve dans la marge, pas par
   un glyphe posé devant le mot. */
.menu__lien[aria-current="page"] { color: var(--or-700); }
.menu__lien[aria-current="page"]::before {
  content: '';
  width: 18px; height: 1px;
  flex: none;
  align-self: center;
  margin-right: calc(var(--sp-sm) * -1 + var(--sp-2xs));
  background: var(--or-500);
}

/* Entrée en cascade : les liens montent l'un après l'autre. Sans elle le
   panneau apparaît d'un bloc, ce qui se remarque plus que le mouvement. */
.menu.est-ouvert .menu__lien,
.menu.est-ouvert .menu__pied > * {
  animation: menu-entree .5s var(--ease-sortie) backwards;
}
.menu.est-ouvert li:nth-child(1) .menu__lien { animation-delay: .05s; }
.menu.est-ouvert li:nth-child(2) .menu__lien { animation-delay: .10s; }
.menu.est-ouvert li:nth-child(3) .menu__lien { animation-delay: .15s; }
.menu.est-ouvert li:nth-child(4) .menu__lien { animation-delay: .20s; }
.menu.est-ouvert .menu__pied > *:nth-child(1) { animation-delay: .26s; }
.menu.est-ouvert .menu__pied > *:nth-child(2) { animation-delay: .31s; }
@keyframes menu-entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.menu__pied {
  position: relative;
  margin-top: var(--sp-xl);
  display: grid;
  gap: var(--sp-sm);
}
.menu__pied .btn { width: 100%; }
.menu__coord {
  display: grid;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--texte-doux);
}
.menu__coord a { color: var(--texte-doux); }
.menu__coord a:hover { color: var(--or-700); }
.menu__lieu {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  color: var(--texte-faible);
}
body.menu-ouvert { overflow: hidden; }

/* ─── Pied de page ─────────────────────────────────────── */
.pied {
  position: relative;
  background: var(--panneau-fort);
  color: var(--texte);
  padding-block: var(--sp-2xl) var(--sp-lg);
  overflow: hidden;
}
/* 110 px de silence avant le pied se lisent comme une respiration sur un
   grand ecran, comme un ecran vide sur un telephone. */
@media (max-width: 699px) { .pied { padding-block: var(--sp-xl) var(--sp-md); } }
.pied::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filet-appuye) 30%, var(--filet-appuye) 70%, transparent);
}
.pied__grille { display: grid; gap: var(--sp-lg) var(--sp-md); grid-template-columns: 1fr; }
/* En colonne unique, la lettre serait le quatrième bloc, après trois
   écrans de texte — autant dire jamais lue. Elle passe en tête, seule
   chose du pied qui demande une action. */
@media (max-width: 699px) { .pied__lettre { order: -1; } }
@media (min-width: 700px)  { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pied__grille { grid-template-columns: 1.7fr 1fr 1fr 1.5fr; } }

.pied__titre {
  margin-bottom: var(--sp-sm);
  font-family: var(--font-texte);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-max);
  text-transform: uppercase;
  color: var(--mauve-500);
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; }
/* La gouttière est portée par le lien, pas par la grille : le rythme
   visuel reste le même (26 px d'un lien au suivant) mais la zone
   cliquable atteint les 24 px exigés par le WCAG 2.2. */
.pied__liste a {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--fs-small);
  color: var(--texte-doux);
  transition-property: color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.pied__liste a:hover, .pied__liste a:focus-visible { color: var(--or-700); }
.pied__tagline { max-width: 34ch; font-size: var(--fs-small); line-height: var(--lh-aere); color: var(--texte-doux); }
/* Trois blocs, trois colonnes declarees : avec un flex `wrap`, le bloc du
   milieu passait a la ligne des que la fenetre descendait sous le millier
   de pixels, sans qu'on voie ou. La grille tient la ligne tant qu'il y a
   la place, et l'empile franchement en dessous. */
.pied__bas {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-xs) var(--sp-sm);
  margin-top: var(--sp-xl); padding-top: var(--sp-sm);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-micro);
  color: var(--texte-faible);
}
@media (max-width: 859px) {
  .pied__bas { grid-template-columns: 1fr; justify-items: start; }
}
/* Les paragraphes gardaient leur marge basse par defaut : centres avec
   leur boite de marge, ils remontaient de 10 px face au <nav> legal, qui
   n'en a pas. C'est la gouttiere du flex qui espace, pas les marges. */
.pied__bas p { margin: 0; }
.pied__legaux { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }

/* Une signature d'atelier se lit une fois, par celui qui la cherche. Elle
   reste sous le seuil du texte courant et ne prend la couleur de l'or
   qu'au survol. */
.pied__signature { justify-self: center; text-align: center; color: var(--texte-faible); }
@media (max-width: 859px) { .pied__signature { justify-self: start; text-align: left; } }
.pied__signature a {
  display: inline-block;
  padding-block: 3px;
  color: var(--texte-doux);
  border-bottom: 1px solid transparent;
  transition-property: color, border-color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.pied__signature a:hover,
.pied__signature a:focus-visible { color: var(--or-700); border-bottom-color: var(--filet-or); }
.pied__legaux a { display: inline-block; padding-block: 3px; }

/* ─── Lettre d'information ─────────────────────────────── */
.lettre__champ {
  display: flex; gap: var(--sp-2xs);
  margin-top: var(--sp-xs);
  border-bottom: 1px solid var(--filet);
  transition-property: border-color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.lettre__champ:focus-within { border-color: var(--mauve-500); }
.lettre__champ input {
  flex: 1; min-width: 0;
  padding: var(--sp-2xs) 0;
  background: none; border: 0;
  color: var(--encre); font-size: var(--fs-small);
}
.lettre__champ input::placeholder { color: rgba(22, 38, 43, .46); }
.lettre__champ input:focus { outline: none; }
.lettre__envoi {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0;
  color: var(--mauve-500); cursor: pointer;
  transition-property: transform, color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease-sortie);
}
.lettre__envoi svg { width: 16px; height: 10px; }
.lettre__envoi:hover { transform: translateX(3px); color: var(--or-700); }
.lettre__note { margin-top: var(--sp-2xs); font-size: var(--fs-nano); color: var(--texte-faible); }
.lettre__reponse { margin-top: var(--sp-2xs); font-size: var(--fs-micro); color: var(--or-700); min-height: 1.2em; }

/* ─── Réseaux ──────────────────────────────────────────── */
.reseaux { display: flex; gap: var(--sp-xs); align-items: center; }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--texte-doux);
  transition-property: color, border-color, transform;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease-sortie);
}
.reseaux a:hover, .reseaux a:focus-visible { color: var(--or-700); border-color: var(--filet-or); transform: translateY(-2px); }
.reseaux svg { width: 16px; height: 16px; }

/* ─── WhatsApp flottant ────────────────────────────────── */
.wa-flottant {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-header);
  display: inline-flex; align-items: center; gap: var(--sp-2xs);
  min-height: 46px;
  padding: 13px 18px;
  border-radius: var(--r-pilule);
  background: #1c6e53;
  color: #f2f8f5;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-large);
  box-shadow: 0 10px 30px rgba(6, 30, 22, .5);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  transition-property: opacity, transform, background-color;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.wa-flottant.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flottant:hover { background: #24855f; }
.wa-flottant svg { width: 19px; height: 19px; flex: none; }
.wa-flottant__texte { display: none; }
@media (min-width: 620px) { .wa-flottant__texte { display: inline; } }

/* ─── Avis cookies ────────────────────────────────────── */
/* Une carte discrète en bas à gauche, dans la matière des panneaux du site.
   Elle informe, elle ne barre rien : pas de fond assombri, pas de choix à
   faire. Le bouton la ferme pour de bon (localStorage). */
.avis-cookies {
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-header);
  width: min(340px, calc(100vw - 32px - 70px));   /* laisse la place au bouton WhatsApp rond */
  padding: var(--sp-sm) var(--sp-sm) var(--sp-xs);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--mauve-300);
  border-radius: var(--r-doux);
  background: var(--panneau);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: var(--relief-lg);
  color: var(--texte-doux);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  transition-property: opacity, transform;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-sortie);
}
.avis-cookies.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.avis-cookies[hidden] { display: none; }
.avis-cookies__texte { margin: 0 0 var(--sp-xs); }
.avis-cookies__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs); flex-wrap: wrap; }
.avis-cookies__lien {
  font-size: var(--fs-micro);
  color: var(--petrole-500);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 74, 84, .35);
  transition: color var(--t-court) var(--ease), border-color var(--t-court) var(--ease);
}
.avis-cookies__lien:hover { color: var(--encre); border-color: var(--encre); }
.avis-cookies__bouton {
  min-height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pilule);
  background: var(--mauve-500);
  color: var(--mauve-050);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-large);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-court) var(--ease);
}
.avis-cookies__bouton:hover { background: var(--mauve-700); }
@media (max-width: 619px) {
  /* Sur téléphone le bouton WhatsApp est un rond de 46 px à droite : la carte
     prend le reste de la largeur, au même niveau. */
  .avis-cookies { width: calc(100vw - 32px - 62px); padding: var(--sp-xs) var(--sp-sm); }
}

/* ─── Formulaires ─────────────────────────────────────── */
.champ { display: grid; gap: 6px; }
.champ label {
  font-size: var(--fs-nano);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-plus);
  text-transform: uppercase;
  color: var(--mauve-500);
}
.champ input, .champ textarea {
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--panneau-fort);
  border: 1px solid var(--filet);
  border-radius: var(--r-doux);
  color: var(--encre);
  font-size: var(--fs-body);
  transition-property: border-color, background-color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.champ input:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--mauve-500);
  background: rgba(255, 255, 255, .86);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ--erreur input, .champ--erreur textarea { border-color: #a83c3c; }
.champ__erreur { font-size: var(--fs-micro); color: #8f2f2f; }

/* ─── Le son ───────────────────────────────────────────── */
/* Quatre barres qui ondulent quand l'ambiance joue, et restent
   couchées quand elle se tait. Un pictogramme de haut-parleur
   dirait la même chose, mais il dit aussi « publicité vidéo » ;
   des barres disent « quelque chose se passe ». */
.son {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: var(--r-pilule);
  background: none;
  color: var(--texte-doux);
  cursor: pointer;
  transition-property: color, border-color, background-color;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease);
}
.son:hover,
.son:focus-visible { color: var(--texte); border-color: var(--filet-appuye); }
.son[aria-pressed="true"] { color: var(--mauve-500); border-color: var(--filet-mauve); }

.son__barres {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.son__barres span {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  transition: height var(--t-court) var(--ease);
}
/* Au repos les barres sont couchées : l'état éteint doit se lire sans
   avoir à comparer avec autre chose. */
.son[aria-pressed="true"] .son__barres span {
  animation: son-barre 1.1s ease-in-out infinite;
}
.son[aria-pressed="true"] .son__barres span:nth-child(1) { animation-delay: -.9s; }
.son[aria-pressed="true"] .son__barres span:nth-child(2) { animation-delay: -.4s; }
.son[aria-pressed="true"] .son__barres span:nth-child(3) { animation-delay: -.7s; }
.son[aria-pressed="true"] .son__barres span:nth-child(4) { animation-delay: -.2s; }
@keyframes son-barre {
  0%, 100% { height: 3px; }
  50%      { height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .son[aria-pressed="true"] .son__barres span { animation: none; height: 9px; }
}

/* ─── Le curseur ───────────────────────────────────────── */
/* Un point et un anneau en retard, plus une onde au clic. Les
   deux couches sont posées par le script, jamais dans le HTML :
   sans JavaScript il ne se passe rien et la flèche du système
   reste, ce qui est le bon comportement.

   Rien ici ne s'applique au doigt ni si le système demande moins
   d'animation : `.a-curseur` n'est ajouté que dans ces cas. */
.curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-curseur);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-court) var(--ease);
  will-change: transform;
}
body.curseur-pret .curseur { opacity: 1; }

.curseur__point {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--encre);
}
.curseur__anneau {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1px solid var(--mauve-500);
  transition-property: width, height, margin, background-color, border-color, opacity;
  transition-duration: var(--t-court);
  transition-timing-function: var(--ease-sortie);
}
/* Sur une cible, l'anneau s'ouvre et se teinte : c'est lui qui dit
   « ceci se clique », puisque la flèche du système a disparu. */
body.curseur-actif .curseur__anneau {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  background: rgba(129, 95, 124, .12);
  border-color: var(--mauve-300);
}

/* L'onde du clic. Une seule, courte, sans rémanence : elle confirme
   le geste et disparaît avant qu'on l'ait cherchée du regard. */
.onde {
  position: fixed;
  z-index: var(--z-curseur);
  border-radius: 50%;
  border: 1px solid var(--petrole-400);
  pointer-events: none;
  animation: onde .8s var(--ease-sortie) forwards;
}
@keyframes onde {
  from { width: 14px;  height: 14px;  margin: -7px 0 0 -7px;   opacity: .7; }
  to   { width: 116px; height: 116px; margin: -58px 0 0 -58px; opacity: 0; }
}

/* La flèche du système ne disparaît qu'une fois le curseur monté, et
   jamais sur un champ de saisie : la barre d'insertion dit où l'on
   écrit, aucun dessin ne la remplace. */
body.a-curseur,
body.a-curseur * { cursor: none; }
body.a-curseur input,
body.a-curseur textarea,
body.a-curseur [contenteditable] { cursor: text; }

@media (hover: none), (pointer: coarse) {
  .curseur, .onde { display: none !important; }
  body.a-curseur, body.a-curseur * { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .curseur, .onde { display: none !important; }
  body.a-curseur, body.a-curseur * { cursor: auto; }
}

/* ─── Utilitaires ──────────────────────────────────────── */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Mouvement réduit ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .poussieres, .rideau { display: none; }
  .js .apparait { opacity: 1; transform: none; filter: none; }
  .cadre-parallaxe img { transform: none !important; }
}

/* ─── Rideau : pilotage depuis <html> ──────────────────────── */
/* Les classes sont posées par le script inline du <head>, donc
   avant le premier affichage. Sans cela, la page apparaîtrait
   une fraction de seconde avant d'être recouverte. */
.sans-rideau .rideau { display: none; }
html.rideau-en-cours,
html.rideau-en-cours body { overflow: hidden; }

.pied__baseline {
  margin-top: var(--sp-2xs);
  max-width: 30ch;
  font-family: var(--font-titre);
  font-size: var(--fs-small);
  line-height: var(--lh-court);
  color: var(--mauve-500);
}

/* Le sous-titre au pied de page a de la place : il se lit sur deux lignes
   si nécessaire, ce que la barre ne permettait pas. */
.pied .marque__sous { display: block; margin-bottom: var(--sp-xs); color: var(--mauve-500); }

/* ─── Cadre de portrait ────────────────────────────────────
   Un visage ne se traite pas comme un paysage. La désaturation
   à 42 % et le voile mauve en « color » qui donnent leur unité
   aux photos de lieu rendraient un teint cadavérique. Ici on
   se contente de calmer la saturation et de poser une ombre
   basse, pour que le cadre s'assoie dans la nuit sans que la
   personne change de couleur. */
/* Sa photo plafonne à 220 de luminance : le mur derrière elle rend gris
   sur un panneau clair. On la relève juste assez pour que le fond
   rejoigne le ton du panneau, sans pâlir son visage — vérifié, les hautes
   lumières montent à 241, rien ne brûle. */
.cadre--portrait img { filter: saturate(1) contrast(1.05) brightness(1.07); }
.cadre--portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(243, 248, 248, .16) 0%, transparent 30%,
    transparent 64%, rgba(22, 38, 43, .26) 100%);
}