:root {
  /* ── Charte Classe Mini (thème clair) — handoff docs/Design system classe mini/ ──
     Les noms legacy (--accent, --red, --muted…) sont conservés et repointés vers
     la charte claire pour ne pas casser les styles inline du JS ; les nouveaux
     tokens (--ink, --crimson-text, --green…) sont ajoutés pour la fidélité fine. */

  /* Fonds & surfaces */
  --bg:#EDEEF0;            /* fond app */
  --surface:#FFFFFF;       /* cartes */
  --surface2:#EEF0F2;      /* inputs, options au repos, surfaces alt */
  --bg-card:#EEF0F2;       /* alias legacy (textarea bilan) */
  --ink:#141A30;           /* navy — header, titres, marqueur jauge */

  /* Bordures chaudes */
  --border:#E7E4DD;        /* bordure carte */
  --border-input:#E2DED5;  /* bordure input */
  --divider:#EDE9E1;       /* séparateur interne (border-top) */

  /* Rouge de la MARQUE Classe Mini (celui du logo) — volontairement distinct du
     crimson d'interface ci-dessous. Ne sert qu'aux reproductions du logo (loader
     de la vue admin) : ne pas le « corriger » vers --accent, ce n'est pas la
     même couleur ni le même rôle. */
  --logo-red:#E2001A;

  /* Accent crimson (identité + CTA) */
  --accent:#D2384A;        /* crimson */
  --accent2:#B62C3C;       /* crimson deep (hover / gradient) */
  --crimson-text:#C02E40;  /* texte / bordure boutons secondaires */
  --red-accent:#D9564D;    /* eyebrows MES PROJETS / ÉTAPE n/18 */

  /* Sémantique / données */
  --red:#D2384A;           /* danger = crimson (charte : un seul rouge) */
  --orange:#C48A20;        /* ocre — impact moyen, jauge milieu */
  --blue:#3A7BD5;          /* t/an, impact faible, données */
  --blue-header:#6EA8F0;   /* t/an sur fond navy */
  --green:#2F9E6B;         /* Mobilité, jauge début, succès */
  --green-text:#1E7A50;    /* texte poste sélectionné */
  --incertitude:#E0913B;   /* ±x,x */

  /* Teintes claires « moyenne » */
  --tint-ocre:#E6D3A8; --tint-green:#B4DCC8; --tint-blue:#C7DBF3; --tint-text:#3A3E4D;

  /* Texte */
  --text:#141A30;          /* titres */
  --text-body:#3A3E4D;     /* corps */
  --muted:#6B7080;         /* sous-titres, légendes */
  --muted-2:#565B6A;       /* sous-titres explicatifs */
  --disabled:#9AA1B8;      /* placeholder, chevrons, icônes désactivées */

  /* Jauge */
  --gauge:linear-gradient(90deg,#2F9E6B,#C48A20 55%,#D2384A);

  /* Typographie — Montserrat pour titres ET chiffres (pas de mono : espace
     disgracieux après la virgule décimale FR), Open Sans pour le corps. */
  --font-title:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Forme */
  --radius:12px;           /* cartes */
  --radius-sm:8px;         /* inputs */
  --radius-btn:10px;       /* boutons */
  --radius-pill:999px;

  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden}
#app{height:100dvh;display:flex;flex-direction:column;max-width:900px;margin:0 auto}

/* ── Header ── */
.header{position:relative;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff}
/* Liseré crimson 3px sous le header (handoff) */
.header::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
/* Dans le formulaire (étape 1), le liseré rouge céderait sa place visuelle à la barre de
   progression située juste en dessous — on le masque (classe posée par setStep). */
#app.step-form .header::after{display:none}
.header-title{font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff}
.header-sub{font-family:var(--font-body);font-size:12px;color:var(--disabled);margin-top:3px}
.header-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* Marque de la vue admin (étape 3) : cadre filaire blanc, même vocabulaire que
   .btn-admin. Le header est sur --ink, le blanc translucide y contraste bien. */
.header-badge{display:inline-flex;align-items:center;font-family:var(--font-title);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-btn);padding:7px 14px;flex:0 0 auto}
.header-counter{text-align:right}
.counter-value{font-family:var(--font-title);font-size:16px;font-weight:700;color:#fff}
.counter-label{font-family:var(--font-title);font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--disabled);margin-top:3px}
/* eCO₂ : « 2 » en indice (handoff hi-fi). Classe partagée pour les libellés statiques ; le JS utilise unite() (format.js). */
.eco2-sub{font-size:.62em;vertical-align:baseline;position:relative;top:.18em}
.counter-sep{width:1px;height:26px;background:rgba(255,255,255,.14)}
.btn-home{width:40px;height:40px;background:rgba(255,255,255,.08);border:none;color:#c9cede;padding:0;cursor:pointer;border-radius:var(--radius-btn);transition:background .2s;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.btn-home:hover{background:rgba(255,255,255,.16)}
.btn-home:active{transform:scale(0.92)}
.btn-admin{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:var(--radius-btn);transition:all .2s;flex:0 0 auto}
.btn-admin:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.8)}
.btn-admin:active{transform:scale(0.96)}

