/* Feuille de style Mgib de la démo, chargée par Dash (dossier assets/, aucun CDN).
   Sources : design system « Mgib » (tokens, composants documents) et maquette « Site T-TRIS - landing page »
   (en-tête, boutons, fond pointillé, sections). Police : Graphie (assets/fonts/) ; mono : police système.
   Règles de marque : Mgib s'écrit toujours « Mgib » ; jaune jamais en texte courant sur fond clair ;
   sur jaune / vert / orange, écrire en marine. */

/* ---- Polices ---- */
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Graphie"; src: url("fonts/Graphie-ExtraBold.otf") format("opentype"); font-weight: 800; font-display: swap; }

/* ---- Tokens (design system Mgib, thème Clair) ---- */
:root {
  --marine: #11131f;
  --ardoise: #41424c;
  --vert: #58c696;
  --vert-clair: #79d1ab;
  --vert-fonce: #1e7a57;     /* landing : vert lisible en texte blanc dessus */
  --vert-pale: #e7f6ef;      /* landing : fond de section « méthode » */
  --jaune: #f3af38;
  --jaune-clair: #f5bf60;
  --jaune-fonce: #9a5f00;    /* landing : survol des liens, jaune lisible sur blanc */
  --orange: #e27336;
  --orange-clair: #e88f5e;
  --blanc: #ffffff;
  --creme: #fffdf8;
  --creme-chaud: #fdf2dc;
  --filet: #e4e0d6;
  --gris-texte: #5a5f6b;
  --gris-encart: #f1f1f2;
  --grille: #161823;
  --marine-carte: #1a1d2b;
  --point: #cfd0d5;          /* landing : trame pointillée des fonds clairs */

  --surface: var(--creme);
  --surface-carte: var(--blanc);
  --ink: var(--marine);
  --ink-muted: var(--gris-texte);
  --accent: var(--jaune);
  --hairline: var(--filet);

  --font-sans: "Graphie", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;

  --radius-sm: 6px;
  --radius-bouton: 8px;      /* landing : boutons */
  --radius-card: 16px;
  --radius-pill: 9999px;

  --ombre: 0 14px 40px rgba(17, 19, 31, 0.18);
  --largeur: 1200px;
}

/* Thème Marine : sur une section ou une page entière */
.mg-marine {
  --surface: var(--marine);
  --surface-carte: var(--marine-carte);
  --ink: var(--blanc);
  --ink-muted: #b8b9bf;
  --hairline: var(--ardoise);
  background: var(--surface);
  color: var(--ink);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 22px; }
p { margin: 0 0 var(--space-2); }
a { color: var(--ink); }
a:hover { color: var(--jaune-fonce); }
.mg-marine a:hover { color: var(--jaune); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
code, kbd, pre, .mg-mono { font-family: var(--font-mono); }
img { max-width: 100%; }

/* ---- Mise en page ---- */
.mg-conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--space-3); }
.mg-section { padding: 88px 0; }
.mg-section--pointille {
  background-color: var(--blanc);
  background-image: radial-gradient(var(--point) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}
.mg-marine.mg-section--pointille {
  background-color: var(--marine);
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.2px),
    radial-gradient(circle at 100% 100%, rgba(88, 198, 150, 0.45), rgba(88, 198, 150, 0) 45%);
  background-size: 24px 24px, 100% 100%;
}
.mg-section--grille {
  background-color: var(--marine);
  background-image: linear-gradient(var(--grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 96px 96px;
}
.mg-section--vert { background: var(--vert-pale); }
.mg-section--creme { background: var(--creme-chaud); }
.mg-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.mg-ligne { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---- En-tête et navigation (landing) ---- */
.mg-entete { background: var(--blanc); border-bottom: 1px solid var(--hairline); }
.mg-entete__barre {
  max-width: var(--largeur); margin: 0 auto; padding: var(--space-2) var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between;
}
.mg-entete__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 20px; }
.mg-entete__logo img { height: 32px; display: block; }
.mg-nav { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; font-size: 16px; font-weight: 600; }
.mg-nav a { text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.mg-nav a.active, .mg-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.mg-pied {
  border-top: 1px solid var(--hairline); padding: var(--space-3) 0; color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
}

/* ---- Titres de section (design system) ---- */
.mg-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--space-1);
}
.mg-marine .mg-eyebrow { color: var(--accent); }   /* jaune en texte : seulement sur marine */
.mg-titre { font-size: 36px; line-height: 1.08; font-weight: 800; margin: 0; }
.mg-titre em { font-style: normal; color: var(--jaune); }   /* chute en jaune : titre ≥ 36 px gras */
.mg-chapo { color: var(--ink-muted); font-size: 17px; line-height: 1.55; margin: var(--space-2) 0 0; max-width: 100ch; }
.mg-accroche { font-size: 24px; line-height: 1.35; font-weight: 700; }
.mg-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 var(--space-1);
}

/* ---- Boutons (landing) ---- */
.mg-bouton {
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius-bouton); border: 2px solid var(--marine);
  background: var(--marine); color: var(--jaune);
}
.mg-bouton:hover { color: var(--jaune-clair); box-shadow: var(--ombre); }
.mg-bouton--jaune { background: var(--jaune); border-color: var(--jaune); color: var(--marine); }
.mg-bouton--jaune:hover { background: var(--jaune-clair); color: var(--marine); }
.mg-bouton--contour { background: transparent; color: var(--ink); border-color: var(--ink); }
.mg-bouton--contour:hover { color: var(--ink); }
.mg-bouton--vert { background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--blanc); }
.mg-bouton--vert:hover { color: var(--blanc); }
.mg-bouton--grand { padding: 18px 28px; font-size: 18px; }
.mg-bouton:disabled, .mg-bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---- Cartes et encarts ---- */
.mg-carte {
  background: var(--surface-carte); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: var(--space-3);
}
.mg-carte--accent { border-color: var(--jaune); }
.mg-carte--brique { border-left-width: 6px; }
.mg-carte--vert { border-left-color: var(--vert); }
.mg-carte--jaune { border-left-color: var(--jaune); }
.mg-carte--ardoise { border-left-color: var(--ardoise); }
.mg-carte--ombre { box-shadow: var(--ombre); }
.mg-carte__titre { font-weight: 800; font-size: 17px; margin: 0 0 var(--space-1); }
.mg-encart { background: var(--gris-encart); border-radius: var(--radius-card); padding: var(--space-3); color: var(--marine); }

