/* =============================================================================================
   Administration — admin.html, admin_site_mairie.html, account.html, assistant.html,
   confidentialite.html, 403.html, login.html et login_mfa.html.

   Des pages de contrôle, pas de pilotage : on y vient vérifier qu'une étape a tourné, retrouver un
   compte, poser une question. Elles parlent donc le vocabulaire du système sans rien y ajouter de
   voyant. Uniquement des jetons (style.css § 1) : cette feuille place et resserre, elle ne colore
   pas — les seules teintes sont celles des signaux, en petites touches qui portent un sens.
   ============================================================================================= */

/* --- Commun --------------------------------------------------------------------------------- */

/* Retour vers la page parente, au-dessus du titre : discret, l'icône remplace la flèche
   typographique. Même règle que `analyse.css` et `marche.css` — à remonter dans le système. */
.lien-retour {
    display: inline-flex;
    align-items: center;
    gap: var(--e0);
    margin-bottom: var(--e2);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    font-weight: 520;
}
.lien-retour:hover { color: var(--texte); text-decoration: none; }
.lien-retour .ico { width: 0.875rem; height: 0.875rem; }

/* Deux états qui portent un sens, sur leur teinte claire, jamais en aplat : « favorable » (succès,
   compte actif, signal prouvé) et « à surveiller » (exécution en erreur, signal à confirmer). Le
   filet reprend celui de `.score-high` pour que les deux familles se lisent comme une seule. */
.badge-favorable {
    color: var(--haut);
    background: var(--haut-doux);
    border-color: color-mix(in srgb, var(--haut) 25%, transparent);
}
.badge-attention {
    color: var(--moyen);
    background: var(--moyen-doux);
    border-color: color-mix(in srgb, var(--moyen) 25%, transparent);
}

/* Le message d'échec porte son icône : la couleur ne doit pas être seule à dire « refusé ». */
.alerte { display: flex; align-items: flex-start; gap: var(--e1); font-size: var(--t-sm); line-height: 1.45; }
.alerte .ico { margin-top: 0.1rem; }

/* Constat vide à l'intérieur d'une section : l'`.etat-vide` du système, centré sur 48 px de
   marge, est fait pour une page vide ; ici une ligne suffit, posée là où le tableau aurait été. */
.encart-vide {
    margin: 0;
    padding: var(--e2) var(--e3);
    background: var(--surface);
    border: var(--carte-bordure);
    border-radius: var(--rayon);
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

/* Vues rapides portées par un `<nav>` : la règle `nav` de l'ossature (pensée pour la barre
   latérale) s'applique à TOUT élément nav et empilait les pastilles en colonne, centrées. */
nav.filtres-rapides { flex-direction: row; flex: none; }

/* Phrase d'introduction d'une section : elle explique comment lire ce qui suit. */
.admin-intro { margin: 0 0 var(--e3); max-width: 72ch; color: var(--texte-doux); }
.admin-intro strong { color: var(--texte); }

/* Titre suivi de son compteur, alignés sur l'axe des lettres et non sur la ligne de base. */
.titre-compte { display: flex; align-items: center; gap: var(--e1); }

/* --- Administration ------------------------------------------------------------------------- */

/* Le rythme vertical vient des titres de section (48 px au-dessus, 12 au-dessous) : les marges
   propres des grilles de chiffres s'y ajoutaient et écartaient une section sur deux. */
.admin .stat-grid { margin-bottom: 0; }
.admin-sommaire { margin-bottom: 0; }
/* Sous 1 100 px la barre latérale devient un bandeau collant de 56 px : une ancre l'aurait glissé
   sous le titre qu'elle désigne. */
.admin-section { scroll-margin-top: var(--e3); }
@media (max-width: 1100px) {
    .admin-section { scroll-margin-top: 5rem; }
}

/* Chiffres d'état : la valeur d'une carte sans modificateur n'a pas de taille dans le système, elle
   tombait au corps du texte — plus petite que celle des cartes discrètes posées à côté. */
.admin-chiffres .stat-value { font-size: var(--t-xl); }
/* La carte discrète garde son fond transparent, mais le retrait des autres : sur une même rangée,
   « N/A » se posait 8 px plus haut que les chiffres voisins. */
.admin-chiffres .stat-card-discret { padding: 1.125rem var(--e3); }

/* Version en place : le code d'un côté, les étapes de l'autre, chacune sur une ligne. */
.versions { display: grid; gap: var(--e3); }
.versions-code {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e1) var(--e2);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--bordure);
}
.versions-libelle { color: var(--texte-doux); font-size: var(--t-sm); font-weight: 560; }
.versions-valeur { font-size: var(--t-md); font-weight: 600; color: var(--texte); }
/* Marge négative : chaque ligne a son propre retrait (pour que l'étape marquée ait un fond qui
   respire), le texte s'aligne ainsi quand même sur « Code déployé ». */
