/* ============================================================
   La Bekaa — espace administrateur (Studio EnVue)
   Reprend les jetons de site.css (couleurs, polices) : à charger APRÈS site.css.
   ============================================================ */

body{ font-size:15px; line-height:1.5; }
.admin{ min-height:100vh; display:flex; }

/* ---- écran de connexion / première configuration ---- */
.auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem; }
.auth__card{ width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:2.2rem 2rem; box-shadow:var(--shadow); }
.auth__brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.auth__brand b{ font-family:var(--disp); font-size:1.3rem; }
.auth__brand span{ color:var(--copper); }
.auth h1{ font-size:1.5rem; margin-bottom:.3rem; }
.auth p.sub{ color:var(--ink-dim); font-size:.9rem; margin-bottom:1.6rem; }
.tabs{ display:flex; gap:.4rem; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:1.6rem; }
.tabs button{ flex:1; padding:.6em 1em; border:0; border-radius:7px; background:transparent; color:var(--ink-dim); font:inherit; font-weight:700; cursor:pointer; transition:background .2s, color .2s; }
.tabs button.is-on{ background:var(--copper); color:#1b1206; }
.champ{ margin-bottom:1rem; }
.champ label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink-dim); margin-bottom:.4rem; }
.champ input, .champ select, .champ textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font:inherit; padding:.7em .85em; transition:border-color .2s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{ outline:none; border-color:var(--copper); }
/* ---- champ mot de passe avec œil pour afficher/masquer ---- */
.champ--mdp{ position:relative; }
.champ--mdp input{ padding-right:2.6em; }
.champ--mdp .oeil{
  position:absolute; right:.5em; top:calc(1.6rem + .55em); /* sous le label, centré dans le champ */
  width:2em; height:2em; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--ink-dim); cursor:pointer; border-radius:6px;
}
.champ--mdp .oeil:hover{ color:var(--ink); }
.champ--mdp .oeil svg{ width:19px; height:19px; }
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--copper); color:#1b1206; border:0; border-radius:9px; font:inherit; font-weight:800;
  padding:.75em 1.3em; cursor:pointer; transition:transform .2s var(--ease), background .2s; width:100%;
}
.bouton:hover{ background:var(--copper-2); }
.bouton:disabled{ opacity:.55; cursor:default; }
.bouton--ligne{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.bouton--ligne:hover{ border-color:var(--copper); background:transparent; color:var(--copper); }
.bouton--petit{ width:auto; padding:.5em .9em; font-size:.85rem; }
.bouton--danger{ background:#a8432f; color:#fff; }
.bouton--danger:hover{ background:#8d3627; }
.erreur{ background:rgba(168,67,47,.16); border:1px solid #a8432f; color:#ff9f8c; border-radius:8px; padding:.7em .9em; font-size:.88rem; margin-bottom:1rem; }
.succes{ background:rgba(87,135,106,.18); border:1px solid var(--cedar); color:#bfe7cf; border-radius:8px; padding:.7em .9em; font-size:.88rem; margin-bottom:1rem; }

/* ---- coquille admin (sidebar + contenu) ---- */
.side{ width:240px; flex:none; background:var(--bg-2); border-right:1px solid var(--line); padding:1.4rem 1rem; display:flex; flex-direction:column; min-height:100vh; }
.side__brand{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem 1.4rem; font-family:var(--disp); font-size:1.1rem; }
.side nav{ display:flex; flex-direction:column; gap:.2rem; flex:1; }
.side nav a{ display:flex; align-items:center; gap:.7em; padding:.65em .8em; border-radius:8px; color:var(--ink-dim); font-weight:700; font-size:.92rem; }
.side nav a:hover{ background:var(--panel); color:var(--ink); }
.side nav a.is-on{ background:var(--copper); color:#1b1206; }
.side__qui{ border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; font-size:.82rem; color:var(--ink-dim); }
.side__qui b{ display:block; color:var(--ink); font-weight:700; }
.side__qui span{ display:inline-block; margin-top:.3rem; padding:.15em .55em; border-radius:20px; background:var(--panel); font-size:.72rem; }

.main{ flex:1; padding:2rem clamp(1.2rem,3vw,2.6rem); max-width:1100px; }
.main h1{ font-size:1.7rem; margin-bottom:.3rem; }
.main p.sub{ color:var(--ink-dim); margin-bottom:1.8rem; }

.cartes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:2rem; }
.carte{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.3rem; }
.carte b{ display:block; font-family:var(--disp); font-size:1.8rem; color:var(--copper); }
.carte span{ display:block; font-size:.8rem; color:var(--ink-dim); margin-top:.3rem; }

.panneau{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.4rem 1.5rem; margin-bottom:1.6rem; }
.panneau__tete{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.panneau__tete h2{ font-size:1.1rem; font-family:var(--sans); font-weight:800; }

table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th{ text-align:left; color:var(--ink-dim); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; padding:.5em .6em; border-bottom:1px solid var(--line); }
td{ padding:.6em .6em; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }
tr.ligne-cliquable{ cursor:pointer; transition:background .15s; }
tr.ligne-cliquable:hover{ background:var(--bg-2); }
.vide{ color:var(--ink-dim); text-align:center; padding:1.6rem 0; }

.badge{ display:inline-block; padding:.2em .7em; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge--nouvelle{ background:rgba(221,127,63,.2); color:var(--copper); }
.badge--confirmee{ background:rgba(87,135,106,.25); color:#bfe7cf; }
.badge--annulee{ background:rgba(168,67,47,.2); color:#ff9f8c; }
.badge--proprio{ background:var(--gold); color:#2a1d04; }

.filtre-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filtre-tabs button{ background:var(--bg-2); border:1px solid var(--line); color:var(--ink-dim); border-radius:20px; padding:.4em 1em; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.filtre-tabs button.is-on{ background:var(--copper); border-color:var(--copper); color:#1b1206; }

.lien-copie{ display:flex; gap:.5rem; align-items:stretch; }
.lien-copie input{ flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:.6em .8em; font:inherit; font-size:.85rem; }

/* ---- fenêtre modale ---- */
.voile{ position:fixed; inset:0; background:rgba(8,10,12,.7); display:none; align-items:center; justify-content:center; z-index:50; padding:1.2rem; }
.voile.is-on{ display:flex; }
.modale{ width:min(440px,100%); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.8rem; box-shadow:var(--shadow); }
.modale h2{ font-size:1.2rem; margin-bottom:.3rem; }
.modale p.sub{ color:var(--ink-dim); font-size:.85rem; margin-bottom:1.2rem; }
.modale__actions{ display:flex; gap:.6rem; margin-top:1.4rem; }
.modale__actions .bouton{ width:auto; flex:1; }

.radio-ligne{ display:flex; align-items:flex-start; gap:.6em; padding:.6em; border:1px solid var(--line); border-radius:8px; margin-bottom:.6em; cursor:pointer; }
.radio-ligne:hover{ border-color:var(--copper); }
.radio-ligne input{ margin-top:.25em; }
.radio-ligne div b{ display:block; font-size:.9rem; }
.radio-ligne div span{ display:block; color:var(--ink-dim); font-size:.8rem; margin-top:.15em; }

.burger-admin{ display:none; }
@media (max-width:860px){
  .admin{ flex-direction:column; }
  .side{ width:100%; min-height:auto; flex-direction:row; align-items:center; padding:.8rem 1rem; position:sticky; top:0; z-index:20; }
  .side__brand{ padding:0; margin-right:auto; }
  /* flex-direction:column (pas row) : à 8 liens, une seule ligne déborderait hors écran sans
     moyen d'atteindre les derniers (SEO, Visibilité, Voir le site, Déconnexion) - corrigé le
     2026-10-08 après l'avoir repéré en testant le menu mobile avec le nouveau nombre de liens. */
  .side nav{ display:none; flex-direction:column; position:fixed; top:56px; left:0; right:0; max-height:calc(100vh - 56px); overflow-y:auto; background:var(--bg-2); border-bottom:1px solid var(--line); padding:.6rem; z-index:19; }
  .side nav.is-open{ display:flex; }
  .side nav a{ padding:.8em .9em; border-radius:8px; }
  .side__qui{ display:none; }
  .burger-admin{ display:block; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:.4em .7em; font-size:1.1rem; }
  .main{ padding:1.4rem 1.1rem; }
  table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ---- calendrier des réservations ---- */
.cal-tete{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1rem; }
.cal-grille{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.cal-entete{ text-align:center; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); padding-bottom:.3rem; }
.cal-jour{ min-height:64px; border:1px solid var(--line); border-radius:8px; padding:.4rem .5rem; background:var(--bg-2); }
.cal-jour--vide{ border:0; background:transparent; }
.cal-jour--plein{ cursor:pointer; border-color:var(--copper); background:rgba(221,127,63,.1); transition:background .2s; }
.cal-jour--plein:hover{ background:rgba(221,127,63,.2); }
.cal-jour__num{ display:block; font-weight:700; font-size:.85rem; }
.cal-jour__info{ display:block; font-size:.68rem; color:var(--copper); margin-top:.3rem; line-height:1.3; }
@media (max-width:620px){
  .cal-grille{ gap:.25rem; }
  .cal-jour{ min-height:48px; padding:.3rem; }
  .cal-jour__info{ font-size:.6rem; }
}