/* ---- Badges et étiquettes ---- */
.mg-badge {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px;
  border-radius: var(--radius-pill); color: var(--marine); background: var(--gris-encart);
}
.mg-badge--vert { background: var(--vert); }
.mg-badge--jaune { background: var(--jaune); }
.mg-badge--orange { background: var(--orange-clair); }
.mg-badge--ardoise { background: var(--ardoise); color: var(--blanc); }
.mg-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 6px 12px; background: var(--jaune); color: var(--marine);
  border-radius: var(--radius-sm);
}

/* ---- Chiffres clés (valeurs colorées sur marine ; sur fond clair, en ink) ---- */
.mg-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-3); }
.mg-chiffre { border-left: 1px solid var(--hairline); padding-left: var(--space-2); }
.mg-chiffre__valeur { font-size: 32px; line-height: 1.05; font-weight: 800; color: var(--ink); }
.mg-marine .mg-chiffre__valeur { color: var(--jaune); }
.mg-marine .mg-chiffre--vert .mg-chiffre__valeur { color: var(--vert); }
.mg-marine .mg-chiffre--orange .mg-chiffre__valeur { color: var(--orange-clair); }
.mg-chiffre__legende { color: var(--ink-muted); font-size: 13px; margin-top: 6px; }

/* ---- Étapes (flèches jaunes) ---- */
.mg-etapes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; }
.mg-etape {
  background: var(--jaune); color: var(--marine); font-weight: 800; font-size: 13px; padding: 12px 28px 12px 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 10px 50%);
}
.mg-etape:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.mg-etape__num { font-family: var(--font-mono); font-weight: 400; margin-right: 6px; }
@media (max-width: 640px) { .mg-etapes { grid-template-columns: 1fr; } }

/* ---- Bandeau d'appel ---- */
.mg-bandeau {
  background: var(--marine); color: var(--blanc); border-radius: var(--radius-card); padding: 18px var(--space-3);
  text-align: center; font-weight: 800; font-size: 15px;
}
.mg-bandeau--vert { background: var(--vert); color: var(--marine); border-radius: var(--radius-pill); }

/* ---- Formulaires (champs HTML et composants dcc) ---- */
.mg-champ { display: grid; gap: 6px; margin-bottom: var(--space-2); }
.mg-champ > label { font-size: 13px; font-weight: 700; }
/* Dash 4 : dcc.Input = .dash-input-container (le cadre) > input.dash-input-element (sans bordure) ;
   dcc.Dropdown = button.dash-dropdown (le cadre) + .dash-dropdown-content (liste ouverte). Couleurs Dash remplacées. */
:root {
  --Dash-Fill-Interactive-Strong: var(--marine);   /* focus, case cochée (violet par défaut) */
  --Dash-Stroke-Strong: #c9cbd1;
  --champ-hauteur: 48px;
}
body .dash-input-container, body .dash-dropdown,
input:not(.dash-input-element):not([type="checkbox"]):not([type="radio"]), select, textarea {
  height: var(--champ-hauteur); font: inherit; font-size: 16px; color: var(--marine); background: var(--blanc);
  border: 1px solid #c9cbd1; border-radius: var(--radius-bouton); min-width: 0;
}
textarea { height: auto; }
input:not(.dash-input-element):not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 10px 12px; }
body .dash-input-element { height: 100%; padding: 0 14px; font: inherit; font-size: 16px; color: inherit; }
body .dash-dropdown-trigger { padding: 0 12px; min-height: calc(var(--champ-hauteur) - 2px); }
body .dash-input-container:focus-within, body .dash-dropdown:focus, body .dash-dropdown[aria-expanded="true"],
input:not(.dash-input-element):focus, select:focus, textarea:focus {
  border-color: var(--marine); outline: none; box-shadow: 0 0 0 3px rgba(243, 175, 56, 0.45);
}
body .dash-input-container:has(:focus-visible) { outline: none; }
body .dash-dropdown-content {
  width: var(--radix-popover-trigger-width); margin-top: 4px; padding: 6px; border-radius: var(--radius-bouton);
  border: 1px solid #c9cbd1; color: var(--marine); background: var(--blanc); font-family: var(--font-sans);
}
body .dash-dropdown-option { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
body .dash-dropdown-option:hover, body .dash-dropdown-option:focus-within { background: var(--gris-encart); }
body .dash-dropdown-option[aria-selected="true"] { background: var(--creme-chaud); font-weight: 700; }
body .dash-dropdown-placeholder, input::placeholder { color: var(--gris-texte); opacity: 1; }
.mg-depot {   /* zone de dépôt dcc.Upload (className="mg-depot") */
  border: 2px dashed #c9cbd1; border-radius: var(--radius-card); padding: var(--space-4); text-align: center;
  background: var(--blanc); color: var(--ink-muted); cursor: pointer;
}
.mg-depot:hover { border-color: var(--marine); color: var(--marine); }

/* ---- Tableaux (html.Table et dash_table.DataTable) ---- */
.mg-tableau { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface-carte); }
.mg-tableau th {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid var(--accent); padding: 10px 12px;
}
.mg-tableau td { border-bottom: 1px solid var(--hairline); padding: 10px 12px; }
/* En-tête triable (/suivi) : bouton sans fond, flèche selon aria-sort */
.mg-tableau th .tri {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer; white-space: nowrap;
}
.mg-tableau th .tri::after { content: "↕"; margin-left: 6px; opacity: 0.35; }
.mg-tableau th[aria-sort="ascending"] .tri::after { content: "↑"; opacity: 1; }
.mg-tableau th[aria-sort="descending"] .tri::after { content: "↓"; opacity: 1; }
.mg-tableau th .tri:hover, .mg-tableau th .tri:focus-visible { text-decoration: underline; }
.mg-tableau td.nombre, .mg-tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.dash-spreadsheet-container .dash-spreadsheet-inner th { font-family: var(--font-sans) !important; font-weight: 800 !important; background: var(--creme) !important; }
.dash-spreadsheet-container .dash-spreadsheet-inner td { font-family: var(--font-sans) !important; }

