/* ==========================================================================
   ELISTIA — Design tokens

   ▸ POUR CHANGER UNE COULEUR : modifie la valeur ici, elle s'applique
     automatiquement à TOUT le site (boutons, titres, icônes, pastilles).
   ▸ Le vert foncé #0B4228 est prélevé au pixel près sur la maquette de référence.
   ▸ Ces valeurs sont celles du MODE CLAIR. Le mode sombre est défini juste
     en dessous, dans le bloc [data-theme="dark"] — modifie-le séparément
     si tu veux ajuster les couleurs du mode sombre.
   ========================================================================== */
:root {
  --green-900: #072E1C;   /* survol des boutons — vert le plus sombre       */
  --green-800: #0B4228;   /* VERT FONCÉ PRINCIPAL — boutons, pastilles      */
  --green-700: #0E5231;   /* titres verts ("Résultats garantis.")           */
  --green-500: #2E8B52;   /* vert moyen — accents                          */
  --green-300: #7FD19B;   /* vert clair                                     */
  --green-100: #E7F1EA;   /* fonds très clairs                              */
  --gold-500: #B08D3F;
  --ink-900: #14171A;     /* texte principal                                */
  --ink-700: #3C4248;
  --ink-500: #6B7280;     /* texte secondaire gris                          */
  --ink-300: #9CA3AF;
  --neo-grey: rgba(0, 0, 0, 0.72);  /* couleur du hamburger du site de référence (barres, croix, "Accès agences") */
  --line-200: #E7E9E6;    /* filets et bordures                             */
  --line-100: #F1F2EF;
  --paper: #FFFFFF;
  --paper-tint: #F8F8F5;  /* fond des sections claires                      */
  --shadow-card: 0 1px 2px rgba(20,23,26,0.04), 0 8px 24px rgba(20,23,26,0.06);

  /* Bannière "Notre engagement" — fond gris clair, titre vert foncé
     (même vert que "Résultats garantis."), identique dans les deux thèmes. */
  --engagement-bg: #F6F8F5;
  --engagement-heading: var(--green-700);
  --engagement-text: #5C6B60;

  /* Bande "Nos prestations" — photo de fond (images/header-layout.webp)
     voilée de vert sombre pour garder le texte blanc lisible.
     Pour changer la photo : remplace le fichier (même nom) ou le chemin.
     Pour un voile plus léger/plus fort : baisse/augmente le dernier
     chiffre (opacité) de --services-veil. */
  --services-image: url("../images/header-layout.webp");
  --services-veil: rgba(7, 46, 28, 0.55);

  /* Voile du triptyque sous « Nos prestations » : dégradé vert sombre,
     plus dense en bas pour garder le nom blanc lisible sur la photo. */
  --triptyque-veil: linear-gradient(to top, rgba(7, 46, 28, .45) 0%, rgba(7, 46, 28, .15) 48%, rgba(7, 46, 28, .01) 100%);

  /* Hero — image de fond + voile de lisibilité côté gauche.
     Pour changer l'image du hero : remplace le fichier images/hero-fond.jpg
     (garde le même nom), ou modifie le chemin ci-dessous. */
  --hero-image: url("../images/hero-fond.jpg");
  --hero-veil: rgba(247, 249, 245, 0.92);

  /* Toujours fixe, quel que soit le thème (clair OU sombre) : */
  --chip-dark-bg: #14171A;        /* fond du bandeau cookies — toujours sombre, sur fond clair ou sombre */
  --chip-dark-text: #FFFFFF;
  --sun-hover: #F59E0B;           /* soleil orangé au survol de la bascule jour/nuit (mode clair) */
  /* Menu d'en-tête — deux verts distincts, identiques en clair et en sombre : */
  --menu-bar: #30803B;            /* barre colorée en haut des panneaux de sous-menu */
  --menu-hover: #50956e;          /* survol des libellés : onglets ET sous-onglets */
  /* Texte des sous-onglets AU REPOS (titre et description), sur grand écran
     comme dans le panneau mobile. N'existe que pour le menu d'en-tête : le
     reste du site garde --ink-900 et --ink-500.
     ⚠️ Ce jeton est réécrit en mode sombre — voir [data-theme="dark"]. */
  --submenu-label: var(--green-800);
  /* Pastille derrière l'icône d'un sous-onglet : gris à peine perceptible au
     repos, vert très transparent quand la souris est sur la ligne. */
  --submenu-icon-bg: #F4F5F2;
  --submenu-icon-bg-hover: rgba(11, 66, 40, 0.12);

  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --container: 1200px;
}

/* ==========================================================================
   MODE SOMBRE
   Ce bloc redéfinit uniquement les couleurs qui doivent changer. Tout le
   reste du CSS utilise déjà var(--ink-900), var(--paper), etc. — donc
   l'ensemble du site s'adapte automatiquement, sans rien dupliquer ailleurs.
   ========================================================================== */
[data-theme="dark"] {
  --paper: #15181B;
  --paper-tint: #1C2023;
  --ink-900: #F3F4F2;
  --ink-700: #C9CDD1;
  --ink-500: #9AA1A8;
  --ink-300: #6E7479;
  --neo-grey: rgba(255, 255, 255, 0.72);  /* équivalent clair (barres lisibles sur fond sombre) */
  --line-200: #2B3033;
  --line-100: #212528;
  --green-100: #113523;      /* équivalent sombre du vert clair (survols, fonds teintés) */
  --green-700: #4FB980;      /* vert des TITRES éclairci : le #0E5231 du mode clair
                                ne donnait qu'un contraste de 1,9 pour 1 sur fond
                                sombre (minimum lisible : 4,5). Ici : 7 pour 1. */
  --green-800: #1C6B44;      /* légèrement éclairci pour rester lisible sur fond sombre */
  /* Texte des sous-onglets : le --green-800 du mode clair (#0B4228), et même
     sa version éclaircie ci-dessus, ne donnent que 2,8 pour 1 sur le fond du
     panneau (#15181B) — sous le minimum lisible de 4,5. On reprend donc le
     vert des titres, déjà éclairci pour le fond sombre : 7,3 pour 1.
     Même raisonnement qu'au-dessus pour --green-700. */
  --submenu-label: var(--green-700);
  --green-900: #123D26;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  /* Équivalents sombres : un gris à peine plus clair que le fond du panneau,
     puis un vert transparent construit sur le vert éclairci du mode nuit. */
  --submenu-icon-bg: #1F2427;
  --submenu-icon-bg-hover: rgba(79, 185, 128, 0.18);

  /* Bannière "Notre engagement" : reste gris clair même en mode sombre,
     fidèle à la maquette d'origine. */
  --engagement-bg: #F6F8F5;
  /* Vert foncé écrit en clair, et NON var(--green-700) : cette bannière garde
     un fond gris clair même la nuit, donc son titre doit garder le vert foncé
     du mode clair. Le jeton --green-700, lui, s'éclaircit juste au-dessus pour
     les titres posés sur fond sombre. */
  --engagement-heading: #0E5231;
  --engagement-text: #5C6B60;
  /* Voile de la bande "Nos prestations" un peu plus sombre en mode nuit,
     comme celui du hero. */
  --services-veil: rgba(6, 32, 20, 0.68);
  /* Voile du triptyque un peu plus sombre en mode nuit, même famille. */
  --triptyque-veil: linear-gradient(to top, rgba(6, 32, 20, .7) 0%, rgba(6, 32, 20, .32) 48%, rgba(6, 32, 20, .04) 100%);
  /* Voile du hero plus sombre en mode nuit pour garder le texte lisible. */
  --hero-veil: rgba(21, 24, 27, 0.86);
}

