/* ===================================================================
   Administration SOS56 - feuille de style unique
   ===================================================================
   Sobre et responsive : conçue d'abord pour le téléphone, puis élargie.
   Mêmes familles de couleurs que le Centre de la main (cmm/css/cmm.css).
   Les cibles tactiles ne descendent jamais sous 44 px.
   =================================================================== */

:root {
   --navy-900: #0d2136;
   --navy-800: #14314c;
   --navy-700: #1b3a5c;
   --teal-600: #0e7c86;
   --teal-700: #0b656d;
   --teal-800: #094f56;
   --teal-fond: #e3f2f3;

   --fond: #eef2f7;
   --surface: #ffffff;
   --surface-douce: #f7f9fc;
   --surface-survol-ligne: #f3f8f6;
   --bordure: #d9e1ec;
   --bordure-forte: #b9c6d8;
   --bordure-bouton: 2px;

   --texte: #132a41;
   --texte-doux: #5a6f89;
   --texte-inverse: #ffffff;
   /* Textes de marque : à utiliser pour tout texte coloré, jamais les couleurs
      de palette (--navy-*, --teal-*) qui ne servent qu'aux fonds et bordures.
      Ces jetons changent de valeur en thème sombre : le texte reste lisible
      dans tous les cas. */
   --texte-fort: var(--navy-800);
   --accent-texte: var(--teal-700);
   --accent-texte-fort: var(--teal-800);

   --danger: #b3261e;
   --danger-fond: #fdeceb;
   --attente: #8a5a00;
   --attente-fond: #fff6dd;
   --succes: #166534;
   --succes-fond: #e6f4ea;
   --neutre-fond: #eef2f7;

   --rayon: 12px;
   --rayon-large: 16px;
   --ombre-douce: 0 1px 2px rgba(13, 33, 54, .06), 0 4px 12px rgba(13, 33, 54, .05);
   --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      --fond: #0f1c2b;
      --surface: #16293d;
      --surface-douce: #1b3149;
      --surface-survol-ligne: #1d3650;
      --bordure: #2a4260;
      --bordure-forte: #3d5a7c;
      --texte: #e6eef8;
      --texte-doux: #9db0c7;
      --texte-fort: #f2f6fb;
      --accent-texte: #5fc7cf;
      --accent-texte-fort: #8fdde3;
      --danger: #ff9e96;
      --succes: #86e0a6;
      --teal-fond: #173b44;
      --danger-fond: #3a1d1b;
      --attente-fond: #3a2f12;
      --attente: #f2c46b;
      --succes-fond: #163524;
      --neutre-fond: #1d3650;
   }
}

:root[data-theme="dark"] {
   --fond: #0f1c2b;
   --surface: #16293d;
   --surface-douce: #1b3149;
   --surface-survol-ligne: #1d3650;
   --bordure: #2a4260;
   --bordure-forte: #3d5a7c;
   --texte: #e6eef8;
   --texte-doux: #9db0c7;
   --texte-fort: #f2f6fb;
   --accent-texte: #5fc7cf;
   --accent-texte-fort: #8fdde3;
   --danger: #ff9e96;
   --succes: #86e0a6;
   --teal-fond: #173b44;
   --danger-fond: #3a1d1b;
   --attente-fond: #3a2f12;
   --attente: #f2c46b;
   --succes-fond: #163524;
   --neutre-fond: #1d3650;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   min-height: 100vh;
   font-family: var(--police);
   font-size: 16px;
   line-height: 1.5;
   color: var(--texte);
   background: var(--fond);
   -webkit-font-smoothing: antialiased;
}

[hidden] {
   display: none !important;
}

