/* =============================================================
   COMPOSANTS COMMUNS (refonte UX, phase 4) — markup dans
   templates/socle/_composants.html, comportement des listes dans
   static/js/liste-donnees.js. Jetons (couleurs, rayons, espacements,
   --m du module) : app.css section 1.

   Sommaire
     1. Bouton du module (.btn-module)
     2. En-tête de page
     3. Bascule Cartes / Tableau, puces de filtre
     4. Liste (.ld) : outils, sélection, tableau, cartes, pages
     5. Fiche détail
     6. Formulaires
     7. Connexion
   ============================================================= */

/* ---------------------------------------------------------------
   1. BOUTON DU MODULE : action principale, dans la couleur du module.
   --------------------------------------------------------------- */
.btn-module {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--app-rayon-pill);
    background: var(--m);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn-module .mdi { font-size: 1.2rem; }
.btn-module:hover { color: #fff; background: color-mix(in srgb, var(--m) 88%, black); }
.btn-module:focus-visible { outline: 3px solid color-mix(in srgb, var(--m) 40%, white); outline-offset: 2px; }
.btn-module:disabled { opacity: 0.55; cursor: default; }
@media (pointer: coarse) { .btn-module { min-height: var(--app-zone-tactile); } }

/* ---------------------------------------------------------------
   2. EN-TÊTE DE PAGE
   --------------------------------------------------------------- */
.page-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-espace-3) var(--app-espace-4);
    margin-bottom: var(--app-espace-5);
}
.page-entete-titres { min-width: 0; }
.page-entete-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--app-texte);
}
.page-entete-titre .mdi { color: var(--m); font-size: 1.6rem; }
.page-entete-sous-titre { margin: 2px 0 0; color: var(--app-texte-2); }
.page-entete-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-espace-2); }
/* Téléphone : l'action passe par le bouton « + » flottant. */
@media (max-width: 1199.98px) {
    .page-entete-action { display: none; }
    .page-entete-titre { font-size: 1.35rem; }
}
/* Une page qui a son en-tête commun gère elle-même son bouton d'action :
   celui, provisoire, de la barre du haut s'efface. */
.app-main:has(.page-entete) .app-top-action { display: none !important; }

/* ---------------------------------------------------------------
   3. BASCULE CARTES / TABLEAU, PUCES DE FILTRE
   --------------------------------------------------------------- */
.bascule-vue {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--app-rayon-pill);
    background: color-mix(in srgb, var(--app-bordure) 60%, white);
}
.bascule-vue button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--app-rayon-pill);
    background: transparent;
    color: var(--app-texte-2);
    font-weight: 600;
    font-size: 0.88rem;
}
.bascule-vue button[aria-pressed="true"] { background: var(--app-surface); color: var(--app-texte); box-shadow: 0 1px 3px rgba(20, 35, 31, 0.15); }
.bascule-vue button:focus-visible { outline: 2px solid var(--m); outline-offset: 1px; }
@media (pointer: coarse) { .bascule-vue button { min-height: var(--app-zone-tactile); } }
@media (max-width: 767.98px) { .bascule-vue.bascule-ordi { display: none; } }

.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-pill);
    background: var(--app-surface);
    color: var(--app-texte);
    font-weight: 600;
    font-size: 0.85rem;
}
.puce::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--puce-couleur, transparent);
    display: var(--puce-pastille, none);
}
.puce-a-traiter { --puce-couleur: var(--statut-a-traiter); --puce-pastille: inline-block; }
.puce-en-cours  { --puce-couleur: var(--statut-en-cours);  --puce-pastille: inline-block; }
.puce-en-retard { --puce-couleur: var(--statut-en-retard); --puce-pastille: inline-block; }
.puce-clos      { --puce-couleur: var(--statut-clos);      --puce-pastille: inline-block; }
.puce-critique  { --puce-couleur: var(--statut-critique);  --puce-pastille: inline-block; }
a.puce { text-decoration: none; }
a.puce:hover { color: inherit; border-color: color-mix(in srgb, var(--m) 45%, white); }
a.puce[aria-pressed="true"]:hover { color: #fff; }
/* Filtres d'une liste au-dessus du composant (puces serveur, filtres avancés repliés). */
.liste-filtres { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--app-espace-2) var(--app-espace-4); margin-bottom: var(--app-espace-3); }
.liste-filtres > .puce { margin-top: 5px; }
.liste-filtres > .form-details { flex: 1 1 100%; margin: 0; border-top: 0; }
.liste-filtres > .form-details summary { min-height: 36px; }
.puce-nb { color: var(--app-texte-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.puce[aria-pressed="true"] { background: var(--app-texte); border-color: var(--app-texte); color: #fff; }
.puce[aria-pressed="true"] .puce-nb { color: rgba(255, 255, 255, 0.8); }
.puce:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
@media (pointer: coarse) { .puce { min-height: var(--app-zone-tactile); } }

/* ---------------------------------------------------------------
   4. LISTE (.ld) — data-vue="cartes" | "tableau" | "auto" (tableau dès 1200 px) sur le conteneur.
   --------------------------------------------------------------- */
.ld-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-espace-2) var(--app-espace-3);
    margin-bottom: var(--app-espace-3);
}
.ld-recherche { position: relative; flex: 1 1 220px; max-width: 360px; }
.ld-recherche .mdi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--app-texte-2); font-size: 1.15rem; pointer-events: none; }
.ld-recherche input { padding-left: 38px; border-radius: var(--app-rayon-pill); }
.ld-boutons { display: flex; gap: var(--app-espace-2); margin-left: auto; }
.ld-boutons .dropdown-menu { min-width: 220px; max-height: 60vh; overflow-y: auto; }
/* Filtres par colonne (bouton « Filtres », champs créés par liste-donnees.js). */
.ld-boutons [data-ld-filtres-bouton].is-actif { border-color: var(--m); color: var(--m-ink); background: var(--m-soft); }
.ld-filtres-nb {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 0.625rem;
    background: var(--m);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.ld-filtres-nb[hidden] { display: none; }
.ld-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--app-espace-2) var(--app-espace-3);
    align-items: end;
    margin-bottom: var(--app-espace-3);
    padding: var(--app-espace-3) var(--app-espace-4);
    background: var(--app-surface);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
}
.ld-filtres[hidden] { display: none; }
.ld-filtres-avances {
    grid-column: 1 / -1;
    padding-bottom: var(--app-espace-3);
    border-bottom: 1px solid var(--app-bordure);
}
.ld-filtre .form-label { margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; color: var(--app-texte-2); }
.ld-filtres-effacer { justify-self: start; padding-left: 0; color: var(--m-ink); font-weight: 600; }
.ld[data-vue="cartes"] .ld-seulement-tableau { display: none; }

