/* ============================================================
   components.css — composants partagés (3+ blocs)
   Header (.hdr), boutons (.btn/.btn-shape), footer (.ftr),
   bouton scroll-up, header mobile + menu burger (.mob-menu).
   Extrait fidèlement de la maquette 2026-06-10 (style.css).
   ============================================================ */

/* ===== HEADER + BOUTONS ===== */
/* ========== HEADER (glassmorph translucide + blur) ========== */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Padding fluide (responsive 2026-05-11) : 12-24px selon largeur écran. */
  padding: clamp(12px, 1vw, 24px) 0;
  background: rgba(10, 22, 38, 0.18);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Transition entre l'état "top" et l'état "scrolled" (header réduit). */
  transition: padding 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1)),
              background 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1)),
              box-shadow 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1));
}
/* État RÉDUIT au scroll (modif client 2026-05-22) : header plus compact,
   logo plus petit, fond plus opaque + légère ombre. La classe .hdr--scrolled
   est ajoutée par le JS (updateHeaderScrolled) au-delà de 40px de scroll. */
.hdr.hdr--scrolled {
  /* Version MINIMISÉE au scroll : header global réduit d'environ 30% par
     rapport à la version expand. La hauteur totale est pilotée par le PADDING
     + la hauteur réelle du LOGO (réduit via --logo-h, pas seulement scalé,
     sinon la boîte garde sa hauteur). Modif client 2026-05-22. */
  padding: clamp(6px, 0.5vw, 12px) 0;
  background: rgba(10, 22, 38, 0.55);
  box-shadow: 0 6px 24px rgba(10, 22, 38, 0.18);
}
/* Réduction ~20% de TOUS les éléments du header en mode scroll (logo, menu,
   bouton, FR/EN) via scale sur chaque colonne, ancré pour garder l'alignement
   gauche / centre / droite. Modif client 2026-05-22. Transition posée sur les
   éléments de base pour animer dans les deux sens. */
