:root{
  --noir:#000000;
  --noir-2:#0E0E0E;
  --blanc:#FFFFFF;
  --gris:#9A978F;
  --ligne:#242424;
  --or-1:#5A4620; --or-2:#B8963F; --or-3:#F1E3B6;
  --titre:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --texte:"Spectral",Georgia,serif;
  --forfait:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
}
*{box-sizing:border-box}
figure{margin:0}
body{margin:0;background:var(--noir);color:var(--blanc);font:400 16px/1.5 var(--texte);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--blanc);outline-offset:3px}

/* ── en-tête (copié de la référence : nav à gauche, nom au centre, bouton bordé à droite) ── */
.tete{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));background:var(--noir)}
.menu-g{display:flex;gap:26px;justify-self:start;align-self:end;padding-bottom:13px}  /* calé sur le bouton, pas sur FR·EN */
.menu-g a{font:400 12.8px/1.5 var(--texte);letter-spacing:-.02em;color:var(--blanc)}
.menu-g a:hover,.menu-g a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.titre-site{display:flex;justify-content:center;align-items:center}
.titre-site .logo{height:26px;width:auto;display:block}

.droite{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.droite .haut{display:flex;align-items:center;gap:4px}
/* lien LOGIN : à gauche du sélecteur de langue sur ordinateur, à gauche des deux barres sur téléphone.
   Une fois connecté, il affiche le prénom du membre. */
.compte{position:relative;display:inline-flex;align-items:center;padding:4px 8px 4px 2px;
  font:400 12.8px/1 var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--blanc);
  opacity:.7;white-space:nowrap;transition:opacity .2s}
.compte:hover,.compte.connecte{opacity:1;text-decoration:underline;text-underline-offset:5px}
.compte.pastille::after{content:"";position:absolute;right:0;top:1px;width:6px;height:6px;border-radius:50%;
  background:var(--or-2);box-shadow:0 0 0 2px var(--noir)}
.langue{display:flex;align-items:center;gap:2px;padding-right:4px}
.langue button{background:none;border:0;color:var(--blanc);opacity:.45;font:400 11px/1 var(--texte);letter-spacing:.14em;
  cursor:pointer;padding:3px 5px;transition:opacity .2s}
.langue button:hover{opacity:.85}
.langue button[aria-current=true]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.langue span{opacity:.3;font-size:10px}
.book{font:400 19.7px/1 var(--texte);letter-spacing:-.02em;text-transform:uppercase;color:var(--blanc);
  border:1px solid var(--blanc);padding:12px 12px 11px;white-space:nowrap;transition:.18s}
.book:hover,.book[aria-current=page]{background:var(--blanc);color:var(--noir)}
@media(max-width:820px){
  .tete{grid-template-columns:auto auto;justify-content:space-between;position:fixed;padding:6px 14px 12px;row-gap:4px}
  .langue{grid-column:1/-1;order:-2;justify-self:end;padding:0}
  .titre-site{grid-column:1/-1;order:-1;margin-bottom:4px}
  .droite{display:contents}
  .menu-g{grid-column:1/-1;justify-self:center;gap:18px;padding-bottom:0;align-self:center}.menu-g a{font-size:11.5px;white-space:nowrap}
  .book{grid-column:1/-1;justify-self:stretch;text-align:center;font-size:13px;padding:11px 10px 10px;letter-spacing:.02em;margin-top:2px}
}
@media(max-width:360px){.menu-g{gap:12px}.menu-g a{font-size:10.5px}}

