/* Institut Signature : feuille de styles, V4.

   Direction : le vert de gris des murs de l'institut porte la page. Les formes sont
   découpées à la main plutôt que tracées à la règle : aucun filet, aucun séparateur,
   les blocs se distinguent par la couleur, l'espace et des bords courbes.

   Typographie (essais : outils/essais/typo-v4.html et hero-v4.html)
   - Nunito pour tout le texte, identifiée sur la capture de référence. Ses terminaisons
     arrondies adoucissent la lecture ; en graisse 300 elle sert aussi aux grands titres.
   - Ms Madi pour les H1 et les mots mis en avant (em) : une écriture au stylo, liée,
     lisible en très grand, rarement vue. Écartées : Explora, trop calligraphique ;
     Beau Rivage, trop faire-part ; Whisper, trop fine aux petites tailles.

   Formes : trois découpes SVG (galet, feuille, pierre) déclarées en tête de chaque page
   et appliquées aux photos par clip-path. Les bords de section sont des ellipses
   asymétriques (border-radius), jamais des arrondis identiques.

   Animations : seul le H1 s'écrit au chargement. Le reste de la page est posé, à part
   trois effets liés au défilement (spa, galerie, phrase de l'équipe). */

/* Polices hébergées sur le site (licence SIL Open Font License), sans appel à Google :
   aucune adresse IP de visiteur ne part chez un tiers. Seuls les jeux latin et latin
   étendu sont gardés, le navigateur ne charge que celui dont la page a besoin. */

@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/polices/ms-madi-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/polices/ms-madi-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/polices/nunito-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/polices/nunito-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/polices/nunito-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/polices/nunito-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: oklch(0.958 0.013 95);
  --paper-soft: oklch(0.958 0.013 95 / 0.8);
  --mist: oklch(0.912 0.032 122);
  --sand: oklch(0.918 0.024 80);
  --sage: oklch(0.64 0.05 128);
  --sage-text: oklch(0.47 0.055 132);
  --leaf: oklch(0.84 0.075 120);
  --moss: oklch(0.41 0.05 135);
  --fern: oklch(0.53 0.06 130);
  --forest: oklch(0.31 0.038 138);
  --night: oklch(0.255 0.03 140);
  --ink: oklch(0.26 0.022 130);
  --ink-2: oklch(0.45 0.022 118);

  --font-script: "Ms Madi", "Snell Roundhand", "Segoe Script", cursive;
  --font-text: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Échelle. Ms Madi a un œil très petit : elle est toujours composée plus grand que
     le texte qui l'entoure. */
  --t-hero: clamp(4.6rem, 1.6rem + 10.5vw, 12.5rem);
  --t-page: clamp(4.4rem, 2rem + 8vw, 10.5rem);
  --t-display: clamp(2.5rem, 1.3rem + 4vw, 5.25rem);
  --t-h2: clamp(2.05rem, 1.35rem + 2.3vw, 3.6rem);
  --t-h3: clamp(1.35rem, 1.18rem + 0.6vw, 1.75rem);
  --t-lead: clamp(1.2rem, 1.08rem + 0.4vw, 1.45rem);
  --t-body: clamp(1.03rem, 1rem + 0.15vw, 1.125rem);
  --t-small: 0.9375rem;
  --t-caption: 0.875rem;
  --t-note: clamp(1.7rem, 1.45rem + 0.6vw, 2.15rem);

  --gutter: clamp(1.25rem, 4.2vw, 5rem);
  --col-gap: clamp(1rem, 2vw, 2.5rem);
  --section: clamp(5.5rem, 12vw, 11rem);
  --curve: clamp(2.5rem, 6vw, 6rem);
  --header-h: 5rem;

  /* Grain très léger sur les aplats verts, pour qu'ils ressemblent à du papier teinté. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Trait de surligneur posé à main levée sous les liens. */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13C38 6 88 10 131 7s59 1 66 4c3 5-4 9-24 9-40 1-89-1-128 2-14 1-45 0-42-9z'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 63.99rem) {
  :root {
    --header-h: 4.25rem;
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 7rem;
}

html.menu-open,
html.search-open {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-kerning: normal;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  color: inherit;
  font: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 300;
  line-height: 1.02;
  hyphens: manual;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-script);
  font-weight: 400;
}

/* Les mots mis en avant passent à la main, un peu plus grands pour compenser l'œil. */
h2 em,
h3 em,
.t-display em,
.team__names em {
  font-family: var(--font-script);
  font-size: 1.34em;
  font-style: normal;
  font-weight: 400;
  line-height: 0.6;
  letter-spacing: 0;
}

