/* ═══════════════════════════════════════════════
   MAISON DJENA — DA DIOR / COUTURE
   Refonte PROD v8
   ═══════════════════════════════════════════════ */

/* ─── FONTS — DA officielle cliente : Scotch Display (principale) + Inter Tight (texte) ───────
   Inter Tight est chargée depuis le <head> de chaque page (balise <link>, pas @import) :
   un @import CSS force le navigateur à télécharger puis parser style.css avant même de
   découvrir qu'il doit aller chercher la police — une requête en cascade qui retarde le
   premier rendu. Un <link> dans le <head> est découvert par le pré-scanner du navigateur
   dès le HTML brut, en parallèle du CSS. ── */

@font-face {
  font-family: 'Scotch Display';
  src: url('fonts/ScotchDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* même fichier mappé sur 700 pour éviter le faux-gras du navigateur (une seule graisse livrée) */
  font-family: 'Scotch Display';
  src: url('fonts/ScotchDisplay-Regular.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('fonts/ScotchDisplay-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('fonts/ScotchDisplay-Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* ─── TOKENS v15 — pivot DA "Bridal Experience" (rose pâle / rose vif / bordeaux / jaune pâle) ── */
:root {
  /* Couleurs — noms historiques conservés pour compatibilité (vert → noir, or → rose-or) */
  --noir:     #2B0A14;   /* encre principale, bordeaux quasi-noir   18:1/blanc ✓ */
  --noir-pur: #1F0710;   /* bordeaux profond — bandeau promo, footer, wordmark */
  --vert-fonce: #1F0710; /* alias historique — surfaces sombres, boutons, cartes vedette */
  --vert-encre: #1F0710; /* alias du noir-pur, pour lisibilité du code */
  --blanc:    #FFFFFF;
  --creme:    #FBD9E5;   /* rose pâle charte — fonds clairs, cartes */
  --or:       #7E1037;   /* bordeaux charte, accent déco   10.7:1 sur blanc ✓ */
  --or-light: #F283AF;   /* rose vif charte, texte/déco sur fond sombre   7.5:1 ✓ */
  --gris:     #6B4550;   /* texte secondaire, gris chaud teinté bordeaux   8.1:1/blanc ✓ */
  --gris-fin: #D9C7CC;
  --bordure:  #E6D3D9;
  --etape-num:#7E1037;   /* numéros étapes, bordeaux charte   10.7:1/blanc ✓ */
  --jaune:    #FFF8B6;   /* jaune pâle charte — accent ponctuel (bandeau, surlignage) */
  --violet:   #5B2A55;   /* prune profond — variante wordmark/déclinaisons */
  --mauve:    #A9668F;   /* mauve poudré — variante wordmark/déclinaisons */

  /* Espacement */
  --max:      1080px;
  --pad:      clamp(32px, 6vw, 64px);

  /* Typographie — wordmark/display en serif tracké, tout le reste en grotesque resserré */
  --serif:    'Scotch Display', 'Garamond', 'Georgia', serif;
  --sans:     'Inter Tight', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle de type — Major Third ×1.25, base 16px */
  --t-label:  11px;
  --t-body:   16px;
  --t-lead:   20px;
  --t-h3:     24px;
  --t-h2:     32px;
  --t-h1:     clamp(30px, 4.5vw, 56px);
  --t-hero:   clamp(34px, 5.5vw, 72px);

  /* Espacement */
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  128px;

  --ease:     cubic-bezier(.25, .46, .45, .94);
  --radius:   0px;
}

/* ─── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
/* Le scroll-behavior:smooth ne doit s'appliquer qu'aux visiteuses qui n'ont pas demandé
   de réduire les animations (ancre #main, scrollIntoView du formulaire de contact, etc.) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ─── BANDEAU PROMO (DA v11 — pivot éditorial "grande maison") ── */
.promo-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--promo-h, 36px);
  background: var(--jaune);
  color: var(--noir);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 48px;
}

/* ─── NAVIGATION — DA v13, pivot "grande maison horlogère" ──────
   Un seul déclencheur (le menu) à gauche, logo centré, un unique
   lien utilitaire à droite : plus de liens permanents. Transparente
   sur le hero/entête (photo ou vidéo sombre dessous), elle se
   solidifie au défilement — exactement le motif "grande maison". */
#nav {
  position: fixed;
  top: var(--promo-h, 36px); left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
  height: 84px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
#nav.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(140,106,38,.28);
  box-shadow: 0 1px 24px rgba(0,0,0,.07);
}

.nav-logo {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: .22em;
  color: var(--blanc);
  white-space: nowrap;
  transition: color .5s var(--ease);
}
#nav.scrolled .nav-logo { color: var(--noir); }

.nav-burger {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanc);
  transition: color .5s var(--ease);
}
#nav.scrolled .nav-burger { color: var(--noir); }
.nav-burger-icone {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.nav-burger-icone span {
  display: block; width: 22px; height: 1px;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}

.nav-contact {
  grid-column: 3;
  justify-self: end;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanc);
  padding: 8px;
  opacity: .85;
  white-space: nowrap;
  transition: color .5s var(--ease), opacity .25s;
}
#nav.scrolled .nav-contact { color: var(--noir); }
.nav-contact:hover { opacity: 1; }

/* ─── MENU PLEIN ÉCRAN (mega-menu) ───────────────────────────
   Un seul panneau, ouvert sur tous les gabarits (desktop et mobile),
   organisé en colonnes façon grande maison plutôt qu'une simple
   liste de liens empilés. */
#overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: var(--creme);
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 96px 0 32px;
}
#overlay.ouvert { display: flex; }
/* Le bouton WhatsApp flottant ne doit jamais couvrir le menu ouvert */
body.menu-ouvert .whatsapp-flottant { display: none; }

.overlay-fermer {
  position: fixed; top: 24px; right: var(--pad); z-index: 201;
  background: none; border: none; font-size: 28px; cursor: pointer;
  color: var(--noir); line-height: 1;
}
.overlay-in {
  display: flex; flex-wrap: wrap;
  gap: clamp(48px, 9vw, 140px);
  justify-content: center;
  padding: 0 var(--pad);
  margin: auto 0;
}
.overlay-colonne {
  display: flex; flex-direction: column; gap: 22px; min-width: 180px;
}
.overlay-groupe {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--or);
  margin-bottom: 4px;
}
.overlay-lien {
  font-family: var(--serif); font-style: normal; font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700; letter-spacing: .02em; color: var(--noir);
  transition: opacity .25s;
}
.overlay-lien:hover, .overlay-lien.actif { opacity: .5; }
.overlay-bas {
  position: static;
  margin-top: clamp(32px, 6vh, 48px);
  text-align: center;
}
.overlay-marque {
  display: block; font-family: var(--serif); font-style: normal;
  font-weight: 700; font-size: 16px; letter-spacing: .1em; color: var(--vert-fonce);
}
.overlay-tag {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--or); margin-top: 6px;
}

/* ─── UTILITAIRES ────────────────────────────── */
.boite { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.col { max-width: 640px; }

.s-label {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin-bottom: 18px;
}
.s-filet {
  display: block; width: 32px; height: 1px;
  background: var(--or); margin-bottom: 32px;
}
.s-titre {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.18;
  letter-spacing: .01em; margin-bottom: 28px; text-wrap: balance;
}
.s-corps {
  font-family: var(--sans); font-size: 14px; font-weight: 300;
  line-height: 1.85; color: #444; max-width: 560px;
}

/* ─── BOUTONS — DA v11, gabarit compact (pivot Gucci) ──────────
   Fonds toujours pleins, y compris au survol : aucune variante
   transparente sur une zone qui peut être une photo (leçon du
   contraste "blanc sur champagne" — on ne réintroduit pas ce risque). */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 10.5px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 30px; border: 1px solid currentColor;
  transition: background .3s, color .3s, border-color .3s, opacity .3s; cursor: pointer;
}
.btn-noir { background: var(--vert-fonce); color: var(--blanc); border-color: var(--vert-fonce); }
.btn-noir:hover { opacity: .85; }
.btn-blanc { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.btn-blanc:hover { opacity: .82; }
.btn-contour-blanc { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.6); }
.btn-contour-blanc:hover { background: rgba(255,255,255,.14); border-color: var(--blanc); }
.btn-or { background: var(--or); color: var(--blanc); border-color: var(--or); }
.btn-or:hover { opacity: .85; }
.btn-contour-or { background: transparent; color: var(--blanc); border-color: rgba(212,175,97,.7); }
.btn-contour-or:hover { background: rgba(212,175,97,.14); border-color: var(--or-light); }

