/* ==========================================================================
   INSFSF — TABLEAU DE BORD (administration)
   --------------------------------------------------------------------------
   Dépend de design-system.css : mêmes couleurs, même typographie, mêmes
   rayons que le site public. Ce fichier ne redéfinit que ce qui change.

   PARTI PRIS
   Le site public se lit ; le tableau de bord s'opère. Trois conséquences :
   — densité plus forte (moins de blanc, plus d'information par écran) ;
   — l'état d'un contenu se voit à la forme ET à la couleur, jamais à la
     couleur seule (une pastille grise n'aide pas un daltonien) ;
   — ce qui demande une action remonte en haut de l'écran.

   Sommaire
   01. Ossature (barre latérale, en-tête, zone de travail)
   02. Barre latérale et navigation
   03. En-tête de zone de travail
   04. Tuiles de synthèse
   05. Cartes et blocs
   06. Tableaux de gestion
   07. Étiquettes d'état
   08. Barre d'outils (recherche, filtres)
   09. Formulaires d'édition et onglets de langue
   10. Boîte de réception
   11. Bibliothèque de médias
   12. État vide, pagination
   13. Page de connexion
   ========================================================================== */


/* ==========================================================================
   01. OSSATURE
   ========================================================================== */
body.admin { background: var(--c-brume); }

.adm {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 991.98px) { .adm { grid-template-columns: minmax(0, 1fr); } }

.adm__travail { min-width: 0; display: flex; flex-direction: column; }
.adm__contenu { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); flex: 1; }


/* ==========================================================================
   02. BARRE LATÉRALE
   ========================================================================== */
.adm-lat {
  background: var(--c-sceau); color: rgba(255, 255, 255, .72);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.adm-lat__marque {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.adm-lat__marque img { width: 40px; height: 40px; flex: none; }
.adm-lat__marque b { font-family: var(--f-titre); color: #fff; font-size: 1rem; display: block; line-height: 1.1; }
.adm-lat__marque span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); }

.adm-lat__nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); }
.adm-lat__groupe { margin-bottom: var(--sp-5); }
.adm-lat__titre {
  font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .38);
  padding: 0 var(--sp-3); margin-bottom: var(--sp-2);
}
.adm-lat__lien {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .74); font-size: var(--fs-sm); text-decoration: none;
  transition: background var(--t-rapide), color var(--t-rapide);
}
.adm-lat__lien:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.adm-lat__lien i { font-size: 1.05rem; width: 20px; flex: none; }
/* Page courante : fond rose + barre à gauche. Deux signaux, pas un seul. */
.adm-lat__lien[aria-current="page"] {
  background: var(--c-vie); color: #fff; font-weight: var(--fw-semi);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55);
}
/* Compteur d'éléments en attente, aligné à droite du libellé. */
.adm-lat__compte {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--c-vie); color: #fff;
  font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.adm-lat__lien[aria-current="page"] .adm-lat__compte { background: rgba(255, 255, 255, .28); }
/* Pastille d'ANOMALIE, à distinguer d'une file d'attente : une fiche publiée
   sans accord enregistré n'est pas du travail en attente, c'est un état qui ne
   devrait pas exister. Rouge d'erreur, et un liseré clair pour qu'elle se
   remarque sur le bleu sceau de la barre — la couleur seule ne suffirait pas. */
.adm-lat__compte--alerte {
  background: var(--c-erreur); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
}

.adm-lat__pied { padding: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .1); }
.adm-lat__retour {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .55);
}
.adm-lat__retour:hover { color: #fff; text-decoration: none; }


/* ==========================================================================
   03. EN-TÊTE DE ZONE DE TRAVAIL
   ========================================================================== */
.adm-entete {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-bordure);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.adm-entete__titre { flex: 1; min-width: 0; }
.adm-entete__titre h1 { font-size: 1.375rem; margin: 0; }
.adm-entete__titre p { font-size: var(--fs-xs); color: var(--texte-doux); margin: 2px 0 0; }

.adm-burger {
  display: none; width: 42px; height: 42px; place-items: center;
  background: transparent; border: 1.5px solid var(--c-bordure-f);
  border-radius: var(--r-sm); color: var(--c-sceau); font-size: 1.2rem; cursor: pointer;
}
@media (max-width: 991.98px) { .adm-burger { display: grid; } }

.adm-compte { display: flex; align-items: center; gap: var(--sp-3); }
.adm-compte__avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-primaire); color: #fff;
  font-family: var(--f-titre); font-weight: var(--fw-semi); font-size: var(--fs-sm);
}
.adm-compte__nom { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-sceau); line-height: 1.2; }
.adm-compte__role { font-size: var(--fs-xs); color: var(--texte-doux); }
@media (max-width: 575.98px) { .adm-compte__texte { display: none; } }


