/* ═══════════════════════════════════════════════════════════
   VIZARNE — habillage de l'accueil animé (chargé APRÈS styles.css)
   Jeux de polices (largeur variable, italique serif, contour) et
   de couleurs (corail, bleu électrique, blue ice) sur les scènes.
   Ne touche à aucune dimension calculée par le moteur.
   ═══════════════════════════════════════════════════════════ */
:root {
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --coral: #ff3d5a;
  --electric: #3d5afe;
  --ice: #cbe1f8;
}

/* ── Barre : logo condensé, point corail, CTA qui vire au corail ── */
.dock-wordmark { font-weight: 700; font-stretch: 80%; letter-spacing: -0.045em; }
.dock-wordmark::after { content: '.'; color: var(--coral); }
.dock-link { color: rgba(203, 225, 248, .7); transition: color .3s; }
.dock-link:hover { color: #fff; }
.dock-link::after { background: var(--coral); }
.dock-cta { transition: background-color .3s, color .3s; }
.dock-cta:hover { background: var(--coral); color: #fff; filter: none; }
.loader-wordmark { font-weight: 700; font-stretch: 80%; letter-spacing: -0.045em; }

/* ── Hero : trois voix typographiques ── */
.hero-kicker { color: var(--ice); }
.hero-kicker::before { content: '● '; color: var(--coral); }
.hero-line1 { font-weight: 300; font-stretch: 100%; }
.hero-line2 .hl:first-child { font-family: var(--serif); font-style: italic; letter-spacing: -0.01em; color: var(--ice); }
.hero-line2 .hl:last-child { font-weight: 700; font-stretch: 78%; letter-spacing: -0.04em; }
.spot-intro span:nth-child(3n+2) { font-family: var(--serif); font-style: italic; }
.spot-intro span:nth-child(4) { color: var(--ice); }

/* ── Manifeste : le mot entouré passe en italique, ovale corail ── */
.boxed .fc { font-family: var(--serif); font-style: italic; }
.boxed .fc.on { color: var(--coral); }
.box-svg path { stroke: var(--coral); stroke-width: 1.6; }

/* ── Services (bento) : titre condensé, mot en italique ── */
.coll-title { font-weight: 700; font-stretch: 78%; letter-spacing: -0.045em; font-size: clamp(40px, 6vw, 88px); line-height: .95; }
.coll-head .mono:first-child { color: var(--coral); }
.bento-grid .card { transition: border-color .4s, transform .6s cubic-bezier(.19, 1, .22, 1); }
.bento-grid .card:hover { border-color: var(--coral); }
.bento-grid figcaption { font-weight: 600; font-stretch: 85%; letter-spacing: -0.02em; font-size: 22px; }

/* ── Devise : bande CORAIL, chaque mot dans une voix différente ── */
.band { --lime: #ff3d5a; --lime-ink: #ffffff; }
.mw:nth-child(1) { font-weight: 800; font-stretch: 75%; letter-spacing: -0.05em; }
.mw:nth-child(2) { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--night, #081320); }
.mw:nth-child(3) { font-weight: 300; font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px #ffffff; }
.motto-hint { font-family: var(--mono); }

/* ── Processus : compteur bleu électrique, titres condensés ── */
.night-line .nw:nth-child(2) { font-family: var(--serif); font-style: italic; color: var(--ice); }
.night-line #nw3 { font-weight: 700; font-stretch: 75%; letter-spacing: -0.04em; visibility: hidden; margin-left: .38em; }
.bignum { color: rgba(203, 225, 248, .38); font-weight: 800; font-stretch: 75%; }
.pstep h3 { font-weight: 700; font-stretch: 80%; letter-spacing: -0.04em; }
.pstep-meta { color: var(--ice) !important; }
.cta-oval path { stroke: var(--coral); stroke-width: 1.8; }

/* ── Engagement : guillemet et chiffre en corail, parole en serif ── */
.q-glyph { color: var(--coral); font-family: var(--serif); }
.q-text { font-family: var(--serif); font-style: italic; letter-spacing: -0.01em; }
.q-fig { color: var(--coral); font-weight: 800; font-stretch: 75%; }
.q-name { font-weight: 600; }

/* ── Objections : trois voix + pilule bleu électrique ── */
.pill-svg path { stroke: var(--electric); stroke-width: 2; }
#fs4.on .pill { color: var(--ice); }

/* ── Pied de page : mail en italique, nom géant condensé ── */
.footer-kicker { color: var(--coral) !important; }
.footer-mail-text { font-family: var(--serif); font-style: italic; }
.footer-mail:hover .footer-mail-text { color: var(--coral); }
.footer-name { font-weight: 800; font-stretch: 75%; letter-spacing: -0.06em; color: var(--ice); }
.home-pages {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 34px 0 10px;
}
.home-pages a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 16px; border: 1px solid rgba(203, 225, 248, .3); border-radius: 999px;
  transition: background-color .3s, border-color .3s, color .3s;
}
.home-pages a:nth-child(1):hover { background: var(--electric); border-color: var(--electric); }
.home-pages a:nth-child(2):hover { background: var(--coral); border-color: var(--coral); }
.home-pages a:nth-child(3):hover { background: var(--ice); border-color: var(--ice); color: #081320; }
.home-pages a:nth-child(4):hover { background: #fff; border-color: #fff; color: #081320; }


/* ── Objections : chaque phrase garde sa police dès le départ (seule la couleur s'encre au scroll) ── */
#fs2 { font-family: var(--serif); font-style: italic; }
#fs3 { font-weight: 700; font-stretch: 78%; letter-spacing: -0.04em; }
#trail { display: none !important; }

/* ── Processus : « 3 étapes. » est une fenêtre découpée dans le voile ── */
.s-night .pin { background: var(--electric); }
#grow2, #nightWipe { display: none !important; }
.knock { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 13; pointer-events: none; overflow: visible; }
.knock { color: #081320; }
.s-night .night-line { z-index: 14; }
.s-night .steps-cta { z-index: 15; color: #fff; }
.s-night .pstep p { color: rgba(255, 255, 255, .86); }
body.static .knock { display: none; }
body.static #nw3 { visibility: visible; }

/* ── Menu de l'accueil : vraie barre pleine largeur ── */
.dock {
  top: 0; left: 0; right: 0; width: auto; max-width: none;
  transform: translateY(-100%);
  height: 72px; padding: 0 var(--gutter); gap: 28px;
  border-radius: 0; justify-content: flex-start;
  background: rgba(8, 19, 32, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(203, 225, 248, .14);
}
body.is-ready .dock { transform: translateY(0); }
body.handoff .dock { transform: translateY(0); }
.dock-wordmark { font-size: 26px; margin-right: auto; }
.dock-nav { gap: 8px; margin-right: 0; }
.dock-link { padding: 10px 12px; font-size: 12px; }
.dock-cta { padding: 13px 20px; border-radius: 999px; font-size: 12px; }
.home-burger { display: none; width: 40px; height: 34px; position: relative; }
.home-burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #fff; transition: transform .4s cubic-bezier(.19,1,.22,1), top .4s cubic-bezier(.19,1,.22,1); }
.home-burger span:first-child { top: 13px; } .home-burger span:last-child { top: 20px; }
.menu-open .home-burger span:first-child { top: 16.5px; transform: rotate(45deg); }
.menu-open .home-burger span:last-child { top: 16.5px; transform: rotate(-45deg); }
.home-menu {
  position: fixed; inset: 0; z-index: 99; background: #3d5afe; color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 90px var(--gutter) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.77,0,.175,1);
}
.menu-open .home-menu { clip-path: inset(0 0 0 0); }
.home-menu a { font-weight: 700; font-stretch: 75%; font-size: clamp(48px, 15vw, 96px); line-height: .95; letter-spacing: -.035em; }
.home-menu a:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; }
@media (max-width: 900px) {
  .dock { left: 0; right: 0; top: 0; height: 64px; padding: 0 var(--gutter); gap: 12px; transform: translateY(-100%); }
  body.is-ready .dock, body.handoff .dock { transform: translateY(0); }
  .dock-nav { display: none !important; }
  .home-burger { display: block; }
  .dock-wordmark { font-size: 22px; }
}
@media (max-width: 480px) { .dock-cta { display: none; } }
.dock { z-index: 200; }
.home-menu { z-index: 150; }
.home-burger { background: none; border: 0; padding: 0; cursor: pointer; }


/* ── Devise : glisser à la souris ── */
.s-motto .pin { user-select: none; -webkit-user-select: none; touch-action: pan-y; }
html.is-dragging, html.is-dragging * { user-select: none !important; }

/* ── « Démarrer un projet → » après les 3 étapes : soulignement au survol, appui au clic ── */
#stepsCtaLink { transition: transform .18s cubic-bezier(.19, 1, .22, 1); }
#stepsCtaLink::after {
  content: ''; position: absolute; left: .55em; right: .55em; bottom: .12em; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.77, 0, .175, 1);
}
#stepsCtaLink:hover::after, #stepsCtaLink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
#stepsCtaLink:active, #stepsCtaLink.is-pressed { transform: scale(.93) translateY(2px); }

/* ── Forme corail entre « Mise en ligne » (03) et l'engagement ── */
.s-quote .seam-mark {
  position: absolute; left: 50%; top: 0; z-index: 30;
  width: clamp(56px, 5.6vw, 84px); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  fill: #ff3d5a; pointer-events: none;
}
/* le bouton « Démarrer un projet » remonte pour laisser la place à la forme */
.s-night .steps-cta { bottom: 17vh; }
@media (max-width: 900px) { .s-night .steps-cta { bottom: 14vh; } }
.s-night .steps-cta { font-size: clamp(28px, 3vw, 42px); } @media (max-width: 900px) { .s-night .steps-cta { font-size: clamp(22px, 6.4vw, 30px); } }

/* ── Passage 03 → engagement : la forme corail en 3D (calque au-dessus de la page) ── */
.seam-fx { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.seam-fx[hidden] { display: none; }
.sf-back { position: absolute; inset: 0; background: #081320; opacity: 0; }
.sf-box { position: absolute; left: 0; top: 0; perspective: 1100px; will-change: transform; }
.sf-rot { position: absolute; inset: 0; transform-style: preserve-3d; --fill: #ff3d5a; --side: #c4243d; --depth: 0px; will-change: transform; }
.sf-rot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--i) * var(--depth))); backface-visibility: visible; }
.sf-rot .sf-face { fill: var(--fill); }
.sf-rot .sf-side { fill: var(--side); }
.sf-veil { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }

/* Processus : une photo par étape, entre le texte et le grand numéro */
.pshots { position: absolute; left: 47vw; top: 50%; width: min(28vw, 500px); height: min(58vh, 620px); transform: translateY(-50%); z-index: 10; pointer-events: none; }
.pshot { position: absolute; inset: 0; margin: 0; border-radius: 22px; overflow: hidden; opacity: 0; visibility: hidden; clip-path: inset(100% 0 0 0 round 22px); box-shadow: 0 40px 90px -40px rgba(8, 19, 32, .75); will-change: clip-path, opacity; }
.pshot img { width: 100%; height: 115%; margin-top: -7.5%; object-fit: cover; display: block; transform: scale(1.16); will-change: transform; }
@media (max-width: 900px) {
  .pshots { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 6vh; height: 26vh; transform: none; }
}
body.static .pshots { display: none; }

.dock-wordmark, .loader-wordmark { font-weight: 800; letter-spacing: -.03em; }
.dock-wordmark::after { content: none; }
.footer-name { letter-spacing: -.045em; }

/* ── Logo officiel Vizarne (fichier SVG fourni, jamais retapé avec une police) ── */
.vz-logo { display: inline-block; height: .8em; width: auto; aspect-ratio: 3270 / 745; vertical-align: -.02em; overflow: hidden; }
.vz-logo .vz-txt path { fill: currentColor; }
.vz-logo .vz-dot { fill: #ff3d5a; }
/* accueil : le grand nom du bas de page monte lettre par lettre */
.footer-name .vz-l, .footer-name .vz-dot { transform-box: fill-box; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
.footer-name .vz-l { transform: translateY(118%); }
.footer-name .vz-dot { transform: translateY(520%); }
.footer-name.in-view .vz-l, .footer-name.in-view .vz-dot, body.static .footer-name .vz-l, body.static .footer-name .vz-dot { transform: none; }