/* =========================================================
   L'Atelier Coiffure — Feuille de style principale (site client)
   ========================================================= */

:root {
  /* Palette — refonte sombre (voir md/ maquette de référence) */
  --color-bg: #0D0C0A;
  --color-card: #17140F;
  --color-card-2: #1E1A13;
  --color-text: #F5F1E8;
  --color-secondary: #B8AFA0;
  --color-muted: #9A9184;
  --color-muted-2: #ACA396;
  --color-border: #2A251C;
  --color-border-soft: #332C21;
  --color-border-hover: #F0CE8E;
  --color-accent: #D9AE5C;
  --color-off-white: #F5F1E8;
  /* Texte sombre "encre" utilisé sur les surfaces dorées (boutons,
     badges, états sélectionnés) — jamais confondu avec --color-text
     (le texte courant, clair) : les deux sont opposés dans ce thème. */
  --color-ink: #1A1409;
  --color-danger: #E0776A;
  --color-success-bg: #EFEAE0;

  /* Couleurs choisies par la coiffeuse (voir js/palette.js) : fond, deuxième
     couleur (--color-accent) et boutons. Par défaut les boutons suivent la
     deuxième couleur ; le texte posé sur une surface colorée (--color-on-*)
     est recalculé par la palette pour rester lisible quelle que soit la
     couleur choisie. */
  --color-on-accent: var(--color-ink);
  --color-button: var(--color-accent);
  --color-button-2: #B8873F;
  --color-on-button: var(--color-ink);
  --color-on-danger: var(--color-ink);
  /* Pied de page : par défaut, mêmes couleurs que les cartes / le texte de la
     page ; la palette (js/palette.js) les remplace si une couleur de pied de
     page est choisie — le texte est alors recalculé pour rester lisible. */
  --footer-bg: var(--color-card);
  --footer-text: var(--color-text);
  /* Points d'opacité ajoutés aux textes secondaires du pied de page (liens
     légaux…) : 0 par défaut ; la palette l'augmente sur un pied de page clair
     ou de teinte moyenne, où ces textes atténués deviendraient illisibles. */
  --footer-boost: 0%;
  /* Texte et bordures à l'INTÉRIEUR des blocs (cartes, calendrier, créneaux...) :
     identiques à ceux de la page tant qu'aucune couleur de blocs n'est choisie ;
     recalculés par js/palette.js sinon, pour rester lisibles sur cette couleur
     (voir la règle :where plus bas). */
  --card-text: var(--color-text);
  --card-secondary: var(--color-secondary);
  --card-muted-2: var(--color-muted-2);
  --card-muted: var(--color-muted);
  --card-border: var(--color-border);
  --card-border-soft: var(--color-border-soft);
  --card-accent: var(--color-accent);
  --card-on-accent: var(--color-on-accent);
  --card-danger: var(--color-danger);
  --card-on-danger: var(--color-on-danger);
  /* Points d'opacité ajoutés aux textes en transparence dans les blocs (0 par défaut). */
  --card-boost: 0%;
  /* Fond des blocs principaux qui utilisaient la teinte "intérieure" (carte de
     réservation, prochain rendez-vous) : par défaut inchangé ; la couleur de
     blocs choisie s'y applique EXACTEMENT. */
  --card-main: var(--color-card-2);
  --header-bg: rgba(19,16,12,.97);
  --header-bg-scrolled: rgba(15,13,10,.99);
  --shadow-a: rgba(0,0,0,.4);
  --shadow-b: rgba(0,0,0,.5);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Caveat', cursive;

  /* Layout */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --container-width: 1180px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3);
  --shadow-modal: 0 30px 80px -20px rgba(0,0,0,.6);

  /* Densité (surchargées par l'apparence choisie dans l'admin — voir js/theme.js) */
  --space-section: 96px;
  --space-card: 20px;
  --logo-size: 40px;

  /* Style du texte et des formes (onglet Apparence — voir js/salon-style.js).
     Valeurs de base = rendu d'origine ; à garder identiques à OWNED_DEFAULTS
     dans js/salon-style.js. Trois paliers de graisse (courant / moyen / gras)
     et celle des titres ; forme des boutons ; majuscules et espacement des
     boutons et du menu. */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-heading: 400;
  --w-strong: 500;
  --radius-btn: var(--radius-pill);
  --ui-transform: uppercase;
  --btn-size: 12px;
  --btn-tracking: .05em;
  --nav-tracking: .03em;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* Blocs colorés (couleur "Blocs" de l'onglet Apparence) : à l'intérieur de chacun,
   le texte, les nuances de texte et les bordures reprennent les valeurs --card-*
   calculées pour la couleur des blocs — le reste de la page garde les siennes.
   Sans couleur de blocs choisie, --card-* valent exactement celles de la page :
   aucun changement visible. :where() = spécificité nulle : aucune règle existante
   n'est écrasée. Tout NOUVEAU bloc coloré (fond var(--color-card) ou -card-2)
   doit être ajouté à cette liste (les éléments qu'il contient en héritent).
   Les blocs de l'espace coiffeuse sont listés dans css/admin.css. */
:where(.demo-section, .demo-card, .gallery-carousel, .service-card, .review-card, .reviews-arrow,
       .form-field input, .form-field textarea, .form-field select) {
  --color-text: var(--card-text);
  --color-off-white: var(--card-text);
  --color-secondary: var(--card-secondary);
  --color-muted-2: var(--card-muted-2);
  --color-muted: var(--card-muted);
  --color-border: var(--card-border);
  --color-border-soft: var(--card-border-soft);
  --color-accent: var(--card-accent);
  --color-on-accent: var(--card-on-accent);
  --color-danger: var(--card-danger);
  --color-on-danger: var(--card-on-danger);
  color: var(--card-text);
}

/* Grain subtil superposé à toute la page, au-dessus du contenu mais sous
   les éléments d'interface (header, modales...) — purement décoratif. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: var(--w-heading); margin: 0; color: var(--color-text); }

.script { font-family: var(--font-script); color: var(--color-border-hover); }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------- Fond animé : lueurs dorées + ciseaux en filigrane ----------
   Purement décoratif, fixes derrière tout le contenu (z-index 0). */
/* filter:blur() léger (pas 90px) : un rayon trop grand force le
   navigateur à recalculer un flou coûteux à chaque frame de l'animation,
   ce qui a fait ramer le rendu pendant les tests (page qui ne finissait
   plus de peindre). will-change aide le navigateur à isoler ce calque. */
.bg-glow { position: fixed; border-radius: 50%; filter: blur(50px); opacity: .16; z-index: 0; pointer-events: none; will-change: transform; }
.bg-glow-1 { width: 380px; height: 380px; background: radial-gradient(circle, var(--color-accent), transparent 70%); top: -120px; right: -80px; animation: bgFloat1 18s ease-in-out infinite; }
.bg-glow-2 { width: 340px; height: 340px; background: radial-gradient(circle, var(--color-border-hover), transparent 70%); top: 1200px; left: -120px; animation: bgFloat2 20s ease-in-out infinite; }
@keyframes bgFloat1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,60px) scale(1.15); } }
@keyframes bgFloat2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.1); } }
.bg-blob { position: fixed; pointer-events: none; z-index: 0; opacity: .06; }
.bg-blob-1 { width: 520px; top: -40px; right: -100px; transform: rotate(18deg); }
.bg-blob-2 { width: 460px; top: 1300px; left: -120px; transform: rotate(-24deg); }
.bg-blob line, .bg-blob circle { stroke: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .bg-glow-1, .bg-glow-2 { animation: none; }
}

