/* systeme.css — le système de design de Boucle. Le texte qui l'explique est docs/design-system.md.
   Règles dures (vérifiées par tests/unit/design-system.test.js) :
   - cinq tailles de texte, pas une de plus ;
   - trois familles de couleur ayant un sens écrit (entrée, sortie, action) + des neutres ;
   - ni dégradé, ni ombre portée ;
   - un chiffre ou une forme estimé(e) porte TOUJOURS la hachure (.est / .hachure). */

@font-face { font-family: "Figtree"; font-weight: 300 900; font-style: normal; font-display: swap;
  src: url("/polices/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-style: normal; font-display: swap;
  src: url("/polices/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============ 1. JETONS ============ */
:root {
  /* Texte : cinq tailles, deux graisses (400 et 600). */
  --t-1: 13px;   /* étiquette, légende, note */
  --t-2: 16px;   /* texte courant, cellule de tableau, bouton */
  --t-3: 20px;   /* valeur d'une tuile, titre de section, phrase du jour */
  --t-4: 28px;   /* titre d'écran */
  --t-5: 64px;   /* LE chiffre qui domine l'écran (un seul par écran) */
  --police: "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Espacement : une seule échelle. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Rayons : trois, pas un de plus. */
  --r-1: 4px;      /* barres, pastilles, hachure */
  --r-2: 8px;      /* cartes, boutons, champs */
  --r-pleine: 999px; /* jauges uniquement */

  --trait: 1px;

  /* Neutres — jour. */
  --fond: #FBF8F3;       /* papier */
  --panneau: #F2EDE4;    /* une marche au-dessus du fond : tuile, carte */
  --filet: #E2DACB;      /* traits fins, séparateurs */
  --encre: #1D1B17;      /* texte principal */
  --encre-2: #5A554B;    /* texte secondaire */
  --encre-3: #6E685C;    /* légende, étiquette */

  /* Les trois familles de couleur. Une couleur qui n'a pas de sens écrit ici n'existe pas. */
  --entree: #007F66;     /* L'ARGENT QUI ENTRE ou que l'on garde : ventes, bénéfice positif, objectif atteint */
  --sortie: #7B3E8E;     /* L'ARGENT QUI SORT : marchandise, douane, publicité, frais. Calme, jamais alarmant */
  --action: #C4511A;     /* CE QUI DEMANDE UNE ACTION : alerte, décision à prendre, jour à perte */
  --action-fond: #FBE9DE;/* fond d'une carte d'alerte (jamais utilisé pour autre chose) */
  --marque: var(--encre-2); /* couleur de la hachure quand l'objet n'a pas de famille */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #17181B; --panneau: #212328; --filet: #34373D;
    --encre: #F1EEE8; --encre-2: #B5B0A5; --encre-3: #8F8A7F;
    --entree: #2AA487; --sortie: #A468BC; --action: #DF6528; --action-fond: #2C1E16;
  }
}

/* ============ 2. BASE ============ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--fond); color: var(--encre);
  font: 400 var(--t-2)/1.45 var(--police);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
b, strong, th { font-weight: 600; }

/* Tous les montants : chasse fixe, pour que les colonnes s'alignent et que rien ne saute quand ça change. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }

.t-1 { font-size: var(--t-1); line-height: 1.35; }
.t-3 { font-size: var(--t-3); line-height: 1.3; }
.t-4 { font-size: var(--t-4); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.discret { color: var(--encre-2); }
.faible { color: var(--encre-3); }
.inconnu { color: var(--encre-3); font-style: italic; }
.etiquette { font-size: var(--t-1); line-height: 1.35; color: var(--encre-3); }

/* États communs : un seul anneau de focus, partout. */
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: var(--r-1); }
button { font: inherit; color: inherit; }
button:disabled, [aria-disabled="true"] { opacity: .45; cursor: default; }

/* ============ 3. L'INCERTITUDE : LA HACHURE ============
   Un chiffre ou une forme ESTIMÉ(E) n'a jamais l'air d'un chiffre certain.
   - une forme estimée = remplie de hachure à 45° au lieu d'être pleine ;
   - un chiffre estimé = précédé de « ~ » et souligné d'une bande de la même hachure.
   Même motif, même angle, du grand chiffre jusqu'à la cellule d'un tableau. */
.hachure, .est::after {
  -webkit-mask: url("/hachure.svg") repeat 0 0 / 6px 6px; mask: url("/hachure.svg") repeat 0 0 / 6px 6px;
}
.hachure { background: var(--marque); }
.est { position: relative; display: inline-block; padding-bottom: .2em; }
.est::before { content: "~"; margin-right: .08em; }
.est::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(.12em, 3px);
  background: currentColor; }

