/* ================================================================
   LE LEGEND'HAIR — feuille de style unique
   Direction : atelier de barbier vintage, laiton sur cuir noir.
   Monde visuel assumé en sombre (le logo est crème sur noir) :
   toutes les couleurs sont peintes explicitement, aucune ne
   dépend du thème de l'hôte.
   ================================================================ */

:root{
  /* --- fonds : des noirs chauds, jamais un gris neutre --- */
  --noir:        #0B0908;
  --fumee:       #13100D;
  --fumee-2:     #1C1713;
  --fumee-3:     #272019;

  /* --- matières du salon --- */
  --cuir:        #8C4A26;   /* le Chesterfield cognac */
  --cuir-clair:  #B26B3E;
  --laiton:      #C9A66B;   /* les miroirs, la fonte du fauteuil */
  --laiton-pale: #E3CDA0;

  /* --- encres --- */
  --creme:       #F1EADF;
  --creme-70:    rgba(241,234,223,.70);
  --creme-45:    rgba(241,234,223,.45);
  --creme-22:    rgba(241,234,223,.22);
  --filet:       rgba(201,166,107,.26);
  --filet-fort:  rgba(201,166,107,.55);

  /* --- états de la file (sémantique, distincte de l'accent) --- */
  --libre:       #8CAE79;
  --bientot:     #D9B160;
  --occupe:      #B4705E;

  /* --- typographie --- */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --texte:   "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --machine: "Space Mono", "Courier New", monospace;

  /* --- mesures --- */
  --colonne: 1180px;
  --etroit:  680px;
  --marge:   clamp(20px, 5vw, 56px);
  --bloc:    clamp(64px, 9vw, 128px);
  --rayon:   2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--noir);
  color:var(--creme);
  font-family:var(--texte);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grain de pellicule : la seule texture de la page, très discrète. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

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

/* ---------------------------------------------------- typographie */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.9rem, 7.4vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h3{ font-size:clamp(1.25rem, 2.1vw, 1.6rem); font-weight:500; }
p{ margin:0 0 1.05em; max-width:66ch; }
a{ color:inherit; }

.eyebrow{
  font-family:var(--texte);
  font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.30em;
  color:var(--laiton);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--filet); max-width:120px; }
.eyebrow--centre{ justify-content:center; }
.eyebrow--centre::before{ content:""; flex:1; height:1px; background:var(--filet); max-width:120px; }

.chapo{ font-size:clamp(1.06rem,1.5vw,1.22rem); color:var(--creme-70); font-weight:300; }
h1 + .chapo, h2 + .chapo{ margin-top:1.5rem; }
.mono{ font-family:var(--machine); font-variant-numeric:tabular-nums; }

/* Champ que le salon doit encore renseigner : visible, assumé. */
.a-completer{
  display:inline-block;
  font-family:var(--machine); font-size:.74em;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--laiton);
  border:1px dashed var(--filet-fort);
  border-radius:var(--rayon);
  padding:.18em .6em;
}

/* ---------------------------------------------------- ossature */

.enveloppe{ width:100%; max-width:var(--colonne); margin-inline:auto; padding-inline:var(--marge); }
.section{ padding-block:var(--bloc); position:relative; }
.section--filet{ border-top:1px solid var(--filet); }
.section--fumee{ background:var(--fumee); }

.duo{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; } .duo--large{ grid-template-columns:1.12fr .88fr; } }

/* ---------------------------------------------------- barre de tête */

.tete{
  position:sticky; top:0; z-index:100;
  background:rgba(11,9,8,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--filet);
}
.tete__grille{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); min-height:74px; }
.tete__logo{ display:block; }
.tete__logo img{ height:32px; width:auto; }
.tete__nav{ display:none; gap:clamp(16px,2.4vw,30px); margin-left:auto; }
@media (min-width:1000px){ .tete__nav{ display:flex; } }

