/* ==========================================================================
   Habillage « Bitume ».

   Emprunté à la signalisation routière — le métier des apprenants, dans
   l'outil de ceux qui les forment. Trois décisions le résument :

   1. Un bandeau sombre permanent en haut de chaque écran. Il ancre la page
      et sépare nettement la navigation du travail, là où un bandeau clair
      se confondait avec le contenu.
   2. Une surface de travail claire, sur laquelle les cartes sont blanches.
      Le fond gris fait exister les surfaces sans qu'il faille des ombres.
   3. L'ambre ne sert qu'à signaler ce qui reste à faire. Il n'illustre
      rien, il ne décore rien : là où il apparaît, il y a une action.

   L'accent pétrole porte ce qui est cliquable, l'ambre ce qui attend. Deux
   rôles distincts, deux couleurs distinctes — les mélanger reviendrait à
   n'en avoir aucune.
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --fond: #f4f6f7;          /* la page */
  --fond-doux: #ffffff;     /* les cartes, les champs, les lignes marquées */
  --nuit: #1e262d;          /* le bandeau */

  /* Texte */
  --encre: #1b2228;
  --gris: #66717b;
  --sur-nuit: #eef1f4;      /* sur le bandeau */
  --gris-nuit: #9daab6;

  --bord: #dfe4e8;

  /* Ce qui est cliquable */
  --accent: #17627a;
  --sur-accent: #ffffff;

  /* Ce qui attend, ce qui va bien, ce qui a échoué */
  --signal: #d98324;
  --succes: #2f7d52;
  --alerte: #8a5210;
  --alerte-fond: #fdf6ec;
  --alerte-bord: #f0dcc0;
  --erreur: #a3232a;
  --erreur-fond: #fdf1f1;
}

body {
  margin: 0;
  padding: 2rem clamp(1rem, 5vw, 4rem);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--encre);
  /* Peint explicitement : sans cela, la page emprunte le fond du navigateur,
     qui n'est pas le même d'un thème à l'autre. */
  background: var(--fond);
}

main {
  max-width: 48rem;
  margin-inline: auto;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-block-end: 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin-block: 2rem 0.75rem;
}

.intro {
  color: var(--gris);
  margin-block-start: 0;
}

/* --- Formulaires ------------------------------------------------------- */
label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.25rem;
}

input[type="file"] {
  display: block;
  padding: 0.75rem;
  border: 1px dashed var(--bord);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  background: var(--fond-doux);
}

.aide,
.erreur {
  display: block;
  font-size: 0.9rem;
  margin-block-start: 0.35rem;
}

.aide {
  color: var(--gris);
}

.erreur {
  color: var(--erreur);
  font-weight: 600;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--sur-accent);
  cursor: pointer;
}

button + a {
  margin-inline-start: 1rem;
}

/* --- Restitution ------------------------------------------------------- */
.fiche {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.fiche dt {
  color: var(--gris);
}

.fiche dd {
  margin: 0;
}

.actions {
  padding-inline-start: 1.1rem;
}

.actions li {
  margin-block-end: 0.2rem;
}

.avertissement {
  padding: 0.85rem 1rem;
  border: 1px solid var(--alerte-bord);
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: 6px;
}

.messages {
  list-style: none;
  padding: 0;
}

.messages li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--fond-doux);
  margin-block-end: 0.5rem;
}

.messages li.error {
  border-color: var(--erreur);
  color: var(--erreur);
}

h3 {
  font-size: 1rem;
  margin-block: 1.75rem 0.5rem;
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin-block: 1.5rem;
}

.chiffres li {
  flex: 1 1 8rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--fond-doux);
  font-size: 0.9rem;
  color: var(--gris);
}

.chiffres strong {
  display: block;
  font-size: 1.6rem;
  color: var(--encre);
  line-height: 1.2;
}

.etat-complet {
  padding: 0.85rem 1rem;
  border: 1px solid var(--bord);
  background: var(--fond-doux);
  border-radius: 6px;
}