/* Voile du hero sur petits écrans : beaucoup plus discret, pour que l'image
   reste bien visible derrière le texte (le texte sombre est déjà lisible sur
   l'image claire).
   Ces deux lignes vivaient dans css/home.css ; elles sont remontées ici pour
   que TOUTES les couleurs du site restent déclarées au même endroit. Aucun
   effet ailleurs : --hero-veil n'est utilisé que par le hero de l'accueil.
   Doit rester APRÈS les deux blocs ci-dessus pour les remplacer. */
@media (max-width: 900px) {
  :root { --hero-veil: rgba(247, 249, 245, 0.7); }
  [data-theme="dark"] { --hero-veil: rgba(21, 24, 27, 0.85); }
}

html {
  background: var(--paper);
  transition: background-color .25s ease;
}

/* ==========================================================================
   Icônes — fonctionnement

   Toutes les petites icônes du site sont des SVG écrits DIRECTEMENT dans
   le HTML de chaque page (pas des fichiers externes chargés séparément).
   Elles utilisent stroke="currentColor" : leur couleur suit automatiquement
   la couleur du texte de leur conteneur (var(--ink-900), var(--green-800)...),
   donc elles s'adaptent déjà toutes seules entre mode clair et mode sombre,
   sans réglage spécial.
   Voir le README pour savoir comment modifier le dessin d'une icône.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink-900); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Visible keyboard focus everywhere — accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--line-100);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Page d'accueil uniquement (classe ajoutée par includes/header.php) :
   l'en-tête est transparent et chevauche le hero (position: fixed le sort
   du flux, le hero commence tout en haut de la fenêtre). Transparent au
   repos tout en haut de la page, il devient opaque au survol OU dès qu'on
   défile (.is-scrolled ajouté par js/site.js), et redevient transparent
   une fois revenu tout en haut. */
.site-header--hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header--hero:hover,
.site-header--hero.is-scrolled {
  background: var(--paper);
  border-bottom-color: var(--line-100);
}
/* MODE SOMBRE : pas de transparence. Sur fond de nuit, l'image du hero est
   déjà assombrie par son voile, et un en-tête transparent par-dessus rendait
   les libellés difficiles à lire. Il reste donc opaque en permanence, sans
   attendre le défilement.
   Cette règle ne concerne QUE l'état de repos : la transparence pilotée par
   :has(.nav.nav--open), qui laisse apparaître la barre du panneau pendant
   l'ouverture d'un menu, a une spécificité plus forte et garde la main. */
[data-theme="dark"] .site-header--hero {
  background: var(--paper);
  border-bottom-color: var(--line-100);
}
.site-header__bar {
  /* Repère de position du cadre partagé des sous-menus (.nav__dropdown-bg,
     plus bas) : c'est par rapport à cette barre que le script le place. */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo | onglets | actions */
  align-items: center;
  gap: 20px;
  /* Le retrait GAUCHE suit le bord du contenu des pages : le logo de
     l'en-tête tombe ainsi exactement sous celui du pied de page, qui vit
     dans un .container (1200px centré, 32px de retrait interne). La formule
     reproduit ce calcul ; le max() fait qu'en dessous de ~1264px de fenêtre,
     là où le conteneur touche déjà les 32px, le logo ne bouge plus.
     Le retrait DROIT reste à 32px : l'en-tête a besoin d'environ 1180px pour
     son contenu, il ne tiendrait pas dans les 1136px utiles du conteneur.
     Les onglets restent centrés dans la place qui reste. */
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: max(32px, calc((100% - var(--container)) / 2 + 32px));
  padding-right: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;       /* collé au bord gauche */
  flex: none;
  width: max-content;        /* le logo ne se compresse jamais quand la fenêtre rétrécit */
}
/* NB : pas de décalage vers la droite sur le logo de l'en-tête. Une version
   précédente le poussait vers la droite sur les grands écrans, mais le
   contenu de l'en-tête (~1190px : logo + menu + boutons) est incompressible :
   en dessous de ~1270px de fenêtre il n'y avait aucune place et le décalage
   valait 0, si bien que le logo changeait de position selon l'écran du
   visiteur. Il reste donc collé au bord gauche partout — symétrique aux
   boutons de droite, et identique au logo du pied de page. */
.logo img {
  height: 34px;              /* légèrement réduit (était 40px) */
  width: auto;               /* le ratio d'origine est toujours respecté */
  display: block;
  flex: none;                /* le PNG ne s'écrase pas dans le flex */
}
/* Deux versions du logo : la claire par défaut, la sombre en mode nuit */
.logo .logo-dark { display: none; }
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark { display: block; }

.nav {
  justify-self: center;      /* onglets centrés dans la colonne du milieu */
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}
/* En-tête et pied du panneau mobile (logo + croix, bouton devis) :
   visibles uniquement dans le menu ouvert sur mobile (media query plus bas). */
.nav__mobile-head { display: none; }
.nav__panel-foot { display: none; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--ink-700);
  padding: 8px 2px;
  white-space: nowrap;          /* "À propos" reste toujours sur une seule ligne */
  transition: color .2s linear;
}
/* Survol : le libellé change de couleur, et rien d'autre. Pas de barre de
   soulignage sous les onglets, pas de fond — l'onglet ne bouge donc jamais
   d'un pixel au passage de la souris. */
.nav__link:hover,
.nav__item:hover > .nav__link,
.nav__item:has(:focus-visible) > .nav__link {
  color: var(--menu-hover);
}
/* Onglet de la page courante : signalé par la COULEUR SEULE, la même que
   celle du survol. Ni barre sous le libellé, ni passage en gras : un texte
   qui s'épaissit s'élargit aussi, ce qui décalait les onglets voisins d'une
   page à l'autre. La largeur du menu est donc désormais identique partout. */
