/* ==========================================================================
   OptiResto — modules créatifs : bandeau défilant, récit horizontal,
   schéma « Tout converge », halo du curseur.
   ========================================================================== */

/* ---------- 1. Bandeau défilant ---------- */
.marquee {
  position: relative; overflow: hidden; padding: 1.4rem 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(56, 189, 248, .04), rgba(74, 222, 128, .04));
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__row { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__row + .marquee__row { margin-top: .6rem; animation-direction: reverse; animation-duration: 46s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__row span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  font-family: var(--font-display); font-weight: 600; white-space: nowrap;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -.02em; color: rgba(248, 250, 252, .9);
}
.marquee__row--ghost span { color: rgba(148, 163, 184, .4); }
.marquee__row span::after { content: "✦"; font-size: .55em; color: var(--cyan); }
.marquee__row--ghost span::after { color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 2. Récit horizontal « Une journée » ---------- */
.story { position: relative; isolation: isolate; padding-block: var(--space-section); }
.story__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.story__head .section__title { max-width: 18ch; }
.story__progress { position: relative; height: 2px; margin-top: 1.75rem; max-width: 420px; background: var(--line); border-radius: 2px; overflow: hidden; }
.story__progress span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--story, 0)); background: linear-gradient(90deg, var(--cyan), var(--green)); }
.story__viewport { overflow: hidden; }
.story__track {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.story__panel {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  width: min(78vw, 560px); min-height: clamp(340px, 52vh, 520px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, rgba(15, 37, 64, .9), rgba(7, 20, 38, .96));
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  transition: border-color .5s, transform .6s var(--ease), opacity .6s;
}
.story.is-pinned .story__panel { opacity: .55; transform: scale(.96); }
.story.is-pinned .story__panel.is-active { opacity: 1; transform: none; border-color: rgba(56, 189, 248, .45); }
.story__time {
  position: absolute; top: clamp(1.25rem, 2.4vw, 2rem); left: clamp(1.75rem, 3vw, 2.75rem);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(3.4rem, 2.4rem + 4vw, 6.5rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(248, 250, 252, .9), rgba(248, 250, 252, .08));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story__icon {
  position: absolute; top: clamp(1.4rem, 2.4vw, 2rem); right: clamp(1.4rem, 2.4vw, 2rem);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  color: var(--amber); background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .25);
}
.story__icon .icon { width: 26px; height: 26px; }
.story__panel::before {
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, .12), transparent 65%);
}
.story__label { color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.story__panel h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; }
.story__panel p { color: var(--grey); max-width: 34ch; }
.story__panel--answer { border-color: rgba(74, 222, 128, .4); background: radial-gradient(ellipse at 100% 100%, rgba(74, 222, 128, .14), transparent 60%), linear-gradient(165deg, rgba(15, 37, 64, .95), rgba(7, 20, 38, .98)); }
.story__panel--answer::before { background: radial-gradient(circle, rgba(56, 189, 248, .16), transparent 65%); }
.story__panel--answer .story__icon { color: var(--green); background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .35); }
.story__panel--answer .link-arrow { margin-top: .6rem; }

/* Épinglage : la section garde l'écran pendant que les panneaux défilent latéralement. */
.story.is-pinned { height: 360vh; padding: 0; }
.story.is-pinned .story__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
@media (max-width: 899px) {
  .story__track { flex-direction: column; padding-inline: var(--gutter); }
  .story__panel { width: 100%; min-height: 300px; }
  .story__progress { display: none; }
}

/* ---------- 3. Schéma « Tout converge » ---------- */
.flow { overflow: hidden; }
.flow::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: min(900px, 90vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  background: radial-gradient(circle, rgba(56, 189, 248, .12), transparent 60%);
}
.flow__figure { margin: 0; }
.flow__canvas { position: relative; max-width: 1080px; margin-inline: auto; }
.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--tall { display: none; max-width: 420px; margin-inline: auto; }
@media (max-width: 760px) {
  .flow__svg--wide { display: none; }
  .flow__svg--tall { display: block; }
}
.flow__link { fill: none; stroke: rgba(148, 163, 184, .2); stroke-width: 1.5; stroke-dasharray: 5 7; transition: stroke .3s, stroke-width .3s; }
.flow__link--out { stroke: rgba(74, 222, 128, .25); }
.flow__link.is-hot { stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: none; }
.flow__link--out.is-hot { stroke: var(--green); }
.flow__pulse--in { fill: var(--cyan); }
.flow__pulse--out { fill: var(--green); }
.flow__node { cursor: default; }
.flow__node rect { fill: rgba(7, 20, 38, .95); stroke: var(--line-strong); stroke-width: 1; transition: stroke .3s, fill .3s; }
.flow__node text { fill: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.flow__svg--tall .flow__node text { font-size: 13px; }
.flow__dot { fill: var(--cyan); }
.flow__node--out .flow__dot { fill: var(--green); }
.flow__node.is-hot rect { stroke: var(--cyan); fill: rgba(15, 37, 64, .98); }
.flow__node--out.is-hot rect { stroke: var(--green); }
.flow__core-halo { fill: rgba(56, 189, 248, .08); transform-box: fill-box; transform-origin: center; animation: core-breathe 4s ease-in-out infinite; }
.flow__core-ring { fill: none; stroke: url(#flow-grad-wide); stroke-width: 2; stroke-dasharray: 6 8; transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
.flow__svg--tall .flow__core-ring { stroke: url(#flow-grad-tall); }
.flow__core-disc { fill: #0A1A2F; stroke: rgba(56, 189, 248, .5); stroke-width: 1.5; }
@keyframes core-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .5; } }
.flow__pulses { opacity: 0; transition: opacity .6s; }
.flow__canvas.is-live .flow__pulses { opacity: 1; }

/* ---------- 4. Halo du curseur ---------- */
.cursor-halo {
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .09), rgba(74, 222, 128, .04) 40%, transparent 68%);
  opacity: 0; transition: opacity .6s;
}
.cursor-halo.is-on { opacity: 1; }
.motion-off .cursor-halo { display: none; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; }
  .flow__pulses { display: none; }
}
@media (forced-colors: active) {
  .story__time { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}