/* ============ TOKENS ============ */
:root{
  --bg-0:#0B0E1A;
  --bg-1:#14132B;
  --bg-2:#1B1740;
  --ink:#F5F3EE;
  --ink-soft:#B9B6CE;
  --ember:#FF7A45;
  --ember-soft:#FFB27A;
  --mist:#8AA0C7;
  --glass-bg:rgba(255,255,255,0.055);
  --glass-bg-strong:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.11);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,.8,.24,1);
}

[data-theme="light"]{
  --bg-0:#FAF7F2;
  --bg-1:#F3EEE5;
  --bg-2:#ECE4F2;
  --ink:#1B1830;
  --ink-soft:#5B5675;
  --ember:#E35F2B;
  --ember-soft:#FF9256;
  --mist:#4E6A9C;
  --glass-bg:rgba(27,20,50,0.035);
  --glass-bg-strong:rgba(27,20,50,0.06);
  --glass-border:rgba(27,20,50,0.09);
  --shadow: 0 20px 50px -25px rgba(30,20,60,0.25);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--ink);
  overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--ember); color:#fff; }
a{ color:inherit; text-decoration:none; }

/* ============ BACKDROP MESH ============ */
.mesh{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.mesh::before, .mesh::after, .mesh span{
  content:''; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.55; will-change:transform;
}
.mesh::before{
  width:60vw; height:60vw; top:-15vw; left:-10vw;
  background:radial-gradient(circle, var(--bg-2), transparent 70%);
  animation:drift1 34s ease-in-out infinite;
}
.mesh::after{
  width:50vw; height:50vw; bottom:-15vw; right:-10vw;
  background:radial-gradient(circle, var(--mist), transparent 70%);
  opacity:.18; animation:drift2 40s ease-in-out infinite;
}
.mesh span{
  width:35vw; height:35vw; top:30%; left:35%;
  background:radial-gradient(circle, var(--ember), transparent 70%);
  opacity:.10; animation:drift3 46s ease-in-out infinite;
}
@keyframes drift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(6vw,8vw)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-7vw,-5vw)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,6vw) scale(1.15)} }

/* ============ SCROLL PROGRESS ============ */
.progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:linear-gradient(90deg, var(--ember), var(--ember-soft));
  z-index:1000; transition:width .1s linear;
}

/* ============ HEADER / NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px, 5vw, 64px);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:color-mix(in srgb, var(--bg-0) 72%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-border);
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.01em;
}
.logo svg{ width:22px; height:22px; }
.ember-dot{ fill:var(--ember); }
.ember-glow-c{ fill:var(--ember-soft); opacity:.5; }

nav.main-nav{ display:flex; align-items:center; gap:8px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-size:.92rem; color:var(--ink-soft); padding:8px 14px; border-radius:10px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:var(--glass-bg); }
.nav-links a.current{ color:var(--ember); }

.header-right{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  position:relative; width:52px; height:28px; border-radius:20px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  cursor:pointer; display:flex; align-items:center; padding:3px;
}
.theme-toggle .knob{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg, var(--ember-soft), var(--ember));
  transform:translateX(0px); transition:transform .4s var(--ease);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
[data-theme="light"] .theme-toggle .knob{ transform:translateX(24px); }

.burger{
  display:none; width:38px; height:38px; border-radius:10px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:9px; right:9px; height:1.6px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:18.5px; }
.burger span:nth-child(3){ top:24px; }
.burger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:color-mix(in srgb, var(--bg-0) 94%, transparent);
  backdrop-filter:blur(20px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }

@media (max-width: 760px){
  .nav-links{ display:none; }
  .burger{ display:block; }
}

/* ============ LAYOUT UTILS ============ */
section{ position:relative; padding:min(16vh,120px) clamp(20px, 6vw, 64px); max-width:1180px; margin:0 auto; }
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember); display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow .signal{
  width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 0 rgba(255,122,69,.5); animation:pulse-signal 2.6s infinite;
}
@keyframes pulse-signal{
  0%{ box-shadow:0 0 0 0 rgba(255,122,69,.45); }
  70%{ box-shadow:0 0 0 8px rgba(255,122,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,122,69,0); }
}
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
p{ color:var(--ink-soft); line-height:1.7; font-size:1.05rem; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

.glass-card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px); border-radius:24px; box-shadow:var(--shadow);
}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:14px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem; cursor:pointer; border:none;
  background:linear-gradient(135deg, var(--ember), var(--ember-soft)); color:#0B0E1A;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(255,122,69,.5); }
.btn-ghost{
  background:transparent; border:1px solid var(--glass-border); color:var(--ink);
}

