/* =====================================================================
   GESTAL QSSE - Charte graphique
   Thème clair, fond blanc, bleu foncé / bleu clair, sobre et industriel.
   ===================================================================== */

:root {
  --blue-dark: #0B3D66;
  --blue-mid: #0B5394;
  --blue-light: #5B8FB9;
  --blue-pale: #EAF2F8;
  --grey-100: #F5F7FA;
  --grey-200: #E7EBEF;
  --grey-400: #B9C2CC;
  --grey-600: #5B6773;
  --grey-900: #1E2733;
  --white: #FFFFFF;
  --danger: #C0392B;
  --warning: #E07B00;
  --success: #2E7D32;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(16, 40, 64, 0.08), 0 1px 2px rgba(16, 40, 64, 0.06);
  --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Taille de référence du texte.

   `html` ne fixe plus une taille en pixels : il suit la taille par défaut
   du navigateur (16 px dans la quasi-totalité des cas). Toutes les tailles
   de la feuille sont ensuite exprimées en `rem`, donc relatives à cette
   référence. Deux conséquences voulues :
     - la lisibilité d'ensemble se règle en un seul endroit ;
     - une personne qui a agrandi la police par défaut de son navigateur
       (confort visuel, malvoyance) voit l'application suivre son réglage,
       ce que des tailles en pixels interdisaient.

   Pour agrandir ou réduire l'ensemble sans rien casser, il suffit de
   décommenter la ligne ci-dessous et d'ajuster le pourcentage : 106.25 %
   donne 17 px de base, 93.75 % donne 15 px. Les proportions entre les
   titres, les tableaux, les libellés et les mentions discrètes restent
   inchangées.
--------------------------------------------------------------------- */
html {
  font-size: 100%;
  /* font-size: 106.25%; */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--white);
  color: var(--grey-900);
  font-size: 1rem;
}

a { color: var(--blue-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--blue-dark); margin: 0 0 .6em 0; }

/* ---------------- Layout général ---------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--blue-dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-logo { height: 28px; filter: brightness(0) invert(1); }
.sidebar-logo-mark { height: 52px; width: auto; display: block; }
.sidebar-title { font-weight: 600; letter-spacing: 1px; font-size: 0.875rem; opacity: .85; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-nav a {
  color: rgba(255,255,255,.82);
  padding: 9px 16px;
  font-size: 0.9375rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Icône d'entrée de menu : format fixe pour que tous les libellés s'alignent,
   et couleur héritée du lien (stroke="currentColor" dans le sprite SVG). */
.sidebar-ico {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.sidebar-link-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.sidebar-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  text-align: center;
  vertical-align: middle;
}
.sidebar-nav a.active {
  background: rgba(255,255,255,.10);
  border-left-color: var(--blue-light);
  color: #fff;
  font-weight: 600;
}
.sidebar-section {
  margin-top: 10px;
  padding: 7px 16px 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.45);
}

/* Titre de section cliquable (section Administration repliable) : c'est un
   <button> pour rester accessible au clavier et aux lecteurs d'écran, remis
   à plat visuellement pour ressembler aux autres titres de section. */
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-section-toggle:hover { color: rgba(255,255,255,.75); }
.sidebar-section-toggle:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: -2px;
}
.sidebar-section-label { flex: 1; }
/* Chevron : pointe vers le bas quand la section est ouverte, vers la droite
   quand elle est repliée. */
.sidebar-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease-in-out;
}
.sidebar-section-toggle[aria-expanded="false"] .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-subnav { display: flex; flex-direction: column; }
.sidebar-subnav[hidden] { display: none; }
/* Le compteur de comptes bloqués est rappelé sur le titre de section lorsque
   celle-ci est repliée, pour ne pas perdre l'alerte visuelle. */
.sidebar-section-count { display: none; }
.sidebar-section-toggle[aria-expanded="false"] .sidebar-section-count { display: inline-block; }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 20px;
}

/* ---------------- Menu réductible (barre d'icônes) ---------------- */

.sidebar-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.sidebar-collapse-toggle:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -2px; }
.sidebar-collapse-chevron { font-size: 1rem; line-height: 1; flex-shrink: 0; }

/* La largeur est animée pour que la bascule soit lisible plutôt que brutale.
   La zone principale suit automatiquement (flex: 1). */
.sidebar { transition: width .18s ease-in-out; }

.app-shell.sidebar-collapsed .sidebar { width: 58px; }
/* Tout ce qui est purement textuel disparaît ; les icônes restent seules et
   sont recentrées. Le libellé est conservé dans l'attribut title des liens
   (voir layout/app.php), d'où l'info-bulle au survol. */
.app-shell.sidebar-collapsed .sidebar-link-label,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .sidebar-chevron,
.app-shell.sidebar-collapsed .sidebar-user,
.app-shell.sidebar-collapsed .sidebar-version { display: none; }
.app-shell.sidebar-collapsed .sidebar-nav a,
.app-shell.sidebar-collapsed .sidebar-section-toggle,
.app-shell.sidebar-collapsed .sidebar-change-password,
.app-shell.sidebar-collapsed .sidebar-logout,
.app-shell.sidebar-collapsed .sidebar-collapse-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.app-shell.sidebar-collapsed .sidebar-footer { padding: 10px 0; }
.app-shell.sidebar-collapsed .sidebar-brand { padding: 14px 0; }
.app-shell.sidebar-collapsed .sidebar-logo-mark { height: 30px; }
/* Le titre "Administration" devient sa seule icône, et le trait de séparation
   remplace le texte pour que la section reste identifiable. */
.app-shell.sidebar-collapsed .sidebar-section-toggle {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 8px;
  padding-top: 12px;
}
.sidebar-section-ico { display: none; }
.app-shell.sidebar-collapsed .sidebar-section-ico { display: block; }
/* Pastilles de notification : le libellé qui les portait est masqué, on les
   réaffiche en vignette sur l'icône pour ne pas perdre l'alerte. */
.app-shell.sidebar-collapsed .sidebar-nav a { position: relative; }
.app-shell.sidebar-collapsed .sidebar-count {
  position: absolute;
  top: 4px;
  right: 10px;
  min-width: 15px;
  padding: 0 4px;
  font-size: 0.6875rem;
  line-height: 15px;
}
/* Rappel du compteur sur l'icône "Administration" : uniquement quand la
   section est REPLIÉE, sinon la pastille ferait doublon avec celle de l'entrée
   "Comptes bloqués" visible juste en dessous. */
