/* =====================================================================
   LA MAISON DU NIMBA — Site mère (vitrine de prestige)
   Feuille de style — vanilla CSS, mobile-first
   Paliers : 768px / 1024px / 1440px (en-tête : 1200px et 1400px, voir § paliers)
   ---------------------------------------------------------------------
   Charte appliquée à la lettre :
   - Vert Forêt dominant (fonds) · Or Nimba en accent (jamais sur blanc pur)
   - Titres : Cormorant Garamond Italic · Corps : Raleway Light/Regular
   - Ornements : filet or + diamant · vraies photographies du Mont Nimba
   - Aucun prix, aucun emoji
   ===================================================================== */

/* -------------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------------- */
:root {
  /* Couleurs primaires */
  --vert-foret:   #1B4332;
  --or-nimba:     #C9A84C;
  --noir-absolu:  #0A0A08;
  --ivoire:       #F8F6F0;

  /* Couleurs secondaires */
  --or-clair:     #E8D5A3;
  --or-profond:   #A8832A;
  --vert-moyen:   #2F6B47;
  --gris-sable:   #9A9890;
  --gris-fonce:   #6A6860;
  --gris-clair:   #D5D3CC;
  --vert-sombre:  #102A1F;

  /* Typographie */
  --font-titre: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --font-corps: 'Raleway', 'Helvetica Neue', Helvetica, sans-serif;

  /* Gabarit & rythme */
  --maxw:      1320px;
  --pad-x:     clamp(22px, 5vw, 88px);
  --section-y: clamp(90px, 11vw, 144px);
  --header-h:          108px;
  --header-h-scrolled: 76px;

  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gris-fonce);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

section, footer { scroll-margin-top: var(--header-h-scrolled); }

/* Grain de film — texture discrète sur les visuels (luxe, sans couleur) */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------
   3. TYPOGRAPHIE
   ------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  text-transform: none;
}

.kicker {
  font-family: var(--font-corps);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--or-profond);
  margin: 0 0 26px;
}
.kicker--gold  { color: var(--or-nimba); }
.kicker.center { text-align: center; }

/* -------------------------------------------------------------------
   4. CONTENEURS & ORNEMENTS
   ------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.container--narrow { max-width: 740px; }

.section { position: relative; padding: var(--section-y) 0; overflow: hidden; }
.section--ivoire { background: var(--ivoire); color: var(--gris-fonce); }
.section--vert {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(47,107,71,.4), transparent 55%),
    var(--vert-foret);
  color: var(--ivoire);
}

.section__title {
  font-size: clamp(28px, 4.4vw, 44px);
  color: var(--vert-foret);
  margin: 0;
}
.section__title--light { color: var(--ivoire); }
.center { text-align: center; }
.section__lead {
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  color: inherit;
  opacity: .85;
}
.section__lead.center { margin-left: auto; margin-right: auto; }

/* Filet or + diamant */
.divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 38px; }
.divider--center { justify-content: center; }
.divider--left   { justify-content: flex-start; }
.divider__line {
  height: 1px; width: 90px;
  background: linear-gradient(90deg, transparent, var(--or-profond), var(--or-nimba));
}
.divider__line--r { background: linear-gradient(90deg, var(--or-nimba), var(--or-profond), transparent); }
.divider__diamond { width: 8px; height: 8px; transform: rotate(45deg); background: var(--or-nimba); flex: 0 0 auto; }

/* -------------------------------------------------------------------
   5. BOUTONS
   ------------------------------------------------------------------- */
/* « hidden » DOIT cacher, toujours.
   L'attribut ne pose qu'un « display: none » de la feuille du
   navigateur : la moindre règle d'auteur qui fixe un display le bat, et
   l'élément reste à l'écran alors que le code le croit masqué. C'est
   arrivé deux fois sur ce site — d'abord sur le bloc partenariat (d'où
   la rustine .field-partenariat[hidden] plus bas, désormais inutile),
   puis sur les boutons du formulaire par étapes : « Continuer » et
   « Envoyer la demande » s'affichaient ensemble, parce que .btn impose
   « display: inline-block ». Réglé ici une fois pour toutes. */
[hidden] { display: none !important; }

.btn {
  display: inline-block;
  font-family: var(--font-corps);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .28em;
  padding: 18px 40px;
  color: var(--noir-absolu);
  background: var(--or-nimba);
  border: 1px solid var(--or-nimba);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), letter-spacing .4s var(--ease);
}
.btn:hover { background: var(--or-profond); border-color: var(--or-profond); letter-spacing: .32em; }
.btn--ghost { background: transparent; color: var(--or-clair); border: 1px solid var(--or-profond); }
.btn--ghost:hover { background: var(--or-nimba); color: var(--noir-absolu); border-color: var(--or-nimba); }

/* -------------------------------------------------------------------
   6. LOGO TYPOGRAPHIQUE + REFLET DORÉ (le logo « brille » avec la barre)
   ------------------------------------------------------------------- */
.brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.brand__name {
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .01em;
  color: var(--ivoire);
  white-space: nowrap;
  transition: color .4s var(--ease), font-size .4s var(--ease);
}

/* Reflet doré qui balaie le nom — via masque de dégradé sur le texte */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__name {
    --shine-base: var(--ivoire);
    --shine-hi:   #FFF6D8;
    /* Couleur de base PLEINE derrière le dégradé : garantit que toutes les
       lettres restent peintes même quand le reflet (no-repeat) est hors champ */
    background-color: var(--shine-base);
    background-image: linear-gradient(100deg,
      transparent 0%, transparent 40%,
      var(--shine-hi) 50%,
      transparent 60%, transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brand-shine 5.5s ease-in-out infinite;
  }
  .site-header.scrolled .brand__name { --shine-base: var(--vert-foret); --shine-hi: var(--or-nimba); }
}
@keyframes brand-shine {
  0%   { background-position: 130% 0; }
  16%  { background-position: -30% 0; }   /* le reflet traverse le nom en ~0.9s */
  100% { background-position: -30% 0; }   /* puis pause jusqu'au prochain cycle */
}

/* Filet or + diamant, sous le nom, avec gleam synchronisé */
.brand__rule {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 8px;
  overflow: hidden;
}
.brand__line { height: 1px; width: 56px; background: linear-gradient(90deg, transparent, var(--or-profond) 55%, var(--or-nimba)); }
.brand__line--r { background: linear-gradient(90deg, var(--or-nimba), var(--or-profond) 45%, transparent); }
.brand__diamond { width: 6px; height: 6px; transform: rotate(45deg); background: var(--or-nimba); flex: 0 0 auto; }
.brand__rule::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(255,247,214,.95) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: rule-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rule-sweep {
  0%   { transform: translateX(-130%); }
  16%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* -------------------------------------------------------------------
   7. BARRE DE PROGRESSION (fil or en haut de page)
   ------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--or-profond), var(--or-nimba));
  z-index: 200;
  transition: width .12s linear;
}

/* Bouton « revenir en haut » — discret, n'apparaît qu'après le héros */
.to-top {
  position: fixed;
  right: clamp(18px, 4vw, 44px);
  bottom: clamp(18px, 4vw, 44px);
  z-index: 90;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 42, 31, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--or-profond);
  color: var(--or-nimba);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s,
              background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--or-nimba); color: var(--noir-absolu); border-color: var(--or-nimba); }
.to-top svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.to-top:hover svg { transform: translateY(-3px); }

/* -------------------------------------------------------------------
   8. EN-TÊTE — logo centré (haut) → logo à gauche + menu à droite (scroll)
   ------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-nimba), transparent);
  opacity: .35;
  transition: opacity .4s var(--ease);
}
.site-header.scrolled {
  height: var(--header-h-scrolled);
  background: rgba(248,246,240,.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 12px 38px rgba(10,10,8,.08);
}
.site-header.scrolled::after { opacity: .55; }

.header-inner {
  position: relative; height: 100%;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
}

.header-inner .brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: left .45s var(--ease), top .45s var(--ease), transform .45s var(--ease);
}
.site-header.scrolled .header-inner .brand { left: var(--pad-x); transform: translate(0, -50%); }
.site-header.scrolled .brand__name { font-size: 22px; }
.site-header.scrolled .brand__rule { margin-top: 5px; }

/* Deux réglages tiennent l'alignement de la barre de navigation :

   align-items: center — sans lui, les liens s'étirent sur toute la hauteur
   disponible et leur texte se cale en haut. « Agence de voyage » montait
   ainsi de 6 px par rapport à « Conciergerie » (qui, lui, vit dans un
   .nav__item déjà centré) et au bouton de contact, et son trait de survol,
   posé en bas du lien, descendait d'autant.

   min-height — le bouton « Nous contacter » est plus haut que les liens et
   fixait à lui seul la hauteur du bloc de droite. Comme les deux blocs sont
   alignés par le bas, celui de gauche retombait 6 px plus bas. On leur donne
   donc la même hauteur : celle du bouton. Si le rembourrage du bouton change
   (.nav__cta), ajuster --nav-h en conséquence. */
:root { --nav-h: 46px; }
.nav { display: flex; gap: 40px; align-items: center; min-height: var(--nav-h); }
.nav--left, .nav--right { transition: transform .45s var(--ease); }
.nav__link {
  position: relative;
  font-family: var(--font-corps);
  font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ivoire);
  padding: 6px 0;
  transition: color .4s var(--ease);
}
.site-header.scrolled .nav__link { color: var(--vert-foret); }
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--or-nimba);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--or-nimba); }
.site-header.scrolled .nav__link:hover { color: var(--or-profond); }
.nav__link:hover::after { transform: scaleX(1); }

/* Élément de navigation à liste déroulante (Les Univers) */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__trigger { display: inline-flex; align-items: center; gap: 9px; }
.nav__caret {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .4s var(--ease);
  opacity: .8;
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: translateY(0) rotate(225deg); }

