/* ============================================================
   BURGER FINO — Interface Administration
   Identité : Noir profond / Or chaud / Sobre & Pro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --noir:        #0a0a0a;
  --noir-2:      #111111;
  --noir-3:      #181818;
  --noir-4:      #202020;
  --noir-5:      #2a2a2a;
  --bordure:     #2a2a2a;
  --bordure-2:   #363636;
  --or:          #e8a820;
  --or-vif:      #f5bc35;
  --or-pale:     #f0cc7a;
  --or-sombre:   #a07010;
  --or-bg:       rgba(232,168,32,0.08);
  --or-bg-fort:  rgba(232,168,32,0.16);
  --blanc:       #f0ece4;
  --blanc-2:     #c8c2b8;
  --gris:        #6e6a65;
  --gris-2:      #484440;
  --vert:        #2d9e6b;
  --vert-bg:     rgba(45,158,107,0.12);
  --rouge:       #c0392b;
  --rouge-bg:    rgba(192,57,43,0.12);
  --bleu:        #2471a3;
  --bleu-bg:     rgba(36,113,163,0.12);
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Outfit', system-ui, sans-serif;
  --mono:   'JetBrains Mono', monospace;
  --r:      5px;
  --r-lg:   9px;
  --t:      0.17s ease;
  --sidebar-w: 218px;
  --header-h:  56px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{background:var(--noir);color:var(--blanc);font-family:var(--sans);font-size:.9rem;line-height:1.55;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--noir-2)}
::-webkit-scrollbar-thumb{background:var(--bordure-2);border-radius:2px}

/* === LAYOUT === */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;min-height:100vh}

/* === HEADER === */
.header{grid-column:1/-1;background:var(--noir-2);border-bottom:1px solid var(--bordure);display:flex;align-items:center;position:sticky;top:0;z-index:200}
.header-brand{width:var(--sidebar-w);display:flex;align-items:center;padding:0 18px;gap:10px;border-right:1px solid var(--bordure);height:100%;flex-shrink:0;overflow:hidden}
.header-brand img,.brand-logo{max-height:calc(var(--header-h) - 14px);width:auto;object-fit:contain;mix-blend-mode:screen}
.header-center{flex:1;padding:0 20px;display:flex;align-items:center;gap:7px}
.header-crumb{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.header-sep{color:var(--bordure-2);font-size:.8rem}
.header-page{font-size:.82rem;font-weight:500;color:var(--blanc-2)}
.header-right{display:flex;align-items:center;gap:10px;padding-right:20px;margin-left:auto}
.header-date{font-family:var(--mono);font-size:.65rem;color:var(--gris)}
.header-user{display:flex;align-items:center;gap:6px;padding:4px 11px;background:var(--or-bg);border:1px solid rgba(232,168,32,.2);border-radius:var(--r);font-size:.73rem;font-weight:500;color:var(--or)}
.header-user::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--vert);flex-shrink:0}
.header-logout{padding:4px 11px;border:1px solid var(--bordure-2);border-radius:var(--r);font-size:.71rem;color:var(--gris);transition:var(--t)}
.header-logout:hover{border-color:var(--rouge);color:var(--rouge)}

/* === SIDEBAR === */
.sidebar{background:var(--noir-2);border-right:1px solid var(--bordure);padding:16px 0 40px;overflow-y:auto;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h))}
.nav-section-lbl{font-family:var(--mono);font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);padding:13px 16px 4px;display:block}
.nav-link{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:.82rem;color:var(--gris);transition:var(--t);position:relative}
.nav-link:hover{color:var(--blanc-2);background:rgba(255,255,255,.025)}
.nav-link.active{color:var(--or);background:var(--or-bg)}
.nav-link.active::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;background:var(--or);border-radius:0 2px 2px 0}
.nav-icon{font-size:.88rem;min-width:15px;text-align:center}
.nav-div{height:1px;background:var(--bordure);margin:8px 16px}

/* === MAIN === */
.main{padding:26px 26px 48px;overflow-y:auto;min-width:0}

/* === PAGE HEADER === v160 : refonte moderne (accent doré + fond dégradé) */
.pg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding:22px 26px;border-radius:14px;background:linear-gradient(135deg,rgba(232,168,32,.08),rgba(232,168,32,.02));border:1px solid rgba(232,168,32,.25);position:relative;overflow:hidden}
.pg-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#e8a820,#cc8f10);border-radius:14px 0 0 14px}
.pg-title{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--blanc);letter-spacing:.01em;line-height:1.1;margin:0}
.pg-title em{color:var(--or);font-style:italic;font-weight:500}
.pg-sub{font-family:inherit;font-size:.9rem;color:var(--gris);letter-spacing:0;text-transform:none;margin-top:6px;line-height:1.5}
@media (max-width:600px){
  .pg-head{padding:16px 18px;flex-direction:column;align-items:flex-start;gap:12px}
  .pg-title{font-size:1.5rem}
  .pg-sub{font-size:.82rem}
}

