/* ══════════════════════════════════════════════════════════════════════════
   ATELIER MANUEL — DESIGN SYSTEM
   Single source of truth for typography, color, spacing, and components.
   Tweak the :root tokens below to retune the whole site.
════════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root{
  /* Color */
  --bg:            #ffffff;
  --fg:            #000000;
  --fg-90:         rgba(0,0,0,.92);
  --fg-70:         rgba(0,0,0,.72);
  --fg-50:         rgba(0,0,0,.5);
  --fg-35:         rgba(0,0,0,.35);
  --fg-15:         rgba(0,0,0,.15);
  --fg-10:         rgba(0,0,0,.10);
  --line:          rgba(0,0,0,.12);
  --line-soft:     rgba(0,0,0,.08);
  --surface:       #f2f2f0;
  --inverse-bg:    #000000;
  --inverse-fg:    #ffffff;
  --inverse-mute:  rgba(255,255,255,.45);
  --inverse-line:  rgba(255,255,255,.12);

  /* Typography */
  --font-sans:  'Arial Narrow', 'Archivo Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono:  'Courier New', ui-monospace, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Fluid type scale — min 360px / max 1600px */
  --step--1:  clamp(11px, 0.7vw + 0.4rem, 13px);   /* captions */
  --step-0:   clamp(14px, 0.45vw + 0.75rem, 17px); /* body */
  --step-1:   clamp(17px, 0.7vw + 0.85rem, 22px);  /* lead small */
  --step-2:   clamp(22px, 1.1vw + 1rem, 32px);     /* h4 */
  --step-3:   clamp(28px, 2vw + 1.1rem, 44px);     /* h3 */
  --step-4:   clamp(40px, 4vw + 1rem, 72px);       /* h2 */
  --step-5:   clamp(52px, 10vw + 1rem, 180px);     /* h1 / display */
  --step-6:   clamp(68px, 14vw + 1rem, 240px);     /* mega */

  --lh-tight:  0.92;
  --lh-snug:   1.05;
  --lh-body:   1.75;
  --lh-meta:   1.5;
  --ls-label:  .25em;
  --ls-brand:  .4em;
  --ls-title:  -.02em;

  /* Spacing (fluid) */
  --s-1:  clamp(6px,   0.4vw + 4px,  10px);
  --s-2:  clamp(12px,  0.8vw + 8px,  20px);
  --s-3:  clamp(20px,  1.4vw + 10px, 32px);
  --s-4:  clamp(32px,  2.2vw + 14px, 56px);
  --s-5:  clamp(56px,  4vw + 18px,   96px);
  --s-6:  clamp(80px,  8vw + 20px,   160px);
  --s-7:  clamp(100px, 12vw + 20px,  220px);

  /* Layout */
  --gutter:  clamp(24px, 4vw, 56px);
  --max-w:   1600px;

  /* Motion */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --dur-fast:    .25s;
  --dur:         .55s;
  --dur-slow:    1s;
}

/* ── 2. RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-weight:var(--fw-light);
  font-size:var(--step-0);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg,video{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;}
::selection{background:var(--fg);color:var(--bg);}

/* ── 3. TYPOGRAPHY UTILITIES ─────────────────────────────────────────────── */
.serif     {font-family:var(--font-serif);font-weight:var(--fw-light);}
.serif-it  {font-family:var(--font-serif);font-weight:var(--fw-light);font-style:italic;}
.mono      {font-family:var(--font-mono);}

.display   {font-family:var(--font-serif);font-weight:var(--fw-light);font-size:var(--step-5);line-height:var(--lh-tight);letter-spacing:var(--ls-title);}
.h1        {font-family:var(--font-serif);font-weight:var(--fw-light);font-size:var(--step-4);line-height:var(--lh-snug);letter-spacing:var(--ls-title);}
.h2        {font-family:var(--font-serif);font-weight:var(--fw-light);font-size:var(--step-3);line-height:1.1;letter-spacing:-.015em;}
.h3        {font-family:var(--font-serif);font-weight:var(--fw-light);font-size:var(--step-2);line-height:1.2;letter-spacing:-.01em;}
.lead      {font-family:var(--font-serif);font-weight:var(--fw-light);font-style:italic;font-size:var(--step-2);line-height:1.25;letter-spacing:-.01em;}
.body      {font-size:var(--step-0);line-height:var(--lh-body);color:var(--fg-70);}
.meta      {font-size:var(--step--1);line-height:var(--lh-meta);color:var(--fg-70);}

.label     {font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-regular);color:var(--fg);}
.label-mute{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-regular);color:var(--fg-35);}

.it{font-style:italic;font-weight:var(--fw-light);}

