/* ============================================================
   THE SKIN ARCHITECT — feuille de style
   Palette et typographies issues de l'identité de marque.
   ============================================================ */

:root{
  --noir:        #1A1512;   /* noir chaud */
  --noir-doux:   #3B322B;
  --creme:       #F2EDE4;   /* beige crème */
  --creme-deep:  #E8E0D3;
  --taupe:       #8A7F73;   /* gris taupe */
  --or:          #B8955F;   /* or doux — usage volontairement rare */
  --ligne:       #D6CCBC;

  --display: "Cormorant Garamond", Georgia, serif;
  --texte:   "Jost", "Helvetica Neue", Arial, sans-serif;

  --gouttiere: 11rem;       /* colonne d'annotation à gauche */
  --marge:     clamp(1.5rem, 5vw, 5.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--creme);
  color:var(--noir);
  font-family:var(--texte);
  font-weight:300;
  font-size:clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

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

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

:focus-visible{
  outline:1px solid var(--or);
  outline-offset:4px;
}

.lien-evitement{
  position:absolute; left:-9999px; top:0;
  background:var(--noir); color:var(--creme);
  padding:.75rem 1.25rem; z-index:100;
}
.lien-evitement:focus{ left:0; }

/* ---------- Typographie ---------- */

h1, h2, h3{
  font-family:var(--display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-0.005em;
}

h1{ font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); }
h3{ font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); }

.etiquette{
  font-family:var(--texte);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--taupe);
}

.chapo{
  font-family:var(--display);
  font-size:clamp(1.2rem, 1rem + 1vw, 1.65rem);
  line-height:1.5;
  font-style:italic;
  color:var(--noir-doux);
  max-width:34ch;
}

p + p{ margin-top:1.1rem; }
.mesure{ max-width:56ch; }

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

.entete{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.1rem var(--marge);
  background:color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.entete.detachee{ border-bottom-color:var(--ligne); }

.marque{
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:400;
}
.marque span{ display:block; font-size:.58rem; letter-spacing:.22em; color:var(--taupe); margin-top:.25rem; }

.navigation{ display:flex; gap:2rem; align-items:center; }
.navigation a{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--noir-doux);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.navigation a:hover{ border-bottom-color:var(--or); }
.nav-cache{ display:none; }

@media (max-width:860px){
  .navigation a:not(.nav-rdv){ display:none; }
  .nav-rdv{ border-bottom-color:var(--or); }
}

/* ---------- Trame : gouttière d'annotation ---------- */

.bloc{
  display:grid;
  grid-template-columns:var(--gouttiere) minmax(0,1fr);
  padding:clamp(4rem, 9vh, 8rem) var(--marge);
  border-top:1px solid var(--ligne);
}
.bloc > .repere{
  position:relative;
  padding-top:.5rem;
}
.bloc > .repere::before{
  content:"";
  position:absolute; left:0; top:.55rem;
  width:1.75rem; height:1px; background:var(--taupe);
}
.bloc > .repere .etiquette{ display:block; padding-left:2.5rem; }

@media (max-width:860px){
  .bloc{ grid-template-columns:1fr; gap:2rem; }
  .bloc > .repere::before{ display:none; }
  .bloc > .repere .etiquette{ padding-left:0; }
}

/* ---------- Hero ---------- */

.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:clamp(520px, 84vh, 860px);
  align-items:stretch;
}
.hero-texte{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem, 7vh, 6rem) var(--marge) clamp(3rem, 7vh, 6rem);
}
.hero-lieu{ margin-bottom:2rem; }
.hero h1{ margin-bottom:1.75rem; }
.hero h1 em{ font-style:italic; color:var(--noir-doux); }

.signature{
  display:flex; align-items:center; gap:.9rem;
  margin-top:2.5rem;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--taupe);
}
.signature i{ display:block; width:1.5rem; height:1px; background:var(--or); font-style:normal; }

.hero-image{ position:relative; overflow:hidden; }