/* ---------- Barre de progression de scroll ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--color-accent), var(--color-border-hover)); z-index: 100; width: 0%; }

/* ---------- Animations d'apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Bande rayée façon enseigne de barbier ---------- */
.barber-stripe { height: 5px; background: repeating-linear-gradient(-45deg, var(--color-accent) 0 10px, var(--color-bg) 10px 20px, var(--color-border-hover) 20px 30px); border-radius: var(--radius-pill); opacity: .5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: var(--w-semibold) var(--btn-size)/1 var(--font-sans);
  letter-spacing: var(--btn-tracking);
  text-transform: var(--ui-transform);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.98); }
.btn[hidden] { display: none; }
.btn-dark {
  background: linear-gradient(135deg, var(--color-button), var(--color-button-2));
  color: var(--color-on-button);
}
.btn-dark:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px color-mix(in srgb, var(--color-button) 35%, transparent); }
.btn-dark:disabled { background: var(--color-border); color: var(--color-muted-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-soft);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-border-hover); }
.btn-block { width: 100%; }
.btn-header-cta { padding: 12px 20px; }

/* Effet d'onde au clic (ripple) — ajouté en JS (voir js/theme-fx.js) sous
   forme d'un <span class="ripple"> positionné à l'endroit du clic. */
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: rippleAnim .6s ease-out; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(3); opacity: 0; } }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--w-medium) 13px/1 var(--font-sans);
  border-bottom: 1px solid var(--color-border-hover);
  padding-bottom: 5px;
  transition: border-color .2s ease;
}
.link-underline:hover { border-color: var(--color-accent); }
.link-underline[hidden] { display: none; }
.link-underline .arrow { color: var(--color-accent); }

