/*
Theme Name: L'Intendance Coiffure
Theme URI: https://www.lintendance-coiffure.fr
Author: Cabinet — développement sur mesure
Description: Thème vitrine sur mesure pour L'Intendance Coiffure, salon de coiffure premium au 22 cours de l'Intendance, Bordeaux.
Version: 3.0.0
Requires PHP: 7.4
Text Domain: lintendance-coiffure
*/

/* ===================================================================
  À PERSONNALISER AVANT MISE EN LIGNE :
  - Horaires d'ouverture (front-page.php, section #acces)
  - Tarifs indicatifs (front-page.php, section #prestations) — à valider
  - Coordonnées géographiques exactes (functions.php, schéma "geo")
  - Photos de réalisations (galerie) : encore des
    illustrations graphiques au trait, aucune fausse photo utilisée. Les
    photos de #salon sont en revanche déjà de vraies photos (via Planity).
  - assets/og-cover.jpg pour le partage réseaux sociaux
=================================================================== */

@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('assets/fonts/playfair-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/playfair-italic.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/ebgaramond-normal.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ebgaramond-italic.woff2') format('woff2');
}

:root{
  /* Palette du site initial (carte de visite bordeaux/beige), reprise telle
     quelle : les formes (arches, sections en bloc, boutons pilule, dômes de
     transition) sont celles de la refonte "Bordeaux affirmé", mais habillées
     avec les couleurs d'origine plutôt qu'un vert/terracotta inventés. */
  --cream: #efe4d2;
  --sage: #f7f1e5;
  --terracotta-pastel: #e2d3b6;
  --ink: #362a20;
  --ink-soft: #5c4b3c;

  --terracotta: #6e1c2b;
  --terracotta-deep: #481019;
  /* Le bordeaux d'origine n'a pas de teinte "claire" utilisable sur fond
     sombre (bordeaux sur bordeaux-deep ≈ 1.4:1, illisible) : comme dans le
     site initial, le seul accent lisible sur les bandes sombres est le
     papier lui-même, jamais une variante "bright" du bordeaux. */
  --terracotta-bright: var(--cream);
  --forest: #481019;
  --forest-deep: #481019;

  /* Alias de compatibilité : le monogramme (SVG du hero/header/footer)
     référence ces noms de variables directement dans ses attributs stroke,
     inutile de retoucher sa géométrie à chaque changement de palette. */
  --paper: var(--cream);
  --paper-soft: var(--sage);
  --paper-deep: var(--terracotta-pastel);
  --bordeaux: var(--terracotta);
  --bordeaux-deep: var(--forest);
  --bordeaux-bright: var(--terracotta-bright);

  --line: rgba(110,28,43,.32);
  --line-soft: rgba(54,42,32,.16);
  --shadow: 0 1px 2px rgba(54,42,32,.08);
  --shadow-card: 0 14px 26px -16px rgba(54,42,32,.4);
  --shadow-lift: 0 20px 34px -22px rgba(20,10,8,.35);
  --radius-sm: 3px;
  --radius-md: 4px;
  --maxw: 1220px;
  --gap-section: clamp(4.5rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Trame "plan d'architecte" : grille de points très fine, clin d'œil aux
     plans de façade. Coûte un simple gradient répété, pas de filtre SVG.
     Volontairement très pâle : une texture de fond, pas un motif visible. */
  --blueprint: radial-gradient(rgba(110,28,43,.14) .7px, transparent 1.4px);

  /* Accent doré ponctuel, réservé aux éléments qu'on veut faire ressortir du
     texte crème courant sur les bandes sombres (ex. le label "Nos
     partenaires") — le bordeaux n'ayant pas de teinte claire lisible sur
     fond sombre (cf. --terracotta-bright ci-dessus), on ne peut pas varier
     via la palette principale ; celui-ci reste ≥9:1 sur --forest. */
  --highlight-gold: #e3c384;
}

/* Identité fixe, volontairement non adaptative au thème sombre du visiteur :
   palette maison, indépendante du thème système. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--forest-deep);
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem, 4vw, 3rem);}

.eyebrow{
  font-family:'EB Garamond', Georgia, serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta);
}

.hr-short{border:none; border-top:2px solid var(--terracotta); width:44px; margin:1.3rem 0;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:var(--forest);
  box-shadow:0 4px 0 0 rgba(10,8,6,0);
  transition:box-shadow .4s var(--ease);
}
body.is-scrolled header.site{
  box-shadow:0 16px 30px -18px rgba(0,0,0,.55);
}
.scroll-progress{
  position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--terracotta-bright);
  transition:width .08s linear;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.25rem,4vw,3rem);
  max-width:var(--maxw); margin:0 auto;
  transition:padding .35s var(--ease);
}
body.is-scrolled .nav{
  padding:.55rem clamp(1.25rem,4vw,3rem);
}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand span{
  /* Le monogramme-façade ne sert plus que d'illustration du hero : le logo
     du site, partout ailleurs (header, footer, cartes de visite), c'est ce
     mot-symbole en gras — pas d'icône à côté. */
  font-family:'Playfair Display', Georgia, serif; font-weight:800; font-size:1.25rem;
  letter-spacing:.01em; color:var(--cream);
}
.links{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem);
  list-style:none; margin:0; padding:0;
}
.links a{
  display:inline-block; white-space:nowrap; text-decoration:none; font-size:.86rem; letter-spacing:.06em; font-weight:600;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--cream) 68%, transparent);
  transition:color .4s var(--ease), letter-spacing .4s var(--ease);
}
.links a:hover, .links a:focus-visible{color:var(--cream);}
.links a:not(.btn):hover, .links a:not(.btn):focus-visible{letter-spacing:.16em;}
.links a.active:not(.btn){color:var(--terracotta-bright);}
@media (prefers-reduced-motion: reduce){
  .links a{transition:color .25s var(--ease);}
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.7rem; border:2px solid var(--terracotta); color:var(--terracotta);
  text-decoration:none; font-size:.82rem; letter-spacing:.08em; font-weight:700;
  text-transform:uppercase;
  border-radius:999px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{background:var(--terracotta); color:var(--cream); transform:translateY(-1px);}
.btn.solid{background:var(--terracotta); color:var(--cream); border-color:var(--terracotta);}
.btn.solid:hover{background:var(--terracotta-deep); border-color:var(--terracotta-deep);}
header .btn, header .btn.solid{border-color:var(--terracotta-bright); color:var(--terracotta-bright);}
header .btn.solid{background:transparent;}
header .btn.solid:hover, header .btn.solid:focus-visible{background:var(--terracotta-bright); color:var(--forest); border-color:var(--terracotta-bright);}
.menu-toggle{
  /* Zone de tap 44x44 (WCAG/Apple HIG) : la case du bouton est agrandie,
     seules les barres visibles gardent la taille d'origine (26x18). */
  display:none; position:relative; z-index:41; width:44px; height:44px;
  background:none; border:none; padding:0; cursor:pointer; flex-shrink:0;
}
.menu-toggle-bar{
  position:absolute; left:50%; margin-left:-13px; width:26px; height:2px; border-radius:2px;
  background:var(--cream);
  transition:transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease);
}
.menu-toggle-bar:nth-child(1){top:13px;}
.menu-toggle-bar:nth-child(2){top:21px;}
.menu-toggle-bar:nth-child(3){top:29px;}
.menu-toggle.open .menu-toggle-bar:nth-child(1){top:21px; transform:rotate(45deg);}
.menu-toggle.open .menu-toggle-bar:nth-child(2){opacity:0;}
.menu-toggle.open .menu-toggle-bar:nth-child(3){top:21px; transform:rotate(-45deg);}
.menu-backdrop{
  position:fixed; inset:0; z-index:35; background:rgba(10,8,6,.6);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.menu-backdrop.open{opacity:1; pointer-events:auto;}
@media (prefers-reduced-motion: reduce){
  .menu-toggle-bar{transition:none;}
  .menu-backdrop{transition:none;}
}
a:focus-visible, button:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:clamp(1.5rem,3.5vw,2.75rem) 0 clamp(3.5rem,7vw,5.5rem); text-align:center; overflow:hidden;
  background:var(--blueprint), var(--cream);
  background-size:30px 30px, auto;
}
.hero-inner{position:relative; z-index:1;}
.arch-mark{
  /* Le monogramme redevient le blason dominant du hero, comme à l'origine. */
  width:min(480px, 88vw); margin:0 auto 1.6rem; display:block;
}
.door-leaf{transition:transform .08s linear;}
@media (prefers-reduced-motion: reduce){
  .door-leaf{transition:none; transform:none !important;}
}
.hero .eyebrow{display:block; margin-bottom:1.1rem;}
.hero h1{
  font-size:clamp(3.2rem, 10vw, 7.2rem); line-height:.92; letter-spacing:-.015em;
  font-weight:800;
}
.hero .tagline{
  font-family:'Playfair Display', Georgia, serif; font-style:normal; font-weight:700;
  font-size:clamp(1.05rem,2vw,1.3rem); color:var(--terracotta); margin-top:1.3rem;
}
.hero p.lede{max-width:44ch; margin:1.5rem auto 0; color:var(--ink-soft); font-size:1.08rem;}
.hero-ctas{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;}
.hero-nap{margin-top:2.6rem; font-size:.9rem; letter-spacing:.03em; color:var(--ink-soft);}
.hero-nap sup{font-size:.7em;}
.hero-nap a{text-decoration:none; border-bottom:2px solid var(--terracotta); color:var(--terracotta); font-weight:600;}