/* Fil d'Ariane sur fond clair. Le site public a le sien dans style.css,
   qui n'est pas chargé ici : sans cette règle, la liste s'affiche numérotée. */
.fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-xs);
}
.fil li { display: flex; align-items: center; gap: var(--sp-2); color: var(--texte-doux); }
.fil li + li::before { content: "/"; color: var(--c-bordure-f); }
.fil [aria-current="page"] { font-weight: var(--fw-semi); }


/* ==========================================================================
   04. TUILES DE SYNTHÈSE
   Ce qui appelle une action est en premier, et se distingue par la couleur
   de son icône — pas par un simple chiffre plus gros.
   ========================================================================== */
.adm-tuiles { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.adm-tuile {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  background: #fff; border: 1px solid var(--c-bordure); border-radius: var(--r-md);
  padding: var(--sp-5); text-decoration: none;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
a.adm-tuile:hover { box-shadow: var(--sh-md); border-color: var(--c-bordure-f); transform: translateY(-2px); text-decoration: none; }
.adm-tuile__icone {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); font-size: 1.15rem;
  background: var(--c-primaire-05); color: var(--c-primaire);
}
.adm-tuile--action .adm-tuile__icone { background: var(--c-vie-05); color: var(--c-vie); }
.adm-tuile--info   .adm-tuile__icone { background: var(--c-soin-10); color: var(--c-soin); }
.adm-tuile__val {
  font-family: var(--f-titre); font-weight: var(--fw-bold); font-size: 1.75rem;
  color: var(--c-sceau); line-height: 1; font-variant-numeric: tabular-nums;
}
.adm-tuile__label { font-size: var(--fs-xs); color: var(--texte-doux); margin-top: 4px; display: block; }


/* ==========================================================================
   05. CARTES ET BLOCS
   ========================================================================== */
.adm-bloc {
  background: #fff; border: 1px solid var(--c-bordure); border-radius: var(--r-md);
  overflow: hidden;
}
/* L'en-tête d'un bloc : un titre, et à droite ce qui l'accompagne — un bouton,
   un compteur, deux badges. Il enroule : sur un téléphone, ce qui est à droite
   passe SOUS le titre plutôt que de le comprimer mot à mot. Sans cela,
   « Avant la mise en ligne » se lisait sur quatre lignes d'un mot. */
.adm-bloc__entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-bordure);
}
/* flex-basis auto plutôt que 0, et une largeur plancher : c'est ce plancher qui
   déclenche l'enroulement au lieu de laisser le titre se réduire à un mot. */
.adm-bloc__entete h2 { font-size: 1.0625rem; margin: 0; flex: 1 1 auto; min-width: 14ch; }
.adm-bloc__corps { padding: var(--sp-5); }
.adm-bloc__corps--serre { padding: 0; }

.adm-grille { display: grid; gap: var(--sp-4); }
@media (min-width: 1100px) { .adm-grille--2 { grid-template-columns: 1.5fr 1fr; } }


/* ==========================================================================
   06. TABLEAUX DE GESTION
   ========================================================================== */
.adm-tableau-env { overflow-x: auto; }
.adm-tableau { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adm-tableau thead th {
  background: var(--c-brume); color: var(--c-sceau);
  font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-bordure); white-space: nowrap;
}
.adm-tableau td { padding: var(--sp-4); border-bottom: 1px solid var(--c-bordure); vertical-align: middle; }
.adm-tableau tbody tr:last-child td { border-bottom: 0; }
.adm-tableau tbody tr:hover td { background: var(--c-primaire-05); }
.adm-tableau .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cellule « titre + sous-titre » : la vignette aide à repérer une ligne. */
.adm-ligne-titre { display: flex; align-items: center; gap: var(--sp-3); min-width: 240px; }
.adm-vignette {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-xs);
  background: var(--c-brume-2); display: grid; place-items: center;
  color: var(--c-primaire); overflow: hidden;
}
.adm-vignette img { width: 100%; height: 100%; object-fit: cover; }
.adm-ligne-titre b { display: block; color: var(--c-sceau); font-family: var(--f-titre); font-size: var(--fs-sm); }
.adm-ligne-titre span { font-size: var(--fs-xs); color: var(--texte-doux); }

/* Actions de ligne : icônes seules, mais chacune garde un nom accessible. */
.adm-actions { display: flex; gap: 4px; justify-content: flex-end; }
.adm-action {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--c-bordure); border-radius: var(--r-xs);
  color: var(--texte-doux); cursor: pointer; font-size: .95rem;
  transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.adm-action:hover { background: var(--c-primaire-05); color: var(--c-primaire); border-color: var(--c-primaire); }
