/* =========================================================================
   RÉCRÉ — Front de vente, habillé par le design system « Organic »
   Crème et sable, terre cuite pour l'action, sauge pour le positif.
   Tous les jetons viennent de organic.css : aucune couleur, aucune police
   et aucun rayon n'est écrit en dur ici.

   Mobile-first : le socle vise le téléphone d'un élève au stand, les paliers
   >= 600px et >= 900px élargissent. Les tailles de cible tactile et les
   positions collantes sont **celles de l'application**, pas celles du
   système : on encaisse au pouce, debout, en quinze minutes.
   ========================================================================= */

@import './organic.css';

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Un `display` explicite l'emporte sur la feuille du navigateur : sans cette
   règle, un bouton porté par `.btn` reste affiché alors que le JavaScript
   vient de le marquer `hidden`. Le cas s'était déjà présenté sur le panier. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--texte);
    font-variant-numeric: tabular-nums;
    background: var(--papier);
    color: var(--encre);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--titre);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.015em;
    line-height: 1.12;
}

/* Les chiffres restent en Figtree : voir organic.css. */
.chiffre { font-family: var(--chiffres); font-weight: 800; letter-spacing: -0.03em; }

a { color: var(--accent-fonce); text-decoration: none; font-weight: 600; }
a:hover { color: var(--encre); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* === BARRE DU HAUT ===================================================== */

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1.5px solid var(--trait);
    padding: 0 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
}

nav strong {
    font-family: var(--titre);
    font-size: 1.4rem;
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.04em;
    color: var(--encre);
    margin-right: auto;
}

/* --- Bouton burger : téléphone et tablette portrait --- */

.nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: -8px;
    border-radius: var(--r-s);
    color: var(--encre);
}

.nav-burger:hover { background: var(--papier-2); }
.nav-burger-fermer { display: none; }
.nav-ouvert .nav-burger-ouvrir { display: none; }
.nav-ouvert .nav-burger-fermer { display: block; }

/* Le panneau se déplie sous la barre, sans recouvrir le contenu à l'aveugle. */
.nav-liens {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 14px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--trait);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-neutral-900) 14%, transparent);
}

.nav-ouvert .nav-liens { display: flex; }

.nav-identite {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-2);
    padding: 8px 12px 4px;
}

nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    color: var(--encre);
    border-radius: var(--r-s);
}

nav a:hover { background: var(--papier-2); }

/* === MISE EN PAGE ====================================================== */

.page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}

h1 {
    font-size: 1.75rem;
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
    margin-bottom: 20px;
}

.login-container,
.page-etroite {
    max-width: 460px;
    margin: 0 auto;
    padding: 28px 20px 40px;
}

/* Sur l'ouverture et la cloture, l'information utile est le nom de la caisse.
   Le verbe passe en surtitre. */
.page-etroite .surtitre,
.page-large .surtitre,
.dialog .surtitre {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-2);
    margin-bottom: 6px;
}

.page-etroite h1,
.page-large h1 {
    font-size: 2.2rem;
    font-weight: var(--font-heading-weight);
    line-height: 1.05;
    margin-bottom: 24px;
}

/* La phrase qui suit le titre, quand un écran doit se présenter avant de
   demander quelque chose. */
.page-etroite .chapo,
.page-large .chapo {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--encre-2);
    margin-bottom: 22px;
}

.login-container h1 {
    font-size: 3rem;
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.login-container h2 {
    font-family: var(--texte);
    font-size: 1rem;
    font-weight: 500;
    color: var(--encre-2);
    margin-bottom: 28px;
}

.login-container p { margin-top: 20px; font-size: 0.9rem; color: var(--encre-2); }

/* === FORMULAIRES ======================================================= */

fieldset { border: none; margin-bottom: 24px; }

fieldset legend {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--encre-2);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--trait);
    width: 100%;
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--encre-2);
    margin-bottom: 7px;
}

.form-control {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    font-size: 1rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--trait);
    border-radius: var(--pilule);
    background: var(--surface);
    color: var(--encre);
    outline: none;
}

.form-control:focus { border: 2px solid var(--accent); padding: 0 15.5px; }
.form-control::placeholder { color: var(--encre-2); opacity: 0.7; }