.hdr .hdr__logo,
.hdr .hdr__cta {
  transition: transform 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1));
}
.hdr .nav {
  transition: transform 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1));
}
.hdr.hdr--scrolled .hdr__logo {
  /* Vraie réduction de hauteur (≈70% de la version expand) pour que la boîte
     du logo rétrécisse et tire la hauteur totale du header vers le bas. */
  --logo-h: clamp(34px, 3vw, 58px);
}
.hdr.hdr--scrolled .nav {
  /* Combine le centrage absolu (translate -50%,-50%) avec une réduction douce
     (~-15%), pour que le menu reste lisible et centré en mode collapse. */
  transform: translate(-50%, -50%) scale(0.85);
  transform-origin: center center;
}
.hdr.hdr--scrolled .hdr__cta {
  transform: scale(0.85);
  transform-origin: right center;
}
.hdr a, .hdr .nav a, .hdr__lang a { color: rgba(255, 255, 255, 0.92); }
.hdr .nav a:hover, .hdr .nav a[aria-current="page"] { color: var(--c-copper); }
.hdr__lang a[aria-current="page"] { color: #fff; }
/* Le logo-header.svg est déjà en 2 couleurs (blanc + cuivre), pas besoin de filter */
.burger span { background: #fff; }
/* ============================================================
   HEADER — Layout en 3 colonnes (grid) :
   [LOGO  GAUCHE]  [NAV  CENTRE]  [CTA  DROITE]
   ============================================================
   Variables ajustables :
   - --logo-gutter   : marge à GAUCHE du logo (donc du bord gauche du logo
                       au bord gauche de la fenêtre).
                       === À RÉGLER À LA MAIN : c'est la BORNE HAUTE du clamp
                       (50px) qui fixe la valeur de référence sur grand écran ===
   - --header-gutter : marge à DROITE du header (côté CTA). Toujours identique
                       à --logo-gutter : la nav est centrée sur la largeur
                       totale, une dissymétrie décalerait le menu.
   - --logo-h        : hauteur du logo en px.
   ============================================================ */
.hdr .hdr__inner {
  /* Gouttières FLUIDES (fix nav 2 lignes 2026-07-22) : 50px au-delà de ~1500px
     (valeur d'origine, aucun changement sur grand écran), puis réduction
     progressive jusqu'à 24px vers 1025px. C'est la première des trois sources
     de place récupérée pour que la nav tienne sur UNE seule ligne dans la
     bande 1025→1500 (cf. .nav et .hdr-member plus bas). */
  --logo-gutter: clamp(24px, 5.47vw - 32.1px, 50px);   /* marge gauche du logo */
  --header-gutter: clamp(24px, 5.47vw - 32.1px, 50px); /* marge droite (symétrique) */

  max-width: none;
  width: 100%;
  padding-left: var(--logo-gutter);
  padding-right: var(--header-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;   /* logo | nav (centre) | cta */
  align-items: center;
  gap: 24px;
}
/* Logo header : ferré au bord gauche, taille fluide (responsive 2026-05-11). */
.hdr__logo {
  --logo-h: clamp(52px, 4.5vw, 88px);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-self: start;
}
/* Note : la taille des images logo est gérée par .hdr__logo-img (plus bas)
   qui pilote aussi la bascule entre light/dark via display. */
/* Nav : centrée par rapport à TOUTE la largeur du header (centre absolu),
   indépendamment des largeurs du logo (gauche) et du CTA (droite).
   Position absolue centrée → la réduction au scroll (scale) se fait toujours
   par rapport à ce centre. Modif client 2026-05-22. */
.hdr .hdr__inner { position: relative; }
.hdr .nav {
  justify-self: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* CAUSE RACINE du passage sur 2 lignes (fix 2026-07-22) : une boîte absolue
     positionnée par `left` seul ne dispose en largeur disponible que de la
     moitié du header. Sans width, le navigateur la ramenait donc à sa
     min-content (chaque item réduit à son mot le plus long) → « Expertises &
     Experts » cassait en 2 lignes entre 1025 et ~1507px. `max-content` lui
     rend sa largeur naturelle, indépendante de cette contrainte. */
  width: max-content;
}
/* CTA : ferré à droite */
.hdr__cta {
  justify-self: end;
}
.nav {
  display: flex;
  /* Jamais de retour à la ligne entre deux items (le wrap se produisait DANS
     un item, cf. .nav a white-space plus bas — on verrouille les deux). */
  flex-wrap: nowrap;
  /* Gouttière entre items — fluide (fix 2026-07-22). Formule calée pour valoir
     EXACTEMENT 32px (valeur d'origine) dès 1500px, puis se resserrer jusqu'à
     14px vers 1025px. Continu : aucun saut à un breakpoint. */
  gap: clamp(14px, 4.4vw - 34px, 32px);
  /* Idem pour la taille de typo : la borne HAUTE du clamp est l'ancienne valeur
     (0.8125rem sur une racine déjà fluide), donc au-delà de ~1500px le rendu
     est rigoureusement identique à avant. En dessous, réduction progressive
     jusqu'à 11,2px à 1025px. */
  font-size: clamp(11.2px, 0.505vw + 6.02px, 0.8125rem);
  font-weight: 600;
  text-transform: uppercase;
  /* Interlettrage également fluide : 0.08em d'origine dès ~1500px, resserré
     jusqu'à ~0.05em à 1025px (≈ 40px gagnés sur la largeur totale du menu). */
  letter-spacing: clamp(0.56px, 0.1116vw - 0.584px, 0.08em);
}
.nav a {
  position: relative;
  padding: 8px 0;
  color: var(--c-text);
  transition: color 0.3s var(--ease);
  /* Garantie structurelle : un libellé de menu ne se coupe JAMAIS en 2 lignes,
     quels que soient les noms de pages saisis dans le BO ou la langue. */
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0;
  width: 0; height: 1px;
  background: var(--c-copper);
  transition: width 0.4s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-copper); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.hdr__cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===== Pictos ronds du header (Nous contacter / Espace membres) ===== */
.hdr-pic {
  --pic-size: 40px;
  width: var(--pic-size);
  height: var(--pic-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hdr-pic svg {
  width: 50%;
  height: 50%;
  display: block;
}
/* Les deux pictos du header sont en filet blanc transparent (même style).
   Au hover : remplissage cuivre + icône blanche pour bien marquer l'action. */
.hdr-pic--ghost,
.hdr-pic--solid {
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: transparent;
  color: #fff;
}
.hdr-pic--ghost:hover,
.hdr-pic--solid:hover {
  background: var(--c-copper);
  border-color: var(--c-copper);
  color: #fff;
}

/* Bouton "Espace Membres" — forme signature Scale (modif client 2026-05-11).
   Reprend le border-radius "0 999px 0 999px" des autres .btn du site
   (coin haut-droite + bas-gauche arrondis), version header (hauteur 40px). */
.hdr-member {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 14px);
  /* Hauteur fluide (responsive 2026-05-11) : 36-56px. */
  height: clamp(34px, 3vw, 56px);
  /* Rembourrages fluides (fix 2026-07-22) : formules calées pour retomber sur
     les valeurs d'origine (1.4vw / 1.9vw) dès ~1500px, et se resserrer en
     dessous — 3e source de place récupérée pour la nav sur une ligne. */
  padding: 0 clamp(11px, 2.2vw - 12px, 28px) 0 clamp(14px, 2.9vw - 15px, 38px);
  border-radius: 0 999px 0 999px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  font-family: var(--ff-mono);
  /* Borne haute = ancienne valeur (0.7rem) → identique au-delà de ~1390px. */
  font-size: clamp(9.2px, 0.56vw + 3.85px, 0.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hdr-member__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(13px, 1.4vw, 24px);
  height: clamp(13px, 1.4vw, 24px);
  flex-shrink: 0;
}
.hdr-member__icon svg { width: 100%; height: 100%; display: block; }
.hdr-member:hover {
  background: var(--c-copper);
  border-color: var(--c-copper);
  color: #fff;
}

/* Switch de langue FR / EN : ferré tout à droite (à --header-gutter du bord) */
.hdr__lang {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
}
.hdr__lang a[aria-current="page"] { color: #fff; font-weight: 700; }
/* Séparateur "/" resserré entre FR et EN (modif client 2026-05-11 : moins d'espace) */
.hdr__lang-sep {
  margin: 0 4px;
  opacity: 0.55;
}

.burger { display: none; flex-direction: column; gap: 4px; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--c-text); transition: 0.3s; }

/* ============================================================
   HEADER — Système de thème adaptatif (dark / light)
   ============================================================
   Le data-header-theme est appliqué au <header> par JS au scroll selon
   la section actuellement sous lui (data-theme="dark|light").
   - dark  : sections fond bleu nuit / bleu marine → contenus blancs
   - light : sections fond crème / blanc → contenus bleu marine */

/* Transitions douces pour basculer entre thèmes */
.hdr,
.hdr a, .hdr .nav a, .hdr__lang a,
.hdr-pic, .burger span {
  transition: background 0.4s var(--ease),
              border-color 0.4s var(--ease),
              color 0.4s var(--ease);
}

/* === Mode DARK (fond bleu nuit OPAQUE, contenus blancs) ===
   Opacité augmentée à 0.92 (au lieu de 0.18) — modif user 2026-05-11 : sur
   les sous-pages à fond beige, le header doit contraster nettement. */
.hdr[data-header-theme="dark"] {
  background: rgba(10, 22, 38, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* === Mode LIGHT (fond crème OPAQUE, contenus bleu marine) ===
   Opacité augmentée à 0.92 (au lieu de 0.55) pour bien voir le header. */
.hdr[data-header-theme="light"] {
  background: rgba(245, 241, 234, 0.92);
  border-bottom-color: rgba(0, 57, 77, 0.10);
}
.hdr[data-header-theme="light"] a,
.hdr[data-header-theme="light"] .nav a,
.hdr[data-header-theme="light"] .hdr__lang a {
  color: var(--c-blue);
}
.hdr[data-header-theme="light"] .hdr__lang {
  color: rgba(0, 57, 77, 0.55);
}
.hdr[data-header-theme="light"] .hdr__lang a[aria-current="page"] {
  color: var(--c-blue);
  font-weight: 700;
}
.hdr[data-header-theme="light"] .nav a:hover,
.hdr[data-header-theme="light"] .nav a[aria-current="page"] {
  color: var(--c-copper);
}
/* Pictos en light : filet bleu marine au repos, hover rempli cuivre + icône blanche */
.hdr[data-header-theme="light"] .hdr-pic--ghost,
.hdr[data-header-theme="light"] .hdr-pic--solid {
  border-color: rgba(0, 57, 77, 0.40);
  color: var(--c-blue);
}
.hdr[data-header-theme="light"] .hdr-pic--ghost:hover,
.hdr[data-header-theme="light"] .hdr-pic--solid:hover {
  background: var(--c-copper);
  border-color: var(--c-copper);
  color: #fff;
}
/* Bouton "Espace Membres" en light : filet bleu marine, hover cuivre */
.hdr[data-header-theme="light"] .hdr-member {
  border-color: rgba(0, 57, 77, 0.40);
  color: var(--c-blue);
}
.hdr[data-header-theme="light"] .hdr-member:hover {
  background: var(--c-copper);
  border-color: var(--c-copper);
  color: #fff;
}
/* Burger en light */
.hdr[data-header-theme="light"] .burger span {
  background: var(--c-blue);
}

/* === Bascule des 2 logos selon le thème === */
.hdr__logo-img {
  height: var(--logo-h);
  width: auto;
  display: block;
  margin: 0;
  transition: height 0.4s var(--ease, cubic-bezier(0.65, 0.05, 0, 1));
}
/* Note : en mode scroll, la réduction du logo est gérée par le scale(0.8)
   appliqué plus haut sur .hdr--scrolled .hdr__logo (pas de --logo-h spécifique
   pour éviter un cumul). */
.hdr__logo-img--dark { display: none; }
.hdr[data-header-theme="light"] .hdr__logo-img--light { display: none; }
.hdr[data-header-theme="light"] .hdr__logo-img--dark  { display: block; }

/* === MOBILE : fond du header semi-transparent 50% selon le logo (modif client 2026-05-23) ===
   Le logo suit le thème de la section (contraste). Le fond du header (avec blur)
   est accordé au logo :
   - logo DARK (data-header-theme="light", sur section claire) → fond BEIGE 50%
   - logo LIGHT (data-header-theme="dark", sur section sombre) → fond BLEU 50% */
@media (max-width: 1024px) {
  .hdr[data-header-theme="light"] {
    background: rgba(245, 241, 234, 0.5);   /* beige 50% */
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom-color: rgba(0, 57, 77, 0.10);
  }
  .hdr[data-header-theme="dark"] {
    background: rgba(0, 57, 77, 0.5);        /* bleu 50% */
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

/* ========== BOUTONS ========== */
/* Forme signature par défaut sur tous les boutons :
   coin BAS-GAUCHE arrondi + coin HAUT-DROITE arrondi (rappel sigle logo). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.6vw, 14px);
  /* Padding bouton fluide (responsive 2026-05-11). */
  padding: clamp(12px, 1vw, 20px) clamp(20px, 2vw, 40px);
  border-radius: 0 999px 0 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.4s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--c-copper);
  color: #fff;
}
.btn--primary:hover { background: #a08754; }

.btn--ghost {
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text);
}
.btn--ghost:hover { border-color: var(--c-copper); color: var(--c-copper); }

.btn--ghost-light {
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
}
.btn--ghost-light:hover { border-color: var(--c-copper); color: var(--c-copper); }

/* ===== Forme signature inspirée du logo : .btn-shape =====
   Coin BAS-GAUCHE : radius max (arrondi complet)
   Coin HAUT-DROITE : radius max (arrondi complet)
   Coins HAUT-GAUCHE et BAS-DROITE : angles droits.
   Crée une forme en "S" inversé qui rappelle le sigle du logo. */
.btn-shape {
  border-radius: 0 999px 0 999px;
  /* override du border-radius pilule de .btn */
}


/* ===== FOOTER ===== */
.ftr {
  background: var(--c-bg-deep);
  color: rgba(255, 255, 255, 0.65);
  padding: clamp(48px, 7vh, 96px) 0 calc(clamp(24px, 3vh, 48px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line-light);
}
/* Mobile : le burger flottant (52px, bottom ~28px) + le scroll-up sont fixés
   en bas → on réserve de la marge basse au footer pour ne pas chevaucher le
   copyright / mentions / crédit (modif client). */
@media (max-width: 1024px) {
  .ftr {
    padding-bottom: calc(52px + 28px + 16px + env(safe-area-inset-bottom, 0px));
  }
}
body.nav-collapsed .ftr {
  padding-bottom: calc(52px + 28px + 16px + env(safe-area-inset-bottom, 0px));
}
.ftr__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vh, 32px);
}
/* Bloc central : logo + LinkedIn côte à côte */
.ftr__brand {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 40px);
}
.ftr__logo img {
  height: clamp(44px, 4.6vh, 60px);
  width: auto;
  /* Logo header (sigle cuivre + textes blancs), adapté au fond sombre.
     Pas de filtre : on garde les vraies couleurs du SVG. */
}
.ftr__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Logo réduit de moitié — modif user 2026-05-11 */
  width: clamp(18px, 1.75vw, 24px);
  height: clamp(18px, 1.75vw, 24px);
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}
.ftr__linkedin:hover {
  color: var(--c-copper);
  transform: scale(1.08);
}
.ftr__linkedin svg { width: 100%; height: 100%; }

/* Sitemap — liens de navigation du site, centrés. */
.ftr__sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 36px);
  font-family: var(--ff-body);
}
.ftr__sitemap-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease);
}
.ftr__sitemap-link:hover {
  color: var(--c-copper);
}

