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

:root {
  /* Palette v2 - Noir brutaliste, néons cuivrés, ambré chaud */
  --bg:            #0A0807;       /* noir profond */
  --bg-soft:       #120E0C;       /* surfaces, légèrement chaud */
  --bg-card:       #181311;       /* cartes */
  --line:          rgba(222, 53, 54, 0.14);
  --line-strong:   rgba(222, 53, 54, 0.38);

  --ink:           #F2EAE2;       /* texte principal blanc cassé */
  --ink-mute:      #A89C92;
  --ink-soft:      #6F6259;

  /* Rouge corail officiel marque (#DE3536) + accent ambré chaud Massaya */
  --coral:         #DE3536;       /* rouge corail principal - HEX officiel marque */
  --coral-bright:  #FF4F4D;       /* hover / clair */
  --coral-deep:    #A5252A;       /* enfoncé */
  --coral-glow:    rgba(222, 53, 54, 0.55);
  --ember:         #E8A766;       /* ambre cuivré, accent secondaire */
  --copper:        #C97B5C;       /* 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;
  --font-script:   'Pinyon Script', 'Sacramento', 'Italianno', 'Brush Script MT', 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: 16px;
  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 écran : Anton condensé serré majuscules (style Druk / Helvetica Inserat
     comme MASSAYA POWER CLUB, THE RISE EXPERIENCE) */
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
}

h3, h4 {
  /* Sous-titres : sérif romain élégant (assorti au logo) */
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .04em;
  color: var(--ink);
}

h1 {
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  letter-spacing: .02em;
}
h2 {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  letter-spacing: .025em;
}
h3 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); }

/* "em" dans les titres = Pinyon Script (même typo que "Atelier Du Corps" du logo)
   ex: "parole", "intention", "refuge", "Territet", "créneau", "message" */
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--font-script) !important;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--coral);
  font-size: 1.7em;        /* Pinyon est plus condensé, on monte un peu */
  line-height: .85;
  display: inline-block;
  vertical-align: baseline;
}
h1 em { font-size: 1.45em; }

.script {
  font-family: var(--font-script) !important; /* Sacramento - match "Atelier Du Corps" du logo */
  font-weight: 400;
  color: var(--coral);
  font-size: 1.7em;
  line-height: .9;
  text-transform: none;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.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(70px, 11vw, 130px) 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: 110px; height: 110px; 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: 200px;          /* PASTILLE AGRANDIE (corail plein) */
  height: 200px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  box-shadow: 0 6px 28px rgba(222, 53, 54, .25);
}
.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;
  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: 160px;
  padding-bottom: 80px;
  max-width: 760px;
}
.hero h1 {
  margin-bottom: 1.4rem;
  /* hero h1 = Anton condensé brutalist Massaya */
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 0 4px 30px rgba(0,0,0,.65);
}
/* "portée au corps." = identique au "Atelier Du Corps" du logo : Pinyon Script */
.hero h1 .script {
  display: block;
  font-family: var(--font-script) !important;
  font-weight: 400;
  font-size: 1.85em;        /* Pinyon plus condensé */
  color: var(--coral);
  letter-spacing: 0;
  text-transform: none;
  margin: -.05em 0 -.1em;
  text-shadow: none;
  transform: none;
  line-height: .9;
}
.hero p.lead {
  max-width: 540px;
  margin-bottom: 2.2rem;
}

.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(50px, 7vw, 80px);
}
.section-title p { margin: 1.2rem auto 0; }

/* ---------- 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: 400;
  font-size: 2.4rem;
  line-height: 1;
  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: 110px; height: 110px; }

/* ---------- 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: 120px; }
  .brand img { width: 130px; height: 130px; }
  .site-header.scrolled .brand img { width: 84px; height: 84px; }
}

/* ---------- 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: relative; z-index: 2; }

/* ---------- 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: 560px) {
  .portrait-mosaic-3 { grid-template-columns: 1fr; max-width: 320px; }
}
.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-headline);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
}
.booking-preview-text h3 em {
  font-family: var(--font-script) !important;
  font-style: normal;
  color: var(--coral);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.5em;
}
.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 SÉCURITÉ FINAL - SACRAMENTO FORCÉ
   (placé en dernier, !important, selectors les plus spécifiques)
   Cible : portée au corps., parole, l'intention,
   Pour celles et ceux qui hésitent à pousser la porte,
   refuge, dit, Territet, créneau, en ligne, message, en haut.
   ========================================================= */
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 .inclusive-box h4,
html body .booking-preview-text h3 em {
  font-family: 'Pinyon Script', 'Sacramento', 'Italianno', cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--coral) !important;
}