.adm-action--danger:hover { background: var(--c-erreur-bg); color: var(--c-erreur); border-color: var(--c-erreur); }

/* Emplacement occupé mais inactif — « voir sur le site » pour un brouillon.
   Un <span> et non un <button disabled> : la case reste alignée avec les autres
   lignes du tableau, mais rien n'est focalisable, donc la navigation au clavier
   ne s'arrête pas sur une commande qui ne fait rien. Le titre et l'aria-label
   disent pourquoi. */
.adm-action--inerte {
  color: var(--c-bordure-f); cursor: default;
  background: transparent;
}
.adm-action--inerte:hover {
  background: transparent; color: var(--c-bordure-f); border-color: var(--c-bordure);
}


/* ==========================================================================
   07. ÉTIQUETTES D'ÉTAT
   Un point coloré DOUBLÉ d'un mot : l'information ne repose jamais sur la
   couleur seule (WCAG 1.4.1).
   ========================================================================== */
.etat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap;
}
.etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.etat--publie    { background: var(--c-succes-bg);    color: var(--c-succes); }
.etat--brouillon { background: var(--c-brume-2);      color: var(--c-ardoise); }
.etat--attente   { background: var(--c-attention-bg); color: var(--c-attention); }
.etat--archive   { background: var(--c-brume);        color: var(--c-gris); }
.etat--refuse    { background: var(--c-erreur-bg);    color: var(--c-erreur); }
.etat--nouveau   { background: var(--c-vie-05);       color: var(--c-vie); }

/* Pastilles de langue : montre en un coup d'œil ce qui reste à traduire. */
.langues-etat { display: inline-flex; gap: 3px; }
.langue-pastille {
  width: 24px; height: 20px; display: grid; place-items: center;
  border-radius: var(--r-xs); font-size: 10px; font-weight: var(--fw-bold);
  background: var(--c-brume-2); color: var(--c-gris);
  border: 1px solid transparent;
}
.langue-pastille--faite { background: var(--c-succes-bg); color: var(--c-succes); }
.langue-pastille--vide  { border-color: var(--c-bordure-f); background: #fff; color: var(--c-gris); }


/* ==========================================================================
   08. BARRE D'OUTILS
   ========================================================================== */
.adm-outils {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-bordure);
}
/* Sans cette règle, l'attribut hidden reste sans effet : « display: flex »
   posé par une classe l'emporte sur le display:none par défaut du navigateur.
   La barre d'actions groupées resterait donc visible avec zéro sélection. */
.adm-outils[hidden] { display: none; }
.adm-recherche { position: relative; flex: 1; min-width: 220px; }
.adm-recherche i { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--c-gris); pointer-events: none; }
.adm-recherche .saisie { padding-left: var(--sp-10); min-height: 42px; }
.adm-outils .selection { min-height: 42px; width: auto; min-width: 150px; }


/* ==========================================================================
   09. FORMULAIRES D'ÉDITION ET ONGLETS DE LANGUE
   ========================================================================== */
/* ==========================================================================
   TABLEAU DE BORD — la liste d'avant mise en ligne
   ========================================================================== */
.adm-bloc--avant { border-color: var(--c-attention); }
.adm-bloc--avant .adm-bloc__entete { background: var(--c-attention-bg); }

.adm-liste-verif { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.adm-liste-verif__item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-sm);
  border: 1px solid var(--c-bordure); background: #fff;
  font-size: var(--fs-sm);
}
.adm-liste-verif__item > span { flex: 1; }
.adm-liste-verif__item > i { margin-top: 2px; flex: none; font-size: 1.05rem; }
/* Deux degrés de gravité. L'icône diffère autant que la couleur — un octogone
   pour ce qui bloque, un triangle pour ce qui attend — parce que la couleur
   seule ne distingue rien pour une partie des lecteurs. */
.adm-liste-verif__item--bloquant  { border-left: 3px solid var(--c-erreur); }
.adm-liste-verif__item--bloquant > i  { color: var(--c-erreur); }
.adm-liste-verif__item--important { border-left: 3px solid var(--c-attention); }
.adm-liste-verif__item--important > i { color: var(--c-attention); }
.adm-liste-verif__item .btn { flex: none; align-self: center; }

/* Sur un téléphone, le bouton passe SOUS le texte. À côté, il ne laissait que
   quinze caractères par ligne : la phrase se lisait sur huit lignes, et c'est
   la phrase qui dit quoi corriger. La grille place l'icône en colonne 1, le
   texte et le bouton en colonne 2, l'un sous l'autre. */
@media (max-width: 560px) {
  .adm-liste-verif__item {
    display: grid; grid-template-columns: auto 1fr; align-items: start;
  }
  .adm-liste-verif__item .btn { grid-column: 2; justify-self: start; align-self: start; }
}

