/* Couleurs de la marque Koh Tao (kohtao.ca) : vert forêt #212D1C, bordeaux #3F0B1E / #6A163B,
   crème #E6E1D3, olive #778751, sauge #9DB68D, rose #CC3366.
   Couleurs des graphiques tirées de la marque et validées pour le daltonisme, en clair et en sombre. */
:root {
  color-scheme: light;
  --vert: #212d1c; --vert-2: #2e3d27; --bordeaux: #3f0b1e; --bordeaux-2: #6a163b; --creme: #e6e1d3; --olive: #778751; --sauge: #9db68d; --rose: #cc3366;
  --page: #f3efe4;
  --surface: #fffdf8;
  --surface-2: #f3eee2;
  --encre: #1c2418;
  --encre-2: #4d5446;
  --discret: #77786a;
  --trait: #e8e2d3;
  --axe: #d2cbb8;
  --anneau: rgba(33, 45, 28, 0.09);
  --or: #8a6a1f;
  --or-fond: #f6eedb;
  --saisie-fond: #fbf6e9;
  --saisie-bord: #dccfae;
  --cote: #212d1c;
  --cote-encre: #e6e1d3;
  --cote-discret: #a7ab96;
  --s1: #4a7c2f; --s2: #c98500; --s3: #a3245a; --s4: #2a6fb0;
  --seq-1: #edf0e1; --seq-2: #d3ddbc; --seq-3: #adc08c; --seq-4: #849c5f; --seq-5: #58733c; --seq-6: #2f4522;
  --bon: #0ca30c; --bon-texte: #2f6a1d; --avert: #e0a100; --serieux: #ec835a; --critique: #c42b4d;
  --hausse: #2f6a1d; --baisse: #b0234f;
  --ombre: 0 1px 2px rgba(33, 45, 28, 0.05), 0 10px 30px -12px rgba(33, 45, 28, 0.18);
  --rayon: 16px;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0e130c; --surface: #172014; --surface-2: #1f2a1b; --encre: #ece7da; --encre-2: #c6c2b1; --discret: #8f927e;
    --trait: #26311f; --axe: #36432e; --anneau: rgba(230, 225, 211, 0.08); --or: #d9b45a; --or-fond: #2a2414;
    --saisie-fond: #1d2618; --saisie-bord: #4a5a3c; --cote: #0b0f09; --cote-discret: #8f937f;
    --s1: #3d7834; --s2: #c4870f; --s3: #c24c86; --s4: #3f86c4;
    --seq-1: #1f2a1b; --seq-2: #2c4224; --seq-3: #3f5f30; --seq-4: #5d8045; --seq-5: #8eae6c; --seq-6: #cfe0aa;
    --bon-texte: #7fc96a; --hausse: #8fd17a; --baisse: #f07a9b;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e130c; --surface: #172014; --surface-2: #1f2a1b; --encre: #ece7da; --encre-2: #c6c2b1; --discret: #8f927e;
  --trait: #26311f; --axe: #36432e; --anneau: rgba(230, 225, 211, 0.08); --or: #d9b45a; --or-fond: #2a2414;
  --saisie-fond: #1d2618; --saisie-bord: #4a5a3c; --cote: #0b0f09; --cote-discret: #8f937f;
  --s1: #3d7834; --s2: #c4870f; --s3: #c24c86; --s4: #3f86c4;
  --seq-1: #1f2a1b; --seq-2: #2c4224; --seq-3: #3f5f30; --seq-4: #5d8045; --seq-5: #8eae6c; --seq-6: #cfe0aa;
  --bon-texte: #7fc96a; --hausse: #8fd17a; --baisse: #f07a9b;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--page); color: var(--encre); }
body { font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.discret { color: var(--discret); }
.nombre, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- Mise en page ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.cote { background: var(--cote) radial-gradient(120% 60% at 0% 100%, rgba(119, 135, 81, 0.18), transparent 60%); color: var(--cote-encre); padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.marque { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; padding: 4px 12px 14px; border-bottom: 1px solid rgba(230, 225, 211, 0.12); }
.marque img { width: 132px; height: auto; display: block; }
.marque .lieu { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sauge); font-weight: 600; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--cote-discret); font-weight: 500; position: relative; }
#nav a svg { width: 18px; height: 18px; flex: none; }
#nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--cote-encre); }
#nav a.actif { background: rgba(230, 225, 211, 0.1); color: var(--creme); }
#nav a.actif::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sauge); }
#nav .groupe { margin: 16px 12px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: #7d8370; font-weight: 600; }
.cote-bas { margin-top: auto; padding: 0 8px; }
.lien-discret { background: none; border: 0; color: var(--cote-discret); cursor: pointer; padding: 6px 0; display: flex; gap: 8px; align-items: center; }
.lien-discret:hover { color: var(--cote-encre); }
.lien-discret svg { width: 18px; height: 18px; flex: none; }

.principal { min-width: 0; }
.bandeau-demo { background: color-mix(in srgb, var(--sauge) 22%, var(--surface)); color: var(--encre); border-bottom: 1px solid var(--trait); padding: 8px 28px; font-size: 13px; }
.haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 24px 28px 8px; flex-wrap: wrap; }
.haut h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.haut .surtitre { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--olive); font-weight: 700; margin-bottom: 2px; }
.haut p { margin: 2px 0 0; }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.segments { display: inline-flex; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 3px; }
.segments button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--encre-2); font-weight: 500; white-space: nowrap; }
.segments button:hover { background: var(--surface-2); }
.segments button[aria-pressed="true"] { background: var(--vert); color: var(--creme); }
:root[data-theme="dark"] .segments button[aria-pressed="true"] { background: var(--creme); color: var(--vert); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .segments button[aria-pressed="true"] { background: var(--creme); color: var(--vert); } }
main { padding: 16px 28px 48px; outline: none; }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.carte { background: var(--surface); border: 1px solid var(--anneau); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); min-width: 0; }
.carte h2 { font-size: 15px; margin: 0 0 2px; font-weight: 700; letter-spacing: 0.005em; }
.carte .entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.carte .entete p { margin: 0; color: var(--discret); font-size: 12.5px; }
.graphe { position: relative; height: 280px; }
.graphe.bas { height: 220px; }