/* La clé de lecture, à mettre sous tout écran qui montre des chiffres. */
.cle { display: inline-flex; gap: var(--s-4); align-items: center; font-size: var(--t-1); color: var(--encre-3); }
.cle > span { display: inline-flex; gap: var(--s-2); align-items: center; }
.cle i { width: 16px; height: 10px; border-radius: var(--r-1); display: inline-block; }
.cle i.plein { background: var(--marque); }
.cle i.hachure { background: var(--marque); }

/* ============ 4. COMPOSANTS ============ */

/* ---- 4.1 Tuile de chiffre ---- */
.tuile { display: grid; gap: var(--s-1); }
.tuile .etiquette { display: flex; align-items: center; gap: var(--s-2); }
.tuile .marque { width: 8px; height: 8px; border-radius: var(--r-1); background: var(--marque); flex: none; }
.tuile.entree { --marque: var(--entree); }
.tuile.sortie { --marque: var(--sortie); }
.tuile.action { --marque: var(--action); }
.tuile .valeur { font-size: var(--t-3); font-weight: 600; line-height: 1.2; }
.tuile .delta { font-size: var(--t-1); color: var(--encre-2); }
/* La dominante : une par écran, et rien d'autre ne s'approche de sa taille. */
.tuile.dominante { gap: var(--s-2); }
.tuile.dominante .valeur { font-size: var(--t-5); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--marque); }
.tuile.dominante .etiquette { font-size: var(--t-2); color: var(--encre-2); }
.tuile.dominante .delta { font-size: var(--t-2); }
.tuile.dominante .valeur.est { padding-bottom: .12em; }

/* Une jauge : la part réelle est pleine, la part estimée est hachurée. */
.jauge { display: flex; gap: 2px; height: 8px; }
.jauge > i { display: block; height: 100%; min-width: 0; }
.jauge > .reel { background: var(--marque); border-radius: var(--r-pleine) 0 0 var(--r-pleine); }
.jauge > .estime { background: var(--marque); border-radius: 0 var(--r-pleine) var(--r-pleine) 0; }
.jauge > i:only-child { border-radius: var(--r-pleine); }

/* Piste de progression (objectif) : la part atteinte est pleine, ou hachurée si elle repose sur des estimations. */
.piste { height: 8px; border-radius: var(--r-pleine); background: var(--filet); overflow: hidden; }
.piste > i { display: block; height: 100%; background: var(--marque); border-radius: var(--r-pleine); }

/* ---- 4.2 Graphique en barres ---- */
.graphique { display: grid; gap: var(--s-3); }
.graphique .lecture { min-height: 2.8em; }
.graphique .lecture .t-3 { display: block; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.graphique .barre { cursor: pointer; }
.graphique .barre rect.zone { fill: transparent; }
.graphique .barre[aria-pressed="true"] .plein, .graphique .barre[aria-pressed="true"] .hach { stroke: var(--encre); stroke-width: 1.5; }
.graphique .zero { stroke: var(--filet); stroke-width: 1; }
.graphique .axe { display: flex; justify-content: space-between; font-size: var(--t-1); color: var(--encre-3); margin-top: calc(var(--s-2) * -1); }
.graphique .entree { fill: var(--entree); } .graphique .action { fill: var(--action); }
.graphique .hach { stroke-width: 1; }
.graphique .hach.entree { stroke: var(--entree); } .graphique .hach.action { stroke: var(--action); }
.graphique .motif-e { stroke: var(--entree); } .graphique .motif-a { stroke: var(--action); }

/* ---- 4.3 Carte d'alerte : la seule chose du produit qui a le droit d'être orange ---- */
.alerte { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-2);
  background: var(--action-fond); border-left: 4px solid var(--action); }
.alerte.info { background: var(--panneau); border-left-color: var(--encre-3); }
.alerte .quand { font-size: var(--t-1); color: var(--encre-2); }
.alerte .titre { font-size: var(--t-2); font-weight: 600; }
.alerte .corps { color: var(--encre-2); }
.alerte .gestes { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.alerte .niveau { font-size: var(--t-1); font-weight: 600; color: var(--encre); }
.alerte.info .niveau { color: var(--encre-2); }
.liste-alertes { display: grid; gap: var(--s-3); }

/* ---- Bouton (un seul style, deux variantes) ---- */
.bouton { min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-2); border: var(--trait) solid var(--encre);
  background: var(--encre); color: var(--fond); font-weight: 600; cursor: pointer; }
