/* ——— Tokens ——————————————————————————————————————————————— */
:root{
  --bg:        #0E0A05;
  --bg-2:      #120D07;
  --bg-3:      #17110A;
  --ink:       #EDE4D0;
  --ink-soft:  #C9BE9F;
  --ink-dim:   #8A7F62;
  --ink-faint: #4F4634;
  --gold:      #EDB855;
  --gold-hot:  #F5CC6E;
  --gold-soft: #D09A2C;
  --gold-deep: #7A5A1A;
  --rule:      rgba(199, 163, 90, 0.14);
  --rule-2:    rgba(199, 163, 90, 0.28);

  --f-serif: "Newsreader", "Times New Roman", serif;
  --f-sans:  "Inter", system-ui, sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, monospace;

  --gutter: 44px;
  --col: 1fr;
  --row-h: 104px;
}

*{ margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--f-sans); font-weight:300; -webkit-font-smoothing:antialiased; }
body{
  min-height:100vh; font-size:16px; line-height:1.5;
  overflow-x:hidden;
  background:
    radial-gradient(1400px 900px at 50% -20%, rgba(237,184,85,0.08), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(237,184,85,0.04), transparent 65%),
    radial-gradient(1000px 400px at 50% 110%, rgba(237,184,85,0.035), transparent 70%),
    var(--bg);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(230,178,74,0.35); color:var(--ink); }

/* Grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.91  0 0 0 0 0.86  0 0 0 0 0.74  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:overlay; opacity:0.35;
}

/* Wireframe grid */
.wire-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid;
  grid-template-columns: var(--gutter) repeat(12, 1fr) var(--gutter);
}
.wire-grid span{
  border-left:1px solid rgba(199,163,90,0.05);
  height:100%;
}
.wire-grid span:first-child, .wire-grid span:last-child{ border-left:0; }
.wire-grid span:nth-child(2){ border-left:1px solid rgba(199,163,90,0.08); }
.wire-grid span:last-child{ border-right:1px solid rgba(199,163,90,0.05); }

/* Phosphor canvas + tiny cursor */
#phosphor{ position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; }
#cursor-dot{
  position:fixed; top:0; left:0; z-index:90;
  width:4px; height:4px; background:var(--gold);
  transform:translate(-50%,-50%); pointer-events:none;
  box-shadow: 0 0 8px rgba(230,178,74,0.9), 0 0 22px rgba(230,178,74,0.45);
  transition: opacity .25s;
}
@media (pointer:coarse){
  body{ cursor:auto; }
  #phosphor, #cursor-dot, .wire-grid{ display:none; }
  button, a{ cursor:pointer; }
}

/* ——— Chrome ——————————————————————————————————————————————— */
.chrome{
  position:fixed; z-index:60;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-dim);
}
.chrome-top{
  top:22px; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 18px;
  border-bottom:1px solid var(--rule);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .35s, backdrop-filter .35s, border-color .35s;
}
.chrome-top.is-scrolled{
  background: rgba(14,10,5,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-2);
}
.chrome-top .mark, .chrome-top nav, .chrome-top .status{
  animation: chromeFade 500ms ease-out 300ms both;
}
@keyframes chromeFade{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chrome-top .mark{ display:flex; align-items:center; gap:18px; }
.chrome-top .mark .b{ height:36px; width:auto; opacity:.9; filter: invert(1); transition: filter .4s, opacity .4s; }
.chrome-top .mark .wm{
  font-family:var(--f-serif); font-weight:400; font-size:17px;
  letter-spacing:0.28em; color:var(--ink); text-transform:uppercase;
}
.chrome-top .mark .chi{
  color:var(--gold); font-family:var(--f-serif); font-style:italic; font-weight:300;
  opacity:0.24; font-size:18px; margin-left:14px; line-height:1;
  transition: opacity .42s cubic-bezier(.4,0,.2,1),
              text-shadow .42s cubic-bezier(.4,0,.2,1);
  pointer-events:none; user-select:none;
}
.chrome-top .mark .chi.aura-near{
  opacity:0.55;
  text-shadow: 0 0 8px rgba(230, 178, 74, 0.16);
}

/* χώρα footer — signature grecque silencieuse */
.chi-footer{
  font-family:var(--f-serif); font-style:italic;
  color:var(--gold); opacity:0.35;
}

/* Colophon MMXXVI — année d'immatriculation SASU, révélée à l'aura */
.colophon{
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); opacity:0.20;
  transition: opacity .42s cubic-bezier(.4,0,.2,1);
  pointer-events:none; user-select:none;
}
.colophon.aura-near{ opacity:0.48; }
.chrome-top nav{ display:flex; gap:28px; }
.chrome-top nav a{ transition: color .35s; }
.chrome-top nav a:hover{ color:var(--gold); }
.chrome-top .status{ display:flex; gap:24px; align-items:center; }
.chrome-top .pulse{
  width:6px; height:6px; background:var(--gold); display:inline-block;
  box-shadow:0 0 10px var(--gold);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.chrome-bot{
  bottom:18px; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; color:var(--ink-faint);
  padding-top:14px; border-top:1px solid var(--rule);
}

/* Side rail — minimal 3 diamonds, no backdrop */
.rail{
  top:50%; right:12px; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:22px; align-items:center;
  z-index:60; position:fixed;
  padding: 6px;
  background: transparent;
}
.rail a{
  position: relative;
  width: 8px; height: 8px;
  display: block;
}
.rail a .d{
  position: absolute; inset: 0;
  border: 1px solid var(--ink-faint);
  background: transparent;
  transform: rotate(45deg);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.rail a:hover .d{
  border-color: var(--gold);
}
.rail a.is-current .d{
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(230,178,74,0.55);
}
.rail a::after{
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-dim);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s, color .3s;
}
.rail a:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--gold);
}