.nav__link[aria-current="page"],
.nav__item:has(> .nav__link[aria-current="page"]) > .nav__link {
  color: var(--menu-hover);
}
.nav__link svg { width: 14px; height: 14px; opacity: .6; }
.nav__link:hover svg,
.nav__item:hover > .nav__link svg { opacity: 1; }

.nav__item { position: relative; }
/* Bouton de dépliage des sous-menus : propre au panneau mobile,
   activé dans sa requête média. Ailleurs, c'est le survol qui ouvre. */
.nav__expand { display: none; }
/* ──────────────────────────────────────────────────────────────────────
   SOUS-MENUS DE L'EN-TÊTE
   Panneau rectangulaire posé sous l'onglet, sans coins arrondis, tenu par
   une barre verte de 2px en haut et une ombre portée. Chaque ligne porte
   un picto, un titre et une courte description.
   L'ouverture est un FONDU PUR sur 300 ms : l'opacité passe de 0 à 1 et
   rien ne bouge — pas de glissement, pas d'agrandissement. C'est
   volontaire : un panneau qui se déplace pendant qu'on vise un lien fait
   rater la cible.
   `visibility` bascule sans transition à l'ouverture (0s 0s) mais attend
   la fin du fondu à la fermeture (0s .3s) : sans ça le panneau
   disparaîtrait d'un coup au lieu de s'effacer.
   ────────────────────────────────────────────────────────────────────── */
.nav__dropdown {
  position: absolute;
  /* Le panneau descend jusqu'au BAS de l'en-tête, pas seulement sous le
     libellé : il donne ainsi l'impression d'être suspendu à la barre.
     Les 15px correspondent au rembourrage bas de .site-header__bar (14px)
     plus le filet de bordure. Le pont de survol ::before couvre cet écart
     pour que la souris puisse descendre sans fermer le panneau. */
  top: calc(100% + 15px);
  left: -10px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper);
  border: none;
  border-top: 2px solid var(--menu-bar);      /* barre verte en haut du panneau */
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px;
  box-shadow: 0 13px 25px -12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s .3s;
  z-index: 50;
}
/* Pont invisible entre l'onglet et le panneau : le survol reste actif
   pendant que la souris descend vers les liens (voir --header-gap plus bas,
   qui décale le panneau jusqu'au bas de l'en-tête). */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 18px;
}
/* Le panneau s'ouvre au survol, ET quand un lien qu'il contient reçoit le
   focus AU CLAVIER — pour que la navigation à la touche Tab atteigne les
   sous-onglets.
   On utilise :has(:focus-visible) et NON :focus-within. La différence est
   invisible au clavier mais décisive à la souris : cliquer sur un lien lui
   donne le focus, or un clic maintenu puis déplacé (glisser-déposer du lien)
   ne provoque aucune navigation. Avec :focus-within le lien gardait le focus
   et le panneau restait ouvert jusqu'au clic suivant. :focus-visible n'est
   activé par le navigateur que si le focus vient du clavier — le problème
   disparaît sans rien retirer aux personnes qui naviguent au clavier. */
.nav__item:hover .nav__dropdown,
.nav__item:has(:focus-visible) .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease-in-out, visibility 0s 0s;
}
/* Le chevron pivote pour indiquer que le menu est ouvert */
.nav__item:hover > .nav__link svg,
.nav__item:has(:focus-visible) > .nav__link svg { transform: rotate(180deg); }
.nav__link svg { transition: transform .15s ease; }

/* Une ligne = un picto + un titre et une description. Au survol, un cadre
   plein aux coins arrondis se pose sous la ligne ENTIÈRE — picto, titre et
   description compris : c'est le bloc complet qui se sélectionne, pas le
   seul libellé. Rien ne se déplace, donc la zone cliquable reste stable. */
.nav__dropdown-item {
  display: flex;
  /* Le picto se cale sur le HAUT du titre, pas au milieu de la ligne : sa
     hauteur (40px) est calculée pour finir exactement au bas de la première
     ligne de description — voir .nav__dropdown-icon plus bas. */
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  color: inherit;
  transition: background-color .18s ease, padding-left .2s linear;
}
/* Survol : le cadre plein se pose sous la ligne entière ET le contenu glisse
   de 6px vers la droite, en augmentant le rembourrage GAUCHE plutôt qu'en
   déplaçant le lien — la zone cliquable, elle, ne bouge pas d'un pixel. */
.nav__dropdown-item:hover,
.nav__dropdown-item:focus-visible {
  background: var(--paper-tint);
  padding-left: 18px;
}
/* Picto : même famille que les icônes du reste du site (trait fin,
   currentColor). Sa pastille est un gris à peine perceptible au repos, qui
   passe à un vert très transparent au survol de la ligne — le seul aplat de
   couleur du panneau, donc le seul endroit où le survol se voit vraiment. */
/* Hauteur du picto = ligne du titre (20px) + écart (2px) + première ligne de
   description (18px) = 40px. Son cadre commence donc pile en haut du titre et
   finit pile au bas de la première ligne de texte en dessous. Ces trois
   valeurs sont liées : changer une hauteur de ligne oblige à refaire l'addition. */
.nav__dropdown-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--submenu-icon-bg);
  color: var(--green-800);         /* vert foncé au repos (voir --submenu-label) */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s linear;
}
.nav__dropdown-item:hover .nav__dropdown-icon,
.nav__dropdown-item:focus-visible .nav__dropdown-icon {
  background: var(--submenu-icon-bg-hover);
  color: var(--menu-hover);       /* le picto passe au vert, comme le titre */
}
.nav__dropdown-icon svg { width: 22px; height: 22px; }
.nav__dropdown-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Titre ET description sont en vert au repos. La hiérarchie entre les deux ne
   repose donc plus sur la couleur mais sur la taille et la graisse — 14,5px
   demi-gras contre 12,5px normal. */
.nav__dropdown-text strong {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 600;
  color: var(--submenu-label);
  transition: color .2s linear;
}
.nav__dropdown-text small {
  font-size: 12.5px;
  color: var(--ink-700);
  line-height: 18px;
  white-space: normal;
}
.nav__dropdown-item:hover .nav__dropdown-text strong,
.nav__dropdown-item:focus-visible .nav__dropdown-text strong { color: var(--menu-hover); }
.nav__dropdown-item:hover .nav__dropdown-text small,
.nav__dropdown-item:focus-visible .nav__dropdown-text small { color: var(--ink-700); }