/* Une tuile à zéro perd sa couleur d'appel : elle informe, elle n'alerte pas. */
.adm-tuile__val { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   MESSAGES
   ========================================================================== */

/* Un message non lu se repère sans lire l'étiquette d'état : liseré à gauche
   et fond très légèrement teinté. La colonne « État » reste là — la couleur
   seule ne dit rien à qui ne la distingue pas. */
.adm-ligne--neuve td { background: var(--c-vie-05); }
.adm-ligne--neuve td:first-child { box-shadow: inset 3px 0 0 var(--c-vie); }

.adm-message-ouvert { border-color: var(--c-primaire); }

.adm-message-fiche {
  display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.adm-message-fiche dt {
  font-size: var(--fs-xs); color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}
.adm-message-fiche dd { margin: 0; font-size: var(--fs-sm); color: var(--c-sceau); }

/* pre-line : les retours à la ligne écrits par la personne sont conservés.
   Rien d'autre n'est interprété — le texte est échappé côté PHP. */
.adm-message-texte {
  margin: 0; padding: var(--sp-5);
  background: var(--c-brume); border-left: 3px solid var(--c-primaire);
  border-radius: var(--r-sm);
  white-space: pre-line; line-height: 1.7;
}


/* ==========================================================================
   UTILISATEURS — le choix du rôle
   Des boutons radio décrits, pas une liste déroulante. Choisir « Éditeur »
   dans un menu n'apprend pas ce qu'un éditeur peut faire ; ici chaque option
   porte sa conséquence, au moment où l'on décide.
   ========================================================================== */
.adm-roles { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .adm-roles { grid-template-columns: repeat(3, 1fr); } }
.adm-role {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--c-bordure); border-radius: var(--r-sm);
  padding: var(--sp-4); cursor: pointer; background: #fff;
}
.adm-role input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--c-vie); }
.adm-role b { display: block; color: var(--c-sceau); }
.adm-role > span > span {
  display: block; font-size: var(--fs-xs); color: var(--texte-doux); margin-top: 2px;
}
/* L'option retenue se distingue du cadre, pas seulement par le point coché. */
.adm-role:has(input:checked) { border-color: var(--c-vie); background: var(--c-vie-05); }
.adm-role:focus-within { outline: 2px solid var(--c-primaire); outline-offset: 2px; }


/* Logo de partenaire dans un tableau. Hauteur fixe et « contain » : les logos
   ont des proportions très différentes (1473×669 contre 312×288) et un
   étirement déformerait l'identité visuelle d'une institution. Fond blanc
   parce que les fichiers fournis sont des JPEG, donc opaques. */
.adm-logo {
  display: grid; place-items: center;
  width: 92px; height: 48px; padding: 4px;
  background: #fff; border: 1px solid var(--c-bordure); border-radius: var(--r-xs);
}
.adm-logo img { max-width: 100%; height: 40px; object-fit: contain; }


/* ==========================================================================
   ADMISSIONS — une page, quatre tables
   ========================================================================== */

/* Choix de la session : des onglets, parce qu'on travaille sur une seule à la
   fois. Ce sont des liens — chaque session a son adresse. */
.adm-sessions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; margin-bottom: var(--sp-4);
}
.adm-sessions__liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1; }
.adm-session-onglet {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: 99px;
  border: 1px solid var(--c-bordure); background: #fff;
  text-decoration: none; font-size: var(--fs-sm); color: var(--texte-doux);
}
.adm-session-onglet b { color: var(--c-sceau); font-variant-numeric: tabular-nums; }
.adm-session-onglet:hover { border-color: var(--c-vie); }
.adm-session-onglet.est-actif { border-color: var(--c-vie); background: var(--c-vie-05); }