/* Héros */
.heros { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; }
.heros .principal-chiffre { background: radial-gradient(90% 80% at 100% 0%, rgba(204, 51, 102, 0.28), transparent 60%), linear-gradient(140deg, #3f0b1e 0%, #5a1232 55%, #6a163b 100%); color: var(--creme); border: 0; position: relative; overflow: hidden; padding-bottom: 104px; }
.heros .principal-chiffre::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: radial-gradient(circle at 12px 14px, var(--page) 10px, transparent 10.5px) 0 0 / 24px 12px repeat-x; }
.heros .principal-chiffre .etiquette { color: #d9c3c9; letter-spacing: 0.04em; }
.heros .principal-chiffre .valeur { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 4px; }
.heros .principal-chiffre .delta.hausse { color: #bfe3a4; }
.heros .principal-chiffre .delta .discret { color: #d9c3c9; }
.heros .principal-chiffre .delta.baisse { color: #ffb8cb; }
.heros .principal-chiffre svg.etincelle { position: absolute; right: 0; bottom: 8px; width: 100%; height: 84px; }
.heros .principal-chiffre .details { display: flex; gap: 18px; margin-top: 14px; position: relative; flex-wrap: wrap; }
.heros .principal-chiffre .details div { font-size: 12px; color: #d9c3c9; }
.heros .principal-chiffre .details strong { display: block; color: #fff6ea; font-size: 16px; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tuile .etiquette, .etiquette { font-size: 12.5px; color: var(--discret); font-weight: 500; }
.tuile .valeur { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 2px; }
.tuile { position: relative; overflow: hidden; }
.tuile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--olive); opacity: 0.55; }
.delta { font-size: 12.5px; font-weight: 600; }
.delta.hausse { color: var(--hausse); } .delta.baisse { color: var(--baisse); } .delta.neutre { color: var(--discret); }
.delta .discret { font-weight: 400; }
.jauge { height: 8px; background: var(--surface-2); border-radius: 4px; position: relative; margin-top: 10px; }
.jauge span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 70%, var(--surface)), var(--s1)); }
.jauge i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--encre); border-radius: 1px; }
.jauge.depasse span { background: linear-gradient(90deg, color-mix(in srgb, var(--rose) 60%, var(--surface)), var(--rose)); }

