/* Studio M Coiffure — theme de la page RDV clientes
   Ivoire + blush aquarelle, rose gold, filets dores, Montserrat (comme le logo). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #fbf7f4;
  --card: #ffffff;
  --border: #eadcd6;
  --text: #2b2426;
  --muted: #8a7a76;
  --accent: #b76e79;
  --accent-dark: #9a5562;
  --gold: #bfa47a;
  --blush: #f7e6e1;
  --green: #3f7d5a;
  --danger: #b4233a;
  --ink: #231f20;
  --rosegold: linear-gradient(135deg, #d4a39a 0%, #b76e79 55%, #9a5562 100%);
  --goldline: linear-gradient(90deg, transparent, #cdb58f 20%, #b39468 50%, #cdb58f 80%, transparent);
}

html { background: var(--bg); }
body {
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(60vmax 45vmax at 50% -8%, rgba(242, 212, 204, 0.75), transparent 70%),
    radial-gradient(40vmax 30vmax at 110% 60%, rgba(247, 230, 225, 0.8), transparent 70%),
    var(--bg);
  color: var(--text);
  letter-spacing: 0.01em;
}

/* ---------- En-tete : le logo ---------- */
.header {
  background: transparent;
  border-bottom: none;
  padding: 1.6rem 1rem 1.1rem;
  position: relative;
}
.header::before {
  content: "";
  display: block;
  width: min(280px, 72vw);
  aspect-ratio: 997 / 748;
  margin: 0 auto;
  background: url('/reservation/salon-logo.png') center / contain no-repeat;
}
.header::after {
  content: "";
  display: block;
  width: min(300px, 80%);
  height: 1px;
  margin: 1.1rem auto 0;
  background: var(--goldline);
}
.header .emoji { display: none; }
.header h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.header p {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ---------- Etapes ---------- */
.step-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.step-num {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
}

/* Cartes, puces, creneaux */
.barber-card, .chip, .slot, .home-card, .recap {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(80, 40, 40, 0.04), 0 4px 14px rgba(183, 110, 121, 0.06);
}
.barber-card { border-radius: 1rem; padding: 1rem 0.6rem; }
.barber-card .b-icon {
  width: 46px; height: 46px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blush);
  color: var(--accent);
  font-size: 1.15rem; font-weight: 600;
  border: 1px solid #efd6cf;
}
.barber-card .b-name { color: var(--ink); font-weight: 600; margin-top: 0.5rem; }
.barber-card .b-sub { color: var(--muted); }
.barber-card.selected,
.chip.selected {
  border-color: var(--accent);
  background: #fdf3f1;
  box-shadow: 0 0 0 3px rgba(183, 110, 121, 0.14);
}
.chip { border-radius: 0.8rem; }
.chip .c-day { color: var(--muted); font-weight: 600; letter-spacing: 0.08em; }
.chip .c-date { color: var(--ink); font-weight: 600; }
.chip.selected .c-date { color: var(--accent-dark); }

.slot { color: var(--ink); font-weight: 500; border-radius: 0.7rem; }
.slot.selected {
  background: var(--rosegold);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(154, 85, 98, 0.3);
}
.slot.taken { opacity: 0.35; }
.slots-empty { color: var(--muted); }

