/* ==========================================================================
   La Maison des Poux — feuille de style
   Direction artistique : institut premium — ivoire, champagne, beige sable,
   verre dépoli, voiles de satin doré et fils de lumière, terracotta en
   accent d'action unique, typographie éditoriale (Cormorant Garamond / Jost).
   ========================================================================== */

:root {
  /* Couleurs de base */
  --color-ivory: #f8f5ef;
  --color-champagne: #e9d7bd;
  --color-sand: #cbb79d;
  --color-ink: #2a211d;
  --color-ink-soft: #6b5c4d;
  --color-terracotta: #b86f55;
  --color-terracotta-dark: #935842;
  --color-gold: #c9a66b;
  --color-gold-dark: #86601b;
  --color-gold-tint: #f2e4cc;
  --color-border: #e6dac2;
  --color-espresso: #3b2c22;
  --color-espresso-2: #2e2118;
  --color-warning-bg: #f6ecdb;
  --color-warning-text: #7a5a2a;

  /* Verre — 3 niveaux de hiérarchie */
  --glass-strong: linear-gradient(160deg, rgba(255, 253, 248, 0.88), rgba(255, 250, 240, 0.68));
  --glass-card: linear-gradient(160deg, rgba(255, 253, 248, 0.8), rgba(255, 250, 240, 0.52));
  --glass-subtle: linear-gradient(160deg, rgba(255, 253, 248, 0.94), rgba(255, 250, 240, 0.86));
  --glass-border: rgba(255, 255, 255, 0.6);
  --glow-gold: 0 0 0 1px rgba(201, 166, 107, 0.35), 0 18px 40px rgba(201, 166, 107, 0.2);
  --glow-terracotta: 0 10px 26px rgba(184, 111, 85, 0.3);

  /* Motif décoratif — faisceau de fils dorés satinés, en SVG inline (aucune image externe) */
  --line-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800'%3E%3Cg fill='none' stroke='%23c9a66b' stroke-width='1'%3E%3Cpath d='M -50 650 C 150 500 300 750 650 480' opacity='0.12'/%3E%3Cpath d='M -50 642 C 150 492 300 742 650 472' opacity='0.2'/%3E%3Cpath d='M -50 634 C 150 484 300 734 650 464' opacity='0.3'/%3E%3Cpath d='M -50 626 C 150 476 300 726 650 456' opacity='0.42'/%3E%3Cpath d='M -50 618 C 150 468 300 718 650 448' opacity='0.52'/%3E%3Cpath d='M -50 610 C 150 460 300 710 650 440' opacity='0.58'/%3E%3Cpath d='M -50 602 C 150 452 300 702 650 432' opacity='0.52'/%3E%3Cpath d='M -50 594 C 150 444 300 694 650 424' opacity='0.42'/%3E%3Cpath d='M -50 586 C 150 436 300 686 650 416' opacity='0.3'/%3E%3Cpath d='M -50 578 C 150 428 300 678 650 408' opacity='0.2'/%3E%3Cpath d='M -50 570 C 150 420 300 670 650 400' opacity='0.12'/%3E%3Cpath d='M -50 560 C 150 410 300 660 650 390' opacity='0.07'/%3E%3Cpath d='M -50 550 C 150 400 300 650 650 380' opacity='0.05'/%3E%3Cpath d='M -50 538 C 150 388 300 638 650 368' opacity='0.03'/%3E%3C/g%3E%3C/svg%3E");

  /* Typo */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  /* Layout */
  --container-width: 1120px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --shadow-card: 0 8px 24px rgba(42, 33, 29, 0.06);
  --shadow-card-hover: 0 16px 34px rgba(42, 33, 29, 0.1);
  --header-height: 80px;
}

/* Reset léger */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  line-height: 1.65;
  overflow-x: hidden;
  background:
    radial-gradient(1000px 560px at 14% -6%, rgba(233, 215, 189, 0.55), transparent 62%),
    radial-gradient(820px 620px at 92% 8%, rgba(203, 183, 157, 0.4), transparent 62%),
    radial-gradient(900px 700px at 50% 110%, rgba(111, 131, 98, 0.12), transparent 65%),
    linear-gradient(165deg, #fbf8f3 0%, #f3e9d6 45%, #f8f4ea 100%);
}

/* TEST — fond photo étendu à tout le site, fixe derrière les sections translucides */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(248, 244, 234, 0.6);
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.94rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(135deg, #a3604a, #8f533e 60%, #78432f);
  color: #fffaf5;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, var(--glow-terracotta);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #98583f, #844a35 60%, #6c3a29);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 16px 34px rgba(184, 111, 85, 0.4);
}

.btn-secondary {
  background: rgba(255, 253, 248, 0.5);
  border-color: rgba(201, 166, 107, 0.6);
  color: #74531a;
}

.btn-secondary:hover {
  background: var(--color-gold-tint);
  transform: translateY(-2px);
}

.btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 9px;
  flex-shrink: 0;
}

/* Texte "placeholder" — visible et assumé */
.placeholder-inline {
  font-style: italic;
  color: var(--color-terracotta-dark);
  border-bottom: 1px dashed var(--color-terracotta);
  padding-bottom: 1px;
}

/* Révélation au scroll — n'affecte l'affichage que si le JS a pu s'exécuter */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Effet miroitant sur le bouton principal du hero */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn-shine:hover::after {
  left: 130%;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: height 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  height: 64px;
  box-shadow: 0 6px 20px rgba(42, 33, 29, 0.06);
}

.site-header.is-scrolled .logo-img {
  width: 40px;
  height: 40px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-gold-tint), 0 4px 10px rgba(42, 33, 29, 0.12);
  transition: width 0.25s ease, height 0.25s ease;
}

