/* =============================================================
   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
   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;
}
.site-header .logo {
  width: clamp(13rem, 19vw, 19.5rem);
  flex: 0 0 clamp(13rem, 19vw, 19.5rem);
}
.logo__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}
.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;
}

/* 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);
}

.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 {
    --services-overlap: clamp(11.5rem, 8rem + 6vw, 13.5rem);
  }

  .section--services {
    z-index: 2;
    margin-top: calc(-1 * var(--services-overlap));
    padding-top: clamp(2.25rem, 1rem + 3vw, 3.75rem);
    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 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 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  list-style: none;
  padding: 0;
}
.quotes--carousel {
  --quote-gap: 1.35rem;
  --quote-card-w: clamp(19rem, 30vw, 25rem);
  display: block;
  max-width: min(100%, 1120px);
  margin-inline: auto;
  overflow: hidden;
  padding: 0.2rem 0.1rem 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.quotes__track {
  display: flex;
  width: max-content;
  animation: testimonialsDrift 58s linear infinite;
  will-change: transform;
}
.quotes--carousel:hover .quotes__track,
.quotes--carousel:focus-within .quotes__track {
  animation-play-state: paused;
}
.quotes__set {
  display: flex;
  align-items: stretch;
  gap: var(--quote-gap);
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0 var(--quote-gap) 0 0;
}
.quotes--carousel .quote {
  flex: 0 0 var(--quote-card-w);
  width: var(--quote-card-w);
}
@keyframes testimonialsDrift {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.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; }
.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
   ------------------------------------------------------------- */
.section--contact {
  padding-block: clamp(2.4rem, 1.45rem + 3vw, 4.25rem);
}

.contact {
  display: grid;
  grid-template-columns: minmax(19rem, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.4rem, 0.8rem + 2.4vw, 3rem);
  align-items: center;
}
.contact__intro {
  max-width: 76ch;
  justify-self: stretch;
  text-align: left;
}
.contact__intro .section__title {
  margin-bottom: 0.55rem;
}
.contact__intro .section__lead {
  margin-inline: 0;
  max-width: 62ch;
  font-size: clamp(1.04rem, 0.98rem + 0.28vw, 1.18rem);
  line-height: 1.55;
}

.contact__card {
  justify-self: stretch;
  padding: clamp(1.55rem, 1rem + 1.8vw, 2.35rem);
  border: 1px solid rgba(201, 154, 82, 0.24);
  border-radius: clamp(1.25rem, 1rem + 0.9vw, 1.85rem);
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(207, 194, 216, 0.32), transparent 72%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.94), rgba(248, 241, 231, 0.7));
  box-shadow:
    0 24px 56px -42px rgba(36, 27, 37, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-style: normal;
}
.contact__name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--plum);
}
/* Casse d'origine conservée : le nom ThérÂme ne se met jamais
   entièrement en capitales (voir .logo__name). */
.contact__brand {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.55rem + 1.1vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--plum);
  margin-bottom: 0.9rem;
}
.contact__accent { color: var(--gold); }
.contact__addr { color: var(--ink-soft); margin-bottom: 0.95rem; }
.contact__line { margin-bottom: 0.35rem; }
.contact__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  max-width: 27rem;
  margin-top: 1.35rem;
}
.contact__actions .btn {
  width: 100%;
  min-height: 48px;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.contact__quote {
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  padding-top: clamp(1.05rem, 0.75rem + 1vw, 1.6rem);
  border-top: 1px solid rgba(201, 154, 82, 0.24);
}
.contact__quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 0.65;
  color: rgba(201, 154, 82, 0.95);
  margin-bottom: 0.35rem;
}
.contact__quote blockquote {
  margin: 0;
}
.contact__quote p {
  max-width: 58ch;
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.24rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--plum);
}
.contact__quote figcaption {
  margin-top: 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* -------------------------------------------------------------
   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); }

.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; }

/* -------------------------------------------------------------
   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), .quotes .reveal:nth-child(2), .prices .reveal:nth-child(2) { transition-delay: 90ms; }
.cubes .reveal:nth-child(3), .quotes .reveal:nth-child(3), .prices .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; }
  .site-header .logo { width: clamp(12rem, 24vw, 17.5rem); flex-basis: clamp(12rem, 24vw, 17.5rem); }
  .logo__image { max-height: 58px; }
  .logo__mark { width: 48px; flex-basis: 48px; }
  .logo__name { font-size: 1.45rem; letter-spacing: 0.04em; }
  .logo__tagline { font-size: 0.6rem; letter-spacing: 0.14em; }
  .cubes { gap: 1rem; }
}

/* ≤ 1024px : tablettes */
@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)); }
  .quotes { grid-template-columns: 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);
  }
  .contact { grid-template-columns: minmax(0, 1fr); }

  .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;
  }
  .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; }
  .site-header .logo { width: clamp(10.5rem, 50vw, 14.75rem); flex-basis: clamp(10.5rem, 50vw, 14.75rem); }
  .logo__image { max-height: 50px; }
  .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-card-w: min(20rem, 82vw); }
  .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%; }

  .contact__actions { grid-template-columns: minmax(0, 1fr); }
  .contact__actions .btn { flex: 1 1 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__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) {
  .site-header .logo { width: 9.75rem; flex-basis: 9.75rem; }
  .logo__image { max-height: 44px; }
  .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; }
  .quotes__track { animation: none; transform: none; }
  .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; }
}