/* ─── SECTIONS ───────────────────────────────── */
section { padding: clamp(80px, 10vw, 140px) 0; }
section.creme { background: var(--creme); }
section.fonce { background: var(--vert-fonce); color: var(--blanc); }
section.fonce .s-filet { background: rgba(255,255,255,.3); }
section.fonce .s-corps { color: rgba(255,255,255,.65); }

/* ─── ANIMATIONS ─────────────────────────────── */
.fondu { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fondu.visible { opacity: 1; transform: none; }

/* ─── HERO ───────────────────────────────────── */
.hero {
  position: relative; width: 100%; height: 100svh; min-height: 600px;
  overflow: hidden; display: flex; align-items: flex-end;
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 12s var(--ease); transform: scale(1.04);
}
.hero:hover .hero-photo { transform: scale(1); }

/* Vidéo d'ambiance (façon Rolex) : se pose au-dessus de la photo statique,
   qui reste visible dessous comme repli (chargement lent, source vidéo en
   échec, ou préférence "réduire les animations" — voir plus bas). */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 45%, transparent 82%);
}
.hero-contenu {
  position: relative; z-index: 2; width: 100%; text-align: center;
  padding: 0 var(--pad) clamp(64px, 10vh, 120px);
}
.hero-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 24px;
}
.hero-titre {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(32px, 5.5vw, 72px); line-height: 1.12; letter-spacing: .01em;
  color: var(--blanc); max-width: 820px; margin: 0 auto 28px; text-wrap: balance;
}
.hero-sous {
  font-family: var(--sans); font-size: 13px; font-weight: 300;
  letter-spacing: .06em; color: rgba(255,255,255,.75); margin-bottom: 40px; line-height: 1.9;
}
.hero-cta { margin-top: 4px; }

/* ─── EN-TÊTE PAGE ───────────────────────────── */
.entete {
  position: relative; height: clamp(420px, 55vh, 680px); overflow: hidden;
  display: flex; align-items: flex-end; margin-top: 120px;
}
.entete-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.entete-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 50%, transparent 88%);
}
.entete-contenu {
  position: relative; z-index: 2; width: 100%; text-align: center;
  padding: 0 var(--pad) clamp(48px, 8vh, 80px);
}
.entete-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 18px;
}
.entete-titre {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(28px, 4.5vw, 58px); line-height: 1.14; color: var(--blanc);
  text-wrap: balance; max-width: 720px; margin: 0 auto;
}

/* ─── EN-TÊTE PAGE — variante "claire" (kit headers Maison Djena) ──
   Photo lumineuse (soie, pétales, texture), typographie bordeaux posée
   directement dessus, sans voile sombre : pour les pages qui utilisent
   les nouveaux visuels de header fournis par le client. */
.entete--clair { align-items: flex-start; }
.entete--clair .entete-voile {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%, rgba(43,10,20,.05) 100%) !important;
}
.entete--clair .entete-contenu {
  text-align: left; width: auto; max-width: 560px;
  padding: clamp(72px, 14vh, 128px) var(--pad) 0;
}
.entete--clair .entete-label,
.entete--clair .entete-titre {
  color: var(--or) !important;
  text-shadow: none !important;
}
.entete--clair .entete-label {
  font-size: 11px; letter-spacing: .24em; opacity: .85;
}
.entete--clair .entete-titre {
  margin: 0; text-align: left; max-width: 560px;
}
.entete--clair .entete-contenu::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--or); opacity: .6; margin-top: 24px;
}
@media (max-width: 640px) {
  .entete--clair .entete-contenu { padding-top: clamp(64px, 16vh, 100px); max-width: 100%; }
  .entete--clair .entete-titre, .entete--clair .entete-label { max-width: 100%; }
  /* Sur mobile, le sujet de la photo (sceau, falaise, monogramme) passe
     sous le texte : un voile rose poudré en haut garantit la lisibilité. */
  .entete--clair .entete-voile {
    background: linear-gradient(180deg, rgba(251,217,229,.82) 0%, rgba(251,217,229,.70) 38%, rgba(251,217,229,0) 62%) !important;
  }
}

/* ─── GRILLE SECTIONS (index) — bord-à-bord, légende sous la photo (DA v11) ── */
.grille-sections {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
@media(min-width:900px) { .grille-sections { grid-template-columns: repeat(5, 1fr); } }

.section-carte { position: relative; display: block; }
.section-carte-img-wrap { aspect-ratio: 3/4; overflow: hidden; }
.section-carte-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease); display: block; }
.section-carte:hover .section-carte-img-wrap img { transform: scale(1.06); }
.section-carte-txt {
  padding: 20px 14px 24px; text-align: center; background: var(--blanc);
  border-top: 1px solid var(--bordure);
}
.section-carte-label {
  font-family: var(--sans); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 8px;
}
.section-carte-nom {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 18px; letter-spacing: .02em; color: var(--noir);
  transition: opacity .25s;
}
.section-carte:hover .section-carte-nom { opacity: .6; }

/* ─── SPLIT ──────────────────────────────────── */
.split { display: grid; gap: 80px; align-items: center; }
@media(min-width:800px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.inverse .split-img { order: 2; }
  .split.inverse .split-txt { order: 1; }
}
.split-img { overflow: hidden; }
.split-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 8s var(--ease); }
.split-img:hover img { transform: scale(1.04); }

/* ─── CARTES FORMULES ────────────────────────── */
.cartes { display: grid; gap: 1px; background: var(--bordure); }
@media(min-width:800px) { .cartes { grid-template-columns: repeat(3, 1fr); } }

.carte { background: var(--blanc); padding: 56px 44px; }
.carte.vedette { background: var(--vert-fonce); color: var(--blanc); }
.carte.vedette .carte-liste li::before { background: var(--or); }
.carte.vedette .carte-desc { color: rgba(255,255,255,.65); }
.carte-niveau {
  font-family: var(--sans); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--or); margin-bottom: 20px;
}
.carte-nom {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 30px; letter-spacing: .02em; margin-bottom: 20px;
}
.carte-desc { font-size: 13px; font-weight: 300; color: #555; line-height: 1.8; margin-bottom: 28px; }
.carte-liste { margin-bottom: 36px; }
.carte-liste li {
  font-size: 13px; font-weight: 300; line-height: 1.7;
  padding-left: 20px; position: relative; margin-bottom: 8px;
}
.carte-liste li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--noir);
}
.carte-prix { margin-top: auto; border-top: 1px solid var(--bordure); padding-top: 24px; }
.carte.vedette .carte-prix { border-top-color: rgba(255,255,255,.15); }
.prix { display: block; font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 24px; letter-spacing: .02em; margin-bottom: 4px; }
.prix-unite { font-size: 11px; letter-spacing: .08em; color: var(--gris); }
.carte.vedette .prix-unite { color: rgba(255,255,255,.5); }

/* ─── DESTINATIONS ───────────────────────────── */
.dest-grille { display: grid; gap: 2px; background: var(--bordure); }
@media(min-width:700px) { .dest-grille { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1000px) { .dest-grille { grid-template-columns: repeat(3, 1fr); } }

.dest-item { position: relative; display: block; overflow: hidden; cursor: pointer; }
.dest-photo { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 8s var(--ease); display: block; }
.dest-item:hover .dest-photo { transform: scale(1.06); }
.dest-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 42%);
}
.dest-legende { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; }
.dest-ville {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 22px; color: var(--blanc); letter-spacing: .02em; margin-bottom: 4px;
}
.dest-pays { font-family: var(--sans); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.dest-split { display: grid; gap: 60px; align-items: center; margin-bottom: clamp(60px, 8vw, 100px); }
@media(min-width:800px) { .dest-split { grid-template-columns: 1fr 1fr; gap: 80px; } }
.dest-split-img { overflow: hidden; }
.dest-split-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 8s var(--ease); }
.dest-split-img:hover img { transform: scale(1.04); }

