/* =============================================================================
   styles.css — Salon Nadine
   -----------------------------------------------------------------------------
   Organisation :
   1. Variables (couleurs, espacements) + reset léger
   2. Éléments de base (typo, boutons, conteneur)
   3. En-tête / navigation
   4. Héro
   5. Barre défilante
   6. Catalogue + cartes
   7. Avis clients
   8. Contact + carte
   9. Pied de page
   10. Modales
   11. Utilitaires + animations d'apparition
   12. Points de rupture responsive
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. VARIABLES + RESET
   -------------------------------------------------------------------------- */
:root {
  /* Thème : vert turquoise, demandé par le client */
  --turquoise:        #12b5a5;
  --turquoise-dark:   #0c8478;
  --turquoise-darker: #0a5f57;
  --turquoise-soft:   #e5f7f4;   /* petits encarts pâles (contraste sur le vert) */
  --turquoise-tint:   #A0E7E1; /* fond de section (demandé par le client) */

  --ink:      #16302c;           /* texte principal (vert très sombre, pas noir pur) */
  --ink-soft: #55635f;           /* texte secondaire */
  --line:     #e2e8e6;           /* bordures discrètes */
  --bg:       #A0E7E1;   /* fond général du site (demandé par le client) */
  --bg-alt:   #A0E7E1;

  --gold:     #d9a441;           /* accent chaud pour les étoiles / prix */
  --amber:    rgb(206, 144, 25); /* accent "Call" (bouton flottant, icône, carte horaires) */
  --amber-dark: rgb(178, 124, 21);

  --radius:      14px;
  --radius-lg:   22px;
  --shadow-sm:   0 2px 10px rgba(16, 48, 44, 0.06);
  --shadow-md:   0 14px 40px rgba(16, 48, 44, 0.12);

  --max-width: 1140px;
  --pad:       clamp(1rem, 4vw, 2rem);

  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* L'attribut [hidden] doit TOUJOURS l'emporter, même sur les éléments qui ont
   un display explicite (ex. .btn { display:inline-flex }, li { display:flex }). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* -----------------------------------------------------------------------------
   2. ÉLÉMENTS DE BASE
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

h1 {color: #CE9019; font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

a { color: var(--turquoise-dark); }

.section-title { text-align: center; color: #CE9019; }
/* Titre sur 2 lignes : 1re ligne noire, 2e ligne jaune (ex. about-bloc). */
.section-title .tt-line1 { display: block; color: #111; }
.section-title .tt-line2 { display: block; color: yellow; }

.section-subtitle {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 2.5rem;
  color: var(--ink-soft);
}

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--turquoise);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 181, 165, 0.28);
}
.btn-primary:hover { background: var(--turquoise-dark); }

.btn-ghost {
  background: transparent;
  color: var(--turquoise-dark);
  border-color: var(--turquoise);
}
.btn-ghost:hover { background: var(--turquoise-soft); }

.btn-amber {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 8px 20px rgba(206, 144, 25, 0.3);
}
.btn-amber:hover { background: var(--amber-dark); }

.btn-block { width: 100%; margin-top: 0.5rem; }

/* -----------------------------------------------------------------------------
   3. EN-TÊTE / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 8px;          /* bords un peu arrondis */
  object-fit: cover;
}
.logo-text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  /* nom de salon long ("NADYNE AFRICAN HAIR BRAIDING") : on autorise 2 lignes
     compactes plutôt qu'une ligne qui pousse la navigation */
  max-width: 15ch;
  color: rgb(38, 236, 38);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  font-size: 0.95rem;
  white-space: nowrap;          /* aucun libellé de menu ne se coupe en deux */
}
.site-nav a:not(.btn):hover { color: var(--turquoise-dark); }
/* Page courante (site multi-pages) : lien mis en évidence */
.site-nav a[aria-current="page"]:not(.btn) {
  color: var(--turquoise-dark);
  font-weight: 500;
}
.nav-cta { padding: 0.6rem 1.15rem; }

