/* ============================================================
   Ô Carré — Salon de coiffure, Orcines
   Direction visuelle : Courbes
   Palette calée sur le logo officiel (vert #1E4A3F, argent #9DA2A3)
   ============================================================ */

:root {
  --creme:      #FAF9F5;
  --nude:       #EAE3D9;
  --sable:      #D9CFC2;
  --vert:       #1E4A3F;
  --vert-fonce: #12302A;
  --argent:     #9DA2A3;
  --taupe:      #77706A;
  --or:         #C08457;
  --blanc:      #FFFFFF;
  --serif:      "Fraunces", Georgia, serif;
  --sans:       "Nunito", "Helvetica Neue", Helvetica, sans-serif;
  --courbe:     cubic-bezier(.22, .68, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--vert);
  background: var(--creme);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* L'enveloppe des images WebP ne doit jamais influencer la mise en page */
picture { display: contents; }
a { color: inherit; text-decoration: none; }

/* Grain de papier, posé au-dessus de toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Révélation au défilement ---------- */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1.05s var(--courbe) var(--d, 0ms), transform 1.05s var(--courbe) var(--d, 0ms);
}
.js-anim .reveal.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Utilitaires ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.label::before {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 300; font-style: italic; text-wrap: balance; }
h1, h2 { line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: clamp(40px, 6.2vw, 78px); }
h3 { line-height: 1.15; }

.lead { font-size: 17.5px; color: var(--taupe); max-width: 560px; }

.filet {
  width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--or), var(--argent));
  border: none; margin: 34px 0;
  border-radius: 100px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1s var(--courbe) .25s;
}
.filet.centre { margin-left: auto; margin-right: auto; transform-origin: center; }
.vu .filet, .vu.filet, .reveal.vu .filet { transform: scaleX(1); }
html:not(.js-anim) .filet { transform: scaleX(1); }