.dropdown {
  position: absolute; top: 100%; right: 0;
  margin-top: 22px;
  min-width: 500px;
  padding: 32px 36px 30px;
  background: rgba(16, 42, 31, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 2px solid var(--or-nimba);
  box-shadow: 0 34px 70px rgba(10, 10, 8, .45);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  z-index: 130;
}
.dropdown::before {            /* zone tampon pour le survol entre lien et panneau */
  content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__group { display: flex; flex-direction: column; padding-right: 38px; }
.dropdown__group + .dropdown__group { border-left: 1px solid rgba(168, 131, 42, .25); padding-right: 0; padding-left: 38px; }
.dropdown__title {
  font-family: var(--font-corps); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .28em; color: var(--or-nimba);
  margin: 0 0 10px;
}
.dropdown__link {
  font-family: var(--font-titre); font-style: italic; font-size: 20px;
  color: var(--or-clair); padding: 6px 0;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.dropdown__link:hover { color: var(--ivoire); padding-left: 8px; }

/* Bouton d'appel à l'action « Nous contacter » — mis en valeur dans le menu */
.nav__cta {
  display: inline-block;
  font-family: var(--font-corps); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em;
  padding: 12px 24px;
  color: var(--noir-absolu);
  background: var(--or-nimba);
  border: 1px solid var(--or-nimba);
  white-space: nowrap;
  transition: background .4s var(--ease), color .4s var(--ease), letter-spacing .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__cta:hover { background: var(--or-profond); border-color: var(--or-profond); letter-spacing: .24em; box-shadow: 0 8px 22px rgba(168,131,42,.35); }

/* Burger */
.menu-toggle {
  display: none; position: relative; z-index: 120;
  width: 34px; height: 22px; margin-left: auto;
  background: none; border: none; cursor: pointer; padding: 0;
}
.menu-toggle span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ivoire);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 2px; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 2px; }
.site-header.scrolled .menu-toggle span { background: var(--vert-foret); }
.menu-toggle[aria-expanded="true"] span { background: var(--ivoire); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* -------------------------------------------------------------------
   9. MENU MOBILE plein écran
   ------------------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 110;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47,107,71,.5), transparent 60%),
    var(--vert-foret);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }

/* Bouton de fermeture (croix) — toujours au-dessus du voile plein écran */
.mobile-close {
  position: absolute;
  top: 30px; right: clamp(20px, 5vw, 40px);
  width: 42px; height: 42px;
  background: none; border: none; cursor: pointer; padding: 0;
  z-index: 3;
}
.mobile-close span {
  position: absolute; top: 50%; left: 7px; right: 7px; height: 1.5px;
  background: var(--ivoire);
  transition: background .3s var(--ease);
}
.mobile-close span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.mobile-close span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }
.mobile-close:hover span { background: var(--or-nimba); }

.mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mobile-menu__nav a {
  font-family: var(--font-titre); font-style: italic; font-size: 34px;
  color: var(--ivoire); padding: 8px 16px;
  opacity: 0; transform: translateY(14px);
  transition: color .3s var(--ease), opacity .6s var(--ease), transform .6s var(--ease);
}
.mobile-menu.open .mobile-menu__nav a { opacity: 1; transform: none; }
.mobile-menu.open .mobile-menu__nav a:nth-child(1) { transition-delay: .10s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(2) { transition-delay: .16s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(3) { transition-delay: .22s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(4) { transition-delay: .28s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(5) { transition-delay: .34s; }
/* Le sixième, c'est « Mon espace ». Sans cette ligne il héritait d'un
   délai nul et arrivait AVANT les cinq autres : le dernier de la liste
   se levait le premier. L'escalier s'arrête ensuite — au-delà, tout le
   monde entre ensemble plutôt que de faire attendre une seconde. */
.mobile-menu.open .mobile-menu__nav a:nth-child(6)   { transition-delay: .40s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(n+7) { transition-delay: .46s; }
.mobile-menu__nav a:hover { color: var(--or-nimba); }
.mobile-menu__cta {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-corps); font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: .24em;
  padding: 16px 42px;
  color: var(--noir-absolu); background: var(--or-nimba); border: 1px solid var(--or-nimba);
  transition: background .4s var(--ease), letter-spacing .4s var(--ease);
}
.mobile-menu__cta:hover { background: var(--or-profond); letter-spacing: .28em; }
.mobile-menu__rule { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mobile-menu__rule i { display: block; height: 1px; width: 48px; background: var(--or-profond); }
.mobile-menu__rule b { display: block; width: 6px; height: 6px; transform: rotate(45deg); background: var(--or-nimba); }
.mobile-menu__sign { font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--or-clair); margin: 4px 0 0; }

/* Le menu compte SEPT liens depuis « Le Journal Nimba ».
   Sur un écran court — iPhone SE, Android compact — la colonne ne tient
   plus centrée : mesuré à 375 × 667, le premier lien démarrait à 50 px
   alors que le bouton de fermeture descend à 72 px, et passait donc
   dessous. Le même défaut s'était produit au SIXIÈME lien ; resserrer
   les tailles ne suffit plus au septième.

   ON CESSE DE CENTRER. La liste part sous le bouton et descend : c'est
   la seule disposition qui ne se dégrade pas quand on ajoute un lien,
   là où un centrage remonte d'un demi-lien à chaque fois. Le
   défilement reste le filet si la liste s'allonge encore.

   86 px, et non 72 : la hauteur du bouton plus l'air qu'il faut pour
   qu'un pouce ne vise pas la croix en voulant le premier lien. */
.mobile-menu { overflow-y: auto; }

@media (max-height: 720px) {
  .mobile-menu {
    gap: 18px;
    justify-content: flex-start;
    padding: 86px 0 30px;
  }
  .mobile-menu__nav a { font-size: 27px; padding: 4px 16px; }
  .mobile-menu__cta { padding: 13px 34px; margin-top: 4px; }
}

/* Écran vraiment bas (téléphone couché) : on descend encore d'un cran. */
@media (max-height: 560px) {
  .mobile-menu { gap: 12px; padding: 86px 0 24px; }
  .mobile-menu__nav a { font-size: 22px; padding: 2px 16px; }
}

/* Téléphone COUCHÉ : bas de plafond, mais large. Mesuré à 667 × 375,
   la colonne unique demandait 568 px de haut — il fallait faire défiler
   un MENU pour atteindre « Mon espace ». Deux colonnes coupent la
   hauteur de moitié et la place horizontale ne manque pas.

   Conditionné à min-width : sur un écran à la fois bas ET étroit, deux
   colonnes couperaient les libellés. Là, le défilement reste le filet. */
@media (max-height: 560px) and (min-width: 560px) {
  .mobile-menu__nav {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 30px; row-gap: 2px; justify-items: center;
  }
}

/* -------------------------------------------------------------------
   10. HÉROS — vraie photographie du Mont Nimba + voile vert
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--vert-foret);
  color: var(--ivoire);
  overflow: hidden;
}
.hero__media { position: absolute; inset: -10% 0 0 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 110%;
  object-fit: cover; object-position: center 38%;
  will-change: transform;
}
/* Voile vert forêt + vignettage pour la lisibilité (une seule teinte) */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,8,.58), rgba(27,67,50,.42) 42%, rgba(10,10,8,.82)),
    radial-gradient(120% 90% at 50% 46%, transparent 30%, rgba(16,42,31,.65));
}
.hero .grain { z-index: 2; }
.hero__content { position: relative; z-index: 3; padding: 0 var(--pad-x); }
.hero__content .divider { justify-content: center; }
.hero__title {
  font-size: clamp(48px, 9vw, 112px);
  color: var(--ivoire);
  margin: 6px 0 0;
  text-shadow: 0 4px 50px rgba(10,10,8,.5);
}
.hero__baseline {
  font-family: var(--font-corps); font-weight: 300;
  font-size: clamp(13px, 1.6vw, 16px);
  text-transform: uppercase; letter-spacing: .34em;
  color: var(--or-clair);
  margin: 0 0 46px;
}
.hero__cta { margin-top: 4px; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: var(--or-clair);
}
.hero__scroll span {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(180deg, var(--or-nimba), transparent);
  animation: scroll-pulse 2.4s var(--ease) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

/* -------------------------------------------------------------------
   10b. BANNIÈRE DES PAGES INTÉRIEURES (héros court)
   ------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 56vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-h) + 46px) var(--pad-x) 64px;
  background: var(--vert-foret);
  color: var(--ivoire);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,8,.6), rgba(27,67,50,.48) 45%, rgba(10,10,8,.8)),
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(16,42,31,.65));
}
.page-hero .grain { z-index: 2; }
.page-hero__content { position: relative; z-index: 3; }
.page-hero__content .divider { justify-content: center; }
.page-hero__title { font-size: clamp(40px, 7vw, 76px); color: var(--ivoire); margin: 6px 0 0; text-shadow: 0 4px 40px rgba(10,10,8,.45); }
.page-hero__lead { max-width: 560px; margin: 22px auto 0; font-weight: 300; color: var(--or-clair); }

/* État actif du lien de navigation (page courante) */
.nav__link.is-active { color: var(--or-nimba); }
.site-header.scrolled .nav__link.is-active { color: var(--or-profond); }
.nav__link.is-active::after { transform: scaleX(1); }
.mobile-menu__nav a.is-active { color: var(--or-nimba); }

/* Fil d'Ariane (pages de service) */
.breadcrumb {
  font-family: var(--font-corps); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--gris-sable);
  margin: 0 0 44px;
}
.breadcrumb a { color: var(--gris-fonce); transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--or-profond); }
.breadcrumb [aria-hidden] { margin: 0 10px; color: var(--or-profond); }
.breadcrumb__current { color: var(--vert-foret); }

/* Sur un écran étroit, le titre d'un événement suffit à faire déborder le
   fil d'Ariane. On le laisse revenir à la ligne, et on resserre
   l'interlettrage, qui coûte cher en largeur à cette taille. */
@media (max-width: 480px) {
  .breadcrumb {
    letter-spacing: .12em;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .breadcrumb [aria-hidden] { margin: 0 6px; }
}

/* -------------------------------------------------------------------
   18h. ESPACE MEMBRE — « Le Cercle »
   ------------------------------------------------------------------- */
/* Privilèges */
.privileges { list-style: none; margin: 56px auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: 1fr; gap: 0; }
.privileges li { position: relative; padding: 26px 0 26px 34px; border-top: 1px solid var(--gris-clair); }
.privileges li:last-child { border-bottom: 1px solid var(--gris-clair); }
.privileges li::before { content: ""; position: absolute; left: 0; top: 34px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--or-nimba); }
.privileges__name { display: block; font-family: var(--font-titre); font-style: italic; font-size: 24px; color: var(--vert-foret); margin-bottom: 4px; }
.privileges__desc { display: block; font-size: 15px; font-weight: 300; color: var(--gris-fonce); }