/* Montants : gros chiffres, on tape sans viser. */
.form-control-montant {
    height: 78px;
    font-family: var(--chiffres);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    border-width: 2px;
    border-color: var(--encre);
}

/* Un montant sans unite se tape a l'aveugle : le symbole reste visible. */
.champ-montant { position: relative; display: flex; align-items: center; }
.champ-montant .form-control-montant { padding-right: 62px; }

.champ-montant .devise {
    position: absolute;
    right: 20px;
    font-family: var(--chiffres);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--encre-2);
    pointer-events: none;
}

/* Les fleches du champ nombre viendraient percuter le symbole. */
.form-control-montant { appearance: textfield; -moz-appearance: textfield; }
.form-control-montant::-webkit-outer-spin-button,
.form-control-montant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.password-wrapper { position: relative; display: flex; align-items: center; }
.password-wrapper .form-control { padding-right: 60px; }

.password-toggle {
    position: absolute;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 0;
    border-radius: var(--r-s);
    color: var(--encre-2);
}

.password-toggle::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6858' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.password-toggle.active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.password-toggle:hover { background: var(--papier-2); }

/* === BOUTONS =========================================================== */

/* Organic dessine des boutons de 36 px en pilule. On garde la **pilule** et on
   garde les 52 px : la forme vient du système, la taille vient de l'usage —
   un pouce sur un téléphone, debout, pendant une récré. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--cible);
    padding: 0 26px;
    font-family: var(--texte);
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--pilule);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

/* Organic pose « crème sur terre cuite » : 3,04:1. C'est assez pour de
   l'icône ou du grand titre, pas pour un libellé de 16 px qu'un élève lit en
   encaissant. On garde la teinte du système et on passe le texte à l'encre —
   4,6:1. Le rouge, lui, descend d'un cran dans sa rampe. */
.btn-primary {
    width: 100%;
    background: var(--accent);
    color: var(--encre);
}

/* Le texte étant à l'encre, les états montent dans la rampe au lieu d'en
   descendre : un fond plus sombre rendrait le libellé illisible au moment
   précis où l'on appuie. */
.btn-primary:hover { background: var(--color-accent-400); }

/* Sans survol sur un écran tactile, l'enfoncement est le seul retour : on
   descend d'un cran dans la rampe **et** d'un pixel. */
.btn-primary:active { background: var(--color-accent-300); transform: translateY(1px); }

.btn-primary:disabled {
    background: var(--papier-2);
    color: var(--encre-3);
    cursor: not-allowed;
    opacity: 0.45;
}

.btn-success { background: var(--sauge-fonce); color: var(--papier); }
.btn-success:hover { background: var(--color-accent-2-800); }

.btn-danger { background: var(--color-danger-700); color: var(--papier); }
.btn-danger:hover { background: var(--color-danger-900); }

.btn-outline {
    background: transparent;
    color: var(--encre);
    border: 1px solid var(--trait);
}

.btn-outline:hover { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.btn-outline:active { background: color-mix(in srgb, var(--encre) 14%, transparent); }

.btn-lg { min-height: 58px; padding: 0 34px; font-size: 1.05rem; }
.btn-bloc { width: 100%; }

/* === MESSAGES ========================================================== */

.flash, .alert {
    margin: 12px 16px 0;
    padding: 14px 16px;
    border-radius: var(--r-m);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
}

.flash-success, .alert-success {
    background: var(--succes-bg);
    color: var(--succes);
    border-left: 5px solid var(--succes);
}

.flash-error, .flash-danger, .alert-danger {
    background: var(--alerte-bg);
    color: var(--alerte-texte);
    border-left: 5px solid var(--alerte);
}

.flash-warning, .alert-warning {
    background: var(--papier-2);
    color: var(--encre-2);
    border-left: 5px solid var(--encre-2);
}

.login-container .alert, .page-etroite .alert, .page-content .alert { margin-left: 0; margin-right: 0; }

/* === CHOIX DE LA CAISSE ================================================ */

.registers-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

.register-card {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.register-card h2 { font-size: 1.25rem; font-weight: 700; }

.register-card p {
    font-size: 0.85rem;
    color: var(--encre-2);
    margin-top: 3px;
}

.register-entete { display: flex; align-items: flex-start; gap: 10px; }
.register-entete > div { flex-grow: 1; }

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pastille::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.pastille-ouverte { background: var(--accent); color: var(--encre); }
.pastille-fermee { background: var(--papier-2); color: var(--encre-2); }

.register-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.register-actions:has(> :only-child) { grid-template-columns: 1fr; }

.register-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: var(--pilule);
    font-size: 1rem;
    font-weight: 700;
}

.register-card a.action-principale {
    background: var(--accent);
    color: var(--encre);
}

.register-card a.action-principale:hover { background: var(--color-accent-400); }
.register-card a.action-principale:active { background: var(--color-accent-300); }

.register-card a.action-secondaire {
    background: var(--surface);
    color: var(--encre);
    border: 1.5px solid var(--trait);
}

.register-card a.action-secondaire:hover { background: var(--papier-2); }

/* === GRILLE PRODUITS =================================================== */

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

.product-card {
    background: var(--surface);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-m);
    padding: 14px 14px 12px;
    min-height: 122px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.product-card:hover { border-color: var(--encre-2); }
.product-card:active { transform: scale(0.985); }

.product-card.product-choisi {
    border: 2.5px solid var(--accent);
    padding: 13px 13px 11px;
    box-shadow: var(--ombre);
}

.product-entete { display: flex; align-items: flex-start; gap: 6px; }

.product-card h3 {
    font-family: var(--texte);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    flex-grow: 1;
    letter-spacing: 0;
}

.product-badge {
    display: none;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--encre);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    flex-shrink: 0;
}

