/* =============================================================
   ThérÂme — Feuille de style
   -------------------------------------------------------------
   Sommaire
   01. Jetons de design (variables)
   02. Reset & bases
   03. Utilitaires & accessibilité
   04. Typographie
   05. Boutons & liens
   06. En-tête / navigation
   07. Hero
   08. Section soins (cubes)
   09. Instruments & monocorde interactif
   10. Questionnaire
   11. Mon parcours
   12. Bandeau confiance (RME)
   13. Témoignages
   13 bis. Le cheminement (attentes réalistes)
   13 ter. Bandeaux de citation
   14. Tarifs
   15. Rendez-vous (3 étapes)
   16. Contact + avis Google
   17. Pied de page
   18. Panneau sonore flottant
   19. Modales
   20. Animations & révélations
   21. Responsive
   22. Mouvement réduit / impression
   ============================================================= */

/* -------------------------------------------------------------
   01. JETONS DE DESIGN
   ------------------------------------------------------------- */
:root {
  /* Palette */
  --ivory: #f8f1e7;
  --cream: #fffaf3;
  --plum: #32133f;
  --plum-light: #6d416f;
  --lavender: #cfc2d8;
  --gold: #c99a52;
  --gold-light: #ead3a4;
  --wood: #8b5e3c;
  --sage: #899b87;
  --ink: #241b25;

  /* Dérivés */
  --ink-soft: #4a3d4d;
  --ink-mute: #6b5c6e;
  --line: rgba(50, 19, 63, 0.12);
  --line-strong: rgba(50, 19, 63, 0.22);
  --glass: rgba(255, 250, 243, 0.72);
  --glass-dark: rgba(50, 19, 63, 0.72);

  /* Ombres douces */
  --shadow-xs: 0 1px 2px rgba(36, 27, 37, 0.05);
  --shadow-sm: 0 6px 18px -10px rgba(36, 27, 37, 0.35);
  --shadow-md: 0 18px 40px -24px rgba(36, 27, 37, 0.45);
  --shadow-lg: 0 34px 80px -40px rgba(36, 27, 37, 0.55);

  /* Rayons */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Rythme */
  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --header-h: 78px;

  /* Typographie */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
                "Georgia Pro", Georgia, "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Plancher à 0.75rem (12 px) : en dessous, les surtitres capitales
     très espacées deviennent pénibles à lire sur téléphone. */
  --fs-eyebrow: clamp(0.75rem, 0.68rem + 0.18vw, 0.82rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.28rem);
  --fs-h3: clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2vw, 3.05rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.8vw, 4.6rem);

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease);
  --t-med: 340ms var(--ease);
  --t-slow: 700ms var(--ease-out);
}

/* -------------------------------------------------------------
   02. RESET & BASES
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--ivory);
  /* Texture papier très fine, générée en CSS (aucune image chargée) */
  background-image:
    radial-gradient(1100px 700px at 12% -8%, rgba(207, 194, 216, 0.38), transparent 62%),
    radial-gradient(900px 620px at 92% 6%, rgba(234, 211, 164, 0.32), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(137, 155, 135, 0.16), transparent 65%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

svg { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: inherit; }

[hidden] { display: none !important; }

::selection {
  background: var(--gold-light);
  color: var(--plum);
}

/* -------------------------------------------------------------
   03. UTILITAIRES & ACCESSIBILITÉ
   ------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 860px); }

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--plum);
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9rem;
  transform: translateY(-160%);
  transition: transform var(--t-fast);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Focus visible unifié */
:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 4px;
}
.trust :focus-visible,
.footer :focus-visible,
.hero__scroll:focus-visible {
  outline-color: var(--gold-light);
}

.noscript {
  margin: 1rem auto;
  width: min(100% - 2.5rem, 800px);
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--cream);
}

/* -------------------------------------------------------------
   04. TYPOGRAPHIE
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--plum);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--plum-light);
  margin-bottom: 0.65rem;
}

.section {
  position: relative;
  padding-block: clamp(3rem, 1.7rem + 5.5vw, 5.75rem);
}

.section__head {
  position: relative;
  max-width: 96ch;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 1rem + 2.25vw, 2.85rem);
  text-align: center;
}
.section--quiz .section__head,
.section--booking .section__head {
  max-width: 88ch;
}
.section--booking .section__head {
  max-width: 104ch;
}

.section__head::after {
  content: "";
  display: block;
  width: clamp(4.5rem, 8vw, 7.5rem);
  height: 1px;
  margin: clamp(0.9rem, 0.7rem + 0.5vw, 1.15rem) auto 0;
  background:
    linear-gradient(90deg, transparent, rgba(201, 154, 82, 0.8), transparent);
}

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: 0.65rem;
  text-wrap: balance;
}

.section__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 88ch;
  margin-inline: auto;
  line-height: 1.6;
}
.section--booking .section__lead {
  max-width: none;
  white-space: nowrap;
}

.disclaimer,
.footnote {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-mute);
}

.hint {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 2.25rem;
  font-size: 0.9rem;
  color: var(--ink-mute);
  max-width: 62ch;
}
.hint > span:first-child { color: var(--gold); }

.link {
  color: var(--plum);
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
  transition: color var(--t-fast);
}
.link:hover { color: var(--plum-light); }

/* -------------------------------------------------------------
   05. BOUTONS
   ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--plum);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  box-shadow: var(--shadow-sm), 0 0 0 0 rgba(201, 154, 82, 0.45);
}
.btn--primary:hover {
  background: #3f1a4f;
  box-shadow: var(--shadow-md), 0 0 26px -6px rgba(201, 154, 82, 0.6);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--plum);
  border-color: var(--line-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(255, 250, 243, 0.6);
}

.btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--plum);
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  border-radius: var(--r-sm);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 5px;
}
.btn--text:hover { color: var(--plum-light); }

.btn--onDark {
  --btn-fg: var(--cream);
  text-decoration-color: var(--gold-light);
}
.btn--onDark:hover { color: var(--gold-light); }

.btn--compact { padding: 0.7rem 1.25rem; font-size: 0.9rem; }
.btn--tiny { padding: 0.55rem 1rem; min-height: 42px; font-size: 0.85rem; }
.btn--block { width: 100%; }

.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

/* Lien « En savoir plus » des cubes */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding: 0.5rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--plum-light);
  font-size: 0.9rem;
  font-weight: 550;
  text-align: left;
}
.link-more svg { width: 1.1em; height: 1.1em; transition: transform var(--t-fast); }
.link-more:hover { color: var(--plum); }
.link-more:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------
   06. EN-TÊTE / NAVIGATION
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--t-med), box-shadow var(--t-med),
              backdrop-filter var(--t-med);
}
.site-header.is-scrolled {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.site-header__inner {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  text-decoration: none;
  color: var(--plum);
  flex-shrink: 0;
}
/* Plus de largeur imposee sur le logo de l'en-tete : depuis qu'il porte du
   vrai texte (comme celui du pied de page) il se dimensionne sur son contenu.
   .logo est deja flex-shrink: 0, il ne sera donc jamais compresse par la nav.
   Les anciennes regles .site-header .logo / .logo__image dimensionnaient le
   PNG et sont parties avec lui. */
.logo__mark {
  display: grid;
  place-items: center;
  width: 58px;
  flex: 0 0 58px;
  color: var(--gold);
}
.logo__mark svg { width: 100%; }
.logo__text { display: grid; line-height: 1.05; }
.logo__name {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 1rem + 1.3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.logo__accent { color: var(--gold); }
.logo--footer .logo__accent { color: var(--gold-light); }
.logo__tagline {
  font-size: clamp(0.64rem, 0.55rem + 0.22vw, 0.78rem);
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 0.34rem;
}

/* Signature « Avec Isabelle à Mies » : 3e ligne de .logo__text, sous la
   baseline, dans l'en-tete comme dans le pied de page. Typographie strictement
   identique a .logo__tagline ci-dessus — meme fonte, meme corps, meme
   interlettrage, meme couleur : c'est une demande explicite, les deux lignes
   doivent se lire comme une seule et meme mention. Rien n'y est mis en valeur,
   ni serif ni dore (ce dernier ne passerait de toute facon pas le contraste AA
   a ce corps). Toute retouche de .logo__tagline doit etre repercutee ici, y
   compris dans la media query 1200px. */
.logo__with {
  font-size: clamp(0.64rem, 0.55rem + 0.22vw, 0.78rem);
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 0.34rem;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0;
  font-size: 0.93rem;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav__link:hover { color: var(--plum); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--plum); font-weight: 600; }

/* Bouton hamburger */
.burger {
  display: none;
  /* Doit rester au-dessus du tiroir (.nav, z-index 99) : une fois le menu
     ouvert, le bouton devient la croix de fermeture et doit rester
     touchable. Sans cela, le tiroir le recouvre et il ne reste que le
     voile latéral pour fermer. */
  position: relative;
  z-index: 101;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.burger__box {
  position: relative;
  display: block;
  width: 20px; height: 12px;
  margin-inline: auto;
}
.burger__bar,
.burger__box::before,
.burger__box::after {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--plum);
  border-radius: 2px;
  transition: transform var(--t-med), opacity var(--t-fast);
}
.burger__bar { top: 5px; }
.burger__box::before { content: ""; top: -1px; }
.burger__box::after { content: ""; top: 11px; }
.burger[aria-expanded="true"] .burger__box::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box::after { transform: translateY(-4px) rotate(-45deg); }
.burger[aria-expanded="true"] .burger__bar { opacity: 0; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(36, 27, 37, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-med);
}
.nav-backdrop.is-open { opacity: 1; }

/* Badge fixe de confiance, sans revendication de certification externe. */
.security-badge {
  position: fixed;
  right: max(clamp(0.85rem, 2vw, 1.75rem), env(safe-area-inset-right, 0px) + 0.85rem);
  bottom: max(clamp(0.85rem, 2vw, 1.75rem), env(safe-area-inset-bottom, 0px) + 0.85rem);
  z-index: 86;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: calc(100vw - 1.7rem);
  min-height: 54px;
  padding: 0.58rem 0.85rem 0.58rem 0.65rem;
  border: 1px solid rgba(111, 158, 74, 0.42);
  border-radius: var(--r-lg);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.95), rgba(248, 241, 231, 0.84));
  color: var(--plum);
  box-shadow:
    0 16px 36px -26px rgba(36, 27, 37, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(1.15);
  pointer-events: none;
}
.security-badge__icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 0.75rem;
  background: #75c900;
  color: #fff;
}
.security-badge__icon svg {
  width: 24px;
  height: 24px;
}
.security-badge__copy {
  display: grid;
  gap: 0.05rem;
  line-height: 1.1;
  text-align: left;
}
.security-badge__copy strong {
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}
.security-badge__copy span {
  font-size: 0.72rem;
  color: var(--ink-mute);
}