/* Aperçu réservé (cartes voilées, dévoilées une fois connecté) */
.member-preview { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 60px; }
.locked-card {
  position: relative; overflow: hidden; min-height: 190px; display: flex;
  padding: 38px 34px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(47,107,71,.35), transparent 60%), var(--vert-foret);
  border: 1px solid rgba(168,131,42,.28); border-top: 2px solid var(--or-nimba);
}
.locked-card__content { transition: filter .6s var(--ease), opacity .6s var(--ease); }
.locked-card__soon { display: inline-block; font-family: var(--font-corps); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .26em; color: var(--or-clair); margin-bottom: 14px; }
.locked-card__content h3 { font-family: var(--font-titre); font-style: italic; font-size: 26px; color: var(--or-nimba); margin: 0 0 10px; }
.locked-card__content p { font-size: 15px; font-weight: 300; color: var(--or-clair); margin: 0; }
.member-preview:not(.is-unlocked) .locked-card__content { filter: blur(7px); opacity: .5; user-select: none; }
.locked-card__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(16,42,31,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: var(--or-nimba); transition: opacity .6s var(--ease), visibility .6s;
}
.locked-card__veil span { font-family: var(--font-corps); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .26em; }
.member-preview.is-unlocked .locked-card__veil { opacity: 0; visibility: hidden; }

/* Accès (connexion + demande d'invitation) */
.member-access { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 60px; max-width: 960px; margin-left: auto; margin-right: auto; }
.access-card {
  background: radial-gradient(120% 80% at 100% 0%, rgba(47,107,71,.35), transparent 60%), var(--vert-foret);
  border: 1px solid rgba(168,131,42,.28); border-top: 2px solid var(--or-nimba);
  padding: 42px 38px; box-shadow: 0 26px 52px rgba(10,10,8,.22);
}
.access-card__title { font-family: var(--font-titre); font-style: italic; font-size: 25px; color: var(--or-nimba); margin: 0 0 22px; }
.access-card__lead { font-size: 14px; font-weight: 300; color: var(--or-clair); margin: 0 0 24px; }
.access-card__note { font-size: 12px; font-style: italic; color: var(--gris-sable); margin: 16px 0 0; }

/* -------------------------------------------------------------------
   11. MANIFESTE
   ------------------------------------------------------------------- */
.manifeste__text { max-width: 770px; }
.manifeste__text p {
  font-size: clamp(17px, 2vw, 21px); font-weight: 300; color: var(--gris-fonce); margin: 0 0 26px;
}
.manifeste__text p:first-of-type::first-letter {
  font-family: var(--font-titre); font-style: italic;
  font-size: 3.6em; line-height: .8; float: left; margin: 6px 16px 0 0; color: var(--or-profond);
}
.manifeste__text .signature {
  font-family: var(--font-titre); font-style: italic;
  font-size: clamp(21px, 2.6vw, 28px); color: var(--vert-foret);
}

/* -------------------------------------------------------------------
   12. VALEURS — quatre principes, séparés par des diamants or
   ------------------------------------------------------------------- */
.valeurs__list {
  list-style: none; margin: 60px 0 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.valeur { position: relative; text-align: center; padding: 30px 0; max-width: 300px; }
.valeur__name {
  display: block; font-family: var(--font-titre); font-style: italic;
  font-size: 30px; color: var(--or-nimba); margin-bottom: 10px;
}
.valeur__desc { display: block; font-size: 14px; font-weight: 300; color: var(--or-clair); line-height: 1.7; }
.valeur:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--or-profond);
}

/* -------------------------------------------------------------------
   13. APPROCHE — l'interlocuteur unique en trois temps
   ------------------------------------------------------------------- */
.approche__grid {
  margin-top: 64px;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.step {
  position: relative;
  padding: 40px 0;
  border-top: 1px solid var(--gris-clair);
}
.step:last-child { border-bottom: 1px solid var(--gris-clair); }
.step__num {
  font-family: var(--font-titre); font-style: italic;
  font-size: 30px; color: var(--or-nimba); line-height: 1; margin-bottom: 14px;
}
.step__name { font-family: var(--font-titre); font-style: italic; font-size: 26px; color: var(--vert-foret); margin: 0 0 12px; }
.step__desc { font-size: 15px; font-weight: 300; color: var(--gris-fonce); margin: 0; max-width: 460px; }

/* -------------------------------------------------------------------
   14. BANDEAU CITATION — vraie photo (mist) en parallaxe
   ------------------------------------------------------------------- */
.statement {
  position: relative;
  padding: clamp(110px, 18vw, 220px) 0;
  text-align: center;
  color: var(--ivoire);
  overflow: hidden;
}
.statement__media {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/mont-nimba-mist.jpg");
  background-size: cover; background-position: center;
}
.statement__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,42,31,.82), rgba(10,10,8,.78));
}
.statement .grain { z-index: 2; }
.statement__inner { position: relative; z-index: 3; }
.statement__quote {
  font-family: var(--font-titre); font-style: italic;
  font-size: clamp(26px, 4.4vw, 48px);
  line-height: 1.25; color: var(--ivoire);
  max-width: 880px; margin: 0 auto;
}
.statement__cite {
  display: block; margin-top: 30px;
  font-family: var(--font-corps); font-weight: 500;
  font-size: 12px; text-transform: uppercase; letter-spacing: .3em; color: var(--or-clair);
}

/* -------------------------------------------------------------------
   15. LES UNIVERS — bascule Art de vivre / Business + cartes
   ------------------------------------------------------------------- */
.univers__intro { max-width: 560px; margin: 0 auto; font-size: 16px; color: var(--gris-fonce); }

.toggle {
  position: relative; display: inline-flex;
  margin: 46px auto 0; left: 50%; transform: translateX(-50%);
  padding: 6px; background: var(--vert-foret); border: 1px solid var(--or-profond);
}
.toggle__btn {
  position: relative; z-index: 2;
  background: none; border: none; cursor: pointer;
  padding: 14px 32px;
  font-family: var(--font-corps); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--or-clair); white-space: nowrap;
  transition: color .4s var(--ease);
}
.toggle__btn.is-active { color: var(--noir-absolu); }
.toggle__indicator {
  position: absolute; z-index: 1; left: 0; top: 0;
  background: linear-gradient(135deg, var(--or-nimba), var(--or-profond));
  transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease);
}

.worlds { position: relative; margin-top: 66px; }
.world { display: none; grid-template-columns: 1fr; gap: 22px; }
.world.is-active { display: grid; }
.world.is-entering { animation: world-in .7s var(--ease-out) both; }
.world.is-leaving  { animation: world-out .28s ease both; }
@keyframes world-in  { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes world-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.99); } }

/* Carte — fond vert, liseré or en haut */
.card {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(47,107,71,.35), transparent 60%),
    var(--vert-foret);
  border: 1px solid rgba(168,131,42,.28);
  border-top: 2px solid var(--or-nimba);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 56px rgba(10,10,8,.30);
  border-color: rgba(201,168,76,.55);
}

/* Bande photographique de Guinée, traitée en duotone vert (cohérence luxe) */
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.04) brightness(.92);
  transform: scale(1.02);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.card__media::after {            /* voile vert qui unifie toutes les photos */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,42,31,.32), rgba(16,42,31,.74));
  mix-blend-mode: multiply;
}
.card:hover .card__media img { transform: scale(1.08); filter: grayscale(.15) contrast(1.05) brightness(.98); }

.card__body { padding: 32px 34px 34px; display: flex; flex-direction: column; flex: 1; }

.card__index {
  position: absolute; top: 16px; right: 22px; z-index: 3;
  font-family: var(--font-titre); font-style: italic; font-size: 19px;
  color: var(--or-clair);
  text-shadow: 0 2px 12px rgba(10,10,8,.55);
}
.card__name { font-size: 27px; color: var(--or-nimba); margin: 0 0 16px; }
.card__desc { font-size: 15px; font-weight: 300; color: var(--or-clair); line-height: 1.75; margin: 0 0 26px; flex: 1; }
.card__link {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-corps); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .26em; color: var(--or-nimba);
}
.card__link svg { transition: transform .4s var(--ease); }
.card__link:hover svg { transform: translateX(7px); }
.card__link:hover { color: var(--or-clair); }