.versions-liste {
    list-style: none;
    margin: 0 calc(-1 * var(--e2));
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--e0) var(--e2);
}
.versions-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--e1) var(--e2);
    border-radius: var(--rayon-petit);
}
.versions-nom { color: var(--texte); font-size: var(--t-sm); overflow-wrap: anywhere; }
.versions-detail { color: var(--texte-faible); font-size: var(--t-xs); }
.versions-item-cle { background: var(--creux); box-shadow: inset 0 0 0 1px var(--bordure); }
.versions-item-cle .versions-nom { font-weight: 600; }

/* Deuxième paragraphe d'une même section : il ouvre un nouveau bloc, il lui faut l'air d'un
   intertitre plutôt que celui d'une phrase qui suit un tableau. */
.admin-intro-suite { margin-top: var(--e4); }

/* Exécutions : un titre d'étape, son tableau. */
.job-titre { margin: var(--e4) 0 var(--e2); }
.job:first-of-type .job-titre { margin-top: 0; }
.job-titre code { font-size: var(--t-base); font-weight: 600; }
.job .admin-intro { margin-bottom: var(--e2); font-size: var(--t-sm); }

/* Largeurs fixes, communes aux neuf tableaux d'exécutions (voir le gabarit). Le minimum garde la
   colonne « Erreurs » lisible quand la page se resserre : le tableau défile alors chez lui. */
.table-jobs { table-layout: fixed; min-width: 46rem; }
.table-jobs .col-date { width: 11.5rem; }
.table-jobs .col-statut { width: 7rem; }
.table-jobs .col-duree { width: 6.5rem; }
.table-jobs .col-volume { width: 9rem; }
.table-jobs td { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: var(--t-sm); }
/* Un message d'exception est une ligne sans espace (URL, chemin SQL) : sans coupure forcée, il
   élargissait le tableau au-delà de la page. */
.job-erreur { color: var(--texte-doux); overflow-wrap: anywhere; }

/* Règles d'anticipation : dix colonnes de nombres, serrées comme un tableau de chiffres. */
.table-regles td { padding-top: 0.55rem; padding-bottom: 0.55rem; }

/* Anomalies : une catégorie par bloc repliable, le bloc porte la carte et le tableau s'y loge sans
   second cadre. */
.anomalies { display: grid; gap: var(--e2); }
.anomalies-groupe { padding: 0; overflow: hidden; }
.anomalies-groupe > summary {
    display: flex;
    align-items: center;
    gap: var(--e1);
    min-height: 3rem;
    padding: var(--e2) var(--e3);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--duree) ease;
}
.anomalies-groupe > summary::-webkit-details-marker { display: none; }
.anomalies-groupe > summary:hover { background: var(--creux); }
.anomalies-groupe > summary:focus-visible { outline-offset: -2px; border-radius: var(--rayon); }
.anomalies-groupe > summary h3 { margin: 0; font-size: var(--t-md); }
.anomalies-chevron { margin-left: auto; color: var(--texte-faible); transition: transform var(--duree) ease; }
.anomalies-groupe[open] > summary { border-bottom: 1px solid var(--bordure); }
.anomalies-groupe[open] .anomalies-chevron { transform: rotate(180deg); }
/* Un bloc ouvert reste borné : 575 doublons dépliés faisaient 45 000 px. Le défilement reste dans
   le bloc, la page garde sa longueur. */
.anomalies-groupe .table-scroll {
    max-height: 34rem;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.table-anomalies td { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: var(--t-sm); }
.anomalie-constat { width: 42%; color: var(--texte-doux); }

/* Utilisateurs. */
.table-comptes { min-width: 56rem; }
.table-comptes td { vertical-align: middle; }
.compte-email { overflow-wrap: anywhere; }
/* Les trois gestes d'une ligne sur une seule rangée, alignés à droite comme toute action de
   tableau : la colonne d'actions se lit alors comme une barre d'outils, pas comme un formulaire. */
.compte-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--e1); }
.compte-actions form { margin: 0; }
.compte-actions .row-actions { margin-top: 0; }
.compte-actions .row-actions input { width: 12rem; font-size: var(--t-sm); }

.creation-compte { margin-top: var(--e3); }
.creation-compte-formulaire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--e3);
}
.creation-compte-actions { grid-column: 1 / -1; display: flex; }

/* --- Couverture site-mairie ----------------------------------------------------------------- */

