/* FICHIER GENERE par outils/identificateur.py --theme. Ne pas editer a la main. */
/* ================================================================
   L'IDENTIFICATEUR DE TEMOINS (accueil)

   Bloc AJOUTE. Il ne repeint aucune section existante : toutes ses
   regles sont prefixees `.hm-ident`, aucune n'est en !important.
   Deux exceptions documentees en bas de fichier.

   🔴 DEUX REGISTRES, ET C'EST LE MOTIF REEL DE L'ACCUEIL.
   `main > section:nth-of-type(n+2)` bascule toute section qui n'est
   pas le hero en fond beige avec texte sombre. Mais les BLOCS qui s'y
   posent restent noirs : mesure sur la prod, `.carte` vaut #141416 /
   texte #F5F3F0 / rayon 16px / ombre portee, `.tuile` vaut #0A0A0B.
   Donc :
     - l'habillage de section (titre, chapo, filtres, reserve) suit le
       registre clair, en variables contextuelles --texte / --bord ;
     - les vignettes et les panneaux sont NOIRS, en jetons absolus
       --hm-surface / --hm-texte / --hm-orange-vif, comme les cartes.
   Une premiere version peignait les vignettes en var(--surface), qui
   vaut blanc en section claire : elles etaient les seuls blocs blancs
   de la page.

   Sans JS, la grille et TOUS les panneaux restent lisibles : c'est
   `.js-ident` (posee par le script) qui bascule en mode interactif.
   ================================================================ */
.hm-ident{padding:clamp(3rem,7vw,5.5rem) 0}
.hm-ident .ident-entete{max-width:44rem;margin-bottom:2.2rem}
.hm-ident .ident-chapo{color:var(--texte-2);line-height:1.65;
  margin-top:.9rem;max-width:38rem}

/* --- Le filtre par famille, en CSS pur -----------------------------------
   Calque sur le catalogue de /modeles/ : des cibles de hauteur nulle portent
   l'etat, des <a> les visent, la feuille masque le reste. Consequence qui
   vaut le detour : LE FILTRE MARCHE SANS JAVASCRIPT, et l'etat vit dans
   l'URL, donc un filtre se partage par lien. */
.hm-ident .ident-zone{position:relative}
.hm-ident .ident-cible{display:block;height:0;overflow:hidden;
  scroll-margin-top:5.5rem}
.hm-ident .ident-barre{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin-bottom:1.6rem}
.hm-ident .ident-filtres{display:flex;flex-wrap:wrap;gap:.5rem}
.hm-ident .ident-f{display:inline-flex;align-items:center;gap:.35rem;
  font:600 .82rem/1 var(--hm-police-texte,Inter,system-ui,sans-serif);
  color:var(--texte-2);background:transparent;text-decoration:none;
  border:1px solid var(--bord-fort);border-radius:var(--radius-full,9999px);
  padding:.58rem .95rem;transition:var(--transition-fast,.15s ease)}
main section .hm-ident .ident-f:hover{color:var(--texte);
  border-color:var(--texte-2);text-decoration:none}
.hm-ident .ident-n{opacity:.7;font-variant-numeric:tabular-nums}

/* Etat actif. « Tous » l'est tant qu'aucune cible n'est visee : c'est le
   `:not(:has(...))` du theme, repris tel quel. */
.hm-ident .ident-zone:not(:has(.ident-cible:target)) .ident-f[href="#v-tous"],
.hm-ident #v-tous:target ~ .ident-barre .ident-f[href="#v-tous"],
.hm-ident #v-orange:target ~ .ident-barre .ident-f[href="#v-orange"],
.hm-ident #v-info:target ~ .ident-barre .ident-f[href="#v-info"]{
  color:#fff;background:var(--orange-vif);border-color:var(--orange-vif)}
.hm-ident #v-rouge:target ~ .ident-barre .ident-f[href="#v-rouge"]{
  color:#fff;background:#F5352A;border-color:#F5352A}

/* Le masquage. Grille ET panneaux : sans JS les panneaux sont tous
   deployes, ils doivent suivre le meme filtre que les vignettes. */