.eyebrow {
  display: inline-block;
  font: var(--w-semibold) 12px/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: linear-gradient(135deg, var(--color-border-hover), var(--color-accent));
  padding: 7px 18px;
  border-radius: var(--radius-btn);
  margin-bottom: 18px;
}
/* Étiquettes discrètes (option "Boutons et menu" de l'onglet Apparence) : texte
   simple couleur d'accent, sans pastille. */
[data-style-labels="plain"] .eyebrow {
  background: none; color: var(--color-accent); padding: 0; border-radius: 0;
  font-size: 10.5px; letter-spacing: .28em;
}

/* =========================================================
   BANNIERE DEFILANTE
   ========================================================= */
.site-banner {
  overflow: hidden;
  white-space: nowrap;
  background: var(--color-accent);
}
.site-banner[hidden] { display: none; }
.site-banner-track {
  display: inline-flex;
  width: max-content;
  animation: bannerScroll linear infinite;
  animation-duration: var(--banner-duration, 20s);
}
a.site-banner-track { text-decoration: none; }
.site-banner-item {
  flex-shrink: 0;
  padding: 9px 32px;
  font: var(--w-medium) 12.5px/1.4 var(--font-sans);
  letter-spacing: .02em;
  color: var(--color-on-accent);
}
@keyframes bannerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-banner-track { animation: none; }
  .site-banner { overflow-x: auto; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Pas de backdrop-filter ici : combiné à "position:sticky", plusieurs
     moteurs de rendu (dont certaines versions de Chromium) ne repeignent
     pas correctement le flou pendant le scroll — le header reste flou/mal
     positionné (bug observé pendant les tests). Un fond opaque évite le
     bug tout en gardant un rendu sombre élégant. */
  background: var(--header-bg);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: 0 10px 34px var(--shadow-a);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { background: var(--header-bg-scrolled); box-shadow: 0 14px 44px var(--shadow-b); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.logo { display: flex; align-items: center; flex-direction: column; gap: 2px; line-height: 1; }
.salon-logo { max-height: var(--logo-size); max-width: 240px; object-fit: contain; transition: max-height .2s ease; }

/* Photo de prestation (accueil, réservation, récap, admin) — remplit le
   cadre déjà défini par .service-card-media / .service-option-media / etc.
   quand une image existe, sinon le motif rayé par défaut reste visible. */
.service-card-media img,
.service-option-media img,
.recap-service-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Photos légèrement assombries/désaturées au repos, qui reprennent leur
   éclat au survol (ou à la mise en avant, pour la galerie) — appliqué à
   toutes les photos réelles du site client. */
.hero-media img, .about-media img, .gallery-slide img,
.service-card-media img, .service-option-media img, .recap-service-media img {
  filter: brightness(.82) saturate(.9);
  transition: filter .4s ease;
}
.hero-media:hover img, .about-media:hover img, .gallery-slide.active img,
.service-card:hover .service-card-media img { filter: brightness(1) saturate(1); }
.footer-brand .salon-logo { max-height: calc(var(--logo-size) * 0.8); }
.logo-name { font: var(--w-heading) 23px/1 var(--font-serif); color: var(--color-text); }
.logo-name.light { color: var(--color-off-white); }
.logo-sub { font: var(--w-medium) 8.5px/1 var(--font-sans); letter-spacing: .4em; color: var(--color-muted-2); }
.logo-sub.light { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.site-footer .logo-name.light { color: var(--footer-text); }
.site-footer .logo-sub.light { color: color-mix(in srgb, var(--footer-text) min(100%, calc(55% + var(--footer-boost))), transparent); }

.main-nav { display: flex; align-items: center; gap: 32px; margin-right: auto; margin-left: 48px; }
.nav-link { font: var(--w-medium) 12.5px/1 var(--font-sans); letter-spacing: var(--nav-tracking); text-transform: var(--ui-transform); color: var(--color-secondary); transition: color .2s ease; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--color-accent); transition: width .25s ease; }
.nav-link:hover, .nav-link.active { color: var(--color-text); font-weight: var(--w-strong); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
}
.hamburger span { display: block; height: 1.5px; width: 100%; background: var(--color-text); transition: transform .25s ease, opacity .25s ease; }
.hamburger.light span { background: var(--color-off-white); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.mobile-nav.open { display: flex; }
.mobile-nav-link { padding: 12px 4px; font: var(--w-medium) 13.5px/1 var(--font-sans); border-bottom: 1px solid var(--color-border); }
.mobile-nav .btn { margin-top: 12px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: 64px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-content .eyebrow { opacity: 0; animation: fadeUp .8s ease .2s forwards; }
.hero-content h1 { font: var(--w-heading) 58px/1.06 var(--font-serif); letter-spacing: -.01em; margin: 0 0 20px; opacity: 0; animation: fadeUp .8s ease .35s forwards; }
.hero-text { max-width: 360px; font: var(--w-regular) 15px/1.7 var(--font-sans); color: var(--color-secondary); margin: 0 0 34px; opacity: 0; animation: fadeUp .8s ease .5s forwards; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s ease .65s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-content .eyebrow, .hero-content h1, .hero-text, .hero-actions { opacity: 1; animation: none; }
}
.hero-media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--color-card) 0 12px, var(--color-card-2) 12px 24px);
  position: relative;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.media-fallback { display: flex; align-items: center; justify-content: center; }
.media-fallback img { display: none; }
.media-fallback::after {
  content: attr(data-label);
  font: var(--w-regular) 10.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  padding: 7px 11px;
  border-radius: 5px;
}

/* =========================================================
   RESERVATION EN LIGNE — carte contenant le vrai parcours de
   réservation (voir js/booking.js), intégrée directement dans la page.
   Anciennement une démo visuelle factice : les classes .demo-section/
   .demo-card sont conservées telles quelles (même apparence voulue),
   seul leur contenu a changé.
   ========================================================= */
.demo-section {
  background: var(--color-card); padding: var(--space-section) 40px; border-radius: var(--radius-lg);
  margin: 0 24px; border: 1px solid var(--color-border);
}
.demo-section .section-head { flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.demo-card {
  max-width: 640px; margin: 0 auto; background: var(--card-main); border-radius: var(--radius-lg);
  padding: 38px; box-shadow: 0 24px 60px var(--shadow-a); border: 1px solid var(--color-border-soft);
}

/* =========================================================
   GALERIE (carrousel "coverflow" — photo centrale mise en avant,
   voisines aperçues de part et d'autre, format portrait "téléphone")
   ========================================================= */
.gallery-section { padding: 0 0 var(--space-section); }

.gallery-carousel {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 56px 0 0;
}
.gallery-inner { display: flex; align-items: center; gap: 20px; }

.gallery-viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; }
.gallery-track {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}

.gallery-slide {
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--color-card) 0 12px, var(--color-card-2) 12px 24px);
  opacity: .4;
  transform: scale(.82);
  transition: opacity .45s ease, transform .45s ease;
  cursor: pointer;
}
.gallery-slide.active { opacity: 1; transform: scale(1); cursor: default; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-arrow {
  position: static;
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-card-2);
  color: var(--color-text); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.gallery-arrow:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.gallery-arrow[hidden] { display: none; }

.gallery-dots { display: flex; justify-content: center; gap: 8px; padding: 22px 0 32px; }
.gallery-dots[hidden] { display: none; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-hover); border: none; transition: background .2s ease, transform .2s ease; }
.gallery-dot.active { background: var(--color-accent); transform: scale(1.3); }

