/* ============================================================
   HEADER — logo · navigation · compte, et son état de verre
   Relevé : composition desktop logo (gauche) / nav (centre) / compte (droite),
   hauteur RÉELLE 142 px desktop et 119 px mobile (c'est le logo à 160 px de
   large, ratio 567/414, qui impose la hauteur — le `min-height` déclaré à 80 px
   ne gagne jamais), padding 0.75rem 1.5rem, fond #111111, transparent sur les
   pages à héros (`position: absolute; z-index: 100`), collant avec révélation
   au défilement vers le haut. Navigation : espacement 24 px, liens #f5f8f9,
   survol accent, item actif teal foncé souligné.

   AMÉLIORATION du gate 1 : l'état de verre au défilement (`.is-scrolled`).
   Le collant actuel n'a aucune ombre ni aucun changement d'état.

   Source : da-releve-rapport.md § 4.2 ; complément § 1 (header plein sur la
   boutique), § 6.2 (héros de l'espace adhérent).

   ------------------------------------------------------------
   AMENDEMENTS DU BLOC 2 (É4, 05/08) — tous motivés par un CONSTAT, jamais par
   un goût. Le registre reste la source ; le child theme le transporte tel quel.

   1. `position: sticky` au lieu de `relative` + bascule en `fixed`.
      MOTIF : le header PLEIN est dans le flux ; passer en `fixed` au défilement
      le retire du flux et fait SAUTER la page de 142 px. `sticky` donne le même
      rendu collant sans le saut. La variante transparente, elle, est déjà hors
      flux : elle garde la bascule `absolute → fixed` du relevé.
   2. `.is-hidden` — la révélation au défilement vers le haut, relevée sur le
      site (`data-reveal-scroll-up="true"`) et jamais écrite jusqu'ici.
   3. Le SOUS-MENU desktop (`.lcdi-subnav`) et son déclencheur
      (`.lcdi-nav__toggle`) : le relevé les décrit, le registre ne les portait
      pas. Cloisonnés dans `@media (min-width: 1025px)` ET sous
      `.lcdi-header__nav-desktop` : aucune de leurs règles ne peut atteindre le
      tiroir mobile.
   4. Le TIROIR mobile passe en PLEIN ÉCRAN opaque (décision du bloc 2). Il ne
      porte AUCUN `backdrop-filter` : imbriqué dans celui du header en verre, un
      second filtre casse le compositing (le panneau devient laiteux ou noir
      selon la couche). Fond = `--surface-structure`, la couleur de chrome de la
      charte, opaque, donc lisible quoi qu'il y ait derrière.
   5. Les éléments interactifs `<button>` (burger, bascule de sous-menu)
      GRAVENT fond, couleur, rayon et ombre à leurs QUATRE états : le parent
      Kadence style `button` en (0,0,1) et `button:hover/:focus/:active` en
      (0,1,1) avec un fond, une couleur ET une ombre portée. Nos classes pèsent
      (0,1,0) et (0,2,0) : elles passent devant sans jamais `!important`.
   ============================================================ */

/* --- Lien d'évitement -------------------------------------------------
   Il ouvrait la page chez le parent (`kadence_do_skip_to_content_link`) ; le
   chrome du système est parent-agnostique, il porte donc le sien. Hors écran
   tant qu'il n'a pas le focus, entièrement visible dès qu'il l'a. */
.lcdi-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--surface-raised);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--type-body);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-m) 0;
  text-decoration: none;
}
.lcdi-skip:focus { left: 0; box-shadow: var(--focus-ring); }
/* Ses états sont GRAVÉS : le parent repeint `a:hover, a:focus, a:active` en
   (0,1,1) et le lien d'évitement y perdait sa couleur (mesuré au computed le
   05/08 : #4f8796 au survol au lieu de l'encre). `.lcdi-skip:hover` pèse
   (0,2,0) : il passe devant. */
.lcdi-skip:hover,
.lcdi-skip:active { color: var(--text-strong); background: var(--surface-raised); }

