/* ============================================================
   KOOKIYA FLAVORS — SOCLE PARTAGÉ
   Tokens de la charte Marque Permanente v2.1 (§10), base
   typographique, header, menu, footer, composants communs.
   Chargé par toutes les pages, avant la feuille de la page.
   ============================================================ */

/* === POLICES — hébergées sur le site, aucun appel à un service tiers ===
   Sous-ensemble latin (couvre œ, €, guillemets, espaces insécables).
   Seules les graisses utilisées : Cormorant 400 droit et italique,
   Raleway 200 à 500 (un seul fichier variable), Pinyon Script 400.
   Licence SIL Open Font License. */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-400-italique.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Raleway';font-style:normal;font-weight:200 500;font-display:swap;
  src:url('/fonts/raleway-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/pinyon-script-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme: light;

  /* === COULEURS — MARQUE PERMANENTE === */
  --color-encre-tropicale:#1A2744;
  --color-ivoire-chaud:#FBF3E3;
  --color-safran:#E8922A;
  --color-turquoise-caraibes:#1B7A78;
  --color-terracotta-dore:#C96A3A;
  --color-or-solaire:#D4A84B;
  --color-jade-profond:#2D6B5E;

  /* === TOKENS SÉMANTIQUES === */
  --surface-base:var(--color-ivoire-chaud);
  --surface-deep:var(--color-encre-tropicale);
  --text-primary:var(--color-encre-tropicale);
  --text-on-deep:var(--color-ivoire-chaud);
  --accent-cta:var(--color-safran);
  --accent-prestige:var(--color-or-solaire);
  --accent-signature:var(--color-turquoise-caraibes);

  /* === TYPOGRAPHIE === */
  --font-display:'Cormorant Garamond','Garamond','Times New Roman',serif;
  --font-body:'Raleway','Helvetica Neue',Arial,sans-serif;
  --font-jewel:'Pinyon Script','Snell Roundhand',cursive;

  --text-display-xl:clamp(48px,7vw,96px);
  --text-display-lg:clamp(36px,5vw,64px);
  --text-display-md:clamp(28px,3.5vw,44px);
  --text-display-sm:clamp(22px,2.5vw,32px);
  --text-body-lg:clamp(17px,1.4vw,20px);
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-caps:11px;
  --text-jewel:clamp(20px,2vw,28px);

  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-relaxed:1.7;

  --tracking-display:-.01em;
  --tracking-caps:.2em;

  /* === ESPACEMENT === */
  --block-padding:clamp(80px,10vh,120px);
  --page-margin-mobile:24px;
  --page-margin-tablet:48px;
  --page-margin-desktop:clamp(64px,8vw,120px);

  /* === RADIUS, TRANSITIONS === */
  --radius-subtle:2px;
  --transition-fast:200ms ease-out;
  --transition-default:300ms ease-out;
  --transition-slow:400ms cubic-bezier(.16,1,.3,1);

  /* === DÉRIVÉS (hors charte, propres au web) === */
  --margin:var(--page-margin-desktop);
  --header-h:80px;
  --line:rgba(26,39,68,.14);
  --line-deep:rgba(251,243,227,.16);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1024px){:root{--margin:var(--page-margin-tablet)}}
@media (max-width:900px){:root{--header-h:64px}}
@media (max-width:767px){:root{--margin:var(--page-margin-mobile)}}

/* === BASE === */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-cta);outline-offset:3px}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
}

.eyebrow{
  font-size:var(--text-caps);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  font-weight:500;
}
.signature{font-family:var(--font-jewel);font-size:var(--text-jewel);line-height:1.2}

/* Lien d'évitement — navigation clavier */
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--surface-deep);color:var(--text-on-deep);
  padding:14px 24px;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;text-decoration:none;
}
.skip:focus{left:0}

/* === BOUTONS === */
.btn{
  display:inline-block;
  font-family:var(--font-body);font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.15em;
  padding:16px 32px;border-radius:var(--radius-subtle);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:opacity var(--transition-fast),background var(--transition-fast),color var(--transition-fast);
}
.btn--primary{background:var(--accent-cta);color:var(--color-ivoire-chaud)}
.btn--primary:hover{opacity:.85}
.btn--secondary{background:transparent;border-color:currentColor;color:inherit}
.btn--secondary:hover{background:var(--text-primary);color:var(--color-ivoire-chaud);border-color:var(--text-primary)}
.deep .btn--secondary:hover{background:var(--color-ivoire-chaud);color:var(--color-encre-tropicale);border-color:var(--color-ivoire-chaud)}

/* === LIEN TEXTE (charte §6.1) ===
   Typographie héritée du contexte, souligné fin décalé de 4 px.
   Pour les recours qui ne doivent jamais avoir le rang d'un bouton. */