/* -------------------------------------------------------------
   07. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 94svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 2.25rem) 4.25rem;
  background-color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(248, 241, 231, 1) 0%,
      rgba(248, 241, 231, 0.96) 38%,
      rgba(248, 241, 231, 0.58) 52%,
      rgba(248, 241, 231, 0.08) 68%,
      rgba(248, 241, 231, 0) 100%),
    linear-gradient(180deg,
      rgba(255, 250, 243, 0.72) 0%,
      rgba(255, 250, 243, 0.48) 16%,
      rgba(255, 250, 243, 0.08) 38%,
      rgba(255, 250, 243, 0) 58%,
      rgba(248, 241, 231, 0.28) 100%);
}

.hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 1;
  background:
    radial-gradient(720px 500px at 72% 34%, rgba(234, 211, 164, 0.16), transparent 68%),
    radial-gradient(560px 480px at 18% 74%, rgba(207, 194, 216, 0.24), transparent 70%);
  pointer-events: none;
}

.hero__waves {
  position: absolute;
  inset: auto 0 8% 0;
  width: 100%;
  height: min(52vh, 420px);
  z-index: 2;
  opacity: 0.34;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero__wave {
  animation: waveDrift 26s linear infinite;
}
.hero__wave--2 { animation-duration: 34s; animation-delay: -6s; opacity: 0.72; }
.hero__wave--3 { animation-duration: 44s; animation-delay: -14s; opacity: 0.5; }

@keyframes waveDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(240px, 0, 0); }
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  transform: translateY(clamp(-3rem, -4vh, -2rem));
}

.hero__content {
  max-width: 620px;
}

.hero__title {
  font-size: var(--fs-h1);
  margin-bottom: 1.15rem;
  text-shadow: 0 1px 0 rgba(255, 250, 243, 0.72);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 34ch;
  margin-bottom: 2.1rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.1rem;
}
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.55);
  backdrop-filter: blur(6px);
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.hero__trust-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(137, 155, 135, 0.18);
}

/* Composition d'instruments */
.hero__visual {
  display: none;
}
.instrument-scene {
  margin: 0;
  filter: drop-shadow(0 40px 60px rgba(36, 27, 37, 0.18));
}
.instrument-scene svg { width: 100%; }

.scene__item { transform-origin: center; }
.scene__item--mono { animation: floatSoft 9s ease-in-out infinite; }
.scene__item--bowls { animation: floatSoft 11s ease-in-out infinite -2s; }
.scene__item--hang { animation: floatSoft 13s ease-in-out infinite -5s; }
.scene__item--drum { animation: floatSoft 12s ease-in-out infinite -8s; }
.scene__item--xylo { animation: floatSoft 14s ease-in-out infinite -3s; }

@keyframes floatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

.mono-strings path { animation: stringHum 3.4s ease-in-out infinite; }
.mono-strings path:nth-child(even) { animation-delay: -1.1s; }
.mono-strings path:nth-child(3n) { animation-delay: -2.2s; }
@keyframes stringHum {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}

.scene__emit path {
  opacity: 0;
  animation: emitWave 5.5s ease-out infinite;
}
.scene__emit .scene__emit-2 { animation-delay: 1.8s; }
.scene__emit .scene__emit-3 { animation-delay: 3.6s; }
@keyframes emitWave {
  0%   { opacity: 0; transform: translate3d(-40px, 0, 0); }
  20%  { opacity: 0.7; }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate3d(64px, 0, 0); }
}

.hero__scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--plum);
  text-decoration: none;
  background: rgba(255, 250, 243, 0.55);
  backdrop-filter: blur(6px);
}
.hero__scroll span {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  animation: scrollNudge 2.4s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: 0.6; }
  50%      { transform: translateY(2px) rotate(45deg); opacity: 1; }
}

/* -------------------------------------------------------------
   08. SOINS — cubes
   ------------------------------------------------------------- */
@media (min-width: 1025px) {
  :root {
    /* Hauteur dont les cubes remontent sur le hero. Elle est plafonnée par la
       hauteur de fenêtre disponible : sur un portable court (1366×768, ou
       1280×720 à 125 %), le hero n'a pas la place de loger son contenu ET une
       bande de 13.5rem — les cubes finissaient par recouvrir le badge
       « Diplôme fédéral … Agréée RME ». Au-dessus de ~900px de viewport,
       24svh dépasse déjà la borne haute du clamp : la valeur — donc la
       composition des grands écrans — est strictement inchangée. */
    --services-overlap: min(clamp(11.5rem, 8rem + 6vw, 13.5rem), 24svh);
    /* Air au-dessus des cubes. Désormais porté par la marge de la section et
       non plus par son padding — voir .section--services ci-dessous. */
    --services-head-pad: clamp(2.25rem, 1rem + 3vw, 3.75rem);
  }

  /* Le hero réserve sous son contenu la bande que les cubes vont recouvrir, au
     lieu de la laisser mordre dessus. Le badge reste ainsi dans le flux normal
     et toujours au-dessus des cartes, sans recours au z-index.
     57.5rem = 4.25rem (padding de base, cf. §07) + 94svh au point de bascule
     (~906px de viewport) : au-delà, max() retient 4.25rem et rien ne bouge.
     En dessous, la réserve grandit jusqu'à la hauteur du recouvrement, ce qui
     rallonge le hero d'autant au lieu de superposer les deux blocs. */
  .hero {
    padding-bottom: max(4.25rem, min(calc(57.5rem - 94svh), var(--services-overlap)));
  }

  /* Le recouvrement n'est plus porté que par la marge négative : le bord haut
     de la section coïncide exactement avec le bord haut des cubes. Avant, la
     section montait en plus de tout son padding (jusqu'à 3.75rem) dans le
     hero, où elle passait par-dessus le bas du badge — invisible, faute de
     fond, mais captant le survol et la sélection du texte. Les cubes ne
     bougent pas d'un pixel : le padding retiré est réinjecté dans la marge. */
  .section--services {
    z-index: 2;
    margin-top: calc(var(--services-head-pad) - var(--services-overlap));
    padding-top: 0;
    padding-bottom: clamp(0.45rem, 0.2rem + 0.8vw, 1rem);
  }

  /* Les cubes remontent sur le hero : on remonte l'image d'autant,
     sinon les bols chantants — qui sont tout en bas de l'illustration —
     disparaissent derrière eux. Les deux valeurs doivent rester identiques. */
  .hero__bg {
    top: calc(-1 * var(--services-overlap));
    bottom: var(--services-overlap);
  }

  .section--services .container {
    display: flex;
    flex-direction: column;
  }

  .section--services .cubes { order: 1; }
  .section--services .cube.reveal {
    opacity: 1;
    transform: none;
  }
  .section--services .section__head {
    order: 2;
    max-width: 96ch;
    margin-top: clamp(1.75rem, 0.8rem + 2.1vw, 2.6rem);
    margin-bottom: 0;
  }
  .section--services .service-facts {
    order: 3;
  }
  .section--services .hint { order: 3; }
  .hero__scroll { bottom: calc(var(--services-overlap) + 2rem); }
  .sound-panel { bottom: calc(var(--services-overlap) + 2rem); }
}

.cubes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.45rem + 1.45vw, 1.75rem);
  list-style: none;
  padding: 0;
}

.cube {
  min-width: 0;
}

.cube > article {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.72rem, 0.5rem + 0.65vw, 1rem);
  min-height: clamp(10.35rem, 10.5vw, 12rem);
  padding: clamp(1.1rem, 0.78rem + 0.9vw, 1.6rem);
  border: 1px solid rgba(201, 154, 82, 0.28);
  border-radius: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.88), rgba(248, 241, 231, 0.68)),
    radial-gradient(220px 170px at 50% 0%, rgba(255, 255, 255, 0.86), transparent 68%);
  box-shadow:
    0 22px 48px -34px rgba(50, 19, 63, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.08);
  overflow: hidden;
  text-align: center;
  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med),
    background-color var(--t-med);
  will-change: transform;
}

