/* ==========================================================================
   ESPACE MABIN — 00 BASE
   Jetons de design, reset, typographie, boutons, utilitaires.
   Identite MABIN (vert / or / creme) + rigueur editoriale facon palace.
   ========================================================================== */

:root{
  /* --- Surfaces --- */
  --bg:#F6F5EC;
  --surface:#FFFFFF;
  --surface-2:#EFF1E3;
  --surface-3:#E4E8D4;

  /* --- Encres --- */
  --ink:#16281A;
  --ink-2:#2C4130;
  --muted:#5E7057;
  --muted-2:#7E8C77;

  /* --- Lignes --- */
  --line:rgba(22,40,26,.14);
  --line-soft:rgba(22,40,26,.08);
  --line-strong:rgba(22,40,26,.26);

  /* --- Couleurs de marque --- */
  --green:#4F9D2F;
  --green-deep:#357021;
  --forest:#16321B;
  --forest-2:#0F2413;
  /* --gold sert aussi de couleur de TEXTE (surtitres 11 px, prix, liens).
     Assombri a #8A6A22 pour tenir le 4,5:1 WCAG AA sur creme et en blanc sur bouton.
     --gold-2, plus clair, est reserve aux fonds sombres (forest). */
  --gold:#8A6A22;
  --gold-2:#C89B4A;
  --gold-soft:rgba(138,106,34,.13);
  --on-gold:#FFFFFF;

  /* --- Boutons ---
     Tous les boutons du site sont verts. La teinte est le vert profond
     #357021 et non le vert de marque #4F9D2F : ce dernier ne donne que
     3,4:1 avec du texte blanc, sous le minimum WCAG AA de 4,5:1.
     Ici : 6,0:1 sur le texte, 5,5:1 contre le fond creme de la page. */
  --btn:#357021;
  --on-btn:#FFFFFF;
  --btn-hover:#16321B;
  --btn-soft:rgba(53,112,33,.12);

  /* --- Etats --- */
  --danger:#B4452F;
  --ok:#3F8A3F;
  --warn:#C08A24;

  /* --- Ombres --- */
  --shadow-sm:0 2px 10px -4px rgba(22,50,27,.18);
  --shadow:0 20px 48px -28px rgba(22,50,27,.42);
  --shadow-lg:0 40px 90px -40px rgba(12,30,16,.55);

  /* --- Typographie --- */
  /* Une seule famille sur tout le site : Montserrat.
     --display reste distinct de --sans pour garder un point d'entree unique
     si une police de titrage devait revenir un jour. */
  --sans:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --display:var(--sans);

  /* --- Metrique --- */
  --maxw:1180px;
  --gutter:clamp(18px,4vw,40px);
  --radius:2px;
  --radius-lg:3px;
  --nav-h:70px;
  --topbar-h:36px;

  --hero-ink:#F6F5EC;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:light dark;
}

