/* ==========================================================================
   Portail VIP Plus — feuille de style unique.

   Deux references :
   - la charte du site vipplus.com : rouge #cc5759, bordeaux #591a26 (celui du
     logo), texte #606060, filets #e3e3e3 ;
   - la maquette « Point de gestion d'affaire » (PA_Fontfroide) : bandeau encre,
     sections numerotees, tuiles d'indicateurs dont une inversee, filets fins,
     micro-libelles en capitales espacees, chiffres tabulaires.

   Organisation : tokens, base, shell, composants, ecrans, responsive.
   Pas de framework : peu d'ecrans, et la charge doit rester nulle sur un VPS
   mutualise.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
    /* Marque VIP Plus (valeurs relevees dans le CSS de vipplus.com). */
    --rouge: #cc5759;
    --rouge-fonce: #af4b4d;
    --rouge-sombre: #803638;
    --rouge-pale: #fbeff0;
    --bordeaux: #591a26;
    --bordeaux-fonce: #40121b;

    /* Encre : le bandeau de la maquette. */
    --encre: #1a1a1a;
    --encre-clair: #2e2e2e;

    --texte: #212121;
    --texte-doux: #606060;

    --gris-050: #f7f7f8;
    --gris-100: #f0f0f1;
    --gris-200: #e3e3e3;
    --gris-300: #cfcfd2;
    --gris-400: #a9a9af;
    --gris-500: #77777c;

    /* Semantiques, calees sur la maquette (deltas verts / rouges, vigilance creme). */
    --ok: #1f6b4a;       --ok-fond: #eaf4ee;   --ok-bord: #c3e2d0;
    --alerte: #a8701c;   --alerte-fond: #fdf6ea; --alerte-bord: #eddcbd;
    --erreur: #b3261e;   --erreur-fond: #fbeceb; --erreur-bord: #f0cbc8;

    --rayon-s: 4px;
    --rayon-m: 8px;
    --rayon-l: 10px;
    --rayon-pilule: 999px;

    --ombre-s: 0 1px 2px rgba(26, 26, 26, .05);
    --ombre-m: 0 2px 10px rgba(26, 26, 26, .07);
    --ombre-l: 0 14px 34px rgba(26, 26, 26, .18);

    --largeur: 1120px;
    --largeur-large: 1320px;
    --hauteur-barre: 62px;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-chiffres: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* --- 2. Base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--gris-050);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .8rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--rouge-sombre); }
a:hover { color: var(--bordeaux); }

.muted { color: var(--texte-doux); }
.petit { font-size: .84rem; }
.mono, .num { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }

/* Micro-libelle de la maquette : capitales, tres espacees, discret. */
.surtitre {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gris-500);
}

:focus-visible {
    outline: 2px solid var(--rouge);
    outline-offset: 2px;
    border-radius: var(--rayon-s);
}

/* --- 3. Shell : bandeau encre + navigation -------------------------------- */

.appbar {
    background: var(--encre);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
    /* Le filet rouge reprend celui qui court en haut de vipplus.com. */
    border-top: 3px solid var(--rouge);
}

.appbar__interieur {
    max-width: var(--largeur-large);
    margin: 0 auto;
    padding: 0 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-height: var(--hauteur-barre);
}

.marque { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.marque img { height: 30px; width: auto; display: block; }
.marque .metiers {
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9a9a9e;
    white-space: nowrap;
    padding-left: .9rem;
    border-left: 1px solid #3a3a3a;
}

.nav {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-right: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
    color: #b6b6ba;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    padding: calc((var(--hauteur-barre) - 20px) / 2) .8rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--rouge); }

.compte { display: flex; align-items: center; }

.jeton-compte {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--rayon-pilule);
    padding: .22rem .3rem;
    color: #fff;
    font-size: .84rem;
}
.jeton-compte:hover { background: rgba(255, 255, 255, .14); }
.jeton-compte .nom { padding-right: .55rem; white-space: nowrap; }

.pastille-initiales {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--rouge);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
}

/* --- 4. Contenu et titrage ------------------------------------------------ */

.contenu {
    max-width: var(--largeur);
    margin: 1.8rem auto 3rem;
    padding: 0 1.4rem;
}
.contenu.large { max-width: var(--largeur-large); }