/* Grille de champs ou de valeurs, deux ou trois par ligne selon la place. */
.adm-grille-champs {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.adm-grille-champs .champ { margin-bottom: 0; }
.adm-etiq {
  display: block; font-size: var(--fs-xs); color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}

/* Ligne d'ajout au pied d'un tableau : les champs et le bouton sur une ligne.
   Le formulaire reste toujours visible — ajouter une étape ne doit pas
   demander d'ouvrir une fenêtre. */
.adm-ajout {
  display: grid; gap: var(--sp-3); align-items: end;
  border-top: 1px solid var(--c-bordure); background: var(--c-brume);
}
@media (min-width: 800px) {
  .adm-ajout { grid-template-columns: 2fr 1fr 100px auto; }
  .adm-ajout--large { grid-template-columns: 2fr 2fr 1fr 90px; }
}
.adm-ajout .champ { margin-bottom: 0; }
.adm-ajout__boutons {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
@media (min-width: 800px) {
  .adm-ajout--large .adm-ajout__boutons { grid-column: 1 / -1; justify-content: flex-end; }
}


/* ==========================================================================
   TÉMOIGNAGES — fiches plutôt que lignes de tableau
   Un témoignage se juge en le LISANT. Un tableau à colonnes obligerait à
   tronquer le texte, donc à décider sans l'avoir lu. D'où la fiche.
   ========================================================================== */
.adm-fiche-t {
  border: 1px solid var(--c-bordure); border-radius: var(--r-md);
  padding: var(--sp-5); background: #fff;
}
/* Un liseré vert sur ce qui est en ligne : on repère d'un coup d'œil ce qui
   est public sans lire chaque état. */
.adm-fiche-t--publie { border-left: 3px solid var(--c-succes); }

.adm-fiche-t__entete {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start;
}
.adm-fiche-t__photo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
}
.adm-fiche-t__qui { flex: 1; min-width: 200px; }
.adm-fiche-t__qui b { color: var(--c-sceau); font-family: var(--f-titre); }
.adm-fiche-t__qui span { display: block; font-size: var(--fs-xs); color: var(--texte-doux); }
.adm-fiche-t__origine { color: var(--c-gris) !important; margin-top: 2px; }
.adm-fiche-t__etats { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.adm-fiche-t__texte {
  margin: var(--sp-4) 0; padding-left: var(--sp-4);
  border-left: 3px solid var(--c-vie);
  font-size: var(--fs-sm); color: var(--texte-doux); font-style: italic;
  white-space: pre-line;   /* les retours à la ligne saisis sont conservés */
}
.adm-fiche-t__note { margin: 0 0 var(--sp-4); color: var(--c-attention); letter-spacing: 2px; }

.adm-fiche-t__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  padding-top: var(--sp-4); border-top: 1px solid var(--c-bordure);
}
/* Le rappel du verrou occupe la place où « Publier » se trouverait. Dire
   pourquoi l'action manque vaut mieux qu'un bouton grisé sans explication. */
.adm-fiche-t__verrou {
  flex: 1; font-size: var(--fs-xs); color: var(--c-attention);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Le bloc de l'accord écrit : signalé comme le reste ne l'est pas, parce que
   c'est la seule décision de cette page qui engage l'institution. */
.adm-bloc--accord { border-color: var(--c-vie); }
.adm-bloc--accord .adm-bloc__entete { background: var(--c-vie-05); }

.adm-attestation {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--c-vie-05); border: 1px solid var(--c-vie);
  border-radius: var(--r-sm); padding: var(--sp-4);
  font-size: var(--fs-sm); cursor: pointer;
}
.adm-attestation input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--c-vie); flex: none; }
.adm-attestation b { display: block; color: var(--c-sceau); }
.adm-attestation > span > span { display: block; color: var(--texte-doux); margin-top: 2px; }
/* Le focus doit se voir sur toute l'attestation, pas seulement sur la case :
   c'est le libellé entier qui porte le sens. */
.adm-attestation:focus-within { outline: 2px solid var(--c-primaire); outline-offset: 2px; }


/* Deux champs côte à côte : une date et son heure. Ils vont ensemble, les
   séparer sur deux lignes casse la lecture. */
.adm-deux-champs { display: grid; grid-template-columns: 1fr 110px; gap: var(--sp-3); }
.adm-deux-champs .champ { margin-bottom: var(--sp-4); }

/* Le pavé de date des évènements — le même repère visuel qu'on retrouve sur
   le site public. La couleur est posée en style en ligne par la page, parce
   qu'elle dépend de l'état : vive pour ce qui arrive, grise pour ce qui est
   annulé ou déjà passé. */
.adm-pave-date {
  display: inline-grid; place-items: center; width: 52px; padding: 6px 0;
  border-radius: var(--r-xs); color: #fff; line-height: 1;
}
.adm-pave-date b { font-family: var(--f-titre); font-size: 1.1rem; }
.adm-pave-date span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.adm-pave-date__suite {
  display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--texte-doux);
}

/* Ligne d'un évènement passé : atténuée, mais lisible. On ne masque pas — le
   contraste reste au-dessus du minimum, sinon la liste des évènements passés
   deviendrait illisible alors que c'est précisément ce qu'on est venu voir. */
.adm-ligne--passee td { color: var(--texte-doux); }
.adm-ligne--passee .adm-ligne-titre b { color: var(--texte-doux); font-weight: var(--fw-medium); }

.adm-edition { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 1100px) { .adm-edition { grid-template-columns: minmax(0, 1fr) 320px; } }

/* Onglets FR / HT / EN : c'est le cœur de l'édition multilingue. Chaque
   onglet indique si sa traduction est faite, pour qu'on ne publie pas une
   page à moitié traduite sans le savoir. */