/* Ligne du bas centrée — copyright + mentions + politique + crédit. */
.ftr__bottom {
  margin: 0;
  text-align: center;
  font-family: var(--ff-body);
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.4vw, 44px);
}
.ftr__bottom-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.3s var(--ease);
}
.ftr__bottom-link:hover {
  color: var(--c-copper);
}

/* ===== SCROLL-UP ===== */
.scroll-up {
  position: fixed;
  bottom: clamp(20px, 3vh, 40px);
  right: clamp(20px, 3vw, 40px);
  /* Taille fluide responsive (2026-05-11). */
  width: clamp(48px, 4vw, 72px);
  height: clamp(48px, 4vw, 72px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-copper);
  color: #fff;
  border: none;
  border-radius: 50% 50% 50% 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease, cubic-bezier(0.65, 0.05, 0, 1)),
              transform 0.35s var(--ease, cubic-bezier(0.65, 0.05, 0, 1)),
              background 0.25s ease;
  box-shadow: 0 6px 24px rgba(10, 22, 38, 0.25);
}
.scroll-up.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Sur process.html, la section Approche ajoute un CTA "En savoir plus" en
   position fixed bas-droite. Pour éviter le chevauchement, on décale le
   scroll-up plus haut (modif user 2026-05-11). */
body.page-process .scroll-up {
  bottom: calc(clamp(20px, 3vh, 40px) + 72px);
}
.scroll-up:hover {
  background: #a08754;
}
.scroll-up:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.scroll-up svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Mobile : taille un peu réduite, position safe-area */
@media (max-width: 600px) {
  .scroll-up {
    width: 48px;
    height: 48px;
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
  .scroll-up svg { width: 18px; height: 18px; }
}

/* Reduced motion : pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .scroll-up { transition: opacity 0.01ms, background 0.01ms; transform: none; }
  .scroll-up.is-visible { transform: none; }
}

/* ===== MOBILE : header icons + burger flottant + volet menu ===== */
/* --- Header mobile : masquer les éléments desktop, afficher icônes mobiles --- */
@media (max-width: 1024px) {

  /* Masquer le burger haut-droite existant (remplacé par le burger flottant) */
  .burger { display: none !important; }

  /* Masquer la nav inline et le groupe hdr__cta entier en mobile */
  .hdr__cta { display: none; }

  /* Masquer la nav desktop */
  .nav { display: none !important; }

  /* Icônes mobiles droite : MASQUÉES — les accès secondaires (Espace Membres,
     FR/EN) sont désormais dans le volet du menu, pas dans le header mobile.
     Le header mobile ne contient QUE le logo centré. */
  .hdr__mobile-icons {
    display: none !important;
  }

  /* Logo centré horizontalement dans le header mobile.
     Le header utilise un grid 3 colonnes (logo | nav | cta). En mobile,
     la nav et le cta sont masqués (aucun enfant en flux normal) → le grid
     s'effondrerait à hauteur 0. On force le logo en position:absolute centré
     ET on donne à hdr__inner une min-height égale à la hauteur du logo pour
     maintenir la bonne hauteur de la barre. */
  .hdr .hdr__inner {
    position: relative;
    min-height: var(--logo-h, 52px);
  }
  .hdr__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: unset;
  }
}
/* Même comportement quand la nav déborde au-dessus de 1024px (nav-collapsed) */
body.nav-collapsed .burger { display: none !important; }
body.nav-collapsed .hdr__cta { display: none; }
body.nav-collapsed .nav { display: none !important; }
body.nav-collapsed .hdr__mobile-icons { display: none !important; }
body.nav-collapsed .hdr .hdr__inner {
  position: relative;
  min-height: var(--logo-h, 52px);
}
body.nav-collapsed .hdr__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-self: unset;
}