/* Statuts */
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); white-space: nowrap; }
.statut svg { width: 13px; height: 13px; }
.statut.bon { color: var(--bon-texte); } .statut.bon svg { color: var(--bon); }
.statut.avertissement svg { color: var(--avert); } .statut.serieux svg { color: var(--serieux); } .statut.critique svg { color: var(--critique); }
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 330px; overflow: auto; }
.alertes li a { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 6px; border-radius: 8px; text-decoration: none; }
.alertes li a:hover { background: var(--surface-2); }
.alertes svg { width: 16px; height: 16px; margin-top: 2px; }
.alertes .avertissement svg { color: var(--avert); } .alertes .serieux svg { color: var(--serieux); } .alertes .critique svg { color: var(--critique); }
.alertes small { display: block; color: var(--discret); }

/* Connexion */
body.hors-session .app { display: none; }
.connexion { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); background: var(--page); z-index: 30; }
.connexion[hidden] { display: none; }
.connexion-photo { position: relative; overflow: hidden; background: var(--vert); }
.connexion-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.connexion-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(33, 45, 28, 0.9) 0%, rgba(33, 45, 28, 0.45) 45%, rgba(63, 11, 30, 0.55) 100%); }
.connexion-marque { position: absolute; left: 48px; top: 44px; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.connexion-marque span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.connexion-panneau { display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.connexion-carte { width: min(400px, 100%); }
.connexion-carte h1 { font-size: 30px; margin: 0 0 6px; }
.connexion-carte .formulaire { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.connexion-carte input { padding: 11px 12px; font-size: 15px; width: 100%; background: var(--surface); border: 1px solid var(--axe); border-radius: 10px; }
.connexion-carte input.code { font-size: 26px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.connexion-erreur { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--critique) 12%, var(--surface)); color: var(--critique); font-weight: 600; font-size: 13.5px; }
.bouton.large { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.petit { font-size: 12.5px; }
.lien { background: none; border: 0; padding: 0; margin-top: 10px; color: var(--olive); font-weight: 600; cursor: pointer; text-decoration: underline; }
.codes-secours { columns: 2; padding-left: 22px; margin: 18px 0; font-size: 15px; line-height: 2; }
.codes-secours code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.05em; }
.moi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(230, 225, 211, 0.12); margin-bottom: 4px; }
.moi strong { display: block; color: var(--creme); font-size: 13px; }
.moi small { color: var(--cote-discret); font-size: 11.5px; }
.moi:empty { display: none; }
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.carte td .bouton { padding: 6px 10px; }
td.sans-coupure { white-space: nowrap; }
.case { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.case[hidden] { display: none; }
.champ[hidden] { display: none; }

/* Bandeau d'accueil avec photo du restaurant */
.bienvenue { position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 220px; background: var(--vert); color: var(--creme); margin-bottom: 16px; display: flex; align-items: center; box-shadow: var(--ombre); }
.bienvenue img { position: absolute; right: 0; top: 0; height: 100%; width: 70%; object-fit: cover; }
.bienvenue::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #212d1c 30%, rgba(33, 45, 28, 0.88) 44%, rgba(33, 45, 28, 0.25) 72%, rgba(33, 45, 28, 0.05) 100%); }
.bienvenue::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; z-index: 2; background: radial-gradient(circle at 12px 14px, var(--page) 10px, transparent 10.5px) 0 0 / 24px 12px repeat-x; }
.bienvenue .texte { position: relative; z-index: 2; padding: 26px 32px 34px; max-width: 620px; }
.bienvenue .surtitre-clair { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.bienvenue h2 { font-size: 38px; margin: 6px 0 2px; font-weight: 700; letter-spacing: -0.01em; color: #fff8ec; }
.bienvenue p { margin: 0 0 16px; color: #d6d2c2; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.pastille { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(230, 225, 211, 0.1); border: 1px solid rgba(230, 225, 211, 0.22); font-size: 13px; color: var(--creme); text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
a.pastille:hover { background: rgba(230, 225, 211, 0.2); }
.pastille strong { color: #fff8ec; }
.pastille i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--creme); flex: none; }
.pastille i.fait { background: var(--sauge); border-color: var(--sauge); }
.pastille i.actif { background: #f2c14e; border-color: #f2c14e; box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.6); animation: battement 1.8s infinite; }
.pastille i.info { background: var(--creme); }
@keyframes battement { 70% { box-shadow: 0 0 0 7px rgba(242, 193, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } }
@media (prefers-reduced-motion: reduce) { .pastille i.actif { animation: none; } }

/* Photo de plat dans la barre de côté */
.photo-cote { margin: 0 0 12px; height: 132px; border-radius: 12px; overflow: hidden; position: relative; }
.photo-cote img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.photo-cote:hover img { transform: scale(1.05); }
.photo-cote span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; font-weight: 600; color: var(--creme); background: linear-gradient(transparent, rgba(11, 15, 9, 0.85)); }
.photo-cote:empty { display: none; }

/* Analyse quotidienne */
.frais-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.frais-grille label { font-size: 11.5px; }
textarea { font: inherit; color: inherit; background: var(--saisie-fond); border: 1px solid var(--saisie-bord); border-radius: 8px; padding: 8px 10px; width: 100%; resize: vertical; }
textarea:disabled, input:disabled { opacity: 0.75; }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; font-size: 13px; }
.historique small { display: block; color: var(--discret); }
tr.cliquable { cursor: pointer; }
tr.sans-ventes td { color: var(--discret); }
.chaleur.sept { grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.segments .perso { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; }
.segments .perso input { padding: 4px 6px; font-size: 13px; }
#a-resultat tfoot td { font-size: 15px; }

/* Employés : postes et taux */
td.postes { white-space: normal; }
.poste { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sauge) 22%, var(--surface)); font-size: 12.5px; white-space: nowrap; }
.poste.ancien { background: var(--surface-2); color: var(--discret); }

.postes-edition td, .postes-edition th { padding: 4px; }
.postes-edition input[type="text"] { width: 100%; }
dialog { width: min(560px, calc(100vw - 32px)); }

/* Journée complète mise en évidence */
.carte.journee { border: 2px solid color-mix(in srgb, var(--vert) 70%, transparent); box-shadow: 0 10px 30px -14px rgba(33, 45, 28, 0.35); }
.carte.journee h2 { font-size: 17px; font-weight: 800; }
.carte.journee input.saisie { font-weight: 700; font-size: 15px; }
td.fort, th.fort { font-weight: 750; }

/* Anneau des pourboires */
.anneau { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center; }
.anneau.empile { grid-template-columns: 1fr; gap: 16px; }
.anneau.empile .graphe { height: 170px; }
.colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anneau .graphe { height: 190px; }
.anneau .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.anneau .centre strong { font-size: 22px; font-weight: 700; }
.anneau .centre span { font-size: 11px; color: var(--discret); }
.anneau ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anneau li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: baseline; font-size: 13px; }
.anneau li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.anneau li small { display: block; color: var(--discret); font-size: 11.5px; }

/* Carte de chaleur */
.chaleur { display: grid; grid-template-columns: 54px repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.chaleur .cell { height: 50px; border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s; display: flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; cursor: default; }
.chaleur .cell:not(.vide):hover { transform: scale(1.06); box-shadow: 0 6px 18px -6px rgba(33, 45, 28, 0.45); z-index: 1; }
.chaleur .tete { color: var(--discret); text-align: center; align-self: end; padding-bottom: 2px; }
.chaleur .lig { color: var(--discret); align-self: center; }
.chaleur .vide { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); color: var(--discret); font-weight: 400; }
.legende-seq { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; color: var(--discret); }
.legende-seq span.rampe { display: flex; gap: 2px; }
.legende-seq span.rampe i { width: 22px; height: 8px; border-radius: 2px; }

/* Légendes */
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legende i.ligne { height: 2px; width: 16px; border-radius: 1px; }
.legende i.pointille { height: 0; width: 16px; border-top: 2px dashed var(--encre-2); border-radius: 0; background: none !important; }

/* Tableaux */
.tableau-defile { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--discret); padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
td:first-child { white-space: nowrap; }
.carte th.n { white-space: normal; line-height: 1.2; vertical-align: bottom; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
tfoot td { font-weight: 650; border-bottom: 0; border-top: 2px solid var(--axe); }
td.calc { color: var(--encre-2); }
td.neg, .neg { color: var(--baisse); font-weight: 600; }
.barre-ligne { height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 45%, var(--surface)), var(--s1)); min-width: 2px; }
.rang { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--encre-2); }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label, .champ > span { font-size: 12px; color: var(--discret); font-weight: 500; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], input[type="tel"], select, input.saisie {
  background: var(--surface); border: 1px solid var(--axe); border-radius: 8px; padding: 7px 9px; min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }
input.saisie { width: 100%; text-align: right; font-variant-numeric: tabular-nums; background: var(--saisie-fond); border-color: var(--saisie-bord); }
input.saisie:focus { background: var(--surface); }
input.saisie.petit { padding: 4px 5px; font-size: 12.5px; }
select.saisie-sel { width: 100%; }
.ligne-champs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.bouton { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--axe); background: var(--surface); border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bouton:hover { background: var(--surface-2); }
.bouton.principal { background: var(--vert); color: var(--creme); border-color: var(--vert); }
.bouton.principal:hover { opacity: 0.9; }
.bouton.or { background: var(--bordeaux-2); color: #fff6ea; border-color: var(--bordeaux-2); }
.bouton.or:hover { background: var(--bordeaux); }
.bouton svg { width: 16px; height: 16px; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.icone-btn { border: 0; background: none; cursor: pointer; color: var(--discret); padding: 4px; border-radius: 6px; }
.icone-btn:hover { background: var(--surface-2); color: var(--encre); }
.onglets { display: inline-flex; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 16px; }
.onglets button { border: 0; background: none; padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets button[aria-selected="true"] { color: var(--encre); border-color: var(--olive); }

/* Caisse */
#c-table th, #c-table td { padding: 7px 5px; }
#c-table input.saisie { padding: 5px 6px; }
#c-table th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.livraison { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 14px; }
.livraison strong { grid-column: 1 / -1; font-size: 13px; }
.resume .statut { white-space: normal; }

/* Résumés de caisse */
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.resume div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.resume strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.verifs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.verifs li { display: flex; align-items: center; gap: 10px; }
.verifs svg { width: 18px; height: 18px; flex: none; }
.verifs .ok svg { color: var(--bon); } .verifs .pasok svg { color: var(--critique); }

/* Heures */
.grille-heures th, .grille-heures td { padding: 4px 3px; text-align: center; }
.grille-heures td:first-child, .grille-heures th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-left: 0; min-width: 150px; }
.grille-heures .duo { display: flex; flex-direction: column; gap: 2px; width: 50px; margin: auto; }
.grille-heures th.we, .grille-heures td.we { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.grille-heures th small { display: block; font-weight: 400; }

/* Intégrations et caméras */
.integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.integration h3 { margin: 0; font-size: 15px; }
.integration p { margin: 8px 0 0; color: var(--encre-2); font-size: 13px; }
.integration .type { font-size: 12px; color: var(--discret); }
.bande-integrations { display: flex; gap: 8px; flex-wrap: wrap; }
.puce { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--axe); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--encre-2); }
.puce i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); opacity: 0.5; }
.cameras { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ecran { aspect-ratio: 16 / 9; border-radius: 10px; background: repeating-linear-gradient(135deg, #191816 0 10px, #1e1d1a 10px 20px); display: flex; align-items: center; justify-content: center; color: #8f8d86; flex-direction: column; gap: 6px; font-size: 13px; }
.ecran svg { width: 28px; height: 28px; }

/* Bulle de confirmation */
.bulle { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--vert); color: var(--creme); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: 0.2s; pointer-events: none; font-weight: 600; z-index: 20; max-width: calc(100vw - 32px); }
.bulle.vue { opacity: 1; transform: translate(-50%, 0); }
.bulle.erreur { background: var(--critique); color: #fff; }

dialog { border: 1px solid var(--anneau); border-radius: var(--rayon); background: var(--surface); color: var(--encre); padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
dialog::backdrop { background: rgba(10, 8, 5, 0.45); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0 0 4px; font-size: 17px; }

.vide-etat { text-align: center; padding: 40px 10px; color: var(--discret); }
.squelette { height: 120px; border-radius: var(--rayon); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: lueur 1.2s infinite; }
@keyframes lueur { to { background-position: -200% 0; } }

@media (max-width: 1200px) {
  .heros { grid-template-columns: 1fr; }
  .c3 { grid-column: span 6; } .c4, .c5, .c7, .c8 { grid-column: span 12; } .c6 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; grid-template-rows: 190px 1fr; overflow: auto; }
  .connexion-marque { left: 20px; top: 24px; }
  .connexion-marque img { width: 140px; height: auto; }
  .bienvenue { min-height: 260px; align-items: flex-end; }
  .bienvenue img { width: 100%; }
  .bienvenue::before { background: linear-gradient(0deg, #212d1c 30%, rgba(33, 45, 28, 0.75) 60%, rgba(33, 45, 28, 0.2) 100%); }
  .bienvenue .texte { padding: 22px 20px 30px; }
  .bienvenue h2 { font-size: 30px; }
  .marque { flex-direction: row; align-items: center; border: 0; padding: 0 4px; }
  .marque img { width: 96px; }
  .anneau { grid-template-columns: 1fr; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .cote { position: static; height: auto; padding: 12px 16px; gap: 10px; min-width: 0; }
  #nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  #nav .groupe { display: none; }
  #nav a { white-space: nowrap; padding: 7px 10px; }
  #nav a.actif::before { display: none; }
  .cote-bas { display: none; }
  .haut, main { padding-left: 16px; padding-right: 16px; }
  .bandeau-demo { padding: 8px 16px; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c3 { grid-column: span 12; }
  .filtres, .segments { width: 100%; overflow-x: auto; }
  .heros .principal-chiffre .valeur { font-size: 36px; }
}
@media print {
  .cote, .haut .filtres, .bandeau-demo, .pas-imprime { display: none !important; }
  .app { display: block; }
  .carte { box-shadow: none; border: 0; }
}
.rang.r1 { background: var(--s2); color: #fffdf8; }
.rang.r2 { background: color-mix(in srgb, var(--olive) 55%, var(--surface)); color: var(--encre); }
.rang.r3 { background: color-mix(in srgb, var(--bordeaux-2) 30%, var(--surface)); color: var(--encre); }