h1 em {
  font-style: normal;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

::selection {
  background: var(--leaf);
  color: var(--forest);
}

/* Système typographique */

.t-display {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}

.t-h2 {
  font-size: var(--t-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.t-h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-title {
  font-size: var(--t-page);
  line-height: 0.92;
}

.page-title .line + .line {
  padding-left: 0.5em;
}

.eyebrow {
  margin: 0;
  color: var(--sage-text);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.on-dark .eyebrow {
  color: var(--leaf);
}

.standfirst {
  max-width: 32ch;
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
}

.price {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.125rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.price__from {
  margin-right: 0.35em;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.88;
}

.price__unit {
  margin-left: 0.2em;
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.88;
}

.price--quote {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
}

.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -5rem;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: 1rem 1.4rem 1.1rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: 1rem;
}

.line {
  display: block;
}

/* Formes photographiques. Les chemins sont dans le <svg> caché de chaque page. */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--mist);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.on-dark .photo {
  background: var(--moss);
}

.shape-galet {
  clip-path: url(#forme-galet);
}

.shape-feuille {
  clip-path: url(#forme-feuille);
}

.shape-pierre {
  clip-path: url(#forme-pierre);
}

/* Bords de section en ellipse asymétrique. Une section « tuck » glisse sous la
   précédente pour que les coins courbes laissent voir sa couleur et non le papier. */

.curve-top {
  border-top-left-radius: 46% var(--curve);
  border-top-right-radius: 54% calc(var(--curve) * 0.45);
}

.curve-bottom {
  border-bottom-right-radius: 58% var(--curve);
  border-bottom-left-radius: 42% calc(var(--curve) * 0.5);
}

.curve-top.curve-bottom {
  border-bottom-right-radius: 40% calc(var(--curve) * 0.55);
  border-bottom-left-radius: 60% var(--curve);
}

.lift {
  position: relative;
  z-index: 2;
}

.tuck {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--curve) * -1);
  padding-top: calc(var(--section) + var(--curve)) !important;
}

.grain {
  background-image: var(--grain);
}

/* Boutons et liens */

.button {
  --button-bg: var(--forest);
  --button-fg: var(--paper);
  --button-hover-bg: var(--moss);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 1.9rem 1.5rem 2rem 1.3rem / 1.6rem 1.9rem 1.4rem 1.8rem;
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out);
}

.button:hover,
.button:focus-visible {
  background: var(--button-hover-bg);
}

.button--light {
  --button-bg: var(--paper);
  --button-fg: var(--forest);
  --button-hover-bg: var(--leaf);
}

.button--small {
  min-height: 2.9rem;
  padding: 0 1.35rem;
  font-size: 0.9375rem;
}

/* Lien d'action : un trait de surligneur à main levée, derrière le texte. */
.link {
  --link-mark: var(--leaf);

  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.link::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.35em;
  bottom: -0.12em;
  left: -0.3em;
  height: 0.7em;
  background: var(--link-mark);
  opacity: 0.7;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  transition: opacity 0.35s var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  opacity: 1;
}

.on-dark .link,
.page-cover .link,
.menu .link {
  --link-mark: var(--fern);
}

/* En-tête : transparent en haut de page, puis posé sur un galet crème. */

.scroll-sentinel {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 0.5rem clamp(0.5rem, 1.4vw, 1.25rem) 0;
  color: var(--ink);
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  height: calc(var(--header-h) - 0.5rem);
  padding-inline: calc(var(--gutter) - clamp(0.5rem, 1.4vw, 1.25rem));
  border-radius: 1.6rem 2.6rem 2rem 1.4rem / 1.8rem 1.5rem 2.2rem 2rem;
  background: transparent;
  pointer-events: auto;
  transition:
    background-color 0.45s var(--ease-out),
    color 0.45s var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
  background: var(--paper);
}

.top-dark .site-header:not(.is-scrolled) {
  color: var(--paper);
}

.top-dark .site-header:not(.is-scrolled) .header-phone {
  color: var(--paper-soft);
}

.top-dark .site-header:not(.is-scrolled) .button--small {
  --button-bg: var(--paper);
  --button-fg: var(--forest);
  --button-hover-bg: var(--leaf);
}

.brand {
  flex: none;
  color: var(--moss);
  text-decoration: none;
}

.top-dark .site-header:not(.is-scrolled) .brand {
  color: var(--paper);
}

.brand__logo {
  display: block;
  width: clamp(6.5rem, 5.3rem + 2.4vw, 8.25rem);
  aspect-ratio: 880 / 478;
  background: currentColor;
  -webkit-mask: url("/assets/marque/logo-principal.png") center / contain no-repeat;
  mask: url("/assets/marque/logo-principal.png") center / contain no-repeat;
}

.nav {
  flex: none;
  margin-left: auto;
}

.nav__list {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  --link-mark: var(--leaf);

  position: relative;
  isolation: isolate;
  font-size: 0.96875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.3em;
  bottom: -0.1em;
  left: -0.3em;
  height: 0.7em;
  background: var(--link-mark);
  opacity: 0;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  transition: opacity 0.35s var(--ease-out);
}

.top-dark .site-header:not(.is-scrolled) .nav__link {
  --link-mark: var(--fern);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  opacity: 0.85;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-phones {
  display: grid;
  gap: 0.1rem;
}

.header-phone {
  display: grid;
  grid-template-columns: 4.1rem auto;
  align-items: baseline;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.header-phone__label {
  font-size: 0.75rem;
}

.header-phone:hover {
  color: inherit;
}

.menu-toggle {
  display: none;
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .site-header__inner {
    gap: 0.75rem;
  }

  .nav__list {
    gap: 0.9rem;
  }

  .header-actions {
    gap: 0.75rem;
  }
}

@media (max-width: 63.99rem) {
  .js .nav,
  .js .header-phones {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .js .header-actions {
    margin-left: 0;
  }

  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.2rem;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
  }

  .menu-toggle__icon {
    display: none;
  }
}

@media (max-width: 40rem) {
  .header-actions {
    display: none;
  }

  .site-header__inner {
    gap: 0.75rem;
  }
}

html:not(.js) .site-header {
  position: absolute;
}

html:not(.js) .site-header__inner {
  flex-wrap: wrap;
  height: auto;
  padding-block: 1rem;
}

/* Recherche : un champ dans l'en-tête sur grand écran, un panneau plein écran en dessous. */

.search-toggle,
.search__close,
html:not(.js) .search {
  display: none;
}

.search {
  position: relative;
  flex: 0 1 13rem;
  min-width: 7.75rem;
}

.search__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search__icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.search__bar .search__icon {
  position: absolute;
  left: 0.9rem;
  pointer-events: none;
}

.search__input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.9rem 0 2.45rem;
  border: 1px solid oklch(0.26 0.022 130 / 0.25);
  border-radius: 1.5rem 1.2rem 1.6rem 1.1rem / 1.3rem 1.5rem 1.2rem 1.5rem;
  background: transparent;
  color: inherit;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.search__input::placeholder {
  color: inherit;
  opacity: 0.8;
}

.search__input:focus {
  border-color: var(--moss);
  outline: 2px solid var(--moss);
  outline-offset: 1px;
  background: var(--paper);
  color: var(--ink);
}

.search__input:focus + .search__icon {
  color: var(--ink);
}

.search__input::-webkit-search-cancel-button {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.search__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(72vh, 36rem);
  padding: 0.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1.7rem 2.2rem 1.9rem 1.5rem / 1.9rem 1.6rem 2.1rem 1.8rem;
  outline: none;
  background: var(--paper);
  box-shadow: 0 0.6rem 2rem oklch(0.26 0.03 135 / 0.22);
  color: var(--ink);
}

.search__status {
  margin: 0;
  padding: 0.4rem 0.85rem 0.5rem;
  color: var(--ink-2);
  font-size: var(--t-caption);
  line-height: 1.4;
}

.search__results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  padding: 0.6rem 0.85rem;
  border-radius: 1rem 0.8rem 1.1rem 0.9rem;
  text-decoration: none;
}

.search__result:hover,
.search__result:focus-visible {
  outline-offset: -2px;
  background: var(--mist);
}

.search__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.search__context {
  grid-column: 1;
  color: var(--ink-2);
  font-size: var(--t-caption);
  line-height: 1.4;
}

.search__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--moss);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .top-dark .site-header:not(.is-scrolled) .search__input:not(:focus) {
    border-color: oklch(0.958 0.013 95 / 0.45);
  }
}

/* Le champ est étroit à cette largeur : le mot « Rechercher » doit tenir en entier. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .search__input {
    padding: 0 0.3rem 0 2.2rem;
  }
}

@media (max-width: 63.99rem) {
  .js .search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    margin-left: auto;
    padding: 0 0.85rem;
    border: 1px solid oklch(0.26 0.022 130 / 0.25);
    border-radius: 1.5rem 1.2rem 1.6rem 1.1rem / 1.3rem 1.5rem 1.2rem 1.5rem;
    background: none;
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }

  .top-dark .site-header:not(.is-scrolled) .search-toggle {
    border-color: oklch(0.958 0.013 95 / 0.45);
  }

  .menu-open .search-toggle {
    visibility: hidden;
  }

  .search {
    position: fixed;
    inset: 0;
    display: none;
    min-width: 0;
    padding: 0.75rem var(--gutter) 0;
    background: var(--paper);
    color: var(--ink);
  }

  .search.is-open {
    display: flex;
    flex-direction: column;
  }

  /* 16px au minimum : en dessous, iOS zoome sur le champ. */
  .search__input {
    min-height: 3rem;
    font-size: 1rem;
  }

  .search__close {
    display: block;
    flex: none;
    padding: 0.6rem 0.2rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }

  .search__panel {
    position: static;
    flex: 1;
    width: auto;
    max-height: none;
    margin-inline: -0.85rem;
    padding: 0.75rem 0 calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}

/* Sous 360px, le mot ne tient plus à côté du logo et du menu : l'icône reste, nommée pour les lecteurs d'écran. */
@media (max-width: 22.4rem) {
  .search-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Menu mobile plein écran */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--grain), var(--forest);
  color: var(--paper);
  clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
  visibility: hidden;
  transition:
    clip-path 0.8s var(--ease-in-out),
    visibility 0s linear 0.8s;
}

.menu.is-open {
  clip-path: circle(150% at calc(100% - 3rem) 2.5rem);
  visibility: visible;
  transition:
    clip-path 0.9s var(--ease-in-out),
    visibility 0s;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list li:nth-child(even) {
  padding-left: 1.4rem;
}

.menu__list a {
  display: inline-block;
  padding: 0.15rem 0;
  font-family: var(--font-script);
  font-size: clamp(3.4rem, 15vw, 5rem);
  line-height: 1.1;
  text-decoration: none;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: calc(0.3s + var(--i, 0) * 0.07s);
}

.menu__list a[aria-current="page"] {
  color: var(--leaf);
}

.menu.is-open .menu__list a {
  opacity: 1;
  transform: none;
}

.menu__footer {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  color: var(--paper-soft);
  font-size: var(--t-small);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.menu__footer p {
  margin: 0;
}

.menu.is-open .menu__footer {
  opacity: 1;
  transition-delay: 0.6s;
}

.menu-open .site-header {
  color: var(--paper);
}

.menu-open .site-header .site-header__inner {
  background: transparent;
}

.menu-open .site-header .brand {
  color: var(--paper);
}

.menu-open .header-actions {
  visibility: hidden;
}

@media (min-width: 64rem) {
  .menu {
    display: none;
  }
}

/* Barre d'actions flottante sur téléphone */

.mobile-actions {
  display: none;
}

@media (max-width: 40rem) {
  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .mobile-actions {
    position: fixed;
    right: 0.6rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    left: 0.6rem;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 1.7rem 2.2rem 1.9rem 1.5rem / 1.9rem 1.6rem 2.1rem 1.8rem;
    background: var(--paper);
    box-shadow: 0 0.6rem 2rem oklch(0.26 0.03 135 / 0.22);
    transition: transform 0.5s var(--ease-out);
  }

  .mobile-actions a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 0.35rem;
    border-radius: 1.4rem 1.1rem 1.5rem 1.2rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .mobile-actions__hint {
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .mobile-actions a:last-child {
    background: var(--moss);
    color: var(--paper);
  }

  .menu-open .mobile-actions {
    transform: translateY(calc(100% + 1.5rem));
  }
}

/* Statut d'ouverture */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.status::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sage);
}

.on-dark .status::before,
.menu .status::before {
  background: var(--leaf);
}

.status[data-state="closed"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Accueil : une vidéo de soin du visage en plein cadre, sous un voile vert forêt plus
   dense à gauche et en bas, là où se pose le texte. Sans vidéo (animations réduites,
   économie de données, lecture refusée), l'affiche tirée de la vidéo reste à sa place. */

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--col-gap);
  min-height: max(42rem, min(100svh, 62rem));
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) calc(clamp(3rem, 7vh, 5.5rem) + var(--curve) * 0.5);
  overflow: clip;
  background: var(--forest);
  color: var(--paper);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, oklch(0.31 0.038 138 / 0.9) 0%, oklch(0.31 0.038 138 / 0.35) 45%, oklch(0.31 0.038 138 / 0.45) 100%),
    linear-gradient(90deg, oklch(0.31 0.038 138 / 0.75) 0%, oklch(0.31 0.038 138 / 0.3) 55%, oklch(0.31 0.038 138 / 0) 80%);
}