.product-choisi .product-badge { display: block; }

.product-prix {
    font-family: var(--chiffres);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: auto;
}

.product-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    min-height: 22px;
}

.product-stock { font-size: 0.75rem; font-weight: 500; color: var(--encre-2); }

.product-stock-alerte {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--alerte);
}

.product-retirer {
    display: none;
    width: 36px;
    height: 36px;
    margin: -7px -5px -7px 0;
    border: 1.5px solid var(--trait);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--encre);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.product-choisi .product-retirer { display: flex; }
.product-retirer:hover { background: var(--papier-2); }

/* === BARRE DE VENTE ==================================================== */

.sale-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--surface);
    border-top: 1.5px solid var(--trait);
    box-shadow: var(--ombre-haute);
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Compte, « Vider » et total tiennent sur une seule ligne : sur un telephone,
   chaque rangee de la barre est une rangee de produits en moins. */
.sale-resume { display: flex; align-items: baseline; gap: 10px; }

.sale-resume .compte { font-size: 0.82rem; font-weight: 600; color: var(--encre-2); }

.sale-vider { font-size: 0.82rem; font-weight: 600; color: var(--alerte); }

/* Le montant reste cale a droite, que « Vider » soit affiche ou non. */
.sale-resume .montant {
    margin-left: auto;
    font-family: var(--chiffres);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    background: var(--papier-2);
    border-radius: var(--r-m);
}

.payment-methods label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border-radius: var(--r-s);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--encre-2);
    cursor: pointer;
}

.payment-methods label:has(input:checked) {
    background: var(--surface);
    color: var(--encre);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-neutral-900) 16%, transparent);
}

.payment-methods input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.sale-footer button[type="submit"] { min-height: 58px; font-size: 1.05rem; }

/* La barre fixe ne doit pas manger la fin de la grille. */
.page-vente { padding-bottom: 205px; }

/* === SESSION (ouverture / clôture) ===================================== */

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

.session-summary .ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.session-summary .ligne .cle { color: var(--encre-2); }
.session-summary .ligne .val { font-weight: 600; }

.session-summary .separateur { height: 1.5px; background: var(--trait); margin: 12px 0; }

.session-summary .attendu {
    font-family: var(--chiffres);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.session-summary .note { font-size: 0.78rem; color: var(--encre-2); margin-top: 10px; line-height: 1.5; }

.montants-rapides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.montants-rapides button {
    height: 48px;
    border: 1.5px solid var(--trait);
    border-radius: var(--r-m);
    background: var(--surface);
    font-size: 0.95rem;
    font-weight: 600;
}

.montants-rapides button:hover { border-color: var(--encre); }

/* Le fond standard : proposé sur sa propre ligne, avant les montants ronds,
   parce que c'est la réponse juste neuf fois sur dix. Il reste en retrait du
   vert plein, réservé à l'action — ici on propose, on ne valide pas. */
.montant-standard {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 16px;
    border: 2px solid var(--accent-bord);
    border-radius: var(--pilule);
    background: var(--surface);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-fonce);
}

