/* ==========================================================================
   Tableau de bord Vie scolaire — système visuel.

   Palette validée avec l'outil de contrôle de la bibliothèque dataviz :
   bande de clarté, plancher de chroma, séparation pour les daltonismes
   (protanopie, deutéranopie, tritanopie) et contraste sur le fond.

   Deux principes tiennent tout le reste :

   1. La couleur de statut ne porte JAMAIS le sens à elle seule. Chaque
      pastille associe une puce colorée, un libellé écrit et un fond teinté
      dont le texte respecte le contraste AA. C'est indispensable ici : un
      conseil de classe se tient à plusieurs, et un participant sur douze
      environ perçoit mal le rouge et le vert.
   2. Les couleurs de séries (bleu / rouge) désignent une identité —
      justifiée ou non — et ne sont jamais réutilisées pour un statut.
   ========================================================================== */

:root {
  /* --- Plans et encres ------------------------------------------------- */
  --plan: #f4f2fb;
  --surface: #ffffff;
  --surface-2: #f7f6fd;
  --encre: #0b0b0b;
  --encre-2: #52514e;
  --encre-3: #898781;
  --bordure: #e1e0d9;
  --bordure-forte: #c3c2b7;
  --anneau: rgba(11, 11, 11, .08);

  /* --- Séries (identité) ------------------------------------------------ */
  --serie-justifiee: #2a78d6;
  --serie-justifiee-clair: #9ec5f4;
  --serie-non-justifiee: #e34948;
  --serie-non-justifiee-clair: #f3b0af;

  /* --- Accent d'interface ----------------------------------------------
     Violet #4a3aa7 : slot 7 de la palette de référence de la bibliothèque
     dataviz. Contrôlé à l'outil contre le bleu de série « justifiée »
     (#2a78d6), qui vit sur les mêmes pages : ΔE OKLab 16,3 en vision
     normale, 16,0 protanope, 13,0 deutéranope — au-delà du plancher de 15
     et de la cible CVD de 8. Contrastes 8,3:1 sur la surface et 8,6:1 avec
     du texte blanc.

     Le violet vif #6c4fe0 du dégradé décoratif n'a PAS été retenu comme
     accent : à 3,9 de ΔE deutéranope du bleu de série, il s'y confondrait.
     Il ne sert donc que de fond de carte, où il n'encode aucune donnée et
     ne porte que du texte blanc (5,5:1). */
  --accent: #4a3aa7;
  --accent-fonce: #3a2d85;
  --accent-tres-clair: #efedfa;
  --accent-vif: #6c4fe0;
  --degrade-accent: linear-gradient(135deg, #6c4fe0 0%, #4a3aa7 100%);

  /* --- Statuts (feux tricolores) --------------------------------------- */
  --statut-bon: #0ca30c;
  --statut-bon-texte: #0a6b0a;
  --statut-bon-fond: #e6f5e6;
  --statut-vigilance: #fab219;
  --statut-vigilance-texte: #8a5a00;
  --statut-vigilance-fond: #fdf3dd;
  --statut-alerte: #d03b3b;
  --statut-alerte-texte: #9b2020;
  --statut-alerte-fond: #fbe6e6;

  /* --- Rampe séquentielle (carte de chaleur) --------------------------- */
  --chaleur-0: #f2f3f1;
  --chaleur-1: #cde2fb;
  --chaleur-2: #9ec5f4;
  --chaleur-3: #5598e7;
  --chaleur-4: #256abf;
  --chaleur-5: #104281;

  --rayon: 20px;
  --rayon-petit: 12px;
  --ombre: 0 1px 2px rgba(74,58,167,.04), 0 8px 24px -10px rgba(74,58,167,.16);
  --ombre-forte: 0 2px 6px rgba(74,58,167,.06), 0 16px 36px -12px rgba(74,58,167,.22);
  --barre-laterale: 84px;
  --transition: 180ms cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--plan);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 650; }
h3 { font-size: .95rem; }
a { color: var(--accent-fonce); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .5rem 1rem; z-index: 100;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }

.discret { color: var(--encre-2); font-size: .875rem; font-weight: 400; }

/* --- Animations ---------------------------------------------------------
   Discrètes et courtes : l'outil sert à préparer une réunion, pas à faire
   un spectacle. Tout est désactivé si le système demande moins d'animation. */
@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.anime { animation: apparition 420ms cubic-bezier(.22,.61,.36,1) backwards; }
.anime:nth-child(1) { animation-delay: 0ms; }
.anime:nth-child(2) { animation-delay: 40ms; }
.anime:nth-child(3) { animation-delay: 80ms; }
.anime:nth-child(4) { animation-delay: 120ms; }
.anime:nth-child(5) { animation-delay: 160ms; }
.anime:nth-child(6) { animation-delay: 200ms; }
.anime:nth-child(7) { animation-delay: 240ms; }
.anime:nth-child(8) { animation-delay: 280ms; }

