/* =========================================================================
   RÉCRÉ — Back-office (EasyAdmin 4), habillé par « Organic »
   On repeint via les variables CSS d'EasyAdmin plutôt qu'en luttant contre
   ses sélecteurs. Elles sont scopées par `.ea-light-scheme` : on ne thème
   que le mode clair, le mode sombre reste celui du bundle.

   Les jetons viennent de `organic.css`, comme pour le front : une seule
   palette, deux interfaces.
   ========================================================================= */

@import './organic.css';

/* EasyAdmin construit **tout** — tableaux, listes déroulantes, modales,
   pagination, champs — depuis deux rampes grises bleutées (`--blue-gray-*`,
   `--true-gray-*`) et un blanc pur. Repeindre les 150 variables qui en
   descendent serait sans fin et se périmerait à la prochaine version ; on
   repeint les rampes elles-mêmes, et le reste suit.

   C'est aussi ce qui règle le défaut le plus visible d'un thème posé sur un
   autre : du gris-bleu qui traîne au milieu d'une page crème. */
:root,
.ea-light-scheme {
    --blue-gray-50: var(--color-neutral-100);
    --blue-gray-100: var(--color-neutral-200);
    --blue-gray-200: var(--color-neutral-300);
    --blue-gray-300: var(--color-neutral-400);
    --blue-gray-400: var(--color-neutral-500);
    --blue-gray-500: var(--color-neutral-600);
    --blue-gray-600: var(--color-neutral-700);
    --blue-gray-700: var(--color-neutral-800);
    --blue-gray-800: var(--color-neutral-900);
    --blue-gray-900: var(--encre);

    --true-gray-50: var(--color-neutral-100);
    --true-gray-100: var(--color-neutral-200);
    --true-gray-200: var(--color-neutral-300);
    --true-gray-300: var(--color-neutral-400);
    --true-gray-400: var(--color-neutral-500);
    --true-gray-500: var(--color-neutral-600);
    --true-gray-600: var(--color-neutral-700);
    --true-gray-700: var(--color-neutral-800);
    --true-gray-800: var(--color-neutral-900);
    --true-gray-900: var(--encre);

    /* Le blanc pur se voit comme un trou sur une crème chaude. */
    --white: var(--color-neutral-100);
    --bs-white: var(--color-neutral-100);

    /* Fonds */
    --body-bg: var(--papier-2);
    --content-bg: var(--papier);
    --content-panel-bg: var(--surface);
    --content-section-border-color: var(--trait-net);
    --content-top-border-color: var(--trait-net);

    /* Le vert acide ne passe pas en couleur de lien : trop clair sur blanc.
       Les liens prennent la version foncée, l'accent reste pour les actions. */
    --color-primary: var(--accent-fonce);

    /* Barre latérale : encre pleine, item actif en accent */
    --sidebar-bg: var(--color-neutral-900);
    --sidebar-border-color: var(--color-neutral-900);
    --sidebar-logo-color: var(--papier);
    --sidebar-menu-color: var(--color-neutral-400);
    --sidebar-menu-icon-color: var(--color-neutral-500);
    --sidebar-menu-header-color: var(--color-neutral-500);
    --sidebar-menu-submenu-color: var(--color-neutral-400);
    --sidebar-menu-active-item-bg: color-mix(in srgb, var(--accent) 26%, transparent);
    --sidebar-menu-active-item-color: var(--color-accent-300);
    --sidebar-menu-badge-bg: var(--accent);
    --sidebar-menu-badge-color: var(--papier);

    /* Action principale : terre cuite du système, texte encre.
       Crème sur terre cuite ne fait que 3:1 — trop peu pour un libellé. */
    --button-primary-bg: var(--accent);
    --button-primary-color: var(--encre);
    --button-primary-border-color: var(--accent-bord);
    --button-primary-icon-color: var(--encre);
    --button-primary-hover-bg: var(--color-accent-400);
    --button-primary-hover-color: var(--encre);
    --button-primary-hover-border-color: var(--accent-bord);
    --button-primary-active-bg: var(--color-accent-300);
    --button-primary-active-color: var(--encre);

    /* Formulaires */
    --form-control-bg: var(--surface);
    --form-input-border-color: var(--trait-net);
    --form-input-hover-border-color: var(--encre-2);

    /* Les pastilles oui/non restaient au bleu EasyAdmin. */
    --badge-boolean-true-bg: var(--succes-bg);
    --badge-boolean-true-color: var(--succes);
    --badge-boolean-true-box-shadow: none;
    --badge-boolean-false-bg: var(--papier-2);
    --badge-boolean-false-color: var(--encre-2);
    --badge-boolean-false-box-shadow: none;

    /* EasyAdmin écrit tous ses textes en ardoise (#1e293b, #64748b) et ses
       liens en indigo. Sur une crème chaude, ça tire au gris-bleu — « do not
       desaturate the palette into greys », dit le système, et il a raison :
       c'est le détail qui trahit un thème posé par-dessus un autre. */
    --text-color: var(--encre);
    --text-color-rgb: 32, 30, 29;
    --text-color-dark: var(--color-neutral-900);
    --text-color-light: var(--color-neutral-500);
    --text-primary-color: var(--encre);
    --text-secondary-color: var(--encre-2);
    --text-tertiary-color: var(--color-neutral-500);
    --text-muted: var(--encre-2);
    --text-on-primary: var(--encre);
    --bs-heading-color: var(--encre);

    --link-color: var(--accent-fonce);
    --link-color-rgb: 140, 73, 26;
    --link-hover-color: var(--color-accent-500);
    --link-hover-color-rgb: 214, 127, 72;
    --link-danger-color: var(--alerte);
    --link-danger-hover-color: var(--color-danger-700);
    --bs-link-color: var(--accent-fonce);
    --bs-link-hover-color: var(--color-accent-500);

    --form-label-color: var(--encre-2);
    --form-input-text-color: var(--encre);
    --form-input-group-text-bg: var(--surface);
    --form-input-group-text-border-color: var(--trait-net);
    --datalist-label-color: var(--color-neutral-600);
    --responsive-table-label-color: var(--color-neutral-600);
    --detail-label-tooltip-underline-color: var(--color-neutral-400);
    --dropdown-link-color: var(--encre);
    --dropdown-link-hover-bg: var(--papier-2);

    --font-family-base: var(--texte);
}

