/* ===========================================================================
   Ciao Kombucha — Concept A « Le casier »
   Tokens et systeme global. Tout vient de .claude/creative/DESIGN.md.
   =========================================================================== */

@font-face{font-family:Salmond;src:url("../assets/fonts/salmond-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Salmond;src:url("../assets/fonts/salmond-bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:BlauerNue;src:url("../assets/fonts/blauernue-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Elgraine;src:url("../assets/fonts/elgraine-regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* roles — DESIGN.md §Palette */
  --fond:#fcf6ec;
  --encre:#2f2521;
  --encre-60:rgba(47,37,33,.60);
  --encre-38:rgba(47,37,33,.38);
  --encre-12:rgba(47,37,33,.12);
  --creux:rgba(47,37,33,.07);

  /* saveur active — reecrites par JS, jamais en dur dans le HTML */
  --saveur-1:var(--encre);
  --saveur-2:var(--encre);
  --saveur-3:var(--fond);

  /* echelle : 140 / 88 / 56 / 34 / 21 / 17 / 15 / 13. Rien entre 88 et 140. */
  --t-compteur:clamp(88px,11vw,140px);
  --t-1:clamp(52px,7.2vw,88px);
  --t-2:clamp(38px,4.4vw,56px);
  --t-3:clamp(27px,2.6vw,34px);
  --t-4:21px; --t-5:17px; --t-6:15px; --t-7:13px;

  --titre:Salmond,"Iowan Old Style",Georgia,serif;
  --texte:BlauerNue,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --chiffre:Elgraine,Georgia,"Times New Roman",serif;

  --marge:64px; --gouttiere:24px; --max:1240px;
  --rayon:14px;
  --geste:cubic-bezier(.34,1.24,.44,1);
}
@media (max-width:900px){:root{--marge:40px}}
@media (max-width:640px){:root{--marge:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--texte);font-size:var(--t-5);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:700;letter-spacing:-.03em;line-height:.86;margin:0}
h1{font-size:var(--t-1)} h2{font-size:var(--t-2)} h3{font-size:var(--t-3)}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px}

.enveloppe{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.pile>*+*{margin-top:var(--e,24px)}
.etiquette{
  font-size:var(--t-7);letter-spacing:.10em;text-transform:uppercase;
  color:var(--encre-60);font-family:var(--texte);margin:0 0 14px;
}
.chiffre{font-family:var(--chiffre);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- lumiere continue : gobo sur les surfaces creme ---------------------- */
.lumiere{position:relative;isolation:isolate}
.lumiere>video.gobo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;opacity:.08;pointer-events:none;z-index:0;
}
.lumiere>*:not(video){position:relative;z-index:1}

/* --- en-tete ------------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:60;background:var(--fond);
  border-bottom:1px solid var(--encre-12);
}
.entete__in{
  max-width:var(--max);margin-inline:auto;padding:14px var(--marge);
  display:flex;align-items:center;gap:28px;
}
.logo{
  font-family:var(--titre);font-weight:700;font-size:26px;letter-spacing:-.04em;
  text-decoration:none;line-height:1;
}
.nav{display:flex;gap:22px;margin-left:auto;font-size:var(--t-6)}
@media (max-width:640px){
  .entete__in{gap:14px}
  .nav{gap:14px;font-size:var(--t-7);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--encre)}

/* --- boutons ------------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border:0;border-radius:999px;
  background:var(--encre);color:var(--fond);
  font-size:var(--t-6);letter-spacing:.02em;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,opacity .15s ease;
}
.bouton:hover{transform:translateY(-1px)}
.bouton:active{transform:translateY(0)}
.bouton[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.bouton--vide{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}

/* --- bloc de mention officielle ------------------------------------------ */
.mention{
  border-left:2px solid var(--encre-12);padding:2px 0 2px 20px;
  font-size:var(--t-5);color:var(--encre);max-width:62ch;
}
.mention cite{display:block;margin-top:8px;font-style:normal;font-size:var(--t-7);color:var(--encre-60)}

/* --- pied ---------------------------------------------------------------- */
.pied{
  border-top:1px solid var(--encre-12);margin-top:120px;
  padding:56px 0 80px;font-size:var(--t-6);color:var(--encre-60);
}
.pied h3{font-size:var(--t-4);color:var(--encre);margin-bottom:12px}
.pied__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
@media (max-width:900px){.pied__grille{grid-template-columns:1fr;gap:36px}}
.pied a{color:var(--encre)}

/* --- accessibilite mouvement --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .lumiere>video.gobo{display:none}
  .lumiere{background-image:var(--gobo-poster)}
}

/* Interactions tactiles : défilement conservé, zoom et sélection désactivés. */
html,body{touch-action:pan-x pan-y}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none}
input,textarea,[contenteditable="true"]{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
  font-size:16px;
}