.lcdi-header {
  --header-h: 142px;
  position: sticky;          /* AMENDEMENT 1 : collant sans saut de page */
  top: 0;
  z-index: 100;
  background: var(--surface-structure);          /* #111111 */
  color: var(--text-on-structure);
  transition:
    background-color var(--t-soft) var(--ease-brand),
    backdrop-filter  var(--t-soft) var(--ease-brand),
    box-shadow       var(--t-soft) var(--ease-brand),
    border-color     var(--t-soft) var(--ease-brand),
    transform        var(--t-soft) var(--ease-brand);
  border-bottom: 1px solid transparent;
}

.lcdi-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--page-edge);    /* 0.75rem / 1.5rem, relevé */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

.lcdi-header__logo { display: flex; align-items: center; }
.lcdi-header__logo a { display: block; }
.lcdi-header__logo img,
.lcdi-header__logo svg { width: 160px; height: auto; display: block; }   /* relevé : rendu 160 × 116,8 */

.lcdi-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

/* --- Variante TRANSPARENTE (pages à héros) -----------------------------
   Le header se pose SUR le héros, il ne le pousse pas. Le contenu du héros
   compense la hauteur par son propre padding (voir hero.css).
   Pages concernées au relevé : /, /adherer/, /contact/, /caritatif/,
   /partenaires/, /actualites/, /agenda-evenements/, /trombinoscope-adherents/. */
.lcdi-header--transparent {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
}

/* --- État de VERRE au défilement (AMÉLIORATION gate 1) ------------------
   Motivé : sur un héros vidéo, un bandeau opaque coupe la scène en deux ;
   le verre garde la continuité de l'image tout en rendant la navigation
   lisible. Le repli sans `backdrop-filter` est un aplat quasi opaque : la
   lisibilité ne dépend jamais du flou. */
.lcdi-header--transparent.is-scrolled,
.lcdi-header.is-scrolled {
  background: var(--veil-night-solid);
  border-bottom-color: var(--border-accent-night);
  box-shadow: var(--shadow-bar);
}
/* La transparente est hors flux : elle DOIT passer en fixe pour rester visible.
   La pleine reste `sticky` (amendement 1) : même rendu, aucun saut. */
.lcdi-header--transparent.is-scrolled {
  position: fixed;
  inset: 0 0 auto 0;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .lcdi-header.is-scrolled {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-bottom-color: var(--border-glass);
  }
}
/* Rétrécissement au collant (relevé : `header_sticky_shrink = true`) */
.lcdi-header.is-scrolled .lcdi-header__inner { padding-block: var(--space-2); }
.lcdi-header.is-scrolled .lcdi-header__logo img { width: 120px; }

/* ============================================================
   LA BARRE D'ADMINISTRATION DE WORDPRESS — retouche 8 du bloc 3c (06/08)
   CONSTAT MESURÉ, session d'administrateur réelle sur le clone (sonde
   `probe-3c-adminbar.js`) : la barre recouvrait les 32 premiers pixels du
   header en desktop, et 46 sous 782 px.

   POURQUOI, exactement — et ce n'est pas la même cause dans les deux états :
   WordPress pousse la PAGE en posant `html { margin-top: 32px !important }`
   (mesuré), pas le header. Or le header de ce site est HORS FLUX :
     · sur une page à héros, il est `position: absolute` et — mesuré — n'a
       AUCUN ancêtre positionné : son bloc conteneur est donc le bloc conteneur
       initial, ancré à l'origine du document, AU-DESSUS de la marge du <html>.
       Résultat : header à 0 pendant que le héros commence à 32.
     · au défilement il passe en `position: fixed`, donc calé sur la fenêtre,
       où la barre est elle aussi fixée (z-index 99999 : elle gagne toujours).
   Les deux se règlent par la même ligne : le header prend pour origine le bas
   de la barre. La `sticky` du header plein le lit aussi — elle colle 32 px plus
   bas, sous la barre.

   POIDS : `body.admin-bar .lcdi-header` pèse (0,2,1). Il passe devant le
   `inset: 0 0 auto 0` de la variante transparente collée (0,2,0) sans avoir
   besoin d'un `!important` ni d'un placement particulier dans le fichier.

   VISITEUR DÉCONNECTÉ : rien ne change. La classe `admin-bar` n'existe pas sur
   son <body>, et WordPress ne pose pas la marge sur son <html>.
   ============================================================ */
