/* =========================================================
   GLAMOUR COIFFURE — Design tokens
   ========================================================= */
:root {
  /* ---------------------------------------------------------
     PALETTE — Hollywood glamour : beige, fuchsia, noir, blanc
     Le beige porte le fond, le fuchsia porte la marque,
     le noir crée le contraste et fait vibrer le néon.
     --------------------------------------------------------- */

  /* Crèmes (surfaces claires) */
  --creme:        #F2DEC4;   /* crème accentué : couleur de fond principale */
  --creme-light:  #F7EBDB;   /* variante claire pour dégradés */
  --creme-deep:   #E1CAAF;   /* accents et bordures */
  --blanc:        #FDFBF8;   /* blanc chaud */

  /* Noirs (sections sombres) */
  --noir:         #14100F;   /* noir profond, légèrement chaud */
  --noir-soft:    #1F1917;   /* surfaces sur fond noir */

  /* Fuchsia (couleur de marque) */
  --fuchsia:      #D4157A;   /* aplats et boutons — 5.0:1 avec du blanc */
  --fuchsia-deep: #900F51;   /* même famille que --fuchsia, juste assez
                                dense pour rester lisible en petit corps */
  --fuchsia-hot:  #EC1E86;   /* accents sur fond noir */
  --fuchsia-glow: #FF52AE;   /* halos néon */
  --fuchsia-pale: #F7D6E6;   /* teintes légères */

  /* Rôles sémantiques (fond clair) */
  --color-bg:            var(--creme);
  --color-bg-alt:        var(--creme-deep);
  --color-surface:       var(--blanc);
  --color-primary:       var(--fuchsia);
  --color-primary-dark:  var(--fuchsia-deep);
  --color-primary-light: var(--fuchsia-pale);
  --color-accent:        var(--fuchsia);
  --color-ink:           #241C1A;   /* 12.8:1 sur beige */
  --color-ink-soft:      #5A4A46;   /* 6.4:1 sur beige */
  --color-border:        #DCCBBB;
  --color-on-primary:    #FFFFFF;

  /* Rôles sémantiques (fond sombre) */
  --color-ink-on-dark:      #F5EDE6;  /* 15.0:1 sur noir */
  --color-ink-on-dark-soft: #BFAFA6;  /* 8.9:1 sur noir */
  --color-border-on-dark:   rgba(245, 237, 230, 0.16);

  /* ---------------------------------------------------------
     TYPOGRAPHIE
     Bodoni Moda : Didone à fort contraste, fidèle aux déliés
     du logo et emblématique du Hollywood des années 50.
     Jost : géométrique façon Futura, même époque.
     --------------------------------------------------------- */
  --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-script: 'Parisienne', cursive;

  /* Échelle par rôle. Un palier = une fonction, pas une nuance :
     entre 14 et 15 px l'œil ne distingue rien, ça fabrique du bruit
     au lieu d'une hiérarchie.
       xs   micro-libellés (en-têtes de colonnes, mentions de bas de page)
       sm   secondaire (méta, signatures, listes de pied de page)
       md   données (lignes de tarifs, prix)
       base corps de texte
       lg   chapeaux et accroches
       xl   sous-titres et titres d'accordéon           */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-md:   0.95rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.06rem, 0.5vw + 0.95rem, 1.2rem);
  --text-xl:   clamp(1.3rem, 1.4vw + 0.95rem, 1.65rem);
  --text-2xl:  clamp(1.6rem, 2vw + 1.1rem, 2.1rem);
  --text-3xl:  clamp(2rem, 3vw + 1.2rem, 2.9rem);
  --text-4xl:  clamp(2.5rem, 5vw + 1rem, 4.4rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Ombres teintées vers le noir chaud */
  --shadow-sm: 0 2px 10px rgba(36, 28, 26, 0.07);
  --shadow-md: 0 12px 32px rgba(36, 28, 26, 0.12);
  --shadow-lg: 0 24px 60px rgba(36, 28, 26, 0.18);

  /* Néon — halos portés, pour les fonds sombres */
  --glow-sm:   0 0 12px rgba(255, 82, 174, 0.45);
  --glow-md:   0 0 22px rgba(255, 82, 174, 0.5), 0 0 46px rgba(255, 82, 174, 0.22);
  --glow-text: 0 0 16px rgba(255, 82, 174, 0.55), 0 0 38px rgba(236, 30, 134, 0.3);

  /* Lueurs d'ambiance : plus vives que larges. Elles sont calées au
     centre vertical de la section et s'éteignent avant les bords —
     sinon deux lueurs d'intensités différentes se rencontrent à
     chaque jointure et créent la coupure qu'on cherche à éviter. */
  --bloom-1: radial-gradient(44% 34% at 14% 46%, rgba(255, 82, 174, 0.340), rgba(255, 82, 174, 0.143) 38%, rgba(255, 82, 174, 0) 70%);
  --bloom-2: radial-gradient(40% 31% at 88% 56%, rgba(255, 60, 160, 0.280), rgba(255, 60, 160, 0.118) 39%, rgba(255, 60, 160, 0) 72%);
  --bloom-3: radial-gradient(32% 24% at 54% 34%, rgba(255, 82, 174, 0.140), rgba(255, 82, 174, 0.059) 40%, rgba(255, 82, 174, 0) 74%);

  /* Grain fin : donne de la matière au beige, en écho au grain du hero. */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;

  /* Échelle z-index sémantique */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-skip: 400;   /* le lien d'évitement passe au-dessus de tout */

  --container: 1180px;
  --header-h: 84px;
}

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

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }

html, body {
  /* clip et non hidden : hidden créerait un conteneur de défilement,
     ce qui neutraliserait le position:sticky de la couverture. */
  overflow-x: clip;
  width: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  /* padding-inline et non le raccourci : .container est cumulée avec des
     classes qui posent leur propre padding vertical (pied de page). */
  padding-inline: var(--space-4);
}

/* Bodoni Moda est un Didone : contrastes forts, déliés fins.
   L'optical sizing évite que les déliés cassent en petit corps. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--color-ink);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.005em; }

p { text-wrap: pretty; }


.eyebrow {
  font-family: var(--font-script);
  /* Une étiquette ne doit pas peser plus lourd que le contenu qu'elle
     annonce : elle était à 25,6 px, au-dessus de tous les textes. */
  font-size: clamp(1rem, 0.7vw + 0.83rem, 1.22rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
  display: inline-block;
}

.lead { font-size: var(--text-lg); color: var(--color-ink-soft); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px var(--fuchsia);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--fuchsia);
  color: var(--color-on-primary);
  box-shadow: 0 6px 22px rgba(212, 21, 122, 0.42);
}
.btn-primary:hover {
  background: var(--fuchsia-hot);
  box-shadow: 0 10px 30px rgba(236, 30, 134, 0.5);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary-dark);
}
.btn-outline:hover { background: var(--color-primary-dark); color: #fff; }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

.btn-light {
  background: #fff;
  color: var(--color-primary-dark);
}
.btn-light:hover { background: var(--color-primary-light); }

.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* =========================================================
   ÉLÉMENTS FLOTTANTS
   Pas de barre de navigation : trois éléments indépendants qui
   restent en place pendant tout le défilement. Chacun porte son
   propre fond pour rester lisible sur photo comme sur beige.
   ========================================================= */
.brand-float {
  position: fixed;
  top: 22px; left: 24px;
  z-index: var(--z-nav);
  width: 58px; height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 24px rgba(20, 16, 15, 0.3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.brand-float img { width: 100%; height: 100%; object-fit: cover; }
.brand-float:hover { transform: scale(1.06); }

.float-nav {
  position: fixed;
  top: 22px; right: 24px;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 10px;
}

.float-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--fuchsia);
  color: #fff;
  font-weight: 500;
  font-size: var(--text-sm);
  box-shadow: 0 6px 22px rgba(212, 21, 122, 0.42);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.float-call:hover { background: var(--fuchsia-hot); transform: translateY(-2px); }
.float-call:active { transform: translateY(0); }

.float-burger {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255, 253, 251, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 6px 22px rgba(20, 16, 15, 0.24);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.float-burger:hover { transform: translateY(-2px); }
.float-burger span {
  display: block;
  width: 19px; height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.float-burger { border: 1px solid rgba(36, 28, 26, 0.16); }
.float-burger[aria-expanded="true"] { background: rgba(20, 16, 15, 0.72); border-color: transparent; }
.float-burger[aria-expanded="true"] span { background: #fff; }
.float-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.float-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.float-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .brand-float { top: 14px; left: 14px; width: 48px; height: 48px; }
  .float-nav { top: 14px; right: 14px; gap: 8px; }
  /* Le libellé « Appeler » poussait la barre à 163 px de large : les titres
     de section, centrés, passaient dessous et se lisaient coupés en deux.
     En pastille ronde, le bouton reste présent tout au long du défilement
     sans mordre sur le contenu. Le libellé devient le nom accessible. */
  .float-call { width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; }
  .float-call span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .float-burger { width: 46px; height: 46px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  object-fit: cover;
  background: var(--color-primary-light);
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
}
.brand-name em { font-style: normal; font-weight: 400; color: var(--color-primary); }

.nav-overlay {
  position: fixed;
  inset: 0;
  /* Juste sous les boutons flottants, pour que la croix de fermeture
     et le bouton d'appel restent cliquables par-dessus. */
  z-index: calc(var(--z-nav) - 1);
  background: rgba(20, 16, 15, 0.82);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.nav-overlay.open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility 0s;
}
.nav-overlay nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.nav-overlay nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #fff;
}
.nav-overlay-actions { display: flex; gap: var(--space-3); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* La couverture reste en place pendant que la page glisse par-dessus :
     il n'y a plus de jointure à dessiner, les deux sections se recouvrent. */
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* Marges haute et basse identiques : sans cela le contenu paraît
     décalé vers le bas malgré le centrage. */
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: calc(var(--header-h) + var(--space-4));
  overflow: hidden;
  background: var(--noir);
  color: var(--color-ink-on-dark);
  isolation: isolate;
}
.hero > .container { width: 100%; position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; }
}

.hero-cover { position: absolute; inset: 0; z-index: 0; }

.hero-cover-img {
  position: absolute;
  inset: 0;
  background-image: url("../assets/couverture/marilyn-maquette.webp");
  background-size: cover;
  background-position: 76% 14%;
  filter: grayscale(1) contrast(1.12) brightness(0.96);
}

/* Voile dégradé : dense à gauche, là où se pose le texte, et presque
   transparent à droite pour laisser respirer le visage. */
.hero-cover-scrim {
  position: absolute;
  inset: 0;
  background:
    /* Le bas de la couverture s'éteint dans la couleur de la section
       suivante : il n'y a donc aucune ligne de séparation à dessiner,
       la photo se fond simplement dans la page. */
    linear-gradient(100deg,
      rgba(20, 16, 15, 0.96) 0%,
      rgba(20, 16, 15, 0.90) 28%,
      rgba(20, 16, 15, 0.58) 52%,
      rgba(20, 16, 15, 0.16) 78%,
      rgba(20, 16, 15, 0.38) 100%),
    linear-gradient(180deg,
      rgba(20, 16, 15, 0.6) 0%,
      transparent 24%,
      rgba(20, 16, 15, 0.7) 88%);
}

/* Grain argentique : donne le caractère d'un tirage d'époque et absorbe
   la montée en échelle du fichier source. */
.hero-cover-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Tant que la photo latérale n'apparaît pas (1100px, voir hero-grid),
   le texte occupe toute la largeur et se pose forcément sur le visage :
   le voile monte plus tôt et plus fort, sur le même dégradé qu'avant,
   juste avec des paliers atteints plus vite. */
@media (max-width: 1099px) {
  .hero-cover-img { background-position: 58% 0%; }
  .hero-cover-scrim {
    background:
      linear-gradient(180deg,
        rgba(20, 16, 15, 0.55) 0%,
        rgba(20, 16, 15, 0.80) 20%,
        rgba(20, 16, 15, 0.90) 40%,
        rgba(20, 16, 15, 0.95) 70%,
        rgba(20, 16, 15, 0.96) 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
}


.hero-title {
  font-size: var(--text-4xl);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
  color: #fff;
  line-height: 1.03;
  letter-spacing: -0.02em;
  /* Filet de sécurité si le cadrage fait passer une zone claire de la
     photo derrière le titre. */
  text-shadow: 0 2px 30px rgba(20, 16, 15, 0.55);
}
.hero-title-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--fuchsia-glow);
  /* L'ombre sombre du h1 est conservée sous le halo rose : le halo seul
     ne détoure rien, étant de la couleur du texte. */
  text-shadow: 0 2px 30px rgba(20, 16, 15, 0.75), var(--glow-text);
}

.hero-sub {
  font-size: var(--text-lg);
  color: rgba(245, 237, 230, 0.84);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(245, 237, 230, 0.72);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .dot { opacity: 0.4; }
.hero-rating strong { color: #fff; font-weight: 600; }
.hero-stars { color: var(--fuchsia-glow); letter-spacing: 1px; }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
/* Le contenu est visible par défaut. L'animation n'est armée que si
   le JS a pu s'exécuter (classe .js-reveal posée sur <html>). Sans JS,
   ou pour un robot d'indexation, la page reste entièrement lisible. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-expo),
              transform var(--dur-slow) var(--ease-expo);
  transition-delay: var(--d, 0s);
}
.js-reveal [data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   PHOTO PLACEHOLDERS
   (swap: give the element a background-image and remove
   the ::after icon once real photos are added)
   ========================================================= */

/* =========================================================
   ABOUT
   ========================================================= */
/* =========================================================
   RYTHME DES SECTIONS
   Une seule teinte crème pour les quatre sections : plus de
   raccord à dessiner entre elles, donc plus de calque de fondu.
   ========================================================= */
.about, .services, .gallery, .creme-block {
  background-image:
    var(--bloom-1),
    var(--bloom-2),
    var(--bloom-3),
    var(--texture-grain);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-color: var(--creme);
}

.about { padding: var(--space-9) 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.about-media {
  position: relative;
  height: 480px;
}
/* Photos posées en fond : cadrage plein cadre, centré. */
.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-photo {
  position: absolute;
  width: 78%;
  height: 85%;
  top: 0; left: 0;
  box-shadow: var(--shadow-md);
}
.about-photo-sm {
  width: 52%;
  height: 55%;
  top: auto; left: auto;
  bottom: 0; right: 0;
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.about-content h2 { margin-bottom: var(--space-3); }
.about-content .lead { margin-bottom: var(--space-4); }
.about-points { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.about-points li { display: flex; align-items: center; gap: 10px; color: var(--color-ink); }
.point-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { gap: 14px; }

/* =========================================================
   SECTION HEAD (shared)
   ========================================================= */
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-7); }
.section-sub { color: var(--color-ink-soft); margin-top: var(--space-2); }

/* =========================================================
   SERVICES / PRICING
   ========================================================= */
.services { padding: var(--space-9) 0; }

.pricing-note { text-align: center; color: var(--color-ink-soft); font-size: var(--text-sm); }
.pricing-note a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery { padding: var(--space-9) 0; }
.gallery-item {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--creme-deep);
  cursor: pointer;
  padding: 0;
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(36, 28, 26,0.28));
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lg); }
.gallery-item:hover::after { opacity: 1; }
.gallery-zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  z-index: 2;
}
.gallery-item:hover .gallery-zoom { opacity: 1; transform: scale(1); }


/* =========================================================
   REVIEWS
   ========================================================= */
.creme-block { position: relative; z-index: 2; }
.reviews { padding: var(--space-9) 0 var(--space-7); background: none; }
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.stars { color: var(--color-accent); letter-spacing: 2px; font-size: 1rem; }

/* ---- Carrousel des avis ----
   Volontairement différent de celui des prestations : les photos défilent
   seules en continu, un avis se lit à l'arrêt. Ici pas d'automatisme, une
   accroche par carte et une pagination qui dit où l'on en est. */
.reviews-carousel { position: relative; }
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Le rail reste dans le conteneur : sans marge négative ni marge
     intérieure, les positions d'accroche coïncident avec le bord des
     cartes. Le débord plein écran faisait diverger scroll-padding, dont
     les pourcentages se résolvent contre le conteneur de défilement. */
  padding: 6px 2px 22px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuchsia); }
