/* =====================================================================
   fiche-dossier.css — présentation des blocs d'en-tête du dossier
   (Infos contact, Infos opportunité, Donneur d'ordre), partagés par les
   écrans du gestionnaire.

   Objectif : distinguer clairement ce qui SE LIT de ce qui SE MODIFIE, et
   réduire la hauteur. Avant, chaque information occupait deux lignes pleine
   largeur avec une valeur encadrée comme un champ de saisie.
   ===================================================================== */

/* LA HAUTEUR PLAFOND D'UN BLOC DE RANGÉE, écrite UNE SEULE FOIS (Ben,
   27/09/2026 : « la longueur doit être fixe, après c'est avec le scroller »).
   Les rangées du haut (1 à 4) et du bas (7 à 10) de l'écran de contrôle du
   devis s'y réfèrent toutes les deux : une seule valeur à changer si la
   hauteur doit bouger, et aucune chance qu'elles se désaccordent. */
:root { --fd-haut-bloc: clamp(320px, 42vh, 460px); }

.fiche-bloc {
    border: 1px solid #dde3ec;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 45, 107, .06);
}

/* En-tête : sobre, avec la référence du dossier à droite. */
.fiche-bloc .fiche-tete {
    background: #16324A;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    padding: 10px 14px;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}
.fiche-bloc .fiche-ref {
    font-weight: 600;
    font-size: 12px;
    opacity: .8;
    white-space: nowrap;
}
.fiche-bloc .fiche-tete .btn-light {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.fiche-bloc .fiche-tete .btn-light:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.fiche-bloc .fiche-corps { padding: 14px 16px; background: #fff; }

/* ------------------------------------------------ Informations en lecture */
.fiche-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 20px;
}
.fiche-item { min-width: 0; }
.fiche-item.fiche-large { grid-column: 1 / -1; }
.fiche-lbl {
    display: block;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8593a8;
    font-weight: 700;
    margin-bottom: 1px;
}
.fiche-val {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #16202f;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef2f7;
}
.fiche-val.fiche-vide { color: #a9b4c4; font-weight: 400; font-style: italic; }

.fiche-contact { border-bottom: 0; font-weight: 400; }
.fiche-contact a { color: #16324A; margin-right: 14px; white-space: nowrap; }
.fiche-contact a:hover { text-decoration: underline; }
.fiche-contact i { color: #16324A; }

.fiche-section {
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8593a8;
    font-weight: 700;
}

/* ------------------------------------------------- Champs modifiables */
.fiche-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
}
.fiche-champ { min-width: 0; }
.fiche-champ.fiche-large { grid-column: 1 / -1; }
.fiche-champ label {
    display: block;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8593a8;
    font-weight: 700;
    margin-bottom: 2px;
}
.fiche-champ .form-control {
    border-color: #dde3ec;
    font-size: 13.5px;
    color: #16202f;
}
.fiche-champ .form-control:focus {
    border-color: #16324A;
    box-shadow: 0 0 0 .12rem rgba(11, 45, 107, .12);
}
/* Un champ en lecture seule ne doit pas se donner l'air modifiable. */
.fiche-champ .form-control[readonly] {
    background: #f7f9fc;
    border-color: #eef2f7;
    color: #3c4a5e;
}

/* --------------------------------------------------------- Téléphone */
.fiche-champ .input-group .btn { border-color: #dde3ec; }

/* =====================================================================
   LISTES DE LA FICHE DOSSIER — pièces jointes et notes.
   Ces deux blocs vivent dans une colonne au quart de la largeur. Un tableau
   y impose un défilement horizontal : on liste donc, en laissant le texte
   passer à la ligne, et la liste défile verticalement au lieu d'étirer la
   page quand le dossier compte des dizaines de pièces.
   ===================================================================== */

.fd-body { padding: 0; background: #fff; }

/* Un élément masqué (filtre) ne doit pas rester affiché à cause du flex. */
.fd-item[hidden], .fd-note[hidden] { display: none !important; }

/* -------------------------------------------------- Barre de filtre */
.fd-barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f7f9fc;
    border-bottom: 1px solid #eef2f7;
}
.fd-barre i { color: #8593a8; font-size: 12px; }
.fd-filtre {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: #16202f;
    padding: 2px 0;
}
.fd-filtre:focus { outline: 0; }
.fd-filtre::placeholder { color: #a9b4c4; }

.fd-liste { max-height: 430px; overflow-y: auto; }
.fd-aucun {
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    color: #8593a8;
}

/* --------------------------------------------------- État « vide » */
.fd-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    color: #a9b4c4;
    font-size: 12.5px;
    text-align: center;
}
.fd-vide i { font-size: 20px; opacity: .55; }

/* ------------------------------------------------------ Une pièce */
.fd-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid #f1f4f9;
}
.fd-item:last-child { border-bottom: 0; }
.fd-item:hover { background: #fbfcfe; }

.fd-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #eef1f6;
    color: #6b7a90;
}
.fd-ico.ff-pdf { background: #fdeeee; color: #c9382f; }
.fd-ico.ff-img { background: #f0edfd; color: #6b4fd0; }
.fd-ico.ff-doc { background: #e9f1fd; color: #1f5fbf; }
.fd-ico.ff-xls { background: #e8f6ed; color: #1c7a45; }
.fd-ico.ff-ppt { background: #fdf0e8; color: #c1571b; }
.fd-ico.ff-zip { background: #fbf3e0; color: #97730f; }
.fd-ico.ff-mail { background: #eaf4f7; color: #1c6a80; }
.fd-ico.ff-vid { background: #fdecf3; color: #b02a63; }
.fd-ico.ff-aud { background: #ecf3ee; color: #3d7a52; }
.fd-ico.ff-txt { background: #f0f2f5; color: #5c6a7e; }

.fd-corps { flex: 1 1 auto; min-width: 0; }
.fd-nom {
    /* Deux lignes suffisent : le nom complet reste en infobulle. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: #16202f;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.fd-nom:hover { color: #16324A; text-decoration: underline; }
/* PIECE ANNULEE : barree, en rouge, avec son badge (Ben, 25/09/2026).
   La liste doit dire la verite sans qu on ouvre la piece : sur un dossier qui porte
   trente pieces, personne n ouvre pour verifier, et c est la mauvaise version qui part. */
.fd-item-annule { background: #fdf4f4; }
.fd-nom-annule {
    color: #b02a37 !important;
    text-decoration: line-through;
    text-decoration-color: #b02a37;
    text-decoration-thickness: 2px;
}
.fd-nom-annule:hover { color: #8b1f2a !important; text-decoration: line-through underline; }
.fd-annule-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #b02a37; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px;
    white-space: nowrap;
}
.fd-annule-badge i { font-size: 10px; }


.fd-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    /* Sur les écrans où le bloc occupe toute la largeur, l'état resterait à un
       millier de pixels de la date : on borne la ligne pour garder l'ensemble
       lisible d'un seul regard. */
    max-width: 640px;
}
.fd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 11px;
    color: #8593a8;
    min-width: 0;
}
.fd-meta span { overflow-wrap: anywhere; }

/* ------------------------------------------- Publié / masqué */
.fd-pub {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .12s;
}
.fd-pub i { font-size: 10px; }
.fd-pub:hover { filter: brightness(.96); }
.fd-pub-on { background: #e6f5ec; border-color: #bde3cc; color: #17693c; }
.fd-pub-off { background: #f2f4f8; border-color: #dde3ec; color: #74839a; }

/* -------------------------------------------------- Une note */
.fd-note {
    padding: 10px 12px 9px;
    border-bottom: 1px solid #f1f4f9;
    border-left: 3px solid #dde3ec;
    cursor: pointer;
    transition: background .12s;
}
.fd-note:last-child { border-bottom: 0; }
.fd-note:hover { background: #fbfcfe; }
.fd-note-pub { border-left-color: #4ba674; }

.fd-note-txt {
    margin: 0;
    /* Au-delà d'environ quatre-vingts caractères, l'œil perd sa ligne. */
    max-width: 82ch;
    font-size: 12.5px;
    line-height: 1.45;
    color: #3c4a5e;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fd-note-txt.fd-vide-txt { color: #a9b4c4; font-style: italic; }

/* =====================================================================
   LISTE LARGE. Selon l'écran, ces blocs occupent un quart de la largeur ou
   la totalité. Au-delà d'environ 620 px, la mise en colonne empilée laisse un
   grand vide : la ligne se déplie alors en une seule, comme un explorateur de
   fichiers. On interroge la largeur du CONTENEUR et non celle de l'écran :
   le bloc s'adapte à la place qu'on lui donne, où qu'il soit posé.
   Les navigateurs sans requêtes de conteneur gardent la version empilée,
   qui reste correcte.
   ===================================================================== */
.fd-liste { container-type: inline-size; }

@container (min-width: 620px) {
    .fd-item { align-items: center; }
    .fd-corps { display: flex; align-items: center; gap: 16px; }
    .fd-nom { flex: 1 1 auto; -webkit-line-clamp: 1; }
    .fd-item .fd-bas { flex: 0 0 auto; margin-top: 0; max-width: none; }
    .fd-item .fd-meta { flex-wrap: nowrap; gap: 14px; }

    .fd-note { display: flex; align-items: center; gap: 18px; }
    .fd-note-txt { flex: 1 1 auto; max-width: none; -webkit-line-clamp: 2; }
    .fd-note .fd-bas { flex: 0 0 auto; margin-top: 0; max-width: none; }
    .fd-note .fd-meta { flex-wrap: nowrap; gap: 14px; }
}

/* -------------------------------- En-tête : compte + bouton d'ajout */
.fd-tete-droite {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fiche-bloc .fiche-tete .fd-ajout {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    line-height: 1.5;
    white-space: nowrap;
}

/* =====================================================================
   BARRE D'OUTILS D'UN PANNEAU DE LA FICHE DOSSIER — titre à gauche,
   actions à droite.

   Remplace un montage en grille qui posait trois problèmes : un
   `container` imbriqué dans un `row`, cinq classes de palier aux
   intentions contradictoires (`col-4 col-md-2 col-sm-4 col-lg-2 col-xs-6`
   pour porter un bouton de 128 px), et des `float-left` / `float-right`
   inversés — sans effet, les colonnes étant déjà des éléments flex.

   Ici, aucune classe de grille : la barre ne dépend d'aucun point de
   rupture. Le titre prend la place disponible, les actions gardent leur
   largeur, et sur mobile elles passent sous le titre.
   ===================================================================== */
/* Nom distinct de `.fd-barre`, qui désigne déjà la barre de filtre des blocs
   Pièces et Notes plus haut dans ce fichier : réutiliser le même nom faisait
   s'appliquer les deux jeux de règles aux deux composants. */
.fd-outils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.fd-outils-titre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.fd-outils-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
/* Un bouton reste lisible même quand la barre est étroite. */
.fd-outils-actions .btn { white-space: nowrap; }

@media (max-width: 575px) {
    .fd-outils-titre { font-size: 1rem; }
    .fd-outils-actions { width: 100%; justify-content: flex-start; }
}

/* ------------------------------------------------------------ Mobile */
@media (max-width: 575px) {
    .fiche-grille, .fiche-form { grid-template-columns: 1fr; }
    .fiche-bloc .fiche-tete { font-size: 13px; flex-wrap: wrap; }
    .fiche-bloc .fiche-ref { font-size: 11px; }
    .fd-liste { max-height: 60vh; }
}

/* ==========================================================================
   UN NUMÉRO ET UNE COULEUR PAR BLOC DE LA FICHE DOSSIER
   Ben, 16/08/2026 : « pour faciliter et accélérer la gestion il faut aider le
   gestionnaire à se repérer par n° de bloc et par code couleur ; chaque bloc
   doit avoir une couleur différente tout en gardant une harmonie ».

   LA COULEUR EST DÉRIVÉE DU NUMÉRO, jamais posée à la main : la classe
   `fd-bloc-N` est écrite par le bloc lui-même à partir de `$numberBloc`. Le
   numéro et la teinte ne peuvent donc pas diverger le jour où un bloc
   s'intercale — ils viennent de la même source.

   UNE SEULE COULEUR, NEUF VALEURS (Ben, 16/08/2026 : « il faut une déclinaison
   de la même couleur sinon cela fera arc-en-ciel »). Le premier essai faisait
   tourner la teinte sur la roue - bleu, vert, violet, prune - et c'était neuf
   couleurs, pas une palette. La teinte est désormais FIXE, autour de 212°,
   celle du bleu institutionnel du groupe ; seule la clarté monte, par pas
   réguliers, du bleu nuit du premier bloc au bleu moyen du neuvième.

   LA PLAGE S'ARRÊTE À #2c70aa, et ce n'est pas un choix esthétique : au-delà,
   le contraste du texte blanc passe sous 5:1 et le titre du bloc devient
   pénible à lire. Neuf pas dans cette plage restent distinguables deux à deux
   sans qu'aucun ne crie plus fort que les autres.
   L'AMBRE EST LA SEULE EXCEPTION, et elle N'EST PAS dans la palette
       numérotée : elle est portée par `fd-tete-controle`, donc réservée au bloc
       où le gestionnaire AGIT. Le numéro de ce bloc change selon le contexte
       (4 en contrôle du devis, absent aux autres étapes) ; le sortir de la
       palette est le seul moyen qu'aucun autre bloc ne tombe dessus - c'est
       arrivé au premier essai, où « 5. Infos opportunité » était ambre comme le
       bandeau de contrôle.

   Ces règles remplacent le `bg-primary` de Bootstrap, qui peignait les neuf
   blocs du même bleu : à l'écran, rien ne distinguait le rapport FRT des notes.
   La spécificité (deux classes) suffit à passer devant `bg-primary` sans
   `!important`, donc un bloc sans classe garde exactement l'aspect d'avant.
   ========================================================================== */
.card.fd-bloc-1>.card-header.bg-primary { background-color: #0b2545 !important; }
.card.fd-bloc-2>.card-header.bg-primary { background-color: #102c50 !important; }
.card.fd-bloc-3>.card-header.bg-primary { background-color: #14355c !important; }
.card.fd-bloc-4>.card-header.bg-primary { background-color: #183e69 !important; }
.card.fd-bloc-5>.card-header.bg-primary { background-color: #1c4876 !important; }
.card.fd-bloc-6>.card-header.bg-primary { background-color: #205283 !important; }
.card.fd-bloc-7>.card-header.bg-primary { background-color: #245c90 !important; }
.card.fd-bloc-8>.card-header.bg-primary { background-color: #28669d !important; }
.card.fd-bloc-9>.card-header.bg-primary { background-color: #2c70aa !important; }

/* Les blocs bâtis sur .fiche-bloc (contact, opportunité) portent leur titre
   dans .fiche-tete et non dans un .card-header : même palette, même ordre. */
.fiche-bloc.fd-bloc-1>.fiche-tete { background: #0b2545; }
.fiche-bloc.fd-bloc-2>.fiche-tete { background: #102c50; }
.fiche-bloc.fd-bloc-3>.fiche-tete { background: #14355c; }
.fiche-bloc.fd-bloc-4>.fiche-tete { background: #183e69; }
.fiche-bloc.fd-bloc-5>.fiche-tete { background: #1c4876; }
.fiche-bloc.fd-bloc-6>.fiche-tete { background: #205283; }
.fiche-bloc.fd-bloc-7>.fiche-tete { background: #245c90; }
.fiche-bloc.fd-bloc-8>.fiche-tete { background: #28669d; }
.fiche-bloc.fd-bloc-9>.fiche-tete { background: #2c70aa; }

/* ==========================================================================
   LES DEUX SURFACES VIDES DE L'ÉCRAN DE CONTRÔLE DU DEVIS
   Ben, 16/08/2026 : « entre le bloc 1 et 2 il y a du vide en dessous du
   bloc 1 » et « pareil je ne veux pas ce gros vide blanc en dessous du
   bloc 7 ».

   CE N'EST PAS UNE MARGE À SUPPRIMER, c'est une carte trop courte pour sa
   rangée. Les trois blocs du haut sont côte à côte dans une même `row` : les
   deux rapports portent un cadre PDF de 520 px, la fiche du sinistré fait la
   moitié. Bootstrap étire la COLONNE à la hauteur de la rangée, jamais la
   CARTE : le blanc apparaît sous la carte, à l'intérieur de la colonne. Même
   cause en bas de page, où la colonne de droite suit la hauteur de la colonne
   de gauche.

   LE REMÈDE EST DONC DE LAISSER LA CARTE OCCUPER SA COLONNE, pas de rogner
   quoi que ce soit : rien n'est masqué, rien n'est déplacé, aucun contenu ne
   change. La dernière carte de chaque colonne prend la place restante, et sa
   zone défilante s'allonge d'autant — de la surface utile au lieu du blanc.

   CE CORRECTIF NE S'APPLIQUE QU'À L'ÉCRAN DE CONTRÔLE DU DEVIS, reconnu à la
   présence d'un bloc `order-1` dans la rangée suivante. Les quatre autres
   étapes de la page (contrôle FRT, faire devis, envoi devis, relance Cie) sont
   des formulaires courts qui gardent exactement leur mise en page actuelle.
   ========================================================================== */
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col { display: flex; }
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card { flex: 1 1 auto; min-height: 0; }
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card>.card-body.text-center {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card>.card-body.text-center>embed {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
}
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.fiche-bloc { flex: 1 1 auto; min-height: 0; }

/* ==========================================================================
   LA RANGÉE DU HAUT A UNE HAUTEUR PLAFOND, ET CHAQUE BLOC DÉFILE DEDANS.
   Ben, 27/09/2026, en recette : « les blocs 2 et 3 ne doivent pas avoir une
   longueur kilométrique. La longueur doit être fixe, après c'est avec le
   scroller. Là ça fait un gros blanc en bas du bloc 1 et du bloc 4, ce n'est
   pas sérieux. Le 1, 2, 3, 4 doivent avoir la même hauteur. De toute façon
   c'est juste un petit aperçu : pour ouvrir le FRT il y a l'œil, pareil pour
   la télé-expertise. »

   MESURE DU JOUR : les quatre cartes faisaient déjà la même hauteur — mais
   1 097 px, dictée par les deux aperçus PDF. Les étirer ne suffisait donc pas,
   il fallait les BORNER : le blanc sous les blocs 1 et 4 venait de ce que leur
   contenu (des champs courts) ne remplit jamais 1 000 px.

   Rien n'est masqué : ce qui dépasse s'atteint par l'ascenseur du bloc, et le
   bouton « Voir le rapport » ouvre la pièce en grand comme avant.
   ========================================================================== */
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card {
    max-height: var(--fd-haut-bloc);
}
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card>.card-body,
.row.mb-1:has(~ .row.mb-2 > .order-1)>.col>.card>.fiche-corps {
    min-height: 0;
    overflow-y: auto;
    /* Arrivé en bout de course, la page ne prend pas le relais : le bloc garde
       la main, sinon on croit que l'ascenseur est cassé. */
    overscroll-behavior: contain;
}

/* ==========================================================================
   LA RANGÉE DU BAS SUIT LA MÊME RÈGLE (Ben, 27/09/2026, dans la foulée) :
   « Pareil en bas. Les blocs 7, 8, 9 et 10 doivent avoir la même hauteur,
   doivent être alignés en bas. Regarde le bloc 7 : ce n'est pas esthétique. »

   MESURE : les quatre cartes finissaient à des hauteurs différentes —
   7 Adresse 449 px, 8 Documents 512, 9 Infos compagnie 633, 10 Notes 513.
   Elles partaient bien du même haut, d'où l'escalier en bas de rangée.

   Deux gestes : la carte occupe toute sa colonne (elles finissent donc
   ensemble), et elle est bornée à la même hauteur que la rangée du haut.
   Même garde que ci-dessus : cette rangée-là seulement, celle qui porte le
   bloc « contrôle devis ». Les autres étapes de la fiche ne bougent pas.
   ========================================================================== */
.row.mb-2:has(> .order-1)>.col-md-3.order-3 { display: flex; }
.row.mb-2:has(> .order-1)>.col-md-3.order-3>.card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: var(--fd-haut-bloc);
}
.row.mb-2:has(> .order-1)>.col-md-3.order-3>.card>.card-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* UN SEUL ascenseur par bloc : les listes de pièces et de notes ne rajoutent
   pas le leur par-dessus celui de la carte. */
.row.mb-2:has(> .order-1)>.col-md-3.order-3>.card>.card-body>.fd-liste {
    max-height: none;
    overflow: visible;
}

.row>.col-lg-6.order-2:last-child { display: flex; flex-direction: column; }
.row>.col-lg-6.order-2:last-child>.card { flex: 0 0 auto; }
.row>.col-lg-6.order-2:last-child>.card:last-child { flex: 1 1 auto; min-height: 0; }
.row>.col-lg-6.order-2:last-child>.card:last-child>.fd-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.row>.col-lg-6.order-2:last-child>.card:last-child>.fd-body>.fd-liste {
    flex: 1 1 430px;
    min-height: 0;
    max-height: max-content;
}

/* REPLI POUR LES NAVIGATEURS SANS `:has()`. La règle ci-dessus y est ignorée
   en entier : la page reste alors telle qu'elle est aujourd'hui, avec ses deux
   surfaces vides, mais rien n'est cassé. Aucun navigateur du parc n'est dans
   ce cas (Chrome 105+, Safari 15.4+, Firefox 121+), la garde est là pour les
   postes qu'on ne connaît pas encore. */

/* ==========================================================================
   NUMÉRO DE LIGNE ET ZÉBRAGE DANS LES LISTES DE LA FICHE
   Ben, 16/08/2026 : « même à l'intérieur de certains blocs, par exemple
   document, notes etc. il faut 1re colonne = n° de ligne + zébrage des lignes ».

   Le rang est écrit par fdRenumeroter() dans `data-rang`, sur les seules lignes
   VISIBLES : filtrer 44 notes pour n'en garder que trois affiche « 1, 2, 3 ».
   Le CSS ne fait que le montrer. Un compteur purement CSS aurait numéroté juste
   mais zébré faux, `:nth-child` ne sachant pas sauter une ligne masquée.

   LE NUMÉRO EST POSITIONNÉ EN ABSOLU, pas inséré dans le flux : les deux listes
   changent de mode d'affichage selon la largeur (bloc en dessous de 576 px,
   flex au-dessus). Un pseudo-élément dans le flux se serait retrouvé au-dessus
   du texte sur mobile ; en absolu, il tient sa colonne aux deux largeurs, et le
   `padding-left` de la ligne lui réserve exactement sa place.
   ========================================================================== */
.fd-liste .fd-item,
.fd-liste .fd-note {
    position: relative;
}

.fd-liste .fd-item { padding-left: 44px; }
.fd-liste .fd-note { padding-left: 44px; }

.fd-liste .fd-item[data-rang]::before,
.fd-liste .fd-note[data-rang]::before {
    content: attr(data-rang);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #8593a8;
    background: #f4f7fb;
    border-right: 1px solid #e7ecf4;
    pointer-events: none;
}

/* Le zébrage porte sur le rang visible (classe posée par fdRenumeroter), jamais
   sur `:nth-child`. Le survol reste toujours au-dessus du zébrage : il est
   redéclaré ici parce que ces règles viennent APRÈS `.fd-item:hover` dans la
   feuille, et gagneraient sinon à spécificité égale. */
.fd-liste .fd-item.fd-pair,
.fd-liste .fd-note.fd-pair {
    background: #f7f9fc;
}

.fd-liste .fd-item.fd-pair::before,
.fd-liste .fd-note.fd-pair::before {
    background: #eef2f8;
}

.fd-liste .fd-item:hover,
.fd-liste .fd-note:hover,
.fd-liste .fd-item.fd-pair:hover,
.fd-liste .fd-note.fd-pair:hover {
    background: #eaf1fb;
}

/* Le bandeau du bloc de contrôle du devis. Il gardait le gris `bg-secondary` de
   Bootstrap, qui ne le distinguait de rien ; il prend donc sa place dans la
   palette, à son rang.

   IL A ÉTÉ AMBRE PENDANT UNE HEURE, et c'était une erreur (Ben, 16/08/2026 :
   « le marron du 4 et ses déclinaisons sont en décalage avec nos bleus »). Le
   raisonnement était qu'une couleur chaude signalerait le seul bloc où l'on
   décide. Mais une couleur qui sort de la famille ne se lit pas comme un accent :
   elle se lit comme une erreur de palette, au milieu de huit blocs bleus. Ce qui
   distingue ce bloc, c'est déjà son numéro, sa pleine largeur et ses deux boutons.

   La classe n'est posée qu'en contrôle du devis : aux quatre autres étapes de la
   page, cette même carte reste grise. */
.card-header.bg-secondary.fd-tete-controle { background-color: #183e69 !important; }

/* Le numéro d'un bloc, quand il est porté par un bandeau et non par un titre
   simple. Même pastille que les numéros de carte du masque de contrôle, pour
   qu'un numéro se reconnaisse partout à la même forme. */
.fd-numero-bloc {
    display: inline-block;
    min-width: 24px;
    padding: 1px 6px;
    margin-right: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .22);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LES TABLEAUX DE LA FICHE DOSSIER
   Ben, 16/08/2026 : « ce truc fait trop brouillon et devient illisible il faut
   mieux le presenter » — à propos des interlocuteurs assurance, rendus jusque-là
   en paragraphes empilés.

   POURQUOI UN TABLEAU PLUTÔT QU'UN PARAGRAPHE. Six interlocuteurs en <span>
   empilés, c'est six lignes de longueur libre : le nom, le rôle, le téléphone et
   le courriel ne tombent jamais au même endroit d'une ligne à l'autre. Pour
   trouver un numéro, l'œil doit relire chaque ligne en entier. En colonnes, tous
   les téléphones sont l'un sous l'autre : on descend une colonne au lieu de
   balayer six lignes.

   Le tableau défile dans SON cadre. La page, elle, ne défile jamais de côté :
   c'est le rôle de .fiche-cadre-table, et il vaut à toutes les largeurs.
   ========================================================================== */
.fiche-cadre-table {
    overflow-x: auto;
    border: 1px solid #e7ecf4;
    border-radius: 6px;
    background: #fff;
    margin-top: 6px;
}

.fiche-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 12px;
}

.fiche-table thead th {
    background: #f4f7fb;
    border-bottom: 1px solid #e0e7f1;
    padding: 6px 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7a8694;
    text-align: left;
    white-space: nowrap;
}

.fiche-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f4f9;
    vertical-align: middle;
}

.fiche-table tbody tr:last-child td { border-bottom: 0; }

/* Zébrage sur le rang réel : aucune ligne n'est jamais masquée dans ce tableau,
   contrairement aux listes filtrables où il faut passer par une classe. */
.fiche-table tbody tr:nth-child(even) { background: #f7f9fc; }
.fiche-table tbody tr:hover { background: #eaf1fb; }

.fiche-table .fiche-rang {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #8593a8;
    border-right: 1px solid #eef2f7;
}

.fiche-table .fiche-nom-inter { font-weight: 600; color: #16324A; white-space: nowrap; }
.fiche-table a { color: #16324A; white-space: nowrap; }
.fiche-table a:hover { text-decoration: underline; }
.fiche-table a i { opacity: .6; margin-right: 3px; }

/* Sous 768 px la colonne « Rôle et société » est la première à sacrifier : le
   nom, le téléphone et le courriel sont ce qu'on vient chercher. */
@media (max-width: 767px) {
    .fiche-table { font-size: 11.5px; }
    .fiche-table thead th:nth-child(3),
    .fiche-table tbody td:nth-child(3) { display: none; }
}

/* ==========================================================================
   LE BOUTON « VOIR LE RAPPORT » DES BANDEAUX DE BLOC
   Ben, 16/08/2026 : « change ces boutons rouges voir le rapport ».

   Ils étaient rouges (`btn-dark`, que le thème de l'application repeint en
   rouge). Or le rouge annonce un geste qui engage ou qui détruit — rejeter,
   supprimer, clôturer. Ouvrir un rapport en lecture n'engage rien. Un rouge posé
   là fait hésiter devant un simple coup d'œil, et surtout il AFFAIBLIT le rouge
   à l'endroit où il compte vraiment : le bouton « Rejeter » du bloc de contrôle.
   Une couleur d'alerte ne garde son sens que si elle reste rare.

   Le bouton devient donc blanc translucide sur le bandeau, comme « + Note » et
   les autres actions de lecture de la fiche : visible, cliquable, sans crier.
   ========================================================================== */
.card-header .btn.fd-voir {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease;
}

.card-header .btn.fd-voir:hover,
.card-header .btn.fd-voir:focus {
    background: rgba(255, 255, 255, .3);
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

.card-header .btn.fd-voir i { opacity: .85; margin-right: 4px; }