code {
  font-size: 0.9em;
  background: var(--fond-doux);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* --- Tableau des pièces du dossier ------------------------------------- */
.pieces {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.pieces th,
.pieces td {
  text-align: start;
  padding: 0.5rem 0.6rem;
  border-block-end: 1px solid var(--bord);
  vertical-align: top;
}

.pieces th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
}

.pieces .aide {
  display: inline;
  margin-inline-start: 0.4rem;
}

/* Le manque et l'attente se lisent d'abord au texte, la teinte ne fait que
   confirmer : une information portée par la seule couleur échappe à qui ne la
   distingue pas. */
/* Le repère se pose dans le gabarit, à côté du libellé : en pseudo-élément,
   il se collait à la fin de la cellule — donc derrière le signataire et les
   destinataires, où il se lisait comme leur suite. */
.marque-absente,
.marque-facultative {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-inline-start: 0.35rem;
}

.marque-absente {
  color: var(--erreur);
  border: 1px solid var(--erreur);
}

.marque-facultative {
  color: var(--gris);
  border: 1px solid var(--bord);
}

/* Une ligne qui appelle une action se teinte d'ambre, et le chiffre qui la
   motive prend la couleur du signal. C'est tout l'objet de cet habillage :
   en balayant l'écran, l'œil trouve d'abord ce qui reste à faire.

   La teinte ne porte jamais l'information seule — le texte le dit aussi,
   ligne par ligne. Elle ne fait que le trouver plus vite. */
.pieces tr.manquante,
.pieces tr.en-attente,
.pieces tr.epuisee {
  background: var(--alerte-fond);
}

.pieces tr.manquante strong,
.pieces tr.en-attente strong,
.pieces tr.epuisee strong {
  color: var(--alerte);
}

/* Un cran au-dessus de l'ambre, et volontairement rare. L'ambre dit « à
   faire » ; le rouge dit « plus rien ne se fera tout seul ». Si les deux se
   ressemblaient, le second n'apporterait rien — et s'il était fréquent, il
   cesserait d'alerter. */
.pieces tr.critique {
  background: var(--erreur-fond);
}

.pieces tr.critique strong,
.pieces tr.critique td:first-child {
  color: var(--erreur);
}

.pieces tr.critique td:first-child {
  font-weight: 600;
}

/* Des heures et des écarts se comparent en colonne : les chiffres doivent
   s'aligner, ce que les chiffres à chasse variable ne font pas. */
.pieces td {
  font-variant-numeric: tabular-nums;
}

/* Le mode sombre redéfinit **toutes** les variables, pas une partie.
   L'ancienne version en oubliait deux, et le défaut ne se voyait qu'à
   l'usage : `--sur-accent` restait blanc sur un accent devenu clair — du
   blanc sur du cyan, 1,7 pour 1 là où il en faut 4,5 — et `--erreur`
   gardait un rouge sombre invisible sur fond sombre.

   D'où la règle : une variable déclarée ici doit l'être pour les deux
   thèmes. Une palette à moitié inversée est pire qu'une palette unique. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #131a20;
    --fond-doux: #1c242c;
    --nuit: #0f151b;

    --encre: #e8eef4;
    --gris: #97a5b2;
    --sur-nuit: #e8eef4;
    --gris-nuit: #8b98a5;

    --bord: #2c353e;

    --accent: #5cbcd4;
    --sur-accent: #0b1f27;

    --signal: #e0a458;
    --succes: #6ec89a;
    --alerte: #e8b478;
    --alerte-fond: #2a2117;
    --alerte-bord: #45351f;
    --erreur: #f08a8f;
    --erreur-fond: #2b1719;
  }
}

.pieces .fichiers a {
  display: inline-block;
  margin-inline-end: 0.6rem;
}

.pieces form {
  display: inline;
}

.pieces .remplacer {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.85rem;
}

.pieces button {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

/* --- Zone de signature -------------------------------------------------- */
#zone-signature {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 3 / 1;
  border: 1px dashed var(--bord);
  border-radius: 6px;
  background: var(--sur-accent);
  touch-action: none;
  cursor: crosshair;
}