.montant-standard:hover {
    border-color: var(--encre);
    color: var(--encre);
}

.encart {
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--r-m);
    background: var(--papier-2);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--encre-2);
    margin-top: 18px;
}

/* === FICHE DE COMPTAGE ================================================= */

.comptage {
    background: var(--surface);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.comptage-entete { padding: 18px 18px 14px; }
.comptage-entete h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.comptage-entete p { font-size: 0.85rem; color: var(--encre-2); }

.comptage-groupe {
    padding: 10px 18px;
    background: var(--papier-2);
    border-top: 1.5px solid var(--trait);
    border-bottom: 1.5px solid var(--trait);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-2);
}

.comptage-ligne {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--trait);
}

.comptage-ligne:last-of-type { border-bottom: none; }

.comptage-ligne .coupure {
    font-family: var(--chiffres);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Cible tactile pleine hauteur : on saisit vite, parfois à une main. */
.comptage-ligne input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--encre);
    background: var(--papier);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-s);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.comptage-ligne input::-webkit-outer-spin-button,
.comptage-ligne input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.comptage-ligne input:focus { border: 2px solid var(--accent); }

.comptage-ligne .sous-total {
    text-align: right;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--encre-2);
}

.sous-total-rempli { color: var(--encre); }

.comptage-total {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 18px;
    border-top: 2.5px solid var(--encre);
}

.comptage-total .etiquette {
    flex-grow: 1;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-2);
}

.comptage-total .montant {
    font-family: var(--chiffres);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.repli { margin-top: 18px; }

.repli summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--encre-2);
    padding: 10px 0;
}

.repli summary:hover { color: var(--encre); }

.aide { font-size: 0.78rem; color: var(--encre-2); line-height: 1.5; margin-top: 8px; }

/* Confirmation avant une clôture, qui est irréversible. */
.confirmation {
    margin-top: 20px;
    padding: 18px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 2.5px solid var(--alerte);
    outline: none;
}

/* L'avertissement doit se voir d'un pouce de distance, sur un téléphone,
   dans un couloir bruyant : capitales, rouge, et rien d'autre autour. */
.confirmation-alerte {
    font-family: var(--titre);
    font-size: 1.4rem;
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--alerte);
    margin-bottom: 8px;
}

.confirmation-sous {
    font-size: 0.86rem;
    color: var(--encre-2);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Le détail des coupures saisies : c'est la ligne aberrante qu'on cherche,
   pas le total. La quantité est donc mise en avant autant que le montant. */
.recap-detail {
    list-style: none;
    margin: 0 0 6px;
    padding: 12px 0;
    border-top: 1px solid var(--trait);
    border-bottom: 2px solid var(--encre);
}

.recap-detail li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    font-size: 0.95rem;
}

.recap-detail .coupure {
    flex-basis: 4.5rem;
    font-weight: 600;
    color: var(--encre-2);
}

.recap-detail .qte {
    flex-grow: 1;
    font-family: var(--chiffres);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.recap-detail .sous {
    text-align: right;
    font-weight: 600;
    color: var(--encre-2);
}

/* Une ligne qui n'a rien reçu doit se voir dans le récapitulatif, pas en
   disparaître : c'est la ligne qu'on oublie, et la commande se ferme dessus. */
.recap-detail .recap-rien .coupure { color: var(--alerte-texte); }

.recap-detail .recap-rien .qte {
    font-family: var(--texte);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--alerte);
}


.confirmation .ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 0.95rem;
}

.confirmation .ligne .cle { color: var(--encre-2); }

.confirmation .ligne .val {
    font-family: var(--chiffres);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.confirmation .note {
    font-size: 0.82rem;
    color: var(--encre-2);
    line-height: 1.5;
    margin: 14px 0 16px;
}

/* === BILAN DE CLÔTURE ================================================== */

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

.bilan-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.bilan-entete h2 { font-size: 1.15rem; font-weight: 700; flex-grow: 1; }

.bilan .ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    padding: 7px 0;
    border-bottom: 1px solid var(--trait);
}

