/* LUMEROME : base. Seul l'accueil est sombre (forêt à l'aube) ; tout le reste est lumineux et chaud.
   Thème clair verrouillé (pas de mode sombre automatique : le site raconte le retour de la lumière).
   Rayons : interactifs = pilule, conteneurs = 18px, photos = arche. */

:root {
  --bg: #f8f1e5;
  --bg-alt: #f3e7d4;
  --surface: #fffaf1;
  --ink: #2a2119;
  --ink-soft: #5d5044;
  --line: rgb(42 33 25 / 0.14);
  --accent: #a4584a;
  --accent-ink: #8a4638;
  --on-accent: #fffaf3;
  --gold: #a8752e;
  --halo: 255 205 140;
  --tree: #1c3329;
  --pine-950: #0f1a15;
  --glow: #f3d9a6;
  --hero-ink: #f3efe6;
  --hero-ink-soft: #d8d3c5;
  --radius: 18px;
  --shadow: 0 18px 50px -24px rgb(110 70 30 / 0.28);
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-anchor : sans cela, Chrome décale le défilement quand un épinglage change au-dessus de l'écran. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); overflow-anchor: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 420; line-height: 1.1; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); font-variation-settings: "opsz" 96; }
h3 { font-size: 1.4rem; font-weight: 500; font-variation-settings: "opsz" 32; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--ink-soft); font-weight: 400; }
.lead { font-size: 1.25rem; line-height: 1.6; max-width: 62ch; }
.note, .disclaimer { font-size: 0.95rem; color: var(--ink-soft); }
.disclaimer { font-style: italic; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 30; background: var(--surface); padding: .5rem 1rem; border-radius: 999px; }

/* Grain de lin sur tout le site : couche fixe, ne capte aucun clic. */
.grain {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: .11; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halos de lumière dorée qui respirent derrière les sections (position réglée par section). */
.section { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.section::before, .section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  translate: -50% -50%;
}
.section::before {
  width: 80vmax; height: 80vmax; left: var(--h1x, 78%); top: var(--h1y, 0%);
  background: radial-gradient(closest-side, rgb(var(--halo) / .45), rgb(var(--halo) / .12) 55%, rgb(var(--halo) / 0));
}
.section::after {
  width: 60vmax; height: 60vmax; left: var(--h2x, 8%); top: var(--h2y, 85%);
  background: radial-gradient(closest-side, rgb(236 168 138 / .24), rgb(236 168 138 / 0));
}
@media (prefers-reduced-motion: no-preference) {
  .section::before { animation: breathe 13s ease-in-out infinite alternate; }
  .section::after { animation: breathe 17s ease-in-out -7s infinite alternate; }
}
@keyframes breathe { from { scale: .9; opacity: .7; } to { scale: 1.08; opacity: 1; } }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  min-height: 52px; padding: 0 1.5rem; border-radius: 999px;
  font: 600 1.05rem/1 var(--font-body); text-decoration: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .25s, color .25s, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border: 1.5px solid currentColor; color: var(--ink); }
.btn-ghost:hover { background: rgb(42 33 25 / .07); }

