/* ============================================================
   Design tokens (README.md — à conserver à l'identique)
   ============================================================ */
:root{
  --cream-1:#F7F2EC;
  --cream-2:#EFE9E1;
  --ink:#2B2420;
  --muted:#8A7A6B;
  --accent:#B1633E;
  --accent-dark:#8B4A2E;
  --border-1:#DDD0BE;
  --border-2:#E4D9C7;
  --text-soft:#4a3f37;
  --text-tagline:#5b4d42;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%;}
/* Empêche le zoom automatique d'iOS Safari au clic sur un champ
   (se déclenche dès qu'un champ de saisie a une taille de police < 16px) */
input,select,textarea{font-size:16px;}
body{
  background:var(--cream-2);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;}
.h-serif{font-family:'Playfair Display',serif;font-weight:600;color:var(--ink);}
a{color:var(--accent);}
a:hover{color:var(--accent-dark);}
button{font-family:'Inter',sans-serif;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- Bannière défilante ---------- */
.banner{height:32px;overflow:hidden;display:flex;align-items:center;}
.banner__track{
  white-space:nowrap;
  animation:marquee 16s linear infinite;
  font-size:12.5px;font-weight:600;
  padding-left:100%;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){
  .banner__track{animation:none;padding-left:16px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:230px;
  background-color:#cfc3b2;
  background-size:cover;
  background-position:center;
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,36,32,0) 35%,rgba(43,36,32,0.6) 100%);
}
.hero__text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:0 22px 18px;color:#fff;
}
.hero__name{font-family:'Playfair Display',serif;font-size:27px;letter-spacing:2.5px;}
.hero__subtitle{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.9;margin-top:6px;}

/* ---------- Layout général ---------- */
.page{max-width:520px;margin:0 auto;padding:0 0 106px;}
.tagline{padding:26px 22px 6px;font-family:'Playfair Display',serif;font-size:15px;line-height:1.65;color:var(--text-tagline);}

section.agenda,section.tarifs,section.portfolio,section.contact{
  padding:40px 22px 8px;border-top:1px solid var(--border-2);margin-top:24px;
}
section.agenda{border-top:none;margin-top:0;padding-top:22px;}

.agenda__head,.portfolio__head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.next-available-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;background:var(--accent);color:#fff;border:none;border-radius:4px;
  font-size:12.5px;font-weight:600;margin-bottom:18px;cursor:pointer;
}
.next-available-btn:hover{background:var(--accent-dark);}

/* ---------- Toggle Liste / Agenda ---------- */
.toggle{display:flex;gap:4px;background:#EFE6D8;border-radius:8px;padding:3px;}
.toggle__btn{
  padding:6px 12px;border-radius:6px;border:none;background:none;
  font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;
}
.toggle__btn.is-active{background:var(--ink);color:#fff;}

/* ---------- Navigation semaine / mois ---------- */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.week-nav__label{font-size:12.5px;color:var(--text-tagline);font-weight:500;text-transform:capitalize;}
.round-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border-1);
  background:#fff;color:var(--ink);font-size:14px;cursor:pointer;
}
.round-btn:disabled{color:var(--border-1);cursor:default;}

/* ---------- Bande de jours (vue Liste) ---------- */
.day-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.day-chip{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 14px;border-radius:12px;border:1px solid var(--border-1);
  background:#fff;cursor:pointer;
}
.day-chip .short{font-size:11px;font-weight:500;color:var(--text-tagline);}
.day-chip .num{font-size:13px;font-family:'Playfair Display',serif;color:var(--ink);}
.day-chip.is-selected{background:var(--ink);border-color:var(--ink);}
.day-chip.is-selected .short,.day-chip.is-selected .num{color:#fff;}
.day-chip.is-disabled{opacity:.35;cursor:default;}
.day-chip.is-full{opacity:.4;}

/* ---------- Calendrier mensuel (vue Agenda) ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;}
.cal-grid--headers div{text-align:center;font-size:10px;color:var(--muted);padding-bottom:4px;}
.cal-day{
  aspect-ratio:1;border-radius:6px;border:1px solid var(--border-1);background:#fff;
  color:var(--ink);font-family:'Playfair Display',serif;font-size:13px;cursor:pointer;
}
.cal-day.is-selected{background:var(--ink);color:#fff;border-color:var(--ink);}
.cal-day.is-disabled{opacity:.3;cursor:default;}
.cal-day.is-full{opacity:.35;}
.cal-day.is-empty{visibility:hidden;}

/* ---------- Créneaux du jour ---------- */
.day-label{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border-2);
  font-size:14px;font-weight:600;color:var(--ink);font-family:'Playfair Display',serif;
}
.slots{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.slot-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--border-1);border-radius:4px;background:#fff;
}
.slot-row.is-booked{opacity:.45;}
.slot-row .time{font-family:'Playfair Display',serif;font-size:17px;color:var(--ink);}
.slot-row .duration{font-size:11px;color:var(--muted);margin-top:3px;}
.slot-btn{
  padding:10px 16px;border-radius:2px;border:none;font-size:11.5px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;cursor:pointer;
  background:var(--accent);color:#fff;
}
.slot-btn:disabled{background:var(--border-1);color:var(--muted);cursor:default;}
.empty-note{font-size:13px;color:var(--muted);padding:8px 2px;}

