/* =========================================================================
   EQUILIBRIUM — Charte « Or antique »
   Même direction éditoriale que l'accueil (index.php + assets/css/home.css),
   sur la palette « Or antique » (la seule du site ; ses variables sont aussi
   déclarées en tête de assets/css/home.css) : titres serif Cormorant Garamond, capitales
   Cinzel, corps Manrope, parchemin et bronze — avec les boutons et la navbar
   en pilule, et les cartes largement arrondies hérités du reste de la
   refonte. Sert de thème à toutes les pages qui n'utilisent pas le
   traitement cinématique de l'accueil.

   UN SEUL THÈME. La page est sur fond parchemin ; les bandes « vitrines »
   (héros, bandeau chiffres, sections .section--deep, footer) repassent en
   sombre. Ces deux palettes sont les seules du fichier :
     · :root                                        → la base claire
     · .hero, .statsband, .section--deep, .colophon → les bandes sombres
   Toutes les couleurs passent par ces variables : en changer une ici la met
   à jour partout.
   ========================================================================= */

:root {
  /* --- Fonds — parchemin (la base de toute page) ---------------------- */
  --bg:        #f6f1e4;   /* parchemin */
  --bg-deep:   #ede5d0;   /* sections profondes */
  --bg-2:      #f1ebdb;   /* section alternée */
  --surface:   #fbf8ee;   /* cartes, panneaux */
  --surface-2: #f1e9d6;   /* survol */

  /* --- Or & filets — bronze soutenu, lisible sur fond clair ----------- */
  --gold:      #9a7328;   /* or — accent principal */
  --gold-soft: #7c611f;   /* or profond — capitales, sous-titres */
  --gold-deep: #83621f;   /* or foncé — survols */
  --gold-line:  rgba(154,115,40,.28);  /* filet doré */
  --gold-line-2:rgba(154,115,40,.5);   /* filet doré appuyé */
  --on-gold:    #fdfaf1;               /* texte posé sur un aplat or (boutons…) */

  /* --- Texte --------------------------------------------------------- */
  --ink:    #241d10;                 /* titres */
  --cream:  #3b3423;                 /* texte courant */
  --mute:   rgba(59,52,35,.74);      /* texte secondaire */
  --faint:  rgba(59,52,35,.68);      /* texte ténu (≥ 4,5:1 sur parchemin) */
  --line:   rgba(154,115,40,.24);    /* bordure hairline dorée */
  --separator: rgba(154,115,40,.2);  /* séparateur de section */

  /* --- Teintes d'univers --------------------------------------------- */
  --egypte: #8a6a24;   /* Égypte — or chaud */
  --pirate: #22705a;   /* Pirate — vert-de-gris */
  --espion: #3f5c8c;   /* Espion — bleu nuit */
  --egypte-line: rgba(138,106,36,.45);  /* bordure badge Égypte */
  --pirate-line: rgba(34,112,90,.45);   /* bordure badge Pirate */
  --espion-line: rgba(63,92,140,.45);   /* bordure badge Espion */

  /* --- Compat (anciens noms encore référencés en inline) ------------- */
  --accent:    var(--gold);
  --accent-d:  var(--gold-deep);
  --ok:  #4c6e40;
  --err: #a05a28;

  /* --- Typographie --------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-title:   'Cinzel', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* --- Rythme & rayons — arrondis, façon 2026 -------------------------- */
  --max:       1180px;
  --gutter:    clamp(1.9rem, 4.5vw, 3.5rem);
  --radius:    18px;
  --radius-sm: 10px;

  /* --- Ombres -------------------------------------------------------- */
  --shadow-sm: 0 8px 24px -12px rgba(96,74,28,.22);
  --shadow:    0 16px 44px -16px rgba(96,74,28,.26);
  --shadow-lg: 0 28px 70px -24px rgba(96,74,28,.3);

  /* --- Transitions --------------------------------------------------- */
  --t-fast: 220ms cubic-bezier(.2,.7,.2,1);
  --t-base: 480ms cubic-bezier(.2,.7,.2,1);
}