.ld-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-espace-2) var(--app-espace-3);
    margin-bottom: var(--app-espace-3);
    padding: 8px 14px;
    border-radius: var(--app-rayon-md);
    background: var(--m-soft);
    color: var(--m-ink);
}
.ld-selection[hidden] { display: none; }
.ld-selection form { display: contents; }
.ld-selection .form-select { width: auto; max-width: 280px; background-color: var(--app-surface); }

/* Vue active seulement. */
.ld[data-vue="cartes"] .ld-tableau,
.ld[data-vue="tableau"] .ld-cartes { display: none; }

/* Vue « auto » (aucun choix mémorisé ni imposé) : le tableau dès 1200 px de
   large, pour mieux voir toutes les colonnes ; les cartes en dessous. Rendue
   par le serveur, donc sans clignotement ; liste-donnees.js la remplace par le
   choix de la personne dès qu'elle en a un. */
@media (max-width: 1199.98px) {
    .ld[data-vue="auto"] .ld-tableau,
    .ld[data-vue="auto"] .ld-seulement-tableau { display: none; }
}
@media (min-width: 1200px) {
    .ld[data-vue="auto"] .ld-cartes { display: none; }
}

/* Tableau : en-tête triable, défilement horizontal, 1re colonne fixe. */
.ld-tableau {
    background: var(--app-surface);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    overflow: hidden;
}
/* position: relative : les textes .visually-hidden (position absolue) des
   en-têtes restent dans la zone qui défile au lieu d'élargir la page. */