.bouton.second { background: transparent; color: var(--encre); border-color: var(--filet); }
.bouton:hover:not(:disabled) { border-color: var(--action); }

/* ---- 4.4 Ligne de tableau ---- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { font-size: var(--t-1); font-weight: 400; color: var(--encre-3); text-align: right; padding: var(--s-2) var(--s-2); }
.tableau td { padding: var(--s-3) var(--s-2); border-top: var(--trait) solid var(--filet); text-align: right; vertical-align: top; }
.tableau th:first-child, .tableau td:first-child { text-align: left; padding-left: 0; }
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }
.tableau tbody tr:hover { background: var(--panneau); }
.tableau td .sous { display: block; font-size: var(--t-1); color: var(--encre-3); }
.tableau td .signe { margin-right: .1em; }
.defile { overflow-x: auto; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); }

/* ---- 4.5 Barre de filtres : un groupe de choix exclusifs ---- */
.filtres { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-2); background: var(--panneau); }
.filtres button { min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--encre-2); cursor: pointer; font-size: var(--t-1); font-weight: 600; }
.filtres button:hover { color: var(--encre); }
.filtres button[aria-checked="true"] { background: var(--fond); color: var(--encre); }

/* ---- 4.6 État vide ---- */
.vide { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-4); border-radius: var(--r-2);
  border: var(--trait) dashed var(--filet); text-align: left; }
.vide .titre { font-size: var(--t-2); font-weight: 600; }
.vide .texte { color: var(--encre-2); }
.vide.bon { border-style: solid; border-color: var(--entree); }
.vide.bon .titre::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2);
  border-radius: var(--r-1); background: var(--entree); vertical-align: .1em; }

/* ============ 5. MISE EN PAGE : LA GRILLE BENTO ============
   Des cases de tailles inégales, alignées sur une grille à quatre colonnes ; une seule colonne sur téléphone.
   La profondeur vient d'un filet de 1 px, jamais d'un flou ni d'une ombre. L'ordre du DOM est l'ordre de lecture
   sur téléphone ; sur grand écran, les zones nommées replacent les cases. */
.page { max-width: 1040px; margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-7); }
.entete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); min-height: 44px; }
.entete .boutique { font-size: var(--t-1); font-weight: 600; color: var(--encre-2); letter-spacing: .02em; }
.entete .jour { font-size: var(--t-1); color: var(--encre-3); }
.etiquette-demo { display: inline-block; margin: 0 0 var(--s-3); padding: 2px var(--s-2); border-radius: var(--r-1);
  border: var(--trait) dashed var(--encre-3); color: var(--encre-2); font-size: var(--t-1); }
/* Seul le panneau ACTIF est affiché. `:not(.actif)` (spécificité 0,2,0) l'emporte sur le `display: grid` qu'un écran donne à son panneau (`.ecran-prix`, 0,1,0) :
   avec l'ancienne règle `.panneau { display: none }`, les écrans Produits, Prix et Santé restaient visibles derrière les suivants. */
.panneau:not(.actif) { display: none; }

.bento { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.case { display: grid; align-content: start; gap: var(--s-3); min-width: 0; padding: var(--s-4);
  border: var(--trait) solid var(--filet); border-radius: var(--r-2); background: var(--panneau); }
.case > h2, .case-tete h2 { font-size: var(--t-2); font-weight: 600; line-height: 1.3; color: var(--encre-2); margin: 0; }
.case-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.case.c-faire.urgente { border-color: var(--action); }

/* La case du bénéfice : la plus grande, la seule à porter le grand chiffre. */
.c-hero { gap: var(--s-3); align-content: start; background: var(--fond); border-color: var(--encre-3); }
.c-hero .verdict { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); font-weight: 600; }
.c-hero .verdict.entree { --marque: var(--entree); } .c-hero .verdict.action { --marque: var(--action); }
.c-hero .verdict .marque { width: 8px; height: 8px; border-radius: var(--r-1); background: var(--marque, var(--encre-3)); flex: none; }
.c-hero .phrase { font-size: var(--t-2); line-height: 1.45; color: var(--encre-2); max-width: 44ch; }
.c-hero .confiance { display: grid; gap: var(--s-2); margin-top: var(--s-2); }