.logo-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.05;
  color: var(--color-ink);
}

/* « by Chaînez » : signature en italique or, comme sur la fiche tarifs */
.logo-by {
  font-style: italic;
  font-weight: 600;
  font-size: 0.72em;
  letter-spacing: 0.01em;
  color: var(--color-gold-dark);
  margin-top: 2px;
}

.footer-name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-name .logo-by {
  color: #d9b980;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 200;
}

.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  margin: 0 auto;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav ul {
  display: flex;
  gap: 18px;
}

.nav-link {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-ink);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--color-terracotta);
  border-radius: 2px;
}

.nav-cta {
  padding: 10px 22px;
  font-size: 0.86rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  padding: 88px 0 90px;
  overflow: hidden;
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-color: #f3e9d6;
}

.hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Voile clair côté gauche pour garder le texte lisible sur la photo */
.hero-readability {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 253, 248, 0.55) 0%, rgba(255, 253, 248, 0.22) 38%, transparent 62%);
}

/* Fondu en bas pour raccorder la photo au dégradé du reste du site */
.hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 160px;
  background: linear-gradient(to bottom, transparent, #f8f4ea);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
}

.hero-content {
  text-align: left;
}

.eyebrow {
  color: var(--color-terracotta-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  color: var(--color-ink-soft);
  font-size: 1.08rem;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hero-panel {
  position: relative;
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-panel {
    animation: panelFloat 9s ease-in-out infinite;
  }
}

@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-badge {
  position: relative;
  width: clamp(180px, 22vw, 300px);
  height: clamp(180px, 22vw, 300px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 253, 248, 0.9), 0 0 0 4px rgba(201, 166, 107, 0.55), 0 18px 40px rgba(42, 33, 29, 0.2);
}

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

/* ==========================================================================
   Bandeau de confiance
   ========================================================================== */

.trust-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--color-terracotta-dark), #6e3a28);
  padding: 44px 0;
  box-shadow: 0 30px 60px -36px rgba(42, 33, 29, 0.4);
}

.trust-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--line-art);
  background-repeat: no-repeat;
  background-position: 100% -10%;
  background-size: 560px 720px;
  opacity: 0.4;
}

.trust-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}

.trust-item {
  color: #e6ddc8;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 16px;
  box-shadow: 0 8px 18px rgba(46, 33, 24, 0.35), 0 0 0 3px rgba(255, 253, 248, 0.15);
}

.trust-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.trust-item h3 {
  font-size: 1.05rem;
  color: #fffaf0;
  margin-bottom: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.trust-item p {
  font-size: 0.87rem;
  color: #f5ebde;
  margin-bottom: 0;
}

/* ==========================================================================
   Sections génériques
   ========================================================================== */

.section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

.section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 166, 107, 0.4), transparent);
}

.section > .container {
  position: relative;
  z-index: 2;
}

/* Décor de section — silhouette satinée + fines lignes dorées, propres à chaque section
   mais tirées du même vocabulaire visuel (halos flous + tracé de lignes) pour rester cohérentes. */
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

.services::after {
  background-image:
    var(--line-art),
    radial-gradient(560px 420px at 8% 100%, rgba(233, 215, 189, 0.55), transparent 70%);
  background-position: 105% -10%, 0% 100%;
  background-size: 480px 640px, auto;
  opacity: 0.85;
}

.treatment::after {
  background-image:
    radial-gradient(620px 480px at 100% 15%, rgba(201, 166, 107, 0.3), transparent 68%),
    var(--line-art);
  background-position: 100% 0%, -8% 105%;
  background-size: auto, 420px 560px;
  transform: scaleX(-1);
  opacity: 0.7;
}

.pricing::after {
  background-image:
    radial-gradient(560px 460px at 4% 0%, rgba(233, 215, 189, 0.5), transparent 68%),
    radial-gradient(480px 400px at 100% 100%, rgba(201, 166, 107, 0.24), transparent 70%);
  opacity: 0.9;
}

.faq::after {
  background-image: radial-gradient(600px 460px at 96% 40%, rgba(233, 215, 189, 0.4), transparent 70%);
  opacity: 0.8;
}

.contact::after {
  background-image:
    var(--line-art),
    radial-gradient(560px 460px at 50% -10%, rgba(233, 215, 189, 0.45), transparent 70%);
  background-position: 50% 100%, 50% 0%;
  background-size: 520px 640px, auto;
  transform: scaleY(-1);
  opacity: 0.7;
}

.services {
  background: rgba(255, 253, 248, 0.62);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

/* Système de titres — un seul rôle par niveau, partout sur le site :
   - titre de section (h2) : Cormorant 600, encre, un mot d'accent en italique or,
     puis l'ornement « fil doré » (le même fil que dans Notre histoire) ;
   - titre de bloc (h3 large) : chapitres de l'histoire, blocs tarifs ;
   - titre de carte (h3) : cartes services, tarifs, étapes de la méthode. */
:root {
  --title-section: clamp(2.1rem, 4.2vw, 3.1rem);
  --title-block: clamp(1.45rem, 2.3vw, 1.75rem);
  --title-card: 1.3rem;
}

.section-title {
  font-size: var(--title-section);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-align: center;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}

.section-title em,
.hero h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-gold-dark);
  padding-right: 0.04em;
}

.title-ornament {
  position: relative;
  display: block;
  width: 132px;
  height: 14px;
  margin: 18px auto 22px;
}

.title-ornament::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold) 30%, var(--color-gold) 70%, transparent);
}

.title-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--color-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 252, 245, 0.85);
}

.card h3,
.step-body h3 {
  font-size: var(--title-card);
}

.pricing-extra h3,
.pricing-family h3,
.story-chapter-title {
  font-size: var(--title-block);
  line-height: 1.15;
  color: var(--color-ink);
}

