@font-face {
  font-family: "Protique";
  src: url("/polices/Protique-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Protique";
  src: url("/polices/Protique-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Unageo";
  src: url("/polices/Unageo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Unageo";
  src: url("/polices/Unageo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --marine: #16324a;
  --marine-clair: #23496b;
  --sauge: #2f6f62;
  --sauge-clair: #e6f0ee;
  --fond: #f7f8f6;
  --surface: #ffffff;
  --ligne: #dde3e1;
  --texte: #1c2624;
  --texte-att: #5c6a67;
}

* { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: Verdana, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}
/* Pousse le pied de page tout en bas de l'ecran meme quand le contenu de la
   page est trop court pour remplir la fenetre (la balise <main> absorbe
   l'espace restant). Le sticky sur .pied garde en plus le pied visible
   pendant le defilement quand le contenu depasse la fenetre. */
body > main { flex: 1 1 auto; width: 100%; }

h1, h2, h3 { font-weight: 700; }

.entete {
  background: var(--entete-fond, var(--marine));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Pas de max-width ici (retiré 2026-09-16) : .entete-contenu doit occuper
   toute la largeur de .entete, sans quoi .zone-connexion (repoussée à droite
   via margin-left:auto ci-dessous) reste flush avec le bord droit de cette
   largeur plafonnée au lieu du bord droit réel de l'écran — invisible sur un
   écran étroit, mais laissant une bande morte à droite en Full HD et plus. */
.entete-contenu {
  padding: 0.9rem 1.5rem;
  display: flex;
  /* Ligne de base plutôt que centré : l'identité connectée (#utilisateur-connecte,
     plus bas) doit reposer sur celle du sous-titre de l'application (.marque-libelle). */
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
}
/* Navigation croisée (.zone-connexion) repoussée à droite de la zone haute. */
.entete-contenu > .zone-connexion { margin-left: auto; }
/* Pied de page (2026-09-16) : affiché uniquement pour l'Administrateur et le
   Responsable QHSSE (seuls profils concernés par « Administrer » / « Mode
   lecteur », cf. commun.js rafraichirSession qui pose l'attribut `hidden`
   sur .pied selon le rôle) — masqué par défaut pour tout le monde via
   l'attribut `hidden` natif (pas de `display: none` ici, qui l'emporterait
   sur `hidden`). */
.pied {
  background: var(--entete-fond, var(--marine));
  color: #fff;
  position: sticky;
  bottom: 0;
  z-index: 50;
}
/* Pas de max-width ici non plus (retiré 2026-09-16) : même raison que
   .entete-contenu, cf. sa note ci-dessus. */
.pied-contenu {
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pied-gauche { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.pied-droite { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.marque { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; color: inherit; }
.marque-sigle {
  font-family: var(--titre-app-police, inherit);
  font-size: var(--titre-app-taille, 1.3rem);
  font-weight: var(--titre-app-poids, 700);
  color: var(--titre-app-couleur, inherit);
  letter-spacing: 0.03em;
}
.marque-libelle {
  font-family: var(--sous-titre-app-police, inherit);
  font-size: var(--sous-titre-app-taille, 0.95rem);
  font-weight: var(--sous-titre-app-poids, 400);
  color: var(--sous-titre-app-couleur, #cfe0d9);
}
.entete .bouton, .pied .bouton {
  font-family: var(--bouton-entete-police, inherit);
  font-size: var(--bouton-entete-taille, 0.9rem);
  font-weight: var(--bouton-entete-poids, 700);
}
.entete .bouton-contour, .pied .bouton-contour {
  background: var(--bouton-entete-fond, transparent);
  color: var(--bouton-entete-couleur, #fff);
}
/* Bouton actif (on est deja sur la page qu'il ouvre) : couleurs inversees par
   rapport au bouton normal — zone haute (navigation croisee, cf. apparence.js)
   et pied de page. */
.entete .bouton-contour.bouton-actif,
.pied .bouton-contour.bouton-actif {
  background: var(--bouton-entete-couleur, #fff);
  color: var(--bouton-entete-fond, #16324a);
  border-color: var(--bouton-entete-couleur, #fff);
}
.entete .bouton-contour.bouton-actif:hover,
.pied .bouton-contour.bouton-actif:hover { opacity: 0.85; }

.zone-connexion { display: flex; align-items: center; gap: 0.75rem; }
.utilisateur-connecte { font-size: 0.9rem; color: #cfe0d9; }

.bouton {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
}
.bouton[hidden] { display: none; }
.bouton-contour {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.bouton-contour:hover { background: rgba(255,255,255,0.12); }
/* Sur fond clair (hors bandeau sombre), le contour blanc est illisible : on bascule
   vers un contour fonce des que le bouton n'est pas dans .entete. */
main .bouton-contour, .fiche-document .bouton-contour, .boite-connexion .bouton-contour {
  border-color: var(--ligne);
  color: var(--marine);
}
main .bouton-contour:hover, .fiche-document .bouton-contour:hover, .boite-connexion .bouton-contour:hover {
  background: var(--sauge-clair); border-color: var(--sauge);
}
/* Boutons de contexte de la pop-up de visualisation (Processus / Procédure /
   Document / Généraux / Afficher la liste) : restent toujours affichés,
   celui dont la fiche est actuellement ouverte à gauche est mis en évidence
   (fond plein, comme .bouton-plein) au lieu de disparaître. */
.boite-connexion .bouton-contour.bouton-actif {
  background: var(--sauge);
  border-color: var(--sauge);
  color: #fff;
}
.boite-connexion .bouton-contour.bouton-actif:hover { opacity: 0.85; }
.bouton-plein {
  background: var(--sauge);
  color: #fff;
}
.bouton-plein:hover { background: #275a4f; }
/* Action irréversible (réinitialisation des bases de données, Fonctionnement >
   Informations système) : même gabarit qu'un bouton-contour, teinte reprise
   de .erreur pour signaler le risque. */
main .bouton-danger, .boite-connexion .bouton-danger { border-color: #a4392a; color: #a4392a; }
main .bouton-danger:hover, .boite-connexion .bouton-danger:hover { background: rgba(164,57,42,0.1); border-color: #a4392a; }

/* --- Rail de navigation vertical (droite) ------------------------------
   Barre fixe présente sur les pages principales quand les référentiels sont
   gérés (rail.js), contenant uniquement les boutons d'accès aux pages
   référentielles. Reprend les couleurs du bandeau. La navigation croisée de
   la zone haute et le pied de page ne sont pas concernés : mêmes règles,
   que le rail soit affiché ou non. */
:root { --rail-largeur: 270px; }
.rail-nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--rail-largeur);
  max-height: calc(100vh - 3rem);
  z-index: 60;
  background: var(--entete-fond, var(--marine));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0.9rem 1.2rem;
  overflow-y: auto;
}
.rail-nav .rail-groupe { display: flex; flex-direction: column; gap: 0.5rem; }
.rail-nav .rail-groupe[hidden] { display: none; }
.rail-nav .rail-bouton,
.rail-nav .bouton {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-family: var(--bouton-entete-police, inherit);
  font-size: var(--bouton-entete-taille, 0.9rem);
  font-weight: var(--bouton-entete-poids, 700);
}
.rail-nav .bouton-contour {
  background: var(--bouton-entete-fond, transparent);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--bouton-entete-couleur, #fff);
}
.rail-nav .bouton-contour:hover { background: rgba(255, 255, 255, 0.12); }
/* Page courante : couleurs inversées, comme le bouton de pied « actif ». */
.rail-nav .rail-bouton.rail-actif,
.rail-nav .bouton-contour.bouton-actif {
  background: var(--bouton-entete-couleur, #fff);
  color: var(--bouton-entete-fond, #16324a);
  border-color: var(--bouton-entete-couleur, #fff);
}
.rail-nav .rail-bouton.rail-actif:hover,
.rail-nav .bouton-contour.bouton-actif:hover { opacity: 0.85; }
/* Sépare « Gérer les référentiels » des boutons référentiels au-dessus :
   marge supplémentaire (hauteur d'un bouton, en plus de l'espacement habituel
   entre éléments du rail) puis un liseré clair. */
.rail-nav .rail-lisere-clair {
  height: 1px;
  margin-top: 1.7rem;
  background: rgba(255, 255, 255, 0.85);
}
.rail-nav .rail-lisere-clair[hidden] { display: none; }

/* Rail repliable : glissement doux hors écran + poignée ronde de rappel.
   N'a d'effet que si le JS de la page a posé #rail-poignee / body.rail-poignee-active
   (aujourd'hui : « Piloter mes processus » uniquement). */
.rail-nav { transition: transform 0.28s ease; }
#rail-poignee {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 61;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; padding: 0;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--entete-fond, var(--marine)); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: right 0.28s ease, background 0.15s ease;
  right: 0.35rem;
}
#rail-poignee:hover { background: #275a4f; }
body.rail-poignee-active #rail-poignee { display: inline-flex; }

/* Identité (+ fonction : Administrateur / Responsable QHSSE) de la personne
   connectée : dans la zone haute, juste après le titre de l'application,
   séparée par un espace — présente qu'il y ait ou non un rail (voir HTML,
   juste après .marque). Alignée sur la ligne de base du sous-titre de
   l'application (.marque-libelle), comme le reste de .entete-contenu
   (align-items: baseline, réglé plus haut). */
.entete #utilisateur-connecte {
  margin-left: 1.6rem;
  font-size: 0.9rem;
  color: #cfe0d9;
}
.entete #utilisateur-connecte[hidden] { display: none; }

@media (min-width: 900px) {
  /* Poignée collée au bord gauche du rail quand il est ouvert. Le rail ne
     réserve plus de place (flottant, centré verticalement, sans impact sur
     la zone haute ni le pied) : rien à ajuster côté body. */
  #rail-poignee { right: calc(var(--rail-largeur) - 1.1rem); }
  /* Rail replié : glisse hors écran (horizontalement — le centrage vertical
     de .rail-nav reste inchangé), la poignée reste au bord droit. */
  body.rail-replie #rail-poignee { right: 0.35rem; }
  body.rail-replie .rail-nav { transform: translate(100%, -50%); }
}
/* Sous 900px : le rail repasse en barre horizontale en bas de page. */
@media (max-width: 899px) {
  #rail-poignee { display: none !important; }
  .rail-nav {
    position: static;
    width: 100%;
    bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
  }
  .rail-nav .rail-groupe { flex-direction: row; flex-wrap: wrap; }
  .rail-nav .rail-bouton,
  .rail-nav .bouton { width: auto; }
}

.disposition-deux-cadres {
  max-width: 1520px;
  margin: 0;
  padding: 2.5rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(204px, 255px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.disposition-deux-cadres .cadre-gauche { position: sticky; top: 5.5rem; align-self: start; }
.disposition-deux-cadres .cadre-centre { max-width: 900px; width: 100%; margin: 0 auto; }
/* Fiche processus en mode Administration (QHSSE et ses processus, cf.
   qhsse.js construireFicheProcessusAdmin) : prend toute la largeur
   disponible (grille de documents plus riche qu'en mode lecteur) au lieu du
   plafond de 900px habituel. Classe posée/retirée en JS (afficherContenuCentre
   la retire par défaut à chaque rendu ; qhsse.js la repose pour cette fiche
   précisément). */
.disposition-deux-cadres .cadre-centre.cadre-large { max-width: none; }
/* Quand la zone centrale prend toute la largeur (cadre-large ci-dessus :
   affichage bloc en mode lecteur, ou liste détaillée en mode Administration),
   la page elle-même n'est plus plafonnée à 1520px : elle occupe toute la
   largeur de la fenêtre disponible, de façon dynamique (pas de valeur figée). */
.disposition-deux-cadres:has(> .cadre-centre.cadre-large) { max-width: none; }

/* --- En-têtes toujours visibles (menu gauche + zone centrale) --------------
   Le titre, la zone de recherche et le liseré du menu gauche restent en haut ;
   seule la liste des tuiles défile. Au centre (pages à deux cadres), la zone de
   titre + le liseré + le bouton « vue par types / hiérarchique » (s'il existe)
   restent en haut ; seul le contenu défile. Le budget de hauteur réserve
   7rem (zone haute + marge basse) PLUS la hauteur réelle du pied de page
   quand il est affiché (--hauteur-pied, posée en JS par commun.js
   actualiserHauteurPied — 0px pour tout le monde sauf Administrateur /
   Responsable QHSSE, seuls profils à voir le pied) : sinon le bas de ces
   cadres se retrouverait masqué par le pied, sticky lui aussi. */
.disposition-deux-cadres .cadre-gauche,
.disposition-admin .cadre-gauche,
.disposition-deux-cadres .cadre-centre {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  max-height: calc(100vh - 7rem - var(--hauteur-pied, 0px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.disposition-deux-cadres .cadre-centre { padding: 0; }
.cadre-gauche > #tuiles-navigation,
.cadre-gauche > #tuiles-admin,
.cadre-gauche > #liste-processus,
.disposition-deux-cadres .cadre-centre > #contenu-centre {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Menus latéraux (gauche + rail de droite) : défilement à la molette possible
   mais AUCUN ascenseur affiché. L'ascenseur reste réservé à la zone centrale. */
.cadre-gauche > #tuiles-navigation,
.cadre-gauche > #tuiles-admin,
.cadre-gauche > #liste-processus,
.rail-nav {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* anciennes Edge / IE */
}
.cadre-gauche > #tuiles-navigation::-webkit-scrollbar,
.cadre-gauche > #tuiles-admin::-webkit-scrollbar,
.cadre-gauche > #liste-processus::-webkit-scrollbar,
.rail-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* Menu gauche réduit (voir initialiserFlechesScrollListe, commun.js) : posé
   quand la liste de tuiles déborde de la hauteur disponible, avant même de
   recourir aux flèches ci-dessous. `zoom` et non `transform` : le contenu
   (titre, recherche, tuiles) se resserre pour libérer de la place, plutôt que
   d'être simplement mis à l'échelle en gardant son encombrement. `zoom`
   s'appliquant à la boîte elle-même (et non seulement à son contenu), la
   contrainte externe (`max-height`, liée au viewport) doit être compensée
   (divisée par le même facteur) pour que la boîte occupe réellement, à
   l'écran, toute la hauteur disponible au lieu de s'arrêter avant.
   Pourcentage réglable par l'administrateur (défaut 90 %, cf. --reduction-
   menu-gauche posée en JS depuis `reductionMenuGauche` de /api/parametrage). */
.cadre-gauche.cadre-gauche-reduit {
  zoom: var(--reduction-menu-gauche, 0.9);
  max-height: calc((100vh - 7rem - var(--hauteur-pied, 0px)) / var(--reduction-menu-gauche, 0.9));
}
/* Flèches ▲ / ▼ de #tuiles-navigation (voir commun.js) : même forme ronde que
   #rail-poignee — masquées par défaut, affichées en JS seulement si la liste
   déborde encore une fois le menu gauche réduit. La flèche du bas
   reste en flux normal, sous la liste ; celle du haut est posée en plein
   milieu (horizontale + verticale) du liseré de .zone-recherche, comme une
   poignée à cheval sur le trait. */
.fleche-scroll-liste {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--entete-fond, var(--marine)); color: #fff;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  transition: background 0.15s ease;
}
.fleche-scroll-liste:hover { background: #275a4f; }
.fleche-scroll-liste[hidden] { display: none; }
.fleche-scroll-bas { align-self: center; flex: 0 0 auto; margin: 0.3rem 0; transform: rotate(90deg); }
.zone-recherche { position: relative; }
.zone-recherche .fleche-scroll-haut {
  position: absolute; left: 50%; bottom: -0.85rem;
  transform: translateX(-50%) rotate(-90deg);
}
.disposition-deux-cadres .cadre-centre > #contenu-centre { padding: 0 1.5rem 1.5rem; }
/* En-tête figé de la zone centrale : afficherContenuCentre() regroupe le titre,
   le liseré et la barre de vue dans .entete-centre-fixe. */
.disposition-deux-cadres #contenu-centre > .entete-centre-fixe {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  margin: 0 -1.5rem;
  padding: 1.4rem 1.5rem 0.6rem;
}
.disposition-deux-cadres #contenu-centre > :not(.entete-centre-fixe):first-child { margin-top: 1.4rem; }
.disposition-deux-cadres #contenu-centre > .entete-centre-fixe > hr.separateur-fiche { margin-bottom: 0; }
.disposition-deux-cadres #contenu-centre > .entete-centre-fixe > .fp-documents-barre { margin-bottom: 0; }
/* Titre en haut du menu gauche (pages en lecture) : mis en forme par le
   paramétrage « Page › Titre des pages », appliqué via des variables CSS
   posées tôt par apparence.js — pas de re-style visible en JS. */
#titre-gauche {
  font-family: var(--titre-page-police, inherit);
  font-size: var(--titre-page-taille, 1.7rem);
  font-weight: var(--titre-page-poids, 700);
  color: var(--titre-page-couleur, var(--marine));
  /* Remonté : on récupère la marge haute par défaut du <h1>. */
  margin: 0 0 0.9rem;
}
@media (max-width: 700px) {
  .disposition-deux-cadres { grid-template-columns: 1fr; }
  .disposition-deux-cadres .cadre-gauche,
  .disposition-deux-cadres .cadre-centre {
    position: static;
    max-height: none;
    display: block;
    overflow: visible;
  }
  .disposition-deux-cadres .cadre-centre { padding: 1.5rem; }
  .disposition-deux-cadres .cadre-centre > #contenu-centre { padding: 0; overflow: visible; }
  .disposition-deux-cadres #contenu-centre > :not(.entete-centre-fixe):first-child { margin-top: 0; }
  .cadre-gauche > #tuiles-navigation { overflow: visible; }
  .disposition-deux-cadres #contenu-centre > .entete-centre-fixe {
    position: static; margin: 0; padding: 0;
  }
}

.disposition-accueil {
  margin: 0;
  padding: 4rem 1.5rem;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}
/* Les référentiels : sur une ligne à part, chaque bouton à la largeur de son
   libellé (pas étiré comme les trois cartes du dessus). */
.cartes-referentiels {
  max-width: 1520px; width: 100%;
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 1rem;
}
.carte-accueil.carte-referentiel {
  flex: 0 0 auto;
  max-width: none;
  padding: 1rem 1.75rem;
}
.carte-accueil.carte-referentiel h2 { margin: 0; }
/* Les cartes d'accueil : toutes à la même hauteur (celle de la plus haute). */
.cartes-accueil {
  max-width: 1520px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
}
.carte-accueil {
  flex: 1 1 320px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 3rem 2rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
/* `display: flex` ci-dessus prime sur l'attribut [hidden] de l'UA (page
   désactivée, cf. accueil.js) : on rétablit le masquage. */
.carte-accueil[hidden] { display: none; }
.carte-accueil:hover { border-color: var(--sauge); transform: translateY(-2px); }
.carte-accueil:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; }
.carte-accueil h2 { color: var(--marine); font-size: 1.4rem; margin: 0 0 0.5rem; }
.carte-accueil .sous-titre-frame { margin: 0; }

.disposition-admin {
  max-width: 1520px;
  margin: 0;
  padding: 2.5rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(170px, 221px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .disposition-admin { grid-template-columns: 1fr; }
}
.disposition-admin[hidden] { display: none; }
.disposition-admin .cadre-gauche { position: sticky; top: 5.5rem; align-self: start; }
.disposition-admin .cadre-gauche h1 { font-size: 1.3rem; }
.disposition-admin #tuiles-admin { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.disposition-admin .cadre-centre { max-width: 700px; width: 100%; margin: 0 auto; }
@media (max-width: 700px) {
  .disposition-admin .cadre-gauche {
    position: static; max-height: none; display: block; overflow: visible;
  }
  .disposition-admin .cadre-gauche > #tuiles-admin { overflow: visible; }
}
.etiquette-groupe {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texte-att); margin: 0.4rem 0 0;
}
.sous-tuiles { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0.75rem; margin-bottom: 0.3rem; }
.tuile-navigation.sous-tuile { padding: 0.65rem 0.9rem; }

.ligne-processus-admin {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--ligne);
}
.ligne-processus-admin:last-child { border-bottom: none; }
.ligne-processus-admin .ligne-principale-processus { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.ligne-processus-admin .nom-processus { font-weight: 700; color: var(--marine); }
.ligne-processus-admin .actions-item { display: flex; align-items: center; }
/* Liste des référentiels : le libellé est dans un sticker discret (taille
   réduite), la description passe sur la ligne du dessous, les boutons restent
   sur la ligne du sticker (poussés à droite). */
.ligne-processus-admin .numero.titre-referentiel { font-size: 0.82rem; padding: 0.18rem 0.55rem; }
.ligne-referentiel-carte .meta-inline { font-size: 0.72rem; }
.ligne-referentiel-carte .actions-item { margin-left: auto; }
.ligne-referentiel-carte .ref-carte-description {
  margin: 0.15rem 0 0; font-style: normal; color: var(--texte-att); font-size: 0.85rem;
}
/* Sticker de référence de rupture (ex. « Critère 1 ») : un peu plus grand que
   la pastille par défaut pour rester bien lisible dans la liste. */
.numero.sticker-rupture { font-size: 0.82rem; padding: 0.2rem 0.6rem; }
.ligne-processus-admin .intervenants-processus {
  display: flex; flex-direction: column; gap: 0.15rem;
  color: var(--texte-att); font-size: 0.8rem; font-style: italic;
}
.ligne-processus-admin .intervenants-processus[hidden] { display: none; }
/* Liste des processus (Administrateur) : un pavé (.bloc-admin) par processus,
   toujours déployé. Barre de titre au style « titre de pavé » (fond couleur de
   fond d'écran + liseré en dessous), puis les intervenants. */
.carte-processus-admin.bloc-admin { margin: 0; }
.carte-processus-admin .ligne-principale-processus {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
/* Seul le libellé du processus est encadré sur la couleur de fond d'écran. */
.carte-processus-admin .nom-processus {
  font-weight: 700; color: var(--marine);
  background: var(--fond, #f7f8f6);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
}
.carte-processus-admin .actions-item { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.carte-processus-admin .intervenants-processus {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin-top: 0.7rem; color: var(--texte-att); font-size: 0.8rem;
}
/* Liste des référentiels : espace avant la liste des points même sans
   description saisie (la marge de .description-processus ne suffit pas
   puisqu'elle n'existe pas dans ce cas). Rien en italique dans cette liste. */
.ligne-processus-admin .intervenants-referentiel { margin-top: 0.6rem; font-style: normal; font-size: 0.88rem; }
/* Liste des référentiels (Administrateur / Responsable QHSSE) : un cadre
   (.bloc-admin) par référentiel, replié par défaut. Le cadre remplace le
   padding/bordure de liste de .ligne-processus-admin. */
#liste-referentiels { display: flex; flex-direction: column; gap: 0.8rem; }
.ligne-referentiel-carte.bloc-admin {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  margin: 0;
}
/* Liseré + petit espace après le descriptif, visible seulement quand la carte
   est développée. */
.ref-carte-lisere { margin: 0.7rem 0 0.2rem; border-top: 2px solid var(--sauge); }
.ref-carte-lisere[hidden] { display: none; }
/* Alignement du libellé des points sur celui de la rupture (critère) : la
   colonne « code » (sticker de rupture / référence de point) a une largeur
   minimale, réduite de l'indentation pour les points, pour que la colonne
   du libellé démarre au même endroit sur les deux lignes. */
.ligne-critere-lecture { display: flex; align-items: baseline; gap: 0.5rem; }
.ligne-critere-lecture > .sticker-rupture { flex: 0 0 auto; min-width: 5rem; }
.ligne-point-lecture { display: flex; align-items: baseline; gap: 0.5rem; }
.ligne-point-lecture > strong { flex: 0 0 auto; min-width: 4.05rem; }
/* Liseré entre deux critères (quand il y en a plusieurs) : part de la fin de
   la zone réservée au libellé du critère (même largeur que le sticker,
   cf. .sticker-rupture) et court jusqu'au bord droit, comme le liseré entre
   blocs « procédure » dans les listes hiérarchiques des processus. */
.bloc-critere-lecture { position: relative; }
.bloc-critere-lecture:not(:first-child) { margin-top: 0.7rem; padding-top: 0.7rem; }
.bloc-critere-lecture:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5.6rem;
  right: 0;
  border-top: 1px solid var(--ligne);
}
.ligne-principale-processus .description-processus { margin: 0; }

.cadre-centre {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1.5rem;
  min-height: 260px;
}

h1 {
  font-size: 1.7rem;
  max-width: 48ch;
  text-wrap: balance;
  margin: 0 0 0.6rem;
  color: var(--marine);
}
.intro {
  color: var(--texte-att);
  max-width: 62ch;
  margin: 0 0 2rem;
}
.sous-titre-frame {
  font-size: 0.85rem;
  color: var(--texte-att);
  margin: -0.4rem 0 1.2rem;
}

.zone-recherche {
  margin: 0 0 0.7rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--sauge);
}
.zone-recherche input {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
}
.zone-recherche input:focus { outline: 2px solid var(--sauge); outline-offset: 1px; }

.compte-resultats {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte-att);
  margin: 0 0 0.75rem;
}

.numero {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sauge);
  background: var(--sauge-clair);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

#tuiles-navigation { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.65rem; }
/* QHSSE seulement : #tuiles-processus reçoit le contenu régénéré par
   afficherProcessusEtDocuments(), à l'intérieur de #tuiles-navigation —
   même mise en page que l'ancien #tuiles-navigation à plat. */
#tuiles-processus { display: flex; flex-direction: column; gap: 0.85rem; }
.tuile-navigation {
  background: var(--tuile-fond, var(--surface));
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  /* Hauteur / largeur paramétrables (vide = auto). */
  min-height: var(--tuile-hauteur, auto);
  width: var(--tuile-largeur, auto);
}
/* `display: flex` ci-dessus prime sur l'attribut [hidden] de l'UA : on rétablit
   le masquage pour pouvoir cacher une tuile en JS (ex. onglet « Référentiels »
   quand l'option « Gérer les référentiels » est décochée). */
.tuile-navigation[hidden] { display: none; }
.tuile-navigation:hover { border-color: var(--sauge); }
.tuile-navigation:focus-visible { outline: 2px solid var(--sauge); outline-offset: 2px; }
.tuile-navigation.selectionnee { border-color: var(--sauge); background: var(--sauge-clair); }
.tuile-navigation .nom-tuile {
  font-family: var(--tuile-police, inherit);
  font-size: var(--tuile-taille, 0.98rem);
  font-weight: var(--tuile-poids, 700);
  color: var(--tuile-couleur, var(--marine));
  flex: 1 1 auto;
}

/* Picto de nouveauté : un simple point rouge, inséré en dernier enfant de
   l'élément qui porte le libellé, donc affiché à la suite du texte, sur la
   même ligne (jamais au-dessus ni en chevauchement de la dernière lettre) —
   centré verticalement sur la ligne. Tailles en `em` pour suivre la taille
   de police du libellé porteur. */
.picto-nouveaute {
  display: inline-block;
  margin-left: 0.35em;
  width: 0.5em;
  height: 0.5em;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: #d1382c;
  vertical-align: middle;
}
.entete-centre {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.4rem;
}
.entete-centre h2 {
  margin: 0; color: var(--titre-central-couleur, var(--marine));
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.15rem);
  font-weight: var(--titre-central-poids, 700);
}
/* Titre de la zone de visualisation sur « Les formulaires » / « La vie du GID »
   (clic sur un bouton de catégorie) : mise en forme « Titre des pages », posée
   sur le fond de la ligne de titre (paramétrage « Zone centrale › Titre »). */
.entete-centre.entete-titre-page {
  background: var(--titre-central-fond, var(--sauge-clair));
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}
.entete-centre.entete-titre-page h2 {
  font-family: var(--titre-page-police, inherit);
  font-size: var(--titre-page-taille, 1.7rem);
  font-weight: var(--titre-page-poids, 700);
  color: var(--titre-page-couleur, var(--marine));
}
/* Mode lecteur (« Le QHSE et ses processus ») : seule la ligne du titre
   (numéro + libellé) est sur fond légèrement grisé ; la description est en
   dessous, sur le fond normal. Le liseré n'est pas ici mais sous la
   description, porté par la barre de bascule de vue (cf. .barre-lecteur). */
.entete-lecteur { margin: 0 0 0.4rem; }
.entete-lecteur .entete-centre {
  background: var(--titre-central-fond, var(--sauge-clair));
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  margin: 0;
}
/* Référence du processus dans l'en-tête lecteur : même taille que le « détail »
   de la zone centrale (paramétrage administrateur), en gras. */
.entete-lecteur .entete-centre .numero {
  font-size: var(--detail-taille, 0.72rem);
  font-weight: 700;
}
.description-processus {
  font-size: 0.88rem;
  color: var(--texte-att);
  margin: 0 0 1.1rem;
}
.entete-lecteur .description-processus { margin: 1rem 0 0; padding-left: 0.9rem; }

.groupe-documents + .groupe-documents { margin-top: 0.75rem; }
.groupe-documents h4 {
  display: inline-block;
  font-family: var(--groupe-police, inherit);
  font-size: var(--groupe-taille, 0.72rem);
  font-weight: var(--groupe-poids, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sauge);
  background: var(--sauge-clair);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin: 0 0 0.5rem;
}
.groupe-documents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.groupe-documents li {
  font-family: var(--detail-police, inherit);
  font-size: var(--detail-taille, 0.85rem);
  font-weight: var(--detail-poids, 400);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  margin: -0.2rem -0.35rem;
  border-radius: 6px;
}
.groupe-documents li:hover { background: var(--sauge-clair); }
.groupe-documents li.selectionne { background: var(--sauge-clair); }
.actions-item { margin-left: auto; display: flex; gap: 0.3rem; }
.bouton-icone {
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--ligne);
  border-radius: 5px;
  background: var(--surface);
  color: var(--marine);
  cursor: pointer;
}
.bouton-icone:hover { border-color: var(--sauge); background: var(--sauge-clair); }
.groupe-documents .code {
  font-family: ui-monospace, Consolas, monospace;
  /* Taille du « détail » de la zone centrale (paramétrage administrateur),
     comme les autres textes de la liste ; la référence reste toujours en gras. */
  font-size: var(--detail-taille, 0.85rem);
  color: var(--sauge);
  font-weight: 700;
}
.groupe-documents .meta { font-size: 0.76rem; color: var(--texte-att); }

/* Listes de documents en mode lecteur (« Le QHSE et ses processus », « La vie
   du GID », « Les formulaires ») : référence et libellé alignés en deux
   colonnes sur toute la liste (largeur de la colonne référence = la plus
   longue de la liste), quel que soit le type de document ou le groupe —
   même principe que les tableaux de bord (.tb-documents), en deux colonnes.
   display:contents en cascade sur .groupe-documents / ul / li pour que
   toutes les lignes partagent la même grille. Pas d'espace entre colonnes
   (column-gap:0) : l'espacement vient du padding de chaque cellule, pour un
   survol visuellement continu malgré display:contents (le <li> lui-même ne
   génère plus de boîte propre — :hover reste actif via ses enfants, on
   colore donc chaque cellule). On ne touche pas à .tb-documents (tableaux de
   bord administrateur / responsable QHSE / pilote), déjà correct. */
.liste-documents-lecteur {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0; row-gap: 0.45rem;
  align-items: baseline;
}
.liste-documents-lecteur > .groupe-documents,
.liste-documents-lecteur > .groupe-documents > ul,
.liste-documents-lecteur > .groupe-documents > ul > li { display: contents; }
.liste-documents-lecteur > .groupe-documents > h4 { grid-column: 1 / -1; justify-self: start; }
.liste-documents-lecteur .code,
.liste-documents-lecteur .ref-num,
.liste-documents-lecteur .titre-doc-lecteur,
.liste-documents-lecteur .tb-titre {
  cursor: pointer; padding: 0.2rem 0; box-sizing: border-box;
}
.liste-documents-lecteur .code { padding-left: 0.35rem; padding-right: 0.6rem; white-space: nowrap; border-radius: 6px 0 0 6px; }
.liste-documents-lecteur .titre-doc-lecteur,
.liste-documents-lecteur .tb-titre { padding-right: 0.35rem; border-radius: 0 6px 6px 0; }
.liste-documents-lecteur li:hover > *,
.liste-documents-lecteur li.selectionne > * { background: var(--sauge-clair); }
/* « Les formulaires » uniquement : référence à droite plutôt qu'à gauche —
   colonnes inversées (libellé flexible en premier, référence compacte en
   second). Le DOM est déjà dans cet ordre pour cette page (cf.
   ligneDocumentFormulaires, formulaires.js) : la grille display:contents
   ci-dessus exige un ordre de colonnes croissant dans le DOM pour apparier
   correctement chaque paire sur une même ligne — un CSS de réordonnancement
   seul (order, grid-column) ne suffit pas, testé et écarté. La vie du GID, avec
   son propre rendu de ligne, n'est pas concernée. */
.page-formulaires .liste-documents-lecteur { grid-template-columns: 1fr max-content; }
.page-formulaires .liste-documents-lecteur .code {
  padding-left: 0.6rem; padding-right: 0.35rem;
  border-radius: 0 6px 6px 0;
}
.page-formulaires .liste-documents-lecteur .titre-doc-lecteur {
  grid-column: 1;
  padding-left: 0.35rem; padding-right: 0;
  border-radius: 6px 0 0 6px;
}

/* « La vie du GID » (et « Nouveaux documents »/« Nouvelles versions ») : 3
   colonnes — référence, libellé, date de dépôt — et un en-tête de bloc avec
   des boutons de tri (libellé/date). Le point rouge de nouveauté (même picto
   que sur les boutons) chevauche la dernière lettre du libellé, dans sa
   cellule (cf. .picto-nouveaute) — plus de colonne dédiée. */
.liste-documents-lecteur.avec-date { grid-template-columns: max-content 1fr max-content; }
.liste-documents-lecteur.avec-date .titre-doc-lecteur { border-radius: 0; }
.liste-documents-lecteur.avec-date .date-depot { padding-right: 0.35rem; border-radius: 0 6px 6px 0; }
/* Vue hiérarchique de « La vie du GID » : mêmes 3 colonnes que ci-dessus — la
   règle .tb-documents-arbo (3 colonnes différentes, sans date) ne doit pas
   s'appliquer quand les deux classes sont combinées sur le même bloc. */
.liste-documents-lecteur.tb-documents-arbo.avec-date { grid-template-columns: max-content 1fr max-content; }
.liste-documents-lecteur .date-depot {
  cursor: pointer; padding: 0.2rem 0.7rem 0.2rem 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem; color: var(--texte-att);
}
.tri-bloc { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; flex: 0 0 auto; }
.bouton-mini.tri-vie-gid { font-size: 0.68rem; padding: 0.12rem 0.5rem; }
.bouton-mini.tri-vie-gid.actif {
  background: var(--sauge); color: #fff; border-color: var(--sauge);
}
/* Barre de tri unique, au-dessus des blocs (boutons poussés à droite). */
.fp-documents-barre.barre-tri-vie-gid { margin: 0 0 0.75rem; justify-content: flex-end; }
/* « du » puis la date en gras, sur la ligne du document. */
.liste-documents-lecteur .date-depot strong { font-weight: 700; }

/* Mode lecteur (fiche processus) : chaque type — en vue par types — et chaque
   document directement rattaché au processus avec ses sous-documents — en vue
   hiérarchique — dans un bloc encadré. */
.docs-blocs-lecteur { display: flex; flex-direction: column; gap: 0.7rem; }
.doc-bloc-lecteur {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
.doc-bloc-lecteur.tb-documents-arbo { overflow: hidden; }

/* Affichage « bloc » de la liste centrale (mode lecteur, Les formulaires /
   La vie du GID — Fonctionnement > Format d'affichage) : alternative à
   .liste-documents-lecteur (une <ul> par groupe de type). Grille de cartes
   de largeur fixe (--largeur-carte-lecteur) : autant de colonnes que la
   largeur disponible le permet, toujours de même largeur (repeat(auto-fill,
   minmax(...)) — technique standard pour ce comportement), sans ligne
   incomplète étirée bizarrement grâce au 1fr. Spécificité : cette <ul> est
   toujours dans .groupe-documents, dont la règle générique (.groupe-documents
   ul { display:flex... }, ci-dessus) l'emporterait sinon (0,1,1 > 0,1,0) —
   sélecteur composé ici pour repasser devant. */
.groupe-documents .grille-cartes-lecteur {
  --largeur-carte-lecteur: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--largeur-carte-lecteur), 1fr));
  gap: 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Sélecteur composé (comme .grille-cartes-lecteur ci-dessus) : cette <li> est
   aussi visée par la règle générique .groupe-documents li (padding, margin,
   align-items: baseline, ci-dessous) qui l'emporterait sinon (0,1,1 > 0,1,0),
   cassant entre autres le débord du titre en pleine largeur (cf. .carte-titre)
   calculé sur le padding déclaré ici. */
.groupe-documents .doc-carte-lecteur {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  margin: 0;
  cursor: pointer;
  background: var(--surface);
}
.groupe-documents .doc-carte-lecteur:hover, .groupe-documents .doc-carte-lecteur.selectionne {
  background: var(--sauge-clair);
  border-color: var(--marine);
}
.doc-carte-lecteur .carte-titre {
  display: block;
  font-weight: 700; color: var(--marine); font-size: 0.95rem;
  background: var(--fond); border-radius: 7px 7px 0 0;
  /* Déborde jusqu'aux bords de la carte (annule le padding de
     .doc-carte-lecteur) : le fond gris couvre toute la largeur du bloc,
     pas seulement la largeur du texte. */
  margin: -0.8rem -0.9rem 0;
  padding: 0.5rem 0.9rem;
}
.doc-carte-lecteur .carte-date { font-size: 0.85rem; color: var(--texte-att); }
/* Alignée à gauche (défaut), en bas du bloc : margin-top:auto absorbe tout
   l'espace restant dans la carte (flex column) pour repousser la référence
   au plus bas — utile quand plusieurs blocs d'une même ligne de grille ont
   une hauteur différente (grille étirant chaque <li> à la hauteur du plus
   haut, cf. .grille-cartes-lecteur), afin que toutes les références de la
   ligne s'alignent en bas, à la même hauteur. padding-top garantit un espace
   minimum avec la date au-dessus même quand ce bloc est déjà le plus haut de
   sa ligne (margin auto alors nul). */
.doc-carte-lecteur .carte-reference {
  font-size: 0.85rem; color: var(--texte);
  margin-top: auto;
  padding-top: 1.1rem;
}
.doc-carte-lecteur .carte-reference-valeur {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--sauge); font-weight: 700;
}

/* Page « Référentiel » (mode lecteur) : un critère sélectionné affiche ses
   points, chacun dans un bloc encadré (référence + libellé + commentaire),
   suivi des documents qui le couvrent (regroupés par type). */
.ref-point-bloc {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ref-point-bloc:last-child { margin-bottom: 0; }
/* Point ouvert depuis un résultat de recherche : mise en évidence brève. */
.ref-point-bloc.surligne-point {
  border-color: var(--sauge);
  box-shadow: 0 0 0 3px var(--sauge-clair);
}
/* Ligne d'un point dans les résultats de recherche (page référentiel). */
.ref-point-resultat { cursor: pointer; }
.ref-point-tete {
  display: flex; align-items: flex-start; gap: 0.6rem;
  cursor: pointer;
}
/* Sticker (colonne fixe) + libellé (colonne qui s'enroule sur elle-même) : un
   libellé trop long reste À DROITE du sticker et aligné sur les autres, jamais
   renvoyé sous la numérotation. */
.ref-point-tete-txt {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.ref-point-tete .numero {
  font-size: 0.8rem; padding: 0.18rem 0.6rem;
  flex: 0 0 auto; min-width: 3rem;
  display: inline-flex; justify-content: center;
}
.ref-point-libelle { font-weight: 700; color: var(--marine); flex: 1 1 0; min-width: 0; }
.ref-point-commentaire { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--texte-att); }
.ref-point-bloc .docs-blocs-lecteur { margin-top: 0.8rem; }
.ref-point-bloc .ref-point-vide { margin: 0.7rem 0 0; }
/* Bloc de point réductible : flèche basse (réduit) / flèche haute (développé). */
.ref-point-bascule {
  flex: 0 0 auto;
  width: 1.7rem; height: 1.7rem; border-radius: 6px;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--marine);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; line-height: 1;
}
.ref-point-tete:hover .ref-point-bascule { background: var(--fond); }
.ref-point-tete:focus-visible { outline: 2px solid var(--sauge); outline-offset: 2px; }
.ref-point-bascule::before { content: "\25B2"; }            /* ▲ développé */
.ref-point-bloc.reduit .ref-point-bascule::before { content: "\25BC"; }  /* ▼ réduit */
.ref-point-corps { margin-top: 0.8rem; }
.ref-point-corps > :first-child { margin-top: 0; }
.ref-point-bloc.reduit .ref-point-corps { display: none; }
.ref-point-bloc.reduit { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* Vue hiérarchique (mode lecteur) : trois colonnes — [sticker + picto ↳, décalé
   selon la profondeur] | [référence, alignée sur toutes les lignes] | [libellé,
   aligné]. Les décalages hiérarchiques restent visibles dans la 1re colonne ;
   références et libellés forment chacun une colonne. */
.liste-documents-lecteur.tb-documents-arbo { grid-template-columns: max-content max-content 1fr; }
.liste-documents-lecteur.tb-documents-arbo .code { border-radius: 6px 0 0 6px; }
.liste-documents-lecteur.tb-documents-arbo .code .type-puce { margin-right: 0; }
.liste-documents-lecteur.tb-documents-arbo .ref-num {
  padding-right: 0.7rem; padding-left: 0.4rem; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--detail-taille, 0.85rem);
  font-weight: 700;
  color: var(--sauge);
}
/* Vue hiérarchique : le surlignage de la ligne (survol / sélection) épargne la
   cellule du sticker de type — le sticker garde son propre fond et n'est pas
   recouvert. Le surlignage commence à la colonne de la référence. */
.liste-documents-lecteur.tb-documents-arbo li:hover > .code,
.liste-documents-lecteur.tb-documents-arbo li.selectionne > .code {
  background: transparent;
}
.liste-documents-lecteur.tb-documents-arbo li:hover > .ref-num,
.liste-documents-lecteur.tb-documents-arbo li.selectionne > .ref-num {
  border-radius: 6px 0 0 6px;
}

.liste-actualites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.liste-actualites li {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  cursor: pointer;
}
.liste-actualites li:hover,
.liste-actualites li.selectionne { border-color: var(--sauge); background: var(--sauge-clair); }
.liste-actualites .titre-actu { font-weight: 700; font-size: 0.92rem; margin: 0 0 0.25rem; }
.liste-actualites .date-actu { font-size: 0.78rem; color: var(--texte-att); }

.fiche-document .code {
  display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--sauge);
  background: var(--sauge-clair);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.fiche-document h2 { margin: 0 0 0.5rem; color: var(--marine); font-size: 1.25rem; }
.fiche-document .meta { font-size: 0.88rem; color: var(--texte-att); margin: 0 0 1.5rem; }
.fiche-document label { display: block; font-size: 0.85rem; font-weight: 700; margin: 0.9rem 0 0.3rem; }
.fiche-document label[hidden] { display: none; }
.fiche-document input[type="text"] {
  width: 100%; font-family: inherit; font-size: 0.95rem;
  padding: 0.5rem 0.65rem; border: 1px solid var(--ligne); border-radius: 6px;
}
.fiche-document .apercu-a-venir {
  border: 1px dashed var(--ligne);
  border-radius: 8px;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--texte-att);
  font-size: 0.88rem;
}
.page-document { max-width: 1000px; }

.bloc-admin {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}
.bloc-admin h2 { margin: 0 0 0.9rem; color: var(--marine); font-size: 1.05rem; }
/* Pavés repliables (« Libellés et mise en forme ») : titre + bouton chevron
   visibles, corps masqué par défaut. */
.bloc-entete-repliable { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; }
.bloc-entete-repliable h2 { margin: 0; }
.bloc-bascule {
  flex: 0 0 auto;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--marine);
  border-radius: 6px; font-size: 0.75rem; line-height: 1;
  padding: 0.3rem 0.7rem; cursor: pointer;
}
.bloc-bascule:hover { border-color: var(--sauge); background: var(--sauge-clair); }
.bloc-corps { margin-top: 0.9rem; }

/* Bloc « Options » (Fonctionnement) : une sous-entrée par option, empilées à la
   verticale — titre, case à cocher, texte d'aide. */
.bloc-option { margin: 0 0 1.1rem; }
.bloc-option:last-child { margin-bottom: 0; }
.bloc-option h3 { margin: 0 0 0.35rem; color: var(--marine); font-size: 0.95rem; }
.bloc-option .ligne-option { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0; }
.bloc-option .ligne-option input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.bloc-option .meta { margin: 0.35rem 0 0; }

/* Option « Gérer les utilisateurs » décochée : plus de création / suppression
   d'utilisateur (le serveur applique la même règle). */
#section-utilisateurs.gestion-utilisateurs-off #bouton-creer-utilisateur,
#section-utilisateurs.gestion-utilisateurs-off #liste-utilisateurs [data-action="supprimer"] {
  display: none;
}

/* Bloc « Profil » (Fonctionnement) : choix de l'Administrateur / du
   Responsable QHSSE parmi les utilisateurs actifs. */
.champs-profil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0.7rem 0 0.9rem;
}
.champs-profil label { display: block; font-size: 0.82rem; color: var(--texte-att); margin: 0 0 0.2rem; }
.champs-profil select { width: 100%; }

/* Bloc « Messagerie » (Fonctionnement). */
.champs-messagerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0.7rem 0 0.9rem;
}
.champs-messagerie label { display: block; font-size: 0.82rem; color: var(--texte-att); margin: 0 0 0.2rem; }
.champs-messagerie input { width: 100%; }
/* Cases à cocher alignées à gauche, en colonne. */
.coches-messagerie { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin: 0.2rem 0 0.9rem; }
.coches-messagerie label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0; }
.coches-messagerie input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.bloc-fichier-messagerie { margin: 0.9rem 0 0; }
.bloc-fichier-messagerie > label { display: block; font-weight: 700; color: var(--marine); font-size: 0.9rem; margin: 0 0 0.35rem; }
.ligne-fichier { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ligne-fichier .bouton { font-size: 0.78rem; padding: 0.35rem 0.8rem; }
.apercu-logo-mail {
  display: block; margin-top: 0.6rem; max-width: 260px; max-height: 120px;
  border: 1px solid var(--ligne); border-radius: 8px; padding: 0.4rem; background: #fff;
}

/* Petit bandeau flottant de confirmation (toast) : apparaît puis s'efface. */
.toast-appli {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  background: var(--marine);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2000;
  pointer-events: none;
  max-width: min(90vw, 480px);
}
.toast-appli.visible { opacity: 1; }
.toast-appli.avertissement { background: #f5a623; color: #000; }
/* Style « titre de pavé » : ligne du titre sur la couleur de fond d'écran,
   un petit espace, puis un liseré. Commun à tous les pavés de « Libellés et
   mises en forme ». */
.titre-pave {
  background: var(--fond, #f7f8f6);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
}
.titre-pave-lisere {
  margin-top: 0.45rem;
  border-top: 2px solid var(--sauge);
}
.bloc-admin label { display: block; font-size: 0.85rem; font-weight: 700; margin: 0.7rem 0 0.3rem; }
.bloc-admin label[hidden] { display: none; }
.bloc-admin input[type="text"], .bloc-admin input[type="email"], .bloc-admin input[type="password"], .bloc-admin select, .bloc-admin textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem;
  padding: 0.5rem 0.65rem; border: 1px solid var(--ligne); border-radius: 6px;
  background: var(--surface); color: var(--texte);
}
.bloc-admin textarea { min-height: 6rem; resize: vertical; line-height: 1.4; }

/* Choix du mode de recherche (Administration › Fonctionnement). */
.choix-mode-recherche { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.7rem; }
.choix-mode-recherche > label {
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin: 0; padding: 0.75rem 0.9rem;
  border: 1px solid var(--ligne); border-radius: 8px;
  font-weight: 400; cursor: pointer;
}
.choix-mode-recherche > label:hover { border-color: var(--sauge); }
.choix-mode-recherche > label:has(input:checked) { border-color: var(--sauge); background: var(--sauge-clair); }
.choix-mode-recherche > label.mode-desactive { opacity: 0.55; cursor: not-allowed; }
.choix-mode-recherche input[type="radio"] { width: auto; margin: 0.15rem 0 0; flex: 0 0 auto; }
.choix-mode-recherche strong { color: var(--marine); }
.choix-mode-recherche .meta { display: block; margin: 0.15rem 0 0; }
/* Fiche référentiel : description sur 2 lignes par défaut (s'agrandit à la
   saisie via .textarea-auto, cf. commun.js). */
#ref-description { min-height: 3.6rem; }
/* Fiche processus (administrateur et pop-up pilote / QHSE) : zone de description
   deux fois moins haute. */
#pr-description, #mep-description { min-height: 3rem; }
#bouton-enregistrer-parametrage { margin: 0 0 2.5rem; }

/* En-tête d'un processus (numéro + libellé) : fiche pilote et blocs de la liste
   QHSE. Mise en forme « Titre des pages » (pavé Page du paramétrage) ; le mot
   « Processus » est porté par le titre de section, plus ici. Sélecteur qualifié
   par .fp-entete-ligne pour passer devant .bloc-admin h2 (fiche pilote). */
.fp-entete-processus { margin: 0 0 0.6rem; }
.fp-entete-ligne { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fp-entete-ligne .fp-entete-processus {
  margin: 0;
  color: var(--titre-page-couleur, var(--marine));
  font-family: var(--titre-page-police, inherit);
  font-size: var(--titre-page-taille, 1.15rem);
  font-weight: var(--titre-page-poids, 700);
}
/* Numéro du processus mis en valeur dans le sticker vert habituel, entre le
   mot « Processus » et le titre (comme en mode lecteur). */
.fp-entete-processus .numero { font-size: 0.8rem; padding: 0.18rem 0.6rem; }
.fp-entete-ligne .bouton-mini { margin-left: auto; align-self: center; }
.entete-centre .bouton-mini { margin-left: auto; align-self: center; }
/* Blocs processus du tableau de bord QHSSE : bouton flèche pour réduire /
   développer le bloc (réduit par défaut). Le corps réduit ne laisse voir que
   l'en-tête et la description ; le pilote, le liseré « Modifier » et les
   documents sont dans .tb-bloc-corps (masqué si réduit). */
.fp-entete-ligne .tb-bascule-bloc { margin-left: auto; align-self: center; }
.fp-entete-ligne .tb-bascule-bloc + .bloc-tb-modifier-entete { margin-left: 0.4rem; }

/* Formulaire processus (QHSE) : numéro (zone courte) + libellé sur la même ligne. */
.ligne-numero-libelle { display: flex; gap: 1rem; align-items: flex-start; }
.ligne-numero-libelle .champ-numero { flex: 0 0 6rem; }
.ligne-numero-libelle .champ-libelle { flex: 1; min-width: 0; }
.ligne-numero-libelle .champ-pilote { flex: 1; min-width: 0; }
.ligne-numero-libelle label { margin-top: 0; }

/* Référence, Version, Propriétaire, Rédacteur sur une seule ligne (pop-up de
   création de document, QHSE) : libellés alignés, champs alignés en
   dessous. Référence (2 chiffres en pratique) très resserrée ; Version,
   texte plus libre, nettement plus large ; Propriétaire/Rédacteur en listes
   courtes, facultatives, qui se partagent l'espace restant — les largeurs
   ci-dessous sont volontairement resserrées pour que tout tienne sur une
   seule ligne dans le cas courant. flex-wrap:wrap (pas nowrap) en filet de
   sécurité seulement : un bouton ajouté en fin de ligne (Nouvelle version /
   Diffuser) passe proprement à la ligne suivante si la place manque (fiche
   rétrécie, cf. #voile-creation-document.avec-apercu) plutôt que de
   déborder du cadre ou, pire, disparaître derrière l'overflow-x:hidden de
   #mcd-fiche-corps-scroll. */
.ligne-reference-version { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
/* display:flex column (et non le seul rétrécissement de l'input) pour que le
   libellé reste bien au-dessus du champ : un <label> est inline par défaut,
   donc à côté d'un champ de largeur fixe étroite (pas 100%), rien ne le force
   sinon à se placer À CÔTÉ plutôt qu'AU-DESSUS. */
.ligne-reference-version .champ-reference,
.ligne-reference-version .champ-version,
.ligne-reference-version .champ-select-compact {
  display: flex; flex-direction: column;
}
.ligne-reference-version .champ-reference,
.ligne-reference-version .champ-version { flex: 0 0 auto; }
/* Spécificité (ID + classe) volontaire : sans ça, `.boite-connexion label`
   (margin-top: 0.5rem, déclaré plus loin dans la feuille avec la même
   spécificité qu'un simple `.ligne-reference-version label`) l'emporterait à
   l'ordre de déclaration — invisible tant que Référence/Version/Rédacteur
   partageaient tous le même décalage, mais désormais visible : le sticker de
   statut, lui, n'a pas de <label> et démarre donc au vrai haut de ligne. */
#voile-creation-document .ligne-reference-version label { margin-top: 0; }
/* .champ-reference fixe son propre display:flex ci-dessus (règle d'auteur),
   qui prime sur le display:none de [hidden] posé par la feuille UA (même
   piège que .bouton-choisir-fichier/.numero) : override explicite nécessaire
   pour le masquer quand diffusé (cf. appliquerVerrouillageFiche, qhsse.js). */
#mcd-champ-reference[hidden] { display: none; }
.champ-reference-composee { display: flex; align-items: center; gap: 0.5rem; }
/* Largeurs resserrées (-50% pour la référence, -40% pour la version) pour
   gagner de la place en largeur sur l'ensemble de la ligne. */
#mcd-suffixe { width: 3rem; flex: 0 0 auto; }
#mcd-version { width: 4rem; flex: 0 0 auto; }
/* Rubrique : un peu plus haute que le gabarit par défaut des champs de la
   fiche (même hauteur que Libellé juste au-dessus), pour rester confortable
   à la lecture du contenu sélectionné. */
#mcd-categorie { min-height: 2.6rem; padding-top: 0.65rem; padding-bottom: 0.65rem; }
/* Version/Rédacteur verrouillés (document diffusé/archivé) : le champ de
   saisie (input/select, jamais modifiable ici de toute façon pour la
   version, cf. qhsse.js) cède la place à un sticker statique, même style que
   la référence (.numero), posé directement sous le libellé. margin-top :
   #mcd-badge-statut (colonne voisine) a lui-même un gap de 0.2rem entre le
   badge et la date (cf. plus bas) que le simple libellé "Version"/"Rédacteur"
   n'a pas — sans ce même décalage ici, le numéro de version et le nom du
   rédacteur se retrouvent legèrement plus haut que la date, alors qu'ils
   doivent lui être alignés. */
#mcd-version-stick, #mcd-redacteur-stick { align-self: flex-start; margin-top: 0.2rem; }
/* .numero fixe son propre display:inline-block (règle d'auteur), qui prime
   sur le display:none de [hidden] posé par la feuille UA (même spécificité,
   mais origine différente) : sans cet override explicite, le sticker
   resterait visible même caché, comme déjà vu sur .bouton-choisir-fichier. */
#mcd-version-stick[hidden], #mcd-redacteur-stick[hidden] { display: none; }
/* Sticker de statut : pas de libellé au-dessus, contrairement aux colonnes
   voisines — il s'affiche donc directement au niveau du libellé
   « Référence » (haut de la ligne), pas de sa zone de saisie. */
.champ-statut-stick { flex: 0 0 auto; }
.champ-select-compact { flex: 0 1 auto; min-width: 7.5rem; max-width: 10rem; }
/* Même hauteur que les champs texte voisins (Référence/Version, Numéro) : sur
   Chrome, un <select> à padding réduit tombait par hasard sur la même
   hauteur qu'un <input> ; sur Safari, l'apparence native du menu déroulant
   réserve sa propre marge interne indépendamment du padding CSS, ce qui le
   rendait visiblement plus bas. On désactive cette apparence native
   (appearance:none) pour repasser sur le même modèle de boîte qu'un input —
   même police, même padding que .boite-connexion select — avec une flèche
   dessinée à la main pour ne pas perdre l'indication de menu déroulant.
   Partagé par le rédacteur/propriétaire (fiche document) et le pilote (fiche
   processus, .champ-pilote select). */
.champ-select-compact select, .champ-pilote select {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2316324a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.7rem;
  padding-right: 1.6rem;
}
/* display: flex ci-dessus prime sur l'attribut [hidden] de l'UA : on rétablit
   (Propriétaire masqué pour tout type autre que Procédure, cf. qhsse.js). */
.champ-select-compact[hidden] { display: none; }

/* Deux stickers de statut empilés (fiche de création/modification de
   document, QHSE), posés à gauche de la référence, au niveau de son libellé
   (cf. .champ-statut-stick ci-dessus) — pas à côté du titre :
   - le statut (badgeStatutDocumentFiche, qhsse.js — même style que
     .badge-statut-document des listes, avec le sous-badge « Masqué » le cas
     échéant) ;
   - juste en dessous, sans gras, un second sticker portant la date dont le
     sens dépend du statut (création en rédaction, diffusion si diffusé,
     archivage si archivé — cf. badgeStatutDocumentFiche). */
#mcd-badge-statut { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
/* Même stick que ci-dessus, mais aligné à gauche : le bloc « Nouvelle
   version » (mcd-nouvelle-version-inline) le met sur la même ligne que
   Version/Rédacteur plutôt qu'en tête centrée d'un bloc pleine largeur. */
#mcdv-badge-statut { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.badge-statut-date-stick {
  display: inline-block; font-family: inherit; line-height: 1.4;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.01em;
  padding: 0.12rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-att);
}

/* Libellé (principal) + Propriétaire (si affiché, Procédure uniquement) sur
   la même ligne, propriétaire aligné à droite. */
.ligne-libelle-proprietaire { display: flex; gap: 0.75rem; align-items: flex-start; }
.champ-libelle-principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Spécificité (2 classes) volontaire : sans ça, `.boite-connexion label`
   (margin-top: 0.5rem), déclaré plus loin dans la feuille avec la même
   spécificité qu'un simple `.champ-libelle-principal label`, l'emporterait à
   l'ordre de déclaration et décalerait le libellé de 8px par rapport au
   propriétaire (qui, lui, est zéroé par une règle à 2 classes ci-dessous). */
.ligne-libelle-proprietaire .champ-libelle-principal label { margin-top: 0; }
/* display:flex column (comme .ligne-reference-version .champ-select-compact,
   même besoin ici) : sans ça le <label> inline se placerait à côté du select
   au lieu d'au-dessus. */
.ligne-libelle-proprietaire .champ-select-compact { display: flex; flex-direction: column; flex: 0 0 auto; }
.ligne-libelle-proprietaire .champ-select-compact label { margin-top: 0; }
/* Spécificité (2 classes + [hidden]) volontaire : sans ça, la règle display:
   flex ci-dessus (2 classes, donc même spécificité que le simple
   `.champ-select-compact[hidden]` déclaré plus haut) l'emporterait à l'ordre
   de déclaration et le propriétaire resterait visible pour un type de
   document autre que Procédure — même piège que .bouton-choisir-fichier. */
.ligne-libelle-proprietaire .champ-select-compact[hidden] { display: none; }

/* Icônes de consultation des fichiers (mcd-fichier-voir / mcd-fichier-source-voir,
   cf. appliquerVerrouillageFiche dans qhsse.js) : juste après la zone
   Rédacteur (pas de margin-left:auto — ne pas les repousser en bout de ligne)
   une fois la fiche verrouillée (document diffusé/archivé), seule information
   encore utile une fois la section Fichiers masquée. N'existent que dans cet
   état verrouillé, où Référence/Version/Rédacteur ont tous la même hauteur
   réduite (libellé + sticker) : un simple calage sur le bas de la ligne
   suffit à les aligner sur le sticker de préfixe, sans avoir besoin de la
   même mécanique d'étirement que .champ-statut-stick ci-dessus. Même bouton
   (.bouton-icone) que dans les listes de documents, pour une apparence
   cohérente à travers l'application. */
.mcd-fichiers-icones { display: flex; gap: 0.3rem; align-self: flex-end; flex: 0 0 auto; }
/* Bouton « Nouvelle version » (document diffusé, type versionné) : sur la
   même ligne que le stick de statut / version / rédacteur (dernier élément
   de .ligne-reference-version, cf. HTML), jamais tout à fait plaqué au bord
   droit du bloc grâce au padding-right de .bloc-champs. align-self:flex-end
   pour le caler sur le bas de la ligne, comme .mcd-fichiers-icones juste au-
   dessus (même mécanique). Plein (pas transparent comme .bouton-contour) et
   plus compact que les boutons habituels, pour rester discret sur cette
   ligne de données. */
#mcd-nouvelle-version-ouvrir {
  align-self: flex-end; flex: 0 0 auto; margin-left: 0.4rem;
  background: var(--sauge); border-color: var(--sauge); color: #fff;
  font-size: 0.72rem; padding: 0.28rem 0.65rem;
}
#mcd-nouvelle-version-ouvrir:hover { background: #275a4f; }

/* Regroupement visuel des zones de saisie (et leur libellé) d'une fiche de
   création/modification, en laissant titre, liseré et boutons d'action hors
   du bloc : fiche document (deux blocs — Libellé/Propriétaire/Description
   d'un côté, Référence/Version/Rédacteur/action de statut/fichiers de
   l'autre, plus de liseré entre les deux, la bordure du bloc suivant
   marquant déjà la séparation) et fiche processus (un seul bloc). */
.bloc-champs {
  border: 1px solid var(--ligne); border-radius: 8px; padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-top: 0.6rem;
}
.bloc-champs label { margin-top: 0; }

/* Liseré fin (pop-up de création de document, QHSE) : sépare le bloc
   Référence/Version/Propriétaire/Rédacteur du bloc Libellé/Description, puis
   ce dernier du bloc Fichiers — plus discret que le liseré épais du titre. */
.mcd-liseret-leger { border-top: 1px solid var(--ligne); margin: 0.3rem 0; }

/* Fichier à afficher / Fichier source côte à côte (pop-up de création de
   document, QHSE) : le même input natif ("Choisir un fichier") accepte
   aussi le glisser-déposer — zone.survol pendant le survol d'un fichier,
   posée par qhsse.js. */
.ligne-fichiers { display: flex; gap: 1rem; align-items: flex-start; }
.ligne-fichiers .champ-fichier { flex: 1; min-width: 0; }
/* display:flex ci-dessus prime sur le display:none de [hidden] (même piège
   que .bouton-choisir-fichier) : toute la section disparaît une fois la
   fiche verrouillée (cf. appliquerVerrouillageFiche, qhsse.js). */
.ligne-fichiers[hidden] { display: none; }
.zone-depot-fichier {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  border: 1px dashed var(--ligne); border-radius: 6px; padding: 0.3rem 0.6rem;
}
.zone-depot-fichier.survol { border-color: var(--sauge); background: var(--sauge-clair); }
/* Bloc de saisie de la nouvelle version (document diffusé, type versionné),
   révélé par #mcd-nouvelle-version-ouvrir : détaché visuellement du reste de
   la fiche (fond légèrement teinté, propre encadrement) — reprend telles
   quelles .ligne-reference-version/.ligne-fichiers pour les mêmes zones qu'à
   la création. display:flex ici prime sur le display:none de [hidden] (même
   piège que .ligne-fichiers ci-dessus) : override explicite nécessaire. */
.bloc-nouvelle-version-inline {
  display: flex; flex-direction: column; gap: 0.3rem;
  position: relative; margin-top: 0.5rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--ligne); border-radius: 8px; background: var(--fond);
}
.bloc-nouvelle-version-inline[hidden] { display: none; }
/* Bouton "Diffuser" (mcdv-diffuser) : sur la même ligne que les zones de
   saisie Version/Rédacteur (dernier élément de .ligne-reference-version, cf.
   HTML), jamais dans sa propre barre d'actions séparée — attribut hidden
   posé directement sur ce <button>, donc déjà couvert par .bouton[hidden]
   (pas le piège rencontré avec l'ancien wrapper .actions-formulaire, qui
   imposait son propre display:flex par-dessus le display:none de [hidden]).
   align-self:flex-end pour le caler sur le bas de la ligne, comme le bouton
   "Nouvelle version" du bloc de la version en cours (même mécanique). */
.bouton-diffuser-nouvelle-version { align-self: flex-end; flex: 0 0 auto; margin-left: 0.4rem; }

/* Historique des versions archivées (superseédées par la diffusion d'une
   nouvelle version, cf. construireBlocsVersionsArchivees dans qhsse.js) : un
   seul bloc .bloc-champs (comme #mcd-bloc-version), un stick unique « Version
   archivée »/« Versions archivées » à cheval sur son liseré haut (même
   mécanique que le bouton « Nouvelle version » à cheval sur le bas de
   #mcd-bloc-version, translateY dans l'autre sens), aligné à gauche sur le
   stick de statut du bloc au-dessus (padding-left identique, 0.8rem). Réduit
   par défaut à l'ouverture de la fiche (classe .reduit, cf.
   basculerBlocVersionsArchivees) : seuls le liseré et le stick restent
   visibles, corps masqué et padding réduit. Chaque ligne du corps reprend
   .ligne-reference-version telle quelle (mêmes classes .champ-version /
   .champ-select-compact / .mcd-fichiers-icones que le bloc de la version en
   cours, pour un alignement identique des colonnes), sans son propre stick de
   statut — seule la date y figure, à la même place. */
.bloc-versions-archivees { position: relative; }
.bloc-versions-archivees[hidden] { display: none; }
.bloc-versions-archivees.reduit { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.bloc-versions-archivees:not(.reduit) { padding-top: 1.1rem; }
.versions-archivees-tete {
  position: absolute; top: 0; left: 0.8rem;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.35rem;
  cursor: pointer;
}
.versions-archivees-bascule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--marine);
  font-size: 0.6rem; line-height: 1;
}
.versions-archivees-tete:hover .versions-archivees-bascule { background: var(--sauge-clair); border-color: var(--sauge); }
.versions-archivees-bascule::before { content: "\25B2"; }                       /* ▲ développé */
.bloc-versions-archivees.reduit .versions-archivees-bascule::before { content: "\25BC"; } /* ▼ réduit */
.bloc-versions-archivees.reduit .versions-archivees-corps { display: none; }
.versions-archivees-corps { display: flex; flex-direction: column; gap: 0.5rem; }
.versions-archivees-corps > .ligne-reference-version + .ligne-reference-version {
  border-top: 1px solid var(--ligne); padding-top: 0.5rem;
}
.bloc-nouvelle-version-annuler {
  position: absolute; top: 0.3rem; right: 0.4rem; margin-left: 0;
}
/* Spécificité (ID) volontaire : sans ça, .bouton-retirer-fichier (font-size:
   0.85rem, même spécificité que .bloc-nouvelle-version-annuler, déclarée
   plus loin dans la feuille) l'emporterait à l'ordre de déclaration. */
#mcd-nouvelle-version-annuler { font-size: 1.2rem; }
/* Version : élargie (quatre fois la largeur initiale de ce bloc, 2rem) — ce
   bloc ne propose plus que Version + Rédacteur (référence identique à celle
   du document, jamais modifiable ici, donc pas de champ dédié). */
#mcdv-version { width: 8rem; }
.zone-depot-texte { margin: 0; font-size: 0.78rem; color: var(--marine); opacity: 0.65; }
.bouton-retirer-fichier {
  margin-left: auto; border: none; background: none; color: var(--marine); opacity: 0.55;
  cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.15rem 0.3rem;
}
.bouton-retirer-fichier:hover { opacity: 1; color: #a83232; }
/* Icône de consultation du fichier déjà déposé (mcd-fichier-voir-edit /
   mcd-fichier-source-voir-edit, visible en édition tant que le champ reste
   modifiable, cf. appliquerVerrouillageFiche) : juste à gauche du bouton de
   retrait (✕), donc c'est elle qui porte la poussée à droite (margin-left:
   auto) quand elle est visible — le retirer, juste après, n'a alors plus
   besoin de la sienne (mise à 0 pour éviter un double espacement). Quand
   l'icône est cachée (hidden), ces deux règles ne s'appliquent pas et
   .bouton-retirer-fichier retombe sur son propre margin-left:auto ci-dessus. */
#mcd-fichier-voir-edit:not([hidden]), #mcd-fichier-source-voir-edit:not([hidden]) { margin-left: auto; }
#mcd-fichier-voir-edit:not([hidden]) + .bouton-retirer-fichier,
#mcd-fichier-source-voir-edit:not([hidden]) + .bouton-retirer-fichier { margin-left: 0; }

/* "Fichier à afficher" : le texte du bouton natif ("Choisir un fichier" /
   "Parcourir"...) n'est pas personnalisable par le navigateur — l'input reste
   fonctionnel mais visuellement masqué (jamais display:none, qui casserait le
   clic via <label for>), et un <label> stylé en bouton le remplace : son
   texte bascule entre "Choisir un fichier PDF à afficher" / "Choisir un
   fichier à afficher" selon le réglage Administration (cf.
   appliquerContrainteFichierAffiche, qhsse.js). "Fichier source" a le même
   traitement, avec un texte fixe ("Choisir le fichier source"). */
.entree-fichier-cachee {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bouton-choisir-fichier {
  display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--ligne); border-radius: 4px;
  background: var(--surface); font-size: 0.8rem; color: var(--texte); cursor: pointer; white-space: nowrap;
}
.bouton-choisir-fichier:hover { background: var(--sauge-clair); border-color: var(--sauge); }
/* display:inline-block ci-dessus l'emporte sinon sur [hidden]{display:none}
   (piège récurrent de ce projet, cf. CLAUDE.md) : masqué une fois la fiche
   verrouillée (document diffusé/archivé, cf. appliquerVerrouillageFiche). */
.bouton-choisir-fichier[hidden] { display: none; }

/* Liseré noir des pop-up de création/édition de document et de processus :
   occupe l'espace libre à gauche des boutons Annuler/Enregistrer et s'arrête
   avant eux (ne passe pas dessous), sur le modèle de .disposition-admin
   .actions-formulaire. Bouton Supprimer possible à gauche sur les deux
   pop-up (visible seulement en édition/modification, et seulement si
   l'élément peut être supprimé, cf. qhsse.js) : le liseré est un élément
   réel entre Supprimer et Annuler, pas un pseudo-élément, pour s'adapter à
   la présence ou non de ce bouton (espace libre depuis le bord gauche s'il
   est masqué, depuis sa droite sinon). */
#voile-creation-document .actions-formulaire,
#voile-entete-processus .actions-formulaire { align-items: center; }
#voile-creation-document .liseret-actions,
#voile-entete-processus .liseret-actions {
  flex: 1 1 auto; align-self: center;
  border-top: 2px solid #000;
}

/* Marges internes réduites de moitié (0.875rem au lieu de 1.75rem), commun
   aux deux pop-up. Pas de plafond de hauteur sur #voile-entete-processus
   (contenu fixe, tient toujours dans la hauteur disponible). */
#voile-creation-document .boite-connexion.boite-connexion-large,
#voile-entete-processus .boite-connexion.boite-connexion-large {
  padding: 0.875rem;
}
#voile-entete-processus .boite-connexion.boite-connexion-large {
  max-height: none;
  overflow-y: visible;
}
/* #voile-creation-document reprend le plafond de hauteur par défaut de
   .boite-connexion-large (88vh, cf. règle générale plus haut) : le bloc
   « Archive » (construireBlocsVersionsArchivees, qhsse.js) peut contenir un
   nombre variable de versions une fois développé, au point de dépasser la
   hauteur de l'écran. Mais titre/liseré (au-dessus) et la barre d'actions
   Annuler/Enregistrer (en dessous) doivent, eux, toujours rester visibles :
   contrairement à la règle générale, ce n'est donc pas la boîte entière qui
   défile (overflow-y:visible ici, annule le auto hérité), seule la zone
   #mcd-fiche-corps-scroll qui les encadre, un flex item pouvant se réduire
   sous sa taille de contenu (min-height:0, sans quoi flex l'en empêcherait
   par défaut) puis défiler (overflow-y:auto) — même gap que .boite-connexion
   pour conserver l'espacement d'origine entre les blocs qu'elle contient. */
#voile-creation-document .boite-connexion.boite-connexion-large {
  overflow-y: visible;
}
#mcd-fiche-corps-scroll {
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
}
/* Pop-up de création/modification de document un peu plus large que le
   gabarit .boite-connexion-large par défaut (640px, partagé avec la pop-up
   « Modifier » d'un processus, non concernée) : plus de champs sur la ligne
   Référence/Version/Rédacteur (suffixe modifiable, icônes de fichiers) et
   Propriétaire/Rédacteur élargis (cf. .champ-select-compact) ont besoin d'un
   peu plus de place. */
#voile-creation-document .boite-connexion.boite-connexion-large { max-width: 720px; }
/* Liseré sous le titre un peu plus haut que le gabarit .entete-param-lisere
   par défaut (partagé avec Administration › Structure/Processus/…, non
   concerné), le titre de cette fiche n'ayant pas besoin d'autant d'air. */
#voile-creation-document .entete-param-lisere { margin-top: 0.2rem; }

/* Aperçu d'un fichier de la fiche de création/modification de document, côte
   à côte (cf. ouvrirApercuFichierMcd/fermerApercuFichierMcd, qhsse.js) : même
   principe que #voile-document.avec-apercu (fiche à gauche rétrécie, fichier
   à droite), mais état isolé propre à cette pop-up. */
#voile-creation-document { gap: 1rem; flex-wrap: wrap; }
#voile-creation-document.avec-apercu { align-items: flex-start; }
#voile-creation-document.avec-apercu .boite-connexion.boite-connexion-large {
  flex: 0 1 auto;
  max-width: min(46vw, 640px);
}
#mcd-apercu-cote {
  max-width: none;
  flex: 1 1 480px;
  width: min(56vw, 900px);
  height: 88vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.55rem;
}
#mcd-apercu-cote[hidden] { display: none; }
/* .boite-connexion fixe son propre display:flex (règle d'auteur), qui prime
   sur le display:none de [hidden] posé par la feuille UA (même piège déjà vu
   sur .bouton-choisir-fichier/.numero) : sans cet override explicite, la
   fiche resterait visible même masquée par fermerFicheDocumentSeule (qhsse.js). */
#mcd-fiche-boite[hidden] { display: none; }
#mcd-apercu-cote #mcd-apercu-corps { flex: 1; min-height: 0; }
#mcd-apercu-cote .apercu-pdf { width: 100%; height: 100%; }
/* Bouton « Fiche <type> » de #mcd-apercu-cote (basculerFicheDocumentMcd,
   qhsse.js) : masque/réaffiche #mcd-fiche-boite sans fermer la pop-up — la
   fiche disparaît, l'aperçu reste affiché, recentré par .voile
   (display:flex; justify-content:center) du fait qu'il devient le seul
   enfant visible, et s'élargit, n'ayant plus à partager la place. flex:1
   (hérité de la règle #mcd-apercu-cote ci-dessus) étirerait sinon l'aperçu à
   tout l'espace disponible dès que la fiche n'est plus là pour le partager :
   flex:0 1 auto annule cet étirement pour que la largeur déclarée (width)
   fasse foi. */
#voile-creation-document.apercu-seul #mcd-apercu-cote { flex: 0 1 auto; width: min(62vw, 900px); }
/* Même principe que #voile-document #apercu-processus-document (« Fiche
   processus », mode lecteur) : calé à gauche de la ligne d'actions, même
   fond que le titre de la pop-up, texte foncé même mis en évidence. */
#voile-creation-document #mcd-apercu-fiche-toggle {
  margin-right: auto;
  background: var(--titre-central-fond, var(--sauge-clair));
}
#voile-creation-document #mcd-apercu-fiche-toggle.bouton-actif { color: var(--marine); }

