/* =========================================================================================
   Dashboard — feuille de style unique
   Version 1.0 - 2026-09-28

   Un seul fichier, aucune dependance externe : ni CDN, ni Bootstrap, ni police distante.
   Cet outil est destine a un intranet, souvent sans acces Internet. Tout doit fonctionner
   hors ligne, et doit continuer a fonctionner dans 5 ans.

   Themes clair et sombre par variable CSS : le navigateur bascule seul, et l'utilisateur
   peut forcer l'un des deux avec le bouton en bas de la barre laterale. Le choix est
   memorise dans localStorage.

   Les valeurs sont exposees dans :root, jamais repetees en dur dans les regles. Changer
   la couleur de marque ne demande donc qu'une ligne.
   ========================================================================================= */

/* ------------------------------------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------------------------------------ */

:root {
    /* --- Couleurs de marque --- */
    --marque-h:      222;
    --marque-s:      68%;
    --marque-l:      46%;

    --accent:        hsl(var(--marque-h) var(--marque-s) var(--marque-l));
    --accent-hover: hsl(var(--marque-h) var(--marque-s) 40%);
    --accent-doux:   hsl(var(--marque-h) 68% 96%);
    --accent-bord:   hsl(var(--marque-h) 52% 84%);
    --accent-contraste: #fff;

    /* --- Surfaces, theme clair --- */
    --fond:          hsl(220 20% 97%);
    --surface:       hsl(0 0% 100%);
    --surface-2:     hsl(220 24% 98.5%);
    --surface-3:     hsl(220 22% 96%);
    --bordure:       hsl(220 16% 89%);
    --bordure-forte: hsl(220 14% 82%);

    /* --- Texte --- */
    --texte:         hsl(222 26% 15%);
    --texte-2:       hsl(222 12% 42%);
    --texte-3:       hsl(222 10% 58%);

    /* --- Etats --- */
    --ok:            hsl(152 52% 34%);
    --ok-fond:       hsl(150 46% 94%);
    --ok-bord:       hsl(150 38% 80%);
    --warn:          hsl(35 88% 38%);
    --warn-fond:     hsl(40 88% 94%);
    --warn-bord:     hsl(40 76% 78%);
    --err:           hsl(357 62% 45%);
    --err-fond:      hsl(356 78% 96%);
    --err-bord:      hsl(356 62% 86%);
    --info:          hsl(210 72% 40%);
    --info-fond:     hsl(210 78% 96%);
    --info-bord:     hsl(210 64% 84%);

    /* --- Geometrie --- */
    --r-s:           6px;
    --r-m:           10px;
    --r-l:           14px;
    --r-xl:          20px;
    --ombre-s:       0 1px 2px hsl(222 20% 20% / .06);
    --ombre-m:       0 2px 6px hsl(222 20% 20% / .07), 0 1px 2px hsl(222 20% 20% / .05);
    --ombre-l:       0 8px 24px hsl(222 20% 20% / .10), 0 2px 6px hsl(222 20% 20% / .05);
    --ombre-xl:      0 20px 48px hsl(222 24% 16% / .16);

    --largeur-max:   1400px;
    --barre:         264px;

    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --trans: 140ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="sombre"] {
    --accent:        hsl(var(--marque-h) 62% 62%);
    --accent-hover: hsl(var(--marque-h) 62% 72%);
    --accent-doux:   hsl(var(--marque-h) 40% 18%);
    --accent-bord:   hsl(var(--marque-h) 40% 32%);
    --accent-contraste: hsl(222 30% 10%);

    --fond:          hsl(222 24% 9%);
    --surface:       hsl(222 22% 13%);
    --surface-2:     hsl(222 20% 16%);
    --surface-3:     hsl(222 18% 20%);
    --bordure:       hsl(222 16% 26%);
    --bordure-forte: hsl(222 14% 34%);

    --texte:         hsl(220 22% 94%);
    --texte-2:       hsl(220 12% 70%);
    --texte-3:       hsl(220 10% 54%);

    --ok:            hsl(150 52% 58%);
    --ok-fond:       hsl(150 40% 16%);
    --ok-bord:       hsl(150 32% 28%);
    --warn:          hsl(40 80% 62%);
    --warn-fond:     hsl(38 50% 16%);
    --warn-bord:     hsl(38 40% 30%);
    --err:           hsl(356 72% 68%);
    --err-fond:      hsl(356 44% 18%);
    --err-bord:      hsl(356 36% 32%);
    --info:          hsl(210 78% 68%);
    --info-fond:     hsl(210 44% 18%);
    --info-bord:     hsl(210 40% 32%);

    --ombre-s:       0 1px 2px hsl(0 0% 0% / .3);
    --ombre-m:       0 2px 6px hsl(0 0% 0% / .35);
    --ombre-l:       0 8px 24px hsl(0 0% 0% / .45);
    --ombre-xl:      0 20px 48px hsl(0 0% 0% / .6);
}