.bilan .ligne:last-of-type { border-bottom: none; }
.bilan .ligne .cle { color: var(--encre-2); }
.bilan .ligne .val { font-weight: 600; }
.bilan .note { font-size: 0.78rem; color: var(--encre-2); line-height: 1.5; margin-top: 12px; }

/* La recette à remettre est le seul chiffre de cet écran qui demande un geste :
   compter les billets et les donner. Elle se lit donc comme un total. */
.bilan .ligne-forte {
    border-top: 2px solid var(--encre);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 12px;
}

.bilan .ligne-forte .cle {
    font-weight: 600;
    color: var(--encre);
}

.bilan .ligne-forte .val {
    font-family: var(--chiffres);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Le signe et la flèche portent l'information autant que la couleur. */
.ecart {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.ecart-manque { background: var(--alerte-bg); color: var(--alerte-texte); }
.ecart-surplus { background: var(--succes-bg); color: var(--succes); }
.ecart-juste { background: var(--papier-2); color: var(--encre-2); }

.fiche { margin-top: 6px; }

.fiche-ligne {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 0.92rem;
}

.fiche-ligne .coupure { font-family: var(--chiffres); font-weight: 700; }
.fiche-ligne .quantite { color: var(--encre-2); }
.fiche-ligne .sous-total { text-align: right; font-weight: 600; }

/* === LIENS DE RETOUR =================================================== */

a.back-link { font-size: 0.9rem; font-weight: 500; color: var(--encre-2); }
a.back-link:hover { color: var(--encre); }

/* === ACCUEIL =========================================================== */

.hero {
    padding: 56px 20px 48px;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

/* Le filtre du système : la photographie est désaturée, adoucie et éclaircie
   pour se poser *dans* la crème plutôt que par-dessus. C'est repris tel quel
   du handoff. */
.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

/* Angles franchement arrondis, et volontairement **inégaux** : deux coins
   larges en diagonale, deux serrés. Le système demande des formes molles ;
   un rectangle à rayon constant reste un rectangle. On s'arrête là plutôt
   que de partir sur une vraie forme organique — elle mangerait les visages,
   qui sont ce que la photo a à dire.

   Le grand rayon **suit la largeur** : 64 px fixes sur une photo de 335 px
   entament le visage de la vendeuse, en haut à gauche. */
.hero-photo {
    margin: 32px 0 0;
    overflow: hidden;
    border-radius:
        clamp(var(--r-m), 7vw, calc(var(--r-xl) * 2))
        var(--r-l)
        clamp(var(--r-m), 7vw, calc(var(--r-xl) * 2))
        var(--r-l);
    box-shadow: var(--ombre-carte);
}

.hero-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-title {
    font-size: 3.4rem;
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin-bottom: 14px;
}

.hero-marque { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero-marque .trait { width: 40px; height: 6px; border-radius: 999px; background: var(--accent); }

.hero-subtitle { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }

.hero-description {
    font-size: 1rem;
    color: var(--encre-2);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 46ch;
}

.hero-actions { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.hero-actions .btn { width: 100%; }

.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 48px;
}

.feature-card {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 22px;
}

.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 0.9rem; color: var(--encre-2); line-height: 1.55; }

.feature-icon { color: var(--accent-fonce); margin-bottom: 12px; line-height: 0; }

.footer-home {
    padding: 28px 20px 40px;
    text-align: center;
    color: var(--encre-2);
    font-size: 0.82rem;
    border-top: 1.5px solid var(--trait);
}

/* === TABLETTE ========================================================== */

@media (min-width: 600px) {
    .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .registers-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .hero-actions { flex-direction: row; max-width: none; }
    .hero-actions .btn { width: auto; }
}

/* === BUREAU ============================================================ */

@media (min-width: 900px) {
    nav { padding: 0 24px; min-height: 64px; }

    /* Au-delà de la tablette portrait, les liens reprennent leur place en ligne. */
    .nav-burger { display: none; }

    .nav-liens {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .nav-identite {
        padding: 0 8px 0 0;
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    nav a { min-height: 38px; font-size: 0.9rem; }

    .page-content { padding: 28px 24px 40px; }
    h1 { font-size: 2.1rem; margin-bottom: 24px; }

    .login-container, .page-etroite { padding: 48px 24px 60px; }

    .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .product-card { min-height: 132px; padding: 16px; }
    .product-prix { font-size: 1.75rem; }

    .registers-list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px 40px; }

    /* Au bureau la barre reste en bas mais ne couvre plus tout l'écran. */
    .sale-footer {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 14px 24px;
        left: 50%;
        right: auto;
        bottom: 16px;
        transform: translateX(-50%);
        width: min(1100px, calc(100% - 48px));
        border: 1.5px solid var(--trait);
        border-radius: var(--r-xl);
        box-shadow: var(--ombre);
    }

    .sale-resume { flex-grow: 1; gap: 14px; }
    .sale-resume .montant { font-size: 2.2rem; }
    .payment-methods { width: 260px; flex-shrink: 0; }
    .sale-footer button[type="submit"] { width: auto; padding: 0 32px; }

    .page-vente { padding-bottom: 140px; }

    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .hero-title { font-size: 4.6rem; }
    .hero-subtitle { font-size: 1.35rem; }

    /* Le texte tient la gauche, la photo occupe la droite — la mise en page
       asymétrique que demande le système. Le texte garde la colonne la plus
       étroite : c'est lui qui doit se lire d'un coup d'œil. */
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 40px;
        padding: 72px 24px 56px;
    }

    .hero-photo { margin: 0; }
}

/* Entre les deux, la photo n'a pas besoin de toute la largeur : elle
   deviendrait une bannière, et la scène se lirait de trop loin. */
@media (min-width: 600px) and (max-width: 899px) {
    .hero-photo { max-width: 560px; }
}

/* Sur un très grand écran, la page respire déjà ; on lui donne l'air que les
   formes rondes réclament plutôt que d'étirer la photo. */
@media (min-width: 1280px) {
    .hero { gap: 56px; padding: 96px 24px 72px; }
}

/* 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;
}

/* Le motif d'un écart important : encadré comme l'écart qu'il explique. */
.bilan-alerte {
    border-color: var(--alerte);
    border-width: 2px;
}

.bilan-alerte .bilan-entete h2 { color: var(--alerte); }

.bilan .motif {
    font-size: 1rem;
    line-height: 1.5;
    padding: 10px 0 2px;
}

.aide-erreur { color: var(--alerte); font-weight: 600; }

/* === COMMANDES ========================================================= */

/* Une ligne de commande porte plus d'information qu'une ligne de comptage :
   le nom, l'état du stock, et le champ. D'où deux niveaux plutôt qu'un. */
.cmd-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-top: 1px solid var(--trait);
}

.cmd-produit {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmd-nom { font-weight: 700; }

.cmd-detail {
    font-size: 0.78rem;
    color: var(--encre-2);
}

.cmd-ligne input {
    width: 82px;
    height: 46px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1.5px solid var(--trait);
    border-radius: var(--r-s);
    background: var(--papier);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.cmd-ligne input::-webkit-outer-spin-button,
.cmd-ligne input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmd-ligne input:focus { border: 2px solid var(--accent); }

/* La couverture se lit comme sur le cadencier : même code, même sens. */
.couverture {
    display: inline-block;
    padding: 1px 7px;
    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); }

.pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.cmd-a_valider { background: var(--attention-bg); color: var(--attention-texte); }
.cmd-passee { background: var(--papier-2); color: var(--encre-2); }
.cmd-receptionnee { background: var(--succes-bg); color: var(--succes); }
.cmd-refusee { background: var(--alerte-bg); color: var(--alerte-texte); }

/* === CHIFFRES CÔTÉ ÉLÈVES ============================================== */

.chiffres-filtres { margin-bottom: 18px; }
.chiffres-filtres .form-group { margin-bottom: 0; }

/* Un histogramme en CSS : une colonne par jour, la valeur au-dessus. Pas de
   bibliothèque de graphiques — ce serait 80 ko pour six barres. */
.histo-jours {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding: 16px 18px 0;
    border-top: 1px solid var(--trait);
}

.histo-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
    gap: 4px;
}

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

.histo-b {
    width: 100%;
    min-height: 3px;
    border-radius: var(--r-s) var(--r-s) 0 0;
    background: var(--accent);
}

.histo-lab {
    font-size: 0.68rem;
    color: var(--encre-2);
    white-space: nowrap;
}

/* Les lignes qui font les 80 premiers pour cent : soulignées, pas colorées.
   La couleur dit « attention » ; ici on dit « celles-là font le chiffre ». */
.fiche-ligne.ligne-2080 {
    box-shadow: inset 3px 0 0 var(--encre);
    padding-left: 9px;
}

.fiche-ligne.ligne-2080 .coupure { font-weight: 700; color: var(--encre); }

/* Le pied de l'accueil public : baseline, liens, signature. */
.footer-baseline {
    max-width: 46ch;
    margin: 0 auto 12px;
    line-height: 1.6;
}

.footer-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-liens .sep { color: var(--trait); }

.footer-signature {
    font-size: 0.8rem;
    color: var(--encre-2);
}

.intro {
    max-width: 52ch;
    line-height: 1.6;
    color: var(--encre-2);
    margin-bottom: 22px;
}

.oblig { color: var(--alerte); }

.liste-erreurs {
    margin: 0;
    padding: 10px 0 0 20px;
    line-height: 1.6;
}

/* === AIDE ============================================================== */

/* Le panneau replié en tête d'écran a été retiré du front : sur un téléphone,
   en pleine récré, il occupait la place de ce qu'on venait faire. Il ne reste
   ici que ce dont le guide `/aide` se sert. Le back-office, lui, garde ses
   panneaux — leurs règles sont dans `admin.css`. */
.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;
}

.aide-point p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--encre-2);
}

