/* Mise en page : petite barre du compte, en-tête blanc (logo + onglets), bande bleue avec le titre, puis la page. */
:root{
  --bg:#ffffff; --surface:#ffffff; --ink:#333333; --muted:#6b6b6b; --line:#dddddd; --soft:#ececec;
  --accent:#1e9fd8; --accent-ink:#ffffff; --marge:#d9352b; --ok:#2e8b3e; --warn:#b26a00;
  --orange:#ff9800; --cyan:#00c4dc; --bleu:#26a9e0; --bande:#29abe2; --bande-fonce:#1993cc;
  --display:"Open Sans","Segoe UI",Arial,sans-serif; --body:"Open Sans","Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121a24; --surface:#1a2430; --ink:#e6ebf0; --muted:#9fb0bf; --line:#2d3b4a; --soft:#223040;
  --accent:#4cc3f5; --accent-ink:#0d1620; --marge:#ff7b72; --ok:#5fd07a; --warn:#f0b455;
  --bande:#1b86bd; --bande-fonce:#146b98; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#121a24; --surface:#1a2430; --ink:#e6ebf0; --muted:#9fb0bf; --line:#2d3b4a; --soft:#223040;
  --accent:#4cc3f5; --accent-ink:#0d1620; --marge:#ff7b72; --ok:#5fd07a; --warn:#f0b455;
  --bande:#1b86bd; --bande-fonce:#146b98; color-scheme:dark }
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h2{font-size:1.25rem} h3{font-size:1rem}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
nav button{font:600 .9rem var(--body);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:12px 12px 9px;cursor:pointer;white-space:nowrap}
nav button[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
main{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:18px 60px;display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.btn{font:600 .9rem var(--body);background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:6px;padding:9px 14px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.sm{padding:5px 9px;font-size:.8rem}
.btn.danger{background:transparent;color:var(--marge);border-color:var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-width:0;max-width:100%}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.tile span{display:block;color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.tile b{display:block;font:700 1.35rem var(--display);margin-top:4px;font-variant-numeric:tabular-nums}
.tile.neg b{color:var(--marge)} .tile.pos b{color:var(--ok)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td small{color:var(--muted);display:block}
.pill{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.75rem;font-weight:700;background:var(--soft);color:var(--ink);white-space:nowrap}
.pill.bad{color:var(--marge)} .pill.low{color:var(--warn)} .pill.good{color:var(--ok)}
.muted{color:var(--muted)} .empty{color:var(--muted);padding:18px 4px;text-align:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex-wrap:wrap}
.seg button{font:600 .82rem var(--body);background:var(--surface);color:var(--muted);border:0;padding:7px 11px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.notice{background:var(--soft);border:1px dashed var(--line);border-radius:8px;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.88rem}
.pos-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.pos-grid{grid-template-columns:minmax(0,1fr)}}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pbtn{text-align:left;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.pbtn b{font-size:.88rem;overflow-wrap:anywhere} .pbtn span{font-size:.8rem;color:var(--muted)}
.pbtn:disabled{opacity:.45;cursor:not-allowed}
.cart{display:flex;flex-direction:column;gap:8px}
.cl{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.qty{display:inline-flex;align-items:center;gap:4px}
.qty button{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer}
.sum{display:flex;justify-content:space-between;gap:10px}
.sum.big{font:700 1.3rem var(--display)}
.f{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:600;color:var(--muted);flex:1 1 160px;min-width:0}
.f input,.f select{font-weight:400}
.chart{display:flex;align-items:flex-end;gap:4px;height:130px;border-bottom:1px solid var(--line);background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.chart i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.55}
.chart i:last-child{opacity:1}
.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}
#modal{position:fixed;inset:0;background:rgba(10,14,26,.55);display:flex;align-items:flex-start;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 16px 24px;overflow-y:auto;z-index:20}
.mbox{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:18px;width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}
.mbody{display:flex;flex-wrap:wrap;gap:12px}
.mbody>.full{flex:1 1 100%;min-width:0}
.mfoot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ticket{font-family:var(--mono);font-size:.82rem;white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line);border-radius:6px;padding:14px;margin:0;overflow-x:auto}
.role-caissier .adm{display:none!important}
.auth{max-width:380px;margin:40px auto;width:100%}
.auth form{display:flex;flex-direction:column;gap:12px}
.badge{font-size:.78rem;font-weight:700;border-radius:99px;padding:3px 10px;background:var(--soft);color:var(--warn)}
.who{font-size:.85rem;color:var(--muted);font-weight:600}
@media print{body *{visibility:hidden!important}#tk,#tk *{visibility:visible!important}#tk{position:absolute;left:0;top:0;border:0;background:#fff;color:#000;font-size:11px;width:72mm}}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:.88rem;z-index:30;max-width:calc(100% - 32px)}

/* ---- Ajouts version Django ---- */
a{color:var(--accent)}
a.btn,label.btn{text-decoration:none;display:inline-block}
form.inline{display:inline}
.seg a{font:600 .82rem var(--body);background:var(--surface);color:var(--muted);padding:7px 11px;text-decoration:none}
.seg a[aria-current="true"]{background:var(--accent);color:var(--accent-ink)}
.messages{display:flex;flex-direction:column;gap:8px}
.msg{border-radius:8px;padding:10px 14px;font-weight:600;font-size:.9rem;background:var(--soft);border:1px solid var(--line)}
.msg.error{color:var(--marge)} .msg.success{color:var(--ok)} .msg.info{color:var(--warn)}
.form{display:flex;flex-wrap:wrap;gap:12px}
.form .f{flex:1 1 220px}
.f .aide{font-weight:400;font-size:.78rem;color:var(--muted)}
.f .err{font-weight:600;font-size:.8rem;color:var(--marge)}
.f input[type=checkbox]{width:auto;align-self:flex-start}
.panel.etroit{max-width:620px;margin-inline:auto;width:100%}
.pbtn{width:100%}
.plist form{display:flex}
.pager{display:flex;gap:10px;align-items:center;justify-content:center}
.ticket-page{max-width:380px;margin:0 auto}
@media print{
  .topbar,header.top,.bandeau,.no-print,.messages{display:none!important}
  body{background:#fff;color:#000}
  main{padding:0}
  .ticket{border:0;background:#fff;color:#000;font-size:11px;width:72mm;padding:0}
}

/* ---- Tableau de bord du gérant ---- */
.fiche-gerant h2{font-size:2rem;color:var(--accent);border-bottom:3px solid var(--accent);padding-bottom:4px}
.fiche-gerant dl{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px 18px;margin:0}
.fiche-gerant dt{color:var(--muted);font-weight:600;font-size:.85rem}
.fiche-gerant dd{margin:0;font-weight:600}
.bloc .bande{margin:-16px -16px 0;padding:10px 16px;border-radius:8px 8px 0 0;color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.bloc-detail .bande{background:#0f5396}
.bloc-gros .bande{background:#46808c}
.bloc h3{font-size:.95rem}
tr.cumul td{border-top:2px solid var(--line);border-bottom:0}
.etapes,.roles{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* ---- Design : en-tête blanc, onglets en majuscules, bande bleue, cadres à en-tête gris ---- */
.topbar{background:var(--soft);border-bottom:1px solid var(--line);font-size:.8rem}
.topbar-in{max-width:1180px;margin:0 auto;padding:5px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.topbar a,.topbar .lien{color:var(--muted);text-decoration:none;font:600 .8rem var(--body);background:none;border:0;padding:0;cursor:pointer}
.topbar a:hover,.topbar .lien:hover{color:var(--accent)}
.topbar .who{font-size:.8rem}
header.top{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.08);position:relative;z-index:5}
.top-in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:stretch;justify-content:space-between;gap:12px;min-height:96px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;padding:12px 0}
.logo-rond{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,#4fc3f7,#1a73c9 70%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.2)}
.logo-nom{font:400 1.9rem/1.05 var(--display);color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.logo-nom b{font-weight:800;color:var(--bleu)}
.logo-nom small{display:block;font:600 .72rem var(--body);color:var(--muted);text-transform:none;letter-spacing:0;margin-top:3px}
header.top nav{display:flex;align-items:stretch;overflow-x:auto;min-width:0}
header.top nav a{position:relative;display:flex;align-items:center;padding:0 16px;font:700 .82rem var(--body);text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap;border-left:1px solid var(--line);background:linear-gradient(var(--surface),var(--soft))}
header.top nav a:last-child{border-right:1px solid var(--line)}
header.top nav a:hover,header.top nav a[aria-current="page"]{color:var(--bleu)}
header.top nav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--ink);border-bottom:0}
.bandeau{background:linear-gradient(180deg,var(--bande),var(--bande-fonce));
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),linear-gradient(180deg,var(--bande),var(--bande-fonce))}
.bandeau-in{max-width:1180px;margin:0 auto;padding:22px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap}
.bandeau h1{color:#fff;font:700 1.7rem var(--display);text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.bandeau .fil{margin:0;color:#fff;font-weight:700;font-size:.85rem}
.bandeau .fil a{color:#fff;text-decoration:none}
.bandeau .fil a:hover{text-decoration:underline}
main{padding-block:26px 60px}

/* Cadres : en-tête gris, titre en majuscules */
.panel{border:1px solid var(--line);border-radius:0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.panel>h2:first-child,.panel>.row.between:first-child{margin:-16px -16px 4px;padding:14px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.panel>h2:first-child,.panel>.row.between:first-child>h2{font:700 1.05rem var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.panel>h2:first-child{text-align:center}
.panel.auth>h2:first-child{text-align:center}
h2,h3{font-weight:700}
.tile{border-radius:0;border-color:var(--line);padding:0;overflow:hidden}
.tile span{background:var(--soft);padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted)}
.tile b{padding:10px 12px;margin:0;font-family:var(--display)}

/* Boutons : couleurs franches, coins presque carrés */
.btn{border-radius:2px;font-family:var(--body);font-weight:600;background:var(--bleu);border-color:var(--bleu);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{color:var(--bleu);border-color:var(--bleu);filter:none}
.btn.danger{background:var(--surface);color:var(--marge);border-color:var(--line);box-shadow:none}
.btn.orange,button.btn[value="valider"]{background:var(--orange);border-color:var(--orange)}
.btn.cyan{background:var(--cyan);border-color:var(--cyan)}
input,select{border-radius:2px}
.seg{border-radius:2px}
.seg button[aria-pressed="true"],.seg a[aria-current="true"]{background:var(--bleu);color:#fff}
.msg{border-radius:0}
.pbtn{border-radius:2px}
.bloc .bande{border-radius:0}
.fiche-gerant h2{color:var(--ink)}

@media (max-width:900px){
  .top-in{flex-direction:column;align-items:stretch;min-height:0;padding:0}
  .logo{padding:12px 16px}
  .logo-nom{font-size:1.5rem}
  .logo-rond{width:46px;height:46px}
  .logo-rond svg{width:24px;height:24px}
  header.top nav{border-top:1px solid var(--line)}
  header.top nav a{padding:12px 14px}
  header.top nav a:first-child{border-left:0}
  .bandeau-in{padding:16px}
  .bandeau h1{font-size:1.3rem}
}
.panel.bloc>h2.bande{margin:-16px -16px 4px;color:#fff;text-align:left;border-bottom:0}
.panel.bloc-detail>h2.bande{background:#0f5396}
.panel.bloc-gros>h2.bande{background:#46808c}
.logo-nom{white-space:nowrap}
.auth .f{flex:none}
@media (min-width:901px){
  header.top nav a{padding:0 12px;font-size:.76rem}
}
@media (min-width:901px) and (max-width:1420px){
  .logo-nom{font-size:1.5rem}
  .logo-rond{width:48px;height:48px}
  header.top nav a{padding:0 9px;font-size:.72rem}
}
@media (max-width:600px){
  .fiche-gerant dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .fiche-gerant dd{margin-bottom:8px}
  .logo-nom{white-space:normal}
}

/* ---- Largeur : jusqu'à 1400 px, centré ---- */
main,.topbar-in,.top-in,.bandeau-in{max-width:1400px}
@media (min-width:901px){
  main{padding-inline:24px}
  .topbar-in,.bandeau-in,.top-in{padding-inline:24px}
}

/* ---- Tout le texte visible : le nom passe à la ligne, les onglets descendent en dessous s'il manque de place ---- */
.top-in{flex-wrap:wrap;column-gap:24px}
.logo{flex:1 1 320px;max-width:100%}
.logo-nom{white-space:normal;overflow-wrap:normal;word-break:normal}
header.top nav{flex:0 1 auto;flex-wrap:wrap;overflow:visible;margin-left:auto}
header.top nav a{padding:14px 12px;font-size:.78rem}
@media (min-width:901px) and (max-width:1420px){
  .logo-nom{font-size:1.6rem}
  header.top nav a{padding:14px 10px;font-size:.76rem}
}
@media (max-width:900px){
  header.top nav{margin-left:0;justify-content:flex-start;width:100%}
  header.top nav a{flex:1 1 auto;justify-content:center;border-bottom:1px solid var(--line)}
}
@media (max-width:900px){ .logo{flex:none} }

/* ---- Onglets façon boutons d'appel WhatsApp : ronds avec icône, nom dessous, cadre arrondi ---- */
:root{--rond:#e4e8eb; --rond-ink:#3b4a54; --cadre:#f4f6f7; --rouge:#ea0038}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--rond:#2a3942; --rond-ink:#e9edef; --cadre:#111b21} }
:root[data-theme="dark"]{--rond:#2a3942; --rond-ink:#e9edef; --cadre:#111b21}
header.top nav.appel{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px 4px;
  margin:10px 0 10px auto;padding:10px 12px;background:var(--cadre);border:1px solid var(--line);border-radius:22px;overflow:visible}
header.top nav.appel .touche-form{display:contents}
header.top nav.appel .touche{all:unset;box-sizing:border-box;cursor:pointer;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:2px;text-align:center;color:var(--ink);text-decoration:none}
header.top nav.appel .touche::before{content:none}
.appel .rond{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--rond);color:var(--rond-ink);
  transition:background .15s,color .15s,transform .15s}
.appel .rond.rouge{background:var(--rouge);color:#fff}
.appel .etiquette{font:600 .74rem/1.2 var(--body);text-transform:none;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.appel .touche:hover .rond{transform:scale(1.06)}
.appel .touche:hover .rond:not(.rouge){background:var(--bleu);color:#fff;opacity:.85}
.appel .touche[aria-current="page"] .rond{background:var(--bleu);color:#fff}
.appel .touche[aria-current="page"] .etiquette{color:var(--bleu)}
.appel .touche:focus-visible .rond{outline:2px solid var(--bleu);outline-offset:3px}
@media (max-width:900px){
  header.top nav.appel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;margin:4px 12px 14px;padding:18px 10px;border-radius:28px;width:auto}
  header.top nav.appel .touche{width:auto;border:0}
  .appel .rond{width:60px;height:60px}
  .appel .etiquette{font-size:.82rem}
}

/* ---- Téléphone : le cadre des boutons se replie derrière un bouton « Menu » ---- */
.menu-case{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-bouton{display:none}
@media (max-width:900px){
  .top-in{flex-direction:row;flex-wrap:wrap;align-items:center}
  .logo{flex:1 1 0;min-width:0}
  .menu-bouton{display:flex;flex-direction:column;align-items:center;gap:4px;margin-right:16px;cursor:pointer;color:var(--ink)}
  .menu-bouton .rond{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--rond);color:var(--rond-ink);transition:background .15s}
  .menu-bouton .etiquette{font:600 .72rem var(--body)}
  .menu-case:checked + .menu-bouton .rond{background:var(--bleu);color:#fff}
  .menu-case:focus-visible + .menu-bouton .rond{outline:2px solid var(--bleu);outline-offset:3px}
  header.top nav.appel{display:none;flex:1 1 100%}
  .menu-case:checked ~ nav.appel{display:grid}
  .logo-nom{font-size:1.25rem}
}

/* ---- Page Menu (après la connexion) : grille de boutons ronds façon WhatsApp ---- */
.lanceur{width:100%;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.lanceur-bonjour{margin:0;text-align:center;color:var(--muted);font-weight:600}
nav.lanceur-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:26px 12px;
  padding:30px 22px;background:var(--cadre);border:1px solid var(--line);border-radius:32px}
nav.lanceur-grille .touche-form{display:contents}
nav.lanceur-grille .touche{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;color:var(--ink);text-decoration:none;padding:2px}
nav.lanceur-grille .rond{width:84px;height:84px}
nav.lanceur-grille .rond svg{width:32px;height:32px}
nav.lanceur-grille .etiquette{font-size:.95rem}
@media (max-width:600px){
  .lanceur{gap:10px}
  nav.lanceur-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 6px;padding:22px 8px;border-radius:28px}
  nav.lanceur-grille .rond{width:68px;height:68px}
  nav.lanceur-grille .rond svg{width:26px;height:26px}
  nav.lanceur-grille .etiquette{font-size:.85rem}
}

/* ---- En-tête : le nom de la boutique prend la place des boutons (ordinateur) ---- */
@media (min-width:901px){
  header.top nav.appel{display:none}
  .top-in{justify-content:center;min-height:0;padding-block:18px}
  .logo{flex:0 1 auto;justify-content:center;gap:18px}
  .logo-rond{width:72px;height:72px}
  .logo-rond svg{width:36px;height:36px}
  .logo-nom{font-size:2.6rem;text-align:left}
  .logo-nom small{font-size:.85rem}
}

/* ---- Bande bleue : grand rond avec l'icône de la page, comme la photo d'un appel WhatsApp ---- */
.bandeau-in{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding-block:26px}
.bandeau .photo{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.08) 70%);
  border:4px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bandeau .photo svg{width:58px;height:58px;stroke-width:1.6}
.bandeau h1{font-size:1.6rem}
@media (max-width:600px){
  .bandeau .photo{width:96px;height:96px}
  .bandeau .photo svg{width:44px;height:44px}
  .bandeau h1{font-size:1.25rem}
}

/* ---- Tailles réduites (tout visible sans défiler) et bande bleue arrondie ---- */
@media (min-width:901px){
  .top-in{padding-block:10px}
  .logo{gap:14px}
  .logo-rond{width:54px;height:54px}
  .logo-rond svg{width:28px;height:28px}
  .logo-nom{font-size:1.9rem}
  .logo-nom small{font-size:.78rem}
}
.bandeau{background:none;padding:14px 16px 0}
.bandeau-in{max-width:1400px;margin:0 auto;border-radius:28px;padding:16px 20px;gap:8px;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),linear-gradient(180deg,var(--bande),var(--bande-fonce));
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bandeau .photo{width:84px;height:84px;border-width:3px}
.bandeau .photo svg{width:38px;height:38px}
.bandeau h1{font-size:1.3rem}
main{padding-block:16px 40px;gap:14px}
.lanceur{max-width:760px;gap:10px}
nav.lanceur-grille{gap:16px 10px;padding:18px 16px;border-radius:28px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
nav.lanceur-grille .touche{gap:6px}
nav.lanceur-grille .rond{width:64px;height:64px}
nav.lanceur-grille .rond svg{width:26px;height:26px}
nav.lanceur-grille .etiquette{font-size:.85rem}
@media (max-width:600px){
  .bandeau{padding:10px 10px 0}
  .bandeau-in{border-radius:22px;padding:12px}
  .bandeau .photo{width:68px;height:68px}
  .bandeau .photo svg{width:30px;height:30px}
  .bandeau h1{font-size:1.1rem}
  nav.lanceur-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 4px;padding:16px 6px}
  nav.lanceur-grille .rond{width:58px;height:58px}
  nav.lanceur-grille .rond svg{width:24px;height:24px}
  nav.lanceur-grille .etiquette{font-size:.8rem}
}

/* ---- Style arrondi sur toutes les pages (comme la bande bleue) ---- */
.panel{border-radius:22px;overflow:hidden}
.panel>h2:first-child,.panel>.row.between:first-child,.panel.bloc>h2.bande{border-radius:0}
.tile{border-radius:18px}
.btn{border-radius:999px;padding-inline:18px}
.btn.sm{padding-inline:12px}
input,select{border-radius:12px}
input[type=file]{border-radius:12px}
.seg{border-radius:999px;overflow:hidden}
.pbtn{border-radius:14px}
.msg{border-radius:14px}
.notice,.ticket{border-radius:14px}
.pill{border-radius:999px}
.qty button{border-radius:50%}
.panel.etroit,.panel.auth{border-radius:22px}
@media (max-width:600px){ form.row>input[name=q]{flex:1 1 100%!important} }

/* ---- Caisse : Articles, Prix détail / gros et bouton Vente en cours sur la même barre ---- */
.panel>.row.between.barre-caisse:first-child{justify-content:flex-start;gap:12px 16px}
.barre-caisse .vente-bouton{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.vente-bouton .compteur{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fff;color:#c26a00;font-size:.78rem;font-weight:800}
@media (max-width:600px){ .barre-caisse .vente-bouton{margin-left:0;flex:1 1 100%;justify-content:center} }

/* ---- Utilisateurs et Déconnexion en haut à droite, sur la ligne du nom ---- */
.topbar .compte{gap:14px;align-items:center}
.topbar .mini{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font:600 .8rem var(--body);background:none;border:0;padding:0;cursor:pointer}
.topbar .mini:hover,.topbar .mini[aria-current="page"]{color:var(--bleu)}
.topbar .rond-mini{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--rond);color:var(--rond-ink)}
.topbar .rond-mini svg{width:14px;height:14px}
.topbar .rond-mini.rouge{background:var(--rouge);color:#fff}
.topbar .mini[aria-current="page"] .rond-mini{background:var(--bleu);color:#fff}
.topbar-in{padding-block:6px}

/* ---- Pied de page : liens rapides en texte ---- */
.pied{border-top:1px solid var(--line);background:var(--surface);margin-top:10px}
.pied-in{max-width:1400px;margin:0 auto;padding:16px 24px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;font-size:.85rem;color:var(--muted)}
.pied nav a{color:var(--ink);text-decoration:none;font-weight:600}
.pied nav a:hover{color:var(--bleu);text-decoration:underline}
.pied nav a[aria-current="page"]{color:var(--bleu)}
.pied p{margin:0;font-size:.75rem;color:var(--muted)}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
@media print{ .pied{display:none!important} }

/* ---- Téléphone : même présentation que sur ordinateur ---- */
.vente-bouton .vb-icone{display:none}
.vente-bouton .vb-icone svg{width:18px;height:18px}
@media (max-width:900px){
  .top-in{flex-direction:row;justify-content:center;padding:10px 12px}
  .logo{flex:0 1 auto;justify-content:center}
}
@media (max-width:600px){
  .topbar-in{flex-wrap:nowrap;padding:6px 12px;gap:8px}
  .topbar .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .compte{flex:none;flex-wrap:nowrap;gap:6px}
  .topbar .mini .txt{display:none}
  .topbar .rond-mini{width:30px;height:30px}
  .topbar .rond-mini svg{width:16px;height:16px}
  .logo-nom{font-size:1.25rem;text-align:left}
  .logo-rond{width:44px;height:44px}
  .panel>.row.between.barre-caisse:first-child{flex-wrap:nowrap;gap:8px}
  .barre-caisse h2{font-size:.9rem}
  .barre-caisse .seg button{padding:6px 8px;font-size:.74rem}
  .barre-caisse .vente-bouton{margin-left:auto;flex:none;padding:7px 12px;gap:4px}
  .vente-bouton .vb-icone{display:inline-flex}
  .vente-bouton .txt{display:none}
}
@media (max-width:600px){
  .barre-caisse .seg{flex-wrap:nowrap;flex:none}
  .barre-caisse .seg button{padding:6px 7px;font-size:.7rem;white-space:nowrap}
  .barre-caisse h2{font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .barre-caisse .vente-bouton{padding:7px 10px}
}

/* ---- Caisse sur téléphone : comme sur ordinateur, lisible et sans surcharge ---- */
@media (max-width:600px){
  .panel>.row.between.barre-caisse:first-child{flex-wrap:wrap;gap:10px}
  .barre-caisse h2{order:1;font-size:1rem}
  .barre-caisse .vente-bouton{order:2;margin-left:auto;padding:8px 14px;font-size:.88rem}
  .barre-caisse .vente-bouton .vb-icone{display:none}
  .barre-caisse .vente-bouton .txt{display:inline}
  .barre-caisse .vente-bouton .vb-total{display:none}
  .barre-caisse .seg{order:3;flex:1 1 100%;display:flex}
  .barre-caisse .seg button{flex:1 1 0;padding:9px 6px;font-size:.88rem}
  form.row.caisse-recherche{flex-wrap:nowrap}
  form.row.caisse-recherche>input[name=q]{flex:1 1 0!important;min-width:0}
  form.row.caisse-recherche .btn{flex:none}
  .plist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pbtn{padding:10px;gap:4px;min-height:74px;justify-content:space-between}
  .pbtn b{font-size:.9rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pbtn span{font-size:.8rem}
}

/* ---- Encore plus compact (tout reste visible) ---- */
.bandeau{padding-top:10px}
.bandeau-in{padding:10px 16px;gap:4px}
.bandeau .photo{width:64px;height:64px;border-width:3px}
.bandeau .photo svg{width:30px;height:30px}
.bandeau h1{font-size:1.1rem}
@media (min-width:901px){
  .top-in{padding-block:6px}
  .logo-rond{width:46px;height:46px}
  .logo-rond svg{width:24px;height:24px}
  .logo-nom{font-size:1.6rem}
}
main{padding-block:12px 28px;gap:12px}
.panel{padding:12px;gap:10px}
.panel>h2:first-child,.panel>.row.between:first-child,.panel.bloc>h2.bande{margin:-12px -12px 2px;padding:10px 12px}
.tile b{padding:8px 12px;font-size:1.2rem}
.tile span{padding:6px 12px}
nav.lanceur-grille{padding:14px 12px;gap:12px 8px}
nav.lanceur-grille .rond{width:56px;height:56px}
nav.lanceur-grille .rond svg{width:24px;height:24px}
@media (max-width:600px){
  .topbar-in{padding:4px 10px}
  .topbar .rond-mini{width:28px;height:28px}
  .top-in{padding:6px 10px}
  .logo-rond{width:38px;height:38px}
  .logo-rond svg{width:20px;height:20px}
  .logo-nom{font-size:1.05rem}
  .logo-nom small{font-size:.68rem}
  .bandeau{padding:8px 8px 0}
  .bandeau-in{padding:8px 10px;border-radius:18px}
  .bandeau .photo{width:50px;height:50px;border-width:2px}
  .bandeau .photo svg{width:24px;height:24px}
  .bandeau h1{font-size:.98rem}
  main{padding-inline:8px}
  .panel{padding:10px;border-radius:18px}
  .panel>h2:first-child,.panel>.row.between:first-child{margin:-10px -10px 2px;padding:8px 10px}
  .barre-caisse h2{font-size:.9rem}
  .barre-caisse .vente-bouton{padding:6px 12px;font-size:.8rem}
  .barre-caisse .seg button{padding:7px 6px;font-size:.8rem}
  form.row.caisse-recherche input{padding:7px 10px}
  form.row.caisse-recherche .btn{padding:7px 12px}
  .plist{gap:6px}
  .pbtn{padding:8px;min-height:62px;border-radius:12px}
  .pbtn b{font-size:.82rem}
  .pbtn span{font-size:.74rem}
  nav.lanceur-grille .rond{width:52px;height:52px}
  nav.lanceur-grille .rond svg{width:22px;height:22px}
  nav.lanceur-grille .etiquette{font-size:.76rem}
  .pied-in{padding:10px 10px 12px}
  .pied nav{font-size:.78rem}
}

/* ---- Bordures vertes sur les différentes parties ---- */
:root{--vert:#1fae5b}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--vert:#25d366} }
:root[data-theme="dark"]{--vert:#25d366}
.bandeau-in{border:2px solid var(--vert)}
.panel,.tile,nav.lanceur-grille,.mbox{border:1.5px solid var(--vert)}
.panel>h2:first-child,.panel>.row.between:first-child{border-bottom:1.5px solid var(--vert)}
.tile span{border-bottom:1px solid var(--vert)}
.pbtn{border:1px solid var(--vert)}
.pbtn:disabled{border-color:var(--line)}
input,select{border-color:color-mix(in srgb,var(--vert) 55%,var(--line))}
header.top{border-bottom:1.5px solid var(--vert)}
.topbar{border-bottom:1px solid var(--vert)}
.pied{border-top:1.5px solid var(--vert)}
.appel .rond{box-shadow:0 0 0 1.5px var(--vert)}
.appel .rond.rouge{box-shadow:none}

/* ---- Caisse : chaque carte d'article divisée en deux (nom en haut, prix et stock en bas) ---- */
.plist .pbtn{padding:0;gap:0;overflow:hidden;justify-content:flex-start;min-height:0}
.plist .pbtn .pnom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding:8px 10px;min-height:calc(2 * 1.25em + 16px);line-height:1.25;background:var(--soft);border-bottom:1px solid var(--vert);font-size:.86rem}
.plist .pbtn .pinfo{padding:7px 10px;font-size:.78rem;color:var(--muted)}
.plist .pbtn .pinfo strong{color:var(--ink);font-size:.92rem;font-weight:700}
.plist .pbtn:disabled .pnom{border-bottom-color:var(--line)}
@media (max-width:600px){
  .plist .pbtn{min-height:0}
  .plist .pbtn .pnom{padding:7px 8px;font-size:.8rem}
  .plist .pbtn .pinfo{padding:6px 8px;font-size:.72rem}
  .plist .pbtn .pinfo strong{font-size:.84rem}
}
.plist .pbtn .pnom,.plist .pbtn .pinfo{width:100%;align-self:stretch;box-sizing:border-box}

/* ---- Caisse : cartes plus petites, texte bien lisible ---- */
.plist{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.plist .pbtn .pnom{font-size:.9rem;padding:7px 9px;-webkit-line-clamp:3;min-height:calc(2 * 1.25em + 14px)}
.plist .pbtn .pinfo{padding:6px 9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.plist .pbtn .pinfo strong{font-size:1rem}
.plist .pbtn .pstock{font-size:.78rem}
@media (max-width:600px){
  .plist{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .plist .pbtn .pnom{font-size:.8rem;line-height:1.2;padding:6px 7px;-webkit-line-clamp:3;min-height:calc(3 * 1.2em + 12px)}
  .plist .pbtn .pinfo{padding:5px 7px;flex-direction:column;align-items:flex-start;gap:1px}
  .plist .pbtn .psep{display:none}
  .plist .pbtn .pinfo strong{font-size:.9rem}
  .plist .pbtn .pstock{font-size:.72rem}
}
.plist .pbtn .pinfo{flex-direction:column;align-items:flex-start;gap:1px}
.plist .pbtn .psep{display:none}
.plist .pbtn{height:100%}
.plist .pbtn .pnom{flex:1 0 auto}
.plist .pbtn .pinfo{flex:none}

/* ---- Produits et stock façon Wave : ronds pastel, puis liste claire nom / prix ---- */
.panel.wave{gap:14px}
.actions-rondes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 8px;padding:4px 0 6px}
.actions-rondes a{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--ink);font-weight:600;font-size:.82rem;line-height:1.2}
.actions-rondes .pastel{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;transition:transform .15s}
.actions-rondes .pastel svg{width:28px;height:28px;stroke-width:2.2}
.actions-rondes a:hover .pastel{transform:scale(1.06)}
.actions-rondes a[aria-current="true"] .pastel{box-shadow:0 0 0 3px var(--vert)}
.pastel.vert{background:#dcf7e4;color:#1a9a4b} .pastel.bleu{background:#dcefff;color:#1673d1}
.pastel.violet{background:#ece3ff;color:#7a3fe0} .pastel.orange{background:#ffe9d6;color:#d4660b} .pastel.gris{background:#ececf0;color:#5d5d6b}
.liste-wave{list-style:none;margin:0 -12px;padding:0;border-top:6px solid var(--soft)}
.liste-wave .ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line)}
.liste-wave a.ligne:hover{background:var(--soft)}
.liste-wave .gauche,.liste-wave .droite{display:flex;flex-direction:column;gap:2px;min-width:0}
.liste-wave .droite{align-items:flex-end;flex:none;text-align:right}
.liste-wave b{font-size:1rem;font-weight:700;color:#232090}
.liste-wave .droite b{color:#232090}
.liste-wave small{font-size:.8rem;color:var(--muted)}
.liste-wave .gauche b{overflow-wrap:anywhere}
.etat-rupture{color:var(--marge);font-weight:700} .etat-faible{color:var(--warn);font-weight:700}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .liste-wave b{color:#b9b6ff} }
:root[data-theme="dark"] .liste-wave b{color:#b9b6ff}
@media (max-width:600px){
  .actions-rondes{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 4px}
  .actions-rondes .pastel{width:52px;height:52px}
  .actions-rondes .pastel svg{width:24px;height:24px}
  .actions-rondes a{font-size:.72rem}
  .liste-wave{margin:0 -10px}
  .liste-wave .ligne{padding:11px 12px}
  .liste-wave b{font-size:.92rem}
  .liste-wave small{font-size:.74rem}
}
.actions-rondes{grid-template-columns:repeat(auto-fill,minmax(84px,96px));justify-content:start}
@media (max-width:600px){
  .actions-rondes{grid-template-columns:repeat(5,minmax(0,1fr));justify-content:stretch}
  .actions-rondes .pastel{width:50px;height:50px}
}

/* ---- Tableau de bord sur téléphone : les grands cadres deviennent des cases comme « Ventes du jour » ---- */
.tiles-tel{display:none}
.tile small{display:block;padding:0 12px 8px;margin-top:-4px;font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.tile{text-decoration:none;color:inherit}
@media (max-width:600px){
  .tiles-tel{display:grid}
  .cols-accueil{display:none}
}

/* =====================================================================
   MODÈLE 2 · NUIT PRO — fond bleu nuit, cartes à bordure discrète,
   vert émeraude pour l'essentiel, police Manrope.
   Colonne d'icônes à gauche sur ordinateur, barre en bas sur téléphone.
   ===================================================================== */
:root:root:root{
  --bg:#0d1520; --surface:#151f2c; --ink:#e8eef6; --muted:#93a3b8; --line:#233044; --soft:#1b2738;
  --accent:#2bd47d; --accent-ink:#0d1520; --marge:#ff8a8a; --ok:#2bd47d; --warn:#ffb763;
  --bleu:#2bd47d; --vert:#263449; --orange:#f5b942; --rouge:#ff4d5e;
  --rond:#1b2738; --rond-ink:#e8eef6; --cadre:#111b27; --bande:#151f2c; --bande-fonce:#151f2c;
  --display:"Manrope",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
body.nuit{background:var(--bg);color:var(--ink);font-family:var(--body)}
.nuit h1,.nuit h2,.nuit h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em}

/* En-tête : compact, aligné à gauche comme le modèle */
.nuit .topbar{background:var(--bg);border-bottom:1px solid var(--line)}
.nuit header.top{background:var(--bg);border-bottom:0;box-shadow:none}
.nuit .top-in{justify-content:flex-start;padding:14px 24px 4px}
.nuit .logo-rond{border-radius:16px;background:var(--accent);color:var(--accent-ink);box-shadow:none}
.nuit .logo-nom{font-family:var(--display);font-weight:800;text-transform:none;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink)}
.nuit .logo-nom b{color:var(--accent);font-weight:800}
.nuit .logo-nom small{color:var(--muted);font-weight:600}
.nuit .topbar .rond-mini{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.nuit .topbar .rond-mini.rouge{background:#4a2328;color:#ff8a8a;border-color:#5a2c32}

/* Titre de la page : carte sombre avec l'icône dans un carré vert doux */
.nuit .bandeau{background:none;padding:10px 24px 0}
.nuit .bandeau-in{background:var(--surface);background-image:none;border:1px solid var(--line);border-radius:22px;box-shadow:none;
  flex-direction:row;justify-content:flex-start;gap:14px;padding:14px 18px;max-width:1400px}
.nuit .bandeau .photo{width:52px;height:52px;border-radius:16px;border:0;background:#16352a;color:var(--accent);box-shadow:none}
.nuit .bandeau .photo svg{width:26px;height:26px;stroke-width:2}
.nuit .bandeau h1{color:var(--ink);text-transform:none;text-shadow:none;font-size:1.35rem;font-weight:800}
.nuit main{padding-inline:24px}

/* Cartes, cases de chiffres, cadres */
.nuit .panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:none}
.nuit .panel>h2:first-child,.nuit .panel>.row.between:first-child{background:transparent;border-bottom:1px solid var(--line)}
.nuit .panel>h2:first-child,.nuit .panel>.row.between:first-child>h2{text-transform:none;font-size:1.02rem;letter-spacing:0;color:var(--ink)}
.nuit .panel>h2:first-child{text-align:left}
.nuit .tile{background:var(--surface);border:1px solid var(--line);border-radius:20px}
.nuit .tile span{background:transparent;border-bottom:0;text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:600;color:var(--muted);padding:14px 16px 0}
.nuit .tile b{font-size:1.55rem;font-weight:800;padding:4px 16px 14px;letter-spacing:-.02em}
.nuit .tile small{padding:0 16px 12px}
.nuit .tile.neg{background:#2a1b1f;border-color:#4a2a30}
.nuit .tile.neg span{color:#e0b3b8}
.nuit .tile.neg b{color:#ff8a8a}
.nuit .tile.pos b{color:var(--accent)}

/* Boutons et champs */
.nuit .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);border-radius:14px;font-weight:800;box-shadow:none}
.nuit .btn.ghost{background:var(--soft);border-color:var(--line);color:var(--ink)}
.nuit .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.nuit .btn.danger{background:#2a1b1f;border-color:#4a2a30;color:#ff8a8a}
.nuit .btn.orange,.nuit button.btn[value="valider"]{background:var(--orange);border-color:var(--orange);color:#1a1300}
.nuit .vente-bouton .compteur{background:#1a1300;color:var(--orange)}
.nuit input,.nuit select{background:var(--surface);border:1px solid #263449;border-radius:14px;color:var(--ink)}
.nuit input:focus-visible,.nuit select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nuit .seg{background:var(--soft);border:1px solid var(--line);border-radius:14px}
.nuit .seg button,.nuit .seg a{background:transparent;color:var(--muted)}
.nuit .seg button[aria-pressed="true"],.nuit .seg a[aria-current="true"]{background:var(--accent);color:var(--accent-ink)}
.nuit .msg{background:var(--surface);border-color:var(--line);border-radius:14px}
.nuit .pill{background:var(--soft)}
.nuit th{color:var(--muted)}
.nuit td,.nuit th{border-bottom-color:#1d2939}
.nuit .chart i{background:#22324a;opacity:1;border-radius:5px}
.nuit .chart i:last-child{background:var(--accent)}

/* Menu : carrés arrondis de couleurs douces, comme le modèle */
.nuit nav.lanceur-grille{background:transparent;border:0;padding:6px 0}
.nuit .lanceur-bonjour{color:var(--muted)}
.nuit .appel .rond{border-radius:20px;box-shadow:none}
.nuit .appel .touche:nth-child(8n+1) .rond{background:#16352a;color:#5fe39d}
.nuit .appel .touche:nth-child(8n+2) .rond{background:#1a2b45;color:#6fb6ff}
.nuit .appel .touche:nth-child(8n+3) .rond{background:#2d2340;color:#c3a3ff}
.nuit .appel .touche:nth-child(8n+4) .rond{background:#3a2a1a;color:#ffb763}
.nuit .appel .touche:nth-child(8n+5) .rond{background:#15333a;color:#5fd4e3}
.nuit .appel .touche:nth-child(8n+6) .rond{background:#3a1f30;color:#ff8fc7}
.nuit .appel .touche:nth-child(8n+7) .rond{background:#35301a;color:#f5d76e}
.nuit .appel .touche:nth-child(8n+8) .rond{background:#232c3a;color:#b8c4d6}
.nuit .appel .touche:hover .rond:not(.rouge){transform:scale(1.05);opacity:1}
.nuit .appel .etiquette{color:#dbe4ef;font-weight:700}

/* Caisse et produits */
.nuit .pbtn{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.nuit .plist .pbtn .pnom{background:var(--soft);border-bottom:1px solid var(--line)}
.nuit .plist .pbtn .pinfo strong{color:var(--accent)}
.nuit .pbtn:disabled{opacity:.4}
.nuit .liste-wave{border-top-color:var(--soft)}
.nuit .liste-wave b,.nuit .liste-wave .droite b{color:var(--ink)}
.nuit .liste-wave .droite b{color:var(--accent)}
.nuit .liste-wave .ligne{border-bottom-color:#1d2939}
.nuit .actions-rondes .pastel{border-radius:20px}
.nuit .pastel.vert{background:#16352a;color:#5fe39d} .nuit .pastel.bleu{background:#1a2b45;color:#6fb6ff}
.nuit .pastel.violet{background:#2d2340;color:#c3a3ff} .nuit .pastel.orange{background:#3a2a1a;color:#ffb763} .nuit .pastel.gris{background:#232c3a;color:#b8c4d6}
.nuit .actions-rondes a[aria-current="true"] .pastel{box-shadow:0 0 0 2px var(--accent)}
.nuit .actions-rondes a{color:#dbe4ef}

/* Pied de page */
.nuit .pied{background:var(--bg);border-top:1px solid var(--line)}
.nuit .pied nav a{color:#dbe4ef}
.nuit .pied nav a[aria-current="page"]{color:var(--accent)}

/* Colonne d'icônes à gauche (ordinateur) */
.rail,.barre-bas{display:none}
@media (min-width:901px){
  body.nuit.connecte{padding-left:92px}
  .nuit .rail{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;left:0;top:0;bottom:0;width:92px;
    padding:18px 0;box-sizing:border-box;background:#111b27;border-right:1px solid #1f2b3b;z-index:20;overflow-y:auto}
  .nuit .rail a{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--muted);flex:none}
  .nuit .rail a:hover{background:var(--soft);color:var(--ink)}
  .nuit .rail a[aria-current="page"]{background:#16352a;color:var(--accent)}
  .nuit .rail .rail-logo{background:var(--accent);color:var(--accent-ink);margin-bottom:12px}
  .nuit .rail .rail-logo:hover{background:var(--accent);color:var(--accent-ink)}
}

/* Barre en bas (téléphone, façon Android) */
@media (max-width:600px){
  body.nuit.connecte{padding-bottom:76px}
  .nuit .barre-bas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;position:fixed;left:0;right:0;bottom:0;
    height:72px;padding-bottom:env(safe-area-inset-bottom,0px);background:#121c28;border-top:1px solid #1f2b3b;z-index:20}
  .nuit .barre-bas a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:700}
  .nuit .barre-bas .pilule{width:58px;height:30px;border-radius:99px;display:grid;place-items:center}
  .nuit .barre-bas .pilule svg{width:20px;height:20px}
  .nuit .barre-bas a[aria-current="page"]{color:var(--ink)}
  .nuit .barre-bas a[aria-current="page"] .pilule{background:#16352a;color:var(--accent)}
  .nuit .top-in{padding:10px 12px 2px}
  .nuit .logo-nom{font-size:1.1rem}
  .nuit .bandeau{padding:8px 8px 0}
  .nuit .bandeau-in{padding:10px 12px;border-radius:18px}
  .nuit .bandeau .photo{width:42px;height:42px;border-radius:13px}
  .nuit .bandeau .photo svg{width:22px;height:22px}
  .nuit .bandeau h1{font-size:1.1rem}
  .nuit main{padding-inline:8px}
  .nuit .tile b{font-size:1.25rem}
}
@media print{ .rail,.barre-bas{display:none!important} body.nuit{padding:0!important;background:#fff;color:#000} }
@media (min-width:901px){ .nuit .rail .rail-logo[aria-current="page"]{box-shadow:0 0 0 3px #16352a} }

/* =====================================================================
   MODÈLE 6 · ANDROID NATIF (Material Design de Google)
   Fond clair teinté, couleur principale bleu-vert, cartes très arrondies,
   police Figtree. Colonne de navigation Google sur ordinateur,
   barre Android et bouton flottant « Nouvelle vente » sur téléphone.
   ===================================================================== */
:root:root:root:root{
  --bg:#f4fbfa; --surface:#ffffff; --ink:#161d1d; --muted:#3f4948; --line:#dbe4e3; --soft:#e3eceb;
  --accent:#006a6a; --accent-ink:#ffffff; --marge:#ba1a1a; --ok:#006a6a; --warn:#8b5000;
  --bleu:#006a6a; --vert:#dbe4e3; --orange:#006a6a; --rouge:#ba1a1a;
  --conteneur:#cce8e7; --sur-conteneur:#00201f; --contour:#6f7979;
  --rond:#e3eceb; --rond-ink:#161d1d; --cadre:#ffffff; --bande:#f4fbfa; --bande-fonce:#f4fbfa;
  --display:"Figtree",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
  color-scheme:light;
}
body.m3{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px}
.m3 h1,.m3 h2,.m3 h3{font-family:var(--display);letter-spacing:0}

/* Barre du compte et en-tête : discrets, comme une application Google */
.m3 .topbar{background:var(--bg);border-bottom:0}
.m3 .topbar .who{color:var(--muted);font-weight:600}
.m3 .topbar .mini{color:var(--muted)}
.m3 .topbar .rond-mini{background:var(--soft);color:var(--ink);border:0}
.m3 .topbar .rond-mini.rouge{background:#ffdad6;color:#410002}
.m3 .topbar .mini:hover .rond-mini,.m3 .topbar .mini[aria-current="page"] .rond-mini{background:var(--conteneur);color:var(--sur-conteneur)}
.m3 header.top{background:var(--bg);border-bottom:0;box-shadow:none}
.m3 .top-in{justify-content:flex-start;padding:6px 24px 0}
.m3 .logo{gap:12px}
.m3 .logo-rond{width:40px;height:40px;border-radius:50%;background:var(--conteneur);color:var(--sur-conteneur);box-shadow:none}
.m3 .logo-rond svg{width:20px;height:20px}
.m3 .logo-nom{font-family:var(--body);text-transform:none;font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}
.m3 .logo-nom b{color:var(--muted);font-weight:700}
.m3 .logo-nom small{display:none}

/* Titre de page : grand titre, sans cadre (« Tableau de bord ») */
.m3 .bandeau{background:none;padding:2px 24px 0}
.m3 .bandeau-in{background:none;border:0;box-shadow:none;padding:6px 0 4px;justify-content:flex-start;flex-direction:row;max-width:1400px}
.m3 .bandeau .photo{display:none}
.m3 .bandeau h1{color:var(--ink);text-transform:none;text-shadow:none;font-size:2rem;font-weight:500;letter-spacing:-.01em}
.m3 main{padding-inline:24px;padding-top:10px}

/* Cartes */
.m3 .panel{background:var(--surface);border:0;border-radius:28px;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:16px}
.m3 .panel>h2:first-child,.m3 .panel>.row.between:first-child{background:transparent;border-bottom:0;margin:-16px -16px 0;padding:16px 16px 6px}
.m3 .panel>h2:first-child,.m3 .panel>.row.between:first-child>h2{text-transform:none;letter-spacing:0;font-size:1.12rem;font-weight:600;color:var(--ink);text-align:left}
.m3 .tile{background:var(--soft);border:0;border-radius:24px}
.m3 .tile span{background:transparent;border:0;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;color:var(--muted);padding:16px 18px 0}
.m3 .tile b{font-size:1.6rem;font-weight:600;padding:4px 18px 16px;letter-spacing:-.01em}
.m3 .tile small{padding:0 18px 14px;color:var(--muted)}
.m3 .tile.neg{background:#ffdad6}
.m3 .tile.neg span,.m3 .tile.neg b,.m3 .tile.neg small{color:#410002}
.m3 .tile.pos b{color:var(--accent)}
.m3[data-section="accueil"] main>.tiles:first-of-type>.tile:first-child{background:var(--accent)}
.m3[data-section="accueil"] main>.tiles:first-of-type>.tile:first-child span,
.m3[data-section="accueil"] main>.tiles:first-of-type>.tile:first-child b{color:#fff}

/* Boutons (pilules Material) et champs */
.m3 .btn{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:99px;font-weight:600;box-shadow:none;padding:10px 22px}
.m3 .btn.sm{padding:6px 14px}
.m3 .btn:hover{filter:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.m3 .btn.ghost{background:transparent;border-color:var(--contour);color:var(--accent)}
.m3 .btn.ghost:hover{background:#e6f2f1;box-shadow:none}
.m3 .btn.danger{background:transparent;border-color:var(--contour);color:var(--marge)}
.m3 .btn.orange,.m3 button.btn[value="valider"]{background:var(--accent);border-color:var(--accent);color:#fff}
.m3 .vente-bouton{background:var(--conteneur)!important;border-color:var(--conteneur)!important;color:var(--sur-conteneur)!important;border-radius:16px!important}
.m3 .vente-bouton .compteur{background:var(--accent);color:#fff}
.m3 input,.m3 select{background:var(--surface);border:1px solid var(--contour);border-radius:12px;color:var(--ink)}
.m3 input:focus-visible,.m3 select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.m3 input[name=q]{background:var(--soft);border:0;border-radius:99px;padding-inline:20px;min-height:48px}
.m3 .seg{background:transparent;border:1px solid var(--contour);border-radius:99px}
.m3 .seg button,.m3 .seg a{background:transparent;color:var(--ink);font-weight:600}
.m3 .seg button[aria-pressed="true"],.m3 .seg a[aria-current="true"]{background:var(--conteneur);color:var(--sur-conteneur)}
.m3 .msg{background:var(--surface);border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.m3 .pill{background:var(--soft);color:var(--ink)}
.m3 .pill.bad{background:#ffdad6;color:#410002} .m3 .pill.low{background:#ffdcc2;color:#2e1500} .m3 .pill.good{background:var(--conteneur);color:var(--sur-conteneur)}
.m3 th{color:var(--muted);text-transform:none;letter-spacing:0;font-size:.8rem}
.m3 td,.m3 th{border-bottom-color:#e3eceb}
.m3 .chart i{background:#b0cccb;opacity:1;border-radius:99px 99px 6px 6px}
.m3 .chart i:last-child{background:var(--accent)}

/* Menu : icônes dans des conteneurs de couleur douce */
.m3 nav.lanceur-grille{background:var(--surface);border:0;border-radius:28px;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:20px 12px}
.m3 .lanceur-bonjour{color:var(--muted)}
.m3 .appel .rond{border-radius:16px;box-shadow:none}
.m3 .appel .touche:nth-child(8n+1) .rond{background:#cce8e7;color:#00201f}
.m3 .appel .touche:nth-child(8n+2) .rond{background:#d6e3ff;color:#001b3e}
.m3 .appel .touche:nth-child(8n+3) .rond{background:#e8ddff;color:#21005d}
.m3 .appel .touche:nth-child(8n+4) .rond{background:#ffdcc2;color:#2e1500}
.m3 .appel .touche:nth-child(8n+5) .rond{background:#c9e7ff;color:#001e2f}
.m3 .appel .touche:nth-child(8n+6) .rond{background:#ffd8e4;color:#3e001d}
.m3 .appel .touche:nth-child(8n+7) .rond{background:#f1e2a8;color:#221b00}
.m3 .appel .touche:nth-child(8n+8) .rond{background:#e3eceb;color:#161d1d}
.m3 .appel .etiquette{color:var(--ink);font-weight:600}

/* Caisse et produits */
.m3 .pbtn{background:var(--surface);border:1px solid #dbe4e3;border-radius:16px}
.m3 .pbtn:hover{border-color:var(--accent)}
.m3 .plist .pbtn .pnom{background:transparent;border-bottom:1px solid #e3eceb;color:var(--ink)}
.m3 .plist .pbtn .pinfo strong{color:var(--accent)}
.m3 .pbtn:disabled{opacity:.45}
.m3 .liste-wave{border-top:0}
.m3 .liste-wave b,.m3 .liste-wave .droite b{color:var(--ink);font-weight:600}
.m3 .liste-wave .ligne{border-bottom-color:#e3eceb;border-radius:0}
.m3 .liste-wave a.ligne:hover{background:#eef5f4}
.m3 .actions-rondes .pastel{border-radius:16px}
.m3 .pastel.vert{background:#cce8e7;color:#00201f} .m3 .pastel.bleu{background:#d6e3ff;color:#001b3e}
.m3 .pastel.violet{background:#e8ddff;color:#21005d} .m3 .pastel.orange{background:#ffdcc2;color:#2e1500} .m3 .pastel.gris{background:#e3eceb;color:#161d1d}
.m3 .actions-rondes a[aria-current="true"] .pastel{box-shadow:0 0 0 2px var(--accent)}
.m3 .actions-rondes a{color:var(--ink)}
.m3 .bloc .bande{border-radius:0}

/* Colonne de navigation Google (ordinateur) */
.fab-vente{display:none}
@media (min-width:901px){
  body.m3.connecte{padding-left:100px}
  .m3 .rail{display:flex;flex-direction:column;align-items:center;gap:12px;position:fixed;left:0;top:0;bottom:0;width:100px;
    padding:18px 0;box-sizing:border-box;background:var(--bg);z-index:20;overflow-y:auto}
  .m3 .rail a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:.74rem;font-weight:500;flex:none;width:92px;text-align:center}
  .m3 .rail .rail-pilule{width:56px;height:32px;border-radius:99px;display:grid;place-items:center;transition:background .15s}
  .m3 .rail .rail-pilule svg{width:22px;height:22px}
  .m3 .rail a:hover .rail-pilule{background:#e3eceb}
  .m3 .rail a[aria-current="page"]{color:var(--ink);font-weight:700}
  .m3 .rail a[aria-current="page"] .rail-pilule{background:var(--conteneur);color:var(--sur-conteneur)}
  .m3 .rail .rail-fab{width:56px;height:56px;border-radius:16px;background:var(--conteneur);color:var(--sur-conteneur);display:grid;place-items:center;margin-bottom:14px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
}

/* Barre Android et bouton flottant (téléphone) */
@media (max-width:600px){
  body.m3.connecte{padding-bottom:84px}
  .m3 .barre-bas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;position:fixed;left:0;right:0;bottom:0;
    height:80px;padding-bottom:env(safe-area-inset-bottom,0px);background:#e9f0ef;border-top:0;z-index:20}
  .m3 .barre-bas a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:.75rem;font-weight:500}
  .m3 .barre-bas .pilule{width:64px;height:32px;border-radius:99px;display:grid;place-items:center}
  .m3 .barre-bas .pilule svg{width:22px;height:22px}
  .m3 .barre-bas a[aria-current="page"]{color:var(--ink);font-weight:700}
  .m3 .barre-bas a[aria-current="page"] .pilule{background:var(--conteneur);color:var(--sur-conteneur)}
  .m3 .fab-vente{display:flex;align-items:center;gap:10px;position:fixed;right:16px;bottom:96px;z-index:21;height:56px;padding:0 20px;border-radius:16px;
    background:var(--conteneur);color:var(--sur-conteneur);text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:0 4px 10px rgba(0,0,0,.18)}
  .m3 .fab-vente svg{width:22px;height:22px}
  .m3 .top-in{padding:4px 12px 0}
  .m3 .bandeau{padding:0 12px}
  .m3 .bandeau h1{font-size:1.65rem}
  .m3 main{padding-inline:12px}
  .m3 .tile b{font-size:1.3rem}
  .m3 .tile span{padding:14px 14px 0}
  .m3 .tile b{padding:4px 14px 14px}
  .m3 .panel{border-radius:24px;padding:12px}
  .m3 .panel>h2:first-child,.m3 .panel>.row.between:first-child{margin:-12px -12px 0;padding:14px 14px 6px}
  main{padding-bottom:90px}
}
@media print{ .fab-vente{display:none!important} body.m3{padding:0!important;background:#fff} }

/* =====================================================================
   MODÈLE 7 · ANDROID NATIF SOMBRE — le modèle 6 en version nuit
   (mêmes formes, couleurs sombres Material).
   ===================================================================== */
:root:root:root:root:root{
  --bg:#0e1514; --surface:#161d1c; --ink:#dde4e3; --muted:#bec9c8; --line:#2a3332; --soft:#1f2726;
  --accent:#4cdada; --accent-ink:#003737; --marge:#ffb4ab; --ok:#4cdada; --warn:#ffb77c;
  --bleu:#4cdada; --vert:#2a3332; --orange:#4cdada; --rouge:#ffb4ab;
  --conteneur:#004f4f; --sur-conteneur:#6ff7f6; --contour:#889392;
  --rond:#1f2726; --rond-ink:#dde4e3; --cadre:#161d1c; --bande:#0e1514; --bande-fonce:#0e1514;
  color-scheme:dark;
}
.m3.sombre .topbar .rond-mini.rouge{background:#93000a;color:#ffdad6}
.m3.sombre .panel{box-shadow:none}
.m3.sombre .tile.neg{background:#93000a}
.m3.sombre .tile.neg span,.m3.sombre .tile.neg b,.m3.sombre .tile.neg small{color:#ffdad6}
.m3.sombre[data-section="accueil"] main>.tiles:first-of-type>.tile:first-child span,
.m3.sombre[data-section="accueil"] main>.tiles:first-of-type>.tile:first-child b{color:#003737}
.m3.sombre .btn{color:var(--accent-ink)}
.m3.sombre .btn.ghost{color:var(--accent);background:transparent}
.m3.sombre .btn.ghost:hover{background:#1c2b2a}
.m3.sombre .btn.orange,.m3.sombre button.btn[value="valider"]{color:var(--accent-ink)}
.m3.sombre .vente-bouton .compteur{color:var(--accent-ink)}
.m3.sombre .msg{box-shadow:none;background:var(--soft)}
.m3.sombre .pill.bad{background:#93000a;color:#ffdad6} .m3.sombre .pill.low{background:#6a3b11;color:#ffdcc2} .m3.sombre .pill.good{background:#004f4f;color:#6ff7f6}
.m3.sombre td,.m3.sombre th{border-bottom-color:#253030}
.m3.sombre .chart i{background:#2e3b3a}
.m3.sombre .chart i:last-child{background:var(--accent)}
.m3.sombre nav.lanceur-grille{box-shadow:none}
.m3.sombre .appel .touche:nth-child(8n+1) .rond{background:#004f4f;color:#6ff7f6}
.m3.sombre .appel .touche:nth-child(8n+2) .rond{background:#284777;color:#d6e3ff}
.m3.sombre .appel .touche:nth-child(8n+3) .rond{background:#4f378b;color:#e8ddff}
.m3.sombre .appel .touche:nth-child(8n+4) .rond{background:#6a3b11;color:#ffdcc2}
.m3.sombre .appel .touche:nth-child(8n+5) .rond{background:#004c6b;color:#c9e7ff}
.m3.sombre .appel .touche:nth-child(8n+6) .rond{background:#7b2949;color:#ffd8e4}
.m3.sombre .appel .touche:nth-child(8n+7) .rond{background:#544600;color:#f1e2a8}
.m3.sombre .appel .touche:nth-child(8n+8) .rond{background:#2a3332;color:#dde4e3}
.m3.sombre .pbtn{border-color:#2a3332}
.m3.sombre .plist .pbtn .pnom{border-bottom-color:#2a3332}
.m3.sombre .liste-wave .ligne{border-bottom-color:#253030}
.m3.sombre .liste-wave a.ligne:hover{background:#1c2423}
.m3.sombre .pastel.vert{background:#004f4f;color:#6ff7f6} .m3.sombre .pastel.bleu{background:#284777;color:#d6e3ff}
.m3.sombre .pastel.violet{background:#4f378b;color:#e8ddff} .m3.sombre .pastel.orange{background:#6a3b11;color:#ffdcc2} .m3.sombre .pastel.gris{background:#2a3332;color:#dde4e3}
@media (min-width:901px){
  .m3.sombre .rail a:hover .rail-pilule{background:#1f2726}
  .m3.sombre .rail .rail-fab{box-shadow:0 2px 6px rgba(0,0,0,.4)}
}
@media (max-width:600px){
  .m3.sombre .barre-bas{background:#161d1c}
  .m3.sombre .fab-vente{box-shadow:0 4px 10px rgba(0,0,0,.45)}
}
body.m3 .liste-wave .gauche b,body.m3 .liste-wave .droite b{color:var(--ink)}

/* ---- Rideau : couvre l'écran après 5 secondes sans toucher l'application ---- */
.rideau{position:fixed;inset:0;z-index:100;display:grid;place-items:center;cursor:pointer;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 22px,rgba(0,0,0,.18) 22px 46px),linear-gradient(180deg,#0b3b3b,#0e1514 70%);
  color:#dde4e3;transform:translateY(-100%);visibility:hidden;
  transition:transform .7s cubic-bezier(.65,0,.35,1),visibility 0s linear .7s}
.rideau.ferme{transform:translateY(0);visibility:visible;transition:transform .7s cubic-bezier(.65,0,.35,1),visibility 0s}
.rideau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(180deg,#4cdada,#1f8f8f)}
.rideau-contenu{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px}
.rideau-logo{width:72px;height:72px;border-radius:22px;background:#004f4f;color:#6ff7f6;display:grid;place-items:center}
.rideau-logo svg{width:34px;height:34px}
.rideau strong{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:.01em}
.rideau-heure{font-size:3.2rem;font-weight:600;letter-spacing:-.02em;color:#ffffff}
.rideau-aide{font-size:.95rem;color:#bec9c8;padding:10px 18px;border-radius:99px;background:rgba(255,255,255,.08)}
.rideau:focus-visible{outline:3px solid #4cdada;outline-offset:-6px}
@media (prefers-reduced-motion:reduce){ .rideau,.rideau.ferme{transition:none} }
@media print{ .rideau{display:none!important} }

/* ---- Catégories : puces de filtre et titres de groupes ---- */
.puces{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.puces::-webkit-scrollbar{display:none}
.puces a{flex:none;padding:7px 14px;border-radius:8px;border:1px solid var(--contour,var(--line));color:var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;white-space:nowrap}
.puces a[aria-current="true"]{background:var(--conteneur,var(--soft));color:var(--sur-conteneur,var(--ink));border-color:transparent}
.groupe{margin:10px 2px 0;font-size:.95rem;font-weight:700;color:var(--accent)}
.groupe .muted{font-weight:500}
.f.case>span:first-child{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.f.case input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.m3.sombre .btn.danger{background:transparent;color:#ffb4ab;border-color:#889392}

/* ---- Bouton « + » des catégories et zone du script Google Sheets ---- */
.puces{align-items:center;flex-wrap:wrap;overflow:visible}
.ajout-cat{position:relative;flex:none}
.ajout-cat summary{list-style:none;cursor:pointer;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  font-size:1.3rem;font-weight:700;background:var(--conteneur,var(--soft));color:var(--sur-conteneur,var(--ink))}
.ajout-cat summary::-webkit-details-marker{display:none}
.ajout-cat[open] summary{background:var(--accent);color:var(--accent-ink)}
.ajout-cat form{position:absolute;z-index:10;top:44px;left:0;min-width:260px;padding:10px;border-radius:16px;background:var(--surface);
  box-shadow:0 6px 20px rgba(0,0,0,.35);flex-wrap:nowrap}
.ajout-cat input{flex:1;min-width:0}
@media (max-width:600px){ .ajout-cat form{left:auto;right:0} }
textarea.code{font:12px/1.45 var(--mono);width:100%;box-sizing:border-box;background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px;resize:vertical}

/* =====================================================================
   DESIGN « PRO » — fond clair bleuté, menu bleu marine à gauche,
   cartes de couleur, graphiques et tableaux (modèle fourni par le client).
   ===================================================================== */
:root:root:root:root:root:root{
  --bg:#f3f6fb; --surface:#ffffff; --ink:#0f1f3d; --muted:#5b6b86; --line:#e3e8f1; --soft:#f1f4fa;
  --accent:#1d6fe8; --accent-ink:#ffffff; --marge:#dc2626; --ok:#16a34a; --warn:#d97706;
  --bleu:#1d6fe8; --vert:#e3e8f1; --orange:#f59e0b; --rouge:#dc2626; --marine:#0b2545;
  --conteneur:#e6efff; --sur-conteneur:#1d4ed8; --contour:#cbd5e1;
  --rond:#f1f4fa; --rond-ink:#0f1f3d; --cadre:#ffffff; --bande:#f3f6fb; --bande-fonce:#f3f6fb;
  --display:"Plus Jakarta Sans",system-ui,sans-serif; --body:"Plus Jakarta Sans",system-ui,sans-serif;
  color-scheme:light;
}
body.pro{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px}
.pro h1,.pro h2,.pro h3{font-family:var(--display);color:var(--ink);letter-spacing:-.01em}
.pro .muted{color:var(--muted)}
.pro a{color:var(--accent)}

/* Barre du haut : recherche, cloche, profil */
.pro .topbar{background:transparent;border:0}
.pro .topbar-in{max-width:none;padding:14px 24px 0;gap:14px;flex-wrap:nowrap}
.pro .recherche{flex:1 1 420px;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:0 14px;height:44px;color:var(--muted);box-shadow:0 1px 2px rgba(15,31,61,.05)}
.pro .recherche svg{width:18px;height:18px;flex:none}
.pro .recherche input{border:0;outline:0;background:transparent;flex:1;min-width:0;padding:0;font:inherit;color:var(--ink);min-height:0}
.pro .topbar .who{display:none}
.pro .topbar .compte{margin-left:auto;gap:10px;flex-wrap:nowrap}
.pro .topbar .mini .txt{display:none}
.pro .topbar .rond-mini{width:38px;height:38px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.pro .topbar .rond-mini svg{width:17px;height:17px}
.pro .topbar .rond-mini.rouge{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.pro .topbar .mini[aria-current="page"] .rond-mini{background:var(--conteneur);color:var(--sur-conteneur)}
.pro .cloche{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--surface);border:1px solid var(--line)}
.pro .cloche svg{width:18px;height:18px}
.pro .pastille{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}
.pro .profil{display:flex;align-items:center;gap:10px;padding-left:6px}
.pro .avatar{width:38px;height:38px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-weight:800}
.pro .profil-txt{display:flex;flex-direction:column;line-height:1.15}
.pro .profil-txt b{font-size:.9rem;color:var(--ink)} .pro .profil-txt small{font-size:.75rem;color:var(--muted)}

/* En-tête (logo) : seulement sur téléphone et tablette ; titre de page avec la date */
.pro header.top{background:transparent;border:0;box-shadow:none}
.pro .bandeau{background:none;padding:14px 24px 0}
.pro .bandeau-in{background:none;border:0;box-shadow:none;padding:0;max-width:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px}
.pro .bandeau .photo{display:grid;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--accent);box-shadow:none}
.pro .bandeau .photo svg{width:26px;height:26px;stroke-width:2.2}
.pro .bandeau h1{font-size:1.45rem;font-weight:800;text-transform:none;text-shadow:none;color:var(--ink)}
.pro .bandeau-date{margin-left:auto;font-weight:700;font-size:.85rem;color:var(--ink)}
.pro main{max-width:none;padding:16px 24px 32px;gap:16px}

/* Cartes et cadres */
.pro .panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(15,31,61,.06);padding:16px;gap:12px;overflow:visible}
.pro .panel>h2:first-child,.pro .panel>.row.between:first-child{background:transparent;border:0;margin:0;padding:0}
.pro .panel>h2:first-child,.pro .panel>.row.between:first-child>h2{font-size:1.05rem;font-weight:800;text-transform:none;letter-spacing:-.01em;text-align:left;color:var(--ink)}
.pro .panel h2 .muted{font-weight:500;font-size:.9rem}
.pro .tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(15,31,61,.06)}
.pro .tile span{background:transparent;border:0;text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:600;color:var(--muted);padding:14px 16px 0}
.pro .tile b{font-size:1.4rem;font-weight:800;padding:4px 16px 14px;color:var(--ink)}
.pro .tile small{padding:0 16px 12px}
.pro .tile.neg{background:#fef2f2;border-color:#fecaca} .pro .tile.neg b,.pro .tile.neg span{color:#b91c1c}
.pro .tile.pos b{color:var(--ok)}
.pro .lien-voir{font-size:.85rem;font-weight:700;text-decoration:none}

/* Boutons, champs, filtres */
.pro .btn{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:10px;font-weight:700;box-shadow:none;padding:10px 18px}
.pro .btn:hover{filter:brightness(1.06)}
.pro .btn.sm{padding:6px 12px}
.pro .btn.vert{background:#16a34a;border-color:#16a34a}
.pro .btn.ghost{background:var(--surface);border-color:var(--contour);color:var(--ink)}
.pro .btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.pro .btn.danger{background:var(--surface);border-color:#fecaca;color:#b91c1c}
.pro .btn.orange,.pro button.btn[value="valider"]{background:#16a34a;border-color:#16a34a;color:#fff}
.pro .vente-bouton{background:#f59e0b!important;border-color:#f59e0b!important;color:#fff!important}
.pro .vente-bouton .compteur{background:#fff;color:#b45309}
.pro input,.pro select,.pro textarea{background:var(--surface);border:1px solid var(--contour);border-radius:10px;color:var(--ink)}
.pro input:focus-visible,.pro select:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.pro .seg{background:var(--soft);border:1px solid var(--line);border-radius:10px}
.pro .seg button,.pro .seg a{background:transparent;color:var(--muted);font-weight:700}
.pro .seg button[aria-pressed="true"],.pro .seg a[aria-current="true"]{background:var(--accent);color:#fff}
.pro .msg{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pro .msg.success{color:#15803d;background:#f0fdf4;border-color:#bbf7d0} .pro .msg.error{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.pro .pill{background:var(--soft);color:var(--ink)}
.pro .pill.bad{background:#fee2e2;color:#b91c1c} .pro .pill.low{background:#ffedd5;color:#c2410c} .pro .pill.good{background:#dcfce7;color:#15803d}
.pro th{color:var(--muted);background:#f8fafc;text-transform:none;letter-spacing:0;font-size:.78rem;font-weight:700}
.pro td,.pro th{border-bottom-color:#edf1f7}
.pro .puces a{border-color:var(--contour);color:var(--ink)}
.pro .puces a[aria-current="true"]{background:var(--accent);color:#fff}
.pro .chart i{background:#93c5fd;opacity:1}
.pro .chart i:last-child{background:var(--accent)}

/* Tableau de bord : cartes de couleur */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;color:#fff!important;text-decoration:none;box-shadow:0 4px 14px rgba(15,31,61,.12);transition:transform .15s}
.kpi:hover{transform:translateY(-2px)}
.kpi.vert{background:linear-gradient(135deg,#22a35a,#16a34a)} .kpi.bleu{background:linear-gradient(135deg,#3b82f6,#1d6fe8)}
.kpi.orange{background:linear-gradient(135deg,#fb923c,#f97316)} .kpi.violet{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.kpi-icone{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.kpi-icone svg{width:28px;height:28px}
.kpi-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-txt>span{font-size:.85rem;font-weight:600;opacity:.95}
.kpi-txt b{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.kpi-txt small{font-size:.75rem;opacity:.9}
.grille-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.grille-3{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
@media (max-width:1200px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .grille-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:900px){ .grille-2,.grille-3{grid-template-columns:minmax(0,1fr)} }

/* Graphique des ventes (30 jours) */
.graphe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:stretch}
.axe-y{display:flex;flex-direction:column;justify-content:space-between;height:210px;font-size:.7rem;color:var(--muted);text-align:right;transform:translateY(-6px)}
.zone{display:flex;flex-direction:column;gap:6px;min-width:0}
.barres{height:210px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,transparent 0 calc(25% - 1px),#edf1f7 calc(25% - 1px) 25%)}
.barres i{flex:1;min-height:2px;background:#5b9bf5;border-radius:3px 3px 0 0}
.barres i.auj{background:#1d4ed8}
.axe-x{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;font-size:.64rem;color:var(--muted)}
.axe-x span{white-space:nowrap;overflow:visible}

/* Répartition par catégorie (anneau) */
.donut-bloc{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.donut{width:190px;height:190px;border-radius:50%;position:relative;flex:none}
.donut-trou{position:absolute;inset:34px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78rem;color:var(--muted)}
.donut-trou b{font-size:1.4rem;color:var(--ink);font-weight:800}
.legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:170px;flex:1}
.legende li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;font-size:.88rem}
.legende i{width:14px;height:14px;border-radius:4px}
.legende b{font-weight:700}

/* Tableaux du tableau de bord */
.tableau-pro td{padding:10px}
.tableau-pro td small{display:block;color:var(--muted);font-size:.74rem}
.qte{font-weight:800;color:#15803d} .qte.faible{color:#c2410c} .qte.rupture{color:#b91c1c}
.type-op{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.82rem}
.type-op::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.type-op.vente,.type-op.paiement{color:#15803d} .type-op.achat{color:#dc2626} .type-op.depense{color:#ea580c}
b.plus{color:#15803d} b.moins{color:#dc2626} b.attention{color:#ea580c}
.situation{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.situation li{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #edf1f7;font-weight:600}
.situation li:last-child{border-bottom:0}
.situation small{color:var(--muted);font-weight:500}
.situation b{white-space:nowrap}
.si{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.si svg{width:20px;height:20px}
.si.vert{background:#dcfce7;color:#15803d} .si.rouge{background:#fee2e2;color:#dc2626} .si.orange{background:#ffedd5;color:#ea580c}

/* Comment fonctionne l'application (schéma) */
.flux{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.etape{flex:1 1 180px;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink)!important;min-width:0}
.etape:hover{border-color:var(--accent)}
.etape b{display:block;font-size:.95rem} .etape small{display:block;color:var(--muted);font-size:.78rem}
.ei{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--conteneur);color:var(--sur-conteneur)}
.ei svg{width:24px;height:24px}
.fleche{color:var(--sur-conteneur);font-size:1.4rem;font-weight:800}
.etape-double{flex:1 1 220px;display:flex;flex-direction:column;gap:8px;min-width:0}
@media (max-width:900px){ .flux{flex-direction:column;align-items:stretch} .fleche{transform:rotate(90deg);text-align:center} }

/* Fonctionnalités, simulateur, avantages */
.fonctions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fonctions a{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)!important}
.fonctions a:hover{border-color:var(--accent)}
.fonctions b{font-size:.88rem} .fonctions small{color:var(--muted);font-size:.74rem;line-height:1.3}
.fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--conteneur);color:var(--sur-conteneur);margin-bottom:4px}
.fi svg{width:19px;height:19px}
.sim-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sim-grille .sim-large{grid-column:1/-1}
.sim-grille .f{flex:none}
.sim-resultats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sim-resultats li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0}
.sim-resultats li:nth-child(2){background:#eff6ff;border-color:#bfdbfe}
.sim-resultats span{font-size:.78rem;color:var(--muted);font-weight:600}
.sim-resultats b{font-size:1.05rem;color:#15803d} .sim-resultats li:nth-child(2) b{color:#1d4ed8}
.sim-resultats b.moins{color:#dc2626}
.sim-resultats small{font-size:.72rem;color:var(--muted)}
.avantages{background:#f0fdf4!important;border-color:#bbf7d0!important}
.avantages ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.avantages li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:.9rem}
.avantages li svg{flex:none;width:20px;height:20px;color:#16a34a}
.avantages .devise{margin:6px 0 0;font-style:italic;font-weight:700;color:var(--marine);font-size:1.05rem}

/* Autres pages : listes, cartes de la caisse, boutons ronds */
.pro .liste-wave .gauche b,.pro .liste-wave .droite b{color:var(--ink)}
.pro .liste-wave .droite b{color:var(--accent)}
.pro .liste-wave .ligne{border-bottom-color:#edf1f7}
.pro .liste-wave a.ligne:hover{background:#f8fafc}
.pro .groupe{color:var(--accent)}
.pro .pbtn{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pro .pbtn:hover{border-color:var(--accent)}
.pro .plist .pbtn .pnom{background:#f8fafc;border-bottom:1px solid var(--line);color:var(--ink)}
.pro .plist .pbtn .pinfo strong{color:var(--accent)}
.pro .actions-rondes .pastel{border-radius:14px}
.pro .pastel.vert{background:#dcfce7;color:#15803d} .pro .pastel.bleu{background:#dbeafe;color:#1d4ed8}
.pro .pastel.violet{background:#ede9fe;color:#6d28d9} .pro .pastel.orange{background:#ffedd5;color:#c2410c} .pro .pastel.gris{background:#f1f4fa;color:#334155}
.pro .actions-rondes a{color:var(--ink)}
.pro .actions-rondes a[aria-current="true"] .pastel{box-shadow:0 0 0 2px var(--accent)}
.pro nav.lanceur-grille{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(15,31,61,.06)}
.pro .appel .rond{border-radius:14px;box-shadow:none}
.pro .appel .touche:nth-child(8n+1) .rond{background:#dbeafe;color:#1d4ed8}
.pro .appel .touche:nth-child(8n+2) .rond{background:#dcfce7;color:#15803d}
.pro .appel .touche:nth-child(8n+3) .rond{background:#ffedd5;color:#c2410c}
.pro .appel .touche:nth-child(8n+4) .rond{background:#ede9fe;color:#6d28d9}
.pro .appel .touche:nth-child(8n+5) .rond{background:#cffafe;color:#0e7490}
.pro .appel .touche:nth-child(8n+6) .rond{background:#fee2e2;color:#b91c1c}
.pro .appel .touche:nth-child(8n+7) .rond{background:#fef9c3;color:#a16207}
.pro .appel .touche:nth-child(8n+8) .rond{background:#f1f4fa;color:#334155}
.pro .appel .etiquette{color:var(--ink)}
.pro .bloc .bande{border-radius:0}
.pro .fiche-gerant h2{color:var(--ink)}
.pro .rideau{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 22px,rgba(0,0,0,.16) 22px 46px),linear-gradient(180deg,#123a6b,#0b2545 70%)}
.pro .rideau::after{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.pro .rideau-logo{background:#1d6fe8;color:#fff}
.pro .fab-vente,.pro .rail .rail-fab{display:none!important}

/* Menu bleu marine à gauche (ordinateur) */
@media (min-width:901px){
  body.pro.connecte{padding-left:232px}
  .pro header.top{display:none}
  .pro .rail{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:fixed;left:0;top:0;bottom:0;width:232px;padding:18px 12px;
    box-sizing:border-box;background:linear-gradient(180deg,#0d2f57,#0b2545);z-index:20;overflow-y:auto}
  .pro .rail .rail-marque{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;text-decoration:none}
  .pro .marque-icone{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(34,197,94,.15);color:#22c55e;display:grid;place-items:center}
  .pro .marque-icone svg{width:26px;height:26px;stroke-width:2.4}
  .pro .marque-nom{color:#fff;font-weight:800;font-size:.95rem;line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
  .pro .rail a:not(.rail-marque){flex-direction:row;justify-content:flex-start;gap:12px;width:auto;padding:10px 12px;border-radius:10px;color:#c7d2e6;font-size:.9rem;font-weight:600;text-align:left}
  .pro .rail .rail-pilule{width:22px;height:22px;background:transparent!important;color:inherit!important}
  .pro .rail .rail-pilule svg{width:20px;height:20px}
  .pro .rail a:not(.rail-marque):hover{background:rgba(255,255,255,.08);color:#fff}
  .pro .rail a[aria-current="page"]{background:#1d6fe8;color:#fff;font-weight:700}
}

/* Téléphone et tablette : en-tête avec logo, barre de navigation en bas */
@media (max-width:900px){
  body.pro.connecte{padding-bottom:78px}
  .pro header.top{display:block}
  .pro .top-in{justify-content:flex-start;padding:10px 14px 0}
  .pro .logo-rond{width:40px;height:40px;border-radius:12px;background:var(--marine);color:#22c55e;box-shadow:none}
  .pro .logo-nom{font-family:var(--display);text-transform:uppercase;font-size:1rem;font-weight:800;color:var(--ink)}
  .pro .logo-nom b{color:var(--ink)} .pro .logo-nom small{display:none}
  .pro .recherche{display:none}
  .pro .topbar-in{padding:8px 14px 0}
  .pro .profil-txt{display:none}
  .pro .bandeau{padding:10px 14px 0}
  .pro .bandeau h1{font-size:1.2rem}
  .pro .bandeau-date{font-size:.75rem;font-weight:600;color:var(--muted)}
  .pro main{padding:12px 12px 24px}
  .pro .barre-bas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;position:fixed;left:0;right:0;bottom:0;height:70px;
    padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--line);z-index:20;box-shadow:0 -2px 10px rgba(15,31,61,.06)}
  .pro .barre-bas a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:600}
  .pro .barre-bas .pilule{width:56px;height:30px;border-radius:99px;display:grid;place-items:center}
  .pro .barre-bas .pilule svg{width:21px;height:21px}
  .pro .barre-bas a[aria-current="page"]{color:var(--accent);font-weight:800}
  .pro .barre-bas a[aria-current="page"] .pilule{background:var(--conteneur)}
  .kpi{padding:14px} .kpi-icone{width:44px;height:44px} .kpi-txt b{font-size:1.2rem}
}
@media (max-width:600px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .fonctions,.sim-grille,.sim-resultats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .axe-x span{font-size:.55rem}
  .pro .topbar .rond-mini,.pro .cloche,.pro .avatar{width:34px;height:34px}
}
@media print{ .pro .topbar,.pro .rail,.pro .barre-bas{display:none!important} body.pro{padding:0!important;background:#fff} }
.pro .rail a{text-decoration:none}
.etape-double .etape{flex:none}
@media (max-width:900px){ .flux .etape,.flux .etape-double{flex:none} }
.tableau-pro.ops td,.tableau-pro.ops th{padding:9px 6px;font-size:.84rem}
.tableau-pro.ops td:first-child{white-space:nowrap;color:var(--muted)}

/* ---- Cartes de couleur plus petites, contenu séparé par des traits fins ---- */
.kpis{grid-template-columns:repeat(4,minmax(0,250px));gap:12px}
.kpi{flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(15,31,61,.12)}
.kpi-haut{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.78rem;font-weight:700;letter-spacing:.01em}
.kpi .kpi-icone{width:26px;height:26px;border-radius:8px}
.kpi .kpi-icone svg{width:15px;height:15px}
.kpi-valeur{display:block;padding:7px 12px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28)}
.kpi-bas{display:block;padding:6px 12px 8px;font-size:.7rem;opacity:.92;line-height:1.3}
@media (max-width:1200px){ .kpis{grid-template-columns:repeat(2,minmax(0,250px))} }
@media (max-width:600px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi-haut{padding:7px 10px;font-size:.72rem}
  .kpi-valeur{padding:6px 10px;font-size:1rem}
  .kpi-bas{padding:5px 10px 7px;font-size:.66rem}
}

/* ---- Tableau de bord sur un seul écran : compact, lisible, souple ---- */
.pro[data-section="accueil"] main{gap:12px;padding-top:10px}
.pro[data-section="accueil"] .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.db-ligne{display:grid;gap:12px;align-items:stretch}
.db-ligne.trois{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.db-ligne.deux{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.db-ligne .panel{padding:12px 14px;gap:8px;min-width:0}
.db-ligne .panel>h2:first-child,.db-ligne .panel>.row.between:first-child>h2{font-size:.95rem}
.db-ligne .panel h2 .muted{font-size:.8rem}
.db-ligne .row.between .muted.num{font-size:.75rem}
.db-graphe .axe-y,.db-graphe .barres{height:150px}
.db-graphe .axe-y{font-size:.62rem}
.db-donut .donut-bloc{gap:14px;flex-wrap:nowrap;justify-content:flex-start}
.db-donut .donut{width:130px;height:130px}
.db-donut .donut-trou{inset:24px;font-size:.66rem}
.db-donut .donut-trou b{font-size:1.05rem}
.db-donut .legende{gap:6px;min-width:0}
.db-donut .legende li{font-size:.78rem;gap:7px;grid-template-columns:11px minmax(0,1fr) auto}
.db-donut .legende li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-donut .legende i{width:11px;height:11px}
.db-situ .situation li{padding:7px 0;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;font-size:.84rem}
.db-situ .si{width:30px;height:30px;border-radius:8px}
.db-situ .si svg{width:16px;height:16px}
.db-ligne .tableau-pro td,.db-ligne .tableau-pro th{padding:6px 7px;font-size:.8rem}
.db-ligne .tableau-pro td small{font-size:.68rem}
.db-ligne .tableau-pro td b{font-weight:700}
.db-ligne .btn{padding:7px 14px;font-size:.84rem}
.outils{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.outils>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 16px;font-weight:800}
.outils>summary::-webkit-details-marker{display:none}
.outils>summary::before{content:"▸";color:var(--accent);transition:transform .2s;display:inline-block}
.outils[open]>summary::before{transform:rotate(90deg)}
.outils>summary small{font-weight:500;color:var(--muted);font-size:.8rem}
.outils-contenu{display:flex;flex-direction:column;gap:12px;padding:0 12px 12px}
@media (min-width:901px){
  body.pro.connecte{padding-left:214px}
  .pro .rail{width:214px;padding:14px 10px}
  .pro .rail a:not(.rail-marque){padding:8px 12px;font-size:.86rem}
  .pro .rail .rail-marque{padding:4px 6px 16px}
  .pro .marque-nom{font-size:.85rem}
}
@media (max-width:1300px){ .db-ligne.trois{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .db-graphe{grid-column:1/-1} }
@media (max-width:900px){
  .db-ligne.trois,.db-ligne.deux{grid-template-columns:minmax(0,1fr)}
  .pro[data-section="accueil"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-donut .donut-bloc{flex-wrap:wrap;justify-content:center}
}
.db-graphe .axe-y,.db-graphe .barres{height:120px}
.db-situ .situation li{padding:5px 0}
.db-ligne .tableau-pro td.nom-court{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-ligne .tableau-pro td{padding-top:5px;padding-bottom:5px}
.db-ligne .row.between .row{gap:10px;flex-wrap:nowrap}