/* ——— Sections layout ——————————————————————————————————————— */
.section{
  position:relative; z-index:3;
  padding: 80px var(--gutter) 60px;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-top: 72px;
  padding-bottom: 20px;
  border-bottom:1px solid var(--rule);
  margin-bottom: 40px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-dim);
}
.section-head .n{ color:var(--gold); margin-right:10px; font-weight:500; }
.section-head .coord{ color:var(--ink-faint); }

/* ——— I. Hero ——————————————————————————————————————————————— */
#hero{
  justify-content:center;
  padding-top:82px; padding-bottom:30px;
  overflow:hidden;
  min-height: 100vh;
  min-height: 100dvh;
}
#hero .hero-bg{
  position:absolute; inset:0; z-index:0;
  background: url("../assets/textures/hero-bg.webp") center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}
#hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(800px 500px at 32% 58%, rgba(245,204,110,0.07), transparent 70%);
  pointer-events:none;
}
#hero #hero-particles{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
#hero .head-line{
  position:absolute; top:80px; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-dim);
}
#hero .head-line .chi{ color:var(--gold); opacity:.6; font-family:var(--f-serif); font-size:13px; letter-spacing:0; }
#hero .hero-inner{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding: 16px 0 24px;
}
#hero h1{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(2rem, min(6.5vw, 9vh), 8.5rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color:var(--ink);
  position:relative;
  z-index:2;
}
#hero h1 .l1{ display:block; }
#hero .keywords{
  display:flex; align-items:center; gap: 18px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-top: 28px;
  margin-bottom: 22px;
  padding-left: 4px;
  position: relative;
}
#hero .keywords .kw{ color: var(--ink-soft); }
#hero .keywords .sep{ width:10px; height:1px; background: var(--ink-faint); display:inline-block; }
#hero .keywords .dot{ color: var(--gold); font-size: 9px; position:relative; top:-1px; }
#hero h1 .l2{
  display:block;
  font-style:italic; font-weight:200;
  color:var(--ink);
  padding-left: 4.5vw;
  position:relative;
}
#hero h1 .l2::before{
  content:""; position:absolute; left:0; top:50%;
  width: 3.5vw; height:1px; background: var(--gold); opacity:.8;
  transform: translateY(-50%);
}
#hero h1 .l3{
  display:block;
  font-style:italic; font-weight:200;
  color:var(--ink-soft);
  padding-left: 8.5vw;
}
#hero h1 .amp{
  font-family:var(--f-serif); font-style:italic; color:var(--gold);
  font-weight:300;
  position:relative; top:-0.08em;
  padding: 0 0.08em;
}

/* Entrée du hero — chorégraphiée à la levée du préloader (body.is-ready).
   Sans JS, body.is-ready n'arrive jamais : tout reste visible par défaut. */