/* le bouton de menu, seulement sous 1000px */
.tete__menu{
  display:inline-flex; align-items:center; gap:.55rem; margin-left:auto;
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  color:var(--creme); cursor:pointer;
  font-family:var(--texte); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; padding:.62rem .9rem;
}
.tete__menu:hover{ border-color:var(--laiton); }
.tete__menu span{ display:block; width:16px; height:1px; background:currentColor; position:relative; }
.tete__menu span::before,.tete__menu span::after{ content:""; position:absolute; left:0; width:16px; height:1px; background:currentColor; }
.tete__menu span::before{ top:-5px; }
.tete__menu span::after{ top:5px; }
@media (min-width:1000px){ .tete__menu{ display:none; } }
@media (max-width:999px){
  .tete__grille{ flex-wrap:wrap; }
  .tete[data-menu="ouvert"] .tete__nav{
    display:flex; flex-direction:column; gap:0;
    flex-basis:100%; margin:0 0 .8rem; padding-top:.4rem;
    border-top:1px solid var(--filet);
  }
  .tete[data-menu="ouvert"] .tete__nav a{ padding:.9rem 0; border-bottom:1px solid var(--filet); }
  .tete__cta{ margin-left:0; }
}
@media (max-width:700px){ .tete__cta-suite{ display:none; } }
@media (max-width:600px){
  .tete__grille{ gap:10px; min-height:64px; }
  .tete__logo img{ height:26px; }
  .tete__cta,.tete__menu{ padding:.58rem .8rem; font-size:.64rem; letter-spacing:.1em; }
}
.tete__nav a{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.18em;
  text-decoration:none; color:var(--creme-70);
  padding-block:.5rem; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.tete__nav a:hover,.tete__nav a[aria-current="page"]{ color:var(--creme); border-bottom-color:var(--laiton); }
.tete__cta{ margin-left:auto; }
@media (min-width:1000px){ .tete__cta{ margin-left:0; } }

/* ---------------------------------------------------- boutons */

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family:var(--texte); font-size:.82rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none;
  padding:1.05rem 1.9rem; border-radius:var(--rayon);
  border:1px solid transparent; cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), background-color .22s, color .22s, border-color .22s;
}
.bouton--laiton{ background:var(--laiton); color:var(--noir); font-weight:600; }
.bouton--laiton:hover{ background:var(--laiton-pale); transform:translateY(-2px); }
.bouton--fantome{ border-color:var(--filet-fort); color:var(--creme); background:transparent; }
.bouton--fantome:hover{ border-color:var(--laiton); background:rgba(201,166,107,.08); transform:translateY(-2px); }
.bouton--petit{ padding:.7rem 1.15rem; font-size:.7rem; letter-spacing:.14em; }
.bouton--large{ width:100%; }
.bouton[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--laiton); outline-offset:3px; border-radius:var(--rayon);
}

/* ---------------------------------------------------- hero */

.hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--filet); }
.hero__film{ position:absolute; inset:0; z-index:-2; }
.hero__film video,.hero__film img{ width:100%; height:100%; object-fit:cover; }
.hero__voile{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,9,8,.90) 0%, rgba(11,9,8,.40) 34%, rgba(11,9,8,.80) 78%, var(--noir) 100%),
    linear-gradient(90deg, rgba(11,9,8,.90) 0%, rgba(11,9,8,.28) 62%, rgba(11,9,8,.55) 100%);
}
.hero__corps{
  padding-block:clamp(72px,11vh,124px) clamp(48px,7vh,80px);
  min-height:clamp(520px,72vh,720px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero h1{ margin:0 0 1.4rem; max-width:15ch; }
.hero h1 em{ font-style:italic; color:var(--laiton-pale); font-weight:500; }
.hero__chapo{ max-width:46ch; font-size:clamp(1.06rem,1.6vw,1.26rem); color:var(--creme-70); margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__appui{ margin-top:2.4rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--creme-45); display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
.hero__appui span{ display:flex; align-items:center; gap:.5rem; }
.hero__appui span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--laiton); flex:none; }

/* ------------------------------------------- bandeau de la file */

.file{ border-bottom:1px solid var(--filet); background:var(--fumee); }
.file__grille{ display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width:800px){ .file__grille{ grid-template-columns:auto repeat(3,1fr); align-items:stretch; } }
.file__titre{ padding:1.5rem clamp(20px,3vw,40px) 1.5rem 0; display:flex; flex-direction:column; justify-content:center; gap:.2rem; }
.file__titre b{ font-family:var(--display); font-size:1.2rem; font-weight:600; }
.file__titre small{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-45); }
.poste{ padding:1.3rem 1.4rem; display:flex; align-items:center; gap:.9rem; border-left:1px solid var(--filet); }
@media (max-width:799px){ .poste{ border-left:0; border-top:1px solid var(--filet); padding-inline:0; } }
.poste__pastille{ width:9px; height:9px; border-radius:50%; flex:none; }
.poste--libre .poste__pastille{ background:var(--libre); box-shadow:0 0 0 4px rgba(140,174,121,.16); }
.poste--bientot .poste__pastille{ background:var(--bientot); box-shadow:0 0 0 4px rgba(217,177,96,.16); }
.poste--occupe .poste__pastille{ background:var(--occupe); box-shadow:0 0 0 4px rgba(180,112,94,.16); }
.poste__nom{ font-size:.95rem; }
.poste__etat{ display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--creme-45); }
.poste__attente{ margin-left:auto; font-family:var(--machine); font-size:1.3rem; color:var(--laiton); text-align:right; line-height:1.1; white-space:nowrap; }
.poste__attente small{ font-size:.6rem; letter-spacing:.1em; color:var(--creme-45); display:block; }
.poste__attente--mot{ font-family:var(--texte); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }

/* ---------------------------------------------------- la scène du fauteuil */

.scene{ position:relative; display:grid; place-items:center; }
.scene__halo{
  position:absolute; width:min(96%,540px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,166,107,.16) 0%, rgba(201,166,107,.04) 46%, transparent 70%);
  pointer-events:none;
}
.scene video,.scene img{ width:min(100%,500px); border-radius:50%; }
.scene__socle{
  position:absolute; bottom:7%; width:min(58%,300px); height:12px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(201,166,107,.28), transparent 70%);
  pointer-events:none;
}

/* ---------------------------------------------------- étapes */

.etapes{ display:grid; gap:1px; background:var(--filet); border:1px solid var(--filet); border-radius:var(--rayon); overflow:hidden; }
@media (min-width:820px){ .etapes{ grid-template-columns:repeat(3,1fr); } }
.etape{ background:var(--noir); padding:clamp(26px,3.4vw,40px); display:flex; flex-direction:column; gap:.85rem; }
.etape__rang{ font-family:var(--machine); font-size:.76rem; letter-spacing:.2em; color:var(--laiton); }
.etape h3{ margin:0; }
.etape p{ margin:0; color:var(--creme-70); font-size:.96rem; }

/* ---------------------------------------------------- arguments */

.atouts{ display:grid; gap:clamp(24px,3vw,40px); }
@media (min-width:760px){ .atouts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .atouts--trois{ grid-template-columns:repeat(3,1fr); } }
.atout{ padding-top:1.4rem; border-top:1px solid var(--filet); }
.atout h3{ margin:0 0 .6rem; }
.atout p{ margin:0; color:var(--creme-70); font-size:.96rem; }
.atout__cle{ font-family:var(--machine); color:var(--laiton); font-size:.72rem; letter-spacing:.18em; display:block; margin-bottom:.9rem; }

/* ---------------------------------------------------- la borne à ticket */

.reservation{ display:grid; gap:clamp(28px,5vw,64px); align-items:start; }
@media (min-width:980px){ .reservation{ grid-template-columns:1.05fr .95fr; } }

/* Sur un téléphone, l'aperçu du rendez-vous à droite ferait un deuxième
   récapitulatif à faire défiler : les en-têtes d'étapes le disent déjà. Il ne
   revient qu'une fois le rendez-vous confirmé — là, c'est la pièce à garder. */