h1, h2 {
   margin: 0;
   color: var(--texte);
   letter-spacing: -.02em;
}
h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.05rem; font-weight: 650; margin-bottom: 12px; }
p { margin: 0; }
a { color: var(--accent-texte); }

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* ---------- Apparitions : fondu, jamais de saut ---------- */
@keyframes admin-fondu {
   from { opacity: 0; }
   to { opacity: 1; }
}
.connexion-etape:not([hidden]),
.changement-pin:not([hidden]),
.champ-conditionnel:not([hidden]),
.message:not([hidden]) {
   animation: admin-fondu .3s ease;
}
@media (prefers-reduced-motion: reduce) {
   .connexion-etape:not([hidden]),
   .changement-pin:not([hidden]),
   .champ-conditionnel:not([hidden]),
   .message:not([hidden]) {
      animation: none;
   }
}

/* ---------- En-tête ---------- */
.entete {
   position: sticky;
   top: 0;
   z-index: 10;
   background: var(--navy-800);
   color: var(--texte-inverse);
   box-shadow: 0 2px 10px rgba(13, 33, 54, .18);
}
.entete-interieur {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 16px;
   max-width: 1080px;
   margin: 0 auto;
   padding: 10px 16px;
}
.entete-marque {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--texte-inverse);
   text-decoration: none;
   font-size: 1rem;
   min-height: 44px;
}
.entete-marque img {
   border-radius: 8px;
   background: #fff;
}
.entete-marque strong { font-weight: 800; }
.entete-nav {
   display: flex;
   gap: 4px;
   order: 3;
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}
.entete-nav::-webkit-scrollbar { display: none; }
.entete-nav a {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0 14px;
   border-radius: 10px;
   color: #c8d6e6;
   text-decoration: none;
   font-weight: 600;
}
.entete-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.entete-nav a.est-actif { background: rgba(255, 255, 255, .14); color: #fff; }
.entete-session {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   flex: 1 1 0;
   min-width: 0;
   margin-left: auto;
}
/* Adresse jamais tronquée : si la place manque, elle passe sur deux lignes,
   coupée avant « @ » (<wbr> posé par entete.php et app.js). */
.entete-nom {
   min-width: 0;
   font-size: .9rem;
   line-height: 1.25;
   color: #c8d6e6;
   text-align: right;
   overflow-wrap: break-word;
}
/* Téléphone : le nom du site laisse sa place à l'adresse (le logo reste, il
   ramène toujours à l'accueil et garde son nom pour les lecteurs d'écran). */
@media (max-width: 519px) {
   .entete-marque span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
   }
}

/* ---------- Page ---------- */
.page {
   max-width: 1080px;
   margin: 0 auto;
   padding: 20px 16px 48px;
}
.page-visiteur {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px 16px;
}

.entete-page {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 18px;
}
.surtitre {
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--accent-texte);
   margin-bottom: 4px;
}
.surtitre a { color: inherit; text-decoration: none; }
.resume { color: var(--texte-doux); font-size: .9rem; overflow-wrap: anywhere; }
.consigne { color: var(--texte-doux); font-size: .92rem; margin-bottom: 14px; }
.sous-texte { display: block; color: var(--texte-doux); font-size: .86rem; }
.note { margin-top: 16px; text-align: center; font-size: .9rem; color: var(--texte-doux); }

.carte {
   background: var(--surface);
   border: 1px solid var(--bordure);
   border-radius: var(--rayon-large);
   box-shadow: var(--ombre-douce);
   padding: 20px;
   margin-bottom: 16px;
}
.page > .carte:last-child { margin-bottom: 0; }
.carte-vide { color: var(--texte-doux); }
.entete-carte {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 4px;
}
.entete-carte h2 { margin-bottom: 0; }

.grille-sections {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 16px;
}
.grille-sections .carte { margin-bottom: 0; }
.carte-acces-rapide {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
}
.carte-acces-rapide p { color: var(--texte-doux); font-size: .92rem; }
.carte-acces-rapide h2 { margin-bottom: 4px; }

/* Liste de pages dans l'accueil */
.liste-pages {
   list-style: none;
   margin: 0;
   padding: 0;
}
.ligne-page {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   min-height: 44px;
   padding: 8px 10px;
   margin: 0 -10px;
   border-radius: 10px;
   color: var(--texte);
   text-decoration: none;
   cursor: default;
}
.ligne-page:hover { background: var(--surface-survol-ligne); }
.ligne-page[aria-disabled="true"] { color: var(--texte); }