.eyebrow-center {
  text-align: center;
}

.section-lead {
  text-align: center;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin: 0 auto 52px;
}

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.card {
  background: var(--glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Cartes "Services" uniquement : icône + texte centrés (les cartes produits/tarifs
   gardent leur propre alignement, défini plus bas). */
.services .card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-gold), var(--shadow-card-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(201, 166, 107, 0.5);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  transition: transform 0.15s ease;
}

.card:hover .card-icon {
  transform: scale(1.06);
}

/* Illustrations non carrées : hauteur fixe (alignée sur les médaillons du bandeau
   du dessus), largeur libre selon le format propre à chaque image — rien n'est
   recadré ni étiré. */
.card-icon img {
  height: 96px;
  width: auto;
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(42, 33, 29, 0.18);
}

.card h3 {
  color: var(--color-ink);
}

.card p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Méthode
   ========================================================================== */

.treatment {
  background: rgba(232, 211, 176, 0.58);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

/* Parcours vertical alterné (photo/texte qui changent de côté à chaque étape),
   relié par un fil doré central — volontairement vertical pour casser le rythme
   horizontal des sections voisines (bandeau, Services), qui alignent déjà 4
   éléments en rangée. */
.steps-flow {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.steps-flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(var(--color-gold), var(--color-border) 90%);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

.step:nth-child(even) .step-visual {
  order: 2;
}

.step:nth-child(even) .step-body {
  text-align: right;
}

.step:nth-child(odd) .step-body {
  text-align: left;
}

.step-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.step:nth-child(even) .step-visual {
  justify-content: center;
}

.step-visual img {
  display: block;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(42, 33, 29, 0.22);
}

.step-body h3 {
  margin-bottom: 8px;
}

.step-body p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Après la séance — recommandations et garantie 10 jours.
   La frise s'allume comme un tube LED (même matière que le fil de Notre
   histoire) du jour de la séance jusqu'à la fin de la garantie ; chaque
   repère s'éclaire au passage de la lumière.
   ========================================================================== */

.aftercare {
  max-width: 1000px;
  margin: 80px auto 0;
}

.aftercare-sub,
.aftercare-tip h4,
.aftercare-call,
.aftercare-closing {
  font-variant-numeric: lining-nums;
}

.aftercare-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
}

.aftercare-title {
  font-size: var(--title-block);
  color: var(--color-ink);
  margin-bottom: 4px;
  text-wrap: balance;
}

.aftercare-sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  color: var(--color-gold-dark);
  margin-bottom: 14px;
}

.aftercare-intro {
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  margin: 0;
  text-wrap: pretty;
}

/* --- Frise de la garantie --- */
.guarantee {
  --fill-duration: 2.2s;
  --fill-delay: 0.35s;
  --pad-y: 34px;
  --pad-x: 64px;
  position: relative;
  max-width: 860px;
  margin: 40px auto 40px;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) - 6px);
  border-radius: var(--radius-lg);
}

.guarantee-days {
  position: relative;
  z-index: 1;
  height: 92px;
}

.guarantee-days li {
  position: absolute;
  top: 0;
  left: calc(var(--at) * 100%);
  width: 130px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.guarantee-day {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  height: 30px;
  color: var(--color-ink);
  font-variant-numeric: lining-nums;
}

.guarantee-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fffaf2;
  border: 1.5px solid rgba(201, 166, 107, 0.7);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.5s ease, transform 0.5s var(--ease-out-strong);
  transition-delay: calc(var(--fill-delay) + var(--at-anim, var(--at)) * var(--fill-duration));
}

.guarantee-label {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--color-ink-soft);
}

.guarantee-label sup {
  font-size: 0.7em;
}

.guarantee-track {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  top: calc(var(--pad-y) + 37px);
  height: 2px;
  border-radius: 2px;
  background: rgba(201, 166, 107, 0.28);
}

.guarantee-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff6e4;
  box-shadow:
    0 0 0 1px rgba(234, 162, 82, 0.85),
    0 0 8px 2px rgba(242, 170, 90, 0.55),
    0 0 20px 5px rgba(240, 160, 80, 0.22);
  transform-origin: left center;
  transition: transform var(--fill-duration) linear var(--fill-delay);
}

.js .guarantee-fill {
  transform: scaleX(0);
}

.js .guarantee.in-view .guarantee-fill {
  transform: scaleX(1);
}

.guarantee.in-view .guarantee-dot {
  background: radial-gradient(circle at 35% 35%, #fff4dc, #f3c27a 60%, #d98f4f);
  border-color: rgba(234, 162, 82, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 250, 240, 0.9), 0 0 12px 3px rgba(242, 170, 90, 0.55);
  transform: scale(1.1);
}

/* Le dernier repère (fin de garantie) brille un peu plus fort */
.guarantee.in-view .guarantee-days li:last-child .guarantee-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(255, 250, 240, 0.9), 0 0 18px 5px rgba(242, 170, 90, 0.6);
}

/* --- Conseils --- */
.aftercare-tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.aftercare-tip {
  padding: 30px 30px 28px;
  border-radius: var(--radius-lg);
}

.js .aftercare-tip.reveal {
  transition-delay: calc(var(--n, 0) * 90ms);
}

.aftercare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
}

.aftercare-icon svg {
  width: 21px;
  height: 21px;
}

.aftercare-tip h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--title-card);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 8px;
}

.aftercare-tip p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin: 0;
  text-wrap: pretty;
}

.care-products {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.care-products li {
  position: relative;
  padding-left: 20px;
  display: grid;
  gap: 2px;
}

.care-products li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--color-gold);
  transform: rotate(45deg);
}