/* === GRILLES === */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:18px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:18px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:13px;margin-bottom:18px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:13px;margin-bottom:18px}
@media(max-width:1300px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.app{grid-template-columns:1fr}.g4,.g3,.g2,.g21,.g12{grid-template-columns:1fr}}

/* === KPI CARDS === */
.kpi{background:var(--noir-3);border:1px solid var(--bordure);border-radius:var(--r-lg);padding:16px 18px;position:relative;overflow:hidden;animation:fadeUp .3s ease both}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.kpi.or::after{background:var(--or)}
.kpi.vert::after{background:var(--vert)}
.kpi.rouge::after{background:var(--rouge)}
.kpi.bleu::after{background:var(--bleu)}
.kpi.gris::after{background:var(--gris-2)}
.kpi-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:7px}
.kpi-val{font-family:var(--serif);font-size:1.85rem;font-weight:600;color:var(--blanc);line-height:1;margin-bottom:7px}
.kpi-val.or{color:var(--or)}
.kpi-val.vert{color:var(--vert)}
.kpi-val.rouge{color:var(--rouge)}
.kpi-sub{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--gris);flex-wrap:wrap}

/* Variation pill */
.pill{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:.63rem;font-weight:500;white-space:nowrap}
.pill.up{background:var(--vert-bg);color:var(--vert)}
.pill.dn{background:var(--rouge-bg);color:var(--rouge)}
.pill.or{background:var(--or-bg);color:var(--or)}
.pill.nu{background:rgba(255,255,255,.05);color:var(--gris)}

/* Progress */
.prog{margin-top:9px}
.prog-hd{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;color:var(--gris);margin-bottom:4px}
.prog-tr{height:3px;background:var(--noir-5);border-radius:2px}
.prog-fl{height:100%;border-radius:2px;background:var(--or);transition:width .6s cubic-bezier(.4,0,.2,1)}
.prog-fl.v{background:var(--vert)}
.prog-fl.r{background:var(--rouge)}

/* === PANELS === */
.panel{background:var(--noir-3);border:1px solid var(--bordure);border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px}
.panel-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--bordure);background:var(--noir-4)}
.panel-title{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blanc-2);display:flex;align-items:center;gap:8px}
.panel-title::before{content:'';width:2px;height:13px;background:var(--or);border-radius:1px}
.panel-body{padding:18px}
.panel-body.np{padding:0}

/* === TABLEAUX === */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.83rem}
thead th{background:var(--noir-4);padding:9px 14px;text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);border-bottom:1px solid var(--bordure);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--bordure);transition:background var(--t)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody td{padding:9px 14px}
.r{text-align:right}.c{text-align:center}
.mono{font-family:var(--mono)}
.bold{font-weight:500}
.c-or{color:var(--or)}.c-v{color:var(--vert)}.c-r{color:var(--rouge)}.c-g{color:var(--gris)}.c-w{color:var(--blanc-2)}

/* === FORMS === */
.frow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px}
.fcol{display:flex;flex-direction:column;gap:4px}
label{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=email],input[type=password],select,textarea{background:var(--noir-4);border:1px solid var(--bordure-2);border-radius:var(--r);color:var(--blanc);padding:8px 11px;font-size:.87rem;outline:none;transition:border-color var(--t);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--or)}
select option{background:var(--noir-3)}

/* === BOUTONS === */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:var(--r);font-size:.81rem;font-weight:500;border:none;transition:var(--t);white-space:nowrap;cursor:pointer}
.btn-or{background:var(--or);color:var(--noir)}
.btn-or:hover{background:var(--or-vif)}
.btn-ghost{background:transparent;color:var(--blanc-2);border:1px solid var(--bordure-2)}
.btn-ghost:hover{border-color:var(--or);color:var(--or)}
.btn-danger{background:var(--rouge-bg);color:var(--rouge);border:1px solid rgba(192,57,43,.25)}
.btn-danger:hover{background:rgba(192,57,43,.2)}
.btn-sm{padding:5px 11px;font-size:.75rem}
.btn-xs{padding:3px 8px;font-size:.69rem}