/* --- Coque : barre latérale + colonne principale ------------------------
   Reprise du modèle fourni : rail d'icônes à gauche, contenu en cartes très
   arrondies sur un plan légèrement teinté. Chaque icône est doublée de son
   libellé écrit — un pictogramme seul ne se devine pas.
   ----------------------------------------------------------------------- */

.coque { display: flex; min-height: 100vh; align-items: stretch; }

.barre-laterale {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: var(--barre-laterale);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1rem .6rem;
  background: var(--degrade-accent);
  border-radius: 0 28px 28px 0;
  z-index: 20;
}

.barre-laterale .logo {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  margin-bottom: .9rem;
}

.onglet {
  display: grid;
  justify-items: center;
  gap: .15rem;
  width: 100%;
  padding: .55rem .2rem;
  border-radius: 16px;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  transition: background var(--transition), color var(--transition);
}

.onglet:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* L'onglet actif inverse le contraste : pastille claire, texte violet. */
.onglet.actif { background: var(--surface); color: var(--accent-fonce); }

.onglet-icone { display: block; width: 22px; height: 22px; }
.onglet-icone svg { width: 100%; height: 100%; display: block; }

.onglet-libelle {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.1;
}

.colonne-principale { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* --- Bandeau ------------------------------------------------------------ */
.bandeau {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.25rem 1.75rem .5rem;
  background: transparent;
}
.bandeau-titre { display: flex; flex-direction: column; gap: .1rem; }
.bandeau-titre strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.bandeau-sous-titre { font-size: .78rem; color: var(--encre-3); }
.bandeau-fichier {
  display: flex; align-items: center; gap: .6rem; margin-left: auto;
}
.puce {
  font-size: .75rem; font-weight: 600;
  background: var(--accent-tres-clair); color: var(--accent-fonce);
  padding: .3rem .7rem; border-radius: 999px;
}

/* --- Alertes ------------------------------------------------------------ */
.alertes { padding: 1rem 1.5rem 0; max-width: 1560px; margin: 0 auto; }
.alerte {
  margin: 0 0 .5rem; padding: .7rem 1rem;
  border-radius: var(--rayon-petit); border-left: 3px solid;
  font-size: .9rem; line-height: 1.45;
}
.alerte-attention { background: var(--statut-vigilance-fond); border-color: var(--statut-vigilance); color: var(--statut-vigilance-texte); }
.alerte-info { background: var(--accent-tres-clair); border-color: var(--accent); color: var(--accent-fonce); }
.alerte-succes { background: var(--statut-bon-fond); border-color: var(--statut-bon); color: var(--statut-bon-texte); }
.alerte-erreur { background: var(--statut-alerte-fond); border-color: var(--statut-alerte); color: var(--statut-alerte-texte); }

/* --- Structure ---------------------------------------------------------- */
main { padding: .5rem 1.75rem 2rem; max-width: 1560px; width: 100%; margin: 0 auto; flex: 1 0 auto; }
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
  min-width: 0;
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte:hover { box-shadow: var(--ombre-forte); }
.carte > h2 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* --- Tuiles d'indicateurs ----------------------------------------------- */
.indicateurs {
  display: grid; gap: .8rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.indicateur {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: .85rem 1rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.indicateur:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
/* Filet coloré : accent visuel qui redit le statut déjà écrit en toutes lettres. */
.indicateur::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent); opacity: .85;
}
.indicateur.rouge::before { background: var(--statut-alerte); }
.indicateur.orange::before { background: var(--statut-vigilance); }
.indicateur.vert::before { background: var(--statut-bon); }
.indicateur .valeur {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
}
.indicateur.rouge .valeur { color: var(--statut-alerte-texte); }
.indicateur.orange .valeur { color: var(--statut-vigilance-texte); }
.indicateur .etiquette {
  font-size: .75rem; color: var(--encre-2); margin-top: .15rem;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}

/* --- Formulaires -------------------------------------------------------- */
.filtres { display: grid; gap: .8rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
label { display: block; font-size: .78rem; font-weight: 650; margin-bottom: .25rem; color: var(--encre-2); }
input[type="text"], input[type="date"], input[type="number"], input[type="search"], select {
  width: 100%; padding: .5rem .65rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit);
  background: #fff; color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover { border-color: var(--accent); }
select[multiple] { min-height: 6rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, th button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.bouton, button {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .5rem .95rem; border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure-forte); background: #fff; color: var(--encre);
  text-decoration: none; display: inline-block;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover, button:hover { background: var(--accent-tres-clair); border-color: var(--accent); }
.bouton:active, button:active { transform: translateY(1px); }
.bouton-principal {
  background: linear-gradient(140deg, var(--accent), var(--accent-fonce));
  border-color: var(--accent-fonce); color: #fff;
  box-shadow: 0 2px 8px -3px rgba(42,120,214,.55);
}
.bouton-principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }

/* --- Tableaux ----------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }
table { width: 100%; border-collapse: collapse; font-size: .885rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--bordure); }
thead th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  border-bottom: 1px solid var(--bordure-forte); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--encre-3);
  white-space: nowrap; font-weight: 700; padding-top: .35rem; padding-bottom: .35rem;
}
thead th button {
  all: unset; cursor: pointer; font: inherit; display: flex; align-items: center; gap: .3rem;
}
thead th button::after { content: "↕"; opacity: .3; font-size: .9em; }
thead th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--accent); }
thead th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--accent); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.principal { font-weight: 600; }

/* Liseré de niveau sur la ligne, doublé par la pastille écrite en fin de ligne. */
tr.ligne-rouge td:first-child { box-shadow: inset 3px 0 0 var(--statut-alerte); }
tr.ligne-orange td:first-child { box-shadow: inset 3px 0 0 var(--statut-vigilance); }

/* --- Pastilles de statut ------------------------------------------------
   Puce + libellé + fond teinté : la couleur ne porte jamais seule le sens. */
.pastille {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  letter-spacing: .01em;
}
.pastille::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
.niveau-vert   { background: var(--statut-bon-fond);        color: var(--statut-bon-texte); }
.niveau-orange { background: var(--statut-vigilance-fond);  color: var(--statut-vigilance-texte); }
.niveau-rouge  { background: var(--statut-alerte-fond);     color: var(--statut-alerte-texte); }
.pastille.perlee { background: var(--accent-tres-clair); color: var(--accent-fonce); }

/* --- Graphiques --------------------------------------------------------- */
.graphique { position: relative; height: 280px; }
.graphique.haute { height: 340px; }
.graphique canvas { max-width: 100%; }

/* --- Carte de chaleur ---------------------------------------------------
   Élèves × semaines. Une absence perlée s'y voit d'un coup d'œil : des
   cases claires dispersées sur toute la ligne, là où un arrêt forme un bloc
   sombre contigu. Aucun autre graphique ne montre cette différence. */
.chaleur { display: grid; gap: 3px; font-size: .8rem; overflow-x: auto; }
.chaleur-ligne { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: .5rem; align-items: center; }
.chaleur-nom {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 550; font-size: .82rem;
}
.chaleur-nom a { text-decoration: none; color: var(--encre); }
.chaleur-nom a:hover { color: var(--accent-fonce); text-decoration: underline; }
.chaleur-cases { display: grid; gap: 3px; }
.chaleur-case {
  height: 26px; border-radius: 4px; background: var(--chaleur-0);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 650; color: transparent;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: default;
}
.chaleur-case[data-niveau="0"] { background: var(--chaleur-0); border-color: var(--bordure); }
.chaleur-case[data-niveau="1"] { background: var(--chaleur-1); color: var(--accent-fonce); }
.chaleur-case[data-niveau="2"] { background: var(--chaleur-2); color: #0d366b; }
.chaleur-case[data-niveau="3"] { background: var(--chaleur-3); color: #fff; }
.chaleur-case[data-niveau="4"] { background: var(--chaleur-4); color: #fff; }
.chaleur-case[data-niveau="5"] { background: var(--chaleur-5); color: #fff; }
.chaleur-case:hover { transform: scale(1.12); box-shadow: var(--ombre); z-index: 2; }
/* Semaine non exportée pour cette classe : une lacune n'est pas un zéro.
   Les hachures la distinguent d'une semaine réellement sans absence. */
.chaleur-case.chaleur-inconnue,
.chaleur-legende i.temoin-inconnue {
  background: repeating-linear-gradient(
    135deg, transparent, transparent 3px, var(--bordure) 3px, var(--bordure) 4px
  );
  border: 1px dashed var(--bordure-forte);
  color: var(--encre-3);
}
.chaleur-legende i.temoin-inconnue { width: 22px; height: 14px; }
.chaleur-entete { font-size: .68rem; color: var(--encre-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.chaleur-entete .chaleur-cases > span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chaleur-legende { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--encre-2); margin-top: .75rem; flex-wrap: wrap; }
.chaleur-legende i { width: 22px; height: 14px; border-radius: 3px; display: inline-block; }

/* --- Fichiers ----------------------------------------------------------- */
.liste-fichiers { list-style: none; padding: 0; margin: 0; }
.liste-fichiers li {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .65rem .25rem; border-bottom: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  transition: background var(--transition);
}
.liste-fichiers li:hover { background: var(--surface-2); }
.liste-fichiers li:last-child { border-bottom: none; }
.liste-fichiers .nom { font-weight: 600; flex: 1 1 260px; word-break: break-all; }
.depot {
  border: 2px dashed var(--bordure-forte); border-radius: var(--rayon);
  padding: 1.4rem; text-align: center; background: var(--surface-2);
  transition: border-color var(--transition), background var(--transition);
}
.depot:hover { border-color: var(--accent); background: var(--accent-tres-clair); }
.etiquette {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-tres-clair); color: var(--accent-fonce);
  padding: .12rem .45rem; border-radius: 5px;
}

/* --- Code --------------------------------------------------------------- */
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
pre.bloc {
  background: #1a1a19; color: #e8edf3; padding: .9rem 1rem; border-radius: var(--rayon-petit);
  overflow-x: auto; font-size: .82rem; line-height: 1.5;
}

/* --- Pied --------------------------------------------------------------- */
.pied {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--bordure);
  color: var(--encre-3); font-size: .78rem;
  max-width: 1560px; margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .indicateur:hover, .chaleur-case:hover { transform: none; }
}

/* Avertissements de lecture repliés : visibles, mais sur une ligne. Les
   déplier tous poussait le contenu sous la ligne de flottaison. */
.avertissements summary {
  cursor: pointer;
  font-weight: 400;
}

.avertissements ul {
  margin: .75rem 0 .5rem;
  padding-left: 1.1rem;
}

.avertissements li { margin-bottom: .4rem; }
.avertissements p { margin: .5rem 0 0; }

/* --- Fichiers groupés par classe ---------------------------------------- */

.discret-titre { color: var(--encre-3); font-weight: 500; }

.groupe-classe {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  background: var(--surface-2);
}

.groupe-titre {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .95rem; margin: 0 0 .6rem;
}

.badge-classe {
  background: var(--accent); color: #fff;
  padding: .2rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}

.badge-neutre { background: var(--encre-3); }

.ligne-fichier {
  display: flex; align-items: center; gap: .6rem;
  flex: 1 1 320px; font-weight: 400; margin: 0;
}

.choix-classe {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(120px, 1fr);
  gap: .5rem; align-items: center;
  margin: .75rem 0 .5rem;
}

.choix-classe label { margin: 0; font-size: .8rem; font-weight: 600; color: var(--encre-2); }

@media (max-width: 620px) {
  .choix-classe { grid-template-columns: 1fr; }
}

/* Action irréversible : elle doit se distinguer du reste au premier regard,
   et le libellé écrit dit ce qu'elle fait — la couleur ne suffit pas. */
.bouton-danger {
  border-color: var(--statut-alerte);
  color: var(--statut-alerte-texte);
  background: var(--statut-alerte-fond);
}

.bouton-danger:hover {
  background: var(--statut-alerte);
  color: #fff;
  border-color: var(--statut-alerte);
}

/* --- Session ------------------------------------------------------------- */

.bloc-session { display: flex; align-items: center; gap: .6rem; margin: 0; }

.bouton-discret {
  background: transparent;
  border: 1px solid var(--bordure-forte);
  color: var(--encre-2);
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
}

.bouton-discret:hover { background: var(--accent-tres-clair); color: var(--accent-fonce); border-color: var(--accent); }

/* --- Écran de confirmation ---------------------------------------------- */

.carte-confirmation { max-width: 760px; margin: 2rem auto; }
.carte-confirmation h1 { margin-bottom: 1rem; }
.carte-confirmation .liste-fichiers { margin: 1.25rem 0; }
.carte-confirmation .actions { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* --- Formulaires en colonne (comptes, mot de passe) ---------------------- */

.formulaire-vertical { display: grid; gap: .2rem; max-width: 34rem; }

.formulaire-vertical label {
  font-size: .8rem; font-weight: 600; color: var(--encre-2); margin-top: .7rem;
}

.formulaire-vertical input[type="text"],
.formulaire-vertical input[type="password"] {
  width: 100%; padding: .6rem .8rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--encre);
}

.formulaire-vertical input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.formulaire-vertical .aide { margin: .25rem 0 0; }
.formulaire-vertical button { margin-top: 1.1rem; justify-self: start; }

.actions-ligne { display: flex; gap: .4rem; flex-wrap: wrap; }
.actions-ligne form { margin: 0; }