/* =========================================================
   L'ADC - Atelier Du Corps
   Massothérapie & Mouvement - Territet
   Design system v2 : Massaya brutalist warm
   - Noir profond, grain cinématographique, néons cuivrés
   - Typographie bâton (Archivo Black) majuscules étirées pour titres
   - Cinzel pour la marque L'ADC + Sacramento pour "Atelier Du Corps" (match logo)
   - Touches lumière saturée orange corail / ambré chaud
   Palette accent : rouge corail #DE3536 (officiel marque) + ambre cuivré #E8A766
   ========================================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Échelle globale : tout est réduit de façon homogène (mêmes proportions,
     plus compact sur mobile comme sur ordi). Ajuster ce % pour + / - grand. */
  font-size: 90%;
}

:root {
  /* Palette claire - fond clair chaud, accent corail (logo), texte anthracite */
  --bg:            #FBFAF9;       /* blanc chaud */
  --bg-soft:       #F2EFEB;       /* gris clair chaud (sections alternées) */
  --bg-card:       #FFFFFF;       /* cartes blanches */
  --line:          rgba(33, 29, 27, 0.12);
  --line-strong:   rgba(231, 51, 49, 0.32);

  --ink:           #211D1B;       /* texte principal anthracite chaud */
  --ink-mute:      #5F564F;
  --ink-soft:      #938A82;

  /* Corail officiel du logo (#E73331) + terracotta chaud en secondaire */
  --coral:         #E73331;       /* corail principal - HEX officiel du logo */
  --coral-bright:  #C42A28;       /* hover (plus profond sur fond clair) */
  --coral-deep:    #A5252A;       /* enfoncé */
  --coral-glow:    rgba(231, 51, 49, 0.30);
  --ember:         #C96A3F;       /* terracotta chaud, accent secondaire */
  --copper:        #B4673F;       /* cuivre profond */

  /* Aliases (legacy) → corail */
  --gold:          var(--coral);
  --gold-bright:   var(--coral-bright);
  --gold-deep:     var(--coral-deep);

  /* Typo
     - display : Cinzel (match les capitales L'ADC du logo)
     - headline : sans-serif bâton lourd majuscules pour titres Massaya-style
     - body : sans-serif neutre
     - script : signature handwriting (Sacramento) - matche "Atelier Du Corps" du logo
  */
  --font-display:  'Cinzel', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-headline: 'Anton', 'Bebas Neue', 'Archivo Black', 'Helvetica Neue', sans-serif;
  --font-label:    'Inter', system-ui, sans-serif; /* labels tracking large Massaya */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  /* Police calligraphique des titres + signatures (esprit "Virtual" de Canva,
     ici Kaushan Script, libre pour usage commercial via Google Fonts).
     POUR CHANGER DE POLICE : remplacer 'Kaushan Script' ci-dessous
     (ex. 'Sacramento', 'Dancing Script', 'Great Vibes'...). */
  /* Titres : serif élégant (esprit carte de visite, classe) */
  --font-title:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script:   'Satisfy', 'Kaushan Script', cursive;

  /* Mesures */
  --max:           1180px;
  --gutter:        clamp(20px, 5vw, 56px);
  --radius:        2px;
  --t-fast:        .25s ease;
  --t-med:         .55s cubic-bezier(.2,.7,.2,1);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: .01em;
  overflow-x: hidden;
}

/* Halo cuivré ambiant - braise et lumière saturée Massaya */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(55% 38% at 8% 6%,   rgba(222, 53, 54, 0.10), transparent 70%),
    radial-gradient(50% 36% at 94% 96%, rgba(232, 167, 102, 0.07), transparent 70%);
}

/* Grain cinématographique - calque global SVG noise renforcé (look Massaya) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

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

a { color: var(--coral); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--coral-bright); }

/* ---------- Typographie Massaya brutalist warm ---------- */
h1, h2 {
  /* Titres : serif élégant Cormorant */
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.15;
  text-transform: none;
  color: var(--ink);
}