@media (max-width:860px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero-image{ height:58vh; order:-1; }
}

/* ---------- Traitement photographique : sépia monochrome ---------- */
/* Toute photo reçoit ce traitement : les images d'origines
   différentes s'harmonisent automatiquement.                    */

.photo{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, #CBBEA9 0%, #A99783 45%, #6E6154 100%);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.42) contrast(1.04) brightness(.98);
}
.photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,21,18,.06), rgba(26,21,18,.22));
  pointer-events:none;
}
.photo.ronde{ border-radius:50%; aspect-ratio:1; }

/* Repère visuel tant qu'aucune photo n'est posée */
.photo:not(:has(img))::before{
  content:attr(data-photo);
  position:absolute; inset:auto 0 1.25rem 0;
  text-align:center;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,237,228,.62);
}

/* ---------- Manifeste ---------- */

.manifeste h2{ max-width:18ch; margin-bottom:2rem; }
.manifeste .colonnes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,22rem),1fr));
  gap:2.5rem;
  margin-top:2.5rem;
}

/* ---------- Leviers ---------- */

.leviers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,15rem),1fr));
  gap:1px;
  background:var(--ligne);
  margin-top:3rem;
  border:1px solid var(--ligne);
}
.levier{
  background:var(--creme);
  padding:2.25rem 1.75rem 2.5rem;
}
.levier h3{ margin:.9rem 0 .8rem; }
.levier p{ font-size:.92rem; color:var(--noir-doux); }

/* ---------- Déroulé (séquence réelle) ---------- */

.deroule{ margin-top:3rem; counter-reset:etape; }
.etape{
  display:grid;
  grid-template-columns:4.5rem 1fr;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--ligne);
  align-items:baseline;
}
.etape:last-child{ border-bottom:1px solid var(--ligne); }
.etape .duree{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or);
  white-space:nowrap;
}
.etape h3{ font-size:clamp(1.1rem,1rem+.5vw,1.4rem); margin-bottom:.35rem; }
.etape p{ font-size:.92rem; color:var(--noir-doux); max-width:52ch; }

/* ---------- Prestations ---------- */

.prestations{ background:var(--creme-deep); }
.carte-liste{ margin-top:3rem; }
.prestation{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem 2rem;
  align-items:baseline;
  padding:1.5rem 0;
  border-top:1px solid var(--ligne);
}
.prestation:last-child{ border-bottom:1px solid var(--ligne); }
.prestation h3{ margin-bottom:.3rem; }
.prestation p{ font-size:.9rem; color:var(--noir-doux); max-width:48ch; }
.prestation .prix{
  font-family:var(--display);
  font-size:1.5rem;
  white-space:nowrap;
}
.prestation .prix small{ display:block; font-family:var(--texte); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-top:.3rem; }

@media (max-width:640px){
  .prestation{ grid-template-columns:1fr; }
  .prestation .prix{ font-size:1.3rem; }
}

/* ---------- FAQ ---------- */

.faq{ margin-top:3rem; max-width:62ch; }
.faq-item{
  padding:1.6rem 0;
  border-top:1px solid var(--ligne);
}
.faq-item:last-child{ border-bottom:1px solid var(--ligne); }
.faq-item h3{
  font-size:clamp(1.05rem, 1rem + .45vw, 1.3rem);
  margin-bottom:.6rem;
}
.faq-item p{ font-size:.93rem; color:var(--noir-doux); }

/* ---------- Lieu ---------- */

.lieu-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,18rem),1fr));
  gap:3rem;
  margin-top:2.5rem;
}
.lieu-grille h3{ margin-bottom:.8rem; }
.lieu-grille p{ font-size:.95rem; }

/* ---------- Appel à l'action ---------- */

.appel{
  background:var(--noir);
  color:var(--creme);
  border-top:none;
}
.appel .etiquette{ color:rgba(242,237,228,.55); }
.appel > .repere::before{ background:rgba(242,237,228,.4); }
.appel h2{ max-width:20ch; margin-bottom:1.5rem; }
.appel p{ color:rgba(242,237,228,.78); max-width:48ch; }