/* ── menu téléphone : deux barres, écran noir plein, pages centrées, bouton en bas ── */
.burger,.menu-mobile{display:none}
@media(max-width:820px){
  .tete{grid-template-columns:1fr;padding:22px 14px 24px;row-gap:0}
  .tete .langue,.tete .menu-g,.tete .book{display:none}
  .tete .titre-site{grid-column:1;order:0;padding-inline:44px;margin:0}
  .tete .titre-site .logo,.menu-mobile-haut .logo{height:22px}
  .burger{display:flex;position:absolute;right:18px;top:50%;transform:translateY(-50%);flex-direction:column;justify-content:center;gap:7px;
    width:44px;height:44px;background:none;border:0;padding:0 6px;cursor:pointer}
  .burger span{display:block;height:1.5px;background:var(--blanc)}
  .tete .droite .haut{display:contents}
  .tete .compte{position:absolute;right:52px;top:50%;transform:translateY(-50%);font-size:11.5px;padding:10px 8px 10px 4px;opacity:.9}
  .menu-mobile{position:fixed;inset:0;z-index:60;background:var(--noir);display:flex;flex-direction:column;
    padding:22px 14px calc(28px + env(safe-area-inset-bottom,0px))}
  .menu-mobile[hidden]{display:none}
  .menu-mobile-haut{position:relative;display:flex;justify-content:center;align-items:center;min-height:44px}
  .menu-mobile-haut .titre-site{padding-inline:44px}
  .fermer-menu{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer}
  .fermer-menu span{position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--blanc)}
  .fermer-menu span:first-child{transform:rotate(45deg)}.fermer-menu span:last-child{transform:rotate(-45deg)}
  .menu-mobile-liens{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
  .menu-mobile-liens a{font:400 clamp(26px,8vw,34px)/1.25 var(--texte);letter-spacing:-.01em;text-transform:none;color:var(--blanc);text-align:center}
  .menu-mobile-liens .langue{margin-top:26px;padding:0}
  .menu-mobile-liens .langue button{font-size:13px}
  .book-mobile{display:block;text-align:center;background:var(--blanc);color:var(--noir);font-size:18px;padding:16px 20px;letter-spacing:0}
  body.menu-ouvert{overflow:hidden}
}

/* ── bandeau doré « BOOK NOW » défilant (copié de la référence, 60 px/s) ─────── */
.bandeau{display:block;overflow:hidden;margin-top:var(--h-tete,92px);padding:17px 0;
  background:linear-gradient(90deg,var(--or-1) 0%,var(--or-2) 22%,var(--or-3) 50%,var(--or-2) 78%,var(--or-1) 100%)}
.defile{display:flex;width:max-content;animation:defile 30s linear infinite;will-change:transform}
.defile span{font:700 24px/1.4 var(--titre);text-transform:uppercase;color:var(--blanc);white-space:nowrap;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.15)}
@keyframes defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.defile{animation:none}}

/* ── accueil : une rangée de 3 photos par catégorie, titre posé au centre, filet doré ── */
:root{--h-tete:92px}
#mur{padding:0}
.rangee{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,7vw,110px);
  padding:26px clamp(16px,7.6vw,110px)}
.rangee .tuile{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--noir-2);cursor:zoom-in}
.rangee .tuile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.rangee .tuile:hover img{transform:scale(1.03)}
.titre-cat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;pointer-events:none;
  font:400 clamp(30px,3.7vw,52.9px)/1 var(--titre);text-transform:uppercase;color:var(--blanc);
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.filet-or{height:14px;background:linear-gradient(90deg,#2A2110 0%,var(--or-2) 28%,var(--or-3) 50%,var(--or-2) 72%,#2A2110 100%)}
.filet-or:last-child{margin-bottom:40px}
.tuile{cursor:zoom-in}
.tuile img,.tuile video{width:100%;height:100%;object-fit:cover}

/* ── pages intérieures ───────────────────────────────── */
.page{padding:calc(var(--h-tete) + 30px) 24px 80px;max-width:1280px;margin:0 auto}
.page h1{font:400 clamp(34px,4vw,52.9px)/1.1 var(--titre);text-transform:uppercase;margin:0 0 34px;text-align:center}
.groupe{margin-bottom:56px}
.groupe h2{font:400 12.8px/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--ligne)}
.serie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,4vw,60px)}
.serie .tuile{aspect-ratio:4/5;overflow:hidden}