/* =========================================================================
   Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 110%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--on-gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h3 { font-size: 1.5rem; }
p  { margin: 0 0 1em; }
strong, b { font-weight: 600; color: var(--cream); }

/* Capitales dorées espacées (Cinzel) */
.smallcaps {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* =========================================================================
   Layout
   ========================================================================= */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Ancres du one-page : décalage pour ne pas passer sous la navbar fixe */
[id] { scroll-margin-top: 5.5rem; }
.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
  border-bottom: 1px solid var(--separator);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--deep { background: var(--bg-deep); }
.section--dark { background: var(--bg-2); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.lead { font-size: clamp(1.18rem, 1.75vw, 1.4rem); color: var(--mute); font-weight: 300; }

/* Eyebrow — libellé doré espacé */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
/* Filet doré décoratif */
.rule { width: 44px; height: 1px; background: var(--gold); border: 0; margin: 1.6rem 0; }
.rule--center { margin-inline: auto; }

.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.04; letter-spacing: -0.01em;
  margin: 0 0 1rem; color: var(--ink);
}
.section-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.section-sub { font-size: clamp(1.12rem, 1.65vw, 1.29rem); color: var(--mute); max-width: 620px; font-weight: 300; }

/* =========================================================================
   Navbar
   ========================================================================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1.1rem clamp(.8rem, 2.5vw, 2rem);
  transition: padding var(--t-base);
}
/* Topbar en 3 zones sur UNE seule rangée : liens à gauche · logo centré ·
   liens (accueil) ou bouton devis à droite.
   .navbar-nav est un simple conteneur (display:contents) qui laisse ses deux
   <ul> se placer directement dans la grille ; sous 1400px il redevient une
   vraie boîte : le panneau coulissant du menu mobile. */
.navbar-nav     { display: contents; }
.navbar-links   { grid-column: 1; grid-row: 1; justify-self: start; }
.navbar-brand   { grid-column: 2; grid-row: 1; justify-self: center; }
.navbar-links--right  { grid-column: 3; grid-row: 1; justify-self: end; }
.navbar > .navbar-cta,
.navbar > .navbar-ctas { grid-column: 3; grid-row: 1; justify-self: end; }
/* Deux boutons côte à côte : réserver, puis devis */
.navbar-ctas { display: flex; align-items: center; gap: 0.6rem; }
.navbar-toggle  { grid-column: 1; grid-row: 1; justify-self: start; }
@media (max-width: 1400px) { .navbar-brand img { height: 2.3rem; } }
/* Fond + flou du mode "scrolled" portés par un pseudo-élément : un
   backdrop-filter posé sur .navbar elle-même en ferait le "containing block"
   du panneau mobile position:fixed (#nav-links), qui se retrouverait décalé
   du padding de la navbar et dépasserait sur la page une fois replié. */
.navbar::before {
  content: ''; position: absolute; inset: .55rem clamp(.5rem, 2vw, 1.6rem); z-index: -1;
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(16,14,10,0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  opacity: 0; transition: opacity var(--t-base), border-color var(--t-base);
}
.navbar.scrolled::before { opacity: 1; border-color: var(--gold-line-2); }
.navbar.scrolled { padding-block: 0.8rem; }
.navbar-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-title); font-weight: 600;
  font-size: 1.02rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-soft);
}
/* Logo image (lockup or horizontal) */
.navbar-brand img { height: 2.9rem; width: auto; display: block; }
.colophon .navbar-brand img { height: 3.4rem; }
.navbar-brand .mark {
  width: 1.7em; height: 1.7em; border-radius: var(--radius-sm);
  border: 1px solid var(--gold-line-2);
  color: var(--gold); display: grid; place-items: center;
  font-size: 0.62em; font-weight: 700; letter-spacing: 0;
  font-family: var(--font-title);
}
.navbar-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2rem); list-style: none; margin: 0; padding: 0; }
/* CTA de la topbar : jamais sur deux lignes ; libellé court sur petit écran */
.navbar > .navbar-cta, .navbar-ctas .navbar-cta { white-space: nowrap; }
.navbar-cta .cta-short { display: none; }
/* Deux boutons dans la topbar : libellés courts plus tôt que pour un seul. */
@media (max-width: 860px) {
  .navbar-cta .cta-full { display: none; }
  .navbar-cta .cta-short { display: inline; }
}
/* Petit téléphone : hamburger + logo + deux boutons ne tiennent pas sur 375 px
   (le bouton de droite sortait de l'écran). Colonne centrale souple, boutons resserrés. */
@media (max-width: 480px) {
  .navbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; }
  .navbar-brand { min-width: 0; }
  .navbar-brand img { height: 2rem; max-width: 100%; object-fit: contain; }
  .navbar-toggle { width: 40px; }
  .navbar-ctas { gap: 0.35rem; }
  .navbar-ctas .btn--sm, .navbar > .navbar-cta { padding: 0.55rem 0.75rem; font-size: 0.8rem; }
}
@media (max-width: 360px) {
  .navbar { padding-inline: 0.5rem; }
  .navbar-toggle { width: 36px; }
  .navbar-ctas { gap: 0.25rem; }
  .navbar-ctas .btn--sm, .navbar > .navbar-cta { padding: 0.5rem 0.55rem; font-size: 0.74rem; }
}
/* Monogramme d'accueil : uniquement dans le menu mobile (le logo horizontal est déjà en topbar) */
.navbar-links .nav-home { display: none; }
.navbar-links .nav-home img { height: 2.6rem; width: auto; }
@media (max-width: 1400px) { .navbar:not(.navbar--deploye) .navbar-links .nav-home { display: block; } }
.navbar-links a {
  font-family: var(--font-body); color: var(--mute); font-weight: 400;
  font-size: 0.91rem; letter-spacing: 0.06em; transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap; /* les libellés ne doivent jamais passer sur deux lignes */
}
/* Sélection en pastille (forme des boutons), pas de soulignement */
.navbar:not(.navbar--deploye) .navbar-links a { padding: 0.5rem 1rem; border-radius: 999px; }
.navbar-links a:hover { color: var(--ink); background: rgba(154,115,40,.14); }
.navbar-links a[aria-current="page"] { color: var(--ink); background: rgba(154,115,40,.22); }
.navbar-links .navbar-cta a { color: var(--on-gold); }
.navbar--deploye .navbar-links a:hover,
.navbar--deploye .navbar-links a[aria-current="page"] { color: var(--gold-soft); background: none; }

