/* =========================================================================
   STYLES.CSS — Système partagé par index.html, contact.html et
   mentions-legales.html.

   Ce fichier centralise tout ce qui DOIT rester identique sur les 3 pages :
   couleurs, typographie de base, composant bouton, menu mobile, footer.
   Objectif : éviter qu'une correction faite sur une page ne se propage pas
   aux autres (c'est exactement ce qui s'est produit avant l'extraction de
   ce fichier — cf. audit de session, écart de cohérence CTA/eyebrow).

   Ce qui reste volontairement HORS de ce fichier (propre à chaque page,
   dans le <style> local) :
   - La barre de nav elle-même (nav, .logo, .nav-links) : sur index.html
     elle est transparente sur l'image hero puis opaque au scroll ; sur
     contact.html / mentions-legales.html elle est opaque en permanence
     (pas de hero). C'est une différence intentionnelle, pas un oubli.
   - Tout le contenu spécifique à chaque page (hero, sections, formulaire,
     mentions légales…).
   ========================================================================= */

:root{
  --cream:#F5F1EC;
  --cream-deep:#EEE7DD;
  --ink:#464646;
  --ink-soft:#5A5A5A;
  --grey-cool:#5B6169;
  --terracotta:#C47A5A;
  --terracotta-deep:#A85F42;
  --terracotta-darker:#8E5038;
  --terracotta-text:#94543A;
  --white:#FFFFFF;

  /* ---- Design system : rythme vertical & largeurs ----
     Toutes les sections de contenu partagent ce même rythme.
     Exceptions volontaires : hero (plein écran), breather (bande photo
     pleine largeur), cta (bandeau de conversion volontairement plus
     compact). Chaque exception est commentée à l'endroit où elle est
     utilisée dans le <style> local de la page. */
  --section-y: 8rem;
  --section-y-mobile: 5rem;
  --radius-card: 8px;

  /* ---- Échelle typographique : largeurs de contenu ----
     Référence commune aux 3 pages ; chaque page n'utilise que le
     sous-ensemble qui la concerne. */
  --w-260: 260px;
  --w-340: 340px;
  --w-400: 400px;
  --w-560: 560px;
  --w-640: 640px;
  --w-720: 720px;
  --w-760: 760px;
  --w-780: 780px;
  --w-820: 820px;
  --w-900: 900px;

  /* ---- Échelle typographique : interlignes ---- */
  --lh-100: 1;
  --lh-112: 1.12;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-155: 1.55;
  --lh-160: 1.6;
  --lh-165: 1.65;
  --lh-170: 1.7;
  --lh-190: 1.9;

  /* ---- Taille de titre de section unifiée (index.html) ---- */
  --h2-section: clamp(1.8rem, 3.1vw, 2.6rem);
}

/* ---------- RESET & BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Lato',sans-serif;
  font-weight:300;
  line-height:var(--lh-170);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  text-wrap:pretty;
}
h1,h2,h3,.serif{font-family:'Playfair Display',serif; font-weight:500; color:var(--ink);}
.handwritten{font-family:'Caveat',cursive;font-weight:400;color:var(--terracotta-deep);font-size:1.7em;margin-right:0.2rem;display:inline-block;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 6vw;}

/* Repère visuel court (2 à 4 mots) : couleur --terracotta-text (5,2:1 sur
   crème, 4,77:1 sur crème foncé — conforme AA). Un audit précédent avait
   choisi --terracotta clair pour l'identité de marque, mais ce clair est
   sous 4,5:1 sur tous les fonds du site ; --terracotta-text garde la même
   famille chromatique en conforme AA. Voir audit — "Eyebrows,
   bug de cohérence". */
.eyebrow{
  font-family:'Lato',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  color:var(--terracotta-text);
  font-weight:700;
}

/* ---------- BOUTONS ----------
   .btn (plein) = action principale/conversion (réserver, choisir, envoyer).
   .btn-outline = action secondaire, engagement plus léger.
   Toujours en --terracotta-deep (contraste 4,79:1, conforme AA) ; le hover
   utilise --terracotta-darker (6,26:1). Ne jamais utiliser --terracotta
   clair en fond de bouton : c'est ce qui a causé l'écart corrigé cette
   session sur contact.html / mentions-legales.html. */
.btn{
  display:inline-block;background:var(--terracotta-deep);color:var(--white);
  padding:0.55rem 2.6rem;border-radius:2px;font-size:0.85rem;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:700;transition:background .3s ease, transform .3s ease;
  border:1px solid var(--terracotta-deep);line-height:var(--lh-100);
  font-family:'Lato',sans-serif;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--terracotta-darker);border-color:var(--terracotta-darker);transform:translateY(-2px);}