/* Desktop : icônes mobiles masquées */
.hdr__mobile-icons { display: none; }


/* --- Burger flottant bas-centre — BOUTON UNIQUE burger ⇄ croix ---
   Le bouton ne se déplace JAMAIS : scrollbar-gutter:stable réserve
   l'espace de la scrollbar en permanence (pas de saut à l'ouverture).
   Le centrage utilise left:50% + translateX(-50%) APRÈS avoir fixé
   scrollbar-gutter, ce qui garantit une position pixel-parfaite stable. */
html {
  scrollbar-gutter: stable;
}

.mob-burger {
  display: none; /* masqué par défaut (desktop) */
}

@media (max-width: 1024px) {
  .mob-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    background: var(--c-copper, #8E7547);
    color: #fff;
    border: none;
    cursor: pointer;
    /* z-index au-dessus du volet (z:300) pour rester cliquable en permanence */
    z-index: 400;
    box-shadow: 0 4px 20px rgba(10, 22, 38, 0.30);
    transition: background 0.25s ease;
    flex-shrink: 0;
  }
  /* Icône hamburger : les 3 barres SVG sont remplacées par 2 diagonales via
     clip-path + rotation sur les barres — on gère l'animation burger→X en CSS
     en masquant la barre du milieu et en pivotant les barres du haut/bas. */
  .mob-burger .burger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 0;
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.65, 0.05, 0, 1),
                opacity   0.2s ease,
                width     0.3s cubic-bezier(0.65, 0.05, 0, 1);
    flex-shrink: 0;
  }
  .mob-burger__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  /* Transformation → croix quand aria-expanded="true" */
  .mob-burger[aria-expanded="true"] .burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mob-burger[aria-expanded="true"] .burger-line:nth-child(2) {
    opacity: 0;
    width: 0;
  }
  .mob-burger[aria-expanded="true"] .burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* État ouvert : fond légèrement différent pour signaler l'état actif */
  .mob-burger[aria-expanded="true"] {
    background: rgba(142, 117, 71, 0.80);
  }
  .mob-burger:hover,
  .mob-burger:focus-visible {
    background: #a08754;
  }
  .mob-burger[aria-expanded="true"]:hover,
  .mob-burger[aria-expanded="true"]:focus-visible {
    background: rgba(142, 117, 71, 0.90);
  }
  .mob-burger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
}
/* Même comportement quand la nav déborde au-dessus de 1024px (nav-collapsed) */
body.nav-collapsed .mob-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  background: var(--c-copper, #8E7547);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 400;
  box-shadow: 0 4px 20px rgba(10, 22, 38, 0.30);
  transition: background 0.25s ease;
  flex-shrink: 0;
}
body.nav-collapsed .mob-burger .burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 0;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0.65, 0.05, 0, 1),
              opacity   0.2s ease,
              width     0.3s cubic-bezier(0.65, 0.05, 0, 1);
  flex-shrink: 0;
}
body.nav-collapsed .mob-burger__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
body.nav-collapsed .mob-burger[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-collapsed .mob-burger[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
body.nav-collapsed .mob-burger[aria-expanded="true"] .burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
body.nav-collapsed .mob-burger[aria-expanded="true"] {
  background: rgba(142, 117, 71, 0.80);
}
body.nav-collapsed .mob-burger:hover,
body.nav-collapsed .mob-burger:focus-visible {
  background: #a08754;
}
body.nav-collapsed .mob-burger[aria-expanded="true"]:hover,
body.nav-collapsed .mob-burger[aria-expanded="true"]:focus-visible {
  background: rgba(142, 117, 71, 0.90);
}
body.nav-collapsed .mob-burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- Scroll-up : repositionné en mobile pour s'aligner côte à côte avec le burger ---
   En mobile : le scroll-up reste à droite, même bottom que le burger flottant.
   Les deux forment une paire visuelle symétrique en bas de l'écran. */
@media (max-width: 1024px) {
  .scroll-up {
    width: 52px;
    height: 52px;
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
    right: max(20px, env(safe-area-inset-right, 0px));
    /* Rétablir le border-radius de la forme signature */
    border-radius: 50% 50% 50% 0;
  }
  .scroll-up svg {
    width: 18px;
    height: 18px;
  }
  /* Sur process.html en mobile : l'ancien décalage +72px (pour éviter le CTA
     Approche desktop fixed) n'a plus lieu d'être — ce CTA est masqué en mobile.
     On réaligne donc le scroll-up sur la MÊME hauteur que le burger flottant. */
  body.page-process .scroll-up {
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
  }
}
/* Même comportement quand la nav déborde au-dessus de 1024px (nav-collapsed) */
body.nav-collapsed .scroll-up {
  width: 52px;
  height: 52px;
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
  right: max(20px, env(safe-area-inset-right, 0px));
  border-radius: 50% 50% 50% 0;
}
body.nav-collapsed .scroll-up svg {
  width: 18px;
  height: 18px;
}
body.nav-collapsed.page-process .scroll-up {
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
}


/* --- Volet menu mobile (slide-up par-dessus le site) ---
   Refacto 2026-07-22 : la mise en forme du volet était enfermée dans
   `@media (max-width: 1024px)`, si bien que le mode `body.nav-collapsed`
   (prévu pour la bascule burger AU-DESSUS de 1024px) affichait le bouton
   burger sans jamais pouvoir afficher le volet. Les règles sont donc sorties
   du media query — seul le `display` reste conditionné, par les DEUX cas.
   Hors de ces cas le volet est `display: none`, ses enfants ne rendent rien. */
.mob-menu {
  /* Masqué en desktop tant que la nav horizontale tient */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  /* Le volet est sous le burger flottant (z:400) pour que le bouton reste cliquable */
  z-index: 300;
  background: rgba(10, 22, 38, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Padding-bottom généreux pour que les liens ne soient pas cachés sous le burger */
  padding: clamp(80px, 12vh, 120px) var(--gutter, 24px) calc(max(20px, env(safe-area-inset-bottom, 0px)) + 80px);
  gap: 0;
  /* État fermé : en-dehors du viewport (bas) */
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0.05, 0, 1);
  pointer-events: none;
  overflow: hidden;
}
/* Les deux seules situations où le volet existe : mobile, ou nav repliée. */
@media (max-width: 1024px) {
  .mob-menu { display: flex; }
}
body.nav-collapsed .mob-menu { display: flex; }

.mob-menu.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

/* Nav links */
.mob-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.mob-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  font-family: var(--ff-display, 'Hanken Grotesk', sans-serif);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Animation en cascade à l'ouverture */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease;
}
.mob-menu__link:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mob-menu__link--membres {
  color: var(--c-copper, #8E7547);
  border-bottom: none;
  margin-top: 16px;
}
.mob-menu__link:hover,
.mob-menu__link:focus-visible {
  color: var(--c-copper, #8E7547);
  outline: none;
}
.mob-menu__link[aria-current="page"] {
  color: var(--c-copper, #8E7547);
}

/* Animation cascade des liens au tap (stagger via nth-child) */
.mob-menu.is-open .mob-menu__link {
  opacity: 1;
  transform: translateY(0);
}
.mob-menu.is-open .mob-menu__link:nth-child(1) { transition-delay: 0.06s; }
.mob-menu.is-open .mob-menu__link:nth-child(2) { transition-delay: 0.10s; }
.mob-menu.is-open .mob-menu__link:nth-child(3) { transition-delay: 0.14s; }
.mob-menu.is-open .mob-menu__link:nth-child(4) { transition-delay: 0.18s; }
.mob-menu.is-open .mob-menu__link:nth-child(5) { transition-delay: 0.22s; }
.mob-menu.is-open .mob-menu__link:nth-child(6) { transition-delay: 0.26s; }
.mob-menu.is-open .mob-menu__link:nth-child(7) { transition-delay: 0.30s; }

/* Switch langue dans le volet */
.mob-menu__lang {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: clamp(24px, 4vh, 40px);
  font-family: var(--ff-mono, monospace);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s ease 0.34s;
}
.mob-menu.is-open .mob-menu__lang {
  opacity: 1;
}
.mob-menu__lang-link {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  padding: 8px 6px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mob-menu__lang-link[aria-current="page"] {
  color: #fff;
  font-weight: 700;
}
.mob-menu__lang-sep {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}

/* Logo en haut du volet */
.mob-menu__logo {
  position: absolute;
  top: clamp(24px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease 0.05s;
}
.mob-menu.is-open .mob-menu__logo {
  opacity: 1;
}
.mob-menu__logo img {
  height: clamp(36px, 5vh, 52px);
  width: auto;
  display: block;
}

/* ===== Footer responsif (< 1024px) ===== */
@media (max-width: 1024px) {
  .ftr__inner { flex-direction: column; align-items: center; gap: 24px; }
}

/* ============================================================
   ZONE DE FONDU DE FOND (bg-fade-zone) — home
   Enveloppe une suite contiguë de blocs (hero_home → mission_pictos →
   newalpha_split, cf. front/page.php) et porte un fond UNIQUE qui fond du
   bleu nuit (#0A1626) vers le bleu Master (#00394D). La variable --bg-fade
   est pilotée au scroll par scroll-engine.js, calée sur l'arrivée du bloc
   newalpha_split. Sans JS, fallback bleu nuit via la valeur par défaut.

   Les fonds solides des 3 blocs sont neutralisés UNIQUEMENT dans la zone
   (sélecteurs scopés) : hors zone, chaque bloc garde son fond solide propre
   — l'isolation des blocs (duplication sur une autre page) reste intacte.
   ============================================================ */
.bg-fade-zone {
  position: relative;
  background: var(--bg-fade, var(--c-bg-deep));
}
.bg-fade-zone .hero-wrapper,
.bg-fade-zone .mission-extras,
.bg-fade-zone .newalpha {
  background: transparent;
}