/* ==========================================================================
   Beauty Time — Coiffure et Beauté, Biel/Bienne
   Version 2026-09-23-3  (doit correspondre au ?v= dans index.html)
   Palette relevée sur les photos du salon :
   murs blancs, sol béton gris chaud, laiton des cadres et de la vitrine,
   cuir noir des fauteuils.
   ========================================================================== */

:root{
  /* Couleurs */
  --porcelaine:  #F6F5F2;   /* murs du salon */
  --blanc:       #FFFFFF;
  --encre:       #1A1816;   /* cuir des fauteuils */
  --graphite:    #3D3934;
  --beton:       #8C877F;   /* sol */
  --laiton:      #9C7C43;   /* logo et encadrements de vitrine */
  --laiton-clair:#B99A63;
  --filet:       #DCCDAE;   /* filet fin, rappel des cadres de miroirs */
  --filet-pale:  #E6E3DC;

  /* Typographie */
  --titre: "Marcellus", "Times New Roman", serif;
  --texte: "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Allura", "Apple Chancery", cursive;

  /* Rythme */
  --gouttiere: clamp(20px, 5vw, 72px);
  --section:   clamp(72px, 10vw, 148px);
  --max:       1320px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

/* Les ancres ne doivent pas atterrir sous l'en-tête collant. */
[id]{ scroll-margin-top:88px }

body{
  margin:0;
  background:var(--porcelaine);
  color:var(--graphite);
  font-family:var(--texte);
  font-size:clamp(16px,.55vw + 14.2px,17.5px);
  font-weight:300;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
picture{ display:block }   /* sinon height:100% ne résout pas dans le hero */

h1,h2,h3{
  font-family:var(--titre);
  font-weight:400;
  color:var(--encre);
  line-height:1.16;
  letter-spacing:.005em;
  margin:0;
}
h1{ font-size:clamp(2.1rem,4.4vw,3.35rem); line-height:1.1 }
h2{ font-size:clamp(1.7rem,3vw,2.5rem) }
h3{ font-size:1.14rem; letter-spacing:.01em }

p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }

a{ color:var(--laiton); text-decoration-thickness:1px; text-underline-offset:.22em }
a:hover{ color:var(--encre) }

::selection{ background:var(--filet); color:var(--encre) }

:focus-visible{
  outline:2px solid var(--laiton);
  outline-offset:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--encre); color:var(--porcelaine);
  padding:.8em 1.4em; font-size:.9rem;
}
.skip:focus{ left:0 }


/* ========== Mot-logo ==========
   Reconstitution de l'enseigne : script doré + capitales espacées entre filets. */

.lockup{
  display:inline-flex; flex-direction:column; align-items:center;
  text-decoration:none; line-height:1;
}
.lockup__script{
  font-family:var(--script);
  color:var(--laiton);
  line-height:.9;
}
.lockup__rule{
  display:flex; align-items:center; gap:.55em;
  font-family:var(--titre);
  color:var(--laiton-clair);
  text-transform:uppercase;
  white-space:nowrap;
}
.lockup__rule i{ display:block; height:1px; background:currentColor; opacity:.65 }

.lockup--lg .lockup__script{ font-size:clamp(3.4rem,7vw,5rem) }
.lockup--lg .lockup__rule { font-size:clamp(.62rem,1.1vw,.78rem); letter-spacing:.34em; margin-top:.35em }
.lockup--lg .lockup__rule i{ width:clamp(16px,3vw,34px) }

.lockup--md .lockup__script{ font-size:2.9rem }
.lockup--md .lockup__rule { font-size:.6rem; letter-spacing:.3em; margin-top:.3em }
.lockup--md .lockup__rule i{ width:18px }

.lockup--sm .lockup__script{ font-size:1.95rem }
.lockup--sm .lockup__rule { font-size:.5rem; letter-spacing:.26em; margin-top:.18em }
.lockup--sm .lockup__rule i{ width:12px }

.lockup--light .lockup__script{ color:var(--filet) }
.lockup--light .lockup__rule  { color:var(--laiton-clair) }