/* ---------- Portfolio ---------- */
.portfolio__filters{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px;}
.portfolio__filters::-webkit-scrollbar{display:none;}
.portfolio__filter{
  flex:none;padding:7px 14px;border-radius:20px;border:1px solid var(--border-1);
  background:#fff;font-size:11.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;
}
.portfolio__filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.portfolio__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.portfolio__item{margin:0;}
.portfolio__item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;display:block;cursor:zoom-in;}
.portfolio__item figcaption{
  font-family:ui-monospace,monospace;font-size:8.5px;color:var(--muted);
  margin-top:5px;text-align:center;text-transform:uppercase;
}

/* ---------- Lightbox (zoom portfolio) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(20,16,13,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.lightbox[hidden]{display:none;}
.lightbox img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;
  touch-action:pinch-zoom pan-x pan-y; /* autorise le pincement natif pour voir le détail */
}
.lightbox__close{
  position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;
}
.lightbox__nav:hover{background:rgba(255,255,255,.22);}
.lightbox__nav[hidden]{display:none;}
.lightbox__nav--prev{left:10px;}
.lightbox__nav--next{right:10px;}
@media (max-width:600px){
  .lightbox__nav{width:40px;height:40px;font-size:26px;}
  .lightbox__nav--prev{left:4px;}
  .lightbox__nav--next{right:4px;}
}

/* ---------- Grille tarifaire (PDF ou photo téléversés en back-office) ---------- */
.tarifs__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.tarifs__image{width:100%;border-radius:4px;border:1px solid var(--border-1);display:block;cursor:zoom-in;}
.tarifs__pdf-frame{
  position:relative;border-radius:4px;border:1px solid var(--border-1);
  background:#fff;overflow:hidden;
}
.tarifs__pdf-frame embed{
  width:100%;height:clamp(420px,70vh,680px);display:block;pointer-events:none;
}
.tarifs__pdf-frame__hit{
  position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  border:none;background:none;cursor:zoom-in;
}
.tarifs__pdf-frame__badge{
  position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;
  background:rgba(20,16,13,.72);color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}

/* ---------- Accès & contact ---------- */
.contact__card{
  background:#fff;border:1px solid var(--border-1);border-radius:4px;padding:18px;
  font-size:13px;line-height:1.9;color:var(--text-soft);margin-top:14px;
}
.contact__hours{margin-top:10px;color:var(--muted);}
.contact-form{margin-top:6px;}
/* Champ honeypot anti-spam : invisible pour une personne, souvent rempli par un robot */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Nav sticky du bas (site public) ---------- */
.site-bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;background:#fff;border-top:1px solid var(--border-2);
  max-width:520px;margin:0 auto;
}
.site-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px 12px;border:none;background:none;color:var(--muted);cursor:pointer;
}
.site-nav-item span{font-size:9.5px;font-weight:500;text-align:center;line-height:1.2;}
.site-nav-item.is-active{color:var(--accent);}