h3, h4 {
  /* Sous-titres : même serif élégant */
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink);
}

h1 {
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  letter-spacing: .01em;
}
h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  letter-spacing: .01em;
}
h3 { font-size: clamp(1.55rem, 2.9vw, 2.2rem); }  /* même taille que h2 : tous les titres identiques */

/* "em" dans les titres = meme police que le titre, seule la couleur corail distingue */
h1 em, h2 em, h3 em, h4 em {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--coral);
  font-size: inherit;
  line-height: inherit;
}

.script {
  font-family: inherit;
  font-weight: inherit;
  color: var(--coral);
  font-size: inherit;
  line-height: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 1.3rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--coral);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}

p { color: var(--ink-mute); max-width: 62ch; }
p.lead { font-size: 1.15rem; color: var(--ink); }

/* ---------- Container ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: clamp(50px, 8vw, 96px) 0;
  position: relative;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(16, 8, 6, 0);
  backdrop-filter: blur(0);
  transition: background var(--t-med), backdrop-filter var(--t-med), padding var(--t-med);
  padding: 16px 0;
}
.site-header.scrolled {
  background: rgba(16, 8, 6, .85);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled .brand img { width: auto; height: clamp(82px, 8.5vw, 108px); transition: var(--t-med); }
.site-header.scrolled .brand-text { font-size: 1.4rem; transition: var(--t-med); }
.brand img, .brand-text { transition: var(--t-med); }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.brand img {
  width: auto;           /* logo horizontal complet ADCversion2_corail (x1.5) */
  height: clamp(108px, 12.5vw, 150px);
  max-width: 72vw;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.brand-text {
  font-family: var(--font-display); /* Marcellus - match logo */
  font-size: 2.0rem;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  display: none; /* la pastille suffit, c'est plus propre */
}
.brand-text small {
  display: block;
  font-family: var(--font-script);
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coral);
  margin-top: 6px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a {
  color: var(--ink);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
  position: relative;
  padding: 8px 0;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--coral);
  transition: all var(--t-fast);
  transform: translateX(-50%);
}
.nav a:hover::after,
.nav a.active::after { width: 24px; }
.nav a.active { color: var(--coral); }

.nav-cta {
  border: 1px solid var(--coral);
  padding: 10px 22px !important;
  color: var(--coral) !important;
  background: rgba(222, 53, 54, 0.06);
}
.nav-cta:hover {
  background: var(--coral);
  color: #fff !important;
  box-shadow: 0 6px 22px var(--coral-glow);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: all var(--t-fast);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* centre le bloc hero horizontalement (corrige le décalage à gauche) */
  overflow: hidden;
  isolation: isolate;
}
.hero-video, .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* La vidéo a déjà le logo+fumée bakés en orange corail (v2_corail).
     On garde juste un léger boost de contraste cinéma. */
  filter: contrast(1.08) brightness(.94) saturate(1.05);
}

/* Vignette + gradient pour ancrer le texte sur la fumée colorée */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 70% at 50% 60%, rgba(222, 53, 54, 0.10), transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 90% at 20% 50%, rgba(10, 8, 7, .15), rgba(10, 8, 7, .55)),
    linear-gradient(180deg, rgba(10, 8, 7, .10) 0%, rgba(10, 8, 7, .35) 60%, var(--bg) 100%);
  z-index: -1;
}