body.admin-bar .lcdi-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .lcdi-header { top: 46px; }
}

/* AMENDEMENT 2 — révélation au défilement vers le haut (relevé) : le header
   s'efface quand on descend, revient dès qu'on remonte. Jamais quand le tiroir
   mobile est ouvert (le burger doit rester atteignable pour refermer). */
.lcdi-header.is-hidden { transform: translateY(-100%); }

/* --- Navigation -------------------------------------------------------- */
.lcdi-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);            /* 24 px, relevé */
  list-style: none;
  margin: 0;                      /* le parent pose `ul { margin: 0 0 1.5em 1.5em }` en (0,0,1) */
  padding: 0;
}
.lcdi-nav__item { margin: 0; padding: 0; }
.lcdi-nav__link {
  display: inline-block;
  padding: .675rem .75rem;        /* 10,8 / 12 px, relevé */
  font-family: var(--font-body);
  font-size: var(--type-h6);      /* 18 px, relevé */
  font-weight: var(--weight-strong);
  color: var(--text-on-structure);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-quick) var(--ease-brand), border-color var(--t-quick) var(--ease-brand);
}
/* L'ÉTAT DE LA NAVIGATION EST PORTÉ PAR LE SOULIGNEMENT, PAS PAR LA COULEUR
   DU TEXTE — et c'est une conclusion de mesure, découverte à l'auto-critique
   du 05/08 en instruisant l'état de verre :
     texte clair sur verre au-dessus de contenu clair ..... 8,39:1  (conforme)
     teal        sur ce même verre ........................ 3,12:1  (insuffisant)
     teal foncé  sur ce même verre ........................ 2,23:1  (illisible)
   Sur le bitume opaque, le teal passait (6,58:1) ; sur le verre du header
   scrollé au-dessus d'une section claire, il tombe. Le relevé posait la couleur
   sur le texte parce que le header d'origine n'avait aucun état scrollé.
   Le texte garde donc sa couleur de chrome dans tous les états ; l'accent vit
   dans le filet bas — ce qui est exactement le style « underline » relevé, et
   ce qui respecte la loi « un état ne se dit jamais par la seule couleur ». */
.lcdi-nav__link:hover,
.lcdi-nav__link:focus {
  color: var(--link-hover);              /* le givre : l'item s'éclaire, il ne se teinte pas */
  border-bottom-color: var(--accent);
}
.lcdi-nav__link[aria-current="page"],
.lcdi-nav__link.is-active {
  color: var(--text-on-structure);
  border-bottom-color: var(--accent);
  font-weight: var(--weight-title);      /* second signal, non chromatique */
}
.lcdi-nav__link:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); }

/* --- Bascule de sous-menu (AMENDEMENT 3) --------------------------------
   C'est un VRAI déclencheur : un `<button>` qui porte `aria-expanded`, pas un
   lien détourné par le JS. Le lien parent, lui, reste un lien et navigue —
   comme sur le site relevé, où « Événements » ouvre bien /agenda-evenements/.
   Les quatre états sont gravés (fond ET couleur ET ombre) : le parent Kadence
   repeint `button:hover/:focus/:active` en (0,1,1) avec une ombre portée. */