/* Carte Moments — révèle Press & Cristal */
.card--moments .card__toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  background: none; border: none;
  border-top: 1px solid rgba(168,131,42,.28);
  padding: 18px 0 4px; margin-top: 4px; cursor: pointer;
  font-family: var(--font-corps); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .26em; color: var(--or-clair);
  transition: color .3s var(--ease);
}
.card--moments .card__toggle:hover { color: var(--or-nimba); }
.card__plus { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
.card__plus::before, .card__plus::after {
  content: ""; position: absolute; background: var(--or-nimba);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.card__plus::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.card__plus::after  { top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); }
.card--moments.is-open .card__plus::after,
.card--moments:hover .card__plus::after { opacity: 0; transform: translateX(-50%) scaleY(0); }

.card__reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .45s var(--ease), margin-top .45s var(--ease); }
.card--moments:hover .card__reveal,
.card--moments:focus-within .card__reveal,
.card--moments.is-open .card__reveal { max-height: 280px; opacity: 1; margin-top: 18px; }
.subbrand { padding: 4px 0; }
.subbrand__name { font-family: var(--font-titre); font-style: italic; font-size: 21px; color: var(--ivoire); margin-right: 10px; }
.subbrand__desc { font-size: 14px; font-weight: 300; color: var(--gris-sable); }
.subbrand__sep { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.subbrand__sep i { display: block; height: 1px; width: 30px; background: var(--or-profond); }
.subbrand__sep b { display: block; width: 5px; height: 5px; transform: rotate(45deg); background: var(--or-nimba); }

/* -------------------------------------------------------------------
   16. CONTACT — invitation confidentielle (deux colonnes)
   ------------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 50px; margin-top: 58px; }
.contact__aside { display: flex; flex-direction: column; gap: 30px; }
.contact__intro { font-family: var(--font-titre); font-style: italic; font-size: clamp(21px, 2.6vw, 28px); color: var(--ivoire); margin: 0 0 8px; max-width: 420px; }
.info__label { font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--or-nimba); margin: 0 0 6px; }
.info__value { font-size: 16px; font-weight: 300; color: var(--or-clair); margin: 0; }

.contact-form { width: 100%; }
.field { margin-bottom: 26px; }
.field--hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--or-clair); margin-bottom: 10px; }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-corps); font-weight: 300; font-size: 16px;
  color: var(--noir-absolu); background: var(--ivoire);
  border: 1px solid var(--gris-clair); border-radius: 0; padding: 15px 18px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A8832A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
  padding-right: 44px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--or-nimba); box-shadow: 0 0 0 1px var(--or-nimba); }
.contact-form .btn { margin-top: 6px; }
.form__status { margin: 22px 0 0; min-height: 1em; font-size: 14px; color: var(--or-clair); }
.form__status.is-visible { animation: world-in .6s var(--ease-out) both; }

/* -------------------------------------------------------------------
   17. PIED DE PAGE
   ------------------------------------------------------------------- */
.footer { position: relative; background: var(--noir-absolu); color: var(--gris-sable); padding: clamp(72px, 9vw, 112px) 0 38px; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-nimba), transparent); opacity: .5;
}
.footer__top { display: grid; grid-template-columns: 1fr; gap: 48px; }
/* Logo du pied : le filet s'étend sur toute la largeur du nom, diamant centré sous le titre */
.footer .brand { align-items: stretch; }
.footer .brand__rule { margin-top: 12px; }
.footer .brand__line { flex: 1 1 auto; width: auto; }
.footer .brand__name { color: var(--ivoire); font-size: 26px; }
.footer__sign { font-size: 11px; text-transform: uppercase; letter-spacing: .3em; color: var(--or-clair); margin: 16px 0 0; }
.footer__tag { font-family: var(--font-titre); font-style: italic; font-size: clamp(20px, 3vw, 26px); color: var(--gris-sable); margin: 22px 0 0; max-width: 360px; }
.footer__heading { font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--or-nimba); margin: 0 0 22px; }
.footer__links { display: flex; flex-direction: column; gap: 13px; }
.footer__links a { font-size: 14px; font-weight: 300; color: var(--gris-sable); transition: color .3s var(--ease); width: fit-content; }
.footer__links a:hover { color: var(--or-clair); }
.footer__bottom {
  margin-top: clamp(50px, 7vw, 80px);
  border-top: 1px solid rgba(106,104,96,.25); padding-top: 30px;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 12px; color: var(--gris-fonce);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__legal a { transition: color .3s var(--ease); }
.footer__legal a:hover { color: var(--or-clair); }
.footer__credits { font-size: 11px; color: var(--gris-fonce); opacity: .8; line-height: 1.7; margin: 0; }

/* -------------------------------------------------------------------
   18. RÉVÉLATIONS AU SCROLL
   ------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* -------------------------------------------------------------------
   18b. MANIFESTE — colonne texte + photographie encadrée
   ------------------------------------------------------------------- */
.manifeste__grid { display: grid; grid-template-columns: 1fr; gap: 52px; align-items: center; }
.manifeste__col { min-width: 0; }
.manifeste__figure { position: relative; margin: 0; }
.manifeste__figure img { width: 100%; height: 340px; object-fit: cover; object-position: center 40%; }
.manifeste__figure::after {
  content: ""; position: absolute; inset: 15px;
  border: 1px solid rgba(201, 168, 76, .55); pointer-events: none;
}
.manifeste__figure figcaption {
  margin-top: 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--gris-sable);
}

/* -------------------------------------------------------------------
   18c. REPÈRES — bande sobre qui densifie (aucun prix)
   ------------------------------------------------------------------- */
.marks { background: var(--ivoire); }
.marks__inner {
  border-top: 1px solid var(--gris-clair);
  border-bottom: 1px solid var(--gris-clair);
  padding: clamp(26px, 4vw, 38px) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 0;
}
.mark {
  display: inline-flex; align-items: center;
  font-family: var(--font-corps); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--vert-foret);
}
.mark::after {
  content: ""; display: inline-block;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--or-nimba); margin: 0 clamp(18px, 3vw, 30px);
}
.mark:last-child::after { display: none; }

/* -------------------------------------------------------------------
   18d. AMBIANCE — bascule côté Business (le thème change)
   ------------------------------------------------------------------- */
.univers { position: relative; }
.univers > .container { position: relative; z-index: 1; }
.univers__bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: opacity .7s var(--ease);
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(47, 107, 71, .30), transparent 55%),
    linear-gradient(180deg, #0F2118, #0A1410);
}
.univers[data-mode="business"] .univers__bg { opacity: 1; }

/* Les textes de la section glissent vers une ambiance nocturne */
.univers .section__title,
.univers .kicker,
.univers__intro { transition: color .7s var(--ease); }
.univers[data-mode="business"] .section__title { color: var(--ivoire); }
.univers[data-mode="business"] .kicker { color: var(--or-nimba); }
.univers[data-mode="business"] .univers__intro { color: var(--or-clair); }

/* Les cartes deviennent des panneaux surélevés sur le fond sombre */
.univers .card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.univers[data-mode="business"] .card { box-shadow: 0 24px 50px rgba(0, 0, 0, .36); border-color: rgba(201, 168, 76, .42); }

/* -------------------------------------------------------------------
   18e. CARTES-LIENS (teasers de l'accueil)
   ------------------------------------------------------------------- */
.teaser-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 56px; text-align: left; }
.teaser-card {
  display: block;
  background: var(--vert-foret);
  border: 1px solid rgba(168,131,42,.28);
  border-top: 2px solid var(--or-nimba);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.teaser-card:hover { transform: translateY(-7px); box-shadow: 0 30px 56px rgba(10,10,8,.28); border-color: rgba(201,168,76,.55); }
.teaser-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.teaser-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.04) brightness(.92);
  transform: scale(1.02); transition: transform .9s var(--ease);
}
.teaser-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,42,31,.3), rgba(16,42,31,.72)); mix-blend-mode: multiply; }
.teaser-card:hover .teaser-card__media img { transform: scale(1.08); }
.teaser-card__body { padding: 30px 32px 32px; }
.teaser-card__desc { font-size: 14px; font-weight: 300; color: var(--or-clair); margin: 12px 0 22px; }
.teaser-card .card__link svg { transition: transform .4s var(--ease); }
.teaser-card:hover .card__link svg { transform: translateX(7px); }

/* -------------------------------------------------------------------
   18f. PAGES LÉGALES (texte courant)
   ------------------------------------------------------------------- */
.legal { max-width: 780px; }
.legal h2 {
  font-family: var(--font-titre); font-style: italic;
  font-size: clamp(22px, 3vw, 30px); color: var(--vert-foret);
  margin: 46px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: 16px; font-weight: 300; color: var(--gris-fonce); margin: 0 0 16px; }
.legal ul { padding-left: 20px; margin: 0 0 16px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--or-profond); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { font-weight: 500; color: var(--vert-foret); }
.legal .todo { color: var(--or-profond); font-style: italic; }        /* à compléter */
.legal .update-note {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--gris-clair);
  font-size: 13px; color: var(--gris-sable);
}

/* -------------------------------------------------------------------
   18g. PAGE D'UN UNIVERS (détail d'un service) + prestations
   ------------------------------------------------------------------- */
.service-detail { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: start; }
.service-intro p { font-size: clamp(16px, 1.9vw, 20px); font-weight: 300; color: var(--gris-fonce); margin: 0 0 22px; }
.service-intro p:first-of-type::first-letter {
  font-family: var(--font-titre); font-style: italic; font-size: 3.4em; line-height: .8;
  float: left; margin: 6px 14px 0 0; color: var(--or-profond);
}
.service-intro .signature { font-family: var(--font-titre); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: var(--vert-foret); }

.prestations__title { margin: 0 0 20px; }
.prestations { list-style: none; padding: 0; margin: 0; }
.prestations li {
  position: relative; padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--gris-clair);
  font-size: 15px; font-weight: 300; color: var(--gris-fonce);
}
.prestations li:first-child { border-top: 1px solid var(--gris-clair); }
.prestations li::before { content: ""; position: absolute; left: 0; top: 22px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--or-nimba); }

/* Sous-marques (Press & Cristal sur la page Moments) */
.signatures { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }
.signature-card { background: var(--vert-foret); border-top: 2px solid var(--or-nimba); padding: 32px 34px; }
.signature-card h3 { font-size: 24px; color: var(--or-nimba); margin: 0 0 10px; }
.signature-card p { font-size: 15px; font-weight: 300; color: var(--or-clair); margin: 0; }

/* Section « La conciergerie » — services cœur (page La Maison) */
.conciergerie__grid { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.conciergerie__grid li {
  position: relative; padding: 20px 0 20px 28px;
  border-top: 1px solid var(--gris-clair);
  font-family: var(--font-titre); font-style: italic; font-size: 22px; color: var(--vert-foret);
}
.conciergerie__grid li:last-child { border-bottom: 1px solid var(--gris-clair); }
.conciergerie__grid li::before { content: ""; position: absolute; left: 0; top: 30px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--or-nimba); }

/* -------------------------------------------------------------------
   18j. PAGE CONCIERGERIE — fiches services (cahier des charges V1)
   ------------------------------------------------------------------- */
.offres { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 60px; text-align: left; }
.offre {
  display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 100% 0%, rgba(47,107,71,.35), transparent 60%), var(--vert-foret);
  border: 1px solid rgba(168,131,42,.28); border-top: 2px solid var(--or-nimba);
  padding: 40px 36px; box-shadow: 0 26px 52px rgba(10,10,8,.18);
}
.offre__kicker { font-family: var(--font-corps); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .26em; color: var(--or-clair); margin: 0 0 14px; }
.offre__title { font-family: var(--font-titre); font-style: italic; font-weight: 500; font-size: 26px; color: var(--or-nimba); margin: 0 0 10px; }
.offre__lead { font-size: 14px; font-weight: 300; color: var(--or-clair); margin: 0 0 22px; }
.offre__list { list-style: none; margin: 0 0 30px; padding: 0; flex: 1 1 auto; }
.offre__list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid rgba(232,213,163,.16); font-size: 14px; font-weight: 300; color: var(--ivoire); }
.offre__list li:last-child { border-bottom: 1px solid rgba(232,213,163,.16); }
.offre__list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--or-nimba); }
.offre__list li a { color: var(--or-clair); border-bottom: 1px solid rgba(232,213,163,.35); transition: color .3s var(--ease), border-color .3s var(--ease); }
.offre__list li a:hover { color: var(--or-nimba); border-color: var(--or-nimba); }
.offre .btn--ghost { align-self: flex-start; }