/* ---------- Badges ---------- */
.badge {
   display: inline-flex;
   align-items: center;
   min-height: 24px;
   padding: 2px 9px;
   margin: 2px 4px 2px 0;
   border-radius: 999px;
   border: 1px solid var(--bordure);
   background: var(--surface-douce);
   color: var(--texte-doux);
   font-size: .78rem;
   font-weight: 650;
   white-space: nowrap;
}
.badge-admin { background: var(--teal-fond); border-color: transparent; color: var(--accent-texte-fort); }
.badge-actif { background: var(--succes-fond); border-color: transparent; color: var(--succes); }
.badge-invitation { background: var(--attente-fond); border-color: transparent; color: var(--attente); }
.badge-suspendu { background: var(--danger-fond); border-color: transparent; color: var(--danger); }
.badge-attente { background: var(--neutre-fond); border-color: transparent; color: var(--texte-doux); }

/* ---------- Boutons ---------- */
.bouton {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 44px;
   padding: 0 18px;
   border: var(--bordure-bouton) solid var(--bordure-forte);
   border-radius: 10px;
   background: var(--surface);
   color: var(--texte-fort);
   font: inherit;
   font-weight: 650;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease;
}
.bouton:hover:not([disabled]) { background: var(--surface-douce); }
.bouton:focus-visible,
.lien-bouton:focus-visible,
.option input:focus-visible,
.case:focus-visible,
.champ input:focus-visible,
.champ select:focus-visible,
.entete-nav a:focus-visible,
.ligne-page:focus-visible {
   outline: 3px solid var(--teal-600);
   outline-offset: 2px;
}
.bouton[disabled] { opacity: .45; cursor: default; }
.bouton-principal {
   background: var(--teal-600);
   border-color: var(--teal-600);
   color: #fff;
}
.bouton-principal:hover:not([disabled]) { background: var(--teal-700); border-color: var(--teal-700); }
.bouton-principal:active:not([disabled]) { background: var(--teal-800); border-color: var(--teal-800); }
.bouton-danger-doux {
   border-color: #e0b1ad;
   color: var(--danger);
   background: var(--surface);
}
.bouton-danger-doux:hover:not([disabled]) { background: var(--danger-fond); }
.bouton-large { width: 100%; min-height: 48px; font-size: 1rem; }

.lien-bouton {
   border: 0;
   padding: 8px 4px;
   min-height: 44px;
   background: none;
   color: var(--accent-texte);
   font: inherit;
   font-weight: 600;
   cursor: pointer;
}
.lien-bouton:hover { text-decoration: underline; }

.barre-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 20px;
}
.barre-actions-droite {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-left: auto;
}

/* ---------- Champs ---------- */
.champ {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 14px;
}
.champ:last-child { margin-bottom: 0; }
.champ-libelle { font-weight: 600; font-size: .92rem; }
.champ-aide { color: var(--texte-doux); font-size: .84rem; }
.champ input,
.champ select {
   width: 100%;
   min-height: 46px;
   padding: 10px 12px;
   border: 1px solid var(--bordure-forte);
   border-radius: 10px;
   background: var(--surface-douce);
   color: var(--texte);
   font: inherit;
}
.champ input:focus,
.champ select:focus {
   outline: none;
   border-color: var(--teal-600);
   box-shadow: 0 0 0 3px rgba(14, 124, 134, .18);
   background: var(--surface);
}
.champ-pleine-largeur { grid-column: 1 / -1; }
.grille-champs {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0 16px;
}
.champ-conditionnel { margin-top: 14px; }

