/* COMPOS Vento — plateforme en ligne (tableau de bord du propriétaire + administration).
   Même identité que l'application : teal COMPOS, cartes blanches arrondies, cartes chiffrées à liseret.
   Les couleurs vivent dans les jetons ci-dessous : une teinte se change à un seul endroit. */
:root {
  --fond: #f1f6f7;
  --carte: #ffffff;
  --bord: #d8e5e8;
  --bord-fort: #b4ccd2;
  --texte: #12313a;
  --doux: #55707a;
  --pale: #94a3b8;
  --accent: #1d6f80;
  --accent-fonce: #123c46;
  --accent-clair: #e2f0f3;
  --ok: #0f7d57;       --ok-fond: #e2f5ec;
  --attention: #a85f00; --attention-fond: #fff2d9;
  --danger: #b42318;   --danger-fond: #fde8e6;
  --info: #1d5fa8;     --info-fond: #e4eefb;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(18, 49, 58, .06), 0 6px 18px rgba(18, 49, 58, .06);
  --ombre-bandeau: 0 4px 18px rgba(12, 44, 54, .32);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 14px;
       line-height: 1.45; color: var(--texte); background: var(--fond); min-height: 100vh;
       display: flex; flex-direction: column; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- bandeau */
.bandeau { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
           padding: 10px 24px; color: #fff; box-shadow: var(--ombre-bandeau);
           background: linear-gradient(100deg, #0d3640 0%, #17586a 55%, #22788b 100%); }
.marque { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.marque .logo-img { height: 34px; width: auto; display: block; }
.marque .produit { font-weight: 800; font-size: 12px; letter-spacing: .14em; padding: 4px 9px; border-radius: 999px;
                   background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); }
.marque .sous-titre { opacity: .92; font-size: 14px; font-weight: 600; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .3);
                      overflow-wrap: anywhere; }
.droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.droite form { margin: 0; }
.contenu { width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 24px 44px; flex: 1 0 auto; }

/* Pied de page : le logo, le site et le téléphone de COMPOS, sur toutes les pages. */
.pied { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding: 18px 16px 22px;
        color: var(--doux); font-size: 12px; border-top: 1px solid var(--bord); background: rgba(255, 255, 255, .6); }
.pied img { height: 26px; width: auto; display: block; }
.pied a { color: var(--doux); text-decoration: none; font-weight: 600; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied .sep { opacity: .5; }

/* ---------------------------------------------------------------- boutons */
.btn { border: 0; border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
       transition: background .15s, box-shadow .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn.primaire { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(18, 60, 70, .25); }
.btn.primaire:hover { background: var(--accent-fonce); }
.btn.clair { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .38); }
.btn.clair:hover { background: rgba(255, 255, 255, .26); }
.btn.filtre { background: #fff; color: #2a4a53; border: 1px solid var(--bord-fort); border-radius: 999px; padding: 6px 14px; }
.btn.filtre:hover { background: var(--accent-clair); border-color: var(--accent); }
.btn.filtre.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.petit { padding: 4px 9px; font-size: 12px; background: #e8eef0; color: #2a4a53; margin: 2px; border-radius: 8px; }
.btn.petit:hover { background: #d3dee2; }
.btn.petit.danger { background: var(--danger-fond); color: var(--danger); }
.btn.petit.danger:hover { background: #f9d2cd; }
.btn.petit.primaire { background: var(--accent); color: #fff; }
.btn.petit.primaire:hover { background: var(--accent-fonce); }
a.btn { text-decoration: none; display: inline-block; }
.btn[hidden] { display: none; }

/* ---------------------------------------------------------------- cartes */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre); }
.carte h1 { margin: 0 0 6px; font-size: 22px; color: var(--accent-fonce); letter-spacing: -.01em; }
.carte h2 { margin: 0 0 12px; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); }
.carte h2 .note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--doux); margin-left: 6px; }
.carte.large { grid-column: span 2; }
.carte.secret { border-left: 5px solid #f59e0b; margin-bottom: 16px; background: linear-gradient(180deg, #fffaf0, #fff); }
.carte.secret h2 { color: var(--attention); }
.carte.secret dl { display: grid; grid-template-columns: 220px 1fr; gap: 6px 12px; }
.carte.secret code { font-size: 14px; background: #fff2d9; padding: 2px 7px; border-radius: 5px; }
.carte.secret code.code-service { font-size: 26px; letter-spacing: 5px; font-weight: 700; }
.carte.secret details { margin-top: 10px; } .carte.secret summary { cursor: pointer; color: var(--doux); font-size: 13px; }
.aide { color: var(--doux); font-size: 13px; }
.note { color: var(--doux); }

/* Connexion, refus, installation : une carte centrée avec le logo, sans bandeau. */
body.centre .contenu { display: flex; align-items: center; justify-content: center; padding-top: 28px; padding-bottom: 28px; }
body.centre { background: radial-gradient(1200px 520px at 50% -8%, #cfe6eb 0%, var(--fond) 62%); }
.carte.connexion { width: 100%; max-width: 410px; margin: 0 auto; padding: 28px 28px 24px; border-radius: 18px; }
.carte.connexion .logo-carte { display: block; height: 46px; width: auto; margin: 0 auto 6px; }
.carte.connexion .ligne-produit { text-align: center; margin: 0 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .16em;
                                  text-transform: uppercase; color: var(--accent); }
.carte.connexion h1 { text-align: center; font-size: 20px; }
.carte.connexion .aide { text-align: center; }
.carte.connexion .aide.apk { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.carte.installer { max-width: 440px; }

.formulaire label, .connexion label { display: block; font-weight: 650; font-size: 12px; color: #2a4a53; margin: 12px 0 5px; }
.formulaire input, .connexion input, .perso input { width: 100%; padding: 9px 11px; border: 1.5px solid var(--bord); border-radius: 9px; font: inherit; font-size: 14px;
                                                     background: #fff; color: var(--texte); }
.formulaire input:focus, .connexion input:focus, .formulaire select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 111, 128, .16); }
.formulaire .btn, .connexion .btn { margin-top: 16px; width: 100%; padding: 10px 14px; font-size: 14px; }
.formulaire select { width: 100%; padding: 9px 11px; border: 1.5px solid var(--bord); border-radius: 9px; font: inherit; font-size: 14px; background: #fff; }
.formulaire label small { font-weight: 400; color: var(--doux); }
.formulaire label.case { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.formulaire label.case input { width: auto; }
.flash { padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; background: var(--accent-clair); color: #1f4954; border: 1px solid #c3dde3; }
.flash.erreur { background: var(--danger-fond); color: var(--danger); border-color: #f4c5bf; }

/* ---------------------------------------------------------------- période et rubriques */
.barre-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.perso { display: flex; gap: 8px; align-items: end; margin-left: auto; }
.perso label { font-size: 12px; color: #2a4a53; font-weight: 650; }
.perso input { width: auto; padding: 6px 8px; display: block; }

/* Rubriques du tableau de bord : une rangée d'onglets qui défile sur un téléphone. */
.rubriques { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--bord-fort); overflow-x: auto; scrollbar-width: none; }
.rubriques::-webkit-scrollbar { display: none; }
.rubrique { border: 0; background: none; padding: 10px 18px; font: inherit; font-weight: 700; color: var(--doux); cursor: pointer;
            border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 10px 10px 0 0;
            transition: color .15s, background .15s; }
.rubrique:hover { color: var(--accent-fonce); background: rgba(29, 111, 128, .08); }
.rubrique.actif { color: var(--accent-fonce); border-bottom-color: var(--accent); background: linear-gradient(180deg, transparent, rgba(29, 111, 128, .08)); }
.rubrique:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[hidden] { display: none !important; }

/* Fraîcheur des données du magasin : le dernier envoi de la caisse, en clair. */
.puce { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
        background: var(--accent-clair); color: var(--accent-fonce); border: 1px solid transparent; }
.puce::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.puce.ok { background: var(--ok-fond); color: var(--ok); }
.puce.attention { background: var(--attention-fond); color: var(--attention); }
.puce.danger { background: var(--danger-fond); color: var(--danger); }
.puce.neutre { background: #eceff1; color: var(--doux); }
.bandeau .puce { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }
.bandeau .puce.ok::before { background: #4ade80; }
.bandeau .puce.attention::before { background: #fbbf24; }
.bandeau .puce.danger::before { background: #f87171; }
.bandeau .puce.neutre::before { background: #cbd5e1; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #eceff1; color: var(--doux); }
.badge.ok { background: var(--ok-fond); color: var(--ok); }
.badge.attention { background: var(--attention-fond); color: var(--attention); }
.badge.danger { background: var(--danger-fond); color: var(--danger); }

/* Pendant un rechargement, la page reste là mais s'éteint un peu : on voit que ça travaille. */
.page { transition: opacity .2s; }
body.charge .page { opacity: .55; }
body.charge .contenu { cursor: progress; }

/* ---------------------------------------------------------------- cartes chiffrées */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-left-width: 4px; border-radius: 12px; padding: 13px 15px;
       display: flex; flex-direction: column; gap: 4px; box-shadow: var(--ombre); }
.kpi .titre { font-size: 11px; font-weight: 750; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.kpi .valeur { font-size: 22px; font-weight: 800; color: var(--texte); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .sous { font-size: 11.5px; color: var(--doux); }
.kpi.bleu { border-left-color: #2196F3; } .kpi.vert { border-left-color: #10b981; } .kpi.orange { border-left-color: #f59e0b; }
.kpi.rouge { border-left-color: #ef4444; } .kpi.violet { border-left-color: #8b5cf6; }
.kpi.teal { border-left-color: var(--accent); } .kpi.or { border-left-color: #d4a017; background: linear-gradient(135deg, #fff, #fff6dc); }
.kpi .valeur.negatif { color: #dc2626; }
.kpi .valeur.petit { font-size: 15px; color: #92400e; }
.kpis:empty { display: none; }
.section-titre { font-size: 12px; font-weight: 750; color: var(--accent-fonce); text-transform: uppercase; letter-spacing: .07em; margin: 6px 0 10px; }
.section-titre .note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--doux); margin-left: 8px; }

/* « À surveiller » : ce qui demande un coup d'œil, du plus grave au plus calme, chaque ligne mène à sa rubrique. */
.alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerte { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bord);
          border-left-width: 4px; background: #fff; }
.alerte .pastille { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.alerte .texte { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.alerte .texte b { font-weight: 750; }
.alerte .voir { flex: 0 0 auto; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.alerte .voir:hover { background: var(--accent-clair); text-decoration: underline; }
.alerte.danger { border-left-color: var(--danger); background: #fffafa; } .alerte.danger .pastille { background: var(--danger-fond); color: var(--danger); }
.alerte.attention { border-left-color: #e08a00; background: #fffcf5; } .alerte.attention .pastille { background: var(--attention-fond); color: var(--attention); }
.alerte.info { border-left-color: var(--info); } .alerte.info .pastille { background: var(--info-fond); color: var(--info); }
.alerte.ok { border-left-color: var(--ok); } .alerte.ok .pastille { background: var(--ok-fond); color: var(--ok); }

.defile { overflow-x: auto; }
/* Un graphique prend la hauteur de son cadre, pas un rapport largeur/hauteur : sur un téléphone,
   un rapport pensé pour un écran large l'écrasait à 60 px de haut. */
.graphe { position: relative; height: 300px; }
.graphe.bas { height: 210px; }
.graphe.anneau { height: 340px; }
.graphe.vide { height: auto !important; }
.vide-graphe { color: var(--pale); text-align: center; padding: 28px 8px; margin: 0; }
/* Hausse et baisse : toujours une flèche ou un mot avec la couleur, jamais la couleur seule. */
.variation.hausse, .flux tr.hausse td { color: #047857; }
.variation.baisse, .flux tr.baisse td { color: #b91c1c; }
.flux tr.total td { font-weight: 700; border-top: 1px solid var(--bord); background: #f3f9fa; }
.flux tr.solde td { font-weight: 800; font-size: 14px; border-top: 2px solid var(--accent); border-bottom: 0; }
.tableau td.attente { color: #b45309; }

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.carte.pleine { grid-column: 1 / -1; }
.grille > .carte { min-width: 0; }
/* Administration : les formulaires à gauche (collés en haut pendant qu'on lit la liste), la liste et les envois à droite. */
.grille-admin { display: grid; grid-template-columns: minmax(260px, .8fr) 2.6fr; gap: 14px; align-items: start; }
.grille-admin > .carte:first-child { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto; }
.grille-admin > .carte.large { grid-column: 2; min-width: 0; overflow-x: auto; }
@media (max-width: 1000px) {
  .grille, .grille-admin { grid-template-columns: 1fr; }
  .carte.large { grid-column: span 1; }
  .grille-admin > .carte:first-child, .grille-admin > .carte.large { grid-column: auto; grid-row: auto; position: static; max-height: none; overflow-y: visible; }
}

/* ---------------------------------------------------------------- tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--doux);
              border-bottom: 1px solid var(--bord); padding: 7px 8px; white-space: nowrap; background: #f7fafb; }
.tableau th:first-child { border-radius: 8px 0 0 0; } .tableau th:last-child { border-radius: 0 8px 0 0; }
.tableau td { padding: 7px 8px; border-bottom: 1px solid #edf3f5; vertical-align: top; }
.tableau tr:hover td { background: #f4f9fa; }
.tableau .num, .tableau td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau th.num { text-align: right; }
.tableau .vide { color: var(--pale); text-align: center; padding: 16px; }
.tableau .actions form { display: inline; }
.tableau tr.inactif td { opacity: .5; }
.tableau td.ok { color: #047857; } .tableau td.echec { color: #b91c1c; }
code { font-family: Consolas, "Cascadia Mono", "Segoe UI Mono", monospace; font-size: 12px; }

/* Onglets des magasins (entreprise à plusieurs magasins) */
.onglets-magasins { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.onglet { display: flex; flex-direction: column; gap: 2px; padding: 9px 15px; border-radius: 12px; text-decoration: none;
          background: #fff; border: 1px solid var(--bord); color: var(--texte); min-width: 160px; box-shadow: var(--ombre);
          transition: border-color .15s, transform .1s; }
.onglet:hover { border-color: var(--accent); transform: translateY(-1px); }
.onglet.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.onglet .nom { font-weight: 700; }
.onglet .detail { font-size: 11px; opacity: .8; }
.entreprise { margin-bottom: 22px; }
.entete-entreprise { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 2px solid var(--bord); margin-bottom: 6px; }
.entete-entreprise .actions { margin-left: auto; }
.entete-entreprise .actions form { display: inline; }
form.inline { display: inline-flex; gap: 4px; align-items: center; }
form.inline input { padding: 3px 6px; border: 1px solid var(--bord); border-radius: 6px; font-family: Consolas, monospace; font-size: 12px; text-transform: uppercase; }
.echec { color: #b91c1c; }

/* Administration : le résumé en tête, la recherche, les actions d'un magasin sur une ligne qui se replie. */
.resume-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 15px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 2px; }
.tuile .chiffre { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tuile .legende { font-size: 11.5px; color: var(--doux); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tuile.attention { border-color: #f0c987; background: #fffbf1; } .tuile.attention .chiffre { color: var(--attention); }
.tuile.danger { border-color: #f1b8b2; background: #fff8f7; } .tuile.danger .chiffre { color: var(--danger); }
.tuile.ok .chiffre { color: var(--ok); }
.recherche { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.recherche input { flex: 1; max-width: 420px; padding: 9px 12px 9px 34px; border: 1.5px solid var(--bord); border-radius: 999px; font: inherit; background: #fff
                   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2355707a' stroke-width='2' stroke-linecap='round'><circle cx='7' cy='7' r='5.2'/><path d='M11 11l3.5 3.5'/></svg>") no-repeat 11px center; }
.recherche input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 111, 128, .16); }
.recherche .compte { color: var(--doux); font-size: 12px; }
td.actions { min-width: 205px; }
td.actions form { display: inline-block; }

/* Application : la page d'installation (téléphone du propriétaire) */
.etapes { list-style: none; padding: 0; margin: 14px 0 0; }
.etapes li { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.etapes .btn { margin: 0; text-align: center; font-size: 16px; padding: 14px; text-decoration: none; display: block; }
.etapes .aide { margin: 0; text-align: left; }

/* Connexion unique : l'en-tête de l'administration COMPOS (serveur d'activation), le même menu
   aux mêmes places. Mêmes règles que admin.css là-bas et que la console COMPOS Signe. */
header.unique { background: #fff; border-bottom: 1px solid #dfe5ee; padding: 10px 24px; display: flex; align-items: center;
                gap: 20px; flex-wrap: wrap; color: #17212f; position: sticky; top: 0; z-index: 30; }
header.unique img { height: 30px; }
header.unique .app { font-weight: 700; color: #5d6878; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
header.unique nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
header.unique nav a { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: #17212f; font-weight: 600; font-size: 14px; }
header.unique nav a:hover { background: #e9eef2; }
header.unique nav a.on { background: #e6eef9; color: #1f4e8c; }
header.unique nav a.ext { color: #1f4e8c; box-shadow: inset 0 0 0 1px #dfe5ee; }
header.unique .qui { color: #5d6878; font-size: 12px; display: flex; align-items: center; gap: 8px; }
header.unique .qui form { display: inline; }
header.unique .qui button { background: #fff; color: #1f4e8c; border: 1px solid #1f4e8c; border-radius: 8px; padding: 4px 10px;
                            font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  header.unique { padding: 10px 14px; gap: 8px 12px; }
  header.unique .qui { margin-left: auto; }
  header.unique nav { order: 3; flex: 0 0 100%; gap: 2px; }
  header.unique nav a { padding: 6px 8px; }
}

/* ---------------------------------------------------------------- téléphone (application Android, navigateur mobile) */
@media (max-width: 700px) {
  .bandeau { position: static; flex-wrap: wrap; padding: 10px 14px; gap: 8px 12px; }
  .marque { gap: 8px 10px; }
  .marque .logo-img { height: 28px; }
  .marque .sous-titre { width: 100%; padding-left: 0; border-left: 0; font-size: 13px; }
  /* Une seule rangée sous le nom : la fraîcheur et « Déconnexion » ; imprimer n'a pas de sens sur un téléphone. */
  .droite { width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: nowrap; }
  .droite #btn-imprimer { display: none; }
  .bandeau .puce { font-size: 11px; padding: 3px 8px; min-width: 0; }
  .bandeau .btn.clair { padding: 6px 10px; font-size: 12px; }
  .contenu { padding: 12px 12px 30px; }
  .pied { padding: 14px 12px 18px; }
  .barre-periode { gap: 6px; }
  .perso { margin-left: 0; width: 100%; }
  .perso label { flex: 1; min-width: 0; }
  .perso input { width: 100%; }
  .onglet { min-width: 0; flex: 1 1 45%; }
  .carte.connexion { padding: 22px 18px 20px; }

  /* Rubriques : toutes visibles sans défiler, quatre par rangée. */
  .rubriques { flex-wrap: wrap; overflow: visible; gap: 6px; border-bottom: 0; margin-bottom: 12px; }
  .rubrique { flex: 1 1 22%; padding: 9px 4px; margin: 0; border: 1px solid var(--bord-fort); border-radius: 10px; background: #fff; font-size: 13px; }
  .rubrique.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
  .rubrique:hover { background: var(--accent-clair); }
  .rubrique.actif:hover { background: var(--accent); color: #fff; }

  /* Cartes chiffrées : deux par rangée ; celle qui reste seule, ou qui porte un long texte, prend la largeur. */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px; border-radius: 10px; min-width: 0; }
  .kpi .titre { font-size: 10.5px; }
  .kpi .valeur { font-size: 16px; overflow-wrap: anywhere; }
  .kpi .sous { font-size: 11px; }
  .kpi.large, .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Une carte large en tête décale les rangées d'un cran : la dernière, alors seule, prend la largeur ;
     de même la carte laissée seule juste avant une carte large. */
  .kpis > .kpi.large:first-child ~ .kpi:last-child:nth-child(odd) { grid-column: auto; }
  .kpis > .kpi.large:first-child ~ .kpi:last-child:nth-child(even),
  .kpis > .kpi:nth-child(odd):has(+ .kpi.large) { grid-column: 1 / -1; }
  .kpi.large .valeur { font-size: 21px; }

  /* Le magasin choisi d'abord : la vue de tous les magasins, longue en fiches, passe en bas de la Synthèse. */
  .page[data-page="synthese"] { display: flex; flex-direction: column; }
  #bloc-consolide { order: 10; margin: 10px 0 0 !important; }

  .grille { gap: 10px; }
  .carte { padding: 12px; border-radius: 12px; overflow-x: auto; }
  .carte h2 .note { display: block; margin: 2px 0 0; }
  .graphe { height: 230px; }
  .graphe.bas { height: 170px; }
  .graphe.anneau { height: 300px; }
  #carte-osm { height: 340px !important; }
  .alerte { padding: 8px 10px; gap: 8px; }
  .resume-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tuile .chiffre { font-size: 22px; }

  /* Tableaux : tous les montants sont en dinars, « DA » répété sur chaque ligne mange la largeur
     qu'il faut aux chiffres. Les cartes chiffrées et les fiches, elles, gardent l'unité. */
  .tableau { font-size: 12.5px; }
  .tableau th, .tableau td { padding: 6px 4px; }
  .tableau th { font-size: 10px; letter-spacing: 0; }
  .tableau .unite { display: none; }
  .tableau td:first-child { overflow-wrap: anywhere; }

  /* Un tableau de plus de quatre colonnes ne tient pas sur un téléphone : chaque ligne devient
     une fiche à deux colonnes, chaque valeur sous son libellé (l'en-tête de la colonne, posé
     dans data-label par la page). Un tableau .nomme titre la fiche avec sa première cellule. */
  .tableau.empile thead { display: none; }
  .tableau.empile, .tableau.empile tbody, .tableau.empile tfoot { display: block; width: 100%; }
  .tableau.empile tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px;
                       border: 1px solid #e3eef1; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; background: #fff; }
  .tableau.empile tfoot tr { background: #f3f9fa; border-color: var(--bord); }
  .tableau.empile td, .tableau.empile td.num { display: block; border: 0; padding: 0; text-align: left; white-space: normal;
                                               overflow-wrap: anywhere; font-size: 13px; }
  .tableau.empile td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700;
                               text-transform: uppercase; letter-spacing: .03em; color: var(--doux); }
  .tableau.empile td:empty { display: none; }
  .tableau.empile td.vide { grid-column: 1 / -1; text-align: center; padding: 6px 0; }
  .tableau.empile td.vide::before, .tableau.empile.nomme td:first-child::before { content: none; }
  .tableau.empile.nomme td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: 14px; color: var(--accent-fonce);
                                         border-bottom: 1px solid #eef4f6; padding-bottom: 5px; }
  /* Variante .serre (charges) : date, type et montant sur une ligne, la remarque dessous si elle existe. */
  .tableau.empile.serre tr { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tableau.empile.serre td:nth-child(3) { grid-column: 1 / -1; order: 9; }
  .tableau.empile.serre td:first-child, .tableau.empile.serre td.num { white-space: nowrap; overflow-wrap: normal; }
  .tableau.empile.serre td.num { text-align: right; }
  /* « Aucun ... » n'est pas une fiche : ni titre, ni cadre. */
  .tableau.empile td.vide, .tableau.empile.nomme td.vide { font-weight: 400; font-size: 13px; color: var(--pale); border: 0; }
  .tableau.empile tr:has(> td.vide) { border: 0; padding: 0; margin: 0; }
  .tableau.empile tr:hover td { background: none; }
  .tableau.empile .unite { display: inline; }
}
@media (max-width: 350px) {
  .kpi .valeur { font-size: 14px; }
  .rubrique { flex-basis: 30%; }
}

/* ---------------------------------------------------------------- impression : le tableau de bord se range sur papier */
@media print {
  body { background: #fff; display: block; }
  .bandeau, header.unique, .barre-periode, .rubriques, .pied, .onglets-magasins, .btn, .recherche, .alerte .voir { display: none !important; }
  .contenu { max-width: none; padding: 0; }
  /* La rubrique ouverte sort seule : les graphiques des autres ne sont tracés qu'à leur ouverture. */
  .carte, .kpi { box-shadow: none; break-inside: avoid; }
  .grille { grid-template-columns: repeat(2, 1fr); }
  .graphe { height: 220px; }
  #bloc-carte { display: none !important; }
}