/* =====================================================================
   Barre latérale commune (gabarit _laterale.html.twig) — accordéon des
   modules : marque + commune en tête (alignées sur la hauteur du
   bandeau), fond plein pour le module courant seul, fond plein au
   survol des autres, liens détaillés décalés.

   COPIE CONFORME SURVEILLÉE : fichier identique à l'octet dans les
   quatre modules (outils/coherence/verifier.php, famille
   « laterale.css »). Toute évolution suit la procédure de
   docs/specs/menu-commun.md, jamais de retouche locale.

   Contrat de jetons (le style.css de chaque module DOIT les définir,
   clair et sombre) : --surface, --trait, --encre, --encre-douce,
   --blanc, --bleu, --bleu-texte, --bleu-pale, --bleu-pale-survol,
   --focus, --rayon, --hauteur-entete. Aucune couleur en dur ici : les
   couples de contraste correspondants sont déclarés par module dans
   outils/rgaa/contraste.php.

   Structure attendue autour du composant (layout du module) :
   <div class="corps [avec-laterale]"> include _laterale (émet
   input.laterale-case + label.laterale-bouton + nav.laterale) +
   header.entete (include _entete) + main </div> ; le module garde la
   main sur la largeur de son contenu (.avec-laterale .contenu).

   Composition (recette Finexo réécrite maison) : .corps est une GRILLE.
   En bureau, la latérale occupe la colonne gauche sur toute la hauteur
   (elle porte la marque, jusqu'en haut de l'écran) ; le bandeau
   (.entete, stylé par menu.css) reçoit une zone haute de toute la
   colonne droite (grid-row 1/-1 + align-self start : il peut ainsi
   rester collant, la première rangée fixe sa place) et le contenu se
   cale en rangée 2. En écran étroit, grille monocolonne : bandeau,
   bouton « Menu », latérale repliable, contenu — l'ordre visuel vient
   du placement, l'ordre du DOM ne change pas (la case à cocher reste
   un frère CSS de la latérale). ================================== */

/* enveloppe : grille (body en colonne flex, le pied éventuel suit) */
.corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* rangée 1 auto : entête « marque seule » hors session, ou rien
     (écrans d'erreur sans entête : aucun espace réservé) */
  grid-template-rows: auto 1fr;
  flex: 1 0 auto;
}
.corps > .entete { grid-column: 1; grid-row: 1; }
.corps > main { grid-column: 1; grid-row: 2; min-width: 0; }

/* connecté (barre latérale présente) : deux colonnes, première rangée
   à la hauteur du bandeau pour que son ancrage collant ait sa zone ;
   colonne gauche en auto : c'est la largeur de .laterale qui commande
   (15,5 rem déplié, rail étroit replié) */
.corps.avec-laterale {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--hauteur-entete) 1fr;
}
.avec-laterale > .laterale { grid-column: 1; grid-row: 1 / -1; }
.avec-laterale > .entete {
  grid-column: 2;
  grid-row: 1 / -1;      /* zone haute de toute la colonne : l'ancrage */
  align-self: start;     /* collant de menu.css a la place de coulisser */
}
.avec-laterale > main { grid-column: 2; grid-row: 2; }

.laterale {
  width: 15.5rem;
  background: var(--surface);
  border-right: 1px solid var(--trait);
  padding: 0 .8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: sticky;
  top: 0;
  align-self: start;
  /* NIVEAU D'EMPILEMENT EXPLICITE (13/08/2026, défaut relevé par Yves) :
     un élément « sticky » crée un contexte d'empilement, même sans
     z-index. Tout ce que la latérale contient, infobulles du rail
     comprises, y est donc enfermé : sans niveau propre, ce contexte se
     peint dans l'ordre du document, c'est-à-dire SOUS tout contenu
     positionné de la page (une carte, un encart de message). Les
     infobulles passaient ainsi au-dessus des blocs ordinaires mais
     sous les autres, sans logique apparente pour qui regarde l'écran.
     52 : au-dessus du bandeau collant (50) et du bouton de menu (51),
     pour qu'une infobulle du haut du rail ne se glisse pas non plus
     sous le bandeau. Sans effet en écran étroit, où la latérale n'est
     pas positionnée. */
  z-index: 52;
  /* pleine hauteur d'écran en permanence (composition Finexo) : la
     colonne est peinte jusqu'en bas, son contenu défile à l'intérieur */
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}

/* tête : marque Gouverneis puis nom de la commune, même police et
   couleur ; la marque occupe la hauteur du bandeau voisin (alignement
   Finexo : les deux têtes sont au même niveau) */