input[type="text"] {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  width: 100%;
  max-width: 30rem;
  box-sizing: border-box;
}

button.secondaire {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--bord);
}

a.bouton {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--sur-accent);
  text-decoration: none;
}

/* --- Coque de l'application -------------------------------------------- */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.5rem;
  padding: 0.9rem clamp(1rem, 5vw, 4rem);
  background: var(--nuit);
  margin: -2rem clamp(-4rem, -5vw, -1rem) 2rem;
}

/* Le nom du centre en capitales espacées : c'est une plaque, pas un titre.
   La graisse seule ne suffisait pas à le distinguer des liens voisins. */
.marque {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sur-nuit);
  text-decoration: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  flex: 1;
}

.menu a {
  color: var(--gris-nuit);
  text-decoration: none;
  font-size: 0.92rem;
  padding-block-end: 0.15rem;
  border-block-end: 2px solid transparent;
}

/* Le survol éclaircit le texte et pose un filet ambre. Sur fond sombre,
   changer la teinte du texte se voit mal ; le filet, lui, se voit. */
.menu a:hover,
.menu a:focus-visible {
  color: #ffffff;
  border-block-end-color: var(--signal);
}

.compte {
  font-size: 0.85rem;
  color: var(--sur-nuit);
  text-align: end;
}

.compte .role {
  display: block;
  font-size: 0.78rem;
  color: var(--gris-nuit);
}

/* --- Listes et cartes --------------------------------------------------- */
.titre-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.recherche {
  display: flex;
  gap: 0.5rem;
  margin-block: 1.25rem;
}

.recherche input {
  font: inherit;
  flex: 1;
  max-width: 26rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
}

.carte {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-block-end: 0.75rem;
}

.carte-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.inscriptions {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
}

.inscriptions li {
  padding-block: 0.2rem;
}

/* --- Formulaires guidés -------------------------------------------------- */
.formulaire {
  max-width: 34rem;
}

.champ {
  margin-block-end: 1rem;
}

.formulaire select,
.formulaire input[type="date"],
.formulaire input[type="number"],
.formulaire input[type="email"],
.formulaire input[type="text"] {
  font: inherit;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
}

/* --- Connexion ----------------------------------------------------------- */
/* Aucune coque autour : la personne n'est pas encore dans l'application, et
   une navigation qu'elle ne peut pas suivre ne ferait qu'encombrer. */
.accueil-connexion {
  max-width: 22rem;
  margin-block-start: clamp(2rem, 12vh, 6rem);
}

.marque-connexion {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-block-end: 1.5rem;
}

.accueil-connexion .formulaire {
  margin-block-start: 1.75rem;
}

.accueil-connexion input[type="password"],
.accueil-connexion input[type="text"] {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
}

.accueil-connexion button {
  width: 100%;
  padding-block: 0.7rem;
}

.accueil-connexion .aide {
  margin-block-start: 2rem;
}

/* --- Actions principales du tableau de bord ------------------------------ */
/* Trois portes plutôt qu'une liste de liens : la question « que voulez-vous
   faire ? » se répond mieux par des surfaces cliquables larges, où la phrase
   d'explication est aussi visible que le titre. */