/* ========== Boutons ========== */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--texte); font-size:.82rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.75em; border:1px solid transparent; border-radius:0;
  cursor:pointer; transition:background .22s, color .22s, border-color .22s;
}
.btn--lg{ padding:1.12em 2.1em; font-size:.86rem }

.btn--brass{ background:var(--laiton); color:var(--porcelaine); border-color:var(--laiton) }
.btn--brass:hover,.btn--brass:focus-visible{ background:var(--encre); border-color:var(--encre); color:var(--porcelaine) }

.btn--ghost{ background:transparent; color:var(--encre); border-color:var(--beton) }
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--encre); background:var(--encre); color:var(--porcelaine) }

/* Bouton rendu comme un lien : ouvre une modale sans peser comme un CTA. */
.lien{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--laiton);
  border-bottom:1px solid var(--filet);
  transition:color .2s, border-color .2s;
}
.lien:hover{ color:var(--encre); border-bottom-color:var(--encre) }


/* ========== En-tête ========== */

.site-head{
  position:sticky; top:0; z-index:60;
  isolation:isolate;
  background:rgba(246,245,242,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet-pale);
}
.head-in{
  position:relative;
  max-width:var(--max); margin-inline:auto;
  padding:.55rem var(--gouttiere);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.9rem) }
.nav a{
  color:var(--graphite); text-decoration:none;
  font-size:.83rem; letter-spacing:.07em;
  padding:.35em 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover,.nav a:focus-visible{ color:var(--encre); border-color:var(--laiton) }
.nav__cta{ margin-left:.4rem }

.burger{
  display:none; width:44px; height:44px; padding:11px 9px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:1px; background:var(--encre); transition:transform .28s, opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(10.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10.5px) rotate(-45deg) }


/* ========== Hero ==========
   Moitié gauche : texte sur porcelaine. Moitié droite : photo portrait
   pleine hauteur, bordée d'un filet laiton — rappel des miroirs du salon. */

.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:calc(100svh - 64px);
  border-bottom:1px solid var(--filet-pale);
}
.hero__text{
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
  padding:clamp(48px,7vw,96px) clamp(28px,5vw,80px);
  max-width:46rem;
  margin-left:auto;
}
.hero .lockup--lg{ align-items:flex-start; margin-bottom:clamp(1.6rem,3vw,2.6rem) }
.hero h1{ max-width:17ch; margin-bottom:1.15rem }
.hero__lede{
  max-width:44ch; font-size:1.06rem; color:var(--graphite);
  margin-bottom:clamp(1.8rem,3vw,2.5rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem }

.hero__frame{ border-left:1px solid var(--filet); display:grid; overflow:hidden }
.hero__frame picture{ height:100% }
.hero__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 36% }

/* apparition orchestrée, une seule fois, au chargement */
.hero__text > *{ animation:monte .85s cubic-bezier(.22,.7,.3,1) backwards }
.hero__text > *:nth-child(1){ animation-delay:.05s }
.hero__text > *:nth-child(2){ animation-delay:.16s }
.hero__text > *:nth-child(3){ animation-delay:.25s }
.hero__text > *:nth-child(4){ animation-delay:.34s }
@keyframes monte{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }


/* ========== Repères ========== */