/* Cases à cocher et choix */
.option {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 44px;
   cursor: pointer;
   font-weight: 500;
}
.option input {
   width: 20px;
   height: 20px;
   flex: 0 0 auto;
   margin: 0;
   accent-color: var(--teal-600);
   cursor: pointer;
}
.option-ligne {
   align-items: flex-start;
   padding: 8px 10px;
   border-radius: 10px;
}
.option-ligne > span { padding-top: 1px; }
.option-ligne:hover { background: var(--surface-survol-ligne); }
.option-ligne input { margin-top: 3px; }

fieldset {
   margin: 0;
   padding: 0;
   border: 0;
   min-width: 0;
}
.choix-canaux {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 4px;
}
.choix-canaux .option {
   padding: 0 16px;
   border: 1px solid var(--bordure-forte);
   border-radius: 10px;
   background: var(--surface-douce);
}
.choix-canaux .option:has(input:checked) {
   border-color: var(--teal-600);
   background: var(--teal-fond);
}

.groupe-droits {
   border: 1px solid var(--bordure);
   border-radius: var(--rayon);
   padding: 6px 12px 10px;
   margin-bottom: 12px;
}
.groupe-droits:last-of-type { margin-bottom: 0; }
.groupe-droits-titre {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 4px 12px;
   width: 100%;
   padding: 0 0 4px;
   font-weight: 700;
   color: var(--texte-fort);
}
.groupe-droits-titre .lien-bouton { min-height: 36px; }
.groupe-droits .option-ligne { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }

/* Messages : à côté de l'erreur, sans pousser la mise en page */
.message {
   margin-top: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   font-size: .92rem;
   font-weight: 500;
}
.message-erreur {
   background: var(--danger-fond);
   color: var(--danger);
   border-left: 3px solid var(--danger);
}
.message-vide {
   padding: 16px 0 0;
   color: var(--texte-doux);
   text-align: center;
}

/* ---------- Connexion ---------- */
.carte-connexion {
   width: 100%;
   max-width: 420px;
   margin: 0;
   padding: 28px 22px 24px;
   border-radius: 20px;
}
.marque-connexion {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
   text-align: center;
}
.marque-connexion img {
   padding: 6px;
   border-radius: 14px;
   background: #fff;
   box-shadow: var(--ombre-douce);
}
.marque-connexion h1 { font-size: 1.3rem; }
.marque-connexion h1 strong { color: var(--accent-texte); }
.bandeau-maquette {
   margin-bottom: 14px;
   padding: 8px 10px;
   border-radius: 10px;
   background: var(--attente-fond);
   color: var(--attente);
   font-size: .84rem;
   font-weight: 600;
   text-align: center;
}
.connexion-etape h2 {
   text-align: center;
   margin-bottom: 6px;
}
.connexion-etape .consigne { text-align: center; }
.connexion-etape .bouton-large { margin-top: 6px; }

.cases {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin: 6px 0 4px;
}
.case {
   width: clamp(40px, 12vw, 50px);
   height: 56px;
   padding: 0;
   border: 2px solid var(--bordure-forte);
   border-radius: 12px;
   background: var(--surface-douce);
   color: var(--texte);
   font: inherit;
   font-size: 1.5rem;
   font-weight: 700;
   text-align: center;
   caret-color: var(--teal-600);
}
.case:focus {
   outline: none;
   border-color: var(--teal-600);
   background: var(--surface);
   box-shadow: 0 0 0 3px rgba(14, 124, 134, .2);
}
.case.est-rempli { border-color: var(--teal-600); }
.case.est-en-erreur { border-color: var(--danger); background: var(--danger-fond); }

.changement-pin {
   margin-top: 18px;
   padding-top: 18px;
   border-top: 1px solid var(--bordure);
}
.changement-pin .cases { justify-content: flex-start; }
.changement-pin .consigne { margin-bottom: 6px; }
.changement-pin .consigne + .cases { margin-bottom: 14px; }

/* ---------- Tableau des utilisateurs ---------- */
.barre-outils {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 14px;
}
.champ-recherche { margin: 0; flex: 1 1 auto; }
.champ-recherche input { background: var(--surface-douce); }
.barre-outils .resume { margin-top: 0; }