/* ---- Messages ---- */
.mg-alerte { border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); border-left: 6px solid var(--ardoise); background: var(--gris-encart); color: var(--marine); }
.mg-alerte--ok { border-left-color: var(--vert); background: var(--vert-pale); }
.mg-alerte--attention { border-left-color: var(--jaune); background: var(--creme-chaud); }
.mg-alerte--erreur { border-left-color: var(--orange); background: #fbe6da; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Page d'accueil (pages/accueil.py) ---- */
.mg-entete.mg-marine { background: var(--marine); }
.mg-entete__logo img { height: 28px; }
.produit { font-weight: 700; font-size: 15px; padding-left: 12px; border-left: 1px solid var(--hairline); color: var(--ink); }
.accueil { display: grid; gap: 48px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.accueil > * { min-width: 0; }
@media (min-width: 900px) { .accueil { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }  /* formulaire plus large */
.carte-claire {   /* carte blanche posée sur marine */
  --surface-carte: var(--blanc); --ink: var(--marine); --ink-muted: var(--gris-texte); --hairline: var(--filet);
  color: var(--marine);
}
.aide { color: var(--ink-muted); margin: 0 0 var(--space-2); }
.form { display: grid; gap: 12px; }
.form .mg-bouton { justify-self: start; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: var(--space-2); }
.plein { grid-column: 1 / -1; }
.mg-champ { margin-bottom: 4px; }
.mg-champ input:not([type="checkbox"]) { width: 100%; }
/* Case d'accord (dcc.Checklist, Dash 4 : label.dash-options-list-option > input.dash-options-list-option-checkbox).
   La case garde sa taille : sans ça, width 100 % des champs l'écrasait à 0 px. */
.case .dash-options-list-option { display: flex; gap: 10px; align-items: flex-start; padding: 0; font-size: 14px;
  color: var(--marine); background: transparent; }
.case input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marine); cursor: pointer; }
.en-erreur .case input[type="checkbox"] { outline: 2px solid var(--orange); outline-offset: 1px; }
.mention { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin: 0; max-width: 70ch; }
.onglets { display: flex; gap: 4px; padding: 4px; background: var(--gris-encart); border-radius: var(--radius-pill); margin-bottom: 20px; }
.onglets button {
  flex: 1; font: inherit; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; padding: 10px 12px;
  border-radius: var(--radius-pill); background: transparent; color: var(--gris-texte);
}
.onglets button.actif { background: var(--marine); color: var(--jaune); }

/* Animation « Optimisation du rangement » (assets/rangement.js) : le script dessine dans un canvas à la taille du cadre */
.bac-fig { margin: 32px 0; max-width: 480px; }
.anim-rangement { position: relative; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; }
.anim-rangement canvas { position: absolute; inset: 0; display: block; }
.bac-fig figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-muted); margin-top: 10px; }

/* Accueil tenant dans la fenêtre (pas de défilement) sur écran large : l'animation prend la hauteur qui reste.
   Écran étroit ou bas : la page reprend un défilement normal plutôt que de couper le formulaire. */