/* Les montants et les quantités doivent s'aligner en colonne. */
.ea-light-scheme body,
.ea-light-scheme .content-body {
    font-variant-numeric: tabular-nums;
}

/* Titres : la même voix que le front de vente. */
.ea-light-scheme .content-header-title .title,
.ea-light-scheme h1.title,
.ea-light-scheme .content-header-title,
.ea-light-scheme .content-header-title .title,
.ea-light-scheme .main-header .logo,
.ea-light-scheme h1,
.ea-light-scheme .stats-titre {
    font-family: var(--titre);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.015em;
}

.ea-light-scheme .main-header .logo,
.ea-light-scheme #main-menu .logo {
    font-family: var(--titre);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.015em;
}

/* =========================================================================
   Page statistiques (gabarit maison)
   ========================================================================= */

.stats-filtres {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 16px 18px;
    margin-bottom: 22px;
}

.stats-filtres .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--encre-2);
    margin-bottom: 5px;
}

.stats-aide {
    font-size: 0.8rem;
    color: var(--encre-2);
    margin: 10px 0 0;
}

/* Sur un large ecran, un tableau a trois colonnes etale sur 1250 px oblige
   l'oeil a traverser la page pour relier un vendeur a son total. Deux
   tableaux cote a cote reglent le probleme. */
.stats-paire {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.stats-paire .stats-bloc { margin-bottom: 0; }

/* Un stock a zero ou negatif signale un decrochage du suivi. */
.stock-alerte {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--alerte-bg);
    color: var(--alerte);
    font-size: 0.8rem;
    font-weight: 700;
}

.stats-tuiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.stats-tuile {
    padding: 16px 18px;
    border-radius: var(--r-xl);
    background: var(--surface);
}

.stats-tuile .cle {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--encre-2);
    margin-bottom: 6px;
}

.stats-tuile .val {
    font-family: var(--chiffres);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--encre);
}

.stats-tuile-forte { background: var(--color-neutral-900); }
.stats-tuile-forte .cle { color: var(--color-neutral-400); }
.stats-tuile-forte .val { color: var(--color-accent-300); }

.stats-bloc {
    background: var(--surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 22px;
}

.stats-bloc-entete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 18px 12px;
}

.stats-bloc-entete h2 { font-size: 1rem; font-weight: 700; margin: 0; flex-grow: 1; color: var(--encre); }
.stats-bloc-entete .mention { font-size: 0.78rem; color: var(--encre-2); }