/* ── 4. LAYOUT ──────────────────────────────────────────────────────────── */
.wrap      {max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);}
.section   {padding:var(--s-6) var(--gutter);}
.section-t {padding-top:var(--s-6);}
.section-b {padding-bottom:var(--s-6);}

.grid      {display:grid;gap:var(--s-4);}
.grid-2    {display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
.grid-3    {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);}
.grid-4    {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);}
@media(max-width:860px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}

.rule      {height:1px;background:var(--line);border:0;margin:var(--s-3) 0;}

/* ── 5. NAV ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:22px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-3);
  background:var(--bg);
}
.nav a{color:var(--fg);}
.nav .brand{display:inline-flex;align-items:center;transition:opacity var(--dur-fast);}
.nav .brand:hover{opacity:.55;}
.nav .idx{font-size:10px;letter-spacing:.3em;font-variant-numeric:tabular-nums;color:var(--fg-35);white-space:nowrap;}
@media(max-width:480px){
  .nav{padding:18px clamp(16px,4vw,24px);}
  .nav .idx{display:none;}
  .logo{height:32px;}
  .logo.logo-sm{height:24px;}
  .nav-links{gap:14px;}
  .nav-links a{font-size:9px;letter-spacing:.18em;}
}
.nav-links{display:flex;gap:clamp(20px,2.5vw,36px);align-items:center;flex-shrink:0;}
.nav-links a{font-size:10px;letter-spacing:.3em;text-transform:uppercase;transition:opacity var(--dur-fast);color:var(--fg);white-space:nowrap;}
.nav-links a:hover{opacity:.5;}
.nav-links a.current{opacity:.35;pointer-events:none;}

/* ── 5b. LOGO ────────────────────────────────────────────────────────────── */
.logo{display:block;width:auto;height:44px;}
.logo.logo-lg{height:clamp(80px,14vw,180px);}
.logo.logo-sm{height:36px;}
.logo-dark{filter:invert(1);}

/* ── 6. BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  padding:14px 28px;border:1px solid var(--fg);color:var(--fg);
  transition:background var(--dur-fast),color var(--dur-fast);
  cursor:pointer;
}
.btn:hover{background:var(--fg);color:var(--bg);}
.btn-inverse{border-color:var(--inverse-fg);color:var(--inverse-fg);}
.btn-inverse:hover{background:var(--inverse-fg);color:var(--inverse-bg);}

/* ── 7. FRAMES / GALLERY ─────────────────────────────────────────────────── */
.frame{
  position:relative;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-15);
  width:100%;
}
.frame .ph{font-size:10px;letter-spacing:.35em;text-transform:uppercase;padding:80px 20px;display:block;}
/* Images: max viewport height, max page width, proportional scaling, no crop */
.frame img{
  display:block;
  max-width:100%;
  max-height:100vh;
  width:auto;height:auto;
  margin:0 auto;
  object-fit:contain;
}
/* Frame variants only apply when used as placeholders (no image) */
.frame.cinematic:not(:has(img)){aspect-ratio:21/9;background:var(--surface);}
.frame.wide:not(:has(img))     {aspect-ratio:16/9;background:var(--surface);}
.frame.tall:not(:has(img))     {aspect-ratio:4/5;background:var(--surface);}
.frame.square:not(:has(img))   {aspect-ratio:1/1;background:var(--surface);}

/* ── 8. FOOTER ───────────────────────────────────────────────────────────── */
.footer{
  padding:var(--s-4) var(--gutter) var(--s-3);
  border-top:1px solid var(--line-soft);
  color:var(--fg-50);
}
.footer-grid{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:var(--s-3);align-items:start;
}
.footer-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;}
.footer-col.center{align-items:center;text-align:center;}
.footer-col.end{align-items:flex-end;text-align:right;}
.footer-col .logo{align-self:flex-start;}
.footer-col span,.footer-col a{
  font-size:10px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--fg-50);transition:color var(--dur-fast);
}
.footer-col a:hover{color:var(--fg);}
.footer-col .mute{color:var(--fg-35);}
.footer .logo{margin-bottom:10px;}
.footer-bottom{
  max-width:var(--max-w);margin:var(--s-3) auto 0;
  padding-top:var(--s-2);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-35);
}
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr;gap:var(--s-3);}
  .footer-col,.footer-col.center,.footer-col.end{align-items:flex-start;text-align:left;}
  .footer-bottom{flex-direction:column;gap:10px;}
}