.lcdi-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-on-structure);
  border: 0;
  border-radius: var(--radius-s);
  padding: var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-brand), transform var(--t-quick) var(--ease-brand);
}
.lcdi-nav__toggle:hover,
.lcdi-nav__toggle:focus,
.lcdi-nav__toggle:active {
  background: transparent;
  color: var(--link-hover);
  box-shadow: none;
}
.lcdi-nav__toggle:focus-visible { box-shadow: var(--focus-ring-night); }
.lcdi-nav__toggle svg { width: 1.25em; height: 1.25em; fill: currentColor; display: block; }
.lcdi-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --- Bouton compte -----------------------------------------------------
   Il consomme la VOIX CTA (les tokens `--cta-*`), il ne porte PAS la classe
   `.lcdi-btn--cta`, et c'est un CONSTAT du 05/08, pas une préférence : la
   neutralisation du parent verrouille `html:root .lcdi-btn--cta` en (0,2,1) —
   fond et couleur, aux quatre états — pour empêcher Kadence de reprendre nos
   boutons. Une variante de composant écrite en (0,1,0) ne peut alors plus rien
   changer : le bouton compte restait un aplat teal en mobile, là où le relevé
   ne montre qu'une icône nue. Mesuré au navigateur avant correction.
   Le bouton du TIROIR, lui, reste un `.lcdi-btn--cta` : c'est un bouton
   standard, l'armure y est bienvenue.
   Relevé reproduit : fond accent, texte clair, rayon 8, padding 0.875/1.25rem,
   icône 1,2 em, libellé « Mon compte ». */
.lcdi-header__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .875rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-flat);
  white-space: nowrap;
  text-decoration: none;
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 2px solid var(--cta-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-cta);
  transition:
    background-color var(--t-soft) var(--ease-brand),
    border-color     var(--t-soft) var(--ease-brand),
    color            var(--t-soft) var(--ease-brand),
    transform        var(--t-soft) var(--ease-brand),
    box-shadow       var(--t-soft) var(--ease-brand);
}
.lcdi-header__account:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-text);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(var(--lift-btn));
}
.lcdi-header__account:focus,
.lcdi-header__account:active {
  color: var(--cta-text);
  transform: translateY(0);
}
.lcdi-header__account:focus-visible { box-shadow: var(--focus-ring), var(--shadow-cta); }
.lcdi-header__account svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
}

/* --- Déclencheur de menu mobile ---------------------------------------- */
.lcdi-header__burger {
  display: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  padding: var(--space-2);
  color: var(--text-on-night);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-brand);
}
.lcdi-header__burger svg { width: 2em; height: 2em; fill: currentColor; display: block; }
.lcdi-header__burger:hover,
.lcdi-header__burger:focus,
.lcdi-header__burger:active {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}
.lcdi-header__burger:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); }

/* ============================================================
   SOUS-MENU DESKTOP (AMENDEMENT 3) — CLOISONNÉ
   Tout ce bloc est enfermé dans `@media (min-width: 1025px)` ET sous
   `.lcdi-header__nav-desktop` : le tiroir mobile ne peut rien en hériter.
   Relevé du panneau : fond blanc, texte #444444, ombre légère, entrée par
   translation de 10 px + fondu en 0,2 s. Le système remplace l'ombre relevée
   (celle du CTA) par `--shadow-soft`, dont le rôle EST « objets posés :
   panneaux, sous-menus ».

   CONTEXTE : le panneau porte `data-theme="jour"` DANS LE MARKUP, et c'est
   obligatoire, pas décoratif. Le header est un monde `nuit` ; sans reprise de
   contexte, `--surface-raised` y vaut `rgba(255,255,255,.06)` — le panneau
   rendait un voile translucide au lieu du blanc du site (mesuré au navigateur
   le 05/08 avant correction). C'est exactement le cas d'école écrit dans
   `tokens.css` § CONTEXTE JOUR : « une carte blanche posée dans un héros
   sombre ». L'accordéon du TIROIR, lui, reste en nuit : même composant, deux
   mondes, chacun déclaré.
   ============================================================ */