/* ------------------------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

p { margin: 0 0 .7rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

::selection { background: var(--accent); color: var(--accent-contraste); }

/* ------------------------------------------------------------------------------------------
   3. APPLICATION : barre laterale + contenu
   ------------------------------------------------------------------------------------------ */

.app { display: flex; min-height: 100vh; }

.barre {
    width: var(--barre);
    flex: 0 0 var(--barre);
    background: var(--surface);
    border-right: 1px solid var(--bordure);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.marque {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 20px 18px;
    border-bottom: 1px solid var(--bordure);
}

.marque__sigle {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), hsl(calc(var(--marque-h) + 26) 62% 52%));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 15px;
    box-shadow: var(--ombre-s);
}

.marque__nom { font-weight: 650; font-size: .95rem; line-height: 1.2; }
.marque__sous { font-size: .76rem; color: var(--texte-3); }

.nav { padding: 14px 12px; flex: 1; }

.nav__groupe {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texte-3);
    font-weight: 650;
    padding: 14px 10px 6px;
}
.nav__groupe:first-child { padding-top: 2px; }

.nav__lien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-s);
    color: var(--texte-2);
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 1px;
    transition: background var(--trans), color var(--trans);
}
.nav__lien:hover { background: var(--surface-3); color: var(--texte); text-decoration: none; }
.nav__lien--actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }

.nav__num {
    margin-left: auto;
    font-family: var(--police-mono);
    font-size: .72rem;
    color: var(--texte-3);
}

.barre__pied { padding: 12px; border-top: 1px solid var(--bordure); }

.bascule-theme {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px;
    border: 1px solid var(--bordure);
    background: var(--surface-2);
    color: var(--texte-2);
    border-radius: var(--r-s);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.bascule-theme:hover { background: var(--surface-3); color: var(--texte); border-color: var(--bordure-forte); }

.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.entete {
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.entete__fil { font-size: .8rem; color: var(--texte-3); }
.entete__titre { font-size: 1.15rem; font-weight: 650; }
.entete__droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Le lien de deconnexion : discret, c'est une sortie, pas une action de travail. */
.entete__deconnexion { font-size: .8rem; color: var(--texte-3); }
.entete__deconnexion:hover { color: var(--accent); text-decoration: underline; }

.page { padding: 24px 28px 56px; max-width: var(--largeur-max); width: 100%; }

/* ------------------------------------------------------------------------------------------
   4. COMPOSANTS
   ------------------------------------------------------------------------------------------ */

/* --- Carte --- */
.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    box-shadow: var(--ombre-s);
    overflow: hidden;
}

.carte__tete {
    padding: 15px 18px;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
}

.carte__titre { font-size: .98rem; font-weight: 650; }
.carte__droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.carte__corps { padding: 18px; }
.carte__corps--plein { padding: 0; }
.carte__pied {
    padding: 12px 18px;
    border-top: 1px solid var(--bordure);
    background: var(--surface-2);
    font-size: .82rem;
    color: var(--texte-2);
}

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--r-s);
    border: 1px solid var(--bordure-forte);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: .88rem;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), box-shadow var(--trans), transform var(--trans);
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--principal {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contraste);
    box-shadow: var(--ombre-s);
}
.btn--principal:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--fantome { background: transparent; border-color: transparent; color: var(--texte-2); }
.btn--fantome:hover { background: var(--surface-3); color: var(--texte); }
.btn--petit { padding: 5px 10px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Champs --- */
.champ { display: flex; flex-direction: column; gap: 5px; }

.champ__label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--texte-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

input[type="text"], input[type="search"], input[type="date"],
input[type="email"], input[type="password"], select {
    width: 100%;
    padding: 8px 11px;
    font: inherit;
    font-size: .9rem;
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-s);
    transition: border-color var(--trans), box-shadow var(--trans);
}
input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px hsl(var(--marque-h) 68% 46% / .16);
}
input::placeholder { color: var(--texte-3); }