/* ---------- Sections generic ---------- */
section{padding:var(--gap-section) 0; scroll-margin-top:90px;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

.section-head{max-width:56ch; margin-bottom:2.6rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(2.1rem,4.4vw,3rem); margin-top:.6rem; font-weight:800;}

/* ---------- Le Salon ---------- */
#salon{background:var(--sage); border-radius:50% 50% 0 0 / 64px 64px 0 0;}
.salon-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start;}
.salon-grid p{color:var(--ink-soft); margin:0 0 1.1rem;}
.salon-grid p:last-child{margin-bottom:0;}
/* Les photos accompagnent la lecture du texte (plus long) au lieu de
   laisser un vide sous elles. */
.salon-side{position:sticky; top:100px;}
.pillars{list-style:none; margin:2.6rem 0 0; padding:2.4rem 0 0; border-top:1px solid var(--line); display:grid; gap:1.7rem;}
.pillars .pillar-title{
  display:flex; align-items:center; gap:.75rem;
  font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1.05rem; margin-bottom:.4rem;
}
.pillars svg{width:22px; height:22px; color:var(--terracotta); flex-shrink:0; stroke-width:2;}
.pillars p{color:var(--ink-soft); font-size:.98rem; margin:0;}

.pull-quote{
  grid-column:1 / -1;
  position:relative;
  margin:.5rem 0 0;
  padding-top:2.8rem;
  border-top:2px solid var(--terracotta);
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(1.4rem, 3vw, 2rem); line-height:1.35; color:var(--ink);
  max-width:26ch;
}
.pull-quote::before{
  content:"“"; position:absolute; top:1.6rem; left:-.15em;
  font-family:'Playfair Display', Georgia, serif; font-style:normal; font-weight:700;
  font-size:4.5rem; line-height:0; color:var(--terracotta); opacity:.22;
}
.pull-quote span{color:var(--terracotta);}

