/* ==========================================================================
   ROSANA COIFFURE — 133 rue de Sèvres, 75006 Paris
   Charte : noir profond, or, ivoire. Vanilla CSS.
   ========================================================================== */

:root{
  --noir:#0E0E0E;
  --noir-2:#161513;
  --encre:#1C1B18;
  --or:#C6A15B;
  --or-clair:#E2C88E;
  --or-fonce:#A8843F;
  --ivoire:#FBF8F2;
  --ivoire-2:#F3EEE4;
  --gris:#6E6A62;
  --gris-clair:#B9B3A8;
  --ligne:rgba(28,27,24,.14);
  --ligne-claire:rgba(246,242,233,.16);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;   /* élargie sur grands écrans, voir plus bas */
  --pad:clamp(20px,5vw,48px);
  --sec:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* L'attribut `hidden` doit l'emporter sur toute règle de mise en page : sans
   cela, un `display:flex` de classe le neutralise et l'élément reste visible. */
[hidden]{display:none !important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--noir);color:var(--ivoire);padding:12px 20px;
}
.skip:focus{left:0}

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

/* ---------------------------------------------------------------- Typo --- */

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--or-fonce);
  margin:0 0 18px;
}
.eyebrow--light{color:var(--or-clair)}

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 22px;
}
.h2--light{color:var(--ivoire)}

.rule{
  width:56px;height:1px;
  background:linear-gradient(90deg,var(--or),rgba(198,161,91,0));
  margin:0 0 26px;
}

p{margin:0 0 20px}

.link{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--or-fonce);
  border-bottom:1px solid rgba(168,132,63,.35);
  padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link span{display:inline-block;transition:transform .3s var(--ease)}
.link:hover{color:var(--encre);border-color:var(--encre)}
.link:hover span{transform:translateX(5px)}
.link--sm{font-size:11px}

/* -------------------------------------------------------------- Boutons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;
  padding:0 34px;
  font-family:var(--sans);
  font-size:11px;font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.btn:hover::after{transform:scaleX(1);transform-origin:left}

.btn--gold{
  background:var(--encre);
  color:var(--ivoire);
  border-color:var(--encre);
  isolation:isolate;
}
.btn--gold::after{background:var(--or)}
.btn--gold:hover{color:var(--encre);border-color:var(--or)}

.btn--ghost{
  color:var(--encre);
  /* Sans fond déclaré, le navigateur applique son gris par défaut aux
     <button> : invisible sur fond clair, illisible sur fond sombre. */
  background:transparent;
  border-color:var(--ligne);
  isolation:isolate;
}
.btn--ghost::after{background:var(--encre)}
.btn--ghost:hover{color:var(--ivoire);border-color:var(--encre)}

/* -------------------------------------------------------------- Topbar --- */

.topbar{
  background:var(--noir);
  color:var(--gris-clair);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.topbar__in{
  display:flex;align-items:center;justify-content:center;
  gap:14px;
  min-height:38px;
  text-align:center;
}
.topbar__sep{width:3px;height:3px;border-radius:50%;background:var(--or);flex:none;opacity:.8}

/* -------------------------------------------------------------- Header --- */

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.header.is-stuck{box-shadow:0 10px 40px -24px rgba(14,14,14,.4)}

.header__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  min-height:74px;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand__mark{width:26px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--serif);
  font-size:22px;font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.brand__sub{
  font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--or-fonce);margin-top:4px;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  text-decoration:none;color:var(--encre);
  position:relative;padding:6px 0;
  /* Sans cela, « Le salon » se coupe sur deux lignes et « Ma carte fidélité »
     sur trois : la barre de navigation se déforme dès que les entrées se
     multiplient. Une entrée de menu tient sur une ligne, ou elle passe dans
     le tiroir. */
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav a:not(.nav__cta):hover::after,
.nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav a.is-active{color:var(--or-fonce)}

.nav__cta{
  border:1px solid var(--encre);
  padding:12px 22px !important;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav__cta:hover{background:var(--encre);color:var(--ivoire)}

.burger{
  display:none;
  width:44px;height:44px;
  background:none;border:0;padding:10px;
  cursor:pointer;
}
.burger span{
  display:block;height:1px;background:var(--encre);
  margin:5px 0;transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

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

.hero{
  position:relative;
  padding:clamp(64px,10vw,120px) 0 clamp(72px,9vw,110px);
  background:
    radial-gradient(120% 90% at 50% -10%,#FFFFFF 0%,var(--ivoire) 45%,var(--ivoire-2) 100%);
  overflow:hidden;
  text-align:center;
}
.hero__deco{
  position:absolute;inset:0;
  opacity:.85;
  pointer-events:none;
}
.hero__deco svg{width:100%;height:100%}

.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}

/* Le logo d'accueil et son reflet.
   Même geste que la sixième case de la carte de fidélité : une lumière
   dorée traverse une fois, à l'arrivée, puis plus rien. Le reflet est
   masqué à la forme du logo — il ne court que sur les lettres. */
.hero__sceau{
  position:relative;
  display:block;
  width:clamp(230px,32vw,360px);
  margin-bottom:clamp(26px,4vw,40px);
  --sceau:url("../assets/logo-rosana-t.png");
}

.hero__logo{
  display:block;
  width:100%;
}

.hero__sceau::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,
             rgba(255,255,255,0) 40%,
             rgba(226,200,142,.95) 50%,
             rgba(255,255,255,0) 60%);
  -webkit-mask-image:var(--sceau);
          mask-image:var(--sceau);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  opacity:0;
  transform:translateX(-120%);
}

/* Le reflet part quand le logo est posé, pas avant. */
/* Le balayage ne passe plus une seule fois a l'arrivee : il revient toutes
   les neuf secondes. C'est le geste le plus visible du bandeau, celui qui
   fait lire le logo comme du metal et non comme un dessin. */
.hero__sceau.is-in::after{
  animation:refletSceau 9s var(--ease) .55s infinite;
}

@keyframes refletSceau{
  0%  { opacity:0; transform:translateX(-120%); }
  3%  { opacity:1; }
  15% { opacity:1; }
  20% { opacity:0; transform:translateX(120%); }
  100%{ opacity:0; transform:translateX(120%); }
}

/* La paillette du L.
   Elle est posée sur la pointe du L doré du monogramme — position mesurée
   sur l'image : le L occupe 44,8 % à 48,8 % en largeur, son sommet est à
   6,8 % de la hauteur. Elle brille brièvement, puis se repose longuement :
   un scintillement, pas un clignotant. */
/* ------------------------------------------------------- Les paillettes ---
   Le salon est noir et or — fauteuils noirs, pieds dorés, et le monogramme
   lui-même, R noir et L doré. Ces paillettes reprennent ce contraste : de
   l'or qui s'allume un instant sur du noir ou de l'ivoire, jamais plus.
   Une seule forme, posée partout où une touche dorée a du sens.
-------------------------------------------------------------------------- */
.paillette{
  position:absolute;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
  /* Un halo tiède sous l'étoile : sans lui, la paillette se perd sur
     l'ivoire du fond. */
  background:radial-gradient(closest-side,
             rgba(255,255,255,.85) 0%,
             rgba(226,200,142,.45) 42%,
             rgba(226,200,142,0) 72%);
}

.paillette::before,
.paillette::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg, #fff 0%, #fff 22%, var(--or-clair) 52%, var(--or) 100%);
  /* Une étoile à quatre branches, effilées vers les pointes. */
  clip-path:polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%,
                    50% 100%, 43% 57%, 0% 50%, 43% 43%);
}

/* Une seconde étoile, plus petite et tournée d'un huitième de tour : c'est
   ce croisement qui donne l'éclat de paillette plutôt qu'une simple croix. */
.paillette::after{
  transform:rotate(45deg) scale(.6);
  opacity:.8;
}

/* Les trois paillettes du monogramme. La premiere est posee sur la pointe
   du L dore, les deux autres le suivent le long de sa hampe : c'est le L
   qui scintille, pas le logo entier. Elles ne s'allument jamais ensemble. */
.hero__etoile{
  left:46.2%;
  top:6.8%;
  width:clamp(34px,12%,58px);
}

.hero__etoile--2{ left:49.6%; top:19%;   width:clamp(20px,7%,34px); }
.hero__etoile--3{ left:44.4%; top:31.5%; width:clamp(15px,5.2%,26px); }

.hero__sceau.is-in .hero__etoile   { animation:scintille 3.6s var(--ease) 1.2s infinite; }
.hero__sceau.is-in .hero__etoile--2{ animation:scintille 4.4s var(--ease) 2.5s infinite; }
.hero__sceau.is-in .hero__etoile--3{ animation:scintille 5.2s var(--ease) 3.6s infinite; }

/* Le halo dore respire derriere le monogramme, tres lentement. Il ne
   clignote pas : il gonfle et se retire, comme une lumiere qu'on approche. */
.hero__halo{
  position:absolute;
  left:50%; top:38%;
  width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side,
             rgba(226,200,142,.40) 0%,
             rgba(226,200,142,.16) 42%,
             rgba(226,200,142,0) 72%);
  opacity:0;
}

.hero__sceau.is-in .hero__halo{ animation:halo 6.5s var(--ease) .9s infinite; }

@keyframes halo{
  0%,100%{ opacity:.25; transform:translate(-50%,-50%) scale(.86); }
  50%    { opacity:.85; transform:translate(-50%,-50%) scale(1.06); }
}

/* ---- les paillettes qui flottent dans le bandeau d'accueil ----
   Trois, pas plus, loin du texte, chacune à son rythme : elles ne battent
   jamais ensemble, sinon l'œil y voit un clignotant. */
.hero__paillettes{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero__paillettes .paillette{ width:clamp(16px,1.8vw,26px); }
.hero__paillettes .paillette:nth-child(1){ left:11%;  top:26%; }
.hero__paillettes .paillette:nth-child(2){ left:88%;  top:38%; width:clamp(14px,1.5vw,22px); }
.hero__paillettes .paillette:nth-child(3){ left:19%;  top:74%; width:clamp(12px,1.3vw,19px); }
.hero__paillettes .paillette:nth-child(4){ left:79%;  top:16%; width:clamp(18px,2vw,30px); }
.hero__paillettes .paillette:nth-child(5){ left:6%;   top:52%; width:clamp(11px,1.2vw,17px); }
.hero__paillettes .paillette:nth-child(6){ left:93%;  top:66%; width:clamp(15px,1.6vw,24px); }
.hero__paillettes .paillette:nth-child(7){ left:27%;  top:11%; width:clamp(10px,1.1vw,16px); }
.hero__paillettes .paillette:nth-child(8){ left:71%;  top:86%; width:clamp(13px,1.4vw,21px); }
.hero__paillettes .paillette:nth-child(9){ left:37%;  top:92%; width:clamp(10px,1.1vw,15px); }

/* Le bandeau est visible dès l'arrivée : les paillettes n'attendent pas
   d'observateur, seulement leur tour. Neuf rythmes premiers entre eux :
   deux paillettes ne repartent jamais en meme temps. */
.hero__paillettes .paillette:nth-child(1){ animation:scintille 4.3s var(--ease)  .8s infinite; }
.hero__paillettes .paillette:nth-child(2){ animation:scintille 5.1s var(--ease) 1.9s infinite; }
.hero__paillettes .paillette:nth-child(3){ animation:scintille 6.7s var(--ease) 3.1s infinite; }
.hero__paillettes .paillette:nth-child(4){ animation:scintille 3.7s var(--ease) 2.4s infinite; }
.hero__paillettes .paillette:nth-child(5){ animation:scintille 5.9s var(--ease)  .3s infinite; }
.hero__paillettes .paillette:nth-child(6){ animation:scintille 4.9s var(--ease) 4.2s infinite; }
.hero__paillettes .paillette:nth-child(7){ animation:scintille 7.3s var(--ease) 1.4s infinite; }
.hero__paillettes .paillette:nth-child(8){ animation:scintille 6.1s var(--ease) 5.0s infinite; }
.hero__paillettes .paillette:nth-child(9){ animation:scintille 5.5s var(--ease) 2.9s infinite; }

/* ---- la poussiere d'or ----
   Douze grains fins qui montent lentement derriere le logo et s'effacent.
   Ils ne scintillent pas : c'est le mouvement qui se voit, pas l'eclat. */
.hero__poussiere{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.hero__poussiere i{
  position:absolute;
  bottom:-6%;
  width:5px; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--or-clair) 0%, rgba(226,200,142,0) 78%);
  opacity:0;
  animation:monte 15s linear infinite;
}