.barre-outils {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.barre-outils .champ--recherche { flex: 1; min-width: 220px; }
.barre-outils .champ--court { width: 168px; }

/* Le .champ de la section 8 (fiche) porte un margin-bottom de 13px qui fuit dans
   TOUTES les barres d'outils : avec align-items:flex-end, les champs flottaient
   13px au-dessus des boutons. La marge ne vaut que dans les blocs de fiche. */
.barre-outils .champ { margin-bottom: 0; }

/* --- En-tete d'ecran : actions principales en haut a droite -----------------------------
   L'action principale d'une page (Nouvelle fiche, Nouvel utilisateur) se pose ici,
   au-dessus des filtres, comme dans les maquettes (ecrans 03 et 18). */
.entete-page {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.entete-page__info { font-size: .85rem; color: var(--texte-2); }
.entete-page__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Pastilles d'etat --- */
.pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}
.pastille--ok      { background: var(--ok-fond);   color: var(--ok);   border-color: var(--ok-bord); }
.pastille--warn    { background: var(--warn-fond); color: var(--warn); border-color: var(--warn-bord); }
.pastille--err     { background: var(--err-fond);  color: var(--err);  border-color: var(--err-bord); }
.pastille--info    { background: var(--info-fond); color: var(--info); border-color: var(--info-bord); }
.pastille--muted   { background: var(--surface-3); color: var(--texte-2); border-color: var(--bordure); }
.pastille--accent  { background: var(--accent-doux); color: var(--accent); border-color: var(--accent-bord); }

.pastille__point {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

/* --- Etiquettes de type de produit --- */
.type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--r-s);
    font-size: .76rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--texte-2);
    border: 1px solid var(--bordure);
}
.type__code {
    font-family: var(--police-mono);
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--texte-2);
}

/* --- Tableau de donnees --- */
.tableau-enveloppe { overflow-x: auto; }

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.tableau th {
    text-align: left;
    padding: 10px 14px;
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--texte-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.tableau td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}

.tableau tbody tr { transition: background var(--trans); }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau tbody tr:last-child td { border-bottom: none; }

/* La ligne qui porte une alerte d'integrite ne doit pas se confondre avec les autres. */
.tableau tbody tr.alerte { background: var(--err-fond); }
.tableau tbody tr.alerte:hover { background: var(--err-fond); }
.tableau tbody tr.alerte td { border-bottom-color: var(--err-bord); }

.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .fort { font-weight: 600; }
.tableau .mono { font-family: var(--police-mono); font-size: .82rem; }

.titre-cellule { font-weight: 600; line-height: 1.35; }
.sous-cellule { font-size: .78rem; color: var(--texte-3); margin-top: 1px; }

/* --- Matrice des tarifs (ecran 06) ---
   On colle le titre des saisons et la premiere colonne quand on fait defiler
   vers la droite : sinon, sur un contrat a six saisons, on ne sait plus a quelle
   saison correspond le montant que l'on est en train de taper. */
.tableau--matrice { border-collapse: separate; border-spacing: 0; }
.tableau--matrice th.matrice__coin,
.tableau--matrice th.matrice__libelle {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    text-align: left;
    min-width: 230px;
    max-width: 290px;
    box-shadow: 1px 0 0 var(--bord);
}
.tableau--matrice thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-2);
    vertical-align: bottom;
}
.tableau--matrice thead th.matrice__coin { z-index: 4; }
.matrice__saison { min-width: 132px; }
.matrice__sous { font-size: .78rem; color: var(--texte-3); margin-top: 2px; }
.matrice__alerte { font-size: .74rem; color: var(--err); margin-top: 4px; }
.matrice__cellule {
    width: 100%;
    min-width: 108px;
    padding: 7px 9px;
    border: 1px solid var(--bord);
    border-radius: 6px;
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: .86rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.matrice__cellule:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
/* Une case a moitie remplie se voit tout de suite : c'est presque toujours
   une saison oubliee, et le total de la colonne ne veut plus rien dire. */
.matrice__cellule:not(:placeholder-shown) { border-color: var(--accent); }
.matrice__cellule--incoherente { border-color: var(--err-bord); background: var(--err-fond); }
.ligne--incoherente .matrice__libelle { background: var(--err-fond); }

/* --- Pagination (recherche) ---
   Les numeros sont des boutons du formulaire, pas des liens : la page demandee
   voyage en POST avec les criteres, jamais dans l'URL. */
.pagination { margin: 14px 0 4px; }
.pagination__lignes { font-size: .82rem; color: var(--texte-3); margin-bottom: 8px; }
.pagination__boutons { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Onglets de paliers (matrice) : meme mecanisme que la pagination --- */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

/* --- Basculeur de colonnes (matrice saison / jours) --- */
.mode-grille { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 12px 0 2px; font-size: .88rem; }
.mode-grille__titre { color: var(--texte-3); }
.mode-grille label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* --- Case a plusieurs prix (mode jours) : pas un input, un constat --- */
.matrice__cellule--multiple { text-align: center; color: var(--texte-3); font-size: .82rem; white-space: nowrap; }

/* --- Case a cocher dans la barre d'outils --- */
.champ--coche { align-self: end; padding-bottom: 8px; }
.champ--coche label { font-weight: 400; }

@media (max-width: 860px) {
    .tableau--matrice th.matrice__libelle { min-width: 170px; }
    .matrice__cellule { min-width: 92px; }
}

/* --- Etat vide --- */
.vide {
    padding: 52px 24px;
    text-align: center;
    color: var(--texte-2);
}
.vide__icone { font-size: 2.2rem; opacity: .35; margin-bottom: 10px; }
.vide__titre { font-weight: 600; color: var(--texte); margin-bottom: 5px; }
.vide__texte { font-size: .88rem; max-width: 460px; margin: 0 auto; }
.vide__actions { margin-top: 18px; }

/* --- Bandeau d'alerte --- */
.alerte-bandeau {
    display: flex;
    gap: 11px;
    padding: 12px 15px;
    border-radius: var(--r-m);
    border: 1px solid var(--warn-bord);
    background: var(--warn-fond);
    color: var(--texte);
    font-size: .87rem;
    margin-bottom: 16px;
}
.alerte-bandeau--err { border-color: var(--err-bord); background: var(--err-fond); }
.alerte-bandeau--info { border-color: var(--info-bord); background: var(--info-fond); }
.alerte-bandeau__icone { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.35; }
.alerte-bandeau__titre { font-weight: 650; margin-bottom: 2px; }

/* --- Bandeau de statistiques --- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    padding: 14px 16px;
    box-shadow: var(--ombre-s);
}
.stat__valeur {
    font-size: 1.55rem;
    font-weight: 680;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat__libelle {
    font-size: .76rem;
    color: var(--texte-2);
    margin-top: 3px;
    display: flex; align-items: center; gap: 5px;
}
.stat--accent .stat__valeur { color: var(--accent); }
.stat--ok .stat__valeur { color: var(--ok); }
.stat--warn .stat__valeur { color: var(--warn); }

/* --- Onglets --- */
.onglets {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--bordure);
    margin-bottom: 18px;
    overflow-x: auto;
}
.onglet {
    padding: 9px 15px;
    font-size: .88rem;
    font-weight: 550;
    color: var(--texte-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--trans), border-color var(--trans);
}
.onglet:hover { color: var(--texte); text-decoration: none; }
.onglet--actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 620; }