/* ──────────────────────────────────────────────────────────────────────
   CADRE PARTAGÉ DES SOUS-MENUS (grand écran uniquement)

   Un seul cadre pour tous les panneaux, posé derrière eux. Quand on passe
   d'un onglet à sous-menu à un autre SANS quitter la barre, le cadre ne
   disparaît pas puis ne réapparaît pas : il GLISSE et se redimensionne
   jusqu'au nouveau panneau, pendant que l'ancien contenu s'efface et que
   le nouveau arrive en glissant du côté d'où vient la souris.

   Le cadre n'existe que si js/site.js a pu le mettre en place (classe
   .has-navmorph sur l'en-tête) : sans JavaScript, chaque panneau garde son
   propre fond et le menu reste parfaitement utilisable.
   ────────────────────────────────────────────────────────────────────── */
.nav__dropdown-bg { display: none; }

@media (min-width: 1101px) {
  .nav__dropdown-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--paper);
    border-top: 2px solid var(--menu-bar);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 13px 25px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;          /* purement décoratif : ne bloque aucun clic */
    z-index: 49;                   /* juste SOUS les panneaux (z-index 50) */
    transition: opacity .3s ease-in-out, visibility 0s .3s;
  }
  .nav__dropdown-bg.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-in-out, visibility 0s 0s;
  }
  /* Ajoutée par le script UNIQUEMENT lors d'une bascule d'un panneau à
     l'autre : c'est elle qui anime le déplacement et le redimensionnement.
     À la première ouverture elle est absente, donc le cadre apparaît
     directement à la bonne taille, sans glissement parasite. */
  .nav__dropdown-bg.is-morphing {
    transition: opacity .3s ease-in-out, visibility 0s 0s,
                transform .34s cubic-bezier(.2, .7, .3, 1),
                width .34s cubic-bezier(.2, .7, .3, 1),
                height .34s cubic-bezier(.2, .7, .3, 1);
  }

  /* Le cadre partagé prend le relais : les panneaux deviennent transparents
     pour ne pas dessiner un second fond par-dessus le premier. */
  .site-header.has-navmorph .nav__dropdown {
    background: none;
    border-top-color: transparent;
    box-shadow: none;
    /* --nav-slide est posé par le script au moment d'une bascule : le
       panneau qui arrive part du côté d'où vient la souris. */
    transform: translateX(var(--nav-slide, 0px));
    transition: opacity .26s ease, transform .3s cubic-bezier(.2, .7, .3, 1), visibility 0s .26s;
  }
  .site-header.has-navmorph .nav__item:hover .nav__dropdown,
  .site-header.has-navmorph .nav__item:has(:focus-visible) .nav__dropdown {
    transform: translateX(0);
    transition: opacity .26s ease, transform .3s cubic-bezier(.2, .7, .3, 1), visibility 0s 0s;
  }
  /* Clic sur un sous-onglet : force la fermeture des panneaux le temps
     que le navigateur traite la navigation (ancre ou rechargement). Sans
     ça, le survol CSS peut maintenir le panneau visible en arrière-plan. */
  .site-header.nav--subclic .nav__dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Le déplacement du cadre est un confort, pas une information : on le
   supprime pour qui a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .nav__dropdown-bg,
  .nav__dropdown-bg.is-morphing,
  .site-header.has-navmorph .nav__dropdown { transition-duration: .01ms; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  justify-self: end;         /* collé au bord droit du conteneur */
}
/* Boutons de l'en-tête : légèrement plus petits et bords moins arrondis que
   les boutons du reste du site.
   Les barres des deux panneaux (pré-menu et menu complet) reprennent le même
   gabarit : le bouton "Demander un devis" ne change donc jamais de taille
   quand on passe d'un palier de largeur à l'autre. */
.header-actions .btn,
.premenu__actions .btn,
.nav__head-actions .btn {
  white-space: nowrap;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 8px;
}
.header-actions .btn__icon,
.premenu__actions .btn__icon,
.nav__head-actions .btn__icon { width: 15px; height: 15px; }

/* Bouton de bascule clair/sombre — coin supérieur droit de l'en-tête */
/* Bascule jour/nuit — bouton rond  : les deux icônes
   (soleil / lune) sont superposées au centre du cercle ; au changement de
   thème, l'icône sortante glisse hors du bouton pendant que l'autre y entre,
   avec un fondu (transition opacity + transform). */
.theme-toggle {
  flex: none;
  position: relative;
  overflow: hidden;            /* masque l'icône qui glisse hors du cercle */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--neo-grey);  /* bordure = couleur du texte "Accès agences" */
  border-radius: 50%;          /* bouton circulaire */
  color: var(--neo-grey);      /* icône soleil : couleur du texte "Accès agences" */
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { color: var(--sun-hover); border-color: var(--ink-500); }  /* soleil jaune/orange au survol (la lune reste blanche, voir ci-dessous) */
[data-theme="dark"] .theme-toggle { color: #fff; border-color: var(--neo-grey); }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255,255,255,.5); }
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
  position: absolute;          /* superposées au centre du cercle */
  width: 20px;
  height: 20px;
  display: block;
  transition: opacity .3s, transform .3s;   /* animation fade */
}
/* Mode clair : soleil visible, lune cachée en bas */
.theme-toggle .theme-icon-sun { opacity: 1; transform: translateY(0); }
.theme-toggle .theme-icon-moon { opacity: 0; transform: translateY(100%); }
/* Mode sombre : lune visible, soleil caché en haut */
[data-theme="dark"] .theme-toggle .theme-icon-sun { opacity: 0; transform: translateY(-100%); }
[data-theme="dark"] .theme-toggle .theme-icon-moon { opacity: 1; transform: translateY(0); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--green-800);
  color: #fff;
}
.btn--primary:hover { background: var(--green-900); }

/* Le pré-menu n'existe qu'entre les deux paliers de resserrement : il est
   retiré de la page partout ailleurs (voir les requêtes média plus bas). */
.premenu { display: none; }

.btn--outline {
  background: var(--paper);
  color: var(--ink-900);
  /* Contour de la même couleur que le fond du bouton "Demander un devis" */
  border-color: var(--green-800);
}
/* "Accès agences" (en-tête uniquement) : texte gris néo, pas de fond au repos,
   bordure de la couleur du texte. */
.header-actions .btn--outline {
  background: transparent;         /* pas de fond au repos */
  color: var(--neo-grey);
  border-color: var(--neo-grey);   /* bordure = couleur du texte "Accès agences" */
}
.btn--outline:hover {
  border-color: var(--green-900);
  background: var(--green-100);
  color: var(--green-900);
}
/* En mode sombre, --green-100 (fond au survol) et --green-900 (texte) sont
   deux verts foncés très proches : le texte deviendrait illisible. On force
   donc un texte et une bordure clairs au survol sur fond vert sombre. */