/* Matière ivoire très légère, comme un papier translucide posé sur le hero. */
.cube > article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.46), transparent 46%),
    radial-gradient(circle at 18% 16%, rgba(234, 211, 164, 0.22), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(207, 194, 216, 0.16), transparent 34%);
  opacity: 0.72;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.cube > article::after {
  content: "";
  position: absolute;
  inset: auto 12% -35% 12%;
  height: 58%;
  background: radial-gradient(closest-side, rgba(234, 211, 164, 0.34), transparent 72%);
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.cube:hover > article,
.cube:focus-within > article {
  transform: translateY(-7px);
  border-color: rgba(201, 154, 82, 0.55);
  box-shadow:
    0 30px 70px -38px rgba(50, 19, 63, 0.7),
    0 0 0 1px rgba(255, 250, 243, 0.48) inset;
}
.cube:hover > article::before,
.cube:focus-within > article::before { opacity: 0.98; }
.cube:hover > article::after,
.cube:focus-within > article::after { opacity: 1; }

.cube__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(4.55rem, 3.9rem + 1.35vw, 5.2rem);
  height: clamp(4.55rem, 3.9rem + 1.35vw, 5.2rem);
  border-radius: 50%;
  border: 1px solid rgba(201, 154, 82, 0.42);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.92), rgba(234, 211, 164, 0.18) 72%),
    rgba(255, 250, 243, 0.42);
  color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 24px -20px rgba(50, 19, 63, 0.55);
}
.cube__icon::before,
.cube__icon::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.cube__icon::before {
  inset: 0.58rem;
  background:
    repeating-conic-gradient(
      from 8deg,
      rgba(201, 154, 82, 0.58) 0deg 3deg,
      transparent 3deg 10deg
    );
  opacity: 0.54;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.cube__icon::after {
  inset: 1.2rem;
  border: 1px solid rgba(201, 154, 82, 0.18);
}
.cube__icon svg {
  position: relative;
  z-index: 1;
  width: clamp(2.25rem, 1.95rem + 0.65vw, 2.7rem);
  height: clamp(2.25rem, 1.95rem + 0.65vw, 2.7rem);
}

.cube__title {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 1rem;
  font-size: clamp(1.28rem, 1.08rem + 0.55vw, 1.58rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.cube__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6.1rem;
  height: 0.55rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at center, rgba(201, 154, 82, 0.95) 0 2px, transparent 2.7px) center / 0.55rem 0.55rem no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) left center / 2.25rem 1px no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) right center / 2.25rem 1px no-repeat;
}
.cube__text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cube .link-more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
  border-radius: inherit;
  color: transparent;
  font-size: 0;
}
.cube .link-more > span {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cube .link-more svg { display: none; }
.cube .link-more:focus-visible { outline: 0; }
.cube:focus-within > article {
  outline: 2px solid rgba(201, 154, 82, 0.48);
  outline-offset: 4px;
}

.service-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.65rem + 1vw, 1.45rem);
  width: 100%;
  max-width: 1280px;
  margin: clamp(1.35rem, 0.8rem + 1.8vw, 2.45rem) auto 0;
}
.service-facts > div {
  position: relative;
  min-height: clamp(10rem, 8.5rem + 2.4vw, 11.75rem);
  padding: clamp(1.3rem, 1rem + 0.85vw, 1.75rem);
  border: 1px solid rgba(50, 19, 63, 0.11);
  border-radius: var(--r-lg);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.78), rgba(248, 241, 231, 0.58)),
    radial-gradient(260px 170px at 18% 0%, rgba(234, 211, 164, 0.2), transparent 68%);
  box-shadow:
    0 22px 48px -38px rgba(50, 19, 63, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.service-facts > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201, 154, 82, 0.62), transparent);
  opacity: 0.55;
}
.service-facts dt {
  position: relative;
  margin-bottom: 0.55rem;
  color: var(--plum);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem);
  font-weight: 650;
  line-height: 1.22;
}
.service-facts dd {
  position: relative;
  color: var(--ink-soft);
  font-size: clamp(0.93rem, 0.88rem + 0.18vw, 1.02rem);
  line-height: 1.62;
}

/* -------------------------------------------------------------
   09. INSTRUMENTS
   ------------------------------------------------------------- */
.section--instruments { background: rgba(255, 250, 243, 0.45); }

.gallery-wrap { position: relative; }

.gallery {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem calc((100vw - min(100% - 2.5rem, 1240px)) / 2 + 0.25rem) 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb {
  background: rgba(201, 154, 82, 0.6);
  border-radius: var(--r-pill);
}

.instrument {
  flex: 0 0 clamp(238px, 26vw, 300px);
  scroll-snap-align: center;
}
.instrument > article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.instrument:hover > article,
.instrument:focus-within > article {
  transform: translateY(-6px);
  border-color: rgba(201, 154, 82, 0.5);
  box-shadow: var(--shadow-md);
}

.instrument__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  margin-bottom: 0.35rem;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(207, 194, 216, 0.28), rgba(234, 211, 164, 0.22));
  color: var(--plum);
  overflow: hidden;
}
.instrument__art svg { width: 80%; }

/* Petite onde animée dans la vignette */
.instrument__wave {
  position: absolute;
  left: 0; right: 0; bottom: 12%;
  height: 22px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(201, 154, 82, 0.55) 6px 7px,
      transparent 7px 13px);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity var(--t-med), transform var(--t-med);
}
.instrument:hover .instrument__wave,
.instrument:focus-within .instrument__wave,
.instrument.is-sounding .instrument__wave {
  opacity: 0.9;
  transform: scaleY(1);
  animation: waveSlide 1.6s linear infinite;
}
@keyframes waveSlide {
  from { background-position-x: 0; }
  to   { background-position-x: 13px; }
}

.instrument__name { font-size: 1.1rem; }
.instrument__text { font-size: 0.9rem; color: var(--ink-soft); flex: 1; }
.instrument__note {
  font-size: 0.82rem;
  color: var(--ink-mute);
  font-style: italic;
}
.instrument .btn { align-self: flex-start; }

.gallery__hint {
  width: min(100% - 2.5rem, 1240px);
  margin: 0 auto;
  font-size: 0.82rem;
  color: var(--ink-mute);
}

/* ---------- Monocorde interactif ---------- */
.mono {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px 320px at 78% 0%, rgba(234, 211, 164, 0.35), transparent 70%),
    linear-gradient(160deg, rgba(255, 250, 243, 0.95), rgba(248, 241, 231, 0.75));
  box-shadow: var(--shadow-md);
}

.mono__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 0.7rem; }
.mono__lead { color: var(--ink-soft); margin-bottom: 1.1rem; }
.mono__status {
  min-height: 1.5rem;
  font-size: 0.88rem;
  color: var(--plum-light);
  font-weight: 550;
}
.mono__controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

.mono__stage { display: grid; gap: 1rem; }
.mono__svg {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  touch-action: pan-y;
  cursor: crosshair;
}

/* Cordes injectées par script.js */
.mono-string {
  stroke: url(#monoString);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-width 120ms var(--ease), opacity 200ms var(--ease);
}
.mono-string.is-plucked {
  stroke-width: 3.4;
  animation: stringVibrate 620ms var(--ease-out);
}
@keyframes stringVibrate {
  0%   { transform: translateY(0); }
  15%  { transform: translateY(-3.2px); }
  32%  { transform: translateY(2.4px); }
  52%  { transform: translateY(-1.5px); }
  74%  { transform: translateY(0.8px); }
  100% { transform: translateY(0); }
}
/* Zone de saisie invisible, plus large que la corde */
.mono-hit { fill: transparent; cursor: pointer; }
.mono-hit:focus { outline: none; }

.mono-ripple {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.6;
  animation: rippleOut 1500ms var(--ease-out) forwards;
}
@keyframes rippleOut {
  from { opacity: 0.85; transform: scale(0.2); }
  to   { opacity: 0; transform: scale(1); }
}

.mono__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mono-key {
  min-width: 48px;
  min-height: 44px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--plum);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mono-key:hover,
.mono-key.is-active {
  background: rgba(234, 211, 164, 0.4);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.mono__help { font-size: 0.82rem; color: var(--ink-mute); }

/* -------------------------------------------------------------
   10. QUESTIONNAIRE
   ------------------------------------------------------------- */
.quiz {
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--cream);
  box-shadow: var(--shadow-md);
}

.quiz__progress { margin-bottom: 1.75rem; }
.quiz__bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(50, 19, 63, 0.1);
  overflow: hidden;
}
.quiz__bar-fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width var(--t-med);
}
.quiz__step {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.quiz__q { border: 0; padding: 0; margin: 0; }
.quiz__legend {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--plum);
  margin-bottom: 1.15rem;
  padding: 0;
}
.quiz__options {
  display: grid;
  gap: 0.6rem;
}

/* Option de type radio, stylée mais native */
.opt { position: relative; display: block; }
.opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.opt__box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 56px;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(248, 241, 231, 0.5);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.opt__dot {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.opt input:hover + .opt__box { border-color: var(--gold); transform: translateX(2px); }
.opt input:checked + .opt__box {
  border-color: var(--plum);
  background: rgba(207, 194, 216, 0.24);
}
/* Indication non uniquement chromatique : le point est rempli ET la bordure change */
.opt input:checked + .opt__box .opt__dot {
  border-color: var(--plum);
  box-shadow: inset 0 0 0 4px var(--plum);
}
.opt input:focus-visible + .opt__box {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

.quiz__actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.quiz__error {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  border-left: 3px solid #a8324a;
  border-radius: var(--r-sm);
  background: rgba(168, 50, 74, 0.08);
  color: #7d2237;
  font-size: 0.9rem;
}

.quiz__result {
  margin-top: 0.5rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid rgba(201, 154, 82, 0.45);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(234, 211, 164, 0.22), rgba(207, 194, 216, 0.18));
}
.quiz__result-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 0.7rem; }
.quiz__result-text { color: var(--ink-soft); margin-bottom: 0.9rem; }
.quiz__result-alt { font-size: 0.92rem; margin-bottom: 1.35rem; }
.quiz__result-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.quiz .disclaimer { margin-top: 1.5rem; }