.aide-lien { padding-top: 12px; font-size: 0.84rem; }

.guide-cote {
    font-family: var(--titre);
    font-size: 1.1rem;
    font-weight: var(--font-heading-weight);
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--encre);
}

.guide .bilan h3 { margin-top: 0; }

@media print {
    nav, .back-link, .encart { display: none; }
}

/* === MODALE ============================================================ */

/* Le composant `dialog` d'Organic, à l'élévation haute. Il ne sert
   aujourd'hui qu'à une chose : l'acceptation des conditions à la première
   ouverture du compte.

   C'est une **vraie page** derrière un voile, pas une couche injectée dans
   l'application. Une modale posée dans le DOM se referme en supprimant un
   nœud ; celle-ci est la seule chose que le serveur accepte de rendre tant
   que rien n'est accepté. Ce qui bloque n'est pas le voile, c'est la route. */
/* La page derrière ne doit pas défiler sous le voile. */
body:has(.dialog-backdrop) { overflow: hidden; }

.dialog-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    overflow-y: auto;
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    z-index: 200;
}

.dialog {
    width: min(460px, 100%);
    max-height: calc(100dvh - var(--space-8));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4) var(--space-4);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--ombre-haute);
}

.dialog-title {
    font-family: var(--titre);
    font-weight: var(--font-heading-weight);
    font-size: 1.6rem;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.dialog-body { font-size: 0.95rem; line-height: 1.55; }

/* Sur un téléphone, les trois points ne tiennent pas dans la boîte : elle
   défile. La case et le bouton restent collés en bas, sinon il faut deviner
   qu'il y a quelque chose sous le pli pour pouvoir continuer. */
.dialog form {
    position: sticky;
    bottom: calc(var(--space-4) * -1);
    padding: var(--space-3) 0 var(--space-2);
    background: var(--surface);
    box-shadow: 0 -10px 12px -6px var(--surface);
}

.dialog-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Les trois points de la modale : un fond de papier dans le sable de la
   carte, pour qu'ils se lisent comme une liste et non comme un pavé. */
.dialog-point {
    padding: 12px 14px;
    border-radius: var(--r-m);
    background: var(--papier);
}

.dialog-point h3 {
    font-family: var(--texte);
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.dialog-point p { font-size: 0.88rem; line-height: 1.5; color: var(--encre-2); }

/* La case à cocher est la seule sortie : elle doit être une cible, pas une
   coquetterie de 13 px. */
.dialog-accord {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--cible-compacte);
    padding: 10px 12px;
    border-radius: var(--r-m);
    background: var(--papier);
    font-size: 0.92rem;
    line-height: 1.45;
    cursor: pointer;
}

.dialog-accord input {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
}

.dialog-refus {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--encre-2);
    text-align: center;
}

