/* ==========================================================================
   Feuille de style de l'application.
   Aucune ressource externe : rien à charger depuis un CDN, rien qui parte
   vers un tiers quand un utilisateur ouvre une page.
   Les couleurs sont regroupées dans :root, plus bas.
   ========================================================================== */

:root {
  /* Les couleurs de l'interface. Pour les adapter à une charte, il suffit de
     changer ces onze valeurs : tout le reste de la feuille s'y réfère par le
     nom, jamais par le code hexadécimal. */
  --primaire:       #2563A8;   /* boutons, liens, barre du haut */
  --primaire-fonce: #1D4E85;   /* survol des éléments primaires */
  --fonce:          #1E3A5F;   /* fonds sombres, bandeau */
  --fonce-plus:     #152A45;   /* le plus sombre : marque, pieds */
  --clair:          #4E9BD4;   /* aplats clairs, accents discrets */
  --accent:         #D98324;   /* filets d'accent, mises en avant */
  --alerte:         #C0392B;   /* erreurs, suppressions */
  --info:           #0F8B8D;   /* informations neutres */
  --mauve:          #6B4E8F;   /* catégorie supplémentaire */
  --attention:      #E07B1F;   /* avertissements */
  --succes:         #1A7F52;   /* confirmations */

  /* Déclinaisons pâles, pour les fonds de ligne et les textes sur fond
     clair. Elles sont ici, et pas dans chaque module : un module qui
     écrirait son propre code hexadécimal obligerait, pour changer la charte
     d'un client, à repasser dans tous les modules installés. */
  --alerte-pale:    #FDF3F7;   /* fond d'une ligne en échec */
  --alerte-bord:    #F0BBD3;   /* son filet */
  --accent-pale:    #FFFBF2;   /* fond d'une ligne qui demande un arbitrage */
  --accent-fonce:   #9A6A00;   /* texte d'accent sur fond pâle */

  --ink:       #1A1A1A;
  --ink-soft:  #5A6572;
  --line:      #DCE3EC;
  --line-fort: #C2CEDE;
  --bg:        #FFFFFF;
  --bg-soft:   #F4F7FB;
  --bg-deep:   #E9F0F8;

  --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 6px;
  --ombre: 0 1px 2px rgba(23,69,143,.08), 0 4px 14px rgba(23,69,143,.07);
  --ombre-forte: 0 4px 12px rgba(23,69,143,.16), 0 16px 40px rgba(23,69,143,.14);
  --barre-h: 62px;
  --nav-l: 232px;
}

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

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-soft);
}

h1, h2, h3 { font-weight: 700; color: var(--fonce); margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }

a { color: var(--primaire); }
a:hover { color: var(--primaire-fonce); }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/*
 *  Réservé aux lecteurs d'écran : présent dans le document, invisible à
 *  l'œil. En position absolue, donc positionné par rapport au premier
 *  ancêtre positionné — d'où le « position: relative » sur .tableau-cadre
 *  plus bas : sans lui, un intitulé caché dans un large tableau se plaçait
 *  par rapport à la PAGE, échappait au cadre qui défile, et allongeait le
 *  document de 280 px. Invisible à l'œil, et pourtant la page glissait de
 *  côté sur tablette.
 */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fonce); color: #fff; padding: .7rem 1.1rem; font-weight: 600;
}
.lien-evitement:focus { left: 0; }

.note { color: var(--ink-soft); font-size: .86rem; }
.sous-titre { color: var(--ink-soft); margin: 0; font-size: .92rem; }
.facultatif {
  font-weight: 400; color: var(--ink-soft); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; margin-left: .3rem;
}

/* --- Barre supérieure ---------------------------------------------------- */
.barre {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  height: var(--barre-h);
  padding: 0 1.1rem;
  background: var(--fonce-plus);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}

.barre__menu {
  display: none; width: 38px; height: 38px; flex: 0 0 auto;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--rayon); cursor: pointer; position: relative;
}
.barre__menu span,
.barre__menu span::before,
.barre__menu span::after {
  position: absolute; left: 50%; width: 17px; height: 2px;
  background: #fff; transform: translateX(-50%); content: "";
}
.barre__menu span { top: 50%; margin-top: -1px; }
.barre__menu span::before { top: -6px; left: 0; transform: none; }
.barre__menu span::after  { top: 6px;  left: 0; transform: none; }

.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.marque__texte strong { display: block; font-size: .98rem; font-weight: 700; letter-spacing: .01em; }
.marque__texte strong em { font-style: normal; color: var(--accent); }
.marque__texte small { display: block; font-size: .72rem; color: #B9C9E4; }

/* Roue annuelne stylisée — repère graphique, pas le logo officiel,
   qui ne peut être ni recréé ni modifié. */
/* La marque est l'icône SVG elle-même : une seule source, et changer de
   logo revient à remplacer un fichier. */
.marque__logo { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.marque__logo--grand { width: 56px; height: 56px; }

.barre__droite { margin-left: auto; display: flex; align-items: center; gap: .8rem; }

.pastille {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primaire); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.pastille-lien { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.pastille-lien__nom { font-size: .85rem; line-height: 1.2; }
.pastille-lien__nom small { display: block; font-size: .72rem; color: #B9C9E4; }

/* --- Cadre et navigation ------------------------------------------------- */
.cadre { display: grid; grid-template-columns: var(--nav-l) minmax(0, 1fr); align-items: start; }

.navigation {
  position: sticky; top: var(--barre-h);
  height: calc(100vh - var(--barre-h));
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 1.1rem .7rem;
}
.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation li { margin-bottom: .15rem; }
.navigation a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem;
  border-radius: var(--rayon);
  color: var(--ink); text-decoration: none;
  font-size: .92rem; font-weight: 600;
}
.navigation a:hover { background: var(--bg-soft); color: var(--primaire); }
.navigation a.actif { background: var(--bg-deep); color: var(--fonce); box-shadow: inset 3px 0 0 var(--accent); }

.navigation__icone {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 3px;
  background: var(--line-fort);
}
.icone-fichiers  { background: var(--primaire); }
.icone-partages  { background: var(--info); }
.icone-corbeille { background: var(--ink-soft); }
.icone-utilisateurs   { background: var(--mauve); }
.icone-journal   { background: var(--accent); }

.navigation__resume {
  margin-top: 1.6rem; padding: .9rem .8rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--rayon);
}
.navigation__resume h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); margin-bottom: .6rem;
}
.navigation__resume dl { margin: 0; font-size: .85rem; }
.navigation__resume dl > div { display: flex; justify-content: space-between; padding: .2rem 0; }
.navigation__resume dt { color: var(--ink-soft); }
.navigation__resume dd { margin: 0; font-weight: 700; color: var(--fonce); }