/* --- Grille de cartes (ecran 03) --- */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

/* La carte n'est plus un lien : c'est une div, pour pouvoir contenir les trois liens
   vers les ecrans du produit. Le titre porte donc le lien, et la carte garde une
   simple reaction au survol de la souris. */
.vignette {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: 16px;
    color: inherit;
    box-shadow: var(--ombre-s);
    transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.vignette:hover {
    text-decoration: none;
    border-color: var(--accent-bord);
    box-shadow: var(--ombre-m);
    transform: translateY(-2px);
}

/* Le lien du titre. On le souligne AU SURVOL et non en permanence : une carte entierement
   bleue de liens rendrait la grille illisible. */
.vignette__lien {
    color: inherit;
    text-decoration: none;
    display: block;
}
.vignette__lien:hover .vignette__nom { color: var(--accent); }
.vignette__lien:hover { text-decoration: none; }

/* Les trois liens vers tarifs, ressources et contrats. */
.vignette__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.vignette__actions .btn { flex: 1 1 auto; justify-content: center; }

/* --- Bascule Cartes / Liste (ecran Produits) -------------------------------------------
   Groupe segmente : les deux boutons se touchent, l'actif porte la couleur. Sans
   cela, deux boutons separes ne disent pas qu'ils s'excluent. */
.vue-groupe {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    overflow: hidden;
}
.vue-groupe .btn { border: none; border-radius: 0; }
.vue-groupe .btn + .btn { border-left: 1px solid var(--bordure); }
/* La cellule d'actions de la table : les 4 liens tiennent sans couper. */
.tableau td.actions { white-space: nowrap; }
.tableau td.actions .btn { margin-left: 6px; padding: 4px 9px; font-size: .78rem; }
/* La marge separe les boutons ENTRE eux : le premier n'en prend pas, sinon la
   colonne entiere se decale de 6px vers la gauche du bord. */
.tableau td.actions .btn:first-child { margin-left: 0; }

.vignette__tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.vignette__nom { font-weight: 650; line-height: 1.3; }
.vignette__code { font-family: var(--police-mono); font-size: .76rem; color: var(--texte-3); }
.vignette__statut { margin-left: auto; flex: 0 0 auto; }
.vignette__stats {
    display: flex;
    gap: 16px;
    padding-top: 11px;
    border-top: 1px solid var(--bordure);
    font-size: .78rem;
    color: var(--texte-2);
}
.vignette__stat b {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

/* --- Fiche produit --- */
.fiche__bandeau {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--ombre-s);
}
.fiche__haut { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fiche__titre { font-size: 1.3rem; font-weight: 680; letter-spacing: -.015em; }
.fiche__code { font-family: var(--police-mono); font-size: .84rem; color: var(--texte-3); }
.fiche__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Formulaire de regle (surcharges) : deux colonnes, champs longs seuls --- */
.grille-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin: 12px 0 4px;
}
@media (max-width: 699px) {
    .grille-form { grid-template-columns: 1fr; }
}

/* --- Cases du simulateur : une par regle, cochable au clavier --- */
.simulateur__regles { display: grid; gap: 8px; margin: 12px 0 4px; }
.simulateur__regle {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--bord);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}
.simulateur__regle:hover { border-color: var(--accent); }
.simulateur__regle input { margin-right: 8px; }

.deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.liste-def {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr;
    gap: 9px 16px;
    font-size: .875rem;
}
.liste-def dt { color: var(--texte-2); font-weight: 500; }
.liste-def dd { margin: 0; font-weight: 550; }

/* --- Regroupement des ressources dans la grille des tarifs --- */
.groupe-res { margin-bottom: 22px; }
.groupe-res__tete {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--bordure);
}
.groupe-res__nom { font-weight: 650; font-size: .95rem; }
.groupe-res__meta { font-size: .78rem; color: var(--texte-3); }

/* ------------------------------------------------------------------------------------------
   5. UTILITAIRES
   ------------------------------------------------------------------------------------------ */

.mono { font-family: var(--police-mono); }
.num  { font-variant-numeric: tabular-nums; text-align: right; }
.muet { color: var(--texte-3); }
.petit { font-size: .8rem; }
.gras { font-weight: 650; }
.marge-haut { margin-top: 20px; }
.marge-bas { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.pousse { margin-left: auto; }
.texte-coupe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sr-seul {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------------------------------------ */

@media (max-width: 1080px) {
    .deux-colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .app { flex-direction: column; }

    .barre {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--bordure);
    }

    .nav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 10px 12px;
    }
    .nav__groupe { display: none; }
    .nav__lien { white-space: nowrap; margin-bottom: 0; }
    .nav__num { display: none; }
    .barre__pied { display: none; }

    .entete { padding: 13px 16px; }
    .page { padding: 18px 16px 44px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media (max-width: 560px) {
    .barre-outils .champ--court { width: 100%; }
    .fiche__actions { width: 100%; margin-left: 0; }
    .tableau th, .tableau td { padding: 9px 10px; }
    .vignette__actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------------------------------
   6 bis. ECRAN D'ACCUEIL ET VARIANTES DE TABLEAU
   Ces regles sont ecrites ici, et non dans un second fichier, pour une seule raison :
   une seule feuille de style signifie une seule requete HTTP. Sur un site ou l'utilisateur
   attend une reponse immediate, un fichier supplementaire pour douze regles est un
   aller-retour reseau qui ne se justifie pas.
   ------------------------------------------------------------------------------------------ */

/* L'accueil : trois cartes de largeur egale. Au-dela de trois colonnes le texte
   devient trop etroit pour un tableau ; en dessous, elles s'empilent. */
.accueil-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
}

.carte__tete { padding: 14px 16px 0; }
.carte__titre { margin: 0; font-size: 1rem; font-weight: 650; }
.carte__sous { margin: 3px 0 0; font-size: .78rem; color: var(--texte-3); line-height: 1.4; }
.carte__corps { padding: 12px 16px 16px; }

/* Un sous-titre a l'interieur d'une carte : "Sans contrat (3)". */
.mini-tete {
    margin: 0 0 6px;
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-3);
}
.mini-tete + .mini-tete,
.liste-simple + .mini-tete { margin-top: 16px; }

.liste-simple { margin: 0; padding-left: 18px; }
.liste-simple li { margin-bottom: 4px; }

/* Une explication en bas de tableau. Toujours en petit et en gris : c'est une
   precision, pas un titre. */
.note { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--texte-3); }

/* Tableau compact : pour l'accueil, ou la place compte plus que le confort. */
.tableau--compact th, .tableau--compact td { padding: 7px 10px; }
.tableau--compact { font-size: .82rem; }

/* Un contrat echu ou annule reste affiche et reste compte, mais il n'agit plus.
   On le grise plutot que de le cacher : disparaitre serait pire, on perdrait le
   compte et l'utilisateur ne saurait pas pourquoi le total a baisse. */
.ligne-inactive { opacity: .55; }

/* Un code produit ou ressource : chasse fixe, pour qu'il s'aligne en colonne. */
.tableau td.code, .vignette__code { font-family: var(--police-mono); }

/* Un lien de navigation qui n'existe pas encore : visible, mais clairement inactif.
   La classe remplace un style inline, pour que le theme sombre soit traite aussi. */
.nav__lien--inactive { opacity: .45; cursor: not-allowed; }
.nav__lien--inactive:hover { border-color: var(--bordure); color: inherit; }

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

/* ------------------------------------------------------------------------------------------
   7. IMPRESSION
   Une grille tarifaire est un document de travail : on l'imprime souvent.
   ------------------------------------------------------------------------------------------ */