.texte-centre { text-align: center; }
.texte-centre .lead { margin-left: auto; margin-right: auto; }
.texte-centre .label { justify-content: center; }
.texte-centre .label::after {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 38px;
  border: 2px solid var(--vert);
  color: var(--vert);
  background: transparent;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--courbe), border-color .45s var(--courbe), transform .45s var(--courbe), box-shadow .45s var(--courbe);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--vert);
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--courbe);
  z-index: -1;
}
.btn:hover { color: var(--creme); transform: translateY(-2px); }
.btn:hover::before { transform: scaleX(1); }
.btn:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.btn.plein { background: var(--vert); color: var(--creme); box-shadow: 0 10px 28px rgba(30,74,63,.22); }
.btn.plein::before { background: var(--or); }
.btn.plein:hover { color: #fff; border-color: var(--or); box-shadow: 0 16px 38px rgba(192,132,87,.3); }

.btn.blanc { border-color: rgba(255,255,255,.75); color: #fff; border-width: 1.5px; }
.btn.blanc::before { background: #fff; }
.btn.blanc:hover { color: var(--vert); border-color: #fff; }

.btn.blanc-plein { background: #fff; border-color: #fff; color: var(--vert); border-width: 1.5px; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.btn.blanc-plein::before { background: var(--or); }
.btn.blanc-plein:hover { color: #fff; border-color: var(--or); }

/* ---------- Bandeau supérieur ---------- */
.topbar {
  background: var(--vert);
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.topbar a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; }
.topbar a:hover { border-bottom-color: var(--or); color: var(--or); }

/* ---------- Navigation ---------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,245,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(30,74,63,.07);
  transition: box-shadow .4s var(--courbe), background .4s var(--courbe);
}
header.nav.compacte {
  background: rgba(250,249,245,.94);
  box-shadow: 0 8px 30px rgba(30,74,63,.08);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 92px;
  transition: height .4s var(--courbe);
}
header.nav.compacte .nav-inner { height: 74px; }

.marque { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.marque-logo {
  width: auto; height: 54px;
  transition: height .4s var(--courbe), transform .5s var(--courbe);
}
header.nav.compacte .marque-logo { height: 42px; }
.marque:hover .marque-logo { transform: scale(1.05) rotate(-2deg); }
.marque-texte { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.marque .nom {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 300;
  font-style: italic;
}
.marque .par {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Bouton du menu replié, visible seulement en petite largeur */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 100px;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  margin: 0 auto;
  background: var(--vert);
  border-radius: 100px;
  transition: transform .4s var(--courbe), opacity .3s var(--courbe);
}
header.nav.ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav.ouvert .burger span:nth-child(2) { opacity: 0; }
header.nav.ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav.menu { display: flex; gap: 32px; align-items: center; }
nav.menu a {
  position: relative;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s ease;
}
nav.menu a:not(.rdv)::after {
  content: "";
  position: absolute; left: 0; bottom: -7px;
  width: 100%; height: 2px;
  background: var(--or);
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--courbe);
}
nav.menu a:not(.rdv):hover::after,
nav.menu a.actif::after { transform: scaleX(1); transform-origin: left center; }
nav.menu a:hover, nav.menu a.actif { color: var(--or); }
nav.menu a.rdv {
  background: var(--vert);
  color: var(--creme);
  padding: 12px 28px;
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(30,74,63,.2);
  transition: background .4s var(--courbe), transform .4s var(--courbe), box-shadow .4s var(--courbe);
}
nav.menu a.rdv:hover {
  background: var(--or); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(192,132,87,.34);
}

/* ---------- Héro ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.hero video, .hero .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-out both;
}
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10,14,12,.1) 30%, rgba(10,14,12,.5) 88%),
    linear-gradient(to bottom, rgba(10,14,12,.5), rgba(10,14,12,.26) 42%, rgba(10,14,12,.76));
}

.hero-contenu { position: relative; z-index: 2; padding: 130px 24px 150px; max-width: 880px; }

.hero-logo {
  width: clamp(130px, 17vw, 210px);
  height: auto;
  margin: 0 auto 34px;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 74%);
  animation: logoEntree 1.5s var(--courbe) both;
}
@keyframes logoEntree {
  from { opacity: 0; transform: translateY(26px) scale(.82); }
  to   { opacity: 1; transform: none; }
}

@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero-contenu .sur-titre {
  font-size: 11.5px; letter-spacing: 0.38em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.82); margin-bottom: 26px;
  animation: monte 1s var(--courbe) .45s both;
}
.hero-contenu h1 {
  font-size: clamp(52px, 8.4vw, 116px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.028em;
  margin-bottom: 34px;
  text-shadow: 0 6px 34px rgba(0,0,0,.35);
  animation: monte 1.1s var(--courbe) .6s both;
}
.hero-contenu p.sous-titre {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.78); margin-bottom: 48px;
  animation: monte 1s var(--courbe) .8s both;
}
.hero-boutons {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  animation: monte 1s var(--courbe) .95s both;
}

.hero-fleche {
  position: absolute; z-index: 3;
  left: 50%; bottom: 46px;
  width: 26px; height: 44px;
  margin-left: -13px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 100px;
  animation: monte 1s var(--courbe) 1.3s both;
}
.hero-fleche span {
  position: absolute; left: 50%; top: 9px;
  width: 4px; height: 4px; margin-left: -2px;
  background: #fff; border-radius: 50%;
  animation: goutte 1.9s ease-in-out infinite;
}
@keyframes goutte {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  75%  { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(18px); opacity: 0; }
}
.hero-fleche:hover { border-color: #fff; }

/* ---------- Sections et vagues ---------- */
section { padding: clamp(84px, 11vw, 168px) 0; position: relative; }

/* Une section suivie d'une vague réserve la hauteur de celle-ci */
section:has(+ .fond-nude), section:has(+ .avis), section:has(+ .cta-fin) {
  padding-bottom: calc(clamp(84px, 11vw, 168px) + clamp(48px, 7vw, 104px));
}

/* Vague décorative posée au-dessus d'une section colorée */
.fond-nude, .avis, .cta-fin { position: relative; }
.fond-nude::before, .avis::before, .cta-fin::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: clamp(48px, 7vw, 104px);
  transform: translateY(-100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.fond-nude, .cta-fin { background: var(--nude); }
.fond-nude::before, .cta-fin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 104' preserveAspectRatio='none'%3E%3Cpath d='M0 104V46c150-40 320-52 520-24s368 60 560 36 240-52 360-72v118z' fill='%23EAE3D9'/%3E%3C/svg%3E");
}

.avis { background: var(--vert); }
.avis::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 104' preserveAspectRatio='none'%3E%3Cpath d='M0 104V46c150-40 320-52 520-24s368 60 560 36 240-52 360-72v118z' fill='%231E4A3F'/%3E%3C/svg%3E");
}

/* L'institut */
.institut-grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.institut-grille .photo { position: relative; }
.institut-grille .photo img {
  width: 100%; height: clamp(500px, 48vw, 680px);
  object-fit: cover;
  border-radius: 200px 200px 24px 24px;
  box-shadow: 0 30px 70px rgba(30,74,63,.16);
}
.citation {
  position: relative;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: var(--vert);
  background: var(--nude);
  border-radius: 24px 24px 24px 4px;
  padding: 30px 32px;
  margin: 34px 0;
  line-height: 1.6;
}
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--or);
}

/* En-tête de section éditorial : titre à gauche, accroche à droite */
.entete-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: clamp(40px, 7vw, 110px);
  align-items: end;
  grid-template-areas:
    "label  accroche"
    "titre  accroche"
    "filet  accroche"
    "suite  suite";
}
.entete-split > .label { grid-area: label; align-self: end; }
.entete-split > h2 { grid-area: titre; margin-bottom: 0; }
.entete-split > .filet { grid-area: filet; margin: 28px 0 0; }
.entete-split > .lead { grid-area: accroche; max-width: none; padding-bottom: 6px; }
.entete-split > .soins-grille,
.entete-split > .marques-liste { grid-area: suite; }

@media (max-width: 860px) {
  .entete-split {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "titre" "filet" "accroche" "suite";
  }
  .entete-split > .lead { margin-top: 26px; }
}

/* Univers de soins */
.soins-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 70px;
}
.carte-soin {
  position: relative;
  background: var(--creme);
  border-radius: 28px;
  overflow: hidden;
  display: block;
  box-shadow: 0 2px 10px rgba(30,74,63,.04);
  transition: transform .7s var(--courbe), box-shadow .7s var(--courbe);
}
.carte-soin:hover { transform: translateY(-12px); box-shadow: 0 36px 70px rgba(30,74,63,.16); }
.carte-soin .visuel { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.carte-soin .visuel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,48,42,.5), transparent 55%);
  opacity: 0;
  transition: opacity .6s var(--courbe);
}
.carte-soin:hover .visuel::after { opacity: 1; }
.carte-soin .visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--courbe);
}
.carte-soin:hover .visuel img { transform: scale(1.08); }
.carte-soin .visuel.tuile {
  display: flex; align-items: center; justify-content: center;
  background: var(--sable);
}
.carte-soin .visuel.tuile span {
  font-family: var(--serif);
  font-size: 88px;
  font-style: italic;
  color: rgba(30,74,63,.22);
}
.carte-soin .infos { padding: 30px 32px 36px; }
.carte-soin h3 { font-size: 28px; margin-bottom: 12px; letter-spacing: -0.015em; }
.carte-soin p { font-size: 14.5px; color: var(--taupe); margin-bottom: 20px; }
.carte-soin .lien {
  position: relative;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--or); font-weight: 700;
}
.carte-soin .lien::after {
  content: "";
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1.5px; background: var(--or);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--courbe);
}
.carte-soin:hover .lien::after { transform: scaleX(1); }

/* Bande pleine largeur */
.bande {
  position: relative;
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background-size: cover; background-position: center;
  background-attachment: fixed;
  padding: 100px 24px;
  border-radius: 48px;
  margin: 0 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(30,74,63,.2);
}
.bande::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(18,48,42,.68), rgba(30,74,63,.42));
}
.bande > div { position: relative; z-index: 2; max-width: 760px; }
.bande h2 { margin-bottom: 20px; text-shadow: 0 4px 26px rgba(0,0,0,.3); }
.bande p { letter-spacing: 0.2em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.82); margin-bottom: 40px; }

/* Lissage brésilien */
.renata-grille {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.renata-grille .photo img {
  width: 100%; height: 530px;
  object-fit: cover;
  border-radius: 24px 200px 200px 24px;
  box-shadow: 0 30px 70px rgba(30,74,63,.16);
}
.renata-prix { margin: 36px 0; border-top: 1px solid rgba(30,74,63,.12); }
.renata-prix .ligne {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(30,74,63,.12);
}
.renata-prix .ligne .nom { font-size: 15px; }
.renata-prix .ligne .prix { font-family: var(--serif); font-size: 23px; color: var(--or); font-variant-numeric: tabular-nums; }
.note { font-size: 12.5px; color: var(--taupe); }

/* Marques */
.marques-liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 70px;
}
.marque-item {
  text-align: center; padding: 38px 24px;
  background: var(--creme);
  border-radius: 24px;
  box-shadow: 0 3px 16px rgba(30,74,63,.05);
  transition: transform .5s var(--courbe), box-shadow .5s var(--courbe);
}
.marque-item:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(30,74,63,.12); }
.marque-item h3 {
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;
  font-style: normal; font-weight: 700;
}
.marque-item p { font-size: 13.5px; color: var(--taupe); }

/* Avis */
.avis {
  color: var(--creme);
  text-align: center;
}
.avis .container { position: relative; z-index: 2; }
.avis::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(640px, 90%); aspect-ratio: 1037 / 769;
  transform: translate(-50%, -50%);
  background: url("/assets/img/logo-web.png") center/contain no-repeat;
  background-image: image-set(url("/assets/img/logo-web.webp") type("image/webp"), url("/assets/img/logo-web.png") type("image/png"));
  opacity: .07;
  pointer-events: none;
}
.avis .label { color: var(--or); justify-content: center; }
.avis .label::after {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.avis .etoiles { font-size: 20px; letter-spacing: 0.35em; color: var(--or); margin: 26px 0 12px; }
.avis p.texte { color: rgba(250,249,245,.72); max-width: 560px; margin: 0 auto 44px; }
.avis .hero-boutons { justify-content: center; animation: none; }

/* Contact */
.infos-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 60px;
}
.horaires { border-top: 1px solid rgba(30,74,63,.12); }
.horaires .ligne {
  display: flex; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(30,74,63,.12);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.horaires .ligne .jour { text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.18em; font-weight: 700; }
.horaires .ligne .ferme { color: var(--taupe); font-style: italic; }
.coordonnees p { margin-bottom: 20px; font-size: 15.5px; }
.coordonnees p strong {
  display: block;
  font-weight: 700;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--or);
  margin-bottom: 4px;
}
.coordonnees a:hover { color: var(--or); }
.carte-map {
  margin-top: 70px;
  filter: grayscale(46%) sepia(6%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 54px rgba(30,74,63,.12);
}
.carte-map iframe { width: 100%; height: 430px; border: 0; display: block; }

/* ---------- Pied de page ---------- */
footer {
  background: var(--vert);
  color: rgba(250,249,245,.6);
  text-align: center;
  padding: 90px 24px 44px;
  position: relative;
}
footer .logo-pied {
  width: 108px; height: auto;
  margin: 0 auto 26px;
}
footer .nom-pied {
  font-family: var(--serif);
  color: var(--creme);
  font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 300; font-style: italic;
  margin-bottom: 6px;
}
footer .par-pied { font-size: 10px; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; margin-bottom: 34px; }
footer .liens-pied { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
footer .liens-pied a {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color .3s ease;
}
footer .liens-pied a:hover { color: var(--or); }
footer .mentions { font-size: 12px; color: rgba(250,249,245,.32); }

/* ============================================================
   Page Prestations & Tarifs
   ============================================================ */
.hero-page {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero-page::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(10,14,12,.3), rgba(10,14,12,.72));
}
.hero-page > div { position: relative; z-index: 2; padding: 90px 24px; }
.hero-page h1 {
  font-size: clamp(42px, 5.4vw, 68px); margin-bottom: 14px;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
  animation: monte 1.1s var(--courbe) .1s both;
}
.hero-page p {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  animation: monte 1s var(--courbe) .3s both;
}

.sousnav {
  position: sticky; top: 74px; z-index: 90;
  background: rgba(234,227,217,.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(30,74,63,.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sousnav .inner {
  display: flex; gap: 30px; justify-content: center;
  padding: 16px 32px; white-space: nowrap;
}
.sousnav a {
  position: relative;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color .3s ease;
}
.sousnav a::after {
  content: "";
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: var(--or); border-radius: 100px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--courbe);
}
.sousnav a:hover { color: var(--or); }
.sousnav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.bloc-tarifs { padding: 96px 0 34px; }
.bloc-tarifs .entete { text-align: center; margin-bottom: 52px; }
.bloc-tarifs .entete .desc { font-size: 15px; color: var(--taupe); max-width: 640px; margin: 18px auto 0; }

.tarifs-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 90px;
  max-width: 1020px;
  margin: 0 auto;
}
.tarifs-colonnes.une-colonne { grid-template-columns: minmax(0, 620px); justify-content: center; }

.prestation {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px;
  padding: 13px 10px;
  border-bottom: 1px solid rgba(30,74,63,.1);
  border-radius: 14px;
  transition: background .4s var(--courbe);
}
.prestation:hover { background: rgba(234,227,217,.55); }
.prestation .nom { font-size: 15px; }
.prestation .nom small { display: block; color: var(--taupe); font-size: 12.5px; }
.prestation .points {
  flex: 1;
  border-bottom: 1px dotted rgba(30,74,63,.25);
  transform: translateY(-4px);
  min-width: 24px;
}
.prestation .prix {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  color: var(--or);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sous-titre-tarif {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: 25px;
  font-style: italic;
  font-weight: 300;
  margin-top: 34px;
  color: var(--vert);
}
.tarifs-colonnes .note { grid-column: 1 / -1; margin-top: 14px; }

.cta-fin {
  text-align: center;
  padding: 110px 24px 100px;
}
.cta-fin h2 { margin-bottom: 16px; }
.cta-fin p { color: var(--taupe); margin-bottom: 40px; }

/* ---------- Responsive ---------- */
/* Le menu complet ne tient plus : le logo porte seul la marque */
@media (max-width: 1340px) {
  .marque-texte { display: none; }
  nav.menu { gap: 26px; }
}
@media (max-width: 1040px) {
  nav.menu { gap: 20px; }
  nav.menu a { letter-spacing: 0.12em; }
  nav.menu a.rdv { padding: 12px 22px; }
}

@media (max-width: 960px) {
  section { padding: 84px 0; }
  header.nav { position: static; }
  .institut-grille, .renata-grille, .infos-grille { grid-template-columns: 1fr; gap: 50px; }
  .institut-grille .photo img { height: 430px; border-radius: 160px 160px 24px 24px; }
  .renata-grille .photo img { height: 430px; border-radius: 24px 160px 160px 24px; }
  .soins-grille { grid-template-columns: 1fr 1fr; }
  .marques-liste { grid-template-columns: 1fr 1fr; }
  .tarifs-colonnes { grid-template-columns: 1fr; gap: 14px; max-width: 620px; }
  .sous-titre-tarif { grid-column: auto; }
  header.nav { position: sticky; }
  .nav-inner, header.nav.compacte .nav-inner { height: 76px; padding: 0 20px; gap: 12px; }
  .marque-logo, header.nav.compacte .marque-logo { height: 52px; }
  .marque-texte { display: flex; }
  .burger { display: flex; }

  nav.menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid rgba(30,74,63,.1);
    box-shadow: 0 20px 40px rgba(30,74,63,.1);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .5s var(--courbe), visibility 0s linear .5s;
  }
  header.nav.ouvert nav.menu {
    max-height: 70vh;
    visibility: visible;
    transition: max-height .5s var(--courbe), visibility 0s;
  }
  nav.menu a { letter-spacing: 0.18em; padding: 17px 24px; border-top: 1px solid rgba(30,74,63,.08); }
  nav.menu a:not(.rdv)::after { display: none; }
  nav.menu a.rdv { margin: 16px 24px 22px; text-align: center; border-top: none; }
  .sousnav { top: 76px; }
  .sousnav .inner { justify-content: flex-start; }
  .bande { margin: 0 14px; border-radius: 32px; background-attachment: scroll; min-height: 380px; }
}
@media (max-width: 600px) {
  .soins-grille { grid-template-columns: 1fr; }
  .marques-liste { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .hero-contenu { padding: 90px 24px 120px; }
  .bande { border-radius: 24px; }
  .institut-grille .photo img, .renata-grille .photo img { height: 380px; }
  .institut-grille .photo img { border-radius: 150px 150px 20px 20px; }
  .renata-grille .photo img { border-radius: 20px 20px 150px 150px; }
}