.laterale-marque {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--hauteur-entete);
  padding: .1rem .4rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bleu-texte);
}
.laterale-marque svg { width: 1.5rem; height: 1.5rem; flex: none; }
.laterale-commune {
  padding: 0 .4rem .6rem 2.4rem;
  margin-bottom: .4rem;
  color: var(--bleu-texte);
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid var(--trait);
}

/* accordéon : fond plein pour le MODULE COURANT seulement ; les autres
   boutons prennent le fond plein au survol. Blanc sur --bleu : couple
   « bouton principal » déclaré par chaque module. */
.module-bouton {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
  padding: .5rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
}
/* liens vers les AUTRES modules : fine bordure pour les distinguer des
   entrées internes du module courant (retour Yves du 09/08/2026) ; en
   rail, le bouton réduit au pictogramme garde sa bordure autour du
   seul picto */
a.module-bouton { border-color: var(--trait); }
a.module-bouton:hover {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}
.module-courant { background: var(--bleu); color: var(--blanc); }
.module-bouton svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* liens détaillés du module courant, décalés sous son bouton */
.laterale-details {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .3rem 0 .4rem;
  padding-left: .7rem;
}
.laterale-details a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  border-radius: var(--rayon);
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
}
/* pictogramme de l'entrée (macro entree de _pictos.html.twig) : repère
   visuel en mode déplié, seul visuel conservé en rail bureau */
.laterale-details a svg { width: .95rem; height: .95rem; flex: none; }
.laterale-details a:hover { background: var(--bleu-pale-survol); }
.laterale-details a[aria-current="page"] {
  background: var(--bleu-pale);
  color: var(--bleu-texte);
  font-weight: 600;
}
.laterale-titre {
  margin: 1rem .8rem .25rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--encre-douce);
}

/* repli : case à cocher masquée mais focusable (technique clip),
   aucun JavaScript ; bouton visible en écran étroit seulement.
   Le wrapper est émis par _laterale.html.twig (kit surveillé). */