@media print {
    .barre, .entete__droite, .barre-outils, .fiche__actions, .btn { display: none !important; }
    body { background: #fff; font-size: 10.5pt; }
    .app { display: block; }
    .page { padding: 0; max-width: none; }
    .carte, .fiche__bandeau { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
    .tableau th { position: static; background: #f0f0f0 !important; }
      a { color: inherit; text-decoration: none; }
  }

/* =========================================================================================
   8. FICHE PRODUIT — l'ecran de saisie, une page, 22 blocs
   ------------------------------------------------------------------------------------------
   Un seul fichier CSS, comme le reste. Sur un site ou l'utilisateur attend une reponse
   immediate, un second fichier pour ces regles serait un aller-retour reseau de plus.
   ========================================================================================= */

/* Un bloc est un <details> : le repli est natif, accessible au clavier, et ne
   depend d'aucun JavaScript. Un div avec un onclick ne l'est pas. */
.bloc {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    margin-bottom: 10px;
    overflow: hidden;
}

.bloc__titre {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
}
.bloc__titre::-webkit-details-marker { display: none; }
.bloc__pli[open] > .bloc__titre { border-bottom-color: var(--bordure); }
.bloc__titre:hover { background: var(--surface-2); }

.bloc__numero {
    font-family: var(--police-mono);
    font-size: .72rem;
    color: var(--texte-3);
    background: var(--surface-2);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    padding: 1px 6px;
    flex: 0 0 auto;
}

.bloc__nom { font-weight: 650; flex: 1 1 auto; }

.bloc__compteur {
    font-size: .78rem;
    color: var(--texte-3);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* La jauge du bloc : verte quand le bloc est complet, elle se vide seule.
   C'est le seul endroit ou l'utilisateur juge s'il a fini, sans compter. */
.bloc__jauge {
    width: 72px;
    height: 5px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
}
.bloc__jauge > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.bloc__corps { padding: 16px; }

/* La fleche du depliage, dessinee en CSS : pas d'image a telecharger. */
.bloc__titre::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--texte-3);
    border-bottom: 2px solid var(--texte-3);
    transform: rotate(45deg);
    flex: 0 0 auto;
    transition: transform var(--trans);
}
.bloc__pli[open] > .bloc__titre::after { transform: rotate(-135deg); }

/* Titre fixe (page Details) : meme disposition qu'un titre de bloc, mais sans
   chevron ni survol — il n'y a rien a deplier. Sans cela, le h2 heriterait la
   fleche et le pointeur du summary. */
h2.bloc__titre { cursor: default; }
h2.bloc__titre:hover { background: none; }
h2.bloc__titre::after { display: none; }

/* Un champ generique : le libelle vient de dbo.Champ, l'unite aussi. */
.champ { margin-bottom: 13px; }

.champ__libelle {
    display: block;
    font-size: .8rem;
    color: var(--texte-2);
    margin-bottom: 4px;
    font-weight: 600;
}

.champ__requis { color: var(--err); }

.champ__saisie {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-size: .88rem;
}
.champ__saisie:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux);
}
.champ__zone { resize: vertical; min-height: 60px; }

/* L'unite a cote de la saisie, pas dedans : le nombre reste analysable, et l'unite
   ne se melange pas a la valeur si le champ est relu. */
.champ__unite {
    display: inline-block;
    margin-left: 7px;
    font-size: .78rem;
    color: var(--texte-3);
}

.champ__aide {
    font-size: .74rem;
    color: var(--texte-3);
    margin-top: 3px;
    line-height: 1.4;
}