[data-theme="dark"] .btn--outline:hover {
  background: var(--green-800);
  border-color: var(--green-300);
  color: #FFFFFF;
}
/* Survol de "Accès agences" : fond gris très clair. Déclaré APRÈS les :hover
   ci-dessus (même spécificité que la version sombre) pour rester prioritaire
   dans les deux thèmes. */
.header-actions .btn--outline:hover {
  background: var(--line-100);     /* fond gris très clair au survol */
  border-color: var(--neo-grey);   /* la bordure reste la couleur du texte */
  color: var(--neo-grey);
}

.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; }
.btn__icon { width: 16px; height: 16px; display: block; flex: none; }

/* Mobile nav toggle — hamburger "2 barres"  : au clic les
   deux barres se rejoignent et pivotent de ±45° pour former une croix. */
.nav-toggle {
  display: none;
  background: transparent;     /* icône nue : pas de fond ni de bordure */
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  flex-direction: column;      /* les 2 barres sont empilées */
  align-items: center;
  justify-content: center;
  gap: 5px;                    /* espace entre les 2 barres */
  color: var(--neo-grey);      /* barres & croix : couleur du site de référence */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Les 2 barres : fines, arrondies(24 × 1.5px). */
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  border-radius: 9999px;
  background: currentColor;
  transition: background-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
/* Menu ouvert : les barres se rejoignent au centre et pivotent pour former
   la croix de fermeture . */
.nav.nav--open ~ .header-actions .nav-toggle .nav-toggle__bar--1 { transform: translateY(3.25px) rotate(45deg); }
.nav.nav--open ~ .header-actions .nav-toggle .nav-toggle__bar--2 { transform: translateY(-3.25px) rotate(-45deg); }

/* ==========================================================================
   Cookie consent banner (RGPD)
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--chip-dark-bg);
  color: var(--chip-dark-text);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 100;
  transform: translateY(150%);
  transition: transform .4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
/* Le bandeau est en position fixed : il flotte au-dessus de la page et masque
   le bas du contenu tant que le visiteur n'a pas répondu. On réserve la place
   correspondante sous la page, uniquement pendant qu'il est affiché. */
body:has(.cookie-banner.is-visible) { padding-bottom: 120px; }
.cookie-banner p { font-size: 13.5px; color: #E5E7EB; line-height: 1.5; flex: 1 1 320px; }
.cookie-banner a { text-decoration: underline; color: #fff; }
.cookie-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner .btn--primary { background: var(--green-500); }
.cookie-banner .btn--primary:hover { background: var(--green-300); color: var(--ink-900); }
.cookie-banner .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-weight: 500;
}
.cookie-banner .btn--ghost:hover { border-color: rgba(255,255,255,0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line-200);
  padding: 56px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
}
.footer-brand p {
  color: var(--ink-500);
  font-size: 14px;
  margin-top: 12px;
  max-width: 30ch;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 16px;
}
.footer-col li + li { margin-top: 10px; }
.footer-col a { font-size: 14.5px; color: var(--ink-700); }
.footer-col a:hover { color: var(--green-800); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-200);
  border-radius: 50%;
  color: var(--ink-700);
}
.social-row a:hover { border-color: var(--green-800); color: var(--green-800); }

.footer-bottom {
  border-top: 1px solid var(--line-200);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-500);
}
.footer-bottom nav { display: flex; gap: 18px; align-items: center; }
.footer-bottom nav a + a { position: relative; padding-left: 18px; }
.footer-bottom nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: var(--line-200);
}
.footer-bottom a:hover { color: var(--green-800); }

/* ══════════════════════════════════════════════════════════════════════
   L'EN-TÊTE SE RESSERRE EN DEUX PALIERS

   Son contenu est incompressible : logo + onglets + "Accès agences" +
   "Demander un devis" + bascule jour/nuit ne tiennent plus en dessous
   d'environ 1260px de fenêtre. Plutôt que de tout basculer d'un coup en
   menu hamburger, on lâche du lest en deux temps.

   Palier 1 — à 1320px : "Demander un devis" et la bascule jour/nuit
   quittent l'en-tête et se replient dans le PRÉ-MENU. Les onglets, eux,
   restent affichés : la navigation ne change pas.

   Palier 2 — à 1100px : même les onglets ne tiennent plus. Le pré-menu
   disparaît et le vrai menu hamburger prend le relais, avec toute la
   navigation à l'intérieur.

   Les deux paliers utilisent le MÊME bouton hamburger et le MÊME panneau
   glissant : seul le contenu du panneau change. Pour l'utilisateur, le
   geste est identique d'un bout à l'autre.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Commun aux deux paliers ─────────────────────────────────────────── */