/* Bouton hamburger : masqué sur desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* -----------------------------------------------------------------------------
   4. HÉRO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Héro agrandi : laisse de la place aux photos verticales affichées EN ENTIER. */
  min-height: clamp(520px, 82vh, 880px);
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;

  /* Image de fond de repli (SALON_CONFIG.heroImage, posée par main.js dans
     --hero-image). Utilisée sans JS, ou avant le chargement du diaporama.
     Sans image : dégradé turquoise seul. Le voile sombre est sur .hero::after. */
  background-color: var(--turquoise-darker);
  background-image: var(--hero-image, linear-gradient(160deg, var(--turquoise-dark), var(--turquoise-darker)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Diaporama : couches d'images empilées derrière le contenu, injectées par
   main.js (initHero). Chaque .hero-slide porte sa photo dans --slide-img ;
   on passe de l'une à l'autre en jouant sur l'opacité. */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }

/* Deux couches par diapo, toutes deux avec la MÊME image (--slide-img) :
   - ::before = image en plein cadre, très floutée -> remplit les côtés,
     supprime les bandes vides (rien n'est coupé visuellement)
   - ::after  = la photo affichée EN ENTIER (contain), calée à droite sur
     grand écran pour ne pas gêner le texte à gauche
   ::after est peint APRÈS ::before, donc la photo nette reste au-dessus du flou. */
.hero-slide::before,
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-img);
  background-repeat: no-repeat;
  background-position: center;
}
.hero-slide::before {
  background-size: cover;
  filter: blur(32px) saturate(1.12) brightness(1.06);
  transform: scale(1.15);
}
.hero-slide::after {
  background-size: contain;
  filter: brightness(1.06) saturate(1.03);
}

@media (min-width: 900px) {
  .hero-slide::after { background-position: right center; }
}

/* Voile turquoise LÉGER : juste assez à gauche pour garder le texte lisible,
   quasi transparent à droite pour que la photo ressorte bien plus claire. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(8, 46, 42, 0.56) 0%,
    rgba(8, 46, 42, 0.40) 40%,
    rgba(8, 46, 42, 0.20) 62%,
    rgba(8, 46, 42, 0.05) 100%);
  pointer-events: none;
}

/* Le contenu passe au-dessus du voile et des images. */
.hero > .container { position: relative; z-index: 2; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* --- Texte du héro : blanc sur la photo ------------------------------- */
/* Ombre portée discrète : le voile étant plus léger, elle garde le texte
   lisible même sur les zones claires de la photo. */
.hero-text { text-shadow: 0 1px 3px rgba(6, 26, 24, 0.55), 0 2px 18px rgba(6, 26, 24, 0.5); }
.hero h1 { color: yellow; }

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  color: #16ae02;
  margin: 0 0 1rem;
}

.hero-lead {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  margin: 1.2rem 0 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* le bouton "ghost" du héro : contour blanc sur fond sombre */
.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;
  margin: 2.75rem 0 0;
}
.hero-facts li { display: flex; flex-direction: column; }
.hero-facts strong {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: #fff;
}
.hero-facts span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }

/* -----------------------------------------------------------------------------
   4-bis. BLOC BAS DU HÉRO — 2 photos + zone de texte SUR LA MÊME LIGNE
   Section agrandie : photos au ratio d'origine (aucun recadrage), coins un
   peu arrondis. 3 colonnes : photo | photo | texte. Depuis HERO_BLOC.
   -------------------------------------------------------------------------- */
.hero-bloc {
  padding: clamp(3rem, 9vw, 6.5rem) 0;
  background: var(--turquoise-tint);
}
.hero-bloc[hidden] { display: none; }

.hero-bloc-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;   /* photo | photo | texte, même ligne */
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.hero-bloc-photo {
  margin: 0;
  border-radius: var(--radius);          /* "un peu arrondi" */
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--turquoise-soft);
  width: 100%;
}
.hero-bloc-photo[hidden] { display: none; }
/* Photo affichée EN ENTIER, à sa taille (ratio d'origine conservé). */
.hero-bloc-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-bloc-text .section-title { text-align: left; margin-bottom: 0.75rem; }
.hero-bloc-text p { color: var(--ink-soft); margin: 0 0 1rem; }
.hero-bloc-text .btn { margin-top: 0.5rem; }

/* Tablette : les 2 photos sur une ligne, le texte dessous */
@media (max-width: 900px) {
  .hero-bloc-inner { grid-template-columns: 1fr 1fr; }
  .hero-bloc-text {
    grid-column: 1 / -1;
    max-width: 68ch;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    text-align: center;
  }
  .hero-bloc-text .section-title { text-align: center; }
}
/* Mobile : tout sur une colonne */
@media (max-width: 560px) {
  .hero-bloc-inner { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   4a. BANDEAU DE TITRE DE PAGE (pages About / Video / Services)
   Petit en-tête sous la barre de navigation, sur les pages internes.
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--turquoise-tint);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 6vw, 3.5rem) 0;
  text-align: center;
}
.page-head-title { margin: 0 0 0.35rem; }
.page-head-lead {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--ink-soft);
  font-weight: bold;
}
.page-head .btn { margin-top: 1.25rem; }
/* Sur les pages internes, la 1re section suit le bandeau : on réduit son
   espace haut pour éviter un double vide. */