@keyframes heroRise{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  body.is-ready #hero h1 .l1{ animation: heroRise .8s cubic-bezier(.2,.6,.2,1) 0s both; }
  body.is-ready #hero h1 .l2{ animation: heroRise .8s cubic-bezier(.2,.6,.2,1) .12s both; }
  body.is-ready #hero h1 .l3{ animation: heroRise .8s cubic-bezier(.2,.6,.2,1) .24s both; }
  body.is-ready #hero .keywords{ animation: heroRise .7s cubic-bezier(.2,.6,.2,1) .38s both; }
  body.is-ready #hero .foot{ animation: heroRise .7s cubic-bezier(.2,.6,.2,1) .52s both; }
  body.is-ready #hero .cta-row{ animation: heroRise .7s cubic-bezier(.2,.6,.2,1) .64s both; }
}

/* giant S monogram behind hero */
#hero .mono-wrap{
  position:absolute; right: 0; top: 38%;
  transform: translateY(-50%);
  width: min(720px, 55vw, calc(100dvh - 240px));
  aspect-ratio: 1 / 1;
  pointer-events:none;
  --mx: 50%; --my: 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
  transition: filter .45s ease;
}
#hero:hover .mono-wrap{
  filter: drop-shadow(0 0 24px rgba(245,204,110,0.45));
}
#hero .monogram{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity: 0.05;
  pointer-events:none;
  filter: invert(1) sepia(1) saturate(8) hue-rotate(8deg);
  animation: monoReveal 800ms cubic-bezier(.2,.6,.2,1) 1100ms both, monoBreathe 14s ease-in-out 1900ms infinite;
}
#hero .monogram.lit{
  opacity: 0.8;
  filter: invert(1) sepia(1) saturate(6) hue-rotate(8deg) drop-shadow(0 0 20px rgba(245,204,110,0.4));
  animation: monoRevealLit 800ms cubic-bezier(.2,.6,.2,1) 1100ms both;
  -webkit-mask-image: radial-gradient(220px 220px at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 25%, transparent 60%);
  mask-image: radial-gradient(220px 220px at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 25%, transparent 60%);
}
@keyframes monoBreathe{
  0%,100%{ opacity:0.045; }
  50%    { opacity:0.075; }
}
@keyframes monoReveal{
  0%   { opacity: 0; transform: scale(0.96); filter: invert(1) sepia(1) saturate(8) hue-rotate(8deg) brightness(0.3); }
  100% { opacity: 0.05; transform: scale(1); filter: invert(1) sepia(1) saturate(8) hue-rotate(8deg) brightness(1); }
}
@keyframes monoRevealLit{
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 0.8; transform: scale(1); }
}

#hero .foot{
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px;
  margin-top: 30px;
  padding-top: 18px;
  border-top:1px solid var(--rule);
  z-index:3; position:relative;
}
#hero .foot .cell{
  display:flex; flex-direction:column; gap:8px;
}
#hero .foot .lbl{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-dim);
}
#hero .foot .val{
  font-family:var(--f-serif); font-weight:300; font-size: 1.15rem;
  color:var(--ink);
}
#hero .foot .val em{ font-style:italic; color:var(--gold); font-weight:300; }
#hero .cta-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 18px;
}
#hero .explore{
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--gold);
  padding:16px 0;
}
#hero .explore .ar{ display:inline-block; transition: transform .5s; }
#hero .explore:hover .ar{ transform: translateX(6px); }
#hero .explore .line{ width:60px; height:1px; background:var(--gold); opacity:.5; }