.hm-ident #v-rouge:target ~ .ident-grille .ident-case:not([data-famille="rouge"]),
.hm-ident #v-rouge:target ~ .ident-panneaux .ident-detail:not([data-famille="rouge"]),
.hm-ident #v-orange:target ~ .ident-grille .ident-case:not([data-famille="orange"]),
.hm-ident #v-orange:target ~ .ident-panneaux .ident-detail:not([data-famille="orange"]),
.hm-ident #v-info:target ~ .ident-grille .ident-case:not([data-famille="info"]),
.hm-ident #v-info:target ~ .ident-panneaux .ident-detail:not([data-famille="info"]){
  display:none}
.hm-ident .ident-rech-l{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.hm-ident .ident-rech{flex:1 1 12rem;min-width:10rem;
  font:400 .88rem/1 var(--hm-police-texte,Inter,system-ui,sans-serif);
  color:var(--texte);background:var(--surface);
  border:1px solid var(--bord-fort);border-radius:var(--radius-full,9999px);
  padding:.6rem 1rem}
.hm-ident .ident-rech::placeholder{color:var(--texte-2);opacity:.75}
.hm-ident .ident-rech:focus-visible{outline:2px solid var(--orange-vif);
  outline-offset:2px}

.hm-ident .ident-grille{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.7rem}
.hm-ident .ident-case{margin:0;padding:0}
.hm-ident .ident-case::before{content:none}

/* Les vignettes reprennent la carte du site, valeurs relevees sur la prod. */
.hm-ident .ident-vignette{width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;gap:.6rem;text-align:center;cursor:pointer;
  background:var(--hm-surface,#141416);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl,1rem);padding:1.05rem .7rem;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
  transition:var(--transition-fast,.15s ease)}
.hm-ident .ident-vignette:hover{border-color:var(--hm-orange-vif,#FF7A2E);
  background:var(--hm-surface-3,#26262A);transform:translateY(-2px)}
.hm-ident .ident-vignette:focus-visible{outline:2px solid var(--hm-orange,#F2600C);
  outline-offset:3px}
.hm-ident .ident-vignette[aria-expanded="true"]{
  border-color:rgba(242,96,12,.8);background:var(--hm-surface-3,#26262A)}
.hm-ident .ident-picto{width:2.4rem;height:2.4rem;flex:none}
/* 🔴 Le rouge doit se lire comme un rouge. Premiere version en #E0533C,
   un terracotta a 20 degres de teinte de l'orange #FF7A2E du site : a
   l'ecran les deux familles ne se distinguaient pas. #F5352A tranche. */
.hm-ident .ident-case[data-famille="rouge"] .ident-picto{color:#F5352A}
.hm-ident .ident-case[data-famille="orange"] .ident-picto{color:var(--hm-orange-vif,#FF7A2E)}
.hm-ident .ident-case[data-famille="info"] .ident-picto{color:var(--hm-texte-6,#C9C6C2)}
.hm-ident .ident-nom{font:600 .78rem/1.35 var(--hm-police-texte,Inter,system-ui,sans-serif);
  color:var(--hm-texte,#F5F3F0)}

/* Les panneaux. Hors JS ils s'empilent et se lisent tous : le contenu
   n'est jamais enferme dans le script. */
.hm-ident .ident-panneaux{margin-top:1rem;display:grid;gap:1rem}
.hm-ident .ident-detail{background:var(--hm-noir,#0A0A0B);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--hm-orange-vif,#FF7A2E);
  border-radius:var(--radius-xl,1rem);padding:1.3rem 1.5rem;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.hm-ident .ident-detail[data-famille="rouge"]{border-left-color:#F5352A}
.hm-ident .ident-detail[data-famille="info"]{border-left-color:var(--hm-texte-4,#7C7975)}
.hm-ident .ident-d-titre{font:700 1.06rem/1.35 var(--hm-police-titre,inherit);
  color:var(--hm-texte,#F5F3F0);margin:0 0 .7rem;display:flex;flex-wrap:wrap;
  gap:.6rem;align-items:baseline}
.hm-ident .ident-tag{font:700 .66rem/1 var(--hm-police-texte,Inter,system-ui,sans-serif);
  letter-spacing:.09em;text-transform:uppercase;padding:.3rem .55rem;
  border-radius:var(--radius-full,9999px);border:1px solid rgba(255,255,255,.18);
  color:var(--hm-texte-2,#9A9793)}
.hm-ident .ident-tag-rouge{border-color:rgba(245,53,42,.6);color:#F5352A}
.hm-ident .ident-tag-orange{border-color:rgba(255,122,46,.55);
  color:var(--hm-orange-vif,#FF7A2E)}
.hm-ident .ident-d-ligne{margin:0 0 .55rem;line-height:1.65;font-size:.94rem;
  color:var(--hm-texte-6,#C9C6C2)}
.hm-ident .ident-d-lib{display:block;font:700 .68rem/1 var(--hm-police-texte,Inter,system-ui,sans-serif);
  letter-spacing:.1em;text-transform:uppercase;color:var(--hm-texte-4,#7C7975);
  margin-bottom:.28rem}
.hm-ident .ident-d-intro{font-size:.8rem;color:var(--hm-texte-4,#7C7975);
  margin:1rem 0 .6rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.hm-ident .ident-d-liens{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.hm-ident .ident-d-liens li{margin:0;padding:0;line-height:1.6;font-size:.92rem;
  color:var(--hm-texte-2,#9A9793)}
.hm-ident .ident-d-liens li::before{content:none}
.hm-ident .ident-d-liens b{color:var(--hm-texte,#F5F3F0)}
.hm-ident .ident-verbatim{color:var(--hm-texte-2,#9A9793)}
.hm-ident .ident-sep{color:var(--hm-texte-5,#6E6B68);margin:0 .18rem}
.hm-ident .ident-d-liens a{color:var(--hm-orange-vif,#FF7A2E);
  text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hm-ident .ident-d-liens a:hover{color:var(--hm-texte,#F5F3F0)}

.hm-ident .ident-reserve{margin-top:1.6rem;font-size:.79rem;line-height:1.65;
  color:var(--texte-2);max-width:52rem}
.hm-ident .ident-reserve b{color:var(--texte)}
.hm-ident .ident-vide{display:none;color:var(--texte-2);
  font-size:.9rem;padding:1.2rem 0}

/* Mode interactif : pose par le script, jamais present dans le HTML servi. */
.hm-ident.js-ident .ident-detail{display:none}

/* LE PANNEAU S'OUVRE EN FENETRE, PAS EN BAS DE GRILLE.
   Les panneaux sont ecrits APRES la grille : c'est ce qui les rend lisibles
   sans JavaScript. Mais avec 50 temoins la grille fait plusieurs ecrans de
   haut, donc un panneau affiche a sa place tombait hors de vue et le clic
   semblait ne rien faire. En mode interactif on le sort du flux et on le
   centre. Sans JavaScript, rien de tout ceci ne s'applique : le panneau
   reste un article ordinaire, a sa place, sous la grille. */
.hm-ident.js-ident .ident-detail.ouvert{display:block;position:fixed;z-index:1001;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(36rem,calc(100vw - 2rem));max-height:min(82vh,44rem);overflow-y:auto;
  padding-right:3.2rem;box-shadow:0 30px 70px -18px rgba(0,0,0,.85)}
.hm-ident.js-ident .ident-detail.ouvert:focus{outline:none}
.hm-ident.js-ident .ident-detail.ouvert:focus-visible{
  outline:2px solid var(--hm-orange-vif,#FF7A2E);outline-offset:3px}

/* Le voile. Il ferme au clic et il coupe la grille du regard : sans lui, le
   panneau flotte au-dessus d'un damier de 50 pictogrammes. */
.hm-ident .ident-voile{display:none}
.hm-ident.js-ident .ident-voile.ouvert{display:block;position:fixed;inset:0;
  z-index:1000;background:rgba(0,0,0,.72);cursor:pointer}

/* SANS CETTE REGLE LE VOILE NE COUVRE PAS LA BARRE DE NAVIGATION.
   `main` porte `z-index:1`, ce qui en fait un contexte d'empilement : le
   `z-index:1000` du voile est alors compte A L'INTERIEUR de main, et main
   reste sous la barre, qui est en `z-index:50` sur le meme plan que lui.
   Mesure du 16/08 : elementFromPoint au milieu de la barre rendait un lien
   du menu alors que la fenetre etait ouverte, donc la barre restait
   cliquable a travers le voile. On remonte main le temps de l'ouverture. */
body.ident-fenetre main{position:relative;z-index:1000}

/* Le bouton de fermeture n'existe que si le script tourne : sans lui il n'y
   a pas de fenetre a fermer, donc pas de bouton a montrer. */
.hm-ident .ident-fermer{display:none}
/* Couleurs ECRITES, pas heritees. `var(--texte)` vaut #252422 sur ce site,
   soit du presque noir : sur le fond #0A0A0B du panneau, la croix ressortait
   a 1,2:1, donc invisible. Mesure du 16/08 sur la page servie. Le panneau
   impose son fond sombre, le bouton impose donc son encre claire. */
.hm-ident.js-ident .ident-fermer{display:flex;align-items:center;
  justify-content:center;position:absolute;top:.75rem;right:.75rem;
  width:2.1rem;height:2.1rem;padding:0;font:400 1.5rem/1 system-ui,sans-serif;
  color:#F2EFE9;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-full,9999px)}
.hm-ident.js-ident .ident-fermer:hover{border-color:var(--hm-orange-vif,#FF7A2E);
  color:var(--hm-orange-vif,#FF7A2E)}
.hm-ident.js-ident .ident-fermer:focus-visible{outline:2px solid var(--hm-orange-vif,#FF7A2E);
  outline-offset:2px}
@media (max-width:30rem){
.hm-ident.js-ident .ident-detail.ouvert{padding-right:2.9rem}
}
.hm-ident.js-ident .ident-case.masquee{display:none}
.hm-ident.js-ident .ident-vide.visible{display:block}
/* Au-dela de deux rangees, la grille se replie : en 390px les 50 temoins
   font 25 rangees, soit toute la page avant d'atteindre la suite. */
.hm-ident.js-ident .ident-case.repliee{display:none}
.hm-ident .ident-plus{display:none;margin-top:.9rem}
.hm-ident.js-ident .ident-plus{display:inline-flex;align-items:center;gap:.4rem;
  font:600 .84rem/1 var(--hm-police-texte,Inter,system-ui,sans-serif);
  color:var(--texte);background:transparent;cursor:pointer;
  border:1px solid var(--bord-fort);border-radius:var(--radius-full,9999px);
  padding:.65rem 1.1rem}
.hm-ident .ident-plus:hover{border-color:var(--orange-vif);color:var(--orange-vif)}

@media (max-width:640px){
  .hm-ident .ident-grille{grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr))}
  .hm-ident .ident-picto{width:2rem;height:2rem}
  .hm-ident .ident-detail{padding:1.1rem 1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .hm-ident .ident-vignette:hover{transform:none}
}

/* ----------------------------------------------------------------
   🔴 REPARATION D'UN EFFET DE BORD, mesure et non suppose.

   Le theme ferme la page par `main > section:nth-of-type(5)
   {border-bottom}`, un compte ABSOLU qui vaut « la derniere ». En
   inserant une section, on decale tout : mesure avant/apres, le filet
   de fin descendait de `index` (5e, derniere) a `dossiers` (devenue
   5e). Les deux regles ci-dessous rendent le filet a la derniere
   section, quel que soit leur nombre.

   Elles sont les SEULES du bloc a sortir du prefixe `.hm-ident`, parce
   qu'elles reparent ce que l'insertion casse ailleurs.
   ⚠ Le vrai correctif est dans le theme : `nth-of-type(5)` devrait
   s'ecrire `last-of-type`. Tant qu'il n'est pas fait, toute section
   ajoutee a l'accueil rouvrira le meme defaut. A arbitrer.
   ---------------------------------------------------------------- */
main > section:last-of-type{border-bottom:1px solid rgba(0,0,0,.1)}
main > section:nth-of-type(5):not(:last-of-type){border-bottom:0}