/* ══════════════════════════════════════════════════════════════════════
   BGFI Taskflow — feuille des écrans.
   Couleurs : « jetons.css ». Coque et écrans d'accès : « coque.css ».
   Polices servies localement : Inter (texte) et IBM Plex Mono (références
   et chiffres alignés). Aucune autre — DM Sans et Plus Jakarta Sans, restes
   de l'ancienne page de connexion, ont été retirées le 2026-10-10.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Polices vendues en local (intranet : pas de CDN) ── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

/* ── Jetons de couleur : voir « jetons.css », chargée avant cette feuille.
   Les variables historiques (--ink, --ground, --brand…) y sont réécrites en
   alias des jetons de la charte : les règles ci-dessous n'ont pas bougé. ── */

* { box-sizing: border-box; }
body {
  /* Aucune marge ici : la coque (rail + en-tete + pied) gouverne la mise en
     page, et un rail plein ecran ne supporte pas un padding de body. */
  margin: 0; background: var(--app-bg); color: var(--text);
  font: .875rem/1.55 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:is(button, select, input, textarea, a):focus-visible { outline: var(--focus); outline-offset: 2px; }
a { color: var(--brand); }

/* ── Mouvements — sobres, courts, désactivés si préférence système.
       L'entrée des écrans est portée par la cascade des cartes (plus bas) :
       le titre et le fil d'Ariane, eux, s'affichent sans délai. ── */
@media (prefers-reduced-motion: no-preference) {
  button, .rail-nav a, .tuile, .alerte-ligne, .cloche {
    transition: background-color .15s ease-out, color .15s ease-out,
                border-color .15s ease-out, box-shadow .15s ease-out,
                opacity .15s ease-out, transform .12s ease-out;
  }
  button:active { transform: translateY(1px); }
  .tuile:hover { transform: translateY(-2px); }
  .tuile:active { transform: translateY(0); }
}
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.error { color: var(--crit); }

/* ── Coquille, rail et connexion : voir « coque.css ».
   Les règles correspondantes ont été retirées d'ici le 2026-10-09, lors du
   passage à la charte BGFI — elles vivaient sous d'autres noms de classe
   (.shell, .sidebar, .login-*) et auraient fait doublon. ── */
/* Table sans bordures (fiches lisibles : identités, bilans). */
.table.sans-bordure { border: 0; }
.table.sans-bordure th, .table.sans-bordure td { border: 0; padding: 7px 8px; }
.table.sans-bordure th { width: 180px; font-weight: 600; color: var(--ink-2, #5a6b7d); }
/* Zone de danger (suppression confirmée) + bouton danger. */
.btn.danger {
  background: #b3261e; color: #fff;
}
.btn.danger:hover { background: #93190f; }
.zone-danger { border-left: 4px solid #b3261e; }
.zone-danger h2 { color: #b3261e; }

/* La colonne de contenu appartient à la coque : elle s'appelle « .contenu »
   (coque.css §1) et porte déjà sa disposition. L'ancienne classe « .content »
   n'existe dans aucun gabarit depuis la refonte à la charte — la régler ici
   ne faisait plus rien du tout. */

/* Onglets de filtre (page Alertes) */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.onglets a {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
  text-decoration: none;
}
.onglets a:hover { color: var(--ink); border-color: var(--ink-3); }
.onglets a[aria-current="page"] {
  background: var(--action); border-color: var(--action); color: #fff;
}
/* Compteur porté par une pastille d'onglet : il dit combien de lignes se
   cachent derrière le filtre, pour qu'on sache avant de cliquer si l'écran
   vaut le détour. Discret sur l'onglet au repos, lisible sur l'onglet actif. */
.onglets .compte {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface); color: var(--ink-3);
  border: 1px solid var(--line);
}
.onglets a[aria-current="page"] .compte {
  background: color-mix(in srgb, #fff 24%, transparent);
  color: #fff; border-color: transparent;
}

/* ── Navigation dans les pages : fil d'Ariane, précédent/suivant ── */
.fil-ariane {
  font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.fil-ariane a { color: var(--ink-2); text-decoration: none; }
.fil-ariane a:hover { color: var(--brand); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--ink-2); font-weight: 500; }
.fil-ariane .sep { color: var(--ink-3); }
.nav-fiche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-fiche .position { margin-inline: auto; font-size: 12px; color: var(--ink-3); }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--surface-2); }

/* ── En-tête de page ── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.page-head .muted { font-size: 13px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Boutons ── */
.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--surface);
  border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 13px;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.small-btn { font-size: 12px; padding: 4px 10px; }

/* ── Messages ── */
.message { padding: 8px 12px; border-radius: 8px; margin: 0; }
.message.success { background: var(--good-soft); color: var(--good); }
.message.error { background: var(--crit-soft); color: var(--crit); }

/* ── Filtres : une barre posée sur la même surface que les cartes ── */
.filtres {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
}
.filtres input, .filtres select {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; font-size: 13px;
}
.filtres input:hover, .filtres select:hover { border-color: var(--ink-3); }
.filtres input[type="search"] { min-width: 200px; flex: 1; max-width: 340px; }
.filtre-label { font-size: 12px; font-weight: 500; color: var(--ink-2); }

/* ── Table ── */
.tbl-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
}
/* Le `min-width` ci-dessus vise le registre, large de huit colonnes : il
   garantit qu'on ne le comprime pas jusqu'à l'illisible. Une petite table de
   trois colonnes placée dans une demi-largeur n'en a pas besoin, et l'hériter
   la fait déborder de la page. */
.table.compacte { min-width: 0; }

.table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface);
}
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child :is(td, th) { border-bottom: 0; }
/* Imbriquée dans une carte, la table n'empile pas une seconde surface. */
.carte .table, .carte-reglage .table { border: 0; border-radius: 0; box-shadow: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table a { color: var(--brand); text-decoration: none; }
.table a:hover { text-decoration: underline; }
/* Colonne porteuse du sens (intitulé d'une activité, d'une proposition) :
   elle prend la largeur, les dates et les badges se serrent autour. */
.table .col-large { width: 38%; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 2.5px 9px; border-radius: 999px; white-space: nowrap;
}
.badge.ok { background: var(--good-soft); color: var(--good); }
.badge.off { background: var(--surface-2); color: var(--ink-2); }
/* Priorité : rampe ordinale bleue (pas de rouge/orange — la priorité n'est pas une alerte) */
.badge.prio-1 { background: var(--p1); color: #fff; }
.badge.prio-2 { background: var(--p2); color: #fff; }
.badge.prio-3 { background: var(--p3); color: #0d141b; }
.badge.prio-4 { background: var(--p4); color: #0d141b; }
/* Notations du suivi mensuel des collaborateurs (1 = faible → 4 = excellent) */
.badge.note-4 { background: var(--good-soft); color: var(--good); }
.badge.note-3 { background: var(--brand-soft); color: var(--brand-strong); }
.badge.note-2 { background: var(--warn-soft); color: var(--warn); }
.badge.note-1 { background: var(--crit-soft); color: var(--crit); }
.grille-eval td { text-align: center; }
.grille-eval td.critere { text-align: left; font-weight: 600; }
.barre-score {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; margin-bottom: 2px;
}
.barre-score span { display: block; height: 100%; background: var(--accent); }
/* Statuts : couleurs réservées, toujours avec libellé */
.badge.statut-non_echu { background: var(--surface-2); color: var(--ink-2); }
.badge.statut-en_cours { background: var(--brand-soft); color: var(--brand-strong); }
.badge.statut-realise { background: var(--good-soft); color: var(--good); }
.badge.statut-en_retard { background: var(--crit-soft); color: var(--crit); }

/* États d'une proposition de tâche (2026-09-24). */
/* Moment de la demande (2026-10-16) : arbitrer avant, confirmer après. Deux
   teintes sobres — ce n'est pas un état, c'est une nature, et elle ne doit pas
   disputer la lecture au badge d'état qui, lui, appelle une action. */
/* Un engagement récurrent suspendu reste lisible — il n'est pas supprimé —
   mais cesse d'attirer l'œil : c'est de l'archive vivante, pas de l'actualité. */
/* Une cadence de rappel se lit d'un bloc : « J-30, 7, 1 » coupé sur trois
   lignes ne se lit plus du tout. La mention « par défaut » passe dessous, où
   elle n'encombre pas la valeur. */
.col-cadence { white-space: nowrap; }
.cadence-defaut { display: block; }

.ligne-suspendue { opacity: .62; }
.ligne-suspendue a { color: var(--ink-2); }

.badge.moment-avant { background: var(--surface-2); color: var(--ink-2); }
.badge.moment-apres { background: var(--accent-soft); color: var(--accent); }

/* Second rang d'onglets : un filtre qui se combine au premier, donc visuellement
   en retrait pour qu'on ne le prenne pas pour une seconde navigation. */
.onglets-second { margin-top: 8px; }
.onglets-second a { font-size: 12px; background: transparent; }

.badge.etat-en_attente { background: var(--warn-soft); color: var(--warn); }
.badge.etat-acceptee { background: var(--good-soft); color: var(--good); }
.badge.etat-refusee { background: var(--crit-soft); color: var(--crit); }

/* Encadré d'un motif de refus. */
.carte.alerte { border-left: 3px solid var(--crit); }

/* ══════════════════════════════════════════════════════════════════════
   Carte — LE conteneur de l'application (fiches, panneaux, formulaires,
   sections de réglages). Une seule définition : tout écran qui pose du
   contenu dans une surface utilise cette famille.
   ══════════════════════════════════════════════════════════════════════ */
.carte, .carte-reglage, .fiche-grid, .formulaire {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.carte, .carte-reglage, .formulaire { padding: 24px; }

/* En-tête de carte : titre + phrase d'explication. */
.carte > h2, .carte-reglage h2, .carte > header h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.carte > h2 .btn { margin-left: auto; }
.carte > h2, .carte-reglage > header { margin-bottom: 16px; }
.carte > header { margin-bottom: 16px; }
.carte > header h2 + p, .carte-reglage header p {
  margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.carte h2 .badge, .carte-reglage h2 .badge { vertical-align: middle; font-size: 11px; }

.fiche-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
  padding: 24px; margin-bottom: 0;
}
.fiche-grid dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.fiche-grid dd { margin: 0; font-size: 13.5px; }

/* ── Champs de saisie : une seule hauteur, un seul rayon, partout ── */
.formulaire p { margin: 0 0 16px; }
.formulaire label, .field label, .champ-reglage > label {
  display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px;
}
.formulaire :is(input[type="text"], input[type="email"], input[type="password"],
                input[type="date"], input[type="number"], input[type="tel"],
                input[type="search"], select),
.field input,
.champ-reglage :is(input, select) {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 13.5px;
}
.formulaire textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 13.5px;
}
.formulaire :is(input, select, textarea):hover,
.champ-reglage :is(input, select):hover { border-color: var(--ink-3); }

.errorlist { color: var(--crit); font-size: 12.5px; list-style: none; padding: 0; margin: 4px 0 0; }
.apercu-priorite { font-size: 14px; padding: 12px; background: var(--surface-2); border-radius: 8px; }
.aide { font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* ── Planification : calendrier mensuel ── */
.nav-mois { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.planif-layout { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.calendrier { table-layout: fixed; }
.calendrier .cal-th {
  width: 14.28%; text-align: center; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.calendrier td { vertical-align: top; height: 84px; border-bottom: 1px solid var(--line); }
.cal-jour { padding: 5px 6px; height: 100%; }
.cal-jour.hors-mois { background: var(--surface-2); color: var(--ink-3); }
.cal-jour.aujourdhui { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.cal-jour.aujourdhui .cal-num { color: var(--accent); font-weight: 700; }
.cal-num { font-size: 11.5px; font-weight: 600; color: var(--ink-3); display: block; margin-bottom: 2px; }
.cal-ev {
  display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; padding: 3px 6px;
  border-radius: 5px; border-left: 3px solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; background: var(--surface-2); color: var(--ink);
}
.cal-ev:hover { text-decoration: none; filter: brightness(1.05); }
.cal-ev.statut-non_echu { border-color: var(--ink-3); }
.cal-ev.statut-en_cours { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.cal-ev.statut-realise { border-color: var(--good); background: var(--good-soft); color: var(--good); text-decoration: line-through; }
.cal-ev.statut-en_retard { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }

/* ── Charge par RMO ── */
.charge { width: 300px; flex-shrink: 0; }
.charge-ligne { padding: 7px 0; border-bottom: 1px solid var(--line); }
.charge-ligne:last-child { border-bottom: 0; }
.charge-ligne a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; }
.charge-ligne a:hover { color: var(--brand); }
.charge-bar { display: flex; gap: 2px; height: 16px; border-radius: 3px; overflow: hidden; margin: 4px 0 2px; background: var(--surface-2); }
.charge-bar .seg { height: 100%; border-radius: 3px; min-width: 0; }
.seg.retard { background: var(--crit); }
.seg.ouvertes { background: var(--brand); }
.seg.realisees { background: var(--good); }
.seg.vide { background: var(--surface-2); }
.charge-total { font-size: 11.5px; color: var(--ink-2); text-align: right; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--ink-2); font-size: 11.5px; }
.legende-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* ── Tableau de bord ── */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.tuile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px; display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--ink);
}
a.tuile:hover { background: var(--surface-2); }
.tuile-valeur { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.tuile-libelle { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tuile.note { font-size: 11.5px; color: var(--ink-3); }
.tuile.statut-non_echu { border-top: 3px solid var(--ink-3); }
.tuile.statut-en_cours { border-top: 3px solid var(--brand); }
.tuile.statut-realise { border-top: 3px solid var(--good); }
.tuile.statut-en_retard { border-top: 3px solid var(--crit); }
.tuile.taux { border-top: 3px solid var(--accent); }
.alertes-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.alertes-colonnes h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.alerte-ligne { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.alerte-ligne:hover { background: var(--surface-2); text-decoration: none; }
.alerte-ligne .mono { color: var(--ink-3); font-size: 11.5px; margin-right: 4px; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.rep-libelle { font-size: 13px; color: var(--ink-2); min-width: 110px; }
.seg.prio-bar { background: var(--brand); border-radius: 3px; }
.compteur { margin: 0 0 8px; }

/* ── Notifications ── */
tr.non-lue { font-weight: 500; }
tr.non-lue td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.badge.notif-rappel { background: var(--brand-soft); color: var(--brand-strong); }
.badge.notif-retard { background: var(--crit-soft); color: var(--crit); }
.badge.notif-alerte_up { background: var(--warn-soft); color: var(--warn); }
.cloche.a-alerte { color: var(--rail-ink); font-weight: 600; }

/* ── Responsive (ENF : téléphones) ── */
@media (max-width: 860px) {
  .planif-layout { flex-direction: column; }
  .charge { width: 100%; }
  .calendrier td { height: 60px; }
  body { padding-inline: 12px; }
}
@media (max-width: 480px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .table { font-size: 12.5px; }
  .tuile-valeur { font-size: 22px; }
}
/* ── Pages dédiées : compteurs, charge par collaborateur, matrice des rôles ── */
.compteurs { display: flex; flex-wrap: wrap; gap: 12px; }
.compteur-carte {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  background: var(--surface); text-decoration: none; color: var(--ink-2);
  min-width: 140px;
}
.compteur-carte strong { font-size: 20px; color: var(--ink); }
.compteur-carte span { font-size: 12px; }
.compteur-carte:hover { border-color: var(--ink-3); }
.compteur-carte.ok strong { color: var(--good); }
.compteur-carte.alerte strong { color: var(--crit); }
.compteur-carte.selectionnee { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cel-charge { min-width: 120px; }
.table .num { text-align: right; }
.table tfoot th { border-top: 2px solid var(--line); }
.critique { color: var(--crit); font-weight: 700; }
.cal-num { color: inherit; text-decoration: none; }
a.cal-num:hover { color: var(--brand); text-decoration: underline; }
.badge.alerte-badge { background: var(--crit-soft); color: var(--crit); }
.filtre-actif { margin: -4px 0 10px; color: var(--ink-2); }
.filtre-actif a { color: var(--brand-strong); }
.onglets.periode { margin-bottom: 12px; }
.matrice-droits { margin-top: 18px; }
.matrice-droits h2 { margin-top: 0; }

.badge.notif-assignation { background: var(--good-soft); color: var(--good); }

/* ── Double authentification : saisie du code (2026-09-24) ───────────────── */
.champ-code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 26px;
  letter-spacing: 12px;
  text-align: center;
}

.lien-bouton {
  background: none;
  border: 0;
  padding: 4px;
  font: inherit;
  font-size: 13px;
  color: var(--brand-strong);
  cursor: pointer;
  text-decoration: underline;
}
.lien-bouton:hover { color: var(--action-hover); }

/* ══════════════════════════════════════════════════════════════════════
   Écran Paramètres — refonte 2026-09-24
   Deux colonnes : sommaire ancré + cartes de réglages. Tokens et échelle
   d'espacement (4/8/12/16/24/32) de la charte, aucune couleur en dur.
   ══════════════════════════════════════════════════════════════════════ */

.reglages {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* Sommaire collant — repère de position dans un écran long. */
.reglages-sommaire {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.reglages-sommaire strong {
  padding: 4px 8px 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reglages-sommaire a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
}
.reglages-sommaire a:hover { background: var(--surface-2); color: var(--ink); }
.reglages-sommaire a:target,
.reglages-sommaire a[aria-current="true"] { background: var(--brand-soft); color: var(--brand-strong); }

/* Deux piles imbriquées depuis le 2026-09-30 : la colonne contient le
   formulaire des réglages ET le bloc SMTP (qui ne peut pas vivre dedans,
   HTML interdit d'imbriquer un formulaire dans un autre). Le formulaire doit
   donc porter sa propre pile — sinon ses sections se collent les unes aux
   autres et perdent leur entrée en cascade. */
.reglages-colonne, .reglages-pile { display: flex; flex-direction: column; gap: 24px; }

/* La carte de réglage est la carte commune, plus une ancre de défilement. */
.carte-reglage { scroll-margin-top: 16px; }

/* Champs à valeur : deux colonnes qui retombent à une sous 640px. */
.champs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.champ-reglage { display: flex; flex-direction: column; gap: 4px; }
/* Hauteur de libellé réservée : un intitulé qui passe à la ligne ne décale
   plus sa case par rapport aux voisines de la même rangée. */
.champ-reglage > label { min-height: 1.4em; }
/* Les aides s'ancrent en bas de la cellule : les cases restent alignées même
   quand les textes d'aide sont de longueurs très différentes. */
.champ-reglage .aide { margin-top: auto; padding-top: 2px; }
.champ-reglage .erreur { font-size: 12px; color: var(--crit); }

/* ── Interrupteur : LA case à cocher de l'application ────────────────────
   Toute case à cocher d'un formulaire ou d'une carte prend cette forme, pour
   qu'un réglage se lise pareil partout. `.interrupteur` y ajoute la ligne
   cliquable avec libellé et aide. ── */
.interrupteurs { display: flex; flex-direction: column; gap: 4px; }
.interrupteur {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.interrupteur:hover { background: var(--surface-2); }
.interrupteur input[type="checkbox"],
.formulaire input[type="checkbox"],
.carte input[type="checkbox"],

.interrupteur .libelle { display: flex; flex-direction: column; gap: 2px; }
.interrupteur .libelle span { font-size: 13px; font-weight: 500; }

/* Case à cocher rendue par `{{ form.as_p }}` : le libellé passe à côté. */
.formulaire p:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.formulaire p:has(> input[type="checkbox"]) label { margin-bottom: 0; }

/* Barre d'enregistrement collée en bas de l'écran. */
.barre-enregistrer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.barre-enregistrer p { font-size: 12px; color: var(--ink-3); }

/* ── Serveur d'envoi : la carte de saisie et celle de test, côte à côte
   (refonte 2026-09-30). Les deux sont des <form> frères — HTML interdit
   d'imbriquer un formulaire dans un autre, et chacun a son propre
   enregistrement. ── */
.smtp-duo {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  scroll-margin-top: 16px;
}
/* Deux duos se suivent dans la colonne (envoi, puis annuaire) : c'est le
   second et les suivants qui prennent l'écart, pour ne pas décoller le
   premier de la barre d'enregistrement qui le précède. */
.smtp-duo + .smtp-duo { margin-top: 24px; }
.carte-entete-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.carte-entete-badge h2, .carte-test header h2 { display: flex; align-items: center; gap: 8px; }
.badge-smtp {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.badge-smtp.actif { background: var(--good-soft); color: var(--good); border-color: transparent; }
/* Aide de carte : elle porte le mode d'emploi, les champs n'en ont plus. */
.aide-carte { display: block; margin: 0 0 18px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* Grille de 12 colonnes : Serveur 6, Port 3, Chiffrement 3, puis des paires.
   `col-12` sert aux valeurs longues qu'on ne peut pas tronquer sans les rendre
   illisibles — la base de recherche de l'annuaire, par exemple. */
.smtp-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.smtp-grille .col-3 { grid-column: span 3; }
.smtp-grille .col-6 { grid-column: span 6; }
.smtp-grille .col-12 { grid-column: span 12; }
.champ-reglage label .note { color: var(--ink-3); font-weight: 400; }
/* La case s'aligne sur la ligne de base des champs voisins, pas sur le haut
   de sa cellule : son libellé occupe la place du libellé des autres. */
.smtp-case { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10px; }
.smtp-case label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.smtp-case input { width: 16px; height: 16px; accent-color: var(--action); }
.smtp-case .erreur { font-size: 12px; color: var(--crit); }
.smtp-pied {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.smtp-pied p { margin: 0; font-size: 12px; }
.smtp-teste { color: var(--good); }

.bloc-test { display: flex; flex-direction: column; gap: 12px; }
.btn.pleine { display: block; width: 100%; text-align: center; }
.lien-apercu { margin: 12px 0 0; text-align: center; font-size: 12px; }

@media (max-width: 1040px) {
  .smtp-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .smtp-grille { grid-template-columns: minmax(0, 1fr); }
  .smtp-grille .col-3, .smtp-grille .col-6, .smtp-grille .col-12 { grid-column: span 1; }
  .smtp-case { padding-bottom: 0; }
}

@media (max-width: 960px) {
  .reglages { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .reglages-sommaire { position: static; flex-direction: row; flex-wrap: wrap; }
  .reglages-sommaire strong { width: 100%; }
}
@media (max-width: 640px) {
  .carte-reglage { padding: 16px; }
  .barre-enregistrer { padding: 12px 16px; }
}

/* Motion : discrète, réservée aux changements d'état. */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée en cascade : les cartes d'un écran arrivent l'une après l'autre.
     Le conteneur s'appelle « .contenu » depuis la refonte à la charte ; visée
     sur l'ancien « .content », cette cascade ne s'appliquait plus à rien. */
  .contenu > :is(.carte, .carte-reglage, .fiche-grid, .formulaire, .tuiles, .table, .tbl-wrap, .filtres),
  .contenu > .deux-colonnes > .carte,
  .reglages-colonne > :is(.carte, .carte-reglage, .formulaire),
  .reglages-pile > :is(.carte, .carte-reglage, .formulaire),
  .smtp-duo > .carte {
    animation: carte-entree 280ms ease-out both;
  }
  .contenu > *:nth-child(3) { animation-delay: 50ms; }
  .contenu > *:nth-child(4) { animation-delay: 100ms; }
  .contenu > *:nth-child(5) { animation-delay: 150ms; }
  .contenu > *:nth-child(n + 6) { animation-delay: 150ms; }
  /* Les deux colonnes arrivent toujours en milieu d'écran : leurs cartes
     prennent le retard de leur rang, sinon elles doubleraient leurs aînées
     (le délai posé sur le parent ne se transmet pas à l'enfant). */
  .contenu > .deux-colonnes > .carte { animation-delay: 150ms; }
  .contenu > .deux-colonnes > .carte:nth-child(2) { animation-delay: 190ms; }
  .reglages-colonne > *:nth-child(2) { animation-delay: 40ms; }
  .reglages-colonne > *:nth-child(3) { animation-delay: 80ms; }
  .reglages-colonne > *:nth-child(4) { animation-delay: 120ms; }
  .reglages-colonne > *:nth-child(n + 5) { animation-delay: 160ms; }
  .reglages-pile > *:nth-child(2) { animation-delay: 40ms; }
  .reglages-pile > *:nth-child(3) { animation-delay: 80ms; }
  .reglages-pile > *:nth-child(4) { animation-delay: 120ms; }
  .reglages-pile > *:nth-child(n + 5) { animation-delay: 160ms; }
  .smtp-duo > *:nth-child(2) { animation-delay: 40ms; }
  @keyframes carte-entree {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .reglages-sommaire a,
  .interrupteur,
  .compteur-carte,
  .onglets a,
  .filtres :is(input, select),
  .formulaire :is(input, select, textarea),
  .champ-reglage :is(input, select) {
    transition: background 160ms ease-out, border-color 160ms ease-out,
                color 160ms ease-out, box-shadow 160ms ease-out;
  }
  :is(.interrupteur, .formulaire, .carte) input[type="checkbox"] {
    transition: background 160ms ease-out;
  }
  :is(.interrupteur, .formulaire, .carte) input[type="checkbox"]::after {
    transition: transform 160ms ease-out;
  }

  /* Filtrage de la liste : le tableau est remplacé sur place, sans changement
     de page. Il s'estompe le temps de la requête — sinon les lignes sautent
     d'un jeu à l'autre et l'œil perd sa ligne. « htmx-request » est posée par
     HTMX sur la zone désignée par hx-indicator, pendant la requête. */
  #zone-resultats { transition: opacity 180ms ease-out; }
  #zone-resultats.htmx-request { opacity: .45; }
}

/* ── Fiche système & plan de déploiement (2026-09-24) ────────────────────── */

.chiffres-cles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.chiffre {
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
  text-align: center;
}
.chiffre strong { display: block; font-size: 24px; line-height: 1.2; color: var(--brand-strong); }
.chiffre span { font-size: 12px; color: var(--ink-2); }

/* Chaîne de traitement : une couche par ligne, reliée par un filet. */
.chaine { margin: 0; padding: 0; list-style: none; }
.chaine li {
  position: relative;
  padding: 0 0 16px 24px;
  border-left: 2px solid var(--line);
}
.chaine li:last-child { padding-bottom: 0; border-left-color: transparent; }
.chaine li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--brand);
  border: 2px solid var(--surface);
  border-radius: 50%;
}
.chaine strong { display: block; font-size: 13px; }
.chaine span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* Étapes numérotées du plan de déploiement. */
.etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.etapes li { display: flex; gap: 12px; align-items: flex-start; }
.etapes .numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}
.etapes strong { font-size: 13px; }
.etapes p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* Journal des versions. */
.version + .version { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.version-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.version ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.carte-reglage .table th[scope="row"] {
  width: 40%;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
}

/* Fiches collaborateur sans compte — dette à résorber (2026-09-24). */
.liste-fiches { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.liste-fiches li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 13px;
}

/* Une zone de texte occupe toute la largeur de la grille de champs. */
.champ-reglage.pleine-largeur { grid-column: 1 / -1; }

/* Compteur de caractères (2026-10-16) : posé par `js/formulaires.js` sous le
   champ qui le demande. Discret par défaut, il ne se fait voir qu'à
   l'approche de la limite — un compteur toujours rouge n'avertit plus. */
.champ-compteur {
  align-self: flex-end;
  font-variant-numeric: tabular-nums;   /* le chiffre ne fait pas sautiller la ligne */
  font-size: 11.5px; color: var(--ink-3);
}
.champ-compteur.proche-limite { color: var(--warn, var(--crit)); font-weight: 600; }

/* Un intitulé en pleine largeur se lit en plus grand : c'est le champ dont on
   relit la fin avant d'enregistrer. */
.champ-reglage.pleine-largeur input[type="text"] { font-size: 14.5px; height: 44px; }
.champ-reglage textarea {
  width: 100%; padding: 10px 12px; font-size: 13.5px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
.champ-reglage textarea:hover { border-color: var(--ink-3); }
/* Une grille de champs vide ne doit pas créer d'espace fantôme. */
.champs-grille:empty, .interrupteurs:empty { display: none; }
.interrupteurs:not(:empty) + .champs-grille:not(:empty) { margin-top: 16px; }

/* Rangée d'actions en pied de carte — quand la page porte plusieurs
   formulaires indépendants, la barre collante n'aurait pas de sens. */
.carte > .actions,
.carte form > .actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.chiffres-cles.sans-filet { margin-top: 0; padding-top: 0; border-top: 0; }
.chiffre strong small { font-size: 14px; font-weight: 500; color: var(--ink-3); }

/* ── Bilan d'évaluation : pleine largeur, sélecteur d'année (2026-09-25) ──── */
.carte.bilan { grid-column: 1 / -1; }
.bilan-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bilan-annee { display: flex; align-items: center; gap: 8px; }
.bilan-annee label { font-size: 12px; color: var(--ink-2); }
.bilan-annee select {
  height: 40px; padding: 0 12px; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
.bilan-annee select:hover { border-color: var(--ink-3); }
.bilan-criteres { margin-top: 16px; }
.bilan-criteres th[scope="row"] { width: 30%; }
/* Jauge d'un critère — le pourcentage reste écrit à côté (la couleur seule
   ne porte jamais l'information). */
.jauge {
  display: inline-block; vertical-align: middle;
  width: 140px; max-width: 45%; height: 8px; margin-right: 8px;
  background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.jauge-part { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* ── Onglet Profil : en-tête identitaire (2026-09-25) ─────────────────────── */
.profil-tete { align-items: center; }
.profil-identite { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profil-medaillon {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--brand-soft); color: var(--brand-strong);
  border-radius: 50%;
  font-size: 20px; font-weight: 600; line-height: 1;
}
.profil-qualites {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; font-size: 13px;
}
/* Les fiches de Mon profil : libellés lisibles sans écraser les valeurs. */
.deux-colonnes .table.sans-bordure th { width: 42%; }

/* ── Mot de passe oublié (2026-09-25) ─────────────────────────────────────── */

/* Champ en erreur : le cadre vire au rouge, l'information n'est pas portée
   par la seule couleur (le message l'accompagne toujours). */


/* == Tendance mois par mois (historique, 2026-10-19) ======================
   Une colonne par mois : la hauteur est le volume du, le remplissage la part
   faite dans les delais. Un seul axe, une seule teinte en deux pas.

   La piste est un melange de l'accent du theme avec la surface du theme :
   derivee de la surface, elle reste visible dans les quatre themes sans
   qu'aucune couleur ne soit ecrite en dur. Le sombre a ses propres jetons,
   ce n'est pas une inversion du clair.

   Les deux remplissages sont separes par deux pixels de surface -- un trait
   de contour ajouterait de l'encre qui n'est pas de la donnee. */

.tendance { display: flex; flex-direction: column; gap: 14px; }

.tendance-cadre {
  position: relative;
  --plot: 190px;
  --libelles: 1.7rem;
  padding-left: 2.4rem;
}

/* Graduations : la boite fait exactement la hauteur du trace, pour qu'un
   pourcentage de `bottom` tombe sur la bonne valeur de l'axe. */
.tendance-graduations {
  position: absolute; left: 2.4rem; right: 0;
  bottom: var(--libelles); height: var(--plot);
  pointer-events: none;
}
.tendance-graduation {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.tendance-graduation i {
  position: absolute; right: calc(100% + 8px); top: 0;
  transform: translateY(-50%);
  font-style: normal; font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.tendance-colonnes {
  display: flex; align-items: flex-end; gap: 6px;
  height: calc(var(--plot) + var(--libelles));
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto;
}
/* Ligne de base, posee sur le cadre et non sur la liste : elle ne doit pas
   defiler avec les colonnes sur un telephone. */
.tendance-cadre::after {
  content: ""; position: absolute; left: 2.4rem; right: 0;
  bottom: var(--libelles); height: 1px; background: var(--line);
}

.tendance-colonne {
  flex: 1 0 auto; min-width: 30px; height: 100%;
  display: flex; flex-direction: column;
}
.tendance-pile { position: relative; height: var(--plot); width: 100%; }
.tendance-libelle {
  height: var(--libelles);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
}

.tendance-du, .tendance-fait {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 22px;
  border-radius: 4px 4px 0 0;
}
.tendance-du { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.tendance-fait { background: var(--accent); }
.tendance-fait.avec-ecart { box-shadow: 0 -2px 0 0 var(--surface); }
/* Un mois sans activite due : un tiret sur la ligne de base, pour qu'il se
   distingue d'une colonne qui n'aurait pas ete dessinee. */
.tendance-rien {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 2px; border-radius: 2px; background: var(--line);
}

.tendance-legende {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 0; font-size: 12px; color: var(--ink-2);
}
.tendance-legende .cle { display: inline-flex; align-items: center; gap: 7px; }
.tendance-legende .pastille {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}
.tendance-legende .pastille.fait { background: var(--accent); }
.tendance-legende .pastille.du {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border: 1px solid var(--line);
}

.tendance-chiffres > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  padding: 4px 0;
}
.tendance-chiffres > summary:hover { color: var(--ink); }
.tendance-chiffres[open] > summary { margin-bottom: 8px; }

@media (hover: hover) {
  .tendance-colonne:hover .tendance-du {
    background: color-mix(in srgb, var(--accent) 34%, var(--surface));
  }
}

@media (max-width: 640px) {
  .tendance-cadre { --plot: 150px; }
}

/* == Historique : la periode sur une seule rangee (2026-10-19) ============
   Les deux dates vivaient dans `.champs-grille`, dont chaque colonne reclame
   240 px au minimum : sur une interface pleine largeur elles s etiraient sur
   la moitie de l ecran, et le bouton pendait sous une etiquette vide. Une
   date a une largeur de date. */

.periode-barre {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between;
}
.periode-dates {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
}
.periode-dates label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.periode-dates input[type="date"] {
  width: 9.4rem; height: 36px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 13px;
}
.periode-dates input[type="date"]:hover { border-color: var(--ink-3); }
.periode-retenue { margin: 10px 0 0; }
.precisions-periode { margin: -4px 0 0; }

/* Une seule rangee d outils : le filtre a gauche, l action a droite. L ecran
   empilait pastilles, pave d explication, puis tableau avant d arriver a la
   premiere ligne de donnees. */
.barre-outils {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 12px;
}
.barre-outils form { margin: 0; }

/* Reference et origine repliees sous l intitule : deux colonnes designaient
   la meme activite, dont l une ne servait qu a cliquer. */
.ligne-dessous { display: block; margin-top: 2px; }

/* == Tableau de bord : la precision et ce qui attend (2026-10-19) =========
   La note sous une tuile dit sur quoi porte le chiffre. Elle existait dans le
   balisage de l'historique sans aucune regle : elle se collait au libelle. */
.tuile-note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }

/* Bandeau d'appel : ce qui attend une decision. Discret, mais au-dessus des
   chiffres -- une demande oubliee est une demande refusee sans l'avoir dit. */
.bandeau-action {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.bandeau-action i { color: var(--accent); font-size: 16px; flex: none; }
.bandeau-action .aller {
  margin-left: auto; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.bandeau-action:hover { border-color: var(--accent); }

/* == Le calendrier au telephone (2026-10-19) =============================
   La grille du mois refuse l'empilement en cartes (`data-cartes="non"`) :
   trente et une lignes ne sont plus un calendrier. Reste a la faire tenir
   dans 390 px, sans quoi on ne voit que quatre jours sur sept.

   Le `min-width: 640px` des tables est leve ici, et les libelles des
   activites deviennent des barres de couleur : « LOG-001 » dans cinquante
   pixels ne dit rien, tandis qu'une barre dit « il se passe quelque chose ce
   jour-la » — et le numero du jour, lui, ouvre la liste de la journee. */

@media (max-width: 767px) {
  .calendrier { min-width: 0; font-size: 12px; }
  .calendrier .cal-th { font-size: 9.5px; letter-spacing: 0; padding-inline: 0; }
  .calendrier td { height: 58px; }
  .cal-jour { padding: 3px 2px; }
  .cal-num {
    font-size: 12px; min-height: 26px;
    display: flex; align-items: center; justify-content: center;
  }
  .cal-ev {
    font-size: 0; line-height: 0; height: 5px;
    margin-top: 3px; padding: 0;
    border-left: 0; border-radius: 3px;
  }
  .cal-ev.statut-non_echu { background: var(--ink-3); }
  .cal-ev.statut-en_cours { background: var(--brand); }
  .cal-ev.statut-realise { background: var(--good); text-decoration: none; }
  .cal-ev.statut-en_retard { background: var(--crit); }
  /* La legende garde ses pastilles : elles ont leur propre taille. */
  .cal-ev.legende-pastille { height: 10px; margin-top: 0; }
}

/* == Page « Installer l'application » (2026-10-20) ======================== */

.liste-atouts { margin: 0; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.7; }
.liste-atouts li { margin-bottom: 4px; }

ol.etapes-aide { margin: 0; padding: 0; list-style: none; counter-reset: pas; }
ol.etapes-aide li {
  counter-increment: pas;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55;
}
ol.etapes-aide li:last-child { border-bottom: 0; }
ol.etapes-aide li::before {
  content: counter(pas);
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 50%;
  font-size: 11.5px; font-weight: 700;
}