/* -------------------------------------------------------------------
   18k. FICHE ÉVÉNEMENT — infos clés, places, inscription, partage
   ------------------------------------------------------------------- */
/* L'essentiel : date, horaires, lieu, tarif */
.event-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; margin: 56px auto 0; max-width: 860px; text-align: center; }
.event-keys__label { font-family: var(--font-corps); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--or-profond); margin: 0 0 6px; }
.event-keys__value { font-family: var(--font-titre); font-style: italic; font-size: 22px; color: var(--vert-foret); margin: 0; line-height: 1.3; }
.event-keys__value small { display: block; font-family: var(--font-corps); font-style: normal; font-size: 12px; font-weight: 300; color: var(--gris-fonce); margin-top: 4px; }

/* Compteur de places restantes — argument « places limitées » */
.places { margin: 60px auto 0; text-align: center; }
.places__count { font-family: var(--font-titre); font-style: italic; font-weight: 500; font-size: clamp(52px, 8vw, 76px); line-height: 1; color: var(--or-profond); }
.places__label { font-family: var(--font-corps); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .3em; color: var(--gris-fonce); margin-top: 10px; }
.places--full .places__count { font-size: clamp(30px, 5vw, 44px); }

/* Choix du mode de règlement (cartes radio) */
.mode-choice { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 4px; }
.mode-choice label { position: relative; display: block; cursor: pointer; }
.mode-choice input { position: absolute; opacity: 0; }
.mode-choice__card {
  display: block; padding: 18px 20px 16px;
  border: 1px solid rgba(232,213,163,.3);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.mode-choice__name { display: block; font-family: var(--font-corps); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--ivoire); margin-bottom: 5px; }
.mode-choice__desc { display: block; font-size: 12.5px; font-weight: 300; color: var(--gris-sable); line-height: 1.6; }
.mode-choice input:checked + .mode-choice__card { border-color: var(--or-nimba); background: rgba(201,168,76,.08); }
.mode-choice input:checked + .mode-choice__card .mode-choice__name { color: var(--or-nimba); }
.mode-choice input:focus-visible + .mode-choice__card { outline: 1px solid var(--or-nimba); outline-offset: 2px; }

/* Boutons de partage (réseaux + copie du lien) */
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-corps); font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--vert-foret); background: transparent;
  border: 1px solid var(--gris-clair); padding: 11px 18px; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.share-btn:hover { border-color: var(--or-profond); color: var(--or-profond); }
.share-btn svg { flex: 0 0 auto; }
.event-hashtag { margin-top: 22px; text-align: center; font-family: var(--font-corps); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--or-profond); }

/* Formulaire d'inscription : variante large de la carte d'accès */
.event-register { max-width: 720px; margin: 60px auto 0; }
.event-register .field { margin-bottom: 18px; }
.event-register__grid { display: grid; grid-template-columns: 1fr; gap: 0 22px; }
.event-note { font-size: 12.5px; font-weight: 300; font-style: italic; color: var(--gris-sable); margin: 18px 0 0; text-align: center; }

/* Bloc partenaires (structure prête, logos à venir) */
.partners { margin-top: 56px; text-align: center; }
.partners__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 52px; margin-top: 34px; }
.partners__slot {
  display: flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 64px; padding: 12px 22px;
  border: 1px dashed rgba(154,152,144,.55);
  font-family: var(--font-corps); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--gris-sable);
}
.partners__row img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .8; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.partners__row a:hover img { filter: none; opacity: 1; }

/* -------------------------------------------------------------------
   18i. ACCUEIL — À la une & pôle vedette (cahier des charges V1)
   ------------------------------------------------------------------- */
/* Bandeau « à la une » : l'événement prioritaire, juste sous le héros */
.alaune {
  display: block;
  background: linear-gradient(90deg, var(--vert-sombre), var(--vert-foret) 50%, var(--vert-sombre));
  border-top: 1px solid rgba(168,131,42,.4);
  border-bottom: 1px solid rgba(168,131,42,.4);
  padding: 20px var(--pad-x);
  text-align: center;
}
.alaune__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alaune__kicker { font-family: var(--font-corps); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: var(--or-clair); }
.alaune__title { font-family: var(--font-titre); font-style: italic; font-weight: 500; font-size: 22px; color: var(--or-nimba); display: inline-flex; align-items: center; gap: 12px; }
.alaune__title svg { flex: 0 0 auto; transition: transform .4s var(--ease); }
.alaune:hover .alaune__title svg { transform: translateX(6px); }

/* Pôle vedette : la conciergerie mise en avant sur l'accueil */
.feature { display: grid; grid-template-columns: 1fr; gap: 42px; margin-top: 60px; text-align: left; align-items: center; }
.feature__media { position: relative; overflow: hidden; }
.feature__media img {
  display: block; width: 100%; height: 340px; object-fit: cover;
  filter: grayscale(.35) contrast(1.04) brightness(.92);
  transition: transform .8s var(--ease);
}
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,42,31,.28), rgba(16,42,31,.6)); mix-blend-mode: multiply; }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__domains { list-style: none; margin: 0 0 32px; padding: 0; }
.feature__domains li { position: relative; padding: 13px 0 13px 26px; border-top: 1px solid var(--gris-clair); font-size: 15px; font-weight: 300; color: var(--gris-fonce); }
.feature__domains li:last-child { border-bottom: 1px solid var(--gris-clair); }
.feature__domains li::before { content: ""; position: absolute; left: 0; top: 22px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--or-nimba); }
.feature__domains li strong { font-weight: 500; color: var(--vert-foret); }

/* ===================================================================
   19. RESPONSIVE
   =================================================================== */
@media (min-width: 768px) {
  .world { grid-template-columns: 1fr 1fr; }
  .teaser-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .teaser-grid--3 { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .alaune__inner { flex-direction: row; justify-content: center; gap: 26px; }
  .offres { grid-template-columns: 1fr 1fr; gap: 30px; }
  .event-keys { grid-template-columns: repeat(4, 1fr); }
  .mode-choice { grid-template-columns: 1fr 1fr; }
  .event-register__grid { grid-template-columns: 1fr 1fr; }
  .signatures { grid-template-columns: 1fr 1fr; }
  .conciergerie__grid { grid-template-columns: 1fr 1fr; gap: 0 44px; }
  .privileges { grid-template-columns: 1fr 1fr; gap: 0 46px; }
  .member-preview { grid-template-columns: 1fr 1fr; }
  .member-access { grid-template-columns: 1fr 1fr; gap: 30px; }

  .valeurs__list { flex-direction: row; justify-content: center; align-items: stretch; flex-wrap: wrap; }
  .valeur { padding: 10px 40px; max-width: 250px; }
  .valeur:not(:last-child)::after { left: auto; right: -4px; bottom: 50%; transform: translateY(50%) rotate(45deg); }

  .approche__grid { grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .step:nth-child(1), .step:nth-child(2) { border-top: 1px solid var(--gris-clair); }
  .step:nth-child(3), .step:nth-child(4) { border-bottom: 1px solid var(--gris-clair); }

  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }

  .manifeste__figure img { height: 420px; }
}

@media (min-width: 1024px) {

  .world--lifestyle { grid-template-columns: repeat(3, 1fr); }
  .world[data-world="business"] { grid-template-columns: repeat(3, 1fr); }

  .valeur { padding: 10px 48px; }
  .approche__grid { gap: 0 72px; }

  .contact__grid { grid-template-columns: .82fr 1fr; gap: 76px; align-items: start; }
  .statement__media { background-attachment: fixed; }   /* parallaxe au scroll */

  .manifeste__grid { grid-template-columns: 1.05fr .95fr; gap: 84px; }
  .manifeste__figure img { height: 560px; }

  .service-detail { grid-template-columns: 1.05fr .95fr; gap: 76px; }

  .teaser-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: none; margin-left: 0; margin-right: 0; }
  .feature { grid-template-columns: 1.05fr .95fr; gap: 76px; }
  .feature__media img { height: 460px; }
}

/* -------------------------------------------------------------------
   EN-TÊTE — paliers de disposition
   < 1200px            : menu déroulant (burger). La navigation complète des
                         trois pôles ne tient pas en largeur en dessous.
   1200px → 1399.98px  : deux lignes en permanence (logo au-dessus, navigation
                         en dessous). La barre compacte sur une seule ligne
                         demanderait ~1176px utiles : elle ne tiendrait pas.
   ≥ 1400px            : deux lignes au repos, repli sur une seule ligne au
                         scroll (logo à gauche, navigation à droite).
   Le regroupement horizontal des deux nav est calculé en JS — section 1 de
   script.js, dont la constante DESKTOP (1200) et COMPACT (1400) doivent rester
   accordées à ces paliers.
   ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .site-header.scrolled .header-inner .brand { left: 50%; transform: translate(-50%, -50%); }
  .nav--left, .nav--right { transform: none !important; }
}

@media (min-width: 1200px) {
  .menu-toggle { display: none; }
  .nav { display: flex; }

  :root { --header-h: 138px; }

  /* Repos : logo centré sur la première ligne, navigation sur la seconde. */
  .header-inner { align-items: flex-end; padding-bottom: 24px; transition: padding-bottom .45s var(--ease); }
  .header-inner .brand { top: 34px; transform: translate(-50%, 0); }
}

/* Écrans intermédiaires : on reste sur deux lignes au scroll, on se contente
   de réduire la hauteur. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header.scrolled { height: 116px; }
  .site-header.scrolled .header-inner { align-items: flex-end; padding-bottom: 18px; }
  .site-header.scrolled .header-inner .brand { left: 50%; top: 24px; transform: translate(-50%, 0); }
}

/* Grands écrans : repli sur une seule ligne au scroll — MAIS SEULEMENT
   S'IL Y A LA PLACE.

   Le palier de largeur ne suffit pas à le dire : la barre est bornée par
   --maxw (1320 px) et ses marges grandissent avec l'écran, si bien que
   la place utile cesse d'augmenter au-delà de 1400 px. C'est donc le
   script qui mesure — logo, écart, les deux nav — et qui pose
   « barre-une-ligne » quand l'ensemble tient.

   Sans cette condition, le logo passait à gauche par-dessus le lien
   « La Maison ». Sans JavaScript, la classe n'est jamais posée et
   l'en-tête garde ses deux lignes : une dégradation lisible. */