@media (min-width: 900px) and (min-height: 820px) {
  .page-accueil { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .page-accueil > .mg-section { flex: 1; min-height: 0; padding-block: 32px; display: flex; }
  .page-accueil .accueil { width: 100%; align-items: stretch; }
  .page-accueil .accueil > :first-child { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .page-accueil .accueil > .carte-claire { align-self: center; }
  .page-accueil .bac-fig { flex: 1 1 auto; min-height: 120px; max-height: 340px; margin: 24px 0; display: flex; flex-direction: column; }
  .page-accueil .anim-rangement { flex: 1; min-height: 0; aspect-ratio: auto; }
  .page-accueil .carte-claire { --champ-hauteur: 40px; }  /* 6 lignes de champs (département, ville) : tient en 900 px */
}

/* Erreurs de saisie (R1) : message sous le champ, cadre orange */
/* Message sur la ligne du libellé, à droite : afficher les erreurs n'allonge pas le formulaire. */
.mg-champ:has(> label) { grid-template-columns: auto 1fr; grid-template-areas: "libelle erreur" "controle controle"; column-gap: 8px; }
.mg-champ:has(> label) > label { grid-area: libelle; }
.mg-champ:has(> label) > .erreur { grid-area: erreur; justify-self: end; text-align: right; }
.mg-champ:has(> label) > :not(label):not(.erreur) { grid-area: controle; min-width: 0; }
.erreur { margin: 0; font-size: 12px; line-height: 1.6; font-weight: 600; color: #a8461a; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Case d'accord : le texte de la case passe en orange ; message réservé aux lecteurs d'écran. */
.en-erreur .case .dash-options-list-option { color: #a8461a; }
#prospect-consentement-champ .erreur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body .en-erreur .dash-input-container, body .en-erreur .dash-dropdown { border-color: var(--orange); }
.form .mg-alerte { margin: 0; font-size: 14px; }

/* Sélecteur de langue FR | EN (en-tête de l'accueil) */
.mg-langues { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; }
.mg-langues a { text-decoration: none; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--ink-muted); }
.mg-langues a:hover { color: var(--ink); }
.mg-langues a[aria-current="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }

/* Téléphone : indicatif (liste avec recherche) + numéro sur une ligne */
.tel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px; }
body .tel__indicatif .dash-dropdown-trigger { padding: 0 8px; }
body .tel__indicatif + .dash-input-container, .tel .dash-input-container { min-width: 0; }
body .dash-dropdown-content:has(.dash-dropdown-search) { min-width: 160px; }

/* Accueil : chiffres clés sur une ligne dans la colonne de gauche (plus étroite que le formulaire) */
.page-accueil .mg-chiffres { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 20px; }
.page-accueil .mg-chiffre__valeur { font-size: clamp(20px, 1.9vw, 28px); white-space: nowrap; }

/* En-tête : actions à droite (langue, déconnexion) */
.mg-entete__actions { display: flex; gap: var(--space-2); align-items: center; }
.mg-bouton--petit { padding: 8px 14px; font-size: 14px; }

/* Pages connectées (core/ui.py::page_connectee) : fond crème, contenu en cartes */
.page-connectee { min-height: 100vh; background: var(--creme); }
.page-connectee > .mg-section { padding-block: 48px; }
.formulaire-etroit { max-width: 560px; margin: 0 auto; display: grid; gap: var(--space-2); }
.suivi-chiffres { margin: var(--space-4) 0; }
.suivi-bloc { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.suivi-bloc h2 { font-size: 22px; }
.suivi-bloc__tete { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }
.tableau-defilant { overflow-x: auto; }
.tableau-defilant .mg-tableau { min-width: 760px; }
.tableau-defilant .mg-tableau td { white-space: nowrap; }  /* e-mails, dates : pas de coupure, le tableau défile */
.acces-restant { margin-top: var(--space-3); color: var(--ink-muted); }
.carte-claire > .mg-alerte { margin: 0 0 var(--space-2); font-size: 14px; }

/* Démo terminée (pages/demo_terminee.py, R4) */
.terminee { max-width: 760px; display: grid; gap: var(--space-3); align-content: center; }  /* sans étirement en hauteur */
.terminee__contact { display: grid; gap: var(--space-1); }
.terminee__coordonnees { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.terminee__retour { color: var(--ink-muted); font-size: 14px; }

/* ---- Espace démo (pages/demo.py) : parcours en 3 étapes, étape 1 « parc d'équipement » (proposition C) ---- */
.mg-entete__info { color: #b8b9bf; font-size: 13px; }
.mg-entete__info b { color: var(--vert); }
.mg-entete__info b.alerte { color: var(--jaune); }
.progres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--space-4); font-weight: 700;
  font-size: 14px; color: var(--ink-muted); }
.progres .actif { color: var(--marine); }
.progres__barre { grid-column: 1 / -1; height: 6px; background: var(--gris-encart); border-radius: var(--radius-pill); }
.progres__barre i { display: block; height: 100%; background: var(--jaune); border-radius: var(--radius-pill); }
.parc { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 900px) { .parc { grid-template-columns: 1fr; } }
.parc__choix { display: grid; gap: var(--space-3); min-width: 0; }
.parc__choix .mg-chapo { margin-top: 0; }
.parc__sous-titre { font-size: 20px; }
.familles { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.familles__libelle { color: var(--ink-muted); }
/* Pilules (profondeur des travées) : bouton radio caché, la pilule est le choix ; nombre de travées déclarées. */
.pilules.dash-options-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pilules .dash-options-list-option { padding: 8px 18px; border: 1.5px solid var(--marine); border-radius: var(--radius-pill);
  font-weight: 700; color: var(--marine); background: transparent; cursor: pointer; margin: 0; }
.pilules .dash-options-list-option:has(input:checked) { background: var(--marine); color: var(--jaune); }
.pilules .dash-options-list-option:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 2px; }
.pilules input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pilules .dash-options-list-option-wrapper { width: 0; overflow: hidden; }
.pilule__nombre { margin-left: 6px; font-size: 12px; color: var(--jaune-fonce); }
.pilules .dash-options-list-option:has(input:checked) .pilule__nombre { color: var(--jaune); }
.grille-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.modele { background: var(--blanc); border: 1.5px solid var(--filet); border-radius: var(--radius-card); padding: var(--space-2);
  display: grid; gap: 6px; align-content: start; }
.modele.choisi { border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(243, 175, 56, 0.25); }
.modele .sous { display: block; font-size: 12px; color: var(--ink-muted); }
.modele__schema { height: 120px; display: grid; place-items: end center; background: var(--creme); border-radius: 10px; padding: 10px; }
.travee-dessin { width: calc(var(--front) * 34px + 16px); height: 100px; border-left: 4px solid var(--ardoise);
  border-right: 4px solid var(--ardoise); display: grid; grid-template-columns: repeat(var(--front), 1fr); gap: 4px;
  padding: 0 4px; align-content: space-evenly;
  background: repeating-linear-gradient(to bottom, transparent 0 30px, var(--ardoise) 30px 33px); }
.travee-dessin i { display: block; height: 24px; background: var(--jaune); border-radius: 3px; }
.bac-dessin { height: 80px; margin: 10px auto 6px; border: 3px solid var(--marine); border-top-width: 6px;
  border-radius: 4px 4px 8px 8px; background: var(--vert-pale); }
/* À l'échelle des cotes extérieures (longueur 0,197 px/mm, hauteur 0,38 px/mm), bas alignés à 94 px. */
.bac-dessin--petit-bac { width: 79px; height: 81px; margin-top: 13px; }
.bac-dessin--grand-bac { width: 118px; height: 84px; }
/* Cartobac couché, vu de côté à l'échelle des bacs (300 mm de long -> 59 px, 150 mm de haut -> 57 px), posé au même
   niveau qu'eux (37 + 57 = 94 px) ; le haut descend en biais vers l'avant (ouverture frontale à bec). Contour : fond marine découpé. */
.bac-dessin--cartobac { position: relative; width: 59px; height: 57px; margin-top: 37px; border: 0; box-sizing: border-box;
  background: var(--marine); border-radius: 0 0 8px 8px; clip-path: polygon(0 0, 55% 0, 100% 45%, 100% 100%, 0 100%); }
.bac-dessin--cartobac::before { content: ""; position: absolute; inset: 6px 3px 3px; background: var(--creme-chaud);
  border-radius: 0 0 6px 6px; clip-path: polygon(0 0, 52% 0, 100% 47%, 100% 100%, 0 100%); }
.compteur { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 4px; margin-top: 6px;
  border: 1px solid var(--filet); border-radius: var(--radius-pill); padding: 4px; }
.compteur__bouton { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--gris-encart); font: inherit;
  font-size: 18px; font-weight: 800; color: var(--marine); cursor: pointer; }
.compteur__bouton:hover { background: var(--creme-chaud); }
body .compteur .dash-input-container { height: 34px; border: 0; box-shadow: none; background: transparent; }
body .compteur .dash-input-element { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 4px;
  -moz-appearance: textfield; }
body .compteur .dash-input-element::-webkit-inner-spin-button, body .compteur .dash-input-element::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0; }
body .compteur .dash-input-stepper { display: none; }
.panier-carte { position: sticky; top: 16px; display: grid; gap: var(--space-2); }
.panier-carte .mg-label { color: var(--jaune); margin: 0; }
.panier { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.panier li { padding-bottom: 8px; border-bottom: 1px solid var(--ardoise); }
/* Intertitre « Profondeur 700 mm » / « Bacs » : petit, gris clair, sans filet ; écarté du groupe précédent. */
.panier li.panier__groupe { padding-bottom: 0; border-bottom: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-muted); }  /* pas de majuscules : « mm » reste en minuscules */
.panier li.panier__groupe:not(:first-child) { margin-top: 8px; }
.panier__vide { color: #b8b9bf; font-size: 14px; margin: 0; }
.panier__note { color: #b8b9bf; font-size: 12px; margin: 0; }
.panier__note:empty { display: none; }
.panier-carte .mg-chiffre__valeur { font-size: 26px; white-space: nowrap; }
.plein { width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compteur__champ { position: relative; min-width: 0; }
.panier-carte .mg-chiffres { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* Dash 4 : champ invisible du menu déroulant, en position absolue sans largeur ; il élargissait la page sur mobile. */
body .dash-dropdown-wrapper { position: relative; }
body .dash-dropdown-focus-target { inset: 0; width: 100%; max-width: 100%; }
@media (max-width: 640px) { .mg-entete__info { flex-basis: 100%; order: -1; } }
.panier__limite { color: #b8b9bf; font-size: 13px; margin: 0; }
.panier__limite.atteinte { color: var(--jaune); font-weight: 700; }
.compteur__bouton:disabled { opacity: 0.35; cursor: not-allowed; background: var(--gris-encart); }

/* Page de suivi (superadmin-mgib) : tableaux sur presque toute la largeur de l'écran */
.mg-conteneur--large { max-width: 1840px; }
.tableau-defilant .suivi-panneau .mg-tableau, .suivi-panneau .tableau-defilant .mg-tableau { min-width: 1100px; }  /* tableaux de /suivi */
.page-connectee:has(.mg-conteneur--large) .mg-entete__barre { max-width: 1840px; }  /* en-tête aligné sur le contenu */

/* Page de suivi : onglets prospects / sessions, recherche */
.suivi-bloc .onglets--gauche { display: inline-flex; align-self: start; justify-self: start; margin-bottom: 0; }
.suivi-bloc .onglets--gauche button { flex: 0 0 auto; padding: 10px 22px; }
.suivi-panneau { display: grid; gap: var(--space-2); }
.suivi-panneau .suivi-bloc__tete { justify-content: flex-start; }
.recherche { flex: 1 1 360px; max-width: 520px; min-width: 0; }
body .recherche .dash-input-container { width: 100%; }
body .recherche .dash-input-element { padding-left: 40px; background: no-repeat 14px 50% / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5f6b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.suivi-compte { margin: 0; white-space: nowrap; }
/* Nom du prospect et badge « Accès expiré » (pages/suivi.py::nom_prospect) */
.suivi-nom { display: inline-flex; align-items: center; gap: 8px; }
.suivi-nom__expire { font-size: 11px; }
/* Avancement du prospect (pages/suivi.py::frise) : 5 points reliés, verts jusqu'à l'étape atteinte, puis son libellé */
.avancement { display: inline-flex; align-items: center; gap: 8px; }
.avancement__frise { display: inline-flex; align-items: center; }
.avancement__point { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--point); background: var(--blanc);
  box-sizing: border-box; }
.avancement__trait { width: 14px; height: 2px; background: var(--point); }
.avancement__point.fait { background: var(--vert); border-color: var(--vert); }
.avancement__trait.fait { background: var(--vert); }
.avancement__libelle { font-size: 13px; color: var(--ink-muted); }
/* Fiche du prospect : œil en tête de ligne, popin à onglets (pages/suivi.py::popin_fiche) */
.suivi-oeil { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1.5px solid var(--filet); background: var(--blanc); color: var(--marine); cursor: pointer; }
.suivi-oeil:hover, .suivi-oeil:focus-visible { background: var(--marine); border-color: var(--marine); color: var(--jaune); }
.suivi-oeil__icone { width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--oeil) center / contain no-repeat; mask: var(--oeil) center / contain no-repeat;
  --oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.popin__boite.fiche { width: min(920px, 100%); padding: var(--space-3); align-content: start; }
.fiche .mg-titre { font-size: 28px; margin: 0; padding-right: 48px; }
.fiche .aide { margin: 0; }
.popin__boite.fiche > * { min-width: 0; }  /* le tableau des références défile dans la popin, sans l'élargir */
.fiche .onglets--gauche { display: inline-flex; flex-wrap: wrap; justify-self: start; max-width: 100%; margin-bottom: 0;
  border-radius: 20px; }
.fiche .onglets--gauche button { flex: 0 0 auto; padding: 8px 18px; }
@media (max-width: 640px) { .popin__boite.fiche { padding: var(--space-2); }
  .fiche .onglets--gauche button { padding: 8px 12px; font-size: 13px; } }
.fiche__panneau { display: grid; gap: var(--space-2); min-width: 0; }
.fiche__panneau[hidden] { display: none; }
.fiche__panneau > *, .fiche__refs { min-width: 0; }
.fiche__refs { display: grid; gap: var(--space-2); }
.fiche__parc { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .fiche__parc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.fiche__liste li { border-bottom-color: var(--filet); }
.fiche__liste li.panier__groupe { color: var(--gris-texte); }
.fiche__tableau { max-height: 52vh; overflow: auto; border: 1px solid var(--filet); border-radius: 10px; }
.fiche__tableau .mg-tableau { min-width: 640px; }
.fiche__tableau .mg-tableau th { position: sticky; top: 0; background: var(--surface-carte); }
.fiche__calcul { display: grid; gap: var(--space-2); }
.suivi-panneau .suivi-bloc__tete .mg-bouton { margin-left: auto; }
.suivi-panneau[hidden] { display: none; }  /* display: grid l'emportait sur l'attribut hidden */
.suivi-bloc > *, .suivi-panneau > * { min-width: 0; }  /* le tableau défile dans sa carte au lieu d'élargir la page */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: flex-end; }
.pagination[hidden] { display: none; }
.pagination__page { color: var(--ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.pagination .mg-bouton:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Étape 2 : import des références (pages/demo.py, R12) */
.refs { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 1000px) { .refs { grid-template-columns: 1fr; } }
.refs > * { min-width: 0; }
.refs__import { display: grid; gap: var(--space-3); }
.refs__import .mg-chapo { margin-top: 0; }
.refs__colonnes { display: grid; gap: var(--space-1); }
.refs__colonnes .mg-label, .refs__colonnes .aide { margin: 0; }
.refs__colonnes .mg-bouton { justify-self: start; }
.refs__puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.refs__puces li { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--blanc); border: 1px solid var(--filet); }
.refs__depot { display: grid; place-items: center; min-height: 180px; padding: var(--space-3); }
.refs__depot b { display: block; color: var(--marine); font-size: 16px; }
.refs__icone { width: 44px; height: 52px; margin: 0 auto var(--space-1); border: 3px solid var(--marine); border-radius: 4px;
  clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%);
  background: linear-gradient(var(--jaune), var(--jaune)) 50% 62% / 22px 4px no-repeat,
              linear-gradient(var(--jaune), var(--jaune)) 50% 78% / 22px 4px no-repeat, var(--blanc); }
.refs__depot:hover .refs__icone { background-color: var(--creme-chaud); }
.refs__erreurs p { margin: 0 0 var(--space-1); font-weight: 700; }
.refs__erreurs ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px; }
.refs__apercu { display: grid; gap: var(--space-2); }
.refs__apercu .mg-chiffres { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.refs__apercu .mg-chiffre__valeur { font-size: 26px; white-space: nowrap; }
.refs-tableau { max-height: 460px; overflow: auto; }
.refs-tableau .mg-tableau { min-width: 560px; }
.refs-tableau th { position: sticky; top: 0; background: var(--surface-carte); }
.refs .pied-etape { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-2);
  flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--filet); }
.refs__apercu > *, .refs__import > * { min-width: 0; }  /* le contenu ne force plus la largeur de la page */
@media (max-width: 640px) { .refs__apercu .mg-chiffres { grid-template-columns: 1fr 1fr; }
  .refs__apercu .mg-chiffre__valeur { font-size: 22px; } }
/* Espace démo (1 600 px) : panneau du parc un peu plus large. */
.mg-conteneur--demo { max-width: 1600px; }
.page-connectee:has(.mg-conteneur--demo) .mg-entete__barre { max-width: 1600px; }  /* en-tête aligné sur le contenu */
@media (min-width: 901px) { .mg-conteneur--demo .parc { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Popin du parcours (pages/demo.py::presentation) */
/* « Comment ça marche ? » : pilule jaune à droite des étapes (proposition A, https://claude.ai/artifact/KgaMswmiZB36TbN9kbAyr9) */
.progres { grid-template-columns: repeat(3, 1fr) auto; align-items: center; }
.progres__barre { grid-column: 1 / -1; }
.progres__aide { display: inline-flex; gap: 8px; align-items: center; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--marine); background: var(--creme-chaud); border: 1.5px solid var(--jaune); border-radius: var(--radius-pill);
  padding: 6px 14px 6px 6px; cursor: pointer; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s; }
.progres__aide:hover { background: var(--jaune-clair); box-shadow: 0 6px 18px rgba(243, 175, 56, 0.35); }
.progres__aide-icone { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--jaune); color: var(--marine); font-weight: 800; font-size: 14px; }
.progres__aide:hover .progres__aide-icone { background: var(--marine); color: var(--jaune); }
.popin { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.popin[hidden] { display: none; }
.popin__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.popin__case { font-size: 14px; color: var(--ink-muted); }
.popin__case .dash-options-list-option { cursor: pointer; }
.popin__fond { position: absolute; inset: 0; background: rgba(17, 19, 31, 0.72); cursor: pointer; }
.popin__boite { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--creme); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); animation: popin-entree 0.22s ease-out; }
@keyframes popin-entree { from { opacity: 0; transform: translateY(12px); } }
.popin__boite .mg-titre { font-size: 30px; }
.popin__boite .mg-chapo { margin: 0; }
.popin__croix { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--gris-encart); font-size: 24px; line-height: 1; color: var(--marine); cursor: pointer; }
.popin__croix:hover { background: var(--creme-chaud); }
.popin__etapes { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.popin__etapes li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); align-items: start;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--radius-card); padding: var(--space-2); }
.popin__etapes p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.popin__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--jaune); color: var(--marine); }
.popin__note { margin: 0; font-size: 14px; color: var(--ink-muted); }
.popin__boite > .mg-bouton { justify-self: start; }
@media (max-width: 640px) { .popin__boite { padding: var(--space-3); }
  .progres { grid-template-columns: repeat(3, 1fr); } .progres__aide { grid-column: 1 / -1; justify-self: end; order: -1; } }