/* Vraies photos du salon : seules dans la colonne de droite, face au texte
   et aux piliers (à gauche), pour équilibrer la hauteur des deux colonnes. */
.salon-photos{
  /* Grille 6 colonnes : une photo phare pleine largeur, puis une rangée de
     trois et une rangée de deux — les vraies photos méritent d'être vues. */
  display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem;
}
.salon-photo:nth-child(1){grid-column:span 6;}
.salon-photo:nth-child(n+2):nth-child(-n+4){grid-column:span 2;}
.salon-photo:nth-child(n+5){grid-column:span 3;}
.salon-photo:nth-child(1) img{aspect-ratio:4/3;}
.salon-photo{
  display:block; padding:0; border:none; background:none; cursor:pointer;
  border-radius:var(--radius-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.salon-photo:hover, .salon-photo:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.salon-photo picture{display:block;}
.salon-photo img{
  /* height:auto impératif : sans lui, les attributs HTML width/height de
     l'image (mis pour éviter le layout shift) l'emportent sur aspect-ratio
     et forcent la hauteur intrinsèque au lieu du ratio 4/3 voulu. */
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-md); border:1px solid var(--line-soft);
}
@media (prefers-reduced-motion: reduce){
  .salon-photo{transition:none;}
  .salon-photo:hover, .salon-photo:focus-visible{transform:none;}
}
/* ---------- Lightbox photos : carrousel coverflow ----------
   La lightbox est un frère direct de main#top dans le DOM (voir
   front-page.php) : main#top a overflow:hidden pour ses coins arrondis, ce
   qui rognait auparavant la croix de fermeture et décalait le centrage
   quand la lightbox était imbriquée dedans (position:fixed reste soumis au
   clip d'un ancêtre avec overflow non-visible). */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,8,6,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
}
.lightbox[hidden]{display:none;}
.lightbox-stage{
  position:relative; width:100%; max-width:1400px;
  overflow:hidden;
  cursor:grab; touch-action:pan-y;
}
.lightbox-stage.is-dragging{cursor:grabbing;}
.lightbox-track{
  display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.4rem);
  padding:0 clamp(3.5rem,9vw,6.5rem);
  transition:transform .55s var(--ease);
  will-change:transform;
}
.lightbox-track.is-dragging{transition:none;}
.lightbox-slide{
  flex:0 0 auto; width:min(58vw, 620px); margin:0;
  opacity:.38; transform:scale(.8);
  filter:saturate(.55) brightness(.68);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.lightbox-slide.is-active{opacity:1; transform:scale(1); filter:none;}
.lightbox-slide:not(.is-active){cursor:pointer;}
.lightbox-slide img{
  display:block; width:100%; height:auto; max-height:66vh; object-fit:cover;
  border-radius:10px; border:1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.lightbox-counter{
  margin:0; color:color-mix(in srgb, var(--cream) 68%, transparent);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
}
.lightbox-close, .lightbox-nav{
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  background:rgba(10,8,6,.55); color:var(--cream); line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-nav:hover, .lightbox-nav:focus-visible{
  background:color-mix(in srgb, var(--cream) 16%, transparent); border-color:var(--cream);
}
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; z-index:1;
  width:44px; height:44px; font-size:1.7rem;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; font-size:2rem;
}
.lightbox-prev{left:.75rem;}
.lightbox-next{right:.75rem;}
@media (max-width: 700px){
  .lightbox-slide{width:min(78vw, 480px);}
  .lightbox-track{padding:0 3.2rem;}
  .lightbox-nav{width:40px; height:40px; font-size:1.5rem;}
  .lightbox-prev{left:.4rem;}
  .lightbox-next{right:.4rem;}
  .lightbox-close{top:.75rem; right:.75rem; width:40px; height:40px;}
}
@media (prefers-reduced-motion: reduce){
  .lightbox-track, .lightbox-slide{transition:none;}
}

/* ---------- Équipe ---------- */
#equipe{background:var(--cream);}
.team-tagline{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:700;
  font-size:clamp(1.05rem,2vw,1.3rem); color:var(--terracotta); margin:.9rem 0 0;
}
.team-intro{max-width:56ch; margin:0 auto 3.2rem; text-align:center; color:var(--ink-soft);}
/* Pas de portraits : deux signatures typographiques séparées par un filet
   vertical, dans l'esprit des colonnes de la façade du monogramme. */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); max-width:600px; margin:0 auto;}