/* Ticker */
.ticker{
  position:relative; z-index:3;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding: 18px 0;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size: 1.8rem; color: var(--ink-soft);
  /* enfant direct de <body> : aucune marge négative — c'était la source
     du débordement horizontal à 320px (scrollWidth 340) */
  margin: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.ticker .track{ display:inline-flex; gap: 3rem; padding-left: 3rem; animation: tick 42s linear infinite; }
.ticker .track span{ display:inline-flex; align-items:center; gap: 3rem; }
.ticker .track .dot{ color: var(--gold); font-style:normal; }
@keyframes tick{ to{ transform: translateX(-50%); } }

/* ——— II. Cabinet ————————————————————————————————————————— */
#cabinet{ padding-top: 20px; }

.cab-title{
  display:grid; grid-template-columns: 1fr auto; gap: 30px; align-items:end;
  padding-bottom: 46px;
  border-bottom:1px solid var(--rule);
  margin-bottom: 60px;
}
.cab-title h2{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height:0.95; letter-spacing: -0.03em;
  color:var(--ink);
}
.cab-title h2 em{ font-style:italic; color:var(--gold); font-weight:300; }
.cab-title .lead{
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size: 1.15rem; color:var(--ink-soft);
  max-width:42ch; text-align:right; line-height:1.5;
}

/* Manifesto — 3 pillars */
.pillars{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom: 80px;
}
.pillar{
  position:relative;
  padding: 40px 36px 40px;
  border-right:1px solid var(--rule);
  min-height: 300px;
  display:flex; flex-direction:column;
}
.pillar:last-child{ border-right:0; }
.pillar .p-num{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.32em;
  color:var(--ink-faint); text-transform:uppercase; margin-bottom: 28px;
}
.pillar h3{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color:var(--ink);
  letter-spacing:-0.01em; line-height:1;
  margin-bottom: 22px;
}
.pillar h3 em{ font-style:italic; color:var(--gold); font-weight:300; }
.pillar p{
  font-family:var(--f-serif); font-weight:300; font-size: 1.05rem;
  color:var(--ink-soft); line-height: 1.55;
  flex: 1;
}
.pillar .stack{
  margin-top: 28px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); opacity: 0.4;
  transition: opacity .5s;
}
.pillar:hover .stack{ opacity:0.95; }
.pillar:hover{ background: linear-gradient(180deg, transparent 0%, rgba(230,178,74,0.025) 100%); }
.pillar::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.4,.2,.1,1);
}
.pillar:hover::before{ transform: scaleX(1); }

/* Activities */
.acts-wrap{
  margin-bottom: 80px;
}
/* Chapter sub-header — forme partagée par .ah, .mh, .rh */
.acts-wrap .ah,
.methode .mh,
.realisations .rh{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title eyebrow"
    "title rule";
  align-items: end;
  column-gap: 32px;
  row-gap: 6px;
  padding: 0;
  border-bottom: 0;
  margin-bottom: 44px;
  position: relative;
}
.acts-wrap .ah h3,
.methode .mh h3,
.realisations .rh h3{
  grid-area: title;
  font-family: var(--f-serif); font-weight: 300; font-style: normal;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  padding-bottom: 8px;
}
.acts-wrap .ah h3 em,
.methode .mh h3 em,
.realisations .rh h3 em{
  font-style: italic; font-weight: 300; color: var(--ink);
}
.acts-wrap .ah h3::before,
.methode .mh h3::before,
.realisations .rh h3::before{
  content: "✦";
  color: var(--gold);
  font-family: var(--f-serif); font-weight: 400;
  font-size: 0.45em;
  opacity: 0.7;
  margin-right: 16px;
  position: relative;
  top: -0.35em;
  letter-spacing: 0;
}
.acts-wrap .ah .n,
.methode .mh .n,
.realisations .rh .n{
  grid-area: eyebrow;
  justify-self: end;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-dim);
}
.acts-wrap .ah::before,
.methode .mh::before,
.realisations .rh::before{
  content: "";
  grid-area: rule;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(122, 90, 26, 0.35) 8%,
    var(--gold-deep) 28%,
    var(--gold-deep) 82%,
    var(--gold) 94%,
    transparent 100%);
  align-self: end;
  margin-bottom: 14px;
}
.acts-wrap .ah::after,
.methode .mh::after,
.realisations .rh::after{
  content: "✦";
  position: absolute;
  right: 0; bottom: 8px;
  font-family: var(--f-serif); font-size: 13px;
  color: var(--gold);
  opacity: 0.9;
  line-height: 1;
  background: var(--bg);
  padding: 0 8px 0 10px;
}
.act-row{
  display:grid; grid-template-columns: 80px 1.2fr 2fr 180px; gap: 40px;
  align-items:center;
  padding: 36px 0;
  border-bottom:1px solid var(--rule);
  transition: background .4s;
  cursor:none; position:relative;
}
@media (pointer:coarse){ .act-row{ cursor:pointer; } }
.act-row::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.4,.2,.1,1);
}
.act-row:hover::after{ transform: scaleX(1); }
.act-row:hover{ background: linear-gradient(to right, rgba(230,178,74,0.03), transparent 70%); }
.act-row .idx{
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size: 2rem; color:var(--gold);
  line-height:1;
}
.act-row h4{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color:var(--ink); letter-spacing:-0.01em; line-height:1;
}
.act-row h4 em{ font-style:italic; color:var(--ink-soft); font-weight:300; }
.act-row p{
  font-family:var(--f-serif); font-weight:300;
  font-size: 1.05rem; color:var(--ink-soft); line-height:1.55;
  max-width: 58ch;
}
.act-row .meta{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); text-align:right;
  line-height:1.8;
}