.refs__coupe p { margin: 0; }
.refs__coupe p + p { margin-top: 4px; font-size: 13px; }

/* ---- Étape 3 : calcul et résultat (R13, pages/demo.py ; maquette A) ---- */
.calcul-attente { width: max-content; max-width: 100%; margin: var(--space-4) auto 0; display: grid; gap: var(--space-2);
  text-align: center; }  /* centrée, chaque phrase sur une ligne tant que l'écran le permet */
.calcul-attente .mg-titre, .calcul-attente .mg-alerte { margin: 0; }
.calcul-attente__barre { height: 10px; background: var(--gris-encart); border-radius: var(--radius-pill); overflow: hidden; }
.calcul-attente__barre i { display: block; height: 100%; background: var(--jaune); border-radius: var(--radius-pill);
  transition: width 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .calcul-attente__barre i { transition: none; } }
.resultat { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .resultat { grid-template-columns: minmax(0, 1fr) 380px; } }
.resultat__principal { min-width: 0; }
.resultat .mg-titre em { font-style: normal; color: var(--jaune-fonce); }
/* Six chiffres au plus : deux rangées de trois (deux colonnes sur téléphone), jamais un chiffre seul sur sa ligne. */
.resultat__chiffres { margin-top: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-3); }
@media (max-width: 640px) { .resultat__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .resultat__chiffres .mg-chiffre__valeur { font-size: 26px; } }  /* « 116 / 200 » tient dans sa colonne */
.resultat__chiffres .mg-chiffre__valeur { white-space: nowrap; }
.resultat__facade-titre { margin: var(--space-4) 0 var(--space-1); }
/* Même hauteur pour toutes les travées, largeur proportionnelle (Simple 1250 plus large qu'une Simple 1000). */
.facade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.baie { margin: 0; text-align: center; min-width: 0; }
.baie svg { display: block; height: 150px; width: auto; }
.baie figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.facade .m { fill: var(--ardoise); }
.facade .t { fill: #9a9ba3; }
.facade .b { fill: var(--vert); }
.facade .c { fill: var(--vert-fonce); }
.facade .d { fill: var(--jaune); }
.facade .l { fill: none; stroke: #b7b4ab; stroke-width: 16; stroke-dasharray: 60 40; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: var(--space-2) 0 0; font-size: 13px; color: var(--ink-muted); }
.legende > span { display: inline-flex; align-items: center; gap: 8px; }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pastille--b { background: var(--vert); }
.pastille--c { background: var(--vert-fonce); }
.pastille--d { background: var(--jaune); }
.pastille--l { border: 1.5px dashed #b7b4ab; }
.resultat__note { margin: var(--space-2) 0 0; font-size: 14px; color: var(--gris-texte); }
.reglages { align-self: start; }
.reglages .mg-label { color: var(--jaune); margin: 0; }
.reglages ul { margin: var(--space-2) 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.reglages b { color: var(--blanc); }
.reglages__pied { font-size: 13px; color: var(--ink-muted); margin: var(--space-2) 0 0; padding-top: 12px;
  border-top: 1px solid var(--hairline); }
.appel { grid-column: 1 / -1; display: grid; gap: var(--space-3); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .appel { grid-template-columns: minmax(0, 1fr) auto; } }
.appel__boutons { display: grid; gap: var(--space-1); }  /* Contacter Mgib, puis la plaquette PDF */
.appel__boutons .mg-bouton { text-align: center; }
.appel .mg-label { color: var(--jaune); margin: 0; }
.appel__titre { font-size: 24px; margin: 6px 0 12px; }
.appel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 24px; font-size: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 820px; }
/* Cadenas : réservé à T-TRIS (icône SVG en masque, couleur du thème). */
.appel__liste li { display: flex; align-items: center; gap: 10px; }
.appel__liste li::before { content: ""; flex: 0 0 14px; height: 16px; background: var(--jaune);
  -webkit-mask: var(--cadenas) center / contain no-repeat; mask: var(--cadenas) center / contain no-repeat; }
.appel { --cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V4.5a4 4 0 0 1 8 0V7h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V4.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E"); }
/* Frise : étape accessible = lien pour y revenir (pages/demo.py::progression). */
.progres__lien { color: inherit; text-decoration: none; justify-self: start; }
.progres__lien:hover, .progres__lien:focus-visible { color: var(--marine); text-decoration: underline;
  text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Étape 1 : types de bacs choisis par une case, sans nombre (pages/demo.py::cartes_contenants). */
/* Encart de diagnostic (DEBUG_BIN_PACKING=true, pages/demo.py::encart_diagnostic) : pointillé orange = hors démo */
.debug { grid-column: 1 / -1; margin-top: var(--space-4); border: 2px dashed var(--orange); border-radius: var(--radius-card);
  background: var(--blanc); padding: var(--space-2); display: grid; gap: var(--space-2); min-width: 0; }
.debug__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); }
.debug__tete h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.debug__badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--blanc);
  background: var(--orange); border-radius: 6px; padding: 2px 8px; }
.debug__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.debug__meta { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--gris-texte); display: flex; flex-wrap: wrap;
  gap: 4px 16px; overflow-wrap: anywhere; }