/* -------------------------------------------------------------
   11. MON PARCOURS
   ------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 2rem); }
.portrait__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.portrait__frame img {
  width: 100%;
  height: auto;
}
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(50, 19, 63, 0.18));
  pointer-events: none;
}
.portrait__caption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--ink-mute);
  text-align: center;
}

.atelier-gallery {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  grid-template-rows:
    clamp(13rem, 18vw, 16.5rem)
    clamp(8.5rem, 11vw, 10.5rem)
    clamp(8.5rem, 11vw, 10.5rem);
  gap: clamp(0.55rem, 0.4rem + 0.5vw, 0.8rem);
  margin: 0;
  padding: clamp(0.65rem, 0.45rem + 0.75vw, 1rem);
  border: 1px solid rgba(201, 154, 82, 0.34);
  border-radius: clamp(1.45rem, 1rem + 1.4vw, 2.2rem);
  background:
    radial-gradient(circle at 84% 18%, rgba(234, 211, 164, 0.28), transparent 33%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.92), rgba(248, 241, 231, 0.74));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.atelier-gallery::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(255, 250, 243, 0.62);
  border-radius: calc(clamp(1.45rem, 1rem + 1.4vw, 2.2rem) - 0.45rem);
  pointer-events: none;
  z-index: 2;
}
.atelier-gallery::after {
  content: "";
  position: absolute;
  right: -14%;
  top: 40%;
  width: 72%;
  height: 26%;
  border-top: 1px solid rgba(201, 154, 82, 0.34);
  border-radius: 50%;
  transform: rotate(-9deg);
  pointer-events: none;
  z-index: 2;
}
.atelier-gallery__item {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 243, 0.72);
  border-radius: clamp(1rem, 0.8rem + 0.8vw, 1.45rem);
  background: var(--cream);
  box-shadow: 0 16px 34px rgba(50, 19, 63, 0.12);
}
.atelier-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.06), rgba(50, 19, 63, 0.16)),
    radial-gradient(circle at 18% 18%, rgba(255, 250, 243, 0.42), transparent 34%);
  pointer-events: none;
}
.atelier-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.98) brightness(1.02);
  transform: scale(1.01);
  transition: transform var(--t-med), filter var(--t-med);
}
.atelier-gallery__item:hover img {
  filter: saturate(1.02) contrast(1) brightness(1.04);
  transform: scale(1.045);
}
.atelier-gallery__item--main {
  grid-column: 1 / -1;
}
.atelier-gallery__item--main img {
  object-position: center 56%;
}
.atelier-gallery__item--tall {
  grid-row: 2 / 4;
}
.atelier-gallery__item--tall img {
  object-position: 50% 42%;
}
.atelier-gallery__item--bowls img {
  object-position: 52% 55%;
}
.atelier-gallery__item--soft img {
  object-position: 50% 62%;
}
.atelier-gallery__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about__intro {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 66ch;
  margin: 0.8rem auto 1.85rem;
  line-height: 1.6;
  text-align: center;
}
.about__content > .eyebrow,
.about__content > .section__title {
  text-align: center;
}
.about__sub {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}

.timeline {
  list-style: none;
  padding: 0 0 0 1.5rem;
  margin: 0 0 2.5rem;
  border-left: 1px solid var(--line-strong);
  display: grid;
  gap: 1rem;
}
.timeline__item { position: relative; }
.timeline__dot {
  position: absolute;
  left: -1.94rem;
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 154, 82, 0.18);
}
.timeline__text { font-size: 0.97rem; color: var(--ink-soft); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1.75rem;
}
.tag {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.7);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------
   12. BANDEAU CONFIANCE (RME)
   ------------------------------------------------------------- */
.trust {
  position: relative;
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  background: linear-gradient(140deg, var(--plum), #240d2f 62%, #3d1a4b);
  color: var(--cream);
  overflow: hidden;
}
.trust::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 180%;
  background: radial-gradient(600px 380px at 20% 30%, rgba(201, 154, 82, 0.22), transparent 70%);
  pointer-events: none;
}

.trust__inner {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
}
.trust__badge { color: var(--gold-light); }
.trust__badge svg { width: 100%; }

.trust__title { color: var(--cream); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: 0.9rem; }
.trust__content p { color: rgba(255, 250, 243, 0.86); max-width: 68ch; }
.trust__note { margin-top: 0.7rem; font-size: 0.94rem; color: rgba(234, 211, 164, 0.95) !important; }

.trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 1.1rem;
}
.trust__list li {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(234, 211, 164, 0.45);
  border-radius: var(--r-pill);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

/* -------------------------------------------------------------
   13. TÉMOIGNAGES
   ------------------------------------------------------------- */
.section--testimonials {
  padding-bottom: clamp(1rem, 0.55rem + 1.4vw, 2rem);
}

.quotes-carousel {
  max-width: min(100%, 46rem);
  margin-inline: auto;
}
.quotes-carousel__stack {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 24.5rem;
}
.quotes-carousel__stack .quote {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.quotes-carousel__stack .quote.is-active { opacity: 1; }
.quote--featured figure {
  border-style: solid;
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.96), rgba(248, 241, 231, 0.74)),
    radial-gradient(circle at 12% 18%, rgba(234, 211, 164, 0.3), transparent 36%);
  box-shadow: var(--shadow-md);
}
.quotes-carousel .quote--featured blockquote p {
  font-size: 1.22rem;
  line-height: 1.6;
}
.quote figure {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem 1.75rem 1.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 250, 243, 0.6);
}
.quote__mark {
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 0.5;
  color: rgba(201, 154, 82, 0.55);
}
.quote blockquote {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.quote blockquote p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.quote figcaption { display: grid; gap: 0.2rem; font-size: 0.85rem; }
.quote__author { color: var(--plum); font-weight: 600; }
.quote__type { color: var(--ink-mute); }

/* -------------------------------------------------------------
   13 bis. LE CHEMINEMENT (attentes réalistes) — voir aussi 13 ter
   ------------------------------------------------------------- */
.section--path {
  padding-bottom: clamp(1.2rem, 0.75rem + 1.4vw, 2.2rem);
  background: rgba(255, 250, 243, 0.45);
}
.section--path .container {
  width: min(100% - 2.5rem, 1380px);
}

.path__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 0.5rem + 2vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.path__item {
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}
.path__mark {
  display: block;
  width: 40px;
  color: var(--gold);
  margin-bottom: 1rem;
}
.path__mark svg { width: 100%; display: block; }
.path__title {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}
.path__text {
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* La parole de ThérÂme ferme la section : un panneau qui occupe toute la
   largeur du conteneur, pour peser autant que les trois cartes réunies.
   Le panneau s'étire ; la mesure de lecture, elle, reste bornée — c'est ce
   qui empêche le texte de partir en lignes de 120 caractères. */
.path__word {
  position: relative;
  margin: clamp(2.15rem, 1.15rem + 2.8vw, 3.8rem) 0 0;
  padding: clamp(1.65rem, 1rem + 2vw, 2.8rem) clamp(1.4rem, 0.7rem + 4.8vw, 6.7rem);
  border: 1px solid rgba(201, 154, 82, 0.26);
  border-radius: clamp(1.35rem, 1rem + 1vw, 2.15rem);
  background:
    linear-gradient(158deg, rgba(255, 250, 243, 0.94), rgba(248, 241, 231, 0.72)),
    radial-gradient(70% 130% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 70%);
  box-shadow:
    0 26px 60px -40px rgba(50, 19, 63, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  text-align: center;
  overflow: hidden;
}

/* Halo d'or très discret dans l'angle haut, comme sur les cubes. */
.path__word::after {
  content: "";
  position: absolute;
  inset: -40% 30% auto 30%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(234, 211, 164, 0.3), transparent 72%);
  pointer-events: none;
}

/* Point d'or entre deux filets : le même signe que .cube__title::after
   et que le point de résonance du logo. */
.path__word-mark {
  display: block;
  width: 6.1rem;
  height: 0.55rem;
  margin: 0 auto clamp(1.15rem, 0.85rem + 1vw, 1.85rem);
  background:
    radial-gradient(circle at center, rgba(201, 154, 82, 0.95) 0 2px, transparent 2.7px) center / 0.55rem 0.55rem no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) left center / 2.25rem 1px no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) right center / 2.25rem 1px no-repeat;
}

.path__word blockquote { position: relative; }

.path__word p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--plum);
  text-wrap: pretty;
}

/* Ouverture : centrée, un ton au-dessus — elle donne le la. */
.path__word-open {
  max-width: 92ch;
  margin-inline: auto;
  font-size: clamp(1.18rem, 1.04rem + 0.48vw, 1.52rem);
  line-height: 1.38;
  letter-spacing: 0;
}

/* Corps : centré et plus large pour alléger la hauteur du panneau tout
   en gardant une mesure lisible. */
.path__word-body {
  max-width: 126ch;
  margin-inline: auto;
  margin-top: clamp(0.8rem, 0.55rem + 0.7vw, 1.2rem);
  text-align: center;
  font-size: clamp(1.06rem, 0.99rem + 0.22vw, 1.16rem);
  line-height: 1.5;
  color: rgba(50, 19, 63, 0.9);
}

/* La charnière : une seule phrase, centrée entre deux filets d'or.
   C'est l'engagement d'honnêteté de la section — il respire. */