.reperes{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(34px,4.5vw,54px) var(--gouttiere);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.repere{ padding-inline:clamp(14px,2.6vw,40px) }
.repere:first-child{ padding-left:0 }
.repere:last-child { padding-right:0 }
.repere + .repere{ border-left:1px solid var(--filet-pale) }
.repere__k{
  display:block; font-family:var(--titre); font-size:1.5rem;
  color:var(--laiton); margin-bottom:.22em;
}
.repere__v{ display:block; font-size:.92rem; color:var(--beton); line-height:1.5 }


/* ========== Le salon ========== */

.salon{
  max-width:var(--max); margin-inline:auto;
  padding:var(--section) var(--gouttiere);
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(34px,5vw,84px); align-items:start;
}
.salon__frame{ position:relative; border:1px solid var(--filet); padding:clamp(9px,1vw,14px) }
.salon__frame img{ width:100% }

.salon__text .lede{
  font-size:1.12rem; color:var(--graphite);
  max-width:48ch; margin-top:1.15rem; margin-bottom:clamp(2rem,3.4vw,2.9rem);
}

.piliers{ display:grid; gap:clamp(1.5rem,2.4vw,2.1rem) }
.pilier{ padding-top:1.35rem; border-top:1px solid var(--filet) }
.pilier h3{ margin-bottom:.5rem }
.pilier p{ font-size:.97rem; max-width:52ch; color:var(--graphite) }

.salon__aparte{
  margin-top:clamp(2rem,3.4vw,2.8rem);
  padding-left:1.15rem; border-left:2px solid var(--laiton);
  font-size:.95rem; color:var(--beton); max-width:50ch;
}


/* ========== Prestations ========== */

.presta{
  background:var(--blanc);
  border-block:1px solid var(--filet-pale);
}
.presta > *{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gouttiere) }

.presta__head{ padding-top:var(--section); max-width:min(var(--max),100%) }
.presta__head p{ max-width:52ch; margin-top:1rem; color:var(--beton) }

.presta__list{
  list-style:none; margin:clamp(2.4rem,4vw,3.4rem) auto 0; padding-inline:var(--gouttiere);
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(34px,5vw,80px);
}
.presta__list li{
  padding:1.5rem 0 1.45rem;
  border-top:1px solid var(--filet);
}
.presta__list li:nth-child(-n+2){ border-top-color:var(--laiton) }
.presta__list h3{ margin-bottom:.35rem }
.presta__list p{ font-size:.95rem; color:var(--beton); max-width:44ch }

.presta__foot{ padding-bottom:var(--section); padding-top:clamp(2.2rem,3.6vw,3rem) }


/* ========== Galerie ========== */

.galerie{
  max-width:var(--max); margin-inline:auto;
  padding:var(--section) var(--gouttiere);
}
.galerie h2{ margin-bottom:clamp(1.8rem,3vw,2.6rem) }
.galerie__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
}
.galerie figure{ margin:0; background:var(--filet-pale) }
.galerie img{ width:100%; aspect-ratio:3/4; object-fit:cover }


/* ========== Avis ========== */

.avis{
  background:var(--encre); color:var(--filet-pale);
  border-block:1px solid var(--encre);
}
/* Fond pleine largeur, contenu aligné sur la grille du site. */
.avis{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);
  padding-block:var(--section);
  padding-inline:max(var(--gouttiere), calc((100% - var(--max)) / 2));
}
.avis h2{ color:var(--porcelaine) }
.avis__note{
  display:flex; align-items:baseline; gap:.65rem;
  margin:1.2rem 0 .25rem;
}
.avis__note strong{ font-family:var(--titre); font-size:2.9rem; font-weight:400; color:var(--porcelaine) }
.etoiles{ color:var(--laiton-clair); font-size:1.05rem; letter-spacing:.16em }
.avis__sous{ font-size:.9rem; color:var(--beton) }

.avis__liste{ display:grid; gap:clamp(1.6rem,2.6vw,2.2rem); align-content:center }
.avis__item{ margin:0; padding-left:1.35rem; border-left:1px solid var(--laiton) }
.avis__item blockquote{ margin:0 }
.avis__item p{
  font-family:var(--titre); font-size:clamp(1.12rem,1.9vw,1.4rem);
  line-height:1.45; color:var(--porcelaine);
}
.avis__item figcaption{ margin-top:.7rem; font-size:.85rem; letter-spacing:.09em; color:var(--beton) }


/* ========== Horaires et contact ========== */