.onglets-langue { display: flex; gap: 2px; border-bottom: 1px solid var(--c-bordure); padding: 0 var(--sp-5); }
.onglet-langue {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); margin-bottom: -1px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--f-texte); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--texte-doux); cursor: pointer;
  transition: color var(--t-rapide), border-color var(--t-rapide);
}
.onglet-langue:hover { color: var(--c-vie); }
.onglet-langue[aria-selected="true"] { color: var(--c-vie); border-bottom-color: var(--c-vie); font-weight: var(--fw-semi); }
.onglet-langue__point { width: 7px; height: 7px; border-radius: 50%; background: var(--c-bordure-f); }
.onglet-langue__point--faite { background: var(--c-succes); }

.panneau-langue[hidden] { display: none; }

/* Barre d'actions collée en bas de l'écran : « Enregistrer » reste
   atteignable sans remonter, même sur un formulaire long. */
.adm-barre-action {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-bordure);
  padding: var(--sp-4) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.adm-barre-action__info { flex: 1; font-size: var(--fs-xs); color: var(--texte-doux); }


/* ==========================================================================
   10. BOÎTE DE RÉCEPTION
   ========================================================================== */
.adm-messages { display: grid; }
.adm-message {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4);
  align-items: start; padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-bordure); text-decoration: none;
  transition: background var(--t-rapide);
}
.adm-message:hover { background: var(--c-primaire-05); text-decoration: none; }
/* Non lu : fond teinté + titre en gras + barre rose. Trois signaux. */
.adm-message--nonlu { background: var(--c-vie-05); box-shadow: inset 3px 0 0 var(--c-vie); }
.adm-message--nonlu .adm-message__objet { font-weight: var(--fw-bold); color: var(--c-sceau); }
.adm-message__avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-brume-2); color: var(--c-primaire);
  font-family: var(--f-titre); font-weight: var(--fw-semi); font-size: var(--fs-xs);
}
.adm-message__de { font-size: var(--fs-sm); color: var(--c-sceau); font-weight: var(--fw-semi); }
.adm-message__objet { font-size: var(--fs-sm); color: var(--texte-doux); }
.adm-message__extrait { font-size: var(--fs-xs); color: var(--c-gris); margin-top: 2px; }
.adm-message__meta { text-align: right; font-size: var(--fs-xs); color: var(--c-gris); white-space: nowrap; }


/* ==========================================================================
   11. BIBLIOTHÈQUE DE MÉDIAS
   ========================================================================== */
/* Une <ul> et non une suite de <figure> : c'est une liste, et un lecteur
   d'écran annonce alors « liste de 24 éléments » — un repère qu'on n'a pas
   autrement dans une grille de vignettes. */
.adm-medias {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.adm-media {
  border: 1px solid var(--c-bordure); border-radius: var(--r-sm);
  overflow: hidden; background: #fff; margin: 0;
  display: flex; flex-direction: column; height: 100%;
  position: relative;
}
/* object-fit: cover sur un cadre 4/3 : toutes les vignettes ont la même taille
   quelle que soit la forme de la photo. Sans cela, une image panoramique et un
   portrait cassent l'alignement de la grille. */
.adm-media__apercu {
  aspect-ratio: 4 / 3; width: 100%;
  background: var(--c-brume-2); display: grid; place-items: center;
  color: var(--c-primaire); object-fit: cover; font-size: 1.6rem;
}
.adm-media__apercu--doc { background: var(--c-brume); color: var(--c-vie); }
.adm-media__nom {
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs);
  color: var(--texte-doux); flex: 1;
}
/* word-break : un nom de fichier long sans espace déborderait de la vignette. */
.adm-media__nom b { display: block; color: var(--c-sceau); word-break: break-word; }