/* Méthode — horizontal timeline */
.methode{ margin-bottom: 80px; }

.nodes-h{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position:relative;
}
.nodes-h::before{
  content:""; position:absolute;
  left: 5%; right: 5%;
  top: 40px; height:1px;
  background: linear-gradient(to right, transparent, var(--gold-deep) 6%, var(--gold-deep) 94%, transparent);
}
.node-h{
  position:relative;
  padding: 12px 24px 20px 0;
  cursor:none;
}
@media (pointer:coarse){ .node-h{ cursor:pointer; } }
.node-h .dot{
  width:14px; height:14px;
  background: var(--bg);
  border:1px solid var(--gold-soft);
  transform: rotate(45deg);
  margin-bottom: 24px;
  transition: all .45s;
}
.node-h:hover .dot, .node-h.is-active .dot{
  background: var(--gold);
  box-shadow: 0 0 18px rgba(230,178,74,0.8);
  border-color: var(--gold);
}
.node-h .alch{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom: 8px;
}
.node-h .verb{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing:-0.01em;
  color:var(--ink); margin-bottom: 10px;
  line-height:1;
}
.node-h .dur{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold); opacity:0.7; margin-bottom: 16px;
}
.node-h p{
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size: .98rem; color:var(--ink-soft); max-width: 32ch;
  opacity:0;
  transition: opacity .5s;
  pointer-events:none;
}
.node-h:hover p, .node-h.is-active p{
  opacity:1;
  pointer-events:auto;
}

/* Realisations */
.realisations{ margin-bottom: 40px; }

.realisations .cases-intro{
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size: 1.05rem; line-height:1.5;
  color: var(--ink-dim);
  margin: -26px 0 36px;
  max-width: 62ch;
}

.cases{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border:1px solid var(--rule); }
.case{
  position:relative;
  background: var(--bg);
  padding: 0;
  display:flex; flex-direction:column;
  min-height: 360px;
}
.case .thumb{
  position:relative;
  aspect-ratio: 4/3; width:100%;
  background: var(--bg-2);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.case .thumb svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.case .thumb svg .flow{ transition: stroke .6s; }
.case:hover .thumb svg .flow{ stroke: var(--gold); }
@media (prefers-reduced-motion: no-preference){
  .case .thumb svg .flow{ stroke-dasharray: 1; }
  .case.is-drawn .thumb svg .flow{ animation: case-flow-draw 1.1s ease-out both; }
  /* le récit avant → après se dessine dans l'ordre de lecture */
  .case.is-drawn .thumb svg .flow:nth-of-type(2){ animation-delay: .3s; }
  .case.is-drawn .thumb svg .flow:nth-of-type(3){ animation-delay: .6s; }
}
@keyframes case-flow-draw{
  from{ stroke-dashoffset: 1; }
  to{ stroke-dashoffset: 0; }
}
.case .tag{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--f-mono); font-size:9px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold);
  padding: 5px 8px; border:1px solid var(--gold-deep);
  background: rgba(14,10,5,0.8);
}
.case .tag.reveal .reveal__truth{
  left:auto; right:0;
  text-align:right;
}
.case .body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.case .kind{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-dim);
}
.case h4{
  font-family:var(--f-serif); font-weight:300; font-size: 1.35rem; line-height:1.15;
  color:var(--ink); letter-spacing:-0.005em;
}
.case h4 em{ font-style:italic; color:var(--gold); font-weight:300; }
.case .steps{ display:flex; flex-direction:column; gap: 10px; margin-top: 2px; }
.case .step{
  font-family:var(--f-serif); font-weight:300;
  font-size: .95rem; line-height: 1.45; color: var(--ink-soft);
}
.case .step .sl{
  display:block;
  font-family:var(--f-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); opacity: 0.72;
  margin-bottom: 3px;
}
.case .spec{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* ——— III. Contact ————————————————————————————————————————— */
#contact{ padding-top: 20px; }
.contact-head{
  display:grid; grid-template-columns: 1fr auto; gap: 30px; align-items:end;
  padding-bottom: 46px;
  border-bottom:1px solid var(--rule);
  margin-bottom: 60px;
}
.contact-head h2{
  font-family:var(--f-serif); font-weight:300;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height:0.95; letter-spacing:-0.03em;
  color:var(--ink);
}
.contact-head h2 em{ font-style:italic; color:var(--gold); font-weight:300; }
.contact-head .lead{
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size: 1.15rem; color:var(--ink-soft); max-width: 42ch;
  text-align:right;
}
.contact-grid{
  display:grid; grid-template-columns: 1.1fr 1fr;
  gap: 80px; align-items:start;
}
.contact-info{ display:flex; flex-direction:column; gap: 44px; }
.email-block{ display:flex; flex-direction:column; gap: 8px; }
.email-block .lbl{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-dim);
}
.email-block a{
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color:var(--ink); letter-spacing:-0.01em;
  display:inline-block;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 6px;
  transition: color .3s, border-color .3s;
}
.email-block a:hover{ color:var(--gold); border-color: var(--gold); }
.email-block .copied{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; color:var(--gold);
  opacity:0; transition: opacity .4s;
}
.email-block .copied.show{ opacity:1; }
.meta-list{
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px 48px;
  padding: 32px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.meta-list .cell{ display:flex; flex-direction:column; gap:6px; }
.meta-list .lbl{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-dim);
}
.meta-list .val{
  font-family:var(--f-serif); font-weight:300; font-size: 1.15rem; color:var(--ink);
}
.meta-list .val em{ font-style:italic; color:var(--gold); font-weight:300; }

