/* ===================================================================
   LA TERRASSE — Espace de gestion (prototype)
=================================================================== */
:root{
  --paper:#fbf7ef; --paper-2:#f3ead9; --white:#fff;
  --ink:#221c15; --ink-2:#2c251b; --ink-3:#3a3125;
  --accent:#e6a93f; --accent-d:#d4942f; --gold-soft:#edc56a;
  --line:#e6dcc8; --line-d:#4a4030; --muted:#8a7c66; --muted-d:#b8a98f;
  --vert:#4a8f5b; --bleu:#4a72a8; --brun:#a9713f; --rouge:#b3453b;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --script:'Yellowtail',cursive;
  --r:14px; --r-l:20px; --tr:.2s ease; --ombre:0 18px 44px -24px rgba(34,28,21,.4);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:100px;padding:11px 20px;font-weight:600;font-size:.92rem;transition:var(--tr);white-space:nowrap}
.btn span{transition:transform var(--tr)}
.btn:hover span{transform:translateX(3px)}
.btn-or{background:linear-gradient(180deg,var(--gold-soft),var(--accent));color:var(--ink);box-shadow:0 8px 18px -8px rgba(230,169,63,.7)}
.btn-or:hover{filter:brightness(1.04)}
.btn-ligne{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ligne:hover{border-color:var(--accent);background:var(--paper-2)}
.btn-mini{background:var(--ink);color:var(--paper);border-radius:100px;padding:7px 14px;font-size:.8rem;font-weight:600}
.btn-mini:hover{background:var(--ink-3)}

/* ---------- CONNEXION ---------- */
.login{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(120% 100% at 50% 0%, #2c251b 0%, #191410 70%);padding:24px;z-index:100}
.login-carte{background:var(--paper);border-radius:24px;padding:44px 40px;width:min(100%,400px);text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.login-logo{font-family:var(--script);font-size:2.6rem;color:var(--accent-d);line-height:1}
.login-sub{margin:2px 0 26px;color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:600}
.login-champ{text-align:left;margin-bottom:18px}
.login-champ label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px}
.login-champ input{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;background:var(--white);font-family:var(--body)}
.login-champ input:focus{outline:none;border-color:var(--accent)}
.login .btn-or{width:100%;justify-content:center;padding:14px}
.login-note{margin:18px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.login-pied{color:rgba(255,255,255,.4);font-size:.78rem}

/* ---------- STRUCTURE APP ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* ---------- BARRE LATÉRALE ---------- */
.sidebar{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;z-index:40}
.sb-marque{padding:6px 10px 22px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line-d);margin-bottom:16px}
.sb-logo{font-family:var(--script);font-size:1.7rem;color:var(--paper);line-height:1}
.sb-tag{font-size:.64rem;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);font-weight:700}
.sb-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sb-lien{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--muted-d);text-align:left;padding:11px 12px;border-radius:11px;font-size:.9rem;font-weight:500;transition:var(--tr)}
.sb-lien .ic{font-size:1.05rem;width:20px;text-align:center;filter:grayscale(.2)}
.sb-lien:hover{background:var(--ink-2);color:var(--paper)}
.sb-lien.actif{background:linear-gradient(180deg,var(--gold-soft),var(--accent));color:var(--ink);font-weight:700}
.sb-lien.actif .ic{filter:none}
.pastille{margin-left:auto;background:var(--ink-3);color:var(--gold-soft);font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
.sb-lien.actif .pastille{background:rgba(34,28,21,.18);color:var(--ink)}
.sb-bas{border-top:1px solid var(--line-d);padding-top:16px;margin-top:16px}
.sb-user{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sb-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,var(--gold-soft),var(--accent));color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--display)}
.sb-user-txt{display:flex;flex-direction:column;line-height:1.25}
.sb-user-txt strong{font-size:.86rem}
.sb-user-txt span{font-size:.72rem;color:var(--muted-d)}
.sb-deco{width:100%;background:var(--ink-2);color:var(--muted-d);border:none;padding:9px;border-radius:10px;font-size:.82rem;font-weight:600;transition:var(--tr)}
.sb-deco:hover{background:var(--rouge);color:#fff}
.overlay-mobile{display:none}

/* ---------- CONTENU ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:20px 34px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.topbar h1{font-size:1.5rem}
.burger-dash{display:none;background:none;border:none;font-size:1.4rem;color:var(--ink)}
.topbar-droite{margin-left:auto}
.date-jour{color:var(--muted);font-size:.86rem;font-weight:500;text-transform:capitalize}
.vues{padding:30px 34px 60px;flex:1}
.vue{display:none;animation:apparait .35s ease}
.vue.actif{display:block}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vue-intro{color:var(--muted);font-size:.98rem;margin:0 0 24px;max-width:70ch;line-height:1.5}
.vue-bandeau{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.vue-bandeau .vue-intro{margin:0;flex:1;min-width:260px}
.vue-bandeau-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- CARTES / BLOCS ---------- */
.carte{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;box-shadow:var(--ombre)}
.carte.sans-pad{padding:0;overflow:hidden}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.carte-tete h3{font-size:1.12rem}
.carte-desc{color:var(--muted);font-size:.88rem;margin:-8px 0 16px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grille-2.align-haut{align-items:start}
.lien-mini{background:none;border:none;color:var(--accent-d);font-weight:600;font-size:.84rem}
.lien-mini:hover{text-decoration:underline}
.info-douce{margin-top:16px;background:var(--paper-2);border-radius:12px;padding:13px 15px;font-size:.85rem;color:var(--ink-3);line-height:1.5}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--ombre)}
.stat-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.stat-ic.vert{background:rgba(74,143,91,.14)}.stat-ic.or{background:rgba(230,169,63,.18)}
.stat-ic.brun{background:rgba(169,113,63,.15)}.stat-ic.bleu{background:rgba(74,114,168,.14)}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1}
.stat-lab{font-size:.8rem;color:var(--muted)}