/* ── Progress ── */
.progress-wrap{height:4px;background:#e4e0d8}
.progress-bar{height:4px;background:linear-gradient(90deg,var(--accent),#e2685f);transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1)}

/* ── Content ── */
.content{flex:1;overflow-y:auto;padding:16px;padding-bottom:80px;-webkit-overflow-scrolling:touch;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Step labels ── */
.step-label{font-family:var(--font-title);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red-accent);margin-bottom:6px}
.step-title{font-family:var(--font-title);font-size:24px;font-weight:700;color:var(--text);margin-bottom:16px}

/* ── Carte conseil / à savoir (pill navy flottante — handoff) ── */
.tip-pill{position:absolute;top:-9px;left:12px;background:var(--ink);color:#fff;font-family:var(--font-title);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-pill)}
.tip-link{color:var(--muted);font-size:11px;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* Variante « plate » (sans pastille) — carte Méthode de l'accueil (cf. mockup #4a). */
.tip-card-flat{background:var(--surface);border:1px solid #e7dfd2;border-radius:var(--radius-sm);padding:12px 14px;font-size:12px;line-height:1.5;color:#4a4f5e}
.intro-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin:8px 0;color:var(--text-body);line-height:1.5;font-size:14px}
/* Note d'intro à pastille (Méthode / Périmètre) — même charte que .intro-box
   (tokens de thème + 14px), avec la pastille navy .tip-pill flottante. */
.intro-note{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 16px 14px;margin-top:16px;color:var(--text-body);line-height:1.5;font-size:14px}

/* Styles pour les listes dans les intros */
.intro-box ul,.intro-note ul{margin:8px 0;padding-left:20px}
.intro-box li,.intro-note li{margin:4px 0;line-height:1.5}

/* ── Project cards (layout vertical — handoff) ── */
.cards{display:flex;flex-direction:column;gap:11px}
.card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s}
.card:hover{border-color:#dcd6c9;box-shadow:0 4px 14px rgba(20,26,48,0.06)}
.card:active{transform:scale(0.995)}
.card-name{font-family:var(--font-title);font-size:16px;font-weight:700;color:var(--text)}
.card-sub{font-size:12px;color:var(--muted);margin-top:0}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;padding-top:10px;border-top:1px solid var(--divider)}
.card-metrics{display:flex;align-items:center;gap:10px;min-width:0}
.metric{font-family:var(--font-title);font-size:18px;font-weight:700;white-space:nowrap}
.metric .u{font-size:11px;font-weight:600;color:var(--muted)}
.metric-total{color:var(--text)}
.metric-an{color:var(--blue)}
.metric-sep{width:1px;height:16px;background:var(--border);flex:0 0 auto}
.card-actions{display:flex;gap:8px;flex:0 0 auto}
.card-icon-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .15s}
.card-icon-btn:hover{border-color:#dcd6c9;background:#faf8f4}
.card-icon-btn:active{transform:scale(0.93)}
.card-icon-del{color:var(--disabled)}
.card-icon-del:hover{color:var(--accent);border-color:var(--accent);background:#faf1f2}

/* ── Bilan de référence : pastille sur les cards projet + encart bilan ── */
.card-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* position:relative + z-index : passe au-dessus des overlays absolus qui sinon
   intercepteraient le clic — même parade que .card-icon-del. */
.ref-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.3px;padding:5px 10px;border-radius:var(--radius-pill);cursor:pointer;transition:all .15s;white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--disabled);position:relative;z-index:1}
.ref-pill .star{font-size:12px;line-height:1}
/* Référence active : badge blanc sur dégradé crimson + ombre (handoff ★ Référence) */
.ref-pill.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 3px 9px rgba(210,56,74,.28);font-weight:700;cursor:default}
.ref-pill.on .star{color:#fff}
.ref-pill.off:hover{color:var(--crimson-text);border-color:var(--accent);background:#faf1f2}
.ref-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ref-card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:6px 8px 14px;margin:20px 0 4px}
.ref-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;padding:12px 10px;border-radius:var(--radius-sm);transition:background .15s}
.ref-toggle:hover{background:#f6f4ef}
.ref-check{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:2px solid var(--border-input);background:var(--surface2);display:grid;place-content:center;cursor:pointer;transition:all .15s}
.ref-check:checked{background:var(--accent);border-color:var(--accent)}
.ref-check:checked::after{content:'';width:6px;height:11px;margin-top:-2px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ref-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ref-toggle-text{font-size:14px;font-weight:600;color:var(--text)}
.ref-note{display:flex;gap:8px;padding:0 10px;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.5}
.ref-note .i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);display:grid;place-content:center;font-size:10px;font-weight:700;font-style:italic}

/* ── Question items ── */
.question-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:11px;position:relative;transition:border-color 0.2s,box-shadow 0.2s}
.question-item:hover{border-color:#dcd6c9;box-shadow:0 2px 10px rgba(20,26,48,0.05)}
/* Ligne titre : n° + intitulé à gauche, badge impact poussé à droite (handoff). */
.question-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.question-titlewrap{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.question-number{font-family:var(--font-title);color:#9a9eab;font-size:13px;font-weight:700;flex:0 0 auto}
.question-label{font-size:14px;font-weight:600;color:var(--text-body);min-width:0}
/* Astérisque des questions obligatoires (colonne `Obligatoire` du Sheet). */
.question-required{color:var(--crimson-text);font-weight:700}
/* Question obligatoire laissée vide : marquée seulement au moment où l'utilisateur
   tente de quitter l'étape (cf. validateObligatoires dans form.js). */
.question-item.question-missing{border-color:var(--red);box-shadow:0 0 0 3px rgba(210,56,74,.10)}
.question-impact{font-size:9px;padding:4px 7px;border-radius:5px;font-weight:600;white-space:nowrap;flex:0 0 auto;margin-top:1px}
.question-impact.fort{background:rgba(210,56,74,.11);color:var(--crimson-text)}
.question-impact.moyen{background:rgba(196,138,32,.16);color:#a37518}
.question-impact.faible{background:rgba(58,123,213,.13);color:var(--blue)}
.question-inputs{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:10px}
.question-input-group{display:flex;flex-direction:column;gap:4px;min-width:100px;flex:1}
.question-input-group label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.question-input-group input{width:100%;min-width:80px}
.question-explication{font-size:12px;color:var(--muted-2);line-height:1.4;padding-left:22px;margin:4px 0 0}
.question-explication:empty{display:none}

/* ── Inputs ── */
input[type=number],input[type=text],select{width:100%;background:var(--surface2);border:1px solid var(--border-input);border-radius:var(--radius-sm);color:var(--text-body);font-size:15px;font-weight:600;padding:11px 14px;font-family:var(--font-body);transition:border-color 0.2s,box-shadow 0.2s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,56,74,0.12)}
input:hover,select:hover{border-color:#d3cdc1}
input::placeholder{color:#b0b4bf}
select{-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="%236b7080" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%}
.input-with-unit{position:relative;display:flex;align-items:center}
.input-with-unit input{width:100%;padding-right:60px}
.unit-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--disabled);font-weight:400;pointer-events:none;user-select:none}
.input-with-unit input:focus ~ .unit-suffix{color:var(--muted)}

/* Variante « boxed » (mockup #3a l.384) : le label Achat / Renouvellement est DANS la
   boîte de saisie — la bordure et le fond passent sur le groupe, l'input devient nu. */
.question-input-group.boxed{border:1px solid var(--border-input);background:var(--surface2);border-radius:var(--radius-sm);padding:8px 12px;gap:5px;transition:border-color 0.2s,box-shadow 0.2s}
.question-input-group.boxed label{font-family:var(--font-title);font-size:9px;letter-spacing:1px;color:#9a9eab;cursor:text}
.question-input-group.boxed input{border:none;background:transparent;border-radius:0;padding:0 46px 0 0;min-width:0}
.question-input-group.boxed input:focus,.question-input-group.boxed input:hover{border:none;box-shadow:none}
.question-input-group.boxed:hover{border-color:#d3cdc1}
.question-input-group.boxed:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,56,74,0.12)}
.question-input-group.boxed .unit-suffix{right:0}

/* ── Option buttons ──
   Toggles compacts du handoff v2 (mockup #3a/#4a : padding 12-13px, pas de min-height —
   remplace l'Option C « ≥ 64 px » de docs/specs/radio-cards-type-profil.md).
   Sélection = bordure 2px ink + fond translucide. Utilisé par les questions
   radio/case et la modale projet. */
.btn-option{position:relative;padding:13px 16px;min-width:80px;background:var(--surface2);border:2px solid var(--border-input);border-radius:var(--radius-btn);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--font-body);text-align:center;display:inline-flex;align-items:center;justify-content:center;line-height:1.3}
.btn-option:hover{border-color:#cfc9bd}
.btn-option:active{transform:translateY(0)}
.btn-option.active{background:rgba(20,26,48,.06);border-color:var(--ink);color:var(--ink);font-weight:700}
.btn-option .check{position:absolute;top:8px;right:10px;font-size:16px;color:var(--ink)}

/* ── Primary & Secondary buttons ── */
.btn-primary{width:100%;padding:15px;border-radius:var(--radius-btn);border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:.3px;cursor:pointer;margin-top:12px;transition:transform 0.15s,box-shadow 0.2s;box-shadow:0 6px 18px rgba(210,56,74,.24)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(210,56,74,.30)}
.btn-primary:active{transform:translateY(0);box-shadow:0 3px 10px rgba(210,56,74,.20)}
.btn-secondary{width:100%;padding:14px;border-radius:var(--radius-btn);border:1.5px solid var(--accent);background:var(--surface);color:var(--crimson-text);font-family:var(--font-title);font-size:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;margin-top:8px;transition:background 0.2s}
.btn-secondary:hover{background:#faf1f2}
.btn-primary:disabled,.btn-secondary:disabled{opacity:0.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-primary:disabled:hover,.btn-secondary:disabled:hover{transform:none!important;box-shadow:none!important}
/* Le fond blanc du survol désactivé ne vaut que pour le bouton SECONDAIRE (fond
   blanc, texte crimson). Appliqué aussi au primaire, il effaçait son dégradé et
   laissait du texte blanc sur blanc : le bouton semblait disparaître dès qu'on
   gardait le curseur dessus après l'avoir cliqué. */
.btn-secondary:disabled:hover{background:var(--surface)}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:-2px;margin-right:6px}

/* ── Nav buttons ── */
.nav-buttons{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:10px;max-width:900px;margin:0 auto}
.nav-btn{flex:1;padding:14px;border-radius:var(--radius-btn);border:1px solid var(--border-input);background:var(--surface2);color:var(--muted);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.nav-btn:hover{border-color:#cfc9bd}
.nav-btn:disabled{opacity:0.6;cursor:not-allowed;color:#b7bbc6;transform:none!important}
.nav-btn.primary{flex:1.4;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;font-family:var(--font-title);font-weight:700;letter-spacing:.5px;box-shadow:0 4px 12px rgba(210,56,74,.24)}

/* ── Modal ── */
.modal{position:fixed;inset:0;background:rgba(20,26,48,0.45);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal.show{display:flex;animation:fadeIn 0.2s ease}
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 55px rgba(20,26,48,.22);animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-family:var(--font-title);font-size:20px;font-weight:700;color:var(--text);margin-bottom:12px}
.modal-text{font-size:15px;line-height:1.6;color:var(--muted)}
.form-group{margin-bottom:16px}
.form-label{font-size:14px;color:var(--muted);margin-bottom:6px;display:block}

/* ── Summary / Charts ── */
.bilan-section-title{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* Sections du bilan : à plat en mobile (mockup écran 3), cartes blanches en desktop (mockup BILAN). */
.bilan-card{min-width:0}
.only-desktop{display:none}
/* Stats « hero » : 2 cartes blanches côte à côte en mobile, une carte navy commune en desktop. */
.stats-hero{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{text-align:center;padding:14px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);flex:1 1 160px;min-width:0}
.stat-t{font-family:var(--font-title);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.stat-n{font-family:var(--font-title);font-size:26px;font-weight:700;color:var(--text);line-height:1}
.stat-n .stat-inc{font-size:13px;color:var(--orange);font-weight:700}
.stat-n .stat-u{font-size:12px;color:var(--muted);font-weight:600}
.stat-n.stat-n-an{color:var(--blue)}
.stat-sub{font-size:10.5px;line-height:1.35;color:var(--muted);margin-top:6px}
.stat-sep{display:none}
/* Bloc comparatif « Émissions par poste » (handoff) : barres empilées + pills + barres horizontales.
   Les couleurs par poste (plein/teinte/texte) sont posées en inline par bilan.js (POSTE_META).
   Grille responsive : mobile = barres|pills puis détail dessous (écran 3) ;
   desktop = pills en ligne au-dessus, détail à droite des barres (mockup BILAN). */
.cmp-grid{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;grid-template-areas:"bars pills" "detail detail"}
.cmp-bars{grid-area:bars;display:flex;gap:22px;align-items:flex-end;padding:0 2px}
#poste-pills{grid-area:pills;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:0}
.cmp-detail{grid-area:detail;min-width:0}
.cmp-total{font-family:var(--font-title);font-size:12px;font-weight:700;white-space:nowrap}
.cmp-bar-label{width:76px;min-height:24px;font-size:9.5px;font-weight:600;line-height:1.2;text-align:center}
.cmp-phrase{font-size:11px;line-height:1.5;color:var(--muted);margin-top:12px;padding-top:10px;border-top:1px solid var(--divider)}
.cmp-phrase b{color:var(--ink)}
.poste-pill{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted-2);font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.poste-pill:hover{background:#faf8f4}
.pill-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.pill-name{flex:1;min-width:0}
.pill-chev{color:var(--disabled)}
.hbar-row{display:flex;align-items:center;gap:8px}
.hbar-label{width:112px;flex:0 0 auto;font-size:10px;line-height:1.2;color:#4a4f5e;text-align:right}
/* Ligne issue d'une valeur forfaitaire (`Question_Active = FORFAIT`) : question
   jamais posée à l'utilisateur, on le signale discrètement. */
.hbar-forfait{color:var(--muted);font-style:italic;white-space:nowrap}
.hbar-track{flex:1;height:11px;background:rgba(20,26,48,.05);border-radius:3px;overflow:hidden}
.hbar-fill{height:100%}
.hbar-val{width:48px;flex:0 0 auto;font-family:var(--font-title);font-size:10px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
/* Boutons de fin de bilan : PDF au-dessus en mobile (column-reverse), côte à côte en desktop. */
.bilan-actions{display:flex;flex-direction:column-reverse;gap:9px;margin-top:16px}
.bilan-actions .btn-primary,.bilan-actions .btn-secondary{margin-top:0}

/* Bilan desktop (≥641px) — mockup « BILAN » : sections en cartes blanches, stats dans une
   carte navy, pills horizontales au-dessus du graphe, détail des sous-postes à droite. */
@media (min-width:641px) {
  .bilan-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px}
  .only-desktop{display:block}
  .stats-hero{background:var(--ink);border-radius:14px;padding:22px 26px 26px;gap:14px;flex-wrap:nowrap}
  .stats-hero .stat{background:transparent;border:none;padding:0}
  .stats-hero .stat-t{color:#c9cede;margin-bottom:9px}
  .stats-hero .stat-n{font-size:36px;color:#fff}
  .stats-hero .stat-n .stat-inc{font-size:16px;color:var(--incertitude)}
  .stats-hero .stat-n .stat-u{font-size:16px;color:#aab0c2}
  .stats-hero .stat-n.stat-n-an{color:var(--blue-header)}
  .stats-hero .stat-sub{font-size:12px;color:var(--disabled);margin-top:7px}
  .stat-sep{display:block;width:1px;background:rgba(255,255,255,.12);flex:0 0 auto}
  .cmp-grid{grid-template-areas:"pills pills" "bars detail";column-gap:28px}
  #poste-pills{flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  .poste-pill{width:auto}
  .cmp-bars{gap:36px}
  /* Détail ancré en haut (flex-start) : sa position ne bouge plus quand on change de poste
     (un centrage vertical le ferait « se balader » selon le nombre de sous-postes). */
  .cmp-detail{border-left:1px dashed #d8d3c8;padding-left:26px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start}
  #souspostes-zone .hbar-label{width:132px}
  #souspostes-zone .hbar-track{border-radius:999px}
  #top5-zone .hbar-label{width:230px}
  .bilan-actions{flex-direction:row}
  .bilan-actions .btn-secondary{flex:1}
  .bilan-actions .btn-primary{flex:1.4}
}

/* ── Loading screen ── */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100}
.spinner{width:44px;height:44px;border:3px solid #dcd9d1;border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseDots{0%,60%,100%{opacity:1}30%{opacity:.3}}
.loading-dots{animation:pulseDots 1.2s ease-in-out infinite}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-btn);padding:12px 20px;font-size:14px;color:var(--text);z-index:9999;transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 8px 32px rgba(20,26,48,0.18)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(47,158,107,0.5);color:var(--green-text);box-shadow:0 8px 32px rgba(47,158,107,0.18)}

/* ── Responsive ──
 * Breakpoints normalisés (cf. docs/specs/responsive-audit.md §6) :
 *   @media (max-width:480px) → mobile only (smartphones portrait)
 *   @media (max-width:900px) → mobile + tablette (= max-width de #app)
 */
@media (max-width:900px) {
  #app{max-width:100%}
  .question-input-group{flex:1}
  .nav-buttons{max-width:100%}
}

/* Mobile only (≤480px). */
@media (max-width:480px) {
  .header{padding:12px 14px}
  .header-title{font-size:14px}
  .header > div:first-child{min-width:0}
  .header-sub{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .question-input-group{flex:1 1 0;min-width:0}
  .question-input-group input{min-width:0}
  .btn-option{min-width:0;padding:12px 10px;font-size:14px}
}

/* Desktop / tablette large (≥640px) : cartes projet en grille 2 colonnes et
   CTA « + Nouveau calcul » à largeur fixe (cf. mockup #3a desktop). */
@media (min-width:640px) {
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .btn-new-calc{width:340px}
}

/* Cartes question horizontales dès qu'il y a la place (≥641px) : texte + badge à gauche,
   input/toggle à droite (320px), centrés (cf. mockup #3a). L'empilement est réservé au
   mobile (≤640px). Le cas 2 champs (Achat + Renouvellement) tient dans la colonne 320px
   via le flex existant des .question-input-group. Le badge garde sa colonne dédiée à
   droite du texte (space-between du style de base de .question-head). */
@media (min-width:641px) {
  .question-item{display:flex;align-items:center;gap:20px}
  .question-main{flex:1;min-width:0}
  /* nowrap : les toggles (Oui/Non, années…) restent sur UNE ligne dans la colonne
     320px (mockup #3a l.358) — chaque bouton prend flex:1 et se comprime. */
  .question-inputs{width:320px;flex:0 0 auto;margin-top:0;flex-wrap:nowrap}
  .question-inputs .btn-option{flex:1 1 0;min-width:0;padding:12px 8px}
}

/* ══════════════════════════════════════════════════════════════════════════
   VUE ADMIN (écran 5a + modal détail 5c du handoff)
   Aucune couleur en dur : les maquettes sont en styles inline, on les traduit
   vers les tokens :root. Toute valeur hexadécimale ici serait une régression.
   ══════════════════════════════════════════════════════════════════════════ */

/* NOTE : la vue admin n'élargit PLUS #app. Élargir le conteneur faisait sauter
   tout l'écran (header compris) de 900 à 1280px en entrant dans la vue, ce qui
   se voyait beaucoup. Le tableau est donc dimensionné pour tenir dans les 868px
   disponibles (900 - 2×16 de padding de .content) — voir la grille plus bas. */

.admin-eyebrow{font-family:var(--font-title);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red-accent)}
.admin-title{font-family:var(--font-title);font-size:28px;font-weight:700;line-height:1.15;color:var(--text);margin:10px 0 16px}
/* Entrée vers la vue admin depuis l'accueil — visible seulement si `S.user.isAdmin`. */
.admin-entry{margin:12px 0 4px;width:auto;padding:9px 16px;font-size:12px}
.admin-vide{padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* ── Loader « logo qui se remplit » (8f du handoff) ──
   Une vague rouge monte dans le disque et inverse le logo : rouge sur blanc ->
   blanc sur rouge. Deux calques de texte superposés, celui du bas en blanc et
   ancré au BAS du disque (pas au bas de la vague) pour rester pile aligné sur
   celui du dessus pendant que la vague monte ; c'est le conteneur `-clip` qui
   ne laisse voir que la partie immergée. */
.admin-loader{padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.admin-loader-logo{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--surface);border:2.5px solid var(--logo-red);box-shadow:0 6px 18px rgba(20,26,48,.18)}
.admin-loader-text,.admin-loader-inv{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.admin-loader-text{inset:0;color:var(--logo-red)}
.admin-loader-inv{bottom:0;left:0;width:96px;height:96px;color:var(--surface)}
/* Montserrat n'est chargé qu'en 600/700 (cf. index.html) : la maquette dit 800,
   on reste en 700 pour éviter une graisse synthétique baveuse. */
.admin-loader-text b,.admin-loader-inv b{font-family:var(--font-title);font-size:30px;font-weight:700;line-height:1;letter-spacing:-.5px}
.admin-loader-text span,.admin-loader-inv span{font-family:var(--font-title);font-size:11px;font-weight:700;line-height:1;letter-spacing:.5px;margin-top:4px;text-transform:lowercase}
.admin-loader-fill{position:absolute;bottom:0;left:0;width:100%;height:10%;animation:admin-fill 2.6s ease-in-out infinite}
.admin-loader-water{position:absolute;bottom:0;left:0;width:100%;height:100%;background:var(--logo-red)}
.admin-loader-crest{position:absolute;bottom:100%;left:0;width:200%;height:16px;margin-bottom:-1px;color:var(--logo-red);animation:admin-crest 1.2s linear infinite}
.admin-loader-clip{position:absolute;bottom:0;left:0;width:100%;height:100%;overflow:hidden}
.admin-loader-label{font-size:13px;color:var(--muted)}
@keyframes admin-fill{0%{height:8%}52%{height:100%}70%{height:100%}100%{height:8%}}
@keyframes admin-crest{to{transform:translateX(-50%)}}
/* Deux animations infinies : on les coupe pour qui demande moins de mouvement,
   en laissant le disque à mi-remplissage pour que l'état « ça charge » reste lisible. */
@media (prefers-reduced-motion:reduce){
  .admin-loader-fill{animation:none;height:52%}
  .admin-loader-crest{animation:none}
}
.admin-err{color:var(--crimson-text)}
.admin-na{color:var(--disabled)}
.admin-table .u,.admin-etape .u{font-size:.78em;font-weight:600;color:var(--muted)}

/* ── Cartes de stats ── */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.admin-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.admin-stat-label{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.admin-stat-value{font-family:var(--font-title);font-size:30px;font-weight:700;line-height:1;color:var(--text)}
.admin-stat-unit{font-size:13px;font-weight:600;color:var(--muted)}
.admin-stat-sub{font-size:11px;color:var(--muted);margin-top:auto}
.admin-stat-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.admin-gerer{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--crimson-text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 10px;cursor:pointer;white-space:nowrap}
.admin-gerer:hover{border-color:var(--accent)}
.admin-bar{height:8px;border-radius:var(--radius-pill);background:var(--surface2);overflow:hidden;display:block}
.admin-bar.sm{width:74px;height:7px;display:inline-block;vertical-align:middle}
.admin-bar-fill{display:block;height:100%;background:var(--green);border-radius:var(--radius-pill)}

.admin-split{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-top:4px}
.admin-split div{display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:11px;font-weight:700}
.admin-split-a.ink{background:var(--ink);color:var(--surface)}
.admin-split-b.ink{background:var(--tint-blue);color:var(--text-body)}
.admin-split-a.blue{background:var(--blue);color:var(--surface)}
.admin-split-b.blue{background:var(--tint-blue);color:var(--text-body)}
.admin-legend{display:flex;gap:14px;margin-top:auto;flex-wrap:wrap}
.admin-legend span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.admin-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.admin-dot.ink-a{background:var(--ink)}
.admin-dot.ink-b,.admin-dot.blue-b{background:var(--tint-blue)}
.admin-dot.blue-a{background:var(--blue)}

/* ── Barre de filtres ──
   Recherche réduite de moitié et pastilles resserrées (padding + gaps) pour que
   toute la rangée (recherche + 3 groupes de pastilles + switch) tienne sur une
   seule ligne dans les 868px utiles de .content, au lieu de déborder sur 2 lignes. */
.admin-filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.admin-search{flex:1;max-width:140px;min-width:110px;display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border-input);border-radius:var(--radius-sm);padding:9px 10px}
.admin-search-icon{color:var(--disabled);font-size:15px}
.admin-search input{flex:1;border:0;background:transparent;font-family:var(--font-body);font-size:12.5px;color:var(--text);outline:none;min-width:0}
.admin-search input::placeholder{color:var(--disabled)}
.admin-pill-group{display:flex;gap:5px;flex-wrap:wrap}
.admin-pill{font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--muted);border:1px solid var(--border-input);background:var(--surface);padding:7px 10px;border-radius:var(--radius-pill);cursor:pointer}
.admin-pill:hover{border-color:var(--ink)}
.admin-pill.on{font-weight:700;color:var(--surface);background:var(--ink);border-color:var(--ink)}
.admin-pill.rep.on{background:var(--green);border-color:var(--green)}
.admin-pill.cours.on{background:var(--orange);border-color:var(--orange)}
.admin-pill.non.on{background:var(--muted);border-color:var(--muted)}
.admin-vsep{width:1px;height:24px;background:var(--border)}
.admin-check{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--text-body);background:none;border:0;cursor:pointer;white-space:nowrap}
.admin-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-input);background:var(--surface);display:inline-block;position:relative}
.admin-check.on .admin-box{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.admin-check.on .admin-box::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--surface);font-size:10px;font-weight:700}

/* Switch toggle */
.admin-switch{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--text-body);cursor:pointer;white-space:nowrap}
.admin-switch input{display:none}
.admin-switch-slider{width:34px;height:18px;border-radius:20px;background:var(--border-input);position:relative;transition:background .2s}
.admin-switch-slider::before{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:left .2s,transform .2s}
.admin-switch.on .admin-switch-slider{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.admin-switch.on .admin-switch-slider::before{left:18px}
.admin-switch-label{color:var(--text-body)}

/* ── Bandeau « dans la vue » ── */
.admin-summary{display:flex;align-items:center;gap:26px;padding:12px 18px 2px;flex-wrap:wrap}
.admin-sum-item{display:flex;align-items:baseline;gap:8px}
.admin-sum-label{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.admin-sum-val{font-family:var(--font-title);font-size:15px;font-weight:700;color:var(--text)}
.admin-sum-val.an{color:var(--blue)}
.admin-sum-val.r{text-align:right;display:inline-block;min-width:60px}
.admin-sum-unit{font-size:11px;font-weight:600;color:var(--muted)}
.admin-sum-note{font-size:11.5px;color:var(--muted)}
.admin-sum-note b{font-family:var(--font-title);color:var(--text)}
.admin-sum-live{margin-left:auto;font-size:11px;color:var(--disabled)}
/* Le bouton d'export ferme le bandeau : c'est `.admin-sum-live` qui absorbe l'espace
   libre (margin-left:auto), donc pas d'auto ici — deux marges auto se partageraient
   l'espace et décolleraient la mention du bord droit. Voir le bloc ≤900px, où la
   mention est masquée et où le bouton reprend l'alignement. */
.admin-gerer:disabled{opacity:.6;cursor:default}
/* `.btn-spinner` est dessiné en blanc pour les CTA crimson pleins ; sur une pastille
   à fond clair il serait invisible. `currentColor` le repeint dans la couleur du
   bouton sans introduire d'hex dans le bloc admin. */
.admin-gerer .btn-spinner{border-color:currentColor;border-top-color:transparent;opacity:.7}

/* ── Tableau ── */
.admin-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:12px}
/* Budget serré, à refaire en entier avant de toucher une largeur : 868px utiles
   (#app 900 − 2×16 de .content), moins 28 de padding de ligne = 840. Colonnes
   fixes 628 + gouttières 56 = 684 → il reste ~156px au nom du projet, qui est
   la seule colonne élastique. Élargir n'importe quelle colonne fixe le rogne. */
.admin-thead,.admin-row{display:grid;grid-template-columns:124px 1fr 118px 96px 76px 76px 84px 54px;align-items:center;gap:8px}
.admin-thead{padding:12px 14px;background:var(--ink)}
.admin-thead div{font-family:var(--font-title);font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tint-blue)}
.admin-thead .r{text-align:right}
.admin-tbody{max-height:432px;overflow-y:auto}
.admin-row{padding:11px 14px;border-bottom:1px solid var(--divider)}
.admin-row:last-child{border-bottom:0}
.admin-row:hover{background:var(--surface2)}
.admin-coureur{font-family:var(--font-title);font-size:13px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-numero{font-family:var(--font-title);font-size:13px;font-weight:700;color:var(--text);margin-top:3px}
.admin-c-projet{display:flex;align-items:center;gap:8px;min-width:0}
.admin-projet{font-size:12.5px;font-weight:600;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-ref{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
/* Projet dont le n° n'est pas au fichier d'inscription (signalé, pas masqué). */
.admin-hors{font-size:10px;font-weight:600;color:var(--orange);background:rgba(196,138,32,.14);border-radius:var(--radius-pill);padding:3px 8px;white-space:nowrap}
/* Ligne synthétique : un inscrit sans aucun projet. Atténuée — ce n'est pas un projet. */
.admin-row-attendu{background:var(--surface2)}
.admin-row-attendu .admin-numero{color:var(--muted)}
.admin-row-attendu .admin-coureur{font-style:italic;color:var(--disabled)}
.admin-c-cat{font-size:12px;color:var(--muted)}
.admin-c-total,.admin-c-annuel{text-align:right;font-family:var(--font-title);font-size:13px;font-weight:700;color:var(--text)}
.admin-c-annuel{color:var(--blue)}
.admin-c-maj{text-align:right;font-size:11.5px;color:var(--muted)}
.admin-c-voir{text-align:right}
.admin-statut{display:inline-block;font-size:10px;font-weight:600;padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.admin-statut.rep{background:rgba(47,158,107,.12);color:var(--green-text)}
.admin-statut.cours{background:rgba(196,138,32,.16);color:var(--orange)}
.admin-statut.non{background:var(--surface2);color:var(--muted)}
.admin-voir{font-size:12px;font-weight:600;color:var(--crimson-text);background:none;border:0;cursor:pointer;padding:4px}
.admin-voir:hover{text-decoration:underline}

/* ── Modal détail (5c) ── */
/* ── Modale « Gérer la liste des attendus » (écran 6a) ── */
.modal.modal-attendus .modal-content{max-width:496px;width:100%;padding:18px 20px}
.modal.modal-attendus .modal-title{display:none}
.modal.modal-attendus .modal-text{font-size:inherit;line-height:inherit;color:inherit;display:flex;flex-direction:column;gap:11px}
.admin-att-head{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.admin-att-desc{font-size:12px;line-height:1.5;color:var(--muted-2)}
.admin-att-desc b{color:var(--text)}
.admin-att-zone{width:100%;resize:vertical;background:var(--surface2);border:1px solid var(--border-input);border-radius:var(--radius-sm);padding:12px 14px;font-family:var(--font-title);font-size:13px;font-weight:600;line-height:1.7;color:var(--text-body);outline:none}
.admin-att-zone:focus{border-color:var(--ink)}
.admin-att-apercu{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.admin-att-apercu b{font-family:var(--font-title);color:var(--text)}
.admin-att-apercu .ok b{color:var(--green-text)}
.admin-att-apercu .ko{color:var(--crimson-text)}
.admin-att-apercu .ko b{color:var(--crimson-text)}
.admin-att-actions{display:flex;gap:10px;margin-top:2px}
.admin-att-actions .btn-secondary{width:120px;flex:0 0 auto}
.admin-att-actions .btn-primary{flex:1}
.admin-att-note{font-size:11px;line-height:1.5;color:var(--disabled)}

.modal.modal-admin .modal-content{max-width:760px;width:100%;padding:0;max-height:88vh}
.modal.modal-admin .modal-title{display:none}
.modal.modal-admin .modal-text{font-size:inherit;line-height:inherit;color:inherit}
.admin-modal-head{padding:20px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--divider)}
.admin-modal-title{font-family:var(--font-title);font-size:20px;font-weight:700;line-height:1.15;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-modal-sub{font-size:12.5px;color:var(--muted);margin-top:7px}
.admin-close{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:15px;cursor:pointer;flex:0 0 auto}
.admin-close:hover{border-color:var(--ink);color:var(--text)}
.admin-modal-meta{display:flex;align-items:center;gap:22px;padding:13px 24px;background:var(--surface2);border-bottom:1px solid var(--divider);flex-wrap:wrap}
.admin-meta-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.admin-meta-item b{font-family:var(--font-title);color:var(--text)}

.admin-hero{background:var(--ink);border-radius:var(--radius);padding:18px 22px;margin:20px 24px;display:flex;flex-direction:column;gap:14px}
.admin-hero-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.admin-hero-sep{width:1px;height:38px;background:rgba(255,255,255,.14)}
.admin-hero-label{font-family:var(--font-title);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tint-blue)}
.admin-hero-val{font-family:var(--font-title);font-size:26px;font-weight:700;color:var(--surface);margin-top:7px}
.admin-hero-val.an{color:var(--blue-header)}
.admin-hero-unit{font-size:12px;font-weight:600;color:var(--tint-blue)}
.admin-inc{font-size:14px;color:var(--incertitude)}
.admin-hero-moy{font-size:11.5px;line-height:1.5;color:var(--tint-blue)}
.admin-hero-moy b{color:var(--surface)}
.admin-hero-moy b.an{color:var(--blue-header)}
.admin-postes{display:flex;height:26px;border-radius:6px;overflow:hidden}
.admin-poste{display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:11px;font-weight:700;color:var(--surface);min-width:0}
.admin-poste.mini{background:var(--orange)}
.admin-poste.equ{background:var(--blue)}
.admin-poste.mob{background:var(--green)}

.admin-modal-section{font-family:var(--font-title);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:0 24px 10px}
.admin-etape{border:1px solid var(--border);border-radius:var(--radius);margin:0 24px 10px;overflow:hidden}
.admin-etape summary{padding:13px 18px;display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;background:var(--surface)}
.admin-etape summary::-webkit-details-marker{display:none}
.admin-etape[open] summary{background:var(--surface2);border-bottom:1px solid var(--divider)}
.admin-etape-n{font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--disabled)}
.admin-etape-nom{font-size:13px;font-weight:600;color:var(--text)}
.admin-etape-nb{font-size:11px;color:var(--disabled)}
.admin-etape-em{margin-left:auto;font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--text-body);white-space:nowrap}
.admin-qrow{display:grid;grid-template-columns:1fr auto 96px;align-items:baseline;gap:16px;padding:11px 18px;border-bottom:1px solid var(--divider)}
.admin-qrow:last-child{border-bottom:0}
.admin-q{font-size:12.5px;color:var(--muted-2)}
.admin-v{font-size:12.5px;font-weight:700;color:var(--text)}
.admin-e{text-align:right;font-family:var(--font-title);font-size:11.5px;font-weight:700;color:var(--text-body);white-space:nowrap}
.admin-modal-foot{padding:14px 24px;border-top:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}

/* ── Responsive : 7a (suivi) et 7b (détail plein écran) ── */
@media (max-width:900px){
  .admin-stats{grid-template-columns:1fr 1fr}
  /* La rangée de filtres défile horizontalement plutôt que de s'empiler. */
  .admin-filters{flex-wrap:nowrap;overflow-x:auto;gap:8px}
  .admin-search{max-width:140px;min-width:110px}
  .admin-vsep{display:none}
  .admin-summary{gap:14px;padding-bottom:10px}
  .admin-sum-live{display:none}
  /* La mention masquée, c'est au bouton d'absorber l'espace libre pour rester
     collé au bord droit (il peut passer à la ligne : `.admin-summary` wrap). */
  .admin-export{margin-left:auto}
  .admin-table{margin-top:16px}
  /* Le tableau devient une liste de cartes. Les 8 cellules (issues de la grille
     desktop 8 colonnes) sont replacées explicitement en grid-row/grid-column —
     l'ancien placement implicite entrelaçait coureur+total, catégorie+annuel et
     statut+voir sur les mêmes lignes (auto-placement en 2 colonnes) : illisible
     et visuellement tassé. Ici : identité+statut, projet, catégorie, puis un
     pied de carte (bordure du haut, comme .card-foot) qui groupe les 2 métriques
     et enfin date/action — plus de gap et de padding pour respirer en hauteur. */
  .admin-thead{display:none}
  .admin-tbody{max-height:none}
  .admin-row{grid-template-columns:1fr auto;grid-auto-rows:auto;gap:10px 12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}
  .admin-c-coureur{grid-column:1;grid-row:1}
  .admin-c-statut{grid-column:2;grid-row:1}
  .admin-c-projet{grid-column:1/-1;grid-row:2}
  .admin-c-cat{grid-column:1/-1;grid-row:3;text-align:left;font-size:11px}
  .admin-c-total{grid-column:1;grid-row:4;text-align:left;margin-top:4px;padding-top:10px;border-top:1px solid var(--divider)}
  .admin-c-annuel{grid-column:2;grid-row:4;text-align:right;margin-top:4px;padding-top:10px;border-top:1px solid var(--divider)}
  .admin-c-maj{grid-column:1;grid-row:5;text-align:left;font-size:11px}
  .admin-c-voir{grid-column:2;grid-row:5;text-align:right}
  /* 7b : la modale occupe tout l'écran. */
  .modal.modal-admin{padding:0}
  .modal.modal-admin .modal-content{max-width:100%;max-height:100vh;height:100dvh;border-radius:0;border:0}
  .admin-hero,.admin-etape{margin-left:14px;margin-right:14px}
  .admin-modal-head,.admin-modal-meta,.admin-modal-foot{padding-left:14px;padding-right:14px}
  .admin-qrow{gap:8px 16px;padding:13px 18px}
}
@media (max-width:480px){
  .admin-stats{grid-template-columns:1fr}
  .admin-title{font-size:21px}
  .admin-qrow{grid-template-columns:1fr auto;gap:6px 10px}
  .admin-e{grid-column:2}
}