.btn:disabled{opacity:0.6;cursor:default;transform:none;}
.btn-natural-case{text-transform:none;letter-spacing:0.01em;font-size:0.78rem;}
.btn-compact{padding:0.55rem 1.3rem;letter-spacing:0.04em;}
.btn-outline{background:transparent;border:1px solid var(--grey-cool);color:var(--grey-cool);}
.btn-outline:hover{background:var(--grey-cool);color:var(--cream);}
@media(min-width:901px){
  .btn{padding:0.65rem 3.1rem;font-size:0.92rem;}
  .btn-natural-case{font-size:0.88rem;}
  .btn-compact{padding:0.65rem 1.8rem;white-space:nowrap;}
}

/* ---------- CTA DE NAV (pilules) ----------
   Même famille que .btn : action/profondeur, toujours en terracotta-deep.
   La barre de nav qui les contient reste page-spécifique (transparente sur
   hero vs opaque), mais ces pilules doivent avoir la même couleur, la même
   casse et le même hover partout. */
.nav-cta{
  background:var(--terracotta-deep); border:1px solid var(--terracotta-deep); color:var(--white)!important;
  padding:0.55rem 1.3rem; border-radius:2px; font-size:0.82rem!important;
  letter-spacing:0.01em; text-transform:none; font-weight:700;
  transition:background .3s ease, transform .3s ease, opacity .35s ease;
  line-height:var(--lh-100); white-space:nowrap;
}
.nav-cta:hover{background:var(--terracotta-darker);border-color:var(--terracotta-darker);color:var(--white)!important;transform:translateY(-2px);}

.nav-cta-mobile{
  display:none;background:var(--terracotta-deep);color:var(--white)!important;
  padding:0.45rem 1.1rem;border-radius:2px;font-size:0.74rem;letter-spacing:0.01em;
  text-transform:none;font-weight:700;line-height:var(--lh-100);margin-right:0.7rem;
  transition:opacity .35s ease,background .3s ease;white-space:nowrap;
}
.nav-cta-mobile:hover{background:var(--terracotta-darker);}
@media(max-width:1160px){
  .nav-links{display:none;}
  .nav-cta-mobile{display:inline-block;}
}

/* ---------- MENU MOBILE (burger, overlay, liens, CTA) ----------
   Identique sur les 3 pages. Seule la couleur du burger (.nav-toggle span)
   reste page-spécifique : blanc sur le hero transparent d'index.html
   (jusqu'au scroll), sombre sur les pages sans hero. */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;
  padding:0;z-index:1001;position:relative;flex-shrink:0;
}
.nav-toggle span{
  display:block;height:2px;width:26px;border-radius:1px;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:0;background:var(--cream);z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.mobile-menu.open{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear 0s;
}
.mobile-menu-link{
  font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--ink);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.mobile-menu.open .mobile-menu-link{opacity:1;transform:translateY(0);}
.mobile-menu.open .mobile-menu-link:nth-child(1){transition-delay:.08s;}
.mobile-menu.open .mobile-menu-link:nth-child(2){transition-delay:.14s;}
.mobile-menu.open .mobile-menu-link:nth-child(3){transition-delay:.2s;}
.mobile-menu.open .mobile-menu-link:nth-child(4){transition-delay:.26s;}
.mobile-menu.open .mobile-menu-link:nth-child(5){transition-delay:.32s;}
.mobile-menu-cta{
  margin-top:0.6rem;padding:0.55rem 2.2rem;background:var(--terracotta-deep);color:var(--white);
  border:1px solid var(--terracotta-deep);border-radius:2px;font-size:0.92rem;letter-spacing:0.01em;text-transform:none;font-weight:700;line-height:var(--lh-100);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease .38s, transform .4s ease .38s, background .3s ease, border-color .3s ease;
}
.mobile-menu.open .mobile-menu-cta{opacity:1;transform:translateY(0);}
.mobile-menu-cta:hover{background:var(--terracotta-darker);border-color:var(--terracotta-darker);}
body.menu-open{overflow:hidden;}

@media(max-width:1160px){
  .nav-toggle{display:flex;}
  .logo{font-size:1.9rem;min-height:44px;}
}
@media(min-width:1161px){
  .mobile-menu{display:none;}
}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(245,241,236,0.65);padding:3rem 0;}
.foot-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;}
footer .logo{color:var(--cream);font-size:1.15rem;}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2rem;font-size:0.85rem;}
.foot-links a:hover{color:var(--cream);}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:rgba(245,241,236,0.65);transition:color .3s ease,transform .3s ease;}
.foot-social:hover{color:var(--cream);transform:translateY(-1px);}
.foot-social svg{width:100%;height:100%;}
.foot-fine{font-size:0.85rem;margin-top:1.5rem;color:rgba(245,241,236,0.68);text-align:center;}
@media(max-width:600px){
  .foot-links{gap:0.9rem 1.3rem;font-size:0.82rem;}
}