@media (min-width: 1400px) {
  /* La barre repliée s'étend sur toute la largeur, au lieu d'être bornée
     à --maxw. Sans cela elle ne tiendrait JAMAIS : il manquait 99 px à
     1500 px, et davantage au-delà, puisque la largeur utile cesse de
     croître quand les marges, elles, grandissent. Ce n'est pas une
     licence de mise en page — c'est la condition pour que le repli
     existe. Le fond de l'en-tête occupait déjà toute la largeur ; seul
     son contenu était retenu au centre. */
  .site-header.scrolled.barre-une-ligne .header-inner { max-width: none; }

  .site-header.scrolled.barre-une-ligne .header-inner { align-items: center; padding-bottom: 0; }
  .site-header.scrolled.barre-une-ligne .header-inner .brand { top: 50%; transform: translate(0, -50%); }

  /* Faute de place, on reste sur deux lignes — exactement comme entre
     1200 et 1400 px. Le « :not() » l'emporte sur la règle générale qui
     envoie le logo à gauche. */
  .site-header.scrolled:not(.barre-une-ligne) { height: 116px; }
  .site-header.scrolled:not(.barre-une-ligne) .header-inner { align-items: flex-end; padding-bottom: 18px; }
  .site-header.scrolled:not(.barre-une-ligne) .header-inner .brand {
    left: 50%; top: 24px; transform: translate(-50%, 0);
  }
}

@media (min-width: 1440px) {
  :root { --section-y: 156px; }
}

/* Petits écrans : on évite tout débordement des textes à fort interlettrage */
@media (max-width: 600px) {
  .hero__title  { font-size: clamp(40px, 13vw, 66px); }
  .hero__baseline { letter-spacing: .2em; }
  .kicker { letter-spacing: .24em; }
  .statement__quote { font-size: clamp(23px, 7vw, 34px); }

  /* La bascule occupe toute la largeur disponible */
  .toggle { left: 0; transform: none; display: flex; width: 100%; max-width: 360px; }
  .toggle__btn { flex: 1; padding: 13px 8px; font-size: 11px; letter-spacing: .16em; text-align: center; }

  .btn { padding: 16px 30px; letter-spacing: .22em; }
  .footer__legal { gap: 16px; }
}

@media (max-width: 360px) {
  .toggle__btn { letter-spacing: .1em; }
  .mark { font-size: 11px; letter-spacing: .18em; }
}

/* -------------------------------------------------------------------
   20. ACCESSIBILITÉ — mouvement réduit
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .statement__media { background-attachment: scroll !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--or-nimba); outline-offset: 3px;
}

/* -------------------------------------------------------------------
   18m. FICHE ÉVÉNEMENT — bannière, annonce, aperçu
   ------------------------------------------------------------------- */

/* Bandeau propre à l'événement, sous l'en-tête de page. */
.event-banniere { margin: 0; line-height: 0; background: var(--vert-foret); }
.event-banniere img { width: 100%; height: auto; max-height: 340px; object-fit: cover; display: block; }

/* Ruban d'annonce : une phrase courte, mise en avant sans crier. */
.event-annonce {
  margin: 0;
  background: var(--vert-foret);
  color: var(--or-nimba);
  font-family: var(--font-corps);
  font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .24em;
  text-align: center;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(201,168,76,.3);
}

/* Aperçu réservé à l'équipe : volontairement voyant, pour qu'on ne
   confonde jamais un brouillon avec la fiche publiée. */
.apercu-bandeau {
  position: sticky; top: 0; z-index: 200;
  background: var(--or-profond); color: var(--noir-absolu, #14140F);
  font-family: var(--font-corps); font-size: 13px;
  text-align: center; padding: 11px 24px;
}
.apercu-bandeau strong { text-transform: uppercase; letter-spacing: .1em; }
.apercu-bandeau a { color: inherit; margin-left: 14px; border-bottom: 1px solid currentColor; }


/* =====================================================================
   19. LA LETTRE — le formulaire du pied de page

   Une seule case et un bouton. Ce bloc vit sur fond vert nuit : le
   champ y est posé en creux plutôt qu'en blanc, pour ne pas trouer le
   pied d'un rectangle clair.
   ===================================================================== */

.footer__lettre {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gris-sable);
  margin: 0 0 18px;
  max-width: 30ch;
}

.lettre { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }

/* L'étiquette reste lisible par un lecteur d'écran, sans occuper la page. */
.lettre__label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.lettre input[type="email"] {
  width: 100%;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 168, 76, .34);
  color: var(--ivoire);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s, background .2s;
}
.lettre input[type="email"]::placeholder { color: rgba(248, 246, 240, .38); }
.lettre input[type="email"]:focus {
  outline: none;
  border-color: var(--or-nimba);
  background: rgba(255, 255, 255, .09);
}

.lettre button {
  align-self: flex-start;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--or-nimba);
  color: var(--or-clair);
  font-family: inherit;
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lettre button:hover:not(:disabled) { background: var(--or-nimba); color: var(--vert-nuit); }
.lettre button:disabled { opacity: .5; cursor: default; }

.lettre__reponse {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  min-height: 1px;          /* pas de saut de mise en page quand il se remplit */
  max-width: 320px;
}
.lettre__reponse--ok { color: var(--or-clair); }
.lettre__reponse--ko { color: #E5A38A; }

/* La case « recevoir la lettre », dans le formulaire d'inscription.
   Décochée par défaut, et posée avant le bouton : on la voit avant de
   valider, jamais après. */
.ev-lettre {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris-sable);
  cursor: pointer;
}
.ev-lettre input { margin-top: 3px; accent-color: var(--or-nimba); flex: none; }
.ev-lettre span { flex: 1 1 auto; }

/* « — facultatif » à côté d'une étiquette : le lecteur doit savoir ce
   qu'il peut sauter sans avoir à essayer. */
.field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gris-sable); }

/* Les questions propres au partenariat, révélées par l'objet choisi. */
.field-partenariat[hidden] { display: none; }

/* L'équivalent en devise acceptée, sous le tarif d'un événement.
   Discret à dessein : le prix qui fait foi est celui en francs guinéens,
   l'équivalent n'est qu'une commodité de lecture.

   Le sélecteur double le `small` de .event-keys__value, qui l'emporterait
   sinon en spécificité. Et la teinte est l'OR PROFOND, pas l'or clair :
   ce bloc est posé sur fond ivoire, où l'or clair serait illisible — et
   la charte de la maison interdit l'or sur fond blanc.

   La teinte est un or BRUNI, mesuré : l'or profond (#A8832A) ne donne
   que 3,27:1 de contraste sur l'ivoire, en dessous des 4,5:1 qu'exige
   un texte de cette taille. Celui-ci atteint 4,67:1 tout en restant un
   or, pas un gris. */
.event-keys__value small.event-keys__equiv {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-style: italic;
  letter-spacing: .02em;
  color: #8A6A1E;
}


/* =====================================================================
   22. LE BANDEAU D'ABONNEMENT

   Le même formulaire d'une seule case que dans le pied de page, mais
   posé au bas des pages de service, là où quelqu'un vient de lire ce
   que fait la maison. Le pied de page se lit peu ; une bande, oui.

   Elle vit sur « .section--vert » : les styles de « .lettre » écrits
   pour le pied de page s'y appliquent sans rien redéfinir des couleurs.
   Seule la mise en ligne change — le champ et le bouton côte à côte,
   parce qu'ici la largeur ne manque pas.
   ===================================================================== */

