/* Styles propres à l'application, par-dessus theme.css (charte Azira). */

* { box-sizing: border-box; }

/* La page de connexion a sa propre feuille : public/assets/css/auth.css */

/* Bouton-lien (déconnexion, désactivation) */
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--primary);
}
.link-button:hover { text-decoration: underline; }
.link-button.text-danger { color: rgb(var(--danger-rgb)); }

/* Actions de ligne de tableau : des icones seules, groupees, sans cadre.
   Le cadre soude qu'elles portaient avant pesait autant, sur chaque
   ligne, que la donnee elle-meme ; elles restent visibles (une tablette
   n'a pas de survol) mais discretes, et ressortent au survol de la ligne. */
.actions-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.actions-segmented form { display: contents; }
/* Descendant (pas enfant direct) : un bouton "Supprimer" est dans son propre
   <form> (jeton CSRF), donc petit-fils de .actions-segmented, pas fils. Un
   sélecteur ">" ici le laissait avec les styles par défaut du navigateur
   (icône noire, hors gabarit) au lieu du gris discret des autres actions. */
.actions-segmented .action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-5);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.table > tbody > tr:hover .actions-segmented .action-icon:not(.is-disabled) { color: var(--text-muted); }
/* Action volontairement indisponible (ex. désactiver le compte développeur) */
.actions-segmented .action-icon.is-disabled {
  color: var(--gray-4); cursor: not-allowed;
}
.actions-segmented .action-icon.is-disabled:hover { background: transparent; color: var(--gray-4); }

.actions-segmented .action-icon:hover {
  background: var(--primary-01);
  color: var(--primary);
}
.actions-segmented .action-icon--danger:hover {
  background: rgb(var(--danger-rgb));
  color: #fff;
}
.actions-segmented .action-icon--success:hover {
  background: rgb(var(--success-rgb));
  color: #fff;
}

/* Champ de saisie à icône intégrée — partagé par la page de connexion et
   l'écran « Mon compte ». Vit ici plutôt que dans auth.css, qui n'est chargée
   que par la page de connexion.
   Bordure unique : l'icône est superposée dans le champ plutôt que placée dans
   un .input-group, dont les bordures accolées et les rayons de coin se
   raccordaient mal (surtout avec le bouton « œil » en fin de groupe). */
.auth-champ { position: relative; display: block; }
.auth-champ__icone {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 17px; line-height: 1; color: var(--text-muted);
  pointer-events: none;
}
.auth-champ .form-control {
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: var(--radius-lg);
}
.auth-champ--action .form-control { padding-right: 50px; }

/* Au doigt, la cible du bouton « œil » passe à 48px. */
@media (max-width: 575.98px) {
  .auth-champ .form-control { height: 48px; font-size: 16px; }
  .auth-champ__oeil { width: 44px; height: 44px; }
}
.auth-champ__oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); font-size: 17px;
  cursor: pointer; transition: background .15s, color .15s;
}
.auth-champ__oeil:hover { background: var(--hover-bg); color: var(--text); }
.auth-champ__oeil:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); }
/* Le champ a le focus : l'icône prend la couleur d'accent avec lui. */
.auth-champ .form-control:focus ~ .auth-champ__icone,
.auth-champ .form-control:focus + .auth-champ__icone { color: var(--primary); }
.auth-champ:focus-within .auth-champ__icone { color: var(--primary); }

/* Écran « Mon compte » */
.mon-compte-identite { display: flex; align-items: center; gap: .85rem; }
.mon-compte-identite__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand); color: #fff;
  font-size: 18px; font-weight: 600; letter-spacing: .5px;
}
.mon-compte-identite__nom { font-size: 16px; font-weight: 600; color: var(--text); }