.path__word-pivot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 0.5rem + 1.6vw, 1.9rem);
  max-width: 104ch;
  margin: clamp(1rem, 0.75rem + 1vw, 1.65rem) auto;
  font-size: clamp(1.12rem, 1rem + 0.32vw, 1.26rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--plum);
}
.path__word-pivot::before,
.path__word-pivot::after {
  content: "";
  flex: 0 1 7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 154, 82, 0.75), transparent);
}

.path__author {
  margin-top: clamp(1.1rem, 0.85rem + 0.9vw, 1.65rem);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--plum-light);
}
/* Filet d'or dégradé, comme sous les titres de section. */
.path__author::before {
  content: "";
  display: block;
  width: clamp(3rem, 6vw, 4.5rem);
  height: 1px;
  margin: 0 auto clamp(0.65rem, 0.5rem + 0.4vw, 0.9rem);
  background: linear-gradient(90deg, transparent, rgba(201, 154, 82, 0.8), transparent);
}

/* Sous ~560 px les filets de la charnière ne valent plus rien : on les
   retire et la phrase redevient un simple bloc centré. */
@media (max-width: 35em) {
  .path__word-pivot { display: block; }
  .path__word-pivot::before,
  .path__word-pivot::after { content: none; }
}

/* -------------------------------------------------------------
   13 ter. BANDEAUX DE CITATION
   Respirations entre deux sections : une citation, une signature.
   Volontairement sans fond ni bordure pleine, pour ne pas casser
   l'alternance de fonds des sections voisines.
   ------------------------------------------------------------- */
.quoteband { padding: clamp(2rem, 1.05rem + 2.6vw, 3.5rem) 0; }

.section--services + .quoteband {
  padding-top: clamp(0.25rem, 0.15rem + 0.55vw, 0.7rem);
  padding-bottom: clamp(0.35rem, 0.15rem + 0.6vw, 0.85rem);
}

.section--services + .quoteband + .section--quiz {
  padding-top: clamp(0.65rem, 0.35rem + 0.9vw, 1.2rem);
}

.section--testimonials + .quoteband {
  padding-top: clamp(0.75rem, 0.35rem + 1.1vw, 1.45rem);
  padding-bottom: clamp(1.1rem, 0.6rem + 1.5vw, 2.2rem);
}

.section--path + .quoteband {
  padding-top: clamp(0.8rem, 0.35rem + 1.2vw, 1.55rem);
  padding-bottom: clamp(0.75rem, 0.35rem + 1.1vw, 1.45rem);
}

.section--path + .quoteband + .section--prices {
  padding-top: clamp(1rem, 0.55rem + 1.35vw, 1.85rem);
}

.section--booking + .quoteband--tesla {
  padding-top: clamp(0.9rem, 0.45rem + 1.3vw, 1.65rem);
  padding-bottom: clamp(0.55rem, 0.25rem + 0.9vw, 1.15rem);
}

.section--booking + .quoteband--tesla + .section--faq {
  padding-top: clamp(1.15rem, 0.6rem + 1.6vw, 2.1rem);
}

.quoteband__fig {
  margin: 0 auto;
  max-width: 56ch;
  text-align: center;
}
.quoteband__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.9rem + 1.1vw, 2.85rem);
  line-height: 0.6;
  color: rgba(201, 154, 82, 0.95);
  margin-bottom: 0.65rem;
}
.quoteband__quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.96rem + 0.45vw, 1.32rem);
  line-height: 1.58;
  color: var(--plum);
  font-style: italic;
  text-wrap: pretty;
}
.quoteband__quote p + p { margin-top: 0.85rem; }
.quoteband__author {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.quoteband--wide .container--narrow {
  width: min(100% - 2.5rem, 1160px);
}
.quoteband--wide .quoteband__fig {
  max-width: 104ch;
}
.quoteband--wide .quoteband__quote p {
  font-size: clamp(1.02rem, 0.94rem + 0.32vw, 1.16rem);
  line-height: 1.55;
}

.quoteband--tesla .quoteband__fig {
  max-width: 68ch;
}

.quoteband--planck .container--narrow {
  width: min(100% - 2.5rem, 1180px);
}
.quoteband--planck .quoteband__fig {
  max-width: 104ch;
  text-align: center;
}
.quoteband--planck .quoteband__mark {
  margin-bottom: 0.55rem;
}
.quoteband--planck .quoteband__quote p {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.16rem);
  line-height: 1.5;
}
.quoteband--planck .quoteband__quote p + p {
  margin-top: 0.55rem;
}

/* Citation longue : la lecture centrée devient pénible au-delà de
   quelques lignes — on repasse à un bloc aligné à gauche. */
.quoteband--long .quoteband__fig {
  max-width: 68ch;
  text-align: left;
}
.quoteband--long .quoteband__mark { margin-bottom: 0.5rem; }
.quoteband--long .quoteband__quote p {
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
}

/* -------------------------------------------------------------
   14. TARIFS
   ------------------------------------------------------------- */
.prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.price--wide { grid-column: 1 / -1; }