.lettre-bande .lettre {
  max-width: 520px;
  margin: 30px auto 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.lettre-bande .lettre input[type="email"] { flex: 1 1 250px; }
.lettre-bande .lettre button { align-self: auto; white-space: nowrap; }

.lettre-bande .lettre__reponse {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.lettre-bande__mention {
  margin: 18px 0 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(248, 246, 240, .55);
}

@media (max-width: 560px) {
  /* Sous 560 px, le bouton passe sous le champ plutôt que de le réduire
     à une fente : une adresse e-mail doit rester lisible pendant qu'on
     la tape. */
  .lettre-bande .lettre { flex-direction: column; }
  .lettre-bande .lettre button { align-self: stretch; }

  /* ET LA BASE DU CHAMP EST REMISE À PLAT. En colonne, « flex-basis »
     ne parle plus de largeur mais de HAUTEUR : le 250 px prévu pour la
     ligne donnait un champ de 250 px de haut. Mesuré, pas supposé. */
  .lettre-bande .lettre input[type="email"] { flex: 0 0 auto; }
}


/* =====================================================================
   23. L'ICÔNE DE L'ESPACE PERSONNEL

   Posée après « Nous contacter », dans l'en-tête de toutes les pages.

   ELLE NE CHANGE JAMAIS D'ASPECT, connecté ou non : ces pages sont des
   fichiers statiques, elles ne savent pas qui les lit. C'est espace/ qui
   décide où mener. Une icône qui devrait connaître l'état de la session
   imposerait soit une requête au chargement de chaque page, soit un
   clignotement au moment où la réponse arrive — pour un bénéfice nul.

   Un trait, pas un bouton : le geste principal de l'en-tête reste
   « Nous contacter », et une deuxième pastille dorée lui disputerait
   l'attention.
   ===================================================================== */

.nav__compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-left: 4px;
  color: var(--or-clair);
  border: 1px solid rgba(201, 168, 76, .34);
  border-radius: 50%;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.nav__compte:hover {
  color: var(--vert-nuit);
  background: var(--or-nimba);
  border-color: var(--or-nimba);
}
.nav__compte:focus-visible {
  outline: 2px solid var(--or-nimba);
  outline-offset: 3px;
}

/* Une fois la page défilée, l'en-tête devient ivoire : l'or pâle s'y
   perdrait, comme il le fait déjà pour « .nav__link ». On suit la même
   règle, avec la même teinte. */
.site-header.scrolled .nav__compte {
  color: var(--or-profond);
  border-color: rgba(168, 131, 42, .4);
}
.site-header.scrolled .nav__compte:hover {
  color: var(--ivoire);
  background: var(--or-profond);
  border-color: var(--or-profond);
}


/* =====================================================================
   24. reCAPTCHA — le badge masqué, la mention rendue

   Google autorise à masquer son encadré flottant À CONDITION d'afficher
   la mention et les deux liens : c'est exactement l'échange qu'on fait
   ici. Un rectangle de marque posé en bas à droite d'une page qui n'a
   pas un pixel de trop n'y avait pas sa place.

   « visibility », et non « display » : le script de Google mesure son
   badge, et le supprimer de la mise en page le fait protester.
   ===================================================================== */

.grecaptcha-badge { visibility: hidden; }

.footer__recaptcha {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: rgba(248, 246, 240, .42);
}
.footer__recaptcha a {
  color: rgba(248, 246, 240, .62);
  border-bottom: 1px solid rgba(248, 246, 240, .22);
}
.footer__recaptcha a:hover { color: var(--or-clair); border-bottom-color: var(--or-clair); }

/* -------------------------------------------------------------------
   25. LES CHIFFRES DE LA MAISON

   Un rang de nombres sur l'accueil : événements menés, partenaires,
   personnes accueillies. Ils viennent de la base (api/public.php) et
   ne sont JAMAIS écrits dans la page — un chiffre tapé à la main
   vieillit sans que personne ne s'en aperçoive.

   Pas de bordure ni de fond : la sobriété de la charte tient à ce
   qu'on n'encadre pas ce qui se suffit. Seul le trait doré sous le
   nombre marque l'appartenance.
   ------------------------------------------------------------------- */
.chiffres__rang {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
  margin-top: 10px;
}
.chiffre-cle { text-align: center; }
.chiffre-cle__nombre {
  display: block;
  font-family: var(--font-titre); font-style: italic; font-weight: 500;
  font-size: clamp(42px, 6vw, 64px); line-height: 1;
  color: var(--vert-foret);
}
.chiffre-cle__trait {
  display: block; width: 34px; height: 1px;
  margin: 16px auto 14px; background: var(--or-nimba);
}
.chiffre-cle__libelle {
  display: block;
  font-family: var(--font-corps); font-weight: 500;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris-sable);
}

@media (min-width: 700px) {
  /* Deux ou trois colonnes selon ce que la base renvoie : un compteur à
     zéro n'est pas affiché, le rang doit donc tenir à 1, 2 ou 3. */
  .chiffres__rang { grid-auto-flow: column; grid-template-columns: none; gap: 30px; }
}

/* -------------------------------------------------------------------
   26. SOUS-MENU OUVRANT À GAUCHE

   Le panneau des Univers est calé à DROITE (right: 0) et fait deux
   colonnes sur 500 px : il pend sous un lien de la navigation droite.
   Celui de « La Maison » pend sous la navigation GAUCHE — calé à
   droite, il sortirait de l'écran par la gauche. Une seule colonne
   suffit à deux entrées.
   ------------------------------------------------------------------- */
.dropdown--gauche {
  right: auto; left: 0;
  min-width: 290px;
  grid-template-columns: 1fr;
  padding: 28px 34px 26px;
}

/* -------------------------------------------------------------------
   27. LE JOURNAL NIMBA — mise en page de magazine

   Reprend l'AGENCEMENT d'un journal d'actualité : une pièce maîtresse
   large, deux brèves à côté, puis une grille. Rien de son habillage —
   ni pastille rouge, ni bandeau publicitaire, ni titre en capitales.
   La charte tient : or sur fond sombre ou ivoire, jamais sur blanc ;
   titres en Cormorant italique bas de casse ; kickers en Raleway
   capitales espacées.

   UNE CARTE SANS IMAGE NE DOIT PAS ÊTRE UN TROU. Les premiers articles
   n'en auront pas. Les cartes à texte incrusté reçoivent alors un fond
   vert plein, celles de la grille se passent simplement de vignette :
   dans les deux cas la carte reste entière.
   ------------------------------------------------------------------- */

/* --- L'en-tête d'un bloc : filet or, titre, et rien d'autre --------- */
.jrn-bloc { margin-top: 64px; }
.jrn-bloc:first-of-type { margin-top: 0; }
.jrn-bloc__tete {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 14px; margin-bottom: 30px;
  border-bottom: 1px solid var(--gris-clair);
  text-align: left;
}
.jrn-bloc__titre {
  position: relative; padding-left: 16px;
  font-family: var(--font-corps); font-weight: 500;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--vert-foret); margin: 0;
}
.jrn-bloc__titre::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 13px; transform: translateY(-50%);
  background: var(--or-profond);
}
.jrn-bloc__compte { font-size: 12px; font-weight: 300; color: var(--gris-sable); }

/* --- La une : une grande pièce, deux brèves ------------------------ */
.jrn-une { display: grid; grid-template-columns: 1fr; gap: 20px; text-align: left; }
.jrn-une__cote { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* --- Carte à texte incrusté (la une et les brèves) ----------------- */
.jrn-carte {
  position: relative; display: block; overflow: hidden;
  background: var(--vert-foret);
  border-top: 2px solid var(--or-nimba);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.jrn-carte:hover { transform: translateY(-5px); box-shadow: 0 28px 52px rgba(10,10,8,.26); }
.jrn-carte__media { position: absolute; inset: 0; }
.jrn-carte__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.32) contrast(1.04) brightness(.86);
  transition: transform .9s var(--ease);
}
.jrn-carte:hover .jrn-carte__media img { transform: scale(1.05); }
/* Le voile : c'est lui qui rend le titre lisible quelle que soit la
   photo. Plus dense en bas, là où le texte se pose. */
.jrn-carte__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,42,31,.18) 0%, rgba(16,42,31,.62) 52%, rgba(10,10,8,.88) 100%);
}
.jrn-carte__texte {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 28px 30px 30px;
}
.jrn-carte--grande .jrn-carte__texte { min-height: 460px; padding: 34px 38px 38px; }

.jrn-carte__meta {
  font-family: var(--font-corps); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--or-nimba); margin: 0 0 12px;
}
.jrn-carte__meta i { font-style: normal; color: var(--or-clair); opacity: .7; }
.jrn-carte__titre {
  font-family: var(--font-titre); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.24;
  color: var(--ivoire); margin: 0;
}
.jrn-carte--grande .jrn-carte__titre { font-size: clamp(28px, 4vw, 40px); }
.jrn-carte__chapo {
  font-size: 14px; font-weight: 300; line-height: 1.7;
  color: var(--or-clair); margin: 14px 0 0; max-width: 54ch;
}
.jrn-carte--cote .jrn-carte__chapo { display: none; }   /* la brève ne s'étale pas */

/* --- La grille : vignette au-dessus, texte sur ivoire -------------- */
.jrn-grille { display: grid; grid-template-columns: 1fr; gap: 26px; text-align: left; }
.jrn-tuile {
  display: flex; flex-direction: column;
  background: var(--ivoire);
  border: 1px solid var(--gris-clair); border-top: 2px solid var(--or-profond);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.jrn-tuile:hover {
  transform: translateY(-5px); box-shadow: 0 26px 48px rgba(10,10,8,.14);
  border-color: var(--gris-sable); border-top-color: var(--or-nimba);
}
.jrn-tuile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.jrn-tuile__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.32) contrast(1.04) brightness(.94);
  transition: transform .9s var(--ease);
}
.jrn-tuile:hover .jrn-tuile__media img { transform: scale(1.05); }
.jrn-tuile__corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 26px; }
.jrn-tuile__meta {
  font-family: var(--font-corps); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--or-profond); margin: 0 0 11px;
}
.jrn-tuile__meta i { font-style: normal; color: var(--gris-sable); }
.jrn-tuile__titre {
  font-family: var(--font-titre); font-style: italic; font-weight: 500;
  font-size: 23px; line-height: 1.26; color: var(--vert-foret); margin: 0;
}
.jrn-tuile__chapo {
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: var(--gris-fonce); margin: 12px 0 20px; flex: 1 1 auto;
}
.jrn-tuile__lire {
  font-family: var(--font-corps); font-weight: 500;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-profond); display: inline-flex; align-items: center; gap: 10px;
}
.jrn-tuile__lire svg { transition: transform .4s var(--ease); }
.jrn-tuile:hover .jrn-tuile__lire svg { transform: translateX(6px); }