.infos{
  max-width:var(--max); margin-inline:auto;
  padding:var(--section) var(--gouttiere);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,6vw,96px);
}
.statut{
  display:inline-block; margin:1.1rem 0 0;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
}
.statut::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:.6em; vertical-align:.18em;
}
.statut[data-ouvert="oui"]{ color:#5A7A4E }
.statut[data-ouvert="non"]{ color:var(--beton) }

.horaires{
  width:100%; border-collapse:collapse;
  margin-top:1.6rem; font-size:1rem;
}
.horaires th,.horaires td{
  padding:.82em 0; border-bottom:1px solid var(--filet-pale);
  text-align:left; font-weight:300;
}
.horaires th{ color:var(--graphite) }
.horaires td{ text-align:right; color:var(--beton); font-variant-numeric:tabular-nums }
.horaires tr[data-aujourdhui] th,
.horaires tr[data-aujourdhui] td{ color:var(--laiton); border-bottom-color:var(--filet) }

.coord{ font-style:normal; margin-top:1.6rem }
.coord__adr{ font-family:var(--titre); font-size:1.15rem; color:var(--encre); line-height:1.6 }
.coord a{ text-decoration:none; border-bottom:1px solid var(--filet) }
.coord a:hover{ border-color:var(--encre) }
.coord__acces{ margin-top:1.4rem; font-size:.95rem; color:var(--beton); max-width:42ch }
.coord__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem }
.coord__cadeau{ margin-top:1.25rem; font-size:.95rem }


/* ========== FAQ ========== */

.faq{
  background:var(--blanc); border-top:1px solid var(--filet-pale);
  padding-block:var(--section);
  padding-inline:max(var(--gouttiere), calc((100% - var(--max)) / 2));
}
.faq h2, .faq__list{ max-width:74ch }
.faq__list{ margin-top:clamp(1.8rem,3vw,2.6rem) }

.faq details{ border-top:1px solid var(--filet) }
.faq details:last-child{ border-bottom:1px solid var(--filet) }
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.25rem 2.4rem 1.25rem 0; position:relative;
  font-family:var(--titre); font-size:1.08rem; color:var(--encre);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--laiton); border-bottom:1px solid var(--laiton);
  transform:rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
.faq details p{ padding:0 1.5rem 1.4rem 0; font-size:.97rem; color:var(--graphite) }


/* ========== Pied de page ========== */

.site-foot{ background:var(--encre); color:var(--beton) }
.foot-in{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(52px,6vw,84px) var(--gouttiere) clamp(34px,4vw,48px);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(28px,4vw,64px);
  align-items:start;
}
.foot-in .lockup{ align-items:flex-start }
.foot__adr{ font-style:normal; font-size:.95rem; line-height:1.85 }
.foot__adr a{ color:var(--filet-pale); text-decoration:none; border-bottom:1px solid var(--graphite) }
.foot__adr a:hover{ border-color:var(--laiton-clair); color:var(--laiton-clair) }

.foot__nav{ display:grid; gap:.5rem; justify-items:start }
.foot__nav a,
.foot__nav .lien{ color:var(--beton); text-decoration:none; font-size:.9rem }
.foot__nav .lien{ border-bottom-color:transparent; line-height:inherit }
.foot__nav a:hover,
.foot__nav .lien:hover{ color:var(--filet-pale); border-bottom-color:transparent }

.foot__legal{
  max-width:var(--max); margin-inline:auto;
  padding:1.4rem var(--gouttiere) 2.4rem;
  border-top:1px solid #2A2724;
  font-size:.82rem; color:#6B665F;
}


/* ========== Modales (réservation, carte cadeau) ========== */

/* Le bouton flottant Salonized pose son iframe à z-index 2147480999.
   On se place juste au-dessus, sinon la modale s'ouvre derrière lui. */
.modale{ position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center;
         padding:clamp(6px,2vw,26px) }
.modale[hidden]{ display:none }
.modale__fond{ position:absolute; inset:0; background:rgba(26,24,22,.62); backdrop-filter:blur(3px) }