@media (max-width: 1320px) {
  /* "Demander un devis" et la bascule jour/nuit disparaissent DE L'EN-TÊTE :
     seul "Accès agences" reste visible, le hamburger passe tout à droite.
     Le sélecteur est volontairement limité à .header-actions : les copies de
     la bascule jour/nuit qui vivent dans le pré-menu et dans le panneau
     mobile doivent, elles, rester affichées — ce sont les seuls accès au
     mode sombre une fois l'en-tête resserré. */
  .header-actions .btn--primary,
  .header-actions .theme-toggle { display: none; }
  /* Le bouton hamburger doit rester AU-DESSUS du panneau (z-index 30) une
     fois celui-ci ouvert, sinon la croix serait masquée par le panneau.
     Panneau et bouton vivent dans le même contexte d'empilement (celui du
     .site-header) : z-index 31 > 30, la croix reste donc visible et
     cliquable en haut à droite. */
  .nav-toggle { display: inline-flex; position: relative; z-index: 31; }
  /* Panneau ouvert : l'en-tête devient transparent et ne garde QUE le
     hamburger devenu croix. Les éléments masqués le sont avec "visibility"
     et non "display" : ils continuent d'occuper leur place, si bien que la
     croix reste exactement là où était le hamburger. */
  .site-header:has(.nav.nav--open) {
    background: transparent;
    border-bottom-color: transparent;
  }
  .site-header:has(.nav.nav--open) .logo,
  .site-header:has(.nav.nav--open) .header-actions .btn { visibility: hidden; }
  /* Panneau ouvert : le bandeau cookies est en position: fixed avec un
     z-index de 100 — il flotte donc AU-DESSUS du panneau plein écran et
     recouvre le bouton "Demander un devis" ainsi que la bascule jour/nuit.
     On le fait redescendre hors de l'écran tant que le panneau reste
     ouvert ; il remonte tout seul à la fermeture, avec sa propre animation.
     ⚠️ Aucun consentement n'est donné ni refusé au passage : le bandeau est
     seulement déplacé, le choix de l'utilisateur reste entier et la question
     lui est reposée dès qu'il referme le panneau. */
  body:has(.nav.nav--open) .cookie-banner.is-visible { transform: translateY(150%); }

  /* ── BARRE DU HAUT, COMMUNE AUX DEUX PANNEAUX ──────────────────────
     Le pré-menu et le menu complet ouvrent la même barre : logo réduit à
     gauche, puis le bouton devis et la bascule jour/nuit à droite, juste
     avant la croix. Elle est décrite ICI une seule fois pour les deux, afin
     qu'ils ne puissent pas diverger.
     La hauteur reprend celle, mesurée, de l'en-tête (--header-h, posée par
     js/site.js) plutôt qu'un rembourrage fixe : le bouton "Demander un
     devis" est plus haut que le logo et allongeait la barre de 6px, si bien
     que son filet du bas se décalait de celui de l'en-tête pendant la
     fermeture. Le repli 69px sert si le script n'a pas encore tourné.
     ⚠️ Ce bloc ne décrit QUE l'apparence, jamais le "display" : c'est chaque
     palier qui décide laquelle des deux barres s'affiche. Les activer ici
     ferait apparaître la barre du menu mobile À L'INTÉRIEUR de la rangée
     d'onglets au palier du pré-menu, ce qui gonflait l'en-tête et poussait
     la croix hors de l'écran. */
  .premenu__head,
  .nav.nav--open .nav__mobile-head {
    align-items: center;
    justify-content: space-between;
    height: var(--header-h, 69px);
    /* La barre reste collée en haut du panneau pendant qu'on le fait défiler.
       C'est le panneau (.nav) qui défile, pas la page : sans « sticky », la
       barre partait vers le haut dès que plusieurs sous-menus ouverts
       rendaient la liste plus longue que l'écran.
       flex:none l'empêche d'être comprimée par la colonne flex du panneau. */
    position: sticky;
    top: 0;
    /* Au-dessus du z-index: 50 que .nav__dropdown déclare pour le grand
       écran : sans ça, le contenu des sous-menus défilait PAR-DESSUS la
       barre au lieu de passer dessous. */
    z-index: 60;
    flex: none;
    background: var(--paper);
    /* Mêmes retraits que .site-header__bar, formule comprise : le logo réduit
       du panneau tombe donc exactement sous celui de l'en-tête. */
    padding-left: max(32px, calc((100% - var(--container)) / 2 + 32px));
    padding-right: 32px;
    border-bottom: 1px solid var(--line-200);
  }
  .premenu__logo,
  .nav__mobile-logo { height: 40px; width: auto; display: block; }
  .premenu__actions,
  .nav__head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Place réservée à droite pour la croix, qui reste dans l'en-tête et
       flotte au-dessus du panneau : sans cette marge, la bascule jour/nuit
       passerait dessous. */
    margin-right: 54px;
  }
}

/* ── Palier 1 uniquement : le pré-menu ───────────────────────────────── */
@media (min-width: 1101px) and (max-width: 1320px) {
  /* Le panneau reprend trait pour trait le menu mobile : plein écran,
     glissement depuis la droite, même durée et même courbe, et il passe
     SOUS l'en-tête (30 < 40) pour que la croix reste visible pendant
     toute l'animation. Seul son contenu diffère. */
  .premenu {
    display: block;
    position: fixed;
    /* Pas de "bottom" : contrairement au menu mobile qui occupe tout l'écran,
       ce panneau ne contient qu'une barre — sa hauteur suit donc son contenu
       et vient exactement recouvrir la bande de l'en-tête. */
    top: 0;
    left: 0;
    right: 0;
    background: var(--paper);
    z-index: 30;
    transform: translateX(100%);   /* fermé : hors écran à droite */
    visibility: hidden;
    transition: transform .5s cubic-bezier(.32,.72,0,1), visibility 0s .5s;
  }
  .site-header:has(.nav.nav--open) .premenu {
    transform: translateX(0);
    visibility: visible;
    transition: transform .5s cubic-bezier(.32,.72,0,1);
  }
  /* Même parade qu'au palier 2 : pendant un redimensionnement, on coupe la
     transition pour que le panneau fermé ne traverse pas l'écran. */
  .site-header:has(.nav.nav--no-anim) .premenu { transition: none !important; }
  /* Ici les onglets sont dans l'en-tête, pas dans le panneau : ils doivent
     donc s'effacer eux aussi quand le pré-menu s'ouvre. */
  .site-header:has(.nav.nav--open) .nav { visibility: hidden; }

  /* Barre du haut du pré-menu : mêmes retraits et même filet que celle du
     menu mobile, pour que les deux paliers soient indiscernables. */
  /* Seule la barre du pré-menu s'affiche à ce palier ; son apparence est
     décrite plus haut, avec celle du menu complet. */
  .premenu__head { display: flex; }
}