/* --- Les filtres par nature ---------------------------------------- */
.jrn-filtres {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 0 48px;
}
.jrn-filtre {
  font-family: var(--font-corps); font-weight: 500;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  padding: 9px 20px; border: 1px solid var(--gris-clair);
  color: var(--gris-fonce);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.jrn-filtre:hover { color: var(--vert-foret); border-color: var(--or-profond); }
.jrn-filtre.actif {
  background: var(--vert-foret); border-color: var(--vert-foret); color: var(--or-nimba);
}

@media (min-width: 760px) {
  .jrn-grille { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  /* La une prend deux tiers, les brèves le tiers restant — la
     proportion d'un journal, et non deux colonnes égales. */
  .jrn-une    { grid-template-columns: 1.85fr 1fr; }
  .jrn-grille { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------
   28. LE FORMULAIRE PAR ÉTAPES (page Contact)

   Une étape à l'écran, une barre de progression au-dessus. Le
   formulaire d'un seul tenant faisait deux écrans et demi : on le
   traversait en scrollant, sans savoir combien il en restait.

   TROIS LEVIERS SUR LA HAUTEUR, et c'est tout ce qui compte ici :
   une seule étape visible, les champs courts par DEUX sur grand
   écran, et les six services en grille plutôt qu'en colonne.

   ATTENTION AUX RÈGLES DE .field, qui valent pour tout ce qui est
   dedans : « label » y est en bloc, capitales espacées, et « input »
   en largeur pleine. Une case à cocher héritant de cela devient une
   barre de 100 % surmontée d'un titre — d'où les remises à zéro
   explicites plus bas. Elles ne sont pas décoratives.
   ------------------------------------------------------------------- */

/* --- La progression -------------------------------------------------
   Pas de barre qui se remplit : des jalons numérotés, qui passent au
   crochet une fois franchis. On voit d'un coup d'œil où l'on en est
   ET combien il reste — ce que ne dit pas un pourcentage. */
.etapes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 0 0 34px; padding: 0 0 20px;
  border-bottom: 1px solid rgba(232, 213, 163, .18);
}
.jalon { display: flex; align-items: center; }
/* Le trait de liaison : il dit que les étapes se suivent.
   COURT, ET C'EST MESURÉ : à cinq étapes, la barre demandait 638 px
   pour 583 disponibles et passait à la ligne. Les quatre traits
   coûtaient à eux seuls 184 px — plus que les libellés. */
.jalon + .jalon::before {
  content: ""; display: block; width: 12px; height: 1px;
  margin: 0 5px; background: rgba(232, 213, 163, .28);
}
.jalon__corps {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 4px 1px; margin: 0;
  font-family: var(--font-corps); font-weight: 500;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-sable);
  transition: color .3s var(--ease);
}
.jalon.fait .jalon__corps { cursor: pointer; color: var(--or-clair); }
.jalon.fait .jalon__corps:hover { color: var(--or-nimba); }
.jalon.actif .jalon__corps { color: var(--or-nimba); }
.jalon__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; flex: 0 0 23px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; letter-spacing: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.jalon.actif .jalon__n { background: var(--or-nimba); color: var(--vert-foret); border-color: var(--or-nimba); }
.jalon.fait  .jalon__n { background: rgba(232, 213, 163, .16); }
/* Sur petit écran, seuls les numéros : six libellés ne tiennent pas
   en largeur et se mettraient à passer à la ligne. */
.jalon__nom { display: none; }

/* --- Une étape ------------------------------------------------------
   L'apparition est nette mais brève : à chaque étape franchie, un
   mouvement dit que l'on avance. Coupée pour qui a demandé moins de
   mouvement — voir la section 20. */
.etape { animation: etape-entre .42s var(--ease-out) both; }
@keyframes etape-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.etape__titre {
  font-family: var(--font-titre); font-style: italic; font-weight: 500;
  font-size: clamp(23px, 3vw, 30px); line-height: 1.25;
  color: var(--ivoire); margin: 0 0 8px;
}
.etape__mot {
  font-size: 14px; font-weight: 300; line-height: 1.7;
  color: var(--or-clair); margin: 0 0 26px;
}
.form-sous-titre {
  font-family: var(--font-corps); font-weight: 500;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--or-nimba); margin: 26px 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(232, 213, 163, .18);
}

.etape__titre + .field,
.etape__titre + .form-duo,
.etape__titre + .cartes-choix { margin-top: 26px; }

/* --- Les cartes de la première étape -------------------------------- */
.cartes-choix { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 26px 0 30px; }
.carte-choix { display: block; cursor: pointer; }
/* La vraie case reste là pour le clavier et les lecteurs d'écran ;
   c'est le cadre qui montre le choix. */
.carte-choix input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.carte-choix__corps {
  display: block; padding: 17px 20px;
  border: 1px solid rgba(232, 213, 163, .22);
  border-left: 2px solid transparent;
  background: rgba(232, 213, 163, .04);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.carte-choix:hover .carte-choix__corps { border-color: rgba(232, 213, 163, .45); }
.carte-choix input:checked + .carte-choix__corps {
  border-color: rgba(201, 168, 76, .5);
  border-left-color: var(--or-nimba);
  background: rgba(201, 168, 76, .09);
}
.carte-choix input:focus-visible + .carte-choix__corps { outline: 1px solid var(--or-nimba); outline-offset: 2px; }
.carte-choix__nom {
  display: block;
  font-family: var(--font-titre); font-style: italic; font-size: 20px;
  color: var(--ivoire); margin-bottom: 3px;
}
.carte-choix input:checked + .carte-choix__corps .carte-choix__nom { color: var(--or-nimba); }
.carte-choix__mot { display: block; font-size: 13.5px; font-weight: 300; color: var(--gris-sable); }

/* --- Deux champs par ligne ------------------------------------------ */
.form-duo { display: grid; grid-template-columns: 1fr; gap: 0 22px; }

/* --- Choix multiples : cases et boutons radio -----------------------

   DEUX DÉFAUTS RÉPARÉS ICI, et ils venaient du même endroit : les
   règles de « .field » valent pour TOUT ce qui est dedans.

   1. « .field input » impose « appearance: none » à tous les champs —
      ce qui convient à une zone de saisie, et retire aux cases et aux
      radios leur dessin natif. Elles n'étaient donc plus dessinées par
      personne : des carrés vides qui ne montraient jamais qu'ils
      étaient cochés. « accent-color » n'y pouvait rien, il ne s'applique
      qu'aux contrôles rendus nativement. On les dessine donc
      entièrement, ce qui est de toute façon plus juste pour la charte.

   2. « .field label » les met en bloc, capitales espacées. La remise à
      zéro se faisait par « .field .choix », et la mise en rang par
      « .field--choix .choix » — MÊME SPÉCIFICITÉ, donc la dernière
      écrite l'emportait, et les deux choix se retrouvaient l'un sous
      l'autre sur toute la largeur. Les sélecteurs ci-dessous sont
      départagés par la spécificité (0,2,1 contre 0,3,1) et non par
      l'ordre : les réorganiser ne peut plus casser la disposition.
   -------------------------------------------------------------------- */

label.choix,
.field label.choix,
.service label.choix {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-corps); font-size: 15px; font-weight: 300;
  text-transform: none; letter-spacing: 0; line-height: 1.5;
  color: var(--ivoire); cursor: pointer; margin: 0;
  transition: color .3s var(--ease);
}
label.choix:hover,
.field label.choix:hover,
.service label.choix:hover { color: var(--or-clair); }

/* CÔTE À CÔTE. Deux ou quatre choix courts se lisent d'un coup d'œil
   en rang ; empilés, ils font croire à une liste longue. */
.field--choix label.choix { display: inline-flex; margin: 0 28px 10px 0; }
.field--choix label.choix:last-child { margin-right: 0; }

/* --- Le dessin des contrôles ---------------------------------------
   Or sur vert : la charte l'autorise sur fond sombre, et c'est le seul
   endroit du formulaire où l'or peut être franc. */
.choix input[type="radio"],
.choix input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex: 0 0 20px;
  margin: 0; padding: 0; cursor: pointer;
  border: 1px solid rgba(232, 213, 163, .40);
  background-color: rgba(232, 213, 163, .05);
  background-repeat: no-repeat; background-position: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.choix input[type="radio"] { border-radius: 50%; }

.choix input[type="radio"]:hover,
.choix input[type="checkbox"]:hover { border-color: var(--or-nimba); }

/* Coché : la case se remplit d'or et porte un crochet vert ; le radio
   garde son cercle et reçoit un point plein. Le crochet est un SVG en
   ligne — aucun caractère, aucun emoji, conformément à la charte. */
.choix input[type="checkbox"]:checked {
  background-color: var(--or-nimba);
  border-color: var(--or-nimba);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.4 4 7.3 10 1.3' stroke='%231B4332' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choix input[type="radio"]:checked {
  border-color: var(--or-nimba);
  background-image: radial-gradient(circle at center, var(--or-nimba) 0 4.5px, transparent 4.5px);
}

/* Le libellé d'un choix retenu se distingue : on doit voir ce qu'on a
   coché sans relire les cases une à une. */
.choix:has(input:checked) { color: var(--or-nimba); }

/* --- Les six services, en grille ------------------------------------ */
.services { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
.service {
  padding: 14px 16px;
  border: 1px solid rgba(232, 213, 163, .16);
  background: rgba(232, 213, 163, .03);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.service:hover { border-color: rgba(232, 213, 163, .34); }
/* Coché : le bloc se signale, et sa zone de texte le prolonge. */
.service.coche {
  border-color: rgba(201, 168, 76, .45);
  background: rgba(201, 168, 76, .07);
  grid-column: 1 / -1;          /* il prend toute la largeur pour écrire */
}
.service textarea {
  width: 100%; margin-top: 12px;
  font-family: var(--font-corps); font-weight: 300; font-size: 15px; line-height: 1.7;
  color: var(--noir-absolu); background: var(--ivoire);
  border: 1px solid var(--gris-clair); border-radius: 0; padding: 12px 16px;
  resize: vertical; min-height: 68px;
  -webkit-appearance: none; appearance: none;
}
.service textarea:focus { outline: none; border-color: var(--or-nimba); }

/* --- Le récapitulatif ----------------------------------------------- */
.recap {
  display: grid; grid-template-columns: auto 1fr; gap: 0;
  margin: 0 0 26px;
  border-top: 1px solid rgba(232, 213, 163, .16);
}
.recap dt, .recap dd {
  margin: 0; padding: 11px 0;
  border-bottom: 1px solid rgba(232, 213, 163, .12);
  font-size: 14px; font-weight: 300; line-height: 1.6;
}
.recap dt {
  padding-right: 26px;
  font-family: var(--font-corps); font-weight: 500;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris-sable); white-space: nowrap;
}
.recap dd { color: var(--ivoire); }

/* --- La navigation du bas ------------------------------------------- */
.form-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(232, 213, 163, .16);
}
/* « Continuer » d'abord à l'œil, « Retour » en retrait : c'est le sens
   de la marche. En code, « Retour » vient en premier pour le clavier. */
.form-nav #etapeRetour { order: 1; }
.form-nav #etapeSuivant,
.form-nav #etapeEnvoyer { order: 2; }
.contact-form--etapes .btn { margin-top: 0; }

/* --- L'aiguillage vers la fiche client ------------------------------ */
.form-aiguillage {
  font-size: 14px; font-weight: 300; line-height: 1.7;
  color: var(--or-clair); margin: -6px 0 26px;
  padding: 14px 18px;
  border-left: 2px solid var(--or-profond);
  background: rgba(232, 213, 163, .06);
}
.lien-nu {
  font: inherit; color: var(--or-nimba);
  background: none; border: none; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--or-profond);
}
.lien-nu:hover { color: var(--or-clair); border-bottom-color: var(--or-clair); }

@media (min-width: 620px) {
  .jalon__nom { display: inline; }
  .jalon + .jalon::before { width: 18px; margin: 0 7px; }
  .form-duo { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .cartes-choix { gap: 14px; }
}