.team-card{text-align:center; padding:.4rem clamp(1rem,4vw,2.5rem);}
.team-card + .team-card{border-left:1px solid var(--line);}
.team-card h3{font-size:clamp(1.6rem,3.2vw,2rem); font-style:italic; margin-bottom:.5rem; font-weight:700;}
.team-role{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); margin:0; font-weight:700;}

/* ---------- Tarifs ---------- */
#prestations{background:var(--terracotta-pastel);}
.tariffs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2.4rem 3.5rem;
}
.tariff-group h3{
  font-size:1rem; font-weight:800; padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:2px solid var(--terracotta);
}
.tariff-list{list-style:none; margin:0; padding:0; display:grid; gap:.85rem;}
.tariff-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-size:.95rem; color:var(--ink-soft);
  border-bottom:1px dotted var(--line);
  padding-bottom:.6rem;
}
.tariff-list li:last-child{border-bottom:none; padding-bottom:0;}
.tariff-price{
  font-family:'Playfair Display', Georgia, serif; font-weight:800; color:var(--terracotta);
  white-space:nowrap; flex-shrink:0; font-size:1.02rem;
}
.services-note{margin-top:2.6rem; font-size:.86rem; color:var(--ink-soft);}
.services-note a{color:var(--terracotta); font-weight:700;}

