/* ============================================================
   VERDE — bold-organic archetype (demo #4, concept fictif)
   Reel skills: exploding dish · 3D slider · immersive reveal.
   Palette matches the AI imagery bg (#eef0e2) — seamless blends.
   ============================================================ */
:root {
  --bg: #eef0e2;
  --ink: #1d3a22;
  --green: #2e5d34;
  --leaf: #7fa051;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.5; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.fictif { font-style: normal; font-size: 0.66em; letter-spacing: 0.08em; opacity: 0.7; }
.dot { color: var(--leaf); }

.demo-note {
  background: var(--ink); color: var(--bg);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; padding: 0.5rem 1rem;
}
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
  background: rgb(238 240 226 / 0.9); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
.wm { font-weight: 900; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.links { margin-left: auto; display: flex; gap: 1.5rem; }
.links a { color: var(--green); text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.links a:hover { color: var(--ink); text-decoration: underline; }
.cta {
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.55rem 1.3rem; color: var(--ink); text-decoration: none;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.cta.big { font-size: 1rem; padding: 1rem 2.4rem; }

.kick { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; color: var(--green); margin-bottom: 1rem; }
.h2 { font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3.4rem); letter-spacing: -0.02em; }
.h2 em { font-style: italic; color: var(--green); }

/* hero */
.hero { position: relative; text-align: center; padding: 8vh 1rem 4vh; }
.giant {
  font-weight: 900; font-size: clamp(4.5rem, 20vw, 19rem);
  line-height: 0.82; letter-spacing: -0.04em; color: var(--green);
}
.giant.sm { font-size: clamp(2.6rem, 9vw, 7rem); color: var(--ink); }
.hero-bowl {
  width: min(46vh, 78vw); margin: -4vw auto 0; position: relative; z-index: 1;
}
.hero-bowl img { width: 100%; border-radius: 50%; box-shadow: 0 40px 90px rgb(29 58 34 / 0.25); }
@media (prefers-reduced-motion: no-preference) {
  .hero-bowl { animation: bob 7s ease-in-out infinite alternate; }
  @keyframes bob { to { transform: translateY(-14px) rotate(2deg); } }
  .js .giant { opacity: 0; transform: translateY(30px); animation: pop 0.9s var(--ease) 0.1s forwards; }
  .js .hero-bowl { animation: bob 7s ease-in-out infinite alternate; }
  @keyframes pop { to { opacity: 1; transform: none; } }
}
.hero-line { margin-top: 2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: var(--green); }

.marquee { overflow: hidden; border-block: 2px solid var(--ink); padding: 0.7rem 0; background: var(--leaf); }
.mq-track { display: flex; width: max-content; }
.mq-track span { font-weight: 900; font-size: 0.85rem; letter-spacing: 0.24em; color: var(--ink); white-space: nowrap; padding-right: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq 26s linear infinite; }
  @keyframes mq { to { transform: translateX(-50%); } }
}

/* (01) explosion */
.ex-track { height: 320vh; position: relative; }
.ex-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.ex-stage { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; --ex: 0; }
.ex-bowl { width: min(40vh, 70vw); transition: transform 0.2s linear; transform: scale(calc(1 - var(--ex) * 0.18)); }
.ex-bowl img { width: 100%; border-radius: 50%; }
.ing {
  position: absolute; left: 50%; top: 44%; width: clamp(5.5rem, 11vw, 9rem);
  transform: translate(-50%, -50%)
             translate(calc(var(--tx) * var(--ex)), calc(var(--ty) * var(--ex)))
             scale(calc(0.35 + 0.65 * var(--ex)));
  opacity: calc(var(--ex) * 1.4);
}
.ing img { width: 100%; border-radius: 50%; mix-blend-mode: multiply; }
.ing figcaption {
  margin-top: 0.4rem; font-weight: 900; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ink);
  opacity: calc((var(--ex) - 0.6) * 2.5);
}
.ing figcaption span { display: block; font-weight: 700; font-size: 0.62rem; color: var(--green); letter-spacing: 0.12em; }
.ex-note { padding-bottom: 2.5rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; color: var(--green); }
html:not(.js) .ex-track { height: auto; }
html:not(.js) .ex-sticky { position: static; height: auto; padding: 12vh 0; }
html:not(.js) .ex-stage { --ex: 1; min-height: 80vh; }
@media (prefers-reduced-motion: reduce) {
  .ex-track { height: auto; }
  .ex-sticky { position: static; height: auto; padding: 12vh 0; }
  .ex-stage { --ex: 1 !important; min-height: 80vh; }
}

/* (02) slider 3D */
.sl-track { height: 300vh; position: relative; }
.sl-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  perspective: 1200px;
}
.sl-counter { position: absolute; top: 6rem; right: clamp(1.25rem, 4vw, 3rem); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--green); }
.sl-stage { position: relative; width: min(52vh, 80vw); aspect-ratio: 1; transform-style: preserve-3d; }
.slide {
  position: absolute; inset: 0; text-align: center;
  transition: transform 0.9s var(--ease), opacity 0.7s var(--ease);
  will-change: transform;
}
.slide img { width: 100%; border-radius: 50%; box-shadow: 0 35px 80px rgb(29 58 34 / 0.22); }
.slide figcaption { margin-top: 1.2rem; }
.slide strong { display: block; font-weight: 900; font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: -0.01em; }
.slide span { font-weight: 700; font-size: 1rem; color: var(--green); }
.js .slide.next { transform: translateX(70vw) rotateY(-38deg) scale(0.7); opacity: 0; }
.js .slide.prev { transform: translateX(-70vw) rotateY(38deg) scale(0.7); opacity: 0; }
.js .slide.active { transform: none; opacity: 1; }
html:not(.js) .sl-track { height: auto; }
html:not(.js) .sl-sticky { position: static; height: auto; padding: 10vh 0; gap: 3rem; }
html:not(.js) .slide { position: relative; margin-bottom: 3rem; }
@media (prefers-reduced-motion: reduce) {
  .sl-track { height: auto; }
  .sl-sticky { position: static; height: auto; padding: 10vh 0; }
  .slide { position: relative; transform: none !important; opacity: 1 !important; margin-bottom: 3rem; }
}