/* En-tête */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--header-h);
  color: var(--hero-ink); transition: background-color .35s, color .35s, box-shadow .35s;
}
.site-header.is-solid {
  background: rgb(248 241 229 / .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink); box-shadow: 0 1px 0 var(--line);
}
.nav { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.mark { width: 38px; height: 38px; color: currentColor; --enso-color: var(--accent); --tree-color: currentColor; }
.site-header:not(.is-solid) .mark { --enso-color: #e3a491; }
.brand-name { font: 500 1.2rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; gap: 1.75rem; font-weight: 500; font-size: 1rem; }
.nav-links a { text-decoration: none; padding: .4rem 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s; }
.nav-links a:hover { background-size: 100% 1.5px; }
.nav-cta { min-height: 44px; padding: 0 1.1rem; font-size: .98rem; }
.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; gap: 0;
    background: var(--bg); color: var(--ink); padding: .5rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow); font-size: 1.2rem;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); background: none; }
  .nav-links.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
    border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  }
  .nav-toggle .icon { width: 22px; height: 22px; }
  .nav-toggle-close, .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }
}
@media (max-width: 640px) {
  .nav { gap: .6rem; }
  .nav-cta { padding: 0; width: 44px; justify-content: center; }
  .nav-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Héros : forêt à l'aube, le logo est un soleil qui se lève derrière les pins.
   Aucun parent du soleil ne crée de contexte d'empilement : les halos (screen) se fondent dans la photo. */
.hero {
  position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate;
  background: var(--pine-950); color: var(--hero-ink);
  display: grid; align-items: center; padding-block: calc(var(--header-h) + 2rem) 3rem;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -3; }
.hero-photo--lit { z-index: -2; opacity: 0; filter: brightness(1.7) saturate(1.12) sepia(.2) contrast(.88); }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(15 26 21 / .72) 0, rgb(15 26 21 / 0) 190px),
    linear-gradient(90deg, rgb(15 26 21 / .94) 0%, rgb(15 26 21 / .8) 38%, rgb(15 26 21 / .2) 75%, rgb(15 26 21 / .3) 100%),
    linear-gradient(0deg, rgb(15 26 21 / .55), transparent 40%);
}
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 2rem; }
.hero-copy { position: relative; max-width: 36rem; }
.eyebrow { font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); margin-bottom: 1.25rem; }
.hero h1 { font-size: clamp(2.6rem, 1.5rem + 3.8vw, 4.6rem); font-weight: 380; line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "opsz" 96; }
.hero-sub { margin-top: 1.5rem; font-size: 1.2rem; color: var(--hero-ink-soft); max-width: 30rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }
.hero .btn-primary { background: #c47863; color: #14201a; }
.hero .btn-primary:hover { background: #d58b75; }
.hero .btn-ghost { color: var(--hero-ink); }
.hero .btn-ghost:hover { background: rgb(243 239 230 / .1); }

.hero-visual { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 520px); justify-self: end; }
.sun { position: absolute; inset: 0; pointer-events: none; }
.sun > div { position: absolute; border-radius: 50%; }
.sun-glow {
  inset: -60%; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgb(255 240 208 / .95) 0%, rgb(255 218 156 / .6) 24%, rgb(255 196 128 / .26) 50%, rgb(255 184 116 / .08) 72%, rgb(255 184 116 / 0) 100%);
}
.sun-rays {
  inset: -95%; mix-blend-mode: screen; opacity: .6; will-change: transform, opacity;
  background: repeating-conic-gradient(from 3deg, rgb(255 238 205 / 0) 0deg 5deg, rgb(255 238 205 / .34) 7.5deg, rgb(255 238 205 / 0) 10deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 14%, rgb(0 0 0 / .45) 42%, transparent 78%);
  mask: radial-gradient(closest-side, #000 14%, rgb(0 0 0 / .45) 42%, transparent 78%);
}
@media (prefers-reduced-motion: no-preference) { .sun-rays { animation: spin 180s linear infinite; } }
@keyframes spin { to { rotate: 360deg; } }
/* Avec mouvement, le soleil n'apparaît qu'au défilement ; sans mouvement, il reste fixe et visible. */
.has-motion .sun-glow, .has-motion .sun-rays, .has-motion .sun-core { opacity: 0; }
/* Sans sphère derrière lui, l'arbre est crème pour rester lisible sur la forêt sombre ; il fonce quand la sphère se lève. */
.has-motion .logo--hero { --tree-color: #f4e9d6; }
.sun-core {
  inset: 5%; will-change: transform;
  background: radial-gradient(closest-side, #fffdf8 0%, #fef6e4 50%, #f9e6bf 78%, rgb(247 226 182 / .55) 90%, rgb(247 226 182 / 0) 100%);
  box-shadow: 0 0 60px 18px rgb(255 226 170 / .35);
}
.logo--hero { position: relative; width: 70%; height: auto; will-change: transform, opacity; }
.logo-enso { color: var(--enso-color, #a4584a); }
.logo-tree { color: var(--tree-color, #1c3329); }
.hero-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 72% 45%, #fffaf0 0%, var(--bg) 62%);
}

@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-h) + 1rem); }
  .lead { font-size: 1.12rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-visual { order: -1; width: 40vw; max-width: 200px; justify-self: start; }
  .hero-shade { background: linear-gradient(180deg, rgb(15 26 21 / .7) 0%, rgb(15 26 21 / .88) 55%, rgb(15 26 21 / .95) 100%); }
  .hero h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 2.9rem); }
  .hero-sub { font-size: 1.08rem; margin-top: 1rem; }
  .hero-ctas { margin-top: 1.5rem; }
  .eyebrow { margin-bottom: .75rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}