.modale__boite{
  position:relative; display:flex; flex-direction:column;
  width:min(732px,100%); height:min(860px,96svh);
  background:var(--porcelaine); border:1px solid var(--filet);
  box-shadow:0 30px 70px -30px rgba(26,24,22,.6);
  animation:boite .3s cubic-bezier(.22,.7,.3,1);
}
@keyframes boite{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* Barre de fermeture seule : le widget porte déjà son propre titre. */
.modale__tete{
  flex:0 0 auto; display:flex; justify-content:flex-end;
  padding:2px 4px 0;
}

.modale__x{
  flex:0 0 auto; width:42px; height:42px;
  background:none; border:0; font-size:1.7rem; line-height:1;
  color:var(--beton); cursor:pointer;
}
.modale__x:hover{ color:var(--encre) }

/* La hauteur de l'iframe vient de data-height (voir main.js) ; on ne fait que
   lui laisser la place et garder un filet de défilement pour les petits écrans. */
/* Fond blanc : le widget pose sa propre boîte blanche, elle s'y fond. */
.modale__corps{
  flex:1 1 auto; min-height:0; overflow:auto;
  background:var(--blanc); padding:clamp(8px,1.4vw,14px);
}
.modale__corps .salonized-booking,
.modale__corps .salonized-voucher{ display:block }

.modale__tel{
  flex:0 0 auto; font-size:.86rem; color:var(--beton); line-height:1.4;
  padding:0 clamp(14px,2.6vw,28px) clamp(9px,1.6vw,16px);
}
.modale__tel a{ white-space:nowrap }

body.bloque{ overflow:hidden }


/* ========== Adaptations ========== */

@media (max-width:1040px){
  .salon{ grid-template-columns:1fr; }
  .salon__frame{ max-width:460px }
  .avis{ grid-template-columns:1fr }
  .foot-in{ grid-template-columns:1fr 1fr; }
  .foot-in .lockup{ grid-column:1 / -1 }
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0 }
  .hero__frame{ order:-1; border-left:0; border-bottom:1px solid var(--filet) }
  .hero__frame img{ height:clamp(320px,52svh,480px); object-position:50% 46% }
  .hero__text{ margin-left:0; max-width:none }

  /* Panneau déroulant : masqué par visibilité, pas par débordement —
     un décalage hors cadre repasserait par-dessus le fond de l'en-tête. */
  .nav{
    position:absolute; top:100%; left:0; right:0; z-index:5;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--porcelaine); border-bottom:1px solid var(--filet);
    padding:.5rem var(--gouttiere) 1.6rem;
    box-shadow:0 18px 30px -22px rgba(26,24,22,.45);
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .2s, transform .26s cubic-bezier(.22,.7,.3,1), visibility 0s .26s;
  }
  .nav[data-ouvert]{
    visibility:visible; opacity:1; transform:none;
    transition:opacity .2s, transform .26s cubic-bezier(.22,.7,.3,1), visibility 0s 0s;
  }
  .nav a{ padding:.95em 0; border-bottom:1px solid var(--filet-pale) }
  .nav a:hover{ border-color:var(--filet-pale) }
  .nav__cta{ margin:1.1rem 0 0 }
  .burger{ display:flex }

  .galerie__grid{ grid-template-columns:repeat(2,1fr) }
  .infos{ grid-template-columns:1fr }
}

/* Téléphone : on gratte le peu de chrome qui reste autour du widget. */
@media (max-width:640px){
  .modale{ padding:5px }
  .modale__boite{ height:97svh }
  .modale__tete{ padding:0 2px }
  .modale__x{ width:40px; height:40px; font-size:1.5rem }
  .modale__corps{ padding:5px }
  .modale__tel{ padding:0 10px 7px; font-size:.8rem }

  .reperes{ grid-template-columns:1fr; gap:1.4rem }
  .repere{ padding-inline:0 }
  .repere + .repere{ border-left:0; border-top:1px solid var(--filet-pale); padding-top:1.4rem }
  .presta__list{ grid-template-columns:1fr }
  .presta__list li:nth-child(2){ border-top-color:var(--filet) }
  .hero__actions .btn{ flex:1 1 100%; }
  .foot-in{ grid-template-columns:1fr; gap:2rem }
}

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