.navbar-toggle {
  display: none; background: transparent; border: 0; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
  position: relative; z-index: 61; /* au-dessus du panneau (60) : la croix reste cliquable */
}
.navbar-toggle span { display: block; width: 22px; height: 1.5px; background: var(--gold-soft); transition: transform .25s, opacity .25s; }
.navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1400px) {
  /* Repli derrière le hamburger — sauf pour les topbars marquées
     .navbar--deploye, dont les liens ne doivent jamais disparaître. */
  .navbar:not(.navbar--deploye) .navbar-toggle { display: flex; }
  /* Le panneau coulissant, c'est le conteneur : les deux groupes de liens
     (gauche et droite de la topbar) s'y empilent l'un sous l'autre. */
  .navbar:not(.navbar--deploye) .navbar-nav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; height: 100dvh; width: 82vw; max-width: 330px;
    padding: 5.5rem 2rem 2rem;
    background: var(--bg-deep);
    /* Replié : totalement hors écran ET invisible — sans ombre, sinon elle
       "bave" sur le bord gauche de la page (très visible en mode clair) */
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
    z-index: 60; overflow-y: auto;
    border-right: 1px solid var(--gold-line);
  }
  .navbar:not(.navbar--deploye) .navbar-nav.is-open {
    transform: translateX(0); visibility: visible;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s;
    box-shadow: 14px 0 50px rgba(0,0,0,.6);
  }
  .navbar:not(.navbar--deploye) .navbar-links { flex-direction: column; align-items: stretch; gap: 0; }
  /* Filet de séparation entre le groupe de gauche et celui de droite */
  .navbar:not(.navbar--deploye) .navbar-links--right { margin-top: 0.8rem; padding-top: 0.4rem; border-top: 1px solid var(--gold-line); }
  .navbar:not(.navbar--deploye) .navbar-links a { padding: 0.85rem 0; font-size: 1.05rem; letter-spacing: 0.08em; }
  .navbar-links .navbar-cta { margin-top: 1.4rem; border: 0; }
  .navbar-links .navbar-cta a { justify-content: center; border: 0; }
  /* --- Topbar déployée (accueil) ---------------------------------------
     Elle ne se replie pas : le logo prend la première rangée, tous les liens
     se rangent en dessous et passent à la ligne d'eux-mêmes si l'écran est
     trop étroit. Aucun lien n'est jamais masqué. */
  .navbar--deploye {
    grid-template-columns: 1fr; justify-items: center;
    row-gap: 0.45rem; padding-block: 0.7rem;
  }
  .navbar--deploye .navbar-brand { grid-column: 1; grid-row: 1; }
  .navbar--deploye .navbar-nav {
    grid-column: 1; grid-row: 2;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.2rem clamp(0.9rem, 2.4vw, 2rem);
  }
  .navbar--deploye .navbar-links {
    grid-column: auto; grid-row: auto; justify-self: auto;
    flex-wrap: wrap; justify-content: center;
  }
  .navbar--deploye .navbar-links .nav-home { display: none; }
  /* La topbar déployée est plus haute qu'une topbar sur une seule rangée :
     le héros doit démarrer plus bas, sinon son accroche passe dessous. */
  .topbar-deployee .hero { padding-top: 11rem; }
  body.nav-open { overflow: hidden; }
  body.nav-open::after { content:''; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 49; }
}

/* =========================================================================
   Boutons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.6rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.05em; cursor: pointer; border: 1px solid transparent; line-height: 1.2;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-soft); box-shadow: 0 10px 30px -10px rgba(154,115,40,.55); }
.btn--outline { background: transparent; color: var(--gold-soft); border-color: var(--gold-line-2); }
.btn--outline:hover { border-color: var(--gold); background: rgba(154,115,40,.08); }
/* alias hérités */
.btn--dark { background: rgba(255,255,255,.05); color: var(--gold-soft); border-color: var(--gold-line); }
.btn--dark:hover { background: rgba(154,115,40,.1); border-color: var(--gold-line-2); }
.btn--light { background: var(--gold); color: var(--on-gold); }
.btn--light:hover { background: var(--gold-soft); }
.btn--sm { padding: 0.62rem 1.1rem; font-size: 0.86rem; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn-row--center { justify-content: center; }

/* Petits écrans : la topbar déployée se resserre pour ne pas manger le héros. */
@media (max-width: 900px) {
  .navbar--deploye .navbar-links a { font-size: 0.85rem; letter-spacing: 0.04em; }
  .navbar--deploye .navbar-nav { gap: 0.1rem clamp(0.7rem, 3vw, 1.3rem); }
  .topbar-deployee .hero { padding-top: 13.5rem; }
}

/* =========================================================================
   Hero — plein cadre sombre, typographie éditoriale
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  /* confine le mix-blend-mode de la vidéo de fond au héros */
  isolation: isolate;
  background: var(--bg-deep); color: var(--ink); text-align: center;
  padding: clamp(9rem, 17vw, 12rem) var(--gutter) clamp(4.5rem, 9vw, 7rem);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--gold-line);
}
.hero--tall { min-height: 90vh; }
/* Visuel de fond, très discret (parallax via main.js) */
.hero-media {
  position: absolute; inset: -12% 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.22; will-change: transform;
}
/* Variante vidéo (engrenages) : "screen" laisse tomber le noir du rush, seuls
   les engrenages dorés s'impriment sur le fond du héros. */