/* Bloc de titre de la maquette : surtitre, titre, puis un encadre de contexte. */
.entete-page {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.entete-page p { margin: .3rem 0 0; max-width: 68ch; }

.chip-contexte {
    border: 1px solid var(--gris-300);
    background: #fff;
    border-radius: var(--rayon-s);
    padding: .45rem .9rem;
    text-align: right;
}
.chip-contexte .valeur { font-weight: 600; font-size: .95rem; }

/* Section numerotee « 01 Synthese de l'affaire ». */
.section {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 2rem 0 .9rem;
}
.section:first-child { margin-top: 0; }
.section__num {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--rouge);
    font-family: var(--police-chiffres);
}
.section__titre { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.section__filet { flex: 1; height: 1px; background: var(--gris-200); }
.section__note { font-size: .76rem; color: var(--gris-500); letter-spacing: .04em; }

.panneau {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-s);
    margin-bottom: 1.2rem;
}
.panneau__corps { padding: 1.3rem 1.4rem; }
.panneau__entete {
    padding: .95rem 1.4rem;
    border-bottom: 1px solid var(--gris-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.panneau__pied {
    padding: .85rem 1.4rem;
    border-top: 1px solid var(--gris-200);
    background: var(--gris-050);
    border-radius: 0 0 var(--rayon-m) var(--rayon-m);
}

/* Panneau « Points de vigilance » de la maquette : fond creme, puces rondes. */
.panneau--vigilance { background: var(--alerte-fond); border-color: var(--alerte-bord); }
.panneau--vigilance .panneau__entete { border-bottom-color: var(--alerte-bord); }
.vigilance { margin-bottom: 1rem; }
.vigilance:last-child { margin-bottom: 0; }
.vigilance__titre {
    font-size: .88rem;
    font-weight: 600;
    color: var(--alerte);
    display: flex;
    align-items: center;
    gap: .45rem;
}
.vigilance__titre::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--alerte);
    flex: 0 0 7px;
}
.vigilance p { font-size: .85rem; color: var(--texte-doux); margin: .2rem 0 0 1.15rem; }

/* --- 5. Boutons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    padding: .58rem 1.1rem;
    border-radius: var(--rayon-s);
    border: 1px solid transparent;
    background: var(--rouge);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--rouge-fonce); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--second {
    background: #fff;
    color: var(--rouge-sombre);
    border-color: var(--gris-300);
}
.btn--second:hover { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge-sombre); }

.btn--fantome { background: transparent; color: var(--texte-doux); border-color: transparent; }
.btn--fantome:hover { background: var(--gris-100); color: var(--texte); }

.btn--valide { background: var(--ok); }
.btn--valide:hover { background: #185338; }

.btn--danger { background: #fff; color: var(--erreur); border-color: var(--erreur-bord); }
.btn--danger:hover { background: var(--erreur-fond); color: var(--erreur); }

.btn--petit { padding: .34rem .72rem; font-size: .79rem; }
.btn--bloc { width: 100%; }
.btn:disabled { background: var(--gris-300); color: #fff; cursor: not-allowed; }

.groupe-btn { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- 6. Formulaires ------------------------------------------------------- */

.champ { margin-bottom: 1rem; }
.champ:last-child { margin-bottom: 0; }

label, .libelle {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris-500);
    margin-bottom: .35rem;
}

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=file], select, textarea {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    padding: .55rem .75rem;
    color: var(--texte);
    background: #fff;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-s);
}
input::placeholder { color: var(--gris-400); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px var(--rouge-pale);
}
input[type=file] { padding: .42rem .5rem; font-size: .86rem; }

.aide { font-size: .8rem; color: var(--texte-doux); margin-top: .3rem; }
.grille { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Un champ qui ouvre une liste doit se voir comme tel. Le <select> natif porte un
   chevron, l'<input list> non : sans ce rappel, deux commandes qui font le meme geste
   dans le meme formulaire n'ont pas l'air d'appartenir au meme ecran. */
select, input[list] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23606060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: .62rem;
}
/* Chrome dessine son propre bouton de liste : il ferait doublon avec le chevron.
   Le masquer ne retire pas la fonction, la liste s'ouvre toujours au clic. */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* Champ d'entree d'un ecran : un cran au-dessus des parametres qui l'accompagnent. */