.page-head + .about-section,
.page-head + .videos-section,
.page-head + .catalogue-section { padding-top: clamp(2rem, 5vw, 3rem); }

/* -----------------------------------------------------------------------------
   4b. SECTION « À PROPOS »
   -------------------------------------------------------------------------- */
.about-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--bg);
}
.about-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;   /* texte | photo centre | photo droite */
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
}
/* Pas de 2e photo -> la 1re garde sa colonne (pas d'étirement forcé). */
.about-section .section-title { text-align: left; }
.about-lead {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--turquoise-dark);
  margin-bottom: 1.25rem;
}
.about-text p { color: var(--ink-soft); margin: 0 0 1rem; }

.about-figures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding: 0;
  margin: 1.75rem 0 0;
}
.about-figures li { display: flex; flex-direction: column; }
.about-figures strong {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--turquoise-dark);
}
.about-figures span { font-size: 0.82rem; color: var(--ink-soft); }

/* Les 2 photos : centre + droite (2e = APROPOS.image2), colonnes directes
   de .about-inner. */
.about-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 4;
  background: var(--turquoise-soft);
}
.about-photo[hidden] { display: none; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 780px) {
  .about-inner { grid-template-columns: 1fr 1fr; }   /* photos côte à côte */
  .about-section .section-title { text-align: center; }
  .about-lead { text-align: center; }
  /* Les 2 photos passent avant le texte (ordre par défaut = 0). */
  .about-inner .about-text { grid-column: 1 / -1; order: 2; }
}

/* Bloc bas de la section "About" (réutilise .info-bloc-main : image à gauche,
   texte à droite). On ajoute juste l'espace au-dessus. */
.about-bloc { margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.about-bloc[hidden] { display: none; }

/* Tableau des coiffures (2e bloc "About") — SANS bordure, 3 colonnes. */
.styles-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.25rem 0 1.5rem;
}
.styles-table[hidden] { display: none; }
.styles-table td {
  border: 0;
  width: 33.33%;
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  vertical-align: middle;
  border-radius: 8px;
  transition: background-color 0.55s ease, color 0.55s ease;
}
.styles-table td::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--turquoise);
  vertical-align: middle;
  transition: background-color 0.55s ease;
}

/* Surbrillance défilante : main.js ne pose .is-lit que sur UNE case à la fois.
   La transition ci-dessus fait le fondu de retour quand elle repart. */
.styles-table td.is-lit {
  background-color: #CE9019;
  color: #fff;
}
.styles-table td.is-lit::before { background: #fff; }
.about-bloc .info-bloc-media img { transition: opacity 0.45s ease; }

@media (max-width: 560px) {
  /* Une SEULE ligne visible à la fois (main.js masque les autres via [hidden]) ;
     ses 3 cases s'alignent horizontalement et le fond défile dessus. */
  .styles-table,
  .styles-table tbody { display: block; width: 100%; }
  .styles-table tr {
    display: flex;
    width: 100%;
    gap: 0.4rem;
    min-height: 3.2rem;          /* hauteur stable quand on change de ligne */
  }
  .styles-table tr[hidden] { display: none; }
  .styles-table td {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.6rem 0.35rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .styles-table td::before { display: none; }   /* puce masquée : trop serré à 3 par ligne */
}

/* Encart texte encadré (bas de "About") :
   bordure vert clair + coins arrondis + ombre turquoise. */
.about-encart {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding: clamp(1.75rem, 5vw, 3rem);
  border: 2px solid #7ecec1;                            /* vert clair */
  border-radius: var(--radius-lg);                      /* coins arrondis */
  box-shadow: 0 16px 44px rgba(18, 181, 165, 0.28);     /* ombre vert turquoise */
  background: #fff;                                     /* encadré blanc sur le fond vert */
}
.about-encart[hidden] { display: none; }
.about-encart .section-title { text-align: center; margin-bottom: 0.9rem; }
.about-encart p { color: var(--ink-soft); margin: 0 0 1rem; }
.about-encart p:last-child { margin-bottom: 0; }

/* Image + zone de texte sans titre (tout en bas de "About"). */
.about-figure {
  margin: clamp(2.5rem, 7vw, 4.5rem) auto 0;
  max-width: 820px;
}
.about-figure[hidden] { display: none; }
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about-figure figcaption {
  margin-top: 1.1rem;
  color: var(--ink-soft);
}
/* "deux sauts de ligne" entre chaque bloc question/réponse */
.about-figure figcaption p { margin: 0 0 1.8rem; }
.about-figure figcaption p:last-child { margin-bottom: 0; }

/* En-tête FAQ (1er paragraphe de about-figure) */
.about-figure .fig-qa {
  display: block;
  font-weight: 700;
  color: #CE9019;
}
.about-figure .fig-faq {
  display: block;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  margin-top: 0.15rem;
}

/* -----------------------------------------------------------------------------
   5. BARRE DÉFILANTE
   -------------------------------------------------------------------------- */
.marquee-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--bg);
}

