/* ==========================================================================
   CHAOUI BOIS — La Matiere Vivante
   Design system : Editorial Luxury x Atelier
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{min-height:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--brass);color:var(--ink)}

/* --------------------------------------------------------------- 2. Tokens */
:root{
  /* Bois — palette derivee de la matiere */
  --ink:        #0C0906;
  --ink-2:      #14100B;
  --bark:       #1D1710;
  --umber:      #3A2A1C;
  --bronze:     #8C6239;
  --brass:      #C39A5F;
  --brass-lit:  #E3C08B;
  --sand:       #E0CBA8;
  --paper:      #EFE7DA;
  --paper-2:    #F7F1E7;
  --chalk:      #FDFBF6;

  /* Roles */
  --bg:            var(--ink);
  --fg:            #EDE4D6;
  --fg-dim:        #A79781;
  --fg-faint:      rgba(237,228,214,.42);
  --rule:          rgba(237,228,214,.13);
  --rule-strong:   rgba(237,228,214,.26);

  /* Typographie */
  --f-display: "Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --f-accent:  "Instrument Serif",Georgia,serif;
  --f-body:    "Manrope","Manrope Fallback","Segoe UI",system-ui,sans-serif;

  /* Echelle fluide */
  --t-hero:   clamp(2.5rem, min(11.4vw, 15.4svh), 11rem);
  --t-mega:   clamp(2.6rem, 8.6vw,  8.5rem);
  --t-h1:     clamp(2.1rem, min(5.8vw, 9.4svh), 5.2rem);
  --t-h2:     clamp(1.75rem,min(4.2vw, 6.6svh), 3.6rem);
  --t-h3:     clamp(1.3rem, 2.3vw,  2.05rem);
  --t-lead:   clamp(1.02rem,1.32vw, 1.32rem);
  --t-body:   clamp(.95rem, 1.02vw, 1.06rem);
  --t-small:  .82rem;
  --t-micro:  .655rem;

  /* Rythme spatial */
  --gutter:  clamp(1.15rem, 4.4vw, 4.5rem);
  --section: clamp(6.5rem, 13vw, 15rem);
  --maxw:    1560px;

  /* Courbes */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-soft:  cubic-bezier(.32,.72,0,1);
  --e-io:    cubic-bezier(.76,0,.24,1);

  --radius:  clamp(1.1rem, 1.8vw, 1.75rem);
}

/* ------------------------------------------------- 3. Fallback font metrics */
@font-face{
  font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman");
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:"Manrope Fallback";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:100%;ascent-override:100%;descent-override:26%;line-gap-override:0%;
}

/* ----------------------------------------------------------------- 4. Base */
body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:380;
  line-height:1.62;
  letter-spacing:-.005em;
  color:var(--fg);
  background:var(--bg);
  overflow-x:clip;
}
/* Verrou du défilement pendant le portail — sans casser la hauteur du document */
html.is-locked{overflow:hidden}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:340;
  line-height:.9;
  letter-spacing:-.032em;
  font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 144;
  text-wrap:pretty;
}
em,.i{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.012em}

p{text-wrap:pretty}

/* ------------------------------------------------------------ 5. Utilitaires */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section)}
.section--light{background:var(--paper);color:var(--ink)}
.section--paper{background:var(--paper-2);color:var(--ink)}
.section--light,.section--paper{
  --fg:var(--ink);--fg-dim:#6B5A45;--fg-faint:rgba(12,9,6,.42);
  --rule:rgba(12,9,6,.14);--rule-strong:rgba(12,9,6,.28);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--fg-dim);
}
.eyebrow::before{content:"";width:clamp(20px,3.4vw,52px);height:1px;background:currentColor;opacity:.55}
.eyebrow--plain::before{display:none}

.idx{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-weight:300;font-size:var(--t-small);letter-spacing:.12em;
  color:var(--fg-faint);font-feature-settings:"tnum" 1;
}

.lead{font-size:var(--t-lead);line-height:1.58;color:var(--fg-dim);max-width:46ch;font-weight:380}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--rule);
  margin-bottom:clamp(2.6rem,6vw,6rem);
}
.sec-head__l{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
@media (max-width:720px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:1.2rem}
}