@media (min-width: 1025px) {
  .lcdi-header__nav-desktop .lcdi-nav__item--has-children { position: relative; }
  .lcdi-header__nav-desktop .lcdi-nav__item--has-children > .lcdi-nav__link { padding-right: var(--space-1); }

  .lcdi-header__nav-desktop .lcdi-subnav {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--surface-raised);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity    var(--t-quick) var(--ease-brand),
      transform  var(--t-quick) var(--ease-brand),
      visibility var(--t-quick) var(--ease-brand);
  }
  .lcdi-header__nav-desktop .lcdi-nav__item--has-children:hover > .lcdi-subnav,
  .lcdi-header__nav-desktop .lcdi-nav__toggle[aria-expanded="true"] ~ .lcdi-subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__item { display: block; }
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-body);
    border-bottom: 0;
    font-weight: var(--weight-body);
    white-space: nowrap;
  }
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link:hover,
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link:focus {
    color: var(--accent-ink);
    background: var(--surface-warm);
  }
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link[aria-current="page"],
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link.is-active {
    color: var(--accent-ink);
    font-weight: var(--weight-strong);
  }
  .lcdi-header__nav-desktop .lcdi-subnav .lcdi-nav__link:focus-visible { box-shadow: var(--focus-ring); }
}

/* ============================================================
   TIROIR DE NAVIGATION MOBILE (AMENDEMENT 4) — PLEIN ÉCRAN, OPAQUE
   Aucune règle du sous-menu desktop n'arrive ici : elles sont toutes sous
   `@media (min-width: 1025px)` + `.lcdi-header__nav-desktop`.
   AUCUN `backdrop-filter` : il serait imbriqué dans celui du header en verre,
   et deux filtres emboîtés cassent le compositing.
   ============================================================ */
.lcdi-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;              /* au-dessus du header (100) : il le recouvre */
  display: none;
}
.lcdi-drawer.is-open { display: block; }

/* Verrou de défilement du fond pendant que le tiroir est ouvert. Posé sur
   `<html>` ET `<body>` : selon la page, l'un ou l'autre porte le défilement. */
html.lcdi-no-scroll,
html.lcdi-no-scroll body { overflow: hidden; }

/* MARGE HAUTE DU PANNEAU — retouche 15 du bloc 3c (06/08, verdict de gate).
   Constat de Julien sur son iPhone, menu ouvert : le logo monte jusque sous
   l'encoche et l'horloge. Mesuré chez nous à 390 : **16 px** seulement entre le
   haut de l'écran et le haut du logo — le panneau est en `position: fixed` et
   plein écran, il n'a donc rien au-dessus de lui pour le retenir.

   DEUX GESTES, et le second ne coûte rien aujourd'hui :
   1. la marge haute passe à `--space-7` (48 px), par un levier nommé
      (`--drawer-top`) pour que le gate puisse la doser d'une ligne ;
   2. la ZONE SÛRE iOS s'ajoute par-dessus, `env(safe-area-inset-top, 0px)`.

   POURQUOI `viewport-fit=cover` N'EST PAS POSÉ — décision signalée, avec sa
   mesure. `env(safe-area-inset-top)` ne rend autre chose que 0 QUE si la balise
   viewport porte `viewport-fit=cover` ; vérifié sur le rendu réel, notre page
   déclare `width=device-width, initial-scale=1` et `env()` mesure bien **0px**.
   Le poser étendrait TOUTE la page sous l'encoche et sous l'indicateur
   d'accueil : il faudrait alors reprendre le header collant, le héros plein
   écran, le pied et chaque bande à fond perdu. C'est une décision de page
   entière, avec son propre gate — pas le périmètre d'une marge de tiroir.
   Et sans lui, iOS met déjà la page DANS la zone sûre : ce que Julien voit est
   un manque de marge, pas un débordement sous l'encoche.
   L'appel à `env()` est donc écrit MAINTENANT, avec son repli à 0 : il ne
   change rien aujourd'hui et deviendra juste tout seul le jour où la page
   passera en `cover` (application installée, plein écran). */
.lcdi-drawer__panel {
  background: var(--surface-structure);   /* le chrome de la charte, OPAQUE */
  color: var(--text-on-structure);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--drawer-top, var(--space-7)) + env(safe-area-inset-top, 0px));
  padding-inline: var(--page-edge-mobile);
  padding-bottom: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lcdi-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
}
.lcdi-drawer__logo img { width: 140px; height: auto; display: block; }