.bouton{
  display:inline-flex; align-items:center; gap:.9rem;
  margin-top:2.5rem;
  padding:1.05rem 2.25rem;
  border:1px solid var(--or);
  color:var(--creme);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background-color .3s ease, color .3s ease;
}
.bouton:hover{ background:var(--or); color:var(--noir); }
.bouton i{ font-style:normal; }

.contact-direct{
  margin-top:2.5rem;
  font-size:.85rem;
  color:rgba(242,237,228,.7);
}
.contact-direct a{ border-bottom:1px solid rgba(184,149,95,.6); }

/* ---------- Pied de page ---------- */

.pied{
  background:var(--noir);
  color:rgba(242,237,228,.6);
  padding:3rem var(--marge) 3.5rem;
  border-top:1px solid rgba(242,237,228,.12);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,14rem),1fr));
  gap:2rem;
  font-size:.82rem;
}
.pied strong{ display:block; color:var(--creme); font-weight:400; letter-spacing:.2em; text-transform:uppercase; font-size:.68rem; margin-bottom:.9rem; }
.pied a:hover{ color:var(--creme); }

/* ---------- Apparition au défilement ---------- */

.reveler{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease; }
.reveler.vu{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveler{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   PAGE RÉSERVATION
   ============================================================ */

.reservation{ padding-bottom:0; }
.reservation h2{ margin-bottom:1.5rem; }

.avant-reserver{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,16rem),1fr));
  gap:2.5rem;
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--ligne);
}
.avant-reserver h3{ font-size:1.15rem; margin-bottom:.6rem; }
.avant-reserver p{ font-size:.92rem; color:var(--noir-doux); }

}

/* Bouton Planity */
.reserver-planity{ margin-top:3rem; }
.bouton-clair{
  color:var(--noir);
  border-color:var(--noir);
  margin-top:0;
}
.bouton-clair:hover{ background:var(--noir); color:var(--creme); border-color:var(--noir); }
.reserver-note{
  margin-top:1.1rem;
  font-size:.85rem;
  color:var(--taupe);
  max-width:44ch;
}

/* ============================================================
   ANNONCE (fenêtre d'offre)
   ============================================================ */

.annonce-fond{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(26,21,18,.55);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .5s ease;
}
.annonce-fond.visible{ opacity:1; }
.annonce-fond[hidden]{ display:none; }

.annonce{
  position:relative;
  background:var(--creme);
  border:1px solid var(--ligne);
  max-width:30rem; width:100%;
  padding:clamp(2.25rem,5vw,3.25rem);
  text-align:left;
  transform:translateY(14px);
  transition:transform .5s ease;
}
.annonce-fond.visible .annonce{ transform:none; }

.annonce h2{
  font-size:clamp(1.7rem,1.3rem+1.6vw,2.4rem);
  margin:.9rem 0 1rem;
}
.annonce p{ font-size:.94rem; color:var(--noir-doux); max-width:none; }
.annonce .tarif{
  font-family:var(--display);
  font-size:2.6rem;
  line-height:1;
  margin:1.5rem 0 .4rem;
}
.annonce .tarif s{ color:var(--taupe); font-size:1.5rem; margin-right:.6rem; text-decoration-thickness:1px; }
.conditions{ font-size:.78rem; color:var(--taupe); max-width:50ch; }
.annonce .conditions{ margin-top:1.5rem; }
.annonce .bouton{ margin-top:1.75rem; }

.annonce-fermer{
  position:absolute; top:.85rem; right:.85rem;
  width:2.5rem; height:2.5rem;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-family:var(--texte); font-size:1.35rem; line-height:1;
  color:var(--taupe);
}
.annonce-fermer:hover{ color:var(--noir); }

@media (prefers-reduced-motion:reduce){
  .annonce-fond, .annonce{ transition:none; }
}