/* ============ HERO ============ */
.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:120px; }
.ember-mark{ position:relative; width:84px; height:84px; margin-bottom:36px; }
.ember-mark svg{ width:100%; height:100%; }
.ember-mark .flicker{ animation:flicker 3.6s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes flicker{
  0%,100%{ opacity:1; transform:scale(1) translateY(0); }
  18%{ opacity:.85; transform:scale(.96) translateY(1px); }
  36%{ opacity:1; transform:scale(1.04) translateY(-1px); }
  58%{ opacity:.9; transform:scale(.98) translateY(0); }
  80%{ opacity:1; transform:scale(1.02) translateY(-.5px); }
}
.hero h1{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem); max-width:16ch;
  background:linear-gradient(135deg, var(--ink) 40%, var(--ember-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ margin-top:22px; font-size:clamp(1.02rem,2vw,1.25rem); max-width:42ch; color:var(--ink-soft); }
.hero .cta-row{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.scroll-cue{
  margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.7;
}
.scroll-cue .arrow{ width:1px; height:34px; background:linear-gradient(var(--ink-soft), transparent); animation:cue-move 2s ease-in-out infinite; }
@keyframes cue-move{ 0%,100%{ opacity:.3; height:24px;} 50%{ opacity:1; height:38px;} }

/* ============ RECIT ============ */
.recit{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.recit h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:22px; max-width:14ch; }
.recit p + p{ margin-top:16px; }
.recit-visual{ padding:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:280px; text-align:center; }
.recit-visual .big-ember{ width:64px; height:64px; }
.recit-visual .caption{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); letter-spacing:.06em; }

/* ============ VALEURS ============ */
.valeurs h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:16ch; margin-bottom:14px; }
.valeurs > p{ max-width:52ch; margin-bottom:56px; }
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.card{ padding:34px 28px; transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:var(--ember); background:var(--glass-bg-strong); }
.card svg{ width:30px; height:30px; margin-bottom:22px; stroke:var(--ember); }
.card h3{ font-size:1.15rem; margin-bottom:10px; font-weight:600; }
.card p{ font-size:.96rem; }

/* ============ JOURNAL / BLOG ============ */
.journal h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:18ch; margin-bottom:14px; }
.journal > p{ max-width:52ch; margin-bottom:48px; }
.entries{ display:flex; flex-direction:column; gap:0; }
.entry{
  display:grid; grid-template-columns:140px 1fr; gap:28px; padding:28px 0;
  border-top:1px solid var(--glass-border);
}
.entry:last-child{ border-bottom:1px solid var(--glass-border); }
.entry time{ font-family:var(--font-mono); font-size:.8rem; color:var(--ember); letter-spacing:.04em; }
.entry h3{ font-size:1.1rem; margin-bottom:8px; font-weight:600; }
.entry p{ font-size:.95rem; margin:0; }

/* ============ FAQ ============ */
.faq h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:16ch; margin-bottom:48px; }
.faq-item{ border-bottom:1px solid var(--glass-border); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 4px; font-family:var(--font-display);
  font-weight:500; font-size:1.05rem; display:flex; justify-content:space-between; align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:1.4rem; color:var(--ember); transition:transform .3s var(--ease); flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 4px 22px; font-size:.97rem; max-width:60ch; }

/* ============ A VENIR ============ */
.avenir{ text-align:center; }
.avenir h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:18ch; margin:0 auto 18px; }
.avenir p{ max-width:46ch; margin:0 auto; }
.avenir .glass-card{ margin-top:48px; padding:38px; max-width:520px; margin-left:auto; margin-right:auto; display:flex; align-items:center; gap:16px; justify-content:center; }
.avenir .status-text{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft); text-align:left; }
.avenir .status-text b{ color:var(--ink); display:block; font-size:.9rem; margin-bottom:4px; font-weight:500;}

/* ============ CONTACT ============ */
.contact{ text-align:center; }
.contact h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:16px; }
.contact p{ max-width:44ch; margin:0 auto 30px; }

/* ============ CLOTURE ============ */
.cloture{ text-align:center; padding-top:60px; padding-bottom:40px; }
.cloture .divider-ember{ width:8px; height:8px; border-radius:50%; margin:0 auto 28px; background:var(--ember); box-shadow:0 0 24px 4px var(--ember-soft); }
.cloture p{ font-family:var(--font-display); font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--ink); font-weight:500; }
.cloture .signature{ margin-top:14px; font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); letter-spacing:.05em; }

/* ============ FOOTER ============ */
footer{
  padding:44px clamp(20px,6vw,64px) 36px; border-top:1px solid var(--glass-border);
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em;
}
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a:hover{ color:var(--ember); }

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200; max-width:520px; margin:0 auto;
  padding:22px; display:flex; flex-direction:column; gap:14px;
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ font-size:.88rem; margin:0; }
.cookie-banner .row{ display:flex; gap:10px; }
.cookie-banner .btn{ padding:10px 18px; font-size:.85rem; }

/* ============ PAGES SIMPLES (légal / 404) ============ */
.legal-page{ padding-top:160px; max-width:760px; }
.legal-page h1{ font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:8px; }
.legal-page .updated{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); margin-bottom:44px; display:block; }
.legal-page h2{ font-size:1.2rem; margin:36px 0 12px; }
.legal-page p, .legal-page li{ margin-bottom:14px; }
.legal-page ul{ padding-left:20px; }
.legal-page .placeholder{ color:var(--ember); }

.notfound{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.notfound .code{ font-family:var(--font-mono); color:var(--ember); font-size:.95rem; letter-spacing:.1em; margin-bottom:18px; }
.notfound h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px; max-width:16ch; }
.notfound p{ max-width:40ch; margin-bottom:32px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .recit{ grid-template-columns:1fr; gap:40px; }
  .recit-visual{ order:-1; }
  .cards{ grid-template-columns:1fr; }
  .entry{ grid-template-columns:1fr; gap:6px; }
}
@media (max-width: 480px){
  header{ padding:16px 20px; }
  section{ padding:80px 20px; }
  .hero{ padding-top:100px; }
  .legal-page{ padding-top:120px; }
}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--ember); outline-offset:3px; border-radius:6px;
}