.ligne-typo {
  display: grid;
  grid-template-columns: 1fr 100px 80px 80px;
  gap: 0.6rem;
  align-items: end;
  margin: 0 0 0.9rem;
}
.ligne-typo label { margin: 0 0 0.3rem; font-size: 0.78rem; }
.ligne-typo select.champ-police, .ligne-typo input[type="number"] {
  width: 100%; font-family: inherit; font-size: 0.85rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--ligne); border-radius: 6px;
}
.ligne-typo input[type="color"] {
  width: 100%; height: 2.35rem; padding: 0.15rem; border: 1px solid var(--ligne); border-radius: 6px; cursor: pointer;
}
.case-gras label {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 400; font-size: 0.85rem; margin: 0; height: 2.35rem;
}
@media (max-width: 560px) {
  .ligne-typo { grid-template-columns: 1fr 1fr; }
}
.ligne-typo-3 { grid-template-columns: 1fr 100px 80px; }
.ligne-typo-2 { grid-template-columns: 1fr 100px; }
@media (max-width: 560px) {
  .ligne-typo-3 { grid-template-columns: 1fr 1fr; }
}

.bloc-couleur-statut { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ligne); }
.bloc-couleur-statut:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ligne-couleur-statut { grid-template-columns: auto 1fr 1fr 80px 80px; }
.ligne-couleur-statut input[type="text"] {
  width: 100%; font-family: inherit; font-size: 0.85rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--ligne); border-radius: 6px;
}
.ligne-couleur-statut input[type="text"]:disabled { background: var(--fond); color: var(--texte-att); }
.apercu-couleur-statut { display: flex; align-items: center; height: 2.35rem; }
@media (max-width: 700px) {
  .ligne-couleur-statut { grid-template-columns: 1fr 1fr; }
}