.price > article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.price:hover > article {
  transform: translateY(-5px);
  border-color: rgba(201, 154, 82, 0.5);
  box-shadow: var(--shadow-md);
}
.price__name { font-size: 1.08rem; min-height: 2.4em; }
.price__amount {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem);
  color: var(--plum);
  line-height: 1.1;
}
.price__amount--text { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.price__cur {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: 0.55em;
  margin-right: 0.25rem;
}
.price__meta {
  font-size: 0.88rem;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
  flex: 1;
}
.price .btn { align-self: flex-start; }

.prices__message {
  margin-top: 2rem;
  margin-inline: auto;
  padding: 1.15rem 1.5rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(234, 211, 164, 0.22);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 100%;
  width: max-content;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   15. RENDEZ-VOUS
   ------------------------------------------------------------- */
.booking {
  padding: clamp(1.55rem, 1rem + 2.2vw, 2.9rem);
  border: 1px solid rgba(201, 154, 82, 0.22);
  border-radius: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  background:
    radial-gradient(600px 260px at 16% 0%, rgba(234, 211, 164, 0.2), transparent 72%),
    linear-gradient(150deg, rgba(255, 250, 243, 0.96), rgba(248, 241, 231, 0.74));
  box-shadow:
    0 26px 70px -46px rgba(36, 27, 37, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 0.35rem + 1vw, 1rem);
  list-style: none;
  padding: 0;
  margin-bottom: 1.05rem;
  counter-reset: step;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 56px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(50, 19, 63, 0.14);
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.68);
  font-size: 0.88rem;
  color: var(--ink-mute);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition:
    border-color var(--t-med),
    background-color var(--t-med),
    color var(--t-med),
    box-shadow var(--t-med);
}
.steps__num {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.steps__item.is-current {
  border-color: var(--plum);
  background:
    linear-gradient(145deg, rgba(207, 194, 216, 0.32), rgba(255, 250, 243, 0.76));
  color: var(--plum);
  font-weight: 600;
  box-shadow:
    0 14px 28px -24px rgba(50, 19, 63, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}
.steps__item.is-current .steps__num { border-color: var(--plum); background: var(--plum); color: var(--cream); }
.steps__item.is-done { color: var(--ink-soft); border-color: rgba(201, 154, 82, 0.52); }
.steps__item.is-done .steps__num { background: var(--gold); border-color: var(--gold); color: var(--plum); }

.booking__progress {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.35rem;
}

.errors {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(168, 50, 74, 0.35);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: rgba(168, 50, 74, 0.07);
}
.errors__title { font-family: var(--font-sans); font-size: 0.92rem; color: #7d2237; margin-bottom: 0.5rem; }
.errors__list { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.errors__list a { color: #7d2237; }

.fieldset { border: 0; padding: 0; margin: 0; }
.booking__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.fieldset__legend {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.16rem + 0.85vw, 1.95rem);
  line-height: 1.15;
  color: var(--plum);
  padding: 0;
  margin-bottom: 0.5rem;
}
.fieldset__hint { font-size: 0.9rem; color: var(--ink-mute); margin-bottom: 1.45rem; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.choice { position: relative; display: block; min-width: 0; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.choice__box {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 74px;
  padding: 0.9rem 1.15rem;
  border: 1px solid rgba(50, 19, 63, 0.17);
  border-radius: var(--r-pill);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.86), rgba(248, 241, 231, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition:
    border-color var(--t-fast),
    background-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.choice__box::before {
  content: "";
  flex: 0 0 16px;
  width: 16px; height: 16px;
  margin-right: 0.8rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.choice__label {
  min-width: 0;
  line-height: 1.35;
}
.choice input:hover + .choice__box {
  border-color: rgba(201, 154, 82, 0.68);
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px -28px rgba(36, 27, 37, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.choice input:checked + .choice__box {
  border-color: var(--plum);
  background:
    linear-gradient(145deg, rgba(207, 194, 216, 0.34), rgba(255, 250, 243, 0.82));
  font-weight: 600;
  box-shadow:
    0 18px 34px -30px rgba(50, 19, 63, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}
.choice input:checked + .choice__box::before {
  border-color: var(--plum);
  box-shadow: inset 0 0 0 3.5px var(--plum);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--plum); outline-offset: 3px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.45rem + 1.2vw, 1.25rem);
}

.field { margin-bottom: 1.15rem; }
.field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--plum);
}
.req { color: var(--wood); }

.field__input {
  width: 100%;
  min-height: 56px;
  padding: 0.78rem 1rem;
  border: 1px solid rgba(50, 19, 63, 0.17);
  border-radius: clamp(1rem, 0.8rem + 0.5vw, 1.35rem);
  background: rgba(255, 250, 243, 0.76);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.field__input:hover { border-color: rgba(201, 154, 82, 0.7); background-color: rgba(255, 250, 243, 0.92); }
.field__input:focus-visible {
  outline: none;
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(50, 19, 63, 0.14);
}
textarea.field__input { resize: vertical; min-height: 118px; }
select.field__input { appearance: none; background-image: none; }

.field__help { margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-mute); }
.field__error {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #7d2237;
  font-weight: 550;
}
/* L'erreur n'est pas signalée par la seule couleur : préfixe + bordure épaissie */
.field__error::before { content: "⚠ "; }
.field__input[aria-invalid="true"] {
  border-color: #a8324a;
  border-width: 2px;
  background: rgba(168, 50, 74, 0.05);
}

.pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill { position: relative; display: inline-block; }
.pill input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(50, 19, 63, 0.17);
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.72);
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.pill input:hover + span { border-color: rgba(201, 154, 82, 0.72); transform: translateY(-1px); }
.pill input:checked + span {
  border-color: var(--plum);
  background: var(--plum);
  color: var(--cream);
  font-weight: 600;
}
.pill input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 3px; }

.field--consent { margin-top: 0.5rem; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(50, 19, 63, 0.17);
  border-radius: clamp(1rem, 0.8rem + 0.5vw, 1.35rem);
  background: rgba(255, 250, 243, 0.72);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.consent input {
  position: absolute;
  opacity: 0;
  width: 22px; height: 22px;
  margin: 0;
}
.consent__box {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--cream);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.consent input:checked + .consent__box {
  background: var(--plum);
  border-color: var(--plum);
  background-image: linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 12px var(--plum);
}
.consent input:focus-visible + .consent__box { outline: 2px solid var(--plum); outline-offset: 3px; }
.consent__text { font-size: 0.9rem; color: var(--ink-soft); }

.booking__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.booking__done { text-align: center; padding: 1rem 0 0.5rem; }
.booking__check { display: block; width: 76px; margin: 0 auto 1.25rem; color: var(--sage); }
.booking__check-circle {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: drawCircle 700ms var(--ease-out) forwards;
}
.booking__check-mark {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: drawCheck 420ms var(--ease-out) 520ms forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

.booking__done-title {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.65rem);
  max-width: 46ch;
  margin: 0 auto 0.9rem;
}
.booking__done-text { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 0.75rem; }
.booking__done-alt { font-size: 0.95rem; margin-bottom: 1.5rem; }

/* -------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------- */
.section--faq {
  padding-top: clamp(2rem, 1rem + 3vw, 3.75rem);
  background: rgba(255, 250, 243, 0.32);
}
.faq {
  display: grid;
  gap: 0.75rem;
}
.faq__item {
  border: 1px solid rgba(50, 19, 63, 0.12);
  border-radius: var(--r-md);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.86), rgba(248, 241, 231, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: 0.95rem 1.15rem;
  color: var(--plum);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 154, 82, 0.42);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 500;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  padding: 0 1.15rem 1rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.62;
}

/* -------------------------------------------------------------
   17. CONTACT + AVIS
   -------------------------------------------------------------
   Trois cubes de largeur et de hauteur identiques, repris de la
   matière des cubes de soins (§08) : même ivoire translucide, même
   filet d'or, même lévitation au survol.

   Avant, le contact était une grille à deux colonnes (carte à
   gauche, texte à droite) et le cube d'avis vivait dans une section
   séparée, seul et centré : la page se terminait sur deux blocs
   asymétriques et un grand vide à droite. Les trois cubes portent
   maintenant le même composant.

   Les rangées d'actions sont poussées en bas par « margin-top: auto »,
   donc les boutons des trois cubes s'alignent quelle que soit la
   longueur du texte au-dessus.
   ------------------------------------------------------------- */
.section--contact {
  padding-block: clamp(2.4rem, 1.45rem + 3vw, 4.25rem);
}

.contact-cubes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.35vw, 1.7rem);
  align-items: stretch;
}

.contact-cube {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: clamp(0.5rem, 0.38rem + 0.35vw, 0.78rem);
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem) clamp(1.15rem, 0.8rem + 1.2vw, 1.85rem);
  border: 1px solid rgba(201, 154, 82, 0.28);
  border-radius: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.88), rgba(248, 241, 231, 0.68)),
    radial-gradient(220px 170px at 50% 0%, rgba(255, 255, 255, 0.86), transparent 68%);
  box-shadow:
    0 22px 48px -34px rgba(50, 19, 63, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.08);
  overflow: hidden;
  text-align: center;
  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med);
}

/* Même voile ivoire que les cubes de soins. */
.contact-cube::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.46), transparent 46%),
    radial-gradient(circle at 18% 16%, rgba(234, 211, 164, 0.22), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(207, 194, 216, 0.16), transparent 34%);
  opacity: 0.72;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.contact-cube:hover,
.contact-cube:focus-within {
  transform: translateY(-5px);
  border-color: rgba(201, 154, 82, 0.55);
  box-shadow:
    0 30px 70px -38px rgba(50, 19, 63, 0.7),
    0 0 0 1px rgba(255, 250, 243, 0.48) inset;
}
.contact-cube:hover::before,
.contact-cube:focus-within::before { opacity: 0.98; }

.contact-cube > * {
  position: relative;
  z-index: 1;
}

.contact-cube__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(3.6rem, 3.1rem + 1.1vw, 4.2rem);
  height: clamp(3.6rem, 3.1rem + 1.1vw, 4.2rem);
  border-radius: 50%;
  border: 1px solid rgba(201, 154, 82, 0.42);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.92), rgba(234, 211, 164, 0.18) 72%),
    rgba(255, 250, 243, 0.42);
  color: var(--gold);
  margin-bottom: 0.15rem;
}
.contact-cube__icon svg {
  width: clamp(1.85rem, 1.6rem + 0.55vw, 2.2rem);
  height: clamp(1.85rem, 1.6rem + 0.55vw, 2.2rem);
}

.contact-cube__title {
  font-family: var(--font-serif);
  font-size: clamp(1.24rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--plum);
  margin: 0;
  text-wrap: balance;
}

/* Casse d'origine conservée : le nom ThérÂme ne se met jamais
   entièrement en capitales (voir .logo__name). */
.contact-cube__brand {
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem);
  letter-spacing: 0.04em;
  text-transform: none;
}
.contact__accent { color: var(--gold); }

.contact-cube__text {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-mute);
  font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  line-height: 1.6;
  font-style: normal;      /* le premier cube contient une <address> */
}
.contact-cube__line {
  display: block;
  margin-bottom: 0.3rem;
}
.contact-cube__line:last-child { margin-bottom: 0; }

.contact-cube__actions {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  max-width: 21rem;
  margin-top: auto;
  padding-top: clamp(0.75rem, 0.5rem + 0.7vw, 1.25rem);
}
.contact-cube__actions .btn {
  width: 100%;
  min-height: 48px;
  padding-inline: 0.9rem;
  border-radius: var(--r-pill);
}

/* -------------------------------------------------------------
   17. PAGES LÉGALES
   ------------------------------------------------------------- */
.legal-page {
  width: min(100% - 2.5rem, 920px);
  margin: 0 auto;
  padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem);
}
.legal-page header {
  margin-bottom: clamp(1.75rem, 1.1rem + 2vw, 3rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(201, 154, 82, 0.28);
}
.legal-page h1 {
  max-width: 14ch;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4rem);
  line-height: 1.02;
  color: var(--plum);
}
.legal-page header p {
  margin-top: 0.9rem;
  color: var(--ink-mute);
}
.legal-page section {
  padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  border-bottom: 1px solid rgba(50, 19, 63, 0.08);
}
.legal-page h2 {
  margin-bottom: 0.7rem;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem);
  line-height: 1.35;
  color: var(--plum);
}
.legal-page p,
.legal-page li,
.legal-page address {
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.04rem);
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-page p + p,
.legal-page ul + p,
.legal-page table + p {
  margin-top: 0.85rem;
}
.legal-page address {
  margin-top: 0.75rem;
  font-style: normal;
}
.legal-page ul {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
}
.legal-page li + li {
  margin-top: 0.25rem;
}
.legal-page a {
  color: var(--plum);
  text-decoration-color: rgba(201, 154, 82, 0.75);
  text-underline-offset: 4px;
}
.legal-page a:hover {
  color: var(--plum-light);
}
.legal-page table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}
.legal-page th,
.legal-page td {
  padding: 0.75rem;
  border: 1px solid rgba(50, 19, 63, 0.12);
  vertical-align: top;
  text-align: left;
}
.legal-page th {
  background: rgba(234, 211, 164, 0.22);
  color: var(--plum);
}

/* -------------------------------------------------------------
   18. PIED DE PAGE
   ------------------------------------------------------------- */
.footer {
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  background: linear-gradient(180deg, #2b1035, var(--ink));
  color: rgba(255, 250, 243, 0.82);
}
.footer a { color: inherit; text-decoration-color: rgba(201, 154, 82, 0.6); text-underline-offset: 4px; }
.footer a:hover { color: var(--gold-light); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: 2.5rem;
}

.logo--footer { color: var(--cream); }
.logo--footer .logo__mark { color: var(--gold-light); }
.logo--footer .logo__tagline { color: rgba(255, 250, 243, 0.6); }
.logo--footer .logo__with { color: rgba(255, 250, 243, 0.6); }

.footer__motto {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.footer__title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.footer__nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
  gap: 0.45rem 1.25rem;
  font-size: 0.92rem;
}
.footer__contact p { font-size: 0.92rem; margin-bottom: 0.4rem; }
.footer__contact .btn--text { margin-top: 0.6rem; padding-inline: 0; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 250, 243, 0.14);
  font-size: 0.82rem;
}
.footer__legal { display: flex; gap: 1.5rem; list-style: none; padding: 0; }
.footer__legal .btn--text { font-size: 0.82rem; }

