/* ============================================================
   ÉVASION MASSAGE — FEUILLE DE STYLE PRINCIPALE
   Charte : or profond #7A5A22 · marron #4A3B2E · champagne #F3EDE4
   Titres : Cormorant Garamond 600 · Texte : Jost 300
   Les animations sont dans css/animations.css
   ============================================================ */

/* --- 1. VARIABLES --------------------------------------------------------- */
:root{
  --or-profond:#7A5A22;
  --or-clair:#D9BC77;
  --or-filet:#C0A167;
  --espresso:#2A241E;
  --marron:#4A3B2E;
  --marron-doux:#7A6753;
  --fond:#F3EDE4;
  --surface:#FFFFFF;
  --filet:#DCD1BC;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --max:1140px;
  --max-etroit:760px;
  --section:clamp(64px,9vw,112px);
}

/* --- 2. BASE -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--fond);
  color:var(--marron);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--or-profond);margin:0 0 .4em;}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.12;letter-spacing:2px;}
h1 .h1__sub{display:block;font-size:.62em;letter-spacing:1px;color:var(--marron);}
h2{font-size:clamp(26px,3.6vw,36px);line-height:1.22;letter-spacing:1px;}
h3{font-size:clamp(20px,2.4vw,24px);letter-spacing:.5px;}
p{margin:0 0 1.1em;max-width:64ch;}

.eyebrow{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:var(--marron-doux);margin-bottom:14px;
}
.skip{
  position:absolute;left:-9999px;background:var(--marron);color:var(--fond);
  padding:12px 20px;z-index:200;
}
.skip:focus{left:16px;top:16px;}
:focus-visible{outline:2px solid var(--or-profond);outline-offset:3px;}

/* --- 3. STRUCTURE --------------------------------------------------------- */
.conteneur{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.conteneur--etroit{max-width:var(--max-etroit);}
section{padding:var(--section) 0;}
.centre{text-align:center;}

.section-tete{text-align:center;margin-bottom:56px;}
.section-tete p{margin-left:auto;margin-right:auto;}
.section-tete__sub{color:var(--marron-doux);}

/* Filet doré + losange : séparateur signature de la charte */
.filet{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 26px;}
.filet span{height:1px;width:64px;background:var(--or-filet);}
.filet .losange{width:7px;height:7px;background:var(--or-filet);transform:rotate(45deg);}
.filet--gauche{justify-content:flex-start;}

/* --- 4. BOUTONS ----------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:400;
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  text-decoration:none;padding:17px 40px;border:1px solid transparent;
}
.btn--principal{background:var(--marron);color:var(--fond);}
.btn--principal:hover{background:var(--espresso);}
.btn--or{background:var(--or-clair);color:var(--espresso);}
.btn--or:hover{background:#E6CE93;}
.btn--compact{padding:11px 24px;font-size:12px;border-color:var(--or-filet);color:var(--or-profond);}
.btn--compact:hover{background:var(--or-profond);color:var(--fond);border-color:var(--or-profond);}
.btn--large{font-size:clamp(18px,2.6vw,26px);letter-spacing:4px;padding:20px 48px;text-transform:none;}

.micro{font-size:13px;color:var(--marron-doux);margin:16px 0 0;letter-spacing:.5px;}
.lien-discret{
  display:inline-block;margin-top:18px;font-size:14px;letter-spacing:1px;
  color:var(--or-profond);text-underline-offset:5px;
}

/* --- 5. EN-TÊTE ----------------------------------------------------------- */
.entete{position:sticky;top:0;z-index:100;background:rgba(243,237,228,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet);}
.entete__inner{display:flex;align-items:center;gap:24px;min-height:72px;}
.logo{display:flex;align-items:center;gap:10px;color:var(--or-profond);text-decoration:none;}
.logo__texte{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:6px;text-transform:uppercase;}
.nav{margin-left:auto;display:flex;gap:28px;font-size:14px;letter-spacing:1.5px;}
.nav a{text-decoration:none;color:var(--marron-doux);padding:4px 0;border-bottom:1px solid transparent;}
.nav a:hover{color:var(--or-profond);border-color:var(--or-filet);}

/* --- 6. HERO -------------------------------------------------------------- */
.hero{position:relative;padding:0;min-height:min(88vh,760px);display:flex;align-items:center;}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(42,36,30,.82) 0%,rgba(42,36,30,.62) 48%,rgba(42,36,30,.30) 100%);
}
.hero__contenu{position:relative;z-index:2;padding-top:96px;padding-bottom:96px;max-width:820px;}
.hero h1{color:var(--or-clair);}
.hero h1 .h1__sub{color:#EDE3D2;}
.hero .eyebrow{color:var(--or-clair);}
.hero__texte{color:#E3D8C6;font-size:clamp(17px,2vw,20px);max-width:56ch;}
.hero .micro{color:#C3B6A2;}
.hero .lien-discret{color:var(--or-clair);}

/* --- 7. BARRE DE CONFIANCE ------------------------------------------------ */
.confiance{background:var(--surface);border-bottom:1px solid var(--filet);padding:44px 0;}
.confiance__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.confiance__item{text-align:center;}
.confiance__item h2{font-size:18px;letter-spacing:.5px;margin:12px 0 4px;}
.confiance__item p{font-size:14px;color:var(--marron-doux);margin:0;}
.ico{width:28px;height:28px;stroke:var(--or-profond);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* --- 8. MIROIR ------------------------------------------------------------ */
.miroir__grille{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;}
.miroir .accent{color:var(--or-profond);font-family:var(--serif);font-size:22px;font-weight:600;}

/* --- 9. MEDIA (cadres photo) ---------------------------------------------- */
.media{margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--filet);}
.media img{width:100%;height:100%;object-fit:cover;}
.media--portrait{aspect-ratio:3/4;}
.media--paysage{aspect-ratio:4/3;}
/* Bandeau : 16/9 et non 8/3, les photos sources sont des prises de vue
   verticales au téléphone — un format très large les découperait trop. */
.media--bandeau{aspect-ratio:16/9;margin-top:56px;}

/* --- 10. EXPÉRIENCE ------------------------------------------------------- */
.experience{background:var(--surface);}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.etape__num{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--marron-doux);margin:22px 0 6px;}

/* Bloc d'attente pour l'étape 2 : aucune photo de cabine n'existe encore.
   À supprimer dès que images/etape-2-cabine.jpg est fournie. */
.etape__attente{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--fond);border:1px solid var(--or-filet);color:var(--or-profond);
}
.etape__attente p{
  margin:0;font-size:12px;letter-spacing:3.5px;text-transform:uppercase;color:var(--marron-doux);
}
.etape h3{margin-bottom:.5em;}
.etape p{font-size:16px;}

/* --- 11. LIEU : VIDÉO + GALERIE ------------------------------------------- */
.video{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--espresso);cursor:pointer;}
.video img{width:100%;height:100%;object-fit:cover;}
.video iframe{width:100%;height:100%;border:0;}
.video__play{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
  background:rgba(243,237,228,.92);border:0;cursor:pointer;display:grid;place-items:center;
}
.video__play svg{width:34px;height:34px;fill:var(--espresso);margin-left:4px;}
.legende{text-align:center;color:var(--marron-doux);font-size:15px;margin:20px auto 56px;}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.galerie .media{aspect-ratio:4/3;}