.marquee {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.marquee-viewport {
  overflow: hidden;
  width: 100%;
  /* dégradé de fondu sur les bords pour un rendu propre */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 1.25rem;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
/* Pause au survol ou au focus clavier d'un élément de la piste */
.marquee:hover .marquee-track,
.marquee-track:focus-within { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* -50% car la piste est dupliquée */
}

.marquee-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 280px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.marquee-item:hover img { transform: scale(1.05); }
.marquee-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10, 95, 87, 0.85));
}

.marquee-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--turquoise-dark);
}
.marquee-nav:hover { background: var(--turquoise-soft); }

/* Accessibilité : si l'utilisateur limite les animations, on coupe le
   défilement automatique et on montre les flèches de navigation. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .marquee-item { scroll-snap-align: start; }
  .marquee-nav { display: block !important; }
}

/* -----------------------------------------------------------------------------
   5-bis. BLOC INFO (bas de la barre défilante) — photo à gauche, texte à
   droite (façon "About"). En bas : "Hours" + horaires, séparés par un petit
   trait vert clair.
   -------------------------------------------------------------------------- */
.info-bloc {
  max-width: var(--max-width);
  margin: clamp(2.5rem, 7vw, 4.5rem) auto 0;
  padding-inline: var(--pad);
}
.info-bloc[hidden] { display: none; }

.info-bloc-main {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;   /* photo | texte */
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.info-bloc-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  background: var(--turquoise-soft);
}
.info-bloc-media[hidden] { display: none; }
.info-bloc-media img { width: 100%; height: 100%; object-fit: fill; }

.info-bloc-text .section-title { text-align: left; margin-bottom: 0.75rem; }
.info-bloc-text p {text-align: left; color: var(--ink-soft); margin: 0 0 1rem; }
.info-bloc-text .btn { margin-top: 0.5rem; }

/* Photo posée entre le texte et le bouton (hero-bloc-text / info-bloc-text).
   RESPONSIVE UNIQUEMENT : visible sous 780 px (mise en page en 1 colonne),
   masquée sur écran large. */
.hero-bloc-text .bloc-inline-photo,
.info-bloc-text .bloc-inline-photo {
  display: none;
}
@media (max-width: 780px) {
  .hero-bloc-text .bloc-inline-photo,
  .info-bloc-text .bloc-inline-photo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0.5rem auto 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
}

/* Guillemets de la citation (INFO_BLOC) : plus gros et en gras */
.info-bloc-text .quote-mark {
  font-weight: 700;
  font-size: 1.9em;
  line-height: 0;
  vertical-align: -0.35em;
  color: var(--ink);
}

/* Petit trait vert clair entre le bloc et les horaires */
.info-bloc-sep {
  width: 100px;
  height: 3px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  border: 0;
  border-radius: 999px;
  background: #7ecec1;                     /* vert turquoise clair */
}

/* Carte "Today's hours" : titre + badge ouvert/fermé, 1 ligne par jour,
   bouton "See our services". Fond blanc, ombre douce. */