@media (max-width:979px){
  .reservation--agenda:not(.reservation--confirme) > div:last-child{ display:none; }
}

.borne{ background:var(--fumee-2); border:1px solid var(--filet); border-radius:var(--rayon); padding:clamp(18px,3vw,32px); }
.borne__pas{ margin-bottom:1.7rem; }
.borne__pas:last-of-type{ margin-bottom:0; }
.borne__legende{
  display:flex; align-items:baseline; gap:.7rem; margin-bottom:.85rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-45);
}
.borne__legende b{ font-family:var(--machine); color:var(--laiton); font-weight:400; }

.choix{ display:flex; flex-wrap:wrap; gap:.55rem; }
.choix button{
  font-family:var(--texte); font-size:.86rem; font-weight:300; color:var(--creme-70);
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.6rem 1rem; cursor:pointer;
  transition:border-color .2s, color .2s, background-color .2s;
}
.choix button:hover{ border-color:var(--laiton); color:var(--creme); }
.choix button[aria-pressed="true"]{ background:var(--laiton); border-color:var(--laiton); color:var(--noir); font-weight:500; }
.choix--fin button{ padding:.5rem .8rem; font-size:.8rem; }
.choix__appui{ font-family:var(--machine); font-size:.7rem; opacity:.62; }

/* ------------------------------------------------- les étapes de réservation
   Une décision par écran. L'en-tête d'une étape refermée dit ce qui est
   choisi et la rouvre d'un doigt : c'est le récapitulatif ET la navigation,
   au même endroit, ce qui évite d'avoir à répéter l'un sous l'autre. */

.pas{ border-bottom:1px solid var(--filet); scroll-margin-top:92px; }
.pas:last-child{ border-bottom:0; }
.pas__tete{
  width:100%; display:grid; gap:.1rem .85rem;
  grid-template-columns:1.9rem 1fr .9rem;
  background:transparent; border:0; cursor:pointer; text-align:left;
  color:var(--creme); font-family:var(--texte); padding:1.05rem 0;
}
.pas__rang{ grid-area:1/1/3/2; align-self:center; font-family:var(--machine); font-size:.7rem; letter-spacing:.1em; color:var(--laiton); }
.pas__nom{ grid-area:1/2/2/3; font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-45); transition:color .2s; }
.pas__valeur{ grid-area:2/2/3/3; font-size:1rem; font-weight:300; }
.pas__valeur em{ font-style:normal; color:var(--creme-45); font-size:.92rem; }
.pas__menu{ font-family:var(--machine); font-size:.76rem; color:var(--laiton); white-space:nowrap; }
.pas__fleche{
  grid-area:1/3/3/4; align-self:center; justify-self:end;
  width:8px; height:8px; border-right:1.5px solid var(--laiton); border-bottom:1.5px solid var(--laiton);
  transform:rotate(45deg); transition:transform .25s;
}
.pas--ouvert .pas__fleche{ transform:rotate(-135deg); }
.pas--ouvert .pas__nom{ color:var(--laiton); }
.pas__corps{ display:grid; gap:1.1rem; padding-bottom:1.5rem; }
/* Un `display` d'auteur bat la règle [hidden] du navigateur, qui n'a presque
   aucune spécificité : sans cette ligne, les étapes refermées restent
   affichées et le module retombe dans le défaut qu'on corrige. */
.pas__corps[hidden]{ display:none; }

/* la liste déroulante : native, donc roulette sur iPhone et liste plein
   écran sur Android — sans une ligne de code de plus */
.champ--select select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--texte); font-size:1rem; font-weight:300; color:var(--creme);
  background-color:rgba(11,9,8,.55); border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.85rem 2.5rem .85rem .85rem; width:100%; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A66B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
}
.champ--select select:focus{ border-color:var(--laiton); outline:none; }
.champ--select option,.champ--select optgroup{ background:var(--fumee-2); color:var(--creme); }