.ld-defile { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* mobile.css transforme tout <table> en bloc défilant : pas ici (le
   défilement est porté par .ld-defile, pour garder la colonne fixe). */
.ld .ld-table { display: table; width: 100%; max-width: none; overflow: visible; }
.ld .ld-table thead th { background: color-mix(in srgb, var(--app-fond) 70%, white); border-bottom: 1px solid var(--app-bordure); white-space: nowrap; font-weight: 700; font-size: 0.82rem; color: var(--app-texte-2); padding: 0 0.6rem; height: 44px; }
.ld .ld-table tbody td { padding: 0.55rem 0.6rem; white-space: nowrap; }
.ld .ld-table tbody tr td:first-child { width: auto; font-weight: inherit !important; background: inherit; border-right: 0 !important; }
.ld .ld-table tbody tr.is-choisie td { background: var(--m-soft); }
/* Texte long (description...) : une ligne coupée, texte complet au survol. */
.ld .ld-table td.ld-long { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
/* Colonnes de texte (noms, matériel, patient...) : retour à la ligne au-delà
   d'une largeur maximale, pour que le tableau tienne dans l'écran. Dates,
   nombres et statuts restent sur une ligne. */
.ld .ld-table tbody td.ld-type-texte { white-space: normal; max-width: 16rem; min-width: 7rem; overflow-wrap: break-word; }
.ld .ld-table thead th[data-type="texte"] { white-space: normal; max-width: 16rem; }
.ld .ld-table .ld-tri { text-align: left; }
.ld-col-choix { width: 44px; text-align: center; }
.ld-col-choix .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; }
.ld-tri {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.ld-tri .mdi { font-size: 1rem; opacity: 0.45; }
.ld-tri:hover { color: var(--app-texte); }
.ld-tri:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; border-radius: 4px; }
th[aria-sort="ascending"] .ld-tri,
th[aria-sort="descending"] .ld-tri { color: var(--m-ink); }
th[aria-sort="ascending"] .ld-tri .mdi,
th[aria-sort="descending"] .ld-tri .mdi { opacity: 1; }
.ld-table a { color: var(--app-texte); font-weight: 700; text-decoration: none; }
.ld-table a:hover { color: var(--m-ink); text-decoration: underline; }
/* Colonne de sélection + colonne titre fixes au défilement horizontal. */
.ld .ld-table .ld-col-choix { position: sticky; left: 0; z-index: 2; }
.ld .ld-table tbody tr td.ld-col-choix { background: var(--app-surface); }
.ld .ld-table tbody tr td.ld-col-fixe { background: var(--app-surface); } /* plus spécifique que « td:first-child { background: inherit } » : sinon fond transparent */
.ld .ld-table .ld-col-fixe { position: sticky; left: 44px; z-index: 2; box-shadow: 1px 0 0 var(--app-bordure); }
.ld .ld-table thead .ld-col-choix,
.ld .ld-table thead .ld-col-fixe { background: color-mix(in srgb, var(--app-fond) 70%, white); }
.ld .ld-table tbody tr.is-choisie td.ld-col-fixe,
.ld .ld-table tbody tr.is-choisie td.ld-col-choix { background: var(--m-soft); }
.ld .ld-table tbody tr:hover td.ld-col-fixe,
.ld .ld-table tbody tr:hover td.ld-col-choix { background: color-mix(in srgb, var(--app-primary-color) 7%, white); }
.ld:not(:has(.ld-col-choix)) .ld-table .ld-col-fixe { left: 0; }

/* Cartes : grille sur ordinateur, empilées sur téléphone. */
.ld-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--app-espace-3);
}
.ld-carte {
    position: relative;
    padding: 14px 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ld-carte:hover { border-color: color-mix(in srgb, var(--m) 40%, white); box-shadow: 0 4px 14px rgba(20, 35, 31, 0.07); }
.ld-carte.is-choisie { border-color: var(--m); box-shadow: 0 0 0 1px var(--m); }
.ld-carte-haut { display: flex; align-items: flex-start; gap: 10px; }
.ld-carte-haut .form-check-input { position: relative; z-index: 2; flex: none; margin-top: 3px; width: 1.15rem; height: 1.15rem; }
@media (pointer: coarse) {
    /* Case plus grande au doigt (le reste de la carte ouvre la fiche). */
    .ld-carte-haut .form-check-input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
}
.ld-carte-titres { flex: 1; min-width: 0; }
.ld-carte-titre { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; }
.ld-carte-titre a { color: var(--app-texte); text-decoration: none; }
.ld-carte-sous-titre { margin: 2px 0 0; font-size: 0.85rem; color: var(--app-texte-2); }
.ld-carte .statut { flex: none; }
.ld-carte-bas { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--app-bordure); }
.ld-carte-infos { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 0.85rem; }
/* Boutons d'action d'une ligne : au-dessus du lien qui couvre la carte. */
.ld-actions { position: relative; z-index: 2; display: flex; gap: 6px; flex: none; }
.ld-actions form { display: contents; }
.ld-action {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--app-bordure);
    border-radius: 10px;
    background: var(--app-surface);
    color: var(--app-texte-2);
    font-size: 1.15rem;
    text-decoration: none;
}
.ld-action:hover { color: var(--m-ink); border-color: color-mix(in srgb, var(--m) 45%, white); background: var(--m-soft); }
.ld-action:focus-visible { outline: 2px solid var(--m); outline-offset: 1px; }
@media (pointer: coarse) { .ld-action { width: var(--app-zone-tactile); height: var(--app-zone-tactile); } }
.ld .ld-table td.ld-col-actions { width: 1%; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.ld-carte-infos dt { display: inline; font-weight: 500; color: var(--app-texte-2); }
.ld-carte-infos dt::after { content: " : "; }
.ld-carte-infos dd { display: inline; margin: 0; font-weight: 600; }
@media (max-width: 767.98px) { .ld-cartes { grid-template-columns: 1fr; gap: var(--app-espace-2); } }

.ld-vide { padding: var(--app-espace-6) var(--app-espace-4); text-align: center; color: var(--app-texte-2); }
.ld-pages { display: flex; align-items: center; justify-content: flex-end; gap: var(--app-espace-2); margin-top: var(--app-espace-3); }
.ld-pages[hidden] { display: none; }
.ld-pages-info { color: var(--app-texte-2); font-size: 0.88rem; margin-right: auto; }
.ld-pages .btn { min-width: 40px; }

/* ---------------------------------------------------------------
   5. FICHE DÉTAIL
   --------------------------------------------------------------- */
.fiche-entete { margin-bottom: var(--app-espace-5); }
.fiche-entete-ligne { display: flex; align-items: center; gap: var(--app-espace-2); flex-wrap: wrap; }
.fiche-ref { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; font-weight: 600; color: var(--m-ink); background: var(--m-soft); padding: 2px 8px; border-radius: 6px; }
.fiche-titre { margin: 8px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.015em; }
.fiche-meta { margin: 4px 0 0; color: var(--app-texte-2); }
.fiche-bloc { background: var(--app-surface); border: 1px solid var(--app-bordure); border-radius: var(--app-rayon-lg); padding: var(--app-espace-4) var(--app-espace-5); margin-bottom: var(--app-espace-4); }
.fiche-bloc-titre { margin: 0 0 var(--app-espace-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-texte-2); }
.fiche-infos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--app-espace-3) var(--app-espace-5); margin: 0; }
.fiche-infos dt { font-size: 0.8rem; font-weight: 500; color: var(--app-texte-2); }
.fiche-infos dd { margin: 2px 0 0; font-weight: 600; }