.hero-media--video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.85; mix-blend-mode: screen;
  pointer-events: none;
}
/* Écrans moins larges que le rush : "cover" ne garde qu'une colonne, et le
   centre de la vidéo est vide — on cale le cadrage sur les engrenages, qui
   occupent le quart droit. Sans ça le fond paraît noir sur mobile.
   Ils arrivent alors derrière le texte : on les atténue d'autant. */
@media (max-aspect-ratio: 16/10) {
  .hero-media--video { object-position: 100% center; opacity: 0.6; }
}
@media (max-width: 700px) {
  .hero-media--video { opacity: 0.5; }
}
/* Voile + halo doré + texture verticale fine */
.hero-darken {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(201,162,75,.16), transparent 55%),
    radial-gradient(110% 80% at 12% 100%, rgba(47,107,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(31,26,18,.45), rgba(31,26,18,.72));
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,.014) 38px, rgba(255,255,255,.014) 39px);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.hero-eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.6rem;
}
.hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  line-height: 1.0; letter-spacing: -0.015em; margin: 0; color: var(--ink);
}
.hero-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.hero-divider { width: 46px; height: 1px; background: var(--gold); margin: 2rem auto; }
.hero-tagline {
  font-size: clamp(1.14rem, 1.85vw, 1.34rem); color: var(--mute); font-weight: 300;
  max-width: 500px; margin: 0 auto; line-height: 1.75;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2.4rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.4rem; margin-top: 2rem;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.hero-meta span { position: relative; }
.hero-meta span + span::before { content: '·'; color: var(--gold); margin-right: 1.4rem; }
/* anciens pills → rendu discret */
.hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.95rem; border-radius: 100px;
  border: 1px solid var(--gold-line); color: var(--mute);
  font-size: 0.8rem; letter-spacing: 0.08em;
}
.pill .star { color: var(--gold); }

/* =========================================================================
   Bandeau chiffres clés
   ========================================================================= */
.statsband { background: var(--bg-deep); border-bottom: 1px solid var(--gold-line); }
.statsband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 2.4rem; }
@media (max-width: 860px) { .statsband__grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; } }
/* Variante à 3 chiffres : reste sur une ligne, passe en colonne unique en mobile */
.statsband__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .statsband__grid--3 { grid-template-columns: 1fr; gap: 1.6rem; }
  .statsband__grid--3 .stat + .stat { border-left: 0; border-top: 1px solid var(--gold-line); padding-top: 1.6rem; }
}
.stat { text-align: center; padding-inline: 0.5rem; }
.stat + .stat { border-left: 1px solid var(--gold-line); }
@media (max-width: 860px) { .stat:nth-child(3) { border-left: 0; } }
.stat__num {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: 0; color: var(--gold);
}
.stat__num span { font-size: 0.55em; }
.stat__label { display: block; font-size: 0.76rem; color: var(--faint); margin-top: 0.35rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* =========================================================================
   Grilles & cartes
   ========================================================================= */
.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius);
  padding: 1.9rem; display: flex; flex-direction: column;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card--link { color: inherit; }