/* le carrousel des jours */
.calendrier{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.35rem; }
.calendrier__fleche{
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  color:var(--creme-70); width:28px; height:62px; cursor:pointer;
  font-family:var(--machine); font-size:1.1rem; line-height:1;
}
.calendrier__fleche:hover{ border-color:var(--laiton); color:var(--creme); }
@media (max-width:560px){ .calendrier{ grid-template-columns:1fr; } .calendrier__fleche{ display:none; } }

/* les tranches de la journée : quatre-vingts créneaux ne se lisent pas,
   une vingtaine oui */
.moments{ display:flex; gap:.4rem; }
.moments button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem;
  font-family:var(--texte); font-size:.68rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--creme-70);
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.55rem .3rem; cursor:pointer;
  transition:border-color .2s, color .2s, background-color .2s;
}
.moments button:hover{ border-color:var(--laiton); color:var(--creme); }
.moments button[aria-pressed="true"]{ background:var(--laiton); border-color:var(--laiton); color:var(--noir); }
.moments__compte{ font-family:var(--machine); font-size:.64rem; letter-spacing:.04em; opacity:.62; }

/* le récapitulatif, juste avant de confirmer */
.bilan{
  font-size:.92rem; color:var(--creme-70); line-height:1.5;
  padding:.85rem 1rem; border-radius:var(--rayon);
  background:rgba(201,166,107,.08); border-left:2px solid var(--laiton);
}
.bilan b{ color:var(--creme); font-weight:500; }
.muet{ color:var(--creme-45); font-size:.9rem; margin:0; }

/* saisie : prénom et numéro WhatsApp */
.champs{ display:grid; gap:.9rem; }
@media (min-width:520px){ .champs{ grid-template-columns:1fr 1fr; } }
.champ{ display:grid; gap:.4rem; }
.champ span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--creme-45); }
.champ input{
  font-family:var(--texte); font-size:.98rem; font-weight:300; color:var(--creme);
  background:rgba(11,9,8,.55); border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.72rem .85rem; width:100%;
}
.champ input::placeholder{ color:var(--creme-45); }
.champ input:focus{ outline:none; border-color:var(--laiton); }
.champ input:focus-visible{ outline:2px solid var(--laiton); outline-offset:2px; }

/* avis sous le talon : fermeture, refus du serveur */
.avis{
  margin:0; padding:.85rem 1rem; border-radius:var(--rayon);
  font-size:.88rem; color:var(--creme-70);
  background:rgba(201,166,107,.10); border-left:2px solid var(--laiton);
}
.avis--erreur{ background:rgba(180,112,94,.14); border-left-color:var(--occupe); color:var(--creme); }

/* poste injoignable dans le bandeau de la file */
.poste--hors{ gap:1rem; }
.poste--hors .poste__nom{ color:var(--creme-70); font-size:.9rem; }

/* ------------------------------------------------- l'agenda : jours et heures */

/* Les trente jours défilent horizontalement : un mois entier tiendrait mal
   dans une grille, et le pouce fait le reste sur mobile. */