.care-product-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--color-ink);
}

.care-product-use {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.aftercare-call {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-terracotta-dark);
  text-decoration: underline;
  text-decoration-color: rgba(147, 88, 66, 0.35);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}

.aftercare-call:hover {
  text-decoration-color: currentColor;
}

.aftercare-call:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 4px;
  border-radius: 4px;
}

.aftercare-closing {
  position: relative;
  margin: 44px auto 0;
  padding-top: 30px;
  max-width: 44ch;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  line-height: 1.35;
  color: var(--color-ink);
  text-wrap: balance;
}

.aftercare-closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 132px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--color-gold) 30%, var(--color-gold) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .guarantee-fill,
  .guarantee-dot {
    transition: none;
  }

  .js .guarantee .guarantee-fill,
  .js .guarantee.in-view .guarantee-fill {
    transform: none;
  }
}

/* Frise verticale sur mobile : les repères J+5 et J+7 seraient trop serrés à l'horizontale */
@media (max-width: 640px) {
  .aftercare {
    margin-top: 56px;
  }

  .guarantee {
    --pad-y: 26px;
    --pad-x: 22px;
    max-width: 360px;
    margin: 28px auto 28px;
    padding: var(--pad-y) var(--pad-x);
  }

  .aftercare-tip {
    padding: 26px 22px 24px;
  }

  .guarantee-days {
    height: auto;
    display: grid;
    gap: 20px;
  }

  .guarantee-days li {
    position: static;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: 52px 16px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
  }

  .guarantee-days li:nth-child(2) { --at-anim: 0.3333; }
  .guarantee-days li:nth-child(3) { --at-anim: 0.6667; }

  .guarantee-day {
    height: auto;
    text-align: right;
  }

  .guarantee-label {
    margin-top: 0;
  }

  .guarantee-track {
    left: calc(var(--pad-x) + 75px);
    right: auto;
    top: calc(var(--pad-y) + 12px);
    bottom: calc(var(--pad-y) + 12px);
    width: 2px;
    height: auto;
  }

  .guarantee-fill {
    transform-origin: center top;
  }

  .js .guarantee-fill {
    transform: scaleY(0);
  }

  .js .guarantee.in-view .guarantee-fill {
    transform: scaleY(1);
  }

  .aftercare-tips {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   Tarifs — panneau plus sobre, priorité à la lisibilité des prix
   ========================================================================== */

.pricing {
  background: rgba(232, 211, 176, 0.58);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

.pricing-grid {
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  position: relative;
  background: var(--glass-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color: var(--glass-border);
}

.price-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold-tint);
  color: var(--color-gold-dark);
}

.price-icon svg {
  width: 20px;
  height: 20px;
}

.price {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 4px 0;
  color: var(--color-ink);
}

.price-list {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.price-list li::before {
  content: "— ";
  color: var(--color-gold);
}

/* Tableau des prestations complémentaires (diagnostic, majorations, soins) */
.pricing-extra {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 36px 40px;
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.pricing-extra h3 {
  margin-bottom: 18px;
  text-align: center;
}

.price-table {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.price-table li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  font-size: 0.94rem;
}

.price-table-amount {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-terracotta-dark);
  white-space: nowrap;
}

.pricing-note {
  margin: 18px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  text-align: center;
  font-style: italic;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  background: rgba(255, 253, 248, 0.62);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

.accordion {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(42, 33, 29, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.accordion-item:has(.accordion-trigger[aria-expanded="true"]) {
  box-shadow: var(--glow-gold);
  border-color: rgba(201, 166, 107, 0.5);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
}

.accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-gold-dark);
  transition: transform 0.25s ease;
}

.accordion-icon::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.accordion-icon::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.accordion-panel > p {
  overflow: hidden;
  margin: 0;
  padding: 0 24px;
  color: var(--color-ink-soft);
  font-size: 0.94rem;
}

.accordion-trigger[aria-expanded="true"] + .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-trigger[aria-expanded="true"] + .accordion-panel > p {
  padding-bottom: 20px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  background: rgba(248, 240, 222, 0.68);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

.call-panel {
  max-width: 560px;
  margin: 0 auto 48px;
  text-align: center;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.call-panel-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c98267, var(--color-terracotta));
  color: #fff8f2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-terracotta);
}

.call-panel-icon svg {
  width: 24px;
  height: 24px;
}

.call-panel-label {
  color: var(--color-gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.call-panel-number {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom-color: var(--color-terracotta);
}

.call-panel-hint {
  margin: 12px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.88rem;
}

.contact-list-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.contact-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  margin-bottom: 5px;
}

.contact-map {
  max-width: 760px;
  margin: 40px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--glass-border);
}

/* Avant accord : un encart qui explique et propose d'afficher la carte */
.map-consent {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 28px;
  text-align: center;
  background:
    radial-gradient(420px 260px at 50% 0%, rgba(233, 215, 189, 0.55), transparent 70%),
    var(--glass-subtle);
}

.map-consent-title {
  font-size: var(--title-card);
  margin: 0;
}

.map-consent-address {
  margin: 0 0 6px;
  color: var(--color-ink);
}

.map-consent-note {
  max-width: 52ch;
  margin: 0 0 14px;
  font-size: 0.84rem;
  color: var(--color-ink-soft);
}

.map-consent-note a,
.map-open {
  color: var(--color-terracotta-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
}

.map-open {
  font-size: 0.9rem;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  filter: sepia(8%) saturate(85%);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--color-espresso), var(--color-espresso-2));
  color: #ded4c2;
  padding: 44px 0 30px;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--line-art);
  background-repeat: no-repeat;
  background-position: 0% 110%;
  background-size: 520px 640px;
  transform: scaleY(-1);
  opacity: 0.32;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fbf6ee;
}

.footer-address {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.82rem;
  color: #c9bda3;
}

.footer-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: #c9bda3;
  font-size: 0.88rem;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-legal {
  width: 100%;
  text-align: center;
  color: #bcae95;
  font-size: 0.78rem;
  margin: 14px 0 0;
}

.footer-legal p {
  margin: 8px 0 0;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}

.footer-legal-links a {
  color: #e2d6bf;
  text-decoration: underline;
  text-decoration-color: rgba(226, 214, 191, 0.4);
  text-underline-offset: 3px;
}

.footer-legal-links a:hover {
  color: #fff;
}

.footer-nav a:focus-visible,
.footer-legal-links a:focus-visible,
.nav-link:focus-visible,
.logo-link:focus-visible,
.map-open:focus-visible,
.map-consent-note a:focus-visible,
.accordion-trigger:focus-visible,
.call-fab:focus-visible,
.call-panel-number:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Bouton d'appel flottant (mobile uniquement)
   ========================================================================== */

.call-fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c98267, var(--color-terracotta));
  color: #fff8f2;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(184, 111, 85, 0.45);
  z-index: 150;
}