.hero__poussiere i:nth-child(1) { left: 8%; animation-duration:16s; animation-delay:0s;    }
.hero__poussiere i:nth-child(2) { left:17%; animation-duration:21s; animation-delay:2.4s; width:4px; }
.hero__poussiere i:nth-child(3) { left:26%; animation-duration:13s; animation-delay:5.1s; width:6px; }
.hero__poussiere i:nth-child(4) { left:35%; animation-duration:19s; animation-delay:1.2s; }
.hero__poussiere i:nth-child(5) { left:44%; animation-duration:24s; animation-delay:7.3s; width:4px; }
.hero__poussiere i:nth-child(6) { left:53%; animation-duration:15s; animation-delay:3.8s; }
.hero__poussiere i:nth-child(7) { left:62%; animation-duration:20s; animation-delay:6.2s; width:6px; }
.hero__poussiere i:nth-child(8) { left:71%; animation-duration:17s; animation-delay:0.7s; }
.hero__poussiere i:nth-child(9) { left:80%; animation-duration:23s; animation-delay:4.5s; width:4px; }
.hero__poussiere i:nth-child(10){ left:89%; animation-duration:14s; animation-delay:8.1s; }
.hero__poussiere i:nth-child(11){ left:31%; animation-duration:22s; animation-delay:9.6s; width:4px; }
.hero__poussiere i:nth-child(12){ left:68%; animation-duration:18s; animation-delay:11.2s; }

@keyframes monte{
  0%  { opacity:0;   transform:translateY(0)      translateX(0); }
  12% { opacity:.85; }
  50% { transform:translateY(-52vh) translateX(14px); }
  88% { opacity:.55; }
  100%{ opacity:0;   transform:translateY(-104vh) translateX(-10px); }
}

/* Sous 720 px le bandeau se resserre : les paillettes des bords tomberaient
   sur le texte. On n'en garde qu'une, bien à l'écart. */
/* Sous 720 px le bandeau se resserre. On garde cinq paillettes, toutes
   repoussees vers les bords et les coins : aucune ne tombe sur le texte. */
@media (max-width:720px){
  .hero__paillettes .paillette:nth-child(3),
  .hero__paillettes .paillette:nth-child(7),
  .hero__paillettes .paillette:nth-child(8),
  .hero__paillettes .paillette:nth-child(9){ display:none; }
  .hero__paillettes .paillette:nth-child(1){ left: 8%; top:14%; }
  .hero__paillettes .paillette:nth-child(2){ left:91%; top:22%; }
  .hero__paillettes .paillette:nth-child(4){ left:84%; top: 9%; }
  .hero__paillettes .paillette:nth-child(5){ left: 5%; top:46%; }
  .hero__paillettes .paillette:nth-child(6){ left:94%; top:58%; }
  /* Moins de grains, l'ecran est plus etroit. */
  .hero__poussiere i:nth-child(n+7){ display:none; }
}

/* ---- une paillette au bout du filet doré des titres ---- */
.rule{ position:relative; }
.rule .paillette{ left:100%; top:50%; width:13px; }
.rule.is-in .paillette{ animation:scintille 8s var(--ease) 1.4s infinite; }

/* L'eclat s'ouvre plus grand et reste allume plus longtemps qu'avant :
   il occupe maintenant pres de la moitie du cycle au lieu d'un cinquieme.
   La double pulsation au milieu evite l'effet d'ampoule qui s'allume et
   s'eteint : la paillette respire pendant qu'elle brille. */
@keyframes scintille{
  0%   { opacity:0;   transform:translate(-50%,-50%) scale(0)    rotate(-30deg); }
  6%   { opacity:1;   transform:translate(-50%,-50%) scale(1.18) rotate(0deg); }
  14%  { opacity:.78; transform:translate(-50%,-50%) scale(.82)  rotate(8deg); }
  22%  { opacity:1;   transform:translate(-50%,-50%) scale(1.08) rotate(16deg); }
  31%  { opacity:.72; transform:translate(-50%,-50%) scale(.88)  rotate(24deg); }
  38%  { opacity:.96; transform:translate(-50%,-50%) scale(1)    rotate(30deg); }
  48%  { opacity:0;   transform:translate(-50%,-50%) scale(0)    rotate(42deg); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(0)    rotate(42deg); }
}

/* ---- un reflet traverse les boutons dorés ----
   Le même geste que sur le logo et sur la sixième case de la carte : une
   lumière passe une fois quand le bouton se pose, et revient au survol. */
.btn--gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(105deg,
             rgba(255,255,255,0) 40%,
             rgba(226,200,142,.6) 50%,
             rgba(255,255,255,0) 60%);
  opacity:0;
  transform:translateX(-120%);
}

.reveal.is-in .btn--gold::before,
.btn--gold:hover::before{
  animation:refletBouton 1.4s var(--ease) .45s forwards;
}

@keyframes refletBouton{
  0%  { opacity:0; transform:translateX(-120%); }
  22% { opacity:1; }
  100%{ opacity:0; transform:translateX(120%); }
}

@media (prefers-reduced-motion:reduce){
  .hero__sceau.is-in::after{ animation:none; }
  .paillette{ animation:none !important; }
  .btn--gold::before{ animation:none !important; }
  .hero__poussiere{ display:none; }
  /* Le halo reste, mais immobile : la touche doree ne disparait pas pour
     autant, elle cesse seulement de bouger. */
  .hero__halo{ animation:none !important; opacity:.45; }
}

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,7vw,82px);
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 24px;
  max-width:16ch;
}
.hero__title em{
  font-style:italic;
  color:var(--or-fonce);
}

.hero__lead{
  max-width:54ch;
  margin-inline:auto;
  max-width:56ch;
  color:var(--gris);
  font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.85;
  margin-bottom:38px;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.hero__facts{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(28px,6vw,72px);
  margin:clamp(48px,7vw,80px) 0 0;
  padding:clamp(30px,4vw,40px) 0 0;
  border-top:1px solid var(--ligne);
  width:100%;max-width:820px;
}
.hero__facts li{display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__facts strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1;
  color:var(--encre);
}
.hero__facts strong span{color:var(--or);font-size:.6em;vertical-align:super}
.hero__factLbl{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

.hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:1px;height:52px;background:var(--ligne);overflow:hidden;z-index:2;
}
.hero__scroll span{
  display:block;width:100%;height:22px;background:var(--or);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-24px)}
  60%,100%{transform:translateY(54px)}
}

/* ------------------------------------------------------------- Marquee --- */

.marquee{
  background:var(--noir);
  color:var(--ivoire);
  padding:16px 0;
  overflow:hidden;
  border-block:1px solid rgba(198,161,91,.2);
}
.marquee__track{
  display:flex;align-items:center;gap:28px;
  width:max-content;
  animation:slide 42s linear infinite;
}
.marquee span{
  font-family:var(--serif);
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  font-weight:300;
}
.marquee i{color:var(--or);font-style:normal;font-size:11px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ Sections --- */

.section{padding:var(--sec) 0}
.section--alt{background:var(--ivoire-2)}

.secHead{max-width:660px;margin:0 auto clamp(48px,6vw,72px);text-align:center}
.secHead__lead{color:var(--gris);font-size:clamp(15px,1.2vw,16.5px);margin:0}

.grid2{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.col-txt p{color:var(--gris);max-width:52ch}

.col-fig{margin:0}
.frame{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(160deg,#FFFFFF,var(--ivoire-2));
  border:1px solid var(--ligne);
  display:grid;place-items:center;
  padding:18%;
}
.frame::before{
  content:"";position:absolute;inset:14px;
  border:1px solid rgba(198,161,91,.32);
  pointer-events:none;
}
.frame img{width:100%;opacity:.9}
.col-fig figcaption{
  margin-top:16px;text-align:center;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

/* --------------------------------------------------------------- Cards --- */

/* Les filets de la grille venaient du fond gris que laissaient voir les
   interstices d'un pixel. Sept prestations sur trois colonnes : les deux
   cases vides de la derniere ligne montraient donc un grand rectangle gris.
   Le fond est desormais ivoire comme les cartes, et ce sont les cartes qui
   portent le filet. Une case vide ne se voit plus, quel que soit le nombre
   de prestations et quel que soit le nombre de colonnes. */
.cards{
  display:grid;
  /* Six colonnes, chaque carte en occupe deux : cela revient a trois
     colonnes, mais permet a une carte restee seule de s'etendre sur toute
     la largeur au lieu de laisser un vide a sa droite. */
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--ivoire-2);
  border:1px solid var(--ligne);
}
.card{ grid-column:span 2; }

/* Derniere ligne incomplete : les cartes qui restent se partagent la
   largeur entiere. Sept prestations donnent donc 3 + 3 + 1 pleine largeur,
   huit donnent 3 + 3 + 2 a mi-largeur. Aucun trou, quel que soit le
   nombre de prestations. */
.card:last-child:nth-child(3n+1){ grid-column:span 6; }
.card:nth-last-child(2):nth-child(3n+1),
.card:last-child:nth-child(3n+2){ grid-column:span 3; }

/* Une carte seule sur sa ligne devient large : son texte se met au centre,
   sinon il flotte a gauche d'un grand vide. Seul le paragraphe de
   description est resserre : le filet du bas, lui, doit continuer de
   traverser toute la carte. */
.card:last-child:nth-child(3n+1){ text-align:center; }
.card:last-child:nth-child(3n+1) p:not(.card__meta){
  margin-inline:auto;
  max-width:58ch;
}
/* .card__meta est une ligne en flex : centrer le texte ne suffit pas,
   il faut centrer les elements eux-memes. */
.card:last-child:nth-child(3n+1) .card__meta{
  width:auto;
  max-width:none;
  margin-inline:0;
  justify-content:center;
}

@media (max-width:900px){
  .cards{ grid-template-columns:repeat(4,1fr); }
  .card{ grid-column:span 2; }
  /* A deux colonnes, c'est une carte sur deux qui peut rester seule. */
  .card:last-child:nth-child(3n+1),
  .card:nth-last-child(2):nth-child(3n+1),
  .card:last-child:nth-child(3n+2){ grid-column:span 2; text-align:left; }
  .card:last-child:nth-child(2n+1){ grid-column:span 4; text-align:center; }
  .card:last-child:nth-child(2n+1) p:not(.card__meta){ margin-inline:auto; max-width:58ch; }
  .card:last-child:nth-child(2n+1) .card__meta{ width:auto; max-width:none; margin-inline:0; justify-content:center; }
}

@media (max-width:600px){
  .cards{ grid-template-columns:1fr; }
  .card,
  .card:last-child:nth-child(3n+1),
  .card:nth-last-child(2):nth-child(3n+1),
  .card:last-child:nth-child(3n+2),
  .card:last-child:nth-child(2n+1){ grid-column:span 1; text-align:left; }
  .card:last-child p{ margin-inline:0; max-width:none; }
  .card:last-child .card__meta{ width:auto; justify-content:flex-start; }
}
.card{
  background:var(--ivoire-2);
  /* Le filet de la grille : l'ombre deborde d'un pixel et remplit
     l'interstice. Deux cartes voisines s'y rejoignent, ce qui donne une
     ligne d'un pixel et non de deux. */
  box-shadow:0 0 0 1px var(--ligne);
  padding:clamp(30px,3.6vw,44px);
  position:relative;
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--or);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{background:#FFFFFF}
.card:hover::after{transform:scaleX(1)}
.card__num{
  font-family:var(--serif);
  font-size:12px;letter-spacing:.24em;
  color:var(--or-fonce);
  display:block;margin-bottom:18px;
}
.card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.2vw,26px);
  line-height:1.25;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.card p{color:var(--gris);font-size:14.5px;margin:0;line-height:1.8}

.cards__note{
  text-align:center;
  margin:clamp(36px,4vw,48px) 0 0;
  color:var(--gris);
  font-size:14px;
}
.cards__note .link{margin-left:10px}

/* --------------------------------------------------------------- Steps --- */

.steps{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3.4vw,44px);
}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.step{
  position:relative;
  padding-top:30px;
  border-top:1px solid var(--ligne);
}
.step__n{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.3em;
  color:var(--or);
  display:block;margin-bottom:14px;
}
.step h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px,2.1vw,25px);
  margin:0 0 10px;
}
.step p{color:var(--gris);font-size:14.5px;margin:0;line-height:1.8}