/* === CORRECTIONS ======================================================= */

/* Le lien vers les ventes de la caisse : discret, en bas, hors du chemin de
   l'encaissement. On ne s'y rend que quand on s'est trompé. */
.sale-lien-corriger {
    margin-top: 20px;
    padding-bottom: 140px;
    font-size: 0.88rem;
}

.vente-ligne {
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
}

.vente-ligne:last-child { border-bottom: none; }

.vente-entete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.95rem;
}

.vente-heure {
    flex: 0 0 3rem;
    font-family: var(--chiffres);
    font-weight: 700;
    color: var(--encre-2);
}

.vente-produits { flex-grow: 1; }

.vente-montant {
    font-family: var(--chiffres);
    font-weight: 800;
    white-space: nowrap;
}

/* Une vente annulée reste lisible : barrée, pas effacée. */
.vente-annulee .vente-produits,
.vente-annulee .vente-montant { text-decoration: line-through; color: var(--encre-2); }

.vente-mention {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--alerte-texte);
}

.vente-corriger {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.86rem;
}

.correction {
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
}

.correction:last-child { border-bottom: none; }

.correction-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.correction-vente { font-weight: 700; }

.correction-montant {
    font-family: var(--chiffres);
    font-weight: 800;
    text-decoration: line-through;
    color: var(--encre-2);
}