.hero__meta {
  position: relative;
  grid-column: 1 / span 6;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.75rem;
  margin: 1rem 0 0;
  color: var(--paper-soft);
  font-size: var(--t-small);
}

.hero__text {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 7;
  grid-row: 2;
  align-self: end;
  padding-top: 2rem;
}

.hero__title {
  margin: 1rem 0 1.9rem -0.04em;
  color: var(--paper);
  font-size: min(var(--t-hero), 18.5vh, 9.2vw);
  line-height: 0.94;
  white-space: nowrap;
}

.hero__title .line + .line {
  padding-left: 0.62em;
}

.hero__title em {
  color: var(--leaf);
}

.hero__standfirst {
  max-width: 30ch;
  color: var(--paper-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
  margin-top: 2.1rem;
}

.hero .link {
  color: var(--paper);
}

@media (max-width: 63.99rem) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 88svh;
    padding-bottom: calc(3rem + var(--curve) * 0.5);
  }

  .hero__meta {
    display: none;
  }

  .hero__media::after {
    background: linear-gradient(0deg, oklch(0.31 0.038 138 / 0.92) 0%, oklch(0.31 0.038 138 / 0.6) 50%, oklch(0.31 0.038 138 / 0.4) 100%);
  }

  .hero__text {
    padding-top: 0;
  }

  /* Le titre remplit la largeur : « et nutrition » mesure environ 4,1 cadratins
     en Ms Madi, retrait de la seconde ligne compris. */
  .hero__title {
    margin: 0.75rem 0 1.4rem;
    font-size: calc((100vw - 2 * var(--gutter)) / 4.5);
  }

  .hero__title .line + .line {
    padding-left: 0.4em;
  }

  .hero__actions {
    margin-top: 1.6rem;
  }
}

/* Manifeste : une phrase qui fait office d'image, avec une photo ovale dans le texte */

/* Portes ouvertes : le premier contenu sous la vidéo, glissé sous sa courbe. Le titre et la
   date viennent en tête pour être lus dès le premier geste de défilement. L'or reprend l'affiche. */
.event {
  --gold: oklch(0.5 0.095 78);

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--col-gap);
  margin-top: calc(var(--curve) * -1);
  padding: calc(var(--curve) + clamp(1.5rem, 3vw, 2.75rem)) var(--gutter) calc(clamp(2.5rem, 4vw, 3.5rem) + var(--curve) * 0.5);
  background: var(--sand);
}

.event__poster {
  grid-column: 1 / span 3;
  grid-row: 1 / -1;
  align-self: start;
}

.event__poster img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.event__head {
  grid-column: 4 / span 5;
  grid-row: 1;
}

.event__title {
  margin: 0.5rem 0 0;
}

.event__title em {
  color: var(--gold);
}

.event__date {
  margin: 1rem 0 0;
  color: var(--forest);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}

.event__date time {
  display: block;
}

.event__actions {
  grid-column: 4 / span 5;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.event__details {
  grid-column: 9 / -1;
  grid-row: 1 / -1;
  font-size: var(--t-small);
}

.event__details p {
  margin: 1rem 0 0;
}

.event__offers {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--forest);
  font-weight: 600;
  line-height: 1.35;
}

.event__offers strong {
  display: block;
  color: var(--gold);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

@media (max-width: 63.99rem) {
  .event {
    grid-template-columns: minmax(0, 1fr) 7rem;
    grid-template-rows: none;
    column-gap: 1.25rem;
  }

  /* Sur téléphone, un petit geste doit suffire à lire le titre et l'horaire complet. */
  .event__head {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .event__head .eyebrow {
    order: 1;
    margin-top: 0.6rem;
  }

  .event__title {
    margin: 0;
  }

  .event__date {
    margin-top: 0.75rem;
  }

  .event__details {
    display: contents;
  }

  .event__offers {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin-top: 1.5rem;
  }

  .event__poster {
    grid-column: 2;
    grid-row: 2;
    margin-top: 1.5rem;
  }

  .event__details p {
    grid-column: 1 / -1;
    font-size: var(--t-small);
  }

  .event__actions {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 1.5rem;
  }
}

.manifesto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: calc(var(--section) * 0.85) var(--gutter) calc(var(--section) * 0.6);
}

.manifesto__statement {
  grid-column: 1 / -1;
}

.manifesto__indent {
  padding-left: 1.6em;
}

.manifesto__statement em {
  color: var(--sage-text);
}

.inline-photo {
  display: inline-block;
  width: 1.45em;
  height: 0.78em;
  margin: 0 0.1em 0 0.2em;
  overflow: hidden;
  border-radius: 52% 48% 55% 45% / 50% 58% 42% 50%;
  vertical-align: -0.02em;
  background: var(--mist);
}

.inline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manifesto__body {
  grid-column: 7 / span 5;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.manifesto__body .standfirst {
  max-width: 30ch;
  margin-bottom: 1.5rem;
}

.manifesto__body p:not(.standfirst) {
  max-width: 46ch;
  color: var(--ink-2);
}

/* Les chiffres ne sont pas une rangée de statistiques : ce sont des notes à la main,
   décalées comme on les écrirait dans une marge. */
.figures {
  grid-column: 2 / span 5;
  grid-row: 3;
  align-self: start;
  display: grid;
  gap: 0.9rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
}

.figures div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.figures div:nth-child(2) {
  margin-left: clamp(2rem, 6vw, 5.5rem);
}

.figures div:nth-child(3) {
  margin-left: clamp(0.75rem, 2vw, 2rem);
}

.figures div:nth-child(4) {
  margin-left: clamp(3rem, 8vw, 7.5rem);
}

.figures dd {
  order: -1;
  min-width: 2.3ch;
  margin: 0;
  color: var(--moss);
  font-family: var(--font-script);
  font-size: clamp(3.2rem, 2.4rem + 2vw, 4.6rem);
  line-height: 0.8;
}

.figures dd small {
  margin-left: 0.15em;
  font-family: var(--font-text);
  font-size: 0.3em;
  font-weight: 600;
}

.figures dt {
  max-width: 24ch;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.4;
}

.manifesto__body {
  grid-row: 2 / span 2;
}

@media (max-width: 63.99rem) {
  .manifesto__body,
  .figures {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .manifesto__indent {
    padding-left: 0.7em;
  }
}

/* Composition photographique : trois découpes qui se chevauchent */

.composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: calc(var(--section) * 0.4) var(--gutter) calc(var(--section) * 1.2);
}

.composition__main {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
}

.composition__main .photo {
  aspect-ratio: 13 / 10;
}

.composition__tall {
  grid-column: 9 / span 4;
  grid-row: 1;
  margin-top: clamp(4rem, 14vw, 13rem);
}

.composition__tall .photo {
  aspect-ratio: 3 / 4;
}

.composition__detail {
  position: relative;
  z-index: 2;
  grid-column: 6 / span 3;
  grid-row: 2 / span 2;
  align-self: end;
  margin-bottom: -5rem;
}

.composition__detail .photo {
  aspect-ratio: 1170 / 1200;
}

.composition__note {
  grid-column: 10 / span 3;
  grid-row: 3;
  align-self: end;
  max-width: 30ch;
  margin: 6rem 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

@media (max-width: 63.99rem) {
  .composition__main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .composition__tall {
    grid-column: 6 / -1;
    grid-row: 2;
    margin-top: 2.5rem;
  }

  .composition__detail {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: end;
    margin: 0 0 3rem;
  }

  .composition__note {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4rem;
  }
}

/* Carte des soins, liste interactive sur fond forêt */

.services {
  padding: var(--section) var(--gutter);
  background: var(--grain), var(--forest);
  color: var(--paper);
}

.services__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.services__title {
  grid-column: 1 / span 7;
}

.services__title em {
  color: var(--leaf);
}

.services__intro {
  grid-column: 9 / span 4;
  max-width: 30ch;
  margin: 0;
  color: var(--paper-soft);
}

.services__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.services__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 0fr;
  column-gap: 1.5rem;
  padding: 0.85rem 0;
  text-decoration: none;
  transition: grid-template-rows 0.6s var(--ease-out);
}

.service__name {
  color: oklch(0.958 0.013 95 / 0.45);
  font-size: clamp(1.8rem, 1rem + 2.2vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition:
    color 0.5s var(--ease-out),
    translate 0.7s var(--ease-out);
}

.service__name em {
  font-family: var(--font-script);
  font-size: 1.3em;
  font-style: normal;
  line-height: 0.6;
}

.service__price {
  align-self: center;
  color: var(--leaf);
}

.service__desc {
  grid-column: 1 / 2;
  min-height: 0;
  overflow: hidden;
  color: var(--paper-soft);
  font-size: var(--t-small);
}

.service__desc span {
  display: block;
  max-width: 46ch;
  padding-top: 0.5rem;
}

.service.is-active .service__link {
  grid-template-rows: auto 1fr;
}

.service.is-active .service__name {
  color: var(--paper);
  translate: 0.8rem 0;
}

.service__thumb {
  display: none;
}

.services__media {
  position: sticky;
  top: 14vh;
  align-self: start;
  height: 70vh;
}

.services__frame {
  position: relative;
  height: calc(100% - 3rem);
  background: var(--moss);
}

.services__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
}

.services__image.is-previous {
  z-index: 1;
  opacity: 1;
  transform: none;
}

.services__image.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.6s var(--ease-out);
}

.services__more {
  margin: 2.75rem 0 0;
}

@media (max-width: 63.99rem) {
  .services__title,
  .services__intro {
    grid-column: 1 / -1;
  }

  .services__body {
    grid-template-columns: 1fr;
  }

  .services__media {
    display: none;
  }

  .service__link {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-rows: auto;
    column-gap: 1.25rem;
    row-gap: 0.3rem;
    padding: 1.1rem 0;
  }

  .service__name,
  .service__price,
  .service__desc {
    grid-column: 1;
  }

  .service__name,
  .service.is-active .service__name {
    color: var(--paper);
    font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.3rem);
    translate: none;
  }

  .service__price {
    align-self: start;
  }

  .service__desc span {
    padding-top: 0.2rem;
  }

  .service__thumb {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 5.5rem;
    height: 6.75rem;
    object-fit: cover;
    clip-path: url(#forme-pierre);
  }

  .service:nth-child(even) .service__thumb {
    clip-path: url(#forme-feuille);
  }
}

/* Spa : une photo d'eau et de galets détourée à gauche, le titre et les prix à droite.
   Aucun texte n'est posé sur l'image. */

.immersive {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--col-gap);
  row-gap: 3rem;
  padding: calc(var(--section) * 0.55) var(--gutter) calc(var(--section) + var(--curve) * 0.5);
  background: var(--grain), var(--forest);
  color: var(--paper);
}

.immersive__media {
  grid-column: 1 / span 7;
  margin-left: calc(var(--gutter) * -0.4);
}

.immersive__media .photo {
  aspect-ratio: 4 / 3.2;
  background: var(--moss);
}

.immersive__content {
  grid-column: 9 / span 4;
}

.immersive__title {
  margin-bottom: 1.6rem;
}

.immersive__title em {
  color: var(--leaf);
}

.immersive__content > p {
  max-width: 34ch;
  color: var(--paper-soft);
}

.spa-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem var(--col-gap);
  margin: 1.5rem 0 2rem;
}