/* ── tarifs, dépouillés ──────────────────────────────── */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:6px}
.tarif{background:var(--noir-2);padding:26px 22px;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.tarif:hover{background:#1B1B1E}
.tarif .h{font:400 26px/1.1 var(--titre);text-transform:uppercase;letter-spacing:-.01em}
.tarif .d{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.tarif .p{font:400 40px/1 var(--titre);letter-spacing:-.01em;margin-top:auto}
.tarif .p span{font-size:18px;color:var(--gris)}
.tarif ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#D6D3CD}
.tarif a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ligne);
  padding:11px;text-align:center;transition:.18s}
.tarif a:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.sup{margin-top:18px;font-size:13px;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 26px}
.sup b{color:var(--blanc);font-weight:400}

/* ── forfaits en liste : service et prix à gauche, photo à droite ── */
.liste-forfaits{display:flex;flex-direction:column;border-top:1px solid var(--ligne)}
.forfait{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,80px);align-items:center;
  padding:34px 0;border-bottom:1px solid var(--ligne)}
.forfait .info{display:flex;flex-direction:column;gap:12px}
.forfait .h{font:700 38px/1.05 var(--forfait);letter-spacing:0}
.forfait .d{font:300 20px/1.2 var(--forfait);letter-spacing:.02em;text-transform:none;color:#D6D3CD}
.forfait ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:15px;color:#D6D3CD}
.forfait .p{font:400 19px/1 var(--forfait);letter-spacing:.02em;color:#D6D3CD;margin-top:6px}
.forfait .p span{font-size:19px;color:#D6D3CD}
.btn-ligne{align-self:flex-start;font:400 12.8px/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--blanc);padding:12px 22px;margin-top:6px;transition:.18s}
.btn-ligne:hover{background:var(--blanc);color:var(--noir)}
.forfait .illu{aspect-ratio:4/3;overflow:hidden;background:var(--noir)}
.forfait .illu img{width:100%;height:100%;object-fit:contain}  /* photo entière, jamais coupée */
/* téléphone : simple liste, sans photo d'illustration */
@media(max-width:700px){.forfait{grid-template-columns:1fr;gap:0;padding:26px 0}.forfait .illu{display:none}
  .forfait .h{font-size:32px}.forfait .d{font-size:18px}.forfait .p{font-size:18px}.forfait ul{font-size:14.5px}}

/* ── portfolio : le sommaire (une couverture par catégorie), puis la grille d'une catégorie ── */
.sommaire-portfolio{display:grid;grid-template-columns:repeat(2,1fr);gap:40px clamp(20px,4vw,60px)}
.couverture{display:block}
.couverture figure{aspect-ratio:4/5;overflow:hidden;background:var(--noir-2)}
.couverture img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.couverture:hover img{transform:scale(1.03)}
.couverture h2{font:400 clamp(26px,3vw,40px)/1.1 var(--titre);margin:16px 0 0}
.grille-portfolio{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2.4vw,34px)}
.grille-portfolio .tuile{aspect-ratio:4/5;overflow:hidden;background:var(--noir-2)}
.grille-portfolio .tuile img{width:100%;height:100%;object-fit:cover}
.retour{margin:-20px 0 26px;font-size:12.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-align:center}
.retour a:hover{color:var(--blanc)}
.titre-cat a{pointer-events:auto;color:inherit}
@media(max-width:700px){.sommaire-portfolio{grid-template-columns:1fr;gap:34px}}

/* ── visionneuse ─────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,8,10,.97);display:grid;place-items:center;padding:20px}
.lb img{max-width:min(96vw,1500px);max-height:90vh;width:auto}
.lb button{position:absolute;background:none;border:0;color:var(--blanc);cursor:pointer;line-height:1;opacity:.75}
.lb button:hover{opacity:1}
.lb .fermer{top:20px;right:24px;font-size:28px}
.lb .prec,.lb .suiv{top:50%;transform:translateY(-50%);font-size:40px;padding:20px}
.lb .prec{left:8px}.lb .suiv{right:8px}

/* ── pied de page (copié de la référence) ────────────── */
.pied{padding:70px 24px 60px;max-width:1280px;margin:0 auto}
.pied h4{font:400 34.4px/1.15 var(--titre);text-transform:uppercase;margin:0 0 14px}
.pied p{font:400 12.8px/1.5 var(--texte);letter-spacing:-.02em;text-transform:uppercase;margin:0 0 6px;color:var(--blanc)}
.pied a:hover{text-decoration:underline;text-underline-offset:4px}
.pied .copie{margin-top:26px;color:var(--gris)}
.pied .reseaux{display:flex;align-items:center;gap:2px;margin:10px 0 8px}
/* réseaux : zones de 44 px pour le doigt, les logos restent optiquement alignés */
.pied .reseau{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;opacity:.95;transition:opacity .2s}
.pied .reseau:first-child{margin-left:-9px}
.pied .reseau:hover{opacity:.7;text-decoration:none}

/* ── page de réservation : raccord avec la palette épurée ─────────── */
:root{
  --nuit:var(--noir); --nuit-2:var(--noir-2); --nuit-3:#1B1B1E;
  --creme:var(--blanc); --creme-2:#BFBCB6; --ambre:var(--blanc);
  --serif:var(--titre);
}
.wrap{max-width:1280px;margin:0 auto;padding-inline:24px}
@media(max-width:560px){.wrap{padding-inline:16px}.page{padding-inline:16px}.pied{padding-inline:16px}}
#cal iframe{max-width:100%}
.sec{padding-block:calc(var(--h-tete) + 30px) 80px}
.sur{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);margin:0 0 10px}
.btn{display:inline-block;font:400 11px/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;
  padding:13px 20px;border:1px solid var(--ligne);background:none;color:var(--blanc);transition:.18s;cursor:pointer}