@media (max-width: 900px) {
  .gallery-slide { width: 220px; }
}

@media (max-width: 640px) {
  .gallery-carousel { padding: 36px 0 0; }
  .gallery-inner { gap: 10px; }
  .gallery-slide { width: 168px; }
  .gallery-arrow { width: 34px; height: 34px; font-size: 13px; }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-section { padding: var(--space-section) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.section-head h2 { font: var(--w-heading) 36px/1.1 var(--font-serif); margin-bottom: 12px; }
.section-head p { font: var(--w-regular) 14px/1.6 var(--font-sans); color: var(--color-secondary); margin: 0; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.services-loading, .empty-state { color: var(--color-secondary); font-size: 13.5px; grid-column: 1/-1; }
.services-category-heading {
  grid-column: 1/-1; font: var(--w-heading) 20px/1 var(--font-serif); color: var(--color-text);
  margin: 0; padding-top: 8px;
}
.services-category-heading:first-child { padding-top: 0; }

.service-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(23,23,23,.25); border-color: var(--color-border-hover); }
.service-card-media {
  height: 168px;
  background: repeating-linear-gradient(135deg, var(--color-card) 0 12px, var(--color-card-2) 12px 24px);
}
.service-card-body { display: flex; align-items: center; justify-content: space-between; padding: var(--space-card) 22px; }
.service-card-name { font: var(--w-medium) 15px/1.3 var(--font-sans); color: var(--color-text); display: block; margin-bottom: 8px; }
.service-card-meta { font: var(--w-regular) 12.5px/1 var(--font-sans); color: var(--color-secondary); }
.service-card-arrow { font: var(--w-regular) 15px/1 var(--font-sans); color: var(--color-accent); }

/* =========================================================
   ABOUT
   ========================================================= */
.about-section { padding: var(--space-section) 0 calc(var(--space-section) + 14px); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-content h2 { font: var(--w-heading) 36px/1.1 var(--font-serif); margin-bottom: 18px; }
.about-text { max-width: 400px; font: var(--w-regular) 14px/1.8 var(--font-sans); color: var(--color-secondary); margin: 0 0 30px; }
.about-points { display: flex; flex-direction: column; gap: 16px; margin-bottom: 34px; }
.about-point { display: flex; align-items: center; gap: 12px; font: var(--w-regular) 13px/1 var(--font-sans); color: var(--color-text); }
.point-badge {
  width: 28px; height: 28px; border: 1px solid var(--color-border-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: var(--w-regular) 11px/1 var(--font-sans); color: var(--color-accent); flex: none;
}
.point-dot i { width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; display: block; }
.about-media {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--color-card) 0 12px, var(--color-card-2) 12px 24px);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-section { padding: var(--space-section) 0 calc(var(--space-section) + 14px); }
.faq-accordion { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; background: none; border: none; cursor: pointer; text-align: left;
  font: var(--w-medium) 15px/1.4 var(--font-sans); color: var(--color-text);
}
.faq-toggle-icon { position: relative; width: 14px; height: 14px; flex: none; transition: transform .25s ease; }
.faq-toggle-icon::before, .faq-toggle-icon::after { content: ""; position: absolute; background: var(--color-accent); border-radius: 1px; }
.faq-toggle-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-toggle-icon::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }
.faq-item.open .faq-toggle-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer p { margin: 0 4px 20px; font: var(--w-regular) 14px/1.7 var(--font-sans); color: var(--color-secondary); }

/* =========================================================
   AVIS GOOGLE (carrousel à défilement tactile — js/google-reviews.js)
   ========================================================= */
.reviews-section { padding: var(--space-section) 0 calc(var(--space-section) + 14px); }
.reviews-carousel { display: flex; align-items: center; gap: 20px; }
.reviews-track {
  flex: 1; min-width: 0;
  display: flex; gap: 24px; padding: 4px 2px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-card) 22px;
}
.review-stars { display: block; margin-bottom: 12px; letter-spacing: 2px; }
.review-star { color: var(--color-border-hover); font-size: 14px; }
.review-star.filled { color: var(--color-accent); }
.review-text {
  flex: 1; margin: 0 0 16px;
  font: var(--w-regular) 13.5px/1.7 var(--font-sans); color: var(--color-secondary);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.review-text:empty { display: none; }
.review-author { font: var(--w-medium) 13px/1.3 var(--font-sans); color: var(--color-text); }

.reviews-arrow {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-card-2);
  color: var(--color-text); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.reviews-arrow:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.reviews-arrow:disabled { opacity: .35; cursor: default; }
.reviews-arrow[hidden] { display: none; }

.reviews-footer { display: flex; justify-content: center; margin-top: 30px; }
.reviews-footer .btn[hidden] { display: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--color-border); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-info { display: flex; gap: 34px; font: var(--w-regular) 11.5px/1 var(--font-sans); color: color-mix(in srgb, var(--footer-text) min(100%, calc(62% + var(--footer-boost))), transparent); flex-wrap: wrap; }
.footer-info[hidden] { display: none; }
.footer-info-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer-info-link:hover { color: var(--footer-text); }
.footer-info-link[hidden] { display: none; }

/* Garde-fou général (pas juste le pied de page) : quel que soit l'élément
   et sa propre classe, [data-salon-optional]/[data-salon-optional-block]
   avec l'attribut hidden posé par js/salon-config.js reste bien masqué —
   sans ça, une classe qui fixe elle-même "display" (flex, inline-flex...)
   gagnerait sur le "display:none" natif de [hidden] (déjà vu plusieurs
   fois sur ce projet). */
[data-salon-optional][hidden], [data-salon-optional-block][hidden] { display: none !important; }

.footer-social { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-social-link {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--w-medium) 12px/1 var(--font-sans); color: color-mix(in srgb, var(--footer-text) min(100%, calc(75% + var(--footer-boost))), transparent);
  transition: color .2s ease;
}
/* Bug préexistant, trouvé en testant les coordonnées du pied de page :
   "display: inline-flex" ci-dessus gagnait sur le "display: none" natif de
   [hidden] (même règle CSS, même priorité, mais celle-ci arrive après) —
   Instagram/Snapchat restaient visibles (menant vers "#") même sans pseudo
   renseigné. */
.footer-social-link[hidden] { display: none; }

.footer-legal {
  margin: 28px auto 0; padding-top: 20px; max-width: var(--container-width);
  border-top: 1px solid color-mix(in srgb, var(--footer-text) 10%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font: var(--w-regular) 10.5px/1 var(--font-sans); color: color-mix(in srgb, var(--footer-text) min(100%, calc(45% + var(--footer-boost))), transparent);
}
.footer-legal-link { color: inherit; transition: color .2s ease; }
.footer-legal-link:hover { color: var(--footer-text); }
.footer-legal-sep { color: color-mix(in srgb, var(--footer-text) min(100%, calc(30% + var(--footer-boost))), transparent); }

/* =========================================================
   PAGES LEGALES (confidentialité, cookies, mentions légales)
   ========================================================= */
.legal-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.legal-header .header-inner { justify-content: space-between; height: auto; padding: 22px 0; }
.legal-page { padding: var(--space-section) 0; }
.legal-content { max-width: 720px; }
.legal-content h1 { font: var(--w-heading) 34px/1.15 var(--font-serif); margin-bottom: 8px; }
.legal-updated { color: var(--color-muted); font-size: 12.5px; margin: 0 0 40px; }
.legal-content h2 { font: var(--w-medium) 15px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text); margin: 40px 0 14px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { font: var(--w-regular) 14.5px/1.75 var(--font-sans); color: var(--color-secondary); margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 20px; font: var(--w-regular) 14.5px/1.75 var(--font-sans); color: var(--color-secondary); }
.legal-content li { margin-bottom: 4px; }
.legal-content a { color: var(--color-text); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-content h1 { font-size: 27px; }
}
.footer-social-link:hover { color: var(--footer-text); }
.footer-social-link svg { width: 18px; height: 18px; flex: none; }

/* =========================================================
   RESERVATION EN LIGNE — vrai parcours de réservation intégré
   directement dans la page (voir js/booking.js), dans la carte
   .demo-card partagée avec le style de la section (mêmes coins
   arrondis, même bordure dorée) — plus de modale/overlay séparée.
   ========================================================= */
.booking-progress {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 20px; margin-bottom: 6px; border-bottom: 1px solid var(--color-border);
  overflow-x: auto; gap: 0;
}
.progress-step { display: flex; align-items: center; gap: 7px; flex: none; }
.step-circle {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-border-soft);
  color: var(--color-muted-2); display: flex; align-items: center; justify-content: center;
  font: var(--w-medium) 9.5px/1 var(--font-sans); flex: none; transition: all .2s ease;
}
.step-label { font: var(--w-regular) 10.5px/1 var(--font-sans); color: var(--color-muted-2); white-space: nowrap; transition: color .2s ease; }
.progress-step.done .step-circle, .progress-step.active .step-circle { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.progress-step.active .step-label, .progress-step.done .step-label { color: var(--color-text); font-weight: var(--w-strong); }
.progress-line { width: 20px; height: 1px; background: var(--color-border-soft); margin: 0 4px; flex: none; }

.booking-body { padding: 6px 0 0; }
.booking-step h2 { font: var(--w-heading) 24px/1.15 var(--font-serif); margin-bottom: 8px; }
.step-sub { font: var(--w-regular) 13px/1.6 var(--font-sans); color: var(--color-secondary); margin: 0 0 22px; }

.booking-footer { display: flex; gap: 12px; padding: 22px 0 0; border-top: 1px solid var(--color-border); margin-top: 22px; }
.booking-footer[hidden] { display: none; }
.booking-footer .btn-dark { flex: 1; }
.footer-back-link {
  display: block; margin: 14px auto 0; background: none; border: none;
  font: var(--w-medium) 12px/1 var(--font-sans); color: var(--color-secondary); padding: 6px;
}
.footer-back-link:hover { color: var(--color-accent); }
.footer-back-link[hidden] { display: none; }

/* Step 1: service picker */
.service-picker { display: flex; flex-direction: column; gap: 12px; }
.service-picker-heading { font: var(--w-medium) 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin: 10px 0 -2px; }
.service-picker-heading:first-child { margin-top: 0; }
.service-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 16px; background: var(--color-card-2);
  transition: border-color .2s ease, background .2s ease;
}
.service-option:hover { border-color: var(--color-border-hover); }
.service-option.selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-card-2)); }
.service-option-main { display: flex; align-items: flex-start; gap: 14px; }
.service-option-media { width: 46px; height: 46px; border-radius: 9px; flex: none; background: repeating-linear-gradient(135deg, var(--color-card) 0 8px, var(--color-card-2) 8px 16px); }
.service-option-text { display: flex; flex-direction: column; gap: 6px; }
.service-option-name { font: var(--w-medium) 14.5px/1 var(--font-sans); }
.service-option-desc { font: var(--w-regular) 12px/1.55 var(--font-sans); color: var(--color-secondary); max-width: 240px; }
.service-option-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.service-option-meta .dur { font: var(--w-regular) 11.5px/1 var(--font-sans); color: var(--color-muted); }
.service-option-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-hover); }
.service-option-meta .price { font: var(--w-medium) 13px/1 var(--font-sans); }
.radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-border-soft); flex: none; position: relative; transition: border-color .2s ease; }
.service-option.selected .radio-dot { border-color: var(--color-accent); }
.service-option.selected .radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-accent); }