.tableau-responsive {
   overflow-x: auto;
   margin: 0 -20px;
   padding: 0 20px;
}
.tableau {
   width: 100%;
   border-collapse: collapse;
}
.tableau th {
   padding: 10px 12px;
   text-align: left;
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--texte-doux);
   border-bottom: 1px solid var(--bordure-forte);
}
.tableau td {
   padding: 12px;
   border-bottom: 1px solid var(--bordure);
   vertical-align: middle;
}
.tableau tbody tr:hover > td { background: var(--surface-survol-ligne); }
.nom-utilisateur {
   font-weight: 650;
   color: var(--texte-fort);
   text-decoration: none;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
}
.nom-utilisateur:hover { text-decoration: underline; color: var(--accent-texte-fort); }

/* Sur téléphone, chaque ligne devient une petite carte */
@media (max-width: 719px) {
   .tableau-responsive { margin: 0 -4px; padding: 0; overflow: visible; }
   .tableau thead { display: none; }
   .tableau,
   .tableau tbody { display: block; }
   .tableau tbody tr {
      display: block;
      padding: 12px 14px;
      margin-bottom: 10px;
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      background: var(--surface);
   }
   .tableau tbody tr:hover > td { background: none; }
   .tableau tbody tr:hover { background: var(--surface-survol-ligne); }
   .tableau td {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
      border: 0;
      text-align: right;
   }
   .tableau td[data-label="Utilisateur"] {
      display: block;
      text-align: left;
      padding-bottom: 8px;
   }
   .tableau td:not([data-label="Utilisateur"])::before {
      content: attr(data-label);
      color: var(--texte-doux);
      font-size: .84rem;
      text-align: left;
   }
}

/* ---------- Formulaires larges : desktop ---------- */
@media (min-width: 640px) {
   .grille-champs {
      grid-template-columns: 1fr 1fr;
   }
   .barre-outils {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }
   .champ-recherche { max-width: 360px; }
   .barre-outils .resume { white-space: nowrap; }
   .carte { padding: 24px; }
}

@media (min-width: 720px) {
   .entete-interieur {
      flex-wrap: nowrap;
   }
   .entete-nav {
      order: 0;
      width: auto;
      overflow: visible;
   }
   .entete-session { margin-left: auto; }
   .page { padding: 28px 24px 56px; }
   .grille-sections {
      grid-template-columns: 1fr 1fr;
   }
   .grille-sections .carte:only-child { grid-column: 1 / -1; }
   .groupe-droits-titre { font-size: 1rem; }
   .groupe-droits {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 12px;
      padding: 8px 14px 12px;
   }
   .groupe-droits-titre { grid-column: 1 / -1; }
   .groupe-droits .option-ligne { margin-left: 0; margin-right: 0; width: auto; }
}

/* Cases plus grandes sur ordinateur */
@media (min-width: 720px) {
   .case { width: 52px; height: 62px; font-size: 1.7rem; }
}

/* ---------- Thème sombre : fond des cases et champs ---------- */
@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) .case,
   :root:not([data-theme="light"]) .champ input,
   :root:not([data-theme="light"]) .champ select {
      background: var(--surface-douce);
      color: var(--texte);
   }
   :root:not([data-theme="light"]) .bouton {
      background: var(--surface-douce);
      color: var(--texte);
      border-color: var(--bordure-forte);
   }
   :root:not([data-theme="light"]) .bouton-principal {
      background: var(--teal-600);
      border-color: var(--teal-600);
      color: #fff;
   }
   :root:not([data-theme="light"]) .carte-connexion,
   :root:not([data-theme="light"]) .carte { background: var(--surface); }
}

/* ---------- Compléments : confirmation, bulle, champ invalide, déconnexion ---------- */
.message-succes {
   background: var(--succes-fond);
   color: var(--succes);
   border-left: 3px solid var(--succes);
}