.liste-alertes { display: grid; gap: var(--s-3); }
.c-faire .alerte { border-radius: var(--r-1); }

/* Autant d'onglets que d'écrans permis : la barre défile à l'horizontale, l'onglet actif est ramené dans la vue (app.js). */
nav.onglets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
nav.onglets::-webkit-scrollbar { display: none; }
nav.onglets button { background: none; border: 0; min-height: 56px; padding: 0 var(--s-3); white-space: nowrap; scroll-snap-align: center; color: var(--encre-2); cursor: pointer;
  font-weight: 600; font-size: var(--t-2); border-top: 2px solid transparent; }
nav.onglets button[aria-current="page"] { color: var(--encre); border-top-color: var(--encre); }

/* La dock : l'action à portée de pouce, en bas de l'écran (téléphone seulement). */
.dock { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 2;
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--fond); border-top: var(--trait) solid var(--action); }
.dock .texte { flex: 1; min-width: 0; display: grid; }
.dock .titre { font-size: var(--t-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .gestes { display: flex; gap: var(--s-2); }
.dock .bouton { min-height: 48px; }

/* Téléphone : une colonne, navigation et action en bas. */
@media (max-width: 759px) {
  .page { padding-bottom: calc(56px + 76px + var(--s-5) + env(safe-area-inset-bottom)); }
  nav.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--fond);
    border-top: var(--trait) solid var(--filet); padding-bottom: env(safe-area-inset-bottom); }
  .c-faire .gestes { display: none; }
  .tuile.dominante .valeur { font-size: var(--t-5); }
}
/* Grand écran : quatre colonnes, les cases se replacent, la navigation remonte, la dock disparaît. */
@media (min-width: 760px) {
  .page { padding-top: var(--s-5); }
  nav.onglets { margin: var(--s-3) 0 var(--s-4); border-bottom: var(--trait) solid var(--filet); }
  nav.onglets button { min-height: 48px; border-top: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  nav.onglets button[aria-current="page"] { border-bottom-color: var(--encre); }
  .dock { display: none !important; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "hero hero faire faire" "hero hero faire faire" "jours jours jours mois" "casc casc prod prod" "estim estim estim estim"; }
  .c-hero { grid-area: hero; padding: var(--s-5); align-content: space-between; }
  .c-faire { grid-area: faire; }
  .c-jours { grid-area: jours; }
  .c-mois { grid-area: mois; }
  .c-casc { grid-area: casc; }
  .c-prod { grid-area: prod; }
  .c-estim { grid-area: estim; }
}
.case.c-estim:empty { display: none; }

button.pourquoi { background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--encre-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--t-1); }
.explication { display: none; padding: var(--s-3) var(--s-4); border-radius: var(--r-1);
  background: var(--panneau); border: var(--trait) solid var(--filet); color: var(--encre-2); font-size: var(--t-1); line-height: 1.6; }
.c-hero .explication { background: var(--fond); }
.explication.ouverte { display: block; }
.explication code { color: var(--encre); font-family: inherit; font-weight: 600; }

/* ---- La cascade : d'où vient le bénéfice, euro par euro ---- */
.cascade { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cascade li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 28px; }
.cascade .nom { font-size: var(--t-1); color: var(--encre-2); }
.cascade .piste-c { position: relative; height: 12px; }
.cascade .seg { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: var(--r-1); background: var(--marque); }
.cascade .montant { font-size: var(--t-2); font-weight: 600; text-align: right; }
.cascade li.entree { --marque: var(--entree); } .cascade li.sortie { --marque: var(--sortie); } .cascade li.action { --marque: var(--action); }
.cascade li.total { border-top: var(--trait) solid var(--filet); padding-top: var(--s-2); margin-top: var(--s-1); }
.cascade li.total .nom { color: var(--encre); font-weight: 600; }

/* ---- Squelette : la forme de l'écran avant ses chiffres. Immobile, pas de scintillement. ---- */
.sq { display: block; height: 14px; border-radius: var(--r-1); background: var(--filet); }
.sq.grand { height: 56px; width: 70%; } .sq.moyen { width: 55%; } .sq.plein { width: 100%; height: 88px; }