.spa-prices dt {
  margin-bottom: 0.15rem;
  font-size: var(--t-caption);
}

.spa-prices dd {
  margin: 0;
  color: var(--paper);
}

.spa-prices .price {
  font-size: clamp(1.9rem, 1.3rem + 1.2vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}

@media (max-width: 63.99rem) {
  .immersive__media,
  .immersive__content {
    grid-column: 1 / -1;
  }

  .immersive__media {
    margin-right: 8%;
  }
}

/* Offres découverte : quatre prix posés à des hauteurs différentes, sur un lin chaud
   qui laisse respirer l'accueil entre deux sections vertes. */

.offers {
  padding: var(--section) var(--gutter);
  background: var(--sand);
}

.offers__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 2rem;
}

.offers__intro {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.offers__intro p {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-2);
}

.offers__title {
  grid-column: 6 / -1;
  grid-row: 1;
  text-align: right;
}

.offers__title em {
  color: var(--moss);
}

.offers__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--col-gap);
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

.offer:nth-child(2) {
  margin-top: clamp(3rem, 8vw, 8rem);
}

.offer:nth-child(3) {
  margin-top: clamp(1rem, 2.5vw, 2.5rem);
}

.offer:nth-child(4) {
  margin-top: clamp(4.5rem, 11vw, 11rem);
}