form{ display:flex; flex-direction:column; gap: 30px; padding-left: 0; border:0; }
.field{ display:flex; flex-direction:column; gap: 10px; }
.field label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink-dim);
}
.field input, .field textarea{
  background: transparent; border:0; border-bottom:1px solid var(--rule-2);
  color:var(--ink); font-family:var(--f-serif); font-size: 1.15rem; font-weight:300;
  padding: 8px 0; outline:none; transition: border-color .3s;
}
.field textarea{ resize: vertical; min-height: 90px; }
.field input:focus, .field textarea:focus{ border-color: var(--gold); }
.hp{ position:absolute; left:-9999px; }

.submit{
  align-self:flex-start; position:relative;
  display:inline-flex; align-items:center; gap: 18px;
  padding: 18px 30px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold-deep);
  overflow:hidden;
  transition: color .35s, letter-spacing .3s;
  background: transparent;
}
.submit::before{
  content:""; position:absolute; inset:0;
  background: var(--gold); transform-origin: left; transform: scaleX(0);
  transition: transform .5s cubic-bezier(.4,.2,.1,1);
  z-index:-1;
}
.submit:hover{ color: var(--bg); letter-spacing:0.38em; border-color:var(--gold); }
.submit:hover::before{ transform: scaleX(1); }

.submit:disabled{
  opacity:.45; pointer-events:none;
}

/* Statut d'envoi du formulaire */
.form-status{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  min-height: 1.2em;
  color:var(--ink-soft);
  margin-top: -12px;
}
.form-status.is-ok{ color:var(--gold); text-shadow: 0 0 12px rgba(245,204,110,0.4); }
.form-status.is-err{ color:var(--ink); }
.form-status.is-sending{ color:var(--ink-dim); }

/* Mention RGPD sous le formulaire */
.rgpd{
  font-family:var(--f-sans); font-size: 12px; font-weight:300;
  color:var(--ink-dim); line-height:1.6;
  max-width: 52ch;
  margin-top: -8px;
}
.rgpd a{ color:var(--ink-soft); border-bottom:1px solid var(--rule-2); transition: color .3s, border-color .3s; }
.rgpd a:hover{ color:var(--gold); border-color:var(--gold); }

/* Reveal */
.reveal{ position:relative; color:inherit; display:inline; }
.reveal__truth{
  display:block;
  position:absolute; left:0; top: 100%;
  margin-top:6px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-hot);
  white-space:nowrap;
  opacity:0; transform:translateY(-3px);
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  text-shadow: 0 0 14px rgba(245,204,110,0.6);
  z-index:4;
  contain: layout;
}
.reveal.lit .reveal__truth{ opacity:.95; transform: translateY(0); }
.reveal.lit{ color:#F5E4B5; text-shadow: 0 0 14px rgba(245,204,110,0.55); }

/* Keywords hero : truth au-dessus pour ne pas toucher le h1 dessous */
#hero .keywords .reveal .reveal__truth{
  top: auto; bottom: 100%;
  margin-top: 0; margin-bottom: 8px;
  transform: translateY(3px);
}
#hero .keywords .reveal.lit .reveal__truth{
  transform: translateY(0);
}