.actions-principales {
  display: grid;
  gap: 0.75rem;
  /* Trois colonnes fixes tant que la place le permet : six portes forment
     alors deux rangées pleines, sans case vide au bout. Une grille trouée se
     lit comme une grille inachevée. */
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 46rem) {
  .actions-principales {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .actions-principales {
    grid-template-columns: 1fr;
  }
}

.action {
  /* Les portes d'une même rangée se terminent à la même hauteur, quel que
     soit le nombre de lignes de leur explication. */
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  text-decoration: none;
  color: var(--encre);
  background: var(--fond-doux);
}

.action:hover,
.action:focus-visible {
  border-color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}

.action-titre {
  display: block;
  font-weight: 600;
  color: var(--accent);
  margin-block-end: 0.35rem;
}

.action-detail {
  display: block;
  font-size: 0.9rem;
  color: var(--gris);
  line-height: 1.5;
}

/* --- Déconnexion --------------------------------------------------------- */
.deconnexion {
  display: inline;
}

/* Le bouton se tient dans le bandeau sombre : il ne peut pas hériter des
   couleurs de bouton du reste de la page, qui s'y perdraient. */
.deconnexion button {
  font: inherit;
  font-size: 0.78rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-nuit);
  text-decoration: underline;
  cursor: pointer;
}

.deconnexion button:hover,
.deconnexion button:focus-visible {
  color: var(--signal);
}

/* --- Département d'un apprenant ----------------------------------------- */
/* Un code à deux caractères se perd au milieu d'un nom : la pastille le
   rend repérable en balayant la liste, ce qui est justement son usage —
   savoir d'où vient la personne sans ouvrir sa fiche. */
.departement {
  display: inline-block;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--gris);
  background: var(--fond-doux);
}

.a-convoquer {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0;
  font-size: 0.92rem;
}

.a-convoquer li {
  padding-block: 0.1rem;
}

/* --- Onglets Clients ----------------------------------------------------- */
.onglets {
  display: flex;
  gap: 1.5rem;
  border-block-end: 1px solid var(--bord);
  margin-block: 1.25rem 0;
}

.onglets a {
  padding: 0.4rem 0.1rem;
  color: var(--gris);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}

.onglets a:hover {
  color: var(--accent);
}

.onglets a.actif {
  color: var(--accent);
  font-weight: 600;
  border-block-end-color: var(--accent);
}

.recherche select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
}

/* --- Étiquette client / prospect ----------------------------------------- */
/* Le prospect est volontairement plus discret que le client : c'est la
   distinction utile en balayant la liste, et deux couleurs vives côte à côte
   ne se distinguent plus. */
.etiquette {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--gris);
  background: var(--fond-doux);
  white-space: nowrap;
}

.etiquette-client {
  border-color: var(--accent);
  color: var(--sur-accent);
  background: var(--accent);
}

/* Une étiquette sur laquelle on clique : elle annonce qu'il reste quelque
   chose à faire, et elle emmène le faire. L'ocre plutôt que le rouge — c'est
   une échéance qui approche, pas une erreur commise. */
.etiquette-alerte {
  border-color: var(--alerte-bord);
  color: var(--alerte);
  background: var(--alerte-fond);
  font-weight: 600;
  text-decoration: none;
}

.etiquette-alerte:hover,
.etiquette-alerte:focus-visible {
  color: var(--sur-accent);
  background: var(--alerte);
  border-color: var(--alerte);
}

/* Une colonne de montants se compare de haut en bas : alignée à droite, en
   chiffres de largeur fixe, les unités tombent les unes sous les autres. */
.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Fiche d'identité en deux colonnes ----------------------------------- */
/* Un libellé à gauche, sa valeur à droite : ce qui se lit en diagonale quand
   on cherche un seul renseignement — le numéro de TVA, l'adresse. La colonne
   des libellés est fixe pour que les valeurs s'alignent d'une ligne à l'autre. */
.fiche-identite th[scope="row"] {
  width: 16rem;
  text-align: left;
  font-weight: 600;
  color: var(--gris);
}

.fiche-identite td .aide {
  display: block;
}

/* --- Suggestions d'adresse ----------------------------------------------- */
/* Le menu se superpose au formulaire au lieu de l'écarter : les champs qui
   suivent ne doivent pas sauter à chaque frappe. */
.champ-complete {
  position: relative;
}

.suggestions {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: 100%;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(28 37 48 / 12%);
}

