/* =========================================================================
   AkwabaGest — feuille de style
   =========================================================================

   DIRECTION VISUELLE : « le comptoir »

   La première version s'inspirait du cahier de comptes : traits fins, angles
   vifs, papier réglé. Joli sur une page de présentation, raide dans une
   application qu'on utilise cinquante fois par jour.

   Cette version part de ce que les commerçants d'Abidjan manipulent
   réellement tous les jours : les applications de paiement mobile. Formes
   pleines et arrondies, un seul accent fort, chiffres larges et lisibles,
   actions à portée de pouce en bas de l'écran.

   L'élément signature : la DALLE DE TOTAL, sombre, qui reste collée en bas
   de l'écran de vente. C'est le seul endroit où l'on met du noir, parce que
   c'est le seul chiffre qui compte au moment de conclure.

   Contraintes tenues : aucune police à télécharger, aucun fichier externe,
   aucun cadre applicatif. La page s'affiche entièrement avec une connexion
   faible.
   ========================================================================= */

:root {
    /* --- Couleurs ------------------------------------------------------- */
    --nuit:        #101B2E;   /* navigation, dalle de total */
    --nuit-clair:  #1C2B45;
    --nuit-trait:  #2C3D5C;

    --fond:        #F1F4F7;   /* fond général, gris légèrement bleuté */
    --carte:       #FFFFFF;
    --bord:        #E2E7EE;

    --vert:        #0B7A55;   /* accent principal — vert des billets */
    --vert-vif:    #12A171;
    --vert-pale:   #E4F3ED;

    --ocre:        #C97C1E;   /* attention : stock bas, échéance */
    --ocre-pale:   #FDF2E0;

    --corail:      #C93F3A;   /* dette, rupture, annulation */
    --corail-pale: #FCEDEC;

    --encre:       #16233C;   /* texte principal */
    --gris:        #64748B;   /* texte secondaire */
    --gris-clair:  #94A3B8;

    /* --- Typographie ---------------------------------------------------- */
    --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
              Arial, sans-serif;
    --police-chiffres: ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
                       Consolas, "Liberation Mono", monospace;

    /* --- Arrondis ------------------------------------------------------- */
    --r-xs: 8px;
    --r-s:  12px;
    --r-m:  16px;
    --r-l:  22px;
    --r-pilule: 999px;

    /* --- Ombres : douces, jamais dures ---------------------------------- */
    --ombre-1: 0 1px 2px rgba(16, 27, 46, 0.04),
               0 2px 8px rgba(16, 27, 46, 0.05);
    --ombre-2: 0 2px 4px rgba(16, 27, 46, 0.05),
               0 8px 24px rgba(16, 27, 46, 0.08);
    --ombre-haute: 0 -4px 20px rgba(16, 27, 46, 0.10);

    /* --- Rythme --------------------------------------------------------- */
    --largeur-rail: 250px;
    --hauteur-barre-basse: 68px;
    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }

a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--vert-vif);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--nuit);
    color: #FFF;
    padding: 12px 18px;
    border-radius: 0 0 var(--r-s) 0;
    z-index: 200;
}
.saut-contenu:focus { left: 0; }

.chiffres {
    font-family: var(--police-chiffres);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.petit { font-size: 13px; color: var(--gris); }
.a-droite { text-align: right; }

/* =========================================================================
   Ossature de l'application
   -------------------------------------------------------------------------
   Téléphone : une colonne, raccourcis en bas.
   Tablette et ordinateur : rail de navigation sombre à gauche.
   ========================================================================= */

.grille-application {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* ---------- Barre du haut (téléphone) ---------- */

.barre-haute {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    background: var(--nuit);
    color: #FFF;
}

.barre-marque { font-weight: 700; font-size: 15px; }

.barre-commerce {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Rail de navigation ---------- */

.rail { display: none; }

/* ---------- Zone de contenu ---------- */

.zone-contenu {
    padding: 20px 16px calc(var(--hauteur-barre-basse) + 28px);
    max-width: 1120px;
    width: 100%;
}

@media (min-width: 640px) {
    .zone-contenu { padding-left: 26px; padding-right: 26px; }
}

@media (min-width: 900px) {
    .grille-application {
        grid-template-columns: var(--largeur-rail) minmax(0, 1fr);
        grid-template-areas: "rail contenu";
    }

    .barre-haute { display: none; }

    .rail {
        grid-area: rail;
        display: flex;
        flex-direction: column;
        gap: 22px;
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 24px 16px 20px;
        background: var(--nuit);
        color: rgba(255, 255, 255, 0.86);
        overflow-y: auto;
    }

    .zone-contenu { grid-area: contenu; padding: 34px 40px 60px; }
}

.rail-marque {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px;
}

.rail-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-s);
    background: var(--vert);
    color: #FFF;
    font-weight: 800;
    font-size: 14px;
}

.rail-nom { font-weight: 700; font-size: 16px; color: #FFF; }

.rail-commerce {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--nuit-clair);
    border-radius: var(--r-s);
}

.rail-commerce-nom { font-weight: 600; font-size: 14px; color: #FFF; }
.rail-commerce-ville { font-size: 12px; color: rgba(255, 255, 255, 0.5); }

.rail-menus { flex: 1; }
.rail-menus ul { list-style: none; margin: 0; padding: 0; }

.rail-menus a,
.rail-menus .menu-a-venir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: var(--r-xs);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.82);
    transition: background var(--transition), color var(--transition);
}

.rail-menus a:hover {
    background: var(--nuit-clair);
    color: #FFF;
    text-decoration: none;
}

.rail-menus a[aria-current="page"] {
    background: var(--vert);
    color: #FFF;
    font-weight: 600;
}

.rail-menus .menu-a-venir { color: rgba(255, 255, 255, 0.34); }

.menu-a-venir em {
    font-style: normal;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: var(--r-pilule);
    background: rgba(255, 255, 255, 0.08);
}

.rail-pied {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    border-top: 1px solid var(--nuit-trait);
}

.rail-identite { font-weight: 600; font-size: 14px; color: #FFF; }
.rail-role { font-size: 12px; color: rgba(255, 255, 255, 0.5); }

.rail-sortie { margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.rail-sortie:hover { color: #FFF; }

/* =========================================================================
   Barre du bas — le geste au pouce
   -------------------------------------------------------------------------
   Sur un téléphone tenu d'une main, le haut de l'écran est hors d'atteinte.
   Les quatre gestes de la journée et le menu complet vivent donc en bas.
   ========================================================================= */

.barre-basse {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    background: var(--nuit);
    box-shadow: var(--ombre-haute);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 900px) { .barre-basse { display: none; } }

.onglet {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--hauteur-barre-basse);
    padding: 8px 4px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    transition: color var(--transition);
}

.onglet:hover, .onglet:active { color: #FFF; text-decoration: none; }
.onglet svg { width: 22px; height: 22px; }

.onglet span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu complet dépliable, en HTML pur : pas une ligne de JavaScript. */
.onglet-menu { position: relative; padding: 0; }

.onglet-menu summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    min-height: var(--hauteur-barre-basse);
    cursor: pointer;
    list-style: none;
}

.onglet-menu summary::-webkit-details-marker { display: none; }
.onglet-menu[open] summary { color: #FFF; }

.panneau-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--hauteur-barre-basse);
    max-height: 72vh;
    overflow-y: auto;
    background: var(--nuit-clair);
    border-radius: var(--r-l) var(--r-l) 0 0;
    padding: 18px 16px 22px;
    box-shadow: var(--ombre-haute);
    animation: monter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes monter {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.panneau-entete {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 6px 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--nuit-trait);
    color: #FFF;
    text-align: left;
}

.panneau-entete span { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }

.panneau-menu ul { list-style: none; margin: 0; padding: 0; }

.panneau-menu a,
.panneau-menu .menu-a-venir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--r-xs);
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    text-align: left;
}

.panneau-menu a:active { background: var(--nuit); text-decoration: none; }
.panneau-menu .menu-a-venir { color: rgba(255, 255, 255, 0.34); }

.panneau-sortie {
    display: block;
    margin-top: 14px;
    padding: 12px;
    text-align: center;
    border-radius: var(--r-s);
    background: rgba(255, 255, 255, 0.08);
    color: #FFF;
}

/* =========================================================================
   Titres et en-têtes d'écran
   ========================================================================= */

.titre-ecran {
    font-size: clamp(22px, 4.2vw, 29px);
    font-weight: 700;
    margin-bottom: 6px;
}

.titre-section { font-size: 17px; font-weight: 700; margin: 30px 0 12px; }

.entete-ecran {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.texte-cahier { color: var(--gris); max-width: 66ch; margin: 6px 0 18px; }

.aide {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--gris);
    margin-top: 6px;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.bouton-principal,
.bouton-secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: var(--r-pilule);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--transition), background var(--transition),
                box-shadow var(--transition), border-color var(--transition);
}

.bouton-principal {
    width: 100%;
    background: var(--vert);
    color: #FFF;
    box-shadow: var(--ombre-1);
}

.bouton-principal:hover {
    background: var(--vert-vif);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--ombre-2);
}

.bouton-principal:active { transform: translateY(0); }

.bouton-secondaire {
    background: var(--carte);
    color: var(--encre);
    border-color: var(--bord);
}

.bouton-secondaire:hover {
    border-color: var(--vert);
    color: var(--vert);
    text-decoration: none;
    transform: translateY(-1px);
}

.bouton-compact { width: auto; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 10px; }

.lien-bouton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 14.5px;
    color: var(--corail);
    cursor: pointer;
}
.lien-bouton:hover { text-decoration: underline; }

.mention { font-size: 13.5px; color: var(--gris); margin-top: 14px; }

/* =========================================================================
   Formulaires
   ========================================================================= */

.groupe-champ { margin-bottom: 18px; }

.groupe-champ label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
}

.groupe-champ input,
.groupe-champ select,
.groupe-champ textarea,
.barre-filtres input,
.barre-filtres select {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 16px;           /* 16px : empêche le zoom auto sur iPhone */
    color: var(--encre);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-s);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

.groupe-champ textarea { min-height: 84px; resize: vertical; }

.groupe-champ select,
.barre-filtres select {
    /* Chevron dessiné en SVG intégré : aucun fichier à charger. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748B' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
}

.groupe-champ input:focus,
.groupe-champ select:focus,
.groupe-champ textarea:focus,
.barre-filtres input:focus,
.barre-filtres select:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 4px var(--vert-pale);
}

.groupe-champ.en-erreur input,
.groupe-champ.en-erreur select { border-color: var(--corail); }

.erreur { display: block; font-size: 13px; color: var(--corail); margin-top: 6px; }

.formulaire-etroit { max-width: 460px; }

.colonnes-saisie {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 22px;
    max-width: 820px;
}

@media (min-width: 700px) {
    .colonnes-saisie { grid-template-columns: 1fr 1fr; }
}

.case-credit {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    margin: 14px 0 20px;
    padding: 14px 16px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-s);
    cursor: pointer;
}

.case-credit input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--vert);
    flex: none;
}

.case-credit label { margin: 0; font-weight: 600; cursor: pointer; }

/* =========================================================================
   Barre de filtres
   ========================================================================= */

.barre-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 8px;
}

.barre-filtres input[type="search"] { flex: 1 1 240px; }
.barre-filtres select { flex: 0 1 190px; }
.barre-filtres .bouton-secondaire { flex: 0 0 auto; }

/* =========================================================================
   Chiffres clés
   ========================================================================= */

.bandeau-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px;
    margin: 20px 0 10px;
}

.chiffre-cle {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    padding: 16px 18px;
    box-shadow: var(--ombre-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.chiffre-cle:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }

.chiffre-cle .etiquette {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    margin-bottom: 6px;
}

.chiffre-cle .valeur {
    display: block;
    font-family: var(--police-chiffres);
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.chiffre-alerte { border-color: #F1D9AC; background: var(--ocre-pale); }
.chiffre-alerte .valeur { color: var(--ocre); }

/* =========================================================================
   Tableaux — lignes sur grand écran, fiches empilées sur téléphone
   ========================================================================= */

.tableau {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    overflow: hidden;
    box-shadow: var(--ombre-1);
    margin: 18px 0 22px;
    font-size: 14.5px;
}

.tableau th, .tableau td { text-align: left; padding: 13px 16px; }

.tableau thead th {
    background: #F7F9FB;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris);
    border-bottom: 1px solid var(--bord);
    white-space: nowrap;
}

.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: #F9FBFC; }
.tableau tbody td { border-bottom: 1px solid #EEF2F6; }
.tableau tbody tr:last-child td { border-bottom: none; }

.tableau tfoot th, .tableau tfoot td {
    background: #F7F9FB;
    border-top: 1px solid var(--bord);
    font-weight: 700;
}

.ligne-inactive { color: var(--gris-clair); }
.ligne-annulee { color: var(--gris-clair); text-decoration: line-through; }

.colonne-actions { white-space: nowrap; }
.colonne-actions a, .colonne-actions .lien-bouton { margin-right: 12px; }
.formulaire-en-ligne { display: inline; }

/* --- Passage en fiches sous 760 px ----------------------------------- */

@media (max-width: 760px) {
    .tableau,
    .tableau tbody,
    .tableau tr,
    .tableau td { display: block; width: 100%; }

    .tableau { border: none; background: none; box-shadow: none; overflow: visible; }
    .tableau thead, .tableau tfoot { display: none; }

    .tableau tbody tr {
        background: var(--carte);
        border: 1px solid var(--bord);
        border-radius: var(--r-m);
        box-shadow: var(--ombre-1);
        padding: 6px 16px 12px;
        margin-bottom: 12px;
    }

    .tableau tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px solid #F1F5F9;
        text-align: right;
    }

    .tableau tbody td:last-child { border-bottom: none; }

    /* Le nom de la colonne réapparaît devant la valeur. */
    .tableau tbody td[data-libelle]::before {
        content: attr(data-libelle);
        flex: 0 0 auto;
        font-size: 12.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gris);
        text-align: left;
    }

    .colonne-actions { justify-content: flex-start; gap: 18px; }
}

/* =========================================================================
   Pastilles d'état
   ========================================================================= */

.etat {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: var(--r-pilule);
    white-space: nowrap;
}

.etat-actif   { background: var(--vert-pale);   color: var(--vert); }
.etat-inactif { background: #EEF2F6;            color: var(--gris); }
.etat-alerte  { background: var(--ocre-pale);   color: var(--ocre); }
.etat-rupture { background: var(--corail-pale); color: var(--corail); }

.montant-du { color: var(--corail); font-weight: 700; }

/* =========================================================================
   Encadrés, messages, écrans vides
   ========================================================================= */

.encadre-info {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    padding: 20px 22px;
    margin-top: 22px;
    box-shadow: var(--ombre-1);
}

.encadre-info h2 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }

.fiche { margin: 0 0 14px; }

.fiche dt {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris);
}

.fiche dd { margin: 0 0 12px; }

.fiche-en-ligne {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 20px;
    align-items: baseline;
}
.fiche-en-ligne dt, .fiche-en-ligne dd { margin: 0; }

.message {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--r-s);
    font-size: 14.5px;
    margin: 0 0 18px;
    background: var(--vert-pale);
    color: #075A3F;
    border: 1px solid #C7E6DA;
}

.message-error {
    background: var(--corail-pale);
    color: #8E2B27;
    border-color: #F3CFCD;
}

.message-warning {
    background: var(--ocre-pale);
    color: #8A5510;
    border-color: #F1D9AC;
}

.encadre-erreurs {
    background: var(--corail-pale);
    border: 1px solid #F3CFCD;
    border-radius: var(--r-m);
    padding: 20px 22px;
    margin-top: 22px;
    max-width: 760px;
}

.encadre-erreurs h2 { font-size: 16px; font-weight: 700; color: #8E2B27; }

.liste-erreurs {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.75;
    max-height: 320px;
    overflow-y: auto;
}

.ecran-vide {
    background: var(--carte);
    border: 1px dashed var(--bord);
    border-radius: var(--r-l);
    padding: 44px 28px;
    margin-top: 22px;
    max-width: 640px;
    text-align: center;
}

.ecran-vide h2 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.ecran-vide p { color: var(--gris); }
.ecran-vide .bouton-principal,
.ecran-vide .bouton-secondaire { width: auto; margin: 4px; }

/* =========================================================================
   Saisie des lignes (achat et vente)
   ========================================================================= */

.tableau-saisie select,
.tableau-saisie input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--encre);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-xs);
    appearance: none;
}

.tableau-saisie input.a-droite {
    text-align: right;
    font-family: var(--police-chiffres);
    font-variant-numeric: tabular-nums;
}

.tableau-saisie select:focus,
.tableau-saisie input:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 4px var(--vert-pale);
}

.tableau-saisie input[readonly] { background: #F1F5F9; color: var(--gris); }
.tableau-saisie th:first-child { min-width: 220px; }

@media (max-width: 760px) {
    .tableau-saisie tbody tr { padding: 14px 16px; }

    .tableau-saisie tbody td {
        display: block;
        text-align: left;
        padding: 6px 0;
    }

    .tableau-saisie tbody td::before {
        display: block;
        margin-bottom: 5px;
        text-align: left;
    }

    .tableau-saisie tbody td.total-ligne {
        display: flex;
        justify-content: space-between;
    }
}

/* =========================================================================
   SIGNATURE — la dalle de total
   -------------------------------------------------------------------------
   Le seul élément sombre de l'écran, et le seul chiffre en très grand.
   Sur téléphone, elle reste collée au-dessus des raccourcis : le vendeur
   voit toujours le montant qu'il doit annoncer au client.
   ========================================================================= */

.total-general {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    max-width: 460px;
    margin: 16px 0;
    padding: 16px 20px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
}

.total-general .etiquette {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
}

.total-general .valeur {
    font-family: var(--police-chiffres);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.total-net {
    background: var(--nuit);
    border-color: var(--nuit);
    color: #FFF;
    box-shadow: var(--ombre-2);
}

.total-net .etiquette { color: rgba(255, 255, 255, 0.58); }

.total-net .valeur {
    font-size: clamp(26px, 6vw, 34px);
    font-weight: 700;
    color: #FFF;
}

@media (max-width: 899px) {
    .total-net {
        position: sticky;
        bottom: calc(var(--hauteur-barre-basse) + 12px);
        z-index: 20;
        max-width: 100%;
    }
}

/* =========================================================================
   Créances
   ========================================================================= */

.bloc-creance {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--ombre-1);
}

.bloc-creance.bloc-alerte { border-color: #F3CFCD; }
.bloc-creance .titre-section { margin-top: 0; }

.montant-creance {
    font-family: var(--police-chiffres);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--corail);
}

/* =========================================================================
   Reçu
   ========================================================================= */

.recu {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-1);
    padding: 26px 24px;
    max-width: 400px;
    margin: 18px 0;
}

.recu-entete {
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--bord);
}

.recu-commerce { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.recu-ligne { margin: 2px 0; font-size: 13px; color: var(--gris); }

.recu-tableau { width: 100%; border-collapse: collapse; margin-top: 14px; }

.recu-tableau td, .recu-tableau th {
    padding: 7px 0;
    font-size: 14px;
    text-align: left;
}

.recu-tableau tfoot th, .recu-tableau tfoot td {
    border-top: 1px dashed var(--bord);
}

.recu-total th, .recu-total td { font-size: 18px; font-weight: 700; }

.recu-pied {
    text-align: center;
    font-size: 13px;
    color: var(--gris);
    margin: 18px 0 0;
}

/* =========================================================================
   Pages publiques : inscription et connexion
   ========================================================================= */

.page-double {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 940px) {
    .page-double { grid-template-columns: 1fr 1fr; }
}

.volet-cahier {
    position: relative;
    padding: 44px 24px 40px;
    background: var(--nuit);
    color: rgba(255, 255, 255, 0.82);
    overflow: hidden;
}

@media (min-width: 940px) {
    .volet-cahier {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 64px 56px;
    }
}

/* Halo vert diffus : rappel de l'accent, sans motif chargé. */
.volet-cahier::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 161, 113, 0.28), transparent 68%);
    pointer-events: none;
}

.marque {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vert-vif);
    margin: 0 0 26px;
}

.titre-cahier {
    font-size: clamp(30px, 5.2vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #FFF;
    margin: 0 0 18px;
    max-width: 16ch;
}

.titre-cahier em { font-style: normal; color: var(--vert-vif); }

.volet-cahier .texte-cahier {
    color: rgba(255, 255, 255, 0.68);
    max-width: 44ch;
}

.releve {
    list-style: none;
    margin: 6px 0 28px;
    padding: 0;
    max-width: 44ch;
}

.releve li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.releve .intitule { flex: 1 1 auto; color: rgba(255, 255, 255, 0.86); }
.releve .pointilles { display: none; }

.releve .valeur {
    font-family: var(--police-chiffres);
    font-size: 13px;
    color: var(--vert-vif);
    white-space: nowrap;
}

.note-bas {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    max-width: 42ch;
    margin: 0;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--r-s);
}

.note-bas strong { color: #FFF; font-weight: 600; }

.volet-formulaire {
    padding: 36px 20px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 940px) { .volet-formulaire { padding: 64px 56px; } }

.formulaire-limite { width: 100%; max-width: 440px; }

.etape {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bord);
}

.etape .rang {
    font-family: var(--police-chiffres);
    font-size: 12px;
    font-weight: 600;
    color: var(--vert);
    padding: 3px 9px;
    border-radius: var(--r-pilule);
    background: var(--vert-pale);
}

.etape h2 { font-size: 17px; font-weight: 700; }

.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    background:
        radial-gradient(900px 420px at 50% -12%, #E3EDF3, transparent 72%),
        var(--fond);
}

.carte-connexion {
    width: 100%;
    max-width: 420px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--ombre-2);
    padding: 34px 30px 30px;
}

.carte-connexion .marque { color: var(--vert); }

.carte-connexion .titre-cahier {
    color: var(--encre);
    font-size: 26px;
    max-width: none;
    margin-bottom: 24px;
}

.avertissement {
    background: var(--ocre-pale);
    border: 1px solid #F1D9AC;
    color: #8A5510;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: var(--r-s);
    margin-bottom: 20px;
}

.erreur-bloc {
    background: var(--corail-pale);
    border: 1px solid #F3CFCD;
    color: #8E2B27;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: var(--r-s);
    margin-bottom: 20px;
}

.confirmation { max-width: 580px; margin: 0 auto; padding: 56px 22px; }

.confirmation h1 {
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    margin-bottom: 14px;
}

.encadre-identifiant {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-left: 4px solid var(--vert);
    border-radius: var(--r-m);
    padding: 18px 20px;
    margin: 22px 0;
    box-shadow: var(--ombre-1);
}

.encadre-identifiant .etiquette {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gris);
    margin: 0 0 5px;
}

.encadre-identifiant .valeur {
    font-family: var(--police-chiffres);
    font-size: 16px;
    word-break: break-all;
    margin: 0;
}

.liste-suite { padding-left: 20px; color: var(--gris); line-height: 1.9; }
.liste-suite strong { color: var(--encre); }

.pied {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--bord);
    font-size: 13px;
    color: var(--gris);
}

/* =========================================================================
   Impression : on ne garde que le reçu
   ========================================================================= */

@media print {
    .rail, .barre-haute, .barre-basse, .entete-ecran, .sans-impression,
    .encadre-info, .message, .titre-section, .tableau { display: none !important; }

    .recu { border: none; box-shadow: none; max-width: 100%; padding: 0; }
    .zone-contenu { padding: 0; }
    body { background: #FFF; }
}

/* =========================================================================
   Accessibilité
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .bouton-principal:hover,
    .bouton-secondaire:hover,
    .chiffre-cle:hover { transform: none; }
}

/* =========================================================================
   Graphique (Lot 10)
   -------------------------------------------------------------------------
   Barres dessinées en CSS pur : la hauteur est un pourcentage calculé côté
   serveur. Aucune bibliothèque de graphiques, aucun JavaScript, et un rendu
   qui s'adapte tout seul à la largeur de l'écran.
   ========================================================================= */

.graphique {
    margin: 18px 0 26px;
    padding: 20px 18px 14px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-1);
}

.graphique-barres {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 210px;
}

.graphique-jour {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.graphique-colonnes {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.barre {
    width: 40%;
    max-width: 26px;
    min-height: 3px;
    border-radius: var(--r-xs) var(--r-xs) 2px 2px;
    transition: opacity var(--transition);
}

.barre:hover { opacity: 0.78; }

.barre-ca { background: var(--vert); }
.barre-benefice { background: var(--nuit); }

.graphique-etiquette {
    font-size: 11.5px;
    color: var(--gris);
    white-space: nowrap;
}

.graphique-valeur {
    font-size: 10.5px;
    color: var(--gris-clair);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.graphique-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--bord);
    font-size: 13px;
    color: var(--gris);
}

.pastille {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
}

.pastille-ca { background: var(--vert); }
.pastille-benefice { background: var(--nuit); }

@media (max-width: 560px) {
    .graphique-barres { height: 170px; }
    .graphique-valeur { display: none; }
    .graphique-etiquette { font-size: 10.5px; }
}

/* =========================================================================
   Console plateforme (Lot 13) — teinte distincte de l'espace commerçant
   -------------------------------------------------------------------------
   L'exploitant AkwabaIA voit tous les commerces : un fond nettement plus
   sombre rappelle en permanence qu'on n'est PAS dans une boutique.
   ========================================================================= */

.rail-console { background: #0B1220; }
.rail-console .rail-logo { background: #3B5BDB; }
.barre-console { background: #0B1220; }
.console-akwabaia .onglet[href] { color: rgba(255, 255, 255, 0.7); }

/* =========================================================================
   Lot 15 — Logo, trésorerie, boutons désactivés
   ========================================================================= */

/* ---------- Logo de l'entreprise dans le rail ---------- */

.rail-logo-image {
    width: 38px;
    height: 38px;
    border-radius: var(--r-s);
    object-fit: cover;
    background: #FFF;
}

/* ---------- Bouton désactivé (droit manquant) ----------
   Même forme qu'un vrai bouton, mais visiblement inerte : le curseur
   « interdit » et l'opacité disent « pas pour vous » sans qu'on ait à
   cliquer pour l'apprendre. La sécurité, elle, reste côté serveur. */

.est-desactive,
.bouton-principal.est-desactive,
.bouton-secondaire.est-desactive {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #EEF2F6;
    color: var(--gris);
    border-color: var(--bord);
    box-shadow: none;
    transform: none;
}

.lien-desactive {
    color: var(--gris-clair);
    cursor: not-allowed;
    text-decoration: none;
}

/* ---------- Trésorerie : cartes de compte ---------- */

.grille-comptes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 18px 0 24px;
}

.carte-compte {
    display: block;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    padding: 18px 20px;
    box-shadow: var(--ombre-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.carte-compte:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombre-2);
    text-decoration: none;
}

.carte-compte.compte-inactif { opacity: 0.55; }

.carte-compte .compte-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris);
}

.carte-compte .compte-nom {
    font-size: 16px;
    font-weight: 700;
    color: var(--encre);
    margin: 4px 0 10px;
}

.carte-compte .compte-solde {
    font-family: var(--police-chiffres);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--vert);
}

.carte-compte .compte-solde.solde-negatif { color: var(--corail); }

.carte-compte .compte-pointage {
    font-size: 12px;
    color: var(--gris);
    margin-top: 8px;
}

.carte-compte .compte-pointage.jamais { color: var(--ocre); }

/* Aperçu du logo dans les paramètres */
.apercu-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.apercu-logo img {
    width: 72px;
    height: 72px;
    border-radius: var(--r-m);
    object-fit: cover;
    border: 1px solid var(--bord);
    background: #FFF;
}

/* Mot de passe provisoire mis en avant */
.code-provisoire {
    font-family: var(--police-chiffres);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--encre);
    background: var(--vert-pale);
    border: 2px dashed var(--vert);
    border-radius: var(--r-m);
    padding: 18px 24px;
    text-align: center;
    margin: 18px 0;
    user-select: all;
}

/* ---------- Historique des opérations : pastilles d'action ---------- */
.etat-neutre {
    background: #EEF2F6;
    color: var(--gris);
}
.etat-attention {
    background: #FFF3E0;
    color: #B26A00;
}