.card--hover:hover, .card--link:hover { transform: translateY(-4px); border-color: var(--gold-line-2); box-shadow: var(--shadow); }
.card--accent { border-top: 2px solid var(--gold); }
.card__media {
  margin: -1.9rem -1.9rem 1.5rem; border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--gold-line); position: relative; background: var(--surface-2);
}
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.card--link:hover .card__media img { transform: scale(1.04); }
.card__tag {
  display: inline-block; align-self: flex-start; font-family: var(--font-title);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border: 1px solid var(--gold-line-2); border-radius: 100px;
  color: var(--gold); margin-bottom: 0.9rem;
}
.card__tag--blue   { color: var(--pirate); border-color: var(--pirate-line); }
.card__tag--egypte { color: var(--egypte); border-color: var(--egypte-line); }
.card h3 { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.card .meta { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0.2rem 0 0.7rem; }
.card p, .card .note { color: var(--mute); }
.card .btn { margin-top: auto; align-self: flex-start; }

/* Étapes numérotées — chiffres or Cinzel */
.step__num {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 2.8rem; line-height: 1; color: var(--gold);
  margin-bottom: 0.6rem;
}

/* Liste "check" (puces filet doré) */
.tick { list-style: none; padding: 0; margin: 0; }
.tick li { position: relative; padding: 0.55rem 0 0.55rem 1.7rem; border-top: 1px solid var(--gold-line); font-size: 1.08rem; color: var(--cream); }
.tick li:first-child { border-top: 0; }
.tick li::before {
  content: ''; position: absolute; left: 0; top: 1.05rem; width: 0.7rem; height: 1px; background: var(--gold);
}

/* Features / réassurance — panneaux épurés */
.features { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .features { grid-template-columns: repeat(2, 1fr); } }
.feature {
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius);
  padding: 1.5rem 1.3rem; text-align: center;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.feature:hover { border-color: var(--gold-line-2); transform: translateY(-3px); }
.feature .ico { font-family: var(--font-display); font-size: 1.7rem; display: block; margin-bottom: 0.4rem; color: var(--gold); font-style: italic; }
/* Icône-image teintée en or via masque (silhouette PNG alpha -> aplat doré).
   Le chemin est relatif à CE fichier CSS (assets/css/), d'où ../img/. */
.feature .ico--mask {
  width: 2.7rem; height: 2.7rem; margin: 0 auto 0.6rem; font-size: 0;
  background-color: var(--gold);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ico--coop      { -webkit-mask-image: url(../img/ico-coop.png);      mask-image: url(../img/ico-coop.png); }
.ico--intuition { -webkit-mask-image: url(../img/ico-intuition.png); mask-image: url(../img/ico-intuition.png); }
.ico--enigmes   { -webkit-mask-image: url(../img/ico-enigmes.png);   mask-image: url(../img/ico-enigmes.png); }
.ico--temps     { -webkit-mask-image: url(../img/ico-temps.png);     mask-image: url(../img/ico-temps.png); }
.feature b { font-family: var(--font-title); font-weight: 600; font-size: 0.89rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.feature p { margin: 0.45rem 0 0; color: var(--mute); font-size: 1rem; }

/* =========================================================================
   Média encadré + split 2 colonnes
   ========================================================================= */
.media-frame {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow);
  background: var(--surface-2); aspect-ratio: 16 / 9;
}
.media-frame img, .media-frame video, .media-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Les vidéos ne doivent jamais être rognées : on affiche l'image entière (letterbox sur fond noir si besoin) */
.media-frame video { object-fit: contain; background: #000; }

/* Portrait de l'auteur */
.author-photo {
  display: block; width: 260px; max-width: 60%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--gold-line);
  box-shadow: var(--shadow); margin-bottom: 1.6rem;
}
@media (max-width: 860px) { .author-photo { margin-inline: auto; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 4.5rem); align-items: center; }
.split--media-first { direction: rtl; }
.split--media-first > * { direction: ltr; }
@media (max-width: 860px) { .split, .split--media-first { grid-template-columns: 1fr; direction: ltr; } }

/* =========================================================================
   Témoignage — carte "cartouche de musée" : médaillon client épinglé sur le
   bord haut, citation en exergue, filet doré, source en capitales.
   ========================================================================= */
.quote-card {
  position: relative;
  max-width: 520px;
  /* la marge haute laisse la place au médaillon qui déborde */
  margin: 5.5rem auto 0;
  padding: 0 2.4rem 2.4rem;
  text-align: center;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(201,162,75,.13), transparent 62%),
    var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.quote-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-line-2);
  box-shadow: var(--shadow);
}

/* Médaillon : logo client cerclé d'or, détaché du fond de la carte */
.quote-card__badge {
  width: 84px; height: 84px;
  margin: -42px auto 1.5rem;          /* remonte à cheval sur la bordure */
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-line-2);
  box-shadow: 0 0 0 7px var(--surface), 0 12px 30px -14px rgba(0,0,0,.55);
  transition: transform var(--t-base), border-color var(--t-base);
}
.quote-card:hover .quote-card__badge { transform: scale(1.04); border-color: var(--gold); }

/* Citation — Cormorant italique, guillemets français dorés */
.quote-card__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.25;
  color: var(--ink);
}
.quote-card__text::before { content: '«\00a0'; color: var(--gold); font-style: normal; }
.quote-card__text::after  { content: '\00a0»'; color: var(--gold); font-style: normal; }

.quote-card__source {
  font-family: var(--font-title);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-soft);
}

/* =========================================================================
   Villes
   ========================================================================= */
.city-list { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.city-list li {
  padding: 0.45rem 1rem; border-radius: 100px; font-size: 0.91rem; letter-spacing: 0.06em;
  background: transparent; border: 1px solid var(--gold-line); color: var(--gold-soft);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq details {
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius);
  margin-bottom: 0.8rem; padding: 0 1.6rem; overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq details[open] { border-color: var(--gold-line-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 0;
  font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; color: var(--ink);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; font-weight: 300; color: var(--gold); transition: transform var(--t-fast); flex: none; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: 1.3rem; color: var(--mute); border-top: 1px solid var(--gold-line); padding-top: 1.1rem; }
.faq details a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Comparatif (plans) + process
   ========================================================================= */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 1.9rem); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius);
  padding: 2rem; position: relative; transition: transform var(--t-base), border-color var(--t-base);
}
.plan:hover { transform: translateY(-4px); border-color: var(--gold-line-2); }
.plan--featured { border-color: var(--gold-line-2); box-shadow: var(--shadow); }
.plan--featured::before {
  content: 'Sur mesure'; position: absolute; top: -0.7rem; right: 1.4rem;
  background: var(--gold); color: var(--on-gold); font-family: var(--font-title);
  font-size: 0.69rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 100px;
}
.plan h3 { font-family: var(--font-title); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.plan__price { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--gold); margin: 0.3rem 0 1.2rem; }
.plan .note { color: var(--mute); }
/* respiration entre le badge (Niveau I, Une table…) et le titre */
.plan .card__tag { margin-bottom: 1.4rem; }

