:root {
  --bg: #0b0a08;
  --bg-2: #13110d;
  --card: #17140f;
  --card-2: #1e1a13;
  --line: rgba(212, 167, 58, .18);
  --line-soft: rgba(255, 255, 255, .07);
  --text: #f3efe6;
  --muted: #a39d90;
  --gold: #d4a73a;
  --gold-2: #f2d27b;
  --gold-3: #a8781c;
  --gold-grad: linear-gradient(135deg, #f2d27b 0%, #d4a73a 45%, #a8781c 100%);
  --radius: 14px;
  --display: "Bebas Neue", Impact, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section { padding: 96px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(2.6rem, 6vw, 4rem); margin-top: 10px; }
.section-head p { color: var(--muted); max-width: 520px; margin-top: 10px; }
.link-arrow { color: var(--gold); font-weight: 600; font-size: .95rem; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.link-arrow:hover { color: var(--gold-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 10px;
  font-weight: 600; font-size: .95rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { background: var(--gold-grad); color: #1a1204; box-shadow: 0 8px 30px -10px rgba(212, 167, 58, .6); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(212, 167, 58, .75); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn-sm { padding: 10px 16px; font-size: .88rem; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- Announcement ---------- */
/* L'annonce doit se voir, pas dominer. En or plein sur toute la largeur, elle
   devenait l'élément le plus lumineux de la page — pour un avis temporaire. */
.announce {
  background: #15120c; color: var(--gold-2);
  border-bottom: 1px solid rgba(212,167,58,.3);
  text-align: center; font-size: .82rem; font-weight: 500;
  letter-spacing: .01em; line-height: 1.45;
  padding: 8px 16px;
}
.announce::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-right: 9px;
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 10, 8, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header .container { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 62px; width: auto; }
.brand-fallback { font-family: var(--display); font-size: 1.8rem; letter-spacing: .04em; }
.nav { display: flex; gap: 34px; }
.nav a { font-size: .95rem; color: #d9d3c6; font-weight: 500; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--gold); transition: width .25s; }
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.tel-link { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #d9d3c6; }
.tel-link svg { width: 16px; height: 16px; color: var(--gold); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); align-items: center; justify-content: center; }
.menu-btn svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none; position: fixed; inset: 84px 0 0 0; background: var(--bg); z-index: 49;
  padding: 30px 20px; flex-direction: column; gap: 6px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--display); font-size: 2.4rem; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mobile-nav .btn { margin-top: 24px; font-family: var(--sans); font-size: 1rem; border: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100vh - 84px); display: flex; align-items: center; overflow: hidden; }
/* Le fond de la bannière est décoratif : il ne doit jamais recevoir un clic.
   Son voile (::before, z-index: 1) passait AU-DESSUS du contenu, qui n'avait pas de
   z-index : les boutons « Réserver maintenant » et « Voir les services » et le lien
   de l'adresse étaient recouverts et ne répondaient pas. pointer-events est hérité
   par ::before et ::after. On ne donne SURTOUT PAS de z-index à .hero-inner : cela
   créerait un groupe d'affichage isolé, et le logo (mix-blend-mode: lighten, qui
   rend son fond noir invisible) ne se mélangerait plus avec la photo : il
   apparaîtrait dans un rectangle noir. */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* Le voile était uniforme : la photo du salon devenait une bouillie sombre.
   Ici elle respire, et s'assombrit franchement derrière le texte pour garder
   le contraste de lecture.

   Le centre du voile valait .30 pour laisser la photo respirer en haut — sauf
   que c'est exactement là que se trouve le logo, et que le logo est posé
   `mix-blend-mode: lighten`. Le fichier n'a aucune transparence : c'est ce
   mélange qui efface son fond noir. Or « lighten » garde le plus clair des
   deux, donc dès que la photo est plus claire que les parties sombres du
   logo — le plafond et ses néons, sur téléphone —, elle traverse le dessin et
   le logo devient translucide.

   Passer le fichier en PNG/WebP alpha ne corrige rien : avec un alpha dérivé
   de la luminance, un pixel de logo à 40 sur un fond à 200 donne 209 en
   composition alpha contre 200 en lighten. Ce serait plus clair, pas moins.
   La seule vraie correction est d'assombrir la photo derrière le logo. */
.hero-bg img { filter: saturate(.9) contrast(1.06); }
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,0) 28%, rgba(11,10,8,0) 72%, rgba(11,10,8,.55) 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 22%, rgba(11,10,8,.62) 0%, rgba(11,10,8,.80) 55%, rgba(11,10,8,.94) 100%),
    linear-gradient(180deg, rgba(11,10,8,.62) 0%, rgba(11,10,8,.48) 22%, rgba(11,10,8,.86) 72%, var(--bg) 100%);
}
.hero-inner { position: relative; text-align: center; padding: 70px 0 90px; width: 100%; }
.hero-logo { width: min(340px, 72vw); margin: 0 auto 18px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.hero h1 { font-size: clamp(2.5rem, 8.4vw, 6.4rem); margin: 12px auto 16px; max-width: 900px; }
/* « Belle coupe, » et « bel homme » restent chacun d’un bloc : couper
   « bel / homme » en fin de ligne casse la phrase la plus importante du site.
   Sur un écran étroit, chaque moitié prend sa propre ligne — un groupe
   insécable plus large que l’écran élargirait toute la page. */
.hero h1 .nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  .hero h1 .nowrap { display: block; }
}
.hero-sub { color: #d6d0c3; font-size: clamp(1rem, 2.2vw, 1.18rem); max-width: 620px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-meta {
  margin-top: 28px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 10px 14px;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: rgba(19,17,13,.7);
  padding: 8px 16px; border-radius: 999px; font-size: .9rem;
}
.stars { color: var(--gold-2); letter-spacing: 2px; }
.hero-addr { color: var(--muted); font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.hero-addr svg { width: 15px; height: 15px; color: var(--gold); }

/* ---------- Stats ---------- */
.stats { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.stats .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 34px 10px; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat strong { display: block; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 400; line-height: 1; }
.stat span { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ---------- Services ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.tab {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-soft);
  font-size: .9rem; color: #cfc9bc; transition: all .2s;
}
.tab:hover { border-color: var(--line); color: #fff; }
.tab.active { background: var(--gold-grad); color: #1a1204; border-color: transparent; font-weight: 600; }

.grid-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc {
  position: relative; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s, background .25s;
}
.svc:hover { border-color: var(--line); transform: translateY(-3px); background: var(--card-2); }
.svc.vedette { border-color: rgba(212,167,58,.35); }
.badge {
  position: absolute; top: -11px; right: 20px;
  background: var(--gold-grad); color: #1a1204; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
}
.svc-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.svc h3 { font-size: 1.85rem; }
.price { font-family: var(--display); font-size: 1.9rem; line-height: 1; white-space: nowrap; }
.price small { font-family: var(--sans); font-size: .7rem; color: var(--muted); display: block; text-align: right; letter-spacing: .05em; margin-top: 4px; }
.svc-resume { color: var(--muted); font-size: .94rem; margin: 9px 0 0; }
.svc-meta { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #cfc9bc; }
.svc-meta svg { width: 15px; height: 15px; color: var(--gold); }
.svc ul { list-style: none; margin: 14px 0 0; display: none; }
.svc.open ul { display: block; }
.svc li { position: relative; padding-left: 20px; font-size: .9rem; color: #cfc9bc; margin-bottom: 6px; }
.svc li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--gold); }
.svc-actions { margin-top: auto; padding-top: 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
/* Dix cartes, dix boutons blancs identiques : c’était un champ de boutons qui
   rivalisait avec l’action principale. En or discret, le geste reste évident
   et la grille redevient lisible. */
.svc-actions .btn-ghost {
  background: transparent; color: var(--gold-2);
  border-color: rgba(212,167,58,.32);
}
.svc-actions .btn-ghost:hover {
  background: rgba(212,167,58,.10); border-color: rgba(212,167,58,.6); color: var(--gold-2);
}
.more-btn { font-size: .86rem; color: var(--gold); font-weight: 600; }
.more-btn:hover { color: var(--gold-2); }

/* ---------- Plans ---------- */
.plans { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
/* La grille s’adapte au nombre de forfaits. En deux colonnes fixes, l’unique
   forfait actuel était écrasé dans la moitié gauche avec 300 px de vide à côté. */
.grid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; max-width: 900px; }
.plan {
  position: relative; border-radius: 18px; padding: 34px; background: var(--card);
  border: 1px solid var(--line-soft); overflow: hidden;
}
.plan.vedette { border-color: rgba(212,167,58,.45); background: linear-gradient(180deg, rgba(212,167,58,.10), var(--card) 60%); }
.plan h3 { font-size: 2.3rem; }
.plan .amount { font-family: var(--display); font-size: 4rem; line-height: 1; margin: 12px 0 4px; }
.plan .amount small { font-family: var(--sans); font-size: .95rem; color: var(--muted); letter-spacing: 0; text-transform: none; }
.plan ul { list-style: none; margin: 22px 0 28px; }
.plan li { display: flex; gap: 12px; margin-bottom: 12px; color: #dcd6c9; }
.plan li svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 2px; }
.plans-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.plans-visual { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3/4; }
.plans-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-img { position: relative; }
.about-img img { border-radius: 18px; aspect-ratio: 4/5; object-fit: cover; width: 100%; border: 1px solid var(--line-soft); }
.about-img .tag {
  position: absolute; left: -18px; bottom: 30px; background: var(--bg); border: 1px solid var(--line);
  padding: 16px 20px; border-radius: 14px;
}
.about-img .tag strong { font-family: var(--display); font-size: 2.4rem; display: block; line-height: 1; font-weight: 400; }
.about-img .tag span { font-size: .8rem; color: var(--muted); }
.about h2 { font-size: clamp(2.6rem, 5.5vw, 3.8rem); margin: 12px 0 22px; }
.about p { color: #cfc9bc; margin-bottom: 16px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 32px; }
.value { border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; background: var(--card); }
.value svg { width: 24px; height: 24px; color: var(--gold); margin-bottom: 8px; }
.value strong { display: block; font-size: .92rem; }
.value span { font-size: .8rem; color: var(--muted); }
.langs { font-size: .88rem; color: var(--muted); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery button { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-soft); padding: 0; aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery button:hover img { transform: scale(1.06); }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 88vh; max-width: 92vw; border-radius: 10px; }
.lightbox-close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); font-size: 1.6rem; line-height: 1; }

/* ---------- Testimonial ---------- */
.quote { text-align: center; max-width: 860px; margin: 0 auto; }
.quote .stars { font-size: 1.4rem; }
.quote blockquote { font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.55; margin: 20px 0; color: #ece6da; font-weight: 300; }
.quote cite { color: var(--muted); font-style: normal; font-size: .9rem; }

/* ---------- Info (hours + contact) ---------- */
.info-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; }
.panel { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px; }
.panel h3 { font-size: 1.9rem; margin-bottom: 18px; }
.hours-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); font-size: .95rem; }
.hours-row:last-of-type { border-bottom: 0; }
.hours-row.today { color: var(--gold-2); font-weight: 600; }
.hours-row .closed { color: var(--muted); }
.walkin { margin-top: 18px; padding: 14px; border-radius: 10px; background: rgba(212,167,58,.08); border: 1px solid var(--line); font-size: .88rem; }
.walkin strong { color: var(--gold-2); display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 2px; }
.contact-line { display: flex; gap: 14px; padding: 12px 0; align-items: start; }
.contact-line svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 3px; }
.contact-line small { display: block; color: var(--muted); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-line a:hover { color: var(--gold-2); }
.socials { display: flex; gap: 10px; margin-top: 12px; }
.social { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; transition: all .2s; }
.social:hover { background: var(--gold-grad); color: #1a1204; border-color: transparent; }
.social svg { width: 20px; height: 20px; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); min-height: 340px; }
.map-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; height: 100%; min-height: 340px; padding: 24px; background: var(--card); }
.map-consent .hint { max-width: 34ch; }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
.policy { margin-top: 18px; list-style: none; }
.policy li { font-size: .85rem; color: var(--muted); padding-left: 18px; position: relative; margin-bottom: 6px; }
.policy li::before { content: "•"; color: var(--gold); position: absolute; left: 4px; }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: 100px 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(212,167,58,.14), transparent 65%); }
.cta .container { position: relative; }
.cta h2 { font-size: clamp(2.8rem, 7vw, 5rem); margin-bottom: 14px; }
.cta p { color: var(--muted); margin-bottom: 30px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); background: #080705; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer img { height: 90px; width: auto; margin-bottom: 14px; }
.footer p, .footer li { color: var(--muted); font-size: .9rem; }
.footer h4 { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 600; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a:hover { color: var(--gold-2); }
.footer-bottom { border-top: 1px solid var(--line-soft); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }

/* ---------- Floating mobile CTA ---------- */
.float-cta { display: none; }

/* ---------- Reveal ---------- */
/* L’état masqué n’est appliqué que si le script tourne (il pose .js sur
   <html> avant le rendu). Sans ce garde-fou, une erreur de script laisserait
   une vingtaine de blocs — forfaits, galerie — invisibles pour toujours. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   RESERVATION
   ========================================================= */
/* Page de tâche, pas page de marketing : 69 % du premier écran d’un téléphone
   passait en titre, compteur d’étape et fil d’étapes avant le premier service.
   Le visiteur a déjà cliqué « Réserver » : il sait où il est. */
.booking { padding: 60px 0 100px; }
.booking-title { text-align: center; font-size: clamp(2.1rem, 6vw, 4.6rem); }
.step-count { text-align: center; margin: 10px 0 14px; }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 0 auto 36px; position: relative; }
.stepper::before { content: ""; position: absolute; top: 20px; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-soft); }
.step { text-align: center; position: relative; }
.step .hex {
  width: 40px; height: 40px; margin: 0 auto 10px; display: grid; place-items: center;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: #221e17; color: var(--muted); font-weight: 600; font-size: .9rem; position: relative;
}
.step.active .hex { background: var(--gold-grad); color: #1a1204; }
.step.done .hex { background: #3a3122; color: var(--gold-2); }
.step span { font-size: .84rem; color: var(--muted); }
.step.active span { color: var(--text); font-weight: 600; }

.booking-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.booking-main h2 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 22px; }
.pane { display: none; }
.pane.active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pick-group { margin-bottom: 26px; }
.pick-group h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 600; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick {
  display: flex; align-items: start; gap: 14px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px;
  transition: border-color .2s, background .2s;
}
.pick:hover { border-color: var(--line); }
.pick[aria-checked="true"] { border-color: var(--gold); background: rgba(212,167,58,.07); }
.check { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #4a4336; flex: none; margin-top: 2px; display: grid; place-items: center; }
.pick[aria-checked="true"] .check { background: var(--gold-grad); border-color: transparent; }
.check svg { width: 13px; height: 13px; color: #1a1204; opacity: 0; }
.pick[aria-checked="true"] .check svg { opacity: 1; }
.pick-body { flex: 1; min-width: 0; }
.pick-row { display: flex; justify-content: space-between; gap: 10px; }
.pick-name { font-weight: 500; }
.pick-price { font-family: var(--display); font-size: 1.35rem; color: var(--gold-2); line-height: 1.1; white-space: nowrap; }
.pick-dur { font-size: .8rem; color: var(--muted); display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.pick-dur svg { width: 13px; height: 13px; }

.cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cal { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; padding: 20px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-head strong { font-family: var(--display); font-size: 1.6rem; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-soft); display: grid; place-items: center; }
.cal-nav button:hover:not([disabled]) { border-color: var(--gold); }
.cal-nav button[disabled] { opacity: .3; cursor: default; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { font-size: .72rem; color: var(--muted); padding: 6px 0; text-transform: uppercase; }
.cal-day { aspect-ratio: 1; border-radius: 8px; font-size: .9rem; display: grid; place-items: center; }
.cal-day:not([disabled]):hover { background: #2a251c; }
.cal-day[disabled] { color: #4d473c; text-decoration: line-through; cursor: default; }
.cal-day.empty { visibility: hidden; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--line); }
.cal-day.selected { background: var(--gold-grad) !important; color: #1a1204; font-weight: 700; }
.slots { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; padding: 20px; }
.slots h4 { font-size: .95rem; margin-bottom: 14px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.slot { padding: 10px 6px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: .88rem; }
.slot:hover { border-color: var(--gold); }
.slot.selected { background: var(--gold-grad); color: #1a1204; border-color: transparent; font-weight: 600; }
.slots-empty { color: var(--muted); font-size: .9rem; }
/* Etat d’attente : tant qu’aucun jour n’est choisi, la boîte explique ce
   qu’elle attend au lieu de rester un cadre vide. */
.slots.attente { display: flex; flex-direction: column; }
.slots.attente .slot-grid { display: block; flex: 1; min-height: 130px; }
.slots-attente {
  height: 100%; min-height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--muted); font-size: .88rem;
  line-height: 1.5; padding: 0 10px;
}
.slots-attente svg { width: 26px; height: 26px; color: rgba(212,167,58,.55); }
.note { font-size: .82rem; color: var(--muted); margin-top: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .86rem; color: #d6d0c3; }
.field input, .field textarea {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 13px 14px; color: var(--text); font: inherit; font-size: .95rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 96px; resize: vertical; }
.field .err { color: #e4584a; font-size: .8rem; display: none; }
.field .aide { color: var(--muted); font-size: .8rem; display: block; margin-top: 6px; }
.field.invalid .aide { display: none; }
.field.invalid input { border-color: #e4584a; }
.field.invalid .err { display: block; }
.agree { display: flex; gap: 12px; align-items: start; margin-top: 18px; font-size: .88rem; color: #cfc9bc; }
/* flex-shrink: 0 — sans lui, le flexbox écrase la case à 13 px de large.
   Une case de consentement doit rester facile à viser au pouce. */
.agree input { margin-top: 3px; accent-color: var(--gold); width: 20px; height: 20px; flex: 0 0 20px; }

/* Les choix facultatifs du client : visuellement détachés de l'acceptation
   obligatoire, pour qu'on voie tout de suite que ce sont des décisions à part. */
.choix {
  margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--line-soft);
  border-radius: 14px; background: rgba(255,255,255,.02);
}
.choix legend {
  padding: 0 8px; font-family: var(--display); letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-2); font-size: .82rem;
}
.choix .agree { margin-top: 0; }
.choix .agree + .agree { margin-top: 12px; }

.recap { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; padding: 24px; }
.recap-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.recap-row span:first-child { color: var(--muted); }
.recap-row span:last-child { text-align: right; }
.success { text-align: center; padding: 40px 20px; }
.success .ok { width: 72px; height: 72px; border-radius: 50%; background: var(--gold-grad); display: grid; place-items: center; margin: 0 auto 20px; color: #1a1204; }
.success .ok svg { width: 34px; height: 34px; }
.success h2 { margin-bottom: 12px; }
.success p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }
.send-options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.summary { position: sticky; top: 104px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.summary-barber { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.summary-barber img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: #000; }
.summary-barber strong { display: block; }
.summary-barber span { font-size: .84rem; color: var(--muted); }
.summary h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; font-weight: 600; }
.sum-item { display: flex; justify-content: space-between; font-size: .9rem; padding: 5px 0; gap: 10px; }
.sum-empty { font-size: .88rem; color: var(--muted); }
.sum-when { font-size: .9rem; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
.sum-total strong { font-family: var(--display); font-size: 2rem; font-weight: 400; }
.sum-tax { font-size: .76rem; color: var(--muted); }

.booking-nav { display: flex; justify-content: space-between; margin-top: 30px; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-services { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-grid .map { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .plans-layout { grid-template-columns: 1fr; }
  .plans-visual { display: none; }
}
@media (max-width: 860px) {
  .nav, .tel-link, .header-cta .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-img .tag { left: 14px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
  .float-cta {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
  }
  .footer { padding-bottom: 100px; }
}
@media (max-width: 640px) {
  .section { padding: 70px 0; }
  .container { padding: 0 16px; }
  .header .container { height: 72px; }
  .brand img { height: 50px; }
  .mobile-nav { inset: 72px 0 0 0; }
  .stats .container { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .grid-services, .grid-plans, .info-grid, .pick-grid, .form-grid { grid-template-columns: 1fr; }
  /* Les cartes passent sur une seule colonne : elles deviennent larges, et
     l'icône de 24 px empilée au-dessus du titre flottait toute seule dans un
     coin vide. On la met à gauche du texte, où elle sert de repère au lieu de
     décorer. L'icône occupe les deux lignes de la carte pour rester centrée
     sur l'ensemble titre + description. */
  .values { grid-template-columns: 1fr; }
  .value {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; align-items: center; padding: 15px 16px;
  }
  .value svg { width: 27px; height: 27px; margin-bottom: 0; grid-row: 1 / span 2; }
  .value strong { grid-column: 2; }
  .value span { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .plan { padding: 26px; }
  .stepper::before { display: none; }
  .step span { font-size: .72rem; }
  .booking-nav .btn { flex: 1; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Logo sur fond noir : on le fond dans le décor sombre */
.brand img, .hero-logo, .footer img, .summary-barber img { mix-blend-mode: lighten; }
/* Le fichier du logo fait 1492 x 1054 et le dessin n'occupe que les lignes
   146 a 850 : 14 % de vide en haut, 19 % en bas. Le CSS declarait un rapport
   1492/760 qui ne correspondait a rien, et l'ecart etait rattrape en
   agrandissant l'image de 1,35x dans un en-tete qui coupe ce qui depasse.
   Resultat : logo rogne sur telephone. Valeurs ci-dessous mesurees sur le
   fichier reel. */
.brand { overflow: visible; }
.brand img {
  height: 64px; width: auto; transform: none;
  aspect-ratio: 1492 / 703;
  object-fit: cover; object-position: 50% 47.2%;
}
.hero-logo { width: min(460px, 86vw); margin: -30px auto -10px; }
.footer img { height: 120px; margin-left: -28px; }
@media (max-width: 640px) { .brand img { height: 56px; } }
.header { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header .container { overflow: visible; }
section[id] { scroll-margin-top: 84px; }
.plan { overflow: visible; }
.stepper { list-style: none; }

/* Logo du hero : meme recadrage mesure que dans l'en-tete. Il occupait 88 %
   de la largeur sur un telephone — deux logos empiles dans le premier ecran,
   puisque l'en-tete en porte deja un. Reduit, il laisse le titre devenir le
   point d'entree. */
.hero-logo {
  width: min(360px, 62vw);
  height: auto;
  aspect-ratio: 1492 / 703;
  object-fit: cover;
  object-position: 50% 47.2%;
  margin: 0 auto 18px;
}

/* ---------- Créneaux pris, alertes, avis ---------- */
.slot.taken {
  text-decoration: line-through;
  color: #5d564a;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px);
  border-color: var(--line-soft);
  cursor: not-allowed;
}
.slot.taken:hover { border-color: var(--line-soft); }
.cal-day.full { color: #5d564a; }
.alert {
  background: rgba(239, 139, 115, .12);
  border: 1px solid rgba(239, 139, 115, .5);
  color: #f3b9a8;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: .92rem;
}
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3429; }
.dot.on { background: var(--gold); }

/* Photo d'en-tête (Instagram, résolution limitée) : léger flou d'ambiance */
/* On descend le cadrage : le plafond était la partie la plus claire de la
   photo et attirait l’œil vers ce qu’elle a de moins intéressant. */
.hero-bg img { object-position: 50% 70%; }

/* ---------- Pages simples (À propos, pages légales) ---------- */
.page { padding: 60px 0 90px; }
.container-narrow { max-width: 820px; }
.page-head { margin-bottom: 44px; }
.page-head h1 { font-size: clamp(2.8rem, 7vw, 4.4rem); margin: 12px 0 14px; }
.page-head .lead { color: #cfc9bc; font-size: 1.08rem; max-width: 640px; }
.page-head .maj { color: var(--muted); font-size: .86rem; }
.page-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.page-aside { display: grid; gap: 18px; position: sticky; top: 104px; }
.hint-p { color: var(--muted); font-size: .9rem; margin-bottom: 14px; }

.prose { color: #cfc9bc; line-height: 1.75; }
.prose h2 {
  font-size: 1.7rem; color: var(--text); margin: 38px 0 14px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose p { margin-bottom: 16px; }
.prose strong { color: var(--text); }
.prose a:not(.btn) { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--gold); }
.prose ul { list-style: none; margin: 0 0 18px; }
.prose li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px; transform: rotate(45deg); border: 1.5px solid var(--gold); }
.prose code { background: #000; padding: 2px 7px; border-radius: 5px; font-size: .88em; color: var(--gold-2); }
.prose .btn { margin-top: 6px; }

.table-legal { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: .92rem; }
.table-legal th, .table-legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table-legal th { color: var(--gold); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1024px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .page-aside { grid-template-columns: 1fr; }
  .table-legal { font-size: .86rem; }
  .table-legal th, .table-legal td { padding: 10px 8px; }
}

/* Pied de page : 5 colonnes depuis l'ajout des pages légales */
.footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Cinq blocs empilés faisaient 1371 px de pied de page sur téléphone : presque
   deux écrans de liens à franchir avant la fin. La marque garde toute la
   largeur, les quatre listes se rangent deux par deux. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  /* Sur téléphone, chaque pixel avant le premier service est un pixel de trop. */
  .booking { padding: 26px 0 70px; }
  .stepper { margin-bottom: 26px; }
}

/* ---------- Statut ouvert / fermé ---------- */
.statut { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.statut .point { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 4px rgba(242,210,123,.16); flex: none; }
.statut.ferme .point { background: #6f665a; box-shadow: 0 0 0 4px rgba(111,102,90,.18); }
.statut.ouvert { color: var(--gold-2); }
.statut.ferme { color: var(--muted); }
#statut-contact { margin-bottom: 14px; }

/* ---------- Appel rapide (mobile) ---------- */
.call-btn { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); place-items: center; color: var(--gold-2); }
.call-btn svg { width: 20px; height: 20px; }
.call-btn:hover { background: rgba(212,167,58,.12); }

/* ---------- Barre flottante mobile ---------- */
.float-bar { display: none; }
@media (max-width: 860px) {
  .call-btn { display: inline-grid; }
  .float-bar {
    display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    padding: 10px; border-radius: 16px;
    background: rgba(8, 7, 5, .92); backdrop-filter: blur(12px);
    border: 1px solid var(--line-soft); box-shadow: 0 12px 40px rgba(0,0,0,.55);
    animation: monte .25s ease;
  }
  .float-bar .btn { flex: 1; padding: 13px 10px; }
  .float-bar .btn-ghost { flex: 0 0 40%; background: rgba(255,255,255,.04); }
  .footer { padding-bottom: 110px; }
}
@keyframes monte { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Prochaines disponibilités ---------- */
.dispos-rapides { margin-bottom: 22px; }
.dispos-rapides h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 600; }
.rapides { display: flex; gap: 10px; flex-wrap: wrap; }
.rapide {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px;
  background: rgba(212,167,58,.06); transition: all .2s; min-width: 130px;
}
.rapide:hover { background: rgba(212,167,58,.14); border-color: var(--gold); transform: translateY(-2px); }
.rapide strong { font-size: .92rem; }
.rapide span { font-family: var(--display); font-size: 1.5rem; color: var(--gold-2); line-height: 1; }

.lien { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.lien:hover { color: var(--gold); }
#info-form .note { margin-bottom: 16px; }

/* Avis d'acompte sur la confirmation de réservation */
.acompte-avis {
  margin: 18px auto 0; max-width: 46ch; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 16px 18px;
}
.acompte-avis p { margin: 0 0 10px; font-size: .92rem; color: var(--muted); }
.acompte-avis p:last-child { margin-bottom: 0; }
.acompte-avis strong { color: var(--text); }
.acompte-avis a { color: var(--gold-2); text-decoration: underline; }

/* ---------- Galerie sur téléphone ----------
   Six photos d'abord ; le bouton affiche les autres. Une photo en display:none
   avec chargement différé n'est pas téléchargée : on économise la bande passante
   de quatre photos tant que le visiteur ne les demande pas. Sur grand écran,
   la grille entière reste affichée et le bouton n'existe pas. */
.gal-more-wrap { text-align: center; margin-top: 22px; }
.gal-more[hidden] { display: none; }
@media (min-width: 641px) { .gal-more-wrap { display: none; } }
@media (max-width: 640px) { .gallery:not(.all) button:nth-child(n+7) { display: none; } }