.champ input.est-invalide,
.champ input.est-invalide:focus {
   border-color: var(--danger);
   background: var(--danger-fond);
   box-shadow: none;
}

/* Bulle posée sous la ligne : elle ne pousse rien autour d'elle. */
.liste-pages li { position: relative; }
.bulle {
   position: absolute;
   right: 6px;
   top: 100%;
   z-index: 2;
   margin: 2px 0 0;
   padding: 8px 12px;
   border-radius: 10px;
   background: var(--danger-fond);
   color: var(--danger);
   border-left: 3px solid var(--danger);
   font-size: .86rem;
   font-weight: 600;
   box-shadow: var(--ombre-douce);
   animation: admin-fondu .3s ease;
   transition: opacity .3s ease;
}
.bulle.est-sortie { opacity: 0; }

.bouton-discret {
   min-height: 40px;
   padding: 0 14px;
   font-size: .9rem;
}
.entete .bouton-discret {
   background: transparent;
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
}
.entete .bouton-discret:hover:not([disabled]) {
   background: rgba(255, 255, 255, .1);
}

/* ---------- Page d'installation de l'application ---------- */
.carte-installation { text-align: center; }
.installation-icone {
   display: block;
   margin: 0 auto 12px;
   border-radius: 22px;
   box-shadow: var(--ombre-douce);
}
.installation-nom {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 8px;
}
.carte-installation .consigne { margin-bottom: 18px; }
.installation-deja { margin-bottom: 14px; }
.installation-deja p { margin-bottom: 12px; color: var(--texte-doux); }
.installation-aide {
   min-height: 1.4em;
   margin-top: 12px;
   color: var(--texte-doux);
   font-size: .9rem;
}
.installation-aide.est-visible { color: var(--texte); }

/* ---------- Règles du mot de passe : coches vertes ---------- */
.liste-regles-mdp {
   margin: 10px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 4px;
}
.liste-regles-mdp[hidden] { display: none; }
.regle-mdp {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--texte-doux);
   font-size: .85rem;
   transition: color .15s ease;
}
.regle-marque {
   position: relative;
   width: 16px;
   height: 16px;
   flex: 0 0 auto;
   border: 1.5px solid var(--bordure-forte);
   border-radius: 50%;
   transition: background-color .15s ease, border-color .15s ease;
}
.regle-mdp.est-ok { color: var(--succes); }
.regle-mdp.est-ok .regle-marque { background: var(--succes); border-color: var(--succes); }
.regle-mdp.est-ok .regle-marque::after {
   content: "";
   position: absolute;
   left: 4px;
   top: 1px;
   width: 4px;
   height: 8px;
   border: solid #fff;
   border-width: 0 1.5px 1.5px 0;
   transform: rotate(45deg);
}
.regle-mdp.est-manquant { color: var(--danger); }
.regle-mdp.est-manquant .regle-marque { border-color: var(--danger); }

/* ---------- Titres de cadre : bandeau marine, lisible en clair comme en sombre ---------- */
.carte > h2:first-child {
   margin: -20px -20px 16px;
   padding: 12px 20px;
   background: var(--navy-800);
   color: #ffffff;
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: -.01em;
   border-radius: var(--rayon-large) var(--rayon-large) 0 0;
}
@media (min-width: 640px) {
   .carte > h2:first-child {
      margin: -24px -24px 18px;
      padding: 12px 24px;
   }
}

/* ---------- Version du dernier déploiement : sous la barre, en haut de page ---------- */
.entete-version {
   max-width: 1080px;
   margin: 0 auto;
   padding: 6px 16px 0;
   text-align: right;
   font-size: .7rem;
   color: var(--texte-doux);
}
@media (min-width: 720px) {
   .entete-version { padding: 6px 24px 0; }
}

/* ---------- Invitation à installer l'application, avant la connexion ---------- */
.invite-installation {
   display: grid;
   gap: 12px;
   margin-bottom: 8px;
   text-align: center;
}
.invite-titre {
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--texte);
}

