/* Administration Ô Petit Club Africain — palette du site */
:root{
  --night:#061f2a; --blue:#0b3443; --blue2:#0e4658;
  --ivory:#f5eddf; --paper:#fbf7ef; --bronze:#c18c48; --copper:#a95736; --ochre:#d39b47;
  --ink:#10232a; --line:rgba(16,35,42,.14);
  --vert:#2f7d55; --rouge:#a8392c; --bleu:#2b6b8f; --gris:#9aa3a8;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans)}
h1{margin:0 0 1.2rem;font:600 2rem var(--serif);color:var(--blue)}
h2{margin:0 0 1rem;font:600 1.3rem var(--serif);color:var(--blue)}
button,input,select,textarea{font:inherit}
a{color:var(--copper)}

/* ── Connexion ── */
.ecran-login{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,var(--night),var(--blue2))}
.login form{width:min(100% - 2rem,380px);padding:2.4rem;background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px rgba(6,31,42,.35)}
.login-marque{margin:0;color:var(--ochre);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.login h1{margin:.5rem 0 1.6rem;font-size:1.9rem}
.login label{display:block;margin-bottom:.4rem;font-size:.78rem;font-weight:600}
.login input{width:100%;padding:.8rem;border:1px solid var(--line);border-radius:10px}
.login button{width:100%;min-height:48px;margin-top:1.2rem;color:var(--night);background:var(--ochre);border:0;border-radius:999px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.login button:hover{background:var(--bronze)}
.login-erreur{margin:.8rem 0 0;color:var(--rouge);font-size:.84rem}

/* ── Barre supérieure ── */
.barre{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:.7rem 1.2rem;color:var(--ivory);background:var(--night);border-bottom:1px solid rgba(193,140,72,.35)}
.barre-marque strong{display:block;font:600 1.1rem var(--serif)}
.barre-marque span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,237,223,.6)}
.onglets{display:flex;flex-wrap:wrap;gap:.3rem;margin-left:auto}
.onglet{display:flex;gap:.45rem;align-items:center;padding:.55rem .9rem;color:rgba(245,237,223,.78);background:transparent;border:1px solid transparent;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:600}
.onglet:hover{color:var(--ivory);border-color:rgba(245,237,223,.24)}
.onglet.actif{color:var(--night);background:var(--ochre);border-color:var(--ochre)}
.deconnexion{color:rgba(245,237,223,.66);font-size:.72rem;text-decoration:none}
.deconnexion:hover{color:var(--ochre)}
.pastille{min-width:20px;padding:.05rem .35rem;color:#fff;background:var(--rouge);border-radius:999px;font-size:.68rem;text-align:center}

/* ── Structure ── */
main{width:min(100% - 2rem,1280px);margin:1.6rem auto 4rem}
.vue{display:none}
.vue.active{display:block}
.bloc{margin-bottom:1.2rem;padding:1.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.colonnes{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1.2rem;align-items:start}
.aide{margin:0 0 .8rem;color:rgba(16,35,42,.6);font-size:.82rem}
.totaux{margin:.6rem 0;color:rgba(16,35,42,.6);font-size:.82rem}

/* ── Boutons ── */
.btn{min-height:42px;padding:.55rem 1.1rem;color:var(--blue);background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.8rem;font-weight:600}
.btn:hover{border-color:var(--bronze)}
.btn-or{color:var(--night);background:var(--ochre);border-color:var(--ochre)}
.btn-or:hover{background:var(--bronze)}
.btn-mini{min-height:32px;padding:.25rem .6rem;font-size:.72rem}
.btn-danger{color:var(--rouge);border-color:rgba(168,57,44,.4)}
.rond{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:50%;cursor:pointer}

/* ── Formulaires ── */
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin-bottom:1rem}
label{display:block;font-size:.76rem;font-weight:600;color:rgba(16,35,42,.72)}
.grille-form input,.grille-form select,input[type=search],input[type=email],input[type=text],textarea,select{width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
textarea{resize:vertical;font-family:inherit}
.large{grid-column:1/-1}
.case,.case-large{display:flex;gap:.5rem;align-items:center;font-weight:600}
.case-large{grid-column:1/-1;margin-bottom:1rem}
.case input,.case-large input{width:auto;margin:0}
.ligne-outils{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.8rem}
.ligne-outils input{width:auto;min-width:220px;margin:0}

/* ── Cartes du tableau de bord ── */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem}
.carte{padding:1.2rem;background:#fff;border:1px solid var(--line);border-left:3px solid var(--bronze);border-radius:var(--radius)}
.carte b{display:block;font:600 2.2rem/1 var(--serif);color:var(--blue)}
.carte span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(16,35,42,.55)}

/* ── Calendrier ── */
.cal-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.cal-tete strong{font:600 1.15rem var(--serif);color:var(--blue);text-transform:capitalize}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal .jour-nom{padding:.3rem 0;color:rgba(16,35,42,.45);font-size:.66rem;text-align:center;text-transform:uppercase}
.cal button{position:relative;aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.82rem}
.cal button:hover{border-color:var(--bronze)}
.cal button.hors{color:rgba(16,35,42,.25);background:#fafafa}
.cal button.aujourdhui{border-color:var(--bronze);font-weight:700}
.cal button.choisi{color:var(--night);background:var(--ochre);border-color:var(--ochre);font-weight:700}
.cal .points{position:absolute;bottom:4px;display:flex;gap:2px}
.pt{width:7px;height:7px;display:inline-block;border-radius:50%;vertical-align:middle}
.pt-pending{background:var(--ochre)}.pt-confirmed{background:var(--vert)}.pt-refused{background:var(--gris)}
.pt-free{background:var(--vert)}.pt-booked{background:var(--ochre)}.pt-occupied{background:var(--rouge)}.pt-blocked{background:var(--gris)}
.legende{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;margin:.9rem 0 0;color:rgba(16,35,42,.6);font-size:.72rem}

/* ── Liste des réservations ── */
.liste-resa{display:grid;gap:.6rem}
.resa{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:.8rem;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gris);border-radius:10px}
.resa.st-pending{border-left-color:var(--ochre)}
.resa.st-confirmed{border-left-color:var(--vert)}
.resa.st-refused{border-left-color:var(--gris);opacity:.6}
.resa.st-seated{border-left-color:var(--rouge)}
.resa.choisie{outline:2px solid var(--bronze)}
.resa-heure{font:600 1.15rem var(--serif);color:var(--blue)}
.resa-corps b{display:block;font-size:.92rem}
.resa-corps span{display:block;color:rgba(16,35,42,.62);font-size:.78rem}
.resa-actions{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.vide{margin:0;color:rgba(16,35,42,.5);font-size:.86rem}

/* ── Plan de salle ── */
.salle-barre{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin-bottom:1rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.salle-barre label{margin:0}
.salle-barre input,.salle-barre select{width:auto;min-width:150px}
.salle-totaux{margin-left:auto;color:rgba(16,35,42,.62);font-size:.82rem}
.zones-onglets{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.zone-onglet{padding:.5rem 1rem;background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:600}
.zone-onglet.actif{color:var(--ivory);background:var(--blue);border-color:var(--blue)}
.zone-onglet small{display:block;font-weight:400;font-size:.66rem;opacity:.7}
.salle-corps{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.2rem;align-items:start}
.plan-cadre{padding:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.plan{position:relative;aspect-ratio:16/10;background:
  linear-gradient(rgba(11,52,67,.05) 1px,transparent 1px) 0 0/100% 5%,
  linear-gradient(90deg,rgba(11,52,67,.05) 1px,transparent 1px) 0 0/5% 100%,
  #f3ede2;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.table-plan{position:absolute;display:grid;place-content:center;gap:1px;padding:.2rem;color:#fff;background:var(--gris);border:0;border-radius:8px;cursor:pointer;font:600 .74rem var(--sans);text-align:center;line-height:1.1}
.table-plan small{font-weight:400;font-size:.62rem;opacity:.85}
.table-plan.free{background:var(--vert)}
.table-plan.pending{background:var(--ochre);color:var(--night)}
.table-plan.booked{background:var(--bronze);color:var(--night)}
.table-plan.occupied{background:var(--rouge)}
.table-plan.blocked{background:var(--gris);opacity:.65}
.table-plan.cible{outline:3px solid var(--copper);outline-offset:2px}
.table-plan.choisie{box-shadow:0 0 0 3px rgba(6,31,42,.5)}
.plan.mode-edition .table-plan{cursor:move}
.panneau{padding:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.panneau h3{margin:0 0 .2rem;font:600 1.25rem var(--serif);color:var(--blue)}
.panneau .sous{margin:0 0 .9rem;color:rgba(16,35,42,.55);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.etiquette{display:inline-block;margin-bottom:.9rem;padding:.2rem .6rem;border-radius:999px;color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.etiquette.free{background:var(--vert)}.etiquette.pending{background:var(--ochre);color:var(--night)}
.etiquette.booked{background:var(--bronze);color:var(--night)}.etiquette.occupied{background:var(--rouge)}
.etiquette.blocked{background:var(--gris)}
.panneau dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;margin:0 0 1rem;font-size:.82rem}
.panneau dt{color:rgba(16,35,42,.55)}
.panneau dd{margin:0;font-weight:600}
.panneau .actions{display:grid;gap:.4rem}

/* ── Tableaux ── */
.tableau-cadre{overflow-x:auto}
.tableau{width:100%;border-collapse:collapse;font-size:.84rem}
.tableau th{padding:.6rem;color:rgba(16,35,42,.55);font-size:.7rem;text-align:left;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.tableau td{padding:.6rem;border-bottom:1px solid var(--line)}
.tableau tr:hover td{background:var(--paper)}

/* ── Divers ── */
.jours{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.jours label{display:flex;gap:.4rem;align-items:center;padding:.45rem .8rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.jours input{width:auto;margin:0}
.puces{display:flex;flex-wrap:wrap;gap:.4rem}
.puce{display:flex;gap:.5rem;align-items:center;padding:.35rem .7rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:.78rem}
.puce button{background:none;border:0;color:var(--rouge);cursor:pointer;font-size:1rem;line-height:1}
.service-ligne{display:grid;grid-template-columns:1fr auto auto auto;gap:.6rem;align-items:end;margin-bottom:.6rem}
.progres{margin-top:1rem}
.progres-barre{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progres-barre span{display:block;height:100%;width:0;background:var(--ochre);transition:width .3s}
.progres p{margin:.5rem 0 0;font-size:.8rem;color:rgba(16,35,42,.6)}
.toast{position:fixed;z-index:60;left:50%;bottom:1.5rem;padding:.8rem 1.4rem;color:var(--ivory);background:var(--night);border-radius:999px;box-shadow:0 12px 40px rgba(6,31,42,.3);transform:translate(-50%,180%);transition:transform .3s;font-size:.85rem}
.toast.visible{transform:translate(-50%,0)}

@media(max-width:980px){
  .colonnes,.salle-corps{grid-template-columns:1fr}
  .onglets{width:100%;margin-left:0;overflow-x:auto}
  main{width:min(100% - 1.2rem,1280px)}
}

/* Panneau de table : sections pliables, séparateurs, zone de commande */
.panneau .sep{border:0;border-top:1px solid var(--line);margin:1.1rem 0}
.panneau .pliable{margin-top:.6rem}
.panneau .pliable summary{cursor:pointer;padding:.5rem 0;color:var(--blue);font-size:.8rem;font-weight:600;list-style:none}
.panneau .pliable summary::-webkit-details-marker{display:none}
.panneau .pliable summary:before{content:"▸ ";color:var(--bronze)}
.panneau .pliable[open] summary:before{content:"▾ "}
.panneau .grille-form{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem}
.panneau .grille-form .large{grid-column:1/-1}
.panneau textarea{width:100%;margin-top:.3rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.84rem;resize:vertical}
.panneau label{font-size:.72rem}
.table-plan.deplace{opacity:.85;box-shadow:0 8px 22px rgba(6,31,42,.45);z-index:5}
.plan.mode-edition .table-plan{outline:1px dashed rgba(255,255,255,.5);outline-offset:1px}

/* ── Tactile : ni sélection de texte, ni menu « Copier », ni page qui glisse ── */
html{overflow-x:clip}
body{overflow-x:clip;width:100%;max-width:100%}
.plan,.table-plan,.zone-onglet,.legende{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent}
.table-plan{touch-action:none}
.plan{touch-action:pan-y}

/* Le volet « Réglages de la table » reste atteignable au pouce */
.panneau .pliable summary{padding:.7rem 0;font-size:.85rem}
.panneau .actions .btn{flex:1 1 auto}
@media(max-width:980px){
  .salle-barre{gap:.6rem}
  .salle-barre label,.salle-barre input,.salle-barre select{width:100%;min-width:0}
  .salle-totaux{margin-left:0;width:100%}
  .salle-barre .btn{flex:1 1 46%}
  .panneau .grille-form{grid-template-columns:1fr}
}

/* ══════════ Plan de salle : rendu en relief ══════════ */
.plan{--zoom:1;position:relative;aspect-ratio:16/10;overflow:auto;border-radius:12px;
  background:
    repeating-linear-gradient(90deg,rgba(120,90,60,.05) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(0deg,rgba(120,90,60,.05) 0 2px,transparent 2px 26px),
    radial-gradient(ellipse at 50% 40%,#f6efe2,#e9dfcd);
  border:1px solid rgba(16,35,42,.16);
  box-shadow:inset 0 2px 14px rgba(60,40,20,.14)}
.plan-scene{position:relative;width:100%;height:100%;
  transform:scale(var(--zoom));transform-origin:center center;transition:transform .25s ease}

/* ── Décor ── */
.decor{position:absolute;display:grid;place-items:center;border-radius:4px;pointer-events:none}
.decor span{color:rgba(255,255,255,.9);font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.decor-mur{background:linear-gradient(180deg,#4a3b2c,#33281d);box-shadow:0 2px 6px rgba(0,0,0,.28)}
.decor-bar{background:linear-gradient(135deg,#6b4b2f,#4a3320);border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.decor-cuisine{background:linear-gradient(135deg,#8a8f93,#6a6f73);border-radius:8px;
  box-shadow:0 5px 12px rgba(0,0,0,.28)}
.decor-banquette{background:linear-gradient(90deg,#1f5c46,#2f7d55);border-radius:10px;
  box-shadow:0 5px 12px rgba(0,0,0,.26),inset 0 2px 0 rgba(255,255,255,.14)}
.decor-entree{background:linear-gradient(180deg,#c18c48,#a26f33);border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.24)}
.decor-passage{background:linear-gradient(180deg,#b9c6c9,#93a3a7);border-radius:6px}
.decor-verriere{background:linear-gradient(180deg,#cfe4ea,#a9c8d1);border-radius:6px;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.12)}
.decor-facade{background:linear-gradient(180deg,#0b3443,#0e4658);border-radius:6px}
.decor-muret{background:linear-gradient(180deg,#9a8e7c,#7a7062);border-radius:6px}
.decor-plantes{background:radial-gradient(circle at 50% 30%,#3f8a5c,#245c3d);border-radius:14px;
  box-shadow:0 5px 12px rgba(0,0,0,.26)}
.decor-reserve{background:linear-gradient(135deg,#5b4633,#3e2f21);border-radius:8px;
  box-shadow:0 5px 12px rgba(0,0,0,.28)}

/* ── Tables ── */
.table-plan{position:absolute;padding:0;background:none;border:0;cursor:pointer}
.table-plan .plateau{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:0;
  border-radius:7px;color:#fff;font-family:var(--sans);line-height:1.05;
  background:linear-gradient(160deg,#7a5636,#54371f);
  box-shadow:0 6px 14px rgba(40,25,10,.34),inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.14)}
.table-plan.forme-ronde .plateau{border-radius:50%}
.table-plan b{font-size:.76rem;font-weight:800}
.table-plan small{font-size:.58rem;opacity:.85}
.table-plan em{max-width:92%;overflow:hidden;font-size:.56rem;font-style:normal;
  text-overflow:ellipsis;white-space:nowrap;opacity:.95}
.chaise{position:absolute;width:22%;height:16%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,#3a2a1b,#241a10);border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.table-plan.forme-ronde .chaise{width:20%;height:20%;border-radius:50%}

/* Couleur d'état : box-shadow plutôt qu'outline, pour épouser les tables rondes */
.table-plan .plateau{--etat:var(--vert);
  box-shadow:0 0 0 3px var(--etat),0 6px 14px rgba(40,25,10,.34),inset 0 1px 0 rgba(255,255,255,.22)}
.table-plan.pending  .plateau{--etat:var(--ochre)}
.table-plan.booked   .plateau{--etat:var(--bronze)}
.table-plan.occupied .plateau{--etat:var(--rouge)}
.table-plan.blocked  .plateau{--etat:var(--gris);opacity:.55}
.table-plan.cible .plateau{animation:respire 1.4s infinite}
.table-plan.choisie .plateau{box-shadow:0 0 0 3px var(--etat),0 0 0 7px rgba(193,140,72,.4),0 8px 18px rgba(40,25,10,.4)}
@keyframes respire{0%,100%{box-shadow:0 0 0 0 rgba(193,140,72,.55)}50%{box-shadow:0 0 0 8px rgba(193,140,72,0)}}

.plan-outils{display:flex;gap:.4rem;justify-content:flex-end;margin-top:.7rem}
.plan-outils .rond{width:32px;height:32px;font-size:.9rem}
@media(prefers-reduced-motion:reduce){
  .plan-scene{transition:none}
  .table-plan.cible .plateau{animation:none}
}

/* ── Édition du plan : décor manipulable comme les tables ── */
.plan.mode-edition .decor{pointer-events:auto;cursor:move}
.plan.mode-edition .decor:hover{filter:brightness(1.15)}
.decor.choisi{outline:2px dashed var(--ochre);outline-offset:2px;z-index:4}
.decor.deplace,.table-plan.deplace{opacity:.9;z-index:6}
.poignee{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;z-index:7;
  background:var(--ochre);border:2px solid #fff;border-radius:50%;cursor:nwse-resize;
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
.plan.mode-edition .table-plan .plateau{cursor:move}

/* Un élément plus haut que large écrit son libellé à la verticale */
.decor.vertical span{writing-mode:vertical-rl;transform:rotate(180deg)}

/* Le panneau garde une hauteur stable : son contenu change sans décaler la page */
.panneau{min-height:240px;scroll-margin-top:90px}
.table-plan,.decor{scroll-margin:0}

/* Le cadre du plan suit la forme réelle de la salle (restaurant en longueur) */
.plan{--ratio:1.6;aspect-ratio:var(--ratio)}
.plan-cadre{max-width:640px;margin-inline:auto}
input[type=range]{width:100%;margin-top:.4rem;accent-color:var(--ochre)}