/* Sonezia v2 — overrides : hero waves, typography, sequenced reveals, respiration */

/* Typography lift — Fraunces for display, DM Sans for body */

:root{
  --section-y: clamp(110px, 12vw, 200px);
  --content-w: 1180px;
}

/* Unified type system — DM Sans (matches the Sonezia wordmark) with the italic-v as the only serif accent */
.h-display{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(48px, 7.2vw, 100px);
  letter-spacing:-0.035em;
  line-height:1.02;
}
.h-display b, .h-display strong{ font-weight:800; font-style:normal; }
.h-display .hl{
  font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif;
  font-style:italic; font-weight:600;
  color:#9ec5ff;
  letter-spacing:-0.01em;
}
.h-display .hl::after{ display:none; }
.hero__line{ display:block; }

/* Section titles — single color per surface (no mix), word-stagger reveal */
.h-section{ letter-spacing:-0.03em; font-weight:700; color:#0F172A; }
.section--marine .h-section, .section--marine .h-section em, .section--marine .h-section *{ color:#fff !important; }
.section--marine .eyebrow--on-dark{ color:rgba(255,255,255,.7); }

/* Word-by-word title reveal */
.h-section .word{ display:inline-block; opacity:0; transform:translateY(14px); filter:blur(4px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1), filter 700ms cubic-bezier(.2,.8,.2,1); }
.section__head.is-in .h-section .word{ opacity:1; transform:none; filter:none; }

/* Hero respire — recadrer largeurs, espacer (waves taller relative to text) */
.hero{ min-height: 78vh; }
.hero__title{ max-width: 14ch; margin-top: 24px; }
.hero__sub{ margin-top: 28px; max-width: 48ch; font-size:clamp(17px,1.35vw,20px); color:rgba(239,246,255,.78); }
.hero__cta-row{ margin-top: 36px; }
.hero__metrics{ display:none; } /* on déplace les chiffres vers section gains */
.hero__badge{ animation:none; padding:10px 16px 10px 12px; font-size:13.5px; }

/* Waves canvas — full bleed */
canvas.hero__canvas{ opacity: 1 !important; }

/* Hero — clean blue gradient, no weird washes; waves can take more vertical space */
.hero.section--marine{
  background: linear-gradient(180deg, #0c2553 0%, #0a1f48 45%, #07173a 100%);
  min-height: 78vh;
}
.section--marine{
  background: linear-gradient(180deg, #0c2553 0%, #0a1f48 60%, #07173a 100%);
}
.hero__glow{ opacity:.35 !important; background: radial-gradient(circle at 50% 28%, rgba(158,197,255,.18), transparent 60%) !important; }
.hero__aurora-2{ opacity:.25 !important; }
.hero__title{
  text-shadow:
    0 2px 40px rgba(0,0,0,.55),
    0 0 80px rgba(30,80,200,.30),
    0 0 160px rgba(20,60,160,.20);
}
.hero__sub{
  color:rgba(255,255,255,.86) !important;
  text-shadow: 0 1px 28px rgba(0,0,0,.45), 0 0 60px rgba(30,80,180,.22);
}
/* Radial glow behind hero text — fuses text into the wave atmosphere */
.hero__inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 72% 56% at 38% 44%, rgba(14,60,180,.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 60%, rgba(8,30,120,.18) 0%, transparent 65%);
  z-index:0;
}
.hero__inner > *{ position:relative; z-index:1; }

/* Subtle horizon line at hero bottom */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(158,197,255,.35) 20%, rgba(158,197,255,.35) 80%, transparent);
  z-index:1;
}

/* Sequenced reveal — eyebrow line draws, then eyebrow text, then title */
.section__head .eyebrow{
  opacity:0; transform:translateY(4px);
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1) 200ms, transform 600ms cubic-bezier(.2,.8,.2,1) 200ms;
}
.section__head .eyebrow::before{
  width:0;
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
}
.section__head.is-in .eyebrow{ opacity:1; transform:none; }
.section__head.is-in .eyebrow::before{ width:40px; }