/* (03) révélation immersive */
.rv-track { height: 260vh; position: relative; }
.rv-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.rv-img { position: absolute; inset: 0; clip-path: inset(32% 32% 32% 32% round 18px); transform: scale(1.12); will-change: clip-path, transform; }
.rv-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-kick { position: absolute; top: 6rem; left: clamp(1.25rem, 4vw, 3rem); z-index: 2; background: var(--bg); padding: 0.4rem 0.8rem; }
.rv-caption {
  position: absolute; bottom: 3rem; left: 0; right: 0; z-index: 2; text-align: center;
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.2em; color: #fff;
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.5);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
html:not(.js) .rv-track { height: auto; }
html:not(.js) .rv-sticky { position: static; height: 70vh; }
html:not(.js) .rv-img { clip-path: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-track { height: auto; }
  .rv-sticky { position: static; height: 70vh; }
  .rv-img { clip-path: none !important; transform: none !important; }
  .rv-caption { opacity: 1 !important; }
}

/* commander + foot */
.order { text-align: center; padding: 18vh 1rem; }
.order .cta { display: inline-block; margin-top: 2.5rem; }
.order-note { margin-top: 1.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--green); }
.foot { border-top: 2px solid var(--ink); padding: 1.4rem 1rem; text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; color: var(--green); }

@media (max-width: 47rem) {
  .links { display: none; }
  .ing { width: 4.4rem; }
  .ing[style*="--tx:-30vw"] { --tx: -34vw; }
  .sl-counter { top: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* le curseur natif disparaît — seul le nôtre existe (desktop) */
@media (pointer: fine) { *, a, button, input, textarea, select, label { cursor: none !important; } }