/* =====================================================================
   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.
   ===================================================================== */

.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: #0b2d6b;
    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: #0b2d6b; margin-right: 14px; white-space: nowrap; }
.fiche-contact a:hover { text-decoration: underline; }
.fiche-contact i { color: #0b2d6b; }

.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: #0b2d6b;
    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: #0b2d6b; text-decoration: underline; }

.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;
}

/* ------------------------------------------------------------ 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; }
}