.adm-media__actions {
  display: flex; gap: 4px; justify-content: flex-end;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.adm-media__actions .adm-action { width: 30px; height: 30px; font-size: .85rem; }

/* ── Zone d'envoi ───────────────────────────────────────────────────────────── */
.adm-depot {
  border: 2px dashed var(--c-bordure-f); border-radius: var(--r-md);
  text-align: center; margin: var(--sp-4); padding: var(--sp-8) var(--sp-5);
}
.adm-depot > i { font-size: 2.2rem; color: var(--c-vie); }
.adm-depot h2 { font-size: var(--fs-h4); margin: var(--sp-4) 0 var(--sp-2); }
.adm-depot p { font-size: var(--fs-sm); color: var(--texte-doux); margin: 0 0 var(--sp-5); }
.adm-depot__champs {
  display: grid; gap: var(--sp-3); align-items: end;
  max-width: 640px; margin: 0 auto; text-align: left;
}
@media (min-width: 700px) {
  .adm-depot__champs { grid-template-columns: 1fr 1fr auto; }
}
/* Le sélecteur de fichier natif : on ne le remplace pas par un faux bouton
   stylé. Celui du navigateur est accessible au clavier, traduit dans la langue
   du système, et annonce le nombre de fichiers choisis. */
.adm-depot input[type="file"] { padding: var(--sp-2); font-size: var(--fs-sm); }

/* ── Fiche de modification d'un média ──────────────────────────────────────── */
.adm-edition-media { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) {
  .adm-edition-media { grid-template-columns: 220px minmax(0, 1fr); }
}
.adm-edition-media__apercu {
  width: 100%; border-radius: var(--r-sm); display: block;
  background: var(--c-brume-2);
}

/* ── Choix d'une illustration dans un formulaire ────────────────────────────── */
/* Des boutons radio déguisés en vignettes. Ce sont de vrais radios : la
   navigation au clavier, la sélection unique et l'envoi du formulaire
   fonctionnent sans une ligne de JavaScript. */
.choix-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

/* — Variante COMPACTE, celle du sélecteur ————————————————
   Des vignettes de 68 px au lieu de colonnes larges : on en voit trois fois
   plus dans la même hauteur, et 68 px suffisent à reconnaître une photo qu'on
   a soi-même téléversée. auto-fill : le nombre de colonnes suit la largeur
   disponible au lieu d'être figé à trois.
   La hauteur est PLAFONNÉE et la zone défile : sans cela, douze vignettes
   poussaient déjà le reste du formulaire hors de l'écran. */
.choix-media--compact {
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: var(--sp-2);
  max-height: 240px; overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--c-bordure); border-radius: var(--r-sm);
  background: var(--c-brume);
}
/* Une option masquée par la recherche sort de la grille au lieu de laisser un
   trou : c'est display:none, pas visibility. */
.choix-media__option[hidden] { display: none; }

/* — Le sélecteur complet ————————————————————————————— */
.selecteur-media { display: grid; gap: var(--sp-3); }

.selecteur-media__rech { position: relative; }
.selecteur-media__rech i {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--c-gris); font-size: .9rem; pointer-events: none;
}
.selecteur-media__rech .saisie { padding-left: 2.1rem; }

/* Le dépliant qui contient le reste de la médiathèque. Les images qu'il
   renferme ne sont pas téléchargées tant qu'il est replié — loading="lazy" ne
   réclame un fichier qu'une fois visible. */
.selecteur-media__reste > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-primaire); padding: var(--sp-2) 0;
  border-radius: var(--r-xs);
}
.selecteur-media__reste > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.selecteur-media__reste > summary:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 2px; }
.selecteur-media__reste[open] > summary { margin-bottom: var(--sp-2); }

.selecteur-media__pied {
  margin: 0; font-size: var(--fs-xs); color: var(--texte-doux);
}
.choix-media__option { position: relative; margin: 0; cursor: pointer; }
.choix-media__option input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choix-media__vignette {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 2px solid var(--c-bordure); border-radius: var(--r-xs);
  background: var(--c-brume-2);
}
.choix-media__vide {
  display: grid; place-items: center; color: var(--texte-doux);
  font-size: var(--fs-xs); text-align: center; padding: 4px;
}
.choix-media__option input:checked + .choix-media__vignette {
  border-color: var(--c-vie); box-shadow: 0 0 0 2px var(--c-vie-10);
}
/* Le focus doit rester visible : l'input est transparent, donc c'est la
   vignette qui doit le montrer. */
.choix-media__option input:focus-visible + .choix-media__vignette {
  outline: 2px solid var(--c-primaire); outline-offset: 2px;
}

/* Variante « bande » — pour les trois photos du haut de l'accueil.
   Deux raisons de ne pas réutiliser la grille carrée :
     · trois emplacements × quarante images en grille, c'est quarante rangées
       de vignettes à faire défiler ; en bande, chaque emplacement garde une
       hauteur fixe ;
     · les vignettes sont en 16/9, le format du bandeau lui-même. Un cadrage
       carré cacherait justement ce qu'on cherche à juger : est-ce que la photo
       tient en paysage. */
.choix-media--bande {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; padding-bottom: var(--sp-2);
  scroll-snap-type: x proximity;
}
.choix-media--bande { max-height: none; grid-template-columns: none; }
.choix-media--bande .choix-media__option { flex: 0 0 116px; scroll-snap-align: start; }
.choix-media--bande .choix-media__vignette { aspect-ratio: 16 / 9; }


/* ==========================================================================
   12. ÉTAT VIDE, PAGINATION
   ========================================================================== */