.principal { padding: 1.6rem 1.8rem 3rem; min-width: 0; }

/* --- Pied ---------------------------------------------------------------- */
.pied {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.8rem;
  background: var(--fonce-plus); color: #B9C9E4;
  font-size: .8rem;
}

/* --- En-tête de page ----------------------------------------------------- */
.entete-page {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.entete-page h1 { margin-bottom: .15rem; }

.fil { font-size: .82rem; color: var(--ink-soft); margin-bottom: .35rem; }
.fil a { color: var(--primaire); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil span { margin: 0 .35rem; color: var(--line-fort); }

.recherche { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.recherche input[type="search"], .recherche select { min-width: 220px; }

.actions-barre { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
  padding: .62rem 1.1rem;
  border-radius: var(--rayon); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.bouton--principal { background: var(--primaire); color: #fff; }
.bouton--principal:hover { background: var(--primaire-fonce); color: #fff; }
.bouton--contour { background: #fff; color: var(--primaire); border-color: var(--line-fort); }
.bouton--contour:hover { border-color: var(--primaire); background: var(--bg-soft); }
.bouton--discret { background: transparent; color: var(--ink-soft); }
/* Sur la barre sombre, le même bouton doit rester lisible. */
.barre .bouton--discret { color: #D7E0EC; border-color: rgba(255,255,255,.3); }
.barre .bouton--discret:hover { background: rgba(255,255,255,.14); color: #fff; }
.bouton--discret:hover { background: var(--bg-deep); color: var(--fonce); }
.bouton--danger { background: #fff; color: var(--alerte); border-color: #F0BBD3; }
.bouton--danger:hover { background: var(--alerte); color: #fff; border-color: var(--alerte); }

/* Une action destructrice doit se voir. « .danger » était jusqu'ici réservé
   aux menus : posé sur un bouton, il ne changeait rien, et « Supprimer cet
   appel » avait l'air d'un bouton ordinaire. */
.bouton.danger { color: var(--alerte); }
.bouton.danger:hover { background: #FCE9F1; color: #9A0D4A; }
.bouton--contour.danger { border-color: #F0BBD3; }
.bouton--contour.danger:hover { border-color: var(--alerte); }
.bouton--large { width: 100%; }
.bouton--petit { padding: .4rem .75rem; font-size: .82rem; }

.lien-bouton {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--primaire); text-decoration: underline; cursor: pointer;
}

/* --- Alertes ------------------------------------------------------------- */
.alerte {
  padding: .8rem 1rem; border-radius: var(--rayon);
  border-left: 4px solid var(--primaire); background: var(--bg-deep);
  margin-bottom: 1.1rem; font-size: .92rem;
}
.alerte--succes    { border-left-color: var(--succes);      background: #E7F5EF; }
.alerte--erreur    { border-left-color: var(--alerte); background: #FCE9F1; }
.alerte--attention { border-left-color: var(--accent);      background: #FEF6E6; }
.alerte--info      { border-left-color: var(--primaire);     background: var(--bg-deep); }

/* --- Tableaux ------------------------------------------------------------ */
.tableau-cadre {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--rayon); overflow-x: auto; box-shadow: var(--ombre);
  /* Ancre les éléments en position absolue du tableau — voir
     .visuellement-cache ci-dessus. */
  position: relative;
}
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th {
  text-align: left; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
  padding: .7rem .9rem; border-bottom: 1px solid var(--line);
  background: var(--bg-soft); white-space: nowrap;
}
.tableau td { padding: .6rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--bg-soft); }
.tableau--dense td, .tableau--dense th { padding: .45rem .8rem; font-size: .86rem; }

.colonne-etroite { width: 1%; white-space: nowrap; }
.colonne-actions { width: 1%; white-space: nowrap; text-align: right; }
.ligne-inactive { opacity: .58; }

/* --- Entrées (fichier / dossier / utilisateur) -------------------------------- */
.entree { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; min-width: 0; }
.entree__texte { min-width: 0; }
.entree__nom {
  display: block; font-weight: 600; color: var(--fonce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
a.entree:hover .entree__nom { color: var(--primaire); text-decoration: underline; }
.entree__meta { display: block; font-size: .78rem; color: var(--ink-soft); }

.vignette {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--rayon);
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--ink-soft);
  text-transform: uppercase;
}
.vignette--grande { width: 72px; height: 72px; font-size: .85rem; margin: 0 auto .8rem; }
.vignette--dossier { background: var(--accent); color: #3A2600; }
.vignette--dossier::after { content: ""; width: 17px; height: 13px; background: currentColor; border-radius: 2px 4px 2px 2px; opacity: .85; }
.vignette--corbeille { background: var(--ink-soft); }
.vignette--image { background: var(--info); }
.vignette--pdf { background: var(--alerte); }
.vignette--video { background: var(--mauve); }
.vignette--audio { background: var(--attention); }
.vignette--texte { background: var(--primaire); }
.vignette--tableur { background: var(--succes); }
.vignette--presentation { background: var(--attention); }
.vignette--archive { background: var(--fonce); }
.vignette--autre { background: var(--ink-soft); }

.marqueur-partage, .marqueur-protege {
  color: var(--info); font-weight: 600;
}
/* Liste de cases à cocher qui peut être longue — tous les utilisateurs. Elle
   défile dans sa propre boîte plutôt que d'allonger la page : le bouton
   d'enregistrement reste à portée, et le filtre juste au-dessus. */
.liste-cochable {
  max-height: 20rem; overflow-y: auto;
  padding: .2rem .6rem .4rem;
  border: 1px solid var(--line); border-radius: var(--rayon);
  background: var(--bg);
}
.liste-cochable .droit { padding: .35rem 0; }
.liste-cochable .droit + .droit { margin-top: 0; border-top: 1px solid var(--line); }
.liste-cochable .droit[hidden] { display: none; }
.note--vide { padding: .6rem .2rem; margin: 0; }

/* Le filtre : un champ serré, collé à la liste qu'il filtre. */
.champ--serre { margin-bottom: .5rem; }
.champ--serre input { margin: 0; }

/* Tableau des règles d'un dossier : chaque cellule tient sur deux lignes —
   l'essentiel, puis la précision en dessous. Sans cela, le <small> se colle
   au libellé et les deux se lisent comme une seule phrase. */
.tableau--regles td small {
  display: block; margin-top: .15rem;
  color: var(--ink-soft); font-size: .78rem; line-height: 1.35;
}
.tableau--regles td { vertical-align: top; }
/* La colonne du niveau porte une phrase entière : sans plancher, elle se fait
   écraser par la colonne des noms et se lit en colonne d'un mot. */
@media (min-width: 621px) {
  .tableau--regles td:nth-child(2) { min-width: 12rem; }
}

/* Cadenas discret à côté du nom d'un dossier réservé. Il dit « ce dossier a
   des règles », pas « vous n'y avez pas droit » : ceux qui n'y ont pas droit
   ne voient pas la ligne du tout. */
.marqueur-reserve {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-deep); color: var(--fonce);
  padding: .1rem .4rem; border-radius: 3px; margin-left: .4rem;
  white-space: nowrap;
}

/* Liste sans puces ni retrait, pour empiler des bénéficiaires dans un tableau. */
.liste-nue { list-style: none; margin: 0; padding: 0; }
.liste-nue li { padding: .12rem 0; }

.marqueur-soi {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-deep); color: var(--fonce); padding: .1rem .4rem;
  border-radius: 3px; margin-left: .35rem;
}

.etat {
  display: inline-block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .5rem; border-radius: 3px; white-space: nowrap;
  /* Repli : un rôle créé par l'organisation n'a pas de couleur dédiée, et doit
     malgré tout se voir. */
  background: var(--bg-deep); color: var(--fonce);
}
.etat--actif   { background: #E7F5EF; color: #0B6B45; }
.etat--expire  { background: #FEF6E6; color: #8A5B00; }
.etat--revoque { background: #FCE9F1; color: #9A0D4A; }
.etat--admin   { background: #F0E6F8; color: var(--mauve); }
.etat--utilisateur  { background: var(--bg-deep); color: var(--fonce); }

/* --- Menus contextuels --------------------------------------------------- */
.menu { position: relative; display: inline-block; }
.menu__declencheur {
  width: 32px; height: 32px; border-radius: var(--rayon);
  background: transparent; border: 1px solid transparent;
  color: var(--ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.menu__declencheur:hover { background: var(--bg-deep); border-color: var(--line); color: var(--fonce); }
.menu__liste {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 230px; padding: .3rem;
  background: #fff; border: 1px solid var(--line-fort);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  text-align: left;
}
.menu.ouvert .menu__liste { display: block; }
.menu__liste a,
.menu__liste button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .65rem; border: 0; border-radius: 4px;
  background: none; font: inherit; font-size: .88rem; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.menu__liste a:hover, .menu__liste button:hover { background: var(--bg-deep); color: var(--fonce); }
.menu__liste .danger { color: var(--alerte); }
.menu__liste .danger:hover { background: #FCE9F1; color: #9A0D4A; }
.menu__liste form { margin: 0; }

.ligne-actions { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.ligne-actions form { margin: 0; }

/* --- Cartes et colonnes -------------------------------------------------- */
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.4rem; align-items: start; }
.carte {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--rayon); padding: 1.3rem; box-shadow: var(--ombre);
}
.carte h2 { margin-bottom: 1rem; }

.fiche { margin: 0 0 1rem; font-size: .92rem; }
.fiche > div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid var(--line); }
.fiche > div:last-child { border-bottom: 0; }
.fiche dt { color: var(--ink-soft); }
.fiche dd { margin: 0; font-weight: 600; text-align: right; }

.vide {
  background: var(--bg); border: 1px dashed var(--line-fort);
  border-radius: var(--rayon); padding: 3rem 1.5rem; text-align: center; color: var(--ink-soft);
}
.vide strong { color: var(--fonce); font-size: 1.05rem; }
.vide p { margin: .3rem 0; }

.encart-lien {
  background: var(--bg); border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1.4rem;
}
.encart-lien h2 { font-size: 1rem; margin-bottom: .6rem; }
.copie { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.copie input { flex: 1; min-width: 240px; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

.lien-discret {
  width: 150px; font-family: ui-monospace, Consolas, monospace;
  font-size: .76rem; padding: .3rem .45rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-soft);
  color: var(--ink-soft);
}

/* --- Formulaires --------------------------------------------------------- */
.champ { margin-bottom: 1rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--fonce); margin-bottom: .3rem; }
.champ small { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: .3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], select, textarea {
  width: 100%; font-family: inherit; font-size: .92rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-fort); border-radius: var(--rayon);
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primaire); outline: 3px solid rgba(0,103,200,.2); outline-offset: 0;
}
input[readonly] { background: var(--bg-soft); color: var(--ink-soft); }
select { appearance: auto; }

/* --- Modale -------------------------------------------------------------- */
.modale {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: rgba(15,47,99,.55);
}
.modale[hidden] { display: none; }
.modale__boite {
  background: #fff; border-radius: 8px; box-shadow: var(--ombre-forte);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 1.5rem;
}
.modale__boite h2 { margin-bottom: 1.1rem; }
.modale__intro { font-size: .9rem; color: var(--ink-soft); margin-top: 0; }
.modale__actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.4rem; }

/* --- Connexion et page publique ----------------------------------------- */
.page-connexion { background: var(--fonce-plus); min-height: 100vh; }
.page-connexion::before {
  content: ""; position: fixed; inset: 0;
  background: radial-gradient(1000px 500px at 50% -10%, rgba(0,162,224,.28), transparent 70%);
  pointer-events: none;
}
.connexion {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.2rem;
}
.connexion__carte {
  background: #fff; border-radius: 10px; box-shadow: var(--ombre-forte);
  width: 100%; max-width: 410px; padding: 2rem 1.8rem;
  border-top: 5px solid var(--accent);
}
.connexion__entete { text-align: center; margin-bottom: 1.6rem; }
.connexion__entete h1 { font-size: 1.3rem; margin: .8rem 0 .2rem; }
.connexion__entete h1 em { font-style: normal; color: var(--accent); }
.connexion__entete p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.connexion__aide { font-size: .82rem; color: var(--ink-soft); text-align: center; margin: 1.2rem 0 0; }
.connexion__pied { position: relative; color: #8FA6C9; font-size: .78rem; margin-top: 1.4rem; }

.fichier-partage { text-align: center; margin-bottom: 1.4rem; }
.fichier-partage__nom { font-weight: 700; color: var(--fonce); word-break: break-word; margin: 0 0 .2rem; }
.fichier-partage__meta { font-size: .85rem; color: var(--ink-soft); margin: 0; }

.pagination { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.2rem; }

/* --- Bas du menu, réservé au téléphone ----------------------------------- */
/* Le serveur ne connaît pas la largeur de l'écran : ce bloc est donc toujours
   rendu, et c'est la feuille de style qui décide de le montrer. */
.navigation__mobile { display: none; }

/*
 *  Le lien de retour ne peut pas se cacher derrière la largeur qu'il vient
 *  lui-même de forcer : en mode bureau, il reste visible quelle que soit la
 *  taille de l'écran. Sans cela, un utilisateur qui bascule sur son téléphone n'a
 *  plus aucun moyen de revenir.
 */
[data-affichage="bureau"] .navigation__mobile { display: block; margin-top: 1rem; }

.navigation__mobile-lien {
  display: block; padding: .7rem 1.15rem; min-height: 44px;
  color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 600;
  border-top: 1px solid var(--filet);
}
.navigation__mobile-lien:hover { background: var(--bg-soft); color: var(--fonce); }

/* « Déconnexion » n'est ici que parce que la barre du haut la masque sur les
   petits écrans. Ailleurs, elle est déjà en haut à droite — la répéter dans
   le menu ferait deux fois la même chose. Sélecteur plus précis que la règle
   ci-dessus, sinon l'ordre du fichier l'emporterait. */
.navigation__mobile .navigation__sortie { display: none; }

/* --- Responsive ---------------------------------------------------------- */
/*
 *  C'est la LARGEUR DE L'ÉCRAN qui décide, jamais le modèle d'appareil. Un
 *  iPad en paysage est plus large qu'un petit portable, une fenêtre réduite
 *  sur Mac fait 500 px : un « suis-je un téléphone ? » se tromperait sur les
 *  deux, la largeur jamais.
 *
 *  Règle tenue partout : à 320 px de large, AUCUNE page ne doit défiler
 *  latéralement. Un défilement latéral ne se voit pas — le navigateur mobile
 *  dézoome la page entière pour compenser, et tout devient minuscule.
 */
@media (max-width: 960px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .barre__menu { display: block; }
  .navigation {
    display: none; position: fixed; top: var(--barre-h); left: 0; bottom: 0;
    width: 250px; z-index: 55; box-shadow: var(--ombre-forte);
    overflow-y: auto;
  }
  .navigation.ouverte { display: block; }
  .principal { padding: 1.2rem 1rem 2.5rem; }
  .pastille-lien__nom { display: none; }
}

/* Les colonnes secondaires partent dès la tablette : à 768 px, les garder
   faisait défiler le cadre latéralement et les boutons d'action — « Régler »,
   « Copier », « Révoquer » — se retrouvaient hors de l'écran sans que rien ne
   le signale. */
@media (max-width: 860px) {
  .colonne-masquable { display: none; }
  /* Les marges intérieures se resserrent : sur six à huit colonnes, ce sont
     elles qui faisaient déborder le tableau de son cadre. */
  .tableau th, .tableau td { padding: .5rem .5rem; }
  /* Un intitulé sur deux lignes coûte moins cher qu'une colonne qui pousse
     les boutons d'action hors de l'écran. */
  .tableau th, .colonne-etroite { white-space: normal; }
  /* Un bouton au libellé long tient dans la largeur offerte, quitte à
     prendre deux lignes. */
  .bouton { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  /* Deux boutons dans la même cellule passent à la ligne plutôt que de
     pousser le tableau hors de son cadre. On ne touche PAS à `display` :
     un td en flex cesse d'être une cellule et impose la largeur de son
     contenu — c'est ce qui faisait sortir « Ouvrir » de l'écran. */
  .colonne-actions { white-space: normal; }
  .colonne-actions--large { width: auto; }
  /* Le statut se déduit du reste à payer : entre 621 et 860 px, la colonne
     coûte plus qu'elle n'apporte. En fiche, en dessous, elle revient. */
  .colonne-tablette { display: none; }
  /* Un champ de lien de partage ne doit pas imposer sa largeur à la ligne. */
  .lien-discret { max-width: 100%; min-width: 0; }
  /* Une adresse longue se coupe plutôt que de pousser la page. */
  dd, .entree__meta, .note { overflow-wrap: anywhere; }
}

@media (max-width: 720px) {
  .entree__nom { max-width: 24ch; }
  .champ-duo { grid-template-columns: 1fr; }
  .recherche input[type="search"], .recherche select { min-width: 0; flex: 1; }
  .entete-page { align-items: flex-start; }
  .lien-discret { display: none; }
}

/* ------------------------------------------------------------- Téléphone --
 *  En dessous de 620 px, la barre du haut ne tient plus : le nom de l'organisation, le
 *  nom de l'utilisateur et « Déconnexion » côte à côte faisaient 520 px et
 *  poussaient TOUTES les pages hors de l'écran. On garde le strict
 *  nécessaire : le menu, la marque, l'avatar.
 */
@media (max-width: 620px) {
  .barre { gap: .6rem; padding: 0 .7rem; }
  .marque { min-width: 0; }
  .marque__texte strong { font-size: .92rem; white-space: nowrap; }
  /* Le nom de l'organisation passe à la trappe : il est déjà en pied de page. */
  .marque__texte small { display: none; }
  .barre__droite { gap: .4rem; }
  /* « Déconnexion » vit dans le menu sur téléphone, pas dans la barre. */
  .barre__droite .bouton { display: none; }

  .principal { padding: 1rem .8rem 2.5rem; }
  .entete-page h1 { font-size: 1.45rem; }

  /* Le pouce a besoin de 44 px : c'est la recommandation d'Apple comme de
     Google, et la différence entre « ça marche » et « je n'arrive pas à
     cliquer ». */
  .bouton { min-height: 44px; padding: .7rem 1rem; }
  /* 38 px ne suffisait pas : dans une fiche, un bouton d'action est seul sur
     sa ligne, il peut prendre la hauteur recommandée. */
  .bouton--petit { min-height: 44px; }
  .actions-barre { flex-wrap: wrap; gap: .5rem; }
  .actions-barre > *, .actions-barre .bouton { flex: 1 1 auto; justify-content: center; }

  /* Les champs à 16 px au moins : en dessous, iOS zoome tout seul sur le
     champ au moment de la saisie, et ne redézoome jamais. Sélecteur aussi
     précis que celui du bloc général, sinon il ne l'emporterait pas. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="date"], select, textarea { font-size: 16px; }

  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .carte { padding: 1rem .9rem; }

  /* Un tableau ne se lit pas à 390 px : chaque ligne devient une fiche, et
     l'intitulé de chaque colonne passe devant sa valeur. C'est le seul moyen
     de tout garder sans rien couper.
     Les tableaux denses (les mois appelés, les versements) y passent aussi ;
     ceux qu'on veut garder en vraies colonnes portent .tableau--garde. */
  .tableau-cadre { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .tableau:not(.tableau--garde) { display: block; }
  .tableau:not(.tableau--garde) thead { display: none; }
  .tableau:not(.tableau--garde) tbody,
  .tableau:not(.tableau--garde) tr { display: block; }
  .tableau:not(.tableau--garde) tr {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: .7rem .85rem; margin-bottom: .7rem;
  }
  .tableau:not(.tableau--garde) tbody tr:hover { background: var(--bg); }
  .tableau:not(.tableau--garde) td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .8rem; padding: .22rem 0; border: 0; text-align: left;
    width: auto !important; white-space: normal;
    /* La valeur doit pouvoir passer à la ligne : un libellé de rôle un peu
       long poussait la fiche hors de l'écran sur un iPhone SE. */
    flex-wrap: wrap; min-width: 0;
  }
  .tableau:not(.tableau--garde) td .etat { white-space: normal; }
  /* L'intitulé vient de data-libelle, posé dans le HTML. Une cellule qui n'en
     a pas (la première colonne, les actions) s'affiche pleine largeur. */
  .tableau:not(.tableau--garde) td[data-libelle]::before {
    content: attr(data-libelle);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft); flex: 0 0 auto;
  }
  .tableau:not(.tableau--garde) td:first-child {
    display: block; font-weight: 600; margin-bottom: .35rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--filet);
  }
  .tableau:not(.tableau--garde) td.colonne-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: .4rem; margin-top: .5rem;
  }
  .tableau:not(.tableau--garde) td.colonne-masquable { display: none; }
  .tableau:not(.tableau--garde) td.colonne-tablette { display: flex; }
  .tableau:not(.tableau--garde) td.montant { justify-content: space-between; }
  .colonne-actions--large { width: auto; }
  .tableau .annulation[open] form { width: 100%; }

  /* Les tableaux gardés en colonnes — listes de fichiers — reprennent le
     cadre qui défile, et resserrent leurs marges. */
  .tableau--garde { font-size: .88rem; }
  .tableau--garde td, .tableau--garde th { padding: .55rem .5rem; }
  /* Plutôt que « Compte rendu - 21 ao… », le nom passe à la ligne. Deux
     lignes au plus : au-delà, la liste cesse d'être une liste. */
  .entree__nom {
    max-width: none; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tableau-cadre:has(.tableau--garde) {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--rayon); box-shadow: var(--ombre); overflow-x: auto;
  }

  /* Les listes de fichiers et de versements, elles, sont déjà en blocs. */
  /* « Appliquer à tous les utilisateurs » sortait de l'écran : un bouton tient
     désormais dans la largeur disponible, quitte à prendre deux lignes. */
  .bouton {
    max-width: 100%; white-space: normal; text-align: center;
    overflow-wrap: anywhere;
  }
  .ligne-actions { justify-content: flex-start; flex-wrap: wrap; }

  /* Une rangée de boutons dans une modale ou un formulaire : elle s'empile
     plutôt que de pousser la page hors de l'écran. */
  .ligne-boutons, .modale__actions { flex-wrap: wrap; }
  .ligne-boutons > *, .modale__actions > * { flex: 1 1 auto; }

  /* Le pied de page respire moins large. */
  .pied { text-align: left; }

  .navigation__mobile { display: block; margin-top: 1rem; }
  .navigation__mobile .navigation__sortie { display: block; }

  /* L'invitation à installer l'application sur l'écran d'accueil. */
  .invite-installer {
    position: fixed; left: .7rem; right: .7rem; bottom: .7rem; z-index: 70;
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .85rem 1rem;
    background: var(--fonce-plus); color: #fff;
    border-radius: var(--rayon); box-shadow: var(--ombre-forte);
    font-size: .88rem; line-height: 1.45;
  }
  .invite-installer p { margin: 0; flex: 1 1 12rem; }
  .invite-installer strong { display: block; }
  .invite-installer .bouton { min-height: 40px; }
  .invite-installer__fermer {
    background: none; border: 0; color: #B9C9E4; font-size: 1.4rem;
    line-height: 1; cursor: pointer; padding: .2rem .4rem; min-height: 40px;
  }
}

/* Application installée, en plein écran : il n'y a plus de barre de
   navigateur pour tenir compte de l'encoche et de la barre du bas. */
@media (display-mode: standalone) {
  .barre { padding-top: env(safe-area-inset-top); height: auto; min-height: var(--barre-h); }
  .principal { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .invite-installer { display: none; }
}

/* Écrans très étroits — un iPhone SE fait 320 px. */
@media (max-width: 400px) {
  .marque__texte strong { font-size: .86rem; }

  /* La liste de fichiers garde ses colonnes, et la case du lot en ajoute une :
     sur un iPhone SE, dix pixels de marges intérieures suffisaient à la faire
     déborder de son cadre. */
  .tableau--garde td, .tableau--garde th { padding: .55rem .3rem; }

  /* Deux boutons pleins côte à côte ne tiennent plus : ils se serrent, et
     passent l'un sous l'autre si le texte l'exige. */
  .bouton { padding: .7rem .8rem; min-width: 0; }
  .modale__actions, .ligne-boutons, .ligne-actions, .demande__actions {
    flex-wrap: wrap;
  }
  .modale__actions > *, .ligne-boutons > * { flex: 1 1 100%; }
}

/* --- Demandes d'inscription en attente ----------------------------------- */
.compteur {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 .35rem; margin-left: auto;
  border-radius: 10px;
  background: var(--alerte); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
}

.demandes {
  background: var(--bg); border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: var(--rayon); padding: 1.3rem; margin-bottom: 1.6rem;
  box-shadow: var(--ombre);
}
.demandes h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.demandes h2 .compteur { margin-left: 0; background: var(--accent); color: #3A2600; }
.demandes > .note { margin: 0 0 1.1rem; }

.demande {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0 .3rem;
}
.demande:first-of-type { border-top: 0; padding-top: .4rem; }
.demande__qui { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.demande__nom { margin: 0; font-weight: 700; color: var(--fonce); }
.demande__meta { margin: .1rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.demande__meta a { color: var(--primaire); }

.demande__mot {
  margin: 0 0 .9rem; padding: .6rem .9rem;
  background: var(--bg-soft); border-left: 3px solid var(--line-fort);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: .9rem; color: var(--ink-soft); font-style: italic;
}

.demande__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.demande__actions form { margin: 0; display: flex; gap: .4rem; align-items: center; }
.demande__valider select { width: auto; padding: .35rem .5rem; font-size: .84rem; }

@media (max-width: 620px) {
  .demande__actions, .demande__actions form { width: 100%; }
  .demande__actions .bouton { flex: 1; justify-content: center; }
}

/* --- Module de mise à jour ----------------------------------------------- */
.icone-maj { background: var(--succes); }

.grille-maj {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem; margin: 1.2rem 0;
}
.bloc-maj {
  text-align: center; padding: .9rem .6rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--rayon);
}
.bloc-maj__nombre {
  display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--fonce);
}
.bloc-maj__libelle {
  display: block; margin-top: .35rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}

.detail-maj {
  border: 1px solid var(--line); border-radius: var(--rayon);
  padding: .7rem .9rem; margin-bottom: 1rem; background: var(--bg-soft);
}
.detail-maj summary { cursor: pointer; font-weight: 600; color: var(--fonce); font-size: .92rem; }
.detail-maj h3 { font-size: .85rem; margin: .9rem 0 .4rem; }

.liste-fichiers {
  list-style: none; margin: 0; padding: 0;
  font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--ink-soft);
}
.liste-fichiers li { padding: .12rem 0; word-break: break-all; }
.liste-fichiers code { font-size: inherit; color: var(--fonce); }

.journal-maj { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.journal-maj li {
  padding: .35rem 0 .35rem 1.1rem; position: relative; border-bottom: 1px solid var(--line);
}
.journal-maj li::before {
  content: "→"; position: absolute; left: 0; color: var(--succes); font-weight: 700;
}
.journal-maj li:last-child { border-bottom: 0; }
.journal-maj li.echec { color: var(--alerte); }
.journal-maj li.echec::before { content: "×"; color: var(--alerte); }

.form-maj { margin-top: 1.2rem; }
.bloc-identifiants {
  border: 1px solid var(--line-fort); border-radius: var(--rayon);
  padding: 1rem; margin-bottom: 1rem;
}
.bloc-identifiants legend {
  font-size: .85rem; font-weight: 700; color: var(--fonce); padding: 0 .4rem;
}

/* Un groupe de cases sous un même intitulé (Réglages → Mots de passe) */
.champ-cases { border: 0; padding: 0; min-width: 0; }
.champ-cases legend { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; padding: 0; }
.champ-cases label { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .25rem 0; }
.champ-cases label input { width: auto; margin: 0; }
.champ-cases small { display: block; margin-top: .4rem; }

/* Liste de contrôles — partagée avec l'assistant d'installation */
.controles { list-style: none; margin: 0; padding: 0; }
.controles li {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .45rem .2rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.controles li:last-child { border-bottom: 0; }
.controles b { flex: 1 1 170px; font-weight: 600; color: var(--fonce); }
.controles span:not(.pastille-etat) { color: var(--ink-soft); font-size: .85rem; word-break: break-all; }

.pastille-etat {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: .7rem; font-weight: 700;
}
.pastille-etat.ok { background: var(--succes); }
.pastille-etat.attention { background: var(--accent); color: #3A2600; }
.pastille-etat.bloquant { background: var(--alerte); }

input[type="file"] {
  width: 100%; font-family: inherit; font-size: .9rem; padding: .5rem;
  border: 1px dashed var(--line-fort); border-radius: var(--rayon); background: var(--bg-soft);
}

/* --- Icône de l'entrée Courriel ------------------------------------------- */
.icone-courriel        { background: var(--alerte); }

/* Cases à cocher des formulaires d'administration (mises à jour comprises). */
.champ.form-field-checkbox { display: flex; align-items: center; flex-wrap: wrap; }
/* L'explication passe SOUS la case, et non à côté : en colonne étroite, elle
   écrasait sinon l'intitulé sur cinq lignes de deux mots. */
.champ.form-field-checkbox > small { flex: 1 0 100%; margin-top: .35rem; }
.champ.form-field-checkbox > label { flex: 1 1 auto; }
.champ.form-field-checkbox label {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-weight: 400; color: var(--ink);
}
.champ.form-field-checkbox input { width: auto; margin: 0; }

/* La case de réinitialisation porte une explication sous son intitulé : elle
   s'aligne en haut, sinon la case flotte au milieu du paragraphe. */
.bloc-reinit {
  padding: .8rem .9rem; margin-top: 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
}
.champ.form-field-checkbox.bloc-reinit { align-items: flex-start; }
/* Spécificité alignée sur la règle générale, sinon la case se centre sur les
   deux lignes de texte au lieu de se poser devant l'intitulé. */
.champ.form-field-checkbox.bloc-reinit label { align-items: flex-start; }
.bloc-reinit input { margin-top: .2rem; flex: 0 0 auto; }
.bloc-reinit strong { display: block; font-size: .92rem; color: var(--fonce); }
.bloc-reinit small { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .82rem; }

   des périodes a de quoi respirer, et la ligne visée se repère. */
/* `min-width` sur une cellule n'est pas honoré en table-layout auto : c'est
   le contenu qui impose sa largeur, donc on l'empêche de se couper. */
.lien-utilisateur { white-space: nowrap; }
.ligne-visee > td { background: var(--bg-deep); }
.ligne-visee > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Les chiffres de tête : appelé, encaissé, reste. */

.etat--gestionnaire   { background: #DFF5F6; color: #076068; }

/* Les tailles se lisent en colonne : chiffres de largeur fixe, à droite. */
.montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte--flottante {
  position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0;
  width: min(24rem, calc(100vw - 2.5rem));
  box-shadow: var(--ombre-forte);
}
/* Sous 960 px, le panneau ne flotte plus : ancré à gauche d'un bouton situé
   au milieu de la barre, il sortait de l'écran par la droite. Il se déplie
   donc sous la barre d'actions, sur toute sa largeur. */
@media (max-width: 960px) {
  .carte--flottante { position: static; width: 100%; margin-top: .6rem; }
}

/* Une ligne de tableau annulée : visible, mais manifestement hors jeu. */
.tableau tbody tr.annule { opacity: .6; }
.tableau tbody tr.annule .montant { text-decoration: line-through; }

.annulation { display: inline-block; }
/* Déplié, le panneau passe SOUS la ligne et l'occupe entière. Sans cela il
   s'installait à côté de « Reçu PDF », qui se retrouvait centré contre un
   bloc trois fois plus haut que lui. */
.annulation[open] { flex: 1 0 100%; text-align: left; margin-top: .3rem; }

/* Dans un tableau, il n'y a pas de ligne sur laquelle s'étaler. La colonne
   d'actions est donc réservée assez large d'avance : le panneau s'ouvre
   dessous, à l'intérieur du cadre, sans jamais pousser le tableau au-delà de
   sa carte — ce qui le ferait disparaître sous le bord. */
.colonne-actions--large { width: 17rem; }

/* Deux actions au bas d'un même formulaire : elles tiennent sur une ligne, et
   passent l'une sous l'autre quand la carte est trop étroite. */
.ligne-boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tableau .annulation { text-align: left; }
.tableau .annulation[open] { display: block; }
.tableau .annulation[open] form { white-space: normal; }
.annulation > summary {
  cursor: pointer; font-size: .82rem; color: var(--alerte);
  padding: .25rem .55rem; border-radius: var(--rayon);
}
.annulation > summary:hover { background: #FCE9F1; }
.annulation form {
  margin-top: .6rem; padding: .8rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--rayon);
}

/* Lien de texte simple, là où le nom cliquable doit rester lisible. */
.lien-utilisateur {
  color: var(--fonce); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lien-utilisateur:hover { color: var(--primaire); border-bottom-color: currentColor; }
.lien-texte { color: var(--primaire); font-size: .86rem; text-decoration: none; }
.lien-texte:hover { text-decoration: underline; }

/* Remarques en prose : la liste des fichiers est en chasse fixe, pas elles. */
.liste-remarques { margin: 0; padding-left: 1.1rem; }
.liste-remarques li { margin-bottom: .7rem; color: var(--ink); font-size: .92rem; }
.liste-remarques li:last-child { margin-bottom: 0; }

/* --- Import des utilisateurs --------------------------------------------------- */
.icone-import-utilisateurs { background: var(--attention); }

.bloc-commande {
  margin: .3rem 0 1rem; padding: .7rem .8rem;
  background: var(--fonce-plus); color: #E8EEF8;
  border-radius: var(--rayon);
  font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

.mdp-provisoire {
  font-family: ui-monospace, Consolas, monospace; font-size: .95rem;
  letter-spacing: .06em; padding: .15rem .4rem;
  background: var(--bg-deep); border-radius: 3px; color: var(--fonce-plus);
  /* Un mot de passe se recopie : sélectionner le mot entier d'un clic aide. */
  user-select: all;
}

/* Un lien d'activation est long : il tient sur plusieurs lignes plutôt que
   d'étirer le tableau au-delà de l'écran, et se sélectionne d'un clic. */
.lien-activation {
  display: inline-block; max-width: 34rem;
  font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
  padding: .2rem .4rem; line-height: 1.45;
  background: var(--bg-deep); border-radius: 3px; color: var(--fonce-plus);
  word-break: break-all; user-select: all;
}

textarea {
  width: 100%; min-height: 8rem; resize: vertical;
  font-family: ui-monospace, Consolas, monospace; font-size: .86rem;
}

.icone-roles { background: var(--mauve); }
.icone-acces { background: var(--clair); }
.icone-reglages { background: var(--ink-soft); }

/* --- Rôles et droits ------------------------------------------------------ */
.role { border-top: 1px solid var(--line); }
.role:first-of-type { border-top: 0; }
.role > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .85rem .2rem; cursor: pointer;
}
.role > summary:hover { background: var(--bg-soft); }
.role__nom { display: flex; align-items: center; gap: .6rem; }
.role__chiffres { font-size: .85rem; color: var(--ink-soft); }
/* `display:flex` sur le summary efface le triangle natif : on le redessine,
   sans quoi rien n'indique que la ligne se déplie. */
.role__chiffres::after {
  content: '\25BE'; display: inline-block; margin-left: .7rem;
  color: var(--primaire); transition: transform .15s ease;
}
.role[open] .role__chiffres::after { transform: rotate(180deg); }
.role__corps { padding: .4rem .2rem 1.4rem; }

.groupe-droits {
  margin: 1rem 0 0; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--rayon);
  background: var(--bg-soft);
}
.groupe-droits legend {
  padding: 0 .4rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--fonce);
}
.droit + .droit { margin-top: .7rem; }
.droit label {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0; font-weight: 400; color: var(--ink); cursor: pointer;
}
.droit input { width: auto; margin: .2rem 0 0; flex: none; }
.droit strong { display: block; font-size: .92rem; color: var(--ink); }
.droit small { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: .1rem; }

/* ------------------------------------------------------------------ ---- */
/*  Petites classes d'espacement et de mise en forme.                        */
/*                                                                           */
/*  Elles remplacent des attributs style= écrits dans les pages. La          */
/*  politique de sécurité du contenu posée par le vhost (style-src 'self')   */
/*  les refusait : la mise en page s'en trouvait abîmée, sans que rien ne    */
/*  le signale. Les valeurs sont reprises telles quelles, le rendu est       */
/*  inchangé.                                                                */
/* ------------------------------------------------------------------------ */
.mh-08 { margin-top: .8rem }
.mh-09 { margin-top: .9rem }
.mh-10 { margin-top: 1rem }
.mh-12 { margin-top: 1.2rem }
.mh-14 { margin-top: 1.4rem }
.mh-16 { margin-top: 1.6rem }
.mb-05 { margin-bottom: .5rem }
.mb-06 { margin-bottom: .6rem }
.mb-08 { margin-bottom: .8rem }
.mb-09 { margin-bottom: .9rem }
.mb-10 { margin-bottom: 1rem }
.mb-11 { margin-bottom: 1.1rem }
.mb-12 { margin-bottom: 1.2rem }
.mh-06-droite { margin-top: .6rem; text-align: right }
.centre { text-align: center }
.centre-remonte { text-align: center; margin-top: -.4rem }
.centre-mh-12 { text-align: center; margin-top: 1.2rem }
.centre-mh-14 { text-align: center; margin-top: 1.4rem }
.sous-titre-serre { margin: -0.7rem 0 1.2rem }
.bloc-aere { margin: .8rem 0 1.2rem }
.bloc-reglage { margin: 0 0 1.4rem }
.filet-separateur { margin: 1rem 0; border: 0; border-top: 1px solid var(--filet) }
.en-ligne { display: inline-block }
.ordre-premier { order: -1 }
.poids-normal { font-weight: 400 }
.poids-normal-couleur-heritee { font-weight: 400; color: inherit }
.police-arial { font-family: Arial, sans-serif }
.police-fixe { font-family: ui-monospace, Consolas, monospace }
.liste-serree { font-size: .92rem; padding-left: 1.2rem }
/* Pages de panne : elles ne passent pas par le gabarit commun. */
.page-brute { font-family: system-ui; padding: 3rem; max-width: 42rem; margin: auto }