.jours{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem;
  scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--filet-fort) transparent;
}
.jours::-webkit-scrollbar{ height:4px; }
.jours::-webkit-scrollbar-thumb{ background:var(--filet-fort); border-radius:2px; }
.jour{
  flex:none; scroll-snap-align:start; min-width:60px;
  display:grid; gap:.1rem; justify-items:center;
  font-family:var(--texte); color:var(--creme-70); cursor:pointer;
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.6rem .5rem;
  transition:border-color .2s, color .2s, background-color .2s;
}
.jour:hover:not([disabled]){ border-color:var(--laiton); color:var(--creme); }
.jour[aria-pressed="true"]{ background:var(--laiton); border-color:var(--laiton); color:var(--noir); }
.jour[disabled]{ opacity:.28; cursor:not-allowed; }
.jour__nom{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.jour__chiffre{ font-family:var(--machine); font-size:1.2rem; line-height:1.1; }
.jour__mois{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.72; }

/* Un salon ouvert de 8 h à 19 h, c'est quarante-cinq créneaux dans une seule
   tranche. On borne la hauteur plutôt que de repousser le bouton de
   confirmation hors de l'écran : six rangées, puis on fait défiler. */
.heures{
  display:grid; gap:.45rem; grid-template-columns:repeat(auto-fill, minmax(74px,1fr));
  max-height:16.5rem; overflow-y:auto; overscroll-behavior:contain; padding-right:.15rem;
  scrollbar-width:thin; scrollbar-color:var(--filet-fort) transparent;
}
.heures::-webkit-scrollbar{ width:4px; }
.heures::-webkit-scrollbar-thumb{ background:var(--filet-fort); border-radius:2px; }
/* 44 px de haut : c'est la taille d'un doigt, et la moitié des réservations
   se prendront sur un téléphone. */
.heure{
  font-family:var(--machine); font-size:.92rem; color:var(--creme-70);
  background:transparent; border:1px solid var(--creme-22); border-radius:var(--rayon);
  padding:.72rem .3rem; min-height:44px; cursor:pointer;
  transition:border-color .2s, color .2s, background-color .2s;
}
.heure:hover{ border-color:var(--laiton); color:var(--creme); }
.heure[aria-pressed="true"]{ background:var(--laiton); border-color:var(--laiton); color:var(--noir); font-weight:700; }

/* ce qui suit la confirmation : une séquence, donc numérotée */
.suite{ list-style:none; margin:0 0 1.6rem; padding:0; counter-reset:suite; display:grid; gap:1.1rem; }
.suite li{
  counter-increment:suite; position:relative; padding-left:2.4rem;
  font-size:.94rem; color:var(--creme-70);
}
.suite li::before{
  content:"0" counter(suite); position:absolute; left:0; top:.1em;
  font-family:var(--machine); font-size:.74rem; letter-spacing:.1em; color:var(--laiton);
}
.suite b{ color:var(--creme); font-weight:500; }

/* les deux boutons d'agenda, côte à côte */
.agenda-liens{ display:grid; gap:.7rem; grid-template-columns:1fr; }
@media (min-width:420px){ .agenda-liens{ grid-template-columns:1fr 1fr; } }
.agenda-liens .bouton{ padding:.9rem 1rem; font-size:.72rem; letter-spacing:.1em; }

/* le talon de ticket : un objet, pas une carte */
.talon{
  position:relative; background:var(--creme); color:#171310;
  border-radius:var(--rayon); padding:clamp(26px,3vw,34px);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.talon::before,.talon::after{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--noir); top:calc(50% - 11px);
}
.talon::before{ left:-11px; }
.talon::after{ right:-11px; }
.talon__haut{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.talon__marque{ font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:.02em; }
.talon__jour{ font-family:var(--machine); font-size:.7rem; color:#6A5F52; text-align:right; }
.talon__numero{
  font-family:var(--machine); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(3.6rem,11vw,5.6rem); line-height:.94; margin:1rem 0 .2rem;
}
.talon dl{ margin:0; }
.talon__ligne{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-top:1px solid rgba(23,19,16,.14); font-size:.88rem; }
.talon__ligne dt{ color:#6A5F52; margin:0; letter-spacing:.06em; text-transform:uppercase; font-size:.66rem; padding-top:.3em; }
.talon__ligne dd{ margin:0; font-family:var(--machine); text-align:right; }
.talon__numero--vide{ color:rgba(23,19,16,.26); }
.talon__sous{
  margin:.2rem 0 0; font-family:var(--texte); font-size:.82rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#6A5F52;
}
.talon__actions{ margin-top:2rem; display:grid; gap:.9rem; }
.talon__actions:empty{ margin-top:0; }
.talon__perfo{
  margin:1.2rem calc(-1 * clamp(26px,3vw,34px)); height:1px;
  background:repeating-linear-gradient(90deg, rgba(23,19,16,.32) 0 6px, transparent 6px 12px);
}
.talon__pied{ font-size:.8rem; color:#6A5F52; margin:0; }
.talon__etat{
  margin:0; padding:.85rem 1rem; border-radius:var(--rayon);
  font-size:.86rem; line-height:1.5; color:#312820;
  background:rgba(23,19,16,.07); border-left:2px solid rgba(23,19,16,.3);
}
.talon__etat b{ font-weight:500; }
.talon__etat--proche{ background:rgba(217,177,96,.24); border-left-color:#A9822C; }
.talon__etat--maintenant{ background:rgba(140,174,121,.28); border-left-color:#4E7340; }
.talon__etat--fini{ color:#6A5F52; border-left-color:rgba(23,19,16,.18); }

/* ---------------------------------------------------- galerie */

.galerie{ display:grid; gap:clamp(10px,1.4vw,18px); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .galerie{ grid-template-columns:repeat(4,1fr); } }
.galerie figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--rayon); background:var(--fumee-2); }
.galerie img{ width:100%; height:100%; object-fit:cover; aspect-ratio:9/14; transition:transform .9s cubic-bezier(.2,.7,.3,1); }
.galerie figure:hover img{ transform:scale(1.045); }
.galerie figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1rem .85rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--creme);
  background:linear-gradient(180deg, transparent, rgba(11,9,8,.85));
}

/* ---------------------------------------------------- équipe */

.equipe{ display:grid; gap:clamp(20px,3vw,32px); grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
.coiffeur{ border:1px solid var(--filet); border-radius:var(--rayon); padding:clamp(22px,2.6vw,30px); background:var(--fumee); }
.coiffeur h3{ margin:0 0 .3rem; }
.coiffeur__role{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--laiton); margin:0 0 1rem; }
.coiffeur p{ margin:0; font-size:.94rem; color:var(--creme-70); }

/* ---------------------------------------------------- carte des prestations */

.rubrique{ margin-bottom:clamp(44px,6vw,72px); }
.rubrique:last-child{ margin-bottom:0; }
.rubrique__tete{ display:flex; align-items:baseline; gap:1.2rem; border-bottom:1px solid var(--filet-fort); padding-bottom:.85rem; margin-bottom:.2rem; }
.rubrique__tete h3{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; }
.rubrique__tete span{ font-family:var(--machine); font-size:.7rem; color:var(--creme-45); margin-left:auto; letter-spacing:.14em; }
.tarif{ display:grid; grid-template-columns:1fr auto auto; gap:.5rem 1.4rem; align-items:baseline; padding:.9rem 0; border-bottom:1px solid var(--filet); }
.tarif__nom{ font-size:1.02rem; }
.tarif__duree{ font-family:var(--machine); font-size:.76rem; color:var(--creme-45); white-space:nowrap; }
.tarif__prix{ font-family:var(--machine); font-size:1.06rem; color:var(--laiton); min-width:3.6em; text-align:right; }
.tarif__note{ grid-column:1/-1; font-size:.76rem; color:var(--creme-45); font-style:italic; margin:0; }

/* ---------------------------------------------------- questions */

.questions{ border-top:1px solid var(--filet); max-width:var(--etroit); }
.question{ border-bottom:1px solid var(--filet); }
.question summary{
  cursor:pointer; list-style:none; padding:1.3rem 2.4rem 1.3rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.06rem,1.7vw,1.28rem); font-weight:500;
}
.question summary::-webkit-details-marker{ display:none; }
.question summary::after{
  content:"+"; position:absolute; right:.3rem; top:1.1rem;
  font-family:var(--machine); color:var(--laiton); font-size:1.3rem;
}
.question[open] summary::after{ content:"\2013"; }
.question p{ color:var(--creme-70); font-size:.97rem; padding-bottom:1.25rem; margin:0; }

/* ---------------------------------------------------- appel final */

.appel{ position:relative; isolation:isolate; overflow:hidden; text-align:center; }
.appel__fond{ position:absolute; inset:0; z-index:-2; }
.appel__fond img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4); }
.appel__voile{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,9,8,.92), rgba(11,9,8,.80)); }
.appel h2{ margin-bottom:1.1rem; }
.appel p{ margin-inline:auto; }
.appel .hero__actions{ justify-content:center; margin-top:2rem; }