/* Écran technique « Version & mises à jour » (compte développeur) */
.version-actuelle { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.version-actuelle__numero {
  font-size: 30px; font-weight: 600; line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.version-migrations { margin: 0; padding-left: 1.1rem; font-size: 12.5px; }
.version-migrations li { margin-bottom: .2rem; }

.version-note { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.version-note:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.version-note__titre {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
  font-size: 17px; font-weight: 600; margin: 0 0 .75rem;
}
.version-note__date { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.version-note__rubrique {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: .9rem 0 .35rem;
}
.version-note__lignes { margin: 0; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.65; }

/* Onglet Équipe d'un chantier : le choix dans la liste vaut affectation,
   il n'y a donc pas de bouton de validation (cf. equipe-chantier.js). */
.equipe-ajout { max-width: 460px; }
.equipe-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: .6rem;
  border-radius: 50%;
  background: var(--primary-01); color: var(--primary);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  vertical-align: middle;
}

/* Bandeau de page (titre + fil d'Ariane). Même dégradé que l'en-tête, qu'il
   prolonge sans raccord visible. */
.page-banner { background: var(--gradient-header); padding: 1.5rem 1.5rem 3.5rem; color: #fff; }
.page-banner .page-title, .page-banner .breadcrumb-item { color: #fff; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }
.page-banner .breadcrumb-item a { color: rgba(255,255,255,.75); }
.page-banner .breadcrumb-item.active { color: #fff; }
.page-body { padding: 0 1.5rem 1.5rem; margin-top: -2.25rem; }

/* Sidebar mobile : voile derrière le menu */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 105; background: rgba(3,27,78,.4);
}
.sidebar-backdrop.show { display: block; }

/* Actions dans les tables */
.table-actions { white-space: nowrap; text-align: right; }
.table-actions > * + * { margin-left: .75rem; }

/* Zone de glissé-déposé (upload de documents, photos...) */
.dropzone {
  position: relative;
  border: 2px dashed var(--input-border);
  border-radius: var(--radius);
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--surface-alt);
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-01); }
.dropzone__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__icon { font-size: 32px; color: var(--primary); display: block; margin-bottom: .4rem; }
.dropzone__text { color: var(--text-muted); font-size: 13px; }
.dropzone__filename { margin-top: .5rem; font-weight: 500; font-size: 13px; }

/* État "fichier sélectionné" : bordure pleine + fond vert, bien distinct de
   l'état vide en pointillés, pour qu'un dépôt réussi soit sans ambiguïté. */
.dropzone.has-file {
  border-style: solid;
  border-color: rgb(var(--success-rgb));
  background: rgba(var(--success-rgb), .08);
}
.dropzone.has-file .dropzone__icon { color: rgb(var(--success-rgb)); }
.dropzone__filename {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  color: rgb(var(--success-rgb));
  font-size: 14px;
  text-align: left;
}
.dropzone.has-file .dropzone__filename { display: flex; }
.dropzone.has-file .dropzone__text { display: none; }
.dropzone__filename-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.dropzone__filename-size { color: var(--text-muted); font-weight: 400; }
/* Boutons de retrait individuels : doivent passer au-dessus de
   .dropzone__input (position absolute, plein cadre) pour être cliquables. */
.dropzone__filename-remove {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 0 .25rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
}
.dropzone__filename-remove:hover { color: rgb(var(--danger-rgb)); }

/* Glissé-déposé pour réordonner une liste (points de contrôle, questions...) */
/* Réordonnancement par glissé-déposé (reorder-list.js).
   La ligne saisie reste pleinement visible et se soulève : c'est elle qu'on
   suit du regard. L'ancienne règle la passait à opacity:.4, on ne voyait donc
   plus ce qu'on déplaçait. */
.reorder-handle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px;
  cursor: grab;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius);
  touch-action: none;                 /* sinon le doigt fait défiler la page */
  -webkit-user-select: none; user-select: none;
  transition: background .15s, color .15s;
}
.reorder-handle:hover { background: var(--hover-bg); color: var(--text); }
.reorder-handle:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); color: var(--primary); }
.reorder-handle:active { cursor: grabbing; }

.reorder-item.is-dragging {
  position: relative;
  z-index: 5;
  cursor: grabbing;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(3, 27, 78, .18);
  border-radius: var(--radius-lg);
  outline: 1px solid var(--primary-02);
}

/* Lignes de tableau : sans border-collapse:separate, l'ombre portée d'un
   <tr> n'est pas rendue (Reboot met les tables en collapse). Seuls les bords
   bas des cellules sont dessinés par Bootstrap, il n'y a donc pas de bordure
   doublée à craindre. */
table:has(> tbody.reorder-list) { border-collapse: separate; border-spacing: 0; }
.reorder-cellule { white-space: nowrap; }
.reorder-cellule .reorder-index {
  display: inline-block; min-width: 18px;
  font-size: 12px; color: var(--text-muted); text-align: right;
}
/* Les voisins s'écartent visiblement pendant le déplacement. */
.reorder-list.is-reordering .reorder-item:not(.is-dragging) { opacity: .72; }
/* Pas de sélection de texte parasite pendant le glissé. */
body.reorder-en-cours { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* Tableau de bord : grille de widgets déplaçables et redimensionnables
   (reprend le contrôle WinDev "Tableau de bord" et ses événements natifs
   DéplacementWidget()/RedimensionnementWidget()). */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 116px;
  gap: 1rem;
}
@media (max-width: 767.98px) {
  .dashboard-grid { grid-template-columns: repeat(4, 1fr); }
  .dashboard-widget { grid-column: span 4 !important; }
}
/* container-type : permet d'adapter le contenu à la largeur réelle du widget
   (qui dépend de la disposition enregistrée par l'utilisateur, pas seulement
   de celle de la fenêtre) — cf. la requête de conteneur plus bas. */
.dashboard-widget { position: relative; min-width: 0; container-type: inline-size; }
.dashboard-widget > .card { height: 100%; overflow: hidden; }
/* Défilement vertical seulement : un débordement horizontal dans un widget est
   toujours un défaut de mise en page, pas quelque chose à faire défiler. */
.dashboard-widget > .card > .card-body { overflow: hidden auto; }
.dashboard-widget__handle,
.dashboard-widget__resize {
  display: none;
  position: absolute;
  z-index: 2;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  line-height: 1;
}
.dashboard-widget__handle {
  top: .5rem;
  right: .5rem;
  padding: .25rem .4rem;
  cursor: grab;
  font-size: 15px;
}
.dashboard-widget__handle:active { cursor: grabbing; }
.dashboard-widget__resize {
  bottom: .35rem;
  right: .35rem;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  font-size: 14px;
  touch-action: none;
}
.dashboard-grid--edit-mode .dashboard-widget__handle,
.dashboard-grid--edit-mode .dashboard-widget__resize {
  display: inline-flex;
}
.dashboard-grid--edit-mode .dashboard-widget > .card {
  outline: 1px dashed var(--border-card, #ccc);
  outline-offset: 2px;
}
.dashboard-widget.is-dragging { opacity: .4; }
.dashboard-widget.is-resizing { z-index: 3; }
.dashboard-widget.drop-target > .card { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Widget étroit (3 colonnes sur un écran moyen, ou redimensionné petit par
   l'utilisateur) : pastille et textes resserrés, pour que les libellés restent
   entiers au lieu d'être coupés. */
@container (max-width: 250px) {
  .card-body.stat-card { padding: 1rem; }
  .stat-card { gap: .6rem; }
  .stat-card__icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
  .stat-card__title { font-size: 13.5px; }
  .stat-card__row { font-size: 12px; }
}

/* Minuteur de session (en-tête, haut à gauche) : déconnexion automatique
   par inactivité, durée et seuil d'alerte paramétrables (config/session.php). */
.session-timer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  /* En-tête sur dégradé : pastille blanche translucide. */
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
}
.session-timer.is-warning {
  background: rgb(var(--warning-rgb));
  border-color: rgb(var(--warning-rgb));
  color: #fff;
  animation: session-timer-pulse 1.4s ease-in-out infinite;
}
.session-timer.is-critical {
  background: rgb(var(--danger-rgb));
  border-color: rgb(var(--danger-rgb));
  color: #fff;
  animation: session-timer-pulse .7s ease-in-out infinite;
}
@keyframes session-timer-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .82; }
}