/* Step 2: calendar */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-nav button { background: none; border: 1px solid var(--color-border-soft); border-radius: 6px; width: 30px; height: 30px; font-size: 13px; color: var(--color-text); }
.calendar-month-label { font: var(--w-medium) 13.5px/1 var(--font-sans); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-dow { font: var(--w-medium) 10px/1 var(--font-sans); color: var(--color-muted); text-transform: uppercase; padding-bottom: 8px; }
.calendar-day {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font: var(--w-regular) 13px/1 var(--font-sans); color: var(--color-text);
  background: none; border: none; transition: background .15s ease, color .15s ease;
}
.calendar-day:hover:not(:disabled):not(.empty) { background: var(--color-border); }
.calendar-day:disabled { color: var(--color-muted-2); opacity: .45; cursor: not-allowed; }
.calendar-day.empty { visibility: hidden; }
.calendar-day.selected { background: var(--color-accent); color: var(--color-on-accent); }
.calendar-legend { display: flex; gap: 20px; margin-top: 18px; font: var(--w-regular) 11px/1 var(--font-sans); color: var(--color-secondary); }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-selected { background: var(--color-accent); }
.dot-disabled { background: var(--color-border-hover); }

/* Step 3: slots */
.chosen-date-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 14px; font: var(--w-medium) 12.5px/1 var(--font-sans); margin-bottom: 20px; }
.slots-group-label { font: var(--w-medium) 10px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin: 18px 0 10px; }
.slots-group-label:first-child { margin-top: 0; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot-btn {
  padding: 12px 6px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-card-2); font: var(--w-regular) 12.5px/1 var(--font-sans); color: var(--color-text);
  transition: all .15s ease;
}
.slot-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.slot-btn.selected { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.slot-btn:disabled { color: var(--color-muted-2); background: var(--color-border); border-color: var(--color-border); cursor: not-allowed; opacity: .6; }
.slots-empty { grid-column: 1/-1; color: var(--color-secondary); font-size: 13px; text-align: center; padding: 20px 0; }

/* Step 4: form */
.customer-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row[hidden] { display: none; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font: var(--w-medium) 11.5px/1 var(--font-sans); color: var(--color-text); }
.form-field input, .form-field textarea, .form-field select {
  font: var(--w-regular) 13.5px/1 var(--font-sans); color: var(--color-text);
  padding: 12px 14px; border: 1px solid var(--color-border-soft); border-radius: 8px;
  background: var(--color-card-2); width: 100%; outline: none;
  transition: border-color .15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-accent); }