.laterale-case {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.laterale-bouton {
  display: none;   /* bureau : barre toujours visible, pas de bouton */
  position: relative;   /* ancre de l'infobulle (bureau : sticky, idem) */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  justify-self: start;
  width: 2.5rem; height: 2.5rem;
  padding: .55rem;
  border: none;
  border-radius: var(--rayon);
  background: transparent;
  cursor: pointer;
}
/* les trois barres seulement (la 4e enfant est l'infobulle) */
.laterale-bouton span:nth-child(-n+3) {
  height: 2px;
  background: var(--bleu-texte);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.laterale-bouton:hover { background: var(--bleu-pale); }
.laterale-case:focus-visible + .laterale-bouton {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* infobulle du bouton (retour Yves du 09/08/2026) : visible au survol
   et quand la case a le focus clavier ; décorative (texte --encre sur
   --surface, couple déjà déclaré), adjacente au déclencheur (elle ne
   le recouvre pas) */
.laterale-bouton-infobulle {
  display: none;
  position: absolute;
  left: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .25rem .6rem;
  background: var(--surface);
  color: var(--encre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 5;
}
.laterale-bouton:hover .laterale-bouton-infobulle,
.laterale-case:focus-visible + .laterale-bouton .laterale-bouton-infobulle {
  display: block;
}

/* bureau : le bouton vit à gauche DANS la carte du bandeau (même
   cellule de grille, ancré collant comme elle : marge = retrait de la
   carte + son padding interne) et commande le RAIL : latérale réduite
   aux pictogrammes, libellés en masquage accessible (technique clip :
   les noms restent portés pour les lecteurs d'écran), titres de
   section et commune réduits à un filet (font-size 0, le texte reste
   dans l'arbre d'accessibilité) */
@media (min-width: 901px) {
  .laterale-bouton {
    display: flex;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    justify-self: start;
    position: sticky;
    top: calc((var(--hauteur-entete) - 2.5rem) / 2);
    margin: calc((var(--hauteur-entete) - 2.5rem) / 2) 0 0 2.3rem;
    z-index: 51;    /* au-dessus du bandeau collant (z-index 50) */
  }
  /* menu déplié (case NON cochée en bureau) : croix — cliquer replie
     en rail ; retour Yves du 09/08/2026 : croix quand le menu est
     ouvert, à toutes les largeurs */
  .laterale-case:not(:checked) + .laterale-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .laterale-case:not(:checked) + .laterale-bouton span:nth-child(2) { opacity: 0; }
  .laterale-case:not(:checked) + .laterale-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .laterale-case:checked ~ .laterale {
    width: auto;
    padding: 0 .55rem 1.5rem;
    align-items: center;
    /* les infobulles débordent du rail : plus de défilement interne
       (acceptable : le rail ne porte que des pictogrammes, bien moins
       haut qu'un écran ; le mode déplié garde son overflow-y) */
    overflow: visible;
  }
  .laterale-case:checked ~ .laterale .laterale-libelle {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .laterale-case:checked ~ .laterale .laterale-marque { padding: .1rem 0; }
  .laterale-case:checked ~ .laterale .laterale-commune {
    font-size: 0;
    padding: 0 0 .5rem;
    align-self: stretch;
  }
  .laterale-case:checked ~ .laterale .laterale-titre {
    font-size: 0;
    align-self: stretch;
    margin: .8rem .3rem .25rem;
    border-bottom: 1px solid var(--trait);
  }
  .laterale-case:checked ~ .laterale .module-bouton { padding: .5rem .6rem; }
  .laterale-case:checked ~ .laterale .laterale-details {
    padding-left: 0;
    align-self: stretch;
    align-items: center;
  }
  .laterale-case:checked ~ .laterale .laterale-details a { padding: .45rem .6rem; }
  .laterale-case:checked ~ .laterale .laterale-details a svg {
    width: 1.05rem; height: 1.05rem;
  }
  /* infobulles du rail (retour Yves du 09/08/2026) : au survol ou au
     focus clavier, le libellé clipé redevient visible en bulle à
     droite du pictogramme (mêmes couleurs que l'infobulle du bouton,
     couple --encre / --surface déjà déclaré ; adjacente, elle ne
     recouvre pas son déclencheur) */
  .laterale-case:checked ~ .laterale .module-bouton,
  .laterale-case:checked ~ .laterale .laterale-details a { position: relative; }
  .laterale-case:checked ~ .laterale .module-bouton:hover > .laterale-libelle,
  .laterale-case:checked ~ .laterale a.module-bouton:focus-visible > .laterale-libelle,
  .laterale-case:checked ~ .laterale .laterale-details a:hover .laterale-libelle,
  .laterale-case:checked ~ .laterale .laterale-details a:focus-visible .laterale-libelle {
    position: absolute;
    left: calc(100% + .5rem);
    top: 50%;
    transform: translateY(-50%);
    width: auto; height: auto;
    overflow: visible;
    clip: auto;
    padding: .25rem .6rem;
    background: var(--surface);
    color: var(--encre);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 5;
  }
}

/* écran étroit : grille monocolonne — bandeau (le bouton « Menu » s'y
   superpose, à gauche dans la carte : pas de place verticale perdue,
   retour Yves du 08/08/2026), latérale repliable, contenu (ordre
   visuel par placement, DOM inchangé) */
@media (max-width: 900px) {
  .corps,
  .corps.avec-laterale {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  .corps > .entete,
  .avec-laterale > .entete {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }
  /* même cellule que le bandeau : le bouton se pose DANS la carte,
     calé à gauche (le menu utilisateur vit à droite) ; z-index car il
     précède le bandeau dans le DOM (la case doit rester frère de la
     latérale), sans jamais recouvrir le déroulé du menu utilisateur */
  .laterale-bouton {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    /* retrait = marge du bandeau (1.5rem, menu.css) + padding interne
       de la carte (.8rem) ; sous 576 px le bandeau n'a plus de marge,
       voir le bloc en fin de fichier */
    margin: 0 0 0 2.3rem;
    z-index: 1;
  }
  /* les trois barres deviennent une croix quand le menu est déplié
     (en écran étroit : cochée = dépliée ; en bureau c'est l'inverse,
     voir le bloc min-width : la croix suit toujours « menu ouvert ») */
  .laterale-case:checked + .laterale-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .laterale-case:checked + .laterale-bouton span:nth-child(2) { opacity: 0; }
  .laterale-case:checked + .laterale-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .laterale,
  .avec-laterale > .laterale {
    display: none;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    position: static;
    min-height: 0;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--trait);
    padding-top: .6rem;
  }
  .laterale-case:checked ~ .laterale { display: flex; }
  .laterale-marque { min-height: 0; }
  .corps > main,
  .avec-laterale > main { grid-column: 1; grid-row: 3; }
}
/* très étroit : le bandeau perd sa marge (menu.css), le bouton ne garde
   que le padding interne de la carte */
@media (max-width: 575px) {
  .laterale-bouton { margin-left: .8rem; }
}