/* Le badge « Site sécurisé » est en position fixed en bas à droite. En bas de
   page il se superposait à la dernière ligne du pied de page (« Gérer mes
   cookies »). On réserve sa hauteur + son décalage pour qu'il ne recouvre
   jamais ces liens. Il a déjà pointer-events: none, donc rien n'était bloqué :
   c'était une gêne visuelle. */
.footer__bottom {
  padding-bottom: calc(
    54px
    + max(clamp(0.85rem, 2vw, 1.75rem), env(safe-area-inset-bottom, 0px) + 0.85rem)
    + 0.75rem
  );
}

/* -------------------------------------------------------------
   18. PANNEAU SONORE FLOTTANT
   ------------------------------------------------------------- */
.sound-panel {
  position: fixed;
  right: clamp(0.85rem, 2vw, 1.75rem);
  bottom: clamp(0.85rem, 2vw, 1.75rem);
  /* Marge de sécurité au-dessus des barres de navigateur mobiles */
  bottom: max(clamp(0.85rem, 2vw, 1.75rem), env(safe-area-inset-bottom, 0px) + 0.85rem);
  z-index: 95;
  width: min(300px, calc(100vw - 1.7rem));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sound-panel__toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 54px;
  padding: 0.7rem 1rem;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--plum);
}
.sound-panel__icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(50, 19, 63, 0.08);
  color: var(--plum);
}
.sound-panel__icon svg { width: 20px; height: 20px; }
/* État muet par défaut : arcs cachés, croix visible */
.sound-panel__arcs { opacity: 0; }
.sound-panel__cross { opacity: 1; }
.sound-panel.is-on .sound-panel__arcs { opacity: 1; }
.sound-panel.is-on .sound-panel__cross { opacity: 0; }
.sound-panel.is-on .sound-panel__icon {
  background: rgba(201, 154, 82, 0.28);
  color: var(--wood);
}
.sound-panel.is-playing .sound-panel__icon { animation: soundPulse 2.6s ease-in-out infinite; }
@keyframes soundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 154, 82, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(201, 154, 82, 0); }
}

.sound-panel__body {
  padding: 0 1rem 1rem;
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.sound-panel__status {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sound-panel__row { display: flex; align-items: center; gap: 0.5rem; }
.sound-panel__row .btn { flex: 1; }
.sound-panel__row--slider { gap: 0.7rem; }
.sound-panel__label { font-size: 0.8rem; color: var(--ink-soft); }
.sound-panel__value {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  min-width: 3.2em;
  text-align: right;
}
.sound-panel__note { font-size: 0.74rem; line-height: 1.5; color: var(--ink-mute); }

/* Curseur de volume */
input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 28px;
  appearance: none;
  background: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(50, 19, 63, 0.16);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(50, 19, 63, 0.16);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--plum);
  border: 2px solid var(--cream);
  box-shadow: var(--shadow-xs);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--plum);
  border: 2px solid var(--cream);
}

/* -------------------------------------------------------------
   19. MODALES
   ------------------------------------------------------------- */
.modal {
  width: min(100% - 2rem, 640px);
  max-height: min(86svh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(36, 27, 37, 0.55);
  backdrop-filter: blur(4px);
}
.modal[open] { animation: modalIn 320ms var(--ease-out); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.modal__inner { position: relative; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.consent-modal {
  position: fixed;
  inset: auto max(1rem, env(safe-area-inset-right, 0px) + 1rem) max(5.25rem, env(safe-area-inset-bottom, 0px) + 5.25rem) auto;
  z-index: 120;
  width: min(360px, calc(100vw - 2rem));
  max-height: none;
  margin: 0;
  border-color: rgba(201, 154, 82, 0.28);
  border-radius: 1.15rem;
  background:
    radial-gradient(220px 130px at 100% 0%, rgba(234, 211, 164, 0.22), transparent 72%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.98), rgba(248, 241, 231, 0.94));
  box-shadow:
    0 18px 42px -28px rgba(36, 27, 37, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  overflow: hidden;
}
.consent-modal::backdrop {
  background: transparent;
  backdrop-filter: none;
}
.consent-modal__inner {
  padding: 1rem 1rem 0.95rem;
}
.consent-modal__close {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--plum);
}
.consent-modal__close:hover {
  background: rgba(50, 19, 63, 0.08);
}
.consent-modal__close:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}
.consent-modal__close svg {
  width: 16px;
  height: 16px;
}
.consent-modal__title {
  max-width: none;
  margin-bottom: 0.55rem;
  padding-right: 2rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}
.consent-modal__lead {
  max-width: none;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.consent-modal__actions .btn {
  width: 100%;
  min-height: 38px;
  padding-inline: 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
}
#serviceModal {
  width: min(100% - 2rem, 720px);
  border-color: rgba(201, 154, 82, 0.28);
  border-radius: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem);
  background:
    radial-gradient(460px 300px at 95% 0%, rgba(234, 211, 164, 0.34), transparent 70%),
    radial-gradient(360px 260px at 0% 100%, rgba(207, 194, 216, 0.22), transparent 72%),
    linear-gradient(150deg, rgba(255, 250, 243, 0.98), rgba(248, 241, 231, 0.94));
  box-shadow:
    0 40px 100px -52px rgba(36, 27, 37, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
#serviceModal .modal__inner {
  overflow: hidden;
}
#serviceModal .modal__inner::before,
#serviceModal .modal__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
#serviceModal .modal__inner::before {
  top: 1.25rem;
  right: 5rem;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid rgba(201, 154, 82, 0.22);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 12deg, rgba(201, 154, 82, 0.35) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: 0.72;
}
#serviceModal .modal__inner::after {
  right: -3rem;
  bottom: -2.5rem;
  width: 16rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 211, 164, 0.34), transparent 72%);
}
.modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(248, 241, 231, 0.7);
  color: var(--plum);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.modal__close:hover { background: rgba(234, 211, 164, 0.5); transform: rotate(90deg); }
.modal__close svg { width: 18px; height: 18px; }

.modal__title { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: 0.85rem; padding-right: 3rem; }
.modal__lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 1.5rem; }
.consent-modal .consent-modal__title {
  max-width: none;
  margin-bottom: 0.55rem;
  padding-right: 2rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}
.consent-modal .consent-modal__lead {
  max-width: none;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
#serviceModal .modal__title {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-right: 3.25rem;
  padding-bottom: 0.8rem;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
#serviceModal .modal__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7rem;
  height: 0.55rem;
  background:
    radial-gradient(circle at center, rgba(201, 154, 82, 0.95) 0 2px, transparent 2.7px) center / 0.55rem 0.55rem no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) left center / 2.6rem 1px no-repeat,
    linear-gradient(rgba(201, 154, 82, 0.7), rgba(201, 154, 82, 0.7)) right center / 2.6rem 1px no-repeat;
}
#serviceModal .modal__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem;
  padding: clamp(1rem, 0.8rem + 0.7vw, 1.35rem) clamp(1rem, 0.8rem + 1vw, 1.55rem);
  border: 1px solid rgba(201, 154, 82, 0.26);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(255, 250, 243, 0.82), rgba(248, 241, 231, 0.58)),
    radial-gradient(220px 130px at 0% 0%, rgba(234, 211, 164, 0.24), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
#serviceModal .modal__lead::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--gold-light), var(--gold));
}
.modal p + p { margin-top: 0.85rem; }
.modal__sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-light);
  margin-bottom: 0.8rem;
}
.modal__list { padding-left: 1.15rem; display: grid; gap: 0.5rem; color: var(--ink-soft); }
.modal__list li::marker { color: var(--gold); }
.modal__meta { margin-top: 1.25rem; font-size: 0.88rem; color: var(--ink-mute); }
/* Note de clôture facultative sous la liste « Déroulement ». */
.modal__note {
  margin-top: 1.1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--plum);
}
.modal__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }
.modal__disclaimer { margin-top: 1.25rem; font-size: 0.8rem; color: var(--ink-mute); }
#serviceModal .modal__sub,
#serviceModal .modal__list,
#serviceModal .modal__note,
#serviceModal .modal__meta,
#serviceModal .modal__actions,
#serviceModal .modal__disclaimer {
  position: relative;
  z-index: 1;
}
#serviceModal .modal__list {
  padding: 0;
  list-style: none;
}
#serviceModal .modal__list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.9rem;
  border-bottom: 1px solid rgba(50, 19, 63, 0.08);
}
#serviceModal .modal__list li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0.38rem rgba(201, 154, 82, 0.13);
}
#serviceModal .modal__meta {
  display: inline-flex;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(201, 154, 82, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.54);
}

/* -------------------------------------------------------------
   20. ANIMATIONS & RÉVÉLATIONS
   ------------------------------------------------------------- */
/* Les révélations ne sont masquées que si JavaScript est disponible :
   sans JS, tout le contenu reste visible immédiatement. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Décalage naturel entre éléments d'une même grille */
.cubes .reveal:nth-child(2), .prices .reveal:nth-child(2),
.contact-cubes .reveal:nth-child(2) { transition-delay: 90ms; }
.cubes .reveal:nth-child(3), .prices .reveal:nth-child(3),
.contact-cubes .reveal:nth-child(3) { transition-delay: 180ms; }
.cubes .reveal:nth-child(4), .prices .reveal:nth-child(4) { transition-delay: 270ms; }