.hero-inner {
  padding-top: 120px;
  padding-bottom: 58px;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;   /* hero centré (citation, signature, texte, boutons) */
}
/* Bloc citation + signature : la signature se cale sous la fin de la citation */
.hero-quote-wrap {
  width: clamp(255px, 85vw, 620px);   /* citation : bien plus grande sur mobile, plafonnée sur ordi */
  margin: 0 auto 1.4rem;   /* centré */
}
.hero h1 { margin: 0; }
/* Citation en image, écriture proche de la signature de Horane (2 lignes fixes) */
.hero-quote-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 20px rgba(0,0,0,.55));
}
/* Signature Horane = image exacte de la carte de visite, posée sur le côté */
.hero-signature-img {
  display: block;
  width: clamp(112px, 15vw, 158px);   /* plus petite que la citation */
  height: auto;
  margin: .6rem 2% 0 auto;   /* décalée sur la droite, comme la signature d'un courrier */
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.5));
}
/* "portée au corps." = meme police que le titre hero, seule la couleur corail distingue */
.hero h1 .script {
  display: block;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: var(--coral);
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
  text-shadow: none;
  transform: none;
  line-height: inherit;
}
.hero p.lead {
  max-width: 560px;
  font-size: 1.28rem;   /* texte hero plus grand */
  margin: clamp(2.6rem, 7vh, 5.5rem) auto 2.2rem;   /* espace au-dessus : met la citation Horane en valeur */
}
.hero .btn-row { justify-content: center; }

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 38px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
  border: 1px solid transparent;
  border-radius: 0;
}

/* Event tag Massaya - "22 + 23.05.2026  |  SION" */
.event-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
}
.event-tag .dot {
  width: 6px; height: 6px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--coral-glow);
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  box-shadow: 0 6px 22px rgba(222, 53, 54, .28);
}
.btn-primary:hover {
  background: var(--coral-bright);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(222, 53, 54, .42);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--coral);
  color: var(--coral);
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-mute);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  z-index: 2;
}
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--coral), transparent);
  margin: 10px auto 0;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: .4; transform: scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1); }
}

/* ---------- Section titles ---------- */
.section-title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 4.8vw, 54px);
}
.section-title p { margin: 1.2rem auto 0; }
/* Mobile : tous les titres de section centrés (cohérent avec le hero). Les paragraphes restent alignés à gauche pour la lisibilité. */
@media (max-width: 720px) {
  .split .text { text-align: center; }
  .split .text p,
  .split .text .lieu-coords,
  .split .text .btn-row { text-align: left; }
}

/* =========================================================
   HERO SANS VIDÉO : fond sombre épuré (vidéo fumée retirée, on garde le logo)
   ========================================================= */
.hero { background: linear-gradient(180deg, #1c1512 0%, #1c1512 72%, var(--bg) 100%); }
.hero-video, .hero-overlay { display: none !important; }
.hero::before, .hero::after { display: none !important; }

/* ---------- Expériences (services) ---------- */
.experiences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.experiences-3 {
  grid-template-columns: repeat(3, 1fr);
}

.experience {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: clamp(36px, 4.5vw, 60px);
  position: relative;
  overflow: hidden;
  transition: all var(--t-med);
}
.experience::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 1px;
  background: var(--coral);
  transition: width var(--t-med);
}
.experience:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(222, 53, 54, .08);
}
.experience:hover::before { width: 100%; }

.experience .roman {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--coral);
  font-size: 1rem;
  letter-spacing: .3em;
  margin-bottom: 1.5rem;
}
.experience h3 { margin-bottom: 1.4rem; }
.experience p { margin-bottom: 1.6rem; }
.experience .arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--coral);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.experience .arrow::after {
  content: '→';
  transition: transform var(--t-fast);
  font-size: 1.1rem;
}
.experience:hover .arrow::after { transform: translateX(6px); }