/* ── 9. REVEAL ANIMATIONS ────────────────────────────────────────────────── */
.reveal   {opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

body.page-fade{opacity:0;animation:pageIn .7s var(--ease) .05s forwards;}
@keyframes pageIn{to{opacity:1;}}

/* ══════════════════════════════════════════════════════════════════════════
   10. PAGE PATTERNS — project, about, styleguide
════════════════════════════════════════════════════════════════════════════ */

/* HERO (project & about) */
/* Hauteur libre : le hero ne réserve plus tout le viewport pour que la
   première image de la galerie soit visible dès l'atterrissage. */
.hero{
  max-width:var(--max-w);margin:0 auto;
  padding:clamp(96px,12vh,132px) var(--gutter) var(--s-4);
  display:flex;flex-direction:column;
}
.hero-top{display:flex;gap:clamp(24px,5vw,80px);align-items:baseline;flex-wrap:wrap;}
.hero h1{margin:clamp(60px,12vh,140px) 0 0;max-width:18ch;}
.hero-rule{height:1px;background:var(--line);margin-top:var(--s-4);}
.hero-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
  padding-top:var(--s-5);border-top:1px solid var(--line);
  margin-top:clamp(60px,10vh,120px);
}
.hero-meta .cell .label-mute{margin-bottom:14px;display:block;}
.hero-meta .cell .val{font-size:14px;font-weight:var(--fw-light);line-height:var(--lh-meta);}
@media(max-width:780px){.hero-meta{grid-template-columns:repeat(2,1fr);}}

/* INTRO block (project) */
.intro{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,120px);max-width:var(--max-w);margin:0 auto;}
.intro .lead{max-width:22ch;}
.intro .body{max-width:60ch;}
@media(max-width:780px){.intro{grid-template-columns:1fr;gap:var(--s-4);}}

/* GALLERY */
.gallery{padding-top:0;display:flex;flex-direction:column;gap:clamp(24px,3vw,48px);max-width:var(--max-w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.gallery-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);}
.gallery-row .frame{aspect-ratio:4/5;}
.gallery-row.offset{grid-template-columns:2fr 3fr;align-items:end;}
@media(max-width:780px){.gallery-row,.gallery-row.offset{grid-template-columns:1fr;}}

/* DETAILS (dark fiche technique) */
.details{background:var(--inverse-bg);color:var(--inverse-fg);margin-top:clamp(60px,10vh,140px);padding:var(--s-6) var(--gutter);}
.details-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-direction:column;gap:var(--s-3);}
.details .label-mute{color:var(--inverse-mute);}
.details h2{margin-top:8px;color:var(--inverse-fg);}
.details .rows{display:flex;flex-direction:column;}
.details .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:14px 0;border-top:1px solid var(--inverse-line);align-items:baseline;}
.details .row:last-child{border-bottom:1px solid var(--inverse-line);}
.details .row .k{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--inverse-mute);font-weight:var(--fw-regular);}
.details .row .v{font-size:14px;line-height:1.45;font-weight:var(--fw-light);color:rgba(255,255,255,.92);}
.details .row .v li{padding:1px 0;}
.details .row .v ul{margin:0;padding:0;list-style:none;}
@media(max-width:780px){
  .details .row{grid-template-columns:1fr;gap:6px;padding:12px 0;}
}

/* NEXT */
.next{padding:clamp(100px,18vh,220px) var(--gutter);text-align:center;border-top:1px solid var(--fg-10);}
.next .label-mute{margin-bottom:30px;display:block;}
.next a{display:inline-block;font-family:var(--font-serif);font-weight:var(--fw-light);font-size:clamp(40px,8vw,120px);line-height:1;letter-spacing:var(--ls-title);position:relative;transition:letter-spacing .5s var(--ease);}
.next a::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease);}
.next a:hover::after{transform:scaleX(1);}
.next a:hover{letter-spacing:.01em;}
.next .arrow{display:inline-block;margin-left:24px;font-family:var(--font-sans);font-size:.35em;font-style:normal;vertical-align:middle;}

/* ── ABOUT page specific ─────────────────────────────────────────────────── */
.about-hero{
  max-width:var(--max-w);margin:0 auto;
  padding:clamp(100px,14vh,180px) var(--gutter) var(--s-4);
}
.about-h1{
  font-family:var(--font-serif);font-weight:var(--fw-light);font-style:normal;
  font-size:var(--step-4);line-height:1;letter-spacing:var(--ls-title);
  margin:0 0 var(--s-4);
}
.about-contact{
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-50);
}
.about-contact .col{display:flex;flex-direction:column;gap:8px;}