.ligne-tuile-admin {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.ligne-tuile-admin input, .ligne-tuile-admin select {
  font-family: inherit; font-size: 0.9rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--ligne); border-radius: 6px;
}
/* Libellé de la catégorie (première colonne) saisi en gras. */
.ligne-tuile-admin .tuile-libelle { font-weight: 700; }
/* Sur quelle(s) page(s) publique(s) la catégorie apparaît (Formulaires,
   La vie du GID, ou les deux) — cochées toutes les deux par défaut. */
.ligne-tuile-admin .tuile-flags {
  display: flex; gap: 0.75rem; font-size: 0.82rem; font-weight: 400;
  color: var(--texte-att); white-space: nowrap;
}
.ligne-tuile-admin .tuile-flags label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

.cases-redacteurs {
  display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 12rem; overflow-y: auto;
  padding: 0.6rem 0.75rem; margin-bottom: 0.6rem;
  border: 1px solid var(--ligne); border-radius: 8px; background: var(--fond);
}
.cases-redacteurs label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; font-weight: 400; margin: 0; }
/* Dans une .boite-connexion, la règle input { width:100% } étire aussi les
   cases à cocher (elles se retrouvent décalées par rapport à leur libellé). */
.cases-redacteurs input[type="checkbox"] { width: auto; flex: 0 0 auto; margin-top: 0.15rem; }
/* Un point de référentiel, dans le bloc « Points » de la fiche : référence +
   libellé à gauche, actions modifier/supprimer à droite. */