/* ---------- Feuille de réservation / compte (fenêtre centrée) ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(43,36,32,.5);z-index:30;}
.sheet{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:31;
  width:min(92vw,480px);max-height:82vh;overflow:auto;
  background:var(--cream-1);border-radius:16px;
  box-shadow:0 30px 70px rgba(43,36,32,.35);
  padding:30px 22px 28px;
}
.sheet__close{
  position:absolute;top:14px;right:14px;z-index:5;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border-1);background:#fff;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(43,36,32,.08);transition:background .15s;
}
.sheet__close:hover{background:var(--cream-2);}
.sheet__content{padding-top:6px;}
.sheet h3{font-family:'Playfair Display',serif;font-size:19px;color:var(--ink);}
.sheet .sub{font-size:13px;color:var(--muted);margin-top:6px;}
.field{
  width:100%;padding:13px 14px;border:1px solid var(--border-1);border-radius:2px;
  font-family:'Inter',sans-serif;font-size:16px;background:#fff;margin-bottom:12px;
}
textarea.field{resize:vertical;}
.field-note{font-size:10.5px;color:var(--muted);margin:-4px 0 14px;}

/* ---------- Champ mot de passe avec bouton "afficher/masquer" ---------- */
.password-field{position:relative;margin-bottom:12px;}
.password-field .field{margin-bottom:0;padding-right:44px;}
.password-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:32px;height:32px;border:none;background:transparent;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0;
}
.password-toggle:hover{background:var(--border-1);}
.btn-primary{
  width:100%;padding:15px;background:var(--accent);color:#fff;border:none;border-radius:2px;
  font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;
}
.btn-primary:disabled{background:var(--border-1);color:var(--muted);cursor:default;}
.btn-dark{
  width:100%;padding:15px;background:var(--ink);color:#fff;border:none;border-radius:2px;
  font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-top:10px;
}
.btn-ghost{
  width:100%;padding:12px;background:none;border:1px solid var(--border-1);border-radius:2px;
  color:var(--ink);font-size:12.5px;cursor:pointer;margin-top:10px;
}
.btn-text{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:6px;width:100%;}
.recap{
  border:1px solid var(--border-1);border-radius:4px;padding:16px;background:#fff;
  font-size:13px;line-height:1.9;color:var(--text-soft);margin-top:16px;
}
.recap .quote{margin-top:8px;color:var(--muted);font-style:italic;}
.photo-label{
  display:inline-block;padding:11px 16px;border:1px solid var(--border-1);border-radius:2px;
  font-size:12px;color:var(--ink);cursor:pointer;background:#fff;
}
.photo-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.photo-thumb{position:relative;width:56px;height:56px;}
.photo-thumb img{width:56px;height:56px;object-fit:cover;border-radius:3px;border:1px solid var(--border-1);display:block;}
.photo-thumb button{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;
  background:var(--ink);color:#fff;font-size:10px;cursor:pointer;line-height:1;
}
.form-error{font-size:12px;color:var(--accent);margin:-4px 0 10px;}
.email-preview{margin-top:20px;border:1px solid var(--border-1);border-radius:4px;padding:16px;background:#fff;}
.email-preview .eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.email-preview .body{margin-top:10px;font-size:12.5px;color:var(--text-soft);line-height:1.7;}
.email-preview .note{margin-top:10px;font-size:10.5px;font-style:italic;color:var(--muted);}

/* ---------- Mon compte ---------- */
.link-like{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;font-size:12.5px;}
.section-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.booking-card{background:#fff;border:1px solid var(--border-1);border-radius:4px;padding:13px;}
.booking-card .date{font-size:13px;color:var(--ink);font-weight:600;}
.booking-card .time{font-size:12px;color:var(--muted);margin-top:2px;}
.account-menu{margin-top:18px;display:flex;flex-direction:column;border:1px solid var(--border-1);border-radius:4px;overflow:hidden;background:#fff;}
.account-menu__item{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 16px;border:none;border-bottom:1px solid var(--border-2);background:none;
  font-size:13.5px;color:var(--ink);cursor:pointer;text-align:left;
}
.account-menu__item:last-child{border-bottom:none;}
.account-menu__item .chev{color:var(--muted);}
.account-menu__item.is-danger{color:var(--accent);font-weight:600;}

/* ---------- Desktop ---------- */
@media (min-width:640px){
  body{background:var(--cream-2);}
  .page{max-width:900px;}
  .site-bottom-nav{max-width:900px;}
  .hero{height:320px;border-radius:0 0 12px 12px;overflow:hidden;}
  .portfolio__grid{grid-template-columns:repeat(4,1fr);}
  .sheet{width:min(88vw,600px);max-height:78vh;padding:38px 40px 36px;border-radius:20px;}
  .sheet h3{font-size:23px;}
  .sheet .sub{font-size:14px;}
  .field{padding:15px 16px;font-size:15px;}
  .btn-primary,.btn-dark{padding:16px;font-size:13px;}
  .account-menu__item{padding:18px 20px;font-size:14.5px;}
  .sheet__close{top:20px;right:20px;}
}