/* ---------------------------------------------------------------- Band --- */

.band{
  position:relative;
  background:var(--noir);
  color:var(--ivoire);
  padding:clamp(80px,10vw,140px) 0;
  text-align:center;
  overflow:hidden;
}
.band__deco{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 50% 0%,rgba(198,161,91,.16),transparent 70%),
    radial-gradient(40% 50% at 85% 100%,rgba(198,161,91,.08),transparent 70%);
}
.band__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.band__mark{width:56px;margin-bottom:26px;opacity:.9}
.band__lead{
  max-width:62ch;
  color:rgba(246,242,233,.76);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.9;
  margin-bottom:34px;
}
.band__lead strong{color:var(--or-clair);font-weight:400}
.band__tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.band__tags span{
  border:1px solid var(--ligne-claire);
  padding:10px 20px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,242,233,.8);
}

/* ------------------------------------------------------------- Booking --- */

.booking{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(40px,6vw,84px);
  align-items:center;
}
.booking__txt p{color:var(--gris);max-width:48ch}
.booking__txt .btn{margin-top:6px}
.booking__note{font-size:13.5px;margin:24px 0 0}

.booking__qr{
  margin:0;
  background:#FFFFFF;
  border:1px solid var(--ligne);
  padding:clamp(24px,3vw,34px);
  text-align:center;
  position:relative;
}
.booking__qr::before{
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(198,161,91,.3);
  pointer-events:none;
}
.booking__qr img{width:100%;max-width:230px;margin-inline:auto}
.booking__qr figcaption{
  margin-top:18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

/* --------------------------------------------------------------- Infos --- */

.infos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,3vw,40px);
  margin-bottom:clamp(44px,5vw,64px);
}
@media (max-width:900px){ .infos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .infos{grid-template-columns:1fr} }
.info{border-top:1px solid var(--ligne);padding-top:24px}
.info h3{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:400;margin:0 0 14px;
}
.info p{
  font-family:var(--serif);
  font-size:clamp(18px,1.9vw,22px);
  line-height:1.5;color:var(--encre);margin:0;
}

/* ==========================================================================
   ITINÉRAIRE
   --------------------------------------------------------------------------
   Remplace le plan intégré : celui-ci s'affichait en gris tant qu'il n'était
   pas chargé, imposait son bandeau de mentions par-dessus, et détonnait.
   Un visiteur veut de toute façon l'itinéraire dans SON application.
   ========================================================================== */
.itineraire{
  margin-top:clamp(38px,4.5vw,56px);
  padding:clamp(30px,4vw,46px) clamp(24px,3vw,40px);
  text-align:center;
  background:var(--ivoire);
  border:1px solid var(--ligne);
  border-radius:2px;
}
.itineraire__adresse{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(24px,3vw,34px);
  font-weight:400;
  line-height:1.25;
}
.itineraire__note{
  margin:14px auto 0;
  max-width:46ch;
  font-size:14.4px;
  color:var(--gris);
}
.itineraire__cta{margin-top:clamp(22px,2.6vw,30px)}

/* -------------------------------------------------------------- Footer --- */

.footer{background:var(--noir);color:rgba(246,242,233,.7);padding:clamp(60px,7vw,90px) 0 0}
.footer__in{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(30px,4vw,56px);
  padding-bottom:clamp(44px,5vw,64px);
}
.footer__brand img{width:170px;margin-bottom:20px}
.footer__brand p{
  font-family:var(--serif);
  font-size:17px;font-style:italic;
  color:rgba(246,242,233,.62);margin:0;
}
.footer__col h4{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);font-weight:400;margin:0 0 16px;
}
.footer__col p{font-size:14px;line-height:1.85;margin:0 0 10px}
.footer__col a{
  text-decoration:none;
  border-bottom:1px solid rgba(198,161,91,.4);
  padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer__col a:hover{color:var(--or-clair);border-color:var(--or-clair)}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
  padding-block:22px;
  border-top:1px solid var(--ligne-claire);
}
.footer__bottom{justify-content:center}
.footer__bottom p{margin:0;font-size:11px;letter-spacing:.14em}
.footer__copy{color:rgba(246,242,233,.45)}

/* ----------------------------------------------------------------- FAB --- */

.fab{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  z-index:90;
  display:none;
  background:var(--encre);color:var(--ivoire);
  text-decoration:none;
  padding:15px 40px;
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  border:1px solid var(--or);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);
  transition:transform .45s var(--ease);
}
.fab.is-on{transform:translate(-50%,0)}

/* -------------------------------------------------------------- Reveal --- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------- Responsive --- */

@media (max-width:960px){
  .grid2{grid-template-columns:1fr}
  .col-fig{max-width:380px;margin-inline:auto;order:-1}
  .booking{grid-template-columns:1fr}
  .booking__qr{max-width:340px;margin-inline:auto}
  .footer__in{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .burger{display:block}
  .topbar__item--hide{display:none}

  /* backdrop-filter cree un bloc conteneur qui enfermerait le panneau
     de navigation en position:fixed — on le neutralise sur mobile. */
  .header{
    background:var(--ivoire);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .nav{
    position:fixed;inset:0 0 0 auto;
    width:min(340px,84vw);
    background:var(--ivoire);
    border-left:1px solid var(--ligne);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:0 clamp(28px,7vw,44px);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .5s var(--ease),visibility .5s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-size:13px;letter-spacing:.22em}
  .nav__cta{width:100%;text-align:center}

  body.nav-open{overflow:hidden}
  body.nav-open::after{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(14,14,14,.42);
    backdrop-filter:blur(2px);
  }
  .header{z-index:101}
  .nav{z-index:100}
}

@media (max-width:640px){
  .hero__cta{width:100%;flex-direction:column}
  .hero__cta .btn{width:100%}
  .hero__facts{gap:26px 0;justify-content:space-between}
  .hero__facts li{flex:1 1 40%}
  .footer__in{grid-template-columns:1fr;text-align:left}
  .footer__bottom{justify-content:center;text-align:center}
  .fab{display:block}
  .marquee span{font-size:15px}
}

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

@media print{
  body{background:#fff;color:#000}
  /* À l'impression, on ne garde que le contenu : ni navigation, ni bandeau,
     ni bouton flottant, qui n'ont aucun sens sur papier. */
  .header,.topbar,.fab,.marquee,.hero__scroll{display:none}
}

/* ==========================================================================
   GALERIE DES RÉALISATIONS
   ========================================================================== */
.gal{
  list-style:none;
  margin:clamp(38px,5vw,58px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:clamp(14px,1.8vw,22px);
}

.gal__item{min-width:0}

.gal__btn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--ivoire-2);
  cursor:zoom-in;
  font:inherit;
  color:inherit;
  text-align:left;
  border-radius:2px;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gal__btn:hover,
.gal__btn:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(14,14,14,.55);
}
.gal__btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.gal__cadre{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--ivoire-2);
}
.gal__cadre img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.gal__btn:hover .gal__cadre img{transform:scale(1.045)}

.gal__legende{
  padding:14px 16px 16px;
  border-top:1px solid var(--ligne);
}
.gal__legende b{
  display:block;
  font-family:var(--serif);
  font-size:1.16rem;
  font-weight:500;
  letter-spacing:.01em;
}
.gal__legende span{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or-fonce);
}

/* ------------------------------ visionneuse ------------------------------ */
.lb{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,2vw,26px);
  padding:clamp(14px,4vw,44px);
  background:rgba(9,9,9,.94);
  animation:lbIn .28s var(--ease);
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

.lb__fig{
  margin:0;
  max-width:min(760px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.lb__fig img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 190px);
  margin:0 auto;
  object-fit:contain;
  border-radius:2px;
}

.lb__cap{text-align:center;color:var(--ivoire)}
.lb__cap b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:500;
  color:var(--or-clair);
}
.lb__cap span{
  display:block;
  margin-top:5px;
  font-size:.94rem;
  font-weight:300;
  color:var(--gris-clair);
}

.lb__fermer,
.lb__nav{
  flex:0 0 auto;
  border:1px solid var(--ligne-claire);
  background:transparent;
  color:var(--ivoire);
  cursor:pointer;
  border-radius:50%;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  line-height:1;
}
.lb__fermer:hover,.lb__nav:hover,
.lb__fermer:focus-visible,.lb__nav:focus-visible{
  background:rgba(198,161,91,.18);
  border-color:var(--or);
}
.lb__fermer:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.lb__nav{width:52px;height:52px;font-size:2rem;padding:0 0 5px}
.lb__fermer{
  position:absolute;
  top:clamp(12px,3vw,26px);
  right:clamp(12px,3vw,26px);
  width:44px;height:44px;
  font-size:1.7rem;
  padding:0 0 3px;
}

@media (max-width:640px){
  .lb{gap:4px;padding:12px}
  .lb__nav{width:42px;height:42px;font-size:1.6rem}
  .lb__fig img{max-height:calc(100vh - 210px)}
}

@media (prefers-reduced-motion:reduce){
  .gal__btn,.gal__cadre img{transition:none}
  .lb{animation:none}
}

/* ------------------------- photos du salon ------------------------- */
/* Le cadre a été dessiné pour un monogramme centré : fort rembourrage et
   image éclaircie. Avec une vraie photographie, elle doit remplir le cadre —
   on ne garde que le liseré doré, réduit à un passe-partout de 10 px. */
.frame--photo{padding:10px;aspect-ratio:3/4;background:var(--ivoire-2)}
.frame--photo::before{inset:10px;z-index:1}
.frame--photo img{
  opacity:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* La bande Kérastase reste centrée sur mobile ; à partir de 900 px la photo
   du mur de produits passe à gauche du texte, sans rompre la composition. */
.band__photo{
  margin:0 auto clamp(26px,3.4vw,36px);
  width:min(220px,62%);
  flex:0 0 auto;
}
.band__photo img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--ligne-claire);
}
.band__txt{display:flex;flex-direction:column;align-items:center;min-width:0}

@media (min-width:900px){
  .band__in{flex-direction:row;align-items:center;gap:clamp(38px,5vw,72px);justify-content:center}
  .band__photo{margin:0;width:clamp(210px,22vw,278px)}
  .band__txt{align-items:flex-start;text-align:left;max-width:620px}
  .band__txt .band__lead{text-align:left;margin-left:0;margin-right:0}
  .band__tags{justify-content:flex-start}
}

.repere{
  margin:clamp(34px,4vw,48px) 0 0;
  text-align:center;
}
.repere img{
  display:block;
  width:100%;
  max-height:340px;
  object-fit:cover;
  object-position:center 38%;
  border-radius:2px;
}
.repere figcaption{
  margin-top:12px;
  font-size:.86rem;
  letter-spacing:.06em;
  color:var(--gris);
}

/* ==========================================================================
   ESPACE CLIENTE ET ESPACE SALON
   ========================================================================== */

/* Les pages secondaires n'ont pas de hero : l'en-tête y est opaque dès le
   chargement, sinon le titre passerait sous une barre translucide. */
.page-secondaire{background:var(--ivoire)}
.header.is-solid{background:var(--ivoire);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav a.is-active{color:var(--or-fonce)}

.chargement{padding:80px 0;text-align:center;color:var(--gris)}

.etat-vide{
  max-width:520px;margin:0 auto;padding:60px 0 40px;text-align:center;
}
.etat-vide p{color:var(--gris);margin:0 0 28px}

/* ----------------------------- messages ---------------------------------- */
.msg{
  margin:0;max-height:0;overflow:hidden;opacity:0;
  border-left:2px solid var(--or);
  background:var(--ivoire-2);
  font-size:14px;
  transition:max-height .35s var(--ease),opacity .3s var(--ease),padding .35s var(--ease);
  padding:0 18px;
}
.msg.is-on{max-height:220px;opacity:1;padding:14px 18px;margin-bottom:26px}
.msg--ok{border-color:#5C8A5E;background:rgba(92,138,94,.08)}
.msg--err{border-color:#A8443F;background:rgba(168,68,63,.07)}

/* ----------------------------- formulaires ------------------------------- */
.champ{margin-bottom:20px;min-width:0}
.champ label{
  display:block;margin-bottom:8px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.champ .req{color:var(--or-fonce)}
.champ input,.champ select,.champ textarea{
  width:100%;
  padding:14px 16px;
  font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--encre);
  background:#FFF;
  border:1px solid var(--ligne);
  border-radius:2px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.champ textarea{resize:vertical;line-height:1.65;min-height:120px}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(198,161,91,.16);
}
.champ input:disabled{background:var(--ivoire-2);color:var(--gris)}
.champ small{display:block;margin-top:7px;font-size:12.4px;color:var(--gris)}

.rang2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:560px){ .rang2{grid-template-columns:1fr} }

.case{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 24px;font-size:13.4px;line-height:1.6;color:var(--gris);cursor:pointer;
}
.case input{margin-top:3px;accent-color:var(--or-fonce);flex:none;width:16px;height:16px}

.btn--sm{min-height:40px;padding:0 18px;font-size:10px;letter-spacing:.16em}
.btn--danger{border-color:rgba(168,68,63,.4);color:#A8443F}
.btn--danger::after{background:#A8443F}
.btn--danger:hover{color:#FFF;border-color:#A8443F}
.btn[disabled]{opacity:.5;pointer-events:none}

.lien-danger{
  margin-top:22px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:12.4px;color:var(--gris);
  text-decoration:underline;text-underline-offset:4px;
}
.lien-danger:hover{color:#A8443F}

/* ------------------------------- onglets --------------------------------- */
.onglets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:26px}
.onglet{
  padding:12px 20px;
  border:1px solid var(--ligne);background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);border-radius:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.onglet:hover{color:var(--encre)}
.onglet.is-on{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}
.onglets--admin{margin:34px 0 30px}

/* ============================ INSCRIPTION ================================= */
.auth{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,88px);align-items:start;
}
@media (max-width:900px){ .auth{grid-template-columns:1fr} }

.auth__pitch p{color:var(--gris)}
.auth__avantages{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:1px;background:var(--ligne)}
.auth__avantages li{
  background:var(--ivoire);padding:15px 2px;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
}
.auth__avantages b{font-family:var(--serif);font-size:1.16rem;font-weight:500;flex:none}
.auth__avantages span{font-size:13.4px;color:var(--gris)}
.auth__note{margin-top:24px;font-size:13px;color:var(--or-fonce);letter-spacing:.04em}

.auth__carte{
  background:#FFF;border:1px solid var(--ligne);
  padding:clamp(26px,3.4vw,40px);border-radius:2px;
  box-shadow:0 30px 70px -50px rgba(14,14,14,.5);
}
.auth__carte .onglets{margin-bottom:28px}
.auth__carte .btn{width:100%}
.auth__bas{margin:16px 0 0;text-align:center;font-size:12.6px;color:var(--gris)}

/* ============================ ESPACE CLIENTE ============================== */
.espace__tete{
  display:flex;flex-wrap:wrap;gap:20px;
  align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(34px,4vw,52px);
}
.espace__tete .h2{margin:0}

.espace__grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px);align-items:start}
@media (max-width:900px){ .espace__grille{grid-template-columns:1fr} }

.bloc{
  background:#FFF;border:1px solid var(--ligne);border-radius:2px;
  padding:clamp(22px,2.6vw,32px);margin-bottom:26px;
}
.h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,25px);line-height:1.2;margin:0 0 18px;
}
.bloc__lead{color:var(--gris);font-size:14.4px;margin:0 0 22px}

/* --------------------------- carte de fidélité --------------------------- */
.fid{margin-bottom:26px}
.fid__carte{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--noir) 0%,var(--encre) 55%,#25231E 100%);
  color:var(--ivoire);
  border-radius:6px;
  padding:clamp(24px,3vw,34px);
  aspect-ratio:1.586;                 /* proportions d'une carte bancaire */
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 30px 60px -34px rgba(14,14,14,.72);
}
.fid__carte::before{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(198,161,91,.34);border-radius:3px;pointer-events:none;
}
.fid__carte::after{
  content:"";position:absolute;right:-70px;top:-70px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.22),transparent 68%);
  pointer-events:none;
}
.fid__haut{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.fid__logo{height:26px;width:auto}
.fid__palier{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or-clair);border:1px solid rgba(198,161,91,.45);
  padding:5px 11px;border-radius:99px;white-space:nowrap;
}
.fid__solde{margin:0;position:relative;font-family:var(--serif);font-size:clamp(15px,1.6vw,17px);color:var(--gris-clair)}
.fid__solde b{display:block;font-size:clamp(38px,5.4vw,60px);color:var(--ivoire);line-height:1}
.fid__equiv{margin:6px 0 0;position:relative;font-size:12.6px;color:var(--or-clair)}
.fid__bas{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:flex-end;
  position:relative;font-size:11px;letter-spacing:.20em;text-transform:uppercase;
}
.fid__num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--gris-clair)}
.fid__nom{color:var(--ivoire)}

.fid__prog{
  background:#FFF;border:1px solid var(--ligne);border-top:0;
  border-radius:0 0 2px 2px;padding:22px clamp(20px,2.4vw,28px);
}
.fid__prog p{margin:0 0 12px;font-size:14.2px}
.jauge{height:4px;background:var(--ivoire-2);border-radius:99px;overflow:hidden}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--or-fonce),var(--or-clair));transition:width .8s var(--ease)}
.fid__avantage{margin:14px 0 0 !important;font-size:12.8px;color:var(--or-fonce);letter-spacing:.04em}

/* ----------------------------- mouvements -------------------------------- */
.mouvements{list-style:none;margin:0;padding:0}
.mouvements li{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--ligne);font-size:13.8px;
}
.mouvements li:last-child{border-bottom:0}
.mouvements__d{font-size:11.6px;color:var(--gris);white-space:nowrap}
.mouvements__l{min-width:0}
.mouvements b{font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
.mouvements .plus{color:#5C8A5E}
.mouvements .moins{color:#A8443F}

/* ------------------------------- paliers --------------------------------- */
.paliers{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ligne)}
.paliers li{background:#FFF;padding:14px 2px;display:grid;gap:2px}
.paliers li.is-atteint b,.paliers li.is-actuel b{color:var(--encre)}
.paliers li:not(.is-atteint):not(.is-actuel){opacity:.55}
.paliers li.is-actuel{background:rgba(198,161,91,.09);padding-inline:12px}
.paliers b{font-family:var(--serif);font-size:1.16rem;font-weight:500}
.paliers__seuil{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.paliers__av{font-size:13.2px;color:var(--gris)}

/* -------------------------------- avis ----------------------------------- */
.etoiles{display:inline-flex;gap:2px;color:var(--or);font-size:15px;line-height:1}
.etoiles i{font-style:normal}
.etoiles i.off{color:var(--ligne)}
.etoiles--lg{font-size:22px}

.note-choix{display:flex;gap:6px}
.note-choix button{
  width:44px;height:44px;font-size:22px;line-height:1;
  border:1px solid var(--ligne);background:#FFF;color:var(--ligne);
  cursor:pointer;border-radius:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.note-choix button:hover{border-color:var(--or)}
.note-choix button.is-on{color:var(--or);border-color:var(--or)}

.liste-avis{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.avis{
  background:#FFF;border:1px solid var(--ligne);border-radius:2px;
  padding:clamp(18px,2.2vw,26px);
}
.avis p{margin:0 0 10px;font-size:14.6px;line-height:1.72}
.avis__tete{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}
.avis__qui{font-family:var(--serif);font-size:1.18rem;font-weight:500}
.avis__date{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.avis__prest{font-size:11px !important;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.avis__mail{font-size:12px !important;color:var(--gris)}
.avis__etat{font-size:12.4px !important;color:var(--gris)}
.avis__etat.is-ok{color:#5C8A5E}
.avis__rep{
  margin:14px 0 0;padding:14px 18px;
  background:var(--ivoire-2);border-left:2px solid var(--or);
  font-size:14px;line-height:1.7;
}
.avis__rep b{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.avis__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.avis--attente{border-left:2px solid var(--or)}
.avis--mien{border-left:2px solid var(--or)}

.badge{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--ligne);border-radius:99px;color:var(--gris);
}
.badge--ok{border-color:rgba(92,138,94,.4);color:#5C8A5E}

/* ============================= ESPACE SALON =============================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
@media (max-width:700px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:#FFF;padding:22px 20px;display:grid;gap:5px}
.kpi b{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:400;line-height:1}
.kpi span{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--gris)}
.kpi--alerte b{color:var(--or-fonce)}

.tableau-enrobe{overflow-x:auto;border:1px solid var(--ligne);background:#FFF}
.tableau{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tableau th,.tableau td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau th{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);font-weight:400;background:var(--ivoire-2);white-space:nowrap;
}
.tableau tr:last-child td{border-bottom:0}
.tableau .num{text-align:right}
.tableau .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.6px;white-space:nowrap}
.muted{color:var(--gris);font-size:12.6px}

/* ================================ POPUP =================================== */
.popup{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(9,9,9,.72);
  animation:popIn .3s var(--ease);
}
@keyframes popIn{from{opacity:0}to{opacity:1}}
.popup__in{
  position:relative;
  max-width:440px;width:100%;
  background:var(--ivoire);
  border:1px solid var(--ligne);border-radius:3px;
  padding:clamp(30px,4vw,44px);
  text-align:center;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  animation:popUp .45s var(--ease);
}
@keyframes popUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.popup__in p{color:var(--gris);margin:0 0 26px}
.popup__in .btn{width:100%}
.popup__mark{width:52px;height:auto;margin:0 auto 18px;display:block}
.popup__x{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;font-size:24px;line-height:1;
  border:0;background:none;color:var(--gris);cursor:pointer;border-radius:50%;
}
.popup__x:hover{color:var(--encre);background:var(--ivoire-2)}

@media (prefers-reduced-motion:reduce){
  .popup,.popup__in{animation:none}
  .jauge i{transition:none}
}

/* ==========================================================================
   AVIS SUR L'ACCUEIL
   ========================================================================== */
.liste-avis--accueil{
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  margin-top:clamp(34px,4vw,52px);
}
.liste-avis--accueil .avis{background:var(--ivoire);border-left:2px solid var(--or)}
.avis__cta{margin:clamp(30px,4vw,44px) 0 0;text-align:center}

/* ==========================================================================
   GRANDS ÉCRANS
   --------------------------------------------------------------------------
   La largeur était figée à 1180 px : au-delà de 1600 px, la page se réduisait
   à une colonne étroite au milieu du vide. Elle respire maintenant avec
   l'écran, sans jamais laisser les paragraphes s'allonger au point de devenir
   pénibles à lire — les blocs de texte gardent leur propre plafond.
   ========================================================================== */
@media (min-width:1600px){
  :root{
    --wrap:1340px;
    --pad:56px;
    --sec:clamp(96px,7.5vw,168px);
  }
  body{font-size:17px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr))}
}

@media (min-width:2000px){
  :root{
    --wrap:1520px;
    --pad:64px;
  }
  body{font-size:18px}
  .h2{font-size:clamp(46px,3.4vw,62px)}
  .gal{grid-template-columns:repeat(auto-fill,minmax(min(292px,100%),1fr))}
  /* Le confort de lecture prime sur le remplissage : une ligne trop longue
     fatigue, quelle que soit la taille de l'écran. */
  .secHead{max-width:760px}
  .col-txt p,.band__lead{max-width:66ch}
}

/* ==========================================================================
   CHIFFRES
   --------------------------------------------------------------------------
   Cormorant Garamond utilise par défaut des chiffres elzéviriens, dont les
   hampes descendent sous la ligne : isolé, un « 1 » se lit « I » et un « 0 »
   se lit « O ». Partout où un nombre porte l'information, on impose les
   chiffres bas de casse alignés.
   ========================================================================== */
.kpi b,
.fid__solde b,
.mouvements b,
.paliers__seuil,
.tableau .num,
.tableau .mono,
.fid__num,
.auth__avantages b{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* ==========================================================================
   ÉLÉMENTS PILOTÉS DEPUIS L'ADMINISTRATION
   ========================================================================== */

/* Prix et durée d'une prestation, renseignés depuis le back-office. */
.card__meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin:14px 0 0 !important;
  padding-top:12px;border-top:1px solid var(--ligne);
}
.card__meta span{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.card__meta b{
  margin-left:auto;
  font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--or-fonce);
  font-variant-numeric:lining-nums;
}

/* Section libre créée depuis l'administration. */
.bloc-libre .h2{text-align:center;max-width:20ch;margin-inline:auto}
.bloc-libre__media{
  display:block;width:100%;max-width:900px;margin:clamp(28px,4vw,44px) auto 0;
  border-radius:2px;
}
.bloc-libre__txt{
  max-width:66ch;margin:clamp(24px,3vw,36px) auto 0;
}
.bloc-libre__txt p{margin:0 0 1em}
.bloc-libre__txt p:last-child{margin-bottom:0}

/* ==========================================================================
   ACCUEIL AU SALON — boissons et Wi-Fi
   --------------------------------------------------------------------------
   La seule section du site posée sur un fond chaud. Le reste de la page joue
   l'ivoire et le noir ; ici on réchauffe, parce que c'est le moment où l'on
   s'assoit et où l'on souffle.
   ========================================================================== */
.accueil-salon{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(198,161,91,.13), transparent 62%),
    linear-gradient(180deg, #F7F0E3, #F2E9D9);
  position:relative;
}
.accueil-salon .h2 em{
  font-style:italic;
  color:var(--or-fonce);
}

.boissons{
  list-style:none;
  margin:clamp(30px,4vw,44px) auto 0;
  padding:0;
  max-width:920px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 12px;
}
/* Pas de pictogramme : cinq fois la même tasse alourdirait plus que ça
   n'informe. Le nom de la boisson suffit. */
.boissons li{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(168,132,63,.26);
  border-radius:99px;
  font-family:var(--serif);
  font-size:clamp(1.06rem,1.5vw,1.24rem);
  letter-spacing:.01em;
  white-space:nowrap;
}

.boissons__wifi{
  margin:clamp(26px,3vw,34px) auto 0;
  max-width:46ch;
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-fonce);
}

@media (max-width:520px){
  .boissons{gap:8px}
  .boissons li{padding:9px 15px;font-size:1rem}
}

/* ==========================================================================
   TYPES DE CHEVEUX
   --------------------------------------------------------------------------
   Savoir travailler le cheveu frisé et crépu est un engagement, pas un détail
   à glisser dans un paragraphe : cette affirmation est donc posée en toutes
   lettres, avant la liste des prestations.
   ========================================================================== */
.natures{
  text-align:center;
  margin:0 auto clamp(40px,5vw,60px);
  padding-bottom:clamp(34px,4vw,46px);
  border-bottom:1px solid var(--ligne);
  max-width:900px;
}
.natures__titre{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1.2;
}
.natures__liste{
  list-style:none;
  margin:clamp(18px,2.4vw,26px) 0 0;
  padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0;
}
.natures__liste li{
  padding:0 clamp(12px,1.8vw,20px);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-fonce);
  border-right:1px solid var(--ligne);
  line-height:1.9;
}
.natures__liste li:last-child{border-right:0}
.natures__note{
  margin:clamp(16px,2vw,22px) auto 0;
  max-width:44ch;
  font-size:13.6px;
  color:var(--gris);
}
@media (max-width:520px){
  .natures__liste li{padding:0 10px;font-size:10.8px;letter-spacing:.16em}
}

/* ==========================================================================
   NOUS ÉCRIRE
   ========================================================================== */
.contact{
  max-width:720px;
  margin:clamp(34px,4vw,50px) auto 0;
  background:#FFF;
  border:1px solid var(--ligne);
  border-radius:2px;
  padding:clamp(24px,3vw,38px);
}
.contact__onglets{justify-content:center;margin-bottom:26px}
.contact .btn{width:100%;margin-top:6px}
.contact__note{
  margin:0 0 18px;
  font-size:12.8px;
  color:var(--gris);
}
.contact__merci{text-align:center;padding:26px 0 10px}
.contact__merci-titre{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  margin:0 0 10px;
}
.contact__merci p{margin:0;color:var(--gris);max-width:44ch;margin-inline:auto}

/* ==========================================================================
   TYPOGRAPHIE — PASSE DE FINITION
   --------------------------------------------------------------------------
   Trois défauts mesurés sur la page rendue, corrigés ici :
     · des titres qui laissaient un mot seul sur la dernière ligne ;
     · des paragraphes allant de 33 à 155 caractères par ligne, alors que
       l'œil lit confortablement entre 60 et 75 ;
     · des césures manquantes qui creusaient des trous dans le texte justifié
       à gauche sur mobile.
   ========================================================================== */

/* Un titre ne doit jamais finir sur un mot esseulé. `balance` répartit les
   lignes, `pretty` s'occupe des paragraphes là où le navigateur le sait. */
h1, h2, h3, h4,
.h2, .hero__title, .natures__titre, .adm-titre, .contact__merci-titre{
  text-wrap:balance;
}
p, li, dd, figcaption, small{
  text-wrap:pretty;
}

/* Longueur de ligne. Aucun bloc de texte courant ne dépasse 72 caractères :
   au-delà, l'œil perd le début de la ligne suivante. */
.secHead__lead,
.col-txt p,
.band__lead,
.booking__txt p,
.contact__note,
.natures__note,
.bloc-libre__txt p{
  /* 54ch donne ici environ 70 caractères par ligne — mesuré, pas estimé :
     la largeur moyenne d'un caractère de cette police est de 7,67 px pour
     un corps de 17,5 px. C'est la fourchette où l'œil retrouve sans effort
     le début de la ligne suivante. */
  max-width:54ch;
  margin-inline:auto;
}
.col-txt p{margin-inline:0}          /* colonne de gauche : pas de centrage */

/* La note sous les prestations s'étalait sur 155 caractères. */
.cards__note{
  max-width:62ch;
  margin-inline:auto;
  text-align:center;
}

/* Sur mobile, les mots longs (« personnalisée », « professionnels ») créaient
   des trous ; la césure les évite sans justifier le texte. */
@media (max-width:640px){
  .secHead__lead, .col-txt p, .band__lead, .card p, .step p, .avis p{
    hyphens:auto;
    -webkit-hyphens:auto;
  }
}

/* Les nombres alignés en colonne se lisent mieux avec des chiffres de
   largeur constante. */
.hero__facts strong, .natures__liste, .card__meta b{
  font-variant-numeric:lining-nums tabular-nums;
}

/* ==========================================================================
   ALIGNEMENT DES BLOCS EN GRILLE
   --------------------------------------------------------------------------
   Trois cartes côte à côte n'ont jamais le même nombre de lignes. Sans
   contrainte, leur trait de séparation et leur libellé de catégorie flottent
   à trois hauteurs différentes : la ligne entière paraît bâclée. On pousse
   donc le pied de carte en bas, quelle que soit la longueur du texte.
   ========================================================================== */
.card{
  display:flex;
  flex-direction:column;
}
/* Le pied de carte est lui aussi un <p> : il faut l'exclure, sinon il
   grandit avec le reste et ne descend jamais. */
.card p:not(.card__meta){flex:1}
.card__meta{margin-top:auto}         /* le pied reste collé en bas */

/* Même principe pour les étapes de la section Expertise. */
.step{display:flex;flex-direction:column}
.step p{flex:1;margin-bottom:0}

/* Et pour les avis de l'accueil, dont les textes sont de longueurs libres. */
.liste-avis--accueil .avis{display:flex;flex-direction:column}
.liste-avis--accueil .avis__rep{margin-top:auto}

/* --------------------------------------------------------------------------
   La colonne de texte de « Réservation » est plus courte que le QR code :
   centrées, elles laissaient un vide au-dessous. Alignées en haut, le bloc
   se referme.
   -------------------------------------------------------------------------- */
.booking{align-items:start}

/* ==========================================================================
   PAGE « AVIS CLIENTES »
   ========================================================================== */
.avis-filtres{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:clamp(28px,3.4vw,40px) 0 clamp(30px,3.6vw,44px);
}
.avis-filtres__n{
  margin-left:6px;
  font-variant-numeric:lining-nums tabular-nums;
  opacity:.65;
}
.liste-avis--page{
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  align-items:start;
}
.liste-avis--page .avis{background:#FFF}
.avis__source{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--ligne);
  padding:3px 9px;border-radius:99px;
}
.avis__cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* Coordonnées : rendues cliquables, sans surcharge visuelle. */
.info a[data-cms-site],
.footer__col a[data-cms-site]{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.info a[data-cms-site]:hover{border-bottom-color:var(--or)}
.footer__col a[data-cms-site]:hover{color:var(--or-clair)}

/* =============================================================
   FORFAIT COULEUR — carte de fidélité
   -------------------------------------------------------------
   Cinq forfaits réglés au salon, le sixième offert. Deux formules
   selon la longueur, puis la carte à tamponner.
   ============================================================= */

.forfait{ background:var(--noir); color:var(--ivoire); }
.forfait .eyebrow{ color:var(--or); }
.forfait .h2{ color:var(--ivoire); }
.forfait .secHead__lead{ color:var(--gris-clair); }

/* ---- les deux formules ---- */
.forfait__grille{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  max-width:820px;
  margin:clamp(34px,5vw,56px) auto 0;
}

@media (max-width:640px){ .forfait__grille{ grid-template-columns:1fr; } }

.forfait__carte{
  position:relative;
  padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,34px);
  border:1px solid rgba(198,161,91,.32);
  background:linear-gradient(165deg, rgba(198,161,91,.09) 0%, rgba(198,161,91,.02) 100%);
  text-align:center;
}

.forfait__type{
  margin:0 0 .6rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or);
}

.forfait__prix{
  margin:0 0 1.4rem;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:.18em;
  font-family:var(--serif);
  line-height:1;
  color:var(--ivoire);
}

.forfait__prix b{ font-weight:400; font-size:clamp(3rem,6vw,4.4rem); }
.forfait__prix span{ font-size:clamp(1.1rem,2vw,1.6rem); margin-top:.35em; color:var(--or-clair); }

.forfait__liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.forfait__liste li{
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--gris-clair);
  padding-block:.5rem;
  border-top:1px solid rgba(246,242,233,.10);
}

.forfait__liste li:first-child{ border-top:0; }
.forfait__liste b{ color:var(--or-clair); font-weight:400; letter-spacing:.04em; }

/* ---- la carte à tamponner ---- */
.tampon{
  max-width:820px;
  margin:clamp(30px,4.4vw,50px) auto 0;
  padding:clamp(24px,3.2vw,34px);
  border:1px solid rgba(246,242,233,.14);
  text-align:center;
}

.tampon__titre{
  margin:0 0 1.3rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gris-clair);
}

.tampon__liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,1.4vw,16px);
}

@media (max-width:560px){ .tampon__liste{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.tampon__case{
  aspect-ratio:1/1;
  border:1px dashed rgba(198,161,91,.42);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
}

.tampon__n{
  font-family:var(--serif);
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--or-clair);
  line-height:1;
}

.tampon__lbl{
  font-family:var(--sans);
  font-size:.52rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris);
}

/* La sixième case est le cadeau : elle est pleine, pas en pointillés. */
.tampon__case--offert{
  border-style:solid;
  border-color:var(--or);
  background:linear-gradient(160deg, var(--or) 0%, var(--or-fonce) 100%);
}

.tampon__case--offert .tampon__n{ color:var(--noir); }
/* « -50 % » porte l'interet de la carte : il doit se lire franchement sur
   la pastille doree, la ou « offert » pouvait rester discret. */
.tampon__case--offert .tampon__lbl{
  color:var(--noir);
  font-weight:600;
  letter-spacing:.12em;
}

.tampon__note{
  margin:1.3rem 0 0;
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--gris-clair);
}

/* ---- pied de section ---- */
.forfait__pied{
  max-width:820px;
  margin:clamp(26px,3.6vw,40px) auto 0;
  text-align:center;
}

.forfait__inoa{
  margin:0 0 1.6rem;
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.7;
  color:var(--gris-clair);
}

.forfait__inoa b{ color:var(--or-clair); font-weight:400; letter-spacing:.06em; }

/* Sur la section noire, le bouton doré du site est un aplat encre sur
   fond encre : il disparaissait. On l'inverse — l'or devient le fond. */
.forfait .btn--gold{
  background:var(--or);
  border-color:var(--or);
  color:var(--noir);
}
.forfait .btn--gold::after{ background:var(--or-clair); }
.forfait .btn--gold:hover{ color:var(--noir); border-color:var(--or-clair); }

/* La barre compte une entrée de plus depuis l'ajout du forfait couleur.
   Entre 1181 et 1520 px, on resserre l'espacement et la lettre plutôt que
   de basculer tout de suite dans le tiroir : la barre tient alors encore. */
@media (min-width:1181px) and (max-width:1520px){
  .nav{ gap:clamp(12px,1.5vw,20px); }
  .nav a{ letter-spacing:.13em; }
  .nav__cta{ padding:12px 16px !important; }
}

/* En dessous, dix entrées ne tiennent plus : le menu déroulant prend le
   relais. */
@media (max-width:1180px){
  .nav{
    position:fixed;
    inset:0 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:96px var(--pad) 28px;
    background:var(--ivoire);
    border-bottom:1px solid var(--ligne);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
    z-index:60;
    max-height:100svh;
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav a{
    padding:1.05rem 0;
    border-bottom:1px solid var(--ligne);
    font-size:.82rem;
  }
  .nav__cta{ margin-top:1.2rem; }
  .burger{ display:block; }
}

/* -------------------------------------------------- Forfait : animation ---
   Le décor de fils dorés dérive lentement, les cases se tamponnent une à
   une, la sixième s'ouvre en or. Rien de clignotant : de la lenteur.
-------------------------------------------------------------------------- */
.forfait{ position:relative; isolation:isolate; overflow:hidden; }

.forfait__deco{
  position:absolute;
  inset:-6% -4%;
  z-index:0;
  pointer-events:none;
  opacity:.9;
  animation:forfaitDerive 34s ease-in-out infinite;
}

.forfait__deco svg{ width:100%; height:100%; }

@keyframes forfaitDerive{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(-1.6%,-1.2%,0) scale(1.05); }
}

.forfait .wrap{ position:relative; z-index:1; }

/* ---- les cartes de prix ---- */
.forfait__carte{
  transition:transform .6s var(--ease), border-color .6s var(--ease),
             box-shadow .6s var(--ease);
}

/* Un filet doré se trace sur l'arête haute quand la section apparaît. */
.forfait__carte::before{
  content:"";
  position:absolute;
  left:0; top:-1px;
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--or-clair), transparent);
  transform:scaleX(0);
  transition:transform 1.2s var(--ease) .3s;
}

.forfait.is-anime .forfait__carte::before{ transform:scaleX(1); }
.forfait__carte--long::before{ transition-delay:.5s; }

.forfait__carte:hover{
  transform:translateY(-6px);
  border-color:rgba(198,161,91,.6);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.8);
}

.forfait__prix b{ font-variant-numeric:tabular-nums; }

/* ---- les cases à tamponner ---- */
.tampon__case{
  position:relative;
  transition:border-color .6s var(--ease), background .6s var(--ease),
             transform .6s var(--ease);
}

.tampon__case .tampon__n,
.tampon__case .tampon__lbl{
  opacity:.34;
  transition:opacity .55s var(--ease), color .55s var(--ease);
}

.tampon__case.is-tamponnee{
  border-style:solid;
  border-color:rgba(198,161,91,.75);
}

.tampon__case.is-tamponnee .tampon__n,
.tampon__case.is-tamponnee .tampon__lbl{ opacity:1; }

/* Le coup de tampon : une brève dilatation, puis le repos. */
@keyframes coupDeTampon{
  0%  { transform:scale(1); }
  38% { transform:scale(1.14); }
  100%{ transform:scale(1); }
}

.tampon__case.is-tamponnee{ animation:coupDeTampon .5s var(--ease); }

/* Une onde dorée s'échappe de la case au moment du tampon. */
.tampon__case::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:1px solid var(--or);
  opacity:0;
  transform:scale(.7);
  pointer-events:none;
}

.tampon__case.is-tamponnee::after{ animation:ondeTampon .9s var(--ease) forwards; }

@keyframes ondeTampon{
  0%  { opacity:.85; transform:scale(.82); }
  100%{ opacity:0;   transform:scale(1.5); }
}

/* La sixième case reste éteinte tant qu'elle n'est pas atteinte, puis
   s'ouvre en or — c'est la récompense, elle arrive en dernier. */
.tampon__case--offert{
  background:transparent;
  border-color:rgba(198,161,91,.42);
}

.tampon__case--offert.is-tamponnee{
  background:linear-gradient(160deg, var(--or-clair) 0%, var(--or) 45%, var(--or-fonce) 100%);
  border-color:var(--or-clair);
  box-shadow:0 0 0 1px rgba(226,200,142,.35), 0 18px 40px -18px rgba(198,161,91,.7);
}

.tampon__case--offert.is-tamponnee .tampon__n{ color:var(--noir); opacity:1; }
.tampon__case--offert.is-tamponnee .tampon__lbl{ color:rgba(14,14,14,.74); opacity:1; font-weight:500; }

/* Un reflet traverse la pastille dorée, une fois posée. */
.tampon__case--offert::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(105deg,
             rgba(255,255,255,0) 38%,
             rgba(255,255,255,.55) 50%,
             rgba(255,255,255,0) 62%);
  opacity:0;
  transform:translateX(-120%);
  pointer-events:none;
}

.tampon__case--offert.is-tamponnee::before{
  animation:refletOr 1.5s var(--ease) 1.1s forwards;
}

@keyframes refletOr{
  0%  { opacity:0;  transform:translateX(-120%); }
  22% { opacity:.9; }
  100%{ opacity:0;  transform:translateX(120%); }
}

@media (prefers-reduced-motion:reduce){
  .forfait__deco{ animation:none; }
  .forfait__carte, .tampon__case, .tampon__case .tampon__n, .tampon__case .tampon__lbl{
    transition:none;
  }
  .tampon__case.is-tamponnee,
  .tampon__case.is-tamponnee::after,
  .tampon__case--offert.is-tamponnee::before{ animation:none; }
  .forfait__carte::before{ transform:scaleX(1); transition:none; }
}

/* ==========================================================================
   ESPACE PRIVILÈGE COULEUR — espace cliente (compte.html)
   --------------------------------------------------------------------------
   La carte que la cliente vient voir. Elle reprend le noir et l'or du salon,
   et les six cases de la carte affichée en page d'accueil : la cliente
   retrouve exactement l'objet qu'on lui tamponne au comptoir.
   ========================================================================== */
.pc{
  position:relative;
  margin:0 0 26px;
  padding:clamp(24px,3.4vw,38px);
  background:linear-gradient(158deg,var(--noir) 0%,var(--noir-2) 62%,#1F1C17 100%);
  color:var(--ivoire);
  overflow:hidden;
}

/* Le contenu passe au-dessus du décor. Cette règle vient avant celle du
   décor : sinon, à spécificité égale, elle le remettrait dans le flux et
   creuserait un vide en haut de la carte. */
.pc > *{position:relative}

/* Les fils dorés du bandeau d'accueil, en rappel : la carte n'est pas un
   rectangle noir mort. */
.pc__deco{
  position:absolute;
  inset:-20% -10%;
  pointer-events:none;
  opacity:.75;
}
.pc__deco svg{width:100%;height:100%;display:block}

.pc__tete{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:clamp(16px,2vw,22px);
}

.pc__eyebrow{
  margin:0 0 .5rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or);
}

.pc__titre{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.14;
  color:var(--ivoire);
}

.pc__detail{
  margin:.7rem 0 0;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--or-clair);
}

.pc__sceau{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  gap:2px;
  width:74px;height:74px;
  border:1px solid rgba(198,161,91,.45);
  border-radius:50%;
  text-align:center;
}
.pc__sceau b{
  font-family:var(--serif);
  font-size:1.7rem;
  line-height:1;
  color:var(--or-clair);
}
.pc__sceau span{
  font-family:var(--sans);
  font-size:.46rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris-clair);
}

/* ---- les six cases ---- */
.pc__cases{
  list-style:none;
  /* Bridée puis centrée : sans cela, six cases sur toute la largeur d'un
     grand écran donnent des jetons énormes et la carte perd son air. */
  max-width:640px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(7px,1.3vw,14px);
}
@media (max-width:640px){ .pc__cases{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pc__case{
  position:relative;
  aspect-ratio:1/1;
  border:1px dashed rgba(198,161,91,.40);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.12rem;
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}

.pc__n{
  font-family:var(--serif);
  font-size:clamp(1rem,2.2vw,1.5rem);
  line-height:1;
  color:var(--or-clair);
  transition:color .4s var(--ease);
}
.pc__lbl{
  font-family:var(--sans);
  font-size:.5rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
  transition:color .4s var(--ease);
}

/* Une case tamponnée : pleine, avec la coche dorée par-dessus le chiffre. */
.pc__case.is-faite{
  border-style:solid;
  border-color:rgba(198,161,91,.85);
  background:rgba(198,161,91,.16);
}
.pc__case.is-faite .pc__lbl{ color:var(--or-clair); }

/* La coche prend exactement la place du chiffre : dessinée sur la case
   elle-même, elle mordait sur le mot « forfait » posé en dessous. */
.pc__case.is-faite .pc__n{ position:relative;color:transparent; }
.pc__case.is-faite .pc__n::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:.60em;height:1em;
  margin:-.56em 0 0 -.30em;
  border:solid var(--or-clair);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
  transform-origin:center;
}

/* La case du cadeau. Sourde tant que la carte n'est pas pleine, elle
   s'allume seulement au moment où le forfait est acquis. */
.pc__case--cadeau{
  border-style:solid;
  border-color:rgba(198,161,91,.30);
}
.pc__case--cadeau .pc__n{ color:rgba(226,200,142,.45); }

.pc__case--cadeau.is-ouverte{
  border-color:var(--or);
  background:linear-gradient(160deg,var(--or) 0%,var(--or-fonce) 100%);
  box-shadow:0 0 0 4px rgba(198,161,91,.16);
}
.pc__case--cadeau.is-ouverte .pc__n{ color:var(--noir); }
.pc__case--cadeau.is-ouverte .pc__lbl{ color:rgba(14,14,14,.74); font-weight:500; }

/* ---- progression ---- */
.pc__prog{
  max-width:640px;
  margin:clamp(18px,2.4vw,26px) auto 0;
}

.pc__phrase{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:.94rem;
  color:var(--gris-clair);
}
.pc__phrase b{ color:var(--ivoire); font-weight:500; }

.pc__jauge{
  height:2px;
  background:rgba(246,242,233,.14);
  overflow:hidden;
}
.pc__jauge i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--or-fonce),var(--or-clair));
  transition:width 1s var(--ease);
}

/* Le bandeau du forfait acquis : c'est la bonne nouvelle, elle se voit. */
.pc__gagne{
  margin-top:clamp(18px,2.4vw,24px);
  padding:16px 20px;
  border:1px solid rgba(198,161,91,.5);
  background:rgba(198,161,91,.10);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.pc__gagne b{
  font-family:var(--serif);
  font-size:1.22rem;
  font-weight:500;
  color:var(--or-clair);
}
.pc__gagne span{
  font-family:var(--sans);
  font-size:.84rem;
  color:var(--gris-clair);
}

.pc__regle{
  margin:clamp(18px,2.4vw,24px) 0 0;
  padding-top:clamp(16px,2vw,20px);
  border-top:1px solid rgba(246,242,233,.12);
  font-family:var(--sans);
  font-size:.84rem;
  line-height:1.66;
  color:var(--gris-clair);
}
.pc__note{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.02rem;
  color:var(--or-clair);
}

.pc__actions{
  margin-top:clamp(18px,2.4vw,24px);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ---- passages enregistrés ---- */
.pc-histo{ list-style:none;margin:0;padding:0; }
.pc-histo li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--ligne);
  font-size:.88rem;
}
.pc-histo li:last-child{ border-bottom:0; }
.pc-histo__d{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
}
.pc-histo__l{ color:var(--encre); }
.pc-histo__t{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:3px 9px;
  border:1px solid var(--ligne);
  color:var(--gris);
  white-space:nowrap;
}
.pc-histo li.est-offert .pc-histo__t{
  border-color:var(--or);
  background:var(--or);
  color:var(--noir);
}

/* ---- animation d'entrée : les cases se tamponnent une à une ---- */
.pc__case.va-tamponner{ animation:pcTampon .62s var(--ease) both; }
@keyframes pcTampon{
  0%  { transform:scale(.72); opacity:.25; }
  55% { transform:scale(1.12); }
  100%{ transform:scale(1); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .pc__case,.pc__jauge i{ transition:none; }
  .pc__case.va-tamponner{ animation:none; }
}

/* ==========================================================================
   POPUP PRIVILÈGE COULEUR
   --------------------------------------------------------------------------
   Deux moments : l'ouverture de la carte à l'inscription, et le forfait
   acquis. Le second est une bonne nouvelle : il passe en noir et or, comme
   la carte elle-même, au lieu du fond ivoire des messages courants.
   ========================================================================== */
.popup__in--or{
  max-width:500px;
  background:linear-gradient(158deg,var(--noir) 0%,var(--noir-2) 60%,#201D18 100%);
  border-color:rgba(198,161,91,.42);
  color:var(--ivoire);
  overflow:hidden;
}
.popup__in--or .popup__x{ color:var(--gris-clair); }
.popup__in--or .popup__x:hover{ color:var(--ivoire); background:rgba(246,242,233,.10); }
.popup__in--or .h2{ color:var(--ivoire); }
.popup__in--or p{ color:var(--gris-clair); }
.popup__in--or .eyebrow{ color:var(--or); }

.popup__in--or > *{ position:relative; }
/* La croix reste ancrée dans le coin : la règle ci-dessus la remettrait
   dans le flux et la recentrerait en haut du popup. */
.popup__in--or .popup__x{ position:absolute; }

.popup__deco{
  position:absolute;
  inset:-30% -14%;
  pointer-events:none;
  opacity:.7;
}
.popup__deco svg{ width:100%;height:100%;display:block; }

/* La couronne de cases du popup : la carte en miniature, sans les libellés. */
.popup__cases{
  list-style:none;
  margin:0 auto 22px;
  padding:0;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.popup__pastille{
  width:34px;height:34px;
  border:1px dashed rgba(198,161,91,.45);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);
  font-size:.94rem;
  color:var(--or-clair);
}
.popup__pastille.is-faite{
  border-style:solid;
  border-color:rgba(198,161,91,.85);
  background:rgba(198,161,91,.18);
}
.popup__pastille.is-cadeau{
  border-style:solid;
  border-color:var(--or);
  background:linear-gradient(160deg,var(--or) 0%,var(--or-fonce) 100%);
  color:var(--noir);
  font-weight:600;
}

.popup__regle{
  margin:0 0 22px !important;
  padding:14px 16px;
  border:1px solid rgba(246,242,233,.14);
  font-size:.84rem !important;
  line-height:1.62;
  text-align:left;
}

.popup__in--or .btn--ghost{
  border-color:rgba(246,242,233,.30);
  color:var(--ivoire);
  margin-top:10px;
}
.popup__in--or .btn--ghost:hover{ background:rgba(246,242,233,.10); }

@media (prefers-reduced-motion:reduce){
  .popup__in--or{ animation:none; }
}

/* ==========================================================================
   CARTE PHARE — page d'inscription
   L'avantage que le salon met en avant, montré avant la liste des paliers.
   ========================================================================== */
.auth__phare{
  margin:clamp(22px,3vw,30px) 0;
  padding:clamp(20px,2.6vw,26px);
  background:linear-gradient(158deg,var(--noir) 0%,var(--noir-2) 65%,#201D18 100%);
  border:1px solid rgba(198,161,91,.34);
  color:var(--ivoire);
}

.auth__phare-eyebrow{
  margin:0 0 .5rem !important;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or);
}

.auth__phare-titre{
  margin:0 0 1.1rem !important;
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.18;
  color:var(--ivoire);
}

.auth__phare-cases{
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.auth__phare-cases li{
  width:32px;height:32px;
  border:1px dashed rgba(198,161,91,.45);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);
  font-size:.9rem;
  color:var(--or-clair);
}
.auth__phare-cases li.est-cadeau{
  border-style:solid;
  border-color:var(--or);
  background:linear-gradient(160deg,var(--or) 0%,var(--or-fonce) 100%);
  color:var(--noir);
  font-weight:600;
}

.auth__phare-txt{
  margin:0 !important;
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.66;
  color:var(--gris-clair) !important;
}

/* Renvoi vers l'espace, sous le bouton de réservation du forfait. */
.forfait__espace{
  margin:1.2rem 0 0;
  font-family:var(--sans);
  font-size:.86rem;
  color:var(--gris-clair);
}
.forfait__espace a{
  color:var(--or-clair);
  border-bottom:1px solid rgba(226,200,142,.4);
  transition:border-color .3s var(--ease);
}
.forfait__espace a:hover{ border-bottom-color:var(--or-clair); }

/* ==========================================================================
   LA LIGNE « QUOI CHOISIR SUR PLANITY »
   Planity ne sait pas ouvrir une prestation précise : le bouton pose la
   cliente sur l'étape « Choix de la prestation », et cette ligne lui dit
   quelle ligne prendre. Discrète, mais juste sous le bouton.
   ========================================================================== */
.forfait__choisir{
  max-width:620px;
  margin:.85rem auto 0;
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.6;
  color:var(--gris-clair);
}
.forfait__choisir b{ color:var(--or-clair); font-weight:500; }

/* ==========================================================================
   CARTE DE FIDÉLITÉ BRUSHING
   La deuxième carte, sur fond clair : elle rime avec la carte couleur sans
   la répéter. Les cases reprennent le dessin des tampons, encrées pour un
   fond clair.
   ========================================================================== */
.brushing__bloc{
  max-width:820px;
  margin:clamp(28px,4vw,44px) auto 0;
  padding:clamp(24px,3.2vw,36px);
  border:1px solid rgba(28,27,24,.14);
  background:var(--ivoire);
  text-align:center;
}
.brushing__detail{
  margin:0 0 1.4rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or-fonce);
}
.brushing__regle{
  margin:1.5rem auto 0;
  max-width:620px;
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.75;
  color:var(--gris);
}
.brushing__bloc .btn{ margin-top:1.5rem; }
.brushing__note{
  margin:1.3rem auto 0;
  max-width:620px;
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.7;
  color:var(--gris);
}
.brushing .forfait__choisir{ color:var(--gris); }
.brushing .forfait__choisir b{ color:var(--or-fonce); font-weight:600; }
.brushing .forfait__espace{ color:var(--gris); }
.brushing .forfait__espace a{
  color:var(--or-fonce);
  border-bottom-color:rgba(168,132,63,.4);
}
.brushing .forfait__espace a:hover{ border-bottom-color:var(--or-fonce); }

/* ---- les cases, encrées pour le fond clair ---- */
.brushing .tampon__case{ border-color:rgba(168,132,63,.45); }
.brushing .tampon__n{ color:var(--or-fonce); }
.brushing .tampon__lbl{ color:var(--gris); }
.brushing .tampon__case.is-tamponnee{ border-color:rgba(168,132,63,.85); }
.brushing .tampon__case--offert .tampon__n{ color:var(--ivoire); }
.brushing .tampon__case--offert .tampon__lbl{ color:var(--ivoire); font-weight:600; }

/* Le statut de la carte, dit en toutes lettres sous le sceau. */
.pc__statut{
  flex-basis:100%;
  margin:.2rem 0 0;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gris-clair);
}
.pc__statut.est-gagne{ color:var(--or-clair); }

/* ==========================================================================
   SUIVI COULEUR
   Le sérieux du salon, dit une fois et repris partout : section forfait de
   l'accueil, espace cliente, page d'inscription.
   ========================================================================== */
.forfait__suivi{
  max-width:820px;
  margin:clamp(22px,3vw,30px) auto 0;
  padding:clamp(18px,2.4vw,24px) clamp(20px,2.8vw,28px);
  border:1px solid rgba(198,161,91,.28);
  text-align:left;
}
.forfait__suivi-titre{
  margin:0 0 .6rem;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or);
}
.forfait__suivi-corps p{
  margin:0 0 .85rem;
  font-family:var(--sans);
  font-size:.9rem;
  line-height:1.75;
  color:var(--gris-clair);
}
.forfait__suivi-corps p:last-child{ margin-bottom:0; }
/* Le dernier paragraphe ferme le propos : c'est celui que le salon met en
   avant dans son texte. */
.forfait__suivi-corps p.est-fort{
  color:var(--ivoire);
  font-weight:600;
}

/* ---- espace cliente ---- */
.pc__suivi{
  margin-top:clamp(16px,2vw,20px);
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,20px);
  border-left:2px solid var(--or);
  background:rgba(198,161,91,.06);
}
.pc__suivi-titre{
  margin:0 0 .45rem;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or);
}
.pc__suivi-corps p{
  margin:0 0 .75rem;
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.7;
  color:var(--gris-clair);
}
.pc__suivi-corps p:last-child{ margin-bottom:0; }
.pc__suivi-corps p.est-fort{ color:var(--ivoire); font-weight:600; }

/* La ligne qui dit quelle prestation prendre sur Planity, sous le bouton. */
.pc__choisir{
  /* Sous le bouton, jamais à côté : la phrase se lit après le geste. */
  flex-basis:100%;
  margin:.2rem 0 0;
  font-family:var(--sans);
  font-size:.76rem;
  line-height:1.6;
  color:var(--gris-clair);
}
.pc__choisir b{ color:var(--or-clair); font-weight:500; }

/* ---- page d'inscription ---- */
.auth__phare-suivi p{
  margin:0 0 .6rem;
  font-size:.82rem;
  line-height:1.7;
  color:var(--gris-clair);
}
.auth__phare-suivi p:last-child{ margin-bottom:0; }
.auth__phare-suivi p.est-fort{ color:var(--ivoire); font-weight:600; }

/* Le trait qui sépare les deux cartes présentées à l'inscription. */
.auth__phare-trait{
  height:1px;
  margin:1.6rem 0;
  background:rgba(246,242,233,.16);
}
.auth__phare-suivi{
  margin:1rem 0 0 !important;
  padding-top:.9rem;
  border-top:1px solid rgba(246,242,233,.14);
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.7;
  color:var(--gris-clair) !important;
}

/* =============================================================
   CARTE DE FIDÉLITÉ À POINTS — 24/09/2026
   Demande du salon : « la présentation actuelle n'est pas assez
   claire ». Trois temps qui se lisent d'un coup d'œil — 1 € = 1 point,
   300 points, le rituel offert — puis les conditions en petites
   lignes. Noir et or, comme le reste de la Maison ; les chiffres
   portent la lecture, le texte ne fait que confirmer.
   ============================================================= */
.fidelite-points { background: var(--noir-2); color: var(--ivoire); }

.fidPas {
  list-style: none;
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  counter-reset: pas;
}

.fidPas__item {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem);
  text-align: center;
  border-top: 1px solid var(--ligne-claire);
}

/* La flèche qui relie les trois temps : le parcours se lit tout seul. */
.fidPas__item + .fidPas__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: calc(-1 * clamp(1rem, 2.4vw, 2rem) / 2 - 3px);
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--or);
  border-right: 1px solid var(--or);
  transform: translateY(-50%) rotate(45deg);
}

.fidPas__cle {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
  color: var(--or-clair);
}

/* « Offert » s'ecrit plus petit que les chiffres : on le redescend pour
   que les trois temps partagent la meme ligne de base. */
.fidPas__item--offert .fidPas__cle {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: 0.04em;
  padding-top: clamp(0.7rem, 2.4vw, 1.6rem);
}

.fidPas__libelle {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivoire);
}

.fidPas__detail {
  margin: 0.9rem auto 0;
  max-width: 30ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gris-clair);
}

/* Les conditions : quatre lignes, chacune ouverte par un losange d'or. */
.fidRegles {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.4rem, 3vw, 2rem) 0 0;
  max-width: 760px;
  border-top: 1px solid var(--ligne-claire);
  display: grid;
  gap: 0.7rem;
}

.fidRegles li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gris-clair);
}

.fidRegles li::before {
  content: '\2666';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--or);
  font-size: 0.7em;
}

.fidPas__lien { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); text-align: center; }

@media (max-width: 860px) {
  .fidPas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fidPas__item { text-align: left; padding-left: 0; padding-right: 0; }
  .fidPas__item + .fidPas__item::before { left: 0; transform: rotate(135deg); }
  .fidPas__detail { margin-left: 0; }
}

/* ---- réseaux sociaux du pied de page (24/09/2026) ---- */
.reseaux { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: 0; }

.reseau {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}

.reseau svg { flex: none; color: var(--or); transition: color .3s ease; }
.reseau:hover { color: var(--or-clair); }
.reseau:hover svg { color: var(--or-clair); }

/* Le bouton d'avis Google porte l'étoile : les deux boutons de la section
   des avis se lisent alors d'un coup d'œil. */
.avis__cta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; justify-content: center; align-items: center; }
.btn__icone { display: inline-flex; margin-right: .55rem; }

/* ---- carte à points de l'espace cliente (24/09/2026) ---- */
.fid__solde { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fid__solde span {
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
.fid__gagne { color: var(--or-clair); }
.fid__echeance { font-size: .82rem; color: var(--gris); }

.fid__conditions {
  list-style: none;
  margin: 1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--ligne);
  display: grid;
  gap: .45rem;
}

.fid__conditions li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--gris);
}

.fid__conditions li::before {
  content: '\2666';
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--or);
  font-size: .7em;
}

/* ---- arrivée par le QR code de fidélité (24/09/2026) ---- */
.etat-vide--qr { max-width: 560px; }
.qr-lead { max-width: 42ch; margin-inline: auto; }

.qr-pas {
  list-style: none;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto;
  padding: clamp(1.2rem, 3vw, 1.8rem) 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 480px;
}

.qr-pas li { text-align: center; }

.qr-pas b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 400;
  color: var(--or);
  line-height: 1.1;
}

.qr-pas span {
  display: block;
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

.qr-deja { margin-top: 1.1rem; font-size: .9rem; color: var(--gris); }

/* ===== Application installable (15/10/2026) ===== */
.app-install{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 16px;
  margin:0 auto 32px;max-width:560px;padding:14px 18px;background:#fff;text-align:left;
  border:1px solid rgba(198,161,91,.45);box-shadow:0 14px 34px -24px rgba(14,14,14,.45)}
.app-install__logo{width:52px;height:52px;border-radius:12px;border:1px solid rgba(14,14,14,.08)}
.app-install__txt b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:500;line-height:1.1}
.app-install__txt span{font-size:.82rem;color:var(--gris)}
.app-install__btn{padding:.75rem 1.3rem;white-space:nowrap}
.app-install__ios{grid-column:1/-1;margin:0;font-size:.88rem;color:var(--noir);text-align:center;
  padding-top:10px;border-top:1px dashed rgba(198,161,91,.4)}
.app-install__ico{width:20px;height:20px;vertical-align:-4px;color:#0a84ff;margin:0 2px}
.app-install .app-install__ios{margin:0}
.app-install__ios[hidden],.app-install__btn[hidden]{display:none}
@media (max-width:420px){
  .app-install{grid-template-columns:auto 1fr}
  .app-install__btn{grid-column:1/-1;width:100%}
}

/* ===== Téléphone et application installée (15/10/2026) ===== */
@media (max-width:760px){
  /* textes de la carte : jamais sous 10 px */
  .pc__lbl{font-size:.62rem;letter-spacing:.12em}
  .pc__sceau span{font-size:.58rem;letter-spacing:.12em}
  .pc__eyebrow,.pc__statut,.pc__suivi-titre{font-size:.68rem}
  .fid__palier{font-size:10.5px}
  .topbar{font-size:10.5px}
  /* zones tactiles d'au moins 44 px */
  .lien-danger{display:inline-block;padding:.8rem 0;font-size:13px}
  .footer__col a{display:inline-block;padding:.5rem 0}
  .espace__tete .btn{padding-block:.85rem}
}

/* Application installée : pas de bandeau d'adresse, onglets en bas */
.en-app .topbar{display:none}
.app-onglets{display:none}
.en-app .app-onglets{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(14,14,14,.97);border-top:1px solid rgba(198,161,91,.35);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
.app-onglets a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;justify-content:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--gris-clair);text-decoration:none}
.app-onglets svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.app-onglets a.is-actif{color:var(--or-clair)}
.en-app body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}