.ligne-point-referentiel { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; }

/* Regroupement visuel des champs d'une fiche référentiel (pavés Rupture,
   Sujet, Points du référentiel) : un encart gris clair dans la carte blanche
   de la fiche, pour distinguer chaque groupe de champs. */
.pave-referentiel {
  background: var(--fond);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.pave-referentiel h3 { margin: 0 0 0.7rem; color: var(--marine); font-size: 0.95rem; }
/* Fiche référentiel : le libellé (nom du référentiel) n'a pas besoin de
   toute la largeur de la ligne. */
#formulaire-referentiel .champ-libelle-referentiel { flex: 0 0 33%; }
/* Champ nomenclature (rupture / sujet) : quelques caractères seulement. */
#formulaire-referentiel .champ-nomenclature-referentiel { flex: 0 0 6rem; }

/* Liste hiérarchique du pavé « Points du référentiel » : une rupture par
   ligne d'en-tête, avec ses points indentés juste en dessous. */
.ligne-rupture-referentiel { margin-bottom: 0.7rem; }
.ligne-rupture-referentiel:last-child { margin-bottom: 0; }
.entete-ligne-rupture { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sous-liste-points-rupture { margin: 0.5rem 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }

/* Documents QHSSE associés à un point de référentiel : liste compacte sous la
   ligne du point (aperçu lecture seule + arborescence « Gérer »). */
.rpd-docs-point {
  margin: 0.2rem 0 0.15rem 4.55rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.rpd-doc { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; }
.rpd-doc .type-puce,
.vap-doc .type-puce {
  display: inline-block; flex: 0 0 auto;
  font-family: var(--groupe-police, inherit);
  font-size: 0.66rem; font-weight: var(--groupe-poids, 800); letter-spacing: 0.04em;
  color: var(--marine); background: var(--sauge-clair);
  padding: 0.1rem 0.5rem; border-radius: 999px;
}
.rpd-doc .ref-num,
.vap-doc .ref-num { font-weight: 700; flex: 0 0 auto; }

/* Pop-up « Documents associés » d'un point. */
#voile-assoc-point .boite-connexion { max-width: 720px; }
#voile-assoc-point #vap-filtre { margin: 0.4rem 0 0.6rem; }
.vap-liste { max-height: 55vh; overflow-y: auto; gap: 0.9rem; }
.vap-groupe { display: flex; flex-direction: column; gap: 0.2rem; }
.vap-groupe-titre {
  font-weight: 700; color: var(--marine); font-size: 0.82rem;
  border-bottom: 1px solid var(--ligne); padding-bottom: 0.2rem; margin-bottom: 0.15rem;
}
.vap-doc { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.88rem; font-weight: 400; }
.vap-doc input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.15rem; }

/* Pilote sur la ligne du formulaire éditable de la fiche processus : plus
   besoin de listes pleine largeur. */
.ligne-intervenants-champs { display: flex; gap: 1rem; flex-wrap: wrap; }
.ligne-intervenants-champs > div { flex: 1 1 0; min-width: 8rem; }

/* Description de la fiche processus : plus haute par défaut (rows="7" dans
   le HTML) et grandit avec la frappe (voir redimensionnerTextareaAuto dans
   commun.js, qui fixe une hauteur inline plus précise que le CSS). */
.textarea-auto { overflow: hidden; }

/* Case « Masqué » de la fiche processus (en modification). */
.case-masque { margin-top: 0; margin-bottom: 0.6rem; }
.case-masque label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 400; margin: 0; }
.case-masque input[type="checkbox"] { width: auto; flex: 0 0 auto; }
/* En-tête « Processus » (titre de la section/pop-up) + case Masqué alignée à
   droite, sur la même ligne — même disposition sur les trois fiches. */
.entete-section-processus { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.entete-section-processus h1,
.entete-section-processus h2 { margin: 0; }
.entete-section-processus .case-masque { margin: 0; }

/* En-tête d'une section d'administration (Structure, Processus, Catégories,
   Utilisateurs) : titre à gauche, bouton de création à droite, sur la même
   ligne. Le bouton de création reprend le style du bouton « Enregistrer »
   (.bouton-plein), comme tous les boutons d'action principale de l'app. */
.entete-section-admin { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.entete-section-admin h1 { margin: 0; }

/* En-tête d'une section de paramétrage (Libellés et mise en forme, Structure,
   Processus, Référentiels, Catégories, Utilisateurs — structuré en JS par
   initialiserEntetesParametrage()) et de la pop-up d'édition d'un processus.
   Le titre occupe toute la largeur avec la mise en forme « Zone centrale ›
   Titre » de l'administrateur (police, taille, gras, couleur de police,
   couleur de fond) ; en dessous, un petit espace puis un liseré qui s'arrête
   juste avant le bouton « Ajouter / Créer » (ou la case « Masqué » dans la
   pop-up processus), cet élément étant centré verticalement sur le liseré. */
.entete-param { display: block; margin: 0 0 1.4rem; }
.entete-param > .titre-param {
  display: block;
  margin: 0;
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.7rem);
  font-weight: var(--titre-central-poids, 700);
  color: var(--titre-central-couleur, var(--marine));
  background: var(--titre-central-fond, transparent);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  max-width: none;
}
.entete-param-lisere {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.45rem;
}
.entete-param-trait { flex: 1 1 auto; border-top: 2px solid var(--sauge); }
.entete-param-lisere > .bouton { flex: 0 0 auto; margin: 0; align-self: center; }
.entete-param-lisere > .case-masque { flex: 0 0 auto; margin: 0; }

.filtres-utilisateurs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 0.6rem 0.75rem; margin: 0 0 0.9rem;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 8px;
}
.filtres-utilisateurs .etiquette-filtre { font-size: 0.85rem; font-weight: 700; color: var(--marine); }
.filtres-utilisateurs label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 400; margin: 0; }

