/* Charte : Verdana partout (consigne du 06/11/2026). */
:root { --fond:#f6f7f9; --carte:#ffffff; --texte:#1d2733; --doux:#5b6775; --trait:#dfe3e8;
        --accent:#1b3a52; --erreur:#b91c1c; --succes:#15803d; }
* { box-sizing: border-box; }
html, body, button, input, select, textarea, table { font-family: Verdana, Geneva, sans-serif; }
body { margin: 0; background: var(--fond); color: var(--texte); font-size: 13px; line-height: 1.5; }
.bandeau { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--accent); color: #fff; }
.bandeau a { color: #fff; text-decoration: none; margin-right: 14px; }
.marque-app { font-weight: bold; }
.deconnexion { margin-left: auto; display: flex; gap: 10px; align-items: center; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 20px; }
.etroite { max-width: 520px; margin: 40px auto; }
.bouton, button { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; text-decoration: none; cursor: pointer; font-size: 13px; }
.message { padding: 8px 12px; border-radius: 6px; }
.message.erreur { background: #fdecec; color: var(--erreur); }
.message.succes { background: #e7f6ec; color: var(--succes); }
table.liste { border-collapse: collapse; width: 100%; background: var(--carte); }
table.liste th, table.liste td { border-bottom: 1px solid var(--trait); padding: 6px 8px; text-align: left; }
form.ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
label { display: flex; flex-direction: column; font-size: 12px; color: var(--doux); }
input, select { padding: 6px 8px; border: 1px solid var(--trait); border-radius: 4px; font-size: 13px; }
/* Incrément 1b. --a-traiter : seule couleur ajoutée, réservée à ce qui attend une action. Les
   champs de saisie reprennent le bleu des cellules de saisie de la V41 (--accent). */
:root { --a-traiter:#b45309; --a-traiter-fond:#fdf3e4; }
h1 { font-size: 18px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 28px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.aide { color: var(--doux); max-width: 75ch; margin: 4px 0 14px; }
button.secondaire { background: var(--carte); color: var(--accent); border: 1px solid var(--accent); }
.ligne > form { display: inline-block; margin-right: 8px; }
.defilement { overflow-x: auto; }
tr.a-traiter td { background: var(--a-traiter-fond); }
tr.a-traiter td:first-child { box-shadow: inset 3px 0 0 var(--a-traiter); }
.a-traiter-compte { font-size: 12px; font-weight: normal; color: var(--a-traiter); }
.message.a-traiter { background: var(--a-traiter-fond); color: var(--a-traiter); }
.carte.a-traiter { border-left: 3px solid var(--a-traiter); background: var(--a-traiter-fond); }
.carte + .carte, .carte + .ligne { margin-top: 14px; }
select.saisie, input.saisie { border-left: 3px solid var(--accent); min-width: 12em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Écrans de paramétrage : une ligne par réglage (libellé, saisie, aide), comme la feuille PARAMÈTRES. */
.carte > h2:first-child { margin-top: 0; }
.parametre { display: grid; grid-template-columns: minmax(12em, 19em) minmax(10em, 15em) 1fr; gap: 2px 20px;
             align-items: start; padding: 10px 0; border-top: 1px solid var(--trait); }
.parametre:first-of-type { border-top: 0; }
.parametre > label { display: block; font-size: 13px; color: var(--texte); font-weight: bold; padding-top: 6px; }
.parametre .aide { margin: 6px 0 0; }
.saisie-unite { display: flex; align-items: center; gap: 6px; }
input.saisie.nombre { min-width: 0; width: 8em; text-align: right; }
.unite, .doux { color: var(--doux); }
.champ-erreur { grid-column: 2 / -1; color: var(--erreur); margin: 0; font-size: 12px; }
.parametre.en-erreur select, .parametre.en-erreur input { border-color: var(--erreur); }
.actions { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
td.nombre { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .parametre { grid-template-columns: 1fr; } .champ-erreur { grid-column: 1; } }
@media (max-width: 640px) { main { padding: 16px; } .bandeau { flex-wrap: wrap; gap: 8px; } }
/* Écran d'une enseigne (incrément 2) : circuit de validation, onglets, tuiles de synthèse. */
.etapes { display: flex; gap: 0; list-style: none; margin: 0 0 12px; padding: 0; counter-reset: etape; }
.etapes li { flex: 1; padding: 8px 12px; border: 1px solid var(--trait); border-right: 0; color: var(--doux); background: var(--fond); }
.etapes li:last-child { border-right: 1px solid var(--trait); }
.etapes li::before { counter-increment: etape; content: counter(etape) ". "; }
.etapes li.courante { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; }
.renvoi { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; margin-top: 12px; }
.renvoi label { color: var(--texte); }
textarea { font-family: Verdana, Geneva, sans-serif; font-size: 13px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 4px; }
.onglets { display: flex; gap: 4px; margin: 20px 0 12px; border-bottom: 2px solid var(--trait); }
.onglet { padding: 8px 14px; color: var(--doux); text-decoration: none; }
.onglet.courant { color: var(--accent); font-weight: bold; border-bottom: 2px solid var(--accent); margin-bottom: -2px; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 14px 16px; }
.tuile h2 { margin: 0 0 8px; font-size: 14px; }
.tuile dl { margin: 0; }
.tuile dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.tuile dt { color: var(--doux); }
.tuile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tuile .evolution { border-top: 1px solid var(--trait); margin-top: 4px; padding-top: 6px; font-weight: bold; }
th.nombre, td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.etat { padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--trait); }
.etat-soumise { border-color: var(--a-traiter); color: var(--a-traiter); }
.etat-validee { border-color: var(--succes); color: var(--succes); }
@media (max-width: 900px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tuiles { grid-template-columns: 1fr; } .etapes { flex-direction: column; } .etapes li { border-right: 1px solid var(--trait); } }
/* Grille produit (incrément 2b) : identité figée à gauche, saisies au bleu V41, calculs en gris. */
.bandeau-grille { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.etat-enregistrement { min-width: 16em; text-align: right; margin: 4px 0 14px; color: var(--doux); }
.etat-enregistrement.erreur { color: var(--erreur); }
.grille-conteneur { max-height: 75vh; overflow: auto; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); }
table.grille { border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.grille th, table.grille td { border-bottom: 1px solid var(--trait); padding: 2px 4px; white-space: nowrap; background: var(--carte); }
table.grille thead th { position: sticky; top: 0; z-index: 2; background: #eef1f4; padding: 6px 4px; }
table.grille .fige { position: sticky; z-index: 1; }
table.grille thead .fige { z-index: 3; }
table.grille .fige-1 { left: 0; min-width: 9em; }
table.grille .fige-2 { left: var(--gauche-fige-2, 9em); max-width: 18em; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--trait); }
/* Tarifs : marque à 0 dans une grille (08/11/2026). */
.action-tarifs { margin: 0 0 14px; }
.action-tarifs summary { cursor: pointer; color: var(--accent); font-weight: bold; }
fieldset.choix-cases { border: 1px solid var(--trait); border-radius: 6px; padding: 4px 10px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
fieldset.choix-cases legend { font-size: 12px; color: var(--doux); padding: 0 4px; }
/* Désignation saisissable et figée (Référentiel article, 08/11/2026) : la case tient dans la colonne figée. */
table.grille td.designation-saisie .cellule.commentaire { width: 17em; }
table.grille .ligne-marque th, table.grille .ligne-marque td { background: var(--fond); color: var(--accent); font-weight: bold; padding-top: 10px; }
table.grille td.calcule { color: var(--doux); }
.cellule { font-size: 12px; padding: 3px 4px; border: 1px solid var(--trait); border-left: 3px solid var(--accent); border-radius: 3px; background: #fff; }
.cellule.coef, .cellule.taux { width: 4.6em; text-align: right; }
.cellule.mois-promo { width: 5em; }
/* Mois perturbés (rupture, rattrapage ; 09/11/2026), écran Coefficients : la saisie, et les UVC N des mois cochés. */
.cellule.mois-perturbes { width: 7em; }
/* Probabilités en étoiles (09/11/2026) : une note de 1 à 5. */
.cellule.etoiles { width: 2.6em; text-align: center; }
table.grille td.mois-perturbe { background: repeating-linear-gradient(135deg, transparent 0 4px, #e5e7eb 4px 6px); }
.cellule.commentaire { width: 22em; }
.cellule::placeholder { color: #9aa4b1; }
.cellule[readonly], .cellule[disabled] { border-left-color: var(--trait); background: var(--fond); }
.cellule.en-cours { background: #f3f6fa; }
.cellule.en-erreur { border-color: var(--erreur); background: #fdecec; }
.cellule.enregistree { background: #e7f6ec; transition: background 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .cellule.enregistree { transition: none; } }
input.cellule, select.cellule { min-width: 0; }
select.cellule { width: 6.5em; }
.cellule.volumes { width: 14em; }
table.grille tr.ligne-toutes th, table.grille tr.ligne-toutes td { background: var(--fond); }
td.texte-note { white-space: pre-wrap; max-width: 50ch; }
/* Restitutions (§6.3) : sous-navigation des vues, filtres, tableaux de chiffres. Les lignes de taux et
   d'évolution sont en retrait et en gris, les totaux en gras sous un filet. */
.filtres { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 0 0 16px; }
.filtres button { align-self: end; }
table.restitution { font-size: 12px; width: auto; min-width: 100%; }
table.restitution th, table.restitution td { padding: 4px 10px; white-space: nowrap; }
table.restitution thead th { background: #eef1f4; vertical-align: bottom; }
table.restitution tbody th { font-weight: normal; text-align: left; }
table.restitution tr.secondaire th { padding-left: 24px; color: var(--doux); }
table.restitution tr.secondaire td { color: var(--doux); }
table.restitution tr.total th, table.restitution tr.total td { font-weight: bold; border-top: 2px solid var(--texte); }
.tuiles.chiffres { grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); }
.tuile .chiffre { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; }
.liste-vues { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 12px; padding: 0; list-style: none; }
.liste-vues a { font-weight: bold; color: var(--accent); }
.liste-vues p { margin: 4px 0 0; color: var(--doux); }
/* Contrôles (§12) : verdicts en pastilles ; la ligne « à voir » reprend la couleur réservée à ce qui attend une action. */
.bilan { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.verdict { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--trait); white-space: nowrap; }
.verdict-a-voir { border-color: var(--a-traiter); color: var(--a-traiter); background: var(--a-traiter-fond); font-weight: bold; }
.verdict-ok { border-color: var(--succes); color: var(--succes); }
.verdict-info { color: var(--doux); }
table.controles td { vertical-align: top; }
table.controles .origine { display: block; font-size: 11px; }
details.cas summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details.cas ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
/* Exports (§11) : le bouton d'export à droite du titre de la vue. */
.titre-vue { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
a.bouton.secondaire { background: var(--carte); color: var(--accent); border: 1px solid var(--accent); }
.espace-haut { margin-top: 16px; }

/* ════ Habillage 0.15 (07/11/2026) : inspiré de StockIA, à la demande de Jérémy. Fond gris doux, cartes
   blanches arrondies, palette indigo, navigation latérale dans l'ordre du workflow, groupes de colonnes
   colorés et séparés dans les grilles. Verdana reste la police partout. ════ */
:root { --fond:#f0f0f3; --carte:#ffffff; --texte:#1f2937; --doux:#5b6472; --trait:#e3e5ea; --accent:#4f46e5;
        --accent-clair:#eef0ff; --succes:#059669; --erreur:#dc2626;
        --g-historique:#6366f1; --g-parc:#06b6d4; --g-vmm:#a855f7; --g-volume:#10b981; --g-prix:#f97316;
        --g-remise:#f59e0b; --g-ca:#0ea5e9; --g-marge:#ef4444; --ombre:0 4px 14px rgba(31,41,55,.07); }
body { background: var(--fond); }
.carte, .tuile, table.liste, .grille-conteneur { border-radius: 16px; box-shadow: var(--ombre); border-color: transparent; }
table.liste { overflow: hidden; }
table.liste thead th { background: #f6f7fb; color: var(--doux); font-size: 12px; }
.bouton, button { border-radius: 10px; }
.message { border-radius: 10px; }

/* Navigation latérale */
.barre-laterale { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; background: var(--carte); box-shadow: var(--ombre);
                  display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto; z-index: 10; }
.barre-laterale .marque-app { margin: 0 8px 14px; font-size: 16px; color: var(--accent); }
.barre-laterale nav a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--texte); text-decoration: none; }
.barre-laterale nav a:hover { background: var(--accent-clair); }
.barre-laterale nav a.courant { background: var(--accent); color: #fff; font-weight: bold; }
.nav-titre { margin: 14px 8px 4px; font-size: 11px; color: var(--doux); }
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape-nav; }
.nav-etapes li { counter-increment: etape-nav; }
.nav-etapes a::before { content: counter(etape-nav); display: inline-block; width: 1.7em; height: 1.7em; line-height: 1.7em;
                        margin-right: 8px; text-align: center; border-radius: 50%; background: var(--accent-clair);
                        color: var(--accent); font-size: 11px; font-weight: bold; }
.nav-etapes a.courant::before { background: #fff; }
.barre-laterale .deconnexion { margin: auto 6px 0; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
main.avec-barre { margin-left: 250px; max-width: none; padding: 24px 28px; }
main.avec-barre > * { max-width: 1400px; }
@media (max-width: 900px) {
  .barre-laterale { position: static; width: auto; box-shadow: none; }
  main.avec-barre { margin-left: 0; }
}

/* Grilles : groupes de colonnes colorés, séparés par un filet épais */
table.grille thead tr.groupes th { position: sticky; top: 0; z-index: 2; color: #fff; font-size: 11px; text-align: center; padding: 4px; }
table.grille thead tr.groupes + tr th { top: 24px; }
tr.groupes th.g-historique { background: var(--g-historique); } tr.groupes th.g-parc { background: var(--g-parc); }
tr.groupes th.g-vmm { background: var(--g-vmm); } tr.groupes th.g-volume { background: var(--g-volume); }
tr.groupes th.g-prix { background: var(--g-prix); } tr.groupes th.g-remise { background: var(--g-remise); }
tr.groupes th.g-ca { background: var(--g-ca); } tr.groupes th.g-marge { background: var(--g-marge); }
tr.groupes th.g-neutre { background: #9ca3af; }
table.grille .debut-groupe { border-left: 3px solid #cfd3dc; }
/* Filets entre groupes de colonnes (rang des colonnes dans chaque grille) */
table.grille-produit tr:not(.ligne-marque):not(.groupes) > :is(:nth-child(3), :nth-child(7), :nth-child(19), :nth-child(22), :nth-child(24), :nth-child(28)),
table.grille-prix tr:not(.ligne-marque):not(.groupes) > :is(:nth-child(3), :nth-child(5), :nth-child(9), :nth-child(12), :nth-child(15)),
tr.groupes th + th { border-left: 3px solid #cfd3dc; }
table.grille td.calcule { background: #fafbfd; }
/* Graphiques SVG (0.15) */
.graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin: 16px 0; }
figure.graphique { margin: 0; padding: 14px 16px 8px; }
figure.graphique figcaption { font-weight: bold; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
figure.graphique .legende { font-weight: normal; color: var(--doux); font-size: 12px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: middle; }
figure.graphique svg { width: 100%; height: auto; display: block; }
svg .axe { font-family: Verdana, Geneva, sans-serif; font-size: 11px; fill: #6b7280; }
svg .grille-g { stroke: #e5e7eb; stroke-width: 1; }
/* N et N+1 en bleu, la promo en violet au sommet des barres empilées (0.18.3) : deux familles bien distinctes. */
/* .serie-n, .serie-n1 : couleurs des années, plus bas (08/11/2026). */
.serie-promo-n { fill: #c084fc; background: #c084fc; }
.serie-promo-n1 { fill: #7e22ce; background: #7e22ce; }
svg rect:hover { opacity: .8; }

/* ════ Couleur partout (0.15, inspiré de StockIA) : une couleur par étape du workflow, en-têtes en dégradé
   pastel, indicateurs à pastille colorée, ombres douces doubles. ════ */
:root { --ombre: 6px 6px 14px rgba(174,174,192,.28), -6px -6px 14px rgba(255,255,255,.85);
        --ombre-legere: 3px 3px 7px rgba(174,174,192,.22), -3px -3px 7px rgba(255,255,255,.85);
        --theme: #6366f1; --theme-clair: #eef0ff; --theme-fonce: #4338ca; }
main.theme-ventes { --theme: #06b6d4; --theme-clair: #ecfeff; --theme-fonce: #0e7490; }
main.theme-correspondances { --theme: #a855f7; --theme-clair: #faf5ff; --theme-fonce: #7e22ce; }
main.theme-referentiel-referentiel, main.theme-referentiel-ajouter_reference { --theme: #6366f1; --theme-clair: #eef0ff; --theme-fonce: #4338ca; }
main.theme-referentiel-tarifs { --theme: #f97316; --theme-clair: #fff7ed; --theme-fonce: #c2410c; }
main.theme-enseignes { --theme: #10b981; --theme-clair: #ecfdf5; --theme-fonce: #047857; }
main.theme-parametres { --theme: #f59e0b; --theme-clair: #fffbeb; --theme-fonce: #b45309; }
main.theme-referentiel-lissage { --theme: #8b5cf6; --theme-clair: #f5f3ff; --theme-fonce: #6d28d9; }
main.theme-accueil, main.theme-saisie { --theme: #4f46e5; --theme-clair: #eef0ff; --theme-fonce: #3730a3; }
main.theme-restitutions { --theme: #0ea5e9; --theme-clair: #f0f9ff; --theme-fonce: #0369a1; }
main.theme-controles { --theme: #ef4444; --theme-clair: #fef2f2; --theme-fonce: #b91c1c; }
main.theme-versions { --theme: #64748b; --theme-clair: #f1f5f9; --theme-fonce: #334155; }
main.theme-admin { --theme: #14b8a6; --theme-clair: #f0fdfa; --theme-fonce: #0f766e; }

/* Titre de page : bandeau en dégradé de la couleur de l'étape */
main.avec-barre > h1, main.avec-barre .titre-vue > h1 { color: var(--theme-fonce); }
main.avec-barre > h1:first-child, main.avec-barre > .titre-vue:first-child {
  background: linear-gradient(135deg, var(--theme-clair), #fff); border-left: 5px solid var(--theme);
  border-radius: 16px; padding: 14px 18px; box-shadow: var(--ombre-legere); }
main.avec-barre > .titre-vue:first-child h1 { margin: 0; }
main h2 { color: var(--theme-fonce); }
main h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--theme); margin-right: 2px; }
.tuile h2::before, .carte > h2:first-child::before { display: none; }

/* Cartes et tableaux : ombres douces, en-têtes pastel de la couleur de l'étape */
.carte, .tuile, table.liste, .grille-conteneur, figure.graphique { box-shadow: var(--ombre-legere); }
.carte > h2:first-child { background: linear-gradient(135deg, var(--theme-clair), #fff); margin: -20px -20px 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--theme-clair); border-radius: 16px 16px 0 0; }
table.liste thead th, table.grille thead tr:not(.groupes) th { background: linear-gradient(180deg, var(--theme-clair), #f8f9fc); color: var(--theme-fonce); }
table.liste tbody tr:nth-child(even) td { background: #fafbfd; }
table.liste tbody tr:hover td, table.grille tbody tr:not(.ligne-marque):hover td { background: var(--theme-clair); }
table.restitution tr.total th, table.restitution tr.total td { background: var(--theme-clair); color: var(--theme-fonce); border-top-color: var(--theme); }
table.grille .ligne-marque th, table.grille .ligne-marque td { background: linear-gradient(90deg, var(--theme-clair), #fff); color: var(--theme-fonce); }

/* Boutons */
button, .bouton { background: linear-gradient(135deg, var(--theme), var(--theme-fonce)); box-shadow: var(--ombre-legere); }
button.secondaire, a.bouton.secondaire { background: #fff; color: var(--theme-fonce); border: 1px solid var(--theme); }
.barre-laterale button.secondaire { color: #4338ca; border-color: #c7d2fe; }

/* Onglets d'un client : pastilles */
.onglets { border-bottom: 0; gap: 6px; flex-wrap: wrap; }
.onglet { background: #fff; border-radius: 999px; box-shadow: var(--ombre-legere); }
.onglet.courant { background: var(--theme); color: #fff; border-bottom: 0; margin-bottom: 0; }

/* Indicateurs (tuiles) : pastille de couleur et chiffre coloré, une couleur par tuile */
.tuiles > .tuile { position: relative; border-top: 4px solid var(--c); background: linear-gradient(160deg, var(--c-clair), #fff 55%); }
.tuiles > .tuile h2 { color: var(--c-fonce); }
.tuiles > .tuile .chiffre, .tuiles > .tuile dd { color: var(--c-fonce); }
.tuiles > .tuile:nth-child(6n+1) { --c: #6366f1; --c-clair: #eef0ff; --c-fonce: #4338ca; }
.tuiles > .tuile:nth-child(6n+2) { --c: #10b981; --c-clair: #ecfdf5; --c-fonce: #047857; }
.tuiles > .tuile:nth-child(6n+3) { --c: #f59e0b; --c-clair: #fffbeb; --c-fonce: #b45309; }
.tuiles > .tuile:nth-child(6n+4) { --c: #f97316; --c-clair: #fff7ed; --c-fonce: #c2410c; }
.tuiles > .tuile:nth-child(6n+5) { --c: #06b6d4; --c-clair: #ecfeff; --c-fonce: #0e7490; }
.tuiles > .tuile:nth-child(6n+6) { --c: #a855f7; --c-clair: #faf5ff; --c-fonce: #7e22ce; }

/* Navigation : une couleur par étape */
.nav-etapes li:nth-child(1) a::before { background: #ecfeff; color: #0e7490; }
.nav-etapes li:nth-child(2) a::before { background: #faf5ff; color: #7e22ce; }
.nav-etapes li:nth-child(3) a::before { background: #eef0ff; color: #4338ca; }
.nav-etapes li:nth-child(4) a::before { background: #fff7ed; color: #c2410c; }
.nav-etapes li:nth-child(5) a::before { background: #ecfdf5; color: #047857; }
.nav-etapes li:nth-child(6) a::before { background: #fffbeb; color: #b45309; }
.nav-etapes li:nth-child(7) a::before { background: #f5f3ff; color: #6d28d9; }
.barre-laterale { background: linear-gradient(180deg, #ffffff, #f7f7fb); }
.barre-laterale .marque-app { font-size: 17px; background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text;
  background-clip: text; color: transparent; }

/* Messages et états */
.message.succes { border-left: 4px solid var(--succes); }
.message.erreur { border-left: 4px solid var(--erreur); }
.etat-brouillon { background: #f1f5f9; color: #475569; }
.etat-soumise { background: #fffbeb; }
.etat-validee { background: #ecfdf5; }
table.grille-coefficients tr:not(.ligne-marque):not(.groupes) > :is(:nth-child(3), :nth-child(16)) { border-left: 3px solid #cfd3dc; }
svg .etiquette { font-family: Verdana, Geneva, sans-serif; font-size: 9px; fill: #374151; }
/* Menu repliable et graphiques agrandis (07/11/2026) */
.barre-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.barre-tete .marque-app { margin-bottom: 0; }
button.replier { padding: 4px 10px; font-size: 14px; line-height: 1; }
.ouvrir-navigation { display: none; position: fixed; top: 12px; left: 12px; z-index: 11; }
html.nav-repliee .barre-laterale { display: none; }
html.nav-repliee main.avec-barre { margin-left: 0; padding-top: 56px; }
html.nav-repliee .ouvrir-navigation { display: inline-block; }
@media (max-width: 900px) { html.nav-repliee main.avec-barre { padding-top: 56px; } }
.graphiques { grid-template-columns: 1fr; }
figure.graphique { padding: 18px 22px 12px; }
figure.graphique figcaption { font-size: 15px; }
.formulaire-prospect { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: end; }
.formulaire-prospect .champ-erreur { display: block; }
/* Opérations marketing (0.18) */
main.theme-operations { --theme: #ec4899; --theme-clair: #fdf2f8; --theme-fonce: #be185d; }
.nav-etapes li:nth-child(8) a::before { background: #fdf2f8; color: #be185d; }
.formulaire-operation fieldset { border: 1px solid var(--trait); border-radius: 12px; margin: 12px 0; padding: 10px 14px; }
.formulaire-operation legend { color: var(--theme-fonce); font-weight: bold; padding: 0 6px; }
label.case { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 4px 12px 4px 0; color: var(--texte); }
.formulaire-operation select[multiple] { min-width: 18em; }

/* Promo dans la synthèse d'un client et la synthèse société (0.18.3) : violet, comme dans les graphiques. */
.tuiles.tuiles-client { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
.tuiles > .tuile.tuile-promo { --c: #9333ea; --c-clair: #faf5ff; --c-fonce: #7e22ce; }
.tuile .part-ca { display: block; font-size: 12px; font-weight: normal; color: #7e22ce; }
table.liste td.promo { background: #faf5ff; color: #6b21a8; }
table.liste th.promo { color: #7e22ce; }
table.liste .debut-groupe { border-left: 2px solid #e3e5ea; }

/* P&L et restitutions plus lisibles (0.18.3) : blocs titrés, lignes clés, période N+1 mise en avant, séparateurs de
   colonnes, indices colorés par tranche, évolutions par sens (app/format.py, teinte). */
table.restitution tr.bloc th { background: var(--theme-clair); color: var(--theme-fonce); font-weight: bold; text-align: left;
  border-top: 2px solid var(--theme); padding: 7px 10px 5px; }
table.restitution tbody tr.forte th, table.restitution tbody tr.forte td { font-weight: bold; background: #f8fafc; }
table.restitution .debut-groupe { border-left: 2px solid #d5d9e0; }
table.restitution tbody tr td.periode-n1 { background: #eff6ff; }
table.restitution thead th.periode-n1 { background: #dbeafe; color: #1e3a8a; }
table.restitution th.promo, table.restitution td.promo { background: #faf5ff; }
/* tbody tr > td : au moins aussi spécifique que les lignes alternées (table.liste tbody tr:nth-child(2n) td), la
   ligne clé et la période N+1, et placé après elles : la couleur l'emporte, sans !important. */
table.restitution tbody tr > td.indice-tres-bon, .legende-couleurs .indice-tres-bon { background: #bbf7d0; color: #14532d; }
table.restitution tbody tr > td.indice-bon, .legende-couleurs .indice-bon { background: #dcfce7; color: #166534; }
table.restitution tbody tr > td.indice-moyen, .legende-couleurs .indice-moyen { background: #fef9c3; color: #854d0e; }
table.restitution tbody tr > td.indice-faible, .legende-couleurs .indice-faible { background: #ffedd5; color: #9a3412; }
table.restitution tbody tr > td.indice-bas, .legende-couleurs .indice-bas { background: #fee2e2; color: #991b1b; }
table.restitution tbody tr > td.hausse, .legende-couleurs .hausse { color: #15803d; font-weight: bold; }
table.restitution tbody tr > td.baisse, .legende-couleurs .baisse { color: #b91c1c; font-weight: bold; }
table.restitution tbody tr > td.hausse-forte { color: #fff; background: #16a34a; font-weight: bold; }
table.restitution tbody tr > td.baisse-forte { color: #fff; background: #dc2626; font-weight: bold; }
.legende-couleurs span { display: inline-block; padding: 1px 7px; border-radius: 6px; margin: 1px 0; }
.legende-couleurs .hausse { background: #f0fdf4; } .legende-couleurs .baisse { background: #fef2f2; }

/* Tableau de bord de la campagne (0.19.0) : avancement des saisies et grandeurs par client. */
.tuile.avancement .chiffre { font-size: 18px; }
svg.barre-avancement { display: block; width: 100%; height: 10px; margin: 8px 0 6px; border-radius: 5px; background: #e5e7eb; }
svg.barre-avancement .part-validee { fill: #10b981; }
svg.barre-avancement .part-soumise { fill: #f59e0b; }
svg.barre-avancement .part-brouillon { fill: #cbd5e1; }
.tuiles.campagne .chiffre.hausse, .tuiles.campagne .chiffre.hausse-forte { color: #15803d; }
.tuiles.campagne .chiffre.baisse, .tuiles.campagne .chiffre.baisse-forte { color: #b91c1c; }
.tuiles.campagne .chiffre[class*=indice-] { border-radius: 8px; padding: 2px 8px; display: inline-block; }
.tuiles.campagne .chiffre.indice-tres-bon { background: #bbf7d0; } .tuiles.campagne .chiffre.indice-bon { background: #dcfce7; }
.tuiles.campagne .chiffre.indice-moyen { background: #fef9c3; } .tuiles.campagne .chiffre.indice-faible { background: #ffedd5; }
.tuiles.campagne .chiffre.indice-bas { background: #fee2e2; }

/* Alertes de saisie (0.19.0) : signal à côté de la désignation, détail au survol. */
.designation .alertes { display: none; }
.designation .alertes.en-alerte:focus-visible { outline: 2px solid #b45309; outline-offset: 1px; }
.designation .alertes.en-alerte { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px;
  font-weight: bold; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; cursor: help; }
.compte-alertes:empty { display: none; }
.compte-alertes { margin: 4px 0 10px; padding: 6px 10px; border-radius: 8px; color: #92400e; background: #fffbeb;
  border: 1px solid #fcd34d; }

/* Cascade du P&L (0.20.0) : totaux en bleu, ce qui retire en rouge, ce qui ajoute en vert. */
.cascade-total { fill: #3b82f6; background: #3b82f6; }
.cascade-baisse { fill: #f87171; background: #f87171; }
.cascade-hausse { fill: #34d399; background: #34d399; }

/* Plan promo N+1 (0.21.0) : un mois coché en violet, les mois de promo de N surlignés en repère. */
table.plan-promo td.mois-case { text-align: center; padding: 2px 4px; }
table.plan-promo td.mois-case input { width: 16px; height: 16px; accent-color: #7e22ce; cursor: pointer; }
table.plan-promo td.mois-case:has(input:checked) { background: #f3e8ff; }
table.plan-promo td.mois-promo-n { box-shadow: inset 0 -3px 0 #c084fc; }
table.plan-promo th.mois { text-align: center; min-width: 38px; }
table.plan-promo tr.promo-refusee td.mois-case { background: #fee2e2; }
button.danger { color: #b91c1c; border-color: #fca5a5; }
button.danger:hover { background: #fef2f2; }

/* Fiche rendez-vous acheteur (0.24.0) : page autonome, sobre, prête à imprimer. */
body.fiche-rdv { background: #fff; }
body.fiche-rdv main { max-width: 1000px; margin: 0 auto; padding: 24px; }
.fiche-actions { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 12px; }
.fiche-entete { border-bottom: 3px solid #3b82f6; margin-bottom: 16px; padding-bottom: 8px; }
.fiche-entete .fiche-marque { margin: 0; font-weight: bold; color: #1d4ed8; letter-spacing: .02em; }
.fiche-entete h1 { margin: 4px 0; }
.fiche-pied { margin-top: 18px; font-size: 11px; color: var(--doux); }
.fiche-projet { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: #fffbeb; color: #92400e;
  border: 1px solid #fcd34d; font-weight: bold; }
@media print {
  /* Marges de page à zéro : pas d'adresse du serveur ni d'identifiant imprimés dans l'en-tête ou le pied. */
  @page { margin: 0; }
  .fiche-actions { display: none; }
  body.fiche-rdv main { padding: 14mm; max-width: none; }
  body.fiche-rdv .tuile, body.fiche-rdv table.liste { box-shadow: none; }
  body.fiche-rdv table.liste { page-break-inside: auto; }
  body.fiche-rdv tr { page-break-inside: avoid; }
}

/* Promos de N dans le Plan promo (08/11/2026) : volume réalisé du mois, sous la case. */
table.plan-promo .vol-promo-n, .legende-promo .vol-promo-n { display: block; font-size: 10px; line-height: 1.2; color: #7e22ce;
  font-weight: bold; }
.legende-promo .vol-promo-n { display: inline-block; padding: 0 5px; border-radius: 6px; background: #f3e8ff; }
td.lecture { color: var(--doux); background: #fafbfd; }

/* Évolutions colorées dans les grilles de saisie (écran Tarifs, 08/11/2026) : même règle que les restitutions. */
table.grille tbody tr > td.hausse { color: #15803d; font-weight: bold; }
table.grille tbody tr > td.baisse { color: #b91c1c; font-weight: bold; }
table.grille tbody tr > td.hausse-forte { color: #fff; background: #16a34a; font-weight: bold; }
table.grille tbody tr > td.baisse-forte { color: #fff; background: #dc2626; font-weight: bold; }

/* Années N et N+1 (08/11/2026) : une couleur par année, la même dans tous les écrans et dans les graphiques, gris
   pour N (le réalisé), bleu pour N+1 (le construit) ; un filet à chaque changement d'année. Les colonnes sont
   repérées par leur en-tête (static/js/annees.js ; app/format.py, classe_annee, pour l'export Excel). Les fonds
   qui portent un sens (promo, indices, évolutions fortes) gardent la priorité : :where les écarte sans peser sur
   la spécificité. */
:root { --annee-n: #a8a29e; --annee-n-fond: #f5f5f4; --annee-n-fond-pair: #efeeec; --annee-n-tete: #e7e5e4; --annee-n-texte: #44403c;
        --annee-n1: #3b82f6; --annee-n1-fond: #eff6ff; --annee-n1-fond-pair: #e5effd; --annee-n1-tete: #dbeafe; --annee-n1-texte: #1e3a8a;
        --annee-filet: #94a3b8; }
.serie-n { fill: var(--annee-n); background: var(--annee-n); }
.serie-n1 { fill: var(--annee-n1); background: var(--annee-n1); }
table:is(.liste, .grille) thead tr > th.annee-n { background: var(--annee-n-tete); color: var(--annee-n-texte); box-shadow: inset 0 3px 0 var(--annee-n); }
table:is(.liste, .grille) thead tr > th.annee-n1, table.restitution thead th.periode-n1 { background: var(--annee-n1-tete); color: var(--annee-n1-texte); box-shadow: inset 0 3px 0 var(--annee-n1); }
table:is(.liste, .grille) tbody tr > td.annee-n:where(:not(.promo, .hausse-forte, .baisse-forte, [class*="indice-"])) { background: var(--annee-n-fond); }
table:is(.liste, .grille) tbody tr:nth-child(even) > td.annee-n:where(:not(.promo, .hausse-forte, .baisse-forte, [class*="indice-"])) { background: var(--annee-n-fond-pair); }
table:is(.liste, .grille) tbody tr > td.annee-n1:where(:not(.promo, .hausse-forte, .baisse-forte, [class*="indice-"])),
table.restitution tbody tr td.periode-n1:where(:not(.promo, .hausse-forte, .baisse-forte, [class*="indice-"])) { background: var(--annee-n1-fond); }
table:is(.liste, .grille) tbody tr:nth-child(even) > td.annee-n1:where(:not(.promo, .hausse-forte, .baisse-forte, [class*="indice-"])) { background: var(--annee-n1-fond-pair); }
table:is(.liste, .grille) :is(th, td).debut-annee { border-left: 2px solid var(--annee-filet); }
.legende-annees span { display: inline-block; padding: 1px 8px; border-radius: 6px; margin-right: 6px; }
.legende-annees .annee-n { background: var(--annee-n-tete); color: var(--annee-n-texte); }
.legende-annees .annee-n1 { background: var(--annee-n1-tete); color: var(--annee-n1-texte); }
@media print { table :is(th, td):is(.annee-n, .annee-n1) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Ponts de croissance N atterri -> N+1 (08/11/2026) : choix de la grandeur, puis les ponts en cascade. */
section.ponts { margin-top: 28px; padding-top: 6px; border-top: 2px solid var(--trait); }
.choix-pont { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.choix-pont a[aria-current="true"] { pointer-events: none; }

/* Icônes du menu (08/11/2026) : au trait, couleur du texte, avant le libellé. */
.icone { flex: none; vertical-align: -3px; }
.barre-laterale nav a { display: flex; align-items: center; gap: 8px; }
.barre-laterale nav a .icone { opacity: .8; }
.barre-laterale nav a.courant .icone { opacity: 1; }
.nav-accueil { margin-bottom: 4px; }

/* Accueil (demande de Jérémy du 08/11/2026) : bandeau « à faire », puis les boutons « J'aimerais … » par intention,
   chaque intention avec sa teinte. */
.accueil-tete h1 { font-size: 22px; margin-bottom: 2px; }
.a-faire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 26px; }
.a-faire-carte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-decoration: none;
                 color: var(--a-traiter); background: var(--a-traiter-fond); border: 1px solid #f3d9b1; }
.a-faire-carte .icone { width: 26px; height: 26px; }
.a-faire-carte b { display: block; font-size: 22px; line-height: 1.15; }
.a-faire-carte:hover { border-color: var(--a-traiter); }
.a-faire-carte.a-faire-ok { color: var(--succes); background: #e7f6ec; border-color: #bfe5cc; }
.intention { --teinte: var(--accent); --teinte-fond: #e8eef3; margin-bottom: 24px; }
.intention-construire { --teinte: #0f766e; --teinte-fond: #e6f4f1; }
.intention-lire { --teinte: #1d4ed8; --teinte-fond: #e8eefc; }
.intention-verifier { --teinte: #475569; --teinte-fond: #eef1f5; }
.intention h2 { color: var(--teinte); border-bottom: 2px solid var(--teinte-fond); padding-bottom: 6px; margin: 0 0 12px; }
.boutons-envie { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.envie { display: flex; align-items: flex-start; gap: 12px; min-height: 76px; padding: 12px 14px; border-radius: 10px;
         background: var(--carte); border: 1px solid var(--trait); color: var(--texte); text-decoration: none; }
.envie-icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
               background: var(--teinte-fond); color: var(--teinte); }
.envie-icone .icone { width: 22px; height: 22px; }
.envie-texte { display: flex; flex-direction: column; gap: 4px; }
.envie-libelle { font-weight: bold; color: var(--teinte); line-height: 1.35; }
.envie-ecran { font-size: 11px; color: var(--doux); }
.envie:hover { border-color: var(--teinte); background: var(--teinte-fond); }
.envie:hover .envie-icone { background: var(--teinte); color: #fff; }
.envie:focus-visible, .a-faire-carte:focus-visible { outline: 2px solid var(--teinte, var(--accent)); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .envie, .envie-icone { transition: background-color .15s, border-color .15s, color .15s; }
}

/* Version active (scénarios modifiables, 08/11/2026) : choix dans le menu, bandeau quand on est dans un scénario. */
.choix-version { margin: 0 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.choix-version label { font-size: 11px; color: var(--doux); }
.choix-version select { width: 100%; }
.bandeau-scenario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
                    margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: #fdf2f8; color: #9d174d;
                    border: 1px solid #f5c2dc; border-left: 4px solid #be185d; font-weight: bold; }
.bandeau-scenario form { margin: 0; }

/* Indice net et son évolution mis en évidence (demande de Jérémy du 08/11/2026) : un cadre sur la ligne, sans toucher
   aux couleurs des tranches de l'indice. */
tr.en-evidence > th, tr.en-evidence > td { border-top: 2px solid #a5b4fc; border-bottom: 2px solid #a5b4fc; font-weight: bold; }
tr.en-evidence > th { color: #3730a3; }
tr.en-evidence + tr.en-evidence > th, tr.en-evidence + tr.en-evidence > td { border-top: 0; }
/* Synthèse du client : évolution favorable ou défavorable à Biofuture. */
td.favorable { color: #15803d; font-weight: bold; }
td.defavorable { color: #b91c1c; font-weight: bold; }
/* Signal d'alerte devant la désignation (08/11/2026) : il ne sort plus de la colonne figée. */
.designation .alertes.en-alerte { margin: 0 6px 0 0; }

/* Onglets réorganisés (08/11/2026) : étapes numérotées, ce qui reste à saisir, étape suivante. */
.onglets-etapes .onglet { display: inline-flex; align-items: center; gap: 6px; }
.onglets-etapes .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
                     background: #e8eef3; color: var(--accent); font-size: 10px; font-weight: bold; }
.onglets-etapes .onglet.courant .n { background: #fff; }
.onglets-etapes .avance { font-size: 10px; padding: 0 6px; border-radius: 8px; background: var(--a-traiter-fond); color: var(--a-traiter); font-weight: normal; }
.onglets-etapes .avance.complet { background: #e7f6ec; color: var(--succes); }
.etape-suivante { display: flex; justify-content: flex-end; margin: 14px 0 6px; }
td.coef-promo-n1 input { box-shadow: inset 0 0 0 2px #a78bfa; }

/* Construction par client : avancement juste sous le titre, global puis par circuit (08/11/2026). */
.avancement-campagne { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.4fr); gap: 14px 28px;
                       align-items: start; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px;
                       padding: 14px 16px; margin: 4px 0 18px; }
.avancement-campagne .chiffre { font-size: 20px; font-weight: bold; margin: 0 0 6px; color: var(--accent); }
.avancement-campagne .barre-avancement { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: block; background: #eef1f4; }
.avancement-campagne h2 { font-size: 13px; margin: 0 0 6px; }
.avancement-par-circuit { width: 100%; border-collapse: collapse; font-size: 12px; }
.avancement-par-circuit th { text-align: left; width: 5em; padding: 3px 6px 3px 0; }
.avancement-par-circuit td { padding: 3px 6px; white-space: nowrap; }
.avancement-par-circuit td.barre { width: 45%; }
.avancement-par-circuit .barre-avancement { height: 9px; }
.legende { margin-left: 8px; }
.legende .pastille { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
@media (max-width: 760px) { .avancement-campagne { grid-template-columns: 1fr; } }
.pastille.part-validee { background: #10b981; } .pastille.part-soumise { background: #f59e0b; } .pastille.part-brouillon { background: #cbd5e1; }
/* Comment l'application calcule (0.40.0) : sommaire d'ancres, formules lisibles en largeur limitée. */
nav.sommaire { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; }
nav.sommaire a { color: var(--accent); }
table.methodes th[scope="row"] { width: 16em; vertical-align: top; }
table.methodes td { vertical-align: top; }
table.methodes td:nth-child(2) { max-width: 60ch; }
table.methodes tr.groupe th { background: var(--fond); color: var(--doux); font-weight: normal; }
/* Construction dynamique (0.43.0) : le formulaire en groupes, les cases à cocher en colonnes souples. */
form.construction fieldset { border: 1px solid var(--trait); border-radius: 6px; margin: 0 0 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
form.construction legend { font-weight: bold; color: var(--accent); padding: 0 4px; }
form.construction .cases { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; }
form.construction label.case { flex-direction: row; align-items: center; gap: 6px; color: var(--texte); font-size: 13px; }
form.construction fieldset .aide { width: 100%; margin: 0; }
/* Bulle du détail des alertes d'une ligne (0.44.0) : posée sur la page, au-dessus des colonnes figées. */
.bulle-alertes { position: absolute; z-index: 20; max-width: 32em; padding: 8px 10px; border-radius: 6px;
  background: #fffbeb; color: #78350f; border: 1px solid #f59e0b; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  font-size: 12px; white-space: pre-line; }
.bulle-alertes[hidden] { display: none; }