/* Liste d'attente */
.wl-box { background: #fdf3f1; border: 1px solid #efd0c9; }
.wl-box strong { color: var(--ink); }
.wl-btn { background: var(--rosegold); color: #fff; font-weight: 600; letter-spacing: 0.04em; }
.wl-msg { color: var(--ink) !important; }

/* Formulaire */
.form-group label { color: var(--muted); font-weight: 600; letter-spacing: 0.14em; }
.form-group input, .form-group textarea {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: inherit;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #b9aba7; }
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 110, 121, 0.14);
}

.error-msg { background: #fdecee; border: 1px solid #f1c2ca; color: var(--danger); }

/* Bouton principal rose gold */
.submit-btn {
  background: var(--rosegold);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(154, 85, 98, 0.28);
}
.submit-btn:disabled { background: #d9c9c5; color: #fff; opacity: 1; }

.recap b { color: var(--accent-dark); }

/* Confirmation */
.success h2 { color: var(--ink); font-weight: 600; letter-spacing: 0.06em; }
.success p { color: var(--muted); }
.success .s-recap { background: #fff; border: 1px solid var(--border); color: var(--text); }
.success .s-recap b { color: var(--accent-dark); }
#successRecap div { color: var(--ink) !important; background: #fdf3f1 !important; }
.again-btn {
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Accueil */
.home-card { border-radius: 1.1rem; }
.home-card.gold { border-color: #dfc9a6; background: #fffdf9; }
#giftCard { border-color: #efd0c9 !important; background: #fff !important; }
.hc-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blush);
  font-size: 1.35rem;
}
.hc-title { color: var(--ink); font-weight: 600; }
.hc-desc { color: var(--muted); }
.hc-badge { background: var(--rosegold); color: #fff; font-weight: 600; }
.hc-arrow { color: var(--accent); font-weight: 300; }

.loading { color: var(--muted); }

/* Pied de page discret */
body::after {
  content: "Studio M Coiffure";
  display: block;
  text-align: center;
  padding: 0 0 2rem;
  color: #bba9a4;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Icones au trait rose gold (a la place des emojis) sur l'accueil */
.hc-icon { font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 24px; background-color: var(--blush); }
.home-card:not(#aboCard):not(#giftCard) .hc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b76e79' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.3'/%3E%3C/svg%3E");
}
#aboCard .hc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b76e79' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E");
}
#giftCard .hc-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b76e79' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12.5V20h14v-7.5M12 8.5V20M12 8.5C10.5 5 7 4.5 7 6.8S10 8.5 12 8.5c2 0 5 .6 5-1.7S13.5 5 12 8.5z'/%3E%3C/svg%3E");
}
.header p { letter-spacing: 0.2em; line-height: 1.7; padding: 0 0.5rem; }

/* ================= Vitrine d'accueil ================= */
.sm-home { padding-bottom: 4.5rem; }
.sm-sec { margin-top: 2.6rem; text-align: center; }
.sm-sec[hidden] { display: none; }
.sm-kicker {
  color: var(--accent); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
}
.sm-title {
  color: var(--ink); font-size: 1.35rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; margin: 0.35rem 0 0.2rem;
}
.sm-title::after {
  content: ""; display: block; width: 64px; height: 1px; margin: 0.8rem auto 0;
  background: var(--goldline);
}
.sm-lead { color: var(--muted); font-size: 0.88rem; line-height: 1.7; margin: 0.9rem auto 1.1rem; max-width: 34ch; }

/* Galerie du salon : defilement horizontal au doigt */
.sm-gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0;
  border-radius: 1.1rem; scrollbar-width: none;
  box-shadow: 0 10px 30px rgba(120, 60, 70, 0.14);
}
.sm-gallery::-webkit-scrollbar { display: none; }
.sm-gallery img {
  flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  scroll-snap-align: center; display: block; cursor: zoom-in;
}
.sm-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.8rem; }
.sm-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e3cfc9; transition: all .25s; }
.sm-dots i.on { width: 18px; border-radius: 3px; background: var(--accent); }

/* Realisations : 2 photos cote a cote */
.sm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.2rem; }
.sm-duo figure { margin: 0; }
.sm-duo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%;
  border-radius: 1rem; display: block; cursor: zoom-in;
  box-shadow: 0 8px 22px rgba(120, 60, 70, 0.14);
}
.sm-duo figcaption {
  margin-top: 0.55rem; color: var(--ink); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Carte des prestations facon menu */
#smPrestas { margin-top: 1.1rem; text-align: left; }
.sm-cat {
  background: #fff; border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem 1.1rem 0.6rem; margin-bottom: 0.8rem;
  box-shadow: 0 4px 14px rgba(183, 110, 121, 0.06);
}
.sm-cat h3 {
  color: var(--accent-dark); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.sm-cat ul { list-style: none; }
.sm-cat li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.42rem 0; font-size: 0.9rem; color: var(--text); }
.sm-cat li i { flex: 1; border-bottom: 1px dotted #dcc9c3; transform: translateY(-3px); min-width: 12px; }
.sm-cat li b { font-weight: 600; color: var(--ink); white-space: nowrap; }

.sm-cta {
  margin-top: 0.6rem; width: 100%; padding: 0.95rem; border: none; border-radius: 999px;
  background: var(--rosegold); color: #fff; font-family: inherit; font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 22px rgba(154, 85, 98, 0.28);
}

/* Horaires */
.sm-hours {
  list-style: none; margin-top: 1.1rem; background: #fff; border: 1px solid var(--border);
  border-radius: 1rem; padding: 0.4rem 1.1rem; text-align: left;
}
.sm-hours li { display: flex; justify-content: space-between; padding: 0.6rem 0; font-size: 0.88rem; border-bottom: 1px solid #f3e9e6; }
.sm-hours li:last-child { border-bottom: none; }
.sm-hours li span { color: var(--muted); }
.sm-hours li b { color: var(--ink); font-weight: 500; }
.sm-hours li.today span, .sm-hours li.today b { color: var(--accent-dark); font-weight: 600; }

/* Bouton RDV collant */
.sm-sticky {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%); transition: transform .35s ease;
  width: min(440px, calc(100% - 32px)); padding: 0.95rem; border: none; border-radius: 999px;
  background: var(--rosegold); color: #fff; font-family: inherit; font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; z-index: 40; cursor: pointer;
  box-shadow: 0 10px 28px rgba(120, 50, 65, 0.35);
}
.sm-sticky.show { transform: translate(-50%, 0); }

/* Photo en grand */
.sm-lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(30, 20, 22, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sm-lightbox.show { opacity: 1; pointer-events: auto; }
.sm-lightbox img { max-width: 100%; max-height: 100%; border-radius: 0.8rem; }

/* Bouton musique */
.sm-music {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ecd9d3;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(120, 60, 70, 0.12);
}
.sm-music svg { width: 20px; height: 20px; }
.sm-music .sm-eq { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.sm-music .sm-eq i { width: 3px; background: currentColor; border-radius: 2px; animation: smEq 1s ease-in-out infinite; }
.sm-music .sm-eq i:nth-child(2) { animation-delay: -.35s; }
.sm-music .sm-eq i:nth-child(3) { animation-delay: -.7s; }
.sm-music.on { background: var(--rosegold); color: #fff; border-color: transparent; }
.sm-music.on svg { display: none; }
.sm-music.on .sm-eq { display: flex; }
.sm-music.hint { animation: smPulse 1.8s ease-in-out 3; }
@keyframes smEq { 0%, 100% { height: 4px; } 50% { height: 15px; } }
@keyframes smPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(183, 110, 121, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(183, 110, 121, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sm-music .sm-eq i, .sm-music.hint { animation: none; }
  .sm-music .sm-eq i { height: 10px; }
}

/* Carte des prestations : volets repliables */
details.sm-cat { padding: 0; }
details.sm-cat summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.1rem;
}
details.sm-cat summary::-webkit-details-marker { display: none; }
details.sm-cat summary h3 { margin: 0; flex: 1; }
details.sm-cat summary em { font-style: normal; color: var(--muted); font-size: 0.78rem; }
details.sm-cat summary::after {
  content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
details.sm-cat[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.sm-cat ul { padding: 0 1.1rem 0.7rem; border-top: 1px solid #f3e9e6; }
details.sm-cat li:first-child { padding-top: 0.7rem; }

/* Prestations a variantes : titre puis tailles/modeles en retrait */
.sm-cat li.sm-grp { padding-top: 0.75rem; padding-bottom: 0.1rem; }
.sm-cat li.sm-grp span { font-weight: 600; color: var(--ink); }
.sm-cat li.sm-var { padding: 0.28rem 0 0.28rem 0.9rem; font-size: 0.84rem; color: var(--muted); }
.sm-cat li.sm-var span { color: var(--text); }