/* ------------------------------------------------------- 6. Grain & vignette */
.grain{
  position:fixed;inset:-120px;z-index:400;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:var(--grain-src);background-size:200px 200px;
}
.vignette{
  position:fixed;inset:0;z-index:399;pointer-events:none;
  background:radial-gradient(122% 92% at 50% 42%,transparent 40%,rgba(0,0,0,.44) 100%);
  opacity:.8;transition:opacity 1s var(--e-out);
}
body[data-tone="light"] .vignette{opacity:.2}
body[data-tone="light"] .grain{mix-blend-mode:multiply;opacity:.075}

/* ------------------------------------------------------- 7. Texte : reveals */
.line-mask{display:block;overflow:hidden;padding-block:.2em;margin-block:-.2em}
.line-mask>span{display:block}
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.2em;margin-block:-.2em}
.word-mask>span{display:inline-block}

/* --------------------------------------------------- 8. Barre de defilement */
html{scrollbar-width:thin;scrollbar-color:var(--bronze) rgba(12,9,6,.55)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0A0704}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--bronze),var(--brass));
  border-radius:99px;border:3px solid #0A0704;
  transition:background .3s var(--e-out);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brass),var(--brass-lit))}
::-webkit-scrollbar-corner{background:#0A0704}

/* ------------------------------------------------------------- 9. Boutons */
.btn{
  --btn-bg:var(--brass);--btn-fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:.6rem .6rem .6rem 1.6rem;
  border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--t-small);font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  isolation:isolate;overflow:hidden;
  transition:transform .55s var(--e-soft),color .55s var(--e-soft);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--brass-lit);
  transform:translate3d(0,101%,0);transition:transform .68s var(--e-soft);
}
.btn:hover::after{transform:translate3d(0,0,0)}
.btn:active{transform:scale(.975)}
.btn__ico{
  width:2.3rem;height:2.3rem;border-radius:999px;flex:none;
  display:grid;place-items:center;background:rgba(12,9,6,.12);
  transition:transform .6s var(--e-soft),background-color .6s var(--e-soft);
}
.btn:hover .btn__ico{transform:translate3d(3px,-3px,0) scale(1.06);background:rgba(12,9,6,.2)}
.btn__ico svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.7;fill:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--ghost::after{background:var(--fg)}
.btn--ghost:hover{color:var(--bg)}
.btn--ghost .btn__ico{background:var(--rule)}
.btn--ghost:hover .btn__ico{background:rgba(12,9,6,.15)}

.ulink{position:relative;display:inline-block;padding-bottom:2px}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--e-soft);
}
.ulink:hover::after{transform:scaleX(1);transform-origin:left center}

/* --------------------------------------------- 10. Double-lisere (Doppelrand) */
.bezel{
  position:relative;padding:clamp(6px,.6vw,11px);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(195,154,95,.24),rgba(195,154,95,.05) 45%,rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(237,228,214,.1),0 42px 90px -50px rgba(0,0,0,.9);
}
.bezel__core{
  position:relative;overflow:hidden;
  border-radius:calc(var(--radius) - clamp(6px,.6vw,11px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  background:var(--bark);
}
.section--light .bezel,.section--paper .bezel{
  background:linear-gradient(150deg,rgba(140,98,57,.32),rgba(140,98,57,.08) 50%,rgba(255,255,255,.6));
  box-shadow:inset 0 0 0 1px rgba(12,9,6,.08),0 46px 90px -58px rgba(58,42,28,.7);
}
.section--light .bezel__core,.section--paper .bezel__core{background:var(--chalk)}

.cover{width:100%;height:100%;object-fit:cover;display:block}
.media{position:relative;overflow:hidden}
.media img{will-change:transform}

/* --------------------------------------------------------------- 11. Focus */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{
  position:fixed;top:-120px;left:1rem;z-index:600;
  background:var(--brass);color:var(--ink);padding:.7rem 1.2rem;border-radius:999px;
  font-size:var(--t-small);font-weight:700;transition:top .3s var(--e-out);
}
.skip:focus{top:1rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}