.lcdi-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-on-night);
  border: 0;
  border-radius: var(--radius-s);
  padding: var(--space-2);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-brand);
}
.lcdi-drawer__close:hover,
.lcdi-drawer__close:focus,
.lcdi-drawer__close:active {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}
.lcdi-drawer__close:focus-visible { box-shadow: var(--focus-ring-night); }
.lcdi-drawer__close svg { width: 1.75em; height: 1.75em; fill: currentColor; display: block; }

/* Les liens du tiroir sont AÉRÉS : cible tactile confortable, filet de
   séparation discret, pas de colonne serrée. */
.lcdi-drawer .lcdi-nav {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: var(--space-5);
}
.lcdi-drawer .lcdi-nav__item { border-bottom: 1px solid var(--border-night); }
.lcdi-drawer .lcdi-nav__item--has-children {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.lcdi-drawer .lcdi-nav__link {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-size: var(--type-h5);            /* 20 px : cible tactile lisible */
  color: var(--text-on-structure);
  border-bottom: 0;
}
.lcdi-drawer .lcdi-nav__link:hover,
.lcdi-drawer .lcdi-nav__link:focus { color: var(--link-hover); border-bottom: 0; }
.lcdi-drawer .lcdi-nav__link[aria-current="page"],
.lcdi-drawer .lcdi-nav__link.is-active {
  color: var(--accent);
  font-weight: var(--weight-title);
  border-bottom: 0;
}
.lcdi-drawer .lcdi-nav__toggle {
  padding: var(--space-4) var(--space-2);
  margin: 0;
  color: var(--text-on-structure);
}
/* L'accordéon : le sous-menu est replié tant que sa bascule dit « fermé ». */
.lcdi-drawer .lcdi-subnav {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3) var(--space-5);
  display: none;
}
.lcdi-drawer .lcdi-nav__toggle[aria-expanded="true"] ~ .lcdi-subnav { display: block; }
.lcdi-drawer .lcdi-subnav .lcdi-nav__item { border-bottom: 0; }
.lcdi-drawer .lcdi-subnav .lcdi-nav__link {
  font-size: var(--type-body);
  padding: var(--space-3) var(--space-2);
  color: var(--text-soft);
}
.lcdi-drawer .lcdi-subnav .lcdi-nav__link:hover,
.lcdi-drawer .lcdi-subnav .lcdi-nav__link:focus { color: var(--text-on-structure); }

/* Le CTA du tiroir : pleine largeur, poussé en BAS du panneau (`margin-top:
   auto`), pour que le pouce le trouve sans remonter. */
.lcdi-drawer__cta {
  margin-top: auto;
  padding-top: var(--space-6);
}

@media (max-width: 1024px) {
  .lcdi-header { --header-h: 119px; }
  .lcdi-header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-3); padding: var(--space-2) var(--page-edge-mobile); }
  .lcdi-header__logo img, .lcdi-header__logo svg { width: 140px; }   /* relevé mobile */
  .lcdi-header__nav-desktop { display: none; }
  .lcdi-header__burger { display: inline-flex; }

  /* Le bouton compte perd son libellé et son aplat : le relevé mobile ne montre
     qu'une icône dans le chrome (le CTA plein revient dans le tiroir). */
  .lcdi-header__account,
  .lcdi-header__account:hover,
  .lcdi-header__account:focus,
  .lcdi-header__account:active {
    background: transparent;
    border-color: transparent;
    color: var(--text-on-night);
    box-shadow: none;
    transform: none;
    padding: var(--space-2);
  }
  .lcdi-header__account:hover { color: var(--accent); }
  .lcdi-header__account svg { width: 1.75em; height: 1.75em; }
  .lcdi-header__account-label { display: none; }
}

@media (min-width: 1025px) {
  .lcdi-drawer { display: none; }        /* fermeture au passage desktop, en CSS aussi */
}