.call-fab svg {
  width: 22px;
  height: 22px;
}

.call-fab:active {
  transform: scale(0.95);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-content {
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-panel {
    max-width: 380px;
    margin: 0 auto;
  }

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

@media (max-width: 768px) {
  .burger {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 26%;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    background: var(--color-ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -10px 0 30px rgba(42, 33, 29, 0.1);
    overflow-y: auto;
  }

  .nav.open {
    transform: translateX(0);
  }

  .nav ul {
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  .nav-link {
    font-size: 1.05rem;
  }

  .nav-cta {
    width: 100%;
    text-align: center;
  }

  .call-fab {
    display: flex;
  }

  .section {
    padding: 56px 0;
  }

  .hero {
    padding: 48px 0 40px;
    background-position: 65% center;
  }

  .hero-bottom-fade {
    height: 100px;
  }

  .logo-img {
    width: 42px;
    height: 42px;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .accordion-trigger {
    padding: 16px 18px;
    font-size: 0.95rem;
  }

  .steps-flow {
    gap: 40px;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .step-visual,
  .step:nth-child(even) .step-visual {
    order: 0;
  }

  .step:nth-child(odd) .step-body,
  .step:nth-child(even) .step-body {
    text-align: center;
  }

  .step-visual img {
    width: 180px;
    height: 180px;
  }

  .call-panel {
    padding: 34px 22px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 18px;
  }

  .steps-flow {
    gap: 36px;
  }

  .btn {
    padding: 13px 22px;
    font-size: 0.9rem;
  }

  .call-panel-number {
    word-break: break-word;
  }

  .card {
    padding: 26px 22px;
  }

  .logo-text {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Notre histoire — un fil doré transmis d'une génération à l'autre.
   Le fil est tracé en JS d'après la mise en page réelle : il descend le long
   du premier chapitre, traverse la page jusqu'à la braise (le flambeau),
   redescend le long du second chapitre et se termine sur la citation.
   Sa pointe suit la ligne de lecture du visiteur.
   ========================================================================== */

:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --story-rail: 200px;
  --story-gap: 48px;
}

.story {
  background: rgba(255, 252, 245, 0.74);
  box-shadow: 0 30px 60px -42px rgba(42, 33, 29, 0.22);
}

.story::after {
  background-image:
    radial-gradient(640px 520px at 0% 30%, rgba(233, 215, 189, 0.5), transparent 70%),
    radial-gradient(520px 460px at 100% 85%, rgba(201, 166, 107, 0.2), transparent 70%);
  opacity: 0.9;
}

.story-weave {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

.story-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.story-thread path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-thread-ghost {
  stroke: rgba(201, 166, 107, 0.24);
  stroke-width: 1;
}

/* Le fil allumé : un tube LED chaud (halo, lueur, bord ambré, cœur presque blanc) */
.story-thread-bloom {
  stroke: rgba(240, 160, 80, 0.13);
  stroke-width: 22;
}

.story-thread-glow {
  stroke: rgba(242, 170, 90, 0.28);
  stroke-width: 10;
}

.story-thread-edge {
  stroke: rgba(234, 162, 82, 0.8);
  stroke-width: 3.4;
}

.story-thread-core {
  stroke: #fffaf0;
  stroke-width: 1.5;
}

.story-thread-head {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.story-weave.is-drawing .story-thread-head {
  opacity: 1;
}

.story-thread-tip {
  fill: #fffbf2;
}

.story-chapter {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--story-gap);
}

.story-chapter--first {
  grid-template-columns: minmax(0, 1fr) var(--story-rail);
}

.story-chapter--second {
  grid-template-columns: var(--story-rail) minmax(0, 1fr);
}

.story-chapter--first .story-text {
  justify-self: end;
}

.story-text {
  max-width: 62ch;
}

.story-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 56px;
}

.story-head .title-ornament {
  margin-bottom: 0;
}

/* L'ornement d'où part le fil : le losange devient une petite source lumineuse */
.story-origin::after {
  background: #f3c27a;
  box-shadow: 0 0 0 3px rgba(255, 252, 245, 0.9), 0 0 10px 2px rgba(240, 170, 90, 0.55);
}

.story-chapter-title {
  margin-bottom: 0.6em;
}

.story-text p {
  color: var(--color-ink-soft);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.15em;
  text-wrap: pretty;
}

.story-text p:last-child {
  margin-bottom: 0;
}

.story-text .story-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.45rem);
  font-weight: 500;
  line-height: 1.4;
  color: #4a3d33;
  text-wrap: balance;
}

.story-text strong {
  font-weight: 500;
  color: var(--color-ink);
}

/* Le passage de relais : une braise qui s'allume quand le fil la traverse */
.story-bridge {
  position: relative;
  z-index: 1;
  height: 140px;
}

.story-ember {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe7c2, var(--color-gold) 60%, var(--color-terracotta));
  box-shadow: 0 0 0 4px rgba(255, 252, 245, 0.9), 0 0 0 5px rgba(201, 166, 107, 0.35);
  transform: scale(0.7);
  opacity: 0.55;
  transition: transform 0.6s var(--ease-out-strong), opacity 0.4s ease, box-shadow 0.6s ease;
}

.story-ember::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 180, 110, 0.55), rgba(184, 111, 85, 0.18) 45%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-out-strong);
}

.story-ember.is-lit {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255, 252, 245, 0.9), 0 0 0 5px rgba(201, 166, 107, 0.6), 0 6px 18px rgba(184, 111, 85, 0.35);
}