.app-shell.sidebar-collapsed .sidebar-section-toggle { position: relative; }
.app-shell.sidebar-collapsed .sidebar-section-toggle[aria-expanded="false"] .sidebar-section-count {
  position: absolute;
  top: 8px;
  right: 8px;
}
.sidebar-user-name { font-weight: 600; font-size: 0.9375rem; }
.sidebar-user-role { font-size: 0.8125rem; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.sidebar-change-password { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.sidebar-change-password:hover { color: #fff; }
.sidebar-logout { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: #FFD9D9; }
/* La déconnexion est un bouton de formulaire (POST + jeton) : on efface le
   style natif du bouton pour qu'il reste identique à l'ancien lien. */
.sidebar-logout-form { margin: 0; }
button.sidebar-logout {
  width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font-family: inherit; line-height: inherit; text-align: left; cursor: pointer;
}
button.sidebar-logout:hover { color: #fff; }
button.sidebar-logout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sidebar-version { font-size: 0.75rem; color: rgba(255,255,255,.4); margin-top: 8px; }

.main-content { flex: 1; min-width: 0; background: var(--grey-100); }

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 18px 30px;
}
.topbar h1 { font-size: 1.375rem; margin: 0; }

.page-body { padding: 24px 30px 60px; }

/* ---------------- Alertes ---------------- */

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9375rem; }
.alert-success { background: #E7F5E8; color: var(--success); border: 1px solid #B9DEC0; }
.alert-error { background: #FBEAE8; color: var(--danger); border: 1px solid #F0C2BC; }
.alert-info { background: #EAF2F8; color: var(--blue-dark); border: 1px solid #C9DFEF; }
.alert-warning { background: #FDF0DC; color: var(--warning); border: 1px solid #F5D6A0; }

/* Alerte clignotante, réservée aux avertissements à échéance (obligation de
   double authentification). Le clignotement est volontairement LENT - un
   cycle de 3 secondes - et ne joue que sur l'intensité du fond et de la
   bordure : le texte, lui, garde un contraste constant et reste lisible à
   tout instant. Un clignotement rapide ou portant sur le texte serait
   fatigant, et au-delà de 3 flashs par seconde il présenterait un risque
   réel pour les personnes photosensibles. */
@keyframes alert-blink {
  0%, 100% { background: #FBEAE8; border-color: #F0C2BC; }
  50%      { background: #F6C9C3; border-color: #D9534F; }
}
.alert-blink { animation: alert-blink 3s ease-in-out infinite; }

/* Une personne ayant demandé à son système de limiter les animations ne voit
   aucun clignotement : l'alerte reste simplement rouge et bien visible. */
@media (prefers-reduced-motion: reduce) {
  .alert-blink { animation: none; background: #F6C9C3; border-color: #D9534F; }
}

/* ---------------- Cartes / KPI ---------------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  border-left: 4px solid var(--blue-mid);
}
.kpi-card.kpi-clickable {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-card.kpi-clickable:hover {
  box-shadow: 0 4px 14px rgba(11,61,102,.18);
  transform: translateY(-1px);
  text-decoration: none;
}
.kpi-card .kpi-value { font-size: 1.875rem; font-weight: 700; color: var(--blue-dark); }
.kpi-card .kpi-label { font-size: 0.875rem; color: var(--grey-600); margin-top: 4px; }
.kpi-card.kpi-danger { border-left-color: var(--danger); }
.kpi-card.kpi-warning { border-left-color: var(--warning); }
.kpi-card.kpi-success { border-left-color: var(--success); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}
.card h2, .card h3 { margin-top: 0; }

/* ---------------- Tableaux ---------------- */

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--white); }
table.data-table th {
  background: var(--blue-pale);
  color: var(--blue-dark);
  text-align: left;
  padding: 10px 8px;
  font-weight: 600;
  border-bottom: 2px solid var(--grey-200);
  white-space: nowrap;
}
table.data-table td { padding: 9px 8px; border-bottom: 1px solid var(--grey-200); vertical-align: top; }
/* Le texte ayant légèrement grandi, on récupère quelques pixels sur les
   colonnes dont le contenu a une longueur fixe et connue : une référence
   (EV-2026-0001) et une date coupées en deux lignes se lisent mal et
   déforment la hauteur des lignes. Les tableaux trop larges restent
   défilables horizontalement (.table-wrapper). */
table.data-table td.nowrap,
table.data-table td:first-child { white-space: nowrap; }
table.data-table tr:hover td { background: var(--grey-100); }

.table-wrapper { overflow-x: auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Registre CARSAT des accidents bénins : ses treize colonnes sont imposées et
   ne peuvent pas être retirées. On resserre donc la typographie et les marges
   de ce seul tableau pour en montrer le plus possible d'un coup d'œil, le
   défilement horizontal prenant le relais sur les écrans étroits. */
.data-table.table-compact th, .data-table.table-compact td { padding: 6px 6px; font-size: 0.8125rem; }
.data-table.table-compact td:first-child { white-space: nowrap; }

/* ---------------- Formulaire utilisateur (création / modification) ---------------- */

/* Disposition verticale, un champ par ligne. La largeur est bornée : étirées
   sur toute la largeur d'un grand écran, des cartes contenant des champs de
   480 px laisseraient un grand vide à droite et l'œil perdrait la colonne. */
.user-form { max-width: 760px; }
/* Les aides sous les champs gardent la largeur de la colonne de saisie. */
.user-form .form-stack .hint { max-width: 480px; }
.user-form-title {
  margin: 0 0 14px; padding-bottom: 10px;
  font-size: 1rem; color: var(--blue-dark);
  border-bottom: 1px solid var(--grey-200);
}

/* ---------------- Journal des modifications (Administration > Version) ---------------- */

/* Une livraison par ligne, repliée par défaut : la page se lit comme une table
   des matières. Élément natif <details>, donc aucun JavaScript, compatible avec
   la politique de sécurité du contenu, et accessible au clavier. */
.changelog-list { margin-top: 14px; border-top: 1px solid var(--grey-200); }
.changelog-entry { border-bottom: 1px solid var(--grey-200); }
.changelog-entry > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px; cursor: pointer; list-style: none;
}
.changelog-entry > summary::-webkit-details-marker { display: none; }
/* Chevron dessiné en CSS : il pivote quand la livraison est ouverte. */
.changelog-entry > summary::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 4px;
  border-right: 2px solid var(--blue-mid, #0B5394); border-bottom: 2px solid var(--blue-mid, #0B5394);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.changelog-entry[open] > summary::before { transform: rotate(45deg); }
.changelog-entry > summary:hover { background: var(--grey-100); }
.changelog-entry > summary:focus-visible { outline: 2px solid var(--blue-mid, #0B5394); outline-offset: 2px; }
.changelog-title { flex: 1 1 auto; font-weight: 600; color: var(--blue-dark); }
.changelog-entry > summary .badge { flex: 0 0 auto; white-space: nowrap; }
.changelog-body { padding: 0 8px 14px 26px; }
@media (prefers-reduced-motion: reduce) {
  .changelog-entry > summary::before { transition: none; }
}

/* ---------------- Graphiques (TdB suivi activité) ---------------- */

/* Les graphiques sont du SVG produit par le serveur (App\Services\Chart) :
   aucune bibliothèque JavaScript, la politique de sécurité du contenu
   interdisant les ressources externes. Le SVG s'adapte à la largeur de sa
   carte par son viewBox, il n'y a donc rien à recalculer à l'affichage. */
.chart { display: block; width: 100%; height: auto; margin-top: 6px; }
.chart-grid { stroke: var(--grey-200); stroke-width: 1; }
.chart-axis { font-family: inherit; font-size: 13px; fill: var(--grey-600); }
.chart-bar-value { font-family: inherit; font-size: 12px; font-weight: 600; fill: #fff; }
.chart-bar-value-out { fill: var(--grey-600); }
.chart-total { font-family: inherit; font-size: 12px; font-weight: 700; fill: var(--blue-dark); }
.chart-empty { color: var(--grey-600); font-style: italic; margin: 14px 0; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 6px; font-size: 0.8125rem; color: var(--grey-600); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Deux graphiques côte à côte sur grand écran, l'un sous l'autre en dessous de
   1100 px : comprimer un classement de sites en demi-largeur sur un portable
   le rendrait illisible. */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-row > .card { margin-bottom: 0; }
@media (max-width: 1100px) {
  .chart-row { grid-template-columns: 1fr; }
}

/* ---------------- Tableau des référentiels (Administration) ---------------- */

/* Le référentiel « Sites » compte neuf colonnes de texte. Sans contrainte, la
   première colonne s'étire sur toute la longueur du libellé et repousse les
   boutons d'action hors de l'écran. Trois réglages, et trois seulement :

   1. le libellé revient à la ligne au lieu de rester sur une seule, ce qui lui
      rend une largeur raisonnable (mieux vaut deux lignes qu'un bouton
      inatteignable) ;
   2. les actions sont empilées, ce qui divise par trois la largeur de leur
      colonne ;
   3. cette colonne reste collée au bord droit pendant le défilement horizontal,
      de sorte que « Supprimer » est atteignable quel que soit le référentiel,
      même le jour où une colonne de plus sera ajoutée.

   On ne force AUCUNE coupure de mot ailleurs : `overflow-wrap: anywhere` sur
   tout le tableau découpait « MAINT » en « M AI NT ». */
/* Sélecteur volontairement aussi précis que la règle générique
   `table.data-table td:first-child { white-space: nowrap }` qu'il doit
   neutraliser : sans cela le libellé reste sur une seule ligne, quelle que
   soit la largeur imposée au bloc interne. */
table.data-table.ref-table td:first-child,
table.data-table.ref-table th:first-child { white-space: normal; }
/* Largeur FIXE et non simple plafond : avec un `max-width`, le navigateur
   réduit la colonne jusqu'à son minimum dès que le tableau tient à l'écran, et
   « AG Wind CM » se retrouve sur trois lignes. `overflow-wrap` ne coupe un mot
   que s'il ne tient vraiment pas. */
.ref-label { width: 190px; overflow-wrap: break-word; }

.ref-table .ref-actions,
.ref-table th.ref-actions { width: 1%; white-space: nowrap; position: sticky; right: 0; background: var(--white); box-shadow: -6px 0 6px -6px rgba(11, 61, 102, .25); }
.ref-table th.ref-actions { background: var(--blue-pale, #EAF2F8); }
.ref-table tr:hover td.ref-actions { background: var(--grey-100); }
.ref-table .ref-actions form { display: block !important; }
.ref-table .ref-actions .btn { display: block; width: 100%; margin: 0 0 5px; text-align: center; }
.ref-table .ref-actions form:last-child .btn { margin-bottom: 0; }

/* ---------------- Sélecteur de référentiel (Administration) ---------------- */

/* Une famille par ligne : un intitulé discret à gauche, les référentiels à
   droite. Le libellé fixe la première colonne pour que les pastilles restent
   alignées d'une famille à l'autre, ce qui rend la lecture verticale possible. */
.ref-selector { padding: 6px 18px; }
.ref-group { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--grey-200); }
.ref-group:last-child { border-bottom: none; }
.ref-group-title {
  flex: 0 0 132px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-600, #5B6773);
}
.ref-group-items { display: flex; flex-wrap: wrap; gap: 8px; }

/* Sur écran étroit, l'intitulé repasse au-dessus de sa famille plutôt que de
   réduire les pastilles à quelques caractères. */
@media (max-width: 760px) {
  .ref-group { flex-direction: column; gap: 8px; }
  .ref-group-title { flex: none; }
}

/* ---------------- Badges statut / priorité / urgence ---------------- */

.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.8125rem; font-weight: 600; }
.badge-grey { background: var(--grey-200); color: var(--grey-600); }
.badge-blue { background: var(--blue-pale); color: var(--blue-dark); }
.badge-danger { background: #FBEAE8; color: var(--danger); }
.badge-warning { background: #FDF0DC; color: var(--warning); }
.badge-success { background: #E7F5E8; color: var(--success); }

.urgency-retard { border-left: 4px solid var(--danger); }
.urgency-proche { border-left: 4px solid var(--warning); }
.urgency-avenir { border-left: 4px solid var(--grey-400); }

/* ---------------- Formulaires ---------------- */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--grey-900); margin-bottom: 5px; }
.form-group .hint { font-size: 0.8125rem; color: var(--grey-600); margin-top: 3px; }

/* Blocs de saisie verticaux (un champ par ligne, empilés les uns sous les
   autres) - utilisé pour le formulaire de déclaration d'événement, dont la
   longueur et la logique conditionnelle (Sécurité/Qualité) se lisent mieux
   en une seule colonne qu'en grille multi-colonnes. */
.form-stack { display: flex; flex-direction: column; }
.form-stack .form-group {
  padding: 14px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--grey-200);
}
.form-stack .form-group:first-child { padding-top: 0; }
.form-stack .form-group:last-child { border-bottom: none; padding-bottom: 0; }
.form-stack .form-group input, .form-stack .form-group select, .form-stack .form-group textarea {
  max-width: 480px;
}

input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], input[type=file], select, textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--grey-400);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: var(--font);
  background: var(--white);
  color: var(--grey-900);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(11,83,148,.15); }
textarea { min-height: 90px; resize: vertical; }

/* Le bouton "déclencheur" des listes déroulantes filtrables (type Visiteur,
   Type d'événement, etc.) doit avoir exactement le même rendu qu'un <select>
   natif, pour rester visuellement cohérent avec les autres champs des mêmes
   barres de filtres. */
.searchable-select-trigger {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  margin: 0;
  border: 1px solid var(--grey-400);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 18px;
  font-family: var(--font);
  background: var(--white);
  color: var(--grey-900);
  -webkit-appearance: none;
  appearance: none;
}
.searchable-select-trigger:focus, .searchable-select-trigger:hover {
  outline: none;
  border-color: var(--blue-mid);
}
.searchable-select-trigger-label { color: var(--grey-900); }

/* Bloc "Personne visitée" d'une visite QSSE : Personne visitée, Type de
   contrat et Signature sont empilés verticalement (un champ sous l'autre),
   avec la même largeur maximale pour rester bien alignés d'une personne
   visitée à l'autre. */
.personne-visitee-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
.personne-visitee-fields .form-group { margin: 0; }

.checkbox-line { display: flex; align-items: center; gap: 8px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; }

fieldset { border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 16px; margin: 0 0 18px; }
legend { font-weight: 600; color: var(--blue-dark); padding: 0 6px; }

/* ---------------- Boutons ---------------- */

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--grey-200);
  color: var(--grey-900);
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn-primary { background: var(--blue-mid); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: transparent; border-color: var(--blue-mid); color: var(--blue-mid); }
.btn-sm { padding: 5px 11px; font-size: 0.8125rem; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------------- Filtres ---------------- */

.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; background: var(--white); padding: 14px 16px; border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-bar .form-group { margin-bottom: 0; min-width: 160px; }

/* ---------------- Pagination ---------------- */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 4px;
  border-top: 1px solid var(--grey-200);
}
.pagination-info { font-size: 0.875rem; color: var(--grey-600); }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination a, .pagination span { padding: 6px 11px; border-radius: 6px; font-size: 0.875rem; border: 1px solid var(--grey-200); color: var(--grey-900); text-decoration: none; }
.pagination a:hover { border-color: var(--blue-mid); }
.pagination a.active { background: var(--blue-mid); color: #fff; border-color: var(--blue-mid); font-weight: 600; }
.pagination-ellipsis { border: none !important; padding: 6px 4px !important; color: var(--grey-600); }
.pagination-arrow { font-weight: 600; }
.pagination-arrow.disabled { pointer-events: none; opacity: .35; }
.per-page-selector { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--grey-600); margin: 0; }
.per-page-selector select { width: auto; padding: 5px 8px; font-size: 0.875rem; }

/* ---------------- Auth ---------------- */

.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--grey-100); }
.auth-box { width: 380px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 32px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-logo { height: 40px; margin-bottom: 10px; }
.auth-logo-mark { height: 110px; width: auto; display: block; margin: 0 auto 14px auto; }
.auth-brand h1 { font-size: 1.1875rem; margin: 0; color: var(--grey-600); font-weight: 500; }

/* ---------------- Signature canvas ---------------- */

.signature-wrapper { border: 1px dashed var(--grey-400); border-radius: var(--radius); background: #fff; touch-action: none; }
.signature-wrapper canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.signature-actions { margin-top: 8px; display: flex; gap: 8px; }

/* ---------------- Observations visite ---------------- */

.observation-block { border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; background: var(--grey-100); }
.observation-block h4 { margin: 0 0 10px; color: var(--blue-mid); font-size: 0.9375rem; }

/* ---------------- Analyse des causes (5 Pourquoi / 7M / 8D) ---------------- */

/* Interrupteur "5 Pourquoi" / "Diagramme 7M" / "Méthode 8D" : case à cocher
   masquée, remplacée par un rendu "toggle switch" classique. */
.toggle-switch-line { display: inline-flex; align-items: center; gap: 10px; margin-right: 24px; cursor: pointer; font-weight: 600; color: var(--grey-900); }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-slider { position: absolute; inset: 0; background: var(--grey-400); border-radius: 22px; transition: background .15s; }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.toggle-switch input:checked + .toggle-slider { background: var(--blue-mid); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* 5 Pourquoi / Arbre des causes : 5 colonnes, une par niveau. */
.five-why-grid { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; overflow-x: auto; margin-top: 12px; }
.five-why-column { background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 10px; }
.five-why-column-header { font-weight: 700; color: var(--blue-dark); margin-bottom: 8px; }
.five-why-cause { background: #fff; border: 1px solid var(--grey-200); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.five-why-cause textarea { min-height: 60px; margin-bottom: 6px; }

/* Diagramme 7M (Ishikawa) : bandeau central "Problème majeur" avec deux
   rangées de catégories reliées par un trait diagonal - approximation
   CSS de l'arête de poisson, l'angle exact n'a pas besoin d'être parfait
   pour rester lisible et reconnaissable. */
.seven-m-diagram { margin-top: 12px; }
.seven-m-row { display: flex; gap: 16px; justify-content: space-around; }
.seven-m-category { flex: 1; position: relative; background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 10px; min-width: 160px; }
.seven-m-category-header { font-weight: 700; color: var(--blue-dark); margin-bottom: 6px; }
.seven-m-cause { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.seven-m-cause input { flex: 1; }
.seven-m-center { text-align: center; background: #FCE8D8; color: var(--orange, #B45309); font-weight: 700; border-radius: var(--radius); padding: 14px; margin: 28px 0; }
.seven-m-row-top .seven-m-category::after,
.seven-m-row-bottom .seven-m-category::after {
  content: ''; position: absolute; left: 50%; width: 2px; height: 26px; background: var(--orange, #E07B39);
}
.seven-m-row-top .seven-m-category::after { bottom: -26px; transform-origin: bottom center; }
.seven-m-row-bottom .seven-m-category::after { top: -26px; transform-origin: top center; }
.seven-m-row-top .seven-m-category:nth-child(1)::after { transform: rotate(28deg); }
.seven-m-row-top .seven-m-category:nth-child(2)::after { transform: rotate(0deg); }
.seven-m-row-top .seven-m-category:nth-child(3)::after { transform: rotate(-28deg); }
.seven-m-row-bottom .seven-m-category:nth-child(1)::after { transform: rotate(-38deg); }
.seven-m-row-bottom .seven-m-category:nth-child(2)::after { transform: rotate(-14deg); }
.seven-m-row-bottom .seven-m-category:nth-child(3)::after { transform: rotate(14deg); }
.seven-m-row-bottom .seven-m-category:nth-child(4)::after { transform: rotate(38deg); }

@media (max-width: 900px) {
  .five-why-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
  .seven-m-row { flex-direction: column; }
  .seven-m-row-top .seven-m-category::after, .seven-m-row-bottom .seven-m-category::after { display: none; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; overflow-x: auto; }
  .sidebar-brand, .sidebar-footer { display: none; }
  .sidebar-nav { flex-direction: row; padding: 0; }
  .sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .sidebar-nav a.active { border-left: none; border-bottom-color: var(--blue-light); }
  /* En barre horizontale, le repli de la section Administration n'a plus
     d'intérêt (il n'y a pas de hauteur à gagner) : la section est toujours
     dépliée et son bouton de bascule masqué. Le "display" est forcé ici pour
     le cas où la fenêtre serait réduite alors que la section était repliée. */
  .sidebar-section-toggle { display: none; }
  .sidebar-subnav, .sidebar-subnav[hidden] { display: flex; flex-direction: row; }
  /* Le menu est déjà une barre horizontale : le réduire n'aurait aucun sens,
     le bouton est donc masqué et la largeur reprise en totalité. */
  .sidebar-collapse-toggle { display: none; }
  .app-shell.sidebar-collapsed .sidebar { width: 100%; }
  .app-shell.sidebar-collapsed .sidebar-link-label { display: inline; }
  .page-body { padding: 16px; }
  .topbar { padding: 14px 16px; }
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Activation groupée des comptes ---------- */
.bulk-toggle-form { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bulk-toggle-form .hint { margin-left: 8px; }
.bulk-activation-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.bulk-activation-bar .hint { max-width: 560px; }
.bulk-password-row { display: flex; gap: 8px; align-items: center; }
.bulk-password-row input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .04em; width: 240px; }
.bulk-activation-actions { display: flex; align-items: center; gap: 14px; }
.bulk-list-head { padding: 12px 16px; font-weight: 600; color: var(--grey-600); border-bottom: 1px solid var(--grey-200); }
#bulkBcc, #bulkBody { width: 100%; font-family: inherit; }

/* ---------- Onglets dans la barre de titre (ex. Documentation) ---------- */
.topbar-has-tabs { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-bottom: 0; }
.topbar-has-tabs h1 { padding-bottom: 14px; }
.topbar-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar-tab { display: inline-block; padding: 10px 16px 11px; font-weight: 600; color: var(--grey-600); text-decoration: none; border-bottom: 3px solid transparent; }
.topbar-tab:hover { color: var(--blue-dark); }
.topbar-tab.is-active { color: var(--blue-dark); border-bottom-color: var(--blue-mid); }
.doc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.doc-actions .hint { margin: 0; }

.topbar-tab-menu { position: relative; }
.topbar-tab-menu summary { list-style: none; cursor: pointer; }
.topbar-tab-menu summary::-webkit-details-marker { display: none; }
.topbar-tab-panel { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 280px; background: var(--white); border: 1px solid var(--grey-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(11, 61, 102, .14); padding: 6px; display: grid; }
.topbar-tab-panel a { padding: 9px 12px; border-radius: 6px; color: var(--grey-900); text-decoration: none; font-weight: 600; }
.topbar-tab-panel a:hover { background: var(--grey-100); }
.topbar-tab-panel a.is-active { background: #EAF2F8; color: var(--blue-dark); }
.doc-current { font-size: .95rem; color: var(--grey-600); margin: 0 0 12px; }
.bulk-mode { display: grid; gap: 8px; } .bulk-mode .checkbox-line { align-items: flex-start; gap: 8px; } #sharedPasswordBlock[hidden] { display: none; }

/* ---------- Messagerie Microsoft 365 ---------- */
.msg-status { display: grid; gap: 8px; }
.msg-status .hint { margin-left: 8px; }
.msg-status-line { display: flex; gap: 24px; flex-wrap: wrap; font-size: .95rem; color: var(--grey-600); }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.msg-grid .card { margin: 0; }
@media (max-width: 1000px) { .msg-grid { grid-template-columns: 1fr; } }
.msg-proc summary { cursor: pointer; }
.msg-steps { display: grid; gap: 12px; padding-left: 1.3em; line-height: 1.5; }
.msg-steps pre { background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: .82rem; white-space: pre; }

/* ---- Organisation : BU / Activités / Sites géographiques (migration 0064) ---- */
.readonly-value { max-width: 480px; padding: 8px 10px; border: 1px dashed var(--grey-400); border-radius: 6px; background: var(--grey-100); min-height: 38px; }
.ref-intro { border-left: 4px solid var(--blue-mid); }
.ref-intro p { color: var(--grey-900); line-height: 1.5; }

/* ---- Notifications par e-mail (Administration > Messagerie > Notifications) ---- */
.notif-help summary { cursor: pointer; }
.notif-help-body { margin-top: 10px; line-height: 1.55; }
.notif-help-body ul { margin: 6px 0 10px; padding-left: 1.3em; }
.notif-table { min-width: 1100px; }
.notif-table td, .notif-table th { vertical-align: top; }
.notif-name { width: 300px; white-space: normal; }
.notif-col-rhythm select { min-width: 150px; }
.notif-col-rhythm .hint { display: inline-block; width: 140px; }
.notif-col-role { text-align: center; min-width: 96px; font-size: .85rem; }
.notif-col-role .hint { font-weight: normal; }
.notif-cell { text-align: center; }
.notif-cell select { min-width: 90px; padding: 4px 6px; font-size: .85rem; }
.notif-cell.is-disabled { background: var(--grey-100); }
.notif-scope.scope-tous { background: #E6F4EA; }
.notif-scope.scope-bu { background: #EAF2F8; }
.notif-scope.scope-activite { background: #FFF6E0; }
.notif-check input { width: 18px; height: 18px; }
.notif-title { margin-bottom: 2px; }
.notif-opt { display: block; margin-top: 6px; font-size: .85rem; color: var(--grey-600); }
.notif-table .notif-extra input { display: block; width: 100%; margin-top: 3px; }
.notif-table input.notif-num { width: 70px; display: inline-block; padding: 2px 6px; margin: 0 4px; }
.notif-kind { font-style: italic; }
tr.notif-off > td { opacity: .55; }
tr.notif-off > td:first-child .notif-title { opacity: 1; }
.notif-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center; padding: 12px 16px; background: var(--white); border-top: 1px solid var(--grey-200); box-shadow: 0 -2px 6px rgba(16,40,64,.06); border-radius: var(--radius); }
.notif-preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.notif-frame { width: 100%; height: 520px; border: 1px solid var(--grey-200); border-radius: 6px; background: #F2F5F8; }
.notif-sample-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.notif-sample-form .form-group { margin: 0; min-width: 280px; }

/* Formulaire en consultation seule (ex. analyse des causes pour le Lecteur) */
.readonly-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---- Connexion Microsoft 365 (mire de connexion) ---- */
.btn-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; background: #2F2F2F; color: #fff; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.btn-sso:hover { background: #1F1F1F; color: #fff; }
.login-sso-hint { text-align: center; font-size: 12px; color: var(--grey-600); margin: 8px 0 18px; }
.login-local { border-top: 1px solid var(--grey-200); padding-top: 12px; }
.login-local summary { cursor: pointer; text-align: center; font-size: 14px; color: var(--blue-mid); font-weight: 600; margin-bottom: 12px; list-style: none; }
.login-local summary::-webkit-details-marker { display: none; }
.login-local summary::after { content: " ▾"; }
.login-local[open] summary::after { content: " ▴"; }

/* Formulaires d'événement (migration 0067) */
.ef-add > summary { list-style: none; cursor: pointer; }
.ef-add > summary::-webkit-details-marker { display: none; }
.ef-list { list-style: none; padding: 0; margin: 0; }
.ef-item { border: 1px solid var(--grey-200); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.ef-item.is-off { background: var(--grey-100, #f5f6f8); opacity: .8; }
.ef-item > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ef-item > summary::-webkit-details-marker { display: none; }
.ef-item > summary .ef-title { font-weight: 600; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.ef-item > summary .ef-meta { color: var(--grey-600); font-size: .8125rem; }
.ef-item > summary::after { content: "Modifier ▾"; color: var(--blue-mid); font-size: .8125rem; }
.ef-item[open] > summary::after { content: "Fermer ▴"; }
.ef-body { padding: 0 12px 12px; border-top: 1px solid var(--grey-200); }
.ef-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ef-tools form { display: inline; margin: 0; }
.ef-custom { margin-top: 16px; background: #f7f9fc; }
.ef-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ef-auto-actions { margin: 6px 0 0; padding-left: 18px; }
.ef-scope-warning { margin-top: 8px; }

/* Envoi d'un rapport par e-mail (boîte Microsoft 365 de l'utilisateur) */
.report-dialog { border: none; border-radius: 12px; padding: 20px; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.report-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.report-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.report-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.report-dialog textarea { min-height: 110px; }

/* TdB suivi activité : sélection période + périmètre */
.tdb-filters { padding: 16px 18px; }
.tdb-filters-grid { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(220px, 1.1fr) minmax(200px, 1fr) minmax(180px, .8fr); gap: 18px; align-items: start; }
@media (max-width: 1400px) { .tdb-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tdb-filters-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tdb-filters-grid { grid-template-columns: 1fr; } }
.tdb-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.tdb-field legend { font-weight: 700; color: var(--blue-dark, #0B3A5F); margin-bottom: 8px; padding: 0; }
.tdb-field select { width: 100%; }
.tdb-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.tdb-dates label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .875rem; }
.tdb-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tdb-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--grey-200); font-size: .8125rem; color: var(--blue-mid); text-decoration: none; background: #fff; }
.tdb-chip:hover { border-color: var(--blue-mid); }
.tdb-chip.is-active { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }
.perim { position: relative; }
.perim > summary { list-style: none; cursor: pointer; border: 1px solid var(--grey-200); border-radius: 8px; padding: 9px 34px 9px 12px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.perim > summary::-webkit-details-marker { display: none; }
.perim > summary::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--grey-600); }
.perim[open] > summary { border-color: var(--blue-mid); }
.perim-panel { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 6px; background: #fff; border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.15); padding: 12px; }
.perim-tools { display: flex; gap: 8px; }
.perim-tools input { flex: 1; min-width: 0; }
.perim-list { max-height: 360px; overflow: auto; border-top: 1px solid var(--grey-200); padding-top: 6px; }
.perim-group { padding: 6px 0; border-bottom: 1px solid var(--grey-100, #f1f3f5); }
.perim-bu { display: flex; align-items: center; gap: 6px; font-size: .875rem; }
.perim-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; padding: 4px 0 0 22px; }
.perim-site { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 400; }
.perim-site input:disabled + * , .perim-site input:disabled { opacity: .7; }
.tdb-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; background: #EEF4FB; border: 1px solid #D5E3F3; border-radius: 10px; padding: 10px 14px; margin: -8px 0 18px; font-size: .875rem; }
.tdb-summary .tdb-pdf-btn { margin-left: auto; align-self: center; }
.tdb-kpis { display: grid; grid-template-columns: 4fr 2fr 3fr; gap: 18px; margin-bottom: 6px; }
@media (max-width: 1100px) { .tdb-kpis { grid-template-columns: 1fr; } }
.tdb-kpi-group h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-600); margin: 0 0 8px; }
.tdb-kpi-group .card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 12px; }
@media (min-width: 700px) { .perim-panel { min-width: 420px; } }
.tdb-kpi-group .card-grid { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
@media (max-width: 600px) { .topbar-tab-panel { left: auto; right: 0; max-width: calc(100vw - 32px); } }
.readonly-value code, .msg-steps pre { white-space: pre-wrap; word-break: break-all; }
#sso_redirect_uri, #report_mail_domains { max-width: 100%; width: 100%; }
.msg-status-line > * { min-width: 0; overflow-wrap: anywhere; } .msg-status > * { min-width: 0; overflow-wrap: anywhere; }

/* ---------------- Registre RGPD des pièces jointes (0070) ---------------- */
.rgpd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rgpd-kpis .kpi-card.kpi-active { outline: 2px solid var(--blue-dark); }
.rgpd-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: #FDF0DC; }
.rgpd-table td { vertical-align: top; }
.rgpd-file { min-width: 120px; max-width: 220px; }
table.data-table td.rgpd-file { white-space: normal; }
.rgpd-file a { word-break: break-all; }
.rgpd-motifs { max-width: 220px; font-size: 0.8125rem; }
.rgpd-review { min-width: 170px; }
.rgpd-classer { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rgpd-classer select { max-width: 165px; }
.btn-link { background: none; border: none; padding: 0; color: var(--blue-dark); text-decoration: underline; cursor: pointer; font-size: 0.8125rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rgpd-export { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--grey-200); border-radius: 8px; background: #fff; }
.rgpd-export > strong { align-self: center; color: var(--blue-dark); }
.rgpd-export .form-group { margin: 0; }
.rgpd-export select { max-width: 100%; }

/* ---------------- Documentation RGPD ---------------- */
.rgdoc { max-width: 1100px; }
.rgdoc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rgdoc-toc a { padding: 6px 12px; border-radius: 16px; background: var(--blue-pale); color: var(--blue-dark); font-size: .875rem; font-weight: 600; }
.rgdoc-toc a:hover { background: var(--blue-dark); color: #fff; }
.rgdoc-section { background: #fff; border-radius: 10px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(11, 61, 102, .08); scroll-margin-top: 80px; }
.rgdoc-section h2 { font-size: 1.35rem; margin-bottom: 14px; }
.rgdoc-h3 { margin-top: 22px; }
.rgdoc-lead { font-size: 1.02rem; line-height: 1.55; }
.rgdoc-cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rgdoc-card { border-radius: 10px; padding: 16px 18px; border-top: 5px solid var(--blue-mid); background: var(--grey-100); }
.rgdoc-card h3 { font-size: 1.05rem; margin: 6px 0; }
.rgdoc-card p { margin: 0; line-height: 1.5; }
.rgdoc-red { border-top-color: var(--danger); }
.rgdoc-green { border-top-color: var(--success); }
.rgdoc-ico { font-size: 1.8rem; line-height: 1; }
.rgdoc-callout { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid var(--blue-light); background: var(--blue-pale); border-radius: 6px; }
.rgdoc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.rgdoc-box { border: 1px solid var(--grey-200); border-radius: 10px; padding: 14px 16px; }
.rgdoc-box h3 { font-size: 1rem; margin-bottom: 8px; }
.rgdoc-box p { margin: 0 0 8px; line-height: 1.5; }
.rgdoc-box-red { border-color: #F2C4BE; background: #FDF6F5; }
.rgdoc-ref { font-size: .75rem; font-weight: 600; color: var(--grey-600); background: var(--grey-200); padding: 1px 7px; border-radius: 8px; vertical-align: middle; }
.rgdoc-ex { font-size: .9rem; color: var(--grey-600); }
.rgdoc-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rgdoc-rules > div { background: var(--grey-100); border-radius: 8px; padding: 12px 14px; }
.rgdoc-rules b { display: block; color: var(--blue-dark); margin-bottom: 4px; }
.rgdoc-rules span { font-size: .9rem; line-height: 1.45; }
.rgdoc-small { font-size: .85rem; color: var(--grey-600); margin: 14px 0 0; line-height: 1.5; }
.rgdoc-flow { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: none; }
.rgdoc-flow li { position: relative; background: var(--blue-pale); border-radius: 10px; padding: 14px 12px 12px; }
.rgdoc-flow li > b { display: block; color: var(--blue-dark); margin: 4px 0; }
.rgdoc-flow li span:not(.n) { font-size: .85rem; line-height: 1.45; display: block; }
.rgdoc-flow .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-weight: 700; font-size: .85rem; }
.rgdoc-list { margin: 0; padding-left: 18px; line-height: 1.55; }
.rgdoc-list li { margin-bottom: 4px; }
.rgdoc-warn { margin-top: 10px; padding: 8px 12px; background: #FDF0DC; border-radius: 6px; }
.rgdoc-table td { vertical-align: top; }
.rgdoc-roles td:not(:first-child), .rgdoc-roles th:not(:first-child) { text-align: center; }
.rgdoc-do { border-color: #BFE0C2; background: #F4FAF4; }
.rgdoc-dont { border-color: #F2C4BE; background: #FDF6F5; }
.rgdoc-faq { border-bottom: 1px solid var(--grey-200); padding: 10px 0; }
.rgdoc-faq summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); }
.rgdoc-faq p { margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 600px) { .rgdoc-section { padding: 16px 14px; } }

/* ---------------- Restauration d'une sauvegarde : écran d'attente ---------------- */
.restore-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(11, 61, 102, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.restore-overlay[hidden] { display: none; }
.restore-box { background: #fff; border-radius: 12px; padding: 28px 28px 20px; max-width: 520px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.restore-box h2 { margin: 12px 0 8px; font-size: 1.25rem; }
.restore-box p { margin: 0 0 12px; line-height: 1.5; }
.restore-spinner { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--blue-pale); border-top-color: var(--blue-dark); animation: restore-spin 1s linear infinite; }
.restore-bar { height: 10px; border-radius: 5px; background: var(--grey-200); overflow: hidden; margin: 6px 0 10px; }
.restore-bar > span { display: block; height: 100%; width: 2%; background: var(--blue-mid); transition: width .4s ease; }
.restore-overlay.is-indeterminate .restore-bar > span { width: 100%; background: repeating-linear-gradient(45deg, var(--blue-mid) 0 12px, var(--blue-light) 12px 24px); background-size: 34px 34px; animation: restore-stripes 1s linear infinite; }
.restore-status { font-weight: 600; color: var(--blue-dark); }
body.restore-busy { overflow: hidden; }
@keyframes restore-spin { to { transform: rotate(360deg); } }
@keyframes restore-stripes { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) { .restore-spinner, .restore-overlay.is-indeterminate .restore-bar > span { animation: none; } }

/* ---------------- Sauvegardes automatiques : téléchargement ---------------- */
.backup-latest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 8px; background: var(--blue-pale); }
.backup-dl { display: inline-block; position: relative; }
.backup-dl > summary { list-style: none; cursor: pointer; display: inline-block; }
.backup-dl > summary::-webkit-details-marker { display: none; }
.backup-dl-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--grey-200); border-radius: 8px; }
.backup-dl-form label { width: 100%; font-size: .85rem; margin: 0; }
.backup-dl-form input[type="password"] { max-width: 220px; }
.upload-limit-msg { margin-top: 8px; }

/* Fichiers choisis : une case par fichier pour retirer une sélection faite par erreur */
.file-picklist { margin-top: 8px; padding: 8px 10px; background: var(--grey-50, #f9fafb); border: 1px solid var(--grey-200); border-radius: 8px; max-width: 640px; }
.file-picklist[hidden] { display: none; }
.file-picklist-head { margin: 0 0 6px; font-size: .85rem; color: var(--grey-700, #374151); }
.file-picklist ul { list-style: none; margin: 0; padding: 0; }
.file-picklist li { border-top: 1px solid var(--grey-200); }
.file-picklist li:first-child { border-top: 0; }
.file-picklist label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; font-weight: normal; cursor: pointer; min-height: 32px; }
.file-picklist input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.file-pick-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.file-pick-size { flex: 0 0 auto; white-space: nowrap; font-size: .8rem; }
.file-picklist li.is-removed .file-pick-name { text-decoration: line-through; color: var(--grey-500, #6b7280); }
@media (max-width: 600px) {
  .file-picklist label { flex-wrap: wrap; min-height: 40px; }
  .file-pick-size { flex-basis: 100%; padding-left: 26px; white-space: normal; }
}

/* ---------------- Envoi de pièces jointes : écran « Chargement et analyse » ---------------- */
.busy-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(11, 61, 102, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.busy-overlay[hidden] { display: none; }
.busy-box { background: #fff; border-radius: 12px; padding: 26px 26px 16px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.busy-box h2 { margin: 12px 0 6px; font-size: 1.2rem; }
.busy-box p { margin: 0 0 10px; line-height: 1.5; }
.busy-box .busy-detail { font-weight: 600; color: var(--blue-dark); }

/* ---------------- Menu « Mon compte » (téléphone, tablette en vertical) ---------------- */
.user-menu { display: none; }
@media (max-width: 900px) {
  .topbar { position: relative; padding-right: 64px; }
  .user-menu { display: block; position: absolute; top: 8px; right: 12px; z-index: 60; }
  .user-menu-btn { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-pale); color: var(--blue-dark); border: 1px solid var(--grey-200); }
  .user-menu-btn::-webkit-details-marker { display: none; }
  .user-menu-btn svg { width: 24px; height: 24px; }
  .user-menu[open] .user-menu-btn { background: var(--blue-dark); color: #fff; }
  .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: 0 10px 30px rgba(11, 61, 102, .18); padding: 6px; display: grid; }
  .user-menu-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--grey-200); margin-bottom: 4px; display: grid; gap: 2px; }
  .user-menu-who strong { color: var(--blue-dark); overflow-wrap: anywhere; }
  .user-menu-who span { font-size: .85rem; color: var(--grey-600); }
  .user-menu-panel a, .user-menu-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 6px; color: var(--grey-900); text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; min-height: 44px; }
  .user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--grey-100); }
  .user-menu-panel svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--blue-mid); }
  .user-menu-panel form { margin: 0; }
  .user-menu-panel button { color: var(--danger); }
  .user-menu-panel button svg { color: var(--danger); }
  .user-menu-version { padding: 8px 12px 6px; font-size: .78rem; color: var(--grey-600); border-top: 1px solid var(--grey-200); margin-top: 4px; }
}

/* ---------------- Téléphones (dont 1080 × 2340 px, soit 360 à 412 px CSS) ---------------- */
@media (max-width: 900px) {
  /* 16 px minimum dans les champs : en dessous, Safari (iPhone) et certains
     navigateurs Android zooment sur la page à chaque saisie, et l'affichage
     reste décalé ensuite. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .per-page-selector select, .notif-cell select, .rgpd-classer select { font-size: 16px; }
  code, .readonly-value { overflow-wrap: anywhere; }
  .page-body { padding: 14px 12px 48px; }
  .card { padding: 16px 14px; }
  .topbar h1 { font-size: 1.2rem; overflow-wrap: anywhere; }
  .table-wrapper { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .btn-row { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .filter-bar form > .form-group { flex: 1 1 100%; }
  .filter-bar form > .form-group input, .filter-bar form > .form-group select { width: 100%; max-width: 100%; }
}
@media (max-width: 420px) {
  .card-grid { gap: 10px; }
  .kpi-card { padding: 14px 12px; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .topbar-tab { padding: 10px 10px 11px; }
  .topbar-has-tabs { gap: 8px; }
}

/* ---------------- Registre RGPD : envoi automatique ---------------- */
.rgpd-auto-status { display: grid; gap: 6px; margin-bottom: 16px; }
.rgpd-auto-form textarea { width: 100%; }
.rgpd-auto-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* TdB suivi activité : synthèse en chiffres et Top / Flop 5 (09/10/2026) */
.tdb-synth-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tdb-synth-item { text-align: center; }
.tdb-synth-label { font-size: .8rem; font-weight: 700; color: var(--grey-700, #374151); min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.tdb-synth-value { border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 6px; font-size: 1.75rem; font-weight: 800; color: #1E7145; background: #fff; font-variant-numeric: tabular-nums; }
.topflop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.topflop { border: 1px solid #1E2733; background: #fff; min-height: 170px; }
.topflop-head { color: #fff; font-weight: 800; text-align: center; padding: 5px 8px; letter-spacing: .3px; }
.topflop-top .topflop-head { background: #1E7145; }
.topflop-flop .topflop-head { background: #E8330A; }
.topflop table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.topflop th { text-align: left; font-weight: 600; font-size: .75rem; color: var(--grey-700, #374151); padding: 6px 8px 3px; border-bottom: 1px solid #3C8DBC; }
.topflop td { padding: 5px 8px; border-bottom: 1px solid var(--grey-100, #f3f4f6); }
.topflop .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.topflop-empty { font-size: .8rem; color: var(--grey-600); padding: 10px; margin: 0; font-style: italic; }
@media (max-width: 1100px) { .tdb-synth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .topflop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tdb-synth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tdb-synth-value { font-size: 1.35rem; } .topflop-grid { grid-template-columns: 1fr; } }

/* Pièces jointes sur téléphone / tablette : « Prendre une photo » et « Choisir un fichier » (13/10/2026) */
.file-two-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.file-two-buttons .btn { flex: 1 1 160px; min-height: 44px; justify-content: center; font-size: 1rem; }
.file-native-hidden { display: none !important; }