.champ--principal input { font-size: 1rem; padding: .68rem .85rem; padding-right: 2.1rem; }

/* Champ a propositions : le panneau s'ouvre SOUS le champ, comme le menu deroulant
   voisin. On cherche en tapant et on regarde la liste se reduire ; la choisir a la
   souris n'est qu'un raccourci. */
.combo { position: relative; }
.combo__panneau {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    max-height: 15.5rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-s);
    box-shadow: var(--ombre-m);
}
/* hidden doit l'emporter sur l'affichage du panneau : Chrome peint un bloc positionne
   meme vide, et laissait une boite blanche fantome sous le champ. */
.combo__panneau[hidden] { display: none; }
.combo__option {
    padding: .42rem .8rem;
    font-size: .87rem;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo__option:hover, .combo__option.est-actif { background: var(--rouge-pale); }
.combo__option mark {
    background: none;
    color: var(--rouge-sombre);
    font-weight: 700;
}
.combo__reste {
    padding: .45rem .8rem;
    font-size: .78rem;
    color: var(--texte-doux);
    border-top: 1px solid var(--gris-100);
}

/* Sous-bloc de formulaire : un intitule, son aide, ses champs. */
.bloc-champs {
    min-width: 0;
    margin-top: 1.15rem;
    padding: .2rem 1.1rem .35rem;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon-m);
    background: var(--gris-050);
}
/* Un intitule de groupe, pas un intitule de champ : meme graphie que les labels, mais
   en encre pleine pour qu'il se lise comme un cran au-dessus. */