/* ---------- Console : actions sur une demande de paiement ---------- */
.actions-paiement {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.rejet-details summary {
    list-style: none;
    display: inline-block;
}
.rejet-details summary::-webkit-details-marker { display: none; }
.rejet-details form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- Bouton de connexion après inscription ---------- */
.action-connexion {
    margin: 28px 0 8px;
}
.action-connexion .bouton-principal {
    display: inline-block;
    text-decoration: none;
}

/* ---------- Bandeau de rappel d'échéance d'abonnement ---------- */
.bandeau-echeance {
    display: block;
    background: #FFF3E0;
    color: #B26A00;
    border: 1px solid #FFD9A0;
    border-radius: var(--r-m);
    padding: 12px 18px;
    margin-bottom: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
}
.bandeau-echeance:hover {
    background: #FFE9C7;
    text-decoration: none;
}

/* ---------- Bouton de paiement Wave ----------
   Bleu profond dans l'esprit de la marque Wave, avec un pingouin maison
   (le logo officiel est une marque déposée, on ne le reproduit pas). */

.bouton-wave {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1DC3F0;              /* bleu clair Wave */
    background: linear-gradient(180deg, #22cbf5 0%, #12b4e6 100%);
    color: #06304a;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--ombre-2);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.bouton-wave:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(18, 180, 230, 0.4);
    text-decoration: none;
}
.bouton-wave:active {
    transform: translateY(0);
}
.bouton-wave-logo {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

/* --- Page tarifs (vitrine publique) --- */
.page-tarifs { max-width: 900px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.tarifs-marque { display:inline-block; color: var(--vert, #0f6e56); font-weight: 800; letter-spacing: 2px; text-decoration: none; margin-bottom: 20px; }
.tarifs-entete h1 { font-size: 2rem; margin: 10px 0; }
.tarifs-sous-titre { color: #555; max-width: 600px; margin: 0 auto 30px; }
.tarifs-grille { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.carte-offre { background:#fff; border:1px solid #e0ded7; border-radius:16px; padding:28px; max-width:340px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.carte-prix { font-size:2rem; font-weight:800; color: var(--vert,#0f6e56); margin:10px 0 20px; }
.carte-prix span { font-size:1rem; font-weight:500; color:#666; }
.carte-avantages { list-style:none; padding:0; text-align:left; margin:0 0 24px; }
.carte-avantages li { padding:6px 0; }
.carte-mention { font-size:.85rem; color:#888; margin-top:12px; }
.tarifs-retour { margin-top:30px; }
.tarifs-pied { margin-top:40px; color:#999; font-size:.85rem; }

/* --- Tableau de bord épuré --- */
.bandeau-essentiel { margin-bottom: 20px; }
.chiffre-vedette .valeur { font-size: 1.6rem; font-weight: 800; }
.chiffre-vedette { padding: 18px 16px; }
.details-tableau { margin: 24px 0; border-top: 1px solid #d3d1c7; padding-top: 8px; }
.details-tableau summary { cursor: pointer; font-weight: 600; color: var(--vert, #0f6e56); padding: 10px 0; list-style: none; }
.details-tableau summary::before { content: "▸ "; }
.details-tableau[open] summary::before { content: "▾ "; }
.carte-alerte-reappro { background: #fff8e1; border: 1px solid #f0c14b; border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.carte-alerte-reappro strong { display: block; margin-bottom: 8px; color: #8a6d00; }

/* --- Menu en sections --- */
.rail-section-titre { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #8a97ab; margin: 16px 0 4px; padding-left: 4px; font-weight: 700; }
.rail-menus .rail-section-titre:first-child { margin-top: 0; }
.panneau-section-titre { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #8a8a8a; margin: 14px 0 4px; font-weight: 700; }
.panneau-abonnement { display: block; padding: 10px 0; color: var(--vert, #0f6e56); }

/* --- Sections de menu dépliables --- */
.rail-section { margin-bottom: 4px; }
.rail-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.rail-section > summary::after { content: "▸"; font-size: 0.7rem; color: #8a97ab; transition: transform 0.15s; }
.rail-section[open] > summary::after { transform: rotate(90deg); }
.panneau-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.panneau-section > summary::after { content: "▸"; font-size: 0.7rem; color: #8a8a8a; }
.panneau-section[open] > summary::after { transform: rotate(90deg); }

/* --- Résumé figé en haut quand on défile la liste des ventes --- */
.bandeau-fige {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f2f4f7;
    padding: 12px 0;
    margin-bottom: 8px;
}

/* --- Zone de liste défilante avec en-tête figé --- */
.zone-liste-defilante {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #e0ded7;
    border-radius: 12px;
    background: #fff;
}
.tableau-entete-fige thead th {
    position: sticky;
    top: 0;
    background: #f2f4f7;
    z-index: 5;
    box-shadow: 0 1px 0 #d3d1c7;
}

/* --- Correction : en-tête de tableau vraiment figé dans la zone défilante --- */
.zone-liste-defilante { position: relative; }
.tableau-entete-fige { border-collapse: separate; border-spacing: 0; }
.tableau-entete-fige thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #eef1f5;
    z-index: 20;
}
.tableau-entete-fige thead th::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #d3d1c7;
}

/* --- Dernier essai : en-tête figé, technique renforcée --- */
.zone-liste-defilante { overflow: auto; max-height: 60vh; }
.tableau-entete-fige { position: relative; }
.tableau-entete-fige thead { position: sticky; top: 0; z-index: 30; }
.tableau-entete-fige thead tr th {
    position: sticky; top: 0;
    background: #e4e8ee !important;
}

/* --- Liste à en-tête figé (technique robuste, sans sticky) --- */
.liste-figee { border: 1px solid #e0ded7; border-radius: 12px; overflow: hidden; background: #fff; }
.liste-entete { display: flex; background: #e4e8ee; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: #5f6b7a; padding: 12px 16px; border-bottom: 1px solid #d3d1c7; }
.liste-corps { max-height: 55vh; overflow-y: auto; }
.liste-ligne { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eef0f3; }
.liste-ligne:last-child { border-bottom: none; }
.liste-entete > span, .liste-ligne > span { padding: 0 6px; overflow: hidden; }
.col-date { flex: 0 0 18%; }
.col-ticket { flex: 0 0 15%; }
.col-client { flex: 0 0 15%; }
.col-montant { flex: 0 0 15%; }
.col-du { flex: 0 0 12%; }
.col-etat { flex: 0 0 15%; }
.col-action { flex: 0 0 10%; text-align: right; }
.liste-ligne.ligne-annulee { opacity: 0.5; }
@media (max-width: 760px) {
    .liste-entete { display: none; }
    .liste-ligne { flex-wrap: wrap; gap: 4px; }
    .liste-ligne > span { flex: 1 1 45%; padding: 2px 6px; }
}

/* === BASE-DEFILEMENT : rail fixe, contenu qui defile seul (grand ecran) === */
@media (min-width: 900px) {
    .grille-application { height: 100vh; min-height: 100vh; overflow: hidden; }
    .zone-contenu {
        grid-area: contenu;
        height: 100vh;
        overflow-y: auto;
    }
}
/* En-tete de tableau fige : marche des qu'un parent defile (zone-contenu). */
.tableau thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #eef1f5;
    z-index: 5;
    box-shadow: inset 0 -1px 0 #d3d1c7;
}


/* --- Correction menu mobile : sections propres et alignées --- */
.panneau-section { border-top: 1px solid rgba(255,255,255,0.08); }
.panneau-section:first-of-type { border-top: none; }
.panneau-section > summary.panneau-section-titre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    padding: 14px 4px;
    margin: 0;
    cursor: pointer;
    list-style: none;
}
.panneau-section > summary.panneau-section-titre::-webkit-details-marker { display: none; }
.panneau-section > summary.panneau-section-titre::before {
    content: "▸";
    font-size: 0.7rem;
    transition: transform 0.15s;
    display: inline-block;
}
.panneau-section[open] > summary.panneau-section-titre::before {
    transform: rotate(90deg);
}
.panneau-section ul { padding-left: 8px; }

/* --- Liste des ventes sur téléphone : cartes propres et lisibles --- */
@media (max-width: 760px) {
    .liste-figee { border: none; background: transparent; }
    .liste-corps { max-height: none; overflow: visible; }
    .liste-ligne {
        display: block;
        background: #fff;
        border: 1px solid #e0ded7;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .liste-ligne > span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        flex: none;
        width: 100%;
        border-bottom: 1px solid #f2f2ee;
    }
    .liste-ligne > span:last-child { border-bottom: none; }
    /* L'étiquette de chaque info, générée automatiquement */
    .liste-ligne .col-date::before { content: "Date"; }
    .liste-ligne .col-ticket::before { content: "Ticket"; }
    .liste-ligne .col-client::before { content: "Client"; }
    .liste-ligne .col-montant::before { content: "Montant"; }
    .liste-ligne .col-du::before { content: "Reste dû"; }
    .liste-ligne .col-etat::before { content: "État"; }
    .liste-ligne .col-action::before { content: ""; }
    .liste-ligne > span::before {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #8a8a8a;
        font-weight: 700;
    }
    .liste-ligne .col-action { justify-content: flex-end; padding-top: 8px; }
}

/* ============================================================
   ÉCRAN VENTES — structure figée + défilement (via Claude Design)
   ============================================================ */
.ecran-ventes { display: flex; flex-direction: column; height: 100dvh; height: 100vh; overflow: hidden; margin: -34px -40px -60px; }
@media (max-width: 899px) { .ecran-ventes { margin: -20px -16px calc(-1 * (var(--hauteur-barre-basse) + 28px)); } }
.ecran-ventes .ecran-resume { flex: none; background: var(--carte); border-bottom: 1px solid var(--bord); padding: 16px; box-shadow: 0 1px 2px rgba(16,27,46,.04); }
.ecran-ventes .resume-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ecran-ventes .resume-titre h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.ecran-ventes .resume-periode { font-size: 12.5px; color: var(--gris); }
.ecran-ventes .resume-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ecran-ventes .chiffre { padding: 11px 13px; border-radius: var(--r-m, 14px); }
.ecran-ventes .chiffre .etiquette { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.ecran-ventes .chiffre .valeur { display: block; font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; }
.ecran-ventes .chiffre .devise { display: block; font-size: 11px; opacity: .75; }
.ecran-ventes .chiffre-encaisse { background: var(--vert-pale); }
.ecran-ventes .chiffre-encaisse .etiquette, .ecran-ventes .chiffre-encaisse .valeur, .ecran-ventes .chiffre-encaisse .devise { color: var(--vert); }
.ecran-ventes .chiffre-du { background: var(--corail-pale); }
.ecran-ventes .chiffre-du .etiquette, .ecran-ventes .chiffre-du .valeur, .ecran-ventes .chiffre-du .devise { color: var(--corail); }
.ecran-ventes .bouton-nouvelle-vente { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: none; border-radius: var(--r-pilule, 999px); background: var(--vert); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(11,122,85,.28); }
.ecran-ventes .bouton-nouvelle-vente:hover { background: var(--vert-vif); text-decoration: none; }
.ecran-ventes .bouton-nouvelle-vente .plus { font-size: 20px; line-height: 1; }
.ecran-ventes .filtres-recherche { display: flex; gap: 7px; margin-top: 12px; }
.ecran-ventes .filtres-recherche input { flex: 1; min-height: 40px; border-radius: var(--r-pilule, 999px); border: 1px solid var(--bord); padding: 0 16px; font-family: inherit; font-size: 14px; }
.ecran-ventes .filtre-bouton { min-height: 40px; padding: 0 18px; border-radius: var(--r-pilule, 999px); border: 1px solid var(--bord); background: var(--carte); color: var(--gris); font-weight: 600; cursor: pointer; }
.ecran-ventes .liste-entete { flex: none; display: grid; grid-template-columns: 1fr auto 84px; gap: 10px; align-items: center; padding: 9px 16px; background: var(--entete, #F7F9FB); border-bottom: 1px solid var(--bord); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.ecran-ventes .liste-entete .col-montant, .ecran-ventes .liste-entete .col-etat { text-align: right; }
.ecran-ventes .liste-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--carte); }
.ecran-ventes .ligne-vente { display: grid; grid-template-columns: 1fr auto 84px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--trait, #EEF2F6); color: inherit; text-decoration: none; }
.ecran-ventes .ligne-vente:hover { background: #F9FBFC; text-decoration: none; }
.ecran-ventes .ligne-annulee { opacity: .5; }
.ecran-ventes .vente-identite { min-width: 0; }
.ecran-ventes .vente-haut { display: flex; align-items: baseline; gap: 7px; }
.ecran-ventes .vente-ticket { font-family: var(--police-chiffres); font-size: 13px; font-weight: 700; color: var(--encre); }
.ecran-ventes .vente-date { font-family: var(--police-chiffres); font-size: 12px; color: var(--gris-clair); }
.ecran-ventes .vente-client { display: block; font-size: 14px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-ventes .vente-montant { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.ecran-ventes .vente-montant.est-du { color: var(--corail); }
.ecran-ventes .vente-etat { text-align: right; }
.ecran-ventes .etat { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pilule, 999px); white-space: nowrap; }
.ecran-ventes .etat-payee { background: var(--vert-pale); color: var(--vert); }
.ecran-ventes .etat-credit { background: var(--corail-pale); color: var(--corail); }
.ecran-ventes .liste-pied { padding: 16px; text-align: center; font-size: 12.5px; color: var(--gris-clair); }
/* ===== SYSTÈME VISUEL AKWABAGEST (Claude Design) — DÉBUT ===== */
/* =========================================================================
   AkwabaGest — système visuel commun (à extraire en akwabagest.css)
   -------------------------------------------------------------------------
   RÈGLE DE MISE EN PAGE (validée sur la page Ventes) :
   .ecran        = colonne flex, height:100dvh, overflow:hidden
   .fige         = flex:none  -> ne bouge JAMAIS
   .zone         = flex:1 1 auto; min-height:0; overflow-y:auto -> seule zone qui défile
   min-height:0 est OBLIGATOIRE, sinon c'est la page entière qui défile.
   ========================================================================= */
:root{
  --nuit:#101B2E; --nuit-clair:#1C2B45; --nuit-trait:#2C3D5C;
  --fond:#F1F4F7; --carte:#FFFFFF; --bord:#E2E7EE; --trait:#EEF2F6; --entete:#F7F9FB;
  --vert:#0B7A55; --vert-vif:#12A171; --vert-pale:#E4F3ED; --vert-fonce:#0A6247;
  --ocre:#C97C1E; --ocre-pale:#FDF2E0; --ocre-fonce:#6E430C;
  --corail:#C93F3A; --corail-pale:#FCEDEC;
  --encre:#16233C; --gris:#64748B; --gris-clair:#94A3B8;
  --police:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --chiffres:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r-s:8px; --r-m:14px; --r-g:16px; --r-pilule:999px;
  --ombre-douce:0 1px 2px rgba(16,27,46,.04);
  --ombre-carte:0 1px 3px rgba(16,27,46,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* body : conserve celui de l app existante */
a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:none}
:focus-visible{outline:3px solid var(--vert-vif);outline-offset:2px;border-radius:8px}

/* ---------- squelette ---------- */
.ecran{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--fond)}
.fige{flex:none}
.zone{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--carte)}
.zone-fond{background:var(--fond)}
.zone::-webkit-scrollbar{width:0;height:0}

/* ---------- barre du haut ---------- */
.barre{display:flex;align-items:baseline;gap:10px;padding:13px 18px;
  padding-top:calc(13px + env(safe-area-inset-top));background:var(--nuit);color:#fff}
.barre-titre{flex:1;font-weight:700;font-size:16px}
.barre-marque{font-weight:700;font-size:15px}
.barre-info{font-size:12.5px;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-retour{font-size:20px;line-height:1;color:rgba(255,255,255,.7);text-decoration:none}

/* ---------- bloc d'en-tête blanc (résumé + actions) ---------- */
.entete{background:var(--carte);border-bottom:1px solid var(--bord);
  padding:14px 16px 12px;box-shadow:var(--ombre-douce)}
.entete-titre{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.entete-titre h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.entete-periode{font-size:12.5px;color:var(--gris)}

/* ---------- chiffres ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chiffre{padding:12px 13px;border-radius:var(--r-m)}
.chiffre .etiquette{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:3px}
.chiffre .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.chiffre .devise{display:block;font-size:11px;opacity:.75}
.chiffre-vert{background:var(--vert-pale)}
.chiffre-vert .etiquette,.chiffre-vert .valeur,.chiffre-vert .devise{color:var(--vert)}
.chiffre-corail{background:var(--corail-pale)}
.chiffre-corail .etiquette,.chiffre-corail .valeur,.chiffre-corail .devise{color:var(--corail)}

.grand-total{padding:14px 15px;border-radius:var(--r-g);background:var(--nuit);color:#fff}
.grand-total .etiquette{display:block;font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:4px}
.grand-total .ligne{display:flex;align-items:baseline;gap:8px}
.grand-total .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.grand-total .devise{font-size:14px;font-weight:600;color:rgba(255,255,255,.7)}
.grand-total-corail{background:var(--corail-pale)}
.grand-total-corail .etiquette{color:var(--corail);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.grand-total-corail .valeur{color:var(--corail)}
.grand-total-corail .devise{color:var(--corail);opacity:.8}
.grand-total-note{display:block;font-size:12.5px;color:#A8443F;margin-top:6px}

.carte-cle{padding:13px 14px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
.carte-cle .libelle{display:block;font-size:12.5px;font-weight:600;color:var(--gris);
  line-height:1.3;min-height:32px}
.carte-cle .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.carte-cle .valeur-vert{color:var(--vert)}
.carte-cle .valeur-corail{color:var(--corail)}
.carte-cle .devise{display:block;font-size:11px;color:var(--gris-clair)}

/* ---------- boutons ---------- */
.btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:var(--r-pilule);font-family:inherit;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background 160ms ease,transform 160ms ease}
.btn:active{transform:translateY(1px)}
.btn-vert{background:var(--vert);color:#fff;box-shadow:0 2px 8px rgba(11,122,85,.28)}
.btn-vert:hover{background:var(--vert-vif)}
.btn-grand{min-height:54px;font-size:17.5px;font-weight:700}
.btn-blanc{background:var(--carte);color:var(--encre);border:1px solid var(--bord)}
.btn-blanc:hover{background:var(--entete)}
.btn-corail{background:var(--corail-pale);color:var(--corail);border:1px solid #F3D3D1}
.btn-desactive{background:#EDF1F5;color:#A5B0BF;box-shadow:none;pointer-events:none}
.btn .plus{font-size:20px;line-height:1;font-weight:400}
.duo-btn{display:flex;gap:9px}
.duo-btn .btn{min-height:50px;font-size:15.5px}

/* ---------- filtres pilules ---------- */
.filtres{display:flex;gap:7px;margin-top:12px}
.filtre{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--carte);
  color:var(--gris);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.filtre[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.filtres-defilantes{display:flex;gap:7px;margin-top:10px;overflow-x:auto;overscroll-behavior-x:contain}
.filtres-defilantes::-webkit-scrollbar{height:0}
.filtres-defilantes .filtre{flex:none;padding:0 14px;min-height:34px;font-size:13px}

/* ---------- alertes ---------- */
.alerte{display:flex;gap:10px;align-items:center;padding:13px 14px;border-radius:var(--r-m);
  text-decoration:none;margin-bottom:9px}
.alerte .point{flex:none;width:8px;height:8px;border-radius:50%}
.alerte .texte{flex:1;font-size:13.5px;line-height:1.4}
.alerte .lien{font-size:13px;font-weight:600}
.alerte-vert{background:var(--vert-pale)}
.alerte-vert .point{background:var(--vert)}
.alerte-vert .texte{color:var(--vert-fonce)}
.alerte-vert .lien{color:var(--vert)}
.alerte-ocre{background:var(--ocre-pale)}
.alerte-ocre .point{background:var(--ocre)}
.alerte-ocre .texte{color:#8A5510}
.alerte-ocre .texte strong{color:var(--ocre-fonce)}
.alerte-ocre .lien{color:var(--ocre)}

/* ---------- titres de colonnes (figés) ---------- */
.liste-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;background:var(--entete);border-bottom:1px solid var(--bord);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.liste-entete-ventes{display:grid;grid-template-columns:1fr auto 74px}
.liste-entete-ventes .a-droite{text-align:right}

/* ---------- lignes de liste ---------- */
.ligne{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.ligne:hover{background:#F9FBFC}
.ligne:active{background:var(--fond)}
.ligne-ventes{display:grid;grid-template-columns:1fr auto 74px;gap:10px;align-items:center}
.ligne-corps{flex:1;min-width:0}
.ligne-titre{display:block;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-sous{display:block;font-size:12.5px;color:var(--gris-clair);margin-top:1px}
.ligne-sous-ocre{color:var(--ocre)}
.ligne-haut{display:flex;align-items:baseline;gap:7px}
.ticket{font-family:var(--chiffres);font-size:13px;font-weight:700;color:var(--encre)}
.date{font-family:var(--chiffres);font-size:12px;color:var(--gris-clair)}
.montant{flex:none;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.montant-vert{color:var(--vert)}
.montant-corail{color:var(--corail)}
.montant-bloc{flex:none;text-align:right}
.montant-bloc .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--corail)}
.montant-bloc .devise{display:block;font-size:11px;color:var(--gris-clair)}
.pastille{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;background:var(--trait);color:var(--gris)}
.pastille-ocre{background:var(--ocre-pale);color:var(--ocre)}
.liste-pied{padding:16px;text-align:center;font-size:12.5px;color:var(--gris-clair)}

/* ---------- états ---------- */
.etat{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-pilule);white-space:nowrap}
.etat-ok{background:var(--vert-pale);color:var(--vert)}
.etat-alerte{background:var(--ocre-pale);color:var(--ocre)}
.etat-dette{background:var(--corail-pale);color:var(--corail)}
.a-droite{text-align:right}

/* ---------- onglets du bas (figés) ---------- */
.onglets{display:flex;background:var(--nuit);box-shadow:0 -4px 20px rgba(16,27,46,.1);
  padding-bottom:env(safe-area-inset-bottom)}
.onglet{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:62px;padding:8px 4px;color:rgba(255,255,255,.6);font-size:10.5px;font-weight:500;
  text-align:center;text-decoration:none}
.onglet .icone{display:block;width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.28)}
.onglet[aria-current="page"]{color:#fff}
.onglet[aria-current="page"] .icone{background:var(--vert-vif)}

/* ---------- sur ordinateur : même principe, largeur limitée ---------- */
@media (min-width:900px){
  .ecran{max-width:520px;margin:0 auto;border-left:1px solid var(--bord);border-right:1px solid var(--bord)}
}

/* ---------- spécifique au tableau de bord ---------- */
.accueil-barre{display:block;padding:14px 18px 16px}
.accueil-haut{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.accueil-bonjour{font-size:19px;font-weight:600;margin-top:10px}
.accueil-boutique{font-size:13px;color:rgba(255,255,255,.65);margin-top:2px}
.bord-corps{padding:14px 16px 20px}
.quatre{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.carte-blanche{padding:15px 16px 13px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);margin-bottom:12px}
.carte-blanche-titre{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.carte-blanche-titre span:first-child{font-size:14.5px;font-weight:700}
.carte-blanche-titre span:last-child{font-size:12px;color:var(--gris-clair)}
.graphe{display:flex;align-items:flex-end;gap:9px;height:112px}
.graphe-jour{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.graphe-valeur{font-family:var(--chiffres);font-size:10.5px;color:var(--gris-clair)}
.graphe-barre{width:100%;border-radius:7px 7px 3px 3px;background:#CFE4DB}
.graphe-jour:last-child .graphe-barre{background:var(--vert)}
.graphe-nom{font-size:11px;color:var(--gris)}
/* dépliant sans JavaScript : <details> */
.depliant{border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);overflow:hidden}
.depliant>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;min-height:52px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none}
.depliant>summary::-webkit-details-marker{display:none}
.depliant>summary::after{content:"Ouvrir +";font-size:13px;font-weight:700;color:var(--vert)}
.depliant[open]>summary::after{content:"Masquer −"}
.depliant-corps{border-top:1px solid var(--trait)}
.detail{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--trait)}
.detail:last-child{border-bottom:none}
.detail-libelle{font-size:13.5px;color:var(--gris)}
.detail-valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:14px;
  font-weight:700;white-space:nowrap}
.detail-corail{color:var(--corail)}

/* ============================================================
   STYLES SPÉCIFIQUES PAR ÉCRAN (point de vente, caisse...)
   ============================================================ */
/* [point-de-vente] */
/* ---------- spécifique au point de vente ---------- */
.recherche{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 15px;
  border-radius:var(--r-pilule);background:var(--fond);border:1px solid var(--bord)}
/* [point-de-vente] */
.recherche input{flex:1;border:none;background:none;font-family:inherit;font-size:15.5px;
  color:var(--encre);outline:none}
/* [point-de-vente] */
.recherche input::placeholder{color:var(--gris-clair)}
/* [point-de-vente] */
.recherche .loupe{font-size:15px;color:var(--gris-clair)}
/* [point-de-vente] */
.ligne-produit{background:var(--carte)}
/* [point-de-vente] */
.ligne-produit.au-panier{background:#F6FBF9}
/* [point-de-vente] */
.produit-prix{display:flex;align-items:baseline;gap:8px;margin-top:2px}
/* [point-de-vente] */
.produit-prix .prix{font-family:var(--chiffres);font-size:13px;font-weight:700;color:var(--vert)}
/* [point-de-vente] */
.produit-prix .stock{font-size:12px;color:var(--gris-clair)}
/* [point-de-vente] */
.produit-prix .stock-bas{color:var(--ocre)}
/* [point-de-vente] */
.ajouter{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:var(--vert);color:#fff;font-family:inherit;font-size:24px;
  font-weight:400;cursor:pointer;box-shadow:0 2px 6px rgba(11,122,85,.28)}
/* [point-de-vente] */
.ajouter:hover{background:var(--vert-vif)}
/* [point-de-vente] */
.compteur{flex:none;display:flex;align-items:center;gap:4px;background:var(--vert-pale);
  border-radius:var(--r-pilule);padding:3px}
/* [point-de-vente] */
.compteur button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;font-family:inherit;font-size:20px;font-weight:700;cursor:pointer}
/* [point-de-vente] */
.compteur .moins{background:var(--carte);color:var(--vert);box-shadow:0 1px 2px rgba(16,27,46,.1)}
/* [point-de-vente] */
.compteur .plus{background:var(--vert);color:#fff}
/* [point-de-vente] */
.compteur .nombre{min-width:26px;text-align:center;font-family:var(--chiffres);font-size:16px;
  font-weight:700;color:var(--vert-fonce)}
/* [point-de-vente] */
.pied-vente{background:var(--carte);border-top:1px solid var(--bord);padding:13px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(16,27,46,.08)}
/* [point-de-vente] */
.panier-total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
/* [point-de-vente] */
.panier-total .resume{display:block;font-size:12.5px;color:var(--gris)}
/* [point-de-vente] */
.panier-total .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
/* [point-de-vente] */
.panier-total .devise{font-size:14px;font-weight:600;color:var(--gris);padding-bottom:5px}
/* [point-de-vente] */
.paiement{display:flex;gap:8px;margin-bottom:10px}
/* [point-de-vente] */
.paiement .choix{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;
  text-align:center;border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--carte);
  color:var(--gris);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;line-height:1.2}
/* [point-de-vente] */
.paiement .choix[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
/* [point-de-vente] */
.paiement .choix-credit[aria-pressed="true"]{background:var(--corail-pale);border-color:var(--corail);color:var(--corail)}
/* [point-de-vente] */
.champ-client{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
  padding:0 15px;border-radius:12px;background:var(--entete);border:1px solid var(--bord);
  margin-bottom:11px;text-decoration:none}
/* [point-de-vente] */
.champ-client .etiquette{font-size:14px;color:var(--gris)}
/* [point-de-vente] */
.champ-client .valeur{font-size:14px;font-weight:600;color:var(--gris-clair)}
/* [caisse] */
/* ---------- spécifique à la caisse ---------- */
.etat-caisse{display:flex;align-items:center;gap:9px;margin-bottom:14px}
/* [caisse] */
.etat-caisse .point{width:9px;height:9px;border-radius:50%;background:var(--vert)}
/* [caisse] */
.etat-caisse .texte{font-size:14.5px;font-weight:700;color:var(--vert-fonce)}
/* [caisse] */
.recap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
/* [caisse] */
.recap-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* [caisse] */
.recap-ligne .libelle{font-size:14px;color:var(--gris)}
/* [caisse] */
.recap-ligne .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700}
/* [caisse] */
.heure{display:block;font-family:var(--chiffres);font-size:12px;color:var(--gris-clair);margin-top:1px}
/* ===== SYSTÈME VISUEL AKWABAGEST (Claude Design) — FIN ===== */

/* --- Correction barre du haut (refonte) : fond nuit sur toute la largeur --- */
.application-refonte .barre {
    width: 100%;
    background: var(--nuit) !important;
    color: #fff;
}
.application-refonte .ecran { max-width: 100%; }
@media (min-width: 900px) {
    .application-refonte .ecran { max-width: 520px; margin: 0 auto; }
}

/* --- Correction barre du haut (refonte) : fond nuit sur toute la largeur --- */
.application-refonte .barre {
    width: 100%;
    background: var(--nuit) !important;
    color: #fff;
}
.application-refonte .ecran { max-width: 100%; }
@media (min-width: 900px) {
    .application-refonte .ecran { max-width: 520px; margin: 0 auto; }
}

/* === STYLES ÉCRAN MENU (refonte) === */
/* ---------- spécifique à l'écran Menu ---------- */
.barre-profil{display:flex;align-items:center;gap:13px;padding:15px 18px 17px;
  padding-top:calc(15px + env(safe-area-inset-top))}
.profil-avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--nuit-clair);
  border:1px solid var(--nuit-trait);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#9FE3C7}
.profil-corps{flex:1;min-width:0}
.profil-nom{display:block;font-size:16.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profil-bas{display:flex;align-items:center;gap:7px;margin-top:3px}
.profil-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--r-pilule);background:rgba(18,161,113,.22);color:#9FE3C7}
.profil-boutique{font-size:12.5px;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-corps{padding:14px 16px 20px}
/* sections repliables sans JavaScript : <details> */
.section{border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);
  overflow:hidden;margin-bottom:10px;box-shadow:var(--ombre-douce)}
.section>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;padding:0 16px;cursor:pointer;list-style:none;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris)}
.section>summary::-webkit-details-marker{display:none}
.section[open]>summary{color:var(--encre)}
.section-droite{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0}
.section-compte{font-size:12px;font-weight:500;color:var(--gris-clair)}
.section[open] .section-compte{display:none}
.section-signe{font-size:13px;font-weight:700;color:var(--vert);width:14px;text-align:center}
.section-signe::after{content:"+"}
.section[open] .section-signe::after{content:"\2212"}
.section-corps{border-top:1px solid var(--trait)}
.entree{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;
  border-bottom:1px solid var(--trait);text-decoration:none;color:inherit}
.entree:last-child{border-bottom:none}
.entree:hover{background:#F9FBFC}
.entree:active{background:var(--fond)}
.entree-icone{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;background:var(--trait);color:var(--gris)}
.section-quotidien .entree-icone{background:var(--vert-pale);color:var(--vert)}
.entree-nom{flex:1;font-size:15.5px;font-weight:500}
.section-quotidien .entree-nom{font-weight:600}
.entree-fleche{font-size:17px;color:#C7D0DB}
.abonnement{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;
  border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);
  margin-bottom:14px;text-decoration:none;color:inherit}
.abonnement:hover{border-color:var(--vert)}
.abonnement-icone{flex:none;width:34px;height:34px;border-radius:10px;background:var(--vert-pale);
  color:var(--vert);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.abonnement-corps{flex:1;min-width:0}
.abonnement-nom{display:block;font-size:15.5px;font-weight:600}
.abonnement-info{display:block;font-size:12.5px;color:var(--gris);margin-top:1px}
.btn-deconnexion{min-height:52px;font-weight:700}
.version{text-align:center;font-size:12px;color:var(--gris-clair);margin-top:12px}

/* === STYLES ÉCRAN MENU (refonte) === */
/* ---------- spécifique à l'écran Menu ---------- */
.barre-profil{display:flex;align-items:center;gap:13px;padding:15px 18px 17px;
  padding-top:calc(15px + env(safe-area-inset-top))}
.profil-avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--nuit-clair);
  border:1px solid var(--nuit-trait);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#9FE3C7}
.profil-corps{flex:1;min-width:0}
.profil-nom{display:block;font-size:16.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profil-bas{display:flex;align-items:center;gap:7px;margin-top:3px}
.profil-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--r-pilule);background:rgba(18,161,113,.22);color:#9FE3C7}
.profil-boutique{font-size:12.5px;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-corps{padding:14px 16px 20px}
/* sections repliables sans JavaScript : <details> */
.section{border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);
  overflow:hidden;margin-bottom:10px;box-shadow:var(--ombre-douce)}
.section>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;padding:0 16px;cursor:pointer;list-style:none;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris)}
.section>summary::-webkit-details-marker{display:none}
.section[open]>summary{color:var(--encre)}
.section-droite{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0}
.section-compte{font-size:12px;font-weight:500;color:var(--gris-clair)}
.section[open] .section-compte{display:none}
.section-signe{font-size:13px;font-weight:700;color:var(--vert);width:14px;text-align:center}
.section-signe::after{content:"+"}
.section[open] .section-signe::after{content:"\2212"}
.section-corps{border-top:1px solid var(--trait)}
.entree{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;
  border-bottom:1px solid var(--trait);text-decoration:none;color:inherit}
.entree:last-child{border-bottom:none}
.entree:hover{background:#F9FBFC}
.entree:active{background:var(--fond)}
.entree-icone{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;background:var(--trait);color:var(--gris)}
.section-quotidien .entree-icone{background:var(--vert-pale);color:var(--vert)}
.entree-nom{flex:1;font-size:15.5px;font-weight:500}
.section-quotidien .entree-nom{font-weight:600}
.entree-fleche{font-size:17px;color:#C7D0DB}
.abonnement{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;
  border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);
  margin-bottom:14px;text-decoration:none;color:inherit}
.abonnement:hover{border-color:var(--vert)}
.abonnement-icone{flex:none;width:34px;height:34px;border-radius:10px;background:var(--vert-pale);
  color:var(--vert);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.abonnement-corps{flex:1;min-width:0}
.abonnement-nom{display:block;font-size:15.5px;font-weight:600}
.abonnement-info{display:block;font-size:12.5px;color:var(--gris);margin-top:1px}
.btn-deconnexion{min-height:52px;font-weight:700}
.version{text-align:center;font-size:12px;color:var(--gris-clair);margin-top:12px}

/* --- Correction : toutes les barres du haut prennent toute la largeur --- */
.application-refonte .barre,
.application-refonte .barre-profil,
.application-refonte .entete,
.application-refonte .liste-entete,
.application-refonte .onglets {
    width: 100%;
    box-sizing: border-box;
}
.application-refonte .ecran > .barre {
    background: var(--nuit);
    color: #fff;
}

/* --- Correction conflit : la barre du haut (refonte) n'est PAS une barre de graphique --- */
.application-refonte .ecran > .barre {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    border-radius: 0 !important;
    background: var(--nuit) !important;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    padding-top: calc(16px + env(safe-area-inset-top));
}

/* --- Barre du haut : coins inférieurs arrondis (comme les maquettes) --- */
.application-refonte .ecran > .barre {
    border-radius: 0 0 var(--r-g, 16px) var(--r-g, 16px) !important;
}

/* --- Barre du haut : coins arrondis en HAUT (pas en bas) --- */
.application-refonte .ecran > .barre {
    border-radius: var(--r-g, 16px) var(--r-g, 16px) 0 0 !important;
}

/* === STYLES TABLEAU DE BORD (refonte) === */
.zone-fond{background:var(--fond)}
.carte-cle{padding:13px 14px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
.carte-cle .libelle{display:block;font-size:12.5px;font-weight:600;color:var(--gris);
  line-height:1.3;min-height:32px}
.carte-cle .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.carte-cle .valeur-vert{color:var(--vert)}
.carte-cle .valeur-corail{color:var(--corail)}
.carte-cle .devise{display:block;font-size:11px;color:var(--gris-clair)}
/* ---------- alertes ---------- */
.alerte{display:flex;gap:10px;align-items:center;padding:13px 14px;border-radius:var(--r-m);
  text-decoration:none;margin-bottom:9px}
.alerte .point{flex:none;width:8px;height:8px;border-radius:50%}
.alerte .texte{flex:1;font-size:13.5px;line-height:1.4}
.alerte .lien{font-size:13px;font-weight:600}
.alerte-vert{background:var(--vert-pale)}
.alerte-vert .point{background:var(--vert)}
.alerte-vert .texte{color:var(--vert-fonce)}
.alerte-vert .lien{color:var(--vert)}
.alerte-ocre{background:var(--ocre-pale)}
.alerte-ocre .point{background:var(--ocre)}
.alerte-ocre .texte{color:#8A5510}
.alerte-ocre .texte strong{color:var(--ocre-fonce)}
.alerte-ocre .lien{color:var(--ocre)}
.etat-alerte{background:var(--ocre-pale);color:var(--ocre)}
/* ---------- spécifique au tableau de bord ---------- */
.accueil-barre{display:block;padding:14px 18px 16px}
.accueil-haut{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.accueil-bonjour{font-size:19px;font-weight:600;margin-top:10px}
.accueil-boutique{font-size:13px;color:rgba(255,255,255,.65);margin-top:2px}
.bord-corps{padding:14px 16px 20px}
.quatre{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.carte-blanche{padding:15px 16px 13px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);margin-bottom:12px}
.carte-blanche-titre{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.carte-blanche-titre span:first-child{font-size:14.5px;font-weight:700}
.carte-blanche-titre span:last-child{font-size:12px;color:var(--gris-clair)}
.graphe{display:flex;align-items:flex-end;gap:9px;height:112px}
.graphe-jour{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.graphe-valeur{font-family:var(--chiffres);font-size:10.5px;color:var(--gris-clair)}
.graphe-barre{width:100%;border-radius:7px 7px 3px 3px;background:#CFE4DB}
.graphe-jour:last-child .graphe-barre{background:var(--vert)}
.graphe-nom{font-size:11px;color:var(--gris)}
.detail-libelle{font-size:13.5px;color:var(--gris)}

/* --- La barre d'accueil (tableau de bord) : disposition en bloc, pas flex --- */
.application-refonte .ecran > .barre.accueil-barre {
    display: block !important;
    padding: 14px 18px 16px !important;
}
.application-refonte .accueil-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.application-refonte .accueil-bonjour {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.application-refonte .accueil-boutique {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-top: 2px;
}

/* --- Correction : la barre d'accueil (tableau de bord) s'empile en colonne --- */
.application-refonte .ecran > .barre.accueil-barre {
    display: block !important;
    padding: 16px 18px 18px;
    padding-top: calc(16px + env(safe-area-inset-top));
}
.application-refonte .accueil-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.application-refonte .accueil-bonjour {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.application-refonte .accueil-boutique {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-top: 2px;
}

/* --- Force la vraie couleur nuit foncée sur toutes les barres du haut --- */
.application-refonte .ecran > .barre,
.application-refonte .ecran > .barre.accueil-barre,
.application-refonte .ecran > .barre.barre-profil {
    background-color: #101B2E !important;
    background-image: none !important;
}

/* --- Couleur finale de la barre du haut : nuit clair #1C2B45 --- */
.application-refonte .ecran > .barre,
.application-refonte .ecran > .barre.accueil-barre,
.application-refonte .ecran > .barre.barre-profil {
    background-color: #1C2B45 !important;
    background-image: none !important;
}

/* === STYLES ÉCRAN PRODUITS (refonte) === */
/* ---------- spécifique à Produits et stock ---------- */
.liste-entete-produits{display:grid;grid-template-columns:1fr auto 92px}
.liste-entete-produits .a-droite{text-align:right}
.ligne-produit-stock{display:grid;grid-template-columns:1fr auto 92px;gap:10px;align-items:center}
.produit-meta{display:flex;align-items:baseline;gap:7px;margin-top:1px}
.produit-categorie{font-size:12.5px;color:var(--gris-clair)}
.produit-separateur{font-size:12.5px;color:#C7D0DB}
.produit-stock{font-size:12.5px;font-weight:600;color:var(--gris-clair)}
.produit-stock-bas{color:var(--ocre)}
.produit-stock-nul{color:var(--corail)}
.produit-prix-bloc{text-align:right;white-space:nowrap}
.produit-prix-bloc .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;letter-spacing:-.02em}
.produit-prix-bloc .devise{display:block;font-size:11px;color:var(--gris-clair)}
.chiffre-ocre{background:var(--ocre-pale)}
.chiffre-ocre .etiquette,.chiffre-ocre .valeur,.chiffre-ocre .devise{color:var(--ocre)}
.recherche{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 15px;
  border-radius:var(--r-pilule);background:var(--fond);border:1px solid var(--bord);margin-top:12px}
.recherche input{flex:1;border:none;background:none;font-family:inherit;font-size:15.5px;
  color:var(--encre);outline:none}
.recherche input::placeholder{color:var(--gris-clair)}
.recherche .loupe{font-size:15px;color:var(--gris-clair)}

/* --- Menu : rendre le texte des entrées bien visible (foncé sur blanc) --- */
.application-refonte .entree-nom {
    color: var(--encre, #16233C) !important;
    font-size: 15px;
    font-weight: 500;
    flex: 1;
}
.application-refonte .entree {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: var(--encre, #16233C);
    text-decoration: none;
    border-bottom: 1px solid var(--trait, #EEF2F6);
}
.application-refonte .entree-icone {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--vert-pale, #E4F3ED);
    color: var(--vert, #0B7A55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.application-refonte .entree-fleche {
    flex: none;
    color: var(--gris-clair, #94A3B8);
    font-size: 20px;
}

/* === STYLES FORMULAIRES (refonte Claude Design) === */
/* =========================================================================
   Formulaires — briques communes (à ajouter à akwabagest.css)
   ========================================================================= */
.form{padding:16px 16px 22px}
.form-groupe{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-g);
  padding:4px 16px;margin-bottom:12px;box-shadow:var(--ombre-douce)}
.form-groupe-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris);margin:0 0 8px;padding:0 2px}
.champ{padding:13px 0;border-bottom:1px solid var(--trait)}
.champ:last-child{border-bottom:none}
.champ>label{display:block;font-size:13.5px;font-weight:600;color:var(--encre);margin-bottom:7px}
.obligatoire{color:var(--corail);font-weight:700}
.facultatif{font-weight:500;color:var(--gris-clair)}
.saisie{width:100%;min-height:50px;padding:0 15px;border:1px solid var(--bord);border-radius:12px;
  background:var(--entete);color:var(--encre);font-family:inherit;font-size:16.5px;outline:none;
  -webkit-appearance:none;appearance:none}
.saisie::placeholder{color:var(--gris-clair)}
.saisie:focus{border-color:var(--vert);background:var(--carte);box-shadow:0 0 0 3px rgba(11,122,85,.12)}
textarea.saisie{min-height:88px;padding:13px 15px;line-height:1.5;resize:vertical}
.saisie-chiffre{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:19px;letter-spacing:-.02em}
/* liste déroulante : flèche dessinée en CSS, pas d'image */
select.saisie{padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),
                   linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* champ avec suffixe FCFA */
.champ-monnaie{position:relative}
.champ-monnaie .saisie{padding-right:62px}
.champ-monnaie .suffixe{position:absolute;right:15px;top:0;height:50px;display:flex;align-items:center;
  font-size:13.5px;font-weight:700;color:var(--gris);pointer-events:none}
.aide{display:block;font-size:12.5px;color:var(--gris);margin-top:6px;line-height:1.45}
/* pied d'écran figé */
.pied-form{background:var(--carte);border-top:1px solid var(--bord);padding:13px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(16,27,46,.08)}
.pied-note{display:block;text-align:center;font-size:12.5px;color:var(--gris);margin-top:10px}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo-champ .champ{border-bottom:none;padding-bottom:0}


/* --- Application du style aux vrais champs Django dans la refonte --- */
.application-refonte .zone input[type="text"],
.application-refonte .zone input[type="number"],
.application-refonte .zone input[type="search"],
.application-refonte .zone input[type="tel"],
.application-refonte .zone input[type="password"],
.application-refonte .zone input[type="email"],
.application-refonte .zone input[type="date"],
.application-refonte .zone select,
.application-refonte .zone textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid var(--bord, #E2E7EE);
    border-radius: var(--r-m, 14px);
    background: var(--carte, #fff);
    font-family: inherit;
    font-size: 15px;
    color: var(--encre, #16233C);
    box-sizing: border-box;
}
.application-refonte .zone textarea { min-height: 88px; padding: 12px 15px; }
.application-refonte .zone input:focus,
.application-refonte .zone select:focus,
.application-refonte .zone textarea:focus {
    outline: none;
    border-color: var(--vert, #0B7A55);
    box-shadow: 0 0 0 3px rgba(11,122,85,.12);
}
/* Les libellés des champs Django (groupe-champ) */
.application-refonte .zone .groupe-champ { margin-bottom: 16px; }
.application-refonte .zone .groupe-champ label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre, #16233C);
    margin-bottom: 6px;
}
.application-refonte .zone .aide {
    display: block;
    font-size: 12.5px;
    color: var(--gris, #64748B);
    margin-top: 5px;
}
/* Les boutons de formulaire adoptent le style bouton vert */
.application-refonte .zone button[type="submit"],
.application-refonte .zone .bouton-principal {
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: var(--r-pilule, 999px);
    background: var(--vert, #0B7A55);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.application-refonte .zone .bouton-secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--r-pilule, 999px);
    border: 1px solid var(--bord, #E2E7EE);
    background: var(--carte, #fff);
    color: var(--encre, #16233C);
    font-weight: 600;
    text-decoration: none;
}

/* ============================================================
   VERSION ORDINATEUR (responsive desktop) — Claude Design
   Ne s'active qu'au-dessus de 900px. Le mobile reste intact.
   ============================================================ */
/* ---------- sur ordinateur : même principe, largeur limitée ---------- */


/* =========================================================================
   VERSION ORDINATEUR — bascule à 900px (akwabagest-ordinateur.css)
   -------------------------------------------------------------------------
   Mobile (par défaut)  : .lateral cachée, .onglets visibles en bas.
   Ordinateur (>=900px) : .appli devient une RANGÉE flex.
                          .lateral = flex:none (colonne figée, défile seule)
                          .ecran   = flex:1 (colonne de contenu, garde sa
                                     propre zone défilante)
   La règle de défilement est la même à toutes les tailles : chaque colonne
   est un conteneur flex en hauteur fixe, un seul enfant en overflow:auto.
   ========================================================================= */

/* ---------- squelette d'application ---------- */
.appli{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.appli>.ecran{flex:1 1 auto;min-height:0;height:auto}
.lateral{display:none}

@media (min-width:900px){
  .ecran{max-width:520px;margin:0 auto;border-left:1px solid var(--bord);border-right:1px solid var(--bord)}
}
@media (min-width:900px){

  /* la page devient deux colonnes */
  .appli{flex-direction:row}
  .appli>.ecran{max-width:none;margin:0;border:none;min-width:0}
  .onglets{display:none}

  /* ---------- MENU LATÉRAL ---------- */
  .lateral{flex:none;display:flex;flex-direction:column;width:264px;
    background:var(--nuit);color:#fff;overflow:hidden}
  .lateral-marque{flex:none;padding:18px 20px 16px;border-bottom:1px solid var(--nuit-trait)}
  .lateral-nom{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
  .lateral-boutique{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 16px}
  .lateral-nav::-webkit-scrollbar{width:0}
  .lateral-section{margin-bottom:4px}
  .lateral-section>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:38px;padding:0 10px;cursor:pointer;list-style:none;border-radius:9px;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
    color:rgba(255,255,255,.45)}
  .lateral-section>summary::-webkit-details-marker{display:none}
  .lateral-section>summary:hover{background:var(--nuit-clair);color:rgba(255,255,255,.75)}
  .lateral-section>summary::after{content:"+";font-size:12px;font-weight:700;color:rgba(255,255,255,.4)}
  .lateral-section[open]>summary::after{content:"\2212"}
  .lateral-lien{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;
    border-radius:9px;color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;text-decoration:none}
  .lateral-lien:hover{background:var(--nuit-clair);color:#fff;text-decoration:none}
  .lateral-lien .puce{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
  .lateral-lien .txt{flex:1}
  .lateral-lien[aria-current="page"]{background:var(--vert);color:#fff;font-weight:600;
    box-shadow:0 2px 8px rgba(11,122,85,.35)}
  .lateral-lien[aria-current="page"] .puce{background:#fff}
  .lateral-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-pilule);
    background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
  .lateral-badge-ocre{background:rgba(201,124,30,.28);color:#F0C489}
  .lateral-badge-corail{background:rgba(201,63,58,.28);color:#F2A9A6}
  .lateral-badge-vert{background:rgba(18,161,113,.28);color:#9FE3C7}

  .lateral-pied{flex:none;border-top:1px solid var(--nuit-trait);padding:12px 12px 14px}
  .lateral-profil{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:11px;
    text-decoration:none;color:inherit}
  .lateral-profil:hover{background:var(--nuit-clair);text-decoration:none}
  .lateral-avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--nuit-clair);
    border:1px solid var(--nuit-trait);display:flex;align-items:center;justify-content:center;
    font-size:13.5px;font-weight:700;color:#9FE3C7}
  .lateral-profil-corps{flex:1;min-width:0}
  .lateral-profil-nom{display:block;font-size:14px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral-profil-role{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:1px}
  .lateral-abonnement{display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:38px;padding:0 10px;margin-top:4px;border-radius:9px;text-decoration:none;
    font-size:13.5px;color:rgba(255,255,255,.78)}
  .lateral-abonnement:hover{background:var(--nuit-clair);color:#fff;text-decoration:none}
  .lateral-deconnexion{width:100%;min-height:42px;margin-top:6px;display:flex;align-items:center;
    justify-content:center;gap:8px;border:1px solid rgba(201,63,58,.45);border-radius:var(--r-pilule);
    background:rgba(201,63,58,.14);color:#F2A9A6;font-family:inherit;font-size:14px;font-weight:600;
    cursor:pointer}
  .lateral-deconnexion:hover{background:rgba(201,63,58,.24);color:#fff}

  /* ---------- barre du haut de la colonne de contenu ---------- */
  .barre{background:var(--carte);color:var(--encre);border-bottom:1px solid var(--bord);
    padding:16px 28px;align-items:center}
  .barre-titre{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .barre-marque{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .barre-info{font-size:13.5px;color:var(--gris)}
  .barre-retour{color:var(--gris)}
  /* la barre profil du menu mobile n'a plus lieu d'être */
  .barre-profil{display:none}

  /* ---------- en-tête et zones : marges de bureau ---------- */
  .entete{padding:20px 28px 18px}
  .entete-titre h1{font-size:24px}
  .zone{padding-left:0;padding-right:0}
  .menu-corps,.bord-corps,.form{padding:22px 28px 30px}

  /* le contenu ne s'étire pas indéfiniment sur très grand écran */
  .large{max-width:1240px;margin:0 auto}

  /* ---------- cartes de chiffres : une seule ligne ---------- */
  .duo{grid-template-columns:repeat(2,1fr);gap:14px;max-width:640px}
  .quatre{grid-template-columns:repeat(4,1fr);gap:14px}
  .carte-cle{padding:16px 18px 15px}
  .carte-cle .libelle{font-size:13.5px;min-height:0}
  .carte-cle .valeur{font-size:27px;margin-top:8px}
  .chiffre{padding:14px 16px}
  .chiffre .valeur{font-size:23px}

  /* ---------- l'en-tête d'écran passe en rangée ---------- */
  .entete-ordi{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .entete-ordi-actions{display:flex;align-items:center;gap:10px;flex:none}
  .entete-ordi-actions .btn{width:auto;padding:0 22px}
  .entete-ordi .filtres{margin-top:0;flex:none}
  .entete-ordi .filtres .filtre{flex:none;padding:0 18px}
  .entete-ordi .recherche{min-width:280px;margin-top:0}

  /* ---------- listes en vrai tableau ---------- */
  .liste-entete,.ligne{padding-left:28px;padding-right:28px}
  .liste-entete{font-size:11.5px}
  .ligne{min-height:56px}
  .ligne-ventes,.liste-entete-ventes{grid-template-columns:110px 120px 1fr 160px 130px;gap:18px}
  .ligne-produit-stock,.liste-entete-produits{grid-template-columns:1fr 180px 150px 130px;gap:18px}
  .col-ordi{display:block}
  .col-mobile{display:none}
  .ligne-titre{font-size:15.5px}
  .montant{font-size:16px}
  .liste-pied{padding:22px}

  /* ---------- alertes côte à côte ---------- */
  .alertes-ordi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
  .alertes-ordi .alerte{margin-bottom:0}

  /* ---------- graphique large ---------- */
  .carte-blanche{padding:20px 22px 18px}
  .graphe{height:200px;gap:16px}
  .graphe-nom{font-size:12.5px}
  .graphe-valeur{font-size:12px}

  /* ---------- formulaires sur 2 colonnes ---------- */
  .form-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .form-groupe{padding:6px 20px}
  .champ-pleine-largeur{grid-column:1 / -1}

  /* ---------- pied d'action : aligné à droite, pas pleine largeur ---------- */
  .pied-form{padding:14px 28px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
  .pied-form .btn{width:auto;padding:0 30px;order:2}
  .pied-form .pied-note{margin-top:0;order:1}
}
@media (min-width:1440px){
  .lateral{width:288px}
}
@media (min-width:900px){
  .accueil-barre{display:flex;align-items:center;padding:16px 28px}
  .accueil-haut{flex:1;align-items:baseline;gap:14px}
  .accueil-bonjour{margin-top:0;font-size:15px;color:var(--gris);font-weight:500}
  .accueil-boutique{display:none}
  .bord-bas{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
  .bord-bas .carte-blanche,.bord-bas .depliant{margin-bottom:0}
  .depliant[open]>summary{border-bottom:none}
  .detail{padding:13px 20px}
}

/* --- Correction débordement : les boutons dans les tableaux/actions ne sont PAS pleine largeur --- */
.application-refonte .zone table button,
.application-refonte .zone table .bouton-principal,
.application-refonte .zone table .bouton-secondaire,
.application-refonte .zone .tableau button,
.application-refonte .zone .tableau .bouton-principal,
.application-refonte .zone .tableau .bouton-secondaire,
.application-refonte .zone td button,
.application-refonte .zone td a.bouton-principal,
.application-refonte .zone td a.bouton-secondaire {
    width: auto !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    margin-top: 0 !important;
}
/* Empêcher tout débordement horizontal dans la zone de contenu */
.application-refonte .zone { overflow-x: hidden; }
.application-refonte .zone table { width: 100%; max-width: 100%; }

/* --- Boutons d'action compacts PARTOUT (ordinateur et mobile) --- */
.application-refonte .bouton-secondaire,
.application-refonte a.bouton-secondaire,
.application-refonte button.bouton-secondaire {
    width: auto !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
    border-radius: var(--r-pilule, 999px) !important;
}
/* Les boutons "action de tableau" (Masquer, Désactiver, Retirer...) restent petits */
.application-refonte table button,
.application-refonte table .bouton-principal,
.application-refonte table a.bouton-principal,
.application-refonte td button,
.application-refonte td .bouton-principal,
.application-refonte td a.bouton-principal,
.application-refonte .ligne-actions button,
.application-refonte .ligne-actions a {
    width: auto !important;
    min-height: 34px !important;
    max-width: 160px;
    padding: 0 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
}
/* Seuls les boutons "principaux" hors tableau (Enregistrer, Ajouter) restent larges */
.application-refonte .zone > form button[type="submit"],
.application-refonte .zone > .btn-vert {
    width: 100%;
}

/* ============================================================
   PAGES PUBLIQUES — connexion, inscription, offre (Claude Design)
   ============================================================ */
.application-refonte .public{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:34px 20px 40px}
.application-refonte .public-centre{justify-content:center}
.application-refonte .marque{text-align:center;margin-bottom:24px}
.application-refonte .marque-nom{display:block;font-size:29px;font-weight:700;letter-spacing:-.025em;color:var(--nuit)}
.application-refonte .marque-nom .accent{color:var(--vert)}
.application-refonte .marque-accroche{display:block;font-size:14.5px;color:var(--gris);margin-top:6px}
.application-refonte .carte-public{width:100%;max-width:430px;background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:24px 22px 26px;box-shadow:0 1px 3px rgba(16,27,46,.05),0 14px 40px rgba(16,27,46,.07)}
.application-refonte .carte-titre{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;text-align:center}
.application-refonte .carte-sous{font-size:13.5px;color:var(--gris);margin:0 0 22px;text-align:center;line-height:1.55}
.application-refonte .public .champ{margin-bottom:15px}
.application-refonte .public .champ>label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.application-refonte .obligatoire{color:var(--corail);font-weight:700}
.application-refonte .facultatif{font-weight:500;color:var(--gris-clair)}
.application-refonte .public .saisie,
.application-refonte .public input[type="text"],
.application-refonte .public input[type="email"],
.application-refonte .public input[type="tel"],
.application-refonte .public input[type="password"],
.application-refonte .public input[type="number"],
.application-refonte .public select{width:100%;min-height:52px;padding:0 15px;border:1px solid var(--bord);border-radius:12px;background:var(--entete);color:var(--encre);font-family:inherit;font-size:16.5px;outline:none;-webkit-appearance:none;appearance:none}
.application-refonte .public .saisie::placeholder,
.application-refonte .public input::placeholder{color:var(--gris-clair)}
.application-refonte .public .saisie:focus,
.application-refonte .public input:focus,
.application-refonte .public select:focus{border-color:var(--vert);background:var(--carte);box-shadow:0 0 0 3px rgba(11,122,85,.12)}
.application-refonte .public .aide{display:block;font-size:12.5px;color:var(--gris);margin-top:6px;line-height:1.45}
.application-refonte .public .btn{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:var(--r-pilule);font-family:inherit;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer}
.application-refonte .public .btn-vert{background:var(--vert);color:#fff;box-shadow:0 3px 10px rgba(11,122,85,.3)}
.application-refonte .public .btn-vert:hover{background:var(--vert-vif)}
.application-refonte .liens{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
.application-refonte .lien-principal{font-size:14.5px;color:var(--gris)}
.application-refonte .lien-principal a{font-weight:700}
.application-refonte .lien-secondaire{font-size:14px;color:var(--gris-clair)}
.application-refonte .lien-secondaire a{color:var(--gris);font-weight:600}
.application-refonte .mot-oublie{display:block;text-align:right;font-size:13px;font-weight:600;margin-top:8px}
.application-refonte .confiance{display:flex;align-items:flex-start;gap:11px;max-width:430px;width:100%;margin-top:20px;padding:14px 16px;border-radius:var(--r-m);background:var(--vert-pale)}
.application-refonte .confiance .point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--vert);margin-top:6px}
.application-refonte .confiance .texte{font-size:13.5px;line-height:1.5;color:var(--vert-fonce)}
.application-refonte .confiance .texte strong{color:#084C37}
.application-refonte .pied-public{margin-top:26px;font-size:12.5px;color:var(--gris-clair);text-align:center}
@media (min-width:900px){
  .application-refonte .public{padding:56px 24px 56px}
  .application-refonte .marque-nom{font-size:34px}
  .application-refonte .marque-accroche{font-size:15.5px}
  .application-refonte .carte-public{max-width:470px;padding:30px 32px 32px}
  .application-refonte .carte-titre{font-size:24px}
  .application-refonte .confiance{max-width:470px}
}
/* ---------- page de l'offre ---------- */
.application-refonte .offre-entete{text-align:center;max-width:660px;margin-bottom:28px}
.application-refonte .offre-titre{font-size:28px;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;line-height:1.2}
.application-refonte .offre-intro{font-size:15.5px;color:var(--gris);margin:0;line-height:1.6}
.application-refonte .offre-grille{display:flex;flex-direction:column;gap:16px;width:100%;max-width:470px}
.application-refonte .carte-offre{background:var(--carte);border:1px solid var(--bord);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(16,27,46,.05),0 14px 40px rgba(16,27,46,.07)}
.application-refonte .offre-haut{padding:24px 24px 22px;background:var(--nuit);color:#fff}
.application-refonte .offre-nom{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9FE3C7;margin-bottom:10px}
.application-refonte .offre-prix{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.application-refonte .offre-montant{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1}
.application-refonte .offre-devise{font-size:16px;font-weight:600;color:rgba(255,255,255,.75)}
.application-refonte .offre-periode{font-size:15px;color:rgba(255,255,255,.6)}
.application-refonte .offre-detail{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-top:11px;line-height:1.5}
.application-refonte .offre-corps{padding:22px 24px 24px}
.application-refonte .offre-sous-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin:0 0 14px}
.application-refonte .avantages{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:13px}
.application-refonte .avantage{display:flex;align-items:flex-start;gap:12px}
.application-refonte .avantage .coche{flex:none;width:22px;height:22px;border-radius:50%;background:var(--vert-pale);display:flex;align-items:center;justify-content:center;margin-top:1px}
.application-refonte .avantage .coche::before{content:"";width:6px;height:10px;border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);transform:rotate(45deg) translate(-1px,-1px)}
.application-refonte .avantage-corps{flex:1}
.application-refonte .avantage-nom{display:block;font-size:15px;font-weight:600;line-height:1.35}
.application-refonte .avantage-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.45}
.application-refonte .rassurance{width:100%;max-width:470px;margin-top:18px;background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:22px 24px 24px}
.application-refonte .rassurance-titre{font-size:17px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.application-refonte .rassurance-intro{font-size:13.5px;color:var(--gris);margin:0 0 18px;line-height:1.55}
.application-refonte .garanties{display:flex;flex-direction:column;gap:14px}
.application-refonte .garantie{display:flex;align-items:flex-start;gap:12px}
.application-refonte .garantie .icone{flex:none;width:34px;height:34px;border-radius:11px;background:var(--vert-pale);color:var(--vert);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.application-refonte .garantie-nom{display:block;font-size:14.5px;font-weight:600}
.application-refonte .garantie-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.5}
.application-refonte .faq{width:100%;max-width:470px;margin-top:18px}
.application-refonte .faq-item{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-m);margin-bottom:8px;overflow:hidden}
.application-refonte .faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;min-height:54px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;line-height:1.4}
.application-refonte .faq-item>summary::-webkit-details-marker{display:none}
.application-refonte .faq-item>summary::after{content:"+";flex:none;font-size:17px;font-weight:700;color:var(--vert)}
.application-refonte .faq-item[open]>summary::after{content:"\2212"}
.application-refonte .faq-reponse{padding:0 18px 18px;font-size:13.5px;color:var(--gris);line-height:1.6;margin:0}
@media (min-width:900px){
  .application-refonte .offre-titre{font-size:36px}
  .application-refonte .offre-grille,.application-refonte .rassurance,.application-refonte .faq{max-width:1000px}
  .application-refonte .offre-deux{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start;width:100%;max-width:1000px}
  .application-refonte .offre-deux .offre-grille,.application-refonte .offre-deux .rassurance{max-width:none;margin-top:0}
  .application-refonte .offre-montant{font-size:52px}
  .application-refonte .offre-haut{padding:28px 28px 26px}
  .application-refonte .offre-corps{padding:26px 28px 28px}
  .application-refonte .faq-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  .application-refonte .faq-item{margin-bottom:0}
}

/* ============================================================
   PAGE OFFRE — styles complets + version ordinateur
   ============================================================ */
.application-refonte .offre-entete{text-align:center;max-width:660px;margin-bottom:28px}
.application-refonte .offre-titre{font-size:28px;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;line-height:1.2}
.application-refonte .offre-intro{font-size:15.5px;color:var(--gris);margin:0;line-height:1.6}
.application-refonte .offre-grille{display:flex;flex-direction:column;gap:16px;width:100%;max-width:470px}
.application-refonte .carte-offre{background:var(--carte);border:1px solid var(--bord);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(16,27,46,.05),0 14px 40px rgba(16,27,46,.07)}
/* Bloc nuit : coins du haut arrondis, pleine largeur */
.application-refonte .offre-haut{padding:24px 24px 22px;background:var(--nuit)!important;color:#fff;border-radius:20px 20px 0 0;margin:0;width:100%}
.application-refonte .offre-nom{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9FE3C7;margin-bottom:10px}
.application-refonte .offre-prix{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.application-refonte .offre-montant{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1;color:#fff}
.application-refonte .offre-devise{font-size:16px;font-weight:600;color:rgba(255,255,255,.75)}
.application-refonte .offre-periode{font-size:15px;color:rgba(255,255,255,.6)}
.application-refonte .offre-detail{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-top:11px;line-height:1.5}
.application-refonte .offre-corps{padding:22px 24px 24px}
.application-refonte .offre-sous-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin:0 0 14px}
.application-refonte .avantages{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:13px}
.application-refonte .avantage{display:flex;align-items:flex-start;gap:12px}
.application-refonte .avantage .coche{flex:none;width:22px;height:22px;border-radius:50%;background:var(--vert-pale);display:flex;align-items:center;justify-content:center;margin-top:1px}
.application-refonte .avantage .coche::before{content:"";width:6px;height:10px;border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);transform:rotate(45deg) translate(-1px,-1px)}
.application-refonte .avantage-corps{flex:1}
.application-refonte .avantage-nom{display:block;font-size:15px;font-weight:600;line-height:1.35}
.application-refonte .avantage-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.45}
.application-refonte .rassurance{width:100%;max-width:470px;margin-top:18px;background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:22px 24px 24px}
.application-refonte .rassurance-titre{font-size:17px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.application-refonte .rassurance-intro{font-size:13.5px;color:var(--gris);margin:0 0 18px;line-height:1.55}
.application-refonte .garanties{display:flex;flex-direction:column;gap:14px}
.application-refonte .garantie{display:flex;align-items:flex-start;gap:12px}
.application-refonte .garantie .icone{flex:none;width:34px;height:34px;border-radius:11px;background:var(--vert-pale);color:var(--vert);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.application-refonte .garantie-nom{display:block;font-size:14.5px;font-weight:600}
.application-refonte .garantie-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.5}
.application-refonte .faq{width:100%;max-width:470px;margin-top:18px}
.application-refonte .faq-item{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-m);margin-bottom:8px;overflow:hidden}
.application-refonte .faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;min-height:54px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;line-height:1.4}
.application-refonte .faq-item>summary::-webkit-details-marker{display:none}
.application-refonte .faq-item>summary::after{content:"+";flex:none;font-size:17px;font-weight:700;color:var(--vert)}
.application-refonte .faq-item[open]>summary::after{content:"\2212"}
.application-refonte .faq-reponse{padding:0 18px 18px;font-size:13.5px;color:var(--gris);line-height:1.6;margin:0}

/* --- VERSION ORDINATEUR (à partir de 900px) --- */
@media (min-width:900px){
  .application-refonte .offre-titre{font-size:36px}
  .application-refonte .offre-grille{max-width:none}
  .application-refonte .rassurance{max-width:none;margin-top:0}
  .application-refonte .faq{max-width:1000px}
  .application-refonte .offre-deux{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start;width:100%;max-width:1000px}
  .application-refonte .offre-montant{font-size:52px}
  .application-refonte .offre-haut{padding:28px 28px 26px}
  .application-refonte .offre-corps{padding:26px 28px 28px}
  .application-refonte .faq-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  .application-refonte .faq-item{margin-bottom:0}
}

/* ============================================================
   PAGE OFFRE v2 — version ordinateur améliorée (Claude Design)
   ============================================================ */
.application-refonte .offre-entete{text-align:center;max-width:660px;margin-bottom:28px}
.application-refonte .offre-titre{font-size:28px;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;line-height:1.2}
.application-refonte .offre-intro{font-size:15.5px;color:var(--gris);margin:0;line-height:1.6}
.application-refonte .offre-grille{display:flex;flex-direction:column;gap:16px;width:100%;max-width:470px}
.application-refonte .carte-offre{background:var(--carte);border:1px solid var(--bord);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(16,27,46,.05),0 14px 40px rgba(16,27,46,.07)}
.application-refonte .offre-haut{padding:24px 24px 22px;background:var(--nuit)!important;color:#fff}
.application-refonte .offre-nom{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9FE3C7;margin-bottom:10px}
.application-refonte .offre-prix{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.application-refonte .offre-montant{font-family:var(--police);font-variant-numeric:tabular-nums;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.application-refonte .offre-devise{font-size:16px;font-weight:600;color:rgba(255,255,255,.75)}
.application-refonte .offre-periode{font-size:15px;color:rgba(255,255,255,.6)}
.application-refonte .offre-detail{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-top:11px;line-height:1.5}
.application-refonte .offre-corps{padding:22px 24px 24px}
.application-refonte .offre-sous-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin:0 0 14px}
.application-refonte .avantages{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:13px}
.application-refonte .avantage{display:flex;align-items:flex-start;gap:12px}
.application-refonte .avantage .coche{flex:none;width:22px;height:22px;border-radius:50%;background:var(--vert-pale);display:flex;align-items:center;justify-content:center;margin-top:1px}
.application-refonte .avantage .coche::before{content:"";width:6px;height:10px;border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);transform:rotate(45deg) translate(-1px,-1px)}
.application-refonte .avantage-corps{flex:1}
.application-refonte .avantage-nom{display:block;font-size:15px;font-weight:600;line-height:1.35}
.application-refonte .avantage-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.45}
.application-refonte .rassurance{width:100%;max-width:470px;margin-top:18px;background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:22px 24px 24px}
.application-refonte .rassurance-titre{font-size:17px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.application-refonte .rassurance-intro{font-size:13.5px;color:var(--gris);margin:0 0 18px;line-height:1.55}
.application-refonte .garanties{display:flex;flex-direction:column;gap:14px}
.application-refonte .garantie{display:flex;align-items:flex-start;gap:12px}
.application-refonte .garantie .icone{flex:none;width:34px;height:34px;border-radius:11px;background:var(--vert-pale);color:var(--vert);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.application-refonte .garantie-nom{display:block;font-size:14.5px;font-weight:600}
.application-refonte .garantie-info{display:block;font-size:13px;color:var(--gris);margin-top:2px;line-height:1.5}
.application-refonte .faq{width:100%;max-width:470px;margin-top:18px}
.application-refonte .faq-item{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-m);margin-bottom:8px;overflow:hidden}
.application-refonte .faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;min-height:54px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;line-height:1.4}
.application-refonte .faq-item>summary::-webkit-details-marker{display:none}
.application-refonte .faq-item>summary::after{content:"+";flex:none;font-size:17px;font-weight:700;color:var(--vert)}
.application-refonte .faq-item[open]>summary::after{content:"\2212"}
.application-refonte .faq-reponse{padding:0 18px 18px;font-size:13.5px;color:var(--gris);line-height:1.6;margin:0}
.application-refonte .offre-essai{display:none}

@media (min-width:900px){
  .application-refonte .offre-entete{max-width:760px;margin-bottom:24px}
  .application-refonte .offre-titre{font-size:34px}
  .application-refonte .offre-grille,.application-refonte .rassurance,.application-refonte .faq{max-width:1080px}
  .application-refonte .offre-deux{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;width:100%;max-width:1080px}
  .application-refonte .offre-deux .offre-grille,.application-refonte .offre-deux .rassurance{max-width:none;margin-top:0}
  .application-refonte .offre-haut{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px}
  .application-refonte .offre-haut-corps{flex:none}
  .application-refonte .offre-nom{margin-bottom:8px}
  .application-refonte .offre-montant{font-size:46px}
  .application-refonte .offre-detail{margin-top:8px}
  .application-refonte .offre-essai{display:block;flex:1;min-width:0;text-align:right;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.65)}
  .application-refonte .offre-corps{padding:24px 28px 26px}
  .application-refonte .avantages{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:22px}
  .application-refonte .offre-action{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .application-refonte .offre-action .btn{width:auto;padding:0 34px;flex:none}
  .application-refonte .offre-action p{margin:0;text-align:left}
  .application-refonte .faq-liste{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .application-refonte .faq-item{margin-bottom:0}
  .application-refonte .faq{margin-top:22px}
}
@media (min-width:1240px){
  .application-refonte .offre-deux,.application-refonte .faq{max-width:1180px}
  .application-refonte .offre-montant{font-size:52px}
}

/* --- Sur ordinateur : la barre du haut ne s'arrondit pas côté menu latéral --- */
@media (min-width: 900px) {
    .application-refonte .ecran > .barre {
        border-radius: 0 !important;
    }
}

/* --- Ordinateur : toutes les barres du haut = fond blanc, texte foncé --- */
@media (min-width: 900px) {
    .application-refonte .ecran > .barre,
    .application-refonte .ecran > .barre.accueil-barre {
        background: var(--carte) !important;
        color: var(--encre) !important;
        border-bottom: 1px solid var(--bord);
    }
    .application-refonte .ecran > .barre .barre-marque,
    .application-refonte .ecran > .barre .accueil-bonjour { color: var(--encre) !important; }
    .application-refonte .ecran > .barre .barre-info,
    .application-refonte .ecran > .barre .barre-titre,
    .application-refonte .ecran > .barre .accueil-boutique { color: var(--gris) !important; }
    .application-refonte .ecran > .barre .barre-retour { color: var(--gris) !important; }
}

/* --- Pages génériques (Achats, Inventaire, Catégories...) : en-tête de tableau figé au défilement --- */
.application-refonte .zone .tableau thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--entete, #F7F9FB);
    box-shadow: 0 1px 0 var(--bord, #E2E7EE);
}
/* Le titre + les chiffres restent en haut aussi (collants) */
.application-refonte .zone .entete-ecran {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--fond, #F1F4F7);
    padding-top: 4px;
    padding-bottom: 12px;
    margin: -16px -16px 0;
    padding-left: 16px;
    padding-right: 16px;
}
.application-refonte .zone .bandeau-chiffres {
    position: sticky;
    top: 56px;
    z-index: 5;
    background: var(--fond, #F1F4F7);
    padding-bottom: 12px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Formulaires : centrés et plus larges sur ordinateur --- */
@media (min-width: 900px) {
    .application-refonte .zone .formulaire-etroit,
    .application-refonte .zone > form {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    .application-refonte .zone .titre-ecran {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Le formulaire dans une carte blanche, centré, aéré */
    .application-refonte .zone .formulaire-etroit {
        background: var(--carte);
        border: 1px solid var(--bord);
        border-radius: 16px;
        padding: 28px 32px;
    }
}

/* --- Centrage formulaires sur ordinateur (zone en flex-column) --- */
@media (min-width: 900px) {
    .application-refonte .zone.zone-fond > form.formulaire-etroit,
    .application-refonte .zone.zone-fond > .formulaire-etroit {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 640px !important;
        width: 100% !important;
        background: var(--carte);
        border: 1px solid var(--bord);
        border-radius: 16px;
        padding: 28px 32px;
    }
    .application-refonte .zone.zone-fond > h1.titre-ecran {
        align-self: center !important;
        max-width: 640px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- Badges du menu latéral (caisse, crédits, réappro) --- */
.application-refonte .lateral-lien { position: relative; }
.application-refonte .lateral-badge {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin-left: auto;
}
.application-refonte .lateral-badge-vert { background: rgba(18,161,113,.28); color: #9FE3C7; }
.application-refonte .lateral-badge-corail { background: rgba(201,63,58,.26); color: #F3B0AD; }
.application-refonte .lateral-badge-ocre { background: rgba(201,124,30,.28); color: #F0C68A; }
.application-refonte .lateral-badge-gris { background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
/* Le texte du lien prend l'espace, le badge se colle à droite */
.application-refonte .lateral-lien .txt { flex: 1 1 auto; }

/* --- Résumé des produits dans l'historique des ventes : PC seulement --- */
.application-refonte .ligne-produits-pc { display: none; }
@media (min-width: 900px) {
    .application-refonte .ligne-produits-pc {
        display: block;
        font-size: 12.5px;
        color: var(--gris);
        margin-top: 3px;
        line-height: 1.4;
    }
    .application-refonte .ligne-produits-pc .q {
        color: var(--vert);
        font-weight: 600;
    }
}

/* --- Boîte de dialogue caisse (ouvrir avant de vendre) --- */
.application-refonte .fond-dialogue {
    position: fixed;
    inset: 0;
    background: rgba(16,27,46,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.application-refonte .dialogue {
    background: var(--carte);
    border-radius: 20px;
    padding: 26px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(16,27,46,.3);
}
.application-refonte .dialogue-titre {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}
.application-refonte .dialogue-texte {
    font-size: 14px;
    color: var(--gris);
    line-height: 1.55;
    margin: 0 0 18px;
}
.application-refonte .dialogue-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 7px;
}
.application-refonte .dialogue-champ {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid var(--bord);
    border-radius: 12px;
    background: var(--entete);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--chiffres);
    outline: none;
}
.application-refonte .dialogue-champ:focus {
    border-color: var(--vert);
    background: var(--carte);
    box-shadow: 0 0 0 3px rgba(11,122,85,.12);
}
.application-refonte .dialogue-annuler {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--gris);
    font-weight: 600;
}

/* --- Boîte de dialogue caisse : fond PLEIN qui cache toute l'interface --- */
.application-refonte .fond-dialogue {
    position: fixed;
    inset: 0;
    background: var(--fond);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}
/* La marque en haut, comme la page de connexion */
.application-refonte .dialogue-marque {
    text-align: center;
    margin-bottom: 22px;
}
.application-refonte .dialogue-marque .nom {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--nuit);
}
.application-refonte .dialogue-marque .nom .accent { color: var(--vert); }
.application-refonte .dialogue {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 20px;
    padding: 28px 26px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(16,27,46,.05), 0 14px 40px rgba(16,27,46,.07);
}
.application-refonte .dialogue-icone {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ocre-pale);
    color: var(--ocre);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}
.application-refonte .dialogue-titre {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: center;
}
.application-refonte .dialogue-texte {
    font-size: 14px;
    color: var(--gris);
    line-height: 1.55;
    margin: 0 0 20px;
    text-align: center;
}
.application-refonte .dialogue-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 7px;
}
.application-refonte .dialogue-champ {
    width: 100%;
    min-height: 54px;
    padding: 0 15px;
    border: 1px solid var(--bord);
    border-radius: 12px;
    background: var(--entete);
    font-size: 20px;
    font-weight: 700;
    font-family: var(--chiffres);
    text-align: center;
    outline: none;
}
.application-refonte .dialogue-champ:focus {
    border-color: var(--vert);
    background: var(--carte);
    box-shadow: 0 0 0 3px rgba(11,122,85,.12);
}
.application-refonte .dialogue-annuler {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--gris);
    font-weight: 600;
}

/* --- Boîte de dialogue native (balise <dialog>) : par-dessus tout --- */
.application-refonte dialog.dialogue-natif,
dialog.dialogue-natif {
    border: none;
    border-radius: 20px;
    padding: 28px 26px;
    max-width: 400px;
    width: calc(100% - 40px);
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(16,27,46,.3);
    text-align: center;
}
dialog.dialogue-natif::backdrop {
    background: rgba(16,27,46,.75);
}
dialog.dialogue-natif .dialogue-marque {
    text-align: center;
    margin-bottom: 18px;
}
dialog.dialogue-natif .dialogue-marque .nom {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: #101B2E;
}
dialog.dialogue-natif .dialogue-marque .nom .accent { color: #0B7A55; }
dialog.dialogue-natif .dialogue-icone {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #FDF2E0; color: #C97C1E;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 16px;
}
dialog.dialogue-natif .dialogue-titre {
    font-size: 21px; font-weight: 700; margin: 0 0 10px; text-align: center;
}
dialog.dialogue-natif .dialogue-texte {
    font-size: 14px; color: #64748B; line-height: 1.55; margin: 0 0 20px; text-align: center;
}
dialog.dialogue-natif .dialogue-label {
    display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; text-align: left;
}
dialog.dialogue-natif .dialogue-champ {
    width: 100%; min-height: 54px; padding: 0 15px;
    border: 1px solid #E2E7EE; border-radius: 12px;
    background: #F7F9FB; font-size: 20px; font-weight: 700;
    text-align: center; outline: none;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
dialog.dialogue-natif .dialogue-champ:focus {
    border-color: #0B7A55; background: #FFF;
    box-shadow: 0 0 0 3px rgba(11,122,85,.12);
}
dialog.dialogue-natif .btn {
    width: 100%; min-height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 999px;
    font-size: 17px; font-weight: 700; cursor: pointer;
    background: #0B7A55; color: #fff; text-decoration: none;
}
dialog.dialogue-natif .dialogue-annuler {
    display: block; text-align: center; margin-top: 16px;
    font-size: 13.5px; color: #64748B; font-weight: 600; text-decoration: none;
}

/* --- Ajustements boîte caisse : coins arrondis + fond bien opaque --- */
dialog.dialogue-natif {
    border-radius: 22px !important;
    overflow: hidden;
}
dialog.dialogue-natif::backdrop {
    background: #101B2E !important;
    opacity: 0.97 !important;
}

/* ============================================================
   HISTORIQUE DES VENTES — 6 colonnes sur PC, bloc compact mobile
   ============================================================ */
/* TÉLÉPHONE (par défaut) */
.application-refonte .ligne-ventes{display:grid;grid-template-columns:1fr auto 78px;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.application-refonte .ligne-ventes:hover{background:#F9FBFC}
.application-refonte .ligne-ventes:active{background:var(--fond)}
.application-refonte .liste-entete-ventes{display:grid;grid-template-columns:1fr auto 78px;gap:10px;align-items:center;padding:9px 16px;background:var(--entete);border-bottom:1px solid var(--bord);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.application-refonte .liste-entete-ventes .a-droite{text-align:right}
.application-refonte .cell-date,.application-refonte .cell-ticket,.application-refonte .cell-client,.application-refonte .cell-produits{display:none}
.application-refonte .vente-compact{min-width:0}
.application-refonte .vente-compact-haut{display:flex;align-items:baseline;gap:7px}
.application-refonte .vente-compact-ticket{font-family:var(--chiffres);font-size:13px;font-weight:700;color:var(--encre)}
.application-refonte .vente-compact-date{font-family:var(--chiffres);font-size:12px;color:var(--gris-clair)}
.application-refonte .vente-compact-client{display:block;font-size:14.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.application-refonte .vente-compact-produits{display:block;font-size:12.5px;color:var(--gris);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.application-refonte .cell-montant{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.application-refonte .cell-montant.est-du{color:var(--corail)}
.application-refonte .cell-montant.est-partiel{color:var(--ocre)}
.application-refonte .cell-etat{text-align:right}
.application-refonte .etat-partielle{background:var(--ocre-pale);color:var(--ocre)}
.application-refonte .etat-annulee{background:#EEF2F6;color:var(--gris)}

/* ORDINATEUR (à partir de 900px) */
@media (min-width:900px){
  .application-refonte{--colonnes-ventes:84px 92px minmax(0,1fr) minmax(0,1.5fr) 88px 82px}
  .application-refonte .cell-date .heure{display:block;margin-top:1px}
  .application-refonte .liste-entete-ventes,.application-refonte .ligne-ventes{grid-template-columns:var(--colonnes-ventes);gap:12px;padding-left:16px;padding-right:16px}
  .application-refonte .liste-entete-ventes{font-size:11.5px}
  .application-refonte .ligne-ventes{min-height:58px;padding-top:10px;padding-bottom:10px}
  .application-refonte .cell-date,.application-refonte .cell-ticket,.application-refonte .cell-client,.application-refonte .cell-produits{display:block;min-width:0}
  .application-refonte .vente-compact{display:none}
  .application-refonte .cell-date{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:13px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .application-refonte .cell-date .heure{color:var(--gris-clair)}
  .application-refonte .cell-ticket{font-family:var(--chiffres);font-size:13px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .application-refonte .cell-client{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .application-refonte .cell-client.anonyme{color:var(--gris)}
  .application-refonte .cell-produits{font-size:13.5px;color:var(--gris);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .application-refonte .cell-produits .qte{font-family:var(--chiffres);font-weight:700;color:var(--encre)}
  .application-refonte .cell-produits .sep{color:#C7D0DB;padding:0 2px}
  .application-refonte .cell-produits .reste{font-weight:600;color:var(--vert)}
  .application-refonte .cell-montant{font-size:15.5px;min-width:0}
  .application-refonte .cell-etat{min-width:0}
  .application-refonte .liste-entete-ventes .a-droite,.application-refonte .cell-etat{text-align:right}
  .application-refonte .entete-ordi{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .application-refonte .entete-ordi-actions{display:flex;align-items:center;gap:10px;flex:none}
  .application-refonte .entete-ordi-actions .btn{width:auto;padding:0 22px}
  .application-refonte .entete-ordi .duo{max-width:400px}
}
@media (min-width:1120px){
  .application-refonte{--colonnes-ventes:132px 128px minmax(0,1fr) minmax(0,1.6fr) 130px 104px}
  .application-refonte .liste-entete-ventes,.application-refonte .ligne-ventes{gap:18px;padding-left:24px;padding-right:24px}
  .application-refonte .cell-date{font-size:13.5px}
  .application-refonte .cell-date .heure{display:inline;margin-top:0}
  .application-refonte .cell-ticket{font-size:13.5px}
}
@media (min-width:1360px){
  .application-refonte{--colonnes-ventes:150px 140px minmax(0,1fr) minmax(0,1.8fr) 150px 116px}
  .application-refonte .liste-entete-ventes,.application-refonte .ligne-ventes{gap:20px;padding-left:28px;padding-right:28px}
  .application-refonte .cell-produits{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* --- Boîte caisse : fond clair (comme connexion) + cacher la vente derrière --- */
dialog.dialogue-natif::backdrop {
    background: #F1F4F7 !important;
    opacity: 1 !important;
}
/* Quand la caisse est fermée, on masque VRAIMENT toute la saisie de vente */
body.caisse-fermee .zone > *:not(.dialogue-natif),
body.caisse-fermee .entete-ecran,
body.caisse-fermee .encadre-erreurs,
body.caisse-fermee form.point-de-vente,
body.caisse-fermee .tableau-saisie,
body.caisse-fermee .titre-ecran {
    display: none !important;
}

/* --- Boîte caisse : fond clair opaque comme la page de connexion --- */
dialog.dialogue-natif::backdrop {
    background: #F1F4F7 !important;
    opacity: 1 !important;
}

/* ---------- sélecteur de période (tableau de bord) ---------- */
.application-refonte .periodes{
  display:flex;
  gap:7px;
  padding:12px 16px;
  background:var(--carte);
  border-bottom:1px solid var(--bord);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  scroll-padding-left:16px;
}
.application-refonte .periodes::-webkit-scrollbar{display:none}
.application-refonte .periode{
  flex:none;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:var(--r-pilule);
  border:1px solid var(--bord);
  background:var(--carte);
  color:var(--gris);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  scroll-snap-align:start;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.application-refonte .periode:hover{border-color:var(--gris-clair);color:var(--encre);text-decoration:none}
.application-refonte .periode.active,
.application-refonte .periode[aria-current="page"]{
  background:var(--nuit);
  border-color:var(--nuit);
  color:#fff;
}
.application-refonte .periode.active:hover,
.application-refonte .periode[aria-current="page"]:hover{color:#fff}
@media (min-width:900px){
  .application-refonte .periodes{padding:14px 28px;overflow-x:visible;flex-wrap:nowrap}
  .application-refonte .periode{flex:1;padding:0 10px;font-size:14px;min-height:38px}
}

/* ---------- sélecteur de période (tableau de bord) ---------- */
.application-refonte .periodes{
  display:flex;
  gap:7px;
  padding:12px 16px;
  background:var(--carte);
  border-bottom:1px solid var(--bord);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  scroll-padding-left:16px;
}
.application-refonte .periodes::-webkit-scrollbar{display:none}
.application-refonte .periode{
  flex:none;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:var(--r-pilule);
  border:1px solid var(--bord);
  background:var(--carte);
  color:var(--gris);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  scroll-snap-align:start;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.application-refonte .periode:hover{border-color:var(--gris-clair);color:var(--encre);text-decoration:none}
.application-refonte .periode.active,
.application-refonte .periode[aria-current="page"]{
  background:var(--nuit);
  border-color:var(--nuit);
  color:#fff;
}
.application-refonte .periode.active:hover,
.application-refonte .periode[aria-current="page"]:hover{color:#fff}
@media (min-width:900px){
  .application-refonte .periodes{padding:14px 28px;overflow-x:visible;flex-wrap:nowrap}
  .application-refonte .periode{flex:1;padding:0 10px;font-size:14px;min-height:38px}
}

/* --- Selecteur periode : version sans prefixe (force le style) --- */
.periodes{
  display:flex !important;
  gap:7px;
  padding:12px 16px;
  background:#FFFFFF;
  border-bottom:1px solid #E2E7EE;
  overflow-x:auto;
  scrollbar-width:none;
}
.periodes::-webkit-scrollbar{display:none}
.periode{
  flex:none;
  min-height:36px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #E2E7EE;
  background:#FFFFFF;
  color:#64748B;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none !important;
}
.periode.active{
  background:#101B2E;
  border-color:#101B2E;
  color:#FFFFFF;
}
@media (min-width:900px){
  .periodes{padding:14px 28px;overflow-x:visible;flex-wrap:nowrap}
  .periode{flex:1;padding:0 10px;font-size:14px;min-height:38px}
}

/* ============================================================
   CARTE DE CONTRÔLE CAISSE sur le tableau de bord
   L'argent qui doit être physiquement dans le tiroir.
   ============================================================ */
.application-refonte .carte-caisse-controle{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(135deg,#0B7A55,#12A171);
  box-shadow:0 4px 16px rgba(11,122,85,.25)}
.application-refonte .carte-caisse-controle.caisse-est-fermee{
  background:#EDF1F5;box-shadow:none;border:1px solid var(--bord)}
.application-refonte .caisse-contenu{display:flex;flex-direction:column;gap:3px;min-width:0}
.application-refonte .caisse-libelle{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.01em}
.application-refonte .caisse-est-fermee .caisse-libelle{color:var(--gris)}
.application-refonte .caisse-montant{
  font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.application-refonte .caisse-est-fermee .caisse-montant{color:var(--encre)}
.application-refonte .caisse-devise{font-size:14px;font-weight:600;opacity:.75}
.application-refonte .caisse-detail{
  font-size:11.5px;color:rgba(255,255,255,.8);line-height:1.4;margin-top:2px}
.application-refonte .caisse-est-fermee .caisse-detail{color:var(--gris-clair)}
.application-refonte .caisse-lien{
  flex:none;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;font-size:13.5px;font-weight:700;
  text-decoration:none;white-space:nowrap}
.application-refonte .caisse-est-fermee .caisse-lien{
  background:var(--vert);color:#fff}
@media (max-width:560px){
  .application-refonte .carte-caisse-controle{flex-direction:column;align-items:stretch}
  .application-refonte .caisse-lien{text-align:center}
}

/* ============================================================
   CAISSE — écran Sortie d'espèces (scopé .ecran-caisse)
   ============================================================ */
.application-refonte .ecran-caisse .bandeau{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13.5px;font-weight:600}
.application-refonte .ecran-caisse .bandeau .point{flex:none;width:9px;height:9px;border-radius:50%}
.application-refonte .ecran-caisse .bandeau .info{margin-left:auto;font-weight:500;font-size:12.5px;opacity:.85}
.application-refonte .ecran-caisse .bandeau-ocre{background:var(--ocre-pale);color:#8A5510;border-bottom:1px solid #F3E1C4}
.application-refonte .ecran-caisse .bandeau-ocre .point{background:var(--ocre)}

.application-refonte .ecran-caisse .intro-form{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--gris)}

.application-refonte .ecran-caisse .rappel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:12px}
.application-refonte .ecran-caisse .rappel .libelle{font-size:13.5px;color:var(--gris)}
.application-refonte .ecran-caisse .rappel .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--encre)}

.application-refonte .ecran-caisse .apercu{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:var(--r-g);margin-bottom:12px;border:1px dashed}
.application-refonte .ecran-caisse .apercu .libelle{font-size:13.5px;font-weight:600}
.application-refonte .ecran-caisse .apercu .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.application-refonte .ecran-caisse .apercu-ocre{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.application-refonte .ecran-caisse .apercu-ocre .valeur{color:#8A5510}
.application-refonte .ecran-caisse .apercu-impossible{background:var(--corail-pale);border-color:#F3D3D1;color:var(--corail)}
.application-refonte .ecran-caisse .apercu-impossible .valeur{color:var(--corail)}

.application-refonte .ecran-caisse .btn-ocre{background:var(--ocre);color:#fff;box-shadow:0 2px 8px rgba(201,124,30,.28)}
.application-refonte .ecran-caisse .btn-ocre:hover{background:#B36C14}
.application-refonte .ecran-caisse .pied-form .duo-btn .btn{min-height:54px;font-size:16.5px;font-weight:700;white-space:nowrap}
.application-refonte .ecran-caisse .pied-form .duo-btn .btn-blanc{flex:0 0 38%;font-weight:600}

/* champ monnaie avec suffixe FCFA */
.application-refonte .ecran-caisse .champ-monnaie{display:flex;align-items:center;gap:8px;border:1px solid var(--bord);border-radius:var(--r-m);background:var(--carte);padding:0 14px}
.application-refonte .ecran-caisse .champ-monnaie .saisie{border:none;background:none;flex:1;padding:14px 0}
.application-refonte .ecran-caisse .champ-monnaie .suffixe{font-size:13px;font-weight:700;color:var(--gris);flex:none}
.application-refonte .ecran-caisse .saisie-chiffre{font-family:var(--chiffres);font-size:22px;font-weight:700;letter-spacing:-.02em}
.application-refonte .ecran-caisse .obligatoire{color:var(--corail)}
.application-refonte .ecran-caisse .aide{display:block;font-size:12px;color:var(--gris-clair);margin-top:5px;line-height:1.45}

/* case à cocher est_depense */
.application-refonte .ecran-caisse .champ-case{margin-top:4px}
.application-refonte .ecran-caisse .case-a-cocher{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;cursor:pointer;line-height:1.4}
.application-refonte .ecran-caisse .case-a-cocher input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--ocre)}

/* ============================================================
   CAISSE — écran Entrée d'espèces (vert, scopé .ecran-caisse)
   ============================================================ */
.application-refonte .ecran-caisse .bandeau-vert{background:var(--vert-pale);color:var(--vert-fonce);border-bottom:1px solid #C9E7DA}
.application-refonte .ecran-caisse .bandeau-vert .point{background:var(--vert)}
.application-refonte .ecran-caisse .apercu-vert{background:var(--vert-pale);border-color:#B8DECD;color:var(--vert-fonce)}
.application-refonte .ecran-caisse .apercu-vert .valeur{color:var(--vert)}
.application-refonte .ecran-caisse .alerte-vert{background:var(--vert-pale)}
.application-refonte .ecran-caisse .alerte-vert .point{background:var(--vert)}
.application-refonte .ecran-caisse .alerte-vert .texte{color:var(--vert-fonce)}

/* ============================================================
   CAISSE OUVERTE — grand chiffre, détail, actions, mouvements
   (scopé .ecran-caisse pour ne rien casser ailleurs)
   ============================================================ */
.application-refonte .ecran-caisse .caisse-corps{padding:14px 16px 22px}
.application-refonte .ecran-caisse .bandeau-ouverte{background:var(--vert-pale);color:var(--vert-fonce);border-bottom:1px solid #C9E7DA}
.application-refonte .ecran-caisse .bandeau-ouverte .point{background:var(--vert)}

/* le chiffre roi */
.application-refonte .ecran-caisse .tresor{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#0B7A55,#12A171);box-shadow:0 4px 16px rgba(11,122,85,.25)}
.application-refonte .ecran-caisse .tresor .etiquette{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.9)}
.application-refonte .ecran-caisse .tresor .ligne{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.application-refonte .ecran-caisse .tresor .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.05}
.application-refonte .ecran-caisse .tresor .devise{font-size:15px;font-weight:600;color:rgba(255,255,255,.75)}
.application-refonte .ecran-caisse .tresor .formule{display:block;font-size:11.5px;color:rgba(255,255,255,.8);margin-top:4px}

/* carte détail */
.application-refonte .ecran-caisse .carte-blanche{padding:15px 16px;border-radius:16px;background:var(--carte);border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:12px}
.application-refonte .ecran-caisse .carte-titre{margin:0 0 12px;font-size:14px;font-weight:700}
.application-refonte .ecran-caisse .recap{display:flex;flex-direction:column;gap:1px}
.application-refonte .ecran-caisse .recap-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--trait)}
.application-refonte .ecran-caisse .recap-ligne:last-child{border-bottom:none}
.application-refonte .ecran-caisse .recap-ligne .libelle{font-size:13.5px;color:var(--gris)}
.application-refonte .ecran-caisse .recap-ligne .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:700}
.application-refonte .ecran-caisse .recap-total{margin-top:4px;padding-top:11px;border-top:2px solid var(--bord)}
.application-refonte .ecran-caisse .recap-total .libelle{font-weight:700;color:var(--encre);font-size:14px}
.application-refonte .ecran-caisse .recap-total .valeur{font-size:17px;color:var(--vert)}
.application-refonte .ecran-caisse .montant-vert{color:var(--vert)}
.application-refonte .ecran-caisse .montant-corail{color:var(--corail)}

/* séparateurs de sections */
.application-refonte .ecran-caisse .separateur{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gris-clair);margin:18px 0 9px;padding-left:2px}

/* grandes actions (boutons vers écrans dédiés) */
.application-refonte .ecran-caisse .actions{display:flex;flex-direction:column;gap:9px}
.application-refonte .ecran-caisse .action{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:14px;background:var(--carte);border:1px solid var(--bord);text-decoration:none;color:inherit;box-shadow:var(--ombre-douce)}
.application-refonte .ecran-caisse .action:hover{border-color:var(--vert)}
.application-refonte .ecran-caisse .action .signe{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.application-refonte .ecran-caisse .action .corps{flex:1;min-width:0}
.application-refonte .ecran-caisse .action .nom{display:block;font-size:15.5px;font-weight:700}
.application-refonte .ecran-caisse .action .desc{display:block;font-size:12.5px;color:var(--gris);margin-top:1px}
.application-refonte .ecran-caisse .action .fleche{flex:none;font-size:22px;color:var(--gris-clair)}
.application-refonte .ecran-caisse .action-vert .signe{background:var(--vert-pale);color:var(--vert)}
.application-refonte .ecran-caisse .action-vert:hover{border-color:var(--vert)}
.application-refonte .ecran-caisse .action-ocre .signe{background:var(--ocre-pale);color:var(--ocre)}
.application-refonte .ecran-caisse .action-ocre:hover{border-color:var(--ocre)}
.application-refonte .ecran-caisse .action-corail .signe{background:var(--corail-pale);color:var(--corail)}
.application-refonte .ecran-caisse .action-corail:hover{border-color:var(--corail)}

/* liste des mouvements du jour */
.application-refonte .ecran-caisse .carte-liste{padding:0;overflow:hidden}
.application-refonte .ecran-caisse .liste-entete-mvt{display:grid;grid-template-columns:56px 82px minmax(0,1fr) 90px 92px;gap:10px;align-items:center;padding:11px 15px;background:var(--entete);border-bottom:1px solid var(--bord);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
.application-refonte .ecran-caisse .liste-entete-mvt .a-droite{text-align:right}
.application-refonte .ecran-caisse .ligne-mvt{display:grid;grid-template-columns:56px 82px minmax(0,1fr) 90px 92px;gap:10px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--trait);text-decoration:none;color:inherit}
.application-refonte .ecran-caisse .ligne-mvt:last-of-type{border-bottom:none}
.application-refonte .ecran-caisse .ligne-mvt:hover{background:#F9FBFC}
.application-refonte .ecran-caisse .cell-heure{font-family:var(--chiffres);font-size:13px;color:var(--gris)}
.application-refonte .ecran-caisse .cell-motif{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.application-refonte .ecran-caisse .cell-par{font-size:12.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.application-refonte .ecran-caisse .cell-somme{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
.application-refonte .ecran-caisse .cell-somme.entre{color:var(--vert)}
.application-refonte .ecran-caisse .cell-somme.sort{color:var(--corail)}
.application-refonte .ecran-caisse .etat-neutre{background:#EEF2F6;color:var(--gris)}
.application-refonte .ecran-caisse .mvt-compact{display:none}
.application-refonte .ecran-caisse .liste-pied{padding:13px 15px;text-align:center;font-size:12px;color:var(--gris-clair)}

/* --- MOBILE : on masque les colonnes, on montre le bloc compact --- */
@media (max-width:768px){
  .application-refonte .ecran-caisse .liste-entete-mvt{grid-template-columns:1fr auto}
  .application-refonte .ecran-caisse .liste-entete-mvt .cell-heure,
  .application-refonte .ecran-caisse .liste-entete-mvt .cell-type,
  .application-refonte .ecran-caisse .liste-entete-mvt .cell-motif,
  .application-refonte .ecran-caisse .liste-entete-mvt .cell-par{display:none}
  .application-refonte .ecran-caisse .ligne-mvt{grid-template-columns:1fr auto}
  .application-refonte .ecran-caisse .ligne-mvt .cell-heure,
  .application-refonte .ecran-caisse .ligne-mvt .cell-type,
  .application-refonte .ecran-caisse .ligne-mvt .cell-motif,
  .application-refonte .ecran-caisse .ligne-mvt .cell-par{display:none}
  .application-refonte .ecran-caisse .mvt-compact{display:block;min-width:0}
  .application-refonte .ecran-caisse .mvt-compact-haut{display:flex;align-items:center;gap:8px}
  .application-refonte .ecran-caisse .mvt-compact-heure{font-family:var(--chiffres);font-size:12px;color:var(--gris-clair)}
  .application-refonte .ecran-caisse .mvt-compact-motif{display:block;font-size:13.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .application-refonte .ecran-caisse .mvt-compact-par{display:block;font-size:12px;color:var(--gris-clair);margin-top:1px}
}

/* --- ORDINATEUR : deux colonnes (actions à gauche, mouvements à droite) --- */
@media (min-width:1000px){
  .application-refonte .ecran-caisse .caisse-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start;max-width:1180px;margin:0 auto}
}

/* ============================================================
   CAISSE — Historique des séances (scopé .ecran-caisse)
   ============================================================ */
.application-refonte .ecran-caisse .bandeau-fermee{background:#EDF1F5;color:var(--gris);border-bottom:1px solid var(--bord)}
.application-refonte .ecran-caisse .bandeau-fermee .point{background:var(--gris-clair)}

.application-refonte .ecran-caisse .seance{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 12px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--trait);text-decoration:none;color:inherit}
.application-refonte .ecran-caisse .seance:last-of-type{border-bottom:none}
.application-refonte .ecran-caisse .seance:hover{background:#F9FBFC}
.application-refonte .ecran-caisse .seance .date{grid-column:1;grid-row:1;font-size:15px;font-weight:700}
.application-refonte .ecran-caisse .seance .gens{grid-column:1;grid-row:2;font-size:12.5px;color:var(--gris)}
.application-refonte .ecran-caisse .seance .flux{grid-column:1;grid-row:3;font-family:var(--chiffres);font-size:12.5px;color:var(--gris-clair);margin-top:2px}
.application-refonte .ecran-caisse .seance .ecart-val{grid-column:2;grid-row:1/4;align-self:center;font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;text-align:center}
.application-refonte .ecran-caisse .seance .ecart-val.zero{background:var(--vert-pale);color:var(--vert)}
.application-refonte .ecran-caisse .seance .ecart-val.plus{background:var(--ocre-pale);color:var(--ocre)}
.application-refonte .ecran-caisse .seance .ecart-val.manque{background:var(--corail-pale);color:var(--corail)}
.application-refonte .ecran-caisse .seance .ecart-val.encours{background:#E7EDF5;color:var(--gris)}

/* résumé figé en haut de l'historique (Option B) */
.application-refonte .ecran-caisse .entete-historique-fige{background:var(--fond);padding:14px 16px 0}
.application-refonte .ecran-caisse .entete-historique-fige .large{max-width:1240px;margin:0 auto}
/* =========================================================================
   AkwabaGest — CONSOLE TECHNICIEN (/plateforme/). A AJOUTER a akwabagest.css.
   Tout est scope sous .plateforme : zero conflit avec .filtre/.recherche/
   .compteur/.offre/etc. deja globaux. Le gabarit base_plateforme.html doit
   porter class="appli plateforme" (la classe .appli reste, elle, globale).
   ========================================================================= */

.plateforme .ecran{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--fond)}
.plateforme .fige{flex:none}
.plateforme .zone{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--carte)}
.plateforme .zone-fond{background:var(--fond)}
.plateforme .zone::-webkit-scrollbar{width:0;height:0}
.plateforme .barre{display:flex;align-items:baseline;gap:10px;padding:13px 18px;
  padding-top:calc(13px + env(safe-area-inset-top));background:var(--nuit);color:#fff}
.plateforme .barre-titre{flex:1;font-weight:700;font-size:16px}
.plateforme .barre-marque{font-weight:700;font-size:15px}
.plateforme .barre-info{font-size:12.5px;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .barre-retour{font-size:20px;line-height:1;color:rgba(255,255,255,.7);text-decoration:none}
.plateforme .entete{background:var(--carte);border-bottom:1px solid var(--bord);
  padding:14px 16px 12px;box-shadow:var(--ombre-douce)}
.plateforme .entete-titre{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.plateforme .entete-titre h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.plateforme .entete-periode{font-size:12.5px;color:var(--gris)}
.plateforme .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plateforme .chiffre{padding:12px 13px;border-radius:var(--r-m)}
.plateforme .chiffre .etiquette{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:3px}
.plateforme .chiffre .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.plateforme .chiffre .devise{display:block;font-size:11px;opacity:.75}
.plateforme .chiffre-vert{background:var(--vert-pale)}
.plateforme .chiffre-vert .etiquette,.plateforme .chiffre-vert .valeur,.plateforme .chiffre-vert .devise{color:var(--vert)}
.plateforme .chiffre-corail{background:var(--corail-pale)}
.plateforme .chiffre-corail .etiquette,.plateforme .chiffre-corail .valeur,.plateforme .chiffre-corail .devise{color:var(--corail)}
.plateforme .grand-total{padding:14px 15px;border-radius:var(--r-g);background:var(--nuit);color:#fff}
.plateforme .grand-total,.plateforme .grand-total *{cursor:default}
.plateforme .grand-total:hover,.plateforme .grand-total:focus-within{background:#1C2B45 !important;color:#fff !important}
.plateforme .grand-total:hover .valeur,.plateforme .grand-total:hover .ligne,.plateforme .grand-total:focus-within .valeur{color:#fff !important}
.plateforme .grand-total:hover .etiquette,.plateforme .grand-total:hover .devise{color:rgba(255,255,255,.75) !important}
.plateforme .grand-total ::selection{background:rgba(255,255,255,.28);color:#fff}
.plateforme .grand-total-corail:hover,.plateforme .grand-total-corail:focus-within{background:#F7DAD8 !important}
.plateforme .grand-total-corail:hover .etiquette,.plateforme .grand-total-corail:hover .valeur,.plateforme .grand-total-corail:hover .devise{color:var(--corail) !important}
.plateforme .grand-total-corail ::selection{background:rgba(201,63,58,.2);color:var(--corail)}
.plateforme .grand-total .etiquette{display:block;font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:4px}
.plateforme .grand-total .ligne{display:flex;align-items:baseline;gap:8px}
.plateforme .grand-total .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.plateforme .grand-total .devise{font-size:14px;font-weight:600;color:rgba(255,255,255,.7)}
.plateforme .grand-total-corail{background:var(--corail-pale)}
.plateforme .grand-total-corail .etiquette{color:var(--corail);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.plateforme .grand-total-corail .valeur{color:var(--corail)}
.plateforme .grand-total-corail .devise{color:var(--corail);opacity:.8}
.plateforme .grand-total-note{display:block;font-size:12.5px;color:#A8443F;margin-top:6px}
.plateforme .carte-cle{padding:13px 14px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
.plateforme .carte-cle .libelle{display:block;font-size:12.5px;font-weight:600;color:var(--gris);
  line-height:1.3;min-height:32px}
.plateforme .carte-cle .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.plateforme .carte-cle .valeur-vert{color:var(--vert)}
.plateforme .carte-cle .valeur-corail{color:var(--corail)}
.plateforme .carte-cle .devise{display:block;font-size:11px;color:var(--gris-clair)}
.plateforme .btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:var(--r-pilule);font-family:inherit;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background 160ms ease,transform 160ms ease}
.plateforme .btn:active{transform:translateY(1px)}
.plateforme .btn-vert{background:var(--vert);color:#fff;box-shadow:0 2px 8px rgba(11,122,85,.28)}
.plateforme .btn-vert:hover{background:var(--vert-vif)}
.plateforme .btn-grand{min-height:54px;font-size:17.5px;font-weight:700}
.plateforme .btn-blanc{background:var(--carte);color:var(--encre);border:1px solid var(--bord)}
.plateforme .btn-blanc:hover{background:var(--entete)}
.plateforme .btn-corail{background:var(--corail-pale);color:var(--corail);border:1px solid #F3D3D1}
.plateforme .btn-desactive{background:#EDF1F5;color:#A5B0BF;box-shadow:none;pointer-events:none}
.plateforme .btn .plus{font-size:20px;line-height:1;font-weight:400}
.plateforme .duo-btn{display:flex;gap:9px}
.plateforme .duo-btn .btn{min-height:50px;font-size:15.5px}
.plateforme .filtres{display:flex;gap:7px;margin-top:12px}
.plateforme .filtre{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--carte);
  color:var(--gris);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.plateforme .filtre[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.plateforme .filtres-defilantes{display:flex;gap:7px;margin-top:10px;overflow-x:auto;overscroll-behavior-x:contain}
.plateforme .filtres-defilantes::-webkit-scrollbar{height:0}
.plateforme .filtres-defilantes .filtre{flex:none;padding:0 14px;min-height:34px;font-size:13px}
.plateforme .alerte{display:flex;gap:10px;align-items:center;padding:13px 14px;border-radius:var(--r-m);
  text-decoration:none;margin-bottom:9px}
.plateforme .alerte .point{flex:none;width:8px;height:8px;border-radius:50%}
.plateforme .alerte .texte{flex:1;font-size:13.5px;line-height:1.4}
.plateforme .alerte .lien{font-size:13px;font-weight:600}
.plateforme .alerte-vert{background:var(--vert-pale)}
.plateforme .alerte-vert .point{background:var(--vert)}
.plateforme .alerte-vert .texte{color:var(--vert-fonce)}
.plateforme .alerte-vert .lien{color:var(--vert)}
.plateforme .alerte-ocre{background:var(--ocre-pale)}
.plateforme .alerte-ocre .point{background:var(--ocre)}
.plateforme .alerte-ocre .texte{color:#8A5510}
.plateforme .alerte-ocre .texte strong{color:var(--ocre-fonce)}
.plateforme .alerte-ocre .lien{color:var(--ocre)}
.plateforme .liste-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;background:var(--entete);border-bottom:1px solid var(--bord);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.plateforme .liste-entete-ventes{display:grid;grid-template-columns:1fr auto 74px}
.plateforme .liste-entete-ventes .a-droite{text-align:right}
.plateforme .ligne{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.plateforme .ligne:hover{background:#F9FBFC}
.plateforme .ligne:active{background:var(--fond)}
.plateforme .ligne-ventes{display:grid;grid-template-columns:1fr auto 74px;gap:10px;align-items:center}
.plateforme .ligne-corps{flex:1;min-width:0}
.plateforme .ligne-titre{display:block;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .ligne-sous{display:block;font-size:12.5px;color:var(--gris-clair);margin-top:1px}
.plateforme .ligne-sous-ocre{color:var(--ocre)}
.plateforme .ligne-haut{display:flex;align-items:baseline;gap:7px}
.plateforme .ticket{font-family:var(--chiffres);font-size:13px;font-weight:700;color:var(--encre)}
.plateforme .date{font-family:var(--chiffres);font-size:12px;color:var(--gris-clair)}
.plateforme .montant{flex:none;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.plateforme .montant-vert{color:var(--vert)}
.plateforme .montant-corail{color:var(--corail)}
.plateforme .montant-bloc{flex:none;text-align:right}
.plateforme .montant-bloc .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--corail)}
.plateforme .montant-bloc .devise{display:block;font-size:11px;color:var(--gris-clair)}
.plateforme .pastille{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;background:var(--trait);color:var(--gris)}
.plateforme .pastille-ocre{background:var(--ocre-pale);color:var(--ocre)}
.plateforme .liste-pied{padding:16px;text-align:center;font-size:12.5px;color:var(--gris-clair)}
.plateforme .etat{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-pilule);white-space:nowrap}
.plateforme .etat-ok{background:var(--vert-pale);color:var(--vert)}
.plateforme .etat-alerte{background:var(--ocre-pale);color:var(--ocre)}
.plateforme .etat-dette{background:var(--corail-pale);color:var(--corail)}
.plateforme .a-droite{text-align:right}
.plateforme .onglets{display:flex;background:var(--nuit);box-shadow:0 -4px 20px rgba(16,27,46,.1);
  padding-bottom:env(safe-area-inset-bottom)}
.plateforme .onglet{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:62px;padding:8px 4px;color:rgba(255,255,255,.6);font-size:10.5px;font-weight:500;
  text-align:center;text-decoration:none}
.plateforme .onglet .icone{display:block;width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.28)}
.plateforme .onglet[aria-current="page"]{color:#fff}
.plateforme .onglet[aria-current="page"] .icone{background:var(--vert-vif)}
@media (min-width:900px){
.plateforme .ecran{max-width:520px;margin:0 auto;border-left:1px solid var(--bord);border-right:1px solid var(--bord)}
}
.plateforme .form{padding:16px 16px 22px}
.plateforme .form-groupe{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-g);
  padding:4px 16px;margin-bottom:12px;box-shadow:var(--ombre-douce)}
.plateforme .form-groupe-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris);margin:0 0 8px;padding:0 2px}
.plateforme .champ{padding:13px 0;border-bottom:1px solid var(--trait)}
.plateforme .champ:last-child{border-bottom:none}
.plateforme .champ>label{display:block;font-size:13.5px;font-weight:600;color:var(--encre);margin-bottom:7px}
.plateforme .obligatoire{color:var(--corail);font-weight:700}
.plateforme .facultatif{font-weight:500;color:var(--gris-clair)}
.plateforme .saisie{width:100%;min-height:50px;padding:0 15px;border:1px solid var(--bord);border-radius:12px;
  background:var(--entete);color:var(--encre);font-family:inherit;font-size:16.5px;outline:none;
  -webkit-appearance:none;appearance:none}
.plateforme .saisie::placeholder{color:var(--gris-clair)}
.plateforme .saisie:focus{border-color:var(--vert);background:var(--carte);box-shadow:0 0 0 3px rgba(11,122,85,.12)}
.plateforme textarea.saisie{min-height:88px;padding:13px 15px;line-height:1.5;resize:vertical}
.plateforme .saisie-chiffre{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:19px;letter-spacing:-.02em}
.plateforme select.saisie{padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),
                   linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.plateforme .champ-monnaie{position:relative}
.plateforme .champ-monnaie .saisie{padding-right:62px}
.plateforme .champ-monnaie .suffixe{position:absolute;right:15px;top:0;height:50px;display:flex;align-items:center;
  font-size:13.5px;font-weight:700;color:var(--gris);pointer-events:none}
.plateforme .aide{display:block;font-size:12.5px;color:var(--gris);margin-top:6px;line-height:1.45}
.plateforme .pied-form{background:var(--carte);border-top:1px solid var(--bord);padding:13px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(16,27,46,.08)}
.plateforme .pied-note{display:block;text-align:center;font-size:12.5px;color:var(--gris);margin-top:10px}
.plateforme .duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plateforme .duo-champ .champ{border-bottom:none;padding-bottom:0}
.plateforme .appli{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.plateforme .appli>.ecran{flex:1 1 auto;min-height:0;height:auto}
.plateforme .lateral{display:none}
.plateforme .large{width:100%}
@media (min-width:900px){
.plateforme .appli{flex-direction:row}
.plateforme .appli>.ecran{max-width:none;margin:0;border:none;min-width:0}
.plateforme .onglets{display:none}
.plateforme .lateral{flex:none;display:flex;flex-direction:column;width:264px;
    background:var(--nuit);color:#fff;overflow:hidden}
.plateforme .lateral-marque{flex:none;padding:18px 20px 16px;border-bottom:1px solid var(--nuit-trait)}
.plateforme .lateral-nom{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.plateforme .lateral-boutique{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .lateral-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 16px}
.plateforme .lateral-nav::-webkit-scrollbar{width:0}
.plateforme .lateral-section{margin-bottom:4px}
.plateforme .lateral-section>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:38px;padding:0 10px;cursor:pointer;list-style:none;border-radius:9px;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
    color:rgba(255,255,255,.45)}
.plateforme .lateral-section>summary::-webkit-details-marker{display:none}
.plateforme .lateral-section>summary:hover{background:var(--nuit-clair);color:rgba(255,255,255,.75)}
.plateforme .lateral-section>summary::after{content:"+";font-size:12px;font-weight:700;color:rgba(255,255,255,.4)}
.plateforme .lateral-section[open]>summary::after{content:"\2212"}
.plateforme .lateral-lien{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;
    border-radius:9px;color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;text-decoration:none}
.plateforme .lateral-lien:hover{background:var(--nuit-clair);color:#fff;text-decoration:none}
.plateforme .lateral-lien .puce{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.plateforme .lateral-lien .txt{flex:1}
.plateforme .lateral-lien[aria-current="page"]{background:var(--vert);color:#fff;font-weight:600;
    box-shadow:0 2px 8px rgba(11,122,85,.35)}
.plateforme .lateral-lien[aria-current="page"] .puce{background:#fff}
.plateforme .lateral-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-pilule);
    background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.plateforme .lateral-badge-ocre{background:rgba(201,124,30,.28);color:#F0C489}
.plateforme .lateral-badge-corail{background:rgba(201,63,58,.28);color:#F2A9A6}
.plateforme .lateral-badge-vert{background:rgba(18,161,113,.28);color:#9FE3C7}
.plateforme .lateral-pied{flex:none;border-top:1px solid var(--nuit-trait);padding:12px 12px 14px}
.plateforme .lateral-profil{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:11px;
    text-decoration:none;color:inherit}
.plateforme .lateral-profil:hover{background:var(--nuit-clair);text-decoration:none}
.plateforme .lateral-avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--nuit-clair);
    border:1px solid var(--nuit-trait);display:flex;align-items:center;justify-content:center;
    font-size:13.5px;font-weight:700;color:#9FE3C7}
.plateforme .lateral-profil-corps{flex:1;min-width:0}
.plateforme .lateral-profil-nom{display:block;font-size:14px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .lateral-profil-role{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:1px}
.plateforme .lateral-abonnement{display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:38px;padding:0 10px;margin-top:4px;border-radius:9px;text-decoration:none;
    font-size:13.5px;color:rgba(255,255,255,.78)}
.plateforme .lateral-abonnement:hover{background:var(--nuit-clair);color:#fff;text-decoration:none}
.plateforme .lateral-deconnexion{width:100%;min-height:42px;margin-top:6px;display:flex;align-items:center;
    justify-content:center;gap:8px;border:1px solid rgba(201,63,58,.45);border-radius:var(--r-pilule);
    background:rgba(201,63,58,.14);color:#F2A9A6;font-family:inherit;font-size:14px;font-weight:600;
    cursor:pointer}
.plateforme .lateral-deconnexion:hover{background:rgba(201,63,58,.24);color:#fff}
.plateforme .barre{background:var(--carte);color:var(--encre);border-bottom:1px solid var(--bord);
    padding:16px 28px;align-items:center}
.plateforme .barre-titre{font-size:22px;font-weight:700;letter-spacing:-.02em}
.plateforme .barre-marque{font-size:22px;font-weight:700;letter-spacing:-.02em}
.plateforme .barre-info{font-size:13.5px;color:var(--gris)}
.plateforme .barre-retour{color:var(--gris)}
.plateforme .barre-profil{display:none}
.plateforme .entete{padding:20px 28px 18px}
.plateforme .entete-titre h1{font-size:24px}
.plateforme .zone{padding-left:0;padding-right:0}
.plateforme .menu-corps,.plateforme .bord-corps,.plateforme .form{padding:22px 28px 30px}
.plateforme .large{max-width:1240px;margin:0 auto}
.plateforme .duo{grid-template-columns:repeat(2,1fr);gap:14px;max-width:640px}
.plateforme .quatre{grid-template-columns:repeat(4,1fr);gap:14px}
.plateforme .carte-cle{padding:16px 18px 15px}
.plateforme .carte-cle .libelle{font-size:13.5px;min-height:0}
.plateforme .carte-cle .valeur{font-size:27px;margin-top:8px}
.plateforme .chiffre{padding:14px 16px}
.plateforme .chiffre .valeur{font-size:23px}
.plateforme .entete-ordi{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.plateforme .entete-ordi-actions{display:flex;align-items:center;gap:10px;flex:none}
.plateforme .entete-ordi-actions .btn{width:auto;padding:0 22px}
.plateforme .entete-ordi .filtres{margin-top:0;flex:none}
.plateforme .entete-ordi .filtres .filtre{flex:none;padding:0 18px}
.plateforme .entete-ordi .recherche{min-width:280px;margin-top:0}
.plateforme .liste-entete,.plateforme .ligne{padding-left:28px;padding-right:28px}
.plateforme .liste-entete{font-size:11.5px}
.plateforme .ligne{min-height:56px}
.plateforme .ligne-ventes,.plateforme .liste-entete-ventes{grid-template-columns:92px 92px minmax(140px,1fr) 120px 96px;gap:14px}
.plateforme .ligne-produit-stock,.plateforme .liste-entete-produits{grid-template-columns:1fr 180px 150px 130px;gap:18px}
.plateforme .col-ordi{display:block}
.plateforme .col-mobile{display:none}
.plateforme .ligne-titre{font-size:15.5px}
.plateforme .montant{font-size:16px}
.plateforme .liste-pied{padding:22px}
.plateforme .alertes-ordi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.plateforme .alertes-ordi .alerte{margin-bottom:0}
.plateforme .carte-blanche{padding:20px 22px 18px}
.plateforme .graphe{height:200px;gap:16px}
.plateforme .graphe-nom{font-size:12.5px}
.plateforme .graphe-valeur{font-size:12px}
.plateforme .form-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.plateforme .form-groupe{padding:6px 20px}
.plateforme .champ-pleine-largeur{grid-column:1 / -1}
.plateforme .pied-form{padding:14px 28px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.plateforme .pied-form .btn{width:auto;padding:0 30px;order:2}
.plateforme .pied-form .pied-note{margin-top:0;order:1}
}
@media (min-width:1200px){
.plateforme .ligne-ventes,.plateforme .liste-entete-ventes{grid-template-columns:110px 120px 1fr 160px 130px;gap:18px}
}
@media (min-width:1440px){
.plateforme .lateral{width:288px}
}
.plateforme .caisse-corps{padding:16px 16px 24px}
.plateforme .carte-blanche{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r-g);
  padding:15px 16px;box-shadow:var(--ombre-douce);margin-bottom:12px}
.plateforme .carte-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris);margin:0 0 10px}
.plateforme .carte-liste{padding:0;overflow:hidden}
.plateforme .recap{display:flex;flex-direction:column;gap:9px}
.plateforme .recap-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plateforme .recap-ligne .libelle{font-size:14px;color:var(--gris)}
.plateforme .recap-ligne .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700;white-space:nowrap}
.plateforme .recap-total{border-top:1px solid var(--bord);padding-top:10px;margin-top:2px}
.plateforme .recap-total .libelle{font-weight:600;color:var(--encre)}
.plateforme .recap-total .valeur{font-size:18px}
.plateforme .bandeau{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13.5px;font-weight:600}
.plateforme .bandeau .point{flex:none;width:9px;height:9px;border-radius:50%}
.plateforme .bandeau .info{margin-left:auto;font-weight:500;font-size:12.5px;opacity:.85}
.plateforme .bandeau-ouverte{background:var(--vert-pale);color:var(--vert-fonce);border-bottom:1px solid #CFE7DD}
.plateforme .bandeau-ouverte .point{background:var(--vert)}
.plateforme .bandeau-fermee{background:#EDF1F5;color:var(--gris);border-bottom:1px solid var(--bord)}
.plateforme .bandeau-fermee .point{background:var(--gris-clair)}
.plateforme .actions{display:flex;flex-direction:column;gap:10px}
.plateforme .action{display:flex;align-items:center;gap:13px;min-height:70px;padding:13px 15px;
  border-radius:var(--r-g);background:var(--carte);border:1px solid var(--bord);
  box-shadow:var(--ombre-douce);color:inherit;text-decoration:none}
.plateforme .action:hover{box-shadow:0 3px 12px rgba(16,27,46,.09)}
.plateforme .action .signe{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:22px;font-weight:700;line-height:1}
.plateforme .action .corps{flex:1;min-width:0}
.plateforme .action .nom{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.plateforme .action .desc{display:block;font-size:13px;color:var(--gris);margin-top:2px}
.plateforme .action .fleche{flex:none;font-size:20px;color:var(--gris-clair)}
.plateforme .action-vert .signe{background:var(--vert-pale);color:var(--vert)}
.plateforme .action-vert:hover{border-color:var(--vert)}
.plateforme .action-ocre .signe{background:var(--ocre-pale);color:var(--ocre)}
.plateforme .action-ocre:hover{border-color:var(--ocre)}
.plateforme .action-corail{background:var(--corail-pale);border-color:#F3D3D1}
.plateforme .action-corail .signe{background:#fff;color:var(--corail);font-size:17px}
.plateforme .action-corail .nom{color:var(--corail)}
.plateforme .action-corail .desc{color:#A8443F}
.plateforme .action-corail .fleche{color:var(--corail)}
.plateforme .action-corail:hover{border-color:var(--corail)}
.plateforme .separateur{display:flex;align-items:center;gap:10px;margin:18px 0 10px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-clair)}
.plateforme .separateur::after{content:"";flex:1;height:1px;background:var(--bord)}
.plateforme .btn-ocre{background:var(--ocre);color:#fff;box-shadow:0 2px 8px rgba(201,124,30,.28)}
.plateforme .btn-ocre:hover{background:#B36C14}
.plateforme .btn-corail-plein{background:var(--corail);color:#fff;box-shadow:0 2px 8px rgba(201,63,58,.3)}
.plateforme .btn-corail-plein:hover{background:#B7332E}
.plateforme .pied-form .duo-btn .btn{min-height:54px;font-size:16.5px;font-weight:700}
.plateforme .pied-form .duo-btn .btn-blanc{flex:0 0 38%;font-weight:600}
.plateforme .etat-vide{max-width:520px;margin:0 auto;text-align:center;background:var(--carte);
  border:1px solid var(--bord);border-radius:var(--r-g);padding:32px 22px 26px;box-shadow:var(--ombre-douce)}
.plateforme .etat-vide h2{margin:14px 0 8px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.plateforme .etat-vide p{margin:0 auto 20px;font-size:14.5px;color:var(--gris);line-height:1.6;max-width:380px;text-wrap:pretty}
.plateforme .etat-vide .btn{max-width:330px;margin:0 auto}
.plateforme .etat-neutre{background:#EEF2F6;color:var(--gris)}
.plateforme .suggestions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.plateforme .suggestion{flex:1;min-width:88px;min-height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--carte);
  font-family:var(--chiffres);font-size:13.5px;font-weight:700;color:var(--gris);cursor:pointer}
.plateforme .suggestion:hover{border-color:var(--vert);color:var(--vert)}
.plateforme .liste-entete-mvt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 15px;background:var(--entete);border-bottom:1px solid var(--bord);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.plateforme .ligne-mvt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:11px 15px;border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.plateforme .ligne-mvt:last-of-type{border-bottom:none}
.plateforme .cell-heure,.plateforme .cell-type,.plateforme .cell-motif,.plateforme .cell-par{display:none}
.plateforme .mvt-compact{min-width:0}
.plateforme .mvt-compact-haut{display:flex;align-items:center;gap:8px}
.plateforme .mvt-compact-heure{font-family:var(--chiffres);font-size:12.5px;color:var(--gris-clair)}
.plateforme .mvt-compact-motif{display:block;font-size:14.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .mvt-compact-par{display:block;font-size:12.5px;color:var(--gris-clair);margin-top:1px}
.plateforme .cell-somme{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:700;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.plateforme .cell-somme.entre{color:var(--vert)}
.plateforme .cell-somme.sort{color:var(--corail)}
.plateforme .dialogue{position:fixed;inset:0;z-index:30;display:none}
.plateforme .dialogue:target{display:flex;align-items:flex-end;justify-content:center}
.plateforme .dialogue-voile{position:absolute;inset:0;background:rgba(16,27,46,.6)}
.plateforme .dialogue-boite{position:relative;width:100%;max-width:460px;background:var(--carte);
  border-radius:20px 20px 0 0;padding:22px 18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(16,27,46,.3)}
.plateforme .dialogue-boite h2{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em;text-wrap:pretty}
.plateforme .dialogue-boite .texte{margin:0 0 16px;font-size:14px;color:var(--gris);line-height:1.55}
.plateforme .dialogue-recap{background:var(--entete);border:1px solid var(--bord);border-radius:var(--r-m);
  padding:13px 14px;margin-bottom:16px}
.plateforme .dialogue-actions{display:flex;flex-direction:column;gap:9px}
.plateforme .dialogue-actions .btn{min-height:54px;font-size:16.5px;font-weight:700}
@media (min-width:900px){
.plateforme .caisse-corps{padding:22px 28px 30px}
.plateforme .bandeau{padding:12px 28px}
.plateforme .caisse-grille>*{min-width:0}
.plateforme .carte-blanche{padding:18px 20px}
.plateforme .action{min-height:76px;padding:15px 18px}
.plateforme .etat-vide{padding:44px 30px 36px}
.plateforme .liste-entete-mvt,.plateforme .ligne-mvt{grid-template-columns:58px 88px minmax(0,1fr) minmax(0,.5fr) 104px;
    gap:10px;padding-left:18px;padding-right:18px}
.plateforme .ligne-mvt{min-height:56px}
.plateforme .cell-heure,.plateforme .cell-type,.plateforme .cell-motif,.plateforme .cell-par{display:block;min-width:0}
.plateforme .mvt-compact{display:none}
.plateforme .cell-heure{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--gris)}
.plateforme .cell-motif{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .cell-par{font-size:13.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .cell-somme{font-size:15.5px}
.plateforme .dialogue:target{align-items:center}
.plateforme .dialogue-boite{border-radius:20px;padding:26px 26px 24px;box-shadow:0 24px 60px rgba(16,27,46,.35)}
.plateforme .dialogue-actions{flex-direction:row-reverse}
.plateforme .dialogue-actions .btn{width:auto;flex:1;padding:0 20px}
}
@media (min-width:1180px){
.plateforme .liste-entete-mvt,.plateforme .ligne-mvt{grid-template-columns:66px 104px minmax(0,1fr) 130px 116px;gap:14px}
.plateforme .caisse-grille{display:grid;grid-template-columns:minmax(330px,400px) minmax(560px,1fr);
    gap:24px;align-items:start}
}
.plateforme .tresor{position:relative;padding:18px 18px 16px;border-radius:var(--r-g);
  background:var(--vert-pale);border:1px solid #CFE7DD;box-shadow:var(--ombre-douce)}
.plateforme .tresor .etiquette{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--vert)}
.plateforme .tresor .ligne{display:flex;align-items:baseline;gap:9px;margin-top:7px}
.plateforme .tresor .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;color:var(--vert-fonce);
  font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1}
.plateforme .tresor .devise{font-size:15px;font-weight:700;color:var(--vert)}
.plateforme .tresor .formule{display:block;margin-top:7px;font-size:12.5px;color:#4C7A6B}
.plateforme .tresor,.plateforme .tresor *{cursor:default}
.plateforme .tresor:hover{background:#DBEFE7}
.plateforme .tresor ::selection{background:rgba(11,122,85,.18);color:var(--vert-fonce)}
.plateforme .rappel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:12px}
.plateforme .rappel .libelle{font-size:13.5px;color:var(--gris)}
.plateforme .rappel .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--encre)}
.plateforme .apercu{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:var(--r-g);margin-bottom:12px;border:1px dashed}
.plateforme .apercu .libelle{font-size:13.5px;font-weight:600}
.plateforme .apercu .valeur{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.plateforme .apercu-vert{background:var(--vert-pale);border-color:#B9DDCF;color:var(--vert)}
.plateforme .apercu-vert .valeur{color:var(--vert-fonce)}
.plateforme .apercu-ocre{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.plateforme .apercu-ocre .valeur{color:#8A5510}
.plateforme .ecart{padding:16px 16px 14px;border-radius:var(--r-g);border:1px solid;margin-bottom:12px}
.plateforme .ecart .titre{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.plateforme .ecart .valeur{display:block;font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.plateforme .ecart .note{display:block;font-size:13px;margin-top:6px;line-height:1.5}
.plateforme .ecart-ok{background:var(--vert-pale);border-color:#B9DDCF;color:var(--vert)}
.plateforme .ecart-ok .valeur{color:var(--vert-fonce)}
.plateforme .ecart-ok .note{color:#4C7A6B}
.plateforme .ecart-excedent{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.plateforme .ecart-excedent .valeur,.plateforme .ecart-excedent .note{color:#8A5510}
.plateforme .ecart-manque{background:var(--corail-pale);border-color:#F3D3D1;color:var(--corail)}
.plateforme .ecart-manque .valeur{color:var(--corail)}
.plateforme .ecart-manque .note{color:#A8443F}
.plateforme .confirmation-case{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;
  border-radius:var(--r-g);background:var(--corail-pale);border:1px solid #F3D3D1;
  margin-bottom:12px;cursor:pointer}
.plateforme .confirmation-case input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--corail)}
.plateforme .confirmation-case .texte{font-size:14px;line-height:1.5;color:#8E3733}
.plateforme .confirmation-case .texte strong{display:block;color:var(--corail);font-size:14.5px;margin-bottom:2px}
.plateforme .seance{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;
  padding:13px 15px;border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.plateforme .seance:last-of-type{border-bottom:none}
.plateforme .seance:hover{background:var(--entete)}
.plateforme .seance .date{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.plateforme .seance .ecart-val{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:700;text-align:right;white-space:nowrap}
.plateforme .seance .gens{font-size:12.5px;color:var(--gris-clair);grid-column:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .seance .flux{font-family:var(--chiffres);font-size:12.5px;color:var(--gris);text-align:right;white-space:nowrap}
.plateforme .seance .ecart-val.zero{color:var(--vert)}
.plateforme .seance .ecart-val.manque{color:var(--corail)}
.plateforme .seance .ecart-val.plus{color:var(--ocre)}
@media (min-width:900px){
.plateforme .tresor{padding:22px 22px 20px}
.plateforme .tresor .valeur{font-size:46px}
.plateforme .seance{grid-template-columns:170px minmax(0,1fr) 190px 130px;gap:14px;
    padding:14px 18px;min-height:58px;align-items:center}
.plateforme .seance .gens{grid-column:auto}
.plateforme .seance .flux{text-align:left}
}
.plateforme .lateral-nom-console{display:flex;align-items:center;gap:8px}
.plateforme .lateral-tag{padding:2px 7px;border-radius:var(--r-pilule);background:rgba(255,255,255,.14);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff}
.plateforme .console-corps{padding:16px 16px 24px}
.plateforme .console-titre{margin:0 0 12px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.plateforme .console-soustitre{margin:-8px 0 14px;font-size:13.5px;color:var(--gris);line-height:1.5}
.plateforme .parc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
.plateforme .parc-carte{padding:13px 14px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
.plateforme .parc-carte .etiquette{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--gris)}
.plateforme .parc-carte .valeur{display:block;margin-top:5px;font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1}
.plateforme .parc-total{grid-column:1 / -1;background:var(--nuit);border-color:var(--nuit)}
.plateforme .parc-total .etiquette{color:rgba(255,255,255,.7)}
.plateforme .parc-total .valeur{color:#fff;font-size:34px}
.plateforme .parc-total,.plateforme .parc-total *{cursor:default}
.plateforme .parc-total:hover{background:var(--nuit-clair)}
.plateforme .parc-vert .valeur{color:var(--vert)}
.plateforme .parc-vert{background:var(--vert-pale);border-color:#CFE7DD}
.plateforme .parc-vert .etiquette{color:var(--vert)}
.plateforme .parc-ocre{background:var(--ocre-pale);border-color:#EFD5AC}
.plateforme .parc-ocre .etiquette{color:#8A5510}
.plateforme .parc-ocre .valeur{color:var(--ocre)}
.plateforme .parc-corail{background:var(--corail-pale);border-color:#F3D3D1}
.plateforme .parc-corail .etiquette{color:#A8443F}
.plateforme .parc-corail .valeur{color:var(--corail)}
.plateforme .parc-gris .valeur{color:var(--gris)}
.plateforme .alerte-titre{display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--bord);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em}
.plateforme .alerte-titre .compte{margin-left:auto;font-family:var(--chiffres);font-size:13px;
  padding:1px 8px;border-radius:var(--r-pilule);background:#fff}
.plateforme .alerte-titre-ocre{background:var(--ocre-pale);color:#8A5510}
.plateforme .alerte-titre-ocre .compte{color:var(--ocre)}
.plateforme .alerte-titre-corail{background:var(--corail-pale);color:var(--corail)}
.plateforme .alerte-titre-corail .compte{color:var(--corail)}
.plateforme .ligne-alerte{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 15px;border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.plateforme .ligne-alerte:last-of-type{border-bottom:none}
.plateforme .ligne-alerte:hover{background:var(--entete)}
.plateforme .ligne-alerte .nom{font-size:15px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .ligne-alerte .quand{font-family:var(--chiffres);font-size:13px;white-space:nowrap;color:var(--gris)}
.plateforme .ligne-alerte .quand.urgent{color:var(--corail);font-weight:700}
.plateforme .barre-outils{display:flex;flex-direction:column;gap:9px;padding:12px 16px;
  background:var(--carte);border-bottom:1px solid var(--bord)}
.plateforme .recherche{position:relative;display:flex}
.plateforme .recherche .saisie{padding-left:38px}
.plateforme .recherche .loupe{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--gris-clair);pointer-events:none}
.plateforme .filtres{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.plateforme .filtres::-webkit-scrollbar{display:none}
.plateforme .filtre{flex:none;min-height:34px;display:flex;align-items:center;padding:0 13px;
  border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--carte);
  color:var(--gris);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.plateforme .filtre:hover{border-color:var(--gris-clair);color:var(--encre)}
.plateforme .filtre[aria-current="page"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.plateforme .liste-entete-ent,.plateforme .ligne-ent{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;
  align-items:center;padding:12px 15px}
.plateforme .liste-entete-ent{background:var(--entete);border-bottom:1px solid var(--bord);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);
  padding-top:9px;padding-bottom:9px}
.plateforme .ligne-ent{border-bottom:1px solid var(--trait);color:inherit;text-decoration:none}
.plateforme .ligne-ent:last-of-type{border-bottom:none}
.plateforme .ligne-ent:hover{background:var(--entete)}
.plateforme .ligne-ent .nom{font-size:15.5px;font-weight:700;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .ligne-ent .meta{grid-column:1;font-size:12.5px;color:var(--gris-clair);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .ligne-ent .comptes,.plateforme .ligne-ent .echeance{display:none;font-family:var(--chiffres);
  font-size:13.5px;color:var(--gris)}
.plateforme .ligne-ent .statut{text-align:right;justify-self:end}
.plateforme .cell-titre-comptes,.plateforme .cell-titre-echeance{display:none}
.plateforme .entete-detail{padding:16px}
.plateforme .entete-detail .nom{display:block;font-size:23px;font-weight:700;letter-spacing:-.025em;text-wrap:pretty}
.plateforme .entete-detail .sous{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.plateforme .infos{display:flex;flex-direction:column;gap:9px}
.plateforme .info-ligne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline}
.plateforme .info-ligne .libelle{font-size:13.5px;color:var(--gris);white-space:nowrap}
.plateforme .info-ligne .valeur{font-size:14.5px;font-weight:600;text-align:right;min-width:0;text-wrap:pretty}
.plateforme .info-ligne .valeur.num{font-family:var(--chiffres);font-variant-numeric:tabular-nums;white-space:nowrap}
.plateforme .compte-user{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;
  padding:12px 15px;border-bottom:1px solid var(--trait)}
.plateforme .compte-user:last-of-type{border-bottom:none}
.plateforme .compte-user .nom{font-size:15px;font-weight:600}
.plateforme .compte-user .contact{grid-column:1;font-size:12.5px;color:var(--gris-clair);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plateforme .compte-user .role{font-size:12.5px;color:var(--gris);text-align:right}
.plateforme .compte-user .statut{grid-row:1;grid-column:2;justify-self:end}
.plateforme .zone-sensible{padding:15px 16px;border-radius:var(--r-g);background:var(--corail-pale);
  border:1px solid #F3D3D1;margin-bottom:12px}
.plateforme .zone-sensible .titre{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--corail)}
.plateforme .zone-sensible .texte{display:block;margin:6px 0 12px;font-size:13.5px;line-height:1.55;color:#8E3733}
.plateforme .mdp-bloc{padding:20px 18px;border-radius:var(--r-g);background:var(--nuit);text-align:center}
.plateforme .mdp-bloc .etiquette{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:rgba(255,255,255,.65)}
.plateforme .mdp-valeur{display:block;margin:12px 0 14px;font-family:var(--chiffres);
  font-size:36px;font-weight:700;letter-spacing:.06em;color:#fff;word-break:break-all;line-height:1.15}
.plateforme .mdp-bloc ::selection{background:rgba(255,255,255,.3);color:#fff}
.plateforme .btn-copier{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 22px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pilule);
  background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.plateforme .btn-copier:hover{background:rgba(255,255,255,.2)}
.plateforme .compteur{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--r-g);
  background:var(--ocre-pale);border:1px solid #EFD5AC;margin-bottom:12px}
.plateforme .compteur .valeur{font-family:var(--chiffres);font-size:32px;font-weight:700;
  letter-spacing:-.03em;color:var(--ocre);line-height:1}
.plateforme .compteur .texte{font-size:14px;font-weight:600;color:#8A5510;line-height:1.4}
.plateforme .demande{padding:14px 15px;border-bottom:1px solid var(--trait)}
.plateforme .demande:last-of-type{border-bottom:none}
.plateforme .demande-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plateforme .demande .nom{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.plateforme .demande .offre{display:block;font-size:13px;color:var(--gris);margin-top:2px}
.plateforme .demande .quand{display:block;font-family:var(--chiffres);font-size:12.5px;color:var(--gris-clair);margin-top:3px}
.plateforme .demande .somme{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:19px;
  font-weight:700;letter-spacing:-.02em;white-space:nowrap;text-align:right}
.plateforme .demande-actions{display:flex;gap:9px;margin-top:12px}
.plateforme .demande-actions .btn{min-height:44px;font-size:14.5px;white-space:nowrap}
.plateforme .offres{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.plateforme .offre{display:block;padding:15px 16px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);color:inherit;text-decoration:none}
.plateforme .offre:hover{border-color:var(--vert);box-shadow:0 3px 12px rgba(11,122,85,.1)}
.plateforme .offre-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plateforme .offre .nom{font-size:17px;font-weight:700;letter-spacing:-.015em}
.plateforme .offre .prix{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:22px;
  font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.plateforme .offre .prix .par{font-family:var(--police);font-size:12.5px;font-weight:600;color:var(--gris)}
.plateforme .offre-limites{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.plateforme .limite{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pilule);
  background:var(--entete);border:1px solid var(--bord);font-size:12.5px;color:var(--gris)}
.plateforme .limite strong{font-family:var(--chiffres);font-size:13px;color:var(--encre)}
.plateforme .offre-inactive{background:#FAFBFC}
.plateforme .offre-inactive .nom,.plateforme .offre-inactive .prix{color:var(--gris)}
.plateforme .form-centre{max-width:640px;margin:0 auto}
.plateforme .case-active{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-radius:var(--r-g);
  background:var(--vert-pale);border:1px solid #CFE7DD;cursor:pointer}
.plateforme .case-active input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--vert)}
.plateforme .case-active .texte{font-size:14px;line-height:1.5;color:#3C6B5C}
.plateforme .case-active .texte strong{display:block;color:var(--vert-fonce);font-size:14.5px;margin-bottom:2px}
@media (min-width:900px){
.plateforme .console-corps{padding:22px 28px 30px}
.plateforme .console-titre{font-size:24px}
.plateforme .barre-outils{flex-direction:row;align-items:center;gap:14px;padding:14px 28px}
.plateforme .recherche{flex:0 0 320px}
.plateforme .filtres{flex:1}
.plateforme .parc{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.plateforme .parc-total{grid-column:auto}
.plateforme .parc-total .valeur{font-size:30px}
.plateforme .console-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.plateforme .console-grille>*{min-width:0}
.plateforme .alerte-titre{padding-left:18px;padding-right:18px}
.plateforme .liste-entete-ent,.plateforme .ligne-ent{grid-template-columns:minmax(0,1fr) 128px 132px 118px;
    gap:14px;padding:13px 18px;min-height:56px}
.plateforme .ligne-ent .meta{display:none}
.plateforme .ligne-ent .comptes,.plateforme .ligne-ent .echeance{display:block}
.plateforme .cell-titre-comptes,.plateforme .cell-titre-echeance{display:block}
.plateforme .entete-detail{padding:20px 28px}
.plateforme .entete-detail .nom{font-size:28px}
.plateforme .compte-user{grid-template-columns:minmax(0,1fr) 220px 150px 110px;gap:14px;padding:13px 18px;min-height:56px}
.plateforme .compte-user .contact{grid-column:auto;font-size:13.5px}
.plateforme .compte-user .role{text-align:left}
.plateforme .compte-user .statut{grid-column:auto;grid-row:auto}
.plateforme .mdp-bloc{padding:30px 26px}
.plateforme .mdp-valeur{font-size:52px}
.plateforme .demande{padding:15px 18px}
.plateforme .demande-actions{margin-top:0;flex:none}
.plateforme .demande-haut{align-items:center}
.plateforme .demande-actions .btn{width:auto;padding:0 20px}
.plateforme .offres{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (min-width:1180px){
.plateforme .offres{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.plateforme .etat-urgent{background:var(--corail-pale);color:var(--corail)}
.plateforme .btn-barre{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;margin-left:auto;
  border-radius:var(--r-pilule);background:var(--vert);color:#fff;font-size:13.5px;font-weight:700;
  white-space:nowrap;text-decoration:none}
.plateforme .btn-barre:hover{background:#096546}
@media (min-width:900px){
.plateforme .liste-entete-ent,.plateforme .ligne-ent{grid-template-columns:minmax(140px,1fr) 84px 92px 104px !important;gap:10px}
.plateforme .compte-user{grid-template-columns:minmax(0,1fr) 130px 100px !important;gap:3px 12px;
    padding:13px 18px;align-items:baseline}
.plateforme .compte-user .contact{grid-column:1 !important;font-size:13px}
.plateforme .compte-user .role{text-align:right}
.plateforme .ligne-alerte .nom{white-space:normal;text-overflow:clip;line-height:1.35;text-wrap:pretty}
.plateforme .filtres{flex-wrap:wrap;overflow-x:visible}
.plateforme .recherche{flex:0 1 280px}
.plateforme .barre-info{white-space:nowrap;flex:none}
}
@media (min-width:900px) and (max-width:1179px){
.plateforme .console-grille{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1180px){
.plateforme .liste-entete-ent,.plateforme .ligne-ent{grid-template-columns:minmax(200px,1fr) 100px 110px 116px !important;gap:14px}
.plateforme .compte-user{grid-template-columns:minmax(0,1fr) 150px 110px !important;gap:3px 14px}
}
/* Complément console : le squelette .appli reporté sur .plateforme (racine). */
.plateforme{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.plateforme>.ecran{flex:1 1 auto;min-height:0;height:auto}
@media (min-width:900px){
  .plateforme{flex-direction:row}
  .plateforme>.ecran{max-width:none;margin:0;border:none;min-width:0}
}
/* Correctif console : on force la zone de contenu à remplir la largeur sur
   ordinateur (au cas où une règle globale de l'appli marchande centre .ecran
   à ~520px), et on re-garantit la grille du parc. Portée .plateforme : aucun
   effet ailleurs. */
@media (min-width:900px){
  .plateforme > .ecran{max-width:none !important; margin:0 !important;
    flex:1 1 auto !important; width:auto !important; min-width:0 !important;
    border-left:none !important; border-right:none !important}
}
.plateforme .parc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:16px}
@media (min-width:900px){
  .plateforme .parc{grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
  .plateforme .console-grille{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start}
}
/* =========================================================================
   CONSOLE — mise en page ORDINATEUR (>=900px), plein écran et indépendante
   de l'appli marchande. Le !important sert à battre la règle globale qui
   centre .ecran a ~520px. Portee .plateforme uniquement : rien d'autre bouge.
   (Sous 900px = telephone : on ne touche a rien, ca marche deja.)
   ========================================================================= */
@media (min-width:900px){

  .plateforme{
    display:flex !important;
    flex-direction:row !important;
    height:100vh !important; height:100dvh !important;
    overflow:hidden !important;
  }

  .plateforme > .lateral{
    display:flex !important;
    flex:none !important;
    width:264px !important;
    max-width:264px !important;
  }

  /* la zone de contenu remplit tout l'espace restant */
  .plateforme > .ecran{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    border-left:none !important;
    border-right:none !important;
  }

  .plateforme .zone{width:auto !important; max-width:none !important}

  /* l'en-tete (barre) suit alors toute la largeur */
  .plateforme .barre{width:auto !important}

  /* contenu lisible : on borne juste la largeur interne, centree */
  .plateforme .large{max-width:1200px; margin:0 auto; width:100%}

  /* grilles */
  .plateforme .parc{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
  .plateforme .console-grille{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start}
}

/* garantie grille du parc aussi au telephone (2 colonnes) */
.plateforme .parc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:16px}
/* =========================================================================
   CONSOLE — EN-TETE (barre du haut) : un bandeau plein largeur, couleur unie
   (nuit-clair), texte blanc, sur telephone ET ordinateur. Corrige la couleur
   "coupee" qui ne suivait pas toute la ligne. Portee .plateforme uniquement.
   ========================================================================= */
.plateforme .barre{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 18px !important;
  background:var(--nuit-clair) !important;   /* #1C2B45 */
  color:#fff !important;
  border:none !important;
  border-radius:0 !important;
}
.plateforme .barre .barre-titre{
  color:#fff !important;
  background:none !important;
  border-radius:0 !important;
  font-weight:700;
  font-size:17px;
  white-space:nowrap;
}
.plateforme .barre .barre-info{
  color:rgba(255,255,255,.62) !important;
  background:none !important;
  border-radius:0 !important;
  font-size:13px;
}

/* ============================================================
   CONSOLE — Zone sensible (actions dangereuses)
   ============================================================ */
.plateforme .encadre-danger{margin-top:22px;padding:18px;border-radius:14px;background:#FCEDEC;border:1px solid #F3D3D1}
.plateforme .encadre-danger h2{margin:0 0 6px;font-size:16px;color:#C93F3A}
.plateforme .encadre-danger .aide{color:#8E3733;margin-bottom:14px}
.plateforme .danger-action{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid #F3D3D1}
.plateforme .danger-texte{min-width:0}
.plateforme .danger-texte strong{display:block;font-size:14.5px;color:#16233C}
.plateforme .danger-texte span{display:block;font-size:12.5px;color:#8E3733;margin-top:2px;line-height:1.4}
.plateforme .bouton-danger-ocre{flex:none;min-height:40px;padding:0 16px;border:none;border-radius:999px;background:#C97C1E;color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.plateforme .bouton-danger-ocre:hover:not(:disabled){background:#A9660F}
.plateforme .bouton-danger-rouge{flex:none;min-height:40px;padding:0 16px;border:none;border-radius:999px;background:#C93F3A;color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.plateforme .bouton-danger-rouge:hover:not(:disabled){background:#B0332E}
.plateforme .bouton-danger-ocre:disabled,.plateforme .bouton-danger-rouge:disabled{opacity:.45;cursor:not-allowed}

/* dialogues de confirmation */
.plateforme .dlg-sensible,dialog.dlg-sensible{border:none;border-radius:18px;padding:0;max-width:460px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(16,27,60,.3)}
dialog.dlg-sensible::backdrop{background:rgba(16,27,60,.55)}
.plateforme .dlg-sensible form,dialog.dlg-sensible form{padding:22px}
dialog.dlg-sensible h3{margin:0 0 8px;font-size:18px;color:#16233C}
dialog.dlg-sensible p{margin:0 0 14px;font-size:13.5px;color:#64748B;line-height:1.5}
dialog.dlg-sensible .danger-avert{color:#8E3733}
dialog.dlg-sensible .choix-mode{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
dialog.dlg-sensible .choix-mode label{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:1px solid #E2E7EE;border-radius:11px;font-size:13.5px;cursor:pointer}
dialog.dlg-sensible .choix-mode input{margin-top:2px;accent-color:#C97C1E}
dialog.dlg-sensible .lbl-confirme{display:block;font-size:13px;color:#16233C;margin-bottom:7px}
dialog.dlg-sensible .saisie-confirme{width:100%;padding:11px 13px;border:1px solid #E2E7EE;border-radius:11px;font-size:15px;font-family:inherit;margin-bottom:16px}
dialog.dlg-sensible .saisie-confirme:focus{outline:none;border-color:#C93F3A}
dialog.dlg-sensible .dlg-actions{display:flex;gap:10px;justify-content:flex-end}

/* ============================================================
   CAISSE — Détail d'une séance (session_detail refonte)
   ============================================================ */
.ecran-caisse .detail-ligne{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--bord)}
.ecran-caisse .detail-ligne:last-child{border-bottom:none}
.ecran-caisse .detail-cle{color:var(--gris);font-size:13.5px}
.ecran-caisse .detail-val{text-align:right;font-size:13.5px;font-weight:600;color:var(--encre)}
.ecran-caisse .detail-par{font-weight:400;color:var(--gris);font-size:12.5px}

.ecran-caisse .rappro-ligne{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;color:#3A4658}
.ecran-caisse .rappro-total{border-top:2px solid var(--bord);margin-top:5px;padding-top:11px;color:var(--encre)}

.ecran-caisse .carte-ecart{border:2px solid var(--vert)}
.ecran-caisse .carte-ecart-alerte{border-color:var(--corail);background:var(--corail-pale)}
.ecran-caisse .ecart-tete{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ecran-caisse .ecart-etiquette{font-size:14px;color:var(--gris)}
.ecran-caisse .ecart-montant{font-size:20px;font-weight:800;color:var(--vert)}
.ecran-caisse .carte-ecart-alerte .ecart-montant{color:var(--corail)}
.ecran-caisse .ecart-note{margin:8px 0 0;font-size:13px;color:var(--gris)}
.ecran-caisse .ecart-explication{margin:8px 0 0;font-size:13px;color:#7A4E12;background:var(--ocre-pale);padding:9px 12px;border-radius:9px}

.ecran-caisse .mvt-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bord)}
.ecran-caisse .mvt-ligne:last-child{border-bottom:none}
.ecran-caisse .mvt-gauche{display:flex;align-items:center;gap:11px;min-width:0}
.ecran-caisse .mvt-pastille{flex:none;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.ecran-caisse .mvt-entree{background:var(--vert-pale);color:var(--vert)}
.ecran-caisse .mvt-sortie{background:var(--ocre-pale);color:var(--ocre)}
.ecran-caisse .mvt-info{display:flex;flex-direction:column;min-width:0}
.ecran-caisse .mvt-motif{font-size:14px;font-weight:600;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecran-caisse .mvt-motif a{color:var(--vert);text-decoration:none}
.ecran-caisse .mvt-heure{font-size:12px;color:var(--gris)}
.ecran-caisse .mvt-montant{flex:none;font-size:14.5px;font-weight:700;color:var(--encre)}

/* ============================================================
   CAISSE — Détail d'une séance (session_detail refonte)
   ============================================================ */
.ecran-caisse .detail-ligne{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--bord)}
.ecran-caisse .detail-ligne:last-child{border-bottom:none}
.ecran-caisse .detail-cle{color:var(--gris);font-size:13.5px}
.ecran-caisse .detail-val{text-align:right;font-size:13.5px;font-weight:600;color:var(--encre)}
.ecran-caisse .detail-par{font-weight:400;color:var(--gris);font-size:12.5px}

.ecran-caisse .rappro-ligne{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;color:#3A4658}
.ecran-caisse .rappro-total{border-top:2px solid var(--bord);margin-top:5px;padding-top:11px;color:var(--encre)}

.ecran-caisse .carte-ecart{border:2px solid var(--vert)}
.ecran-caisse .carte-ecart-alerte{border-color:var(--corail);background:var(--corail-pale)}
.ecran-caisse .ecart-tete{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ecran-caisse .ecart-etiquette{font-size:14px;color:var(--gris)}
.ecran-caisse .ecart-montant{font-size:20px;font-weight:800;color:var(--vert)}
.ecran-caisse .carte-ecart-alerte .ecart-montant{color:var(--corail)}
.ecran-caisse .ecart-note{margin:8px 0 0;font-size:13px;color:var(--gris)}
.ecran-caisse .ecart-explication{margin:8px 0 0;font-size:13px;color:#7A4E12;background:var(--ocre-pale);padding:9px 12px;border-radius:9px}

.ecran-caisse .mvt-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bord)}
.ecran-caisse .mvt-ligne:last-child{border-bottom:none}
.ecran-caisse .mvt-gauche{display:flex;align-items:center;gap:11px;min-width:0}
.ecran-caisse .mvt-pastille{flex:none;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.ecran-caisse .mvt-entree{background:var(--vert-pale);color:var(--vert)}
.ecran-caisse .mvt-sortie{background:var(--ocre-pale);color:var(--ocre)}
.ecran-caisse .mvt-info{display:flex;flex-direction:column;min-width:0}
.ecran-caisse .mvt-motif{font-size:14px;font-weight:600;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecran-caisse .mvt-motif a{color:var(--vert);text-decoration:none}
.ecran-caisse .mvt-heure{font-size:12px;color:var(--gris)}
.ecran-caisse .mvt-montant{flex:none;font-size:14.5px;font-weight:700;color:var(--encre)}
/* =========================================================================
   GUIDE D'UTILISATION — fiches pédagogiques + pop-up de bienvenue
   ========================================================================= */
.guide-corps{padding:16px 16px 28px}
.guide-large{max-width:860px;margin:0 auto}

/* ---------- en-tête de rubrique ---------- */
.guide-entete{padding:20px 16px 16px}
.guide-entete h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.025em;text-wrap:pretty}
.guide-entete .sous{display:block;margin-top:7px;font-size:14.5px;color:var(--gris);line-height:1.55;text-wrap:pretty}

/* ---------- cartes du sommaire ---------- */
.fiches{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.fiche-carte{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:var(--r-g);
  background:var(--carte);border:1px solid var(--bord);box-shadow:var(--ombre-douce);
  color:inherit;text-decoration:none}
.fiche-carte:hover{border-color:var(--vert);box-shadow:0 3px 14px rgba(11,122,85,.12)}
.fiche-carte .rond{flex:none;width:50px;height:50px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:24px;background:var(--vert-pale)}
.fiche-carte .corps{flex:1;min-width:0}
.fiche-carte .nom{display:block;font-size:17px;font-weight:700;letter-spacing:-.015em}
.fiche-carte .desc{display:block;margin-top:3px;font-size:13.5px;color:var(--gris);line-height:1.45;text-wrap:pretty}
.fiche-carte .fleche{flex:none;font-size:20px;color:var(--gris-clair)}
.rond-ocre{background:var(--ocre-pale) !important}
.rond-nuit{background:#E7EBF1 !important}
.rond-corail{background:var(--corail-pale) !important}

/* ---------- intro de fiche ---------- */
.fiche-intro{padding:15px 16px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:14px;
  font-size:15px;line-height:1.6;color:var(--encre);text-wrap:pretty}

/* ---------- grandes étapes numérotées ---------- */
.etapes{display:flex;flex-direction:column;gap:12px}
.etape{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;
  padding:15px 16px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
.etape .pastille{grid-row:1 / span 2;width:46px;height:46px;border-radius:50%;background:var(--nuit);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--chiffres);font-size:20px;font-weight:700}
.etape .titre-etape{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;
  letter-spacing:-.015em;text-wrap:pretty}
.etape .titre-etape .ico{font-size:20px}
.etape .texte{grid-column:2;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--gris);text-wrap:pretty}
.etape .texte strong{color:var(--encre)}

/* ---------- flèche de cause à effet ---------- */
.consequence{display:flex;align-items:center;gap:11px;margin-top:11px;padding:11px 13px;
  border-radius:var(--r-m);background:var(--vert-pale);border:1px dashed #B9DDCF}
.consequence .fleche{flex:none;font-size:19px;color:var(--vert);line-height:1}
.consequence .quoi{font-size:14px;font-weight:600;color:var(--vert-fonce);line-height:1.45;text-wrap:pretty}

/* ---------- encadré d'avertissement ---------- */
.avertir{padding:16px;border-radius:var(--r-g);background:var(--ocre-pale);
  border:1.5px solid var(--ocre);margin:14px 0}
.avertir .chapeau{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  color:#8A5510;letter-spacing:-.01em}
.avertir .chapeau .ico{font-size:19px}
.avertir .quoi{margin:9px 0 0;font-size:14px;line-height:1.6;color:#8A5510;text-wrap:pretty}

/* ---------- deux colonnes bon geste / mauvais geste ---------- */
.gestes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:13px}
.geste{padding:13px 14px;border-radius:var(--r-m);border:1px solid}
.geste .chapeau{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.geste ul{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.geste li{display:flex;gap:8px;font-size:14px;line-height:1.5;text-wrap:pretty}
.geste li .marque{flex:none;font-weight:700}
.geste-bon{background:var(--vert-pale);border-color:#B9DDCF;color:#3C6B5C}
.geste-bon .chapeau{color:var(--vert)}
.geste-bon li strong{color:var(--vert-fonce)}
.geste-mauvais{background:var(--corail-pale);border-color:#F3D3D1;color:#8E3733}
.geste-mauvais .chapeau{color:var(--corail)}
.geste-mauvais li strong{color:var(--corail)}

/* ---------- maquette du tableau de bord annotée ---------- */
.maquette{padding:14px;border-radius:var(--r-g);background:var(--entete);
  border:1px dashed var(--bord);margin-bottom:14px}
.maquette .legende{display:block;margin-bottom:11px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--gris-clair)}
.maquette-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini-carte{padding:11px 12px;border-radius:var(--r-m);background:var(--carte);
  border:1px solid var(--bord);color:inherit;text-decoration:none;display:block}
.mini-carte:hover{border-color:var(--nuit)}
.mini-carte .quoi{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--gris);line-height:1.3}
.mini-carte .combien{display:block;margin-top:5px;font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;letter-spacing:-.03em}
.mini-carte .pointe{display:flex;align-items:center;gap:5px;margin-top:6px;
  font-size:11.5px;font-weight:700;color:var(--vert)}
.mini-vert .combien{color:var(--vert)}
.mini-ocre .combien{color:var(--ocre)}
.mini-corail .combien{color:var(--corail)}
.mini-nuit{background:var(--nuit);border-color:var(--nuit)}
.mini-nuit .quoi{color:rgba(255,255,255,.7)}
.mini-nuit .combien{color:#fff}
.mini-nuit .pointe{color:#7FD3B4}
.mini-large{grid-column:1 / -1}

/* ---------- bloc d'explication d'un montant ---------- */
.explique{padding:15px 16px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:11px}
.explique .quoi{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.explique .quoi .ico{font-size:19px}
.explique .texte{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--gris);text-wrap:pretty}
.explique .texte strong{color:var(--encre)}
.calcul{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;
  padding:8px 12px;border-radius:var(--r-pilule);background:var(--entete);border:1px solid var(--bord);
  font-family:var(--chiffres);font-size:13px;color:var(--encre)}
.attention{display:flex;gap:9px;margin-top:10px;padding:11px 13px;border-radius:var(--r-m);
  background:var(--ocre-pale);border:1px solid #EFD5AC;font-size:13.5px;line-height:1.5;color:#8A5510;text-wrap:pretty}
.reflexe{display:flex;gap:11px;margin-top:11px;padding:13px 14px;border-radius:var(--r-m);
  background:var(--vert-pale);border:1px solid #B9DDCF}
.reflexe .ico{flex:none;font-size:18px;line-height:1.3}
.reflexe .quoi{font-size:14px;line-height:1.55;color:#3C6B5C;text-wrap:pretty}
.reflexe .quoi strong{display:block;color:var(--vert-fonce);margin-bottom:3px}

/* ---------- les 3 actions de caisse, par couleur ---------- */
.trio{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:13px 0}
.trio-carte{padding:14px 15px;border-radius:var(--r-g);border:1px solid}
.trio-carte .haut{display:flex;align-items:center;gap:11px}
.trio-carte .signe{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.trio-carte .nom{font-size:16px;font-weight:700;letter-spacing:-.015em}
.trio-carte .quoi{margin:9px 0 0;font-size:13.5px;line-height:1.55;text-wrap:pretty}
.trio-vert{background:var(--vert-pale);border-color:#B9DDCF;color:#3C6B5C}
.trio-vert .signe,.trio-vert .nom{color:var(--vert)}
.trio-ocre{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.trio-ocre .signe,.trio-ocre .nom{color:var(--ocre)}
.trio-corail{background:var(--corail-pale);border-color:#F3D3D1;color:#8E3733}
.trio-corail .signe,.trio-corail .nom{color:var(--corail)}

/* ---------- liste des 3 résultats d'écart ---------- */
.ecarts{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.ecart-cas{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-m);
  border:1px solid;font-size:14px;font-weight:600;text-wrap:pretty}
.ecart-cas .marque{flex:none;font-size:16px}
.cas-ok{background:var(--vert-pale);border-color:#B9DDCF;color:var(--vert-fonce)}
.cas-plus{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.cas-moins{background:var(--corail-pale);border-color:#F3D3D1;color:var(--corail)}

/* ---------- exemple de crédits ---------- */
.exemple{padding:0;overflow:hidden}
.exemple-entete{padding:9px 15px;background:var(--entete);border-bottom:1px solid var(--bord);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);
  display:flex;justify-content:space-between;gap:12px}
.exemple-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--trait)}
.exemple-ligne:last-of-type{border-bottom:none}
.exemple-ligne .qui{font-size:14.5px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exemple-ligne .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;color:var(--corail);white-space:nowrap}

/* ---------- navigation entre fiches ---------- */
.fiche-pied{display:flex;flex-direction:column;gap:9px;margin-top:16px}

/* ---------- POP-UP DE BIENVENUE ---------- */
.voile{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(16,27,46,.55);padding:0}
.assistant{position:relative;width:100%;max-width:480px;background:var(--carte);
  border-radius:22px 22px 0 0;padding:26px 20px 20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(16,27,46,.32);text-align:center}
.assistant .passer{position:absolute;top:14px;right:16px;background:none;border:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--gris);cursor:pointer;padding:6px 4px}
.assistant .passer:hover{color:var(--encre)}
.assistant .marque{display:block;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--vert)}
.assistant .rond{width:76px;height:76px;margin:16px auto 0;border-radius:50%;
  background:var(--vert-pale);display:flex;align-items:center;justify-content:center;font-size:36px}
.assistant h2{margin:14px 0 0;font-size:22px;font-weight:700;letter-spacing:-.025em;text-wrap:pretty}
.assistant .quoi{margin:9px auto 0;max-width:380px;font-size:14.5px;line-height:1.6;
  color:var(--gris);text-wrap:pretty}
.assistant .rappel{margin:13px 0 0;padding:12px 13px;border-radius:var(--r-m);text-align:left;
  background:var(--ocre-pale);border:1px solid #EFD5AC;font-size:13.5px;line-height:1.55;color:#8A5510}
.points{display:flex;justify-content:center;gap:7px;margin:18px 0 14px}
.point-etape{width:8px;height:8px;border-radius:50%;background:var(--bord)}
.point-etape.actif{width:22px;border-radius:var(--r-pilule);background:var(--vert)}
.assistant-actions{display:flex;gap:9px}
.assistant-actions .btn{min-height:50px;font-size:16px;font-weight:700}
.assistant-actions .btn-blanc{flex:0 0 38%;font-weight:600}

@media (min-width:900px){
  .guide-corps{padding:22px 28px 34px}
  .guide-entete{padding:26px 28px 18px}
  .guide-entete h1{font-size:30px}
  .fiches{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fiche-carte{padding:17px 18px}
  .etape{grid-template-columns:54px minmax(0,1fr);gap:16px;padding:18px 20px}
  .etape .pastille{width:54px;height:54px;font-size:23px}
  .gestes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .maquette{padding:18px}
  .maquette-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .mini-large{grid-column:auto}
  .explique{padding:18px 20px}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .fiche-pied{flex-direction:row}
  .fiche-pied .btn{width:auto;flex:1}
  .voile{align-items:center;padding:24px}
  .assistant{border-radius:22px;padding:32px 30px 26px;box-shadow:0 26px 70px rgba(16,27,46,.36)}
  .assistant .rond{width:88px;height:88px;font-size:42px}
  .assistant h2{font-size:25px}
}
/* [hidden] doit toujours gagner : plusieurs briques (.btn, .alerte, .apercu…) posent display:flex */
[hidden]{display:none !important}

/* ============================================================
   Double authentification (2FA)
   ============================================================ */
.carte-2fa{max-width:560px;margin:0 auto;background:#fff;border:1px solid #E2E7EE;border-radius:16px;padding:24px}
.etapes-2fa{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:20px}
.etapes-2fa li{font-size:14.5px;color:#3A4658;line-height:1.55}
.etapes-2fa strong{color:#16233C}
.qr-bloc{margin:14px 0;padding:16px;background:#F1F4F7;border-radius:12px;display:flex;justify-content:center}
.qr-bloc img{background:#fff;padding:8px;border-radius:8px}
.secours-2fa{margin-top:10px;font-size:13px}
.secours-2fa summary{cursor:pointer;color:#0B7A55;font-weight:600}
.secours-2fa p{margin:8px 0 6px;color:#64748B}
.cle-2fa{display:inline-block;background:#101B2E;color:#12A171;padding:8px 14px;border-radius:8px;font-family:monospace;font-size:15px;letter-spacing:.12em;word-break:break-all}
.form-2fa{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.saisie-code-2fa{flex:1;min-width:140px;padding:12px 16px;border:2px solid #E2E7EE;border-radius:11px;font-size:22px;letter-spacing:.3em;text-align:center;font-family:monospace}
.saisie-code-2fa:focus{outline:none;border-color:#0B7A55}
.aide-2fa{margin-top:20px;padding-top:16px;border-top:1px solid #E2E7EE;font-size:13px;color:#64748B;line-height:1.5}

/* ============================================================
   Écran de vérification 2FA à la connexion
   ============================================================ */
.public .cadenas-2fa{font-size:40px;text-align:center;margin-bottom:6px}
.public .saisie-code-2fa{text-align:center;font-size:26px;letter-spacing:.35em;font-family:monospace}
.public .lien-bas{text-align:center;margin-top:16px;font-size:13.5px}
.public .lien-bas a{color:var(--gris);text-decoration:none}
.public .lien-bas a:hover{color:var(--vert);text-decoration:underline}
/* ECRAN DE VENTE (POS) — scope sous .ecran-vente (wrapper display:contents,
   n'affecte ni la mise en page ni les noms de classes ; le JS n'est pas touche).
   Evite tout conflit avec .produit/.stock/.panier deja globaux.
   A AJOUTER a la fin de akwabagest.css. */
.ecran-vente{display:contents}
.ecran-vente .ecran{flex:1 1 auto;min-height:0;height:auto}

.ecran-vente .vente{display:flex;flex-direction:column;min-height:0;flex:1}
.ecran-vente .catalogue{display:flex;flex-direction:column;min-height:0;flex:1}
.ecran-vente .panier{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ecran-vente .panier-hote{display:flex;flex-direction:column;min-height:0}
.ecran-vente .panier-defile{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ecran-vente .barre-cherche{padding:11px 14px;background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .cherche{position:relative;display:flex}
.ecran-vente .cherche .saisie{padding-left:40px;padding-right:40px;min-height:48px;font-size:16px}
.ecran-vente .cherche .loupe{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;color:var(--gris-clair);pointer-events:none}
.ecran-vente .cherche .vider{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:none;border-radius:50%;cursor:pointer;
  font-size:17px;color:var(--gris);line-height:1}
.ecran-vente .cherche .vider:hover{background:var(--entete);color:var(--encre)}
.ecran-vente .grille-produits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  padding:12px 14px 16px}
.ecran-vente .produit{display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  min-height:112px;padding:12px;border-radius:var(--r-g);text-align:left;
  background:var(--carte);border:1px solid var(--bord);box-shadow:var(--ombre-douce);
  font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ecran-vente .produit:hover{border-color:var(--vert);box-shadow:0 3px 12px rgba(11,122,85,.13)}
.ecran-vente .produit:active{transform:scale(.975)}
.ecran-vente .produit .nom{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;text-wrap:pretty}
.ecran-vente .produit .bas{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.ecran-vente .produit .prix{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .produit .prix .devise{font-family:var(--police);font-size:11px;font-weight:600;color:var(--gris)}
.ecran-vente .stock{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  white-space:nowrap;color:var(--gris)}
.ecran-vente .stock .pastille{width:8px;height:8px;border-radius:50%;flex:none}
.ecran-vente .stock-ok .pastille{background:var(--vert)}
.ecran-vente .stock-bas{color:var(--ocre)}
.ecran-vente .stock-bas .pastille{background:var(--ocre)}
.ecran-vente .stock-fin{color:var(--corail)}
.ecran-vente .stock-fin .pastille{background:var(--corail)}
.ecran-vente .produit[data-au-panier]{border-color:var(--vert);background:var(--vert-pale)}
.ecran-vente .produit .compteur-ajout{position:absolute;top:-7px;right:-7px;min-width:23px;height:23px;
  padding:0 6px;border-radius:var(--r-pilule);background:var(--vert);color:#fff;
  display:none;align-items:center;justify-content:center;
  font-family:var(--chiffres);font-size:12.5px;font-weight:700;box-shadow:0 1px 4px rgba(11,122,85,.4)}
.ecran-vente .produit{position:relative}
.ecran-vente .produit[data-au-panier] .compteur-ajout{display:flex}
.ecran-vente .produit[data-epuise]{opacity:.5;cursor:not-allowed}
.ecran-vente .produit[data-epuise]:hover{border-color:var(--bord);box-shadow:var(--ombre-douce)}
.ecran-vente .aucun-produit{padding:34px 20px;text-align:center;color:var(--gris);font-size:14.5px;line-height:1.6}
.ecran-vente .aucun-produit strong{display:block;color:var(--encre);font-size:16px;margin-bottom:5px}
.ecran-vente .panier-entete{display:flex;align-items:center;gap:10px;padding:12px 15px;
  background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .panier-entete .titre{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gris)}
.ecran-vente .panier-entete .nb{font-family:var(--chiffres);font-size:12px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-pilule);background:var(--vert-pale);color:var(--vert)}
.ecran-vente .panier-entete .vider-tout{margin-left:auto;background:none;border:none;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--corail);cursor:pointer;padding:6px 2px}
.ecran-vente .panier-entete .vider-tout:hover{text-decoration:underline}
.ecran-vente .panier-liste{padding:12px 14px}
.ecran-vente .ligne-panier{padding:12px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:9px}
.ecran-vente .ligne-panier:last-child{margin-bottom:0}
.ecran-vente .lp-haut{display:flex;align-items:flex-start;gap:10px}
.ecran-vente .lp-haut .nom{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;
  line-height:1.35;text-wrap:pretty}
.ecran-vente .retirer{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--bord);
  background:var(--carte);color:var(--gris);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ecran-vente .retirer:hover{background:var(--corail-pale);border-color:#F3D3D1;color:var(--corail)}
.ecran-vente .lp-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.ecran-vente .quantite{display:flex;align-items:center;gap:2px;border:1px solid var(--bord);
  border-radius:var(--r-pilule);background:var(--carte);overflow:hidden}
.ecran-vente .quantite button{width:44px;height:44px;border:none;background:none;cursor:pointer;
  font-family:var(--chiffres);font-size:21px;font-weight:700;color:var(--vert);line-height:1}
.ecran-vente .quantite button:hover{background:var(--vert-pale)}
.ecran-vente .quantite button:disabled{color:var(--gris-clair);cursor:not-allowed;background:none}
.ecran-vente .quantite .valeur{min-width:38px;text-align:center;font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}
.ecran-vente .lp-total{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:18px;
  font-weight:700;letter-spacing:-.025em;white-space:nowrap;text-align:right}
.ecran-vente .lp-prix{display:flex;align-items:center;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--trait)}
.ecran-vente .lp-prix label{flex:1;font-size:12.5px;color:var(--gris)}
.ecran-vente .prix-unite{width:112px;min-height:40px;padding:0 11px;border:1px solid var(--bord);
  border-radius:var(--r-m);background:var(--carte);font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:700;text-align:right;color:var(--encre)}
.ecran-vente .prix-unite:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(11,122,85,.13)}
.ecran-vente .prix-unite[readonly]{background:var(--entete);color:var(--gris);border-style:dashed;cursor:not-allowed}
.ecran-vente .lp-prix .cadenas{font-size:12px;color:var(--gris-clair)}
.ecran-vente .panier-vide{padding:40px 24px;text-align:center}
.ecran-vente .panier-vide .rond{width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
  background:var(--vert-pale);display:flex;align-items:center;justify-content:center;font-size:29px}
.ecran-vente .panier-vide .titre{display:block;font-size:17px;font-weight:700;letter-spacing:-.015em}
.ecran-vente .panier-vide .quoi{display:block;margin:6px auto 0;max-width:260px;font-size:14px;
  line-height:1.55;color:var(--gris);text-wrap:pretty}
.ecran-vente .reglement{padding:14px;border-top:1px solid var(--bord);background:var(--fond)}
.ecran-vente .bloc-regl{padding:14px 15px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:10px}
.ecran-vente .bloc-regl .titre-bloc{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--gris);margin:0 0 11px}
.ecran-vente .duo-champ{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.ecran-vente .lien-ajout{display:inline-block;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--vert)}
.ecran-vente .total-ticket{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:15px 16px;border-radius:var(--r-g);background:var(--nuit);border:none;
  font-family:inherit;text-align:left;cursor:pointer;margin-bottom:10px}
.ecran-vente .total-ticket:hover{background:var(--nuit-clair)}
.ecran-vente .total-ticket .quoi{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.7)}
.ecran-vente .total-ticket .astuce{display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  text-transform:none;letter-spacing:0;color:rgba(255,255,255,.5)}
.ecran-vente .total-ticket .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:700;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.ecran-vente .total-ticket .combien .devise{font-family:var(--police);font-size:13px;font-weight:700;
  color:rgba(255,255,255,.7)}
.ecran-vente .case-ligne{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:var(--r-m);
  background:var(--entete);border:1px solid var(--bord);cursor:pointer}
.ecran-vente .case-ligne input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ocre)}
.ecran-vente .case-ligne .quoi{font-size:14px;line-height:1.45}
.ecran-vente .case-ligne .quoi strong{display:block;font-size:14.5px}
.ecran-vente .case-ligne .quoi span{color:var(--gris);font-size:12.5px}
.ecran-vente .case-ligne[data-actif]{background:var(--ocre-pale);border-color:#EFD5AC}
.ecran-vente .rendu{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:var(--r-g);border:1px dashed;margin-top:11px}
.ecran-vente .rendu .quoi{font-size:13.5px;font-weight:700}
.ecran-vente .rendu .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .rendu-vert{background:var(--vert-pale);border-color:#B9DDCF;color:var(--vert)}
.ecran-vente .rendu-vert .combien{color:var(--vert-fonce)}
.ecran-vente .rendu-ocre{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.ecran-vente .rendu-ocre .combien{color:#8A5510}
.ecran-vente .rendu-neutre{background:var(--entete);border-color:var(--bord);color:var(--gris)}
.ecran-vente .rendu-neutre .combien{color:var(--gris)}
.ecran-vente .pied-vente{padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--carte);border-top:1px solid var(--bord)}
.ecran-vente .pied-vente .btn{min-height:56px;font-size:17px;font-weight:700}
.ecran-vente .pied-vente .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ecran-vente .barre-panier{position:fixed;left:0;right:0;bottom:0;z-index:24;display:flex;align-items:center;
  gap:12px;padding:11px 14px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
  background:var(--nuit);color:#fff;box-shadow:0 -6px 22px rgba(16,27,46,.28);
  border:none;font-family:inherit;text-align:left;cursor:pointer;width:100%}
.ecran-vente .barre-panier .nb{flex:none;min-width:30px;height:30px;padding:0 8px;border-radius:var(--r-pilule);
  background:var(--vert);display:flex;align-items:center;justify-content:center;
  font-family:var(--chiffres);font-size:14px;font-weight:700}
.ecran-vente .barre-panier .quoi{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.ecran-vente .barre-panier .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .barre-panier .fleche{flex:none;font-size:15px;color:rgba(255,255,255,.6)}
.ecran-vente .volet{position:fixed;inset:0;z-index:26;display:flex;align-items:flex-end;
  background:rgba(16,27,46,.55)}
.ecran-vente .volet-boite{display:flex;flex-direction:column;width:100%;max-height:92vh;
  background:var(--fond);border-radius:20px 20px 0 0;overflow:hidden;
  box-shadow:0 -12px 40px rgba(16,27,46,.34)}
.ecran-vente .volet-barre{display:flex;align-items:center;gap:10px;padding:14px 15px;
  background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .volet-barre h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em}
.ecran-vente .volet-barre .fermer{margin-left:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--bord);background:var(--carte);color:var(--gris);
  font-size:17px;line-height:1;cursor:pointer}
.ecran-vente .volet-barre .fermer:hover{background:var(--entete);color:var(--encre)}
.ecran-vente .volet-corps{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
@media (min-width:900px){
.ecran-vente .barre-cherche{padding:14px 20px}
.ecran-vente .grille-produits{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:16px 20px 24px}
.ecran-vente .produit{min-height:126px;padding:14px}
.ecran-vente .produit .nom{font-size:15px}
.ecran-vente .produit .prix{font-size:18px}
.ecran-vente .panier-entete{padding:14px 18px}
.ecran-vente .panier-liste{padding:14px 16px}
.ecran-vente .reglement{padding:16px}
.ecran-vente .duo-champ{grid-template-columns:repeat(2,minmax(0,1fr))}
.ecran-vente .duo-champ .plein{grid-column:1 / -1}
.ecran-vente .pied-vente{padding:14px 16px}
.ecran-vente .barre-panier{left:264px;width:auto}
.ecran-vente .lateral-pied{padding-bottom:70px}
}
@media (min-width:1100px){
.ecran-vente .vente{flex-direction:row;gap:0}
.ecran-vente .catalogue{flex:1 1 auto;min-width:0;border-right:1px solid var(--bord);background:var(--fond)}
.ecran-vente .panier-hote{flex:0 0 clamp(340px,30vw,420px);background:var(--fond)}
.ecran-vente .barre-panier,.ecran-vente .volet{display:none !important}
}
@media (max-width:1099px){
.ecran-vente .catalogue .zone{padding-bottom:76px}
.ecran-vente .onglets{display:none}
}
/* ECRAN DE VENTE (POS) — scope sous .ecran-vente (wrapper display:contents,
   n'affecte ni la mise en page ni les noms de classes ; le JS n'est pas touche).
   Evite tout conflit avec .produit/.stock/.panier deja globaux.
   A AJOUTER a la fin de akwabagest.css. */
.ecran-vente{display:contents}
.ecran-vente .ecran{flex:1 1 auto;min-height:0;height:auto}

.ecran-vente .vente{display:flex;flex-direction:column;min-height:0;flex:1}
.ecran-vente .catalogue{display:flex;flex-direction:column;min-height:0;flex:1}
.ecran-vente .panier{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ecran-vente .panier-hote{display:flex;flex-direction:column;min-height:0}
.ecran-vente .panier-defile{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ecran-vente .barre-cherche{padding:11px 14px;background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .cherche{position:relative;display:flex}
.ecran-vente .cherche .saisie{padding-left:40px;padding-right:40px;min-height:48px;font-size:16px}
.ecran-vente .cherche .loupe{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;color:var(--gris-clair);pointer-events:none}
.ecran-vente .cherche .vider{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:none;border-radius:50%;cursor:pointer;
  font-size:17px;color:var(--gris);line-height:1}
.ecran-vente .cherche .vider:hover{background:var(--entete);color:var(--encre)}
.ecran-vente .grille-produits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  padding:12px 14px 16px}
.ecran-vente .produit{display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  min-height:112px;padding:12px;border-radius:var(--r-g);text-align:left;
  background:var(--carte);border:1px solid var(--bord);box-shadow:var(--ombre-douce);
  font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ecran-vente .produit:hover{border-color:var(--vert);box-shadow:0 3px 12px rgba(11,122,85,.13)}
.ecran-vente .produit:active{transform:scale(.975)}
.ecran-vente .produit .nom{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;text-wrap:pretty}
.ecran-vente .produit .bas{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.ecran-vente .produit .prix{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .produit .prix .devise{font-family:var(--police);font-size:11px;font-weight:600;color:var(--gris)}
.ecran-vente .stock{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  white-space:nowrap;color:var(--gris)}
.ecran-vente .stock .pastille{width:8px;height:8px;border-radius:50%;flex:none}
.ecran-vente .stock-ok .pastille{background:var(--vert)}
.ecran-vente .stock-bas{color:var(--ocre)}
.ecran-vente .stock-bas .pastille{background:var(--ocre)}
.ecran-vente .stock-fin{color:var(--corail)}
.ecran-vente .stock-fin .pastille{background:var(--corail)}
.ecran-vente .produit[data-au-panier]{border-color:var(--vert);background:var(--vert-pale)}
.ecran-vente .produit .compteur-ajout{position:absolute;top:-7px;right:-7px;min-width:23px;height:23px;
  padding:0 6px;border-radius:var(--r-pilule);background:var(--vert);color:#fff;
  display:none;align-items:center;justify-content:center;
  font-family:var(--chiffres);font-size:12.5px;font-weight:700;box-shadow:0 1px 4px rgba(11,122,85,.4)}
.ecran-vente .produit{position:relative}
.ecran-vente .produit[data-au-panier] .compteur-ajout{display:flex}
.ecran-vente .produit[data-epuise]{opacity:.5;cursor:not-allowed}
.ecran-vente .produit[data-epuise]:hover{border-color:var(--bord);box-shadow:var(--ombre-douce)}
.ecran-vente .aucun-produit{padding:34px 20px;text-align:center;color:var(--gris);font-size:14.5px;line-height:1.6}
.ecran-vente .aucun-produit strong{display:block;color:var(--encre);font-size:16px;margin-bottom:5px}
.ecran-vente .panier-entete{display:flex;align-items:center;gap:10px;padding:12px 15px;
  background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .panier-entete .titre{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gris)}
.ecran-vente .panier-entete .nb{font-family:var(--chiffres);font-size:12px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-pilule);background:var(--vert-pale);color:var(--vert)}
.ecran-vente .panier-entete .vider-tout{margin-left:auto;background:none;border:none;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--corail);cursor:pointer;padding:6px 2px}
.ecran-vente .panier-entete .vider-tout:hover{text-decoration:underline}
.ecran-vente .panier-liste{padding:12px 14px}
.ecran-vente .ligne-panier{padding:12px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:9px}
.ecran-vente .ligne-panier:last-child{margin-bottom:0}
.ecran-vente .lp-haut{display:flex;align-items:flex-start;gap:10px}
.ecran-vente .lp-haut .nom{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;
  line-height:1.35;text-wrap:pretty}
.ecran-vente .retirer{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--bord);
  background:var(--carte);color:var(--gris);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ecran-vente .retirer:hover{background:var(--corail-pale);border-color:#F3D3D1;color:var(--corail)}
.ecran-vente .lp-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.ecran-vente .quantite{display:flex;align-items:center;gap:2px;border:1px solid var(--bord);
  border-radius:var(--r-pilule);background:var(--carte);overflow:hidden}
.ecran-vente .quantite button{width:44px;height:44px;border:none;background:none;cursor:pointer;
  font-family:var(--chiffres);font-size:21px;font-weight:700;color:var(--vert);line-height:1}
.ecran-vente .quantite button:hover{background:var(--vert-pale)}
.ecran-vente .quantite button:disabled{color:var(--gris-clair);cursor:not-allowed;background:none}
.ecran-vente .quantite .valeur{min-width:38px;text-align:center;font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}
.ecran-vente .lp-total{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:18px;
  font-weight:700;letter-spacing:-.025em;white-space:nowrap;text-align:right}
.ecran-vente .lp-prix{display:flex;align-items:center;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--trait)}
.ecran-vente .lp-prix label{flex:1;font-size:12.5px;color:var(--gris)}
.ecran-vente .prix-unite{width:112px;min-height:40px;padding:0 11px;border:1px solid var(--bord);
  border-radius:var(--r-m);background:var(--carte);font-family:var(--chiffres);
  font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:700;text-align:right;color:var(--encre)}
.ecran-vente .prix-unite:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(11,122,85,.13)}
.ecran-vente .prix-unite[readonly]{background:var(--entete);color:var(--gris);border-style:dashed;cursor:not-allowed}
.ecran-vente .lp-prix .cadenas{font-size:12px;color:var(--gris-clair)}
.ecran-vente .panier-vide{padding:40px 24px;text-align:center}
.ecran-vente .panier-vide .rond{width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
  background:var(--vert-pale);display:flex;align-items:center;justify-content:center;font-size:29px}
.ecran-vente .panier-vide .titre{display:block;font-size:17px;font-weight:700;letter-spacing:-.015em}
.ecran-vente .panier-vide .quoi{display:block;margin:6px auto 0;max-width:260px;font-size:14px;
  line-height:1.55;color:var(--gris);text-wrap:pretty}
.ecran-vente .reglement{padding:14px;border-top:1px solid var(--bord);background:var(--fond)}
.ecran-vente .bloc-regl{padding:14px 15px;border-radius:var(--r-g);background:var(--carte);
  border:1px solid var(--bord);box-shadow:var(--ombre-douce);margin-bottom:10px}
.ecran-vente .bloc-regl .titre-bloc{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--gris);margin:0 0 11px}
.ecran-vente .duo-champ{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.ecran-vente .lien-ajout{display:inline-block;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--vert)}
.ecran-vente .total-ticket{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:15px 16px;border-radius:var(--r-g);background:var(--nuit);border:none;
  font-family:inherit;text-align:left;cursor:pointer;margin-bottom:10px}
.ecran-vente .total-ticket:hover{background:var(--nuit-clair)}
.ecran-vente .total-ticket .quoi{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.7)}
.ecran-vente .total-ticket .astuce{display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  text-transform:none;letter-spacing:0;color:rgba(255,255,255,.5)}
.ecran-vente .total-ticket .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:700;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.ecran-vente .total-ticket .combien .devise{font-family:var(--police);font-size:13px;font-weight:700;
  color:rgba(255,255,255,.7)}
.ecran-vente .case-ligne{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:var(--r-m);
  background:var(--entete);border:1px solid var(--bord);cursor:pointer}
.ecran-vente .case-ligne input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ocre)}
.ecran-vente .case-ligne .quoi{font-size:14px;line-height:1.45}
.ecran-vente .case-ligne .quoi strong{display:block;font-size:14.5px}
.ecran-vente .case-ligne .quoi span{color:var(--gris);font-size:12.5px}
.ecran-vente .case-ligne[data-actif]{background:var(--ocre-pale);border-color:#EFD5AC}
.ecran-vente .rendu{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:var(--r-g);border:1px dashed;margin-top:11px}
.ecran-vente .rendu .quoi{font-size:13.5px;font-weight:700}
.ecran-vente .rendu .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .rendu-vert{background:var(--vert-pale);border-color:#B9DDCF;color:var(--vert)}
.ecran-vente .rendu-vert .combien{color:var(--vert-fonce)}
.ecran-vente .rendu-ocre{background:var(--ocre-pale);border-color:#EFD5AC;color:#8A5510}
.ecran-vente .rendu-ocre .combien{color:#8A5510}
.ecran-vente .rendu-neutre{background:var(--entete);border-color:var(--bord);color:var(--gris)}
.ecran-vente .rendu-neutre .combien{color:var(--gris)}
.ecran-vente .pied-vente{padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--carte);border-top:1px solid var(--bord)}
.ecran-vente .pied-vente .btn{min-height:56px;font-size:17px;font-weight:700}
.ecran-vente .pied-vente .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ecran-vente .barre-panier{position:fixed;left:0;right:0;bottom:0;z-index:24;display:flex;align-items:center;
  gap:12px;padding:11px 14px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
  background:var(--nuit);color:#fff;box-shadow:0 -6px 22px rgba(16,27,46,.28);
  border:none;font-family:inherit;text-align:left;cursor:pointer;width:100%}
.ecran-vente .barre-panier .nb{flex:none;min-width:30px;height:30px;padding:0 8px;border-radius:var(--r-pilule);
  background:var(--vert);display:flex;align-items:center;justify-content:center;
  font-family:var(--chiffres);font-size:14px;font-weight:700}
.ecran-vente .barre-panier .quoi{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.ecran-vente .barre-panier .combien{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.ecran-vente .barre-panier .fleche{flex:none;font-size:15px;color:rgba(255,255,255,.6)}
.ecran-vente .volet{position:fixed;inset:0;z-index:26;display:flex;align-items:flex-end;
  background:rgba(16,27,46,.55)}
.ecran-vente .volet-boite{display:flex;flex-direction:column;width:100%;max-height:92vh;
  background:var(--fond);border-radius:20px 20px 0 0;overflow:hidden;
  box-shadow:0 -12px 40px rgba(16,27,46,.34)}
.ecran-vente .volet-barre{display:flex;align-items:center;gap:10px;padding:14px 15px;
  background:var(--carte);border-bottom:1px solid var(--bord)}
.ecran-vente .volet-barre h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em}
.ecran-vente .volet-barre .fermer{margin-left:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--bord);background:var(--carte);color:var(--gris);
  font-size:17px;line-height:1;cursor:pointer}
.ecran-vente .volet-barre .fermer:hover{background:var(--entete);color:var(--encre)}
.ecran-vente .volet-corps{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
@media (min-width:900px){
.ecran-vente .barre-cherche{padding:14px 20px}
.ecran-vente .grille-produits{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:16px 20px 24px}
.ecran-vente .produit{min-height:126px;padding:14px}
.ecran-vente .produit .nom{font-size:15px}
.ecran-vente .produit .prix{font-size:18px}
.ecran-vente .panier-entete{padding:14px 18px}
.ecran-vente .panier-liste{padding:14px 16px}
.ecran-vente .reglement{padding:16px}
.ecran-vente .duo-champ{grid-template-columns:repeat(2,minmax(0,1fr))}
.ecran-vente .duo-champ .plein{grid-column:1 / -1}
.ecran-vente .pied-vente{padding:14px 16px}
.ecran-vente .barre-panier{left:264px;width:auto}
.ecran-vente .lateral-pied{padding-bottom:70px}
}
@media (min-width:1100px){
.ecran-vente .vente{flex-direction:row;gap:0}
.ecran-vente .catalogue{flex:1 1 auto;min-width:0;border-right:1px solid var(--bord);background:var(--fond)}
.ecran-vente .panier-hote{flex:0 0 clamp(340px,30vw,420px);background:var(--fond)}
.ecran-vente .barre-panier,.ecran-vente .volet{display:none !important}
}
@media (max-width:1099px){
.ecran-vente .catalogue .zone{padding-bottom:76px}
.ecran-vente .onglets{display:none}
}
/* Correctif écran de vente : .ecran-vente n'est plus display:contents (peu
   fiable ici) mais un vrai conteneur flex qui remplit la colonne de contenu.
   Ajouté APRÈS le bloc POS -> ces règles gagnent (la dernière l'emporte). */
.ecran-vente{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:0 !important;
}
.ecran-vente > .ecran{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  border:none !important;
}