.section__head .h-section{
  opacity:0; transform:translateY(8px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1) 500ms, transform 700ms cubic-bezier(.2,.8,.2,1) 500ms;
}
/* one-way — once .is-in is applied it stays */
.section__head.is-in .h-section,
.section__head.is-in .word{ opacity:1 !important; transform:none !important; filter:none !important; }
.section__head .lead{
  opacity:0; transform:translateY(8px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1) 700ms, transform 700ms cubic-bezier(.2,.8,.2,1) 700ms;
}
.section__head.is-in .h-section,
.section__head.is-in .lead{ opacity:1; transform:none; }

/* Eyebrow style refresh — longer, thinner line */
.eyebrow{ font-size:12px; letter-spacing:.14em; }
.eyebrow::before{ width:40px; height:1px; opacity:.8; }

/* Cards : more air */
.card{ padding:36px; border-radius:18px; }
.card__title{ font-family:'DM Sans',sans-serif; font-weight:700; letter-spacing:-0.02em; font-size:22px; }
.card__icon{
  width:56px !important; height:56px !important;
  border-radius:14px;
  background: linear-gradient(180deg, #f4f1e8, #ebe6d6) !important;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  color:#1e3a8a;
}
.card__icon svg{ width:28px; height:28px; }

/* Section transitions — eyebrow on dark */
.eyebrow--on-dark{ color:#9ec5ff; }

/* Step cards align with new type */
.step__title{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:21px; letter-spacing:-0.02em; }

/* Trust items */
.trust__item h4{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.015em; }

/* Tools strip — keep the marquee animated (user likes it), just refine spacing */
.tools-strip{ padding-block:24px; background:#fbf9f1; }
.tool-item{ padding:10px 36px; font-size:14.5px; }
.tool-item svg{ width:22px; height:22px; }

/* Gains tags — better distinguished from labels */
.gain__tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(158,197,255,.1); border:1px solid rgba(158,197,255,.25);
  color:#bcd6ff; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.gain__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:#9ec5ff; }
.gain__label{ color:rgba(239,246,255,.78); }
.gain__label b{ color:#fff; font-weight:600; }

/* Gains — tout en blanc, contraste fort */
.gain{ padding:48px 36px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.gain__value{ font-family:'DM Sans',sans-serif; font-weight:800; font-size:clamp(64px,8vw,104px); letter-spacing:-0.055em; color:#fff !important; }
.gain__value .unit, .gain__value .dash, .gain__value span{ color:#fff !important; }
.gain__label, .gain__label b{ color:rgba(255,255,255,.85) !important; }

/* H-section accent on dark stays white (single-color rule) */
.section--marine .h-section em{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:#fff; }

/* Workflow — opacity-only reveal (CSS transform on <g> would override the SVG translate and break node positioning) */
.workflow .wf-node{ opacity:0; transition: opacity 600ms cubic-bezier(.2,.8,.2,1); }
.workflow .wf-wire{ stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 900ms cubic-bezier(.2,.8,.2,1); }
.workflow .wf-pulse{ opacity:0; transition: opacity 300ms ease; }
.workflow.is-playing .wf-pulse{ opacity:1; }
.workflow .wf-node[data-stage="in"]{ opacity:1; }
.workflow .wf-wire[data-stage="in"]{ stroke-dashoffset:0; }

/* ── Extra micro-animations across the page ─────────────── */

/* Sectors cards : scale-in + hover float */
.grid-4 .card.reveal{
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1), transform 800ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms ease;
  transform: translateY(24px) scale(.985);
}
.grid-4 .card.reveal.is-in{ transform:translateY(0) scale(1); }
.grid-4 .card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -20px rgba(15,23,42,.25); }
.card__icon{ transition: transform 350ms cubic-bezier(.2,.8,.2,1); }
.grid-4 .card:hover .card__icon{ transform:scale(1.06) rotate(-2deg); }
.card__foot svg{ transition:transform 250ms ease; }
.grid-4 .card:hover .card__foot svg{ transform:translateX(4px); }

/* Trust : icon pop + path-draw + hover bounce */
.trust__item.reveal .ic{
  opacity:0; transform: scale(.7) rotate(-8deg);
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1) 200ms, transform 700ms cubic-bezier(.34,1.56,.64,1) 200ms;
}
.trust__item.reveal.is-in .ic{ opacity:1; transform: scale(1) rotate(0); }
.trust__item .ic svg{ transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.trust__item:hover .ic svg{ transform: scale(1.15); }
.trust__item.reveal .ic svg path,
.trust__item.reveal .ic svg rect,
.trust__item.reveal .ic svg line,
.trust__item.reveal .ic svg circle{
  stroke-dasharray:80; stroke-dashoffset:80;
  transition: stroke-dashoffset 1100ms cubic-bezier(.2,.8,.2,1) 500ms;
}
.trust__item.reveal.is-in .ic svg path,
.trust__item.reveal.is-in .ic svg rect,
.trust__item.reveal.is-in .ic svg line,
.trust__item.reveal.is-in .ic svg circle{ stroke-dashoffset:0; }

/* Steps : number drop-in + connector draw */
.step__num{
  opacity:0; transform:translateY(-6px);
  transition: opacity 600ms ease 400ms, transform 600ms cubic-bezier(.34,1.56,.64,1) 400ms;
}
.step.reveal.is-in .step__num{ opacity:1; transform:translateY(0); }
.steps__connector path{
  stroke-dasharray:400; stroke-dashoffset:400;
  transition: stroke-dashoffset 1800ms cubic-bezier(.2,.8,.2,1) 800ms;
}
.steps:has(.step.is-in) .steps__connector path{ stroke-dashoffset:0; }

/* Gains : number bloom-in */
.gain.reveal.is-in .gain__value{ animation: gainBloom 900ms cubic-bezier(.2,.8,.2,1) 400ms both; }
@keyframes gainBloom{
  0%   { opacity:0; transform:translateY(8px) scale(.96); filter:blur(4px); }
  60%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* Availability pill */
.availability.reveal{
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.34,1.56,.64,1);
  transform: translateY(20px) scale(.94);
}
.availability.reveal.is-in{ transform: translateY(0) scale(1); }

/* ── Intro (écran de bienvenue, une fois par session, sur n'importe quelle page d'entrée) ─── */
.intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #0c2553 0%, #0a1f48 45%, #07173a 100%);
  transition: opacity 1400ms cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.intro.is-done{ opacity:0; pointer-events:none; }
.intro__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.9;
}
.intro__word{
  position:relative; z-index:1;
  display:inline-flex;
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(42px, 9vw, 110px);
  letter-spacing:-0.035em;
  color:#fff;
  text-shadow: 0 2px 40px rgba(0,0,0,.55), 0 0 80px rgba(30,80,200,.30);
}
.intro__word span{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  transition: opacity 550ms cubic-bezier(.2,.8,.2,1), transform 550ms cubic-bezier(.2,.8,.2,1);
}
.intro__word span.is-in{ opacity:1; transform:translateY(0); }
.intro__word .intro__accent{
  font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif;
  font-style:italic;
  font-weight:600;
  color:#60A5FA;
}
/* Le "S" de l'intro est l'icône du logo — même animation d'entrée/sortie que les lettres */
.intro__word .intro__s{ display:inline-flex; align-items:center; }
.intro__word .intro__s img{ height:1.15em; width:auto; display:block; }
body.intro-active{ overflow:hidden; }

/* La page en dessous — invisible tant que l'intro joue, puis apparaît doucement (fondu croisé) */
body > :not(.intro){ opacity:1; }
body.intro-pending > :not(.intro){ opacity:0; }
body.intro-revealing > :not(.intro){
  opacity:1;
  transition: opacity 1300ms cubic-bezier(.16,1,.3,1);
}