.bloc-champs > legend {
    padding: 0 .45rem;
    margin-left: -.45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre);
}
.bloc-champs .aide { margin-bottom: .75rem; }
.bloc-champs input { background-color: #fff; }

/* Le mode de saisie pilote les champs affichés, sans JavaScript : afficher les trois
   natures ET le montant global laisse croire qu'ils s'additionnent, alors que le
   controleur ne lit que ceux du mode choisi.
   Si :has() n'est pas supporte, les deux blocs restent visibles - c'est l'ecran
   d'avant, une aide en moins, pas une panne. */
.reste-global { display: none; }
form:has(#mode_reste option[value="global"]:checked) .reste-global { display: block; }
form:has(#mode_reste option[value="global"]:checked) .reste-natures { display: none; }

/* --- 7. Messages ---------------------------------------------------------- */

.message {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .8rem 1rem;
    border-radius: var(--rayon-m);
    border: 1px solid;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.message ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.message--ok { background: var(--ok-fond); border-color: var(--ok-bord); color: #17573b; }
.message--alerte { background: var(--alerte-fond); border-color: var(--alerte-bord); color: #8b5c15; }
.message--erreur { background: var(--erreur-fond); border-color: var(--erreur-bord); color: #8f1d17; }
.message__icone { font-weight: 700; line-height: 1.5; }

.secret {
    display: inline-block;
    font-family: var(--police-chiffres);
    font-size: .95rem;
    letter-spacing: .06em;
    background: #fff;
    border: 1px dashed var(--ok-bord);
    border-radius: var(--rayon-s);
    padding: .12rem .5rem;
    user-select: all;
}

/* --- 8. Pastilles --------------------------------------------------------- */

.pastille {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .18rem .55rem;
    border-radius: var(--rayon-s);
    white-space: nowrap;
}
.pastille--ok { background: var(--ok-fond); color: var(--ok); }
.pastille--erreur { background: var(--erreur-fond); color: var(--erreur); }
.pastille--alerte { background: var(--alerte-fond); color: var(--alerte); }
.pastille--info { background: var(--rouge-pale); color: var(--rouge-sombre); }
.pastille--neutre { background: var(--gris-100); color: var(--gris-500); }

/* --- 9. Tuiles d'indicateurs (bloc 01 de la maquette) --------------------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .8rem;
    margin-bottom: 1.2rem;
}
.kpi {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon-m);
    padding: .95rem 1.1rem 1rem;
    box-shadow: var(--ombre-s);
}
.kpi__valeur {
    display: block;
    margin: .3rem 0 .15rem;
    font-size: 1.85rem;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.kpi__valeur small { font-size: .95rem; font-weight: 500; color: var(--gris-500); margin-left: .15rem; }
.kpi__detail { font-size: .78rem; color: var(--texte-doux); }

/* La tuile de conclusion est inversee, comme « Resultat projete » de la maquette. */
.kpi--fort { background: var(--encre); border-color: var(--encre); color: #fff; }
.kpi--fort .surtitre { color: #a2a2a6; }
.kpi--fort .kpi__detail { color: #c9c9cc; }
.kpi--fort .kpi__valeur small { color: #a2a2a6; }

.delta { font-weight: 600; }
.delta--haut { color: var(--ok); }
.delta--bas { color: var(--erreur); }

/* --- 10. Jauges d'avancement (bloc 03 de la maquette) --------------------- */

.jauge { margin-bottom: .9rem; }
.jauge:last-child { margin-bottom: 0; }
.jauge__tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .87rem;
}
.jauge__valeur { font-weight: 600; font-variant-numeric: tabular-nums; }
.jauge__barre {
    height: 6px;
    border-radius: var(--rayon-pilule);
    background: var(--gris-100);
    margin: .3rem 0 .2rem;
    overflow: hidden;
}
.jauge__part { height: 100%; background: var(--bordeaux); border-radius: inherit; }
.jauge__part--rouge { background: var(--rouge); }
.jauge__note { font-size: .76rem; color: var(--gris-500); font-variant-numeric: tabular-nums; }

/* --- 11. Tableaux --------------------------------------------------------- */

.tableau { }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
    position: sticky;
    top: var(--hauteur-barre);
    background: var(--gris-050);
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gris-500);
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--gris-200);
    z-index: 5;
}
tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--gris-050); }
tr.inactif td > *:not(.pastille) { opacity: .55; }
tr.total td { font-weight: 600; border-top: 1px solid var(--gris-300); }

th.num, td.num { text-align: right; }
.col-actions { text-align: right; white-space: nowrap; width: 1%; }
.col-etroite { width: 1%; white-space: nowrap; }

.identite { display: flex; align-items: center; gap: .7rem; }
.identite__texte { min-width: 0; }
.identite__nom { font-weight: 600; }
.identite__mail {
    font-size: .82rem;
    color: var(--texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.identite .pastille-initiales {
    background: var(--rouge-pale);
    color: var(--rouge-sombre);
    width: 34px; height: 34px; flex-basis: 34px;
    font-size: .74rem;
}

/* --- 12. Menus deroulants (<details>) ------------------------------------- */

/* Chrome >= 128 ne masque plus les enfants d'un <details> ferme avec display:none
   mais avec content-visibility : un enfant en position absolue reste alors PEINT
   (un carre blanc fantome apparaissait sous chaque menu). */
details.menu:not([open]) .menu__panneau { display: none; }

.menu { position: relative; display: inline-block; }

/* Le STYLE du declencheur est porte par sa propre classe (.menu__declencheur ou
   .jeton-compte) et jamais par `.menu > summary`, qui l'emporterait en specificite. */
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }

.menu__declencheur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--rayon-s);
    border: 1px solid var(--gris-300);
    background: #fff;
    color: var(--texte-doux);
    font-weight: 700;
    line-height: 1;
}
.menu__declencheur:hover { background: var(--gris-100); }
.menu[open] > .menu__declencheur { background: var(--gris-100); border-color: var(--gris-400); }

.menu__panneau {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 212px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-l);
    padding: .35rem;
    z-index: 40;
    text-align: left;
}
/* Panneau qui porte un formulaire (un motif a saisir) et non une liste d'actions. */
.menu__panneau--large { min-width: 290px; padding: .8rem; }
.menu__panneau--large .champ { margin-bottom: .7rem; }

.menu__panneau form { display: block; margin: 0; }
/* Un bouton explicitement stylé en .btn garde son apparence : dans un panneau de saisie,
   l'action de confirmation doit se lire comme un bouton, pas comme une ligne de menu. */
.menu__panneau button:not(.btn), .menu__panneau a:not(.btn) {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .86rem;
    padding: .5rem .7rem;
    border: 0;
    border-radius: var(--rayon-s);
    background: none;
    color: var(--texte);
    text-decoration: none;
    cursor: pointer;
}
.menu__panneau button:not(.btn):hover, .menu__panneau a:not(.btn):hover { background: var(--gris-100); }
.menu__panneau button.destructif { color: var(--erreur); }
.menu__panneau button.destructif:hover { background: var(--erreur-fond); }
.menu__separateur { height: 1px; background: var(--gris-200); margin: .3rem .2rem; }
.menu__titre {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gris-500);
    padding: .45rem .7rem .2rem;
    font-weight: 700;
}

.menu--compte .menu__panneau { min-width: 232px; }
.menu--compte .menu__entete {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--gris-200);
    margin-bottom: .3rem;
}
.menu--compte .menu__entete .nom { font-weight: 600; font-size: .9rem; }
.menu--compte .menu__entete .mail { font-size: .8rem; color: var(--texte-doux); }

/* --- 13. Recherche et filtres --------------------------------------------- */

.recherche { display: flex; gap: .5rem; align-items: center; }
.recherche input { min-width: 260px; }

.filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtres a {
    font-size: .8rem;
    text-decoration: none;
    color: var(--texte-doux);
    background: #fff;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-pilule);
    padding: .22rem .8rem;
}
.filtres a:hover { background: var(--gris-100); color: var(--texte); }
.filtres a[aria-current="true"] {
    background: var(--bordeaux);
    border-color: var(--bordeaux);
    color: #fff;
}

/* --- 14. Tuiles d'accueil ------------------------------------------------- */

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 1rem;
}
.tuile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-top: 3px solid var(--rouge);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-s);
    padding: 1.3rem 1.4rem;
    text-decoration: none;
    color: inherit;
}
a.tuile:hover { border-color: var(--gris-300); border-top-color: var(--rouge); box-shadow: var(--ombre-m); color: inherit; }
.tuile--inactive { opacity: .6; border-top-color: var(--gris-300); }
.tuile__pied { margin-top: auto; padding-top: .9rem; font-size: .84rem; font-weight: 600; color: var(--rouge-sombre); }
.tuile--inactive .tuile__pied { color: var(--gris-500); font-weight: 400; }