/* ---------- LISTES ---------- */
.liste-msg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.liste-msg li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.liste-msg li:first-child{border-top:none}
.liste-msg li>div:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.liste-msg strong{font-size:.9rem}
.liste-msg span{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liste-msg time{font-size:.76rem;color:var(--muted);white-space:nowrap}
.msg-ava{width:36px;height:36px;border-radius:50%;background:var(--paper-2);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.raccourcis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.raccourci{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-weight:600;font-size:.86rem;color:var(--ink);transition:var(--tr)}
.raccourci span{font-size:1.1rem}
.raccourci:hover{border-color:var(--accent);background:var(--paper-2)}

/* ---------- TABLEAUX ---------- */
.tableau{width:100%;border-collapse:collapse;font-size:.88rem}
.tableau th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)}
.tableau td{padding:12px;border-bottom:1px solid var(--line)}
.tableau tr:last-child td{border-bottom:none}
.tableau-clients td:first-child{font-weight:600}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.72rem;font-weight:600}
.badge.form{background:rgba(230,169,63,.18);color:var(--accent-d)}
.badge.news{background:rgba(74,114,168,.14);color:var(--bleu)}
.badge.cmd{background:rgba(74,143,91,.14);color:var(--vert)}
.code-emp{font-family:var(--display);font-weight:700;letter-spacing:.15em;background:var(--paper-2);padding:4px 10px;border-radius:8px}
.mini-x{background:none;border:none;color:var(--muted);font-size:1rem}
.mini-x:hover{color:var(--rouge)}

/* ---------- POINTAGE ---------- */
.badge-doux{background:var(--paper-2);color:var(--accent-d);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:100px}
.employes-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.emp-btn{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 10px;transition:var(--tr);position:relative}
.emp-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.emp-ava{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--display);font-size:1.1rem}
.emp-btn.present .emp-ava{background:linear-gradient(180deg,var(--gold-soft),var(--accent));color:var(--ink)}
.emp-nom{font-weight:600;font-size:.86rem}
.emp-etat{font-size:.72rem;color:var(--muted)}
.emp-btn.present .emp-etat{color:var(--vert);font-weight:600}
.point-vert{position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--vert);display:none}
.emp-btn.present .point-vert{display:block}
.pointage-vide{text-align:center;color:var(--muted);padding:24px;font-size:.9rem}