.story-ember.is-lit::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .story-weave.is-visible .story-ember.is-lit::after {
    animation: emberBreath 3.6s ease-in-out 0.9s infinite;
  }
}

@keyframes emberBreath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.86); }
}

/* Final : une enseigne lumineuse. Le fil vient s'y brancher, puis la citation
   s'allume mot à mot comme un néon LED chaud, avec un petit scintillement. */
.story-finale {
  --neon-off: rgba(255, 232, 205, 0.11);
  --neon-on: #fff2de;
  --neon-glow:
    0 0 1px #fff8ec,
    0 0 4px rgba(255, 214, 150, 0.95),
    0 0 11px rgba(250, 176, 96, 0.75),
    0 0 24px rgba(236, 140, 70, 0.5),
    0 0 46px rgba(220, 120, 60, 0.3);
  --neon-glow-dim:
    0 0 2px rgba(255, 214, 150, 0.6),
    0 0 10px rgba(236, 140, 70, 0.3);

  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: 820px;
  margin: 110px auto 0;
  padding: 58px 56px 44px;
  text-align: center;
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 140% at 50% 0%, #47352a 0%, #2e2118 58%, #251a13 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.08),
    inset 0 0 0 1px rgba(201, 166, 107, 0.22),
    0 30px 60px -30px rgba(42, 33, 29, 0.55);
  transition: box-shadow 0.35s ease;
}

/* Lumière chaude qui se diffuse sur la plaque une fois l'enseigne allumée */
.story-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 45%, rgba(245, 168, 88, 0.26), transparent 72%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Le point de branchement du fil, en haut de l'enseigne */
.story-finale::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe7c2, var(--color-gold) 65%, #9a7434);
  box-shadow: 0 0 0 3px rgba(255, 252, 245, 0.9);
  transition: box-shadow 0.6s ease;
}

.story-finale.is-revealed {
  transition: box-shadow 1.4s ease 0.5s;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.1),
    inset 0 0 0 1px rgba(232, 180, 110, 0.38),
    0 30px 60px -30px rgba(42, 33, 29, 0.55),
    0 0 80px -12px rgba(240, 165, 85, 0.5);
}

.story-finale.is-revealed::before {
  opacity: 1;
  transition: opacity 1.4s ease 0.6s;
}

.story-finale.is-revealed::after {
  box-shadow: 0 0 0 3px rgba(255, 252, 245, 0.9), 0 0 14px 3px rgba(245, 175, 95, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
  .story-weave.is-visible .story-finale.is-revealed::before {
    animation: neonBreath 4.2s ease-in-out 2.4s infinite;
  }
}

@keyframes neonBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.68; }
}

.story-quote {
  margin: 0;
}

.story-quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.3;
  color: var(--neon-on);
  text-shadow: var(--neon-glow);
  margin: 0;
  padding-bottom: 0.1em;
  text-wrap: balance;
}

.story-signature {
  margin-top: 24px;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: rgba(240, 222, 196, 0.78);
  transition: opacity 0.3s ease;
}

.story-finale.is-revealed .story-signature {
  transition: opacity 0.8s ease 1.6s;
}

.story-word {
  display: inline-block;
}

/* Avant l'arrivée du fil : les tubes sont éteints mais devinables */
.story-weave.is-enhanced .story-finale:not(.is-revealed) .story-word {
  color: var(--neon-off);
  text-shadow: none;
}

.story-weave.is-enhanced .story-finale:not(.is-revealed) .story-signature {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .story-weave.is-enhanced .story-finale.is-revealed .story-word {
    animation: neonOn 1s linear both;
    animation-delay: calc(var(--i, 0) * 65ms);
  }
}

/* Mise sous tension : deux scintillements, une baisse, puis lumière stable */
@keyframes neonOn {
  0% { color: var(--neon-off); text-shadow: none; }
  8% { color: var(--neon-on); text-shadow: var(--neon-glow); }
  12% { color: var(--neon-off); text-shadow: none; }
  20% { color: var(--neon-on); text-shadow: var(--neon-glow); }
  24% { color: rgba(255, 232, 205, 0.55); text-shadow: var(--neon-glow-dim); }
  36%, 100% { color: var(--neon-on); text-shadow: var(--neon-glow); }
}

/* Paragraphes : les souvenirs se précisent (flou -> net) */
.js .reveal.reveal-memory {
  filter: blur(6px);
  transform: translateY(10px);
  transition:
    opacity 0.9s var(--ease-out-strong),
    transform 0.9s var(--ease-out-strong),
    filter 0.9s var(--ease-out-strong);
}

.js .reveal.reveal-memory.in-view {
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal.reveal-memory {
    filter: none;
    transform: none;
    transition: none;
  }

  .story-finale,
  .story-finale::before,
  .story-signature,
  .story-finale.is-revealed,
  .story-finale.is-revealed::before,
  .story-finale.is-revealed .story-signature,
  .story-ember,
  .story-ember::after {
    transition: none;
  }
}