.champ__case { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.champ__case input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

/* Jours d'application (prix) : 7 cases en ligne, qui passent a la ligne. */
.champ__jours { border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px; margin: 8px 0; }
.champ__jours legend { font-size: .82rem; color: var(--texte-2); padding: 0 6px; }
.champ__jours .champ__case { margin: 2px 10px 2px 0; }

/* La progression : la reponse a « ai-je bien tout rempli ? ». */
.progression {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: 13px 16px;
    margin-bottom: 14px;
}
.progression__texte { font-size: .8rem; color: var(--texte-2); margin-bottom: 7px; }
.progression__barre {
    height: 7px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}
.progression__rempli {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width var(--trans);
}

/* Le bouton unique, et ce qu'il promet. */
.barre-actions {
    position: sticky;
    bottom: 0;
    background: var(--fond);
    border-top: 1px solid var(--bordure);
    padding: 13px 16px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 5;
}
.btn--grand { padding: 10px 22px; font-size: .92rem; }
.barre-actions__note { font-size: .76rem; color: var(--texte-3); }

@media (max-width: 700px) {
    .barre-actions { flex-direction: column; align-items: stretch; }
    .bloc__jauge { display: none; }
}

@media print {
    .bloc__titre::after, .barre-actions, .bloc__jauge { display: none !important; }
    .bloc__corps { display: block !important; }
}

/* =========================================================================================
   9. GRILLES EDITABLES — prix, ressources et contacts, DANS la fiche
   ------------------------------------------------------------------------------------------
   Une grille est un tableau compact suivi de son formulaire. Le formulaire est une
   carte plus foncee que le tableau : on voit d'un coup d'oeil ce qui est lu et ce
   qui est en cours d'edition. Les boutons « Modifier » des lignes n'ont pas de
   classe bouton : ce sont des liens d'action, discrets, pour ne pas transformer
   chaque ligne en rangée de boutons.
   ========================================================================================= */

/* Un lien d'action dans une ligne : il ressemble a un lien, pas a un bouton. */
.lien-action {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: underline;
}
.lien-action:hover { color: var(--accent-hover); text-underline-offset: 2px; }

/* Le formulaire de ligne : une carte qui se distingue du tableau. */
.form-ligne {
    background: var(--surface-2);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    padding: 14px 16px;
    margin-top: 12px;
}

/* Deux ou trois saisies cote a cote. En dessous de 560px, elles s'empilent. */
.form-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.form-grille label {
    display: block;
    font-size: .78rem;
    color: var(--texte-2);
    font-weight: 600;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Un bouton rouge, pour retirer. Il n'est propose que sur une ligne existante :
   retirer une ligne qui n'existe pas encore n'a aucun sens. */
.btn--danger {
    background: var(--err-fond, #fdecea);
    border: 1px solid var(--err, #c0392b);
    color: var(--err, #c0392b);
}
.btn--danger:hover { filter: brightness(.96); }

td.actions { white-space: nowrap; }
td.actions .lien-action + .lien-action { margin-left: 10px; }

/* =========================================================================================
   10. FICHE PRO — consultation, sommaire, modales
   ------------------------------------------------------------------------------------------
   La fiche a deux visages : on la LIT (consultation, par defaut), on l'ECRIT
   (formulaire, sur demande). Le CSS suit cette separation : les regles
   --lecture dessinent des valeurs, jamais des champs.
   ========================================================================================= */

/* --- Ancrage sous l'en-tete fixe ---------------------------------------------------
   Sans marge, un saut vers #bloc-UI-XX colle le titre du bloc sous l'en-tete
   sticky (.entete, ~80px) : on arrive au bon endroit sans le voir. Cette marge
   est respectee par le saut natif comme par scrollIntoView, avec ou sans JS. */
section.bloc { scroll-margin-top: 96px; }

/* --- Disposition : sommaire + blocs, desktop uniquement ------------------------------ */
@media (min-width: 1080px) {
    .fiche-layout {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
    .fiche-nav {
        position: sticky;
        top: 76px;
        max-height: calc(100vh - 96px);
        overflow: auto;
        background: var(--surface);
        border: 1px solid var(--bordure);
        border-radius: var(--r-l);
        padding: 12px 10px;
    }
}
@media (max-width: 1079px) {
    .fiche-nav { display: none; }
}

.fiche-nav__titre {
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-3);
    margin: 2px 6px 8px;
}
.fiche-nav__liste { list-style: none; margin: 0; padding: 0; }
.fiche-nav__item a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border-radius: var(--r-s);
    color: var(--texte-2);
    text-decoration: none;
    font-size: .8rem;
}
.fiche-nav__item a:hover { background: var(--surface-2); text-decoration: none; }
.fiche-nav__nom {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fiche-nav__item--actif a { background: var(--accent-doux); color: var(--texte); }
.fiche-nav__item .pastille { font-size: .68rem; padding: 0 6px; }

/* --- Lecture : des valeurs, pas des champs ------------------------------------------- */
.champ--lecture { margin-bottom: 10px; }
.champ--lecture .champ__libelle {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--texte-3);
    margin-bottom: 1px;
    font-weight: 600;
}
.champ__valeur { font-size: .9rem; line-height: 1.5; }
.bloc__corps--lecture { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
@media (max-width: 699px) {
    .bloc__corps--lecture { grid-template-columns: 1fr; }
}
.bloc--lecture .bloc__compteur--vide { color: var(--texte-3); font-style: italic; }

/* --- Deux colonnes pour les champs courts (edition) ---------------------------------- */
@media (min-width: 700px) {
    .bloc__corps--grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
    .bloc__corps--grille .champ { margin-bottom: 0; }
    .champ--plein { grid-column: 1 / -1; }
    /* Les grilles et leurs titres prennent toute la largeur : ce sont des tableaux,
       pas des champs, et les couper en deux serait illisible. */
    .bloc__corps--grille > h3.mini-tete,
    .bloc__corps--grille > .tableau-enveloppe,
    .bloc__corps--grille > p.muet,
    .bloc__corps--grille > p.note,
    .bloc__corps--grille > .btn { grid-column: 1 / -1; }
    /* Lecture (Détails + consultation Fiche) : même règle, sinon le titre part en
       colonne droite et le tableau en bas à gauche. */
    .bloc__corps--lecture > h3.mini-tete,
    .bloc__corps--lecture > .tableau-enveloppe,
    .bloc__corps--lecture > p.muet,
    .bloc__corps--lecture > p.note { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
    .bloc__corps--grille { display: block; }
}

/* --- Requis : on voit ce qui bloquera ------------------------------------------------- */
.champ--obligatoire .champ__libelle { font-weight: 700; color: var(--texte); }
.champ--obligatoire .champ__saisie { border-left: 3px solid var(--err); }
.champ--erreur .champ__saisie { border-color: var(--err); }
.champ__erreur { color: var(--err); font-size: .78rem; margin-top: 3px; }

/* --- Aide en infobulle, pas en paragraphe ----------------------------------------------
   L'aide permanente doublait la hauteur de chaque champ. Elle s'affiche au focus,
   et reste accessible au clavier comme a la souris. */
.champ__aide { display: none; }
.champ:focus-within .champ__aide {
    display: block;
    font-size: .76rem;
    color: var(--texte-2);
    background: var(--surface-2);
    border-left: 3px solid var(--accent-bord);
    padding: 6px 9px;
    margin-top: 5px;
    border-radius: 0 var(--r-s) var(--r-s) 0;
    line-height: 1.45;
}

/* --- Modale des grilles ----------------------------------------------------------------
   Un seul dialogue natif. Le fond assombrit, la carte est centree, et tout ce qui
   depasse scrolle DANS la carte, jamais la page derriere. */
.modale {
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    background: var(--surface);
    color: var(--texte);
    padding: 0;
    max-width: calc(100vw - 32px);
    width: 560px;
    max-height: calc(100vh - 60px);
    overflow: auto;
    box-shadow: var(--ombre-xl);
}
.modale::backdrop { background: rgba(0, 0, 0, .45); }
.modale .form-ligne { border: none; margin: 0; padding: 18px 20px; }
body:has(dialog[open]) { overflow: hidden; }

/* --- Tables : zebra, en-tete alignee, ligne modifiee ----------------------------------- */
.tableau tbody tr:nth-child(even) { background: var(--surface-2); }
.tableau tbody tr:hover { background: var(--accent-doux); }
.tableau tbody tr.alerte:nth-child(even) { background: var(--err-fond); }
.tableau th.num { text-align: right; }
.ligne-modifiee { background: var(--accent-doux) !important; outline: 2px solid var(--accent-bord); }

/* --- Familles de blocs : on distingue les natures ---------------------------------------
   Produit, contrat, grilles, textes : quatre tranches colorees a gauche. Sans cela,
   Identification et Pieces jointes ont le meme poids, et rien ne guide l'oeil. */
.bloc--produit { border-left: 4px solid var(--accent); }
.bloc--contrat { border-left: 4px solid var(--info); }
.bloc--grille-bloc { border-left: 4px solid var(--warn); }
.bloc--texte { border-left: 4px solid var(--bordure-forte); }

/* --- Impression : tout ouvert, rien d'interactif ---------------------------------------- */
@media print {
    .fiche-nav, .barre-actions, dialog.modale, .form-actions { display: none !important; }
    .bloc__pli { display: block !important; }
    .bloc__corps { display: block !important; }
    .bloc, .form-ligne, tr { page-break-inside: avoid; }
    .bloc { background: #fff !important; border-color: #ccc !important; }
}

/* ------------------------------------------------------------------------------------------
   CONNEXION (login.aspx) — la seule page hors du cadre

   login.aspx n'a pas de master : ni barre laterale, ni en-tete. Elle dessine donc son
   propre cadre : une carte centree sur le fond. Tous les jetons viennent de :root, donc
   les themes clair et sombre fonctionnent sans une ligne de plus.
   ------------------------------------------------------------------------------------------ */

.auth-fond {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

/* Piege : dans une page WebForms, le <form runat="server"> enveloppe tout. Sous
   body.auth-fond (display:flex), c'est LUI l'element flex — pas .auth. Sans largeur
   sur le form, .auth { width:100% } se resout contre sa largeur intrinseque (celle du
   champ e-mail) et la carte s'effondre a ~230px. La largeur vit donc sur le form. */
.auth-fond > form {
    width: 100%;
    max-width: 400px;
    margin: 0;
}

.auth { width: 100%; }

.auth__carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    box-shadow: var(--ombre-l);
    padding: 28px 28px 30px;
}

.auth__marque {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
}

.auth .champ { margin-bottom: 14px; }

/* "Se souvenir de moi" : une coche lisible, pas les 13px par defaut du navigateur. */
.auth__coche { margin: 4px 0 18px; }
.auth__coche label { font-size: .88rem; color: var(--texte-2); cursor: pointer; }
.auth__coche input[type="checkbox"] {
    width: 15px; height: 15px;
    vertical-align: -2px;
    margin-right: 6px;
    cursor: pointer;
}

/* Le bouton prend toute la largeur de la carte : c'est LA seule action de l'ecran. */
.auth__valider { width: 100%; justify-content: center; padding: 10px 14px; }