/* Maquette réservation — mêmes couleurs que le site */
:root{
  --nuit:#141113;--encre:#241E21;--rose:#F2D4D7;--rose-vif:#E7B4BC;--poudre:#FBEDEE;--creme:#FBF7F3;
  --framboise:#9B4558;--champagne:#C6A56B;--gris:#6B5F63;--gris-clair:#CFC3C6;--filet:#EADCDD;
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23FBF7F3'/%3E%3Cg fill='%23F2D4D7'%3E%3Cpath d='M0 0h14a14 14 0 0 1-14 14z'/%3E%3Cpath d='M64 0v14a14 14 0 0 1-14-14z'/%3E%3Cpath d='M0 64v-14a14 14 0 0 1 14 14z'/%3E%3Cpath d='M64 64h-14a14 14 0 0 1 14-14z'/%3E%3C/g%3E%3Cg fill='%23141113'%3E%3Cellipse cx='32' cy='19' rx='4.5' ry='9'/%3E%3Cellipse cx='32' cy='45' rx='4.5' ry='9'/%3E%3Cellipse cx='19' cy='32' rx='9' ry='4.5'/%3E%3Cellipse cx='45' cy='32' rx='9' ry='4.5'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='5.5' fill='%23F2D4D7'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%23C6A56B'/%3E%3C/svg%3E");
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;--logo:"Italiana","Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif;
  --douce:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--sans);font-size:17px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
.bandeau-maquette{background:var(--nuit);color:var(--rose);text-align:center;font-size:.85rem;padding:8px 16px}
.bandeau-maquette a{color:var(--rose-vif)}
/* liseré du motif de L'Endroit (éventails et pétales), comme sur le site */
.lisere{height:18px;background:var(--motif) 0 0/24px 24px}

/* ---------- Boutons ---------- */
[hidden]{display:none!important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:99px;padding:15px 28px;
  font-weight:500;letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:transform .25s var(--douce),box-shadow .25s,background .25s,opacity .25s}
.btn:active{transform:scale(.97)}
.btn-noir{background:var(--nuit);color:var(--rose)}
.btn-noir:hover{box-shadow:0 12px 26px -12px rgba(20,17,19,.6)}
.btn-clair{background:transparent;color:var(--encre);border:1px solid var(--filet)}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- Champs ---------- */
label.champ{display:block;margin:0 0 16px}
label.champ > span{display:block;font-size:.9rem;color:var(--gris);margin-bottom:6px}
label.champ small{color:var(--gris)}
.voir-mdp{display:flex;align-items:center;gap:8px;margin:-6px 0 18px;font-size:.9rem;color:var(--gris);cursor:pointer}
.voir-mdp input{width:18px;height:18px;accent-color:var(--nuit)}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],select,textarea{width:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:14px;background:#fff;
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--nuit);box-shadow:0 0 0 4px rgba(242,212,215,.7)}
input.faux{border-color:var(--nuit);background:var(--poudre);animation:secoue .4s}
@keyframes secoue{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.case{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;margin:4px 0 18px;cursor:pointer}
.case input{width:22px;height:22px;accent-color:var(--nuit);flex:none;margin-top:2px}

/* ---------- Pastilles (dates, heures, personnes) ---------- */
.pastilles{display:flex;gap:10px;flex-wrap:wrap}
.pastilles.defile{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pastille{flex:none;scroll-snap-align:start;border:1px solid var(--filet);background:#fff;border-radius:16px;padding:10px 16px;cursor:pointer;
  text-align:center;transition:transform .25s var(--douce),background .25s,color .25s,border-color .25s}
.pastille:hover{border-color:var(--rose)}
.pastille[aria-pressed=true]{background:var(--nuit);color:var(--rose);border-color:var(--nuit);transform:translateY(-2px)}
.pastille[disabled]{opacity:.35;pointer-events:none}
.pastille.jour{min-width:72px;padding:10px 8px}
.pastille.jour b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1;font-weight:600}
.pastille.jour small{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.pastille.rond{width:52px;height:52px;padding:0;border-radius:50%;font-size:1.1rem}

/* ---------- Plan ---------- */
.zones{display:inline-flex;background:#fff;border:1px solid var(--filet);border-radius:99px;padding:4px;margin-bottom:14px}
.zones button{border:0;background:none;border-radius:99px;padding:9px 20px;cursor:pointer;transition:background .3s,color .3s}
.zones button[aria-pressed=true]{background:var(--nuit);color:var(--rose)}
.plan{width:100%;height:auto;display:block;overflow:visible}
.plan-fond{fill:#fff;stroke:var(--filet);stroke-width:2}
.plan-fond.terrasse{fill:#F7F1EA;stroke-dasharray:8 6}
.plan-decor{fill:var(--poudre);stroke:var(--filet)}
.plan-etiquette{font-family:var(--serif);font-style:italic;font-size:15px;fill:var(--gris)}
.table{transition:transform .3s var(--douce),opacity .3s;animation:table-pose .55s var(--douce) both;animation-delay:calc(.04s * var(--i,0))}
@keyframes table-pose{from{opacity:0;transform:scale(.6)}}
.table .plateau{fill:var(--rose);transition:fill .3s}
.table .num{font-family:var(--serif);font-weight:600;font-size:24px;fill:var(--nuit);pointer-events:none}
.table .pl{font-size:11px;fill:var(--gris);pointer-events:none}
.table.libre{cursor:pointer}
.table.libre:hover,.table.libre:focus-visible{transform:scale(1.06);outline:0}
.table.libre:hover .plateau,.table.libre:focus-visible .plateau{fill:#ECC5C9}
/* réservée : effacée, comme une table déjà mise */
.table.prise .plateau{fill:#EFEAE6}
.table.prise .num{fill:var(--gris-clair)}.table.prise .pl{fill:var(--gris-clair);font-style:italic}
.table.bloquee .plateau{fill:#3a3236}
.table.bloquee .num{fill:var(--rose)}.table.bloquee .pl{fill:var(--rose);font-style:italic}
.table.petite{opacity:.4}
/* votre choix : noir et rose, comme l'enseigne */
.table.choisie .plateau{fill:var(--nuit)}
.table.choisie .num{fill:var(--rose)}.table.choisie .pl{fill:var(--rose)}
.table.choisie{animation:choisie .5s var(--douce)}
@keyframes choisie{40%{transform:scale(1.12)}}
.plan-route{fill:var(--nuit)}
.plan-etiquette.clair{fill:var(--rose)}
.plan-fenetre{stroke:var(--champagne);stroke-width:6;stroke-linecap:round}
/* tables collées : un même fond, comme sur le dessin */
.colle{fill:none;stroke:var(--gris-clair);stroke-width:1.5}
/* tables qu'on peut ajouter à côté du premier choix */
.table.voisine{cursor:pointer}
.table.voisine .plateau{fill:var(--rose);stroke:var(--nuit);stroke-width:2;stroke-dasharray:5 4;animation:clignote 1.4s ease-in-out infinite}
@keyframes clignote{50%{fill:#fff}}
.table.voisine:hover .plateau{fill:#ECC5C9}
.legende{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--gris);margin-top:10px}
.legende i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}