/* --- 12. COLONNES / CARTES ------------------------------------------------ */
.colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.carte{background:var(--surface);border:1px solid var(--filet);padding:36px 30px;}
.carte p{font-size:16px;margin-bottom:0;}
.carte--avis{margin:0;position:relative;}
.carte--avis p{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.6;color:var(--marron);}
.carte--avis footer{margin-top:18px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--marron-doux);}

/* --- 13. FORMULES --------------------------------------------------------- */
.formules{background:var(--surface);}
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.tarif{
  background:var(--fond);border:1px solid var(--filet);padding:42px 28px;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.tarif--conseille{border-color:var(--or-filet);border-width:2px;}
.tarif__badge{
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--or-profond);
  margin:0 0 14px;
}
.tarif__detail{font-size:15px;color:var(--marron-doux);margin-bottom:22px;}
.tarif__prix{font-family:var(--serif);font-weight:600;font-size:42px;color:var(--or-profond);margin:auto 0 0;}
.note-tarif{text-align:center;color:var(--marron-doux);margin:38px auto 30px;}
.note-tarif strong{color:var(--or-profond);font-weight:400;}

/* --- 14. INCLUS ----------------------------------------------------------- */
.inclus__grille{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
.liste{list-style:none;margin:0;padding:0;}
.liste li{position:relative;padding-left:30px;margin-bottom:14px;font-size:16px;}
.liste li::before{
  content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;
  background:var(--or-filet);transform:rotate(45deg);
}

/* --- 15. FAQ -------------------------------------------------------------- */
.qa{border-bottom:1px solid var(--filet);}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-size:21px;font-weight:600;color:var(--or-profond);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:"";position:absolute;right:8px;top:32px;width:9px;height:9px;
  border-right:1px solid var(--or-profond);border-bottom:1px solid var(--or-profond);
  transform:rotate(45deg);transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(-135deg);}
.qa p{padding-bottom:22px;margin:0;font-size:16px;}

/* --- 16. CTA FINAL -------------------------------------------------------- */
/* Fond espresso plein tant qu'il n'y a pas de photo de façade. Si vous ajoutez
   .final__media, l'image passe dessous et le voile sombre reprend le relais. */
.final{position:relative;text-align:center;background:var(--espresso);}
.final__media{position:absolute;inset:0;overflow:hidden;}
.final__media img{width:100%;height:100%;object-fit:cover;}
.final__media::after{content:"";position:absolute;inset:0;background:rgba(42,36,30,.88);}
.final__contenu{position:relative;z-index:2;}
.final h2{color:var(--or-clair);}
.final p{color:#D6CAB8;margin-left:auto;margin-right:auto;}
.final .filet span{background:var(--or-clair);opacity:.55;}
.final .filet .losange{background:var(--or-clair);}
.infos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  margin:64px auto 0;padding-top:36px;border-top:1px solid rgba(217,188,119,.28);
  text-align:left;
}
.infos dt{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--or-clair);margin-bottom:6px;}
.infos dd{margin:0;color:#D6CAB8;font-size:15px;}
.carte-maps{padding:0;line-height:0;}

/* --- 17. FOOTER ----------------------------------------------------------- */
.pied{background:var(--espresso);color:#C3B6A2;padding:72px 0 32px;font-size:15px;}
.pied__grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;}
.pied h2{font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--or-clair);font-family:var(--sans);font-weight:400;}
.pied p{margin:0 0 8px;}
.pied a{color:#C3B6A2;text-underline-offset:4px;}
.pied a:hover{color:var(--or-clair);}
.logo--pied{color:var(--or-clair);margin-bottom:14px;}
.pied__mention{font-size:13px;color:#9A8D7B;}
.pied__bas{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(217,188,119,.18);
  font-size:13px;color:#9A8D7B;
}
.pied__bas p{margin:0;}

/* --- 17bis. RYTHME DES SECTIONS ------------------------------------------
   Alternance champagne / blanc pour séparer les blocs sans ajouter de traits.
   Sections blanches : confiance, expérience, formules, avis. */
.avis{background:var(--surface);}
.miroir,.lieu,.pourquoi,.inclus,.faq{background:var(--fond);}

/* État de l'en-tête une fois le hero dépassé (classe posée par le JS). */
.entete--fixe{box-shadow:0 1px 0 var(--filet);}

/* --- 18. BARRE D'APPEL MOBILE --------------------------------------------- */
.barre-appel{display:none;}

/* --- 19. RESPONSIVE ------------------------------------------------------- */
@media(max-width:960px){
  .confiance__grille{grid-template-columns:repeat(2,1fr);gap:28px;}
  .miroir__grille,.inclus__grille{grid-template-columns:1fr;gap:40px;}
  .etapes,.colonnes,.tarifs,.galerie{grid-template-columns:repeat(2,1fr);}

  /* Trois formules dans une grille à deux colonnes : la troisième se
     retrouve seule sur la deuxième ligne, collée à gauche. On lui fait
     occuper toute la largeur et on la recentre, à la taille des autres.
     (Même correctif possible pour .colonnes en remplaçant .tarifs .tarif.) */
  .tarifs .tarif:last-child{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 12px);   /* 12px = la moitié du gap de 24px */
  }
  .infos{grid-template-columns:repeat(2,1fr);}
  .pied__grille{grid-template-columns:repeat(2,1fr);}
  .nav{display:none;}
}
@media(max-width:640px){
  body{font-size:16px;}
  .etapes,.colonnes,.tarifs,.galerie{grid-template-columns:1fr;}
  .infos{grid-template-columns:1fr;}
  .pied__grille{grid-template-columns:1fr;}
  .hero{min-height:auto;}
  .hero__contenu{padding-top:72px;padding-bottom:120px;}
  .media--bandeau{aspect-ratio:4/3;}
  .btn{display:block;text-align:center;}

  /* Le CTA est un appel : il reste accessible en permanence sur mobile. */
  .barre-appel{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:var(--marron);border-top:1px solid var(--or-filet);
  }
  .barre-appel a{
    display:block;text-align:center;padding:17px;color:var(--fond);text-decoration:none;
    font-size:14px;letter-spacing:3px;text-transform:uppercase;
  }
  body{padding-bottom:58px;}
}

/* --- 20. IMPRESSION ------------------------------------------------------- */
@media print{
  .entete,.barre-appel,.carte-maps,.video__play{display:none;}
  body{background:#fff;}
}