/* Boutons secondaires sous l'en-tête de fiche. */
.fiche-outils { display: flex; flex-wrap: wrap; gap: var(--app-espace-2); margin: calc(-1 * var(--app-espace-3)) 0 var(--app-espace-5); }
/* Ligne d'un bloc (produit, anomalie, envoi...) : contenu + bouton à droite. */
.fiche-ligne { display: flex; align-items: center; gap: var(--app-espace-3); padding: 10px 0; border-bottom: 1px solid var(--app-bordure); }
.fiche-ligne:first-of-type { padding-top: 0; }
.fiche-ligne:last-of-type { border-bottom: 0; }
.min-w-0 { min-width: 0; }
/* Bloc repliable (« Modifier la fiche ») : même rendu que .form-details. */
.fiche-bloc > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--app-zone-tactile);
    margin: calc(-1 * var(--app-espace-2)) 0;
    list-style: none;
    font-weight: 700;
    color: var(--m-ink);
    cursor: pointer;
}
.fiche-bloc > summary::-webkit-details-marker { display: none; }
.fiche-bloc > summary .mdi { font-size: 1.3rem; transition: transform 0.15s; }
.fiche-bloc[open] > summary .mdi { transform: rotate(90deg); }
.fiche-bloc > summary:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; border-radius: 6px; }

/* Bloc « Pilotage » d'une anomalie : mis en avant par un liseré du module. */
.fiche-pilotage { border-left: 4px solid var(--m); }
.pilotage-texte { min-height: 4rem; padding: 10px 12px; border: 1px solid var(--app-bordure); border-radius: var(--app-rayon-md); background: var(--app-fond); white-space: pre-line; }
.pilotage-suivi { padding: 12px 14px; border: 1px solid var(--app-bordure); border-radius: var(--app-rayon-md); }
.pilotage-suivi .fiche-infos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; margin-bottom: 8px; }

/* Ligne cliquable d'un historique (ex. livre de vie d'un appareil MAD). */
.historique-ligne { display: flex; justify-content: space-between; align-items: center; gap: var(--app-espace-3); padding: 10px 12px; border: 1px solid var(--app-bordure); border-radius: var(--app-rayon-md); color: var(--app-texte); text-decoration: none; }
.historique-ligne:hover { color: var(--app-texte); border-color: color-mix(in srgb, var(--m) 40%, white); background: var(--m-soft); }
.historique-ligne .mdi { color: var(--m); }

/* Zone d'actions irréversibles (effacement de données). */
.zone-danger { border-color: color-mix(in srgb, var(--statut-critique) 45%, white); }
.zone-danger .fiche-bloc-titre { color: var(--statut-critique-texte); }

/* Vignettes de pièces jointes. */
/* Chiffres clés d'un tableau de bord de module (ex. Réception). */
.tb-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--app-espace-3); margin-bottom: var(--app-espace-5); }
.tb-chiffre { display: grid; gap: 4px; padding: var(--app-espace-4); border: 1px solid var(--app-bordure); border-radius: var(--app-rayon-lg); background: var(--app-surface); color: var(--app-texte); text-decoration: none; }
a.tb-chiffre:hover { border-color: var(--m); color: var(--app-texte); }
.tb-chiffre.is-alerte { border-color: var(--statut-en-retard); background: color-mix(in srgb, var(--statut-en-retard-fond) 60%, var(--app-surface)); }
.tb-valeur { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tb-libelle { color: var(--app-texte-2); line-height: 1.3; }
.tb-lien { color: var(--app-texte); text-decoration: none; }
.tb-lien:hover { color: var(--m-ink); }

/* Journal d'échanges d'une fiche (ex. contacts d'un litige Réception) :
   boutons rapides, puis une entrée par échange, la plus récente en haut. */
.journal-tentative .journal-icone { background: var(--statut-en-retard-fond); color: var(--statut-en-retard-texte); }
.journal { list-style: none; margin: var(--app-espace-3) 0 0; padding: 0; display: grid; gap: 0; }
.journal-entree { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--app-espace-3); align-items: start; padding: 12px 0; border-top: 1px solid var(--app-bordure); }
.journal-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--m-soft); color: var(--m); font-size: 1.15rem; }
.journal-recu .journal-icone { background: var(--statut-clos-fond); color: var(--statut-clos); }
.journal-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.journal-date { color: var(--app-texte-2); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.journal-texte { margin: 4px 0 0; white-space: pre-line; }
.journal-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 0.85rem; color: var(--app-texte-2); }
.journal-vide { padding: 12px 0; color: var(--app-texte-2); font-style: italic; border-top: 1px solid var(--app-bordure); }

.vignettes { display: flex; flex-wrap: wrap; gap: var(--app-espace-2); }
.vignette { position: relative; }
.vignette img,
.vignette-fichier { display: grid; place-items: center; width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--app-bordure); background: var(--app-fond); }
.vignette-fichier .mdi { font-size: 2rem; color: var(--statut-critique); }
.vignette-supprimer {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    background: var(--app-texte);
    color: #fff;
    font-size: 0.95rem;
}
.vignette-supprimer:hover { background: var(--statut-critique); }