.debug__meta b { color: var(--marine); }
.debug__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.debug__kpis div { background: var(--gris-encart); border-radius: 8px; padding: 8px 10px; font-family: var(--font-mono);
  font-size: 12px; color: var(--gris-texte); overflow-wrap: anywhere; }
.debug__kpis b { display: block; font-family: var(--font-sans); font-size: 16px; color: var(--marine); }
.debug__onglets { flex-wrap: wrap; max-width: 100%; border-radius: 20px; }
.debug__panneau { display: grid; gap: var(--space-1); min-width: 0; }
.debug__panneau[hidden] { display: none; }
.debug__panneau > .tableau-defilant { max-height: 360px; overflow: auto; border: 1px solid var(--filet); border-radius: 10px; }
.debug__panneau .mg-tableau th { position: sticky; top: 0; background: var(--surface-carte); }
.debug__tableau { font-size: 12px; }
.debug__tableau td, .debug__tableau th { padding: 6px 8px; }
.debug__raison { font-family: var(--font-mono); font-size: 11px; color: var(--marine); background: var(--creme-chaud);
  border-radius: 4px; padding: 1px 6px; }
/* Tableau des emplacements (dash_table, filtres natifs) : hauteur limitée, en-têtes et filtres aux couleurs Mgib */
.debug__emplacements { display: grid; gap: var(--space-1); min-width: 0; }
.debug__emplacements-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); }
.debug__emplacements-tete .aide { margin: 0; flex: 1 1 420px; }
.debug__emplacements .dash-table-container { max-height: 420px; overflow: auto; border: 1px solid var(--filet); border-radius: 10px; }
.debug__emplacements .dash-spreadsheet-inner th, .debug__emplacements .dash-spreadsheet-inner td { font-size: 12px !important;
  padding: 4px 8px !important; border-color: var(--filet) !important; }