/* ---------- Déconnexion : pictogramme rouge, sans texte ---------- */
.bouton-deconnexion {
   width: 40px;
   min-width: 40px;
   padding: 0;
   font-size: 1.15rem;
   line-height: 1;
   color: #ff5a5f;
   border-color: rgba(255, 90, 95, .6);
}
/* Pictogramme MDI « logout », le même que dans le CMM. */
.bouton-deconnexion .icone {
   width: 20px;
   height: 20px;
   display: block;
}
.entete .bouton-deconnexion:hover:not([disabled]) {
   background: rgba(255, 90, 95, .15);
   color: #ff7a7f;
}

/* ---------- Accueil : page disponible ---------- */
.ligne-page-active { cursor: pointer; font-weight: 600; }
.ligne-page-active:hover { color: var(--accent-texte-fort); }

/* ---------- Sorties Mango (pages/admin_mango.php, js/mango.js) ---------- */
.mango-barre {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   margin-bottom: 12px;
}
.mango-etat {
   flex: 1 1 260px;
   padding: 10px 14px;
   border-radius: 10px;
   font-weight: 650;
}
.mango-etat-ok { background: var(--succes-fond); color: var(--succes); }
.mango-etat-attention { background: var(--attente-fond); color: var(--attente); }
.mango-etat-ko { background: var(--danger-fond); color: var(--danger); }
.mango-etat-attente { background: var(--neutre-fond); color: var(--texte-doux); }
.mango-compteurs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.mango-compteurs:empty { display: none; }
.mango-badge-en_ligne { background: var(--succes-fond); border-color: transparent; color: var(--succes); }
.mango-badge-sortie_ko { background: var(--attente-fond); border-color: transparent; color: var(--attente); }
.mango-badge-hors_ligne { background: var(--danger-fond); border-color: transparent; color: var(--danger); }
.mango-badge-exclu { background: var(--teal-fond); border-color: transparent; color: var(--accent-texte-fort); }

.tableau-mango td { vertical-align: top; }
.tableau-responsive + .tableau-responsive { margin-top: 16px; }
.mango-nom { display: block; color: var(--texte-fort); }
.mango-modifier { min-height: 32px; font-size: .86rem; }
.mango-ligne-exclue > td { background: var(--surface-douce); }
.mango-ligne-exclue .mango-nom { color: var(--texte-doux); }

.mango-pastille {
   display: inline-block;
   width: .8em;
   height: .8em;
   margin-right: .4em;
   border-radius: 50%;
   vertical-align: middle;
   background: var(--texte-doux);
}
.mango-statut-en_ligne { color: var(--succes); }
.mango-statut-en_ligne .mango-pastille { background: var(--succes); }
.mango-statut-sortie_ko { color: var(--attente); }
.mango-statut-sortie_ko .mango-pastille { background: var(--attente); }
.mango-statut-hors_ligne { color: var(--danger); }
.mango-statut-hors_ligne .mango-pastille { background: var(--danger); }
.mango-texte-erreur { color: var(--danger); font-weight: 650; }
.mango-texte-attente { color: var(--attente); }

.mango-editeur {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   margin-top: 6px;
}
.mango-editeur input {
   flex: 1 1 12em;
   min-width: 10em;
   min-height: 44px;
   padding: 8px 10px;
   border: 1px solid var(--bordure-forte);
   border-radius: 10px;
   background: var(--surface);
   color: var(--texte);
   font: inherit;
}
.mango-editeur-message { flex: 1 1 100%; margin: 0; }