.suggestions li {
  padding: 0.45rem 0.75rem;
  font-size: 0.92rem;
  color: var(--encre);
  cursor: pointer;
}

.suggestions li + li {
  border-block-start: 1px solid var(--bord);
}

.suggestions li.survolee {
  color: var(--sur-accent);
  background: var(--accent);
}

/* --- Aperçu d'un courriel avant envoi ------------------------------------ */
/* Le message se lit tel qu'il partira : même retours à la ligne, même
   largeur. Le reformater ici donnerait à relire autre chose que ce qui part. */
.apercu-courriel {
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--fond-doux);
  padding: 1rem 1.25rem;
  margin-block: 1.25rem;
}

.apercu-entete {
  margin: 0 0 0.75rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--bord);
}

.apercu-corps {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--encre);
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-block-start: 1rem;
}

/* --- Recherche SIRET ----------------------------------------------------- */
/* Le champ et son bouton sur la même ligne : chercher prolonge la saisie du
   SIRET, ce n'est pas une action séparée. */
.ligne-siret {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ligne-siret input {
  flex: 1;
  min-width: 12rem;
}

/* --- Actions sur une sélection de pièces --------------------------------- */
/* La barre se pose au-dessus des étapes qu'elle traverse, comme la signature
   d'entrée. Elle reste discrète : ce n'est pas le geste principal de l'écran,
   c'est celui qui évite seize allers-retours. */
.barre-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-block: 1.5rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--fond-doux);
}

.barre-lot .aide {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.barre-lot button {
  padding-block: 0.45rem;
  font-size: 0.9rem;
}

/* La colonne des cases reste étroite : elle n'a rien à annoncer. */
.pieces th.cocher,
.pieces td.cocher {
  width: 2.2rem;
  padding-inline-end: 0;
}

.pieces input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

/* --- Signature d'entrée en formation ------------------------------------- */
/* Le geste principal de l'écran : il se pose au-dessus des étapes, pas dans
   l'une d'elles, parce qu'il les traverse. */
.lot-entree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--fond-doux);
}

.lot-entree h2 {
  margin-block: 0 0.2rem;
  font-size: 1.05rem;
}

.lot-entree .aide {
  max-width: 42rem;
  margin: 0;
}

.lot-entree .bouton {
  flex: none;
}

/* --- Signature groupée --------------------------------------------------- */
.pieces-du-lot {
  margin-block: 0.75rem;
  padding-inline-start: 1.2rem;
}

.pieces-du-lot li {
  padding-block: 0.15rem;
}

/* --- Calendrier ---------------------------------------------------------- */
.calendrier {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-block: 1rem;
}

.calendrier th {
  text-align: start;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
  padding-block-end: 0.4rem;
}

.calendrier td {
  border: 1px solid var(--bord);
  vertical-align: top;
  height: 5.5rem;
  padding: 0.3rem;
}

/* Les cases des mois voisins gardent la grille alignée sans rien annoncer. */
.calendrier .hors-mois {
  background: var(--fond-doux);
  border-color: transparent;
}

.calendrier .aujourd-hui {
  border-color: var(--accent);
  border-width: 2px;
}

.numero-du-jour {
  display: block;
  font-size: 0.8rem;
  color: var(--gris);
  margin-block-end: 0.2rem;
}

.evenement {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0.15rem 0.3rem;
  margin-block-end: 0.15rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--sur-accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Une session sans séance saisie : elle a lieu, l'horaire reste inconnu. */
.evenement.sans-horaire {
  background: var(--fond-doux);
  color: var(--gris);
  border: 1px dashed var(--bord);
}

.navigation-mois {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

.navigation-mois a {
  color: var(--accent);
}

/* --- Actions d'une fiche ------------------------------------------------- */
.actions-fiche {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Les cases à cocher d'un choix multiple : une par ligne, cliquables en
   entier. La liste à sélection multiple qu'elles remplacent exigeait un
   Ctrl+clic que personne ne devine. */
.formulaire ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.formulaire ul li label {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.15rem;
}

/* --- Liens d'action dans un tableau -------------------------------------- */
/* « aide » est un bloc, et un bloc dans une cellule rompt l'alignement des
   colonnes. Ces liens-là restent en ligne. */
.lien-discret {
  font-size: 0.85rem;
  color: var(--gris);
  white-space: nowrap;
}

.lien-discret:hover {
  color: var(--accent);
}

/* Garde-fou : la même classe posée par erreur sur une cellule ne doit plus
   pouvoir casser un tableau. */
td.aide,
th.aide {
  display: table-cell;
}

/* --- Rappel des heures d'une session ------------------------------------- */
.chiffres-heures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin-block: 1rem;
}

.chiffres-heures li {
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  color: var(--gris);
  background: var(--fond-doux);
}

.chiffres-heures li strong {
  display: block;
  font-size: 1.1rem;
  color: var(--encre);
}

.chiffres-heures .incoherent {
  border-color: var(--alerte-bord);
  background: var(--alerte-fond);
}

/* --- Bandeau du fichier tout juste produit ------------------------------- */
.bandeau-produit {
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  background: var(--fond-doux);
  margin-block-end: 1.5rem;
}

.bandeau-produit a {
  color: var(--accent);
  font-weight: 600;
}

/* --- Écrire dans le calendrier ------------------------------------------- */
/* Le « + » ne se montre qu'au survol de la case : visible en permanence, il
   ferait soixante symboles sur la grille et noierait ce qui s'y passe. */
.ajout-seance {
  float: inline-end;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  padding-inline: 0.25rem;
  opacity: 0;
}

.calendrier td:hover .ajout-seance,
.ajout-seance:focus {
  opacity: 1;
}

/* --- Grille horaire : journée, semaine, jours ouvrés ---------------------- */
.grille-horaire {
  display: flex;
  border: 1px solid var(--bord);
  border-radius: 8px;
  overflow: hidden;
  margin-block: 1rem;
}

.colonne-heures {
  flex: 0 0 4.5rem;
  border-inline-end: 1px solid var(--bord);
  background: var(--fond-doux);
}

.colonne-jour {
  flex: 1;
  min-width: 0;
  border-inline-start: 1px solid var(--bord);
}

.colonne-jour:first-of-type {
  border-inline-start: 0;
}

.colonne-jour.aujourd-hui {
  background: var(--fond-doux);
}

.entete-jour {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gris);
  border-block-end: 1px solid var(--bord);
  text-transform: capitalize;
}

/* Les formations sans horaire saisi se rangent au-dessus de la grille, sur
   toute la journée. La hauteur vient de la tranche entière et non de chaque
   jour : les colonnes sont côte à côte, et les traits d'heures ne s'alignent
   que si toutes réservent la même place. */
.bandeau-libre {
  height: calc(var(--rubans, 1) * 1.35rem + 0.3rem);
  padding: 0.15rem 2px;
  border-block-end: 1px solid var(--bord);
  overflow: hidden;
}

.colonne-heures .bandeau-libre {
  display: flex;
  align-items: center;
  padding-inline: 0.4rem;
  font-size: 0.66rem;
  font-style: italic;
  line-height: 1.15;
  color: var(--gris);
}

/* Hauteur fixe : c'est elle qui donne son échelle à la journée, et les
   pourcentages des séances s'y rapportent. */
.grille-horaire .plage {
  position: relative;
  height: 34rem;
}

.graduation,
.trait-heure {
  height: calc(100% / var(--heures, 12));
  font-size: 0.72rem;
  color: var(--gris);
  padding-inline-start: 0.4rem;
  border-block-start: 1px solid var(--bord);
}

.graduation:first-child,
.trait-heure:first-child {
  border-block-start: 0;
}

/* Une séance se place au pourcentage près : deux séances qui se suivent se
   touchent exactement, sans trou ni chevauchement d'un pixel. */
.seance {
  position: absolute;
  inset-inline: 2px;
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.25;
}

.seance-horaires {
  display: block;
  font-style: italic;
  opacity: 0.85;
}

.seance-intitule {
  display: block;
  font-weight: 700;
}

.seance-intervenant {
  display: block;
  font-style: italic;
  opacity: 0.9;
}

.bascule-vues {
  display: flex;
  border: 1px solid var(--bord);
  border-radius: 6px;
  overflow: hidden;
}

.bascule-vues a {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  color: var(--gris);
  text-decoration: none;
  border-inline-start: 1px solid var(--bord);
}

.bascule-vues a:first-child {
  border-inline-start: 0;
}

.bascule-vues a.actif {
  background: var(--accent);
  color: var(--sur-accent);
}

/* Les blocs du mois reprennent la couleur du module : le même repère d'une
   vue à l'autre. */
.evenement {
  border: 1px solid transparent;
}

/* --- Tableau remis à une préfecture -------------------------------------- */
.tableau-prefecture {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1.5rem;
  margin-block-start: 1rem;
}

.entete-prefecture {
  border-block-end: 1px solid var(--bord);
  padding-block-end: 1rem;
  margin-block-end: 1.25rem;
}

.organisme-emetteur {
  font-size: 0.85rem;
  color: var(--gris);
  line-height: 1.5;
}

.entete-prefecture h2 {
  margin-block: 1rem 0.25rem;
}

.signature-prefecture {
  margin-block-start: 2rem;
  font-size: 0.9rem;
  text-align: end;
  line-height: 1.6;
}

.signature-prefecture p {
  margin: 0;
}

/* Le scan est posé entre la date et le nom, aligné à droite comme eux. Une
   hauteur bornée plutôt qu'une largeur : les cachets scannés arrivent dans
   des proportions très variables, et c'est la hauteur qui décide si le bloc
   tient au bas de la page ou en pousse une seconde. */
.cachet-organisme {
  display: block;
  margin-inline-start: auto;
  margin-block: 0.25rem;
  /* Assez grand pour que les mentions du cachet — adresse, SIRET, téléphone —
     restent lisibles une fois imprimées : c'est ce qu'un cachet sert à dire.
     Assez borné pour que le bloc ne pousse pas une seconde page. */
  max-height: 9rem;
  max-width: 22rem;
  object-fit: contain;
}

@media print {
  /* Sans cette règle, le navigateur allège les images pour économiser
     l'encre, et une signature bleue pâlit jusqu'à disparaître. */
  .cachet-organisme {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* À l'impression, le document doit tenir seul : ni navigation, ni boutons,
   ni cadre — la feuille en tient lieu. */
@media print {
  .entete,
  .sans-impression,
  .messages {
    display: none;
  }

  .tableau-prefecture {
    border: 0;
    padding: 0;
  }

  .pieces {
    font-size: 0.8rem;
  }

  main {
    max-width: none;
  }
}

/* --- Papier à en-tête d'un bilan ----------------------------------------- */
.papier-en-tete {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.logo-organisme {
  max-height: 4.5rem;
  max-width: 11rem;
  object-fit: contain;
}

.entete-prefecture h2 {
  color: var(--accent-organisme, var(--accent));
}

/* --- Camemberts ---------------------------------------------------------- */
.camemberts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block: 1.5rem;
}

.camembert {
  flex: 1 1 18rem;
  margin: 0;
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem;
}

.camembert figcaption {
  font-weight: 600;
  font-size: 0.9rem;
  margin-block-end: 0.75rem;
}

.camembert-corps {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.camembert svg {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 7.5rem;
}

.legende-camembert {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  min-width: 0;
}

.legende-camembert li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-block: 0.15rem;
}

.pastille {
  flex: 0 0 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
}

.legende-texte {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legende-valeur {
  color: var(--gris);
  white-space: nowrap;
}

@media print {
  /* Les aplats de couleur doivent survivre à l'impression : sans cette
     règle, le navigateur les vide pour économiser l'encre et le camembert
     part en blanc. */
  .camembert,
  .camembert svg path,
  .pastille {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- Avancement d'un dossier --------------------------------------------- */
.avancement {
  margin-block: 0.4rem 0.2rem;
  max-width: 22rem;
}

.barre-avancement {
  display: flex;
  gap: 2px;
}

/* Un cran par étape plutôt qu'une barre continue : on voit d'un coup combien
   d'étapes restent, ce qu'un pourcentage ne dit pas. */
.cran {
  flex: 1;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--bord);
}

.avancement-en-cours .cran.franchi {
  background: var(--accent);
}

.avancement-complet .cran {
  background: #2e7d4f;
}

.avancement-retard .cran.franchi {
  background: var(--erreur);
}

.avancement-annulee .cran {
  background: var(--bord);
}

.resume-avancement {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.avancement-complet .resume-avancement {
  color: #2e7d4f;
}

.avancement-retard .resume-avancement {
  color: var(--erreur);
}

.avancement-en-cours .resume-avancement,
.avancement-annulee .resume-avancement {
  color: var(--gris);
  font-weight: 400;
}

.resume-avancement .aide {
  display: inline;
  margin-inline-start: 0.5rem;
  font-weight: 400;
}

/* --- Bloc replié d'un formulaire ----------------------------------------- */
.bloc-deplie {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-block: 1rem;
}

.bloc-deplie legend {
  font-weight: 600;
  padding-inline: 0.4rem;
  color: var(--accent);
}

.bloc-deplie[hidden] {
  display: none;
}

/* --- Écran de réglages ---------------------------------------------------- */
/* Plus large que les formulaires de saisie : on y relit tout un paramétrage,
   pas une fiche. */
.formulaire-large {
  max-width: 46rem;
}

.formulaire-large .bloc-deplie {
  margin-block-end: 1.5rem;
}

.formulaire input[type="color"] {
  width: 4rem;
  height: 2.2rem;
  padding: 0.15rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: none;
}

.case-a-cocher {
  display: inline-flex;
  align-items: center;
}

/* Chercher quelqu'un depuis la page d'une session.
   La liste se pose au-dessus du reste sans le pousser : le tableau des
   inscrits ne doit pas sauter à chaque lettre tapée. */
.recherche-apprenant {
  position: relative;
  max-width: 34rem;
  margin-block: 0.75rem 1.5rem;
}

.recherche-apprenant label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-block-end: 0.35rem;
}

.recherche-apprenant input[type="search"] {
  width: 100%;
}

.propositions {
  position: absolute;
  inset-inline: 0;
  z-index: 5;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--fond-doux);
  border: 1px solid var(--bord);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
  overflow: hidden;
}

.propositions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-block-start: 1px solid var(--bord);
}

.propositions li:first-child {
  border-block-start: 0;
}

.propositions li:hover {
  background: var(--fond);
}

.propositions a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.propositions a:hover {
  text-decoration: underline;
}

.proposition-reperes,
.proposition-note,
.proposition-vide {
  font-size: 0.8rem;
  color: var(--gris);
}

/* Déjà inscrit : la ligne reste, mais elle dit pourquoi cliquer n'apporterait
   rien. La retirer ferait croire que la personne n'existe pas. */
.proposition-note {
  font-style: italic;
}

/* « .aide » impose display:block, ce qui l'emporte sur la règle « hidden »
   du navigateur : sans cela, l'indice des trois lettres resterait affiché
   sous la liste des propositions. */
.recherche-apprenant [hidden] {
  display: none !important;
}

/* La ligne « aucun nom » porte le lien de création : c'est la seule visible
   quand la liste recouvre le reste, et c'est là qu'on en a besoin. */
.proposition-vide {
  gap: 0.75rem;
}

.proposition-vide a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}