.btn:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.btn-plein{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.btn-plein:hover{filter:brightness(.9)}
.etapes span[aria-current=step]{border-color:var(--blanc);color:var(--blanc)}
.opt.on{border-color:var(--blanc);background:#1B1B1E}
.opt .p{color:var(--blanc)}
.panier{border-color:var(--ligne)}
.depot b{color:var(--blanc)}


/* ── EN DERNIER : tous les titres reprennent exactement le dessin du nom du site (le raccourci « font » remet
   la taille optique à zéro, d'où la priorité) ─────────────────────────────────────────────── */
.titre-site,.page h1,.titre-cat,.pied h4,.tarif .h,.tarif .p,.couverture h2,.bloc h3,.panier h3,.total b,.depot b,.cond h1,.titre-page,.defile span,.carte h2,.parcours h2,.jalon .n{
  font-family:var(--titre) !important;font-weight:700 !important;
  text-transform:uppercase !important;letter-spacing:.03em !important}


/* ── profil membre : connexion par code, fidélité, historique ─────────────────── */
.compte-page{max-width:560px}
.carte{border:1px solid var(--ligne);background:var(--noir-2);padding:24px 20px;margin:0 0 22px}
.carte h2{font-size:clamp(22px,4.6vw,28px);line-height:1.1;margin:0 0 12px}
.carte p{margin:0 0 16px;font-size:15px;line-height:1.6;color:#D6D3CD}
.carte label{display:flex;flex-direction:column;gap:6px;font:400 11px/1 var(--texte);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin:0 0 14px}
.carte input{font:400 16px/1.2 var(--texte);color:var(--blanc);background:var(--noir);border:1px solid var(--ligne);
  padding:13px 14px;letter-spacing:0;text-transform:none}
.carte input:focus{outline:0;border-color:var(--or-2)}
.carte input.code{font-size:26px;letter-spacing:.4em;text-align:center;padding:14px 10px 14px 20px}
.lien-discret{background:none;border:0;padding:0;margin:0;color:var(--gris);font:400 13px/1.4 var(--texte);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lien-discret:hover{color:var(--blanc)}
.rangee-liens{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.msg{margin:12px 0 0;font-size:14px;line-height:1.5}
.msg.err{color:#E5A4A4}.msg.ok{color:var(--or-3)}
.code-secours{font:400 30px/1 var(--texte);letter-spacing:.3em;border:1px solid var(--or-2);padding:16px;text-align:center;margin:14px 0 0}
.ligne-profil{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--ligne);font-size:14.5px}
.ligne-profil:last-child{border-bottom:0}
.ligne-profil span:first-child{color:var(--gris)}
.code10{font-size:16px;letter-spacing:.08em;color:var(--or-3);white-space:nowrap}
.code10.use{color:var(--gris);text-decoration:line-through}

/* ── le parcours : un chemin de 5 séances vers la récompense −40 % ───────────── */
.parcours{border:1px solid var(--or-1);background:linear-gradient(180deg,#0E0E0E 0%,#000 100%);padding:26px 18px 30px;margin:0 0 22px}
.parcours h2{font-size:clamp(24px,5.4vw,32px);line-height:1;margin:0 0 6px;text-align:center}
.parcours .regle{margin:0 0 4px;text-align:center;font-size:13.5px;color:var(--gris)}
.parcours .etat{margin:14px 0 0;text-align:center;font-size:15.5px;line-height:1.5;color:#D6D3CD}
.parcours .etat.on{color:var(--or-3)}
.compteur{display:flex;justify-content:center;gap:26px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ligne)}
.compteur div{text-align:center}
.compteur b{display:block;font:700 26px/1 var(--forfait);color:var(--blanc)}
.compteur span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

.chemin{position:relative;width:100%;margin:18px 0 0}
.chemin svg{display:block;width:100%;height:auto;overflow:visible}
.chemin .voie{fill:none;stroke:var(--ligne);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9}
.chemin .voie.faite{stroke:var(--or-2);stroke-dasharray:none;stroke-width:2.5}
.jalon{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:84px}
.jalon .pastille{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--ligne);background:var(--noir);color:var(--gris);transition:.3s}
.jalon .n{font-size:20px;line-height:1;color:inherit}
.jalon .etiq{font:400 11px/1.3 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-align:center}
.jalon.faite .pastille{border-color:var(--or-2);background:linear-gradient(160deg,var(--or-3) 0%,var(--or-2) 55%,var(--or-1) 100%);color:var(--noir)}
.jalon.faite .etiq{color:var(--or-3)}
.jalon.suivante .pastille{border-color:var(--blanc);color:var(--blanc);animation:battement 2.2s ease-in-out infinite}
.jalon.suivante .etiq{color:var(--blanc)}
.jalon.but .pastille{width:64px;height:64px;border-style:dashed}
.jalon.but.faite .pastille{border-style:solid;animation:battement 2.2s ease-in-out infinite}
.jalon.but.faite .pastille svg{stroke:var(--noir);fill:var(--noir)}
.jalon.but .n{font-size:15px;letter-spacing:.02em}
@keyframes battement{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.jalon .pastille{animation:none !important}}

/* note de bas de page de remerciement : le profil membre créé à la réservation */
.membre-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne);font-size:14.5px;line-height:1.6;color:var(--gris)}
.membre-note a{color:var(--or-3);text-decoration:underline;text-underline-offset:4px}

.sc{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ligne)}
.sc:last-child{border-bottom:0}
.sc .g{display:flex;flex-direction:column;gap:3px}
.sc .f{font:700 18px/1.1 var(--forfait)}
.sc .d{font-size:12.5px;color:var(--gris)}
.sc .s{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.sc .s.payee{color:var(--or-3)}