/* ---------------------------------------------------- informations */

.infos{ display:grid; gap:clamp(28px,4vw,56px); }
@media (min-width:860px){ .infos{ grid-template-columns:repeat(3,1fr); } }
.infos h3{ font-size:1.12rem; margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--filet); }
.infos dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; font-size:.93rem; }
.infos dt{ color:var(--creme-45); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding-top:.35em; }
.infos dd{ margin:0; }
.infos a{ color:var(--laiton); text-decoration:none; border-bottom:1px solid var(--filet); }
.infos a:hover{ border-bottom-color:var(--laiton); }

/* ---------------------------------------------------- pied de page */

.pied{ border-top:1px solid var(--filet); background:var(--fumee); padding-block:clamp(48px,6vw,72px) 2rem; }
.pied__grille{ display:grid; gap:clamp(28px,4vw,48px); }
@media (min-width:820px){ .pied__grille{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.pied h4{ font-family:var(--texte); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--laiton); margin:0 0 1.1rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.pied a{ color:var(--creme-70); text-decoration:none; font-size:.91rem; }
.pied a:hover{ color:var(--creme); }
.pied__logo img{ height:38px; width:auto; margin-bottom:1.1rem; }  /* `width:auto` n'est pas superflu : l'attribut width="760" de la balise
     fait loi tant que le CSS ne dit rien de la largeur. Le logo etait rendu
     308x38 au lieu de 118x38 — etire de 160 %. Celui de l'en-tete, lui, a
     toujours eu `width:auto` : c'est toute la difference. */
.pied p{ font-size:.91rem; color:var(--creme-70); }
.pied__mention{ margin-top:clamp(36px,5vw,56px); padding-top:1.6rem; border-top:1px solid var(--filet); display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-size:.76rem; color:var(--creme-45); }
.pied__mention p{ margin:0; font-size:.76rem; color:var(--creme-45); }
/* Un lien dans la mention hériterait de `.pied a` : .91rem et creme-70,
   soit plus gros et plus clair que la ligne qui le porte. Il doit se
   distinguer du texte, pas de la taille de la ligne. */
.pied__mention a{ font-size:inherit; color:var(--creme-70); text-decoration:none;
  border-bottom:1px solid var(--filet); }
.pied__mention a:hover{ color:var(--creme); border-bottom-color:var(--laiton); }

/* ---------------------------------------------------- pages de texte */

.texte{ max-width:var(--etroit); }
.texte h2{ font-size:clamp(1.45rem,2.6vw,1.95rem); margin:2.6rem 0 1rem; }
.texte h2:first-of-type{ margin-top:1.6rem; }
.texte h3{ font-family:var(--texte); font-weight:500; font-size:1rem; letter-spacing:.02em; margin:1.8rem 0 .5rem; color:var(--laiton); }
.texte p,.texte li{ color:var(--creme-70); font-size:1rem; }
.texte ul{ padding-left:1.2rem; margin:0 0 1.2rem; }
.texte li{ margin-bottom:.5rem; }
.texte a{ color:var(--laiton); text-decoration:none; border-bottom:1px solid var(--filet); }
.texte a:hover{ border-bottom-color:var(--laiton); }
.texte table{ width:100%; border-collapse:collapse; margin:1rem 0 1.6rem; font-size:.9rem; }
.texte th,.texte td{ text-align:left; padding:.68rem .8rem; border-bottom:1px solid var(--filet); vertical-align:top; }
.texte th{ font-weight:500; color:var(--laiton); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.texte td{ color:var(--creme-70); }
.defilant{ overflow-x:auto; }

.fil{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--creme-45); margin-bottom:1.3rem; }
.fil a{ color:var(--creme-45); text-decoration:none; }
.fil a:hover{ color:var(--laiton); }

.sauter{
  position:absolute; left:-9999px; top:0;
  background:var(--laiton); color:var(--noir); padding:.8rem 1.2rem; z-index:200;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.sauter:focus{ left:var(--marge); top:.5rem; }