.lien-texte{
  color:var(--text-primary);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
  transition:opacity var(--transition-fast);
}
.deep .lien-texte{color:var(--accent-cta)}
.lien-texte:hover{opacity:.7}

/* === HEADER === */
.header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--margin);
  background:rgba(251,243,227,.96);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{display:block;text-decoration:none}
.logo img{height:40px;width:auto;display:block}
.nav{display:flex;gap:32px;align-items:center}
.nav a.link{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-caps);text-decoration:none}
.nav a.link:hover{opacity:.7}
.nav .btn{padding:11px 22px}
@media (max-width:900px){.nav a.link{display:none}.nav{gap:12px}.nav .btn{padding:10px 16px}}

/* Bouton « Réserver / Rejoindre la lettre » du header : un seul libellé
   visible selon l'état (data-etat, posé par js/kookiya.js) et la largeur.
     ≥ 768 px   bouton normal de la charte
     370–767    bouton compact, « Rejoindre la lettre »
     < 370      bouton compact, « La lettre »
   « Réserver », court, s'affiche tel quel à toutes les largeurs.
   Les libellés masqués (display:none) ne sont pas lus. */
[data-reservation]{white-space:nowrap}
[data-reservation] .lib-reserver,
[data-reservation] .lib-lettre-court{display:none}
[data-reservation][data-etat="reserver"] .lib-reserver{display:inline}
[data-reservation][data-etat="reserver"] .lib-lettre-long{display:none}
@media (max-width:767px){
  .nav .btn[data-reservation]:not([data-etat="reserver"]){font-size:12px;letter-spacing:.1em;padding:10px 12px}
}
@media (max-width:369px){
  [data-reservation]:not([data-etat="reserver"]) .lib-lettre-long{display:none}
  [data-reservation]:not([data-etat="reserver"]) .lib-lettre-court{display:inline}
}

/* === BURGER + MENU PLEIN ÉCRAN === */
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;position:relative;color:var(--text-primary)}
.burger span{position:absolute;left:8px;right:8px;height:1px;background:currentColor;transition:transform var(--transition-default),top var(--transition-default)}
.burger span:first-child{top:16px}
.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.menu{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:49;
  background:var(--color-ivoire-chaud);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:24px;
}
.menu[hidden]{display:none}
.menu a:not(.btn){font-family:var(--font-display);font-size:var(--text-display-md);text-decoration:none;line-height:var(--leading-tight)}
.menu .btn{margin-top:16px}
@media (max-width:900px){.burger{display:block}}

/* === BLOCS === */
.block{padding-block:var(--block-padding);padding-inline:var(--margin)}
.deep{background:var(--surface-deep);color:var(--text-on-deep)}
.deep .eyebrow{color:var(--accent-prestige)}
/* Pages intérieures : le premier bloc passe sous le header fixe.
   Sans effet sur l'accueil, dont le premier enfant est la section film. */
main>.block:first-child{padding-top:calc(var(--block-padding) + var(--header-h))}

.head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:64px;align-items:end}
.head h2{grid-column:1/8;font-size:var(--text-display-lg)}
.head p{grid-column:8/13;font-weight:300;font-size:var(--text-body-lg);line-height:var(--leading-snug)}
.head .eyebrow{grid-column:1/-1;margin-bottom:-8px}
/* Lisibilité sur encre : le corps remonte en 400 */
.deep .head p{font-weight:400}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}.head h2,.head p,.head .eyebrow{grid-column:1}}

/* === FOOTER === */
.footer{padding:80px var(--margin) 40px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line-deep)}
.footer .eyebrow{color:var(--accent-prestige);margin-bottom:16px;display:block}
.footer a{text-decoration:none}
.footer a:hover{opacity:.7}
.footer .logo{display:inline-block;margin-bottom:24px}
.footer .logo img{height:80px}
.footer li{list-style:none;font-weight:300;font-size:15px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:12px;font-weight:200;letter-spacing:.04em}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.footer__grid{grid-template-columns:1fr}}

/* === APPARITIONS AU SCROLL ===
   Visible par défaut. js/kookiya.js ajoute « en-attente » aux seuls blocs
   encore sous la ligne de flottaison, au premier geste de défilement, puis
   la retire quand le bloc entre dans la fenêtre. Le masquage est instantané
   (transition:none), l'apparition seule est animée. */
.reveal{transition:opacity var(--transition-slow),transform var(--transition-slow)}
.reveal.en-attente{opacity:0;transform:translateY(16px);transition:none}

@media print{
  .reveal.en-attente{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .reveal.en-attente{opacity:1;transform:none}
}