/* ---------- Galerie ---------- */
/* Tant que les photos de réalisations ne sont pas fournies, un encart
   Instagram plutôt qu'une grille de vignettes vides qui faisait "chantier". */
#galerie{background:var(--cream);}
.insta-card{
  max-width:620px; margin:0 auto; text-align:center;
  padding:clamp(2.2rem,5vw,3.2rem) clamp(1.5rem,5vw,3.5rem);
  background:var(--blueprint), var(--sage); background-size:30px 30px, auto;
  border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.insta-card svg{width:40px; height:40px; color:var(--terracotta); margin:0 auto 1rem; display:block;}
.insta-handle{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:700;
  font-size:clamp(1.4rem,3vw,1.8rem); color:var(--terracotta); margin:0 0 .8rem;
}
.insta-card p:not(.insta-handle){color:var(--ink-soft); margin:0 auto 1.8rem; max-width:44ch;}

/* ---------- Avis ---------- */
#avis{background:var(--sage);}
.avis-card{
  border:none; padding:0; text-align:center; max-width:680px; margin:0 auto; position:relative;
}
.avis-stats{
  display:flex; justify-content:center; align-items:stretch;
  margin-bottom:2.2rem;
}
.avis-stat{
  padding:0 clamp(1.8rem,6vw,3.5rem);
  display:flex; flex-direction:column; align-items:center;
}
.avis-stat + .avis-stat{border-left:1px solid var(--line);}
.avis-ctas{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem;}
.avis-card p{
  color:var(--ink); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.4; margin:0 0 1.8rem;
}
/* Combinateur d'enfant direct (>) : les <p> des .avis-stat sont imbriqués,
   :last-of-type s'évalue par parent direct — sans le >, il matcherait aussi
   .avis-count. Seul le vrai paragraphe de citation, enfant direct de
   .avis-card, doit porter le guillemet décoratif. */
.avis-card > p:last-of-type::before{
  content:"“"; display:block; text-align:center;
  font-family:'Playfair Display', Georgia, serif; font-style:normal; font-weight:700;
  font-size:3.2rem; line-height:.6; margin-bottom:.4rem;
  color:var(--terracotta); opacity:.3;
}
.avis-platform{
  font-family:'EB Garamond', Georgia, serif; font-style:normal; font-weight:700;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .7rem !important;
}
.avis-rating{
  font-family:'Playfair Display', Georgia, serif; font-style:normal;
  font-size:clamp(1.8rem,4vw,2.3rem); color:var(--terracotta); font-weight:800;
  margin:0 0 .5rem !important;
}
.avis-rating span{font-size:.6em; color:var(--terracotta); letter-spacing:.05em; vertical-align:.15em;}
.avis-count{
  font-family:'EB Garamond', Georgia, serif; font-style:normal; font-weight:400;
  font-size:.92rem; letter-spacing:.02em; text-transform:none; color:var(--ink-soft);
  margin:0 !important;
}

/* ---------- FAQ ---------- */
#faq{background:var(--cream);}
.faq{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 0; font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1.1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-weight:400; font-size:1.5rem; color:var(--terracotta); flex-shrink:0; transition:transform .3s var(--ease);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{color:var(--ink-soft); padding:0 0 1.6rem; font-size:.98rem; max-width:62ch;}

/* ---------- Accès ---------- */
#acces{background:var(--blueprint), var(--cream); background-size:30px 30px, auto;}
.acces-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:stretch;}
.acces-info dl{margin:0; display:grid; gap:1.4rem;}
.acces-info dt{
  display:flex; align-items:center; gap:.7rem;
  font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1rem; margin-bottom:.3rem;
}
.acces-info dt svg{width:20px; height:20px; color:var(--terracotta); stroke-width:2;}
.acces-info dd{margin:0; color:var(--ink-soft); font-size:1rem;}
.acces-map{
  border:2px solid var(--terracotta); border-radius:var(--radius-md); min-height:280px; position:relative;
  background:var(--sage); display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.acces-map iframe{width:100%; height:100%; min-height:280px; border:0; filter:grayscale(.3) contrast(1.03);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--forest); color:var(--cream); text-align:center; border-radius:50% 50% 0 0 / 70px 70px 0 0;}
.cta-band h2{color:var(--cream); font-size:clamp(1.8rem,3.8vw,2.4rem); font-weight:800;}
.cta-band p{color:color-mix(in srgb, var(--cream) 78%, transparent); max-width:48ch; margin:1.1rem auto 2.2rem;}
.cta-band .btn{border-color:var(--terracotta-bright); color:var(--terracotta-bright);}
.cta-band .btn:hover{background:var(--terracotta-bright); color:var(--forest);}
.cta-band .btn.solid{background:var(--terracotta-bright); color:var(--forest); border-color:var(--terracotta-bright);}
.cta-band .btn.solid:hover{background:var(--cream); color:var(--forest); border-color:var(--cream);}
.cta-band-alt{
  margin:1.2rem 0 0; font-size:.88rem;
  color:color-mix(in srgb, var(--cream) 65%, transparent);
}
.cta-band-alt a{color:var(--terracotta-bright); text-decoration:underline; text-underline-offset:2px;}

/* ---------- Réservation flottante (mobile) ---------- */
.mobile-book{display:none;}
@media (max-width: 860px){
  .mobile-book{
    display:flex; justify-content:center;
    position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:30;
    box-shadow:0 14px 30px -12px rgba(20,10,8,.55);
    opacity:0; transform:translateY(140%); pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
  }
  .mobile-book.is-visible{opacity:1; transform:none; pointer-events:auto;}
  footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom));}
  .mobile-book:hover, .mobile-book:focus-visible{transform:none;}
}