/* Reveal dans l.3 du h1 — glose marginale tracée, ancrée bas-droite du hero (hors zone logo).
   Pas de chrome permanent : le trait fin gold et le texte se dessinent ensemble au hover. */
#hero h1 .reveal--l3 .reveal__truth{
  position: fixed;
  top: auto; bottom: 28%;
  left: auto; right: var(--gutter);
  margin: 0;
  padding: 0;
  max-width: 36ch;
  white-space: normal;
  text-align: right;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  line-height: 1.55;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(230, 178, 74, 0.32);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .42s cubic-bezier(.4,0,.2,1),
              transform .42s cubic-bezier(.4,0,.2,1);
}
#hero h1 .reveal--l3 .reveal__truth::before{
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  height: 1px;
  width: 0;
  background: var(--gold);
  opacity: 0;
  transform: translateY(-0.5px);
  transition: width .46s cubic-bezier(.4,0,.2,1),
              opacity .26s ease;
}
#hero h1 .reveal--l3.lit .reveal__truth{
  opacity: 0.78;
  transform: translateX(0);
}
#hero h1 .reveal--l3.lit .reveal__truth::before{
  width: 64px;
  opacity: 0.6;
}

/* Mobile : fallback inline simple sous le mot, sans trait */
@media (max-width: 820px){
  #hero h1 .reveal--l3 .reveal__truth{
    position: absolute;
    top: 100%; bottom: auto;
    left: 0; right: auto;
    margin-top: 6px;
    text-align: left;
    white-space: nowrap;
    max-width: none;
    transform: translateX(-3px);
    transition: opacity .32s ease, transform .32s ease;
  }
  #hero h1 .reveal--l3 .reveal__truth::before{
    display: none;
  }
  #hero h1 .reveal--l3.lit .reveal__truth{
    transform: translateX(0);
    opacity: 0.78;
  }
}

/* ——— Aura proximity & secrets ———
   Le curseur porte un radius invisible (~92px). Les .reveal proches reçoivent
   une lueur très subtile (signal "il y a quelque chose ici"), sans déclencher
   le typewriter qui reste sur hitbox stricte. Les .secret (sigils alchimiques
   et whispers latins) sont opacity:0 par défaut et n'apparaissent qu'au passage
   de l'aura — micro-mystères de marge. */
.reveal{
  transition: color .42s cubic-bezier(.4,0,.2,1),
              text-shadow .42s cubic-bezier(.4,0,.2,1);
}
.reveal.aura-near:not(.lit){
  color: #D4B97A;
  text-shadow: 0 0 8px rgba(230, 178, 74, 0.14);
}

.secret{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  color: var(--gold);
  z-index: 1;
  will-change: opacity, transform;
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1),
              letter-spacing .55s cubic-bezier(.4,0,.2,1);
}

/* Sigil — symbole alchimique seriffé, apparaît plein quand l'aura le frôle */
.secret--sigil{
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(230, 178, 74, 0.22);
  transform: scale(0.94) translateY(2px);
}
.secret--sigil.aura-near{
  opacity: 0.42;
  transform: scale(1) translateY(0);
}

/* Whisper — micro-citation italique latine, fine et lumineuse */
.secret--whisper{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(230, 178, 74, 0.16);
  transform: translateX(-4px);
}
.secret--whisper.aura-near{
  opacity: 0.44;
  letter-spacing: 0.36em;
  transform: translateX(0);
}

/* Mark — un trait fin de marge qui se déploie de gauche à droite */
.secret--mark{
  width: 26px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0.2);
  transform-origin: left center;
  opacity: 0;
}
.secret--mark.aura-near{
  opacity: 0.38;
  transform: scaleX(1);
}

/* Hinge — sigil charnière centré horizontalement en transition de section
   (override de .secret{position:absolute} pour vivre dans le flow) */
.secret--hinge{
  position: relative;
  display: block;
  margin: 56px auto;
  text-align: center;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(230, 178, 74, 0.20);
  transform: scale(0.90);
  letter-spacing: 0;
  min-height: 26px; /* réserve la boîte pour éviter tout CLS */
}
.secret--hinge.aura-near{
  opacity: 0.40;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce){
  .secret, .reveal{ transition: none; }
}