/* Choix du statut d'une fiche (barre d'action) : boutons à pastille. */
.statuts-choix { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--app-rayon-pill); background: color-mix(in srgb, var(--app-bordure) 55%, white); }
.statuts-choix form { display: contents; }
.statut-choix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--app-rayon-pill);
    background: transparent;
    color: var(--app-texte-2);
    font-weight: 600;
    font-size: 0.88rem;
}
.statut-choix::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--statut-couleur); }
.statut-choix.statut-a-traiter { --statut-couleur: var(--statut-a-traiter); }
.statut-choix.statut-en-cours { --statut-couleur: var(--statut-en-cours); }
.statut-choix.statut-en-retard { --statut-couleur: var(--statut-en-retard); }
.statut-choix.statut-clos { --statut-couleur: var(--statut-clos); }
.statut-choix.statut-critique { --statut-couleur: var(--statut-critique); }
/* Même rendu pour des boutons radio (<input class="btn-check"> + <label class="statut-choix">). */
.btn-check:checked + .statut-choix { background: var(--app-surface); color: var(--app-texte); box-shadow: 0 1px 3px rgba(20, 35, 31, 0.15); }
.btn-check:focus-visible + .statut-choix { outline: 2px solid var(--m); outline-offset: 1px; }
.efficace-choix { display: inline-flex; }
/* Variante boutons radio (ex. « Efficace » d'une fiche d'amélioration). */
.statuts-choix > .btn-check:checked + .statut-choix,
.statut-choix[aria-pressed="true"] { background: var(--app-surface); color: var(--app-texte); box-shadow: 0 1px 3px rgba(20, 35, 31, 0.15); }
.statut-choix:hover { color: var(--app-texte); }
.statut-choix:focus-visible,
.statuts-choix > .btn-check:focus-visible + .statut-choix { outline: 2px solid var(--m); outline-offset: 1px; }
label.statut-choix { margin: 0; cursor: pointer; }
.efficace-choix { display: inline-flex; }
@media (pointer: coarse) { .statut-choix { min-height: var(--app-zone-tactile); } }

.frise { list-style: none; margin: 0; padding: 0; }
.frise-etape { position: relative; display: flex; gap: 14px; padding-bottom: var(--app-espace-4); }
.frise-etape:last-child { padding-bottom: 0; }
.frise-etape:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--app-bordure); }
.frise-point { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--statut-clos); box-shadow: 0 0 0 3px var(--app-surface); }
.frise-en-cours .frise-point { background: var(--app-surface); border: 3px solid var(--m); }
.frise-a-venir .frise-point { background: var(--app-surface); border: 2px dashed var(--app-bordure); }
.frise-titre { font-weight: 700; }
.frise-a-venir .frise-titre { color: var(--app-texte-2); font-weight: 600; }
.frise-meta { font-size: 0.82rem; color: var(--app-texte-2); }
.frise-texte { margin: 4px 0 0; font-size: 0.92rem; }

.fiche-barre {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-espace-2) var(--app-espace-4);
    margin: var(--app-espace-5) calc(-1 * var(--app-espace-2)) 0;
    padding: 12px var(--app-espace-4);
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    box-shadow: 0 -4px 16px rgba(20, 35, 31, 0.08);
}
/* Masquée tant que ses actions sont déjà à l'écran ailleurs (fiche litige :
   bloc de l'étape en cours, static/js/reception-fiche.js) ; garde sa place
   pour que la page ne saute pas. */