/* ─── MÉTHODE — ÉTAPES ───────────────────────── */
.etapes { display: grid; gap: 0; }
.etape {
  display: grid; grid-template-columns: 72px 1fr; gap: 32px; align-items: start;
  padding: 48px 0; border-bottom: 1px solid var(--bordure);
}
.etape:first-child { border-top: 1px solid var(--bordure); }
.etape-num {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 36px; color: var(--or-light); line-height: 1; padding-top: 4px;
}
.etape-titre {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 22px; letter-spacing: .01em; margin-bottom: 12px;
}
.etape-corps { font-size: 13px; font-weight: 300; color: #555; line-height: 1.85; }

/* ─── TÉMOIGNAGES ────────────────────────────── */
.temos { display: grid; gap: 1px; background: var(--bordure); }
@media(min-width:700px) { .temos { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1000px) { .temos { grid-template-columns: repeat(3, 1fr); } }

.temo { background: var(--blanc); padding: 52px 44px; display: flex; flex-direction: column; }
.temo-etoiles { display: flex; gap: 3px; margin-bottom: 28px; }
.temo-etoile {
  width: 10px; height: 10px; background: var(--or);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.temo-citation {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: 17px; line-height: 1.65; flex: 1; margin-bottom: 32px;
}
.temo-citation::before { content: '\201C'; }
.temo-citation::after { content: '\201D'; }
.temo-auteur { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* ─── RÉALISATION ────────────────────────────── */
.realisation-entete { display: grid; gap: 48px; margin-bottom: 64px; }
@media(min-width:800px) { .realisation-entete { grid-template-columns: 1fr auto; align-items: start; } }

.realisation-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px; padding-left: 48px; border-left: 1px solid var(--bordure); }
@media(max-width:799px) { .realisation-meta { padding-left: 0; border-left: none; border-top: 1px solid var(--bordure); padding-top: 24px; } }

.realisation-meta-item { display: flex; flex-direction: column; gap: 4px; }
.realisation-meta-label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.realisation-meta-val { font-family: var(--serif); font-style: normal; font-size: 18px; font-weight: 700; }

.realisation-grille { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 48px; }
@media(min-width:700px) { .realisation-grille { grid-template-columns: 1.5fr 1fr; } }
.rg-principale img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.rg-secondaires { display: grid; gap: 2px; }
.rg-secondaires img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.realisation-temoignage { max-width: 640px; margin: 0 auto; text-align: center; padding-top: 48px; border-top: 1px solid var(--bordure); }
.temoignage-filet { display: block; width: 32px; height: 1px; background: var(--or); margin: 0 auto 32px; }
.temoignage-citation {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(18px, 2.5vw, 24px); line-height: 1.6;
}
.temoignage-auteur { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-top: 24px; }

/* ─── FORMULAIRE CONTACT ─────────────────────── */
.form-champ { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--bordure); }
.form-champ:first-child { border-top: 1px solid var(--bordure); }
.form-champ label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.form-champ input, .form-champ select, .form-champ textarea {
  background: transparent; border: none; border-bottom: 1px solid transparent; outline: none;
  font-family: var(--serif); font-style: normal; font-size: 18px; font-weight: 700;
  color: var(--noir); width: 100%; resize: none; appearance: none;
}
.form-champ input:focus, .form-champ select:focus, .form-champ textarea:focus {
  border-bottom-color: var(--noir);
}
.form-champ input::placeholder, .form-champ textarea::placeholder { color: var(--gris-fin); }
.form-2col { display: grid; gap: 0; }
@media(min-width:700px) { .form-2col { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
.form-note { font-size: 11px; color: var(--gris); margin-top: 12px; letter-spacing: .04em; }

/* ─── FOOTER — DA v11 : colonnes + wordmark géant (pivot Gucci) ── */
footer { background: var(--noir-pur); color: var(--blanc); padding: clamp(56px, 7vw, 88px) var(--pad) 0; }
.footer-in { max-width: var(--max); margin: 0 auto; }

.footer-top {
  display: grid; gap: 44px;
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media(min-width:700px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }

.footer-marque { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 26px; letter-spacing: .05em; margin-bottom: 8px; }
.footer-tagline { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.footer-col-tete {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 18px;
}
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { font-size: 12.5px; letter-spacing: .02em; color: rgba(255,255,255,.78); transition: color .25s; text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; }
.footer-nav a:hover { color: var(--blanc); text-decoration-color: var(--blanc); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  padding: 24px 0;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal p { font-size: 11.5px; color: rgba(255,255,255,.55); letter-spacing: .02em; margin: 0; }
.footer-legal a { color: rgba(255,255,255,.78); transition: color .25s; }
.footer-legal a:hover { color: var(--blanc); }

.footer-wordmark {
  font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(30px, 9.5vw, 148px);
  line-height: .96;
  letter-spacing: .04em;
  text-align: center;
  color: var(--blanc);
  padding: clamp(24px, 5vw, 48px) 16px clamp(20px, 4vw, 36px);
  overflow-wrap: break-word;
}
@media(min-width:640px) { .footer-wordmark { white-space: nowrap; } }

/* ─── RESPONSIVE ─────────────────────────────── */
/* Le menu (icône + logo centré + Contact) est identique sur tous les
   gabarits — même agencement, même ergonomie mobile et desktop. */
@media(max-width:799px) {
  #nav { height: 68px; padding: 0 20px; }
  .nav-logo { font-size: 17px; letter-spacing: .14em; }
  .nav-burger-label, .nav-contact { display: none; }
  .footer-legal { text-align: left; }
  :root { --promo-h: 32px; }
  .promo-bar { font-size: 9px; letter-spacing: .1em; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .entete { margin-top: 100px; }
  .overlay-in { gap: 40px; }
}

/* ─── DARK MODE ──────────────────────────────── */
/* dark mode auto supprime — DA verrouillee (voir COUCHE FINALE) */

/* ─── FAQ ACCORDÉON ──────────────────────────── */
.faq-liste { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid var(--bordure); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  color: var(--noir);
  transition: opacity .2s;
}
.faq-q:hover { opacity: .7; }
.faq-icone {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: transform .4s var(--ease);
}
.faq-item.ouvert .faq-icone { transform: rotate(45deg); }
.faq-r {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq-r-inner {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: #555;
  padding: 0 0 24px;
}

/* ═══════════════════════════════════════════════
   CORRECTIONS LISIBILITÉ — PROD v8.1
   Polices plus grandes, overlays renforcés,
   contrastes garantis sur toutes les surfaces
   ═══════════════════════════════════════════════ */

/* ─── TYPOGRAPHIE : TAILLES RÉHAUSSÉES ──────── */
body {
  font-size: 16px;        /* +1px */
  line-height: 1.8;
  color: #2B0A14;         /* légèrement plus doux que #000 pour le corps */
}

/* Labels (étaient 9–10px illisibles) → 11px min */
.s-label {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--or);
  font-weight: 500;
}

/* Corps de texte : 14px → 15-16px */
.s-corps {
  font-size: 15px;
  line-height: 1.9;
  color: #333333;
}

/* Titres : déjà clamp, on monte le min */
.s-titre {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.15;
}

/* Hero texte : blanc pur, ombre portée de sécurité */
.hero-label {
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  font-weight: 400;
}
.hero-titre {
  font-size: clamp(34px, 5.5vw, 76px);
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  font-weight: 300;
}
.hero-sous {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  letter-spacing: .04em;
}
.entete-label {
  font-size: 11px;
  letter-spacing: .24em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  font-weight: 400;
}
.entete-titre {
  font-size: clamp(30px, 4.5vw, 62px);
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
  font-weight: 300;
}

/* ─── GRILLE SECTIONS : DA v11, légende sous la photo (voir plus haut) ── */
.section-carte-nom { font-size: 20px; }

.dest-ville {
  font-size: 24px;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  font-weight: 300;
}
.dest-pays {
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.85);
}

/* ─── CARTES FORMULES : textes plus grands ───── */
.carte-niveau {
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 500;
}
.carte-nom {
  font-size: 32px;
}
.carte-desc {
  font-size: 14px;
  line-height: 1.85;
  color: #444;
}
.carte.vedette .carte-desc { color: rgba(255,255,255,.75); }
.carte-liste li {
  font-size: 14px;
  line-height: 1.75;
}
.prix {
  font-size: 26px;
}
.prix-unite {
  font-size: 12px;
  letter-spacing: .06em;
}

/* ─── ÉTAPES MÉTHODE ─────────────────────────── */
.etape-num {
  font-size: 40px;
}
.etape-titre {
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
}
.etape-corps {
  font-size: 14px;
  line-height: 1.85;
  color: #444;
}

/* ─── TÉMOIGNAGES ────────────────────────────── */
.temo-citation {
  font-size: 18px;
  line-height: 1.7;
}
.temo-auteur {
  font-size: 12px;
  letter-spacing: .1em;
  color: #666;
}

/* ─── RÉALISATION : citation centrale ───────── */
.temoignage-citation {
  font-size: clamp(19px, 2.5vw, 26px);
  line-height: 1.65;
  color: #111;
}
.temoignage-auteur {
  font-size: 11px;
  letter-spacing: .16em;
  color: #777;
}

/* ─── SECTION FONCE : lisibilité ────────────── */
.fonce .s-titre {
  color: #FFFFFF;
  text-shadow: none;
}
.fonce .s-label {
  color: var(--or-light);  /* or plus clair sur fond noir */
}
.fonce .s-corps {
  color: rgba(255,255,255,.75);
  font-size: 15px;
}

/* ─── FORMULAIRE : champs plus grands ───────── */
.form-champ label {
  font-size: 10px;
  letter-spacing: .18em;
  color: #888;
  font-weight: 500;
}
.form-champ input,
.form-champ select,
.form-champ textarea {
  font-size: 17px;
  line-height: 1.6;
  padding: 4px 0;
  color: #111;
}
.form-champ input::placeholder,
.form-champ textarea::placeholder {
  color: #C0C0BC;
}

/* ─── FAQ : texte lisible ────────────────────── */
.faq-q {
  font-size: 15px;
  font-weight: 400;
  padding: 22px 0;
  color: var(--noir);
  line-height: 1.5;
}
.faq-r-inner {
  font-size: 14px;
  line-height: 1.85;
  color: #555;
  padding-bottom: 22px;
}

/* ─── FOOTER ─────────────────────────────────── */
.footer-nav a {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
}
.footer-legal p {
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

/* ─── SECTION CREME : assurer corps sombre ───── */
.creme .s-corps { color: #333; }
.creme .etape-corps { color: #444; }
.creme .faq-r-inner { color: #555; }

/* ─── OVERLAY MOBILE : texte large ──────────── */
.overlay-lien {
  font-size: 30px;
  letter-spacing: .05em;
}

/* ─── SPLIT : corps texte ────────────────────── */
.split-txt .s-corps {
  font-size: 15px;
  color: #333;
  line-height: 1.9;
}

/* ═══════════════════════════════════════════════
   CORRECTIONS CONTRASTE ABSOLU — PROD v8.2
   Audit WCAG AA zéro tolérance — toutes pages
   ═══════════════════════════════════════════════ */

/* ─── LABELS OR SUR FOND CLAIR ───────────────────
   #7E1037 (--or) = 3.66:1 sur blanc → ÉCHOUE AA
   On passe à #7E1037 = 6.5:1 ✅                 */
.s-label { color: #7E1037; }
/* .fonce .s-label reste sur --or-light (règle v8.1 plus spécifique) */

/* Labels des cartes formules (sur blanc / noir) */
.carte-niveau { color: #7E1037; }
.carte.vedette .carte-niveau { color: #F283AF; } /* or-light sur noir ✅ */

/* ─── PRIX-UNITE SUR FOND CLAIR ──────────────────
   --gris (#8A8A8A) = 3.5:1 sur blanc → ÉCHOUE
   #555 = 7.4:1 ✅                                */
.prix-unite { color: #6B4550; }

/* ─── CARTE VEDETTE (fond noir) ──────────────────
   .5 et .65 insuffisants → on monte                */
.carte.vedette .prix-unite  { color: rgba(255,255,255,.85); }
.carte.vedette .carte-desc  { color: rgba(255,255,255,.85); }

/* ─── REALISATION META LABEL ─────────────────────
   9px + #8A8A8A = double fail → 11px + #555      */
.realisation-meta-label {
  font-size: 11px;
  letter-spacing: .18em;
  color: #6B4550;
}

/* ─── TEMOIGNAGE AUTEUR (sur fond blanc/creme) ───
   10-11px + #777 borderline → 12px + #555 ✅     */
.temoignage-auteur {
  font-size: 12px;
  letter-spacing: .16em;
  color: #6B4550;
}

/* ─── FORMULAIRE LABELS ──────────────────────────
   10px + #888 = 3.8:1 → ÉCHOUE → 11px + #555    */
.form-champ label {
  font-size: 11px;
  letter-spacing: .18em;
  color: #6B4550;
  font-weight: 500;
}

/* ─── FOOTER TAGLINE ─────────────────────────────
   .4 opacity → #666 eq → 4.3:1 → ÉCHOUE
   .70 → ~4.8:1 ✅                                */
.footer-tagline {
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.72);
}

/* ─── FOOTER LEGAL ───────────────────────────────
   .35 → 2.9:1 → ÉCHOUE | .45 borderline
   .65 → 5.7:1 ✅                                  */
.footer-legal p {
  font-size: 12px;
  color: rgba(255,255,255,.68);
  line-height: 2.1;
}
.footer-legal a {
  color: rgba(255,255,255,.82);
}

/* ─── FOOTER NAV LINKS ───────────────────────────
   .65 → sécurisé à .74                           */
.footer-nav a {
  font-size: 11.5px;
  color: rgba(255,255,255,.74);
}

/* ─── SECTION FONCE : corps texte ───────────────
   .65/.75 borderline → .85 ✅                    */
section.fonce .s-corps {
  color: rgba(255,255,255,.85);
}

/* ─── FAQ SUR FOND NOIR ──────────────────────────
   Inline styles ont .5 → on écrase avec !important
   Q visible, réponse lisible                      */
.fonce .faq-q {
  color: rgba(255,255,255,.92) !important;
}
.fonce .faq-r-inner {
  color: rgba(255,255,255,.80) !important;
}

/* ─── TEMO AUTEUR (grille temoignages) ──────────
   #666 était borderline → #555 sécurisé          */
.temo-auteur {
  font-size: 12px;
  letter-spacing: .10em;
  color: #6B4550;
}

/* ─── FORM NOTE (petits textes inférieurs) ──────
   --gris borderline → #555                       */
.form-note { color: #6B4550; }

/* ─── HERO LABEL (sécurité image) ───────────────
   était .65 → .90 avec text-shadow              */
.hero-label {
  color: rgba(255,255,255,.92);
}

/* ─── ENTETE LABEL (headers pages) ──────────────
   était .6 → .90 avec text-shadow              */
.entete-label {
  color: rgba(255,255,255,.92);
}

/* ─── DEST-PAYS (texte sur image) ───────────────
   déjà .85 dans v8.1 — sécurité supplémentaire  */
.dest-pays {
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ─── SECTION CREME : garanties globales ────────*/
.creme .s-label  { color: #7E1037; }
.creme .s-corps  { color: #333333; }
.creme .temo-auteur { color: #6B4550; }

/* ═══════════════════════════════════════════════
   CORRECTIONS RADICALES — PROD v8.3
   Citation noire sur fond noir, etape-num or
   clair sur blanc, labels beige, nav gris
   ═══════════════════════════════════════════════ */

/* ─── LABELS : beige sur blanc → NOIR (17.7:1 ✅) */
.s-label {
  color: #2B0A14 !important;
  font-size: 11px;
  letter-spacing: .20em;
  font-weight: 500;
}
section.fonce .s-label,
.fonce .s-label {
  color: #F283AF !important;
}

/* ─── CARTE NIVEAU ───────────────────────────── */
.carte-niveau {
  color: #2B0A14 !important;
}
.carte.vedette .carte-niveau {
  color: #F283AF !important;
}

/* ─── ÉTAPE NUM : #F283AF/blanc = 2:1 → #7E1037 = 5.4:1 ✅ */
.etape-num {
  color: #7E1037 !important;
}

/* ─── CITATION SUR FOND NOIR : noir sur noir = invisible ── */
section.fonce .temoignage-citation,
.fonce .temoignage-citation {
  color: rgba(255,255,255,.95) !important;
}
section.fonce .temoignage-auteur,
.fonce .temoignage-auteur {
  color: rgba(255,255,255,.72) !important;
}
section.fonce .temoignage-filet,
.fonce .temoignage-filet {
  background: #F283AF !important;
}

/* ─── FILET SUR FOND NOIR ────────────────────── */
section.fonce .s-filet {
  background: rgba(255,255,255,.55) !important;
}

/* ─── BTN CONTOUR BLANC ────────────────────────── */
.btn-contour-blanc {
  border-color: rgba(255,255,255,.90) !important;
  color: #FFFFFF !important;
}

/* ─── CARTE VEDETTE li ──────────────────────────── */
.carte.vedette .carte-liste li {
  color: rgba(255,255,255,.88);
}

/* ─── TEMOIGNAGE : séparation fond clair / fond noir ─── */
section:not(.fonce) .temoignage-citation {
  color: #2B0A14 !important;
}
section:not(.fonce) .temoignage-auteur {
  color: #6B4550 !important;
}

/* ─── GLOBAL FONCE ──────────────────────────────── */
section.fonce { color: #FFFFFF; }


/* ═══════════════════════════════════════════════════════════
   COUCHE FINALE DE CONFORMITÉ — v10
   Audit navigateur : 0 défaut en thème clair ET sombre.
   Règle : la DA Maison Djena est verrouillée en palette claire.
   Aucune inversion automatique ne peut casser les contrastes.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. VERROUILLAGE DE LA DA ────────────────────────────────
   Empêche le navigateur/OS d'inverser les couleurs.
   Les maisons de luxe n'auto-inversent pas leur identité.        */
:root { color-scheme: only light; }
html, body { background: #FFFFFF; color: #2B0A14; }

/* Neutralise tout token inversé résiduel */
:root, :root[data-theme], :root[data-theme="dark"], :root[data-theme="light"] {
  --noir:     #2B0A14;
  --noir-pur: #1F0710;
  --vert-fonce: #1F0710;
  --vert-encre: #1F0710;
  --blanc:    #FFFFFF;
  --creme:    #FBD9E5;
  --or:       #7E1037;
  --or-light: #F283AF;
  --gris:     #6B4550;
  --gris-fin: #D9C7CC;
  --bordure:  #E6D3D9;
  --jaune:    #FFF8B6;
}

/* ── 2. TEXTE SUR FOND SOMBRE ────────────────────────────────
   Tout conteneur sombre impose sa propre échelle de blancs.     */
section.fonce, .fonce,
.carte.vedette,
footer {
  color: #FFFFFF;
}
section.fonce .s-titre, .fonce .s-titre,
section.fonce h1, section.fonce h2, section.fonce h3,
.carte.vedette .carte-nom, .carte.vedette .prix {
  color: #FFFFFF !important;
}
section.fonce .s-corps, .fonce .s-corps,
section.fonce p, .fonce p:not(.s-label),
.carte.vedette .carte-desc, .carte.vedette .carte-liste li {
  color: rgba(255,255,255,.88) !important;   /* 15.3:1 */
}
section.fonce .s-label, .fonce .s-label,
.carte.vedette .carte-niveau {
  color: #F283AF !important;                 /*  5.4:1 */
}
section.fonce label, .fonce label,
section.fonce .prix-unite, .carte.vedette .prix-unite,
section.fonce .realisation-meta-label {
  color: rgba(255,255,255,.75) !important;   /* 11.4:1 */
}
section.fonce .faq-q, .fonce .faq-q,
section.fonce .faq-icone, .fonce .faq-icone {
  color: rgba(255,255,255,.95) !important;
}
section.fonce .faq-r-inner, .fonce .faq-r-inner {
  color: rgba(255,255,255,.85) !important;
}
section.fonce .s-filet, .fonce .s-filet,
section.fonce .temoignage-filet {
  background: rgba(255,255,255,.55) !important;
}

/* ── 3. TÉMOIGNAGES — correction du bug « noir sur gris » ─────
   Ces blocs ne sont PAS dans section.fonce : les anciens
   sélecteurs ne les atteignaient jamais. On cible le conteneur
   réel dans les deux contextes.                                 */
.temoignage-citation,
.temo-citation {
  color: #2B0A14;
}
.temoignage-auteur,
.temo-auteur {
  color: #6B4550;                            /*  7.4:1 sur blanc */
}
/* contexte sombre : conteneur ou section */
section.fonce .temoignage-citation, .fonce .temoignage-citation,
section.fonce .temo-citation,       .fonce .temo-citation,
.temo.fonce .temo-citation {
  color: rgba(255,255,255,.95) !important;
}
section.fonce .temoignage-auteur, .fonce .temoignage-auteur,
section.fonce .temo-auteur,       .fonce .temo-auteur,
.temo.fonce .temo-auteur {
  color: rgba(255,255,255,.75) !important;
}

/* ── 4. SCRIM PHOTO — corrige « blanc sur champagne » ─────────
   Les photos ont des zones claires (champagne, robe, ciel) où
   un voile uniforme ne suffit pas : 1.5:1 mesuré.
   On pose un dégradé qui garantit un plancher sombre sous le
   texte, quelle que soit la photo.                              */
.hero-voile,
.entete-voile {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 18%,
    rgba(5,31,23,.26) 55%,
    rgba(5,31,23,.52) 100%
  ) !important;
}
.hero-contenu,
.entete-contenu { position: relative; z-index: 2; }

/* Ombre portée : filet de sécurité sur les pixels les plus clairs */
.hero-label, .hero-titre, .hero-sous,
.entete-label, .entete-titre, .entete-sous {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 2px 18px rgba(0,0,0,.55);
}

/* Cartes de section (accueil) — DA v11 : légende sous la photo sur fond
   blanc, donc plus de voile ni de texte blanc nécessaire ici. */
.dest-ville, .dest-pays {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.60), 0 2px 12px rgba(0,0,0,.45);
}
/* Fond de secours si la photo ne charge pas : jamais de blanc sur champagne */
.dest-item, .section-carte-img-wrap { background-color: #1F0710; }

/* ── 5. NAVIGATION ───────────────────────────────────────────── */
/* Transparente sur le hero/entête (blanc), solide au défilement (encre) —
   voir les règles #nav.scrolled plus haut ; rien à verrouiller ici. */

/* ── 6. PIED DE PAGE (fond noir) ─────────────────────────────── */
footer .footer-marque { color: #FFFFFF !important; }
footer .footer-tagline { color: #F283AF !important; }
footer .footer-nav a  { color: rgba(255,255,255,.82) !important; }
footer .footer-nav a:hover { color: #FFFFFF !important; }
footer .footer-legal, footer .footer-legal p { color: rgba(255,255,255,.70) !important; }
footer .footer-legal a { color: rgba(255,255,255,.82) !important; text-decoration: underline; }

/* ── 7. GARDE-FOU ANIMATION ──────────────────────────────────
   Si JS échoue, le texte reste lisible au lieu de rester à 0.  */
.fondu { opacity: 1; }
.fondu:not(.visible) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fondu { opacity: 1 !important; transform: none !important; } }
noscript ~ * .fondu { opacity: 1 !important; }

/* ── 8. OR : jamais en texte courant sur fond clair ──────────── */
.etape-num { color: #7E1037 !important; }    /* 5.4:1 — était 2.07:1 */
section:not(.fonce) .s-label { color: #2B0A14 !important; }

/* ── 9. CAUSE RACINE « NOIR SUR GRIS » ───────────────────────
   La règle globale `footer { background:#111; color:#fff }`
   visait le pied de page du site, mais frappait aussi les
   <footer> sémantiques des <blockquote> de témoignage :
   le nom de l'auteur héritait d'un bloc noir avec texte gris.
   On restreint le pied de page au footer racine et on
   neutralise tout footer imbriqué.                            */
main footer,
blockquote footer,
.temoignage-auteur,
.temo-auteur {
  background: transparent !important;
  padding: 0 !important;
}
main footer.temoignage-auteur,
blockquote footer.temoignage-auteur { color: #6B4550 !important; }

section.fonce main footer.temoignage-auteur,
section.fonce blockquote footer.temoignage-auteur,
.fonce blockquote footer.temoignage-auteur,
section.fonce .temoignage-auteur,
.fonce .temoignage-auteur {
  color: rgba(255,255,255,.75) !important;
}

.hero-contenu, .entete-contenu { isolation: isolate; }

/* Le CTA hero utilise désormais le système .btn (fond blanc plein) :
   sa lisibilité ne dépend plus de la photo derrière (F-02).      */

/* ═══════════════════════════════════════════════
   AUDIT 360 — CORRECTIFS SENIOR (Vague 1)
   F-10 / F-11 : focus clavier visible
   F-13        : cibles tactiles ≥ 44×44px
   F-18        : lien d'évitement
   ═══════════════════════════════════════════════ */

/* ── F-11 : anneau de focus global, contrasté sur fond clair ET sombre ── */
:focus-visible {
  outline: 2px solid #7E1037;
  outline-offset: 3px;
}
section.fonce :focus-visible,
footer :focus-visible,
.fonce :focus-visible,
.hero :focus-visible,
.entete :focus-visible,
.section-carte :focus-visible,
#nav:not(.scrolled) :focus-visible {
  outline-color: #FFFFFF;
}

/* ── F-10 : champs de formulaire — focus visible dédié (déjà + border-bottom) ── */
.form-champ input:focus-visible,
.form-champ select:focus-visible,
.form-champ textarea:focus-visible {
  outline: 2px solid #7E1037;
  outline-offset: 2px;
}

/* ── F-13 : cibles tactiles < 44×44px agrandies sans changer le rendu visuel ── */
.overlay-lien,
footer .footer-nav a,
.faq-q { position: relative; }
footer .footer-nav a::before {
  content: '';
  position: absolute;
  inset: -17px -6px;
}
.overlay-fermer {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.nav-burger, .nav-contact { min-height: 44px; }
.faq-q { min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.section-carte { min-height: 44px; }

/* ── F-18 : lien d'évitement ("aller au contenu") ── */
.skip-link {
  position: absolute; top: -48px; left: 0;
  background: #2B0A14; color: #FFFFFF;
  padding: 14px 24px; z-index: 1000;
  font-family: var(--sans); font-size: 12px; letter-spacing: .08em;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ─── BOUTON WHATSAPP FLOTTANT ────────────────────────
   Fixe sur le côté, toujours accessible pendant le scroll.
   Couleur officielle WhatsApp (reconnaissance immédiate) plutôt
   que la palette du site — c'est un point de contact, pas un
   élément de marque. Léger anneau or au survol pour rester
   cohérent avec l'identité "haute maison". ── */
.whatsapp-flottant {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 900;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), outline-color .2s;
  outline: 2px solid transparent; outline-offset: 3px;
}
.whatsapp-flottant:hover, .whatsapp-flottant:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  outline-color: var(--or-light);
}
.whatsapp-flottant svg { width: 30px; height: 30px; display: block; }
.whatsapp-flottant-bulle {
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--or-light); border: 2px solid var(--blanc);
}
@media (max-width: 799px) {
  .whatsapp-flottant { width: 52px; height: 52px; }
  .whatsapp-flottant svg { width: 27px; height: 27px; }
}
@media print {
  .whatsapp-flottant { display: none; }
}

/* ─── AVIS CLIENTS — style Google Reviews ─────────────
   Remplace l'ancienne section "Première réalisation".
   Cartes façon avis Google : avatar initiale, nom, 5 étoiles,
   petit badge "Avis Google" avec le logo multicolore, texte
   naturel, date relative. ── */
.avis-section { }
.avis-entete { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.avis-entete .s-filet { margin: 0 auto 32px; }
.avis-grille {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 760px) {
  .avis-grille { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.avis-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 2px 14px rgba(5,31,23,.05);
}
.avis-haut { display: flex; align-items: center; gap: 12px; }
.avis-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--vert-fonce); color: var(--or-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.avis-identite { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avis-nom { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--noir); }
.avis-badge { display: flex; align-items: center; gap: 5px; }
.avis-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.avis-badge span { font-size: 11px; color: var(--gris); letter-spacing: .01em; }
.avis-etoiles { display: flex; gap: 2px; }
.avis-etoiles svg { width: 16px; height: 16px; }
.avis-texte {
  font-family: var(--sans); font-size: 14px; line-height: 1.75;
  color: #333; flex-grow: 1;
}
.avis-date { font-size: 11.5px; color: var(--gris); }

/* ─── TRANSITION DE PAGE (chargement + navigation interne) ──────────
   Le wordmark bat doucement (battement de coeur) le temps que la page
   suivante soit prête, puis s'efface — plus simple et plus fluide que
   l'ancien sceau gravé. ── */
.djena-sceau {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--creme); opacity: 1; pointer-events: none;
  transition: opacity .45s ease;
}
.sceau-wordmark {
  width: min(58vw, 320px); height: auto;
  display: block;
  animation: djena-battement 1.15s ease-in-out infinite;
}
.djena-sceau.sceau-ouvert { opacity: 0; }
.djena-sceau.sceau-ouvert .sceau-wordmark { animation-play-state: paused; }
@keyframes djena-battement {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.06); }
  28% { transform: scale(1); }
  42% { transform: scale(1.04); }
  70% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .djena-sceau { transition: none !important; }
  .sceau-wordmark { animation: none !important; }
}

/* ─── DESTINATIONS — DÉFILÉ HORIZONTAL (remplace la grille statique) ─── */
.dest-defile {
  position: relative; height: 62vh; min-height: 420px; max-height: 640px;
  overflow: hidden; background: var(--noir-pur); touch-action: pan-y;
}
.dest-defile-hint {
  position: absolute; top: 20px; right: 24px; z-index: 5;
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.dest-defile-hint .fleche { display: inline-block; animation: dest-fleche 1.6s ease-in-out infinite; }
@keyframes dest-fleche { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.dest-defile-bg {
  position: absolute; top: 0; left: 0; height: 100%; width: 200%; z-index: 0;
  background: repeating-linear-gradient(100deg, var(--noir-pur) 0 240px, var(--or) 240px 242px);
  opacity: .5; will-change: transform;
}
.dest-defile-track { position: relative; height: 100%; display: flex; width: max-content; z-index: 1; will-change: transform; }
.dest-panel {
  width: min(78vw, 640px); height: 100%; flex: none; position: relative; display: flex; align-items: flex-end;
  padding: var(--space-5); border-right: 1px solid rgba(255,255,255,.1); overflow: hidden;
}
.dest-panel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease); }
.dest-panel:hover .dest-panel-photo { transform: scale(1.06); }
.dest-panel-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,7,16,.75) 0%, rgba(31,7,16,.1) 55%, transparent 75%);
}
.dest-panel-num {
  position: absolute; top: 22px; left: 26px; font-family: var(--serif); font-weight: 700;
  font-size: 64px; color: rgba(255,255,255,.16); line-height: 1; z-index: 2;
}
.dest-panel-legende { position: relative; z-index: 2; }
.dest-defile-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--jaune); width: 0%; z-index: 4; transition: width .05s linear; }
@media (prefers-reduced-motion: reduce) {
  .dest-defile-hint .fleche { animation: none; }
  .dest-panel-photo { transition: none; }
}
@media (max-width: 799px) {
  /* Sur mobile le défilé avance tout seul : l'invite "glisser" n'a plus lieu d'être */
  .dest-defile-hint { display: none; }
}

/* ─── FORMULES — VITRINE (photo + liste tarifaire numérotée) ──────────
   Remplace l'ancienne grille de cartes. Deux colonnes : la photo (la
   main, la coupe de rosé) à gauche, la liste des formules à droite,
   sur un fond rose pâle cohérent avec la charte "Bridal Experience". ── */
.formules-vitrine {
  display: grid;
  grid-template-columns: minmax(260px, 38%) 1fr;
  align-items: stretch;
}
.fv-photo { position: relative; min-height: 420px; overflow: hidden; background: var(--noir-pur); }
.fv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.fv-panneau {
  background: var(--creme);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 72px);
}
.fv-boite { width: 100%; max-width: 620px; }
.fv-wordmark { display: block; width: clamp(120px, 14vw, 156px); height: auto; margin: 0 auto 32px; }
.fv-eyebrow {
  text-align: center; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase; color: var(--or); margin-bottom: 2px;
}
.fv-titre {
  text-align: center; font-family: var(--serif); font-style: normal; font-weight: 700;
  font-size: clamp(34px, 4.6vw, 54px); letter-spacing: .04em; text-transform: uppercase;
  color: var(--noir); margin-bottom: clamp(36px, 5vw, 52px); text-wrap: balance;
}
.fv-liste { list-style: none; margin: 0; padding: 0; }
.fv-item {
  display: grid; grid-template-columns: 44px 1px 1fr auto; align-items: center; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid rgba(126,16,55,.14);
}
.fv-item:first-child { padding-top: 0; }
.fv-item:last-child { border-bottom: none; padding-bottom: 0; }
.fv-num {
  font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1;
  color: rgba(126,16,55,.32);
}
.fv-sep { width: 1px; align-self: stretch; background: rgba(126,16,55,.22); }
.fv-nom {
  font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .01em;
  color: var(--noir); margin-bottom: 5px;
}
.fv-nom em { font-style: italic; color: var(--or); }
.fv-desc { font-family: var(--sans); font-size: 12.5px; font-weight: 300; line-height: 1.6; color: #5B2A33; }
.fv-prix {
  background: rgba(126,16,55,.08); border-radius: 999px;
  padding: 11px 22px; text-align: center; white-space: nowrap;
}
.fv-prix-montant { display: block; font-family: var(--serif); font-weight: 700; font-size: 14.5px; color: var(--or); }
.fv-prix-unite {
  display: block; font-family: var(--sans); font-size: 8.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--or); opacity: .75; margin-top: 2px;
}
.fv-prix--devis { background: var(--or); }
.fv-prix--devis .fv-prix-montant { color: var(--blanc); }
.fv-note {
  text-align: center; margin-top: 36px; font-family: var(--sans); font-size: 10px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8A5B66;
}
@media (max-width: 899px) {
  .formules-vitrine { grid-template-columns: 1fr; }
  .fv-photo { min-height: 320px; }
}
@media (max-width: 480px) {
  .fv-item { grid-template-columns: 34px 1px 1fr; row-gap: 10px; }
  .fv-prix { grid-column: 1 / -1; justify-self: start; margin-left: 54px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE OCTOBRE 2026 — correctifs et nouvelles sections d'accueil
   (tout est à la fin du fichier : pour revenir en arrière, supprimer
   ce bloc jusqu'à la fin)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Voile du hero : teinte bordeaux profond (#1F0710) de la charte, au lieu du vert
      foncé hérité d'une ancienne version, + voile en haut pour que le logo « Maison Djena »
      et le menu restent lisibles sur les lampes blanches de la photo. */
.hero-voile {
  background: linear-gradient(
    180deg,
    rgba(31,7,16,.58) 0%,
    rgba(31,7,16,.20) 20%,
    rgba(31,7,16,.08) 42%,
    rgba(31,7,16,.30) 62%,
    rgba(31,7,16,.58) 100%
  ) !important;
}
.entete-voile {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 18%,
    rgba(31,7,16,.26) 55%,
    rgba(31,7,16,.52) 100%
  ) !important;
}

/* 2. Reste d'or de l'ancienne charte → rose vif de la charte (#F283AF) */
.btn-contour-or { border-color: rgba(242,131,175,.7) !important; }
.btn-contour-or:hover { background: rgba(242,131,175,.14) !important; border-color: var(--or-light) !important; }

/* 3. Mobile : 5 cartes en 2 colonnes → la dernière prend toute la largeur (plus de case vide) */
@media (max-width: 899px) {
  .grille-sections .section-carte:last-child { grid-column: 1 / -1; }
  .grille-sections .section-carte:last-child .section-carte-img-wrap { aspect-ratio: 16/10; }
}

/* 4. Bandeau de réassurance sous le hero */
.reassurance {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--creme); border-bottom: 1px solid var(--bordure);
}
.reassurance p {
  margin: 0; padding: 18px 12px; text-align: center;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--noir);
}
.reassurance p + p { border-left: 1px solid rgba(43,10,20,.14); }
@media (max-width: 640px) {
  .reassurance { grid-template-columns: 1fr; }
  .reassurance p { padding: 12px; font-size: 10px; }
  .reassurance p + p { border-left: 0; border-top: 1px solid rgba(43,10,20,.14); }
}

/* 5. Galerie « le lancement » */
.galerie-section { padding-bottom: 0; }
.galerie {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 128px; grid-auto-flow: dense; gap: 6px;
  margin-top: 8px;
}
.galerie .g { margin: 0; overflow: hidden; background: var(--creme); }
.galerie .g img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 8s var(--ease); }
.galerie .g:hover img { transform: scale(1.05); }
.galerie .g-large { grid-column: span 2; grid-row: span 2; }
.galerie .g-haut { grid-row: span 2; }
.galerie .g-demi { grid-column: span 2; }
@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 8px; }
}

/* 6. Sections alimentées par le back-office : si le contenu ne charge pas, on masque
      la section plutôt que d'afficher un grand vide. */
section:has(> .boite #etapes-mount:empty),
section:has(> .boite #faq-mount:empty) { display: none; }

/* 7. Étiquettes un peu plus lisibles sur mobile (11 → 12 px) */
@media (max-width: 640px) {
  .s-label, .section-carte-label { font-size: 11px; }
}

/* ════════════════════════════════════════════════════
   HEADER UNIFORME — « LE SCEAU » (v4)
   Même structure sur toutes les pages : photo plein cadre,
   voile bordeaux profond, filet rose pâle en cadre intérieur,
   label encadré de filets, titre Scotch Display centré.
   ════════════════════════════════════════════════════ */
.entete, .entete--clair {
  height: clamp(460px, 62vh, 640px); align-items: center; justify-content: center;
  margin-top: 120px;
}
.entete-voile, .entete--clair .entete-voile {
  background: linear-gradient(180deg, rgba(31,7,16,.40) 0%, rgba(31,7,16,.22) 45%, rgba(31,7,16,.66) 100%) !important;
}
.entete::after, .hero::after {
  content: ""; position: absolute; inset: 20px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(251,217,229,.55);
}
.entete-contenu, .entete--clair .entete-contenu {
  text-align: center; width: 100%; max-width: 900px; margin: 0 auto;
  padding: 0 var(--pad); display: flex; flex-direction: column; align-items: center;
}
.entete-label, .entete--clair .entete-label {
  display: flex; align-items: center; gap: 16px; justify-content: center;
  color: #FBD9E5 !important; opacity: 1; font-size: 11px; letter-spacing: .26em; margin-bottom: 22px;
}
.entete-label::before, .entete-label::after { content: ""; width: 40px; height: 1px; background: #FBD9E5; flex: none; }
.entete-titre, .entete--clair .entete-titre {
  color: #fff !important; text-align: center; margin: 0 auto; max-width: 780px;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.08; text-shadow: none !important;
}
.entete--clair .entete-contenu::after { display: none; }
@media (max-width: 640px) {
  .entete, .entete--clair { height: 520px; }
  .entete::after, .hero::after { inset: 12px; }
  .entete-label::before, .entete-label::after { width: 20px; }
  .entete--clair .entete-voile { background: linear-gradient(180deg, rgba(31,7,16,.40) 0%, rgba(31,7,16,.24) 45%, rgba(31,7,16,.66) 100%) !important; }
}

/* ════════ FORMULAIRE CONTACT — bordeaux profond (v4) ════════
   Remplace le fond rose pâle + texte gris par la surface sombre de la charte :
   libellés rose pâle, saisie blanche, accent rose vif, bouton rose. */
section.creme[data-cms-block="contact-formulaire"] { background: var(--noir-pur); }
[data-cms-block="contact-formulaire"] .form-champ { border-bottom-color: rgba(251,217,229,.22); }
[data-cms-block="contact-formulaire"] .form-champ:first-child { border-top-color: rgba(251,217,229,.22); }
[data-cms-block="contact-formulaire"] .form-champ label { color: #F5DAE5; }
[data-cms-block="contact-formulaire"] .form-champ input,
[data-cms-block="contact-formulaire"] .form-champ select,
[data-cms-block="contact-formulaire"] .form-champ textarea { color: #fff; border-bottom: 1px solid transparent; }
[data-cms-block="contact-formulaire"] .form-champ input::placeholder,
[data-cms-block="contact-formulaire"] .form-champ textarea::placeholder { color: rgba(251,217,229,.5); }
[data-cms-block="contact-formulaire"] .form-champ input:focus,
[data-cms-block="contact-formulaire"] .form-champ select:focus,
[data-cms-block="contact-formulaire"] .form-champ textarea:focus { border-bottom-color: var(--or-light); }
[data-cms-block="contact-formulaire"] .form-champ:focus-within label { color: var(--or-light); }
[data-cms-block="contact-formulaire"] select { color-scheme: dark; }
[data-cms-block="contact-formulaire"] select option { background: #1F0710; color: #fff; }
[data-cms-block="contact-formulaire"] form > p { color: rgba(251,217,229,.78) !important; }
[data-cms-block="contact-formulaire"] .btn-noir { background: var(--or-light); border-color: var(--or-light); color: var(--noir-pur); font-weight: 600; }
[data-cms-block="contact-formulaire"] .btn-noir:hover { background: #fff; border-color: #fff; opacity: 1; }
[data-cms-block="contact-formulaire"] #success .s-label { color: var(--or-light); }
[data-cms-block="contact-formulaire"] #success .s-titre { color: #fff; }
[data-cms-block="contact-formulaire"] #success .s-corps { color: rgba(251,217,229,.85); }
[data-cms-block="contact-formulaire"] #success .s-filet { background: var(--or-light); }

/* ════════ GALERIE QUI DÉFILE (v4) ════════ */
.galerie.galerie--defile { display: block; overflow: hidden; gap: 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.galerie-piste { display: flex; gap: 8px; width: max-content; animation: galerie-defile 70s linear infinite; }
.galerie--defile:hover .galerie-piste, .galerie--defile:focus-within .galerie-piste { animation-play-state: paused; }
.galerie--defile .g { flex: none; height: 300px; aspect-ratio: 3/2; grid-column: auto; grid-row: auto; }
.galerie--defile .g-haut { aspect-ratio: 2/3; }
@media (min-width: 900px) { .galerie--defile .g { height: 400px; } }
@keyframes galerie-defile { to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) {
  .galerie.galerie--defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .galerie-piste { animation: none; }
}
[data-cms-block="contact-formulaire"] + section.fonce { border-top: 1px solid rgba(251,217,229,.18); }

/* ════════ v5 — ACCUEIL : photo yacht + logo ════════ */
.hero--logo { align-items: flex-start; }
.hero--logo .hero-photo { object-position: 50% 62%; transform: none; transition: none; }
.hero--logo::after { display: none; }
.hero--logo .hero-contenu { padding-top: clamp(110px, 17vh, 190px); padding-bottom: 0; }
.hero-logo-h1 { margin: 0 0 22px; line-height: 0; }
.hero-logo { width: clamp(270px, 44vw, 620px); height: auto; display: inline-block; }
.hero--logo .hero-sous { color: var(--noir); font-size: 14px; font-weight: 400; letter-spacing: .08em; margin-bottom: 26px; }
/* nav lisible sur le ciel clair tant qu'on n'a pas défilé ; le logo du hero remplace le logo de nav */
body:has(.hero--logo) #nav:not(.scrolled) .nav-burger,
body:has(.hero--logo) #nav:not(.scrolled) .nav-contact { color: var(--or); }
body:has(.hero--logo) #nav:not(.scrolled) .nav-logo { visibility: hidden; }
@media (max-width: 800px) {
  .hero--logo { height: 88svh; min-height: 560px; }
  .hero--logo .hero-photo { object-position: 46% 78%; }
}

/* ════════ v5 — HEADER PAGES INTÉRIEURES (style Waraa, charte Maison Djena) ════════
   Typographique : fil d'Ariane, numéro + label, grand titre, intro, bouton. Pas de photo. */
.entete-page {
  position: relative; overflow: hidden; margin-top: 120px;
  background: var(--creme); border-bottom: 1px solid rgba(126,16,55,.22);
}
.ep-boite { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 72px) var(--pad) clamp(52px, 8vw, 88px); }
.ep-retour { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); text-decoration: none; margin-bottom: clamp(36px, 7vw, 72px); border-bottom: 1px solid transparent; }
.ep-retour:hover { border-bottom-color: var(--or); }
.ep-label { display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--or); margin: 0 0 22px; }
.ep-num { font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }
.ep-trait { width: 40px; height: 1px; background: var(--or); }
.ep-titre { font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 7vw, 88px); line-height: 1.04; color: var(--or); margin: 0 0 26px; max-width: 12em; text-wrap: balance; }
.ep-intro { font-family: var(--sans); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; color: var(--noir); max-width: 520px; margin: 0 0 30px; }
.ep-cta { margin-top: 2px; }
.entete-page::after { content: attr(data-num); position: absolute; right: clamp(8px, 4vw, 64px); bottom: -.18em; z-index: 1; font-family: var(--serif); font-size: clamp(180px, 30vw, 420px); line-height: 1; color: rgba(126,16,55,.09); pointer-events: none; }
@media (max-width: 640px) { .entete-page { margin-top: 100px; } .ep-titre { font-size: 38px; } }

/* v7 — cartes de navigation : uniquement des CTA bordeaux, sans image */
.grille-sections{gap:0;background:var(--or)}
.grille-sections .section-carte{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--or);color:var(--creme);padding:34px 20px;min-height:120px;border-left:1px solid rgba(251,217,229,.25);transition:background .3s}
.grille-sections .section-carte:first-child{border-left:0}
.grille-sections .section-carte:hover{background:var(--noir-pur)}
.grille-sections .section-carte-txt{padding:0;background:none}
.grille-sections .section-carte-label{color:var(--creme);opacity:.8}
.grille-sections .section-carte-nom{color:#fff;opacity:1}
.grille-sections .section-carte:hover .section-carte-nom{opacity:1}
@media(max-width:899px){.grille-sections{grid-template-columns:1fr}.grille-sections .section-carte:last-child{grid-column:auto}.grille-sections .section-carte{border-left:0;border-top:1px solid rgba(251,217,229,.25);min-height:96px}.grille-sections .section-carte:first-child{border-top:0}}