/* Onde de curseur (grands écrans, pointeur fin uniquement) */
.cursor-ripple {
  position: fixed;
  top: 0; left: 0;
  z-index: 89;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid rgba(201, 154, 82, 0.75);
  border-radius: 50%;
  pointer-events: none;
  animation: cursorRipple 900ms var(--ease-out) forwards;
}
@keyframes cursorRipple {
  from { opacity: 0.6; transform: scale(0.4); }
  to   { opacity: 0; transform: scale(2.6); }
}

/* Particules lumineuses discrètes (générées par script.js) */
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 211, 164, 0.9), rgba(234, 211, 164, 0));
  pointer-events: none;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  from { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.5; }
  to   { transform: translate3d(24px, -140px, 0); opacity: 0; }
}

/* Animations suspendues quand l'onglet est masqué (classe posée par script.js) */
.anim-paused *,
.anim-paused *::before,
.anim-paused *::after {
  animation-play-state: paused !important;
}

/* -------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------- */

/* ≤ 1200px : hero un peu plus resserré */
@media (max-width: 1200px) {
  .logo { gap: 0.7rem; }
  .logo__mark { width: 48px; flex-basis: 48px; }
  .logo__name { font-size: 1.45rem; letter-spacing: 0.04em; }
  .logo__tagline,
  .logo__with { font-size: 0.6rem; letter-spacing: 0.14em; }
  .cubes { gap: 1rem; }
}

/* ≤ 1024px : tablettes */
/* 861-1024px : la nav est encore horizontale (le tiroir n'arrive qu'a 860px) et
   sa largeur naturelle de 575px laissait deja tres peu de mou — 19px a 880px du
   temps du logo PNG. Le logo en vrai texte mesure 233px la ou le PNG en faisait
   211, et « Mon parcours » se cassait en deux lignes.
   On resserre les ecarts de la nav plutot que de rapetisser la marque : c'est
   l'element secondaire qui cede. Les liens gardent leur padding, donc leur
   hauteur de cible tactile est inchangee. */
@media (min-width: 861px) and (max-width: 1024px) {
  .nav { gap: 1rem; }
  .nav__list { gap: 0.9rem; }
  .site-header .logo__mark { width: 44px; flex: 0 0 44px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 70px; }

  .cubes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mono { grid-template-columns: minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .portrait { position: static; max-width: 420px; }
  .atelier-gallery {
    position: static;
    max-width: 720px;
    margin-inline: auto;
    grid-template-rows: clamp(12rem, 32vw, 16rem) clamp(8.5rem, 22vw, 11rem) clamp(8.5rem, 22vw, 11rem);
  }
  /* Trois cubes cote a cote deviennent illisibles sous 1024px.
     La largeur est bridee sur la grille, pas sur les cubes : une
     marge auto sur un element de grille annule son etirement, et les
     cubes se remettaient a la taille de leur contenu, donc inegaux. */
  .contact-cubes {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin-inline: auto;
  }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 860px : menu mobile */
@media (max-width: 860px) {
  .section--booking .section__lead,
  .prices__message {
    width: auto;
    white-space: normal;
  }

  .burger { display: grid; place-items: center; }

  /* Cadre portrait : « cover » ne laisse voir qu'une bande étroite de
     l'illustration. Décalée à 60 %, cette bande tombe sur le monocorde,
     le hang drum et les bols plutôt que sur la brume centrale. */
  .hero__bg img { object-position: 60% bottom; }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
    gap: 1.35rem;
    transform: none;
  }
  .hero__visual {
    order: -1;
    width: min(520px, 90vw);
    max-width: none;
    margin-inline: auto;
  }
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 1.5rem) 2.25rem; }
  .hero__scroll { display: none; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 99;
    width: min(360px, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: calc(var(--header-h) + 1.5rem) 1.75rem 2rem;
    background: var(--cream);
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    transition: transform 420ms var(--ease-out);
    overflow-y: auto;
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__link {
    padding: 1rem 0;
    font-size: 1.05rem;
    font-family: var(--font-serif);
  }
  .nav__link::after { bottom: 0.75rem; }

  .nav__cta { margin-top: 1.25rem; }

  .sound-panel { width: auto; max-width: calc(100vw - 1.7rem); border-radius: var(--r-xl); }
  .sound-panel__toggle { min-height: 52px; padding: 0.6rem; justify-content: center; }
  .sound-panel__toggle-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sound-panel[data-open="true"] { width: min(320px, calc(100vw - 1.7rem)); }
  .sound-panel[data-open="true"] .sound-panel__toggle { justify-content: flex-start; padding-inline: 1rem; }
  .sound-panel[data-open="true"] .sound-panel__toggle-text {
    position: static !important;
    width: auto; height: auto;
    margin: 0; clip-path: none;
    white-space: normal;
  }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps__item { min-height: 52px; }
}

/* ≤ 700px : téléphones */
@media (max-width: 700px) {
  :root { --header-h: 66px; }

  .logo { gap: 0.55rem; }
  .logo__mark { width: 38px; flex-basis: 38px; }
  .logo__name { font-size: 1.12rem; letter-spacing: 0.035em; }
  .logo__tagline { display: none; }

  .hero__actions .btn { flex: 1 1 100%; }
  .hero__lead { max-width: none; }

  .cubes { grid-template-columns: minmax(0, 1fr); }
  .service-facts { grid-template-columns: minmax(0, 1fr); }
  .quotes-carousel .quote--featured blockquote p { font-size: 1.08rem; }
  .quotes-carousel__stack { min-height: 31.5rem; }
  .prices { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }

  .quiz__actions, .booking__nav { flex-direction: column-reverse; }
  .quiz__actions .btn, .booking__nav .btn { width: 100%; }
  .quiz__result-actions .btn { width: 100%; }


  .security-badge {
    min-height: 48px;
    padding: 0.5rem 0.72rem 0.5rem 0.55rem;
    border-radius: 1rem;
  }
  .security-badge__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 0.65rem;
  }
  .security-badge__icon svg {
    width: 21px;
    height: 21px;
  }
  .security-badge__copy strong { font-size: 0.78rem; }
  .security-badge__copy span { display: none; }

  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__nav ul { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Sur téléphone, le panneau se réduit à une pastille : il ne recouvre
     plus les boutons de la page. Le libellé reste lu par les lecteurs d'écran. */
  .sound-panel { width: auto; max-width: calc(100vw - 1.7rem); border-radius: var(--r-xl); }
  .sound-panel__toggle { min-height: 52px; padding: 0.6rem; justify-content: center; }
  .sound-panel__toggle-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sound-panel[data-open="true"] { width: min(320px, calc(100vw - 1.7rem)); }
  .sound-panel[data-open="true"] .sound-panel__toggle { justify-content: flex-start; padding-inline: 1rem; }
  .sound-panel[data-open="true"] .sound-panel__toggle-text {
    position: static !important;
    width: auto; height: auto;
    margin: 0; clip-path: none;
    white-space: normal;
  }
  .mono__svg { min-height: 200px; }
  .atelier-gallery {
    gap: 0.55rem;
    padding: 0.6rem;
    border-radius: 1.35rem;
    grid-template-rows: 44vw 34vw 34vw;
  }
  .atelier-gallery__item {
    border-radius: 0.95rem;
  }
  .gallery { padding-inline: 1.25rem; }
  .gallery__hint { width: calc(100% - 2.5rem); }

  /* Cibles tactiles ≥ 44 px. Les liens en liste et les liens de contact
     ne faisaient que 17-18 px de haut : difficiles à viser au pouce.
     inline-flex agrandit la zone cliquable sans décaler le texte, et
     l'écart de la liste est réduit d'autant pour ne rien allonger. */
  .footer__nav ul { gap: 0.1rem; }
  .footer__nav a,
  .footer__contact p > a,
  .contact-cube__line > .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn--tiny { min-height: 44px; }
}

/* ≤ 380px : très petits écrans */
@media (max-width: 380px) {
  .logo__name { font-size: 1.02rem; letter-spacing: 0.03em; }
  .btn { padding-inline: 1.2rem; }
  .instrument { flex-basis: min(82vw, 280px); }
  .atelier-gallery {
    gap: 0.45rem;
    padding: 0.5rem;
    grid-template-rows: 48vw 38vw 38vw;
  }
}

/* Desktop : les contrôles flottants restent au-dessus de l'aperçu des soins. */
@media (min-width: 1025px) {
  .hero__trust { transform: none; }
  .hero__scroll { bottom: calc(var(--services-overlap) + 2rem); }
  .sound-panel { bottom: calc(var(--services-overlap) + 2rem); }
}

/* Écrans larges : composition plus généreuse */
@media (min-width: 1600px) {
  .container { width: min(100% - 4rem, 1380px); }
}

/* -------------------------------------------------------------
   22. MOUVEMENT RÉDUIT / IMPRESSION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero__visual { transform: none !important; }
  .cursor-ripple, .particle { display: none !important; }
}

/* Zoom 200 % et contraste renforcé */
@media (prefers-contrast: more) {
  :root {
    --ink-soft: #332836;
    --ink-mute: #4a3d4d;
    --line: rgba(50, 19, 63, 0.3);
    --line-strong: rgba(50, 19, 63, 0.5);
  }
}

@media print {
  .site-header, .security-badge, .sound-panel, .hero__waves, .hero__scroll,
  .mono__stage, .quiz__actions, .booking__nav, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}