.form-field input.invalid { border-color: var(--color-danger); }
.form-error { color: var(--color-danger); font-size: 12.5px; margin: 4px 0 0; }
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { padding-right: 40px; }
.input-suffix span { position: absolute; right: 14px; font-size: 12.5px; color: var(--color-secondary); }

/* Step 5: recap */
.recap-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.recap-service { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--color-border); background: var(--color-card-2); }
.recap-service-media { width: 46px; height: 46px; border-radius: 9px; flex: none; background: repeating-linear-gradient(135deg, var(--color-card) 0 8px, var(--color-card-2) 8px 16px); }
.recap-service-name { font: var(--w-medium) 14.5px/1 var(--font-sans); margin-bottom: 6px; display: block; }
.recap-service-meta { font: var(--w-regular) 12px/1 var(--font-sans); color: var(--color-secondary); }
.recap-rows { padding: 4px 16px; }
.recap-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: 12.5px; }
.recap-row:last-child { border-bottom: none; }
.recap-row .label { color: var(--color-secondary); display: flex; align-items: center; gap: 8px; }
.recap-row .value { font-weight: var(--w-strong); }

/* Step 6: confirmation */
.booking-confirm { text-align: center; padding: 20px 6px 30px; }
.confirm-check {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--color-border-soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 28px;
  font-size: 22px; color: var(--color-accent);
}
.booking-confirm h2 { font-size: 22px; margin-bottom: 12px; }
.booking-confirm .step-sub { margin: 0 auto 22px; max-width: 300px; }
.status-pill { display: inline-block; padding: 8px 18px; background: var(--color-success-bg); color: var(--color-ink); border-radius: 20px; font: var(--w-medium) 11.5px/1 var(--font-sans); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero-content h1 { font-size: 46px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .review-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .btn-header-cta { display: none; }
  .hamburger { display: flex; }
  .hero-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { order: -1; aspect-ratio: 16/10; }
  .about-media { aspect-ratio: 16/10; }
}

@media (max-width: 640px) {
  .header-inner { height: 68px; }
  .hero { padding: 40px 0 56px; }
  .hero-content h1 { font-size: 36px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .services-section, .about-section, .faq-section, .reviews-section { padding: calc(var(--space-section) * 0.58) 0; }
  .demo-section { padding: calc(var(--space-section) * 0.58) 20px; margin: 0 8px; border-radius: var(--radius-md); }
  .demo-card { padding: 26px 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .review-card { flex-basis: 86%; }
  .reviews-carousel { gap: 10px; }
  .reviews-arrow { width: 34px; height: 34px; font-size: 13px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-info { flex-direction: column; gap: 8px; }
  .footer-social { gap: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  /* Quand la barre d'étapes déborde, "center" rend le début inaccessible
     au scroll (décalage négatif) : on aligne à gauche sur petit écran. */
  .booking-progress { justify-content: flex-start; }
}

/* =========================================================
   DÉCOR SOBRE (option "Décor" de l'onglet Apparence)
   Retire les effets purement décoratifs : grain, lueurs, ciseaux en
   filigrane, bande rayée, barre de progression, ombre de l'en-tête,
   soulignement animé du menu, et rend les boutons unis (sans dégradé ni
   saut au survol).
   ========================================================= */
html[data-style-decor="plain"] body::before { display: none; }
[data-style-decor="plain"] .bg-glow,
[data-style-decor="plain"] .bg-blob,
[data-style-decor="plain"] .barber-stripe,
[data-style-decor="plain"] .scroll-progress { display: none; }
[data-style-decor="plain"] .site-header { background: color-mix(in srgb, var(--color-bg) 92%, transparent); box-shadow: none; }
[data-style-decor="plain"] .nav-link::after { display: none; }
[data-style-decor="plain"] .btn-dark:not(:disabled) { background: var(--color-button); }
[data-style-decor="plain"] .btn-dark:not(:disabled):hover { background: var(--color-button-2); transform: none; box-shadow: none; }