/* === BADGES FAMILLE === */
.fam{display:inline-block;padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:.62rem;font-weight:500}
.fam-BURGERS{background:rgba(192,57,43,.18);color:#e55}
.fam-SALADES{background:rgba(45,158,107,.18);color:#4c9}
.fam-BOISSONS{background:rgba(36,113,163,.18);color:#5af}
.fam-DESSERTS{background:rgba(142,68,173,.18);color:#b7f}
.fam-ACCOMPAGNEMENTS{background:rgba(211,84,0,.18);color:#f95}
.fam-SUPPLEMENTS{background:rgba(80,80,80,.3);color:var(--gris)}
.fam-PAINS{background:var(--or-bg);color:var(--or)}

/* === FLASH === */
.flash{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:var(--r);margin-bottom:16px;font-size:.83rem}
.flash.ok{background:var(--vert-bg);border:1px solid rgba(45,158,107,.3);color:var(--vert)}
.flash.err{background:var(--rouge-bg);border:1px solid rgba(192,57,43,.3);color:var(--rouge)}

/* === TABS === */
.tabs{display:flex;gap:2px;background:var(--noir-4);border:1px solid var(--bordure);border-radius:var(--r);padding:3px;margin-bottom:18px;flex-wrap:wrap}
.tab-btn{padding:5px 13px;border-radius:3px;font-size:.79rem;font-weight:500;border:none;background:none;color:var(--gris);cursor:pointer;transition:var(--t)}
.tab-btn:hover{color:var(--blanc-2)}
.tab-btn.active{background:var(--noir-3);color:var(--or)}

/* === MODAL === */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal-box{background:var(--noir-3);border:1px solid var(--bordure-2);border-radius:var(--r-lg);padding:26px 26px 22px;width:560px;max-width:96vw;max-height:90vh;overflow-y:auto;position:relative}
.modal-box::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;background:var(--or);border-radius:0 0 2px 2px}
.modal-title{font-family:var(--serif);font-size:1.45rem;color:var(--blanc);margin-bottom:18px}
.modal-close{position:absolute;top:13px;right:13px;background:none;border:none;color:var(--gris);font-size:1.1rem;cursor:pointer;transition:var(--t);line-height:1;padding:3px}
.modal-close:hover{color:var(--rouge)}
.modal-foot{margin-top:18px;display:flex;justify-content:flex-end;gap:9px;padding-top:14px;border-top:1px solid var(--bordure)}

/* === LOGIN === */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--noir);background-image:radial-gradient(ellipse 60% 50% at 20% 60%,rgba(232,168,32,.05) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(232,168,32,.03) 0%,transparent 60%)}
.login-box{width:350px;background:var(--noir-3);border:1px solid var(--bordure);border-radius:var(--r-lg);overflow:hidden}
.login-hd{padding:32px 28px 24px;text-align:center;border-bottom:1px solid var(--bordure);background:var(--noir-4)}
.login-hd img{height:72px;margin-bottom:10px}
.login-hd-sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;color:var(--gris);text-transform:uppercase}
.login-body{padding:24px 28px 28px}
.login-body .fcol{margin-bottom:13px}

/* === BAR INLINE === */
.bar-item{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:.79rem}
.bar-lbl{min-width:150px;color:var(--blanc-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-tr{flex:1;height:4px;background:var(--noir-5);border-radius:2px}
.bar-fl{height:100%;border-radius:2px;background:var(--or)}
.bar-val{min-width:75px;text-align:right;font-family:var(--mono);font-size:.7rem;color:var(--or)}

/* === ANIMATIONS === */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi:nth-child(1){animation-delay:.03s}
.kpi:nth-child(2){animation-delay:.07s}
.kpi:nth-child(3){animation-delay:.11s}
.kpi:nth-child(4){animation-delay:.15s}
.panel{animation:fadeUp .3s ease both}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; --header-h: 52px; }
    .app { grid-template-columns: 1fr; }
    /* Sidebar gérée par mobile.css */
    .header-brand { width: auto; border-right: none; padding: 0 12px; }
    .header-brand img { height: 36px; }
    .header-center { display: none; }
    .header-date { display: none; }
    .main { padding: 14px 12px 48px; }
    .g4, .g3 { grid-template-columns: repeat(2, 1fr); }
    .g2, .g21, .g12 { grid-template-columns: 1fr; }
    .pg-title { font-size: 1.6rem; }
    /* Bouton menu hamburger */
    .panel-hd { flex-wrap: wrap; gap: 8px; }
    table { font-size: .75rem; }
    thead th, tbody td { padding: 7px 8px; }
}
@media (max-width: 480px) {
    .g4 { grid-template-columns: 1fr; }
    .kpi-val { font-size: 1.4rem; }
}

/* 🆕 v235h — Fix universel : bouton dans form inline aligné comme les frères boutons natifs */
form[style*="display:inline"],
form[style*="display: inline"] {
    display: inline-flex !important;
    align-items: stretch;
    margin: 0;
    vertical-align: middle;
}
form[style*="display:inline"] > button,
form[style*="display: inline"] > button {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 🆕 v235h — Classe utilitaire pour rangées d'icônes universelles (charte visuelle enfant 10 ans) */
.icon-row { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.icon-row > form { margin: 0; display: flex; align-items: stretch; }
.icon-row > form > .btn,
.icon-row > form > button { width: 100%; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    font-size: .9rem; line-height: 1; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.15);
    color: #e6e6e6; text-decoration: none; transition: all .15s; padding: 0;
    box-sizing: border-box;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.icon-btn.icon-edit    { color: var(--or);       border-color: rgba(232,168,32,.35); background: rgba(232,168,32,.08); }
.icon-btn.icon-edit:hover    { background: rgba(232,168,32,.2); }
.icon-btn.icon-print   { color: #9ac0e0;         border-color: rgba(74,168,230,.3); }
.icon-btn.icon-print:hover   { background: rgba(74,168,230,.15); }
.icon-btn.icon-delete  { color: #ff6b6b;         border-color: rgba(255,107,107,.35); background: transparent; }
.icon-btn.icon-delete:hover  { background: rgba(255,107,107,.15); }
.icon-btn.icon-download{ color: var(--vert);     border-color: rgba(45,158,107,.35); }
.icon-btn.icon-download:hover{ background: rgba(45,158,107,.18); }
.icon-btn.icon-info    { color: #a893ff;         border-color: rgba(124,77,255,.35); }
.icon-btn.icon-info:hover    { background: rgba(124,77,255,.18); }

/* 🆕 v235o — Refonte visuelle universelle "enfant 10 ans" (safety net global)
   Ces règles s'appliquent à TOUTES les pages sans avoir à les patcher une par une.
   Elles ne cassent rien : elles ajoutent seulement des minima. */

/* 1. Focus visible partout — accessibilité clavier + mobile */
button:focus-visible, a.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

/* 2. Zone tactile minimum 40×40 sur mobile (recommandation Apple 44px, Android 48dp — 40 = compromis avec la densité BF) */
@media (max-width: 640px) {
    .btn, button:not(.icon-btn):not(.act-btn):not(.act-tree):not(.act-uni):not(.stamp-btn):not(.modal-close):not(.act-uni),
    a.btn, input[type=submit], input[type=button] {
        min-height: 40px;
    }
    .btn-sm { min-height: 36px }
    .btn-xs { min-height: 32px }
    /* Boutons dans formulaires inline : ne PAS forcer sur les micro-icônes de listes (delete/edit compacts) */
    tr .btn-xs, td .btn-xs { min-height: auto }
}

/* 3. Radius arrondi cohérent sur tous les inputs (harmonise les pages qui ont oublié) */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
select, textarea {
    border-radius: var(--r);
}

/* 4. Alignement des icônes emoji dans les boutons (fini les décalages verticaux emoji vs texte) */
.btn, .icon-btn {
    line-height: 1.15;
}

/* 5. Titres cohérents dans les .panel-hd (fini les tailles disparates entre pages) */
.panel-hd .panel-title { font-size: .95rem; font-weight: 700; }
.panel-hd { min-height: 44px; align-items: center; }

/* 6. Formulaires : labels toujours lisibles (mini 0.72rem sur mobile) */
@media (max-width: 640px) {
    .fcol label { font-size: .72rem !important }
    .fcol input, .fcol select, .fcol textarea { font-size: .88rem !important }
}

/* 7. Table : bordure interne cohérente + hover row léger (aide à suivre la ligne à l'œil) */
tbody tr:hover { background: rgba(255,255,255,.02); }

/* 8. Flash message : uniformise couleurs entre "ok" et "err" */
.flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: .88rem; font-weight: 500; }
.flash.ok  { background: rgba(45,158,107,.12); border: 1px solid rgba(45,158,107,.3); color: #5fd6a1; }
.flash.err { background: rgba(228,75,74,.10); border: 1px solid rgba(228,75,74,.35); color: #ff8878; }
.flash.warn{ background: rgba(232,168,32,.10); border: 1px solid rgba(232,168,32,.3); color: var(--or); }

/* 9. Modals : centrage cohérent + max-height + scroll interne (fini les modals qui débordent) */
.modal-bg, [id^="m-"][style*="position:fixed"] {
    padding: 20px !important;
}
.modal-box, .modal-bg > form, [id^="m-"] > form {
    max-height: 90vh; overflow-y: auto;
}