/* Grille des formules (tableau des tarifs) */
.pricing { background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius); overflow: hidden; }
.pricing__head, .pricing__row { display: grid; grid-template-columns: 1fr 190px 210px; gap: clamp(1.2rem, 2.5vw, 2.4rem); align-items: center; padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem); }
.pricing__head { padding-top: 1.05rem; padding-bottom: 1.05rem; font-family: var(--font-title); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); border-bottom: 1px solid var(--gold-line-2); }
.pricing__row { border-bottom: 1px solid var(--gold-line); transition: background var(--t-fast); }
.pricing__row:last-child { border-bottom: 0; }
.pricing__row:hover { background: var(--surface-2); }
.pricing__name { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; color: var(--ink); }
.pricing__row .note { margin: 0; color: var(--mute); }
.pricing__pax strong, .pricing__duree strong { display: block; color: var(--ink); font-weight: 500; }
.pricing__pax span, .pricing__duree span { color: var(--faint); font-size: 0.95rem; }
.pricing__label { display: block; font-family: var(--font-title); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.15rem; }
.pricing__price strong { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.45rem; color: var(--gold); white-space: nowrap; }
.pricing__price small { display: block; color: var(--faint); font-size: 0.9rem; margin-top: 0.1rem; }
/* Variante 4 colonnes : Formule · Durée · Participants · Tarif HT */
.pricing--4 .pricing__head,
.pricing--4 .pricing__row { grid-template-columns: 1fr 120px 175px 175px; }
@media (max-width: 1100px) {
  .pricing--4 .pricing__head,
  .pricing--4 .pricing__row { grid-template-columns: 1fr 105px 150px 150px; gap: 1.2rem; }
}
@media (max-width: 860px) {
  .pricing__head { display: none; }
  .pricing__row,
  .pricing--4 .pricing__row { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* Indicateur de difficulté (losanges dorés) */
.difficulty { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0.2rem 0 1rem; }
.difficulty__label { font-family: var(--font-title); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.difficulty__dots { display: inline-flex; gap: 5px; }
.difficulty__dots i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--gold-line-2); border-radius: 1px; }
.difficulty__dots i.on { background: var(--gold); border-color: var(--gold); }
.difficulty__num { font-family: var(--font-body); font-size: 0.87rem; color: var(--mute); letter-spacing: 0.02em; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
.process__step {
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius);
  padding: 1.3rem; transition: border-color var(--t-fast), transform var(--t-fast);
}
.process__step:hover { border-color: var(--gold-line-2); transform: translateY(-3px); }
.process__step b { display: block; font-family: var(--font-title); font-weight: 600; font-size: 0.87rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.4rem; }
.process__step p { margin: 0; color: var(--mute); font-size: 1rem; }

/* =========================================================================
   Bloc CTA final
   ========================================================================= */
.cta-final {
  border-radius: var(--radius); padding: clamp(2.8rem, 6vw, 4.5rem); text-align: center;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,.14), transparent 60%),
    var(--bg-deep);
}
.cta-final .section-title, .cta-final h2 { color: var(--ink); }
.cta-final .lead { color: var(--mute); }

/* =========================================================================
   Formulaire
   ========================================================================= */
.form { background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.6rem, 4vw, 2.6rem); }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 700px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
/* min-width:0 : sans lui, un <select> aux libellés longs élargit la colonne et la page déborde à droite */
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-body); font-weight: 500; font-size: 0.91rem; letter-spacing: 0.04em; color: var(--gold-soft); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1.1rem; color: var(--ink); font-weight: 300;
  padding: 0.78rem 0.9rem; border: 1px solid var(--gold-line); border-radius: var(--radius-sm);
  background: var(--bg-2); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(201,162,75,.14);
}
.field select option { background: var(--bg-2); color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }
.consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1rem; color: var(--mute); font-weight: 300; }
.consent input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: none; accent-color: var(--gold); }