/* Message de confirmation après un enregistrement. Il survit à la redirection
   (voir noter() / prendre_note() dans prive/aide.php) et ne s'affiche qu'une
   fois : rechargé, il a disparu. */
.adm-note {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-succes);
  background: var(--c-succes-bg); color: #0a5a3a;
  font-size: var(--fs-sm);
}
.adm-note--info    { border-left-color: var(--c-info);    background: var(--c-info-bg);    color: #0a5a61; }
.adm-note--erreur  { border-left-color: var(--c-erreur);  background: var(--c-erreur-bg);  color: #8a1220; }

/* Variante sans bordures ni en-tête : une simple liste de paires
   « libellé / nombre », comme l'inventaire du tableau de bord. */
.adm-tableau--nu th,
.adm-tableau--nu td {
  border: 0; padding: var(--sp-2) 0;
  background: transparent;
}
.adm-tableau--nu th { font-weight: 400; }
.adm-tableau--nu tr + tr th,
.adm-tableau--nu tr + tr td { border-top: 1px solid var(--c-bordure); }

.adm-vide { text-align: center; padding: var(--sp-16) var(--sp-5); }
.adm-vide i { font-size: 2.2rem; color: var(--c-bordure-f); }
.adm-vide h3 { font-size: var(--fs-h4); margin: var(--sp-4) 0 var(--sp-2); }
.adm-vide p { font-size: var(--fs-sm); color: var(--texte-doux); margin: 0 0 var(--sp-5); }

.adm-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-bordure);
  font-size: var(--fs-xs); color: var(--texte-doux);
}
.adm-pagination__pages { display: flex; gap: 4px; }
.adm-page {
  min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center;
  border: 1px solid var(--c-bordure); border-radius: var(--r-xs); background: #fff;
  font-size: var(--fs-xs); color: var(--texte-doux); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
/* Les pages sont des liens : l'adresse porte le numéro de page, donc chaque
   page est partageable et le bouton Retour du navigateur fonctionne. */
a.adm-page { text-decoration: none; }
.adm-page:hover { border-color: var(--c-vie); color: var(--c-vie); }
.adm-page[aria-current="page"] { background: var(--c-vie); border-color: var(--c-vie); color: #fff; font-weight: var(--fw-semi); }
/* Flèche en bout de liste : présente pour ne pas décaler les autres, inactive. */
.adm-page--inerte { color: var(--c-bordure-f); cursor: default; }
.adm-page--inerte:hover { border-color: var(--c-bordure); color: var(--c-bordure-f); }


/* ==========================================================================
   13. PAGE DE CONNEXION
   ========================================================================== */
body.connexion {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--sp-5);
  background:
    radial-gradient(60% 60% at 80% 15%, rgba(194, 24, 91, .35) 0%, transparent 65%),
    linear-gradient(160deg, var(--c-primaire) 0%, var(--c-sceau) 60%);
}
.connexion__carte {
  width: min(430px, 100%);
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.5rem + 2vw, 2.75rem);
  box-shadow: var(--sh-lg);
}
.connexion__marque { text-align: center; margin-bottom: var(--sp-8); }
.connexion__marque img { width: 64px; height: 64px; margin: 0 auto var(--sp-4); }
.connexion__marque h1 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.connexion__marque p { font-size: var(--fs-sm); color: var(--texte-doux); margin: 0; }
.connexion__pied { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-xs); color: var(--c-gris); }

/* Message au-dessus du formulaire : erreur de saisie, session expirée, accès
   révoqué. L'icône double l'information portée par la couleur — un message
   d'erreur qui ne serait que rouge n'existe pas pour tout le monde. */
.connexion__alerte {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-info);
  background: var(--c-info-bg); color: #0a5a61;
  font-size: var(--fs-sm); line-height: 1.5;
}
.connexion__alerte i { flex: none; margin-top: .15em; }
.connexion__alerte--erreur {
  border-left-color: var(--c-erreur);
  background: var(--c-erreur-bg); color: #8a1220;
}
.connexion__oubli {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-xs); color: var(--texte-doux);
}

/* Œil de révélation du mot de passe. */
.champ--mdp { position: relative; }
.champ--mdp .saisie { padding-right: var(--sp-12); }
.mdp-voir {
  position: absolute; right: 6px; bottom: 5px;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-xs);
  color: var(--c-gris); cursor: pointer;
}
.mdp-voir:hover { color: var(--c-primaire); background: var(--c-primaire-05); }


/* ==========================================================================
   BARRE LATÉRALE EN MODE MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
  .adm-lat {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw);
    z-index: var(--z-modal); height: 100dvh;
    transform: translateX(-100%); transition: transform var(--t-base);
    box-shadow: var(--sh-lg);
  }
  .adm-lat.est-ouverte { transform: none; }
}