.fiche-barre { transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.fiche-barre.is-masquee { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fiche-barre { transition: none; } }
/* Petit écran, barre à un seul bouton : texte et bouton sur une ligne,
   texte sur 2 lignes au plus (plusieurs boutons : présentation d'origine). */
@media (max-width: 575.98px) {
    .fiche-barre:has(.fiche-barre-boutons > :only-child) { flex-wrap: nowrap; gap: var(--app-espace-2); padding: 8px 12px; }
    .fiche-barre:has(.fiche-barre-boutons > :only-child) .fiche-barre-texte {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.85rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .fiche-barre:has(.fiche-barre-boutons > :only-child) .fiche-barre-boutons { flex-shrink: 0; flex-wrap: nowrap; }
}
.fiche-barre-texte { color: var(--app-texte-2); }
.fiche-barre-texte b { color: var(--app-texte); }
.fiche-barre-boutons { display: flex; flex-wrap: wrap; gap: var(--app-espace-2); margin-left: auto; }
/* Téléphone : au-dessus des onglets du bas ; le « + » flottant s'efface. */
@media (max-width: 1199.98px) {
    .app-shell:has(~ .app-tabs) .fiche-barre { bottom: calc(var(--nav-tabs-height) + env(safe-area-inset-bottom, 0px) + 8px); }
    .app-shell:has(.fiche-barre) ~ .app-fab { display: none; }
}

/* ---------------------------------------------------------------
   6. FORMULAIRES
   --------------------------------------------------------------- */
.form-champ { margin-bottom: var(--app-espace-4); }
.form-champ .form-label { font-weight: 600; margin-bottom: 6px; }
.form-obligatoire { color: var(--statut-critique-texte); }
.form-details { margin: var(--app-espace-2) 0 var(--app-espace-4); border-top: 1px solid var(--app-bordure); }
.form-details summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--app-zone-tactile);
    list-style: none;
    font-weight: 700;
    color: var(--m-ink);
    cursor: pointer;
}
.form-details summary::-webkit-details-marker { display: none; }
.form-details summary .mdi { font-size: 1.3rem; transition: transform 0.15s; }
.form-details[open] summary .mdi { transform: rotate(90deg); }
.form-details summary:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; border-radius: 6px; }
.form-details-corps { padding-top: var(--app-espace-2); }
/* Carte d'un formulaire de création : largeur de lecture confortable. */
.form-carte { max-width: 860px; }
/* Ligne répétable d'un formulaire (ex. produits d'un litige). */
.ligne-produit { display: grid; grid-template-columns: 2fr 1.3fr 80px 1.3fr auto; gap: var(--app-espace-2); align-items: center; margin-bottom: var(--app-espace-2); }
@media (max-width: 767.98px) {
    .ligne-produit { grid-template-columns: 1fr 80px auto; padding-bottom: var(--app-espace-2); border-bottom: 1px solid var(--app-bordure); }
    .ligne-produit > [name="ligne_nom_produit"] { grid-column: 1 / -1; }
    .ligne-produit > [name="ligne_cip"] { grid-column: 1 / 2; }
    .ligne-produit > [name="ligne_motif_id"] { grid-column: 1 / 3; }
}
.form-boutons {
    display: flex;
    justify-content: flex-end;
    gap: var(--app-espace-2);
    margin-top: var(--app-espace-4);
    padding-top: var(--app-espace-4);
    border-top: 1px solid var(--app-bordure);
}
.form-boutons .btn { min-height: 40px; border-radius: var(--app-rayon-pill); padding: 0 18px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------
   7. CONNEXION (templates/socle/login.html) : marque en haut, tuiles de
   profil comme celles du portail, modale du code PIN.
   --------------------------------------------------------------- */
.connexion { max-width: 900px; margin: 0 auto; }
.connexion-marque {
    display: flex;
    align-items: center;
    gap: var(--app-espace-2);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--app-texte);
}
.connexion-logo { width: 28px; height: 28px; object-fit: contain; }
.connexion-nom { height: 24px; width: auto; }  /* mot « lappli » en Bauhaus 93 (tracés SVG) */
.connexion-corps { padding: 6vh 0 var(--app-espace-6); }
.connexion-tete { margin-bottom: var(--app-espace-5); }
.connexion-titre { margin: 0 0 4px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.015em; color: var(--app-texte); }
.connexion-sous-titre { margin: 0; color: var(--app-texte-2); }
.connexion-profils {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--app-espace-3);
}
.profil-tile {
    display: flex;
    align-items: center;
    gap: var(--app-espace-3);
    width: 100%;
    min-height: 72px;
    padding: var(--app-espace-3) var(--app-espace-4);
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    background: var(--app-surface);
    color: var(--app-texte);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.profil-tile:hover { border-color: color-mix(in srgb, var(--m) 45%, var(--app-bordure)); box-shadow: 0 4px 14px rgba(20, 35, 31, 0.08); }
.profil-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--m) 40%, white); outline-offset: 2px; }
.profil-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--m-soft);
    color: var(--m-ink);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.profil-texte { display: flex; flex-direction: column; min-width: 0; }
.profil-nom { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.profil-role { font-size: 0.82rem; color: var(--app-texte-2); }
.profil-fleche { margin-left: auto; font-size: 1.3rem; color: var(--app-texte-2); }
.connexion-vide {
    display: flex;
    align-items: center;
    gap: var(--app-espace-2);
    padding: var(--app-espace-4);
    border: 1px dashed var(--app-bordure);
    border-radius: var(--app-rayon-lg);
    background: var(--app-surface);
    color: var(--app-texte-2);
}
.connexion-vide .mdi { font-size: 1.4rem; }
.connexion-lien { margin: var(--app-espace-5) 0 0; text-align: center; font-size: 0.9rem; }
.connexion-lien a { color: var(--m-ink); font-weight: 600; }
.connexion-modale .modal-content { border: 0; border-radius: var(--app-rayon-lg); box-shadow: 0 16px 40px rgba(20, 35, 31, 0.18); }
.connexion-modale .modal-header { border-bottom: 0; padding-bottom: 0; }
.connexion-modale .modal-title { font-size: 1.15rem; font-weight: 800; }
.connexion-modale .modal-footer { border-top: 0; padding-top: 0; }
.connexion-modale .form-label { font-weight: 600; }
.connexion-pin { height: 56px; text-align: center; font-size: 1.6rem; letter-spacing: 0.4em; }
.connexion-modale .modal-footer .btn { min-height: 40px; border-radius: var(--app-rayon-pill); padding: 0 18px; }
@media (max-width: 575.98px) {
    .connexion-corps { padding-top: var(--app-espace-5); }
    .connexion-titre { font-size: 1.45rem; }
    .connexion-profils { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- PAGE D'ERREUR
   templates/socle/erreur.html (404, 403, 500). */
.erreur-page {
    max-width: 480px;
    margin: var(--app-espace-6, 3rem) auto;
    padding: 0 var(--app-espace-4);
    text-align: center;
}
.erreur-icone {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--app-espace-3);
    border-radius: 22px;
    background: var(--m-soft, var(--app-surface));
    color: var(--m, var(--app-texte-2));
    font-size: 2.2rem;
}
.erreur-code { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-texte-2); }
.erreur-titre { margin: 4px 0 var(--app-espace-2); font-size: 1.6rem; font-weight: 800; }
.erreur-texte { margin-bottom: var(--app-espace-4); color: var(--app-texte-2); }
.erreur-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--app-espace-2); }