/* --------------------------------------------------------------------------
   THEME SOMBRE
   Trois couches, dans cet ordre :
     1. la preference du systeme d'exploitation ;
     2. le choix explicite du visiteur (bouton ◐), qui doit primer
        DANS LES DEUX SENS — d'ou le bloc [data-theme="light"] qui suit.
   Les composants ne stylent jamais a l'interieur du media query : ils
   passent par les jetons, qui sont les seuls redefinis ici.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#0E1A11;
  --surface:#152618;
  --surface-2:#1B2F1F;
  --surface-3:#233C28;
  --ink:#EAF2E3;
  --ink-2:#D3E2CB;
  --muted:#9FB397;
  --muted-2:#829979;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.26);
  --green:#6FBF3F;
  --green-deep:#4F9D2F;
  --gold:#D2A257;
  --gold-2:#E0B872;
  --gold-soft:rgba(210,162,87,.16);
  /* Sur fond sombre le dore s'eclaircit : le texte du bouton passe en vert fonce. */
  --on-gold:#16321B;

  /* Sur fond sombre le rapport s'inverse : un vert profond disparaitrait
     dans la page. On eclaircit le bouton et on fonce son texte (6,1:1). */
  --btn:#6FBF3F;
  --on-btn:#16321B;
  --btn-hover:#8FD45F;
  --btn-soft:rgba(111,191,63,.16);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.6);
  --shadow:0 20px 48px -28px rgba(0,0,0,.75);
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"]{
  --bg:#0E1A11;
  --surface:#152618;
  --surface-2:#1B2F1F;
  --surface-3:#233C28;
  --ink:#EAF2E3;
  --ink-2:#D3E2CB;
  --muted:#9FB397;
  --muted-2:#829979;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.26);
  --green:#6FBF3F;
  --green-deep:#4F9D2F;
  --gold:#D2A257;
  --gold-2:#E0B872;
  --gold-soft:rgba(210,162,87,.16);
  /* Sur fond sombre le dore s'eclaircit : le texte du bouton passe en vert fonce. */
  --on-gold:#16321B;

  /* Sur fond sombre le rapport s'inverse : un vert profond disparaitrait
     dans la page. On eclaircit le bouton et on fonce son texte (6,1:1). */
  --btn:#6FBF3F;
  --on-btn:#16321B;
  --btn-hover:#8FD45F;
  --btn-soft:rgba(111,191,63,.16);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.6);
  --shadow:0 20px 48px -28px rgba(0,0,0,.75);
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85);
}

/* Le visiteur a demande le clair alors que son systeme est en sombre :
   on restaure explicitement les jetons clairs. */
:root[data-theme="light"]{
  --bg:#F6F5EC;
  --surface:#FFFFFF;
  --surface-2:#EFF1E3;
  --surface-3:#E4E8D4;
  --ink:#16281A;
  --ink-2:#2C4130;
  --muted:#5E7057;
  --muted-2:#7E8C77;
  --line:rgba(22,40,26,.14);
  --line-soft:rgba(22,40,26,.08);
  --line-strong:rgba(22,40,26,.26);
  --green:#4F9D2F;
  --green-deep:#357021;
  --gold:#8A6A22;
  --gold-2:#C89B4A;
  --gold-soft:rgba(138,106,34,.13);
  --on-gold:#FFFFFF;

  /* --- Boutons ---
     Tous les boutons du site sont verts. La teinte est le vert profond
     #357021 et non le vert de marque #4F9D2F : ce dernier ne donne que
     3,4:1 avec du texte blanc, sous le minimum WCAG AA de 4,5:1.
     Ici : 6,0:1 sur le texte, 5,5:1 contre le fond creme de la page. */
  --btn:#357021;
  --on-btn:#FFFFFF;
  --btn-hover:#16321B;
  --btn-soft:rgba(53,112,33,.12);
  --shadow-sm:0 2px 10px -4px rgba(22,50,27,.18);
  --shadow:0 20px 48px -28px rgba(22,50,27,.42);
  --shadow-lg:0 40px 90px -40px rgba(12,30,16,.55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  /* Racine de toute l'echelle (tout le site est en rem).
     15 px : ne pas descendre plus bas. Baisser cette valeur rapetisse
     AUSSI le texte courant, les mentions legales et les libelles de
     formulaire, qui tombent alors sous le seuil de confort de lecture.
     Quand des titres paraissent trop gros, ce sont les titres qu'il faut
     reduire — voir h1/h2 plus bas — pas la racine. */
  font-size:15px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,picture,video,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line)}