/* =========================================================== QCM securite */
/* Composition d'un questionnaire : chaque question est un bloc, ses cases
   dessous, reordonnable par glisse-depose comme les autres listes. */
.qcm-question {
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qcm-question__entete { display: flex; align-items: center; gap: .6rem; }
.qcm-question__titre { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.qcm-question__taux { flex: 0 0 auto; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.qcm-question__edition { padding: .75rem 0 .25rem; }
.qcm-question__ajouts {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--border);
}

.qcm-reponses { list-style: none; margin: .5rem 0 0; padding: 0; }
.qcm-reponse {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0 .25rem 1.7rem;
  font-size: 14px;
}
.qcm-reponse__libelle { flex: 1 1 auto; min-width: 0; }
.qcm-reponse.is-bonne .qcm-reponse__libelle { font-weight: 600; color: rgb(var(--success-rgb)); }
.qcm-reponse__bascule {
  flex: 0 0 auto; border: 0; background: transparent; padding: 0;
  color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.qcm-reponse.is-bonne .qcm-reponse__bascule { color: rgb(var(--success-rgb)); }
.qcm-reponse__bascule:disabled { cursor: default; opacity: .7; }

.qcm-ajout-reponse { display: flex; align-items: center; gap: .5rem; flex: 1 1 260px; }
.qcm-ajout-reponse .form-control { flex: 1 1 auto; min-width: 0; }

.qcm-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; padding-left: 1.7rem; }
.qcm-photo { position: relative; margin: 0; }
.qcm-photo img {
  display: block; width: 120px; height: 90px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.qcm-photo__retirer {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(var(--danger-rgb), .92); color: #fff;
  font-size: 14px; line-height: 1;
}

/* Detail d'un passage : ce qui a ete coche, en face de ce qu'il fallait. */
.qcm-passage-question {
  padding: .85rem 1rem; margin-bottom: .75rem;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius);
}
.qcm-passage-question.is-juste { border-left-color: rgb(var(--success-rgb)); }
.qcm-passage-question.is-fausse { border-left-color: rgb(var(--danger-rgb)); }
.qcm-passage-question.is-sautee { border-left-color: var(--border); opacity: .7; }
.qcm-passage-question__titre { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.qcm-passage-question__rang {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700;
}
.qcm-passage-reponses { list-style: none; margin: .5rem 0 0; padding: 0 0 0 2.1rem; }
.qcm-passage-reponses li {
  display: flex; align-items: center; gap: .5rem;
  padding: .2rem 0; font-size: 14px;
}
.qcm-passage-reponses li i { color: var(--text-muted); }
.qcm-passage-reponse--ecart i { color: rgb(var(--danger-rgb)); }

/* ======================================================= chronologie chantier */
.chrono-etapes { list-style: none; margin: 0; padding: 0; }
.chrono-etape {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--border);
}
.chrono-etape:first-child { border-top: 0; }
.chrono-etape__marque { flex: 0 0 auto; font-size: 20px; color: var(--text-muted); line-height: 1; }
.chrono-etape.is-faite .chrono-etape__marque { color: rgb(var(--success-rgb)); }
.chrono-etape__corps { flex: 1 1 0; min-width: 0; display: grid; gap: .1rem; }
.chrono-etape__titre { font-size: 15px; }
.chrono-etape.is-faite .chrono-etape__titre { font-weight: 500; }
.chrono-etape__detail { font-size: 12.5px; color: var(--text-muted); }
.chrono-etape__actions { flex: 0 0 auto; display: flex; gap: .35rem; }

/* ------------------------------------------------------------------ listes
   Barre de recherche, taille de page et pages des listes longues.

   Nees de la reprise : la liste des chantiers pesait 3,8 Mo de HTML pour
   2 766 lignes, et l'ecran principal de l'application devenait inutilisable
   depuis un telephone de chantier.

   La barre est la MEME en haut et en bas, pour qu'on la reconnaisse sans la
   lire. En bas elle se reduit au compte et aux pages. */
.liste-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.liste-barre--bas {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
    justify-content: space-between;
}

.liste-barre__recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
}

.liste-barre__champ {
    position: relative;
    flex: 1 1 220px;
    max-width: 340px;
}

.liste-barre__champ i {
    position: absolute;
    top: 50%;
    left: .7rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.liste-barre__champ .form-control {
    padding-left: 2.1rem;
}

.liste-barre__taille {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.liste-barre__taille .form-select {
    width: auto;
}

.liste-barre__compte {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.liste-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}

.liste-barre--bas .liste-pages {
    margin-left: 0;
}

.liste-pages__lien {
    display: inline-flex;
    align-items: center;
    min-width: 2.1rem;
    justify-content: center;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    color: inherit;
    font-size: .85rem;
    text-decoration: none;
}

.liste-pages__lien:hover {
    background: var(--bs-tertiary-bg);
}

.liste-pages__lien.is-actif {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.liste-pages__lien.is-inactif {
    opacity: .4;
    pointer-events: none;
}

.liste-pages__points {
    padding: 0 .2rem;
    color: var(--bs-secondary-color);
}

/* Sur telephone, les fleches suffisent : les numeros de page passent a la
   ligne et prennent tout l'ecran. */
@media (max-width: 575.98px) {
    .liste-barre__compte,
    .liste-pages {
        width: 100%;
        margin-left: 0;
    }

    .liste-pages {
        justify-content: center;
    }

    .liste-pages__lien:not(:first-child):not(:last-child):not(.is-actif),
    .liste-pages__points {
        display: none;
    }
}

/* ------------------------------------------------------------- camemberts
   La répartition par groupe de clients, reprise de
   FI_repartiion_groupe_client_annee : deux camemberts côte à côte, l'année
   choisie et la précédente. Dessinés en SVG, sans bibliothèque. */
.camemberts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.camembert__titre {
    font-weight: 600;
    margin-bottom: .5rem;
}

.camembert__vide {
    color: var(--bs-secondary-color);
    font-size: .88rem;
    margin: 0;
}

.camembert__corps {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.camembert__dessin {
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
}

.camembert__total {
    text-anchor: middle;
    font-size: 26px;
    font-weight: 700;
    fill: currentColor;
}

.camembert__unite {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--bs-secondary-color);
}

.camembert__legende {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 160px;
    font-size: .85rem;
}

.camembert__legende li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem 0;
}

.camembert__pastille {
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.camembert__groupe {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camembert__nombre {
    font-weight: 600;
}

.camembert__part {
    color: var(--bs-secondary-color);
    min-width: 2.6rem;
    text-align: right;
}

/* Les toasts vivent en bas a droite. Sur un telephone, la barre de geste
   d'iOS mange le bas de l'ecran : sans la marge de securite, le dernier
   toast se retrouve a moitie sous la barre, et son bouton de fermeture
   avec. */
.toast-container.bottom-0 {
  padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
}

/* ------------------------------------------------ demande d'intervention */
/* Les deux cadres de la fenetre d'origine, sans ses aplats bleu et jaune : un
   titre et un filet separent deux sections aussi bien qu'une bande de
   couleur, et ce qui doit ressortir sur cet ecran ce sont les champs. */
.intervention-cadre {
  margin: 2rem 0 1rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--border);
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.intervention-cadre:first-child { margin-top: 0; }
.intervention-soustitre {
  margin: 1.5rem 0 .6rem; font-size: 14px; font-weight: 600;
}

/* Les anomalies : une case, un texte, une croix. Chacune s'enregistre seule,
   sans passer par Valider - c'est le geste de l'atelier qui coche au fur et a
   mesure, pas une saisie de formulaire. */
.intervention-lignes { list-style: none; margin: 0 0 .75rem; padding: 0; }
.intervention-ligne {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem; border-radius: var(--radius);
  background: var(--surface-alt);
}
.intervention-ligne + .intervention-ligne { margin-top: .3rem; }
/* La case se vise a la souris comme au doigt : 14 px par defaut, c'est la
   moitie de ce qu'il faut pour un geste qu'on repete ligne apres ligne. */
.intervention-ligne .form-check-input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
.intervention-ligne__titre { flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
/* Barre ce qui est fait : la liste se lit alors d'un coup d'oeil, ce qui
   reste d'un cote et ce qui est regle de l'autre. */
.intervention-ligne.is-faite .intervention-ligne__titre {
  text-decoration: line-through; color: var(--text-muted);
}
.intervention-ajout { display: flex; gap: .5rem; }

/* « Materiel depose a l'atelier le » tient sur deux lignes quand ses voisins
   en tiennent une : sans ca, son champ descend et la rangee se desaligne.
   Les champs sont donc cales sur le BAS de leur rangee : ils restent en ligne
   quelle que soit la hauteur des etiquettes, alors qu'une hauteur minimale
   imposee aux etiquettes ne tombe juste que pour une taille de texte donnee.

   Limite a CE formulaire : la meme regle posee sur toutes les cartes de
   l'application ajouterait deux lignes et demie sous chaque etiquette du
   bureau, y compris la ou une seule suffit. */
.intervention-form > .row { align-items: flex-end; }

/* --------------------------------------------- visionneuse de documents */
/* La piece par-dessus la fiche, presque plein ecran : un PDF d'habilitation
   se lit mal dans une fenetre de la taille d'une carte. */
.visionneuse-doc {
  width: min(1100px, 94vw); height: 92vh; max-width: 94vw; max-height: 92vh;
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  flex-direction: column;
}
.visionneuse-doc[open] { display: flex; }
.visionneuse-doc::backdrop { background: rgba(3, 8, 24, .6); }

.visionneuse-doc__barre {
  flex: 0 0 auto; display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border);
}
.visionneuse-doc__titre { font-weight: 600; }
.visionneuse-doc__meta { color: var(--text-muted); font-size: 13px; }
.visionneuse-doc__nav { margin-left: auto; display: flex; gap: .3rem; }

.visionneuse-doc__cadre { flex: 1 1 auto; min-height: 0; background: var(--surface-alt); }
.visionneuse-doc__cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.visionneuse-doc__cadre img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* La legende des absences du rapport de pointage. Repliee par defaut : elle
   sert la premiere fois qu'on lit un code, pas a chaque ouverture. */
.legende-absences summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.legende-absences__grille {
  display: grid; gap: .25rem .9rem; margin-top: .5rem; padding: .6rem .8rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  background: var(--surface-alt); border-radius: var(--radius); font-size: 13px;
}
.legende-absences__grille code {
  display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--text);
}

/* La colonne « Imprimé » des pointages RH : un bouton deguise en pastille.
   C'est la case cochable de la fenetre d'origine — la RH marque la ligne
   quand la feuille est partie, et ce qui reste en « Non » est ce qui reste
   a sortir. Une pastille n'a pas l'air cliquable ; ces trois regles le
   disent, sans changer ce qu'on lit. */
.badge-bascule { border: 0; cursor: pointer; font: inherit; }
.badge-bascule:hover { filter: brightness(.93); }
.badge-bascule:focus-visible { outline: 2px solid var(--primary, #2f6fed); outline-offset: 2px; }

/* =========================================================
   ACTUALITES - PROVISOIRE : trois propositions de mise en page
   ---------------------------------------------------------
   Communs, puis A « le fil », B « la boite de reception »,
   C « le panneau d'affichage ». Une fois la proposition choisie,
   les deux autres blocs partent, et le selecteur avec eux.

   Chaque element colore recoit sa famille en variable :
   `style="--famille: var(--orange-rgb)"`. Une seule regle sert
   donc les sept familles, en clair comme en sombre.
   ========================================================= */

/* --- Le selecteur ------------------------------------------------- */
.actu-propositions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: 1rem; padding: .55rem .75rem;
  background: var(--surface); border: 1px dashed rgba(var(--purple-rgb), .45);
  border-radius: var(--radius-lg);
}
.actu-propositions__titre { font-size: 12.5px; font-weight: 600; color: rgb(var(--purple-rgb)); }
.actu-propositions__choix { display: flex; flex-wrap: wrap; gap: .25rem; }
.actu-propositions__choix a {
  padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: 13px;
  color: var(--text-muted); white-space: nowrap;
}
.actu-propositions__choix a:hover { background: var(--hover-bg); color: var(--text); }
.actu-propositions__choix a.is-actif { background: var(--gradient-brand); color: #fff; }

/* --- Communs ------------------------------------------------------ */
.actu-famille {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .55rem; border-radius: var(--radius-pill);
  background: rgba(var(--famille), .12); color: rgb(var(--famille));
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.actu-point {
  width: .6rem; height: .6rem; border-radius: 50%; flex: none;
  background: rgb(var(--famille));
}
.actu-reponse {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 12.5px; font-weight: 500;
}
.actu-reponse.is-recue { color: rgb(var(--success-rgb)); }
.actu-reponse.is-attente { color: #b7860b; }
[data-theme-mode="dark"] .actu-reponse.is-attente { color: rgb(var(--warning-rgb)); }

.actu-actions { display: inline-flex; gap: .15rem; margin-left: auto; position: relative; z-index: 2; }
.actu-actions form { display: inline; margin: 0; }
.actu-actions a, .actu-actions button {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-muted); font-size: 16px; cursor: pointer;
}
.actu-actions a:hover, .actu-actions button:hover { background: var(--hover-bg); color: var(--text); }
.actu-actions .is-danger:hover { background: rgba(var(--danger-rgb), .1); color: rgb(var(--danger-rgb)); }

.actu-vide {
  display: grid; place-items: center; gap: .5rem; padding: 3rem 1rem;
  color: var(--text-muted); text-align: center;
}
.actu-vide i { font-size: 2.4rem; opacity: .5; }

/* =========================================================
   A - LE FIL
   ========================================================= */
.actu-fil { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--card-gap); align-items: start; }
.actu-fil__colonne { max-width: 820px; }

.actu-fil__entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.actu-fil__entete h2 { font-size: 22px; font-weight: 600; margin: 0; }
.actu-fil__entete p { margin: .15rem 0 0; color: var(--text-muted); }

.actu-fil__recherche, .actu-boite__recherche, .actu-panneau__recherche { position: relative; }
.actu-fil__recherche i, .actu-boite__recherche i, .actu-panneau__recherche i {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);
}
.actu-fil__recherche input, .actu-boite__recherche input, .actu-panneau__recherche input {
  width: 100%; padding: .6rem .9rem .6rem 2.4rem;
  border: 1px solid var(--input-border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); font: inherit;
}
.actu-fil__recherche { margin-bottom: 1.5rem; }

.actu-fil__mois { position: relative; margin-bottom: 1.75rem; }
.actu-fil__mois h3 {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem 3.25rem;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.actu-fil__mois h3 span {
  padding: 0 .45rem; border-radius: var(--radius-pill); background: var(--surface); font-size: 11px;
}
/* Le filet du temps : une ligne qui relie les pastilles d'un meme mois. */
.actu-fil__mois::before {
  content: ""; position: absolute; left: 1.2rem; top: 2.2rem; bottom: .5rem;
  width: 2px; background: linear-gradient(var(--border), transparent);
}

.actu-fil__carte { position: relative; display: flex; gap: .9rem; margin-bottom: .75rem; }
.actu-fil__pastille {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--surface); color: rgb(var(--famille));
  box-shadow: 0 0 0 3px rgba(var(--famille), .18); font-size: 17px;
}
.actu-fil__corps {
  flex: 1; min-width: 0; padding: .9rem 1.1rem .6rem;
  background: var(--surface); border-radius: var(--radius-lg);
  border-left: 3px solid rgb(var(--famille));
  transition: box-shadow .15s, transform .15s;
}
.actu-fil__corps:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.actu-fil__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 12px; color: var(--text-muted); }
.actu-fil__corps h4 { margin: .45rem 0 .3rem; font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.actu-fil__corps h4 a { color: var(--text); }
.actu-fil__corps h4 a:hover { color: var(--primary); }
.actu-fil__texte {
  margin: 0; color: var(--gray-7); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme-mode="dark"] .actu-fil__texte { color: var(--text-muted); }
.actu-fil__pied { display: flex; align-items: center; gap: .75rem; min-height: 2.2rem; margin-top: .35rem; }

.actu-fil__rail { position: sticky; top: calc(var(--header-height) + var(--preprod-h) + 1rem); display: grid; gap: 1rem; }
.actu-fil__chiffres { display: grid; gap: .5rem; }
.actu-fil__chiffres div {
  display: flex; align-items: baseline; gap: .6rem; padding: .7rem .9rem;
  background: var(--surface); border-radius: var(--radius-lg);
}
.actu-fil__chiffres strong { font-size: 22px; font-weight: 700; color: var(--text); min-width: 2ch; }
.actu-fil__chiffres span { font-size: 12.5px; color: var(--text-muted); }
.actu-fil__chiffres .is-alerte { box-shadow: inset 3px 0 0 rgb(var(--warning-rgb)); }
.actu-fil__chiffres .is-alerte strong { color: #b7860b; }

.actu-fil__familles { display: grid; padding: .4rem; background: var(--surface); border-radius: var(--radius-lg); }
.actu-fil__familles a {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem;
  border-radius: var(--radius); color: var(--text-menu); font-size: 13.5px;
}
.actu-fil__familles a:hover { background: var(--hover-bg); }
.actu-fil__familles a.is-actif { background: var(--primary-01); color: var(--primary); font-weight: 500; }
.actu-fil__familles em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-muted); }
.actu-fil__note { margin: 0; font-size: 12px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .actu-fil { grid-template-columns: 1fr; }
  .actu-fil__rail { position: static; order: -1; }
  .actu-fil__chiffres { grid-template-columns: repeat(3, 1fr); }
  .actu-fil__familles { display: flex; flex-wrap: wrap; }
  .actu-fil__note { display: none; }
}

/* =========================================================
   B - LA BOITE DE RECEPTION
   ========================================================= */
.actu-kpis { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin-bottom: 1rem; }
.actu-kpi {
  flex: 1 1 200px; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem;
  background: var(--surface); border-radius: var(--radius-lg);
}
.actu-kpi > i {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-lg);
  background: rgba(var(--famille), .12); color: rgb(var(--famille)); font-size: 20px;
}
.actu-kpi strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.actu-kpi span { font-size: 12.5px; color: var(--text-muted); }
.actu-kpis__nouvelle { align-self: center; white-space: nowrap; }

.actu-boite {
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  min-height: 70vh; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
}
.actu-boite__liste { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
.actu-boite__recherche { padding: .75rem; border-bottom: 1px solid var(--border); }
.actu-boite__recherche i { left: 1.6rem; }
.actu-boite__lignes { flex: 1; overflow-y: auto; max-height: 72vh; }

.actu-boite__ligne {
  display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .9rem;
  border-bottom: 1px solid var(--border); color: var(--text);
  box-shadow: inset 3px 0 0 transparent;
}
.actu-boite__ligne:hover { background: var(--hover-bg); color: var(--text); }
.actu-boite__ligne.is-ouverte { background: rgba(var(--famille), .08); box-shadow: inset 3px 0 0 rgb(var(--famille)); }
.actu-boite__icone {
  flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(var(--famille), .12); color: rgb(var(--famille)); font-size: 15px;
}
.actu-boite__resume { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.actu-boite__haut { display: flex; align-items: baseline; gap: .5rem; }
.actu-boite__haut strong { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actu-boite__haut time { flex: none; font-size: 11.5px; color: var(--text-muted); }
.actu-boite__extrait { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actu-boite__compteur {
  flex: none; align-self: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: rgb(var(--success-rgb)); color: #fff; font-size: 11px; font-weight: 700;
}
.actu-boite__compteur.is-attente { background: rgba(var(--warning-rgb), .18); color: #b7860b; }
.actu-boite__rien { padding: 2rem 1rem; text-align: center; color: var(--text-muted); }
.actu-boite__liste .liste-barre { padding: .5rem .75rem; margin: 0; border-top: 1px solid var(--border); }

.actu-boite__lecture { padding: 1.5rem 2rem 2rem; min-width: 0; }
.actu-boite__entete { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.actu-boite__titre { font-size: 22px; font-weight: 600; margin: 0 0 .2rem; }
.actu-boite__date { color: var(--text-muted); font-size: 13px; margin: 0 0 1.25rem; }
.actu-boite__texte {
  padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface-alt);
  line-height: 1.65; font-size: 14.5px; max-width: 70ch;
}
.actu-boite__reponses { margin-top: 1.75rem; max-width: 70ch; }
.actu-boite__reponses h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .9rem; }
.actu-boite__sans { color: var(--text-muted); font-size: 13px; }
.actu-boite__attente {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem;
  border-radius: var(--radius-lg); background: rgba(var(--warning-rgb), .12);
}
.actu-boite__attente > i { font-size: 22px; color: #b7860b; }
.actu-boite__attente strong { display: block; }
.actu-boite__attente span { font-size: 13px; color: var(--text-muted); }

.actu-bulle { display: flex; gap: .7rem; margin-bottom: .9rem; }
.actu-bulle__avatar {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--gradient-brand); color: #fff; font-size: 12px; font-weight: 700;
}
.actu-bulle__corps { padding: .6rem .9rem; border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--surface-alt); }
.actu-bulle__qui { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; font-size: 13px; }
.actu-bulle__qui time { font-size: 11.5px; color: var(--text-muted); }
.actu-bulle__corps p { margin: .25rem 0 0; }

@media (max-width: 900px) {
  .actu-boite { grid-template-columns: 1fr; }
  .actu-boite__liste { border-right: 0; border-bottom: 1px solid var(--border); }
  .actu-boite__lignes { max-height: 40vh; }
  .actu-boite__lecture { padding: 1.25rem; }
}

/* =========================================================
   C - LE PANNEAU D'AFFICHAGE
   ========================================================= */
.actu-panneau__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.actu-panneau__entete h2 { font-size: 24px; font-weight: 700; margin: 0; }
.actu-panneau__entete p { margin: .2rem 0 0; color: var(--text-muted); }
.actu-panneau__entete p strong { color: #b7860b; font-weight: 600; }
.actu-panneau__outils { display: flex; gap: .6rem; align-items: center; }
.actu-panneau__recherche { width: 260px; }

.actu-panneau__familles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.actu-panneau__familles a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem;
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text-menu); font-size: 13px;
  border: 1px solid transparent;
}
.actu-panneau__familles a i { color: rgb(var(--famille)); }
.actu-panneau__familles a em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.actu-panneau__familles a:hover { border-color: rgba(var(--famille), .35); color: var(--text); }
.actu-panneau__familles a.is-actif { background: rgb(var(--famille)); color: #fff; }
.actu-panneau__familles a.is-actif i, .actu-panneau__familles a.is-actif em { color: rgba(255,255,255,.85); }

.actu-une {
  position: relative; overflow: hidden; margin-bottom: 1.25rem; padding: 1.75rem 2rem;
  border-radius: 14px; background: var(--gradient-header); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(154, 58, 208, .55);
}
.actu-une__corps { position: relative; z-index: 1; max-width: 760px; }
.actu-une__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 12.5px; color: rgba(255,255,255,.85); }
.actu-une__badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.2); color: #fff; font-weight: 600;
}
.actu-une h3 { margin: .7rem 0 .6rem; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.actu-une h3 a, .actu-une h3 a:hover { color: #fff; }
.actu-une p {
  margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.92);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.actu-une footer { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.actu-une .actu-reponse { padding: .25rem .7rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.2); color: #fff; }
.actu-une__filigrane {
  position: absolute; right: -1.5rem; bottom: -3rem; font-size: 15rem; line-height: 1;
  color: rgba(255,255,255,.1); pointer-events: none;
}
.actu-actions--clair a, .actu-actions--clair button { color: rgba(255,255,255,.85); }
.actu-actions--clair a:hover, .actu-actions--clair button:hover { background: rgba(255,255,255,.18); color: #fff; }

.actu-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.actu-carte {
  position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.15rem .6rem;
  background: var(--surface); border-radius: 12px; border-top: 4px solid rgb(var(--famille));
  transition: transform .15s, box-shadow .15s;
}
.actu-carte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(var(--famille), .45); }
.actu-carte__haut { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.actu-carte__icone {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px;
  background: rgba(var(--famille), .12); color: rgb(var(--famille)); font-size: 17px;
}
.actu-carte__famille { font-size: 12px; font-weight: 600; color: rgb(var(--famille)); }
.actu-carte__haut time { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.actu-carte h4 { margin: 0 0 .45rem; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.actu-carte h4 a { color: var(--text); }
.actu-carte:hover h4 a { color: rgb(var(--famille)); }
.actu-carte p {
  flex: 1; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.actu-carte footer { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .4rem; }

@media (max-width: 700px) {
  .actu-une { padding: 1.25rem; }
  .actu-une h3 { font-size: 20px; }
  .actu-panneau__outils { width: 100%; }
  .actu-panneau__recherche { flex: 1; width: auto; }
}

/* =========================================================
   Chantiers a cloturer (fenetre d'alerte et bloc du tableau de bord)
   ---------------------------------------------------------
   Ce qui compte ici, c'est le RETARD : il est dessine en barre, une par
   chantier, sur une echelle de temps. La liste allant du plus ancien au
   plus recent, les barres font un escalier qui se lit avant les noms.

   Chaque ligne recoit sa couleur de palier et la longueur de sa barre en
   variables (`--palier`, `--retard`) : une seule regle sert toute la
   liste. Le texte n'est jamais ecrit dans la couleur du palier - l'ambre
   et le jaune ne se lisent pas sur blanc ; la couleur est portee par la
   barre et les pastilles.
   ========================================================= */
.acl {
  --acl-repere: rgba(3, 27, 78, .09);
  --acl-duree: 150px;
}
[data-theme-mode="dark"] .acl { --acl-repere: rgba(255, 255, 255, .09); }

/* --- La repartition par anciennete ------------------------------------ */
.acl-repartition { margin-bottom: 1rem; }
.acl-repartition__barre {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-bottom: .75rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.acl-repartition__barre span { min-width: 4px; }

.acl-repartition__paliers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
.acl-palier {
  display: grid;
  gap: .05rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--palier);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
}
.acl-palier strong { font-size: 20px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.acl-palier span { font-size: 12.5px; color: var(--text-muted); }
.acl-palier.est-vide { opacity: .45; }
button.acl-palier { cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
button.acl-palier:hover { background: color-mix(in srgb, var(--palier) 7%, var(--surface)); }
button.acl-palier[aria-pressed="true"] {
  background: color-mix(in srgb, var(--palier) 12%, var(--surface));
  border-color: var(--palier);
}

/* --- Les conducteurs --------------------------------------------------- */
.acl-conducteurs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.acl-conducteur-filtre {
  padding: .3rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-menu);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.acl-conducteur-filtre em { font-style: normal; color: var(--text-muted); margin-left: .2rem; }
.acl-conducteur-filtre:hover { border-color: var(--primary-05); }
.acl-conducteur-filtre[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.acl-conducteur-filtre[aria-pressed="true"] em { color: rgba(255, 255, 255, .8); }

/* Un filtre pose : ce qu'il ecarte s'efface, sans disparaitre. */
.acl.a-un-filtre button.acl-palier[aria-pressed="false"] { opacity: .5; }

/* --- L'en-tete et l'echelle ------------------------------------------- */
.acl-entete,
.acl-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: center;
}
.acl-entete {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
/* Dans la fenetre, l'en-tete reste en haut quand on descend dans la liste :
   l'echelle doit rester lisible a la centieme ligne. */
.acl--interactif .acl-entete {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}
.acl-echelle { display: flex; align-items: center; gap: .9rem; }
.acl-echelle__reperes { position: relative; flex: 1; height: 1.3em; }
.acl-echelle__reperes span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
}
.acl-echelle__duree { width: var(--acl-duree); flex: none; }

/* --- Les lignes -------------------------------------------------------- */
.acl-liste { margin: 0; padding: 0; list-style: none; }
.acl-ligne {
  position: relative;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--border);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.acl-ligne[hidden] { display: none; }
.acl-ligne:last-child { border-bottom: 0; }
.acl-ligne:hover {
  background: color-mix(in srgb, var(--palier) 6%, transparent);
  box-shadow: inset 3px 0 0 var(--palier);
}
.acl-ligne:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }

.acl-chantier { display: grid; min-width: 0; }
.acl-nom {
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acl-nom:focus-visible { outline: 0; }
/* Toute la ligne mene a la fiche. */
.acl-nom::after { content: ""; position: absolute; inset: 0; }
.acl-detail {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acl-conducteur { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: 13.5px; }
.acl-conducteur > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acl-initiales {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.acl-initiales.is-aucun { background: var(--surface-alt); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.acl-sans { color: var(--text-muted); }

.acl-retard { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.acl-piste {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-alt);
  background-image: var(--acl-fond-reperes);
}
.acl-piste__plein {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--retard);
  border-radius: var(--radius-pill);
  background: var(--palier);
  transform-origin: left center;
  /* Le seul mouvement de la fenetre : a l'ouverture, les barres se
     dessinent l'une apres l'autre, et l'escalier apparait. */
  animation: acl-pousse .9s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: calc(var(--rang, 0) * 20ms + 150ms);
}
@keyframes acl-pousse { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .acl-piste__plein { animation: none; }
}

.acl-duree { display: grid; flex: none; width: var(--acl-duree); line-height: 1.25; }
.acl-duree strong { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acl-duree small { font-size: 11.5px; color: var(--text-muted); }

.acl-reste,
.acl-aucun-filtre { margin: .9rem 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }

.acl-vide { display: grid; justify-items: center; gap: .25rem; padding: 2rem 1rem; text-align: center; color: var(--text-muted); }
.acl-vide i { font-size: 2.4rem; color: rgb(var(--success-rgb)); }
.acl-vide p { margin: 0; }
.acl-vide strong { color: var(--text); }

/* --- La fenetre -------------------------------------------------------- */
/* Le fond de la fenetre est celui des cartes : Bootstrap le prend sur
   `--bs-body-bg`, le lavande de la page, et les paliers blancs juraient
   dessus. */
.acl-fenetre .modal-content { border: 0; border-radius: 14px; overflow: hidden; background: var(--surface); }
.acl-fenetre .modal-header {
  align-items: flex-start;
  gap: .9rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.acl-fenetre__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--danger-rgb), .1);
  color: rgb(var(--danger-rgb));
  font-size: 22px;
}
.acl-fenetre__titres { flex: 1; min-width: 0; }
.acl-fenetre .modal-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.acl-fenetre__titres p { margin: .2rem 0 0; font-size: 13.5px; color: var(--text-muted); }
.acl-fenetre .modal-body { padding: 1.25rem 1.5rem; }
.acl-fenetre .modal-footer { justify-content: space-between; gap: 1rem; padding: .9rem 1.5rem; border-top: 1px solid var(--border); }
.acl-fenetre__aide { font-size: 12.5px; color: var(--text-muted); }

/* --- Le bloc du tableau de bord ---------------------------------------- */
.acl--compact .acl-repartition { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.acl--compact .acl-repartition__barre { flex: 1 1 100%; height: 6px; margin-bottom: .2rem; }
.acl--compact .acl-repartition__paliers { display: contents; }
.acl--compact .acl-palier {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: 0; border: 0; background: none;
}
.acl--compact .acl-palier::before {
  content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--palier);
}
.acl--compact .acl-palier strong { font-size: 14px; }

/* --- Petits ecrans ------------------------------------------------------ */
@media (max-width: 767.98px) {
  .acl:not(.acl--compact) .acl-repartition__paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acl-entete { display: none; }
  .acl-ligne { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .acl-fenetre__aide { display: none; }
}