/* ------------------------------------------------ PARCOURS D'UN DOSSIER
   Fiche litige de Réception (templates/reception/_parcours.html) : fil des
   étapes Déclarer -> Suivre -> Résoudre, bloc de l'étape en cours (seules
   ses actions), fenêtres Portail / Téléphone / Fax / Réponse. */
.parcours-etapes {
    list-style: none;
    margin: 0 0 var(--app-espace-3);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-espace-2);
}
.parcours-etape {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-md);
    background: var(--app-surface);
    min-width: 0;
}
.parcours-etape.is-courant { border: 2px solid var(--m); }
.parcours-pastille {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: var(--statut-a-traiter-fond);
    color: var(--statut-a-traiter-texte);
}
.parcours-etape.is-courant .parcours-pastille { background: var(--m); color: #fff; }
.parcours-etape.is-fait .parcours-pastille { background: var(--statut-clos); color: #fff; font-size: 1.1rem; }
.parcours-etape-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.parcours-etape-texte > span { font-size: 0.85rem; color: var(--app-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcours-etape.is-courant .parcours-etape-texte > span { color: var(--m-ink); font-weight: 600; }

.parcours-bloc { border-color: color-mix(in srgb, var(--m) 35%, var(--app-bordure)); }
.parcours-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: var(--app-espace-3); }
.parcours-titre { margin: 0; font-size: 1.2rem; font-weight: 800; }
.parcours-info { color: var(--app-texte-2); font-size: 0.92rem; }
.parcours-info b { color: var(--app-texte); }
.parcours-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px;
    border-radius: var(--app-rayon-md);
    background: var(--m-soft);
    border: 1px solid color-mix(in srgb, var(--m) 30%, transparent);
}
.parcours-principal-icone {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--m);
    color: #fff;
    font-size: 1.5rem;
}
.parcours-principal-texte { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; }
.parcours-principal-texte span { font-size: 0.9rem; color: var(--app-texte-2); }
.parcours-sous-titre { margin: var(--app-espace-3) 0 var(--app-espace-2); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-texte-2); }
.parcours-autres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--app-espace-2); }
.parcours-canal {
    min-height: var(--app-zone-tactile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}
.parcours-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--app-espace-2); margin-bottom: var(--app-espace-3); }
.parcours-chiffres > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--app-rayon-md); background: var(--app-fond); }
.parcours-chiffres span { font-size: 0.85rem; color: var(--app-texte-2); }
.parcours-chiffres b { font-size: 1.25rem; }
.parcours-chiffres .is-alerte { background: var(--statut-en-retard-fond); }
.parcours-chiffres .is-alerte b, .parcours-chiffres .is-alerte span { color: var(--statut-en-retard-texte); }
.parcours-actions { display: flex; flex-wrap: wrap; gap: var(--app-espace-2); align-items: center; }
.parcours-actions .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.parcours-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--app-espace-2); }
.parcours-choix-colonne { grid-template-columns: 1fr; }
.parcours-choix-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-md);
    font-weight: 600;
    cursor: pointer;
}
.parcours-choix-item input { width: 18px; height: 18px; accent-color: var(--m); }
.parcours-choix-item.is-choisi { border: 2px solid var(--m); background: var(--m-soft); }
.parcours-avoir { padding: 12px 14px; border-radius: var(--app-rayon-md); background: var(--statut-en-retard-fond); }

.parcours-fenetre { display: flex; flex-direction: column; gap: var(--app-espace-3); }
.parcours-pas { display: flex; gap: 12px; align-items: flex-start; }
.parcours-pas > div { display: flex; flex-direction: column; min-width: 0; }
.parcours-pas-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9rem;
    background: var(--m-soft);
    color: var(--m-ink);
}
.recap-copie { margin: var(--app-espace-2) 0 0; }
.recap-ligne {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--app-bordure);
}
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne dt { font-weight: 500; color: var(--app-texte-2); }
.recap-ligne dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; white-space: pre-line; }
.recap-copier {
    width: 40px;
    height: 40px;
    border: 1px solid var(--app-bordure);
    border-radius: 8px;
    background: var(--app-surface);
    color: var(--app-texte-2);
}
.recap-copier.is-copie,
[data-copier-tout].is-copie { border-color: var(--statut-clos); color: var(--statut-clos-texte); }
.parcours-telephones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--app-espace-2); }
.parcours-telephone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px;
    border: 1px solid var(--app-bordure);
    border-radius: var(--app-rayon-md);
    color: var(--app-texte);
    text-decoration: none;
}
.parcours-telephone .mdi { font-size: 1.4rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--app-fond); }
.parcours-telephone b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.parcours-telephone.is-principal { border-color: color-mix(in srgb, var(--m) 40%, transparent); background: var(--m-soft); }
.parcours-telephone.is-principal .mdi { background: var(--m); color: #fff; }
.parcours-a-donner { padding: 12px 14px; border-radius: var(--app-rayon-md); background: var(--app-fond); }
.parcours-fax { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    .parcours-etapes { gap: 6px; }
    .parcours-etape { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; }
    .parcours-etape-texte > span { white-space: normal; }
    .parcours-principal .btn-module { width: 100%; justify-content: center; }
    .recap-ligne { grid-template-columns: 6.5rem minmax(0, 1fr) 44px; }
}

/* --------------------------------- BARRE « MODIFICATIONS NON ENREGISTRÉES »
   static/js/form-dirty-guard.js : fixe en bas de l'écran (au-dessus des
   onglets du bas sur téléphone, --barre-modifs-bas) dès qu'un formulaire
   suivi est modifié. Pendant ce temps, le « + » flottant et la barre
   d'action de fiche sont masqués (ils seraient dessous). */
.barre-modifs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--barre-modifs-bas, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-espace-2) var(--app-espace-4);
    padding: 10px max(var(--app-espace-4), calc((100% - 1200px) / 2));
    background: var(--app-surface);
    border-top: 2px solid var(--m);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}