.hours-card {
  text-align: left;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hours-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hours-card-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
}
.hours-badge {
  flex: 0 0 auto;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: #f5e3c3;
  color: #7a5610;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.hours-badge.is-closed { background: #f3dcdc; color: #8a2e2e; }
.hours-card .horaires { max-width: 100%; margin: 0 auto 1.25rem; }
.hours-card .horaires td:first-child { color: var(--ink); }

/* 4 pastilles sous la carte (note Google, avis, jours d'ouverture, walk-ins). */
.hours-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1rem;
  max-width: 460px;
  margin: clamp(2rem, 5vw, 2.75rem) auto 0;
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.hours-stat-value {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--amber);
}
.hours-stat-label {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Sélecteur heure / minute (formulaire de rendez-vous) --------------- */
.time-picker { display: flex; align-items: center; gap: 0.4rem; }
.time-picker select { flex: 1; min-width: 0; }
.time-sep { color: var(--ink-soft); font-weight: 600; }

/* --- Bouton "Call" flottant (mobile uniquement) -------------------------- */
.mobile-call-btn {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 60;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(206, 144, 25, 0.4);
}
.mobile-call-btn:hover { background: var(--amber-dark); }

@media (max-width: 780px) {
  .mobile-call-btn { display: inline-flex; }
}

/* 2e sous-bloc : texte à GAUCHE, photo à DROITE. */
.info-bloc-main--reverse {
  grid-template-columns: 1.15fr 0.85fr;   /* texte | photo */
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 780px) {
  .info-bloc-main { grid-template-columns: 1fr; }
  .info-bloc-text { text-align: center; }
  .info-bloc-text .section-title { text-align: center; }
  .info-bloc-media { aspect-ratio: 16 / 10; }
  /* photo au-dessus du texte, même en mode "texte d'abord" */
  .info-bloc-main--reverse .info-bloc-media { order: -1; }
  /* about.html : en responsive, la case des photos passe en PORTRAIT (3/4) —
     comme la plupart des photos de coiffures — pour qu'on voie la coiffure
     entière et pas juste une fine bande. L'image remplit toute la case sans
     être déformée (cover) et le cadrage penche vers le haut (crâne / raie /
     longueur de la coiffure gardés, plutôt que le cou / les épaules). */
  .about-bloc .info-bloc-media { aspect-ratio: 3 / 4; }
  .about-bloc .info-bloc-media img {
    object-fit: cover;
    object-position: center 18%;
  }
}

/* Bande défilante insérée dans la section "About" (pas une section à part :
   on ajoute juste l'espace vertical). */
.about-marquee-wrap {
  margin: clamp(2.5rem, 7vw, 4.5rem) 0;
}
.about-marquee-wrap[hidden] { display: none; }

/* Grille photos SANS bordure (bas du bloc info) — 3 colonnes, cases carrées. */
.photo-grid {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.photo-grid[hidden] { display: none; }
.photo-grid td {
  border: 0;
  width: 33.333%;
  padding: clamp(0.25rem, 1vw, 0.5rem);
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  cursor: zoom-in;
}

/* -----------------------------------------------------------------------------
   6. CATALOGUE
   -------------------------------------------------------------------------- */
.catalogue-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--bg-alt);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.filter {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.filter:hover { border-color: var(--turquoise); color: var(--turquoise-dark); }
.filter.is-active {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: #fff;
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* Vignette des cartes : format PORTRAIT (3/4), comme la grande majorité des
   photos de coiffures (58 sur 76 sont verticales). L'ancien 3/2 paysage ne
   montrait qu'une fine bande au milieu de la photo. "center 30%" = le cadrage
   penche vers le haut (crâne / raie / longueur gardés) sans couper les photos
   de salon où la tête est plus bas. */
.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--turquoise-soft);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.card-cat {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--turquoise-darker);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  flex: 1;
}
.card-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}
.card-resume {
  font-size: 0.9rem;
  color: var(--ink-soft);
  flex: 1;
  white-space: pre-line;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: var(--turquoise-soft);
  color: var(--turquoise-darker);
}
.chip-price {
  background: #fbf1dc;
  color: #8a6316;
  font-weight: 500;
}

.card-actions { margin-top: 0.9rem; }
.card .btn { width: 100%; }

/* -----------------------------------------------------------------------------
   7. AVIS CLIENTS
   -------------------------------------------------------------------------- */
.reviews-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--bg);
}

/* Conteneur du widget d'avis externe (Trustindex, Elfsight…) */
.reviews-widget { margin-top: 1rem; }
.reviews-widget[hidden] { display: none; }
[data-avis-fallback][hidden] { display: none; }