/* --- 15. Ecran de connexion ----------------------------------------------- */

.connexion {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.2rem;
    background:
        radial-gradient(900px 380px at 50% 0%, var(--bordeaux), transparent 70%),
        var(--encre);
}
.connexion__bloc { width: 100%; max-width: 396px; }
.connexion__marque { text-align: center; margin-bottom: 1.6rem; }
.connexion__marque img { height: 52px; width: auto; }
.connexion__marque .metiers {
    display: block;
    margin-top: .7rem;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #b09aa0;
}
.connexion__carte {
    background: #fff;
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-l);
    padding: 1.8rem 1.7rem 1.6rem;
    border-top: 3px solid var(--rouge);
}
.connexion__pied {
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gris-200);
    font-size: .82rem;
    color: var(--texte-doux);
}

/* --- 16. Depots de fichiers ----------------------------------------------- */

.depot {
    border: 1px dashed var(--gris-300);
    border-radius: var(--rayon-m);
    padding: 1rem;
    background: var(--gris-050);
}
.depot label { margin-bottom: .35rem; }

/* --- 17. Pied de page ----------------------------------------------------- */

.pied-doc {
    border-top: 1px solid var(--gris-200);
    margin-top: 2.5rem;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris-400);
}

/* --- 17b. Demande d'achat (mission 288) -----------------------------------
   Calque sur la maquette validee le 12/08/2026 : 2 colonnes (vendu / fournisseur),
   surligneur au clic, fiche recapitulative. Classes prefixees pour ne pas entrer en
   collision avec les composants generiques (.panneau, .btn... restent partages). */

.hide { display: none !important; }

/* Fil des etapes, en tete de l'espace de travail. */
.steps { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.step {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; color: var(--texte-doux);
    background: #fff; border: 1px solid var(--gris-200); border-radius: var(--rayon-pilule);
    padding: .3rem .8rem;
}
.step b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background: var(--gris-300); color: #fff; font-size: .68rem;
}
.step.on { color: var(--rouge-sombre); border-color: var(--rouge); }
.step.on b { background: var(--rouge); }
.step.done b { background: var(--ok); }