/* ---------- Footer ---------- */
/* ---------- Reveal footer ----------
   Le contenu principal (opaque, z-index supérieur) glisse au-dessus du footer,
   qui reste épinglé en bas de l'écran et se découvre comme un rideau en fin de défilement. */
main#top{
  position:relative; z-index:1;
  background:var(--cream);
  border-radius:32px 0 12px 12px;
  /* Sans ce clip, le fond du hero (rectangulaire) recouvre le coin arrondi
     du conteneur au lieu d'être découpé par lui. overflow:clip (et non
     hidden) pour ne pas casser le position:sticky de .salon-side ; hidden
     reste en repli pour les navigateurs anciens. */
  overflow:hidden; overflow:clip;
}
footer{
  position:sticky; bottom:0; z-index:0;
  background:var(--forest-deep);
  padding:4.5rem 0 2.5rem;
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem;}
.footer-grid h4{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta-bright); margin-bottom:1.1rem; font-weight:700;
}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.65rem;}
.footer-grid a{text-decoration:none; color:color-mix(in srgb, var(--cream) 70%, transparent); font-size:.95rem; transition:color .25s var(--ease);}
.footer-grid a:hover{color:var(--cream);}
.footer-brand p{color:color-mix(in srgb, var(--cream) 70%, transparent); font-size:.92rem; max-width:32ch;}
.footer-partner{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem;
  margin-top:2.8rem; padding:1.8rem 0;
  border-top:1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}