/* ---------- Inclusive box ---------- */
.inclusive-box {
  margin-top: 60px;
  padding: clamp(34px, 4vw, 52px);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(222, 53, 54, .07), transparent 60%),
    var(--bg-soft);
  position: relative;
}
.inclusive-box::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 24px;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--coral);
  line-height: 1;
  opacity: .45;
}
.inclusive-box h4 {
  font-family: var(--font-script) !important; /* Sacramento - "Pour celles et ceux qui hésitent..." */
  font-style: normal;
  font-weight: 600;
  font-size: 1.3rem;  /* discret : pas plus gros que le reste (ce n'est pas un titre de section) */
  line-height: 1.25;
  color: var(--coral);
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
.inclusive-box p { color: var(--ink); max-width: none; }

/* ---------- Two-column section (split) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.split .text p { margin-bottom: 1.2rem; }
.split .visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.split .visual img,
.split .visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Look ciné Massaya: contraste fort, saturation marquée, légère désat des verts */
  filter: brightness(.88) contrast(1.18) saturate(1.15);
  transition: transform 1.2s ease;
}
.split .visual:hover img,
.split .visual:hover video { transform: scale(1.03); }
.split .visual::before {
  content: '';
  position: absolute;
  top: 16px; left: 16px;
  right: -16px; bottom: -16px;
  border: 1px solid var(--coral);
  z-index: -1;
}

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 24px;
}
.review {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 36px 30px;
  position: relative;
}
.review::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--coral);
  opacity: .55;
}
.review p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: none;
  letter-spacing: .01em;
}
.review .author {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}
.review .author::before {
  content: '— ';
  color: var(--coral);
}

/* Featured review (legacy, large) */
.review.featured {
  grid-column: 1 / -1;
  padding: clamp(40px, 6vw, 70px);
  text-align: center;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(222, 53, 54, .09), transparent 70%),
    var(--bg-card);
}
.review.featured p {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  max-width: 720px;
  margin: 0 auto 22px;
}

/* Banner review (pleine largeur, même police que les autres) */
.review.banner {
  grid-column: 1 / -1;
  padding: 40px clamp(28px, 4vw, 56px);
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(222, 53, 54, .07), transparent 70%),
    var(--bg-card);
}
.review.banner p {
  font-size: 1.0rem;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  max-width: 900px;
  margin-bottom: 18px;
  letter-spacing: .01em;
}

/* ---------- Map / Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.contact-item:last-child { border-bottom: none; }
.contact-item .label {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
  font-weight: 500;
}
.contact-item .value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  display: block;
}
.contact-item a.value:hover { color: var(--coral); }

/* Coordonnées dans la section "Le Lieu" */
.lieu-coords {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.lieu-coord {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
}
.lieu-coord:hover .lieu-coord-value { color: var(--coral-bright); }
.lieu-coord-label {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}
.lieu-coord-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  transition: color var(--t-fast);
  letter-spacing: .03em;
}

/* Honeypot Netlify Forms */
.bot-field { display: none !important; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form .field-full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: .95rem;
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(222, 53, 54, .12);
}
.field textarea { resize: vertical; min-height: 140px; }

.form-status {
  font-size: .85rem;
  color: var(--coral);
  min-height: 1.3em;
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ---------- Contact section ---------- */
.contact-section {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(222, 53, 54, .06), transparent 75%),
    var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- Map embed ---------- */
.map-frame {
  width: 100%;
  aspect-ratio: 16/10;
  border: 1px solid var(--line);
  filter: invert(.92) hue-rotate(180deg) brightness(.85) contrast(1.1) saturate(.5);
  border-radius: var(--radius);
}
.map-visual {
  overflow: visible;
}
.map-visual .map-frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
  display: block;
}
.map-visual::before { display: none; }