/* ---------- MARKETING ---------- */
.tag-connecte{color:var(--vert);font-weight:600;font-size:.86rem;white-space:nowrap}
.champ-d{margin-bottom:16px}
.champ-d label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px}
.champ-d input,.champ-d select,.champ-d textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:.94rem;font-family:var(--body);background:var(--white);color:var(--ink)}
.champ-d textarea{resize:vertical}
.champ-d input:focus,.champ-d select:focus,.champ-d textarea:focus{outline:none;border-color:var(--accent)}
.mk-actions{display:flex;gap:10px;justify-content:flex-end}
.mk-retour{margin:12px 0 0;font-size:.88rem;font-weight:600;min-height:1em}
.liste-camp{list-style:none;margin:0;padding:0}
.liste-camp li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.liste-camp li:first-child{border-top:none}
.liste-camp strong{display:block;font-size:.9rem}
.liste-camp span{font-size:.8rem;color:var(--muted)}
.liste-camp time{font-size:.78rem;color:var(--muted);white-space:nowrap}

/* ---------- ÉDITEUR CARTES ---------- */
.bandeau-etat{background:rgba(74,143,91,.12);border:1px solid rgba(74,143,91,.3);color:var(--vert);border-radius:12px;padding:12px 16px;font-weight:600;font-size:.9rem;margin-bottom:18px}
.cartes-barre{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.onglets-cartes{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.onglet-c{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:8px 15px;font-size:.84rem;font-weight:600;color:var(--ink);transition:var(--tr)}
.onglet-c:hover{border-color:var(--accent)}
.onglet-c.actif{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.editeur{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:8px;box-shadow:var(--ombre)}
.cat-tete{display:flex;align-items:center;gap:12px;padding:14px 16px}
.cat-tete input{border:none;background:transparent;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);flex:1;padding:4px}
.cat-tete input:focus{outline:none;background:var(--paper-2);border-radius:8px}
.plat-ligne{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.plat-ligne input{border:1px solid transparent;background:var(--paper);border-radius:9px;padding:9px 11px;font-size:.88rem;font-family:var(--body);color:var(--ink);width:100%}
.plat-ligne input:focus{outline:none;border-color:var(--accent);background:var(--white)}
.plat-prix-in{max-width:110px}
.plat-nom-in{font-weight:600}
.plat-suppr{background:none;border:none;color:var(--muted);font-size:1.05rem;padding:4px 8px}
.plat-suppr:hover{color:var(--rouge)}
.cat-pied{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line)}
.lien-ajout{background:none;border:1.5px dashed var(--line);border-radius:10px;color:var(--accent-d);font-weight:600;font-size:.84rem;padding:8px 14px}
.lien-ajout:hover{border-color:var(--accent);background:var(--paper-2)}
.cat-suppr{background:none;border:none;color:var(--muted);font-size:.82rem;font-weight:600}
.cat-suppr:hover{color:var(--rouge)}
.note-photos{margin-top:18px;background:var(--paper-2);border-radius:12px;padding:13px 16px;font-size:.86rem;color:var(--ink-3)}

/* ---------- COMMANDES (bientôt) ---------- */
.bientot{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:44px;text-align:center;box-shadow:var(--ombre);max-width:920px;margin:0 auto}
.bientot-badge{display:inline-block;background:linear-gradient(180deg,var(--gold-soft),var(--accent));color:var(--ink);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;padding:6px 16px;border-radius:100px;margin-bottom:16px}
.bientot h2{font-size:1.8rem;margin-bottom:12px}
.bientot>p{color:var(--muted);max-width:56ch;margin:0 auto 28px;line-height:1.6}
.bientot-apercu{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;max-width:640px;margin:0 auto}
.cmd-carte{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.cmd-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cmd-num{font-family:var(--display);font-weight:700}
.cmd-statut{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:100px}
.cmd-statut.prep{background:rgba(230,169,63,.2);color:var(--accent-d)}
.cmd-statut.nouvelle{background:rgba(74,143,91,.16);color:var(--vert)}
.cmd-client{font-size:.84rem;color:var(--muted);margin-bottom:10px}
.cmd-lignes{list-style:none;margin:0 0 12px;padding:0;font-size:.86rem}
.cmd-lignes li{padding:3px 0}
.cmd-pied{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px;font-size:.84rem;color:var(--muted)}
.cmd-pied strong{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.bientot-note{font-size:.8rem;color:var(--muted);margin:26px 0 0}

/* ---------- RECHERCHE ---------- */
.recherche{border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;font-size:.88rem;font-family:var(--body);min-width:200px}
.recherche:focus{outline:none;border-color:var(--accent)}

/* ---------- MODALES ---------- */
.modale{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modale-fond{position:absolute;inset:0;background:rgba(25,20,16,.55);backdrop-filter:blur(3px)}
.modale-carte{position:relative;background:var(--paper);border-radius:22px;padding:32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);width:min(100%,380px);max-height:88vh;overflow:auto}
.modale-large{width:min(100%,640px)}
.modale-x{position:absolute;top:14px;right:14px;background:var(--paper-2);border:none;width:32px;height:32px;border-radius:50%;font-size:.9rem;color:var(--ink)}
.modale-x:hover{background:var(--line)}
.modale-titre{font-size:1.3rem;margin-bottom:4px}
.modale-sous{color:var(--muted);font-size:.88rem;margin:0 0 18px}
.modale-pin{text-align:center;width:min(100%,340px)}
.pin-ava{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--display);font-size:1.4rem;margin:0 auto 12px}
.pin-sous{color:var(--muted);font-size:.86rem;margin:2px 0 18px}
.pin-points{display:flex;justify-content:center;gap:14px;margin-bottom:8px}
.pin-points span{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-d);transition:var(--tr)}
.pin-points span.plein{background:var(--accent);border-color:var(--accent)}
.pin-erreur{color:var(--rouge);font-size:.82rem;font-weight:600;min-height:1.2em;margin-bottom:8px}
.clavier{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:240px;margin:0 auto}
.touche{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:15px;font-size:1.2rem;font-weight:600;font-family:var(--display);transition:var(--tr)}
.touche:hover{background:var(--paper-2);border-color:var(--accent)}
.touche.vide{background:none;border:none;pointer-events:none}
.touche.efface{font-size:1rem}

/* ---------- APERÇU SITE (modale) ---------- */
.apercu-site{background:var(--paper);border-radius:14px;padding:22px}
.ap-groupe{font-family:var(--display);font-weight:800;text-align:center;font-size:1.3rem;margin:18px 0 12px}
.ap-groupe:first-child{margin-top:0}
.ap-plat{display:flex;justify-content:space-between;gap:14px;padding:8px 4px;border-bottom:1px dashed var(--line)}
.ap-plat-nom{font-family:var(--display);font-weight:600;font-size:.95rem}
.ap-plat-desc{display:block;color:var(--muted);font-size:.8rem;font-weight:400;font-family:var(--body)}
.ap-plat-prix{font-family:var(--display);font-weight:700;white-space:nowrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .stats{grid-template-columns:1fr 1fr}
  .grille-2{grid-template-columns:1fr}
  .bientot-apercu{grid-template-columns:1fr}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;width:270px;transform:translateX(-100%);transition:transform .3s ease}
  .sidebar.ouvert{transform:translateX(0)}
  .overlay-mobile{display:block;position:fixed;inset:0;background:rgba(25,20,16,.5);z-index:35;opacity:0;pointer-events:none;transition:opacity .3s}
  .overlay-mobile.actif{opacity:1;pointer-events:auto}
  .burger-dash{display:block}
  .topbar,.vues{padding-left:20px;padding-right:20px}
  .plat-ligne{grid-template-columns:1fr auto;gap:8px}
  .plat-ligne .plat-desc-in{grid-column:1 / -1;order:3}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .raccourcis{grid-template-columns:1fr}
}