/* ==========================================================================
   Tarifs — compléments de la fiche tarifs
   ========================================================================== */

.price-card h3 {
  margin-bottom: 0;
}

.price-detail {
  margin: -6px 0 0;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}

.price-from {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  margin-right: 2px;
}

.price-table-amount {
  font-size: 1.12rem;
}

.price-card .btn {
  margin-top: auto;
  white-space: nowrap;
}

/* Les cartes d'une même rangée partagent leurs lignes : titres, prix, listes et
   boutons restent alignés même si un titre passe sur deux lignes. */
@supports (grid-template-rows: subgrid) {
  .pricing-grid .price-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: 12px;
  }

  .price-card > .price-icon { grid-row: 1; }
  .price-card > h3 { grid-row: 2; }
  .price-card > .price-detail { grid-row: 3; }
  .price-card > .price { grid-row: 4; }
  .price-card > .price-list { grid-row: 5; }

  .price-card .btn {
    grid-row: 6;
    align-self: end;
  }
}

@media (max-width: 560px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.btn-secondary:hover {
  color: #6f4e14;
}

.price-card .price {
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 6px 0 2px;
}

.price-amount,
.price-table-amount {
  font-variant-numeric: lining-nums tabular-nums;
}

.price-table-note {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-ink-soft);
}

.price-table-amount--free {
  color: var(--color-gold-dark);
  font-style: italic;
}

.pricing-family {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 36px 40px;
  background: var(--glass-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.pricing-family h3 {
  margin-bottom: 6px;
}

.pricing-family-intro {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  max-width: 48ch;
  margin: 0 auto 24px;
}

.family-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

/* Plus la famille est nombreuse, plus la teinte se réchauffe et la tuile s'élève */
.family-scale li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: calc(92px + var(--step) * 14px);
  padding: 16px 10px 14px;
  border-radius: 14px;
  background: rgba(201, 166, 107, calc(0.06 + var(--step) * 0.055));
  border: 1px solid rgba(201, 166, 107, calc(0.15 + var(--step) * 0.08));
}

.family-discount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1;
  color: var(--color-terracotta-dark);
  font-variant-numeric: lining-nums tabular-nums;
}

.family-people {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  line-height: 1.3;
}

@media (prefers-reduced-motion: no-preference) {
  .js .pricing-family .family-scale li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--ease-out-strong), transform 0.6s var(--ease-out-strong);
    transition-delay: calc(0.15s + var(--step) * 70ms);
  }

  .js .pricing-family.in-view .family-scale li {
    opacity: 1;
    transform: none;
  }
}

/* Retour tactile des boutons ; pas d'effet de survol « collant » sur écran tactile */
@media (hover: none) {
  .btn-primary:hover,
  .btn-secondary:hover,
  .card:hover,
  .price-card:hover {
    transform: none;
  }
}