.debug__emplacements .dash-spreadsheet-inner th.dash-filter input { font-size: 12px !important; background: var(--blanc);
  text-align: left !important; }
.debug__emplacements .dash-filter--case { display: none !important; }  /* casse : fixée par colonne (pages/demo.py) */
.debug__emplacements .dash-spreadsheet-inner th.dash-filter input { border: 1px solid #c9cbd1 !important; border-radius: 6px;
  padding: 2px 6px !important; height: 24px; }
/* Colonnes texte à gauche (dash_table aligne tout à droite) */
.debug__emplacements :is(td, th)[data-dash-column="ref"], .debug__emplacements :is(td, th)[data-dash-column="gabarit"],
.debug__emplacements :is(td, th)[data-dash-column="contenant"] { text-align: left !important; }
.debug__emplacements .dash-spreadsheet-inner tr:first-child th { position: sticky; top: 0; z-index: 2; }
.debug__contenant { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--vert-fonce); }
.debug__travee { border: 1px solid var(--filet); border-radius: 10px; padding: 8px 12px; background: var(--creme); }
.debug__travee summary { font-weight: 700; font-size: 13px; cursor: pointer; }
.debug__niveaux { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.debug__niveau { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 4px 0;
  border-top: 1px solid var(--filet); }
.debug__niveau-nom { font-family: var(--font-mono); color: var(--gris-texte); }
.debug__elements { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; overflow-wrap: anywhere; }
.debug__json { margin: 0; max-height: 360px; overflow: auto; background: var(--marine); color: var(--point);
  border-radius: 10px; padding: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  white-space: pre; }
/* « Essayer avec un exemple » (étape 1) et bandeau « Exemple » du résultat (pages/demo.py) */
.exemple { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); }
.exemple[hidden] { display: none; }
.exemple__texte { margin: 0; display: grid; gap: 2px; font-size: 14px; color: var(--ink-muted); }
.exemple__texte b { font-size: 17px; color: var(--ink); }
.exemple-avis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  border: 1.5px solid var(--jaune); background: var(--creme-chaud); border-radius: 12px; padding: 12px var(--space-2);
  margin-bottom: var(--space-3); font-size: 14px; }
.exemple-avis p { margin: 0; }
.exemple-avis__badge { margin-right: 8px; background: var(--marine); color: var(--jaune); }
.exemple-avis__lien { font-weight: 700; color: var(--marine); text-decoration: underline; text-decoration-color: var(--jaune);
  text-underline-offset: 4px; }
.parc__aide-bacs { margin: -4px 0 var(--space-2); }
/* Cartes de bacs : « Je l'utilise » en bas de chaque carte, aligné d'une carte à l'autre (lignes de cotes en nombre variable). */
.modele:has(.modele__case) { display: flex; flex-direction: column; }
.modele__case { margin-top: auto; padding-top: 4px; }
.modele__case .dash-options-list-option { font-weight: 700; cursor: pointer; }