.manifesto{
  max-width:var(--max-w);margin:0 auto;padding:var(--s-6) var(--gutter);
  display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,120px);
}
.manifesto .title{position:sticky;top:100px;align-self:start;}
.manifesto p{font-family:var(--font-serif);font-weight:var(--fw-light);font-size:clamp(20px,1.6vw,28px);line-height:1.4;letter-spacing:-.005em;max-width:42ch;}
.manifesto p + p{margin-top:1em;}
.manifesto p em{font-style:italic;}
@media(max-width:780px){.manifesto{grid-template-columns:1fr;gap:var(--s-4);}.manifesto .title{position:static;}}

/* Project index (about) */
.index{
  max-width:var(--max-w);margin:0 auto;padding:var(--s-6) var(--gutter);
  border-top:1px solid var(--line);
}
.index-group{
  display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,80px);
  padding:var(--s-4) 0;border-bottom:1px solid var(--line-soft);
}
.index-group:last-child{border-bottom:0;}
.index-group h3{align-self:start;}
.index-group ul li{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-3);
  padding:14px 0;border-top:1px solid var(--line-soft);
  font-size:var(--step-0);line-height:1.45;
}
.index-group ul li:first-child{border-top:0;}
.index-group ul li .note{color:var(--fg-50);font-size:var(--step--1);text-align:right;white-space:nowrap;}
@media(max-width:780px){
  .index-group{grid-template-columns:1fr;gap:var(--s-2);}
  .index-group ul li{grid-template-columns:1fr;gap:4px;}
  .index-group ul li .note{text-align:left;}
}

/* ══════════════════════════════════════════════════════════════════════════
   11. STYLEGUIDE
════════════════════════════════════════════════════════════════════════════ */
.sg{
  display:grid;grid-template-columns:320px 1fr;min-height:100vh;
}
.sg-side{
  position:sticky;top:0;align-self:start;
  height:100vh;overflow-y:auto;
  padding:var(--s-4) var(--s-3);
  border-right:1px solid var(--line);
  background:var(--bg);
}
.sg-main{padding:var(--s-5) var(--s-4);}
@media(max-width:860px){
  .sg{grid-template-columns:1fr;}
  .sg-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);}
}
.sg-title{margin-bottom:var(--s-3);}
.sg-group{margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--line-soft);}
.sg-group h4{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-35);margin-bottom:16px;font-weight:var(--fw-regular);}
.sg-ctrl{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;margin-bottom:10px;}
.sg-ctrl label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-70);}
.sg-ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--fg-15);outline:none;}
.sg-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--fg);border-radius:0;}
.sg-ctrl input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--fg);border:0;border-radius:0;}
.sg-ctrl input[type=color]{width:100%;height:28px;border:1px solid var(--line);background:none;padding:0;cursor:pointer;}
.sg-ctrl select{width:100%;padding:6px 8px;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:11px;}
.sg-ctrl .v{font-size:10px;color:var(--fg-50);font-variant-numeric:tabular-nums;text-align:right;}

.sg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s-3);}
.sg-actions button{
  flex:1;padding:10px;border:1px solid var(--fg);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;background:var(--bg);color:var(--fg);transition:all var(--dur-fast);
}
.sg-actions button:hover{background:var(--fg);color:var(--bg);}

.sg-sec{margin-bottom:var(--s-6);}
.sg-sec h3.sg-sec-title{
  font-family:var(--font-sans);font-weight:var(--fw-regular);
  font-size:10px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--fg-35);margin-bottom:var(--s-3);padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line-soft);
}
.sg-row{display:grid;grid-template-columns:160px 1fr;gap:var(--s-3);padding:18px 0;border-top:1px solid var(--line-soft);}
.sg-row:first-of-type{border-top:0;}
.sg-row .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-35);padding-top:4px;}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.swatch{border:1px solid var(--line);}
.swatch .chip{aspect-ratio:4/3;}
.swatch .info{padding:10px 12px;font-size:10px;letter-spacing:.1em;color:var(--fg-70);display:flex;justify-content:space-between;}
.swatch .info code{font-family:var(--font-mono);color:var(--fg);font-size:10px;}

.scale-row{display:grid;grid-template-columns:80px 1fr;gap:var(--s-3);align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line-soft);}
.scale-row .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-35);}

.space-demo{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.space-demo .unit{display:flex;flex-direction:column;align-items:center;gap:8px;}
.space-demo .bar{background:var(--fg);width:28px;}
.space-demo .unit .lbl{font-size:9px;letter-spacing:.2em;color:var(--fg-50);text-transform:uppercase;}

.export{
  margin-top:var(--s-4);background:var(--inverse-bg);color:var(--inverse-fg);
  padding:var(--s-3);font-family:var(--font-mono);font-size:11px;line-height:1.6;
  white-space:pre;overflow-x:auto;
}