#bouton-creer-utilisateur { margin: 0; }

/* Structure documentaire : liste editable des types de documents.
   La section Structure passe le cadre central en mode large (cf. admin.js). */
.disposition-admin .cadre-centre.cadre-large { max-width: 1080px; }
/* Liste des utilisateurs : cadre élargi (+30 % par rapport à la largeur
   standard de 700 px). */
.disposition-admin .cadre-centre.cadre-utilisateurs { max-width: 910px; }
/* Fiche referentiel ouverte : les deux tiers de l'espace disponible de la
   colonne centrale (cf. ouvrirFicheReferentiel/fermerFicheReferentiel dans
   admin.js) — pas la pleine largeur. */
.disposition-admin .cadre-centre.cadre-pleine { max-width: 66%; }
/* Bloc « Ordonner les types » : vue compacte de réordonnancement, repliée par
   défaut, ouverte par le bouton vert de l'en-tête. Fond légèrement distinct
   (vert pâle) des cartes de type (blanches). */
.bloc-ordre-types {
  background: var(--sauge-clair);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
}
.bloc-ordre-types[hidden] { display: none; }
.bloc-ordre-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bloc-ordre-entete h2 { margin: 0; font-size: 1rem; }
.bloc-ordre-types > .meta { margin: 0.25rem 0 0; }
.liste-ordre-types { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.65rem; }
.ord-ligne {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.5rem; padding: 0.3rem 0.45rem; border-radius: 5px;
}
.ord-ligne + .ord-ligne { border-top: 1px solid var(--ligne); }
.ord-libelle { font-size: 0.86rem; font-weight: 700; color: var(--texte); }
.ord-ligne-fixe .ord-libelle { font-weight: 400; color: var(--texte-att); }
.ord-fleches { display: inline-flex; gap: 0.25rem; }

/* Un pavé (.bloc-admin) par type de document, comme la liste des processus /
   référentiels : le conteneur gère l'espacement, chaque carte a sa bordure. */
#liste-types-document { display: flex; flex-direction: column; gap: 0.7rem; }
.carte-type-document {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 10px; padding: 1rem 1.2rem;
}
.carte-type-document.bloc-type-processus { background: var(--fond); }

/* En-tête de carte : ligne « identité » (nomenclature + libellés + actions)
   au-dessus de la ligne « drapeaux » (Validation / Versions / Actif + ordre). */
.ligne-type-document { display: flex; flex-direction: column; gap: 0.6rem; }
.ttd-identite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem; }
.ttd-champ {
  display: flex; flex-direction: column; gap: 0.2rem; margin: 0;
  font-weight: 400; flex: 1 1 12rem; min-width: 0;
}
.ttd-champ.ttd-champ-code { flex: 0 0 7rem; }
.ttd-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--texte-att);
}
/* Colonne d'actions de l'en-tête de carte : deux emplacements de largeur fixe
   (chevron déplier/réduire | supprimer / verrou « non supprimable » / retirer).
   Grille => les chevrons sont alignés verticalement d'une carte à l'autre, et le
   verrou tombe pile sur la poubelle des cartes voisines. Un emplacement vide
   (.ttd-action-slot) est rendu quand il n'y a pas de 2ᵉ action (type système,
   ligne Processus). */
.ttd-actions {
  display: grid;
  grid-template-columns: 2rem 2rem;
  align-items: center; justify-items: center;
  gap: 0.4rem; margin-left: auto; padding-bottom: 0.15rem;
}
.ttd-actions > .bouton-icone { width: 100%; padding-left: 0; padding-right: 0; text-align: center; }
.ttd-action-slot { display: block; }
/* Fantôme de la colonne « Nomenclature » sur la ligne Processus (qui n'en a
   pas) : ses libellés s'alignent alors sur « Libellé client » des autres. */
.ttd-champ-fantome { flex: 0 0 7rem; }
.ttd-drapeaux { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.15rem; }
/* Coches Validation / Versions / Actif masquées quand le bloc de type est replié. */
.ttd-drapeaux[hidden] { display: none; }
.ttd-drapeau { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.82rem; font-weight: 400; color: var(--texte); }
.ttd-drapeau input[type="checkbox"] { width: auto; }
.ttd-ordre { margin-left: auto; }
/* Ligne « Rattachable à … » sous le libellé du type. Un peu d'espace au-dessus
   pour ne pas coller au fond de la ligne mise en évidence (nomenclature /
   libellés / Validation-Versions-Actif) juste au-dessus ; le reste du bloc
   (Affiché sur, Droits par profil...) suit naturellement. */
