:root{--noir:#121214;--noir2:#1c1c20;--rouge:#e0242b;--rouge2:#b5121b;--gris:#6b6b73;--clair:#f5f5f7;--carte:#fff;--ligne:#e6e6ea;--vert:#1f9d55;--ambre:#c77700;--r:14px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--clair);color:#18181b;-webkit-tap-highlight-color:transparent}
body{padding-bottom:env(safe-area-inset-bottom)}
.entete{background:var(--noir);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 16px calc(14px) 16px;padding-top:max(14px,env(safe-area-inset-top))}
.marque{display:flex;gap:10px;align-items:center}.logo{width:34px;height:34px;color:var(--rouge)}
.nom{font-weight:800;font-size:20px;letter-spacing:.2px}.nom span{color:var(--rouge)}.sous{font-size:12px;color:#b9b9c0}
.profil{font-size:13px;text-align:right;color:#ddd}.profil b{display:block;color:#fff}.profil button{margin-top:4px;background:none;border:1px solid #444;color:#ddd;border-radius:999px;padding:3px 10px;font-size:12px}
.menu{position:sticky;top:0;z-index:5;background:var(--noir2);display:flex;gap:4px;padding:6px 8px;overflow-x:auto;border-bottom:3px solid var(--rouge)}
.menu button{flex:0 0 auto;background:none;border:0;color:#cfcfd6;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600}
.menu button.actif{background:#2b2b31;color:#fff;box-shadow:inset 0 -2px 0 var(--rouge)}
.bandeau{background:var(--ambre);color:#fff;padding:8px 14px;font-size:13px}.bandeau.doux{background:#fff3e0;color:#7a4b00}
.contenu{max-width:760px;margin:0 auto;padding:14px}
.carte{background:var(--carte);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04)}
.carte h2{font-size:17px;margin:0 0 12px}.carte h3{font-size:15px;margin:14px 0 8px}
label{display:block;font-size:13px;font-weight:600;color:#3f3f46;margin:10px 0 5px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid var(--ligne);border-radius:10px;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rouge);border-color:transparent}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.puces{display:flex;flex-wrap:wrap;gap:8px}.puce{border:1px solid var(--ligne);background:#fff;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600;color:#333}
.puce.actif{background:var(--noir);color:#fff;border-color:var(--noir)}.puce.rouge.actif{background:var(--rouge);border-color:var(--rouge)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:14px 18px;font-size:16px;font-weight:700;background:var(--rouge);color:#fff;width:100%}
.btn:disabled{opacity:.5}.btn.second{background:#fff;color:#18181b;border:1px solid var(--ligne)}.btn.petit{width:auto;padding:8px 12px;font-size:14px;border-radius:10px}
.btn.noir{background:var(--noir)}
.pas{display:flex;align-items:center;gap:6px}.pas button{width:40px;height:40px;border-radius:10px;border:1px solid var(--ligne);background:#fff;font-size:20px;font-weight:700}
.pas input{text-align:center;width:64px;padding:9px}
.produit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--ligne)}
.produit:last-child{border:0}.produit .lib{font-size:14px}.produit .code{font-size:11px;color:var(--gris)}
.produit.choisi .lib{font-weight:700}
.aide{font-size:12px;color:var(--gris);margin-top:4px}
.ligne{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--ligne)}
.ligne:last-child{border:0}.ligne .t{font-weight:700}.ligne .s{font-size:13px;color:var(--gris)}
.etiq{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#eee;color:#333;margin:2px 4px 2px 0}
.etiq.ok{background:#e3f5ea;color:var(--vert)}.etiq.prov{background:#fff3e0;color:var(--ambre)}.etiq.nb{background:#f1f1f4;color:#555}.etiq.ko{background:#fde8e8;color:var(--rouge2)}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chiffre{background:var(--clair);border-radius:12px;padding:10px;text-align:center}
.chiffre b{display:block;font-size:20px}.chiffre span{font-size:11px;color:var(--gris)}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:8px 6px;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}th{font-size:12px;color:var(--gris)}
.tab-admin{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px}.tab-admin .puce{flex:0 0 auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(120px);background:var(--noir);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;transition:transform .25s;max-width:92vw;z-index:20}
.toast.vu{transform:translateX(-50%) translateY(0)}.toast.erreur{background:var(--rouge2)}
.feuille{border:0;border-radius:18px 18px 0 0;padding:0;width:100%;max-width:760px;margin:auto auto 0;max-height:88vh}
.feuille::backdrop{background:rgba(0,0,0,.45)}.feuille>div{padding:18px}
.connexion{text-align:center;padding:30px 18px}.connexion h1{font-size:24px;margin:8px 0}.connexion p{color:var(--gris)}
.google{display:inline-flex;gap:10px;align-items:center;background:#fff;color:#18181b;border:1px solid var(--ligne);border-radius:12px;padding:14px 20px;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hero{background:radial-gradient(120% 100% at 80% 0%,#3a0d10 0%,var(--noir) 60%);color:#fff;border-radius:var(--r);padding:28px 18px;margin-bottom:12px}
.hero .slogan{color:var(--rouge);font-weight:700;margin-top:10px}
.erreur-msg{background:#fde8e8;color:var(--rouge2);border-radius:10px;padding:10px;font-size:14px;margin:10px 0}
.chargement{text-align:center;color:var(--gris);padding:40px}
.discret{color:var(--gris);font-size:13px}
@media (max-width:420px){.chiffres{grid-template-columns:repeat(2,1fr)}.grille{grid-template-columns:1fr 1fr}}
/* Blok A */
.entete{padding:12px 16px}.nom{font-size:19px}
.profil{display:flex;align-items:center;gap:8px}.profil .qui{text-align:right;line-height:1.25}
.profil .qui b{display:block;color:#fff;font-size:14px}.profil .qui small{color:#b9b9c0;font-size:12px}
.icone{background:#2b2b31;border:0;color:#fff;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600}
.bandeau-mode{padding:10px 14px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;justify-content:space-between}
.bandeau-mode.vue{background:#1f3a8a;color:#fff}.bandeau-mode.demo{background:repeating-linear-gradient(45deg,#7c2d12,#7c2d12 12px,#9a3412 12px,#9a3412 24px);color:#fff}
.bandeau-mode button{background:#fff;color:#111;border:0;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;flex:0 0 auto}
body.mode-demo .entete{box-shadow:inset 0 -4px 0 #ea580c}body.mode-demo .nom::after{content:" DÉMO";color:#fb923c;font-size:13px;font-weight:800;letter-spacing:1px}
.squelette div{height:44px;border-radius:10px;background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:sq 1.2s infinite;margin-bottom:12px}
@keyframes sq{0%{background-position:200% 0}100%{background-position:-200% 0}}
.btn .roue{width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:tourne .8s linear infinite;display:none}
.btn.envoi .roue{display:inline-block}@keyframes tourne{to{transform:rotate(360deg)}}
.lecture{background:#eef2ff;color:#1e3a8a;border-radius:12px;padding:14px;font-weight:600;text-align:center}
.confirme{border-left:5px solid var(--vert)}.confirme h2{color:var(--vert)}
.resume{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}.resume dt{color:var(--gris)}.resume dd{margin:0;font-weight:600}
.section{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gris);margin:18px 0 6px}
.champ-err{border-color:var(--rouge2)!important;background:#fff5f5}
.nom{white-space:nowrap}.profil .qui b{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.entete{gap:8px}.nom{font-size:17px}.logo{width:28px;height:28px}.icone{padding:7px 8px;font-size:12px}}
.entete{min-width:0}.entete>*{min-width:0}.profil{min-width:0;flex-shrink:1}
@media (max-width:420px){.entete{padding-left:12px;padding-right:12px}.nom{font-size:16px}.profil .qui b{font-size:13px;max-width:34vw}.profil .qui small{font-size:11px}}
/* Blok B */
.menu{top:0;border-bottom:0;box-shadow:0 2px 0 var(--rouge);justify-content:center}.menu button{min-width:96px}
.filtres select,.filtres input{margin-top:8px}.filtres details summary{margin-top:10px;font-size:14px;font-weight:600;color:#3f3f46;cursor:pointer}
.seg{display:flex;background:var(--clair);border-radius:12px;padding:4px;gap:4px;margin-top:10px}.seg button{flex:1;border:0;background:none;border-radius:9px;padding:9px;font-weight:700;font-size:14px;color:#52525b}
.seg button.actif{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nav-periode{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.nav-periode b{font-size:16px;text-align:center}
.nav-periode button{width:44px;height:40px;border-radius:10px;border:1px solid var(--ligne);background:#fff;font-size:22px;line-height:1}.nav-periode button:disabled{opacity:.3}
.ligne-info{display:flex;justify-content:space-between;gap:10px;padding:12px 0 4px;font-size:14px}.ligne-info span{color:var(--gris)}
.jours{display:grid;gap:6px}.jour{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;font-size:13px}
.barre{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--clair)}.barre i{display:block}.barre .ok{background:var(--vert)}.barre .prov{background:#f59e0b}.barre .ko{background:var(--rouge)}
.montant{text-align:right;white-space:nowrap;font-size:15px}.total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 4px;margin-top:4px;border-top:2px solid var(--noir);font-weight:700}
.total b{font-size:20px}.avis{background:#fff7ed;color:#9a3412;border-radius:12px;padding:12px;font-size:14px;font-weight:600}
.carte.avis{box-shadow:none}
button.ligne{width:100%;background:none;border:0;border-bottom:1px solid var(--ligne);text-align:left;font:inherit;color:inherit;cursor:pointer}
button.ligne:last-of-type{border-bottom:0}.cliquable:active{background:var(--clair)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--ligne);margin-top:4px}.pager .btn:disabled{opacity:.35}
.case{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:500}.case input{width:auto;margin:0}
.feuille-tete{display:flex;justify-content:space-between;align-items:center;gap:8px}.feuille-tete h2{margin:0;font-size:18px}
.icone.sombre{background:var(--clair);color:#111}.lecture-mini{display:inline-block;background:#eef2ff;color:#1e3a8a;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;margin:8px 0 12px}
.versions{margin:0;padding-left:18px}.versions li{margin-bottom:10px;font-size:14px}.versions .s{font-size:13px;color:var(--gris)}
.lien-hist{display:block;width:100%;background:none;border:0;color:var(--rouge2);font-weight:700;font-size:15px;padding:14px;text-align:center}
.feuille>div{max-height:88vh;overflow:auto}
[hidden]{display:none!important}.toast{visibility:hidden}.toast.vu{visibility:visible}
.etiq{white-space:nowrap}
.etiq.na{background:#eef0f3;color:#4a5563}
/* Blok C: Administration */
.adm-onglets{display:flex;gap:6px;overflow-x:auto;margin:0 -14px 12px;padding:2px 14px 6px;scrollbar-width:none}.adm-onglets::-webkit-scrollbar{display:none}
.adm-onglets button{flex:0 0 auto;border:1px solid var(--ligne);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;color:#3f3f46}
.adm-onglets button.actif{background:var(--noir);color:#fff;border-color:var(--noir);box-shadow:inset 0 -2px 0 var(--rouge)}
.chiffre.lien{border:0;font:inherit;cursor:pointer}.chiffre.lien:active{background:#e9e9ee}
.chiffres.petit .chiffre b{font-size:17px}.chiffres.petit{margin:10px 0 4px}
.adm-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}.adm-actions .btn{width:auto}
.feuille .adm-actions .btn{flex:1}
.etapes{display:flex;gap:3px;margin:6px 0 4px;max-width:180px}.etapes i{flex:1;height:6px;border-radius:3px;background:var(--ligne)}.etapes i.fait{background:var(--vert)}
.conf{border-top:4px solid var(--rouge)}
.adm-total{text-align:right;padding-top:8px}
.param .param-v{min-width:120px;max-width:44%}.param .param-v input:not([type=checkbox]){padding:8px;font-size:15px}
table .btn.petit{padding:6px 10px;font-size:13px}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.profil-c .feuille-tete{margin-bottom:4px}
@media (max-width:420px){.param{flex-direction:column}.param .param-v{max-width:none;width:100%}}
.btn.pdf{margin-top:12px}