/* Interrupteur « Dans le pool » */
.mango-interrupteur {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   cursor: pointer;
   white-space: nowrap;
}
.mango-interrupteur input { position: absolute; opacity: 0; width: 0; height: 0; }
.mango-curseur {
   position: relative;
   flex: 0 0 auto;
   width: 2.6em;
   height: 1.4em;
   border-radius: 999px;
   background: var(--bordure-forte);
   transition: background .15s;
}
.mango-curseur::after {
   content: '';
   position: absolute;
   top: .15em;
   left: .15em;
   width: 1.1em;
   height: 1.1em;
   border-radius: 50%;
   background: #fff;
   transition: transform .15s;
}
.mango-interrupteur input:checked + .mango-curseur { background: var(--succes); }
.mango-interrupteur input:checked + .mango-curseur::after { transform: translateX(1.2em); }
.mango-interrupteur input:focus-visible + .mango-curseur { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.mango-interrupteur input:disabled + .mango-curseur { opacity: .5; }
.mango-interrupteur-texte { font-size: .9rem; color: var(--texte-doux); }

/* Sommaire : liens vers chaque tableau ; la marge laisse la place de l'en-tête collant. */
.mango-index ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mango-index a {
   display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
   border: 1px solid var(--bordure); border-radius: 999px;
   color: var(--accent-texte-fort); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.mango-index a:hover, .mango-index a:focus-visible { background: var(--teal-fond); }
.mango-page [id^="mango-"] { scroll-margin-top: 96px; }
.mango-sous-titre { margin: 24px 0 4px; font-size: .98rem; font-weight: 700; color: var(--texte-fort); }
.mango-alertes + .mango-sous-titre { margin-top: 4px; }
.tableau-mango .mango-nom { white-space: nowrap; }
.tableau-mango-sources { max-width: 560px; }
.mango-alertes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mango-alertes:empty { display: none; }
.mango-evenements { list-style: none; margin: 16px 0 0; padding: 0; }
.mango-evenements:empty { display: none; }
.mango-evenements li { padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.mango-heure { color: var(--texte-doux); margin-right: .6em; font-size: .9rem; }
.mango-aide ul { margin: 0; padding-left: 1.2em; color: var(--texte-doux); line-height: 1.5; }
.mango-aide li + li { margin-top: 6px; }

/* Sur téléphone : la première colonne sert de titre de la carte. */
@media (max-width: 719px) {
   .tableau td.cellule-titre { display: block; text-align: left; padding-bottom: 8px; }
   .tableau td.cellule-titre::before { content: none; }
   .tableau-mango td > div { text-align: right; }
}

/* Tableau des Mango : le libellé de l'interrupteur passe sous le curseur. */
.tableau-mango .mango-interrupteur {
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 4px 0;
}
@media (min-width: 720px) {
   .tableau-mango .mango-colonne-pool { text-align: center; }
}

/* ---------- Bouton retour (pictogramme MDI arrow-left) ----------
   À gauche du surtitre et du titre, sur toute la hauteur des deux lignes. */
.entete-retour {
   display: flex;
   align-items: stretch;
   gap: 14px;
}
.bouton-retour {
   align-self: stretch;
   width: 56px;
   min-width: 56px;
   height: auto;
   padding: 0;
}
.bouton-retour .icone {
   width: 30px;
   height: 30px;
   display: block;
}
.mango-interrupteur-texte:empty { display: none; }

/* ---------- Données et chiffrement (pages/donnees_chiffrement.php) ---------- */
.donnees-liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.donnees-legende { margin: 16px 0 0; line-height: 2; }
.donnees-fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.donnees-fiche dt { font-weight: 700; color: var(--texte-fort); }
.donnees-fiche dd { margin: 0; color: var(--texte); }
.donnees-chemin { font-size: .84rem; overflow-wrap: anywhere; color: var(--texte-fort); }
.tableau-donnees td { vertical-align: top; }
.tableau-donnees td:first-child { width: 26%; }
@media (max-width: 719px) {
   .donnees-fiche { grid-template-columns: 1fr; gap: 2px; }
   .donnees-fiche dd { margin-bottom: 8px; }
   .tableau-donnees td:first-child { width: auto; }
   .tableau-donnees td { display: block; text-align: left; }
   .tableau-donnees td::before { display: block; margin-bottom: 2px; }
}
.carte[id^="donnees-"] { scroll-margin-top: 96px; }