/* Preloader */
#pre{
  position:fixed; inset:0; z-index:200;
  background:var(--bg); display:grid; place-items:center;
  transition: opacity .6s;
}
#pre.gone{ opacity:0; pointer-events:none; }
#pre .p-wrap{ display:flex; flex-direction:column; align-items:center; gap:28px; }
#pre img{ height:72px; width:auto; opacity:.9; filter: invert(1); animation: preBreathe 2.2s ease-in-out infinite; }
@keyframes preBreathe{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform: scale(1.04); } }
#pre .bar{ width:180px; height:1px; background:var(--ink-faint); position:relative; overflow:hidden; }
#pre .bar::after{ content:""; position:absolute; inset:0 100% 0 0; background:var(--gold); animation: fill 1.2s ease-out forwards; }
@keyframes fill{ to{ inset:0 0 0 0; } }
#pre .lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.36em; color:var(--ink-dim); text-transform:uppercase; }

/* Footer */
.tail{
  border-top:1px solid var(--rule);
  padding: 28px var(--gutter) 30px;
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-faint);
  position:relative; z-index:3;
}

/* Responsive */
@media (max-width: 1100px){
  .cases{ grid-template-columns: repeat(2, 1fr); }
  .act-row{ grid-template-columns: 60px 1fr 180px; }
  .act-row p{ grid-column: 2 / -1; }
}
@media (max-width: 820px){
  :root{ --gutter: 20px; }
  .chrome-top nav{ gap: 14px; }
  .chrome-top .status{ display:none; }
  .pillars{ grid-template-columns: 1fr; }
  .pillar{ border-right:0; border-bottom:1px solid var(--rule); }
  .nodes-h{ grid-template-columns: 1fr 1fr; }
  .nodes-h::before{ display:none; }
  .cases{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; gap: 60px; }
  .act-row{ grid-template-columns: 40px 1fr; }
  .act-row p, .act-row .meta{ grid-column: 1 / -1; padding-left: 40px; }
  #hero h1{ font-size: clamp(2rem, min(10vw, 14vh), 5rem); letter-spacing: -0.02em; }
  #hero h1 .l2{ padding-left: 8vw; }
  #hero h1 .l2::before{ width: 6vw; }
  #hero h1 .l3{ padding-left: 14vw; }
  #hero h1 .l3 .reveal .reveal__truth{ right: auto; left: 0; bottom: auto; top: 100%; margin-bottom: 0; margin-top: 6px; }
  #hero .mono-wrap{ width: 380px; max-width: 70vw; right: -20%; top: 58%; }
  #hero .foot{ grid-template-columns: 1fr 1fr; }
  .rail{ display:none; }
  .acts-wrap .ah,
  .methode .mh,
  .realisations .rh{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "rule";
    row-gap: 10px;
  }
  .acts-wrap .ah .n,
  .methode .mh .n,
  .realisations .rh .n{ justify-self: start; }
  .acts-wrap .ah::before,
  .methode .mh::before,
  .realisations .rh::before{ margin-bottom: 0; margin-top: 4px; }
  .acts-wrap .ah::after,
  .methode .mh::after,
  .realisations .rh::after{ bottom: -2px; }
}

@media (max-height: 820px) and (min-width: 821px){
  #hero h1{
    font-size: clamp(1.8rem, min(5.5vw, 8.5vh), 7rem);
  }
  #hero .keywords{ margin-bottom: 10px; }
  #hero .foot{ margin-top: 20px; padding-top: 14px; }
  #hero .cta-row{ margin-top: 12px; }
}

@media (max-width: 600px){
  #hero .cta-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #hero .keywords{ flex-wrap: wrap; gap: 10px 14px; }
  .section-head{ flex-wrap: wrap; gap: 8px 20px; }
  .cab-title, .contact-head{ grid-template-columns: 1fr; align-items: start; }
  .cab-title .lead, .contact-head .lead{ text-align: left; }
  .tail{ flex-wrap: wrap; gap: 10px 28px; }
  /* le whisper centré sur χώρα déborderait du viewport ; jamais révélé au tactile */
  .tail .secret--whisper{ display: none; }
}

/* Très petits écrans — le header tient sans déborder */
@media (max-width: 520px){
  .chrome-top{ padding: 12px 8px; }
  .chrome-top .mark{ gap: 10px; }
  .chrome-top .mark .wm{ display: none; }
  .chrome-top .mark .chi{ margin-left: 0; }
  .chrome-top nav{ gap: 12px; }
  .chrome-top nav a{ letter-spacing: 0.16em; }
  .chrome-top nav .nv{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  body{ cursor:auto; }
  #phosphor, #cursor-dot{ display:none; }
  .reveal__truth{ opacity:.85 !important; }
}