/* Little Suya : styles communs à toutes les pages */
:root {
  --noir:#000; --nuit:#121212; --gris:#1c1c1c; --blanc:#f5f5f5; --papier:#eae6e1; --encre:#111;
  --or:#d9a73a;                 /* la seule couleur d'accent : le moutarde de la façade */
  --g:clamp(16px,3vw,44px);     /* gouttière */
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--noir); color:var(--blanc); font-family:"Archivo", Helvetica, Arial, sans-serif; font-stretch:112%; font-size:19px; line-height:1.5; letter-spacing:-.01em; }
a { color:inherit; }
img { display:block; max-width:100%; }
h1, h2, h3, .titre { font-stretch:62%; font-weight:850; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; margin:0; }
.souligne { display:inline-block; padding-bottom:.12em; border-bottom:2px solid currentColor; }
.lien { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.lien:hover, .souligne:hover { color:var(--or); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saut { position:absolute; left:16px; top:-80px; z-index:60; background:var(--blanc); color:var(--encre); padding:10px 16px; font-weight:800; text-transform:uppercase; font-size:14px; }
.saut:focus { top:12px; }

/* bouton : utilisé seulement pour réserver */
.btn { display:inline-block; background:var(--or); color:var(--encre); padding:12px 20px 11px; font-stretch:62%; font-weight:850; font-size:20px; text-transform:uppercase; text-decoration:none; border:2px solid var(--or); line-height:1; transition:background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background:transparent; color:var(--or); }

/* bandeau du haut : transparent sur l'ouverture, noir dès qu'on descend */
.haut { position:fixed; inset:0 0 auto 0; z-index:40; height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 var(--g); transition:background .35s; }
.haut.plein { background:var(--noir); }
.logo { font-stretch:62%; font-weight:900; font-size:34px; text-transform:uppercase; text-decoration:none; line-height:1; letter-spacing:-.02em; }
.haut nav { display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); }
.haut nav a:not(.btn) { font-stretch:62%; font-weight:850; font-size:26px; text-transform:uppercase; text-decoration:none; line-height:1; }
.haut nav a:not(.btn):hover, .haut nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.burger { display:none; background:none; border:0; color:inherit; padding:10px 0 10px 10px; cursor:pointer; }
.burger span { display:block; width:30px; height:1.5px; background:currentColor; margin:7px 0; }

/* menu plein écran du téléphone */
.rideau { position:fixed; inset:0; z-index:50; background:var(--blanc); color:var(--encre); display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.rideau.ouvert { display:flex; }
.rideau .logo { position:absolute; top:24px; left:var(--g); font-size:30px; }
.rideau .fermer { position:absolute; top:16px; right:var(--g); background:none; border:0; font-size:40px; font-weight:300; cursor:pointer; color:inherit; }
.rideau a:not(.logo):not(.btn) { font-stretch:62%; font-weight:850; font-size:46px; text-transform:uppercase; text-decoration:none; line-height:1; }
.rideau .btn { margin-top:22px; }

/* pied de page */
.pied { background:var(--nuit); padding:56px var(--g) 26px; text-align:center; }
.pied .suivre { font-size:16px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 10px; }
.pied .insta { display:inline-block; width:24px; height:24px; }
.pied .logo { display:block; font-size:30px; margin:12px 0 36px; }
.pied .infos { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto; font-size:15px; line-height:1.6; }
.pied .infos h2 { font-size:20px; margin-bottom:6px; }
.pied .legal { margin:38px auto 0; max-width:1100px; padding-top:18px; border-top:1px solid rgba(245,245,245,.12); font-size:12px; opacity:.6; line-height:1.6; }

@media (max-width:900px) {
  body { font-size:17px; }
  .haut { height:76px; }
  .haut nav a:not(.btn) { display:none; }
  .haut .btn { font-size:17px; padding:10px 14px 9px; }
  .burger { display:block; }
  .logo { font-size:28px; }
  .pied .infos { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