.hint {
    font-size: .85rem; color: var(--texte-doux);
    background: var(--gris-050); border: 1px solid var(--gris-200); border-radius: var(--rayon-m);
    padding: .6rem .9rem; margin-bottom: 1.1rem;
}

/* Chantier affecte, ecran d'entree : carte cliquable plutot que ligne de tableau, plus
   rapide a scanner pour choisir "le sien" parmi quelques chantiers. */
.carte-chantier {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .8rem 1rem; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--rayon-m);
    text-decoration: none; color: var(--texte);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.carte-chantier:hover { border-color: var(--rouge); box-shadow: var(--ombre-s); }
.carte-chantier strong { font-size: .95rem; }

/* Les 2 colonnes de l'espace de travail. */
.grille-rapprochement {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start;
}
.colonne-vente, .colonne-fournisseur { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* --- Colonne gauche : lignes de vente --- */
.vente {
    padding: .8rem .9rem; border: 1px solid var(--gris-200); border-radius: var(--rayon-m);
    margin-bottom: .6rem; background: #fff;
}
.vente:last-child { margin-bottom: 0; }
.vente--selectable { cursor: pointer; }
.vente--selectable:hover { border-color: var(--rouge); background: var(--rouge-pale); }
.vente__entete { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; }
.vente__nom { font-weight: 600; }
.vente__budget { color: var(--texte-doux); font-size: .82rem; white-space: nowrap; }
.vente__barre {
    height: 6px; border-radius: 999px; background: var(--gris-100); overflow: hidden; margin-top: .5rem;
}
.vente__barre i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.vente__barre--depasse i { background: var(--erreur); }
.vente__reste { font-size: .78rem; color: var(--texte-doux); margin-top: .3rem; }
.vente__reste--depasse { color: var(--erreur); font-weight: 600; }
.vente__note { font-size: .74rem; color: var(--gris-500); margin-top: .25rem; font-style: italic; }
.vente__detail-toggle {
    display: block; margin-top: .5rem; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: .76rem; color: var(--rouge-sombre); text-decoration: underline;
}
.vente__detail {
    margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--gris-200); cursor: default;
}
.vente__detail-ligne {
    display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: .5rem;
    font-size: .76rem; padding: .2rem 0; color: var(--texte-doux);
}
.vente__detail-montant { font-family: var(--police-chiffres); white-space: nowrap; }
.vente__imps { margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--gris-200); }

.imp {
    display: grid; grid-template-columns: auto 1fr 5.5rem 3rem 1.5rem; align-items: center; gap: .5rem;
    font-size: .78rem; padding: .25rem 0; cursor: default;
}
.imp__src {
    font-family: var(--police-chiffres); font-size: .72rem; color: var(--rouge-sombre);
    background: var(--rouge-pale); border-radius: var(--rayon-s); padding: .1rem .4rem; white-space: nowrap;
}
.imp input[type=number] { padding: .2rem .4rem; font-size: .78rem; text-align: right; }
.imp__pct { color: var(--gris-500); text-align: right; }
.imp__del {
    border: 0; background: none; color: var(--gris-400); cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0; width: 1.4rem; height: 1.4rem;
}
.imp__del:hover { color: var(--erreur); }

/* --- Colonne droite : devis fournisseur --- */
.four { margin-bottom: .5rem; }
.four--edition {
    border: 1px solid var(--gris-200); border-radius: var(--rayon-m); padding: .5rem;
    margin-bottom: .5rem;
}
.four__ligne1 { display: grid; grid-template-columns: 5rem 1fr 1.5rem; gap: .5rem; align-items: end; }
.four__ligne2 {
    display: grid; grid-template-columns: 4.5rem 4.5rem 1fr 6rem; gap: .5rem; align-items: end;
    margin-top: .4rem;
}
/* Le placeholder seul disparait a la saisie : une fois rempli, plus rien ne dit ce que
   represente le champ (une quantite ressemble a un prix unitaire une fois tapee). Ce
   libelle reste visible, lui, quel que soit le contenu. */
