/* =====================================================================================
   PRJ — CHANTIERS (liste + fiche + situation).

   ⚠️⚠️ TOUS les sélecteurs sont préfixés `prj-` et AUCUN ne cible un conteneur partagé.
   La leçon T-UI est fraîche et elle a été payée DEUX fois : styler `.btn-filtres` puis
   `.crud-toolbar-actions` a cassé des écrans que la tranche ne touchait pas (Commissions,
   toutes les listes). Un sélecteur partagé couple autant qu'un composant partagé.

   ⚠️ `thead { top: 0 }` — jamais 64px : les tables de la situation vivent dans un conteneur
   à défilement propre, où `sticky` se cale sur LUI. C'est le défaut qui a masqué la première
   ligne des 46 états pendant des mois (retour terrain n°1).
   ===================================================================================== */

.prj-page { max-width: 1280px; margin: 0 auto; }

.prj-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.prj-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prj-title {
    font-family: Sora, sans-serif; font-size: 28px; font-weight: 800; color: var(--ink);
    margin: 2px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ----- badge de statut (les 3 valeurs du CHECK, pas une de plus) ----- */
.prj-statut {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.prj-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prj-statut-en_cours { background: var(--teal-soft); color: var(--teal-dark); }
.prj-statut-suspendu { background: var(--amber-soft); color: var(--amber); }
.prj-statut-termine  { background: var(--paper); color: var(--slate); }

.prj-lien { color: var(--blue); text-decoration: none; font-weight: 600; }
.prj-lien:hover { text-decoration: underline; }

/* ----- barre d'avancement budget -----
   ⚠️ La barre est BORNÉE à 100 % : le dépassement se dit par la COULEUR et par le texte,
   jamais par un remplissage qui sortirait de son rail (illisible et faussement rassurant). */
.prj-bar { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.prj-bar-rail { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prj-bar-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.prj-bar-fill.prj-bar-over { background: var(--red); }
.prj-bar-txt { font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; }
.prj-bar-lg .prj-bar-rail { height: 10px; }
.prj-bar-lg .prj-bar-txt { font-size: 14px; }
.prj-over { color: var(--red); font-weight: 600; }
.prj-neg { color: var(--red); }
.prj-budget-reste { font-size: 13px; color: var(--slate); margin: 8px 0 0; }

/* ----- situation ----- */
.prj-situation { margin-top: 26px; }
.prj-sec-title {
    font-family: Sora, sans-serif; font-size: 19px; font-weight: 700; color: var(--ink);
    margin: 0 0 14px;
}
.prj-sec-sub {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--slate);
}

.prj-tuiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.prj-tuile {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.prj-tuile-forte { border-color: var(--teal); box-shadow: 0 1px 10px rgba(20, 184, 166, .12); }
.prj-tuile-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); }
.prj-tuile-val { font-family: Sora, sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.prj-tuile-forte .prj-tuile-val { color: var(--teal-dark); }
/* Marge NÉGATIVE : elle doit se voir, mais elle est NORMALE en début de chantier (les coûts
   précèdent les livraisons) — d'où un liseré rouge et un chiffre rouge, sans fond d'alarme.
   La tuile porte sa propre explication ; c'est elle qui évite de la lire comme un incident. */
.prj-tuile-neg { border-color: var(--red); }
.prj-tuile-neg .prj-tuile-val { color: var(--red); }
.prj-tuile-note { font-size: 11.5px; color: var(--slate); }

.prj-note {
    background: var(--paper); border-left: 3px solid var(--slate); border-radius: 0 10px 10px 0;
    padding: 10px 14px; font-size: 12.5px; color: var(--slate); margin: 0 0 18px;
}

.prj-budget {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin-bottom: 22px;
}
.prj-budget-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.prj-budget-note { font-size: 11.5px; color: var(--slate); }

.prj-groupe { margin-bottom: 20px; }
.prj-table { margin-top: 8px; }
.prj-table thead th {
    /* ⚠️ top:0 — voir l'avertissement en tête de fichier. */
    top: 0;
}

/* ----- pièces en cartes (mobile) ----- */
.prj-cards { display: none; flex-direction: column; gap: 8px; margin-top: 8px; }
.prj-card {
    display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
}
.prj-card-l1 { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.prj-card-l2 { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--slate); }

@media (max-width: 768px) {
    .prj-table { display: none; }
    .prj-cards { display: flex; }
    .prj-title { font-size: 22px; }
    .prj-tuiles { grid-template-columns: 1fr 1fr; }
    .prj-head-actions { width: 100%; }
    .prj-head-actions > * { flex: 1 1 auto; }
}