.td-rattachements-ligne {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin-left: 0;
  padding: 0.4rem 0.25rem 0.5rem;
  font-size: 0.8rem; color: var(--texte-att);
}
.td-rattachements-ligne .td-ratt-label { font-weight: 700; color: var(--texte); }
/* Aucun rattachement défini : alerte visuelle sur le libellé. */
.td-rattachements-ligne.sans-rattachement .td-ratt-label,
.td-rattachements-ligne.sans-rattachement .td-ratt-resume { color: #a4392a; }
.td-rattachements-ligne { padding-bottom: 0.15rem; }
.td-rattachements-ligne .td-ratt-resume { flex: 1 1 12rem; min-width: 0; }
.td-rattachements-ligne .bouton-mini { flex: 0 0 auto; align-self: center; }
/* Ligne « Affiché sur : » (pages) puis ligne « Associable à une catégorie … »
   sous le libellé du type. */
.td-affichage-ligne {
  display: flex; align-items: center; gap: 0.35rem 1rem; flex-wrap: wrap;
  margin-left: 0;
  padding: 0 0.25rem 0.2rem;
  font-size: 0.8rem; color: var(--texte-att);
}
.td-affichage-ligne .td-ratt-label { font-weight: 700; color: var(--texte); }
.td-affichage-ligne label { display: inline-flex; align-items: center; gap: 0.3rem; }
.td-affichage-ligne input[type="checkbox"] { width: auto; }
.td-affichage-ligne label.case-fixe { color: var(--texte-att); }
.td-categorie-ligne {
  margin-left: 0;
  padding: 0 0.25rem 0.55rem;
  font-size: 0.8rem; color: var(--texte-att);
}
.td-categorie-ligne label { display: inline-flex; align-items: center; gap: 0.4rem; }
.td-categorie-ligne input[type="checkbox"] { width: auto; }
/* Procédure : indication (non modifiable) qu'elle sert de rupture hiérarchique. */
.td-info-rupture {
  margin-left: 0;
  padding: 0 0.25rem 0.5rem;
  font-size: 0.8rem; color: var(--texte);
}
.td-info-rupture .td-info-alerte { font-weight: 700; color: #a4392a; }
/* Bloc « Nouveau document » (Fonctionnement) : réutilise la grille des
   anciens blocs de statut (libellé fixe, champ, couleur). */
.liste-statuts-document { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; }
.sd-ligne {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) max-content;
  align-items: center; gap: 0.6rem;
}
.sd-ligne { padding: 0.3rem 0; border-bottom: 1px solid var(--fond); }
.sd-ligne:last-child { border-bottom: none; }
.sd-ligne input.sd-couleur {
  width: 2.6rem; height: 1.9rem; padding: 0; border: 1px solid var(--ligne);
  border-radius: 5px; cursor: pointer; background: none;
}
/* Ligne « Nouveau document » : même grille que les statuts, mais la cellule
   centrale mêle texte et champ nombre au lieu d'un simple champ texte. */
.sd-champ-jours { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.sd-champ-jours input[type="number"] { font: inherit; width: 4rem; padding: 0.25rem 0.4rem; text-align: right; }

.cases-rattachements {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin: 0.2rem 0 0.4rem; max-height: 45vh; overflow-y: auto;
}
.cases-rattachements label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.cases-rattachements input[type="checkbox"] { width: auto; }
.ligne-type-document .col-drapeau,
.ligne-type-document .col-ordre,
.ligne-type-document .col-detail,
.ligne-type-document .col-suppr { text-align: center; }
/* Détail (rattachements / affichage / droits par profil) replié par défaut,
   déplié via le bouton de la colonne .col-detail. */
.td-detail-repli[hidden] { display: none; }
.ligne-type-document input[type="text"],
.ligne-type-document input[type="number"] {
  width: 100%; font-family: inherit; font-size: 0.85rem;
  padding: 0.3rem 0.4rem; border: 1px solid var(--ligne); border-radius: 5px;
}
.ligne-type-document input.td-code-nom { font-family: 'Courier New', monospace; text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; }
/* Référence saisie et libellé client saisi affichés en gras dans la liste. */
.ligne-type-document input.td-libelle { font-weight: 700; }
.ligne-type-document input[type="checkbox"] { width: auto; }
.ligne-type-document .marqueur-utilise { font-size: 0.9rem; opacity: 0.55; cursor: help; }
/* Colonne « ordre » : flèches ▲ / ▼ empilées pour déplacer le type. */
.ligne-type-document .col-ordre {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
}
.ligne-type-document .col-ordre .bouton-icone {
  padding: 0.1rem 0.4rem; font-size: 0.68rem; line-height: 1.2; border-radius: 4px;
}
.ligne-type-document .col-ordre .bouton-icone:disabled {
  opacity: 0.25; cursor: default;
}
.ligne-type-document .col-ordre .bouton-icone:disabled:hover {
  border-color: var(--ligne); background: var(--surface);
}
/* Les deux boutons (Créer un type / Enregistrer) sur la même ligne. */
.actions-structure {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem;
}
#message-structure:not([hidden]) { margin-top: 0.6rem; text-align: right; }

@media (max-width: 720px) {
  .carte-type-document { padding: 0.9rem 1rem; }
  .ttd-champ, .ttd-champ.ttd-champ-code { flex: 1 1 100%; }
  .ttd-champ-fantome { display: none; }
  .ttd-actions { margin-left: 0; }
}

/* Un pavé (.bloc-admin) par utilisateur, comme la liste des processus :
   le conteneur gère l'espacement entre les cartes. */
#liste-utilisateurs { display: flex; flex-direction: column; gap: 0.6rem; }
.ligne-utilisateur-admin.bloc-admin {
  margin: 0; padding: 0.9rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.ligne-utilisateur-admin .ligne-principale-utilisateur { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.ligne-utilisateur-admin .nom-utilisateur { font-weight: 700; color: var(--marine); }
/* Identité dans un sticker (même pastille que .numero utilisée partout dans
   l'application). */
.ligne-utilisateur-admin .numero.nom-utilisateur { font-size: 0.85rem; padding: 0.2rem 0.6rem; }
.ligne-utilisateur-admin .email-utilisateur { color: var(--texte-att); font-size: 0.85rem; }
.ligne-utilisateur-admin .partie-droite { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.ligne-utilisateur-admin .badges-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ligne-utilisateur-admin .interventions-utilisateur {
  display: flex; flex-direction: column; gap: 0.15rem;
  color: var(--texte-att); font-size: 0.8rem;
}
.badge-role {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--sauge); background: var(--sauge-clair);
  padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.visionneuse-pdf {
  width: 100%;
  height: 80vh;
  min-height: 500px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
}

.etat-chargement, .etat-vide { color: var(--texte-att); font-size: 0.9rem; }
.erreur { color: #a4392a; font-size: 0.85rem; }

.voile {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(22,50,74,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.voile[hidden] { display: none; }
.boite-connexion {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Pop-up plus fournie (fiche processus complète : pilote, rédacteurs...) —
   proche de la largeur de la fiche processus 0 sur admin.html (700px), pour
   éviter un affichage trop à l'étroit dans les listes Responsable QHSE / pilote. */
.boite-connexion.boite-connexion-large { max-width: 640px; max-height: 88vh; overflow-y: auto; }
/* Pop-up « Gérer le référentiel » : deux pop-ups distinctes, visibles en même
   temps dans le même voile (comme la fiche procédure + son aperçu, cf.
   #voile-document.avec-apercu) — la fiche en lecture seule à gauche, largeur
   fixe modeste ; l'arborescence ruptures/points éditable au centre, plus
   large. */
#voile-gerer-referentiel { gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.boite-connexion.gerer-referentiel-fiche { flex: 0 0 25.5rem; max-width: 25.5rem; max-height: 88vh; overflow-y: auto; }
.gerer-referentiel-fiche .description-processus { margin: 0.5rem 0; }
/* Libellé (sticker) + version sur la même ligne, le sticker gardant la
   largeur de son contenu (par défaut, un enfant direct de .boite-connexion —
   flex en colonne — s'étire sur toute la largeur). */
.gr-entete-principale { display: flex; align-items: baseline; gap: 0.6rem; }
.gerer-referentiel-fiche .numero.titre-referentiel { font-size: 0.82rem; padding: 0.18rem 0.55rem; }
.gerer-referentiel-fiche .meta-inline { font-size: 0.72rem; }
/* L'arborescence occupe tout l'espace restant, en largeur comme en hauteur. */
.boite-connexion.gerer-referentiel-arbo { flex: 1 1 480px; max-width: none; height: 88vh; overflow-y: auto; }
/* Masquer une boîte du voile « Gérer » (.boite-connexion force display:flex,
   ce qui l'emporterait sinon sur l'attribut [hidden]). */
#voile-gerer-referentiel > [hidden] { display: none; }
/* Fiche de modification affichée en pop-up centrée dans le voile « Gérer »,
   à la place de la structure. */
#bloc-fiche-referentiel.fiche-referentiel-modale {
  flex: 0 0 auto; max-width: 640px; max-height: 88vh; overflow-y: auto;
  border: none; margin: 0;
}
/* « Structure du référentiel » : typographie « titre de page » sur la couleur
   de fond d'écran (style titre de pavé), un espace, un liseré, et le bouton
   « Ajouter un <rupture> » au bout (style bouton plein, comme « Ajouter un
   processus »). Le padding / border-radius viennent de .entete-param > .titre-param. */
#gr-titre-points.titre-param {
  background: var(--fond, #f7f8f6);
  font-family: var(--titre-page-police, inherit);
  font-size: var(--titre-page-taille, 1.7rem);
  font-weight: var(--titre-page-poids, 700);
  color: var(--titre-page-couleur, var(--marine));
}
/* Bouton « Ajouter un point » d'une rupture : en bas à droite de son bloc,
   aligné sur le bouton « Ajouter un(e) ... » en tête de pop-up. */
.gr-ajouter-point-ligne { text-align: right; margin-top: 0.4rem; }
.boite-connexion h2 { margin: 0 0 0.5rem; color: var(--marine); }
.boite-connexion h2.vrr-titre-reduit { font-size: 1.1rem; }
.vrr-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.vrr-entete h2 { margin: 0; }
/* Pop-up création/modification d'un critère ou d'un point : titre au style
   « titre de pavé » (ligne du titre sur la couleur de fond d'écran, un petit
   espace puis un liseré porté par .titre-pave-lisere). Dans une .boite-connexion
   (flex column avec gap), le gap fournit déjà l'espace : pas de margin-top. */
.vrr-entete.titre-pave { margin-bottom: 0; }
.boite-connexion > .titre-pave-lisere { margin-top: 0; }
/* Titre des pop-up de visualisation d'un document / PDF (référence + libellé) :
   style « titre de pavé ». Le petit espace vient du gap flex de .boite-connexion. */
.boite-connexion > h2.titre-pave { margin-bottom: 0; }
.case-masque.case-masque-inline { margin: 0; }
.case-masque.case-masque-inline label { white-space: nowrap; }
/* Le redimensionnement auto (redimensionnerTextareaAuto) fixe une hauteur en
   pixels dès l'ouverture ; sur un champ vide (création), le contenu tient sur
   une ligne et la zone se retrouve plus fine qu'un simple champ texte. Un
   min-height garantit au moins la hauteur voulue (~2x un champ texte simple
   pour la rupture, un peu plus pour le point, sur 3 lignes). */
#vrr-libelle { min-height: 4.5rem; }
#vpr-libelle { min-height: 6.5rem; }
/* Pop-up « Ajouter un point » : la référence commence par un préfixe imposé
   (nomenclature + référence de la rupture + nomenclature du sujet), affiché
   à part et non modifiable ; seule la suite (à droite) se saisit. */
.vpr-ligne-reference { display: flex; align-items: stretch; gap: 0.4rem; }
.vpr-ligne-reference input { flex: 1 1 auto; min-width: 0; }
.vpr-prefixe-reference {
  display: flex; align-items: center; flex: 0 0 auto;
  padding: 0.3rem 0.5rem; border: 1px solid var(--ligne); border-radius: 5px;
  background: var(--fond); color: var(--texte-att);
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 0.03em;
  white-space: nowrap;
}
.vpr-prefixe-reference:empty { display: none; }
/* Pop-up « Référentiels associés » (fiche processus) : arbre à cocher
   référentiel -> critères -> points. Cocher un critère coche et grise tous
   ses points (le lien reste visible). Un référentiel se développe / se
   réduit à la flèche ; réduit, il ne montre que ses critères liés. */
.aide-referentiels { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--texte-att); }
#voile-referentiels-processus .boite-connexion { max-width: 760px; }
.rfp-arbre { display: flex; flex-direction: column; gap: 1.1rem; }
.rfp-arbre .rfp-ref-titre { font-weight: 700; color: var(--marine); margin-bottom: 0.3rem; }
/* Pop-up « Référentiels associés au processus » : chaque référentiel dans son
   propre bloc encadré. */
#rfp-arbre.rfp-arbre .rfp-ref {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
/* En-tête d'un référentiel : sticker du nom + version à gauche ; un liseré
   part après la version, centré sur la ligne, jusqu'au bouton « Afficher tout
   le référentiel » placé à droite. Un peu d'air avant le contenu du référentiel. */
.rfp-arbre .rfp-ref-entete {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.rfp-arbre .rfp-ref-trait { flex: 1 1 auto; border-top: 2px solid var(--sauge); }
.rfp-arbre .rfp-fleche {
  flex: 0 0 auto; font-size: 0.7rem;
  padding: 0.15rem 0.5rem; white-space: nowrap;
}
/* Barre « Afficher tous les référentiels » sous le titre de la pop-up : bouton
   seul, à droite, texte réduit, collé au titre. */
.rfp-barre-tous.actions-fiche-documents { margin: 0.2rem 0 0.8rem; justify-content: flex-end; }
.rfp-barre-tous #rfp-afficher-tous { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
.rfp-arbre .numero.sticker-ref { font-size: 0.9rem; padding: 0.28rem 0.75rem; }
.rfp-arbre .rfp-ref-version { font-size: 0.8rem; color: var(--texte-att); }
.rfp-arbre .rfp-ref-corps { margin-left: 0.2rem; }
.rfp-arbre .rfp-rupture-bloc { margin: 0.35rem 0 0.35rem 0.2rem; }
.rfp-arbre .rfp-rupture-label,
.rfp-arbre .rfp-point-label {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 400; margin: 0.15rem 0;
}
.rfp-arbre input[type="checkbox"] {
  width: auto; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0;
  align-self: center; margin: 0;
}
.rfp-arbre .rfp-points { margin: 0.1rem 0 0.3rem 1.6rem; display: flex; flex-direction: column; gap: 0.1rem; }
.rfp-arbre .rfp-point-label input:disabled + strong,
.rfp-arbre .rfp-point-label input:disabled ~ span { color: var(--texte-att); }
/* Bloc « Référentiels associés au processus » (liste QHSSE, fiche pilote) :
   même en-tête que « Documents associés » (h3 .fp-documents-titre + boutons à
   droite), puis le résumé sur sa propre ligne, avec un peu d'air. */
.bloc-referentiels-fiche .fp-documents-barre { margin-bottom: 1.35rem; }
.bloc-referentiels-fiche .rfp-resume-zone { min-width: 0; margin-top: 0; }
.bloc-referentiels-fiche .rfp-resume-zone[hidden] { display: none; }
/* « Détailler » toujours juste avant « Modifier », le groupe poussé à droite. */
.fp-documents-barre .rfp-actions {
  display: flex; align-items: center; gap: 0.4rem;
  margin-left: auto; flex: 0 0 auto;
}
.fp-documents-barre .rfp-actions .bouton-mini { margin-left: 0; }
/* Résumé « Référentiels associés » : un bloc par référentiel.
   - ligne 1 : sticker du libellé + version ;
   - dessous, une grille [ coude + sticker/nomenclature | libellé ] partagée
     par toutes les lignes du bloc -> les libellés s'alignent verticalement
     (y compris quand un badge « Partiel » élargit la 1re colonne).
   Réduit : critères seulement. Détaillé : critères + points, indentation
   en cascade. Dans les deux cas les référentiels sont empilés (l'un sous
   l'autre, séparés par un liseré horizontal). */
.rfp-resume { display: flex; flex-direction: column; align-items: stretch; row-gap: 0.6rem; }
.rfp-resume-ref { display: flex; flex-direction: column; gap: 0.25rem; flex: 0 0 auto; max-width: 40rem; }
.rfp-resume-ref:not(:first-child) { border-top: 1px solid var(--ligne); padding-top: 0.6rem; }
.rfp-resume-tete { display: flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.rfp-resume-tete .numero.sticker-ref { font-size: 0.78rem; padding: 0.15rem 0.55rem; }
.rfp-resume-version { font-size: 0.78rem; color: var(--texte-att); }

.rfp-resume-corps {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  align-items: baseline;
}
.rfp-rc {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  white-space: nowrap; min-width: 0; font-size: 0.8rem;
}
.rfp-rc .numero.sticker-rupture { font-size: 0.72rem; padding: 0.12rem 0.5rem; }
/* Mode réduit (par défaut) : le coude hiérarchique des critères est décalé
   d'environ un tiers de la largeur du sticker du référentiel (variable
   calculée après rendu). En mode « Détailler » ce retrait est remplacé par la
   cascade fixe ci-dessous. */
.rfp-rc-crit { padding-left: var(--rfp-crit-indent, 0); }
/* Référence complète d'un point (mode détaillé) : en gras, même taille que le
   texte du libellé, pas de coude — positionnée au milieu du sticker du critère
   au-dessus (cf. .rfp-resume-detaille .rfp-rc-pt). */
.rfp-pt-ref { font-weight: 700; }
.rfp-rl { font-size: 0.8rem; }
.rfp-rl-pt { font-weight: 400; }
.rfp-coude::before { content: "\21B3\00A0"; color: var(--texte-att); font-weight: 400; }
/* Badge « Partiel » (critère lié seulement par certains points) — même esprit
   que le badge « Masqué ». Placé avant le sticker du critère ; un créneau de
   largeur fixe est réservé devant chaque critère du référentiel concerné pour
   que tous les stickers de critère s'alignent. */
.badge-partiel {
  display: inline-block;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.05rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--ligne); color: var(--texte-att);
  background: var(--surface); line-height: 1.4; white-space: nowrap;
}
.rfp-partiel-slot { display: none; }
.rfp-ref-partiel .rfp-partiel-slot {
  display: inline-flex; flex: 0 0 auto; width: 4rem;
  align-items: baseline; justify-content: flex-start;
}

/* --- Mode « Détailler » --- */
.rfp-resume-detaille { flex-direction: column; }
.rfp-resume-detaille .rfp-resume-ref { max-width: none; padding: 0; border-left: none; }
.rfp-resume-detaille .rfp-resume-ref:not(:first-child) {
  border-top: 1px solid var(--ligne);
  margin-top: 0.7rem; padding-top: 0.7rem;
}
/* Ligne de critère décalée sous le sticker du référentiel (coude). Les points
   n'ont pas de coude : leur référence (en gras) est décalée pour tomber au
   milieu du sticker du critère au-dessus. La 1re colonne de la grille s'ajuste
   au plus large -> les libellés restent alignés. */
.rfp-resume-detaille .rfp-rc-crit { padding-left: 1.1rem; }
.rfp-resume-detaille .rfp-rc-pt { padding-left: 4rem; }
/* Avec un badge « Partiel », un créneau fixe décale les stickers de critère :
   les références de points suivent le même décalage. */
.rfp-resume-detaille .rfp-ref-partiel .rfp-rc-pt { padding-left: 8rem; }
/* Titre de la fiche procédure : même taille que l'en-tête de la fiche processus. */
#titre-fiche-document-modal {
  color: var(--titre-central-couleur, var(--marine));
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.15rem);
  font-weight: var(--titre-central-poids, 700);
}
.boite-connexion label { font-size: 0.85rem; font-weight: 700; margin-top: 0.5rem; }
/* Sauf dans la liste des rédacteurs : identités et indicateurs restent en
   graisse normale (ni les libellés, ni les commentaires du type
   « propriétaire de procédure » n'ont besoin d'être en gras ici). */
.boite-connexion .cases-redacteurs label { font-weight: 400; margin-top: 0; }
.boite-connexion input,
.boite-connexion select,
.boite-connexion textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
.boite-connexion textarea { resize: vertical; line-height: 1.4; }
/* Champ mot de passe (pop-up de connexion) : picto de visualisation dans le
   champ, à droite — n'apparaît qu'après le premier caractère tapé (JS,
   commun.js). */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe input { padding-right: 2.3rem; }
.bouton-afficher-motdepasse {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.2rem;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
}
.actions-formulaire {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
/* Pousse ce bouton (et tout ce qui le précède dans le DOM) à gauche du
   groupe, le reste restant calé à droite (.actions-formulaire, flex-end) —
   ex. « Éditer la cartographie » face à Modifier/Fermer, pop-up « Gérer le
   référentiel ». */
.actions-formulaire .action-gauche { margin-right: auto; }

/* Page d'administration : liseré horizontal au NIVEAU du bouton « Enregistrer »
   (ou de validation d'une fiche), à sa gauche et sans le recouvrir — exactement
   comme le trait à côté du bouton « Créer un type de documents » en haut de la
   Structure (cf. .entete-param-lisere / .entete-param-trait). Le trait est un
   pseudo-élément qui occupe l'espace libre à gauche des boutons. */
.disposition-admin .actions-formulaire {
  align-items: center;
}
.disposition-admin .actions-formulaire::before {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  border-top: 2px solid var(--marine);
}

.page-simple {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

#liste-processus { display: flex; flex-direction: column; gap: 0.6rem; }

/* La fiche réutilise le style de champ de .bloc-admin mais pas sa carte
   (le cadre droit fournit déjà la carte). */
#fiche-processus.bloc-admin { background: none; border: none; border-radius: 0; padding: 0; margin: 0; }
#fiche-processus.bloc-admin label:first-child { margin-top: 0; }
/* Fiche processus (pilote et bloc processus du tableau de bord QHSSE) :
   « Référentiels associés » (avec « Ajouter un document ») dans un pavé. Sur
   QHSSE et ses processus (mode Administration, cf. #contenu-centre), ce pavé
   n'entoure plus la liste des documents : chaque type / groupe hiérarchique a
   déjà son propre bloc encadré (.doc-bloc-lecteur, cf. commun.js), un pavé
   supplémentaire autour de tous ne ferait qu'emboîter un bloc dans un bloc. */
#fiche-processus .fp-processus-pave,
.bloc-tableau-bord .fp-processus-pave {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
#fiche-processus .fp-processus-pave .actions-fiche-documents,
.bloc-tableau-bord .fp-processus-pave .actions-fiche-documents { margin-bottom: 0; }
/* Liseré fin portant le bouton « Modifier » de l'en-tête du processus (fiche
   du pilote / tableau de bord QHSSE) : bord droit du bouton aligné sur le
   « Modifier » du pavé « Référentiels associés » (retrait = padding interne
   des pavés : 1.25rem). */
#fiche-processus .fp-modif-entete-ligne,
.bloc-tableau-bord .fp-modif-entete-ligne {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 1rem 0 0.9rem; padding-right: 1.25rem;
}
#fiche-processus .fp-modif-entete-ligne .fp-modif-trait,
.bloc-tableau-bord .fp-modif-entete-ligne .fp-modif-trait {
  flex: 1 1 auto; border-top: 1px solid var(--ligne);
}
#fiche-processus .fp-modif-entete-ligne .bouton-mini,
.bloc-tableau-bord .fp-modif-entete-ligne .bouton-mini { flex: 0 0 auto; margin-left: 0; }
/* Fiche processus (pilote) et liste QHSSE : la description ET la ligne
   « Pilote » s'alignent sur le libellé du processus (après le sticker du
   numéro), pas sur le bord. Le retrait couvre sticker numéro + écart +
   retrait interne du pavé libellé. La ligne « Pilote » vient sur sa propre
   ligne, avec un peu d'air au-dessus (séparée de la description). Ne
   s'applique qu'à l'en-tête « pavé sticker + libellé encadré » (mode
   Administration, .fp-entete-ligne) : l'en-tête simple du mode lecteur
   (.entete-centre, texte "Processus 01" + titre nus) n'a pas de sticker à
   dépasser, cf. règle suivante qui la fait primer sur celle-ci. */
#fiche-processus > .description-processus,
.bloc-tableau-bord > .description-processus,
#contenu-centre .entete-lecteur > .description-processus,
#fiche-processus .ligne-pilote,
.bloc-tableau-bord .ligne-pilote,
#contenu-centre .ligne-pilote { padding-left: 3.35rem; }
#fiche-processus .ligne-pilote,
.bloc-tableau-bord .ligne-pilote,
#contenu-centre .ligne-pilote { margin-top: 0.8rem; }
/* Mode lecteur (en-tête simple .entete-centre, sans sticker ni pavé) : la
   description s'aligne directement sur le début du titre ("P" de
   "Processus"), pas sur un retrait pensé pour l'en-tête encadrée ci-dessus.
   Partagé par toutes les pages lecteur (QHSSE et ses processus, Les
   formulaires, Référentiels) qui rendent ce même en-tête dans #contenu-centre. */
#contenu-centre .entete-lecteur > .entete-centre + .description-processus { padding-left: 0.9rem; }
/* Mode Administration (QHSSE et ses processus) : le bouton « Modifier »
   revient sur la même ligne que « Pilote : <nom> », avec un liseré entre les
   deux (au lieu d'une ligne « Modifier » séparée en dessous, cf. fiche du
   pilote / tableau de bord QHSSE ci-dessus). */
#contenu-centre .ligne-pilote {
  display: flex; align-items: center; gap: 0.6rem;
}
#contenu-centre .ligne-pilote .fp-modif-trait {
  flex: 1 1 auto; border-top: 1px solid var(--ligne);
}
#contenu-centre .ligne-pilote .bouton-mini { flex: 0 0 auto; }
/* Pilote du processus : visible seulement bloc déployé (en tête du corps,
   avant le liseré « Modifier »). */
.ligne-pilote { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--texte); }
.ligne-pilote strong { color: var(--marine); font-weight: 700; }

/* Détail en lecture seule : les champs désactivés s'affichent comme du texte
   (pas grisés). */
#fiche-processus input:disabled, #fiche-processus textarea:disabled {
  opacity: 1; background: var(--fond); color: var(--texte); cursor: default;
  -webkit-text-fill-color: var(--texte);
}

/* Intervenants (propriétaire / rédacteur) d'un document, dans sa fiche. */
.ligne-intervenants {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem;
  margin: 1rem 0 0.4rem; font-size: 0.9rem; color: var(--texte);
}
.ligne-intervenants strong { color: var(--marine); font-weight: 700; }
.bouton-mini {
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  padding: 0.18rem 0.6rem; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--marine);
}
.bouton-mini:hover { border-color: var(--sauge); background: var(--sauge-clair); }

.separateur-fiche { border: none; border-top: 1px solid var(--ligne); margin: 1rem 0 0.9rem; }
/* Séparateur épais (ex. sous la liste des rédacteurs d'un processus). */
.separateur-epais { border-top-width: 3px; border-top-color: var(--sauge); }
#fp-documents { margin-top: 0.3rem; }

/* Bouton « Ajouter un processus » : sous la carte de la liste, aligné à droite. */
.actions-liste-processus { margin-top: 1rem; display: flex; justify-content: flex-end; }
.actions-liste-processus[hidden] { display: none; }

/* Tableau de bord Responsable QHSE : même largeur que la liste des référentiels
   (classe cadre-large ajoutée en JS) ; un bloc blanc par processus (forme
   fiche). */
/* Colonne d'ajustement = libellé du document (comme la fiche « Piloter mes
   processus »). */
.disposition-admin .cadre-tableau-bord .tb-documents {
  grid-template-columns: max-content minmax(10rem, 1fr) repeat(6, max-content);
}
.bloc-tableau-bord {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}
.bloc-tableau-bord:last-child { margin-bottom: 0; }
/* Libellé encadré sur la couleur de fond d'écran (titre d'un processus dans le
   bloc QHSSE / la fiche du pilote, libellé du document dans la pop-up
   procédure) : le numéro / la référence garde son sticker vert habituel, le
   reste de la ligne n'est pas grisé. */
.fp-libelle-pave {
  background: var(--fond, #f7f8f6);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
}

/* Titre de la pop-up procédure / aperçu (le type : « Procédure », « Formulaire »…)
   au style paramétré « Zone de visualisation › Titre » (police, taille, gras,
   couleur, couleur de fond de la ligne). */
#titre-fiche-document-modal.titre-pave,
#apercu-cote #titre-apercu-cote.titre-pave,
#mcd-titre-pave.titre-pave,
#mcd-apercu-titre.titre-pave {
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.15rem);
  font-weight: var(--titre-central-poids, 700);
  color: var(--titre-central-couleur, var(--marine));
  background: var(--titre-central-fond, var(--sauge-clair));
}

/* Titre de la pop-up de gauche (fiche processus, ou reprise de la liste
   « Afficher <catégorie> » / « Afficher tous les … ») : même hauteur et
   position que le titre ci-dessus (pop-up de visualisation), quel que soit le
   contenu affiché. La version « grand titre de page » (.entete-titre-page,
   normale en zone centrale) est ici ramenée au gabarit compact du titre de
   visualisation ; le h2 perd la marge que lui donnerait sinon .boite-connexion
   h2 (même spécificité que .entete-centre h2, mais déclarée après). */
#corps-fiche-document > .entete-lecteur .entete-centre,
#corps-fiche-document > .fiche-cote-fixe > .entete-lecteur .entete-centre,
#corps-fiche-document > .entete-centre.entete-titre-page,
#corps-fiche-document > .fiche-cote-fixe > .entete-centre.entete-titre-page {
  padding: 0.4rem 0.75rem;
}
#corps-fiche-document .entete-lecteur .entete-centre h2,
#corps-fiche-document .entete-centre.entete-titre-page h2 {
  margin: 0;
}
#corps-fiche-document .entete-centre.entete-titre-page h2 {
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.15rem);
  font-weight: var(--titre-central-poids, 700);
  color: var(--titre-central-couleur, var(--marine));
}