.correction-motif {
    margin-top: 4px;
    font-size: 0.95rem;
    color: var(--alerte-texte);
}

.correction-qui,
.correction-detail {
    margin-top: 3px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--encre-2);
}

/* === CADENCIER (côté vendeur) ==========================================

   Le seul tableau du front. Tout le reste tient dans une colonne de 460 px,
   mais un cadencier est une matrice produits × périodes : on élargit la page,
   et la table défile horizontalement sur téléphone plutôt que de se replier en
   cartes, qui perdraient justement la lecture par période.

   Les règles reprennent celles du back-office — même colonne collée à gauche,
   même période en cours grisée — avec les jetons du front. */

.page-large {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 40px;
}

/* La table déborde jusqu aux bords de l écran sur téléphone : c est ce qui
   fait comprendre qu elle défile. */
.cadencier-defilant {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

.cadencier {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    background: var(--surface);
    border-radius: var(--r-m);
    overflow: hidden;
}

.cadencier th,
.cadencier td {
    padding: 9px 11px;
    white-space: nowrap;
    border-bottom: 1px solid var(--trait);
}

.cadencier thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-2);
    background: var(--papier-2);
    border-bottom: 1.5px solid var(--trait-net);
    text-align: left;
}

.cadencier tbody tr:last-child th,
.cadencier tbody tr:last-child td { border-bottom: none; }

.cadencier .num { text-align: right; }
.cadencier .vide { color: var(--encre-3, var(--encre-2)); opacity: 0.55; }

/* La colonne des produits reste lisible pendant qu on fait défiler. */
.cadencier .colle {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: 700;
    background: var(--surface);
}

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

/* 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(--papier-2); }
.cadencier .sep { border-left: 1.5px solid var(--trait-net); }

/* Un selecteur pleine largeur a du sens dans une colonne de 460 px, pas sur
   une page large : il aurait l air d un bouton. */
.page-large .chiffres-filtres .form-control { max-width: 240px; }

/* L encart legende porte une phrase, pas une icône : sans ce bloc, chaque
   `strong` deviendrait un element flex et la phrase se disloquerait. */
.encart > p { margin: 0; }

/* === GRAPHIQUES ANNUELS (côté vendeur) =================================

   Mêmes noms de classes que dans le back-office, comme `.couverture` : les
   macros Twig sont partagées, chaque côté garde sa feuille. Ici tout est
   calibré pour une colonne de téléphone. */

.batons {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 150px;
    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: 7px;
    height: 100%;
}

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

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

.baton-fort .barre { background: var(--accent-bord); }
.baton-vide .barre { background: var(--trait-net); }
.baton-vide .val { color: var(--color-neutral-500); }

.batons-legende { display: flex; gap: 14px; padding: 9px 20px 4px; }

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

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

/* Le camembert passe en colonne : sur un téléphone, la légende va dessous. */
.camembert-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 18px 18px 4px;
    border-top: 1px solid var(--trait);
}

.camembert {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 50%;
}

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

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

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

.camembert-legende { width: 100%; }

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

.camembert-legende .pastille-couleur {
    width: 11px;
    height: 11px;
    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; }
.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.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sauge-fonce);
}