/* ==========================================================================
   temoins.css : témoins (Loi 25), bande finale du pied de page, plan du site.
   Module de la fonction B du lot 5, chargé par partials/tete.html après lessard.css (fusionné dans lessard.css à la fin).
   Il réutilise les composants de lessard.css (.temoins-bandeau, .dialogue, .voile, .categories, .interrupteur, .btn,
   .puces) ; ici, seulement ce qui s'y ajoute. Comportement : js/temoins.js. Marqueurs : build.py.

   Classes
   -------
   Témoins (partials/temoins.html, inséré avant la fin du corps par build.py)
   .temoins-racine           conteneur du bandeau, du voile, du panneau et de la zone d'annonce (rien n'est visible sans JS)
   .temoins-saut             lien d'évitement en tête de page, visible au focus, vers le bandeau (qui est en fin de document)
   .temoins-statut           zone d'annonce (lecteur d'écran) et cible du focus quand le bandeau disparaît
   html.a-bandeau-temoins    posée par le JS tant que le bandeau est visible ; --temoins-h = sa hauteur (bandeau + 24 px)
   html.temoins-marge-corps  idem, sur une page sans bande finale : la marge basse passe sur le corps
   html.temoins-ouvert       le panneau des préférences est ouvert : la page derrière ne défile pas

   Bande finale du pied de page (partials/pied.html)
   .pied--avec-bande         le pied de page n'a plus de marge basse : la bande finale touche le bas
   .pied-fin                 la bande blanche à filet clair, dernier élément de toute page : plus rien ne vient après
   .pied-fin__contenu        conteneur de 1200
   .pied-fin__liens          rangée des liens légaux ; chaque lien : a, ou .pied-fin__lien (bouton « Gérer mes témoins »)
   .pied-fin__filet          filet clair entre les liens et la dernière ligne
   .pied-fin__bas            droits d'auteur à gauche, responsable de la protection des renseignements personnels à droite
   Paires de contraste (mesurées avec contrast_check.py) : voir l'entête de la section « Bande finale ».

   Plan du site (pages/plan-du-site.html, marqueur <!--@plan-du-site-->)
   .plan-sommaire            rangée de puces (ancres) vers les sections
   .plan-section             une section (Services, Cliniques…) : titre, note facultative, grille
   .plan-grille              grille de pages, 3 colonnes (2 sous 1024, 1 en mobile)
   .plan-page                une carte : .plan-page__lien (titre + ↗) puis .plan-etats
   .plan-etats > li > a.plan-etat   les états de la page, en puces (cible de 44)
   ========================================================================== */

/* 1. Témoins ---------------------------------------------------------------- */
/* [hidden] doit l'emporter sur le display: flex / grid des composants */
.temoins-racine [hidden] { display: none !important; }

/* Au-dessus de la navigation et des méga-menus ; le panneau et son voile au-dessus de tout */
.temoins-racine .temoins-bandeau { z-index: 900; }
.temoins-racine .voile { z-index: 1000; }
.temoins-racine .dialogue { z-index: 1001; }
.temoins-racine .dialogue:focus, .temoins-bandeau:focus { outline: none; }
html.temoins-ouvert, html.temoins-ouvert body { overflow: hidden; }

/* Le bandeau ne masque jamais le contenu : la page garde une marge basse de sa hauteur */
html.a-bandeau-temoins .pied-fin { padding-bottom: calc(var(--pied-fin-bas) + var(--temoins-h, 0px)); }
html.temoins-marge-corps body { padding-bottom: var(--temoins-h, 0px); }

.temoins-saut {
  position: fixed; z-index: 1100; top: 12px; left: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); font: 600 14px/1 var(--police-texte);
  box-shadow: var(--o-bleue); transform: translateY(-160%);
}
.temoins-saut:focus-visible { transform: none; outline: 3px solid var(--accent-fonce); outline-offset: 2px; color: var(--sur-accent); }
.temoins-statut { outline: none; }

/* 2. Bande finale du pied de page ----------------------------------------------
   Bande blanche, filet clair en haut, dernier élément de toute page (aucun fond foncé dans le site).
   Paires de contraste (WCAG 2.2, calcul direct) :
     liens : encre2 #2B364D sur #FFFFFF = 11,5:1 ; droits d'auteur et ligne du responsable : encre3 #56657F sur #FFFFFF = 5,9:1 ;
     lien du responsable et survol : accent-foncé #1A55E0 sur #FFFFFF = 6,3:1 ; anneau de focus : accent-foncé (3:1 requis). */
.pied--avec-bande { padding-bottom: 0; }
.pied-fin {
  --pied-fin-bas: 28px;
  margin-top: 0; padding: 8px 0 var(--pied-fin-bas);
  background: #fff; color: var(--encre3); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.pied-fin__liens { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 32px; }
.pied-fin__liens a, .pied-fin__lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 14px/21px var(--police-texte); color: var(--encre2); text-decoration: underline; text-underline-offset: 3px;
}
.pied-fin__liens a:hover, .pied-fin__lien:hover, .pied-fin__bas a:hover { color: var(--accent-fonce); }
.pied-fin__filet { height: 1px; margin: 4px 0 16px; border: 0; background: transparent; }
.pied-fin__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font: 500 14px/21px var(--police-texte); color: var(--encre3); }
.pied-fin__bas a { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* 3. Plan du site ------------------------------------------------------------------ */
.plan-sommaire { margin-bottom: 56px; }
.plan-sommaire .puces { justify-content: flex-start; }
.plan-section { scroll-margin-top: 24px; }
.plan-section + .plan-section { margin-top: 72px; }
.plan-section__note { margin-top: 8px; max-width: 70ch; }
.plan-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.plan-page {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 24px;
  background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.plan-page__lien {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  font: 600 18px/1.3 var(--police-titre); color: var(--encre1); text-decoration: none;
}
.plan-page__lien .ico { color: var(--accent-fonce); }
.plan-page__lien:hover { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 4px; }
.plan-etats { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-etat {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pilule);
  background: var(--ciel); color: var(--accent-fonce); font: 500 14px/1.2 var(--police-texte); text-decoration: none; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.plan-etat:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }

/* 4. Intermédiaire et mobile -------------------------------------------------------- */
@media (max-width: 1023px) {
  .plan-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pied-fin { --pied-fin-bas: 28px; padding-top: 20px; }
  .pied-fin__liens { justify-content: flex-start; gap: 0 20px; }
  .pied-fin__bas { flex-direction: column; }
  .temoins-saut { top: 8px; left: 8px; }
  .plan-sommaire { margin-bottom: 40px; }
  .plan-section + .plan-section { margin-top: 56px; }
  .plan-grille { grid-template-columns: 1fr; gap: 16px; }
  .plan-page { padding: 8px 20px 20px; }
}