.offer__price {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  color: var(--forest);
  font-size: clamp(4.25rem, 1.6rem + 5.6vw, 8.5rem);
  font-variant-numeric: lining-nums;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.offer__unit {
  margin: 0.3em 0 0 0.1em;
  font-size: 0.24em;
  font-weight: 500;
  letter-spacing: 0;
}

.offer__name {
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.offer__name em {
  color: var(--moss);
}

.offer__detail {
  max-width: 24ch;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.offers__more {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}

@media (max-width: 63.99rem) {
  .offers__intro,
  .offers__title {
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: left;
  }

  .offers__title {
    order: -1;
  }

  .offers__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .offer:nth-child(n) {
    margin-top: 0;
  }

  .offer:nth-child(even) {
    margin-top: 3.5rem;
  }
}

@media (max-width: 36rem) {
  .offers__list {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
  }

  .offer:nth-child(even) {
    margin-top: 0;
    padding-left: 22%;
  }

  .offer__price {
    font-size: 4.5rem;
  }
}

/* Équipe : une seule phrase composée, les rôles notés à la main au-dessus des prénoms */

.team {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: calc(var(--section) + var(--curve) * 0.3) var(--gutter) var(--section);
}

.team__head {
  grid-column: 1 / span 5;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.team__head h2 {
  color: var(--sage-text);
}

.team__names {
  grid-column: 1 / span 9;
  max-width: 17em;
  margin: 0;
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.42;
  text-wrap: pretty;
}

.team__names em {
  color: var(--sage-text);
}

.team__role {
  display: inline-block;
  margin: 0 0.05em 0 0.2em;
  color: var(--sage-text);
  font-family: var(--font-script);
  font-size: clamp(1.55rem, 1.3rem + 0.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-0.95em) rotate(-4deg);
}

.team__photo {
  grid-column: 10 / span 3;
  grid-row: 1 / span 2;
  align-self: end;
}

.team__photo .photo {
  aspect-ratio: 3 / 4;
}

@media (max-width: 63.99rem) {
  .team__head,
  .team__names {
    grid-column: 1 / -1;
  }

  .team__photo {
    grid-column: 4 / -1;
    grid-row: auto;
    margin-top: 3rem;
  }
}

/* Avis : un seul avis Google, cité en entier, en fin de section équipe. Il parle de
   Sandrine, le premier prénom de la phrase au-dessus : l'avis prolonge l'équipe au lieu
   d'ouvrir une section de plus, et la page garde son papier entre les offres et la galerie.
   La note globale reste en marge, comme une référence ; la citation porte la section. */

.team__review {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  margin-top: clamp(5rem, 10vw, 9rem);
}

.team__review-note {
  grid-column: 1 / span 3;
  padding-top: 0.6rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.team__review-score {
  margin: 0.85rem 0 0;
  color: var(--forest);
  font-size: clamp(2.2rem, 1.85rem + 0.9vw, 2.8rem);
  font-variant-numeric: lining-nums;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
}

.team__review-score small {
  margin-left: 0.08em;
  color: var(--ink-2);
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: 0;
}

.team__review-count {
  max-width: 22ch;
  margin: 0.55rem 0 1.35rem;
}

.team__review-quotes {
  display: grid;
  grid-column: 4 / span 7;
  row-gap: 3.5rem;
}

.team__review-quote {
  margin: 0;
}

.team__review-quote blockquote {
  margin: 0;
}

/* Le guillemet ouvrant sort dans la marge pour que le texte s'aligne sur la colonne. */
.team__review-quote p {
  max-width: 24ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 1.05rem + 2.3vw, 3.3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-indent: -0.42em;
  text-wrap: pretty;
}

.team__review-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin-top: 1.75rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.team__review-name {
  margin-right: 0.2rem;
  color: var(--sage-text);
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.7rem + 0.8vw, 2.6rem);
  line-height: 1;
  rotate: -3deg;
}

/* Cinq petites étoiles découpées dans un aplat sauge, à la taille du texte. */
.stars {
  display: inline-block;
  width: 5rem;
  height: 0.95rem;
  background: var(--sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 23'%3E%3Cpath d='M12 1.5l3 6.3 6.8.8-5 4.7 1.3 6.8L12 16.8 5.9 20.1l1.3-6.8-5-4.7 6.8-.8z'/%3E%3C/svg%3E") 0 50% / 1rem 0.95rem repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 23'%3E%3Cpath d='M12 1.5l3 6.3 6.8.8-5 4.7 1.3 6.8L12 16.8 5.9 20.1l1.3-6.8-5-4.7 6.8-.8z'/%3E%3C/svg%3E") 0 50% / 1rem 0.95rem repeat-x;
}

/* Avis qui se relaient. Tous les avis occupent la même case de grille : le plus long
   fixe la hauteur et rien ne bouge autour quand l'avis change. L'avis sortant monte
   légèrement en s'estompant, le suivant arrive d'un rien plus bas, la signature un
   instant après la citation. Sans JavaScript, les avis restent simplement empilés. */

.team__review-quotes.is-rotating > .team__review-quote {
  grid-area: 1 / 1;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}

.team__review-quotes.is-rotating > .team__review-quote.is-active {
  visibility: visible;
  transition: none;
}

.is-rotating > .team__review-quote :is(blockquote, figcaption) {
  opacity: 0;
  translate: 0 0.6rem;
  filter: blur(4px);
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 1, 1),
    translate 0.45s cubic-bezier(0.4, 0, 1, 1),
    filter 0.45s cubic-bezier(0.4, 0, 1, 1);
}

.is-rotating > .team__review-quote.is-leaving :is(blockquote, figcaption) {
  translate: 0 -0.4rem;
}

.is-rotating > .team__review-quote.is-active :is(blockquote, figcaption) {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition:
    opacity 0.8s var(--ease-out) 0.2s,
    translate 1s var(--ease-out) 0.2s,
    filter 0.8s var(--ease-out) 0.2s;
}

.is-rotating > .team__review-quote.is-active figcaption {
  transition-delay: 0.32s;
}

.team__review-toggle {
  display: block;
  margin-top: 0.6rem;
  padding: 0.55rem 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-caption);
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.team__review-toggle:hover,
.team__review-toggle:focus-visible {
  color: var(--forest);
}

@media (prefers-reduced-motion: reduce) {
  .is-rotating > .team__review-quote :is(blockquote, figcaption) {
    translate: none !important;
    filter: none !important;
  }
}

@media (max-width: 63.99rem) {
  .team__review {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    margin-top: 5rem;
  }

  .team__review-quotes {
    order: -1;
  }

  .team__review-quote p {
    max-width: 22ch;
  }
}

/* Galerie */

.gallery {
  position: relative;
  padding-top: var(--section);
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding-inline: var(--gutter);
}

.gallery__head h2 em {
  color: var(--sage-text);
}

.gallery__hint {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.gallery__viewport {
  padding-bottom: var(--section);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery__viewport::-webkit-scrollbar {
  display: none;
}

.gallery__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  width: max-content;
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0;
  list-style: none;
}

.gallery__item {
  flex: none;
  width: 80vw;
  scroll-snap-align: center;
}

.gallery__item .photo {
  aspect-ratio: 4 / 3;
  clip-path: url(#forme-galet);
}

.gallery__item:nth-child(3n + 2) .photo {
  clip-path: url(#forme-feuille);
}

.gallery__item:nth-child(3n) .photo {
  clip-path: url(#forme-pierre);
}

.gallery__item--tall {
  width: 62vw;
}

.gallery__item--tall .photo {
  aspect-ratio: 3 / 4;
}

.gallery__item:nth-child(even) {
  margin-top: 3rem;
}

@media (min-width: 48rem) {
  .gallery__item {
    width: 44vw;
  }

  .gallery__item--tall {
    width: 30vw;
  }
}

/* Réservation, qui se prolonge dans le pied de page */

.booking {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: calc(var(--section) + var(--curve) * 0.3) var(--gutter) calc(var(--section) * 0.7);
  background: var(--grain), var(--forest);
  color: var(--paper);
}

.booking__photo {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  align-self: center;
}

.booking__photo .photo {
  aspect-ratio: 4 / 5;
}

.booking__content {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 8;
  grid-row: 1;
  align-self: end;
}

.booking__title {
  margin-top: 1.25rem;
}

.booking__title .line + .line {
  padding-left: 1.2em;
}

.booking__title em {
  color: var(--leaf);
  font-size: 1.5em;
}

.booking__grid {
  display: grid;
  grid-column: 1 / span 6;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2.75rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.booking__grid > div:nth-child(even) {
  margin-top: 2.25rem;
}

.booking__grid .eyebrow {
  margin-bottom: 0.6rem;
}

.booking__grid p,
.booking__grid address {
  max-width: 28ch;
  color: var(--paper-soft);
  font-size: var(--t-small);
}

.booking__grid .booking__phone {
  margin: 0 0 0.4rem;
  color: var(--paper);
  font-size: clamp(1.8rem, 1.3rem + 1vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.booking__phone a {
  text-decoration: none;
}

.booking__grid .booking__phone + .booking__phone {
  margin-top: 1rem;
}

/* Le service au-dessus de son numéro, quand il y en a deux. */
.phone-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.booking__phone .phone-label {
  color: var(--paper-soft);
}

.practical__big .phone-label {
  color: var(--ink-2);
}

@media (max-width: 63.99rem) {
  .booking__photo {
    grid-column: 3 / -1;
    grid-row: 1;
    margin-bottom: 2.5rem;
  }

  .booking__photo .photo {
    aspect-ratio: 5 / 4;
  }

  .booking__content,
  .booking__grid {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 36rem) {
  .booking__grid {
    grid-template-columns: 1fr;
  }

  .booking__grid > div:nth-child(even) {
    margin-top: 0;
    padding-left: 12%;
  }

  .booking__title .line + .line {
    padding-left: 0.4em;
  }
}

/* Pied de page. Par défaut il monte en courbe sur le papier ; après la réservation
   il la prolonge sans rupture. */

.site-footer {
  position: relative;
  padding: calc(clamp(4rem, 8vw, 6.5rem) + var(--curve) * 0.4) var(--gutter) 2rem;
  background: var(--grain), var(--night);
  color: var(--paper-soft);
  font-size: var(--t-small);
}

.site-footer--continuous {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-radius: 0;
  background: var(--grain), var(--forest);
}

.site-footer--tuck {
  z-index: 1;
  margin-top: calc(var(--curve) * -1);
  padding-top: calc(clamp(4rem, 8vw, 6.5rem) + var(--curve));
}

.site-footer a {
  color: var(--paper);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--leaf);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer__brand {
  color: var(--paper);
}

.site-footer__brand .brand__logo {
  width: clamp(10rem, 8rem + 6vw, 14rem);
}

.site-footer__baseline {
  max-width: 26ch;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.45;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--col-gap);
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.site-footer__title {
  margin: 0 0 0.6rem;
  color: var(--leaf);
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.3;
}

.site-footer__grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__grid li + li {
  margin-top: 0.3rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  color: oklch(0.958 0.013 95 / 0.6);
  font-size: var(--t-caption);
}

.site-footer__legal p {
  margin: 0;
}

@media (max-width: 52rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ouverture des pages intérieures (soins, contact) sur vert pâle */

.page-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2.5rem;
  min-height: min(100svh, 54rem);
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(clamp(3rem, 6vw, 5rem) + var(--curve) * 0.5);
  background: var(--mist);
}

.page-intro__text {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 7;
  grid-row: 1;
  align-self: end;
}

.page-intro__title {
  margin: 0.75rem 0 1.75rem;
  color: var(--forest);
}

.page-intro__title em {
  color: var(--sage-text);
}

.page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
  margin-top: 2.1rem;
}

.page-intro__photo {
  grid-column: 7 / -1;
  grid-row: 1;
  margin-right: calc(var(--gutter) * -0.35);
}

.page-intro__photo .photo {
  height: 100%;
  min-height: 24rem;
  background: var(--sage);
}

@media (max-width: 63.99rem) {
  .page-intro {
    min-height: 0;
  }

  .page-intro__photo {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 0 10%;
  }

  .page-intro__photo .photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .page-intro__text {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .page-intro__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 4.4);
  }
}

/* Ouverture en pleine photo (spa) */

.page-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(100svh, 38rem);
  overflow: clip;
  background: var(--forest);
  color: var(--paper);
}

.page-cover__media {
  position: absolute;
  inset: 0;
}

.page-cover__media img {
  position: absolute;
  top: -8%;
  height: 108%;
}

.page-cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, oklch(0.31 0.038 138 / 0.94) 0%, oklch(0.31 0.038 138 / 0.55) 50%, oklch(0.31 0.038 138 / 0.3) 100%),
    linear-gradient(90deg, oklch(0.31 0.038 138 / 0.4) 0%, oklch(0.31 0.038 138 / 0) 50%);
}

.page-cover__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 2rem;
  width: 100%;
  padding: calc(var(--header-h) + 4rem) var(--gutter) calc(clamp(3rem, 7vw, 5.5rem) + var(--curve) * 0.6);
}

.page-cover__title-wrap {
  grid-column: 1 / span 8;
}

.page-cover__title-wrap .eyebrow {
  color: var(--leaf);
}

.page-cover__title {
  margin-top: 0.75rem;
}

.page-cover__title em {
  color: var(--leaf);
}

.page-cover__aside {
  grid-column: 9 / span 4;
  color: var(--paper-soft);
}

@media (max-width: 63.99rem) {
  .page-cover {
    min-height: 88svh;
  }

  .page-cover__title-wrap,
  .page-cover__aside {
    grid-column: 1 / -1;
  }
}

/* Carte des soins : index des chapitres */

.chapters {
  position: sticky;
  top: calc(var(--header-h) + 0.1rem);
  z-index: 20;
  margin-top: 1rem;
  background: var(--paper);
}

.chapters ul {
  display: flex;
  gap: clamp(1.1rem, 2vw, 2rem);
  margin: 0;
  padding: 0.9rem var(--gutter);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.chapters ul::-webkit-scrollbar {
  display: none;
}

.chapters a {
  --link-mark: var(--leaf);

  position: relative;
  display: block;
  isolation: isolate;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.chapters a::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.3em;
  bottom: -0.1em;
  left: -0.3em;
  height: 0.7em;
  background: var(--link-mark);
  opacity: 0;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  transition: opacity 0.35s var(--ease-out);
}

.chapters a:hover,
.chapters a[aria-current="true"] {
  color: var(--ink);
}

.chapters a:hover::after,
.chapters a[aria-current="true"]::after {
  opacity: 0.9;
}

.chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  scroll-margin-top: 8rem;
}

.chapter:nth-of-type(even) .chapter__head {
  grid-column: 2 / span 5;
}

.chapter__head {
  position: sticky;
  top: 10rem;
  grid-column: 1 / span 5;
  align-self: start;
}

.chapter__title em {
  color: var(--sage-text);
}

.chapter__intro {
  max-width: 32ch;
  margin: 1.25rem 0 0;
  color: var(--ink-2);
}

.chapter__photo {
  margin-top: 2rem;
}

.chapter__photo .photo {
  aspect-ratio: 5 / 4;
  clip-path: url(#forme-galet);
}

.chapter:nth-of-type(odd) .chapter__photo .photo {
  clip-path: url(#forme-feuille);
}

.chapter__body {
  grid-column: 7 / span 5;
}

.chapter__body h3 {
  margin: 2.75rem 0 0.4rem;
  color: var(--sage-text);
  font-family: var(--font-script);
  font-size: var(--t-note);
  font-weight: 400;
  line-height: 1;
}

.chapter__body h3:first-child {
  margin-top: 0;
}

.chapter__body > p {
  max-width: 44ch;
  margin-top: 1.75rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.prices {
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.6rem 0;
  scroll-margin-top: 2.5rem;
}

/* La ligne ouverte depuis la recherche : elle dépasse un peu pour que son texte reste aligné. */
.price-row:target {
  margin-inline: -0.85rem;
  padding-inline: 0.85rem;
  border-radius: 1rem 0.8rem 1.1rem 0.9rem;
  background: var(--mist);
}

.price-row__name {
  max-width: 30ch;
  line-height: 1.4;
}

.price-row .price {
  color: var(--moss);
}

.on-dark .price-row .price {
  color: var(--leaf);
}

.price-row__detail {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink-2);
  font-size: var(--t-caption);
}

@media (max-width: 63.99rem) {
  .chapter__head,
  .chapter:nth-of-type(even) .chapter__head {
    position: static;
    grid-column: 1 / -1;
    margin-bottom: 2.25rem;
  }

  .chapter__photo .photo {
    aspect-ratio: 16 / 10;
  }

  .chapter__body {
    grid-column: 1 / -1;
  }

  .chapter {
    scroll-margin-top: 7rem;
  }
}

/* Pages spa et contact */

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--col-gap);
  row-gap: 3rem;
  padding: var(--section) var(--gutter);
}

.split__media {
  grid-column: 1 / span 6;
}

.split__media .photo {
  aspect-ratio: 4 / 5;
}

.split__text {
  grid-column: 8 / span 5;
}

.split__text h2 {
  margin: 1rem 0 1.75rem;
}

.split__text h2 em {
  color: var(--sage-text);
}

.split__text > p:not(.eyebrow):not(.standfirst) {
  max-width: 40ch;
  color: var(--ink-2);
}

.split__text .standfirst {
  margin-bottom: 1.5rem;
}

.split .spa-prices dd {
  color: var(--forest);
}

.split .spa-prices dt {
  color: var(--ink-2);
}

@media (max-width: 63.99rem) {
  .split__media,
  .split__text {
    grid-column: 1 / -1;
  }

  .split__media {
    margin-right: 10%;
  }

  .split__media .photo {
    aspect-ratio: 4 / 3;
  }
}

.tone-mist {
  background: var(--mist);
}

.tone-dark {
  background: var(--grain), var(--forest);
  color: var(--paper);
}

/* Rituels : le prix commun devient l'élément graphique de la section */

.rituals {
  padding: calc(var(--section) + var(--curve) * 0.3) var(--gutter) calc(var(--section) + var(--curve) * 0.5);
}

.rituals__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 2rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.rituals__price {
  display: flex;
  align-items: flex-start;
  grid-column: 1 / span 6;
  margin: 0;
  color: var(--forest);
  font-size: clamp(6rem, 2rem + 13vw, 15rem);
  font-variant-numeric: lining-nums;
  font-weight: 200;
  letter-spacing: -0.055em;
  line-height: 0.85;
}

.rituals__price .offer__unit {
  font-size: 0.16em;
}

.rituals__text {
  grid-column: 8 / span 5;
}

.rituals__text h2 {
  margin: 1rem 0 1.25rem;
}

.rituals__text h2 em {
  color: var(--moss);
}

.rituals__text p:not(.eyebrow) {
  max-width: 38ch;
  color: var(--ink-2);
}

.rituals__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem clamp(2rem, 6vw, 6rem);
}

.rituals__columns > div:nth-child(2) {
  margin-top: clamp(0rem, 6vw, 5rem);
}

.rituals__columns h3 {
  margin-bottom: 1.25rem;
}

.rituals__columns h3 em {
  color: var(--moss);
}

.rituals__columns ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rituals__columns li {
  max-width: 46ch;
  padding: 0.55rem 0;
  font-size: var(--t-small);
  line-height: 1.55;
}

.rituals__columns li:nth-child(odd) {
  color: var(--ink);
}

.rituals__columns li:nth-child(even) {
  color: var(--ink-2);
}

@media (max-width: 63.99rem) {
  .rituals__price,
  .rituals__text {
    grid-column: 1 / -1;
  }

  .rituals__columns {
    grid-template-columns: 1fr;
  }
}

.sessions {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 3.5rem;
  padding: var(--section) var(--gutter) calc(var(--section) + var(--curve) * 0.4);
}

.sessions__head {
  grid-column: 1 / span 7;
}

.sessions__head h2 em {
  color: var(--leaf);
}

.session {
  grid-column: 1 / span 6;
}

.session .photo {
  aspect-ratio: 4 / 3;
  margin-bottom: 2rem;
}

.session h3 {
  margin-bottom: 0.75rem;
}

.session > p {
  max-width: 40ch;
  color: var(--paper-soft);
  font-size: var(--t-small);
}

.session + .session {
  grid-column: 8 / span 5;
  align-self: end;
}

.session .prices {
  margin-top: 1.25rem;
}

@media (max-width: 63.99rem) {
  .sessions__head,
  .session,
  .session + .session {
    grid-column: 1 / -1;
  }
}

.events {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 2.5rem;
  padding: var(--section) var(--gutter);
}

.events__text {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.events__text p:not(.eyebrow) {
  max-width: 36ch;
  margin: 1rem 0 2rem;
  color: var(--ink-2);
}

.events__title {
  grid-column: 6 / -1;
  grid-row: 1;
  text-align: right;
}

.events__title em {
  color: var(--sage-text);
}

@media (max-width: 63.99rem) {
  .events__text,
  .events__title {
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: left;
  }

  .events__title {
    order: -1;
  }
}

/* Informations pratiques */

.practical {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 4rem;
  padding: var(--section) var(--gutter);
}

.practical__col {
  grid-column: span 4;
}

.practical__col:nth-child(2) {
  margin-top: clamp(0rem, 5vw, 4rem);
}

.practical__col .eyebrow {
  margin-bottom: 0.9rem;
}

.practical__big {
  margin: 0 0 1.1rem;
  color: var(--forest);
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.practical__big a {
  text-decoration: none;
}

.practical__col p:not(.eyebrow):not(.practical__big) {
  max-width: 34ch;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.hours {
  width: 100%;
  max-width: 24rem;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.hours th,
.hours td {
  padding: 0.48rem 0.8rem;
}

.hours th {
  font-weight: 500;
  text-align: left;
}

.hours td {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.hours tr.is-today th,
.hours tr.is-today td {
  background: var(--mist);
  color: var(--forest);
  font-weight: 700;
}

.hours tr.is-today th {
  border-radius: 1.1rem 0 0 1.4rem / 1.2rem 0 0 1rem;
}

.hours tr.is-today td {
  border-radius: 0 1.5rem 1rem 0 / 0 1rem 1.3rem 0;
}

.hours tr.is-today th::after {
  content: " · aujourd’hui";
  font-weight: 500;
}

@media (max-width: 63.99rem) {
  .practical__col {
    grid-column: 1 / -1;
  }

  .practical__col:nth-child(2) {
    margin-top: 0;
  }
}

/* 404 */

/* Mentions légales : une seule colonne de lecture, pas de photo. */
.legal {
  max-width: calc(46rem + var(--gutter) * 2);
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) var(--gutter) var(--section);
}

.legal h1 {
  margin-top: 0.5rem;
}

.legal h2 {
  margin-top: 2.75rem;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.legal p {
  margin: 0.75rem 0 0;
}

.legal__updated {
  color: var(--ink-2);
  font-size: var(--t-small);
}

.legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 0;
}

.legal__facts dt {
  font-weight: 700;
}

.legal__facts dd {
  margin: 0;
}

@media (max-width: 40rem) {
  .legal__facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .legal__facts dd {
    margin-bottom: 0.75rem;
  }
}

.not-found {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--col-gap);
  row-gap: 3rem;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3rem) var(--gutter) calc(clamp(3rem, 7vw, 6rem) + var(--curve) * 0.5);
}

.not-found__text {
  grid-column: 1 / span 6;
}

.not-found__code {
  margin: 0.5rem 0 0.25rem;
  color: var(--sage-text);
  font-family: var(--font-script);
  font-size: var(--t-page);
  line-height: 0.9;
}

.not-found__text h1 {
  margin-bottom: 1.5rem;
  font-family: var(--font-text);
  font-weight: 300;
}

.not-found__text h1 em {
  color: var(--sage-text);
  font-family: var(--font-script);
  font-size: 1.34em;
  line-height: 0.6;
}

.not-found__text p:not(.eyebrow):not(.not-found__code) {
  max-width: 38ch;
  color: var(--ink-2);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
  margin-top: 2.1rem;
}

.not-found__photo {
  grid-column: 8 / -1;
}

.not-found__photo .photo {
  aspect-ratio: 4 / 5;
}

@media (max-width: 63.99rem) {
  .not-found__text,
  .not-found__photo {
    grid-column: 1 / -1;
  }

  .not-found__photo {
    order: -1;
    margin-left: 15%;
  }

  .not-found__photo .photo {
    aspect-ratio: 16 / 11;
  }
}

/* Apparitions au chargement : le H1 s'écrit ligne après ligne, de gauche à droite,
   le texte d'accompagnement suit. Les états cachés n'existent qu'avec JavaScript actif
   et seulement si l'utilisateur accepte les animations. Les marges négatives du masque
   laissent dépasser les boucles de l'écriture. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="write"] .line {
    width: fit-content;
    clip-path: inset(-45% 100% -45% -12%);
    transition: clip-path 1.5s var(--ease-in-out);
    transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 0.55s);
  }

  .js [data-reveal="write"].is-revealed .line {
    clip-path: inset(-45% -12% -45% -12%);
  }

  .js [data-reveal="up"] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity 1s var(--ease-out) var(--delay, 0s),
      transform 1.2s var(--ease-out) var(--delay, 0s);
  }

  .js [data-reveal="fade"] {
    opacity: 0;
    transition: opacity 1.4s ease var(--delay, 0s);
  }

  .js [data-reveal="photo"] img {
    opacity: 0;
    transform: scale(1.08);
    transition:
      opacity 1.2s var(--ease-out) var(--delay, 0s),
      transform 2.2s var(--ease-out) var(--delay, 0s);
  }

  .js [data-reveal].is-revealed,
  .js [data-reveal="photo"].is-revealed img {
    opacity: 1;
    transform: none;
  }
}

/* Effets liés au défilement, calculés par le navigateur lui-même. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-cover__media img {
      animation: drift-down linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    @keyframes drift-down {
      to {
        translate: 0 8%;
      }
    }

    .page-cover__content {
      animation: fade-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }

    @keyframes fade-lift {
      to {
        opacity: 0.1;
        translate: 0 -8vh;
      }
    }

    /* La phrase de l'équipe se « lit » en passant du pâle à l'encre. */
    .ink-in {
      animation: ink-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }

    @keyframes ink-in {
      from {
        color: oklch(0.26 0.022 130 / 0.18);
      }
    }

    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    @keyframes drift {
      from {
        translate: 0 var(--drift, 3rem);
      }
      to {
        translate: 0 calc(var(--drift, 3rem) * -1);
      }
    }

    @media (min-width: 64rem) {
      .gallery {
        height: 360vh;
        padding-top: 0;
        view-timeline: --gallery block;
      }

      .gallery__sticky {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100svh;
        padding-top: var(--header-h);
        overflow: hidden;
      }

      .gallery__viewport {
        padding-bottom: 0;
        overflow: visible;
      }

      .gallery__track {
        align-items: center;
        animation: gallery-slide linear both;
        animation-timeline: --gallery;
        animation-range: contain 4% contain 96%;
      }

      @keyframes gallery-slide {
        to {
          translate: calc(-100% + 100vw) 0;
        }
      }

      .gallery__item,
      .gallery__item--tall {
        width: auto;
      }

      .gallery__item .photo {
        height: 54vh;
      }

      .gallery__item:nth-child(even) {
        margin-top: 0;
        translate: 0 6vh;
      }

      .gallery__item:nth-child(3n) {
        translate: 0 -5vh;
      }
    }
  }
}

/* Menu de cartes : le rituel spa (sans prix, inclus dans l'accès privatif), le spa des
   petits et le grand rituel des petits (avec prix). Même famille typographique que les
   tarifs de la carte, mais posées sur des blocs de papier aux coins découpés à la main,
   sans ombre. */

.menu-intro {
  max-width: 42rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.menu-intro h2 {
  margin: 0.6rem 0 1rem;
}

.menu-intro h2 em {
  color: var(--moss);
}

.menu-intro .standfirst {
  max-width: 46ch;
  color: var(--ink-2);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-card {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.8rem 1.7rem;
  border-radius: 1.7rem 1.2rem 1.9rem 1.3rem / 1.3rem 1.9rem 1.2rem 1.7rem;
  background: var(--paper);
}

.tone-dark .menu-card {
  background: oklch(0.36 0.04 138);
  color: var(--paper-soft);
}

.menu-card__kicker {
  margin: 0 0 0.6rem;
  color: var(--sage-text);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.tone-dark .menu-card__kicker {
  color: var(--leaf);
}

.menu-card__name {
  margin: 0 0 0.7rem;
}

.menu-card__name em {
  color: var(--moss);
}

.tone-dark .menu-card__name em {
  color: var(--leaf);
}

.menu-card__desc {
  flex: 1;
  margin: 0 0 1.25rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}

.tone-dark .menu-card__desc {
  color: var(--paper-soft);
}

.menu-card__note {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem 0.6rem 1rem 0.7rem / 0.7rem 1rem 0.6rem 0.9rem;
  background: var(--sand);
  color: var(--ink-2);
  font-size: var(--t-caption);
  line-height: 1.45;
}

.menu-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.26 0.022 130 / 0.12);
  color: var(--ink-2);
  font-size: var(--t-small);
}

.tone-dark .menu-card__meta {
  border-top-color: oklch(0.958 0.013 95 / 0.18);
  color: var(--paper-soft);
}

.menu-card__meta .price {
  font-size: 1.35rem;
}

@media (max-width: 63.99rem) {
  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* Panneau Toofruit : le texte de cadrage sur les produits enfants, suivi de quatre
   repères courts sans icône, dans le même esprit typographique que les chiffres de
   l'accueil. */

.toofruit {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 2rem 1.4rem 2.2rem 1.5rem / 1.5rem 2.2rem 1.4rem 2rem;
  background: var(--sand);
}

.toofruit h2 {
  margin: 0 0 0.9rem;
}

.toofruit__text {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}

.toofruit__values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid oklch(0.26 0.022 130 / 0.14);
  list-style: none;
}

.toofruit__values li {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 63.99rem) {
  .toofruit__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Renvois vers le spa des petits et les anniversaires enfants, en bas de la page spa. */

.kids-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding: var(--section) var(--gutter) calc(var(--section) * 0.6);
}

.kids-links__item {
  padding: 2rem 2rem 1.85rem;
  border-radius: 1.8rem 1.3rem 2rem 1.4rem / 1.4rem 2rem 1.3rem 1.8rem;
  background: var(--mist);
}

.kids-links__item h3 {
  margin: 0.5rem 0 0.6rem;
}

.kids-links__item p {
  max-width: 34ch;
  margin: 0 0 1.1rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

@media (max-width: 63.99rem) {
  .kids-links {
    grid-template-columns: 1fr;
  }
}

/* Anniversaires enfants : les repères pratiques à gauche, le prix à droite, dans le
   même rapport que le rituel en duo du spa. */

.party {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 3rem;
  padding: var(--section) var(--gutter);
}

.facts {
  grid-column: 1 / span 7;
  margin: 0;
  padding: 0;
}

.facts > div {
  padding: 1.5rem 0;
  border-top: 1px solid oklch(0.26 0.022 130 / 0.14);
}

.facts > div:first-child {
  border-top: 0;
}

.facts dt {
  margin: 0 0 0.4rem;
  color: var(--sage-text);
  font-size: var(--t-small);
  font-weight: 700;
}

.facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-lead);
  line-height: 1.4;
}

.facts dd ul {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.facts dd li {
  padding: 0.2rem 0;
}

.party__offer {
  grid-column: 9 / span 4;
}

.party__price {
  display: flex;
  align-items: flex-start;
  margin: 0;
  color: var(--forest);
  font-size: clamp(4.5rem, 1.8rem + 6vw, 7.5rem);
  font-variant-numeric: lining-nums;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.party__price .offer__unit {
  font-size: 0.24em;
}

.party__offer-label {
  margin: 0.5rem 0 1.5rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.5;
}

@media (max-width: 63.99rem) {
  .facts,
  .party__offer {
    grid-column: 1 / -1;
  }
}

/* Consentement aux cookies

   Une note posée sur le papier, en bas à droite pour ne jamais couvrir l'appel à l'action
   de l'accueil. Elle reprend les formes du site : coins découpés à la main, ombre douce
   comme la barre d'actions mobile, titre manuscrit comme les légendes. Elle arrive après
   l'ouverture de la page, ses lignes se posent l'une après l'autre, et elle repart plus
   vite et plus bas qu'elle n'est venue. Le bandeau flotte au-dessus du contenu : la page
   ne bouge jamais.

   Accepter et Refuser ont le même poids. Au survol, un bouton glisse d'une forme de galet
   à l'autre ; au clic, il se creuse. Accepter laisse ensuite place à une coche tracée à la
   main avant que la note ne se retire. */

.consent {
  position: fixed;
  right: var(--gutter);
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 35;
  width: min(29rem, calc(100vw - 2 * var(--gutter)));
  padding: 1.3rem 1.5rem 1.35rem 1.6rem;
  border-radius: 2rem 2.6rem 2.3rem 1.6rem / 2.2rem 1.8rem 2.5rem 2rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 0.1rem 0.35rem oklch(0.26 0.03 135 / 0.07),
    0 0.9rem 2.6rem oklch(0.26 0.03 135 / 0.16);
  opacity: 0;
  translate: 0 1.25rem;
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.9s var(--ease-out);
}

.consent[data-state="open"] {
  opacity: 1;
  translate: 0 0;
}

.consent[data-state="closing"] {
  opacity: 0;
  translate: 0 0.6rem;
  pointer-events: none;
  transition:
    opacity 0.32s cubic-bezier(0.4, 0, 1, 1),
    translate 0.4s cubic-bezier(0.4, 0, 1, 1);
}

/* Entrée en trois temps : le titre, le texte, les boutons. */
.consent__title,
.consent__text,
.consent__actions {
  opacity: 0;
  translate: 0 0.5rem;
  filter: blur(3px);
  transition:
    opacity 0.6s var(--ease-out),
    translate 0.8s var(--ease-out),
    filter 0.6s var(--ease-out);
}

.consent__text {
  --i: 1;
}

.consent__actions {
  --i: 2;
}

.consent[data-state="open"] :is(.consent__title, .consent__text, .consent__actions) {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-delay: calc(0.14s + var(--i, 0) * 0.09s);
}

/* À la sortie, la note part d'un bloc. */
.consent[data-state="closing"] :is(.consent__title, .consent__text, .consent__actions) {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition: none;
}

.consent__title {
  margin: 0 0 0.45rem;
  color: var(--forest);
  font-family: var(--font-script);
  font-size: var(--t-note);
  font-weight: 400;
  line-height: 1;
  rotate: -2deg;
  transform-origin: left center;
}

.consent__title:focus:not(:focus-visible) {
  outline: none;
}

.consent__text {
  max-width: 38ch;
  margin: 0 0 1.15rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.consent .button {
  transition:
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    border-radius 0.6s var(--ease-out),
    scale 0.16s ease-out;
}

.consent .button:hover {
  border-radius: 1.4rem 2rem 1.5rem 1.9rem / 1.9rem 1.4rem 1.8rem 1.5rem;
}

.consent .button:active {
  scale: 0.96;
}

.consent__refuse {
  --button-bg: var(--mist);
  --button-fg: var(--forest);
  --button-hover-bg: var(--leaf);
}

.consent__manage,
.consent__save {
  padding: 0.6rem 0.2rem;
  border: 0;
  background: none;
  color: var(--forest);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  cursor: pointer;
}

.consent__manage {
  margin-left: auto;
}

.consent__manage::after {
  opacity: 0.4;
}

.consent__manage[aria-expanded="true"]::after {
  opacity: 1;
}

/* Le mot « Accepter » s'efface pendant que la coche apparaît et se trace. Le mot reste dans
   le flux : le bouton garde sa largeur. */
.consent__accept {
  position: relative;
}

.consent__label,
.consent__check {
  transition:
    opacity 0.3s cubic-bezier(0.2, 0, 0, 1),
    scale 0.3s cubic-bezier(0.2, 0, 0, 1),
    filter 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.consent__check {
  position: absolute;
  inset: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

.consent__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s var(--ease-in-out) 0.06s;
}

.consent__accept.is-done .consent__label {
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

.consent__accept.is-done .consent__check {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

.consent__accept.is-done .consent__check path {
  stroke-dashoffset: 0;
}

/* Préférences : elles se déplient vers le haut, le bas du bandeau reste en place. */
.consent__prefs {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.55s var(--ease-in-out),
    opacity 0.3s ease;
}

.consent.is-expanded .consent__prefs {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 0.55s var(--ease-in-out),
    opacity 0.45s ease 0.15s;
}

/* La marge négative laisse de la place au contour de focus et au trait des liens. */
.consent__prefs-inner {
  min-height: 0;
  margin-inline: -0.4rem;
  padding-inline: 0.4rem;
  overflow: hidden;
}

.consent__options {
  display: grid;
  gap: 0.85rem;
  padding: 0.25rem 0 0.6rem;
}

.consent__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
}

.consent__option-name {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.consent__option-note {
  display: block;
  color: var(--ink-2);
  font-size: var(--t-caption);
  line-height: 1.45;
}

.consent__save {
  margin: 0 0 0.9rem;
}

.switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.6rem;
  margin: 0;
  border-radius: 1rem 0.85rem 1rem 0.9rem / 0.85rem 1rem 0.9rem 1rem;
  background: var(--mist);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out);
}

.switch::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0.1rem 0.25rem oklch(0.26 0.03 135 / 0.2);
  transition: translate 0.45s var(--ease-out);
}

.switch:checked {
  background: var(--moss);
}

.switch:checked::before {
  translate: 1.15rem 0;
}

.switch:disabled {
  cursor: default;
  opacity: 0.6;
}

.switch:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* Sur téléphone, la note se pose juste au-dessus de la barre Appeler / Réserver et en
   reprend la forme et les proportions. */
@media (max-width: 40rem) {
  .consent {
    right: 0.6rem;
    bottom: calc(5.35rem + env(safe-area-inset-bottom));
    left: 0.6rem;
    width: auto;
    padding: 1.1rem 1.1rem 1.15rem 1.25rem;
    border-radius: 1.7rem 2.2rem 1.9rem 1.5rem / 1.9rem 1.6rem 2.1rem 1.8rem;
  }

  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 0.35rem;
  }

  .consent__manage {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0.15rem 0 -0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent * {
    filter: none !important;
    transition-delay: 0s !important;
  }
}

/* Pied de page : rouvrir les préférences. */
.site-footer__cookies {
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.site-footer__cookies:hover,
.site-footer__cookies:focus-visible {
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}