.footer-partner h4{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--highlight-gold); margin:0; font-weight:700;
}
.footer-partner-marks{
  display:flex; align-items:center; justify-content:center; gap:clamp(2.5rem,7vw,5rem); flex-wrap:wrap;
}
.footer-partner-mark{
  flex-shrink:0; display:block; opacity:.82;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  /* padding/margin négatif : élargit la zone de tap sans agrandir le logo visuellement */
  padding:6px 0; margin:-6px 0;
}
.footer-partner-mark:hover, .footer-partner-mark:focus-visible{opacity:1; transform:scale(1.08);}
@media (prefers-reduced-motion: reduce){
  .footer-partner-mark{transition:opacity .3s var(--ease);}
  .footer-partner-mark:hover, .footer-partner-mark:focus-visible{transform:none;}
}
.footer-partner-mark img{display:block; height:38px; width:auto; filter:brightness(0) invert(1);}
.footer-partner p{
  margin:0; font-size:.88rem; line-height:1.5; max-width:52ch;
  color:color-mix(in srgb, var(--cream) 70%, transparent);
}
.footer-partner p a{color:var(--terracotta-bright); text-decoration:underline; text-underline-offset:2px;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  font-size:.8rem; color:color-mix(in srgb, var(--cream) 55%, transparent);
  padding-top:1.8rem; border-top:1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}
.footer-bottom a{color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .25s var(--ease);}
.footer-bottom a:hover{color:var(--cream);}

/* ---------- Pages légales ---------- */
.legal-page{padding:calc(var(--gap-section) + 2.5rem) 0 var(--gap-section); background:var(--cream);}
.legal-wrap{max-width:720px;}
.legal-wrap h1{font-size:clamp(2rem,4vw,2.6rem); margin:.5rem 0 0; font-weight:800;}
.legal-wrap h2{
  font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1.15rem;
  color:var(--ink); margin:2.4rem 0 .8rem;
}
.legal-wrap h2:first-of-type{margin-top:2.8rem;}
.legal-wrap p{color:var(--ink-soft); line-height:1.75; margin:0 0 1rem;}
.legal-wrap a{color:var(--terracotta); text-decoration:underline; text-underline-offset:2px; font-weight:600;}

/* Entre tablette et grand écran, le menu complet manquait de place et
   "Le Salon" passait sur deux lignes. */
@media (min-width: 861px) and (max-width: 1100px){
  .nav{gap:1.5rem;}
  .brand span{font-size:1.1rem; white-space:nowrap;}
  .links{gap:.85rem;}
  .links a{font-size:.76rem; letter-spacing:.03em;}
  .links a:not(.btn):hover, .links a:not(.btn):focus-visible{letter-spacing:.08em;}
  .links .btn{padding:.6rem 1.1rem;}
}

@media (max-width: 860px){
  main#top{border-radius:32px 0 12px 12px;}
  #salon{padding-top:calc(var(--gap-section) + 24px); border-radius:50% 50% 0 0 / 40px 40px 0 0;}
  .cta-band{border-radius:50% 50% 0 0 / 40px 40px 0 0;}
  .salon-grid, .acces-grid{grid-template-columns:1fr;}
  .salon-side{position:static;}
  .pull-quote{padding-top:1.6rem;}
  .links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh; z-index:40;
    background:var(--forest); flex-direction:column; align-items:flex-start;
    padding:6rem 2rem 2rem; gap:1.6rem;
    transform:translateX(100%); transition:transform .35s var(--ease);
    border-left:1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  }
  .links.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  .footer-grid{grid-template-columns:1fr; gap:1.8rem;}
}