.alert { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem; font-weight: 400; font-size: 1.05rem; border: 1px solid; }
.alert--ok  { background: rgba(139,176,126,.1); color: #a6c79a; border-color: rgba(139,176,126,.35); }
.alert--err { background: rgba(207,138,91,.1);  color: #dda57e; border-color: rgba(207,138,91,.4); }

/* =========================================================================
   Footer
   ========================================================================= */
.colophon { background: var(--bg-deep); color: var(--faint); font-size: 1.02rem; border-top: 1px solid var(--gold-line); }
.colophon .wrap { padding-block: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gutter); }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.colophon h4 { font-family: var(--font-title); color: var(--gold-soft); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
.colophon a { color: var(--mute); transition: color var(--t-fast); }
.colophon a:hover { color: var(--gold-soft); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
/* Cibles tactiles plus confortables sur mobile */
.footer-links a { display: inline-block; padding-block: 0.3rem; }
.footer-bottom {
  border-top: 1px solid var(--gold-line); margin-top: 2.6rem; padding-top: 1.4rem;
  font-size: 0.89rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--faint);
}
/* Remerciement FabLab : ligne pleine largeur, logo + texte */
.footer-break { flex-basis: 100%; height: 0; }
.footer-merci { display: inline-flex; align-items: center; gap: 0.7rem; }
.footer-merci img { width: 32px; height: 32px; flex: none; }
/* Remerciement à gauche, mentions légales en bas à droite (seul à droite sur sa ligne) */
.footer-mentions { margin-left: auto; align-self: center; }
.footer-links .footer-insta { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-insta img { width: 20px; height: 20px; flex: none; }

/* =========================================================================
   Animations : reveal au scroll + parallax
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
[data-parallax] { will-change: transform; }

/* =========================================================================
   Divers
   ========================================================================= */
.note { font-size: 0.98rem; color: var(--mute); }
.tag-inline { background: rgba(201,162,75,.14); color: var(--gold-soft); padding: 0.05em 0.5em; border-radius: var(--radius-sm); font-weight: 500; }
.hr { border: 0; border-top: 1px solid var(--gold-line); margin-block: 2rem; }
.prose { color: var(--cream); }
.prose h2 { font-family: var(--font-display); margin-top: 2.4rem; font-size: 1.7rem; color: var(--ink); }
.prose .note { color: var(--mute); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--on-gold); padding: 0.6em 1em; z-index: 100; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }

/* Focus clavier visible (accessibilité) — anneau or cohérent sur les 3 thèmes.
   Les champs de formulaire gardent leur focus dédié (bordure + halo, plus haut). */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* Navbar figée au scroll : voile ivoire au lieu du voile noir */
.navbar::before { background: rgba(246,241,228,.88); }

/* Avant le premier défilement, la topbar est transparente et surplombe le
   héros SOMBRE. Elle doit donc emprunter les jetons sombres, sinon ses liens
   (encre foncée de la base claire) sont illisibles sur le noir. Dès que la
   page défile, le voile ivoire reprend la main et les jetons clairs
   redeviennent les bons.
   Uniquement au-dessus de 1400px : en dessous, les liens ne sont plus sur le
   héros mais dans le panneau coulissant, qui a son propre fond ivoire. */
/* La topbar déployée (accueil) n'a pas de panneau coulissant : ses liens
   restent posés sur le héros sombre quelle que soit la largeur, ils gardent
   donc les jetons sombres à toute taille d'écran. */
.navbar--deploye:not(.scrolled) {
  --gold-soft: #d8c79a;
  --ink:   #f2ecdd;
  --mute:  rgba(231,224,210,.66);
  --on-gold: #100e0a;
}
.navbar--deploye:not(.scrolled) .navbar-brand img { filter: none; }

@media (min-width: 1401px) {
  .navbar:not(.scrolled) {
    --gold-soft: #d8c79a;
    --ink:   #f2ecdd;
    --mute:  rgba(231,224,210,.66);
    --on-gold: #100e0a;
  }
  .navbar:not(.scrolled) .navbar-brand img { filter: none; }
}

/* Boutons "sombres" hérités */
.btn--dark { background: rgba(0,0,0,.04); }
.btn--dark:hover { background: rgba(154,115,40,.12); }

/* Logos or : légèrement assombris pour rester lisibles sur fond ivoire —
   seulement dans la navbar et le menu, le footer restant sombre. */
.navbar .navbar-brand img,
.nav-home img { filter: brightness(.72) saturate(1.15); }

/* Alertes formulaire */
.alert--ok  { background: rgba(76,110,64,.1);  color: #3f5c35; border-color: rgba(76,110,64,.4); }
.alert--err { background: rgba(160,90,40,.08); color: #8a4d20; border-color: rgba(160,90,40,.4); }

/* Voile du menu mobile plus léger */
body.nav-open::after { background: rgba(59,52,35,.35); }

/* =========================================================================
   LES BANDES SOMBRES — héros, bandeau chiffres, sections profondes, footer.
   La page est claire par défaut (:root) ; ces conteneurs re-déclarent la
   palette sombre, et la couleur de texte héritée du body.

   L'alternance sombre/clair suit l'ordre des sections dans les pages : une
   bande sur deux porte .section--deep. En ajouter ou en retirer une casse le
   rythme — vérifier l'enchaînement complet après toute modification.
   Le bloc .cta-final reste clair : sa section est claire et il suit la FAQ
   (sombre) — le passer en sombre recollerait les deux en un seul pavé.
   ========================================================================= */
.hero,
.statsband,
.section--deep,
.colophon {
  --bg:        #251f16;
  --bg-deep:   #1f1a12;
  --bg-2:      #2a2319;
  --surface:   #2e271c;
  --surface-2: #362d20;
  --gold:      #c9a24b;
  --gold-soft: #d8c79a;
  --gold-deep: #b7913f;
  --gold-line:   rgba(201,162,75,.20);
  --gold-line-2: rgba(201,162,75,.40);
  --on-gold:     #100e0a;
  --ink:   #f2ecdd;
  --cream: #e7e0d2;
  --mute:  rgba(231,224,210,.66);
  --faint: rgba(231,224,210,.58);
  --line:      rgba(201,162,75,.18);
  --separator: rgba(201,162,75,.16);
  --egypte: #d8b25a;
  --pirate: #6fb8a4;
  --espion: #93b4e6;
  --egypte-line: rgba(216,178,90,.4);
  --pirate-line: rgba(111,184,164,.4);
  --espion-line: rgba(147,180,230,.4);
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow:    0 16px 44px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 28px 70px -24px rgba(0,0,0,.8);
  /* la couleur de texte est posée sur <body> : on la re-résout ici */
  color: var(--cream);
}

/* =========================================================================
   Réservation de créneaux (reserver.php)
   ========================================================================= */
.resa-jour { background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 1.4rem; }
.resa-jour h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; color: var(--ink); }
.resa-jour h2::first-letter { text-transform: uppercase; }
.resa-jour__meta { margin: .25rem 0 1.1rem; color: var(--mute); font-size: .95rem; }
.resa-jour__meta b { color: var(--gold-soft); font-weight: 600; }
.resa-ligne { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--gold-line); }
.resa-ligne__h { flex: 0 0 4.2rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.resa-ligne__choix { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.resa-ligne__choix .resa-heure { flex: 1 1 12rem; line-height: 1.25; }
.resa-heure small { display: block; font-weight: 400; font-size: .78rem; opacity: .85; }
.resa-heure { display: block; text-align: center; padding: .55rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--gold-line-2);
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gold-soft); background: transparent; transition: background var(--t-fast), color var(--t-fast); }
a.resa-heure--pirate { border-color: var(--pirate-line); color: var(--pirate); }
a.resa-heure--egypte { border-color: var(--egypte-line); color: var(--egypte); }
a.resa-heure:hover, a.resa-heure:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.resa-heure--pris { border-style: dotted; border-color: var(--gold-line); color: var(--faint); text-decoration: line-through; font-weight: 400; }
.resa-recap { background: var(--bg-2); border: 1px solid var(--gold-line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.resa-recap b { color: var(--ink); }

/* Nom du festival au-dessus de ses jours (reserver.php) */
.resa-festival { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.1;
  color: var(--gold); margin: 2rem 0 1.1rem; text-align: center; }
.resa-festival:first-child { margin-top: 0; }

/* Pastille « Gratuit » : l'aspect d'un bouton, mais rien à cliquer */
.resa-gratuit { pointer-events: none; cursor: default; user-select: none; vertical-align: middle; padding: .25rem .85rem; font-size: .8rem; }

/* Pastille de tarif : sur sa propre ligne, dans la liste comme dans le formulaire */
.resa-jour__meta .resa-gratuit { margin-top: .6rem; }
.resa-recap__prix { margin: .8rem 0 .6rem; }
.resa-recap > a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: .2em; font-size: .95rem; }

/* Jour de réservation : titre et lieu/tarif centrés */
.resa-jour h2, .resa-jour__meta { text-align: center; }

/* « Réserver une partie » : le bouton doit se lire d'un coup d'œil, sur le héros
   sombre (topbar transparente) comme sur le voile ivoire (topbar figée). */
.navbar-ctas .btn--outline { border-width: 1.5px; border-color: var(--gold); color: var(--gold-soft); font-weight: 700; background: rgba(154,115,40,.1); }
.navbar-ctas .btn--outline:hover { background: rgba(154,115,40,.2); }
.navbar:not(.scrolled) .navbar-ctas .btn--outline { border-color: #e2cf9c; color: #fff6dc; background: rgba(226,207,156,.18); }
.navbar:not(.scrolled) .navbar-ctas .btn--outline:hover { background: rgba(226,207,156,.32); }

/* =========================================================================
   Bandeau de consentement (partials/consentement.php) — n'apparaît que si la
   mesure d'audience est configurée. « Refuser » et « Accepter » ont le même
   poids visuel : aucun des deux choix n'est poussé.
   ========================================================================= */
.cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80;
  max-width: 760px; margin-inline: auto;
  display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; border-radius: 16px;
  background: #241d12; color: #f6f1e4; border: 1px solid rgba(220,183,99,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.cookies[hidden] { display: none; }
.cookies__texte { flex: 1 1 320px; font-size: .9rem; line-height: 1.5; }
.cookies__texte b { display: block; font-size: 1rem; margin-bottom: .2rem; color: #f6f1e4; }
.cookies__texte p { margin: 0; color: rgba(246,241,228,.82); }
.cookies__texte a { color: #dcb763; }
.cookies__boutons { display: flex; gap: .6rem; flex: 0 0 auto; }
/* Boutons propres au bandeau : pas la classe .btn, dont les couleurs changent selon la page (accueil à thème) */
.cookies__btn { font: inherit; font-weight: 600; font-size: .9rem; min-height: 44px; padding: .55rem 1.3rem; border-radius: 999px; cursor: pointer;
  color: #f6f1e4; background: transparent; border: 1.5px solid #dcb763;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
/* Même animation que les boutons du site : le bouton se soulève et se remplit d'or */
.cookies__btn:hover, .cookies__btn:focus-visible { transform: translateY(-2px); background: #dcb763; color: #241d12; box-shadow: 0 10px 26px -12px rgba(220,183,99,.8); }
.cookies__btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cookies__btn { transition: none; } .cookies__btn:hover, .cookies__btn:focus-visible { transform: none; } }
@media (max-width: 520px) { .cookies__boutons { flex: 1 1 100%; } .cookies__btn { flex: 1; } }
.footer-cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }