/* ============================================================================
   AVENIR ADOM — Plateforme
   Reprise de _intranet/style.css : mêmes variables, même bandeau, même
   vocabulaire visuel. L'équipe ne doit pas avoir l'impression de changer
   d'outil en passant de l'intranet à la plateforme.
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette du site public, reprise à l'identique de l'intranet. */
  --color-bg:           #f6f7f9;
  --color-text:         #1e293b;
  --color-text-muted:   #5c6875;
  --color-border:       #d9dee7;
  --color-white:        #ffffff;

  --color-primary:      #1e293b;   /* bleu nuit */
  --color-primary-2:    #2c3e50;   /* bleu ardoise */
  --color-accent:       #fbbf24;   /* or */

  --color-accent-soft:  rgba(251, 191, 36, 0.14);
  /* Deux crans plus pâle que ``accent-soft`` : de quoi détacher un bloc sans
     lui donner l'allure d'un avis. Même teinte, autre intensité. */
  --color-exergue:      rgba(251, 191, 36, 0.07);
  --color-exergue-bord: rgba(251, 191, 36, 0.35);

  --color-header-bg:    #2c3e50;
  --color-header-text:  #fbbf24;

  /* Les trois teintes d'état, qui traînaient en clair dans le corps de la
     feuille. ``--color-danger`` était même appelée sans avoir jamais été
     déclarée, par ``var(--color-danger, #c0392b)`` : c'est la valeur de repli
     qui s'appliquait, toujours, et la variable n'existait que dans l'intention.
     Une couleur employée à un seul endroit devient une palette parallèle, qui
     dérive au premier changement de charte. */
  --color-danger:       #c0392b;   /* rouge du retard */
  --color-danger-fort:  #96281b;   /* le même, assez sombre pour du texte */
  --color-succes:       #2e7d32;   /* vert de la pièce reçue */
  --color-accent-fort:  #f0a90c;   /* l'or au survol */

  --color-danger-doux:  rgba(192, 57, 43, 0.12);
  --color-succes-doux:  rgba(46, 125, 50, 0.04);

  /* Le feu tricolore du kiosque de l'enquête, décision de la direction du
     23 septembre 2026 (format A du benchmark). Cinq teintes, une par cran,
     du vert foncé au rouge brique, le gris pour « je ne sais pas » : c'est
     le code des bornes de satisfaction que le public a rencontré à l'hôpital
     et en pharmacie. Chaque teinte est assez sombre pour porter du texte
     blanc (4,5:1 au moins), et chaque fond « doux » assez pâle pour du texte
     noir. Elles ne servent qu'au périmètre ``.kiosque-`` : le reste de la
     plateforme garde ses trois teintes d'état. */
  --color-kiosque-tres:       #166534;
  --color-kiosque-tres-doux:  #dcfce7;
  --color-kiosque-oui:        #2e7d32;
  --color-kiosque-oui-doux:   #e8f5e9;
  --color-kiosque-peu:        #c2410c;
  --color-kiosque-peu-doux:   #ffedd5;
  --color-kiosque-non:        #991b1b;
  --color-kiosque-non-doux:   #fee2e2;
  --color-kiosque-sans:       #4b5563;
  --color-kiosque-sans-doux:  #e5e7eb;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  /* Le repli d'abord, l'unité qui suit la barre du navigateur ensuite : sur un
     téléphone, 100vh dépasse l'écran visible tant que la barre d'adresse est
     déployée, et le pied de page se retrouve sous elle. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { text-decoration: none; color: inherit; }

/* Un lien en prose se voit sans qu'on passe la souris dessus. La feuille
   retire le soulignement à tous les liens, et les tuiles, boutons et onglets
   n'en veulent pas ; mais « Retirer les filtres » dans un paragraphe, ou un
   nom de partenaire dans une cellule, ne se distinguaient plus du texte. Les
   liens qui ont le dessin d'un bouton sont écartés par leur classe. */
:is(.main p, .tableau, .avis, .indice)
  a:not(.bouton, .ouvrir, .poser, .trajet, .a-faire-tout, .personne, .filtre, .depot-choix) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
:is(.main p, .tableau, .avis, .indice)
  a:not(.bouton, .ouvrir, .poser, .trajet, .a-faire-tout, .personne, .filtre, .depot-choix):hover {
  text-decoration-thickness: 2px;
  color: var(--color-primary-2);
}

/* Au doigt, la temporisation du double-toucher fait attendre trois cents
   millisecondes avant chaque geste : elle ne sert qu'au zoom, dont aucune de
   ces commandes n'a besoin. */
.bouton, .tuile, .onglet, .poser, .ouvrir, .trajet, .fleche, .vue, .personne, .depot-choix {
  touch-action: manipulation;
}

/* Quand le système demande moins de mouvement, rien ne glisse ni ne tourne :
   la tuile ne se soulève pas au survol, le chevron du repli bascule sans
   transition. */
@media (prefers-reduced-motion: reduce) {
  .tuile, .bloc--repli > summary::after { transition: none; }
  .tuile:hover { transform: none; }
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Bandeau ──────────────────────────────────────────────────────────────── */

.header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: 0.7rem 1.5rem;
  border-bottom: 3px solid var(--color-accent);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.header-logo-link { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.header-logo-link:hover { opacity: 0.9; }

.header-mark { height: 38px; width: auto; display: block; flex-shrink: 0; }

.header-brand { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.header-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-accent);
  text-transform: uppercase;
}

.header-slogan {
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 600;
  line-height: 1.3;
}

.header-nav { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }

.header-user { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.header-user strong { font-weight: 600; color: var(--color-accent); }

/* La déconnexion est un bouton de formulaire (``POST``), habillé comme le
   lien qu'il remplace : sans fond ni bordure, dans la police du bandeau. */
.header-nav-form { margin: 0; }
.header-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* La règle sert au bouton de déconnexion et au lien vers l'aide, côte à côte
     dans le bandeau : sans cette ligne, seul le second serait souligné, et deux
     éléments de même rang n'auraient pas la même allure. */
  text-decoration: none;
}
.header-nav-btn:hover { opacity: 0.75; }
.header-nav-btn .glyphe { font-size: 1.2rem; line-height: 1; }

/* ── Barre d'onglets ──────────────────────────────────────────────────────── */
/*
   L'accueil n'est pas un onglet : c'est la maison, à gauche, séparée par un
   filet. La position porte la décision — dans la barre, elle serait un
   quatrième onglet ; en dehors, elle dit qu'on y retourne sans y naviguer.
*/

.onglets {
  background-color: var(--color-white);
  padding: 0 1.5rem;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
  /* La barre défile dans son propre axe, à toute largeur : le débordement
     était muet, et c'est la page entière qui glissait sur un téléphone. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.accueil {
  display: flex;
  align-items: center;
  padding-right: 1.1rem;
  margin-right: 1.1rem;
  border-right: 1px solid var(--color-border);
  position: relative;
  color: var(--color-primary-2);
  font-size: 1.25rem;
}

.accueil-compteur {
  position: absolute;
  top: 0.85rem;
  right: 0.55rem;
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 999px;
}

/* Le compteur ordinaire d'un écran : « 12 structures au répertoire », dans le
   flux, à côté de ses voisins. Il n'a rien à voir avec la pastille d'accueil,
   qui est positionnée en absolu sur le pictogramme de la maison : réemployer
   celle-ci pour un paragraphe l'expédiait en haut à droite de son bloc, par-
   dessus le texte, et cinq écrans le faisaient. */
.compteur {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-accent-soft);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

.onglet {
  padding: 0.8rem 1.1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.onglet:hover { color: var(--color-text); }
.onglet--actif {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary-2);
}

/* ── Contenu ──────────────────────────────────────────────────────────────── */

.main { flex: 1; max-width: 1400px; margin: 0 auto; padding: 1.8rem 2rem 2.2rem; width: 100%; }

.pole-titre {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 1.4rem 0 0.9rem;
}
.pole-titre:first-child { margin-top: 0; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 1rem;
}

/* ── La grille des pôles, et la largeur de la barre de recherche ────────────

   Correction de la direction du 26 septembre 2026 : « pour que ce soit joli,
   la barre de recherche doit avoir la même largeur que les tuiles. »

   ``auto-fill`` crée autant de colonnes que la largeur en porte, même vides :
   sur un écran large, six pistes de 186 px pour quatre tuiles, qui
   s'arrêtaient donc bien avant le bord. La barre, elle, prend toute la
   largeur du bloc. Les deux ne pouvaient pas s'aligner.

   Quatre colonnes fixes les alignent, et donnent à chaque pôle des tuiles de
   même taille quel que soit le nombre qu'il en porte : un pôle de trois
   laisse une case vide plutôt que d'étirer ses trois tuiles, ce que
   ``auto-fit`` aurait fait. Les tuiles y gagnent en cible tactile.

   Le simulateur garde ``.grille`` telle quelle : ses cartouches sont des
   chiffres, pas une navigation. */
.grille--poles {
  /* Chaque piste vaut au moins un quart de la largeur, gouttières comprises :
     il ne peut donc pas y en avoir cinq, et les quatre tuiles d'un pôle
     touchent les deux bords. Au moins 186 px aussi : sous cette largeur, la
     grille retombe d'elle-même à trois, deux, puis une colonne, exactement
     comme avant. Une valeur fixe aurait imposé quatre colonnes de 80 px sur
     un téléphone. */
  grid-template-columns: repeat(auto-fill, minmax(max(186px, (100% - 3rem) / 4), 1fr));
}

/* ── Tuiles ───────────────────────────────────────────────────────────────── */
/*
   Toutes pleines, toutes identiques : il n'y a pas deux natures de tuile sur
   cet onglet. Chacune ouvre un dépôt, un formulaire ou un outil.
*/

.tuile {
  background-color: var(--color-primary-2);
  border: 1px solid var(--color-primary-2);
  border-radius: 12px;
  padding: 1.4rem 1rem;
  text-align: center;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tuile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.18);
  border-color: var(--color-accent);
}

.tuile--inactive { opacity: 0.55; cursor: not-allowed; }
.tuile--inactive:hover { transform: none; box-shadow: none; border-color: var(--color-primary-2); }

.tuile-icone { font-size: 2rem; line-height: 1; margin-bottom: 0.55rem; color: var(--color-accent); }
.tuile-libelle { font-size: 0.9rem; font-weight: 500; line-height: 1.3; }

.tuile-statut {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-top: 0.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--color-accent-soft);
  font-weight: 600;
}

/* ── Pied ─────────────────────────────────────────────────────────────────── */

.footer {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ── Bandeau de recette ───────────────────────────────────────────────────── */
/*
   Visible uniquement hors production. Il doit être impossible de confondre un
   écran de recette avec l'écran réel : c'est ce qui évite de saisir une vraie
   réclamation dans un jeu de test.
*/

/* ── La rubrique Aide ───────────────────────────────────────────────────────

   Une capture dans un mode d'emploi n'est pas une illustration décorative :
   c'est ce que la personne en formation compare à son propre écran. Elle
   occupe donc toute la largeur du bloc, sans être agrandie au-delà de sa
   taille réelle, et porte sa légende dessous. */
.capture { margin: 1rem 0 1.5rem; }
.capture img {
  width: 100%;
  height: auto;
  /* **Bornée en hauteur, et cadrée par le haut.** Une capture d'un écran long
     affichée à la largeur du bloc atteignait trois mille pixels : elle
     chassait le texte qui l'explique, et la page entière passait à quatorze
     mille. Le haut est ce qu'on reconnaît, et le lien ouvre l'image entière. */
  max-height: 30rem;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
}
.capture figcaption { margin-top: 0.4rem; }

/* Les réponses de la foire aux questions, repliées. Dépliée en entier, elle
   est un mur de texte où l'on ne trouve pas la sienne ; repliée, elle se
   parcourt à la question, qui est ce qu'on reconnaît. */
.repli {
  border-top: 1px solid var(--color-border);
  padding: 0.6rem 0;
}
.repli > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}
.repli > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.repli > p { margin: 0.6rem 0 0; }

/* Le bandeau de la base pilote, sur tous les écrans et pour tout le monde.

   Il ne reprend pas l'or du bandeau de recette, qui parle de bascule de profil
   et n'apparaît qu'à la direction : deux messages différents, deux couleurs.
   Celui-ci se lit d'un coup d'œil sans crier, parce qu'il reste affiché toute
   la journée et qu'un bandeau qui crie finit par ne plus être vu. */
.bandeau-pilote {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.4rem 1.5rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Le lien de remise à zéro, poussé au bout du bandeau. Discret : on le cherche
   quand on en a besoin, il ne doit pas concurrencer la phrase qui dit que rien
   n'est réel.

   **Souligné, et le sélecteur porte la même exclusion que les liens en prose.**
   Le bandeau est une bande de couleur : sans le trait, le lien ne se
   distinguerait de la phrase que par sa graisse, or l'information ne se porte
   jamais par la seule couleur (§ 7.9). Et il s'écrit ainsi, plutôt qu'en
   visant une classe, parce que la charte veut qu'une règle de soulignement
   écarte les liens qui ont le dessin d'un bouton : un bouton posé demain dans
   ce bandeau ne doit pas hériter du trait. */
.bandeau-pilote a:not(.bouton, .ouvrir, .poser) {
  margin-left: auto;
  white-space: nowrap;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bandeau-pilote strong { letter-spacing: 0.04em; text-transform: uppercase; }

.recette {
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 1.5rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}
.recette a { text-decoration: underline; }
/* La mention qui rappelle qu'on regarde par-dessus l'épaule de quelqu'un.
   Détachée du reste du bandeau : sans elle, on oublie qu'on n'est pas soi. */
.recette-bascule {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-weight: 500;
  font-style: italic;
}
.recette a[aria-current="page"] { text-decoration: none; opacity: 0.6; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Le lien d'évitement reprend une taille normale dès qu'il a le focus : posé
   en haut à gauche, par-dessus le bandeau, en or sur bleu comme le reste des
   commandes. Il est le premier élément que le clavier atteint. */
.sr-only--focusable:focus {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 100;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Agenda : le bandeau « à faire » ─────────────────────────────────────── */
/*
   En tête, et visuellement distinct du fil. Ce n'est pas une marge : c'est ce
   qui empêche une obligation due ou une action corrective de n'exister nulle
   part, faute d'avoir une heure.
*/

.a-faire {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.2rem 1.2rem;
  margin-bottom: 2rem;
}

.a-faire-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.a-faire-titre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.a-faire-resume { font-size: 0.85rem; color: var(--color-text-muted); }
.a-faire-rien { font-size: 0.9rem; color: var(--color-text-muted); }

.a-faire-liste { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.afaire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg);
}

/* Le retard se signale par l'or, seule couleur d'accent de la charte, et par
   un filet plein à gauche. Pas de rouge : la charte n'en comporte pas, et un
   bandeau où tout crie ne se lit plus. */
.afaire--en_retard {
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-soft);
}
.afaire--aujourd_hui { border-left: 4px solid var(--color-primary-2); }
/* Une ligne au-delà de la semaine complète la tête sans se faire passer pour
   une urgence : la date en gris, et rien d'autre ne change. */
.afaire--plus_tard .echeance-texte { color: var(--color-text-muted); }

.afaire-corps { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.afaire-libelle { font-size: 0.92rem; font-weight: 500; }
.afaire-sujet { font-size: 0.85rem; color: var(--color-text-muted); }
.afaire-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.afaire-echeance { display: flex; align-items: center; gap: 0.8rem; }

/* Une ligne de liste dont **tout** se clique, et pas seulement le libellé.
   « S'il y a une liste, l'utilisateur doit pouvoir y cliquer et en faire
   quelque chose » (direction, 27 septembre 2026) : viser quatre caractères au
   bout d'une ligne de trois lignes n'est pas un geste, et c'est la leçon déjà
   tirée pour la fiche d'un critère au Pilotage Qualité (§ 25.7).

   **Ce n'est pas ``.resultat-lien``**, qui vit dans un ``.resultat`` en
   colonne : posée sur un ``.afaire``, qui est une ligne, elle rendait des
   liens de quatre cents pixels de haut dont le centre ne recevait plus le
   clic. Une classe qui décrit une mise en page se lit avec son parent.

   Les marges négatives étendent la zone cliquable jusqu'aux bords de la
   ligne : sans elles, la bande de padding du ``li`` reste morte, et l'on
   clique à côté sans comprendre pourquoi rien ne s'ouvre. */
.afaire-lien {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: -0.7rem -0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.afaire-lien:hover, .afaire-lien:focus-visible {
  background-color: var(--color-accent-soft);
}
.afaire-lien .afaire-libelle { color: var(--color-primary); font-weight: 600; }
.echeance-texte { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }

.jeton {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background-color: rgba(30, 41, 59, 0.08);
  color: var(--color-text-muted);
  /* Des chiffres à largeur fixe : « 12 min » et « 45 min » s'alignent d'une
     ligne à l'autre, et l'œil compare sans relire. */
  font-variant-numeric: tabular-nums;
  /* Un jeton coupé sur deux lignes cesse d'être un jeton. */
  white-space: nowrap;
}
.jeton--reglementaire { background-color: var(--color-primary-2); color: var(--color-white); }
/* Une saisie interrompue dans un outil, à reprendre : l'or de l'accent, parce
   que c'est la seule chose à faire sur cette ligne. */
.jeton--brouillon { background-color: var(--color-accent-soft); color: var(--color-primary); font-weight: 600; }
.outil-brouillon { color: var(--color-primary); font-weight: 600; }
.avis--outil .avis-actions { margin-top: 0.5rem; }
.jeton--libre { background-color: var(--color-accent-soft); color: var(--color-primary); }
/* La nature de la tâche (§ 100) : cerclée et non pleine, pour qu'elle se lise
   comme un classement et ne se confonde ni avec « réglementaire » ni avec un
   état à traiter. */
.jeton--nature { background-color: transparent; border: 1px solid var(--color-primary-2); color: var(--color-primary); }

.poser, .ouvrir {
  display: inline-block;
  background-color: var(--color-primary-2);
  color: var(--color-white);
  border: 0;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font: 500 0.8rem inherit;
  cursor: pointer;
  white-space: nowrap;
}
.poser:hover, .ouvrir:hover { background-color: var(--color-primary); }

/* L'itinéraire est un geste à part, jamais celui qui referme la ligne : l'or
   de l'accent le distingue de « Ouvrir »/« Poser un créneau », qui restent au
   bleu ardoise habituel des actions de l'agenda. */
.trajet {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: 0;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font: 600 0.8rem inherit;
  cursor: pointer;
  white-space: nowrap;
}
.trajet:hover { background-color: var(--color-accent-fort); }

/* Réduit à son icône dans le bloc compact. Le carré fait 2.25rem, soit 36 px,
   et non les 28 px d'un bouton de texte : une cible tapée au doigt sur une
   tablette en intervention n'a pas droit à l'à-peu-près. */
.trajet--icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.05rem;
}

/* ── Le pied du bloc compact ──────────────────────────────────────────────── */
/*
   Il mène à la liste complète, et il y mène toujours : le bandeau s'arrête à
   sept jours et ne porte ni les pièces à déposer ni ce qui est déjà planifié.
   Discret mais jamais caché, c'est la seule porte vers le reste.
*/
.a-faire-pied { margin-top: 0.9rem; }

.a-faire-tout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary-2);
  padding: 0.35rem 0;
}
.a-faire-tout:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Agenda : le fil des activités datées ────────────────────────────────── */

/* Même règle qu'au titre de période : la majuscule ne porte que sur la
   première lettre, les jours et les mois restant en minuscules. */
.fil-titre::first-letter { text-transform: uppercase; }

.fil-titre {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}
.fil-titre strong { color: var(--color-primary); }

/*
   Deux journées côte à côte. ``minmax(0, 1fr)`` et non ``1fr``, pour la même
   raison que la grille du mois : sans lui, une carte au libellé long réclame
   plus que la moitié et écrase l'autre colonne.
*/
.fil-deux-jours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.fil-liste { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

/* Une activité réalisée s'efface, mais elle porte aussi son intitulé : la
   teinte seule se perd à l'impression en noir et blanc, et une part du public
   de ce service est malvoyante. */
.creneau--realisee .creneau-carte,
.creneau--non_realisee .creneau-carte {
  border-left-color: var(--color-border);
  background-color: var(--color-bg);
}
.creneau--realisee .creneau-libelle,
.creneau--non_realisee .creneau-libelle { color: var(--color-text-muted); }

.creneau { display: flex; gap: 1rem; align-items: stretch; }

.creneau-heure {
  flex: 0 0 3.5rem;
  padding-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
}

.creneau-carte {
  flex: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary-2);
  border-radius: 0 12px 12px 0;
  padding: 0.8rem 1rem;
}

.creneau-libelle { font-size: 0.95rem; font-weight: 500; }
.creneau-sujet { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.creneau-lieu { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.3rem; }

.creneau-pied {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.participants { font-size: 0.8rem; color: var(--color-text-muted); }
/* Le trajet et l'ouverture forment un même groupe poussé à droite : donner
   la marge au groupe, plutôt qu'à l'un ou l'autre bouton, évite qu'elle
   dépende de lequel des deux est présent. */
.creneau-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* ── Agenda : barre de commande ───────────────────────────────────────────── */

.agenda-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.agenda-periode { display: flex; align-items: center; gap: 0.5rem; }

/*
   **La majuscule ne porte que sur la première lettre.**
   ``text-transform: capitalize`` met une majuscule à chaque mot et rendait
   « Jeudi 3 Septembre , Vendredi 4 Septembre 2026 » : en français, les jours et
   les mois s'écrivent en minuscules. Le défaut existait déjà sur une date
   seule, il doublait avec la fenêtre de deux jours.
*/
.agenda-titre::first-letter { text-transform: uppercase; }

.agenda-titre {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 12ch;
}

.fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-primary-2);
  font-size: 1.1rem;
}
.fleche:hover { background-color: var(--color-bg); border-color: var(--color-primary-2); }

.bouton--menu { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

/* Le sélecteur de vue reprend la forme des onglets : même geste, même dessin. */
.agenda-vues {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-white);
}
.agenda-vues .vue {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.agenda-vues .vue + .vue { border-left: 1px solid var(--color-border); }
.agenda-vues .vue:hover { background-color: var(--color-bg); }
.agenda-vues .vue--active {
  background-color: var(--color-primary-2);
  color: var(--color-white);
  font-weight: 600;
}

/*
   Le sélecteur de personne portait l'or et le trait discontinu de la recette,
   parce qu'il n'existait que faute d'authentification. L'agenda s'ouvre
   désormais sur la personne connectée et ce sélecteur est ce qui permet d'en
   sortir : c'est une commande ordinaire, elle en prend le dessin.
*/
.agenda-personnes {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
  margin-bottom: 1.4rem;
}
.agenda-personnes .personne {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.agenda-personnes .personne:hover { color: var(--color-text); }
.agenda-personnes .personne--active {
  background-color: var(--color-primary-2);
  color: var(--color-white);
  border-color: var(--color-primary-2);
  font-weight: 600;
}

/* ── Agenda : la grille du mois ───────────────────────────────────────────── */

.mois {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/*
   ``minmax(0, 1fr)`` et non ``1fr``, et c'est le correctif d'un défaut visible.

   ``1fr`` vaut ``minmax(auto, 1fr)`` : la piste ne peut pas descendre sous la
   largeur minimale de son contenu. Une pastille portant « 09:30 Entretien
   embauche · Melle Ancelin Annabelle » en ``white-space: nowrap`` réclamait
   donc plus qu'un septième de la grille, et sa colonne s'élargissait en
   écrasant les six autres. Le lundi ne se retrouvait plus sous « LUN », ce qui
   ôte au calendrier la seule chose qui le rend lisible.

   Avec ``minmax(0, 1fr)`` la piste peut se réduire à zéro, et c'est
   ``text-overflow: ellipsis`` de la pastille qui tronque le texte.
*/
.mois-entetes, .mois-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.mois-entete {
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.mois-semaine + .mois-semaine .case { border-top: 1px solid var(--color-border); }

.case {
  min-height: 104px;
  padding: 0.4rem 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 1px solid var(--color-border);
  color: inherit;
  /* Sans cela, une case chargée impose sa hauteur à toute la semaine et les
     lignes du mois deviennent inégales. */
  overflow: hidden;
  min-width: 0;
}
.case:first-child { border-left: 0; }
.case:hover { background-color: var(--color-bg); }

/* Les jours des mois voisins restent affichés pour que les colonnes ne se
   décalent pas, mais en retrait : ils ne sont pas le sujet. */
.case--hors { background-color: rgba(0, 0, 0, 0.02); }
.case--hors .case-numero { color: var(--color-border); }

.case--aujourdhui { box-shadow: inset 0 0 0 2px var(--color-accent); }

.case-numero { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.case--aujourdhui .case-numero { color: var(--color-primary); }

.pastille {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  background-color: var(--color-primary-2);
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* La pastille ne réclame aucune largeur propre : c'est la colonne qui décide,
     et le texte se tronque. L'inverse déformait la grille. */
  min-width: 0;
  max-width: 100%;
}
.pastille-heure { font-weight: 700; margin-right: 0.2rem; }

.pastille--a_planifier { background-color: var(--color-accent); color: var(--color-primary); }
.pastille--realisee { background-color: var(--color-border); color: var(--color-text-muted); }
.pastille--annulee { background-color: var(--color-border); color: var(--color-text-muted); text-decoration: line-through; }

.case-reste { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Écrans de saisie ─────────────────────────────────────────────────────── */

.fil-ariane {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}
.fil-ariane a { text-decoration: underline; }

.ecran-titre { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); text-wrap: balance; }
/* Le titre d'écran qui n'est suivi d'aucun chapeau : il prend lui-même la
   marge que le chapeau porte d'habitude. Quinze écrans commençaient au niveau
   ``h2``, par le titre de leur premier bloc, sans que rien ne les nomme. */
.ecran-titre--seul { margin-bottom: 1.2rem; }
.ecran-chapo { color: var(--color-text-muted); margin: 0.4rem 0 1.6rem; max-width: 62ch; }

.bloc {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
/* Un écran qui pose une seule question n'a pas à occuper toute la largeur : la
   ligne de lecture deviendrait trop longue pour un formulaire de deux champs. */
.bloc--etroit { max-width: 720px; }
/* Le bloc qu'on vient lire, quand la page en aligne cinq.
   Une variation de l'or de la charte, plus pâle que ``--color-accent-soft`` que
   portent déjà les avis : le même jaune, à deux intensités, dit « regardez ici »
   pour un bloc et « attention » pour un avis. Prendre la même valeur que les
   avis aurait fait passer une liste ordinaire pour une alerte, et une alerte
   qu'on voit partout cesse d'être une alerte.
   Le filet or à gauche marque le bord sans cerner le bloc entier. */
.bloc--exergue {
  background-color: var(--color-exergue);
  border-color: var(--color-exergue-bord);
  border-left: 4px solid var(--color-accent);
}
.bloc--exergue .tableau tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.5); }
.bloc--exergue .tableau-cadre { background-color: transparent; }
/* Un bloc qu'on ouvre d'un clic, sans script. La politique de sécurité interdit
   le script en ligne : ``details`` est le seul repli que le navigateur sache
   faire seul, et il a l'avantage d'être accessible au clavier sans qu'on s'en
   occupe.

   Il sert au contexte qu'on consulte rarement, et au geste occasionnel. Le
   garder ouvert séparait l'état de la personne de ce qu'il y a à faire. */
.bloc--repli {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* Le bloc des présents d'une réunion vit dans la cellule d'un tableau plus
   large que l'écran d'un téléphone. Sans ces deux lignes, il hérite de la
   largeur du tableau : l'encadrante devrait faire défiler de côté pour
   atteindre les cases à cocher et le bouton, sur le geste même qu'on est venu
   faire. Il se cale à gauche du cadre qui défile et se borne à ce qui est
   visible. */
.presents-repli {
  position: sticky;
  left: 0;
  width: min(100%, calc(100vw - 2rem));
}
.bloc--repli > summary {
  cursor: pointer;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Le bouton du repli n'est pas un bouton : c'est une étiquette dans le résumé,
   et c'est le résumé entier qui ouvre. Un vrai bouton imbriqué dans un
   ``summary`` capterait le clic sans rien ouvrir, ce qui est le pire des deux
   mondes : il a l'air d'agir et il n'agit pas.

   **La règle est juste, et six gabarits l'employaient de travers.**
   Correction du 17 septembre 2026, sur la base réelle : « le repli ne répond
   pas ». ``pointer-events: none`` est indispensable ici, et l'écran de
   formation le montre : son résumé porte un ``span`` « Consulter » qui a
   l'apparence d'un bouton, et sans cette ligne ce faux bouton capterait le
   clic sans rien ouvrir. Mais six gabarits posaient la classe **sur le
   ``summary`` lui-même**, qui cessait donc de recevoir le clic : les replis du
   simulateur, du pilotage et des plans étaient morts depuis le 30 août, et
   rien ne le disait, le titre et le chevron s'affichant quand même. Ouvrables
   au clavier, jamais à la souris.

   La classe est donc restée ce qu'elle était, et les six résumés ne la portent
   plus. ``tests/test_charte_des_ecrans.py`` refuse qu'une classe posée sur un
   ``summary`` éteigne les événements de pointage, ce qui tient les deux usages
   séparés. */
.repli-bouton {
  margin-left: auto;
  flex-shrink: 0;
  pointer-events: none;
}
.bloc--repli > summary::-webkit-details-marker { display: none; }
/* Le chevron dit qu'il y a quelque chose dessous. Sans lui, un titre replié se
   lit comme un titre vide, et personne ne clique. */
.bloc--repli > summary::after {
  content: "›";
  float: right;
  color: var(--color-text-muted);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.bloc--repli[open] > summary::after { transform: rotate(-90deg); }

/* Un repli qui cache du travail porte la couleur de l'avis, et non celle de
   l'exergue. La nuance est celle qui sépare « regardez ici » d'« attention » :
   un parcours clos qui retient sept preuves n'est pas une liste ordinaire, il
   attend un geste. La direction l'a demandé le 18 septembre 2026 en montrant
   l'avis du haut de l'écran : « je voulais que ce soit cela pour le bloc
   parcours d'integration ».

   Le bloc s'ouvre aussi de lui-meme dans ce cas, et son titre ecrit le compte :
   l'information ne tient jamais a la seule couleur (§ 7.9). */
.bloc--du-travail {
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-soft);
}
.jeton--du-travail {
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
}
.repli-corps { margin-top: 1rem; }
/* Un bloc à l'intérieur d'un repli : il garde son titre et son espacement, mais
   perd le cadre, qui ferait une boîte dans une boîte. */
.bloc--nu {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.4rem;
}
.bloc--nu:last-child { margin-bottom: 0; }
/* La connexion et le second facteur sont les deux seuls écrans sans navigation
   autour : rien ne les cadre, et sans largeur maximale le formulaire s'étirerait
   sur tout l'écran. Centré, il se comporte comme la porte qu'il est. */
.bloc--connexion {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
}

/* Le bloc qui porte le seul geste d'un écran. Le filet or le désigne sans le
   remplir : un fond plein en aurait fait une alerte. */
.bloc--action { border-left: 4px solid var(--color-accent); }

.bloc-titre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.formulaire { display: flex; flex-direction: column; gap: 1rem; }

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.champ { display: flex; flex-direction: column; gap: 0.3rem; }
.champ--large { grid-column: 1 / -1; }

.champ label {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* **Tous les champs, par une seule règle.** L'énumération des types laissait
   passer ``date``, ``time``, ``number``, ``password`` et ``textarea``, qui
   s'affichaient avec le dessin brut du navigateur au milieu de champs
   habillés. Une liste de types se complète toujours en retard d'un type. Les
   cases, les boutons radio et le champ de fichier gardent leur dessin propre. */
.champ :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text);
  width: 100%;
}

/* Le champ de fichier garde son cadre, sans quoi « Choisir un fichier »
   flotterait nu dans le formulaire ; il n'a pas le remplissage d'un champ de
   texte, que son bouton natif ne saurait pas porter. */
.champ input[type="file"] {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text);
  width: 100%;
}

.champ :is(input, select, textarea):focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-primary-2);
}

textarea { resize: vertical; min-height: 5rem; }

/*
   Un champ proposé par la machine ne doit pas avoir l'air d'une saisie humaine.
   Le liseré à gauche suffit à le dire sans crier ; l'incertain reprend l'or de
   la charte, seule couleur d'accent disponible, parce qu'il demande un regard.
*/
.champ--propose input { border-left: 3px solid var(--color-primary-2); }
.champ--incertain input {
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-accent-soft);
}

.jeton--propose { background-color: rgba(44, 62, 80, 0.1); color: var(--color-primary-2); }
.jeton--incertain { background-color: var(--color-accent); color: var(--color-primary); font-weight: 600; }

.requis { color: var(--color-primary-2); font-weight: 700; }

.indice {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.indice--fait { color: var(--color-primary-2); font-weight: 500; }
/* Le paragraphe d'aide sous un formulaire isolé, écran de connexion compris. Il
   se lit après le geste, pas pendant : d'où la marge et la ligne de séparation. */
.indice--pied {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.champ--case { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.champ--case input { margin-top: 0.25rem; flex-shrink: 0; }
.champ--case label { flex-direction: column; align-items: flex-start; gap: 0.15rem; }

.cartouche {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cartouche legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 0.4rem;
}

/* Une liste de cases : chaque choix dans sa boîte, les boîtes en grille.
   ``align-items: flex-start`` et non ``center`` : une explication de deux
   lignes à côté d'un bouton radio garde la case en face de la première ligne,
   là où l'œil la cherche. */
.liste-cases {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.liste-cases li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg);
}
.liste-cases input { margin-top: 0.2rem; flex-shrink: 0; }
.liste-cases label { font-size: 0.88rem; font-weight: 400; }
/* La variante compacte, pour des choix d'un mot : les sept jours de la
   semaine tiennent sur une ligne, sans boîte. Le simulateur portait cette
   disposition sous le même nom que la grille, et c'est l'ordre du fichier
   qui décidait laquelle s'appliquait. */
.liste-cases--compacte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}
.liste-cases--compacte li {
  padding: 0.2rem 0;
  border: 0;
  background: none;
  align-items: center;
}
.liste-cases--compacte input { margin-top: 0; }

/* Les passages du contrat (§ 122) : une ligne par passage, la durée en heures
   et minutes côte à côte, les sept jours sur une ligne. */
.passages-du-contrat td.duree { white-space: nowrap; }
.passages-du-contrat td.duree input[type="number"] { width: 4.5rem; display: inline-block; }
.passages-du-contrat input[type="time"] { width: auto; }

/* Un groupe de cases est un ``fieldset`` : c'est sa légende qui nomme le
   groupe pour un lecteur d'écran, là où une étiquette sans ``for`` ne nommait
   rien. Le cadre natif est retiré, la légende prend le dessin d'une étiquette. */
.groupe-cases {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.groupe-cases > legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Le devis personnalisé, décision de la direction du 6 octobre 2026. La case
   masque le patron et montre la grille par jour, le volume hebdomadaire ou
   le volume mensuel (§ 121), sans script : un bloc masqué poste encore ses
   champs, et c'est la case que la route lit pour savoir lequel compte. */
.volume-personnalise,
.option-par-jour,
.option-hebdomadaire,
.option-mensuel { display: none; }
.volume-devis:has(#devis_personnalise:checked) .volume-patron { display: none; }
.volume-devis:has(#devis_personnalise:checked) .volume-personnalise { display: block; }
.volume-personnalise:has(#option_par_jour:checked) .option-par-jour { display: block; }
.volume-personnalise:has(#option_hebdomadaire:checked) .option-hebdomadaire { display: block; }
.volume-personnalise:has(#option_mensuel:checked) .option-mensuel { display: block; }

/* « Désattribuer la tâche », sur l'écran de modification d'un créneau.
   Cochée, la case l'emporte sur la date, la durée et les personnes : le
   serveur ne les lit pas, et l'écran le montre sans script, en éteignant
   les champs et en repliant la liste des personnes. Les cases repliées
   restent cochées dans le formulaire envoyé, et c'est sans effet. */
.formulaire:has(#desattribuer:checked) .grille-champs,
.formulaire:has(#desattribuer:checked) .groupe-cases > legend {
  opacity: 0.45;
  pointer-events: none;
}
.formulaire:has(#desattribuer:checked) .liste-cases { display: none; }
.champ--desattribuer {
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg);
}

.actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

.bouton {
  background-color: var(--color-primary-2);
  color: var(--color-white);
  border: 1px solid var(--color-primary-2);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font: 600 0.9rem inherit;
  cursor: pointer;
  align-self: flex-start;
}
.bouton:hover { background-color: var(--color-primary); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton--second { background-color: var(--color-white); color: var(--color-primary-2); }
.bouton--second:hover { background-color: var(--color-bg); }
.bouton--fantome { border-color: transparent; background: none; color: var(--color-text-muted); }
.bouton--fantome:hover { background: none; color: var(--color-text); }

/* Le geste principal d'un écran de résultat : plus grand, en accent, avec son
   pictogramme. Réservé au cas où il n'y en a qu'un — deux boutons d'accent sur
   le même écran ne désignent plus rien. */
.bouton--action {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.bouton--action:hover {
  background-color: var(--color-accent-fort);
  border-color: var(--color-accent-fort);
}
.bouton--action i { font-size: 1.1rem; }

/* ── Le geste rare et lourd ────────────────────────────────────────────────

   Sortir un salarié des effectifs et clore son dossier se fait quelques fois
   par an, et ne se défait pas d'un clic. Le rouge n'est pas décoratif : il dit
   avant la lecture que ce bouton n'est pas de la même famille que les autres.
   Il est isolé dans son propre cadre, en bas de l'écran, pour qu'on ne le
   rencontre pas en cherchant autre chose. */

.bouton--danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger-fort);
  color: var(--color-white);
  font-weight: 600;
}

.bouton--danger:hover { background-color: var(--color-danger-fort); }

/* La correction de la demande (8 septembre 2026) : la ligne de ce qui a
   été transmis porte son geste à droite, en bleu ardoise, comme « Ouvrir »
   sur toute ligne du site. Ouvert, le formulaire prend la largeur de la
   ligne, sous le geste. Aucune couleur nouvelle : c'est la charte. */
.piece--correction { align-items: flex-start; }
.repli--correction { margin-left: auto; border-top: none; padding: 0; }
.repli--correction > summary { list-style: none; }
.repli--correction > summary::-webkit-details-marker { display: none; }
.repli--correction[open] { flex: 1 1 100%; margin-left: 0; }
.repli--correction[open] > summary { float: right; margin-bottom: 0.8rem; }
.repli--correction > .formulaire { clear: both; padding-top: 0.4rem; }

.bloc--danger {
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  background-color: var(--color-danger-doux);
}

.bloc--danger .bloc-titre { color: var(--color-danger-fort); }

.avis--danger {
  border-left: 4px solid var(--color-danger);
  background-color: var(--color-danger-doux);
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.avis--danger ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }

.actions--majeure { margin-top: 1rem; }


/* ── Tableaux de données ──────────────────────────────────────────────────── */
/*
   Les classes venaient des outils HTML, où elles s'appelaient ``grid`` et
   ``table-wrap`` et où elles avaient un style ; ici elles n'en avaient aucun,
   et le tableau s'affichait nu.

   Le cadre existe pour le défilement horizontal : sur un portable, sept
   colonnes débordent, et sans lui c'est toute la page qui glisse.

   **Une seule définition.** La feuille en portait deux, à cent lignes de
   distance, avec des valeurs différentes pour la taille, les remplissages et
   les en-têtes : c'est l'ordre du fichier qui tranchait, et personne ne
   pouvait dire, en lisant l'une, ce qui s'affichait. Les valeurs ci-dessous
   sont celles que la cascade appliquait réellement.
*/

.tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tableau th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.tableau td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  /* Des chiffres à largeur fixe, pour que les colonnes de montants et de
     durées s'alignent. */
  font-variant-numeric: tabular-nums;
}

.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:nth-child(odd) { background-color: var(--color-bg); }

/* Une rangée de boutons dans une cellule ne prend pas la marge d'un formulaire
   de plein écran. */
.tableau .actions { margin: 0; }
.tableau .bouton { padding: 0.35rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }

/* ── La liste des tâches ──────────────────────────────────────────────────── */
/*
   L'échéance et le créneau ont deux colonnes, et c'est la raison d'être de
   cette page : le créneau est une intention de date, l'échéance est ce qui
   engage. Les fondre en une seule ferait passer une visite posée au 30 pour
   une échéance au 20 comme étant dans les temps.
*/

.agenda-titre--liste { text-transform: none; }

.liste-releve {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

.liste-filtres {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
  margin-bottom: 1.2rem;
}

.filtre-groupe { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.filtre-groupe .indice { min-width: 6.5rem; }

.filtre {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-muted);
}
.filtre:hover { color: var(--color-text); border-color: var(--color-primary-2); }
.filtre--actif {
  background-color: var(--color-primary-2);
  color: var(--color-white);
  border-color: var(--color-primary-2);
  font-weight: 600;
}

.tache-libelle { display: block; font-weight: 500; }
.tache-sujet { display: block; font-size: 0.8rem; color: var(--color-text-muted); }

/* L'état s'écrit toujours en toutes lettres ; la teinte ne fait que doubler le
   mot. Une part du public de ce service est malvoyante, et l'encadrante qui
   imprime en noir et blanc perd la nuance. */
.etat {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: rgba(30, 41, 59, 0.08);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.etat--a_planifier { background-color: var(--color-accent-soft); color: var(--color-primary); }
.etat--a_deposer { background-color: var(--color-accent-soft); color: var(--color-primary); }
.etat--planifiee { background-color: var(--color-primary-2); color: var(--color-white); }

/* Le retard se marque par un filet, jamais par un fond seul : le tableau alterne
   déjà les fonds de rangée, et une teinte de plus s'y perdrait. */
.tableau tbody tr.ligne--retard td:first-child {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* ── Listes de ce qui attend ──────────────────────────────────────────────── */

.afaires { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

/* La liste de ce qui empêche d'enregistrer. **Tous les refus d'un coup**, parce
   qu'une personne qui corrige un champ pour découvrir le suivant abandonne au
   troisième aller-retour. */
.reproches {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-soft);
  border-radius: 8px;
  font-size: 0.85rem;
}

/* Le message d'échec de lecture cache son détail technique derrière un
   ``<details>`` : le motif d'origine est utile à qui cherche, illisible pour qui
   veut juste savoir quoi faire. ``<details>`` est natif et ne demande aucun
   script, que la politique de sécurité interdit de toute façon. */
.detail-technique { margin-top: 0.6rem; }
.detail-technique summary {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.detail-technique p { margin-top: 0.4rem; word-break: break-word; }

/* ── Fenêtres en superposition ────────────────────────────────────────────── */
/*
   **Une vraie fenêtre modale, et sans une ligne de script.** La politique de
   sécurité de la plateforme est ``default-src 'self'`` sans ``unsafe-inline`` :
   un script écrit dans la page est ignoré, et une fenêtre construite en
   JavaScript ne se serait jamais ouverte.

   La pseudo-classe ``:target`` désigne l'élément que l'adresse pointe. Un lien
   vers ``#refermer-<identifiant>`` suffit donc à ouvrir la fenêtre, et un lien
   vers ``#`` à la refermer. Le bouton « précédent » du navigateur la referme
   aussi, ce qu'une fenêtre en script ne fait pas sans travail supplémentaire.

   Le prix à payer : la fenêtre est rendue dans la page, cachée. Elle ne doit
   donc rien contenir que le visiteur n'ait pas le droit de lire, puisque le code
   source la porte de toute façon. C'est le cas ici, les fenêtres ne montrant que
   ce que le tableau montre déjà.
*/

.fenetre {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(30, 41, 59, 0.55);
  padding: 2rem 1rem;
  overflow-y: auto;
  /* Arrivé au bout de la fenêtre, le doigt ne fait pas défiler la page qui
     est dessous. */
  overscroll-behavior: contain;
}

.fenetre:target { display: block; }

/* **Un refus rouvre la fenêtre, là où ``:target`` ne le peut pas.**

   La pseudo-classe lit le fragment de l'adresse ; or un formulaire refusé rend
   l'écran entier sans fragment, et la personne se retrouvait en haut de la page
   avec sa saisie derrière un bloc refermé. C'est ce que la direction a décrit le
   25 septembre 2026 comme « la page se recharge et il se retrouve en haut de la
   page », et ce n'était pas le repli : c'était le refus.

   L'attribut est posé par le gabarit, à la place d'une classe, parce que
   ``class="fenetre"`` doit rester écrit tel quel : c'est sur cette chaîne exacte
   que ``test_charte_des_ecrans`` retrouve chaque fenêtre pour vérifier qu'elle
   est un dialogue nommé. Une classe conditionnelle l'aurait fait disparaître du
   relevé sans rien dire. */
.fenetre[data-ouverte="1"] { display: block; }

.fenetre-corps {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.28);
}

.fenetre-fermer {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0.2rem 0.4rem;
}
.fenetre-fermer:hover { color: var(--color-text); }

/* Deux suites au même constat dans une fenêtre (§ 117) : chacune s'ouvre
   sous un filet, pour qu'on ne lise pas le second bouton comme la suite du
   premier formulaire. */
.fenetre-suite {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Une pièce à joindre : sa nature, puis son fichier, sur une seule ligne tant
   que la largeur le permet. */
.champ--piece {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.champ--piece label { min-width: 5.5rem; }
.champ--piece select { flex: 1 1 12rem; }
.champ--piece input[type="file"] { flex: 1 1 12rem; font-size: 0.8rem; }

/* ── Avis ─────────────────────────────────────────────────────────────────── */

.avis {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
}
.avis ul { margin: 0.4rem 0 0 1.1rem; }
.avis-titre { font-size: 0.95rem; font-weight: 600; display: flex; gap: 0.45rem; align-items: center; }
.avis-detail { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.35rem; }
.avis-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.avis p { margin-top: 0.35rem; }

.avis--fait { border-left: 4px solid var(--color-primary-2); background-color: var(--color-white); }
.avis--refus { border-left: 4px solid var(--color-accent); background-color: var(--color-accent-soft); }
.avis--tiede {
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-soft);
  margin-top: 1rem;
}

/* ── Tableaux de rappel ───────────────────────────────────────────────────── */

.tableau code { font-size: 0.85rem; }
.tableau-actions { text-align: right; white-space: nowrap; }
.tableau-actions .bouton { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Plusieurs formulaires côte à côte dans une même cellule (accepter/refuser,
   par exemple) : sans cette règle, chacun reprendrait le bloc par défaut et
   les boutons s'empileraient à la verticale. */
.tableau-actions form { display: inline-flex; margin-left: 0.4rem; }
.tableau-actions form:first-child { margin-left: 0; }

/* Ce qui bloque une ligne, dit sous elle plutôt qu'après le clic. La rangée
   n'a ni bordure haute ni alternance de fond : elle prolonge la ligne qui la
   précède, elle n'en est pas une nouvelle. */
.ligne-motifs td {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0.7rem;
  background-color: var(--color-bg);
}
.ligne-motifs ul { margin: 0.2rem 0 0 1.1rem; padding: 0; }
.ligne-motifs li { margin: 0.1rem 0; }

/* ── Dossier et parcours salarié ─────────────────────────────────────────── */

/* ``flex-direction`` est réaffirmé, et ce n'est pas une redondance : le
   formulaire porte aussi ``.formulaire``, qui l'empile en colonne. Sans cette
   ligne, ``flex: 1 1 22rem`` s'appliquait à l'axe principal, donc à la
   *hauteur* : le bloc faisait 22 rem de haut pour un seul menu déroulant, et
   ``align-items: flex-end`` poussait le champ à droite tandis que le bouton
   restait à gauche. Le cadre blanc géant venait de là. */
.choix-dossier {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.choix-dossier .champ { flex: 1 1 22rem; min-width: 0; margin: 0; }
/* Le bouton ne se hisse pas en haut du bloc : il s'aligne sur le bas du champ,
   comme le ferait un bouton de recherche. ``.bouton`` porte
   ``align-self: flex-start``, qui vaut « en haut » dans une rangée. */
.choix-dossier .bouton { align-self: flex-end; }

/* Les pièces reprennent la forme des lignes du bandeau : c'est la même nature
   d'information — quelque chose est dû, avec une échéance — et deux mises en
   forme différentes obligeraient à réapprendre à lire d'un écran à l'autre. */
.pieces { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.piece {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
}
.piece--retard { border-left-color: var(--color-danger); }
/* La liasse se lit dans l'ordre : une liste numérotée par le gabarit, et
   les annexes du contrat en retrait sous lui (décision du 4 septembre 2026). */
.pieces--liasse { padding-left: 0; }
.piece--annexe { margin-left: 1.5rem; border-left-color: var(--color-border); }
/* Les actions d'une pièce forment une seule colonne, alignée à droite,
   aux mêmes largeurs et aux mêmes écarts d'une ligne à l'autre : un
   bouton qui change de place à chaque ligne se cherche. */
.pieces--liasse .piece { align-items: flex-start; }
.pieces--liasse .piece-corps { flex: 1 1 22rem; }
.piece-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
}
.piece-actions .ouvrir,
.piece-actions .bouton {
  min-width: 8.5rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
}
.piece-actions form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.piece-retour input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; position: absolute; }
.piece-retour label { cursor: pointer; }
.piece-retour.piece-retour--choisi label { border-color: var(--color-accent); }
.piece--recue {
  border-left-color: var(--color-succes);
  background-color: var(--color-succes-doux);
}

.piece-corps { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.piece-libelle { font-size: 0.92rem; font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.piece--recue .piece-libelle i { color: var(--color-succes); }
.piece-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── La ligne entière est le lien ───────────────────────────────────────────

   Décision de la direction du 26 septembre 2026, après la recette des dix
   écrans : « sur un dossier client ou un dossier salarié, je souhaite des
   blocs cliquables partout où cela est possible. Le moins de listes de simple
   consultation possible. L'utilisateur clique directement sur le bloc et il
   est redirigé vers la page. »

   C'est le patron de ``.resultat-lien`` et de ``.pilotage-critere-lien``,
   étendu aux lignes de dossier. Le motif est le même qu'au 12 septembre :
   viser un « Ouvrir » de six caractères au bout d'une ligne de trois lignes
   n'est pas un geste, et sur un téléphone la cible est plus petite encore.

   **Le chevron ne porte rien d'autre que ce que la ligne dit déjà.** Il
   signale qu'on peut cliquer ; il est caché au lecteur d'écran, qui entend le
   lien entier, et son absence ne retirerait aucune information (§ 9.18). */
.piece--lien { padding: 0.2rem 0.45rem; }
.piece-lien {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.piece-lien:hover, .piece-lien:focus-visible { background-color: var(--color-accent-soft); }
.piece-lien:hover .piece-libelle { text-decoration: underline; }
/* Le texte d'une tache mene au dossier ou a la fiche qu'elle designe.
   Decision de la direction du 30 septembre 2026. Le meme patron que
   ``.piece-lien`` ci-dessus : un lien n'en contient pas un autre, donc la zone
   cliquable est le texte, et « Poser un creneau » comme l'itineraire gardent
   leur place a droite de la ligne. */
.afaire-texte-lien {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.afaire-texte-lien:hover, .afaire-texte-lien:focus-visible {
  background-color: var(--color-accent-soft);
}
.afaire-texte-lien:hover .afaire-libelle,
.afaire-texte-lien:focus-visible .afaire-libelle,
.afaire-texte-lien:hover .tache-libelle,
.afaire-texte-lien:focus-visible .tache-libelle { text-decoration: underline; }
/* Le chevron signale qu'on peut cliquer ; il ne porte aucune information que
   la ligne ne dise deja, et reste donc cache au lecteur d'ecran (§ 62.1). */
.afaire-chevron { color: var(--color-primary-2); flex: 0 0 auto; }

.piece-fleche { color: var(--color-primary-2); font-size: 1.1rem; flex: 0 0 auto; }
.jeton--retard {
  background-color: var(--color-danger-doux);
  color: var(--color-danger-fort);
  font-weight: 600;
}

/* Le pendant du précédent, ajouté le 1er septembre 2026 avec l'écran des
   réunions. La charte portait « indice--fait » et « avis--fait » sans le jeton
   correspondant : une ligne terminée s'affichait donc dans le même gris qu'une
   ligne dont on ne sait rien, à côté d'un jeton rouge qui, lui, se voyait.
   L'information ne doit jamais tenir à la seule couleur, et c'est pourquoi le
   jeton porte aussi un mot. */
.jeton--fait {
  background-color: var(--color-succes-doux);
  color: var(--color-succes);
  font-weight: 600;
  /* Le jeton porte souvent un pictogramme devant son mot, sur l'agenda. */
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* Le champ de fichier natif est masqué au profit de son étiquette : il affiche
   « Aucun fichier sélectionné » dans une police que rien ne peut accorder au
   reste, et le répéter sur douze lignes sature l'écran. */
.piece-depot { display: flex; align-items: center; gap: 0.5rem; }
.piece-depot input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; position: absolute; }
.depot-choix {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.depot-choix:hover { border-color: var(--color-primary-2); color: var(--color-primary-2); }
.piece-depot input[type="file"]:focus + .depot-choix { outline: 2px solid var(--color-accent); }

.jauge {
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-bg);
  overflow: hidden;
  margin-top: 0.5rem;
}
/* La largeur par crans de vingt pour cent, et non par un attribut ``style`` :
   la politique de sécurité est ``default-src 'self'`` sans ``unsafe-inline``,
   si bien qu'un style écrit dans la page est ignoré. La jauge s'affichait donc
   toujours pleine, et annonçait un parcours d'intégration terminé qui ne
   l'était pas. Le chiffre exact reste écrit à côté de la barre. */
.jauge-part { height: 100%; background-color: var(--color-primary-2); width: 0; }
.jauge-part--0 { width: 0; }
.jauge-part--20 { width: 20%; }
.jauge-part--40 { width: 40%; }
.jauge-part--60 { width: 60%; }
.jauge-part--80 { width: 80%; }
.jauge-part--100 { width: 100%; }

.outils-dossier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.7rem;
}
.outil {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 500;
}
.outil:hover { border-color: var(--color-primary-2); }
.outil i { font-size: 1.3rem; color: var(--color-primary-2); }
/* Celui qui traite ce qui manque se détache. Un seul à la fois, sinon plus
   rien ne se détache. */
.outil--urgent { border-color: var(--color-accent); background-color: var(--color-accent-soft); }
.outil-note { font-size: 0.8rem; font-weight: 400; color: var(--color-primary); }
/* La date du dernier dépôt, sous la note : elle distingue « jamais ouvert » de
   « ouvert l'an dernier », et les deux ne se traitent pas de la même façon.
   Plus petite et grise, parce qu'elle informe sans appeler. */
.outil-depot { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }

/* ── Dépôt d'une pièce dans une ligne de tableau ───────────────────────────

   Le dépôt était caché sous un repli au libellé gris pendant que la correction
   avait un bouton. Deux gestes de même importance ne se présentent pas de deux
   façons : le formulaire est visible, et son bouton a le dessin des autres. */

.depot-piece {
  margin-top: 0.6rem;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.depot-piece input[type="file"] { font-size: 0.85rem; max-width: 100%; }

/* Le cadre qui déclenche le téléchargement du récépissé. Il n'a rien à
   montrer : sa réponse est une pièce jointe, que le navigateur enregistre. */

.telechargement-discret {
  width: 0;
  height: 0;
  border: 0;
  position: absolute;
  visibility: hidden;
}

/* ── Simulateur de plannings ──────────────────────────────────────────────── */
/*
   Le bandeau de fiabilité, en tête et sur les sept vues. La version précédente
   calculait la couverture géographique et la méthode de calcul des trajets,
   puis les rangeait au fond d'un rapport que personne n'ouvrait avant d'avoir
   décidé. Ce sont pourtant les deux chiffres qui disent si l'on peut se fier à
   tout le reste.
*/

.fiabilite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-succes);
  border-radius: 8px;
}
/*
   Le liseré change de couleur quand un dossier au moins n'a pas de coordonnée
   utilisable : la durée de travail des journées concernées est alors
   sous-estimée, et le planning peut dépasser la durée quotidienne maximale
   sans que le calcul le voie.
*/
.fiabilite--douteuse { border-left-color: var(--color-accent-fort); }
.fiabilite-element { display: inline-flex; align-items: center; gap: 0.35rem; }
.fiabilite-element .ti { color: var(--color-text-muted); }

.simulateur-vues { margin-bottom: 1.2rem; flex-wrap: wrap; }

/*
   Le réglage de la période, sur une ligne, juste sous le bandeau qui l'affiche.
   Les deux dates et le bouton restent côte à côte tant que la place le permet,
   et la phrase passe dessous : c'est elle qui dit que l'écran entier en dépend,
   et elle n'a pas à serrer les champs sur un téléphone.
*/
.periode-choix {
  display: flex;
  /* En ligne, et non en colonne : `.formulaire` empile ses champs, ce qui est
     juste pour une saisie et faux pour un réglage de deux dates. Sans cette
     ligne, les deux champs se rangeaient l'un sous l'autre contre le bord
     droit de l'écran. */
  flex-direction: row;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.4rem;
}
.periode-choix .champ { margin-bottom: 0; }
/* `.formulaire .bouton` se cale en haut, ce qui le décrocherait des champs. */
.periode-choix .bouton { align-self: flex-end; }
.periode-choix .indice { flex: 1 1 100%; margin: 0; }
/* Les trois mois se collent au réglage : c'est le même geste, en un clic. */
.periode-mois { margin-top: 0; }

/*
   Une ligne d'encadrante se distingue au premier coup d'œil. Elle est exclue
   des scénarios strict et équilibré ; seule l'urgence la mobilise, et il faut
   voir immédiatement de qui l'on parle.
*/
.ligne--encadrante { background-color: var(--color-accent-soft); }

.ligne-motifs {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 34rem;
}

.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/*
   Dans une cellule, une précision se lit sous la valeur et non collée à elle.
   « Lucienne PONCETGrenoble-sud » n'est pas un nom, et l'œil s'arrête dessus
   avant de comprendre que le secteur commence.
*/
.tableau .indice { display: block; margin-top: 0.15rem; }

/* ── Formats d'écran ──────────────────────────────────────────────────────── */
/*
   **Les premières requêtes de média de la plateforme, et elles arrivent tard.**
   La balise ``viewport`` était posée depuis le premier jour, mais rien
   n'adaptait quoi que ce soit : sur un téléphone de 375 px, les 2 rem de marge
   fixe du contenu laissaient 311 px utiles, la barre d'onglets débordait sans
   jamais se replier, et la grille du mois donnait des colonnes de 44 px où une
   pastille se réduisait à trois caractères. Rien ne cassait, et c'est
   précisément pourquoi personne ne l'a vu : la page s'affichait, simplement
   illisible.

   Deux seuils, et deux seulement. Multiplier les paliers reviendrait à décrire
   des appareils plutôt que des contenus, et le troisième palier n'est jamais
   testé sur rien.

   Ce qui **ne** change **pas** avec la largeur : le pas des flèches, qui reste
   d'un jour. Sinon la même commande ferait deux choses, et un lien copié d'un
   poste vers un téléphone ne mènerait pas au même endroit.
*/

/* ── Tablette et en dessous ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main { padding: 1.4rem 1.2rem 1.8rem; }

  /* Les onglets défilent plutôt que de déborder. Le débordement était muet :
     le quatrième onglet sortait de l'écran sans que rien n'indique qu'il
     existe. */
  .onglets {
    overflow-x: auto;
    padding: 0 0.8rem;
    -webkit-overflow-scrolling: touch;
  }

  .case { min-height: 84px; }
}

/* ── Téléphone ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .main { padding: 1rem; }
  /* Le slogan est la première chose qu'on peut perdre : le nom et la
     déconnexion restent. */
  .header-slogan { display: none; }

  /* **Le bandeau tient sur deux lignes, et non sur une.** Sur une seule, le
     bloc de navigation, qui refuse de rétrécir, venait se poser sur le logo et
     le nom se coupait en deux (relevé de la direction sur téléphone, le
     6 septembre 2026). Première ligne : le logo et le nom, entiers. Seconde :
     le prénom à gauche, les deux gestes à droite, en ligne et hauts de 44 px
     pour le doigt. */
  .header { padding: 0.55rem 0.9rem 0.45rem; }
  .header-inner { flex-wrap: wrap; row-gap: 0.2rem; }
  .header-logo-link { flex: 1 1 100%; gap: 0.6rem; }
  .header-mark { height: 30px; }
  .header-title { font-size: 1rem; white-space: nowrap; }
  .header-nav { flex: 1 1 100%; justify-content: space-between; gap: 0.9rem; }
  .header-user {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-nav-btn {
    flex-direction: row;
    gap: 0.35rem;
    font-size: 0.82rem;
    min-height: 2.75rem;
  }
  .header-nav-btn .glyphe { font-size: 1.1rem; }

  /* Un onglet ne se coupe pas en deux lignes : la barre défile, et chaque
     libellé reste entier. « Mon / agenda » sur deux étages faisait une barre
     plus haute que le bandeau. */
  .onglet { white-space: nowrap; }

  /* **Une seule journée.** La seconde colonne se replie plutôt que de se
     serrer : deux cartes de 140 px côte à côte ne se lisent pas, et la flèche
     donne accès au lendemain en un geste. */
  .fil-deux-jours { grid-template-columns: minmax(0, 1fr); }
  .fil--seconde { display: none; }

  /* La barre de commande se range sur deux lignes : la période, puis les vues.
     La période d'abord, parce que c'est ce qu'on change le plus souvent. */
  .agenda-barre { flex-direction: column; align-items: stretch; }
  .agenda-periode { justify-content: space-between; }
  .agenda-titre { font-size: 1.05rem; min-width: 0; }
  /* La seconde date de la fenêtre disparaît avec la seconde colonne : l'annoncer
     sans la montrer promettrait une journée qui n'est pas là. */
  .agenda-titre-suite { display: none; }

  /* L'échéance passe sous le libellé plutôt qu'à côté : à 311 px utiles, les
     deux blocs côte à côte laissaient chacun une largeur où tout se coupait. */
  .afaire { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .afaire-echeance { justify-content: flex-start; flex-wrap: wrap; }
  /* L'échéance prend sa ligne, et les gestes (itinéraire, ouvrir, poser un
     créneau) la suivante, alignés entre eux : l'icône d'itinéraire restait
     collée au texte pendant que le bouton passait seul à la ligne (relevé de
     la direction sur téléphone, le 5 septembre 2026). */
  .afaire-echeance .echeance-texte { flex-basis: 100%; }

  /* Au doigt, et non à la souris : 44 px est le minimum tenable pour une
     encadrante debout chez quelqu'un, avec une tablette dans une main. */
  .poser, .ouvrir, .trajet {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }
  .trajet--icone { width: 2.75rem; height: 2.75rem; padding: 0; }
  .fleche { width: 2.75rem; height: 2.75rem; }

  /* La grille du mois garde ses sept colonnes — un calendrier dont les colonnes
     ne s'alignent plus n'est plus un calendrier — mais ses cases ne portent
     plus que leur numéro et un compte. Une pastille tronquée à trois
     caractères ne dit rien de plus qu'un chiffre, et prend six fois la place. */
  .case { min-height: 56px; padding: 0.3rem 0.2rem; }
  .case .pastille { display: none; }
  .case-reste { display: block; }

  .filtre-groupe .indice { min-width: 100%; }

  /* ── La liste des tâches : des cartes, et non un tableau qui défile ───────
     Cinq colonnes ne tiennent pas sur 375 px. Le cadre défilait latéralement
     et l'on ne voyait que la première : l'état, l'échéance, le créneau et le
     bouton sortaient de l'écran **sans que rien ne le dise** (relevé de la
     direction, le 7 septembre 2026). Un débordement muet est le même défaut
     que la barre d'onglets corrigée plus haut.

     Chaque ligne devient un bloc, chaque cellule une ligne étiquetée par le
     nom de sa colonne. L'en-tête disparaît : il n'a plus rien à surmonter, et
     le répéter en tête de chaque carte prendrait la moitié de la hauteur. */
  .tableau--taches, .tableau--taches tbody, .tableau--taches tr, .tableau--taches td {
    display: block;
    width: 100%;
  }
  .tableau--taches thead { display: none; }
  .tableau--taches tr {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.7rem;
  }
  /* Le retard se dit par un liseré large, et non par un fond : sur une carte,
     un fond coloré rendrait le texte moins lisible qu'il ne l'est déjà, et
     l'état l'écrit déjà en toutes lettres juste en dessous. */
  .tableau--taches tr.ligne--retard {
    border-left: 4px solid var(--color-danger);
  }
  .tableau--taches td {
    border: none;
    padding: 0.2rem 0;
  }
  /* L'intitulé de colonne, devant la valeur. Une date sans son intitulé ne
     dirait pas si elle engage ou si elle est une intention, et c'est la
     distinction que cette page existe pour montrer. */
  .tableau--taches td[data-libelle]::before {
    content: attr(data-libelle) " : ";
    font-size: 0.78rem;
    color: var(--color-text-muted);
  }
  /* La première cellule porte le libellé de la tâche : elle n'a pas besoin
     qu'on lui rappelle qu'elle est la tâche. */
  .tableau--taches td[data-libelle="Tâche"]::before { content: none; }
  .tableau--taches td[data-libelle="Tâche"] { padding-bottom: 0.45rem; }
  /* Le geste ferme la carte, sur toute la largeur et haut de 44 px : c'est
     pour un doigt, chez quelqu'un, une tablette dans l'autre main. */
  .tableau--taches td.tableau-actions {
    padding-top: 0.6rem;
    text-align: left;
  }
  .tableau--taches td.tableau-actions .poser,
  .tableau--taches td.tableau-actions .ouvrir {
    width: 100%;
    justify-content: center;
  }
  /* Le cadre ne défile plus : il n'y a plus rien à faire déborder, et une
     barre de défilement horizontale sur une pile de cartes ferait croire
     qu'il reste quelque chose à droite. */
  .tableau--taches-cadre, .tableau-cadre:has(.tableau--taches) { overflow-x: visible; }
}

/* ── Gouvernance : les chiffres du mois ─────────────────────────────────────
   Les dérivées se lisent d'un coup d'œil, avant le tableau qui les détaille.
   Chacune porte sa formule sous elle : un chiffre de pilotage dont on ne sait
   pas ce qu'il divise ne se discute pas, et ne se corrige donc jamais. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.chiffre {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-2);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.chiffre-valeur {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.chiffre-valeur small { font-size: 0.7rem; font-weight: 400; margin-left: 0.3rem; color: var(--color-text-muted); }
.chiffre-libelle { font-size: 0.85rem; font-weight: 500; }
/* Une valeur absente n'est pas une valeur basse : le cadre change de couleur
   plutôt que d'afficher un zéro, qui se lirait comme un résultat. */
.chiffre--manque { border-left-color: var(--color-accent); background-color: var(--color-accent-soft); }
.chiffre-absent { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); }
.chiffre-motif { font-weight: 500; color: var(--color-primary); }

/* Le sélecteur de période, sur une ligne avec son bouton. */
.periode {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.periode label { font-size: 0.8rem; font-weight: 500; }
.periode input { padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }

/* Un mois qui n'a pas été saisi. Discret, mais présent : le retirer de la
   série ferait croire à onze mois d'activité au lieu de douze. */
.serie--vide th, .serie--vide td { color: var(--color-text-muted); font-style: italic; }

/* ── « Je m'informe » : chercher d'abord ────────────────────────────────────
   La recherche occupe la première ligne de l'écran parce que ce qu'on vient y
   chercher neuf fois sur dix est une personne. */
.recherche .formulaire { margin-bottom: 0; }
.recherche-ligne { display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }
.recherche-ligne input[type="search"] {
  flex: 1 1 18rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
}

/* Un résultat est une ligne qu'on ouvre, pas une carte qu'on regarde : la
   cible de clic couvre toute la ligne, y compris sur un écran tactile. */
.resultats { list-style: none; margin: 0.4rem 0 1rem; padding: 0; }
.resultat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}
.resultat:last-child { border-bottom: 0; }
.resultat-lien {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}
.resultat-lien:hover, .resultat-lien:focus-visible { background-color: var(--color-accent-soft); }
.resultat-nom { font-weight: 600; color: var(--color-primary); }

/* Les rayons : une liste de textes et de vues, jamais des tuiles. La tuile
   pleine appartient à « Je travaille » et promet l'ouverture d'un pôle. */
.rayons {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.4rem 1.4rem;
}
.rayon { display: flex; gap: 0.7rem; padding: 0.6rem 0; align-items: flex-start; }
.rayon-icone { color: var(--color-primary-2); font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; }
.rayon-corps { display: flex; flex-direction: column; gap: 0.15rem; }
.rayon-titre { font-weight: 600; color: var(--color-primary); text-decoration: none; }
a.rayon-titre:hover, a.rayon-titre:focus-visible { text-decoration: underline; }
/* Ce que la plateforme ne sert pas. Grisé et nommé : offrir un lien mort est
   pire que dire où le document se trouve. */
.rayon--absent .rayon-icone, .rayon--absent .rayon-titre { color: var(--color-text-muted); }

/* ── En-tête de ligne : un nom, pas un intitulé de colonne ──────────────────
   ``.tableau th`` met en capitales, ce qui convient à « MOIS » ou « VALEUR » en
   tête de colonne. Sur un en-tête de **ligne**, qui porte un nom propre et
   souvent la phrase qui l'explique, les capitales rendent le texte criard et
   plus lent à lire. Les tableaux du registre portent l'assiette sous le nom :
   trois lignes en capitales, personne ne les lit. */
.tableau tbody th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
  max-width: 32rem;
  /* ``.tableau th`` interdit le retour à la ligne, ce qui convient à un
     en-tête de colonne. Sur un en-tête de ligne qui porte une phrase, le
     texte débordait sur la colonne voisine et se superposait à elle
     (relevé le 5 septembre 2026 sur le registre des grandeurs). */
  white-space: normal;
  vertical-align: top;
}
.tableau tbody th .indice { display: block; font-weight: 400; margin-top: 0.15rem; }

/* Le registre des grandeurs : trois colonnes dont la première porte une
   phrase et la dernière un jeton suivi d'une source. Les largeurs sont
   posées pour que la source ne se réduise pas à un ruban de cinq mots. */
.tableau--registre { table-layout: fixed; width: 100%; }
.tableau--registre th:first-child { width: 46%; }
.tableau--registre td.nombre { width: 18%; white-space: nowrap; }
/* Un mois en tête de ligne, « 2026-01 », ne se coupe pas à son tiret. */
.tableau tbody th.nombre { white-space: nowrap; }
.tableau--registre td:last-child .jeton { display: inline-block; margin-bottom: 0.2rem; }

/* ── Le lien de kiosque en code QR ───────────────────────────────────────
   Décision du 9 septembre 2026. Le code QR est un SVG en chemins, servi dans
   la page, sans attribut de style : la politique de sécurité des écrans est
   « default-src 'self' ». */
.qr-cadre { display: flex; justify-content: center; padding: 1rem 0; }
.qr { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem; }
.adresse-kiosque code { word-break: break-all; font-size: 0.8rem; }

/* ── Le pilotage de la qualité : la forme de l'outil de consultation ─────────
   Décision de la direction du 12 septembre 2026, après deux recettes : « je
   veux une page avec des menus déroulants à l'image de l'Outil 0, organisée en
   deux colonnes, avec le détail à droite ». L'écran reprend donc la forme de
   l'outil de consultation du référentiel qui a servi à l'évaluation externe :
   bandeau et compteurs, barre de filtres, arbre à gauche, fiche à droite.

   Ce qui change de l'outil d'origine : les filtres se posent d'un bouton et non
   à la frappe, parce qu'un gabarit d'écran ne porte aucun script (§ 19 des
   décisions) ; et la fiche porte en plus ce que la plateforme détient. */

.pilotage-bandeau {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  background: var(--color-primary-2);
  color: var(--color-white);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.pilotage-bandeau h1 { margin: 0; font-size: 1.15rem; color: var(--color-accent); }
.pilotage-bandeau .indice { color: rgba(255, 255, 255, 0.82); margin: 0.15rem 0 0; }

/* Les compteurs du bandeau. Chacun porte son assiette sous sa valeur : « 69 sur
   111 » se discute et se rapproche d'une liste, « 62 % » ne se discute pas. */
.pilotage-bandeau-droite { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.pilotage-compteurs { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* Les sorties d'ensemble se prennent en tête, à côté des compteurs : c'est ce
   qu'on vient chercher quand un évaluateur attend, et non ce qu'on trouve
   après avoir fait défiler cent trente-sept critères. En or sur le bandeau
   sombre, parce qu'un bouton de la couleur du fond ne se voit pas. */
.pilotage-sorties { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.pilotage-sorties .bouton {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
}
.pilotage-sorties .bouton:hover,
.pilotage-sorties .bouton:focus-visible {
  background: var(--color-accent-fort);
  border-color: var(--color-accent-fort);
  color: var(--color-primary);
}
.pilotage-compteur {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.3;
}
.pilotage-compteur b { display: block; font-size: 1.05rem; color: var(--color-accent); }

/* La barre de filtres. Elle se replie d'elle-même en colonnes plus étroites :
   sept menus sur une seule ligne ne tiendraient pas sur une tablette. */
.pilotage-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  align-items: end;
  margin: 0.8rem 0 0;
}
.pilotage-filtres label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.pilotage-filtres select,
.pilotage-filtres input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--color-white);
  color: var(--color-text);
}
.pilotage-filtres-boutons { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Les deux volets. Chacun défile pour lui-même, comme dans l'outil d'origine :
   un arbre de cent trente-sept lignes emmènerait sinon la fiche hors de l'écran
   dès qu'on descend, et il faudrait remonter pour la relire. */
.pilotage-volets {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.9rem;
  align-items: start;
  margin-top: 0.9rem;
}
.pilotage-colonne {
  max-height: calc(100vh - 6rem);
  overflow: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.pilotage-colonne--fiche { padding: 1rem 1.1rem; }

/* L'arbre. Les niveaux se distinguent par la bande, le retrait et la graisse,
   jamais par la seule couleur : une part du public de ce service est
   malvoyante, et l'écran s'imprime parfois en noir et blanc. */
.pilotage-chapitre,
.pilotage-thematique {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
}
.pilotage-chapitre {
  background: var(--color-border);
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  border-top: 1px solid var(--color-border);
}
.pilotage-chapitre a { white-space: nowrap; font-weight: 600; font-size: 0.8rem; }
.pilotage-thematique {
  background: var(--color-bg);
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.pilotage-objectif {
  margin: 0;
  padding: 0.4rem 0.85rem 0.1rem;
  font-style: italic;
  font-size: 0.82rem;
}
.pilotage-criteres { list-style: none; margin: 0; padding: 0; }
.pilotage-critere { border-bottom: 1px solid var(--color-border); }

/* **La ligne entière est le lien, et non le seul numéro.** Relevé à la
   recette du 12 septembre 2026 : « il n'y a pas de lien pour cliquer sur un
   critère ». Le numéro était bien une ancre, mais rien ne le disait et viser
   quatre caractères au bout d'une ligne de trois lignes n'est pas un geste.
   C'est le patron de ``.resultat-lien``, déjà en service sur la recherche. */
.pilotage-critere-lien {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
  color: inherit;
}
.pilotage-critere-lien:hover,
.pilotage-critere-lien:focus-visible { background-color: var(--color-accent-soft); }
.pilotage-critere-lien:hover .pilotage-numero { text-decoration: underline; }
.pilotage-critere--actif .pilotage-critere-lien {
  background: var(--color-exergue);
  border-left: 3px solid var(--color-accent);
  padding-left: 0.55rem;
}
.pilotage-numero {
  font-weight: 700;
  min-width: 3.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-2);
}
.pilotage-libelle { flex: 1 1 12rem; min-width: 0; font-size: 0.86rem; }
.pilotage-etat { text-align: right; white-space: nowrap; font-size: 0.72rem; }

/* La fiche. Chaque bloc porte un intitulé en capitales sur un filet or, comme
   l'outil d'origine, et son contenu dans un cadre. */
.pilotage-fil {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pilotage-titre { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; color: var(--color-primary); }
.pilotage-bloc { margin: 1rem 0 0; }
.pilotage-bloc h3 {
  margin: 0 0 0.4rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--color-accent);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-2);
}
.pilotage-cadre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}
.pilotage-cadre p:first-child { margin-top: 0; }
.pilotage-cadre p:last-child { margin-bottom: 0; }
.pilotage-cadre ul { margin: 0.2rem 0; padding-left: 1.1rem; }
/* Ce que le référentiel ne dit pas se lit en gris et en italique : une case
   vide se lirait « rien à montrer », ce qui est faux. */
.pilotage-cadre--repli { color: var(--color-text-muted); font-style: italic; }
.pilotage-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
/* Ce que la plateforme démontre : une preuve par ligne, aérée, parce qu'une
   ligne porte son libellé, sa nature et sa date, et que les tasser rendrait
   les trois illisibles. */
.liste-simple { margin: 0.4rem 0; padding-left: 1.1rem; }
.liste-simple li { margin-bottom: 0.5rem; line-height: 1.45; }

.pilotage-carac { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pilotage-carac th {
  width: 38%;
  text-align: left;
  vertical-align: top;
  padding: 0.3rem 0.5rem 0.3rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.pilotage-carac td { padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); }

@media (max-width: 1024px) {
  .pilotage-volets { grid-template-columns: minmax(0, 1fr); }
  .pilotage-colonne { max-height: none; }
  .pilotage-deux { grid-template-columns: 1fr; }
}

/* Le bloc « Qui, ou quoi, cherchez-vous ? » qui filtre une liste de choix.
   Deux boutons alignés sur le bas du champ voisin : sans cela, ils flottent au
   niveau de l'étiquette et la ligne se lit de travers. */
.filtre-dossiers .actions-filtre {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ── Le kiosque de l'enquête de satisfaction ─────────────────────────────────
   Décision de la direction du 23 septembre 2026. La personne accompagnée
   répond elle-même, sur une tablette ou son téléphone, et elle peut avoir des
   difficultés de vue, un tremblement, une gêne à manier un écran tactile.

   Ce que cette portée impose, et pourquoi :
   - le corps de texte à 1,75 rem (28 px) et la question à 2 rem : les six
     règles du § 7.9 demandent douze points au moins, ici on triple ;
   - une zone tactile de 4,5 rem (72 px) par bouton, pleine largeur : un doigt
     qui tremble ne doit pas pouvoir toucher deux réponses ;
   - le choix se surligne sans que la couleur porte seule l'information : la
     bordure épaissit, le fond change, et le mot reste ;
   - rien ne défile : une question, cinq boutons, deux gestes, sur un écran.

   **Le feu tricolore, décision du 23 septembre 2026 au soir.** La première
   version était grise et blanche, et la direction l'a trouvée trop sobre : le
   benchmark des bornes de satisfaction (HappyOrNot, bornes du NHS) donne le
   format que le public a déjà rencontré, un visage et une couleur par cran,
   du vert foncé au rouge brique. Chaque carte porte sa teinte en bordure, en
   visage et en fond pâle ; la carte choisie se remplit de sa teinte et passe
   en texte blanc. Un daltonien confond le vert et le rouge : le visage, le
   mot et la luminosité (le vert est sombre, l'orange clair) restent, et c'est
   pourquoi rien ici ne tient à la seule couleur. Une ligne de six points dit
   où l'on en est sans lire « Question 2 sur 6 », et sur une tablette en
   paysage les cinq boutons se rangent en ligne, comme sur une borne.

   Tout passe par les variables de la palette, comme partout. */
.kiosque-enquete {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1.35;
}
.kiosque-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.kiosque-page--merci { justify-content: center; text-align: center; }
.kiosque-rang {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
/* La progression en points : une par question, pleines jusqu'à celle-ci.
   Purement visuelle, ``aria-hidden`` : le texte « Question 2 sur 6 » la dit
   déjà au lecteur d'écran. */
.kiosque-progression {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.kiosque-point {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: var(--color-white);
}
.kiosque-point--fait { background: var(--color-primary); }
.kiosque-question {
  margin: 0 0 0.35rem;
  padding: 0.75rem 1rem;
  border-left: 8px solid var(--color-accent);
  background: var(--color-white);
  border-radius: 0 12px 12px 0;
  font-size: 2.15rem;
  line-height: 1.25;
  font-weight: 700;
}
.kiosque-aide {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--color-text-muted);
}
.kiosque-reproche {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--color-danger);
  background: var(--color-danger-doux);
  color: var(--color-danger-fort);
  font-size: 1.35rem;
  font-weight: 600;
}
.kiosque-formulaire { display: flex; flex-direction: column; flex: 1; }
.kiosque-choix-groupe { border: 0; margin: 0; padding: 0; }
.kiosque-choix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 1.25rem;
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Le bouton radio reste dans la page pour le clavier et le lecteur d'écran ;
   c'est l'étiquette entière qui se touche. */
.kiosque-choix input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.kiosque-choix:has(input:focus-visible) {
  outline: 4px solid var(--color-accent);
  outline-offset: 3px;
}
.kiosque-choix:has(input:checked) {
  border-width: 4px;
  color: var(--color-white);
}
/* Chaque cran porte sa teinte : bordure, visage et fond pâle au repos, fond
   plein et texte blanc une fois choisi. Les cinq règles se suivent dans
   l'ordre des crans, et la teinte choisie a la même luminosité que celle du
   visage au repos : ce qu'on a touché reste ce qu'on a vu. */
.kiosque-choix--tres-content { border-color: var(--color-kiosque-tres); background: var(--color-kiosque-tres-doux); }
.kiosque-choix--tres-content .kiosque-visage { color: var(--color-kiosque-tres); }
.kiosque-choix--tres-content:has(input:checked) { background: var(--color-kiosque-tres); }
.kiosque-choix--content { border-color: var(--color-kiosque-oui); background: var(--color-kiosque-oui-doux); }
.kiosque-choix--content .kiosque-visage { color: var(--color-kiosque-oui); }
.kiosque-choix--content:has(input:checked) { background: var(--color-kiosque-oui); }
.kiosque-choix--peu-content { border-color: var(--color-kiosque-peu); background: var(--color-kiosque-peu-doux); }
.kiosque-choix--peu-content .kiosque-visage { color: var(--color-kiosque-peu); }
.kiosque-choix--peu-content:has(input:checked) { background: var(--color-kiosque-peu); }
.kiosque-choix--pas-content { border-color: var(--color-kiosque-non); background: var(--color-kiosque-non-doux); }
.kiosque-choix--pas-content .kiosque-visage { color: var(--color-kiosque-non); }
.kiosque-choix--pas-content:has(input:checked) { background: var(--color-kiosque-non); }
.kiosque-choix--sans-avis { border-color: var(--color-kiosque-sans); background: var(--color-kiosque-sans-doux); }
.kiosque-choix--sans-avis .kiosque-visage { color: var(--color-kiosque-sans); }
.kiosque-choix--sans-avis:has(input:checked) { background: var(--color-kiosque-sans); }
.kiosque-visage { display: inline-flex; color: var(--color-primary); flex: none; }
.kiosque-visage svg { width: 3.5rem; height: 3.5rem; }
.kiosque-choix:has(input:checked) .kiosque-visage { color: inherit; }
.kiosque-visage--merci { justify-content: center; margin: 0 0 1rem; color: var(--color-succes); }
.kiosque-visage--merci svg { width: 6rem; height: 6rem; }
.kiosque-mot { font-size: 1.6rem; font-weight: 600; }
.kiosque-choix:has(input:checked) .kiosque-mot::after {
  content: " ✓";
}
.kiosque-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
}
.kiosque-bouton {
  flex: 1;
  min-height: 4rem;
  padding: 0.5rem 1rem;
  border: 3px solid var(--color-primary);
  border-radius: 14px;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
}
.kiosque-bouton--valider { background: var(--color-primary); color: var(--color-white); }
.kiosque-bouton--retour { background: var(--color-white); color: var(--color-primary); flex: 0 0 auto; }
.kiosque-bouton:focus-visible { outline: 4px solid var(--color-accent); outline-offset: 3px; }
.kiosque-pied {
  margin: 1rem 0 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* L'indice de satisfaction sur le bilan : un chiffre, son assiette a cote. */
.compteur--indice strong { font-size: 1.35rem; color: var(--color-primary); }

/* L'etiquette remplit la carte ; la case, invisible, la recouvre et se touche partout. */
.kiosque-etiquette { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.5rem; cursor: pointer; }

/* Sur un telephone, tout tient sans defiler : la question, les cinq boutons et
   « Suivant » sur un seul ecran. Les boutons gardent 4 rem (64 px), au-dessus
   de ce qu'un doigt qui tremble demande ; c'est l'air autour qui se resserre. */
@media (max-width: 420px), (max-height: 760px) {
  .kiosque-page { padding: 0.75rem 0.75rem 1rem; }
  .kiosque-rang { font-size: 1rem; margin-bottom: 0.25rem; }
  .kiosque-question { font-size: 1.7rem; margin-bottom: 0.2rem; }
  .kiosque-aide { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .kiosque-choix { min-height: 4rem; margin-bottom: 0.5rem; padding: 0.35rem 1rem; }
  .kiosque-visage svg { width: 2.5rem; height: 2.5rem; }
  .kiosque-mot { font-size: 1.4rem; }
  .kiosque-bouton { min-height: 3.5rem; font-size: 1.35rem; }
  .kiosque-actions { padding-top: 0.6rem; }
  .kiosque-pied { font-size: 0.9rem; margin-top: 0.6rem; }
  .kiosque-progression { margin-bottom: 0.5rem; }
}

/* Sur une tablette en paysage, ou un écran large, les cinq boutons se
   rangent en ligne comme sur une borne : le visage au-dessus du mot, chaque
   carte aussi haute qu'un doigt posé à plat. La page s'élargit pour les
   loger sans les serrer. */
@media (min-width: 880px) {
  .kiosque-page { max-width: 64rem; }
  .kiosque-choix-groupe { display: flex; gap: 0.75rem; }
  .kiosque-choix { flex: 1 1 0; margin: 0; min-height: 9.5rem; padding: 0.75rem 0.5rem; }
  .kiosque-etiquette { flex-direction: column; justify-content: center; text-align: center; gap: 0.5rem; }
  .kiosque-visage svg { width: 4rem; height: 4rem; }
  .kiosque-mot { font-size: 1.35rem; line-height: 1.2; }
  .kiosque-actions { margin-top: 1.5rem; }
}