::selection{background:var(--gold);color:var(--on-gold)}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  /* Montserrat est une lineale : en 400 les grands titres paraissent
     fades, mais en 600 ils paraissent LOURDS — et un titre lourd se lit
     comme un titre gros. 500 garde la presence sans l'effet de masse.
     Les petits intertitres (h3, h4) restent en 600, ou la graisse aide. */
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.022em;
  margin:0;
  color:var(--ink);
}
h3,h4{letter-spacing:-.008em;font-weight:600}
h1{font-size:clamp(1.45rem,2.35vw,2rem)}
h2{font-size:clamp(1.12rem,1.55vw,1.38rem)}
h3{font-size:clamp(.98rem,1.1vw,1.08rem)}
h4{font-size:.92rem}
p{margin:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
}
.eyebrow.on-dark{color:var(--gold-2)}
.lead{
  color:var(--muted);
  font-size:.94rem;
  max-width:60ch;
  margin-top:14px;
}
.sec-head{margin-bottom:clamp(28px,4vw,44px);max-width:700px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* Filet decoratif sous les titres de section */
.rule{
  width:52px;height:1px;background:var(--gold);
  margin:20px 0 0;
}
.sec-head.center .rule{margin-left:auto;margin-right:auto}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 26px;
  border-radius:var(--radius);
  font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .18s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
.btn-solid{background:var(--forest);color:#fff;border-color:var(--forest)}
.btn-solid:hover{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
/* Bouton « Voir le film » du hero : sans cadre, pour ne pas concurrencer les
   deux boutons de reservation a cote. Le rond de lecture porte l'affordance. */
.btn-film{background:transparent;color:#fff;border-color:transparent;padding-left:8px}
.btn-film:hover{color:var(--gold-2)}
.btn-film small{font-size:.62rem;opacity:.62;letter-spacing:.1em;text-transform:none}
.film-rond{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-size:.66rem;
  transition:background-color .28s var(--ease),border-color .28s var(--ease);
}
.btn-film:hover .film-rond{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}

.btn-sm{padding:9px 17px;font-size:.62rem}
.btn-lg{padding:15px 34px}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}

/* Lien discret au fil d'un paragraphe (credits, mentions) */
.lien-inline{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  font:inherit;transition:color .2s;
}
.lien-inline:hover{color:var(--gold)}

/* Lien flechette facon palace */
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--line-strong);
  transition:color .25s,border-color .25s,gap .25s;
}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--gold);border-color:var(--gold);gap:13px}
.link-arrow.on-dark{color:#fff;border-color:rgba(255,255,255,.4)}
.link-arrow.on-dark:hover{color:var(--gold-2);border-color:var(--gold-2)}

/* ---------- Etiquettes ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  background:var(--surface);
}
.chip-gold{background:var(--gold-soft);border-color:transparent;color:var(--gold)}
.chip-green{background:rgba(79,157,47,.12);border-color:transparent;color:var(--green-deep)}
.chip-solid{background:var(--forest);border-color:var(--forest);color:#fff}

/* ---------- Formulaires ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field > label{
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:11px 13px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.88rem;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)}
.field-err{
  font-size:.8rem;color:var(--danger);min-height:0;
  display:none;
}
.field.has-error .field-err{display:block}
.field-hint{font-size:.8rem;color:var(--muted-2)}

/* Focus visible global */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Utilitaires ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gutter)*2,1480px);margin-inline:auto}
section{padding:clamp(48px,6vw,86px) 0}
section.tight{padding:clamp(36px,4vw,58px) 0}
.on-forest{background:var(--forest);color:var(--hero-ink)}
.on-forest h1,.on-forest h2,.on-forest h3{color:var(--hero-ink)}
.on-forest .lead,.on-forest p{color:rgba(246,245,236,.78)}
.on-surface{background:var(--surface)}
.on-surface-2{background:var(--surface-2)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hidden{display:none!important}
.text-center{text-align:center}
.mt-0{margin-top:0}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Impression ---------- */
@media print{
  .topbar,.nav,.hero,.booking-bar,.fab-stack,.cookie,.newsletter,#lightbox{display:none!important}
  body{background:#fff;color:#000}
  section{padding:18px 0;break-inside:avoid}
}