/* Pop-up procédure (pilote / Responsable QHSSE) : le type, la référence
   complète et le libellé sont dans le titre de la pop-up. Le corps commence
   par la description, puis un liseré épais avec le bouton « Modifier » (selon
   les droits) au bout à droite. Les autres boutons « Modifier » de la fiche
   s'alignent sur ce bord droit. */
#corps-fiche-document .fp-doc-description,
#corps-apercu-cote .fp-doc-description { margin: 0 0 0.2rem; }
#corps-fiche-document .fp-doc-modif-ligne,
#corps-apercu-cote .fp-doc-modif-ligne {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.6rem;
  /* Bouton « Modifier » (procédure) aligné sur le bord droit du contenu des
     pavés (retrait = padding horizontal des pavés). */
  padding-right: 1rem;
}
/* Liseré sous la description : fin, comme les autres traits de la fiche. */
#corps-fiche-document .fp-doc-modif-ligne .fp-doc-titre-trait,
#corps-apercu-cote .fp-doc-modif-ligne .fp-doc-titre-trait {
  flex: 1 1 auto; border-top: 1px solid var(--ligne);
}
#corps-fiche-document .fp-doc-modif-ligne-clair .fp-doc-titre-trait,
#corps-apercu-cote .fp-doc-modif-ligne-clair .fp-doc-titre-trait {
  border-top: 1px solid var(--ligne);
}
#corps-fiche-document .fp-doc-modif-ligne .bouton-mini,
#corps-apercu-cote .fp-doc-modif-ligne .bouton-mini { flex: 0 0 auto; }
/* La ligne de version et la liste des documents rattachés sont chacune dans un
   pavé (cadre léger) ; plus de liseré épais entre les deux. */
#corps-fiche-document .fp-doc-pave,
#corps-apercu-cote .fp-doc-pave {
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: 0.7rem;
}
#corps-fiche-document .fp-doc-pave > .fp-arbo > .groupe-documents:first-child > h4,
#corps-apercu-cote .fp-doc-pave > .fp-arbo > .groupe-documents:first-child > h4 { margin-top: 0; }
/* Boutons « Modifier » (intervenants, exclusions) alignés à droite comme celui
   du liseré. */
#corps-fiche-document .ligne-intervenants .bouton-mini,
#corps-apercu-cote.apercu-fiche .ligne-intervenants .bouton-mini { margin-left: auto; }
/* Partie « Référentiel associé » dans un pavé : le libellé et le bouton
   « Gérer les exclusions » sur une même ligne, bouton au bord droit du pavé. */
#corps-fiche-document .fp-doc-ref-barre,
#corps-apercu-cote .fp-doc-ref-barre {
  display: flex; align-items: baseline; gap: 0.6rem;
}
#corps-fiche-document .fp-doc-ref-barre .fp-doc-ref-libelle,
#corps-apercu-cote .fp-doc-ref-barre .fp-doc-ref-libelle {
  flex: 1 1 auto; font-size: 0.8rem;
}
#corps-fiche-document .fp-doc-ref-barre .bouton-mini,
#corps-apercu-cote .fp-doc-ref-barre .bouton-mini { margin-left: auto; flex: 0 0 auto; }
/* Intervenants (propriétaire / rédacteur) dans un pavé ; le bouton
   « Modifier » sur la première ligne (propriétaire / rédacteur), au bord
   droit du contenu du pavé, aligné sur « Gérer les exclusions » et sur le
   bouton « Modifier » de la procédure. */
#corps-fiche-document .fp-doc-interv-pave,
#corps-apercu-cote .fp-doc-interv-pave { position: relative; }
#corps-fiche-document .fp-doc-interv-modif,
#corps-apercu-cote .fp-doc-interv-modif {
  position: absolute; top: 0.75rem; right: 1rem;
}
#corps-fiche-document .fp-doc-interv-pave .ligne-intervenants,
#corps-apercu-cote .fp-doc-interv-pave .ligne-intervenants {
  margin: 0; padding-right: 6rem;
}
/* Pavé version : numéro/date/rédacteur en gras et un poil plus grand. */
#corps-fiche-document .fp-doc-version-pave .fp-version,
#corps-apercu-cote .fp-doc-version-pave .fp-version { font-size: 0.92rem; }
#corps-fiche-document .fp-doc-version-pave .fp-vd,
#corps-apercu-cote .fp-doc-version-pave .fp-vd { font-weight: 700; }
/* Documents liés : toutes les infos d'un même document sur une seule ligne
   (libellé, méta, statut, boutons) — la pop-up s'élargit pour les contenir. */
#corps-fiche-document .fp-arbo .groupe-documents li,
#corps-apercu-cote .fp-arbo .groupe-documents li { flex-wrap: nowrap; }
#corps-fiche-document .fp-arbo .groupe-documents li .fp-arbo-libelle,
#corps-apercu-cote .fp-arbo .groupe-documents li .fp-arbo-libelle {
  flex: 0 0 auto; white-space: nowrap;
}

/* Documents d'une fiche processus (tableau de bord QHSE et « Piloter mes
   processus ») : infos disposées en colonnes alignées (référence, libellé,
   propriétaire, version, date, rédacteur, statut, bouton « afficher ») pour
   faciliter la lecture. Une seule grille porte tous les groupes de types
   (conteneur .tb-documents) : les .groupe-documents, leurs <ul> et <li> sont
   transparents (display:contents) afin que les colonnes restent alignées d'un
   type de document à l'autre. Le titre de groupe occupe toute la largeur. */
.tb-documents {
  display: grid;
  grid-template-columns: max-content minmax(6rem, 1fr) max-content max-content max-content max-content max-content max-content;
  gap: 0.5rem 1.1rem;
  align-items: baseline;
}
.tb-documents > .groupe-documents,
.tb-documents > .groupe-documents > ul,
.tb-documents > .groupe-documents > ul > li { display: contents; }
.tb-documents > .groupe-documents > h4 {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0.9rem 0 0;
}
.tb-documents > .groupe-documents:first-child > h4 { margin-top: 0; }
.tb-documents .groupe-documents li { cursor: default; }
.tb-documents .groupe-documents li:hover { background: none; }
/* Ligne entière cliquable (fiches processus / documents généraux, cf.
   ligneDocumentAdmin, sansPictoVoir) : cursor + surbrillance au survol sur
   TOUTE la ligne (textes + espaces entre les champs), à l'exclusion des
   sticks (badge de statut, et le "!" de nouvelle version qui réutilise la
   même classe) : ceux-ci gardent leur propre couleur, jamais recouverte par
   la surbrillance. display:contents sur le <li> l'empêche d'avoir sa propre
   boîte/fond (contrairement à .liste-documents-lecteur ci-dessus,
   .tb-documents a un vrai column-gap non nul entre ses cellules) : colorer
   seulement chaque cellule directe laisse donc les espaces inter-colonnes
   non teintés. Comblés ici par un box-shadow non flouté, décalé de la
   moitié du column-gap (1.1rem/2) de part et d'autre de chaque cellule
   texte, de la même couleur que le fond — déborde jusqu'au milieu de chaque
   espace (y compris, des deux côtés, celui qui borde un stick), sans jamais
   recouvrir le contenu d'une cellule voisine (décalage toujours inférieur à
   la largeur d'une cellule). */
.tb-documents .groupe-documents li.ligne-document-cliquable { cursor: pointer; }
.tb-documents .groupe-documents li.ligne-document-cliquable:hover > *:not(.badge-statut-document) {
  background: var(--sauge-clair);
  box-shadow: -0.55rem 0 0 var(--sauge-clair), 0.55rem 0 0 var(--sauge-clair);
}
.tb-documents .tb-titre { min-width: 0; }
.tb-documents .tb-proprietaire,
.tb-documents .tb-version,
.tb-documents .tb-date,
.tb-documents .tb-redacteur {
  font-size: 0.76rem;
  color: var(--texte-att);
  white-space: nowrap;
}
.tb-documents .badge-statut-document { justify-self: end; align-self: start; }
.tb-documents .tb-actions { justify-self: end; align-self: start; display: flex; gap: 0.3rem; }
/* Emplacement réservé quand il n'y a pas de bouton « voir le document » :
   garde le bouton « fiche » aligné verticalement d'une ligne à l'autre. */
.bouton-icone-fantome { visibility: hidden; }

/* Ligne « Ajouter un document » (bloc de la liste Responsable QHSSE et fiche du
   pilote) : le bouton reste à gauche, un liseré plus épais prolonge la ligne à
   sa droite, centré sur la moitié de la hauteur du bouton. */
.actions-fiche-documents { margin-top: 1.1rem; display: flex; justify-content: flex-start; align-items: center; gap: 0.9rem; }
.actions-fiche-documents .trait-actions-documents {
  flex: 1 1 auto;
  border-top: 3px solid var(--sauge);
}

/* Barre au-dessus de la liste des documents associés : titre + bouton de
   bascule « Vue par type » / « Vue hiérarchique ». */
.fp-documents-barre { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1rem; }
.fp-documents-barre .fp-documents-titre {
  margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--marine);
}
.fp-documents-barre .bouton-mini { margin-left: auto; }
/* Mode lecteur : la barre de bascule sert aussi de liseré sous la description.
   Un trait horizontal court de la gauche jusqu'à juste avant le bouton (le
   `gap` de .fp-documents-barre ménage l'espace avant le bouton). */
.fp-documents-barre.barre-lecteur { align-items: center; margin: 0.6rem 0 0.9rem; }
.fp-documents-barre.barre-lecteur::before {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--ligne);
}
.fp-documents-barre.barre-lecteur .bouton-mini { margin-left: 0; flex: 0 0 auto; }
/* Pop-up côte à côte (mode lecteur) : le liseré est APRÈS la description, court
   depuis la gauche jusqu'au bouton de bascule de vue, placé en bout à droite. */
#corps-fiche-document .fp-documents-barre.barre-lecteur { gap: 0.9rem; }
/* Modale #boite-fiche-document (fiche procédure, aperçu PDF, côte à côte) :
   pas de liseré sous le titre… sauf dans l'aperçu PDF quand le document a une
   description — le liseré s'affiche alors APRÈS la description. */
#boite-fiche-document > .titre-pave-lisere { display: none; }
/* Aperçu côte à côte en mode lecteur (le panneau porte un #desc-apercu-cote) :
   liseré masqué sauf quand une description est affichée. Ailleurs (fiche
   procédure des pages d'édition), le liseré garde son comportement normal. */
#apercu-cote:has(#desc-apercu-cote) > .titre-pave-lisere { display: none; }
#boite-fiche-document.a-description > .titre-pave-lisere { display: block; }
#apercu-cote.a-description:has(#desc-apercu-cote) > .titre-pave-lisere { display: block; }
#boite-fiche-document #desc-fiche-document,
#apercu-cote #desc-apercu-cote {
  /* Alignée verticalement sur le 1er caractère de la référence : le pavé titre
     a 0.75rem de retrait interne. */
  margin: 0.5rem 0 0; padding-left: 0.75rem;
}
#boite-fiche-document #desc-fiche-document[hidden],
#apercu-cote #desc-apercu-cote[hidden] { display: none; }
/* Liseré de cette zone de visualisation (aperçu PDF et côte à côte, en mode
   lecteur comme en mode responsable / pilote / administrateur) : fin. */
#boite-fiche-document > .titre-pave-lisere,
#apercu-cote > .titre-pave-lisere {
  border-top-width: 1px; border-top-color: var(--ligne);
}
/* Boutons de contexte (« Fiche processus », « Afficher la liste / les
   documents trouvés »… ils partagent la même zone ; #modal-point-document /
   #apercu-point-document sont propres à la page Référentiel, cf.
   referentiel.js) : calés à gauche de la ligne d'actions, même fond que le
   titre de la pop-up. */
#voile-document #modal-processus-document,
#voile-document #modal-point-document,
#voile-document #modal-liste-document,
#voile-document #apercu-processus-document,
#voile-document #apercu-point-document,
#voile-document #apercu-liste-document {
  margin-right: auto;
  background: var(--titre-central-fond, var(--sauge-clair));
}
/* « Fiche processus » et « Afficher <catégorie> / la liste / les documents
   trouvés » : restent en texte foncé même mis en évidence (bouton-actif) — le
   fond, lui, reste clair (règle ci-dessus, plus spécifique que .bouton-actif),
   un texte blanc y serait peu lisible. */
#voile-document #modal-processus-document.bouton-actif,
#voile-document #apercu-processus-document.bouton-actif,
#voile-document #modal-liste-document.bouton-actif,
#voile-document #apercu-liste-document.bouton-actif {
  color: var(--marine);
}
/* Si un bouton de contexte est suivi d'un autre bouton de contexte visible, il
   ne pousse pas l'espace : les boutons de contexte restent accolés à gauche,
   seul le dernier crée la séparation avec Onglet / Fermer. */
#voile-document #modal-processus-document:has(~ #modal-point-document:not([hidden])),
#voile-document #modal-processus-document:has(~ #modal-liste-document:not([hidden])),
#voile-document #modal-point-document:has(~ #modal-liste-document:not([hidden])),
#voile-document #apercu-processus-document:has(~ #apercu-point-document:not([hidden])),
#voile-document #apercu-processus-document:has(~ #apercu-liste-document:not([hidden])),
#voile-document #apercu-point-document:has(~ #apercu-liste-document:not([hidden])) {
  margin-right: 0.6rem;
}
/* Flèche du bouton « Fiche processus » : pointe vers la gauche (pop-up de
   gauche masquée, clic pour l'afficher) ou vers la droite (pop-up de gauche
   affichée, clic pour la refermer) — cf. qhsse.js / formulaires.js. */
.fleche-bouton-cote { display: inline-block; margin-right: 0.3rem; }
/* Bouton « Fermer la pop-up » : propre à la page Référentiel (referentiel.js),
   présent uniquement en côte à côte (l'attribut hidden reste posé ; cette
   règle le réaffiche via l'id). */