.reviews-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 2.5rem;
}
.reviews-score {
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stars { color: var(--gold); font-size: 1.15rem; letter-spacing: 0.1em; }
.stars .empty { color: #d8dedc; }
.reviews-count { font-size: 0.9rem; color: var(--ink-soft); }
.reviews-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;                 /* carte blanche sur le fond vert */
}
.review-head { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--turquoise);
  color: #fff;
  font-weight: 600;
  overflow: hidden;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-author { font-weight: 500; font-size: 0.95rem; }
.review-date { font-size: 0.78rem; color: var(--ink-soft); }
.review-text { font-size: 0.9rem; color: var(--ink-soft); }

.reviews-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.reviews-disclaimer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   8. CONTACT + CARTE
   -------------------------------------------------------------------------- */
.contact-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--turquoise-tint);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-section .section-title { text-align: left; }

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
}
.contact-list li { display: flex; flex-direction: column; }
.contact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--turquoise-dark);
  font-weight: 500;
}

.contact-subtitle {
  font-family: var(--font-title);
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.horaires { border-collapse: collapse; width: 100%; margin-bottom: 1.75rem; }
.horaires td { padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; font-weight: bold;}
.horaires td:last-child { text-align: right; color: var(--ink-soft); }

.socials { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.socials a {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--turquoise-darker);        /* les SVG utilisent currentColor */
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.socials a:hover {
  background: var(--turquoise);
  color: #fff;
  transform: translateY(-2px);
}
.socials a svg { display: block; }

.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 420px;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

/* -----------------------------------------------------------------------------
   9. PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #cddedb;
  padding: 2.5rem 0;
}
.site-footer a { color: #fff; }
.footer-inner { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.footer-small { font-size: 0.82rem; color: #9bb3af; }

/* Variante "split" (accueil) : infos à gauche, bloc "Contact Us" à droite. */
.footer-inner--split {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 2rem;
  text-align: left;
}
.footer-inner--split .footer-main { display: flex; flex-direction: column; gap: 0.5rem; }

.footer-contact { text-align: right; }
.footer-contact-title {
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.1rem;
  margin: 0 0 0.9rem;
  text-decoration: underline;             /* titre souligné */
  text-underline-offset: 4px;
  text-align: center;
  padding-bottom: 10px;
}
.footer-inner--split .footer-contact .socials { justify-content: flex-end; }

/* Icônes sociales du pied de page : pastille en COULEUR DE MARQUE + icône
   blanche -> bien visibles sur le fond sombre du footer.
   (Sinon, la règle ".site-footer a { color:#fff }" rendait l'icône blanche
    sur une pastille blanche = invisible.) */
.site-footer .socials a {
  background: var(--turquoise);
  border-color: transparent;
  color: #fff;
}
.site-footer .socials a[data-net="instagram"] { background: #e1306c; }
.site-footer .socials a[data-net="facebook"]  { background: #1877f2; }
.site-footer .socials a[data-net="tiktok"]    { background: #010101; }
.site-footer .socials a[data-net="youtube"]   { background: #ff0000; }
.site-footer .socials a[data-net="snapchat"]  { background: #fffc00; color: #1a1a1a; }
.site-footer .socials a[data-net="whatsapp"]  { background: rgb(206, 144, 25); } /* icône "Call" (ex-WhatsApp) */
.site-footer .socials a:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

@media (max-width: 640px) {
  .footer-inner--split { flex-direction: column; align-items: center; text-align: center; }
  .footer-inner--split .footer-main { align-items: center; }
  .footer-contact { text-align: center; }
  .footer-inner--split .footer-contact .socials { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   10. MODALES
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.modal[hidden] { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 40, 37, 0.55);
  backdrop-filter: blur(2px);
}

.modal-box {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: modal-in 0.22s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.modal-close:hover { background: var(--turquoise-soft); }

/* Fiche détail : la photo s'affiche en ENTIER (contain) dans une zone haute
   (jusqu'à 70 % de la hauteur d'écran) -> la coiffure n'est jamais coupée.
   Un clic ouvre toujours la visionneuse plein écran. */
.detail-media {
  position: relative;
  height: min(70vh, 600px);
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--turquoise-soft);
}
.detail-media img { width: 100%; height: 100%; object-fit: contain; }
.detail-cat {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--turquoise-darker);
}

/* --- Carrousel de la fenêtre de détail (prestation à plusieurs photos) --- */
.detail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.detail-arrow:hover { background: #fff; }
.detail-arrow.prev { left: 0.75rem; }
.detail-arrow.next { right: 0.75rem; }
.detail-arrow[hidden] { display: none; }

.detail-counter {
  position: absolute;
  bottom: 0.75rem; right: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(10, 40, 37, 0.7);
  color: #fff;
}
.detail-counter[hidden] { display: none; }

.detail-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem 0;
  overflow-x: auto;
}
.detail-thumbs[hidden] { display: none; }
.detail-thumbs button {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.detail-thumbs button:hover { opacity: 1; }
.detail-thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: var(--turquoise);
}
.detail-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Pastille "nombre de photos" sur les cartes du catalogue */
.card-count {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  background: rgba(10, 40, 37, 0.72);
  color: #fff;
}

/* La grande photo de la fiche est cliquable -> visionneuse plein écran */
.detail-media img[data-detail-img] { cursor: zoom-in; }

.detail-body { padding: 1.75rem; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.detail-meta .chip { font-size: 0.9rem; padding: 0.4rem 0.9rem; }
.detail-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* --- Formulaire de rendez-vous ---------------------------------------- */
/* min-width:0 sur chaque niveau de grille (form > enfants directs, label >
   son champ) : sans ça, le <select> "Service" (longues options) force toute
   la colonne (grille CSS = "auto" par défaut) à s'élargir à son propre
   contenu et fait déborder toute la modale sur mobile — cf. le classique
   "grid blowout". Un enfant direct de grille garde sa taille naturelle par
   défaut même avec overflow:visible, d'où min-width:0 explicite partout. */
.booking-form { display: grid; gap: 1rem; margin-top: 1.25rem; min-width: 0; }
.booking-form > * { min-width: 0; }
.booking-form label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: 2px solid var(--turquoise);
  outline-offset: 1px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-width: 0;    /* + overflow:hidden ci-dessous : empêche la grille de
                      dépasser son conteneur à cause du contenu (inputs/select) */
  overflow: hidden;
}
.form-row > label { min-width: 0; overflow: hidden; }
.time-picker { min-width: 0; }
.booking-send { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* --- Modale "Our booking policies" : images empilées à la verticale ----- */
.policies-images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.policies-images:empty,
.policies-images[hidden] { display: none; }
.policies-images img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* -----------------------------------------------------------------------------
   10b. VISIONNEUSE PLEIN ÉCRAN (lightbox)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* au-dessus des modales (z-index 100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 20, 18, 0.92);
  animation: modal-in 0.18s ease;
}
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lightbox-close:hover,
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-close {
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
}
.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
}
.lightbox-arrow.prev { left: 1rem; }
.lightbox-arrow.next { right: 1rem; }
.lightbox-arrow[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.lightbox-counter[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   10c. CATALOGUE VIDÉO
   -------------------------------------------------------------------------- */
.videos-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--bg);
}
.videos-section[hidden] { display: none; }

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.video-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-frame {
  position: relative;
}
/* Vidéos verticales (format téléphone 9:16). object-fit: cover -> l'aperçu
   remplit la carte sans bande noire ; en lecture on repasse en "contain"
   pour ne rien couper de la vidéo. */
.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  object-fit: cover;
  cursor: pointer;
}
.video-frame.is-playing video { object-fit: contain; }

/* Gros bouton ▶ par-dessus l'aperçu, masqué pendant la lecture */
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(6, 20, 18, 0.28);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.video-play span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--turquoise-darker);
  font-size: 1.4rem;
  padding-left: 4px;               /* recentre le triangle ▶ optiquement */
}
.video-play:hover { background: rgba(6, 20, 18, 0.12); }
.video-frame.is-playing .video-play { opacity: 0; pointer-events: none; }

.video-card figcaption {
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------------
   11. UTILITAIRES + ANIMATIONS D'APPARITION
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

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

/* -----------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */

/* --- Tablette et moins : menu repliable --------------------------------- */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .logo-text { max-width: none; font-size: 1.15rem; }

  .site-nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--pad) 1.25rem;
    transform: translateY(-120%);
    transition: transform 0.28s ease;
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 0.75rem; text-align: center; border-bottom: none; }

  /* hamburger -> croix quand le menu est ouvert */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- Mobile : mises en page sur une colonne ---------------------------- */
@media (max-width: 640px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-section .section-title { text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .hero-facts { gap: 1.25rem; }
  .booking-send .btn { width: 100%; }
}