.barre-modifs[hidden] { display: none; }
.barre-modifs-texte { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.barre-modifs-point { width: 10px; height: 10px; border-radius: 50%; background: var(--statut-en-retard); flex-shrink: 0; }
.barre-modifs-boutons { display: flex; gap: var(--app-espace-2); margin-left: auto; }
.barre-modifs-boutons .btn,
.barre-modifs-boutons .btn-module { min-height: var(--app-zone-tactile); }
body.formulaire-modifie .app-fab,
body.formulaire-modifie .fiche-barre { display: none !important; }
/* Place pour la barre en bas du contenu, pour ne rien masquer en fin de page. */
body.formulaire-modifie .app-contenu { padding-bottom: 6rem !important; }
@media (max-width: 575.98px) {
    .barre-modifs-texte { font-size: 0.9rem; }
    .barre-modifs-boutons { width: 100%; }
    .barre-modifs-boutons > * { flex: 1; justify-content: center; }
}
@media print { .barre-modifs { display: none !important; } }

/* Fiche fournisseur incomplète pour les réclamations
   (reception_service.infos_manquantes) : encadré de la fiche fournisseur,
   champs signalés, rappel à l'étape « Déclarer » d'un litige. */
.fournisseur-manquants { display: flex; gap: 10px; align-items: flex-start; }
.fournisseur-manquants > .mdi { font-size: 1.3rem; line-height: 1.2; }
.form-control.is-manquant,
.form-select.is-manquant {
    border-color: var(--statut-en-retard);
    background-color: color-mix(in srgb, var(--statut-en-retard-fond) 55%, white);
}
.parcours-manquants {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: var(--app-espace-3) 0 0;
    padding: 10px 12px;
    border-radius: var(--app-rayon-md);
    background: var(--statut-en-retard-fond);
    color: var(--statut-en-retard-texte);
    font-size: 0.92rem;
}
.parcours-manquants a { color: inherit; font-weight: 700; }

/* Planning : changement de période sans recharger la page
   (static/planning/js/planning_navigation.js). Le tableau s'estompe très
   légèrement pendant la récupération, avec un délai : un chargement rapide
   ne fait donc pas clignoter. */
body.planning-charge [data-planning-zone="contenu"] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s 0.12s;
}


/* Réordonnancement des lignes (static/js/ordre-lignes.js) : poignée + Monter / Descendre. */
.ord-cellule { white-space: nowrap; width: 1%; }
.ord-cellule form { display: inline; margin: 0; }
.ord-poignee { cursor: grab; color: var(--app-texte-doux, #adb5bd); touch-action: none; vertical-align: middle; }
.ord-poignee:active { cursor: grabbing; }
.ord-bouton { border: 0; background: transparent; color: var(--app-texte-doux, #6c757d); padding: 0 .15rem; border-radius: 4px; }
.ord-bouton:hover:not(:disabled) { color: var(--m-ink); background: var(--m-soft); }
.ord-bouton:disabled { opacity: .3; }
tr.ord-en-cours { opacity: .4; }

/* Signature du contrat de location (templates/mad/signer.html, static/js/signature.js). */
.signature-page { max-width: 760px; }
.signature-cadre { position: relative; border: 2px dashed var(--app-bordure-forte, #b6bec9); border-radius: var(--app-rayon-lg, 12px); background: #fff; }
.signature-zone { display: block; width: 100%; height: 240px; touch-action: none; cursor: crosshair; }
@media (max-height: 520px) { .signature-zone { height: 160px; } }  /* iPhone en paysage */
.signature-indice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aab2bd; font-size: 1.4rem; pointer-events: none; }
.signature-indice[hidden] { display: none; }
.signature-accord { font-size: 1.05rem; }
.signature-accord .form-check-input { width: 1.4rem; height: 1.4rem; }
.signature-page .form-boutons { flex-wrap: wrap; }
.signature-page .form-boutons .btn, .signature-page .form-boutons .btn-module { flex: 1 1 auto; }

/* Ligne de tableau cliquable (data-url, voir liste-donnees.js). */
.ld .ld-table tbody tr[data-url] { cursor: pointer; }