.btn:active,
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* ==========================================================================
   Responsive — Notre histoire & tarifs
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --story-rail: 120px;
    --story-gap: 32px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .logo-text {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --story-rail: 22px;
    --story-gap: 18px;
  }

  /* Le fil passe à gauche pour les deux chapitres */
  .story-chapter--first,
  .story-chapter--second {
    grid-template-columns: var(--story-rail) minmax(0, 1fr);
  }

  .story-chapter--first .story-rail {
    order: -1;
  }

  .story-chapter--first .story-text {
    justify-self: stretch;
  }

  .story-bridge {
    height: 84px;
  }

  .story-ember {
    left: calc(var(--story-rail) / 2);
  }

  .story-finale {
    margin-top: 72px;
    padding: 44px 22px 34px;
    border-radius: var(--radius-lg);
  }

  .story-head {
    margin-bottom: 40px;
  }

  .story-text p {
    font-size: 1rem;
    line-height: 1.75;
  }

  .pricing-family,
  .pricing-extra {
    padding: 28px 20px;
  }

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

  .family-scale li {
    min-height: 96px;
  }

  .price-table li {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Cartes « verre doré » — tarifs, recommandations, garantie.
   Verre crème dépoli bordé d'un fil d'or. À l'apparition, une lumière LED
   ambrée fait le tour du bord (même lumière que le fil de Notre histoire) ;
   au survol, un reflet suit la souris et la lumière tourne en continu.
   ========================================================================== */

@property --lux-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --mx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --my {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.lux {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background:
    radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 222, 165, 0.5), transparent 62%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.18) 22%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(160deg, rgba(255, 254, 250, 0.92) 0%, rgba(255, 249, 238, 0.74) 55%, rgba(248, 236, 214, 0.66) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(201, 166, 107, 0.14),
    0 22px 44px -22px rgba(96, 66, 32, 0.32),
    0 4px 12px -6px rgba(96, 66, 32, 0.12);
  transition:
    box-shadow 0.35s ease,
    --mx 0.6s var(--ease-out-strong),
    --my 0.6s var(--ease-out-strong);
}

/* Les cartes qui apparaissent au défilement gardent leur révélation */
.js .lux.reveal {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    --mx 0.6s var(--ease-out-strong),
    --my 0.6s var(--ease-out-strong);
}

/* Fil d'or du bord : dégradé or clair / or profond / reflet */
.lux::before,
.lux::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.lux::before {
  padding: 1px;
  background: linear-gradient(145deg,
    rgba(246, 226, 182, 0.95),
    rgba(201, 166, 107, 0.8) 28%,
    rgba(255, 251, 240, 0.95) 50%,
    rgba(174, 132, 68, 0.75) 74%,
    rgba(240, 213, 160, 0.95));
}

/* La lumière LED qui court sur le bord */
.lux::after {
  padding: 2.5px;
  background: conic-gradient(from var(--lux-angle),
    transparent 0deg 225deg,
    rgba(226, 146, 70, 0.35) 265deg,
    rgba(236, 160, 80, 0.95) 300deg,
    #fffaf0 316deg,
    rgba(236, 160, 80, 0.95) 332deg,
    transparent 352deg);
  opacity: 0;
}

.lux:nth-child(2) { --lux-delay: 0.12s; }
.lux:nth-child(3) { --lux-delay: 0.24s; }
.lux:nth-child(4) { --lux-delay: 0.36s; }

@media (prefers-reduced-motion: no-preference) {
  .lux.in-view::after {
    animation: luxLap 1.9s cubic-bezier(0.45, 0.05, 0.35, 1) calc(0.25s + var(--lux-delay, 0s)) both;
  }

  .lux.is-lit::after {
    opacity: 1;
    animation: luxLoop 2.8s linear infinite;
  }
}

@keyframes luxLap {
  0% { --lux-angle: 0deg; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { --lux-angle: 360deg; opacity: 0; }
}

@keyframes luxLoop {
  from { --lux-angle: 0deg; }
  to { --lux-angle: 360deg; }
}

/* Survol (pointeur fin uniquement, piloté en JS) */
.lux.is-lit {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(201, 166, 107, 0.14),
    0 30px 56px -24px rgba(96, 66, 32, 0.4),
    0 0 0 1px rgba(234, 170, 96, 0.18),
    0 0 36px -10px rgba(240, 168, 90, 0.35);
}

.js .lux.reveal.is-lit {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    --mx 0.18s ease-out,
    --my 0.18s ease-out;
}

.js .lux.reveal.is-tilting {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.14s ease-out,
    box-shadow 0.35s ease,
    --mx 0.18s ease-out,
    --my 0.18s ease-out;
}

/* L'ancien survol des cartes (lévitation, halo or) est remplacé par l'inclinaison */
.lux.card:hover,
.lux.price-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(201, 166, 107, 0.14),
    0 30px 56px -24px rgba(96, 66, 32, 0.4),
    0 0 0 1px rgba(234, 170, 96, 0.18),
    0 0 36px -10px rgba(240, 168, 90, 0.35);
}

/* Prix : une lueur chaude discrète, comme une étiquette rétroéclairée */
.lux .price-amount {
  text-shadow: 0 0 22px rgba(240, 168, 90, 0.28);
}

.lux .price-icon,
.lux .aftercare-icon {
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--color-gold-tint) 70%);
  box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.45), 0 6px 14px -6px rgba(150, 105, 45, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .lux,
  .js .lux.reveal {
    transition: none;
  }
}

/* ==========================================================================
   Pages légales (mentions légales, confidentialité, 404)
   ========================================================================== */

.legal-page {
  padding: 72px 0 96px;
  background: rgba(255, 252, 245, 0.74);
}

.legal-container {
  max-width: 820px;
}

.legal-updated {
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
  margin-bottom: 48px;
}

.legal-block {
  margin-bottom: 40px;
}

.legal-block h2 {
  font-size: var(--title-block);
  color: var(--color-ink);
  margin-bottom: 14px;
}

.legal-block p,
.legal-bullets li {
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.legal-block a {
  color: var(--color-terracotta-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-block a:focus-visible,
.legal-back:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.legal-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.legal-list li {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
}

.legal-list li > span:first-child {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.legal-bullets {
  list-style: disc;
  padding-left: 1.2em;
  margin: 0 0 1em;
  display: grid;
  gap: 8px;
}

.legal-bullets li::marker {
  color: var(--color-gold);
}

/* Information manquante à compléter avant la mise en ligne : très visible */
mark.todo {
  background: #fde7c8;
  color: #7a3e1d;
  padding: 1px 6px;
  border-radius: 4px;
  font-style: italic;
}

.legal-back {
  padding: 10px 20px;
  font-size: 0.86rem;
}

.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.not-found p {
  color: var(--color-ink-soft);
  max-width: 46ch;
}

@media (max-width: 640px) {
  .legal-page {
    padding: 48px 0 64px;
  }

  .legal-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal-back {
    padding: 9px 14px;
    font-size: 0.8rem;
  }
}

/* Le bouton d'appel flottant ne doit pas masquer la fin du pied de page sur mobile */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 96px;
  }
}

/* Mention « par personne » sous chaque prix */
.price-per {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Hero — sphère de verre en WebGL.
   Le logo est vu à travers une sphère de verre : réfraction, dispersion des
   couleurs, reflets d'un studio chaud et lumière dorée. Sans WebGL (ou si le
   rendu échoue), le médaillon classique reste affiché.
   ========================================================================== */

.hero-orbit {
  position: relative;
  width: clamp(280px, 30vw, 430px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hero-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.hero-orbit .hero-badge {
  position: relative;
  z-index: 1;
  width: 64%;
  height: 64%;
  box-shadow:
    0 0 0 3px rgba(255, 253, 248, 0.95),
    0 0 0 4.5px rgba(201, 166, 107, 0.75),
    0 26px 50px -12px rgba(96, 60, 28, 0.38);
  transition: opacity 0.9s ease 0.15s;
}

/* Rendu WebGL prêt : la sphère remplace le médaillon (l'image reste lisible
   par les lecteurs d'écran et les moteurs de recherche) */
.hero-orbit.has-glass .hero-glass {
  opacity: 1;
}

.hero-orbit.has-glass .hero-badge {
  opacity: 0;
}

@media (max-width: 1024px) {
  .hero-orbit {
    width: clamp(260px, 66vw, 360px);
  }
}