/* ============ MOUVEMENT : il se mérite ============
   Trois mouvements seulement, de 150 à 250 ms : le contenu apparaît (fondu), un graphique se dessine une fois,
   un montant qui change glisse vers sa nouvelle valeur (en JavaScript, composants.js). Rien d'autre ne bouge.
   Aucun mouvement du tout si l'appareil demande moins d'animation. */
@media (prefers-reduced-motion: no-preference) {
  .fondu { animation: fondu 180ms ease-out both; }
  .dessin .corps { animation: monte 220ms ease-out both; }
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Connexion */
#connexion { max-width: 380px; margin: 12vh auto; }
#connexion form { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
#connexion label { display: grid; gap: var(--s-1); color: var(--encre-2); font-size: var(--t-1); }
#connexion input { background: var(--fond); border: var(--trait) solid var(--encre-3); color: var(--encre);
  border-radius: var(--r-2); padding: var(--s-3); font: inherit; min-height: 44px; }
#connexion h1 { font-size: var(--t-4); font-weight: 600; }

/* ============ 6. COMPATIBILITÉ — pour les écrans pas encore refaits ============
   Produits, Stocks et Système utilisent encore leurs anciens noms de classes. Ils reçoivent la police, les
   neutres et les trois familles, sans être reconstruits. Cette section disparaît écran par écran. */
.carte { background: var(--panneau); border-radius: var(--r-2); padding: var(--s-4); margin: var(--s-3) 0; }
h2 { font-size: var(--t-3); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table th { text-align: right; color: var(--encre-3); font-size: var(--t-1); font-weight: 400; padding: var(--s-2); }
table th:first-child, table td:first-child { text-align: left; padding-left: 0; }
table td { padding: var(--s-3) var(--s-2); border-top: var(--trait) solid var(--filet); text-align: right; }
.sous { color: var(--encre-2); font-size: var(--t-1); }
.legende { color: var(--encre-3); font-size: var(--t-1); margin-top: var(--s-2); }
.pos { color: var(--entree); } .neg { color: var(--action); }
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-1); margin-right: var(--s-2); }
.pastille.inconnu { background: transparent; border: var(--trait) dashed var(--encre-2); box-sizing: border-box; }
.pastille.ok { background: var(--entree); } .pastille.attention, .pastille.danger { background: var(--action); }
#deconnexion { background: none; border: 0; color: var(--encre-2); text-decoration: underline; cursor: pointer; font-size: var(--t-1); min-height: 44px; padding: 0 var(--s-1); }

/* Stocks (écran ancien) sur téléphone : six colonnes ne tiennent pas dans 390 px. Les cellules se resserrent, et si cela ne suffit pas
   le tableau défile DANS sa carte, jamais la page. Au-dessus de 640 px rien ne change. */
@media (max-width: 640px) {
  #stocks .carte { overflow-x: auto; padding: var(--s-2) var(--s-3); }
  #stocks table th, #stocks table td { padding-left: 2px; padding-right: 2px; }
  #stocks table td:first-child { min-width: 4.5em; overflow-wrap: anywhere; }
  #stocks table td:not(:first-child) { font-size: var(--t-1); }
}

/* Grand écran (900 px et plus) : la navigation devient une barre LATÉRALE, une ligne par écran, toujours visible. */
@media (min-width: 900px) {
  #application { max-width: 1240px; display: grid; grid-template-columns: 188px minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  #application > .entete, #application > #bandeau { grid-column: 1 / -1; }
  #application > nav.onglets { grid-column: 1; grid-row: 3; position: sticky; top: var(--s-4); display: grid; grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; margin: 0; border-bottom: 0; scroll-snap-type: none; }
  #application > nav.onglets button { text-align: left; min-height: 44px; border: 0; border-left: 2px solid transparent; margin: 0; padding: 0 var(--s-3); }
  #application > nav.onglets button[aria-current="page"] { border-left-color: var(--encre); border-bottom-color: transparent; }
  #application > .panneau { grid-column: 2; grid-row: 3; min-width: 0; }
}

/* « Sur quoi reposent les estimations » : une phrase par estimation, lisible, sur tous les écrans. */
.bloc-estimations { display: grid; gap: var(--s-2); margin-block: var(--s-4); }
.bloc-estimations-titre { margin: 0; font-size: var(--t-2); }
.bloc-estimations ul { margin: 0; padding-left: var(--s-4); display: grid; gap: var(--s-2); }
.bloc-estimations li { color: var(--encre-2); }