/* ---------- Massage section ---------- */
.massage-section {
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.massage-video-frame {
  position: relative;
  max-width: 620px;
  margin: 50px auto 0;
  aspect-ratio: 1180 / 720;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.massage-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.massage-video-frame::before {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  right: -14px; bottom: -14px;
  border: 1px solid var(--coral);
  z-index: -1;
}

/* ---------- Cadre cinématique (Google Earth) ---------- */
.cinematic-frame {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  border-radius: var(--radius);
}
.cinematic-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Page mentions légales ---------- */
.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
}
.legal-wrap article {
  margin-bottom: 2.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.legal-wrap article:last-of-type { border-bottom: none; }
.legal-wrap h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 1rem;
  color: var(--coral-bright);
}
.legal-wrap h3 {
  font-size: 1.1rem;
  margin-top: 1.4rem;
  margin-bottom: .5rem;
  color: var(--ink);
}
.legal-wrap p {
  color: var(--ink-mute);
  margin-bottom: 1rem;
  line-height: 1.75;
}
.legal-wrap p a {
  color: var(--coral);
  border-bottom: 1px solid rgba(222, 53, 54, 0.3);
}
.legal-wrap p a:hover {
  color: var(--coral-bright);
  border-bottom-color: var(--coral-bright);
}

/* ---------- Footer bottom liens ---------- */
.footer-bottom a {
  color: var(--ink-mute);
  border-bottom: 1px dotted rgba(222, 53, 54, 0.3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-bottom a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--bg), #0a0403);
  border-top: 1px solid var(--line);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
}
.footer-grid h5 {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-grid p, .footer-grid li, .footer-grid a {
  color: var(--ink-mute);
  font-size: .92rem;
  line-height: 1.9;
}
.footer-grid ul { list-style: none; }
.footer-grid a:hover { color: var(--coral); }

.footer-brand p {
  margin-top: 14px;
  max-width: 320px;
}
.footer-brand .brand img { width: auto; height: 60px; max-width: 220px; border-radius: 0; box-shadow: none; }

/* ---------- Socials ---------- */
.socials {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--coral);
  transition: all var(--t-fast);
  background: rgba(222, 53, 54, 0.05);
}
.social-icon:hover {
  background: var(--coral);
  color: #fff;                   /* contraste sur fond corail */
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--coral-glow);
}
.social-icon svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- WhatsApp floating ---------- */
.fab-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
  transition: transform var(--t-fast);
}
.fab-whatsapp:hover { transform: scale(1.08); }
.fab-whatsapp svg { width: 30px; height: 30px; }

/* ---------- Page hero (small variant for sub-pages) ---------- */
.page-hero {
  padding: 180px 0 70px;
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(222, 53, 54, .08), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: 18px; }
.page-hero .breadcrumb {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .experiences,
  .split,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .split .visual { aspect-ratio: 4/3; max-width: 520px; margin: 0 auto; }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 720px) {
  .nav {
    position: fixed;
    top: 0; right: -100%;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-soft);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 36px 40px;
    gap: 28px;
    transition: right var(--t-med);
  }
  .nav.open { right: 0; }
  .nav a { font-size: .95rem; }
  .menu-toggle { display: flex; }
  .nav-cta { align-self: stretch; text-align: center; }
  .hero-inner { padding-top: 94px; }
  .brand img { width: auto; height: 105px; max-width: 74vw; border-radius: 0; box-shadow: none; }
  .site-header.scrolled .brand img { width: auto; height: 78px; }
}

/* ---------- Avis Google CTA ---------- */
.reviews-cta {
  padding-top: clamp(50px, 7vw, 90px);
  padding-bottom: clamp(50px, 7vw, 90px);
}

/* Hero overlay (lisibilité du texte sur smoke) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 8, 6, 0.78) 0%, rgba(16, 8, 6, 0.5) 45%, rgba(16, 8, 6, 0.2) 100%),
    radial-gradient(60% 80% at 80% 50%, rgba(222, 53, 54, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; }
.scroll-cue { position: absolute; z-index: 2; }  /* hors du flux flex : ne décale plus le bloc hero */