#voile-document.avec-apercu #modal-fermer-gauche { display: inline-flex; }
/* Vue hiérarchique : le sticker de type et le picto ↳ qui le précède sont
   décalés vers la droite à chaque niveau de profondeur (indentation
   d'arborescence). */
.tb-documents-arbo { overflow: hidden; }
.tb-documents-arbo .groupe-documents li .code { padding-left: calc(var(--niveau, 0) * 1.4rem); white-space: nowrap; }
.tb-documents-arbo .groupe-documents li.est-enfant .code::before {
  content: "\21B3\00A0"; color: var(--texte-att); font-weight: 400;
}
/* Sticker de type devant la référence (vue hiérarchique) : même gabarit de
   pastille que le statut « Approuvé », mais texte plus foncé et plus gras pour
   une meilleure lisibilité. */
.tb-documents-arbo .groupe-documents li .code .type-puce {
  display: inline-block;
  /* Sticker de type (PROCÉDURE, FORMULAIRE…) : typographie du « libellé des
     catégories » de la zone centrale (paramétrage administrateur). */
  font-family: var(--groupe-police, inherit);
  font-size: var(--groupe-taille, 0.72rem);
  font-weight: var(--groupe-poids, 800);
  letter-spacing: 0.04em;
  color: var(--marine);
  background: var(--sauge-clair);
  border: 1px solid var(--sauge-clair);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
/* Liseré de séparation entre blocs « procédure » (vue hiérarchique) : il part de
   la fin du sticker de type et court jusqu'au bord droit de la liste (fin du
   bouton « voir le document »). Plus court que les séparateurs pleine largeur. */
.tb-documents-arbo .groupe-documents li.ligne-procedure .code { position: relative; }
/* Titre des procédures en gras. */
.tb-documents-arbo .groupe-documents li.ligne-procedure .tb-titre { font-weight: 700; }
/* Espace supplémentaire au-dessus de chaque procédure (sauf la première) pour
   bien la dégager du bloc précédent, sous le liseré. Sur la pastille de statut
   et la zone d'actions, on décale par une marge (pas un padding) pour ne pas
   agrandir la pastille ni la faire chevaucher le liseré. */
.tb-documents-arbo .groupe-documents li.ligne-procedure:not(:first-child) > * { padding-top: 0.7rem; }
.tb-documents-arbo .groupe-documents li.ligne-procedure:not(:first-child) > .badge-statut-document,
.tb-documents-arbo .groupe-documents li.ligne-procedure:not(:first-child) > .tb-actions {
  padding-top: 0;
  margin-top: 0.7rem;
}
.tb-documents-arbo .groupe-documents li.ligne-procedure:not(:first-child) .code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.45rem;
  width: 100vw;
  border-top: 1px solid var(--ligne);
  pointer-events: none;
}

/* Marge interne resserrée en bas sur les deux pop-up de la zone de
   visualisation de document (fiche à gauche, aperçu à droite) — un peu plus
   de place pour le contenu. Le haut garde sa marge d'origine (espace sous le
   titre). Réduite de moitié une seconde fois (2026-09-14, sur retour) :
   1.75rem d'origine → 1.1rem → 0.55rem. */
#voile-document .boite-connexion {
  padding-bottom: 0.55rem;
}
/* Marge gauche/droite : réduite pareillement pour la pop-up de visualisation
   (#apercu-cote, ou #boite-fiche-document quand il affiche le PDF en plein
   écran) — 1.75rem d'origine → 0.55rem. La pop-up de gauche quand elle
   affiche une fiche (.boite-fiche-procedure : processus, procédure, liste,
   documents généraux…) est réduite deux fois plus (0.55rem → 0.275rem, sur
   retour du 2026-09-14). */
#voile-document .boite-connexion:not(.boite-fiche-procedure) {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
#voile-document .boite-connexion.boite-fiche-procedure {
  padding-left: 0.275rem;
  padding-right: 0.275rem;
}
/* Pop-up document. « Afficher la fiche » : fiche procédure — en tête le libellé
   à gauche et un pavé rôles à droite, puis la ligne de la version en cours,
   puis les documents liés (groupés par type). « Voir le document » : le PDF
   dans une iframe, la boîte est alors agrandie (.boite-document-pdf). */
#voile-document .boite-connexion.boite-fiche-procedure {
  /* La largeur s'adapte au contenu (la plus longue ligne de la liste des
     documents liés), entre 32rem et 94vw / 1000px. Les lignes qui pourraient
     tenir sur une seule ligne très large (intervenants, description) sont
     bornées pour ne pas dicter la largeur. */
  width: fit-content;
  min-width: 32rem;
  max-width: min(94vw, 1000px);
  max-height: 85vh;
  overflow: hidden;
}
/* Seul le corps de la pop-up de gauche défile : les boutons « Fermer » et
   « Retour » restent toujours visibles en bas. */
#voile-document .boite-fiche-procedure > #corps-fiche-document {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#voile-document .boite-fiche-procedure > .actions-formulaire {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--ligne);
  padding-top: 0.6rem;
}
/* En-tête de la pop-up de gauche (titre, description, liseré, bouton « vue par
   types · hiérarchique ») : reste visible pendant le défilement de la liste. */
#voile-document .boite-fiche-procedure #corps-fiche-document > .fiche-cote-fixe {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  margin: 0 -0.75rem;
  padding: 0 0.75rem 0.15rem;
}
#voile-document .boite-fiche-procedure #corps-fiche-document > .fiche-cote-fixe > .fp-documents-barre.barre-lecteur,
#voile-document .boite-fiche-procedure #corps-fiche-document > .fiche-cote-fixe > .fp-documents-barre.barre-tri-vie-gid {
  margin-bottom: 0;
}
/* Le corps de la fiche s'aligne sur la première lettre du titre : le pavé
   titre a un retrait interne de 0.75rem, on l'applique aussi au corps pour
   que description, intervenants et pavés démarrent sous le « P » de
   « Procédure » et non sur le bord de la boîte. */
#voile-document .boite-fiche-procedure #corps-fiche-document { padding: 0 0.75rem; }
#corps-fiche-document .fp-doc-description,
#corps-apercu-cote .fp-doc-description { max-width: 40rem; }
#corps-fiche-document .ligne-intervenants,
#corps-apercu-cote.apercu-fiche .ligne-intervenants { max-width: 42rem; }
/* Aperçu PDF côte à côte : la fiche procédure reste à gauche, le document
   demandé s'ouvre dans un panneau à droite (les deux visibles en même temps). */
#voile-document { gap: 1rem; flex-wrap: wrap; }
#voile-document.avec-apercu { align-items: flex-start; }
/* Largeur au plus juste (fit-content) : juste assez pour que le libellé le
   plus long (vue par types, vue hiérarchique, sticker+référence+libellé…)
   tienne sur une seule ligne, jamais plus — pour laisser le maximum de place
   à la pop-up de visualisation à côté. Plafond de sécurité inchangé (58vw /
   680px) pour ne jamais dépasser la largeur d'avant ce réglage (2026-09-14). */
#voile-document.avec-apercu .boite-connexion.boite-fiche-procedure {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 30rem;
  max-width: min(58vw, 680px);
  max-height: 88vh;
}
/* Fiche procédure (pilote / QHSSE) affichée à côté de l'aperçu d'un document :
   elle s'élargit au besoin pour tenir la ligne d'un document rattaché sur une
   seule ligne (le voile passe les deux panneaux l'un sous l'autre si l'écran
   est trop étroit) — plafond plus haut que le cas général ci-dessus. */
#voile-document.avec-apercu .boite-connexion.boite-fiche-procedure:has(#corps-fiche-document .fp-doc-pave) {
  max-width: min(88vw, 900px);
}
#apercu-cote {
  max-width: none;
  flex: 1 1 520px;
  width: min(62vw, 900px);
  height: 92vh;
  display: flex;
  flex-direction: column;
}
#apercu-cote[hidden] { display: none; }
#apercu-cote #titre-apercu-cote {
  color: var(--titre-central-couleur, var(--marine));
  font-family: var(--titre-central-police, inherit);
  font-size: var(--titre-central-taille, 1.15rem);
  font-weight: var(--titre-central-poids, 700);
}
#apercu-cote #corps-apercu-cote { flex: 1; min-height: 0; }
#apercu-cote #corps-apercu-cote.apercu-fiche { overflow-y: auto; padding-right: 0.4rem; }
#apercu-cote .apercu-pdf { width: 100%; height: 100%; }
#corps-fiche-document .separateur-fiche,
#corps-apercu-cote.apercu-fiche .separateur-fiche { margin: 0.7rem 0; }
/* max-width indispensable : sans elle, une description longue (texte libre,
   pas un libellé) impose sa largeur de ligne unique à la pop-up de gauche
   (width:fit-content ci-dessus), qui grandirait pour l'accueillir sans
   retour à la ligne — l'exact inverse de l'effet recherché. */
#corps-fiche-document .description-processus,
#corps-apercu-cote.apercu-fiche .description-processus { margin: 0.2rem 0 0.6rem; max-width: 26rem; }
/* Mode lecteur copié dans la pop-up de gauche : la description garde le même
   décalage sous le bloc titre qu'au centre. */
#corps-fiche-document .entete-lecteur .description-processus { margin: 1rem 0 0; padding-left: 0.9rem; }
#corps-fiche-document .ligne-intervenants,
#corps-apercu-cote.apercu-fiche .ligne-intervenants { margin: 0.2rem 0 0.4rem; }
.fp-doc-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
.fp-doc-entete .description-processus { margin: 0.2rem 0; flex: 1; min-width: 0; }
.fp-doc-entete .bouton-mini { margin-left: auto; }

.fp-version { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; }
/* Aperçu côte à côte : la ligne « version en cours » surlignée quand ce
   document est affiché à droite (sans décaler la mise en page). */
.fp-version.selectionne {
  background: var(--sauge-clair);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  margin: -0.25rem -0.4rem;
}
.fp-version .fp-vd { color: var(--texte-att); }
.fp-version .badge-statut-document { margin-left: auto; }
.fp-version .bouton-icone { margin-left: 0.3rem; }
.ligne-intervenants .bouton-mini { align-self: center; }

/* Documents liés : présentation groupée par type de la fiche processus
   (.groupe-documents) avec, par ligne, référence + libellé, méta (version ·
   rédacteur), badge de statut et bouton d'aperçu. */
.fp-arbo .groupe-documents li { font-size: 0.88rem; }
.fp-arbo .groupe-documents li .fp-arbo-libelle { flex: 1 1 8rem; min-width: 0; }
.fp-arbo .groupe-documents li .fp-vd { color: var(--texte-att); font-size: 0.78rem; }
.fp-arbo .groupe-documents li .badge-statut-document { margin-left: auto; }
.fp-arbo .groupe-documents li .bouton-icone { margin-left: 0.3rem; }
.fp-arbo .etat-vide { margin: 0; }

#voile-document .boite-connexion.boite-document-pdf {
  max-width: none;
  width: min(92vw, 1100px);
  height: 92vh;
}
.boite-document-pdf #corps-fiche-document { flex: 1; min-height: 0; }
.apercu-pdf {
  width: 100%; height: 100%;
  border: 1px solid var(--ligne); border-radius: 6px; background: var(--surface);
}
/* Lien web (à la place du PDF) : la plupart des sites tiers refusent de
   s'afficher en iframe, donc pas de tentative d'intégration — un message et
   un bouton pour ouvrir le lien dans un nouvel onglet. */
.apercu-lien-externe {
  width: 100%; height: 100%; min-height: 320px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  border: 1px dashed var(--ligne); border-radius: 8px; background: var(--fond);
  padding: 2rem 1.5rem; text-align: center; color: var(--texte-att); font-size: 0.9rem;
}
.apercu-lien-externe .erreur { margin: 0; }
.apercu-lien-externe a.bouton { word-break: break-all; }

/* Pop-up « ajouter un document » : un pavé par type de document actif, avec
   le sticker de nomenclature (même gabarit que celui des vues hiérarchiques,
   cf. .type-puce) devant le libellé. */
.choix-types { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.3rem 0; }
.choix-types .choix-type {
  width: 100%; justify-content: flex-start; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1rem;
}
.choix-types .choix-type .type-puce {
  display: inline-block; flex: 0 0 auto;
  font-family: var(--groupe-police, inherit);
  font-size: 0.7rem; font-weight: var(--groupe-poids, 800); letter-spacing: 0.04em;
  color: var(--marine); background: var(--sauge-clair);
  padding: 0.15rem 0.55rem; border-radius: 999px;
}
.choix-types .choix-type .choix-type-libelle { font-weight: 600; }
/* Choix d'un document parent (rattachement, #voile-rattachement-document /
   #voile-rattachement-ajout) : même gabarit que .choix-type, mais sur deux
   lignes — puce de type + référence + statut au-dessus, libellé en dessous -
   pour rester lisible quelle que soit la longueur du titre. La puce affiche
   ici le libellé complet du type (pas la nomenclature) : sa largeur est donc
   fixée (--largeur-puce-document, calée sur "Mode opératoire", le plus long
   des libellés actuels) pour que la référence reste alignée verticalement
   d'une ligne à l'autre quel que soit le type ; le libellé du document
   (ligne 2) reprend le même décalage pour démarrer sous la référence, pas
   sous la puce. */
.choix-document { --largeur-puce-document: 18ch; }
.choix-types .choix-type.choix-document { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.choix-document-entete { display: flex; align-items: center; gap: 0.5rem; }
.choix-document .type-puce { min-width: var(--largeur-puce-document); text-align: center; }
.choix-document-reference { font-family: 'Courier New', monospace; font-weight: 700; color: var(--marine); }
.choix-document-entete .badge-statut-document { margin-left: auto; }
.choix-document .choix-type-libelle {
  display: block;
  text-align: left;
  /* Repris précisément par ajusterMiseEnPageChoixDocuments (commun.js) une
     fois la liste rendue, en --decalage-libelle (mesure réelle du rendu :
     "ch" n'évalue pas à la même largeur dans la police de la puce, plus
     petite, que dans celle du libellé) ; ce calc() ne sert que de repli tant
     que ce script n'a pas encore tourné. */
  margin-left: var(--decalage-libelle, calc(var(--largeur-puce-document) + 1.1rem + 0.5rem));
}
.choix-document .meta { font-size: 0.76rem; color: var(--texte-att); }

/* Les deux pop-up de rattachement (QHSSE, et Les formulaires / La vie du
   GID) partagent : une liste de candidats seule à défiler si elle dépasse la
   hauteur disponible (titre, texte d'aide et bouton Annuler toujours
   visibles, cf. .boite-connexion déjà en colonne flex par défaut —
   min-height:0 est nécessaire pour qu'un enfant flex accepte de rétrécir en
   dessous de son contenu) ; et un liseré noir pleine largeur au niveau du
   bouton Annuler, qui le coupe en son milieu — d'où le fond opaque du bouton
   (sinon le liseré serait visible par transparence à travers lui). */
#voile-rattachement-document .boite-connexion,
#voile-rattachement-ajout .boite-connexion {
  max-height: 80vh;
}
#mrd-liste, #vra-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#voile-rattachement-document .actions-formulaire,
#voile-rattachement-ajout .actions-formulaire {
  position: relative;
}
#voile-rattachement-document .actions-formulaire::before,
#voile-rattachement-ajout .actions-formulaire::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid #000;
}
#voile-rattachement-document .actions-formulaire .bouton,
#voile-rattachement-ajout .actions-formulaire .bouton {
  position: relative;
  background: var(--surface);
}

/* Rattachement (choix du document parent, QHSSE) : plus large que le
   gabarit par défaut (360px), les lignes affichant désormais puce de type +
   référence + statut + libellé plutôt qu'une simple option de select. */
#voile-rattachement-document .boite-connexion { max-width: 560px; }

/* Ajout d'un document (Les formulaires / La vie du GID), étapes catégorie/
   processus/document : la pop-up par défaut (360px) est trop étroite pour ce
   titre et, à la dernière étape, pour les candidats affichés (cf.
   .choix-document, ci-dessus). */
#voile-choix-categorie-ajout .boite-connexion,
#voile-choix-processus-ajout .boite-connexion,
#voile-rattachement-ajout .boite-connexion {
  max-width: 480px;
}
#voile-choix-categorie-ajout .boite-connexion h2,
#voile-choix-processus-ajout .boite-connexion h2,
#voile-rattachement-ajout .boite-connexion h2 {
  font-size: 1.15rem;
}
/* Étape « choix du document » : un peu plus large que les précédentes, pour
   rester confortable avec des libellés longs (cf. .choix-document, ci-dessus). */
#voile-rattachement-ajout .boite-connexion { max-width: 600px; }

/* Indicateur de masquage d'un processus (pastille ou bouton bascule).
   Discret quand le processus est visible (cas normal) ; mis en évidence
   seulement quand il est masqué. */
.badge-masque {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.12rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--ligne); color: var(--texte-att);
  background: var(--surface); font-family: inherit; line-height: 1.4;
}
.badge-masque.masque { background: var(--fond); border-color: #d9b382; color: #a4392a; }
.badge-masque[hidden] { display: none; }
button.badge-masque { cursor: pointer; }
button.badge-masque:hover { filter: brightness(0.97); }

/* Statut d'un document : même forme que .badge-masque, une couleur par
   statut (rédaction = neutre, diffusé = vert comme le sticker « Nouveau »,
   archivé = même ambre que l'ancien badge « Masqué »). */
.badge-statut-document {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.12rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--ligne); font-family: inherit; line-height: 1.4;
}
.badge-statut-document.statut-redaction { background: var(--surface); color: var(--texte-att); }
.badge-statut-document.statut-diffuse { background: var(--fond); border-color: #8ab6a0; color: #2f6b4c; }
.badge-statut-document.statut-archive { background: var(--fond); border-color: #d9b382; color: #a4392a; }
.lien-retour {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--sauge);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.lien-retour:hover { text-decoration: underline; }

.lexique { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.entree-lexique {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.entree-lexique dt {
  font-weight: 700;
  color: var(--marine);
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}
.entree-lexique dd { margin: 0; color: var(--texte); font-size: 0.92rem; }
.entree-lexique .a-preciser {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--texte-att);
}

/* Cartographie documentaire (bouton "Éditer la cartographie", zone basse,
   cf. genererCartographiePdf dans commun.js) : PDF généré à la volée affiché
   en iframe pleine hauteur, même gabarit que la pop-up de visualisation d'un
   document (#voile-document .boite-document-pdf). */
#voile-cartographie .boite-connexion.boite-connexion-large {
  max-width: none;
  width: min(92vw, 1100px);
  height: 92vh;
  display: flex; flex-direction: column;
}
#cart-corps { flex: 1; min-height: 0; }
#cart-corps .apercu-pdf { width: 100%; height: 100%; }
#cart-corps .etat-chargement, #cart-corps .erreur { margin-top: 1rem; }

/* Pop-up de choix du type d'édition (#voile-choix-cartographie, QHSSE
   uniquement) : Annuler à gauche, les deux éditions empilées verticalement
   à droite (Par type au-dessus de Hiérarchique). */
.actions-choix-cartographie { justify-content: space-between; align-items: center; }
.choix-cartographie-options { display: flex; flex-direction: column; gap: 0.5rem; }