/* ── Palier 2 : le vrai menu hamburger ───────────────────────────────── */
@media (max-width: 1100px) {
  /* La nav étant masquée, on repasse en 2 zones (logo à gauche, actions à
     droite) pour éviter une colonne centrale vide qui décalerait tout. */
  .site-header__bar { grid-template-columns: 1fr auto; }

  /* Menu mobile : panneau plein écran qui GLISSE depuis la droite. Il
     passe SOUS le header sticky (z-index 30 < 40) : le bouton hamburger,
     devenu croix, reste ainsi visible en haut à droite pendant toute
     l'animation d'ouverture/fermeture. */
  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;         /* plein écran : collé aux 4 bords de la fenêtre */
    inset: 0;
    /* SANS ça, le "justify-self: center" de la nav desktop reprend le
       dessus et le panneau se retrouve rétréci + centré au lieu d'occuper
       toute la largeur de la fenêtre. */
    justify-self: stretch;
    background: var(--paper);
    padding: 0;              /* le panneau a son propre en-tête : aucune réserve */
    overflow-y: auto;        /* les liens défilent si l'écran est trop petit */
    overflow-x: hidden;      /* empêche le décalage horizontal quand les sous-menus sont dépliés */
    scrollbar-gutter: stable; /* réserve l'espace du scrollbar pour éviter le décalage */
    overscroll-behavior: contain;
    z-index: 30;             /* SOUS le header sticky (z-index 40) */
    transform: translateX(100%);   /* fermé : hors écran à droite */
    visibility: hidden;
    transition: transform .5s cubic-bezier(.32,.72,0,1), visibility 0s .5s;
  }
  /* Menu ouvert (classe .nav--open ajoutée par js/site.js) : le panneau
     glisse à sa place en dessous du header ; le hamburger devenu croix
     (resté dans le header) permet de le refermer. */
  .nav.nav--open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .5s cubic-bezier(.32,.72,0,1);
  }
  /* Classe « sans animation » (ajoutée/retirée par js/site.js) : elle coupe
     toutes les transitions du menu. Utilisée dans deux cas :
     - pendant un redimensionnement, pour que le panneau fermé se place hors
       écran sans « glisser » visiblement quand on traverse le breakpoint ;
     - juste avant qu'un lien du menu ne recharge la page, pour que
       l'animation de fermeture ne soit pas coupée net par le rechargement
       (à-coup visible : le panneau glisse à moitié puis saute à la page). */
  .nav.nav--no-anim { transition: none !important; }
  /* On coupe aussi la rotation de la croix qui redevient hamburger et le
     fondu du fond de l'en-tête, pour la même raison : ces deux animations
     seraient elles aussi interrompues par le rechargement de la page. */
  .nav.nav--no-anim ~ .header-actions .nav-toggle .nav-toggle__bar { transition: none !important; }
  .site-header:has(.nav.nav--no-anim) { transition: none !important; }
  /* Seule la barre du menu complet s'affiche à ce palier ; son apparence est
     décrite plus haut, avec celle du pré-menu. */
  .nav.nav--open .nav__mobile-head { display: flex; }
  .nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: none;
    border: 2px solid var(--green-800);    /* cadre vert = "Demander un devis" */
    border-radius: 8px;
    color: var(--ink-500);                 /* croix grise */
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .nav__close svg { width: 22px; height: 22px; }
  /* Au survol : croix un peu plus foncée + fond gris clair, cadre reste vert */
  .nav__close:hover {
    color: var(--ink-700);
    background: var(--line-100);
    border-color: var(--green-800);
  }
  /* La croix verte du panneau est remplacée par le hamburger devenu croix
     (resté visible dans le header) : on la masque donc. */
  .nav.nav--open .nav__close { display: none; }
  /* ══════════════════════════════════════════════════════════════════
     LISTE DES ONGLETS DU PANNEAU
     Chaque onglet est une ligne pleine largeur, séparée de la suivante par
     un filet. Les filets sont EN RETRAIT des bords du panneau, alignés sur
     le logo et sur le contenu des pages : d'où la marge latérale sur les
     lignes plutôt qu'un rembourrage, qui aurait étiré les filets d'un bord
     à l'autre de l'écran.
     ══════════════════════════════════════════════════════════════════ */
  .nav.nav--open > .nav__link,
  .nav.nav--open > .nav__item {
    margin: 0 32px;
    border-bottom: 1px solid var(--line-200);
  }
  /* Pas de filet au-dessus du premier onglet : la barre du haut porte déjà
     son propre trait de séparation, et les deux se seraient superposés en
     un double trait juste sous le logo. */
  /* La ligne d'un onglet à sous-menu porte trois choses : le libellé, le
     bouton de dépliage, et le sous-menu lui-même qui passe à la ligne. */
  .nav.nav--open > .nav__item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
  }
  .nav.nav--open .nav__link {
    padding: 16px 0;
    font-size: 16px;
    font-weight: 400;
  }
  /* "flex: 1" UNIQUEMENT dans une ligne à sous-menu, pour que le libellé
     occupe la place laissée par le bouton chevron. Appliqué à tous les
     onglets, il étirait les onglets simples sur toute la hauteur restante
     du panneau (mesuré : 205px au lieu de 58px), car .nav est une colonne
     flex. Et le "border-bottom: none" qui suivait annulait au passage le
     filet de séparation de ces mêmes onglets. */
  .nav.nav--open .nav__item > .nav__link { flex: 1; }
  /* Le chevron du libellé sert au survol sur grand écran ; ici c'est le
     bouton dédié qui prend le relais, on le masque donc. */
  .nav.nav--open .nav__link > svg { display: none; }

  /* Bouton de dépliage : sa propre cellule à droite de la ligne. Le libellé
     de l'onglet et le chevron déclenchent tous les deux l'ouverture du
     sous-menu (le libellé ne mène plus à la page dans le panneau mobile). */
  .nav.nav--open .nav__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 60px;
    background: none;
    border: none;
    color: var(--ink-500);
    transition: color .2s linear;
  }
  .nav.nav--open .nav__expand svg {
    width: 18px;
    height: 18px;
    /* Décalée de 10px vers la droite pour que la flèche s'aligne exactement
       sur la croix de fermeture restée dans l'en-tête, juste au-dessus
       (mesuré : centres à 841px contre 851px avant correction). */
    transform: translateX(10px);
    transition: transform .3s ease-in-out;
  }
  .nav.nav--open .nav__expand:hover { color: var(--menu-hover); }
  /* Sous-menu déplié : le chevron pointe vers le haut et le libellé prend
     la couleur d'accent, qu'il conserve tant que le sous-menu est ouvert.
     On conserve le même translateX que ci-dessus pour que les deux listes
     de transformation correspondent et que la rotation s'anime sans à-coup. */
  .nav.nav--open .nav__item--deplie > .nav__expand svg { transform: translateX(10px) rotate(180deg); }
  .nav.nav--open .nav__item--deplie > .nav__link,
  .nav.nav--open .nav__item--deplie > .nav__expand { color: var(--menu-hover); }

  /* Sous-menu : dans le flux, il pousse les onglets suivants vers le bas.
     Fermé il occupe toute la largeur de la ligne mais aucune hauteur ;
     js/site.js anime cette hauteur de 0 à sa valeur réelle en 300ms.
     Mêmes lignes (picto + titre + description) que sur grand écran, mais
     pleine largeur : la largeur fixe du panneau flottant n'a pas de sens
     ici. */
  .nav.nav--open .nav__dropdown {
    position: static;
    display: block;
    flex-basis: 100%;
    width: auto;
    height: 0;
    overflow: hidden;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    /* Même barre verte qu'au-dessus des panneaux du grand écran : elle
       marque la frontière entre l'onglet et ses sous-onglets.
       Dessinée en ombre INTERNE et non en bordure : une bordure reste
       visible même quand le sous-menu est replié à hauteur nulle — il
       restait un trait vert sous les onglets fermés. L'ombre interne, elle,
       est rognée par overflow:hidden et n'apparaît qu'avec la hauteur. */
    box-shadow: inset 0 2px 0 var(--menu-bar);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: height .3s ease-in-out;
  }
  /* Pont de survol du grand écran : sans objet ici. */
  .nav.nav--open .nav__dropdown::before { display: none; }
  /* Sous-liens : décalés vers la droite par rapport aux onglets, pour qu'on
     voie d'un coup d'œil qu'ils en dépendent. Pas de rembourrage à droite :
     le panneau est déjà en retrait de 32px (voir .nav--open > .nav__item). */
  .nav.nav--open .nav__dropdown-item { padding: 14px 0 14px 18px; }
  .nav.nav--open .nav__dropdown-item:hover,
  .nav.nav--open .nav__dropdown-item:focus-visible { padding-left: 26px; }
  /* Le cadre plein du PREMIER sous-onglet mordait sur le trait vert posé juste
     au-dessus (une ombre interne de 2px). On écarte donc le premier et le
     dernier sous-onglet de quelques pixels.

     🔴 Par une MARGE portée par les sous-onglets, jamais par un rembourrage du
     panneau. Une version précédente utilisait `padding-top: 6px` sur
     .nav__dropdown en affirmant que height:0 le rognait : c'est faux. Un
     rembourrage ne se comprime pas — le panneau replié mesurait 8px au lieu
     de 0, et sa barre verte restait visible sous chaque onglet FERMÉ.
     Une marge d'enfant, elle, est bien rognée par overflow:hidden.

     Vérification, menu ouvert et tous les sous-menus repliés :
       document.querySelector('.nav--open .nav__dropdown').offsetHeight  // 0 */
  .nav.nav--open .nav__dropdown-item:first-child { margin-top: 6px; }
  .nav.nav--open .nav__dropdown-item:last-child { margin-bottom: 2px; }

  /* ══════════════════════════════════════════════════════════════════
     PIED DU PANNEAU MOBILE — copyright + logo, puis les liens légaux.
     margin-top:auto le pousse en bas du panneau (colonne flex, voir
     .nav plus haut) quand le contenu est plus court que l'écran ; sur un
     petit écran où les onglets remplissent déjà la hauteur, il reste
     simplement à la suite, comme un pied de page normal. */
  .nav__panel-foot {
    display: block;
    margin-top: auto;
    /* Retrait latéral volontairement plus faible que celui des onglets
       (32px) : c'est ce qui laisse la ligne des liens légaux tenir en
       entier sur les écrans les plus étroits. */
    padding: 26px 16px;
    border-top: 1px solid var(--line-200);
    text-align: center;
  }
  /* « © 2026 » et le logo sont alignés par le BAS (align-items: flex-end,
     avec line-height: 1 pour que la boîte du texte colle à ses lettres).
     La ligne entière est ensuite décalée par js/site.js afin que le « E »
     du logo tombe pile au centre de la page — donc juste au-dessus de la
     feuille de la ligne suivante. */
  .nav__panel-copyright {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    margin: 50px 0 8px;
    font-size: 13px;
    line-height: 0.67;
    color: var(--ink-700);
  }
  /* Le logo est mis à la taille du texte qui l'entoure, comme une lettre
     de plus dans la phrase — pas un élément graphique à part. Hauteur
     identique au texte (1em) pour que le bas du "E" soit parfaitement
     aligné avec le bas du "© 2026". */
  .nav__panel-copyright img { height: 1em; width: auto; display: block; }
  .nav__panel-copyright .logo-dark { display: none; }
  [data-theme="dark"] .nav__panel-copyright .logo-light { display: none; }
  [data-theme="dark"] .nav__panel-copyright .logo-dark { display: block; }

  /* Les deux liens légaux et la feuille tiennent sur UNE seule ligne, tout
     en bas du panneau. Ce sont de simples liens — ni cadre, ni fond, ni au
     repos ni au survol : seule la couleur du texte passe au vert, comme
     pour les onglets juste au-dessus, dont ils reprennent la couleur. */
  /* Une SEULE ligne, jamais deux. Grille en trois colonnes « 1fr auto 1fr » :
     les deux colonnes latérales ayant exactement la même largeur, la colonne
     du milieu — la feuille — se retrouve pile au centre de la page, quelle
     que soit la longueur des deux libellés. Chacun se range ensuite contre
     la feuille, l'un par la droite, l'autre par la gauche. */
  .nav__panel-legal {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 9px;
  }
  .nav__panel-legal a {
    font-size: 12px;
    white-space: nowrap;
    min-width: 0;
    color: var(--ink-700);          /* même couleur que les libellés d'onglet */
    transition: color .2s linear;
  }
  .nav__panel-legal a:first-of-type { justify-self: end; }
  .nav__panel-legal a:last-of-type { justify-self: start; }
  .nav__panel-legal a:hover,
  .nav__panel-legal a:focus-visible { color: var(--menu-hover); }
  .nav__panel-leaf { width: 17px; height: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ──────────────────────────────────────────────────────────────────────────
   PETITS TÉLÉPHONES — l'en-tête ne rentrait pas dans l'écran.

   Le compte, à 375px de large : 20 (retrait) + 129 (logo) + 20 (écart)
   + 214 ("Accès agences" + hamburger) + 20 (retrait) = 403px. Soit 28px de
   trop, qui poussaient le bouton hors de l'écran.

   On récupère ces 28px UNIQUEMENT sur les espaces vides — l'écart entre le
   logo et les boutons, l'écart entre les deux boutons, et le rembourrage
   intérieur du bouton. Le logo, le libellé, la taille du texte et le
   hamburger ne bougent pas d'un pixel, et les retraits de 20px restent
   alignés sur ceux du contenu de la page.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 460px) {
  .site-header__bar { column-gap: 8px; }
  .header-actions { gap: 6px; }
  .header-actions .btn--outline { padding-left: 10px; padding-right: 10px; }
}

/* Sous 400px, « Politique de confidentialité » ne tient plus à 12px sur la
   même ligne que son voisin : on récupère la place sur le texte et sur les
   retraits du pied, jamais en repassant à deux lignes. */
@media (max-width: 400px) {
  .nav__panel-foot { padding-left: 8px; padding-right: 8px; }
  .nav__panel-legal { column-gap: 7px; }
  .nav__panel-legal a { font-size: 11px; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .site-header__bar { padding: 14px 20px; }
  /* Retraits resserrés sur petit écran, pour les deux barres de panneau —
     mêmes 20px que .site-header__bar et que .container. */
  .premenu__head,
  .nav.nav--open .nav__mobile-head { padding-left: 20px; padding-right: 20px; }
  .nav.nav--open > .nav__link,
  .nav.nav--open > .nav__item { margin: 0 20px; }
  .premenu__actions,
  .nav__head-actions { margin-right: 46px; }
  .container { padding: 0 20px; }
}