.four__champ { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.four__champ-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--gris-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.four__ref, .four__designation, .four__quantite, .four__unite, .four__prix-unitaire {
    padding: .4rem .55rem; font-size: .84rem; width: 100%;
}
.four__quantite, .four__prix-unitaire { text-align: right; }
.four__montant-calcule {
    display: block; padding: .4rem .55rem; text-align: right; font-size: .84rem;
    font-family: var(--police-chiffres); color: var(--texte-doux); white-space: nowrap;
}

.four--rapprochement {
    padding: .7rem .85rem; border: 1px solid var(--gris-200); border-radius: var(--rayon-m);
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.four--rapprochement:hover { border-color: var(--rouge); }
.four--selectionnee { border-color: var(--rouge); background: var(--rouge-pale); }
.four--complete { border-color: var(--ok-bord); background: var(--ok-fond); }
.four__entete { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; font-weight: 600; }
.four__etat { font-size: .78rem; color: var(--texte-doux); margin-top: .25rem; }

.addline {
    padding: .5rem .7rem; text-align: center; font-size: .82rem; color: var(--rouge-sombre);
    border: 1px dashed var(--gris-300); border-radius: var(--rayon-m); cursor: pointer; margin-bottom: .6rem;
}
.addline:hover { background: var(--rouge-pale); border-color: var(--rouge); }

.four-actions {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    padding-top: .5rem; border-top: 1px solid var(--gris-200); font-size: .84rem;
}
.four-actions__total { color: var(--texte-doux); }

/* --- Fiche recapitulative --- */
table.fiche-recap { width: 100%; border-collapse: collapse; font-size: .84rem; margin-bottom: .3rem; }
table.fiche-recap th { text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--gris-500); padding: .35rem .3rem; border-bottom: 1px solid var(--gris-200); }
table.fiche-recap td { padding: .4rem .3rem; border-bottom: 1px solid var(--gris-100); }
table.fiche-recap td.num, table.fiche-recap th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.fiche-recap td.neg { color: var(--erreur); font-weight: 600; }

.toast {
    position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, .6rem);
    background: var(--encre); color: #fff; font-size: .84rem;
    padding: .6rem 1.1rem; border-radius: var(--rayon-m); box-shadow: var(--ombre-l);
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
    z-index: 200; max-width: 90vw;
}
.toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* Depot du devis fournisseur (lecture de PDF, lot L3). <label for="devis_fournisseur">
   rend deja toute la zone cliquable (comportement natif du couple label/input file) : le
   champ reel n'a besoin que d'etre masque visuellement, pas superpose en absolu. */
/* position: relative : le champ fichier masque ci-dessous est en absolute - sans ancetre
   positionne, sa largeur en % se resoudrait contre le viewport entier et depasserait le
   bord droit de la page (barre de defilement horizontale constatee le 21/08/2026). */
.depot-pdf { margin-bottom: .3rem; position: relative; }
.depot-pdf__zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem; text-align: center; padding: 1.3rem 1rem;
    border: 1px dashed var(--gris-300); border-radius: var(--rayon-m); background: var(--gris-050);
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.depot-pdf__zone:hover { border-color: var(--rouge); background: var(--rouge-pale); }
.depot-pdf__titre { font-size: .88rem; font-weight: 600; color: var(--rouge-sombre); }
/* Selecteur a DEUX classes, pas une : la regle generale input[type=file] (width: 100%,
   specificite 0,1,1) battait .depot-pdf__champ seul (0,1,0) - l'input "masque" faisait
   en realite toute la largeur du viewport. (0,2,0) reprend la main. */