/* ---------- Portrait mosaic ---------- */
.portrait-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
}
.portrait-mosaic-4 { grid-template-columns: repeat(4, 1fr); }
.portrait-mosaic-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .portrait-mosaic-4 { grid-template-columns: repeat(2, 1fr); }
  .portrait-mosaic-3 { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 620px; }
}
@media (max-width: 640px) {
  .portrait-mosaic-3 { grid-template-columns: 1fr; max-width: 320px; }
  .portrait-frame-desktop-only { display: none; }
}
.portrait-frame {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  position: relative;
}
/* Halo lumière saturée directionnelle Massaya (corail chaud) */
.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 20% 30%, rgba(222,53,54,.18), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(10,8,7,.6) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.portrait-frame video,
.portrait-frame img {
  filter: brightness(.88) contrast(1.18) saturate(1.15);
}
.portrait-frame video,
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .portrait-mosaic { gap: 10px; }
}

/* Single portrait frame centered */
.portrait-single {
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
}
.portrait-single video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Portrait visual dans un .split */
.split .visual.portrait-visual {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.split .visual.portrait-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Smoke divider */
.smoke-divider {
  height: clamp(120px, 18vw, 220px);
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #000;
}
.smoke-divider video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  /* Teinte ambre cuivré chaud */
  filter: contrast(1.1) brightness(.85) saturate(0) sepia(.75) hue-rotate(-12deg) saturate(2.4);
}
.smoke-divider::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}

/* ---------- Booking preview (Aperçu calendrier) ---------- */
.booking-section {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(222, 53, 54, .07), transparent 75%),
    var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.booking-preview {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
}
@media (max-width: 900px) {
  .booking-preview { grid-template-columns: 1fr; }
}
.booking-preview-text h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);  /* aligné sur les autres titres */
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.12;
}
.booking-preview-text h3 em {
  font-family: inherit;
  font-style: inherit;
  color: var(--coral);
  text-transform: inherit;
  letter-spacing: inherit;
  font-size: inherit;
}
.booking-preview-text p { margin-bottom: 1.4rem; color: var(--ink); }
.booking-preview-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.booking-preview-cta .btn { align-self: flex-start; }
.booking-preview-cta .small {
  font-size: .78rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.booking-preview-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
  display: block;
  cursor: pointer;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.booking-preview-frame:hover {
  transform: translateY(-4px);
  border-color: var(--coral);
  box-shadow: 0 18px 50px rgba(222, 53, 54, .25);
}
.booking-preview-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Visuel "carte calendrier" stylisé en fallback derrière l'iframe */
.booking-preview-mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a0d0a 0%, #21110d 100%);
  color: var(--ink);
  padding: 24px;
  z-index: 0;
}
.booking-preview-mock .mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.booking-preview-mock .mock-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .85rem;
  color: var(--coral);
}
.booking-preview-mock .mock-month {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--coral-bright);
  line-height: 1;
}
.booking-preview-mock .mock-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
  flex: 1;
}
.booking-preview-mock .mock-dow {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 4px;
}
.booking-preview-mock .mock-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  border-radius: 50%;
  color: var(--ink-mute);
  border: 1px solid transparent;
}
.booking-preview-mock .mock-day.dim { color: var(--ink-soft); opacity: .4; }
.booking-preview-mock .mock-day.free { color: var(--ink); border-color: rgba(222, 53, 54, .25); }
.booking-preview-mock .mock-day.busy { color: var(--ink-soft); text-decoration: line-through; opacity: .45; }
.booking-preview-mock .mock-day.today { background: var(--coral); color: #fff; border-color: var(--coral); font-weight: 500; box-shadow: 0 0 0 3px rgba(222, 53, 54, .25); }
.booking-preview-mock .mock-footer {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-align: center;
  text-transform: uppercase;
}
.booking-preview-mock .mock-footer span { color: var(--coral); }

/* ---------- Booking modal (legacy, kept for compat) ---------- */
.booking-modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 8, 6, .85);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.booking-modal.open { display: flex; }
.booking-modal-card {
  width: min(960px, 100%);
  height: min(720px, 90vh);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(222, 53, 54, .12);
}
.booking-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(16, 8, 6, .8);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all var(--t-fast);
}
.booking-modal-close:hover {
  background: var(--coral);
  color: #fff;                   /* contraste sur fond corail */
  border-color: var(--coral);
}
.booking-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* ---------- Small utilities ---------- */
.center { text-align: center; }
.muted  { color: var(--ink-mute); }
.coral  { color: var(--coral); }
.gold   { color: var(--coral); }
.spacer-sm { height: 24px; }
.spacer-md { height: 48px; }