.stats-bloc table { width: 100%; border-collapse: collapse; margin: 0; }

.stats-bloc th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-2);
    text-align: left;
    padding: 0 18px 9px;
    white-space: nowrap;
}

.stats-bloc td {
    font-size: 0.92rem;
    padding: 12px 18px;
    border-top: 1.5px solid var(--trait-net);
}

.stats-bloc .num { text-align: right; }
.stats-bloc .vide { color: var(--encre-2); }

.stats-bloc .pied td {
    border-top: 2.5px solid var(--encre);
    font-weight: 700;
}

/* Écarts de caisse : espèces et carte côte à côte, mais visiblement séparés.
   Un filet vertical suffit à dire que ce sont deux colonnes de chiffres qui ne
   s'additionnent pas. */
.stats-ecarts .groupe {
    text-align: center;
    padding-bottom: 5px;
    color: var(--encre);
}

.stats-ecarts .groupe-suivant { border-left: 1.5px solid var(--trait-net); }
.stats-ecarts td.groupe-suivant { border-left: 1.5px solid var(--trait-net); }
.stats-ecarts tbody td { white-space: nowrap; }

.stats-note {
    padding: 11px 18px;
    border-top: 1.5px solid var(--trait-net);
    font-size: 0.8rem;
    color: var(--encre-2);
}

.ecart {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
}

/* Le signe et la flèche portent l'information autant que la couleur. */
.ecart-manque { background: var(--alerte-bg); color: var(--alerte); }
.ecart-surplus { background: var(--succes-bg); color: var(--succes); }
.ecart-juste { background: var(--papier-2); color: var(--encre-2); }

/* Inventaire : le vert est réservé au comptage qui **tombe juste**.
   Tout écart est rouge, dans les deux sens. Un excédent n'est pas une bonne
   nouvelle — il dit que des entrées ont été oubliées, ou que le comptage est
   faux —, et le distinguer par une seconde couleur ne faisait qu'hésiter sur
   la gravité. Le signe porte le sens, la couleur dit « celui-là, regarde-le ».

   Ces deux classes sont propres à l'inventaire : ailleurs — écart de caisse,
   évolution du chiffre — un zéro veut dire « stable », pas « conforme », et un
   surplus d'espèces se lit autrement. */
.ecart-conforme { background: var(--succes-bg); color: var(--succes); }
.ecart-excedent { background: var(--alerte-bg); color: var(--alerte); }

.stats-total-ecarts {
    font-family: var(--chiffres);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

@media (min-width: 992px) {
    .stats-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 1200px) {
    .stats-paire { grid-template-columns: 1fr 1.25fr; }
}

/* === TABLEAU DE BORD =================================================== */

.tdb-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--trait-net);
    border-top: 1.5px solid var(--trait-net);
}

.tdb-chiffre {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--surface);
}

.tdb-chiffre .etiquette {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-2);
}

.tdb-chiffre .valeur {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--encre);
}

/* Trois niveaux, trois lectures. Le décrochage est le plus grave : il ne dit
   pas qu'il manque de la marchandise, il dit que le chiffre ment. */
.pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.alerte-attention { background: var(--attention-bg); color: var(--attention-texte); }
.alerte-rupture { background: var(--alerte-bg); color: var(--alerte-texte); }
.alerte-decrochage { background: var(--alerte-forte); color: var(--color-neutral-100); }

/* Pastille de comptage dans le menu. */
.menu-badge {
    display: inline-block;
    min-width: 20px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--alerte);
    color: var(--color-neutral-100);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

/* Un écart au-delà du seuil de l'association : le cerclé dit « celui-là,
   regarde-le », sans changer la couleur qui dit déjà manque ou surplus. */
.ecart-hors-seuil {
    box-shadow: 0 0 0 2px var(--alerte);
    font-weight: 800;
}

/* === LOT 4 : ÉVOLUTION, 20/80, RUPTURES ================================ */

.stats-evolution {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--trait-net);
    border-top: 1.5px solid var(--trait-net);
}

.stats-evol-bloc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--surface);
}

.stats-evol-bloc .cle {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-2);
}

.stats-evol-bloc .val {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--encre);
}

.val-pale { color: var(--encre-2); }
.val-hausse { color: var(--succes); }
.val-baisse { color: var(--alerte); }

/* La ligne qui compte dans les 80 premiers pour cent : soulignée, pas colorée.
   La couleur dit « attention » ; ici on dit juste « celles-là font le chiffre ». */
.ligne-2080 td { box-shadow: inset 3px 0 0 var(--encre); }
.ligne-2080 td:first-child { font-weight: 700; }

/* La part cumulée se lit mieux comme une barre que comme un nombre : c'est le
   franchissement des 80 % qu'on cherche, pas la valeur exacte. */
.part-cumulee {
    position: relative;
    display: inline-block;
    min-width: 78px;
    padding: 2px 8px;
    border-radius: var(--r-s);
    background: var(--papier-2);
    overflow: hidden;
}

.part-barre {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--trait-net);
}

.part-texte {
    position: relative;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Une estimation doit se signaler comme telle, à l'endroit même où on la lit. */
.estim {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--attention-texte);
}

/* L'historique du stock : une barre par jour. Pas un graphique JavaScript —
   ces mêmes écrans doivent pouvoir partir en PDF, et un canvas ne s'y rend pas. */
.histo {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 110px;
    padding: 14px 18px;
    border-top: 1.5px solid var(--trait-net);
}

.histo-jour {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 3px;
}

.histo-barre {
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--sauge);
}

.histo-zero { background: var(--alerte); }
.histo-negatif { background: var(--alerte-forte); }

/* === CADENCIER ========================================================= */

/* Beaucoup de colonnes : la table défile horizontalement dans son bloc, et la
   colonne des produits reste collée à gauche pour qu'on sache quoi on lit. */
.cadencier-defilant { overflow-x: auto; }

.cadencier { min-width: 100%; }
.cadencier th, .cadencier td { white-space: nowrap; }

.cadencier .colle {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
}

.cadencier thead .colle { background: var(--papier); }

/* La période en cours est incomplète : on la distingue plutôt que de laisser
   croire à une chute des ventes un mardi matin. */
.cadencier .en-cours { background: var(--color-neutral-200); }
.cadencier .sep { border-left: 1.5px solid var(--trait-net); }

.couverture {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    background: var(--succes-bg);
    color: var(--succes);
}

.couverture-juste { background: var(--attention-bg); color: var(--attention-texte); }
.couverture-courte { background: var(--alerte-bg); color: var(--alerte); }

/* L'aide contextuelle dans le back-office : même composant, palette EasyAdmin. */
.aide-ecran {
    margin-bottom: 18px;
    border-radius: var(--r-xl);
    background: var(--surface);
    overflow: hidden;
}

.aide-ecran summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
}

.aide-ecran summary::-webkit-details-marker { display: none; }
.aide-ecran summary:hover { background: var(--papier-2); }

.aide-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 999px;
    background: var(--encre);
    color: var(--papier);
    font-weight: 800;
    font-size: 0.82rem;
}

.aide-titre { font-weight: 700; color: var(--encre); }
.aide-invite { margin-left: auto; font-size: 0.78rem; color: var(--encre-2); }

.aide-corps { padding: 4px 16px 16px; border-top: 1px solid var(--trait-net); }
.aide-chapo { font-size: 0.92rem; line-height: 1.55; padding: 12px 0; color: var(--encre); }
.aide-point { padding: 9px 0; border-top: 1px solid var(--papier-2); }
.aide-point h3 { font-size: 0.86rem; font-weight: 700; margin-bottom: 3px; color: var(--encre); }
.aide-point p { font-size: 0.86rem; line-height: 1.55; color: var(--encre-2); }
.aide-lien { padding-top: 12px; font-size: 0.84rem; }

/* Les mots de passe générés : lisibles, sélectionnables, et imprimables — cette
   page est faite pour être imprimée puis découpée. */
.mdp {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--papier-2);
    color: var(--encre);
    user-select: all;
}

@media print {
    #main-menu, .content-top, .aide-ecran, .imprimer, .btn { display: none !important; }
    .stats-bloc { break-inside: avoid; }
}

/* === GRAPHIQUES ANNUELS ================================================

   Bâtons en CSS pur, comme l'histogramme du front et les barres du 20/80 :
   un canvas JavaScript ne se rend pas dans un PDF, et ces blocs doivent
   pouvoir s'exporter. Le PDF les reprend en barres horizontales — Dompdf ne
   fait pas de flexbox — mais les chiffres sont les mêmes. */

.batons {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 210px;
    padding: 18px 20px 0;
    border-top: 1px solid var(--trait);
}

.baton {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.baton .val {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--encre-2);
}

.baton .barre {
    width: 100%;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
}

/* Le mois le plus fort se distingue sans changer de teinte : c'est un
   maximum, pas une catégorie. */
.baton-fort .val { color: var(--encre); }
.baton-fort .barre { background: var(--accent-bord); }

/* Un mois sans vente n'est pas une colonne vide : c'est un trait, et son
   étiquette s'efface. Un mois à venir non plus — il n'a pas encore eu lieu. */
.baton-vide .barre { background: var(--trait-net); }
.baton-vide .val { color: var(--color-neutral-500); }

.batons-legende {
    display: flex;
    gap: 10px;
    padding: 8px 20px 4px;
}

.batons-legende span {
    flex: 1 1 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--encre-2);
}

.batons-legende .futur { color: var(--color-neutral-500); }

/* --- Camembert 20/80 ---------------------------------------------------

   Une seule teinte, du foncé au clair : il encode un RANG, pas des
   identités. Sept couleurs catégorielles ne passent aucun test de
   lisibilité dans cette palette chaude — et le 20/80 ne demande pas
   « qui est qui », il demande « lesquels font le chiffre ». */

.camembert-bloc {
    display: flex;
    gap: 34px;
    align-items: center;
    padding: 22px 24px 6px;
    border-top: 1px solid var(--trait);
}

.camembert {
    position: relative;
    flex: 0 0 auto;
    width: 248px;
    height: 248px;
    border-radius: 50%;
}

.camembert-trou {
    position: absolute;
    inset: 62px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.camembert-trou .nombre {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2.1rem;
    line-height: 1;
}

.camembert-trou .quoi {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--encre-2);
    text-align: center;
    line-height: 1.3;
}

.camembert-legende { flex: 1 1 0; }

.camembert-legende .ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--trait);
}

.camembert-legende .pastille-couleur {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.camembert-legende .nom { flex: 1 1 0; font-weight: 700; font-size: 0.94rem; }
.camembert-legende .num { font-size: 0.94rem; font-weight: 700; text-align: right; }
.camembert-legende .part { font-size: 0.86rem; color: var(--encre-2); text-align: right; width: 52px; }
.camembert-legende .cumul { font-size: 0.78rem; font-weight: 700; color: var(--sauge-fonce); text-align: right; width: 56px; }

/* La ligne qui franchit les 80 % porte le trait : c'est là que se coupe le
   20/80, et c'est la seule information que ce bloc doit rendre évidente. */
.camembert-legende .seuil { border-bottom: 2px solid var(--sauge-fonce); }

.camembert-legende .traine .nom,
.camembert-legende .traine .num { font-weight: 400; color: var(--encre-2); }

.camembert-seuil-titre {
    padding: 7px 0 9px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sauge-fonce);
}

/* --- Saisonnalité : petits multiples -----------------------------------

   Une courbe par produit, chacune dans sa case, toutes à la même échelle.
   Sept courbes superposées demanderaient sept teintes distinguables — et
   resteraient illisibles. Ici on compare des formes. */

.multiples {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 22px 8px;
    border-top: 1px solid var(--trait);
}

.multiple { display: flex; flex-direction: column; gap: 7px; }

.multiple-entete {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.multiple-entete .nom { font-weight: 700; font-size: 0.9rem; flex: 1 1 0; }
.multiple-entete .total { font-size: 0.78rem; font-weight: 700; color: var(--encre-2); }

.multiple svg { width: 100%; height: 80px; display: block; }
.multiple-bornes { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--color-neutral-500); }

@media (max-width: 1100px) {
    .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camembert-bloc { flex-direction: column; align-items: stretch; gap: 20px; }
    .camembert { align-self: center; }
}

/* Deux blocs côte à côte sur la fiche produit : « ses jours » et « ce qu'il
   pèse » se lisent ensemble — l'un dit quand, l'autre dit combien ça compte. */
.stats-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.part-bloc {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-top: 1px solid var(--trait);
}

.camembert-petit {
    width: 108px;
    height: 108px;
}

.camembert-petit .camembert-trou { inset: 27px; }
.camembert-trou .nombre-petit { font-size: 1.3rem; font-weight: 800; }

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