.depot-pdf .depot-pdf__champ {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.depot-pdf__pied {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    margin-top: .5rem;
}
/* Champ monetaire : une fois "12,5" tape, plus rien ne dit qu'il s'agit d'euros - le
   symbole reste affiche DANS le champ, a droite, hors de la zone de frappe. Les regles
   .imp doivent rester APRES .imp input[type=number] (meme specificite, l'ordre tranche). */
.champ-euro { position: relative; display: block; min-width: 0; }
.champ-euro > input { width: 100%; padding-right: 1.4rem; }
.imp .champ-euro > input { padding-right: 1.25rem; }
.champ-euro::after {
    content: '€'; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    font-size: .78rem; color: var(--gris-500); pointer-events: none;
}
.imp .champ-euro::after { right: .4rem; font-size: .72rem; }

/* Etat "lecture en cours" : l'extraction cote serveur prend plusieurs secondes et la page
   ne recharge qu'a la fin - sans signe visible entre les deux, le depot semble en panne.
   pointer-events bloque un second depot pendant ce temps. */
.depot-pdf--lecture .depot-pdf__zone {
    pointer-events: none; cursor: default;
    border-style: solid; border-color: var(--rouge); background: var(--rouge-pale);
}
.spinner {
    width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%;
    border: 2px solid var(--gris-300); border-top-color: var(--rouge);
    animation: spinner-tour .7s linear infinite;
}
@keyframes spinner-tour { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
    .grille-rapprochement { grid-template-columns: 1fr; }
}

/* --- 18. Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
    .appbar__interieur { flex-wrap: wrap; gap: .6rem 1.2rem; padding: .6rem 1rem; }
    .nav { order: 3; width: 100%; margin-right: 0; }
    .nav a { padding: .5rem .7rem; }
    .marque .metiers { display: none; }
    .compte { margin-left: auto; }
    thead th { position: static; }
    .jeton-compte .nom { display: none; }
    /* Entre 700 et 900px le tableau tient encore, mais sans ses colonnes secondaires. */
    .col-masquable { display: none; }
}

/* En dessous de 700px, un tableau a 6 colonnes ne rentre plus. Les tableaux SANS menu
   deroulant peuvent defiler horizontalement sans dommage ; celui des utilisateurs, lui,
   verrait ses menus rognes par le conteneur defilant : il passe en cartes empilees. */
@media (max-width: 700px) {
    .tableau:not(.tableau--cartes) { overflow-x: auto; }

    /* Les tableaux du point d'affaires sont posés directement dans le panneau, sans
       conteneur .tableau : sans cette regle ils poussent la PAGE entiere (mesure :
       471px de defilement pour 390px de viewport). Ils defilent chez eux. */
    .panneau > table { display: block; overflow-x: auto; }

    /* Un en-tete sticky enferme dans un conteneur defilant se positionne par rapport a
       ce conteneur, et laisse une bande blanche au-dessus du tableau. Il n'a de toute
       facon plus de sens ici : le defilement utile est horizontal. */
    .tableau:not(.tableau--cartes) thead th,
    .panneau > table thead th { position: static; }

    .tableau--cartes thead { display: none; }
    .tableau--cartes table,
    .tableau--cartes tbody,
    .tableau--cartes tr,
    .tableau--cartes td { display: block; width: auto; }
    .tableau--cartes tr {
        position: relative;
        padding: .9rem 1.1rem;
        border-bottom: 1px solid var(--gris-100);
    }
    .tableau--cartes tr:hover { background: none; }
    .tableau--cartes td { border: 0; padding: .1rem 0; }
    .tableau--cartes .col-masquable { display: block; }
    .tableau--cartes td.col-actions { position: absolute; top: .9rem; right: 1.1rem; padding: 0; }
    .tableau--cartes td[data-libelle]::before {
        content: attr(data-libelle) " : ";
        color: var(--gris-500);
        font-size: .78rem;
    }
    .tableau--cartes .identite { margin-bottom: .35rem; padding-right: 3rem; }

    /* Quand la ligne porte PLUSIEURS actions, les caler en haut a droite de la carte les
       ferait deborder. Elles reprennent leur place dans le flux, sous les valeurs. */
    .tableau--actions-larges td.col-actions { position: static; padding-top: .7rem; }
    .tableau--actions-larges .identite { padding-right: 0; }
}

@media (max-width: 640px) {
    .contenu { padding: 0 1rem; margin-top: 1.2rem; }
    .panneau__corps, .panneau__entete, .panneau__pied { padding-left: 1.1rem; padding-right: 1.1rem; }
    .kpi__valeur { font-size: 1.5rem; }
    .recherche { width: 100%; }
    .recherche input { min-width: 0; }
    table { font-size: .86rem; }
}

@media print {
    .appbar, .filtres, .recherche, .col-actions, .menu, .groupe-btn { display: none !important; }
    body { background: #fff; }
    .panneau, .kpi { box-shadow: none; border-color: var(--gris-300); }
}