.table-sites td { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.site-web a { display: inline-flex; align-items: center; gap: var(--e0); color: var(--accent); font-weight: 500; overflow-wrap: anywhere; }
.site-web a:hover { color: var(--accent-fort); }
.site-web .ico { width: 0.8rem; height: 0.8rem; color: var(--texte-faible); }

/* --- Mon compte ----------------------------------------------------------------------------- */

.mon-compte { display: grid; gap: var(--e3); max-width: 52rem; }
.mon-compte .detail-grid { margin: 0; }
.compte-mfa-entete { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e2); }
.compte-mfa-entete .panneau-titre { margin: 0; }
.compte-consigne { margin: 0 0 var(--e3); max-width: 64ch; color: var(--texte-doux); }

/* Secret et URI : un couple libellé/valeur par ligne, la valeur dans un creux qui la désigne comme
   un texte à recopier tel quel. */
.compte-secret { display: grid; gap: var(--e2); margin: 0 0 var(--e3); }
.compte-secret dt { margin-bottom: var(--e0); color: var(--texte-doux); font-size: var(--t-sm); font-weight: 560; }
.compte-secret dd { margin: 0; }
.compte-secret code {
    display: block;
    padding: var(--e1) var(--e2);
    background: var(--creux);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    overflow-wrap: anywhere;
}
/* Le secret se recopie à la main : lettrage espacé, comme le code à usage unique. */
.compte-secret-cle { font-size: var(--t-md); letter-spacing: 0.08em; }
.compte-secret .compte-secret-uri { font-size: var(--t-xs); line-height: 1.5; color: var(--texte-doux); }

/* Champ du code et son bouton sur une ligne, le bouton calé sur le champ et non sur le libellé. */
.compte-formulaire { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e2); }
.compte-formulaire .champ { width: 12rem; }

/* --- Assistant ------------------------------------------------------------------------------ */

.assistant-question { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.assistant-question textarea { width: 100%; min-height: 4.5rem; resize: vertical; font-size: var(--t-md); }
.assistant-envoi { display: flex; justify-content: flex-end; }

.assistant-reponse { display: grid; gap: var(--e2); }
.assistant-reponse > * { margin: 0; min-width: 0; }
/* La traduction de la question est l'information à relire d'abord : en encre, pas en gris. */
.assistant-explication { color: var(--texte); font-weight: 520; max-width: 80ch; }
/* Ce que la question demandait et que la recherche n'a pas traduit : « à surveiller », pas une
   erreur — la teinte ambre claire, l'icône d'information, et le lien vers la bonne page. */
.assistant-avertissement {
    display: flex;
    align-items: flex-start;
    gap: var(--e1);
    padding: var(--e2) var(--e3);
    background: var(--moyen-doux);
    border: 1px solid color-mix(in srgb, var(--moyen) 25%, transparent);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    font-size: var(--t-sm);
    max-width: 80ch;
}
.assistant-avertissement .ico { margin-top: 0.15rem; color: var(--moyen); }
.assistant-reponse .barre-resultats { margin-top: var(--e1); }
.table-assistant .col-score { width: 4.5rem; }
.table-assistant .col-date { width: 7.5rem; }
.table-assistant td { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* --- Confidentialité ------------------------------------------------------------------------ */

.document { max-width: 46rem; padding: var(--e4); line-height: 1.65; }
.document h2 { margin: var(--e4) 0 var(--e1); font-size: var(--t-md); }
.document h2:first-child { margin-top: 0; }
.document p { margin: 0 0 var(--e2); }
.document ul { margin: 0 0 var(--e2); padding-left: var(--e3); }
.document li { margin-bottom: var(--e1); }
.document li::marker { color: var(--texte-faible); }
.document .document-note {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--bordure);
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

/* --- Accès refusé --------------------------------------------------------------------------- */

.acces-refuse { max-width: 34rem; margin: var(--e5) auto 0; }
.acces-refuse > .ico { width: 1.5rem; height: 1.5rem; color: var(--texte-faible); }
.acces-refuse h1 { margin: var(--e2) 0 var(--e1); font-size: var(--t-xl); }
.acces-refuse p { margin: 0 auto; max-width: 44ch; }

/* --- Connexion et second facteur ------------------------------------------------------------ */

/* Les tailles de l'ancienne carte (1,35rem, 0,9rem, 0,95rem) ramenées sur l'échelle du système. */
.auth h1 { margin-bottom: var(--e0); font-size: var(--t-xl); }
.auth-phrase { font-size: var(--t-base); }
.auth-form button { min-height: 2.5rem; font-size: var(--t-md); }
.auth-pied { font-size: var(--t-sm); }

/* Un code à usage unique se relit chiffre par chiffre : chasse fixe et lettrage espacé. */
.champ-code {
    font-family: var(--police-code);
    font-size: var(--t-xl);
    letter-spacing: 0.35em;
    text-align: center;
}
/* Dans « Mon compte », le même champ tient dans une ligne de formulaire : un cran plus petit. */
.compte-formulaire .champ-code { font-size: var(--t-lg); letter-spacing: 0.25em; }