.reviews-track > .review-card {
  flex: 0 0 clamp(250px, 78vw, 320px);
  /* Alignement au début et non au centre : avec « center » la première
     carte ne peut jamais se caler, le rail démarrant à zéro. */
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  /* Exactement trois cartes visibles sur quatre : il reste une vraie course
     de défilement, sans quoi l'accrochage bloque le rail et la pagination
     n'a plus rien à piloter. Le pourcentage porte sur la boîte de contenu,
     donc sur la largeur du conteneur, pas sur celle de l'écran. */
  .reviews-track > .review-card { flex-basis: calc((100% - 2 * var(--space-3)) / 3); }
}

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-2);
}
.reviews-dots button {
  /* Le point fait 7px, la cible tactile 44px : le site tient ce plancher
     partout, la pagination ne fait pas exception. */
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.reviews-dots button::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(36, 28, 26, 0.22);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.reviews-dots button.actif::before { background: var(--fuchsia-deep); transform: scale(1.35); }
.review-card,
.tarif-group {
  /* Verre translucide : le fond et les lueurs de la section transparaissent
     à travers, ce qui relie l'élément au décor au lieu de le poser dessus.
     Le liseré clair en haut simule la tranche éclairée du verre. */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  box-shadow:
    0 10px 30px rgba(36, 28, 26, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.review-card {
  /* Ombre plus discrète que celle des tarifs : la carte est déjà détachée
     par son fond translucide et son liseré clair. */
  box-shadow: 0 3px 12px rgba(36, 28, 26, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(36, 28, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.reviews-cta { text-align: center; margin-top: var(--space-6); }

@media (max-width: 1024px) {
  }
@media (max-width: 600px) {
  }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  background: none;
  padding: var(--space-8) 0 var(--space-9);
  text-align: center;
  color: var(--color-ink);
}
.cta-band-inner h2 { color: var(--color-ink); margin-bottom: var(--space-2); }
.cta-band-inner p { color: var(--color-ink-soft); max-width: 480px; margin: 0 auto var(--space-5); }
.cta-band .hero-cta { justify-content: center; margin-bottom: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  /* Coupure nette avec la section crème : c'est le parti pris du client. */
  background-color: var(--noir);
  background-image: none;
  color: var(--color-ink-on-dark);
  padding: var(--space-6) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  /* Chaque bloc prend sa largeur naturelle et les trois sont répartis d'un
     bord à l'autre. Avec des colonnes en fr, la dernière recevait une boîte
     plus large que son texte : le contenu s'arrêtait 172px avant le bord et
     laissait un creux en bout de ligne. */
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-5) var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.brand-footer .brand-mark { background: rgba(255,255,255,0.08); border-color: var(--color-accent); }
.brand-footer .brand-name { color: #fff; }
.brand-footer .brand-name em { color: var(--color-primary-light); }
.footer-tagline { margin-top: var(--space-2); color: rgba(245, 237, 230,0.65); font-size: 0.9rem; }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); }

.site-footer h3 {
  color: #fff;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.footer-list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: rgba(245, 237, 230,0.75); }
.footer-list li { display: flex; justify-content: space-between; gap: var(--space-5); }
.footer-list-contact li { display: flex; align-items: flex-start; gap: 8px; justify-content: flex-start; }
.footer-list-contact li:has(> a) { align-items: center; }
.footer-list-contact li:has(> a) svg { margin-top: 0; }
.footer-list-contact svg { color: var(--color-primary-light); flex-shrink: 0; margin-top: 3px; }
.footer-list-contact a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-list-contact a:hover { color: #fff; }
.footer-itineraire {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-primary-light);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-note { margin-top: var(--space-2); font-size: var(--text-xs); color: rgba(245, 237, 230,0.5); font-style: italic; }







.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(245, 237, 230, 0.5);
}
.footer-legal-links { margin: 0; }
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  color: rgba(245, 237, 230, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-legal-links a:hover { color: #fff; }

/* Le pied de page ne suit pas le conteneur de 1200px du reste de la page :
   sur grand écran cela laissait 130px de noir vide de chaque côté pour rien.
   Il prend ici toute la largeur, avec une gouttière fluide qui reste une
   marge assumée plutôt qu'un alignement raté. Sous 900px le conteneur
   standard reprend la main : sur mobile il n'y a aucun vide à combler. */
@media (min-width: 900px) {
  .site-footer .container {
    max-width: none;
    padding-inline: clamp(28px, 3.5vw, 64px);
  }
}

/* ---- Legal page ---- */
.legal-page { padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-8); background: var(--color-bg); min-height: 70vh; }
.legal-wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: var(--space-1) 0 var(--space-2); }
.legal-updated { color: var(--color-ink-soft); font-size: 0.9rem; margin-bottom: var(--space-6); }
.legal-section { margin-bottom: var(--space-6); }
.legal-section h2 { font-size: 1.3rem; color: var(--color-primary-dark); margin-bottom: var(--space-2); }
.legal-section p { color: var(--color-ink); margin-bottom: var(--space-2); line-height: 1.7; }
.legal-section a {
  color: var(--color-primary-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Les liens autonomes de cette page atteignent la zone tactile réglementaire ;
   ceux posés au fil d'une phrase en sont exemptés (WCAG 2.2 SC 2.5.8). */
.legal-back a, .legal-page .float-call { min-height: 44px; display: inline-flex; align-items: center; }
.legal-todo {
  background: var(--color-bg-alt);
  border: 1px solid rgba(36, 28, 26, 0.14);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.legal-back { margin-top: var(--space-6); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-media { height: 380px; }
  .footer-grid { grid-template-columns: auto 1fr 1fr; gap: var(--space-4) var(--space-5); }
}

@media (max-width: 640px) {
  :root { --space-7: 48px; --space-8: 56px; --space-9: 64px; }
  .container { padding-inline: var(--space-3); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-meta .dot { display: none; }
  .site-footer { padding-top: var(--space-5); }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  /* La bande horizontale du desktop n'a pas de sens sur 390 px : on empile,
     et Instagram passe devant, dans la zone atteignable au pouce. */
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
    padding-top: var(--space-4);
  }
  .footer-bottom .footer-social { order: -1; margin-bottom: var(--space-2); }
  /* Colonnes trop étroites pour « Mardi – Samedi   9h30 – 18h30 » sur une
     ligne : on empile plutôt que de laisser chaque groupe se couper. */
  .footer-list li { flex-direction: column; gap: 0; }
  .footer-list-contact li { flex-direction: row; }
  .cta-band .hero-cta { flex-direction: column; }
}

@media (max-width: 400px) {
  .brand-name { font-size: 1rem; }
}

/* =========================================================
   ★ PREMIUM LAYER
   ========================================================= */

/* ---- Gold ornament ---- */
.ornament {
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 16px; margin: 0 auto var(--space-3);
  position: relative;
  background: center / 14px 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4157A' d='M12 2 L15 9 L22 12 L15 15 L12 22 L9 15 L2 12 L9 9 Z'/%3E%3C/svg%3E");
}
.ornament::before, .ornament::after {
  content: ''; position: absolute; top: 50%; width: 46px; height: 1px;
}
.ornament::before { left: 0; background: linear-gradient(90deg, transparent, var(--color-accent)); }
.ornament::after { right: 0; background: linear-gradient(90deg, var(--color-accent), transparent); }

.eyebrow-orn::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 10px;
  vertical-align: -3px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4157A' d='M12 2 L15 9 L22 12 L15 15 L12 22 L9 15 L2 12 L9 9 Z'/%3E%3C/svg%3E");
}

/* ---- Wave dividers ---- */
/* ---- Photo du salon, posée à droite de la couverture ---- */
.hero-photo-card {
  display: none;
  width: min(38vw, 400px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
}
/* L'image n'est déclarée que dans la media query : un navigateur ne
   télécharge pas le fond d'une règle qui ne s'applique pas. Sur mobile,
   où la carte est masquée, les 144 Ko ne sont donc jamais demandés. */
@media (min-width: 1100px) {
  .hero-photo-card {
    display: block;
    background-image: url("../assets/salon/salon-interior-fleurs.webp");
    background-size: cover;
    background-position: center;
  }
}

/* ---- About floating badge ---- */
.about-media { overflow: visible; }
.about-float-badge {
  position: absolute; left: -18px; bottom: 28px; z-index: 3;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.afb-num { font-family: var(--font-display); font-size: 2.1rem; color: var(--color-primary-dark); line-height: 1; }
.afb-label { font-size: 0.74rem; color: var(--color-ink-soft); line-height: 1.3; }
.afb-stars { color: var(--color-accent); letter-spacing: 1px; }
@media (max-width: 1024px) {
  /* Le badge se posait en bas à droite, pile sur la photo de l'intérieur
     du salon. Il passe à gauche, sur la façade, et se resserre. */
  .about-float-badge {
    left: 0; right: auto; bottom: 4px;
    padding: 10px 14px;
    gap: 9px;
  }
  .afb-num { font-size: 1.5rem; }
  .afb-label { font-size: 0.68rem; line-height: 1.25; }
}

.review-card { position: relative; overflow: hidden; }
.review-card > * { position: relative; z-index: 1; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(30,20,22,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity var(--dur-med) var(--ease-out); }
.lightbox-img {
  max-width: 86vw; max-height: 86vh;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform var(--dur-med) var(--ease-out);
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.lightbox-close { top: 24px; right: 24px; }

/* Position dans la série : sans repère, on ne sait pas combien de photos
   restent ni où l'on en est. */
.lightbox-count {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 14px; right: 14px; }
  .lightbox-img { max-width: 92vw; }
}

/* ---- Stagger children ---- */
.js-reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-expo), transform var(--dur-slow) var(--ease-expo);
}
.js-reveal [data-stagger].in-view > * { opacity: 1; transform: translateY(0); }
.js-reveal [data-stagger].in-view > *:nth-child(1) { transition-delay: 0.05s; }
.js-reveal [data-stagger].in-view > *:nth-child(2) { transition-delay: 0.12s; }
.js-reveal [data-stagger].in-view > *:nth-child(3) { transition-delay: 0.19s; }
.js-reveal [data-stagger].in-view > *:nth-child(4) { transition-delay: 0.26s; }
.js-reveal [data-stagger].in-view > *:nth-child(5) { transition-delay: 0.33s; }
.js-reveal [data-stagger].in-view > *:nth-child(6) { transition-delay: 0.40s; }

/* ---- Premium pricing frame ---- */

@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}

/* =========================================================
   ★ LUEURS RÉPARTIES IRRÉGULIÈREMENT
   Chaque section reçoit sa propre disposition : sans cela le
   même motif se répète d'une section à l'autre et se voit.
   ========================================================= */
.about {
  --bloom-1: radial-gradient(40% 32% at 9% 38%,  rgba(255, 82, 174, 0.340), rgba(255, 82, 174, 0.143) 38%, rgba(255, 82, 174, 0) 70%);
  --bloom-2: radial-gradient(34% 27% at 83% 66%, rgba(255, 60, 160, 0.270), rgba(255, 60, 160, 0.113) 39%, rgba(255, 60, 160, 0) 72%);
  --bloom-3: radial-gradient(24% 19% at 58% 22%, rgba(255, 82, 174, 0.150), rgba(255, 82, 174, 0.063) 40%, rgba(255, 82, 174, 0) 74%);
}
.services {
  --bloom-1: radial-gradient(36% 26% at 79% 33%, rgba(255, 82, 174, 0.320), rgba(255, 82, 174, 0.134) 38%, rgba(255, 82, 174, 0) 70%);
  --bloom-2: radial-gradient(42% 33% at 6% 71%,  rgba(255, 60, 160, 0.290), rgba(255, 60, 160, 0.122) 40%, rgba(255, 60, 160, 0) 73%);
  --bloom-3: radial-gradient(22% 17% at 41% 52%, rgba(255, 82, 174, 0.130), rgba(255, 82, 174, 0.055) 41%, rgba(255, 82, 174, 0) 75%);
}
.gallery {
  --bloom-1: radial-gradient(31% 24% at 24% 74%, rgba(255, 82, 174, 0.330), rgba(255, 82, 174, 0.139) 39%, rgba(255, 82, 174, 0) 71%);
  --bloom-2: radial-gradient(38% 30% at 92% 27%, rgba(255, 60, 160, 0.280), rgba(255, 60, 160, 0.118) 39%, rgba(255, 60, 160, 0) 72%);
  --bloom-3: radial-gradient(26% 21% at 63% 58%, rgba(255, 82, 174, 0.140), rgba(255, 82, 174, 0.059) 40%, rgba(255, 82, 174, 0) 74%);
}
/* =========================================================
   ★ TARIFS EN ACCORDÉONS
   Élément <details> natif : fonctionne sans JavaScript et se
   pilote au clavier tout seul.
   ========================================================= */
.tarifs {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tarif-group { overflow: hidden; }
.tarif-group:hover,
.tarif-group[open] {
  box-shadow: 0 18px 44px rgba(36, 28, 26, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.tarif-group summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.tarif-group summary::-webkit-details-marker { display: none; }
.tarif-group summary::marker { content: ''; }

.tg-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.tg-from {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.tg-chevron {
  color: var(--color-primary-dark);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.tarif-group[open] .tg-chevron { transform: rotate(180deg); }

.tarif-rows { padding: 0 24px 14px; }
/* Seul accordéon sans grille de prix : il porte l'appel à la place. */
.tarif-cta { margin-top: var(--space-3); }
.tarif-cta .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .tarif-group[open] .tarif-rows { animation: tarif-open var(--dur-med) var(--ease-out); }
}
@keyframes tarif-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tarif-row {
  display: grid;
  grid-template-columns: 1fr 84px 84px;
  gap: var(--space-2);
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(36, 28, 26, 0.10);
  font-size: var(--text-md);
}
.tarif-row-solo { grid-template-columns: 1fr auto; }
.tarif-head {
  border-top: none;
  padding: 2px 0 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-ink-soft);
}
.tarif-head span:not(:first-child) { text-align: right; }
.tr-name { padding-right: var(--space-2); color: var(--color-ink); }
.tr-val {
  text-align: right;
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .tarif-group summary { padding: 16px 18px; gap: var(--space-2); }
  .tarif-rows { padding: 0 18px 12px; }
  .tarif-row { grid-template-columns: 1fr 58px 58px; }
  .tarif-row-solo { grid-template-columns: 1fr auto; }
}

/* =========================================================
   ★ MENU : TEXTE SEUL
   Plus d'encadrement ni de pastille, juste les mots posés
   sur le fond flouté.
   ========================================================= */
.nav-overlay-actions .btn {
  background: none;
  border: none;
  box-shadow: none;
  /* Pas de cadre visible, mais une zone tactile réglementaire. */
  padding: 0 12px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--text-base);
  font-weight: 400;
}
.nav-overlay-actions { gap: var(--space-6); }
.nav-overlay-actions .btn:hover {
  background: none;
  color: #fff;
  transform: none;
}
.nav-overlay nav a {
  color: #fff;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-overlay nav a:hover { color: var(--fuchsia-glow); }

/* =========================================================
   ★ CARROUSEL DES PRESTATIONS
   Défilement continu : les vignettes sont dupliquées et la
   piste se translate d'exactement une série, ce qui donne
   une boucle sans raccord visible.
   ========================================================= */
/* Enveloppe fixe. Le bouton de pause doit s'y accrocher et non au rail :
   un élément en position:absolute dans un conteneur défilable est calé sur
   le contenu, donc il partait avec les vignettes. */
.gallery-carousel-wrap {
  position: relative;
  /* déborde du conteneur pour occuper toute la largeur d'écran */
  margin-inline: calc(50% - 50vw);
}
.gallery-carousel {
  /* Vrai conteneur défilable, et non une animation dans une boîte
     masquée : la piste doit rester attrapable au doigt, à la molette
     et au clavier. Le défilement automatique pilote ce même scrollLeft
     en JavaScript, donc le geste de l'utilisateur reprend la main
     naturellement au lieu de lutter contre une animation. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 14px 24px;
}

.gallery-track .gallery-item {
  flex: 0 0 auto;
  width: clamp(200px, 23vw, 290px);
}

/* =========================================================
   ★ OUVERTURE ANIMÉE DES ACCORDÉONS
   La hauteur est pilotée en JavaScript ; sans JavaScript le
   <details> s'ouvre normalement, sans animation.
   ========================================================= */
.js-accordion .tarif-rows {
  overflow: hidden;
  transition: height var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.js-accordion .tarif-group:not([open]) .tarif-rows { opacity: 0; }
.js-accordion .tarif-group[open] .tarif-rows { opacity: 1; }
.js-accordion .tarif-group[open] .tarif-rows { animation: none; }

/* =========================================================
   ★ TRANSITION : LA PAGE GLISSE SUR LA COUVERTURE
   La couverture est fixée en haut ; le contenu qui suit
   remonte par-dessus, coins arrondis et ombre portée. Aucun
   dégradé, aucune forme intermédiaire, donc aucune bande de
   pixels ni raccord visible.
   ========================================================= */
main > section:not(.hero),
.cta-band {
  position: relative;
  z-index: 2;
}

.about {
  margin-top: -52px;
  border-top-left-radius: 52px;
  border-top-right-radius: 52px;
  box-shadow: 0 -24px 60px rgba(20, 16, 15, 0.45);
}

/* Réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité,
   absent de l'affichage. */
/* Cible d'un lien d'ancre rendue focalisable en JS : le focus doit s'y
   déplacer sans dessiner un contour autour de la section entière. */
[tabindex="-1"]:focus { outline: none; }

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

/* =========================================================
   ★ ACCESSIBILITÉ
   ========================================================= */

/* Lien d'évitement : caché jusqu'à ce qu'il reçoive le focus clavier. */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  background: var(--fuchsia);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Zones tactiles : le minimum recommandé est 44px. Plusieurs liens
   n'atteignaient que 20 à 29px de haut, dont le numéro de téléphone
   du pied de page, qui est l'action de conversion du site. */
.footer-list-contact a,
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-social a { width: 44px; height: 44px; }
.brand-footer { min-height: 44px; }

/* Étoiles : le fuchsia plein tombait à 4,14:1 sur crème. */
.stars, .hero-stars, .afb-stars { color: var(--fuchsia-deep); }

/* Note moyenne : 4,3 sur 5, donc 86 % d'étoiles remplies. Cinq étoiles
   pleines à côté du chiffre « 4,3 » se lisaient comme une contradiction.
   Deux calques superposés : les étoiles éteintes dessous, les pleines
   au-dessus, rognées à la largeur voulue. */
.note { position: relative; display: inline-block; white-space: nowrap; color: rgba(36, 28, 26, 0.28); }
.note-plein {
  position: absolute;
  left: 0; top: 0;
  width: 88%;
  overflow: hidden;
  color: inherit;
}
.stars.note, .hero-stars.note, .afb-stars.note { color: rgba(36, 28, 26, 0.26); }
.stars.note .note-plein, .afb-stars.note .note-plein { color: var(--fuchsia-deep); }
.hero-stars.note { color: rgba(255, 255, 255, 0.34); }
.hero-stars.note .note-plein { color: var(--fuchsia-glow); }
.hero-stars { color: var(--fuchsia-glow); }

/* Bouton de pause du carrousel */
.carousel-toggle {
  position: absolute;
  right: 22px; bottom: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: rgba(253, 251, 248, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}
.carousel-toggle:hover { background: #fff; }
/* Une seule des deux icônes est visible selon l'état du défilement. */
.carousel-toggle .ico-lecture { display: none; }
.carousel-toggle.en-pause .ico-pause { display: none; }
.carousel-toggle.en-pause .ico-lecture { display: block; }


.gallery-item:focus-visible {
  outline: 3px solid var(--fuchsia);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  /* Le libellé faisait presque la largeur d'une vignette : on garde la
     pastille et la zone tactile de 44 px, le texte part dans le nom
     accessible du bouton. */
  .carousel-toggle {
    right: 14px; bottom: 14px;
    width: 44px; padding: 0;
    justify-content: center;
  }
  .carousel-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Contenu des cartes d'avis ---- */
.rc-stars { color: var(--fuchsia-deep); letter-spacing: 2px; font-size: var(--text-xs); }
.rc-quote {
  margin: 0;
  font-size: var(--text-md);
  text-wrap: pretty;
  line-height: 1.5;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  /* 4 lignes exactement, quelle que soit la longueur du texte */
  height: 6em;
}
.rc-quote::before { content: '« '; }
.rc-quote::after  { content: ' »'; }
.rc-author { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.rc-author span {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  margin-top: 1px;
}