/* =========================================================
   FILET DE SECURITE FINAL - CURSIVE RETIREE
   Les mots accentues heritent de la police du titre,
   seule la couleur corail les distingue (rendu epure).
   ========================================================= */
html body h1 em,
html body h2 em,
html body h3 em,
html body h4 em,
html body h5 em,
html body h6 em,
html body .script,
html body section h1 .script,
html body section h2 .script,
html body .hero h1 .script,
html body .booking-preview-text h3 em {
  font-family: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  font-size: inherit !important;
  color: var(--coral) !important;
}
html body .inclusive-box h4 {
  font-family: var(--font-title) !important;
  color: var(--coral) !important;
}

/* =========================================================
   THEME CLAIR - overrides des surfaces sombres héritées
   Objectif : fond clair + corail (logo), retrait du grain /
   des néons / des fonds noirs "boîte de nuit".
   ========================================================= */

/* Retrait du grain cinéma + halos sombres ambiants */
body::after { display: none !important; }
body::before {
  background:
    radial-gradient(60% 45% at 8% 4%,  rgba(231, 51, 49, 0.04), transparent 70%),
    radial-gradient(55% 40% at 94% 98%, rgba(201, 106, 63, 0.04), transparent 70%);
}

/* Header : translucide clair une fois scrollé */
.site-header.scrolled {
  background: rgba(251, 250, 249, 0.9);
  border-bottom: 1px solid var(--line);
}
/* Nav lisible : blanche par-dessus le hero (desktop), foncée une fois scrollée */
@media (min-width: 721px) {
  .site-header:not(.scrolled) .nav a { color: #fff; }
  .site-header:not(.scrolled) .nav a:hover { color: #fff; }
}
.site-header:not(.scrolled) .menu-toggle span { background: #fff; }

/* Hero : vidéo conservée, texte clair + voile doux (moins "club") */
.hero::before {
  background:
    linear-gradient(180deg, rgba(20, 13, 11, 0.30) 0%, rgba(20, 13, 11, 0.10) 45%, var(--bg) 100%);
}
.hero::after { opacity: .5; }
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(24, 15, 12, 0.66) 0%, rgba(24, 15, 12, 0.38) 45%, rgba(24, 15, 12, 0.08) 100%);
}
.hero h1 { color: #fff; }
.hero p.lead { color: rgba(255, 255, 255, 0.92); }
.hero .event-tag { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero .scroll-cue { color: var(--coral); }

/* Footer clair */
.site-footer {
  background: linear-gradient(180deg, var(--bg), var(--bg-soft));
}

/* Cadres vidéo : fond clair au chargement (au lieu de noir) */
.massage-video-frame,
.cinematic-frame,
.smoke-divider { background: var(--bg-soft); }

/* Portraits : retrait du halo néon + filtre ciné adouci */
.portrait-frame::after { display: none; }
.portrait-frame video,
.portrait-frame img { filter: contrast(1.03) saturate(1.04); }
.split .visual img,
.split .visual video { filter: contrast(1.04) saturate(1.05); }

/* Google Maps : rendu clair (retrait de l'inversion sombre) */
.map-frame { filter: grayscale(0.15) contrast(1.02); }

/* Aperçu calendrier : carte claire */
.booking-preview-mock {
  background: linear-gradient(180deg, #ffffff 0%, #f5f2ee 100%);
}

/* Modale legacy : voile clair */
.booking-modal { background: rgba(24, 15, 12, 0.55); }
.booking-modal-close { background: rgba(255, 255, 255, 0.9); }

/* Citation / signature manuscrite (section Mon approche) */
.credo {
  max-width: 760px;
  margin: 0 auto clamp(46px, 7vw, 82px);
  text-align: center;
}
.credo p {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
  margin: 0 auto;
}
.credo .signature {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--coral);
  line-height: 1;
}

/* Tarifs (section Les séances) */
.tarifs {
  max-width: 640px;
  margin: clamp(44px, 6vw, 72px) auto 0;
  text-align: center;
}
.tarifs-grid {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 64px);
  flex-wrap: wrap;
  margin-bottom: 1.7rem;
}
.tarif {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tarif-duree {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1;
}
.tarif-prix {
  font-family: var(--font-label);
  font-size: clamp(1.2rem, 2.7vw, 1.6rem);
  letter-spacing: .03em;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
}
.tarif-note {
  color: var(--ink-mute);
  font-size: .95rem;
  max-width: 540px;
  margin: .5rem auto 0;
}

/* Titre "Tarifs" au-dessus des prix */
.tarifs-title {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 1.7rem;
}
.tarif-prix { white-space: nowrap; }

/* Ligne "Massage express" placée au-dessus des prix */
.tarif-express {
  text-align: center;
  color: var(--ink-mute);
  font-size: .92rem;
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 0 auto 1.7rem;
  max-width: 470px;
}

/* Bloc "Informations" (séparé du message social) */
.tarif-infos {
  margin: 2.2rem auto 0;
  max-width: 460px;
}
.tarif-infos-title {
  display: block;
  font-family: var(--font-label);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .8rem;
}
.tarif-infos p {
  color: var(--ink-mute);
  font-size: .8rem;
  line-height: 1.5;
  max-width: none;
  margin: .2rem auto;
}

/* Message social : plus doux, plus petit, discret */
.tarif-note-accent {
  color: var(--coral);
  font-size: .82rem;
  line-height: 1.65;
  max-width: 430px;
  margin: 2.4rem auto 0;
}

/* =========================================================
   ÉCLAIRCISSEMENT DES VIDÉOS (toutes conservées, rendu plus lumineux)
   ========================================================= */
.split .visual img,
.split .visual video,
.split .visual.portrait-visual video,
.portrait-frame img,
.portrait-frame video,
.massage-video-frame video {
  filter: brightness(1.06) contrast(1.0) saturate(1.03);  /* léger : la luminosité est désormais encodée dans les fichiers */
}
.hero-video {
  filter: brightness(1.4) contrast(1.0) saturate(1.06);
}

/* Mobile : la 3e vignette (massage, desktop only) est masquée ; il ne reste que les deux premières empilées */

/* Bloc abonnement (carte de fidélité) */
.tarif-abo {
  margin: 2rem auto 0;
  max-width: 460px;
  padding: 16px 24px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(231, 51, 49, .06), transparent 70%),
    var(--bg-card);
  border-radius: 4px;
}
.tarif-abo-label {
  display: block;
  font-family: var(--font-label);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: .5rem;
}
.tarif-abo p {
  color: var(--ink);
  font-size: .98rem;
  max-width: none;
  margin: 0;
}

/* Hero : bouton secondaire lisible sur la vidéo sombre */
.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero .btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* =========================================================
   POP-UP PROMO D'ÉTÉ
   ========================================================= */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo-modal[hidden] { display: none; }
.promo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 15, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.promo-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .40);
  animation: promo-pop .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes promo-pop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.promo-modal-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92vh - 76px);
  object-fit: contain;
}
.promo-modal-cta {
  padding: 14px 18px 18px;
  text-align: center;
  background: var(--bg-card, #fff);
}
.promo-modal-cta .btn { width: 100%; }
.promo-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1c1512;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .15s ease, background .15s ease;
}
.promo-modal-close:hover { transform: scale(1.08); background: #fff; }
body.promo-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .promo-modal-card { animation: none; }
}