/* ==========================================================
   BSA · IA — feuille de style
   Couleurs issues du logo : gris du triangle, noir, vert-bleu
   ========================================================== */
:root {
  --bg: #04060a;
  --ink: #f3f6f5;
  --muted: #b8c3c1;
  --dim: #8a9795;
  --teal: #0f9384;      /* vert du logo */
  --teal-hi: #3fd3c0;   /* version lumineuse, lisible sur fond sombre */
  --teal-lo: #0a6a60;
  --gray: #a4abaa;      /* gris du triangle */
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-em: "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --gutter: clamp(20px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* la page est rognée à sa propre taille : le zoom d'un changement d'interface (js/views.js) ne modifie jamais
   la hauteur de défilement (barre de défilement immobile) */
@supports (overflow: clip) {
  html { overflow-x: hidden; }
  body { overflow: clip; }
}
::selection { background: var(--teal); color: #fff; }

/* ---------- Barre de défilement aux couleurs du logo ---------- */
:root { color-scheme: dark; }
/* Chrome, Edge, Safari : rail fin + poignée en dégradé vert */
::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 5.5px, rgba(255,255,255,.07) 5.5px, rgba(255,255,255,.07) 6.5px, transparent 6.5px), var(--bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--teal-hi), var(--teal) 60%, var(--teal-lo)) padding-box;
  border: 3px solid transparent; /* le liseré transparent affine la poignée */
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8ff3e6, var(--teal-hi) 60%, var(--teal)) padding-box;
  border-width: 2px;
}
::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #fff, var(--teal-hi)) padding-box; }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background-color: transparent; }
/* Firefox : version simplifiée (seules la couleur et l'épaisseur sont réglables) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--teal) var(--bg); }
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0; }
strong { font-weight: 500; color: #fff; }

/* Mot mis en avant : police élaborée + dégradé dans les couleurs du logo */
.em {
  font-family: var(--f-em);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  background: linear-gradient(100deg, #ffffff 0%, var(--teal-hi) 50%, #d8dddc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
  text-shadow: none !important;
}
.hero-title .em { background-size: 200% 100%; animation: shimmer 7s var(--ease-soft) infinite alternate; }
/* bannière sortie de l'écran : le reflet (qui redessine le texte à chaque image) et l'indicateur de défilement s'arrêtent */
.hero-off .hero-title .em, .hero-off .scroll-hint i::after { animation-play-state: paused; }
@keyframes shimmer { to { background-position: 100% 0; } }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--teal-hi);
  font-weight: 500;
}

.lead { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 38em; }

/* ---------- Fond cosmique ---------- */
#cosmos, .cosmos-fallback, .calm-veil {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* la galaxie apparaît en fondu une fois ses images fluides */
#cosmos { z-index: 0; opacity: 0; transition: opacity 2.2s var(--ease-soft); }
.cosmos-ready #cosmos { opacity: 1; }
/* lueur douce visible dès l'ouverture, recouverte en fondu par la galaxie (fond de secours sans 3D) */
html:not(.js) .cosmos-fallback, .no-webgl .cosmos-fallback { opacity: 1; }
.cosmos-fallback {
  z-index: -1;
  opacity: .5;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(15,147,132,.35), transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(164,171,170,.12), transparent 50%),
    var(--bg);
}
/* Voile doux qui calme le fond dans la section Offres */
.calm-veil {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(15,147,132,.16), transparent 70%),
    radial-gradient(50% 50% at 85% 70%, rgba(164,171,170,.08), transparent 70%),
    rgba(4,6,10,.74);
}
body.calm .calm-veil { opacity: 1; }

.aura {
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63,211,192,.10), rgba(63,211,192,.03) 40%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
  will-change: transform;
}
body.has-pointer .aura { opacity: 1; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal-lo), var(--teal-hi), var(--gray));
}

.stage, main, .footer { position: relative; z-index: 3; }

/* ---------- Intro en 3 temps : forme 8D + galaxie, puis logo, puis texte ---------- */
.js:not(.intro-logo) .hero-logo,
.js:not(.ready) .nav,
.js:not(.ready) .scroll-hint { opacity: 0; animation: none; }
.js:not(.js-run) [data-split] { opacity: 0; } /* titres masqués tant qu'ils ne sont pas découpés en mots */

/* ---------- Navigation transparente ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: padding .5s var(--ease);
  animation: navIn 1.2s var(--ease) .2s backwards;
}
/* simple fondu vers le haut pour garder les liens lisibles au-dessus du contenu */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -36px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(4,6,10,.78), rgba(4,6,10,0));
  opacity: 0; transition: opacity .6s;
}
.nav.is-scrolled { padding-top: 14px; padding-bottom: 14px; }
.nav.is-scrolled::before { opacity: 1; }
@keyframes navIn { from { opacity: 0; transform: translateY(-20px); } }
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo img { height: 42px; width: auto; }
/* nom de la société disposé comme sur le logo : trois lignes derrière la barre verte */
.nav-name {
  position: relative; display: flex; flex-direction: column; padding-left: 11px;
  font-size: .66rem; line-height: 1.22; letter-spacing: .16em; font-weight: 500;
  text-transform: uppercase; color: var(--teal-hi); text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.nav-name::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; background: var(--teal); }
.nav nav { display: flex; gap: clamp(18px, 3.5vw, 48px); }
.nav nav a {
  position: relative;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
  color: var(--muted);
  padding: 6px 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
  transition: color .4s;
}
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--teal-hi);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.nav nav a:hover, .nav nav a.is-active { color: #fff; }
.nav nav a:hover::after, .nav nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Liens d'action (sans bord ni fond) ---------- */
.link-cta {
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  font: inherit; font-size: .95rem; font-weight: 500; letter-spacing: .04em;
  color: #fff; background: none; border: 0; padding: 8px 0; cursor: pointer;
  transition: color .4s, text-shadow .5s;
}
.link-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, var(--teal-hi), transparent);
  transform-origin: left; transition: transform .7s var(--ease);
}
.link-cta i { font-style: normal; color: var(--teal-hi); transition: transform .5s var(--ease); }
.link-cta:hover { color: var(--teal-hi); text-shadow: 0 0 24px rgba(63,211,192,.55); }
.link-cta:hover i { transform: translateX(6px); }
.link-cta:hover::after { transform: scaleX(1.15); }
.link-cta--soft { color: var(--muted); }
.link-cta--soft::after { background: linear-gradient(90deg, var(--gray), transparent); }
.magnetic { transition: transform .5s var(--ease), color .4s, text-shadow .5s, border-color .4s, box-shadow .5s; }

/* ---------- Apparitions (opacité + mouvement, sans flou coûteux) ---------- */
[data-reveal] { transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }

[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .14em; margin: -.04em -.02em -.14em; }
[data-split] .wi {
  display: inline-block;
  transform: translate3d(0, 115%, 0) rotate(5deg);
  transform-origin: 0 100%;
  transition: transform 1.2s var(--ease) calc(var(--d, 0ms) + var(--i) * 60ms);
}
[data-split].is-in .wi { transform: none; }

/* ---------- HERO plein écran ---------- */
/* deux rangées : le contenu centré, puis l'indicateur « Défiler » en bas — quand le contenu est haut,
   l'indicateur passe dessous au lieu de recouvrir les boutons */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  text-align: center;
  padding: clamp(96px, 14.6vh, 120px) var(--gutter) 28px;
}
/* tailles liées aussi à la hauteur de l'écran : sur un portable peu haut, tout le texte et les boutons
   tiennent dans l'écran ; sur les écrans plus hauts, rien ne change */
.hero-inner { max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.2vh, 26px); }
.hero-logo {
  width: clamp(210px, min(25vw, 30vh), 320px); height: auto;
  filter: blur(0) drop-shadow(0 0 28px rgba(15,147,132,.35));
  animation: logoIn 1.5s var(--ease) backwards;
}
@keyframes logoIn { from { opacity: 0; transform: scale(.86); filter: blur(12px) drop-shadow(0 0 0 rgba(15,147,132,0)); } }
.hero-title {
  font-size: clamp(2.6rem, min(7.4vw, 10.5vh), 6.8rem);
  font-weight: 300;
  letter-spacing: -.035em;
  text-shadow: 0 3px 24px rgba(0,0,0,.55);
  max-width: 13em;
}
/* éléments animés de l'intro : préparés à l'avance par le navigateur, sans à-coup au démarrage */
.hero [data-split] .wi, .hero [data-reveal] { will-change: transform, opacity; }
.hero-logo { will-change: transform, opacity, filter; }
/* intro terminée : ces calques sont libérés (sinon ils coûtent un peu à chaque image) */
.intro-done .hero [data-split] .wi, .intro-done .hero [data-reveal], .intro-done .hero-logo { will-change: auto; }
.hero-title .em { font-weight: 500; font-size: 1.08em; }
.hero-sub { color: #d3dcda; font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 36em; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.hero-cta { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 32px; /* écart minimal avec les boutons */
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
  animation: fadeIn 1s 1.6s backwards;
}
.scroll-hint i { width: 1px; height: 54px; background: linear-gradient(var(--teal-hi), transparent); position: relative; overflow: hidden; }
.scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: #fff; transform: translateY(-100%); animation: drip 2.2s var(--ease-soft) infinite;
}
/* écran peu haut ou téléphone : l'indicateur ne tiendrait pas en entier, il est masqué ; le contenu garde de l'air en bas */
@media (max-height: 800px), (max-width: 560px) {
  .scroll-hint { display: none; }
  .hero { padding-bottom: 100px; }
}
/* portable très peu haut (zoom Windows à 150 % par exemple) : le logo rétrécit un peu, les boutons restent visibles */
@media (max-height: 640px) and (min-width: 561px) {
  .hero-logo { width: clamp(150px, 30vh, 210px); }
}
@keyframes drip { to { transform: translateY(260%); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Manifeste : lisible d'un coup, vague de lumière à l'apparition ---------- */
.manifesto { min-height: 80vh; display: grid; place-items: center; padding: 14vh var(--gutter); }
.manifesto-text {
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  line-height: 1.25; letter-spacing: -.02em; font-weight: 300;
  max-width: 1100px; text-align: center;
  text-shadow: 0 2px 18px rgba(4,6,10,.9);
}
.manifesto-text .w { overflow: visible; }
.manifesto-text .wi {
  transform: translate3d(0, .3em, 0);
  color: rgba(243,246,245,.28);
  transition: transform 1s var(--ease) calc(var(--i) * 28ms), color 1s var(--ease) calc(var(--i) * 28ms);
}
.manifesto-text.is-in .wi { transform: none; color: #fff; }
.manifesto-text .em { opacity: .35; transition: opacity 1s var(--ease) calc(var(--i) * 28ms); }
.manifesto-text.is-in .em { opacity: 1; }

/* ---------- Chiffres ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding: 4vh var(--gutter) 12vh; max-width: 1300px; margin: 0 auto; text-align: center;
}
.stat b {
  display: block; font-family: var(--f-em); font-style: italic; font-weight: 500;
  font-size: clamp(4rem, 9vw, 8rem); line-height: 1;
  background: linear-gradient(180deg, #fff, var(--teal-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: .95rem; }

/* ---------- Méthode : frise entière visible, animée à l'apparition ---------- */
.process { padding: 12vh var(--gutter) 16vh; max-width: 1440px; margin: 0 auto; }
.process-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 10vh; }
.process-head h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 300; }

.timeline { position: relative; }
.timeline ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(24px, 2.6vw, 44px);
}
/* le trait : piste + remplissage + éclat qui voyage */
.timeline-line { position: absolute; left: 0; right: 0; top: 4px; height: 9px; overflow: hidden; pointer-events: none; }
.timeline-line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(255,255,255,.12); }
.timeline-line span {
  position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: linear-gradient(90deg, var(--teal-lo), var(--teal-hi) 55%, var(--gray));
  box-shadow: 0 0 10px rgba(63,211,192,.7);
  transform-origin: left;
  transition: transform 2.2s var(--ease) .15s;
}
.js .timeline:not(.is-in) .timeline-line span { transform: scaleX(0); }
.timeline-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 9px;
  background: radial-gradient(closest-side, #fff, rgba(63,211,192,.55) 45%, transparent) no-repeat 0 0 / 110px 9px;
  transform: translateX(-110px); opacity: 0;
}
.timeline.is-in .timeline-line::after { opacity: 1; animation: travelX 5.5s var(--ease-soft) 2.4s infinite; }
@keyframes travelX { from { transform: translateX(-110px); } to { transform: translateX(100%); } }
@keyframes travelY { from { transform: translateY(-110px); } to { transform: translateY(100%); } }

.step { position: relative; padding-top: 44px; }
.step::before, .step::after {
  content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%;
}
.step::before {
  background: var(--teal-hi);
  box-shadow: 0 0 0 4px rgba(63,211,192,.15), 0 0 18px var(--teal-hi);
  transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(.25s + var(--n) * .4s);
}
.step::after { border: 1px solid rgba(63,211,192,.8); opacity: 0; }
.js .timeline:not(.is-in) .step::before { transform: scale(0); }
.timeline.is-in .step::after { animation: ring 3.6s var(--ease-soft) calc(2.4s + var(--n) * .55s) infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

.step > * { transition: opacity .9s var(--ease) calc(.35s + var(--n) * .4s), transform .9s var(--ease) calc(.35s + var(--n) * .4s); }
.js .timeline:not(.is-in) .step > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.step b {
  display: block; font-family: var(--f-em); font-style: italic; font-weight: 400;
  font-size: clamp(3.2rem, 4.6vw, 4.8rem); line-height: 1; color: transparent;
  background: linear-gradient(180deg, var(--teal-hi), rgba(63,211,192,.15));
  -webkit-background-clip: text; background-clip: text;
}
.step h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem); margin: 14px 0 10px; font-weight: 500;
  transition: opacity .9s var(--ease) calc(.35s + var(--n) * .4s), transform .9s var(--ease) calc(.35s + var(--n) * .4s), color .4s;
}
.step p { color: var(--muted); font-size: .95rem; }
.step:hover h3 { color: var(--teal-hi); }
.step, .offers, .contact-inner { text-shadow: 0 2px 18px rgba(4,6,10,.9); }

/* ---------- Offres : fond calme ---------- */
.offers { position: relative; padding: 16vh var(--gutter) 16vh; max-width: 1400px; margin: 0 auto; }
.offers-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 12vh; }
.offers-head h2 { font-size: clamp(2.3rem, 5.4vw, 4.8rem); font-weight: 300; }

.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 56px); }
.offer .link-cta { white-space: nowrap; }
.offer-num { font-size: .78rem; letter-spacing: .3em; color: var(--dim); }
.offer-name {
  font-family: var(--f-em); font-style: italic; font-weight: 500;
  font-size: clamp(2.8rem, 4vw, 4.4rem); letter-spacing: -.01em;
  margin: 10px 0 4px; color: #fff;
  transition: color .5s, text-shadow .5s;
}
.offer:hover .offer-name { color: var(--teal-hi); text-shadow: 0 0 40px rgba(63,211,192,.4); }
.offer-by { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); }
.offer-pitch { font-size: 1.15rem; color: #e6ecea; margin: 22px 0; font-weight: 400; }
.offer ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.offer li, .service-points li { position: relative; padding-left: 22px; color: var(--muted); font-size: .97rem; }
.offer li::before, .service-points li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-hi); box-shadow: 0 0 10px var(--teal-hi);
}
.offer-fit { font-size: .92rem; color: var(--dim); margin-bottom: 18px; }
.offer-fit span { color: var(--teal-hi); font-weight: 500; margin-right: 6px; }

/* Prestations : trois grandes lignes aérées (sans cadre : un fin trait lumineux les sépare et ferme la liste) */
.offers + .offers { padding-top: 8vh; } /* rubrique suivante (IA installées) : séparée par l'espace et son propre titre */
.service {
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: clamp(64px, 8vw, 120px) minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "num head points" "num cta points";
  grid-template-rows: auto 1fr; /* le lien reste sous le titre, même quand la liste est plus haute */
  gap: 0 clamp(24px, 4vw, 64px);
  padding: clamp(48px, 8vh, 88px) 0;
}
.service::before, .service:last-child::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,211,192,.45), transparent);
}
.service:last-child::after { top: auto; bottom: 0; }
.service-num {
  grid-area: num;
  font-family: var(--f-em); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 4.4vw, 4.6rem); line-height: .9; color: transparent;
  background: linear-gradient(180deg, var(--teal-hi), rgba(63,211,192,.15));
  -webkit-background-clip: text; background-clip: text;
}
.service-head { grid-area: head; }
.service-name { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; }
.service-pitch { font-size: 1.1rem; color: #e6ecea; margin: 14px 0 20px; }
.service-points { grid-area: points; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.service .link-cta { grid-area: cta; justify-self: start; }
@media (max-width: 899px) {
  .service { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "num" "head" "points" "cta"; }
  .service-num { margin-bottom: 12px; }
  .service .link-cta { margin-top: 22px; }
}

.formulas { margin-top: 16vh; text-align: center; }
.formula-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 34px 0 28px; }
.formula h4 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 10px; }
.formula p { color: var(--muted); max-width: 22em; margin: 0 auto; }
.formula-note { color: var(--dim); font-size: .9rem; }

/* ---------- Bandeau défilant ---------- */
.marquee { overflow: hidden; padding: 6vh 0; position: relative; z-index: 3; }
.marquee-track {
  display: flex; align-items: center; gap: 4vw; width: max-content;
  padding-right: 4vw; /* les deux moitiés font exactement la même largeur : boucle sans à-coup */
  font-size: clamp(3rem, 9vw, 8rem); font-weight: 300; letter-spacing: -.03em; white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee-track span { color: rgba(243,246,245,.88); }
.marquee-track i { font-style: normal; font-size: .4em; color: var(--teal-hi); }
@keyframes marquee { to { translate: -50% 0; } }

/* ---------- Contact (bannière) ---------- */
/* le halo déborde de la section : il est rogné (clip) sans que la section puisse défiler,
   sinon le focus d'un champ pouvait la décaler sur le côté */
.contact { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 16vh var(--gutter); overflow: hidden; overflow: clip; }
.contact-glow {
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(40% 50% at 15% 60%, rgba(15,147,132,.28), transparent 70%),
    radial-gradient(35% 45% at 90% 30%, rgba(164,171,170,.12), transparent 70%);
  animation: breathe 12s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
@keyframes breathe { to { transform: translate3d(3%, -4%, 0) scale(1.08); } }
.contact-inner { position: relative; max-width: 1300px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.contact-copy { display: flex; flex-direction: column; gap: 24px; }
.contact-copy h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); font-weight: 300; }
.contact-lines { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.contact-lines li { display: flex; gap: 18px; align-items: baseline; font-size: 1.05rem; }
.contact-lines span { min-width: 7.5em; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-hi); }
.contact-lines a { transition: color .3s, text-shadow .3s; }
.contact-lines a:hover { color: var(--teal-hi); text-shadow: 0 0 20px rgba(63,211,192,.5); }

/* Formulaire : champs à bord fin blanc, fond transparent */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { position: relative; display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field > span, .field > label { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-hi); font-weight: 500; }
.field input, .field textarea, .field select, .select-ui {
  width: 100%; font: inherit; font-size: 1rem; color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.8); border-radius: 12px;
  padding: 14px 16px; outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color .35s, box-shadow .45s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field ::placeholder { color: var(--dim); opacity: 1; }
.field input:hover, .field textarea:hover, .field select:hover, .select-ui:hover { border-color: #fff; }
.field input:focus, .field textarea:focus, .field select:focus, .select-ui:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(63,211,192,.25), 0 0 26px rgba(63,211,192,.25);
}
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 600000s 0s, color 600000s 0s; }
.field--select select, .select-ui { padding-right: 44px; cursor: pointer; }
.field--select select option { background: #0b1114; color: #fff; }
.field--select::after {
  content: "↓"; position: absolute; right: 16px; bottom: 14px; color: var(--teal-hi); pointer-events: none;
  transition: transform .4s var(--ease);
}
.field--select.is-open::after { transform: rotate(180deg); }
/* liste stylée (js/main.js) : le champ fermé est identique aux autres champs */
.select-ui { user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* liste ouverte : même univers que le bandeau cookies (fond sombre, liseré blanc fin, halo vert) */
.select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 7px; list-style: none;
  background: rgba(6, 10, 14, .96);
  border: 1px solid rgba(255,255,255,.8); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(63,211,192,.08);
  text-shadow: none;
  opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0);
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.field--select.is-open .select-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.select-list li {
  position: relative; padding: 10px 14px 10px 30px; border-radius: 9px;
  color: var(--muted); font-size: .97rem; line-height: 1.35; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.select-list li.is-active { background: rgba(63,211,192,.12); color: #fff; }
.select-list li[aria-selected="true"] { color: var(--teal-hi); }
/* choix en cours : le point lumineux des listes du site */
.select-list li[aria-selected="true"]::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--teal-hi); box-shadow: 0 0 10px var(--teal-hi);
}
.field.is-invalid input { border-color: #ff9a9a; }
.field.is-invalid > span { color: #ff9a9a; }

.btn-outline {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: .04em;
  color: #fff; background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.85); border-radius: 999px;
  padding: 14px 30px;
}
.btn-outline i { font-style: normal; color: var(--teal-hi); transition: transform .5s var(--ease); }
.btn-outline:hover { color: var(--teal-hi); border-color: var(--teal-hi); box-shadow: 0 0 30px rgba(63,211,192,.3); }
.btn-outline:hover i { transform: translateX(5px); }
.form-status { grid-column: 1 / -1; min-height: 1.4em; color: var(--teal-hi); font-size: .95rem; }
.form-status.is-error { color: #ff9a9a; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.btn-outline:disabled { opacity: .55; cursor: progress; }
/* champ piège du formulaire : hors de l'écran et ignoré des lecteurs d'écran (seuls les robots le remplissent) */
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */
.footer { padding: 12vh var(--gutter) 5vh; color: var(--muted); font-size: .92rem; text-shadow: 0 2px 14px rgba(4,6,10,.9); }
.footer::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,211,192,.55), transparent);
}
.footer-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.35fr 1.2fr; gap: 48px; }
.footer-logo { width: 220px; height: auto; }
.footer-brand p { margin-top: 18px; max-width: 28em; line-height: 1.7; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-title { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-hi); font-weight: 500; margin-bottom: 6px; }
.footer-col a, .footer-link {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; transition: color .3s;
}
.footer-col a:hover, .footer-link:hover { color: #fff; }
.footer address { font-style: normal; line-height: 1.7; color: #e6ecea; }
.footer-bottom {
  max-width: 1300px; margin: 9vh auto 0; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px 32px; color: var(--dim); font-size: .8rem;
}
@media (max-width: 1099px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Bandeau cookies (même univers que le site, en plus simple) ---------- */
.consent {
  position: fixed; left: 20px; bottom: 20px; z-index: 80;
  width: min(390px, calc(100vw - 32px));
  padding: 22px 22px 16px;
  background: rgba(6, 10, 14, .95);
  border: 1px solid rgba(255,255,255,.8); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(63,211,192,.08);
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.consent.is-open { opacity: 1; transform: none; }
.consent[hidden], .consent [hidden] { display: none; }
.consent-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 8px; }
.consent-title .em { font-size: 1.35em; }
.consent-text { font-size: .9rem; color: var(--muted); line-height: 1.55; }
.consent-text a { color: var(--teal-hi); text-decoration: underline; text-underline-offset: 3px; }
.consent-prefs { display: grid; gap: 12px; margin-top: 16px; }
.consent-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.consent-row b { display: block; font-weight: 500; font-size: .92rem; }
.consent-row small { display: block; color: var(--dim); font-size: .8rem; }
.consent-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-switch {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.8); transition: border-color .3s, background-color .3s;
}
.consent-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .35s var(--ease), background-color .3s;
}
.consent-row input:checked + .consent-switch { border-color: var(--teal-hi); background-color: rgba(63,211,192,.18); }
.consent-row input:checked + .consent-switch::after { transform: translateX(18px); background: var(--teal-hi); }
.consent-row input:disabled + .consent-switch { opacity: .55; }
.consent-row input:focus-visible + .consent-switch { outline: 2px solid var(--teal-hi); outline-offset: 2px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.consent-btn {
  font: inherit; font-size: .88rem; font-weight: 500; color: #fff; background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: 11px 14px;
  transition: color .3s, border-color .3s, box-shadow .4s;
}
.consent-btn:hover { color: var(--teal-hi); border-color: var(--teal-hi); box-shadow: 0 0 22px rgba(63,211,192,.25); }
.consent-more {
  display: block; margin: 12px auto 0; font: inherit; font-size: .84rem; color: var(--muted);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.consent-more:hover { color: #fff; }
@media (max-width: 560px) { .consent { left: 16px; right: 16px; bottom: 16px; width: auto; } }

/* ---------- Interface Informations légales : mise en page de document, univers « nébuleuse » (js/cosmos.js) ---------- */
.view-legal .nav::before { opacity: 1; }
html.view-legal .cosmos-fallback { opacity: .45; }
.legal-main { position: relative; z-index: 3; max-width: 1180px; padding: 150px var(--gutter) 4vh; text-shadow: 0 2px 14px rgba(4,6,10,.9); }
/* en-tête aligné à gauche : le cristal 8D occupe la droite de l'écran */
.legal-head { max-width: 640px; padding-bottom: 8vh; }
.legal-main h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 300; margin-top: 14px; text-shadow: 0 3px 24px rgba(0,0,0,.55); }
.legal-updated { margin-top: 14px; color: var(--dim); font-size: .88rem; }
.legal-layout { display: grid; grid-template-columns: 210px minmax(0, 680px); gap: 64px; align-items: start; }
/* sommaire latéral : il suit la lecture et met en avant la section en cours */
.legal-toc { position: sticky; top: 110px; display: flex; flex-direction: column; }
.legal-toc a {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0 9px 16px;
  color: var(--muted); font-size: .92rem; line-height: 1.35;
  border-left: 1px solid rgba(255,255,255,.12); transition: color .3s, border-color .3s;
}
.legal-toc a span { font-family: var(--f-em); font-style: italic; font-size: 1.05rem; color: var(--teal-hi); min-width: 1.4em; }
.legal-toc a:hover, .legal-toc a.is-active { color: #fff; border-left-color: var(--teal-hi); }
.legal-section { padding-bottom: 9vh; scroll-margin-top: 110px; }
@media (max-width: 1099px) {
  .legal-main { padding-top: 120px; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 6vh; }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
  .legal-toc a { border-left: 0; padding: 4px 0; }
}
.legal-section h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 300; margin-bottom: 20px; }
.legal-section h3 { font-size: 1.08rem; font-weight: 500; color: #fff; margin: 30px 0 8px; letter-spacing: -.01em; }
.legal-section p, .legal-section li { color: var(--muted); line-height: 1.75; }
.legal-section p + p { margin-top: 10px; }
.legal-section ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal-section a { color: var(--teal-hi); text-decoration: underline; text-underline-offset: 3px; }
.legal-section strong { color: #e6ecea; font-weight: 500; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--muted); }
.legal-table th { color: var(--teal-hi); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.legal-manage { margin-top: 22px; }
.todo { color: #ffd479; border-bottom: 1px dashed rgba(255,212,121,.6); } /* informations à compléter */

/* ---------- Page unique : deux interfaces qui s'échangent sans rechargement (js/views.js) ---------- */
/* une seule interface affichée à la fois (sans JavaScript, les deux restent visibles l'une après l'autre) */
.js:not(.view-legal) #view-legal, .view-legal #view-home { display: none; }
/* navigateurs récents : l'interface masquée garde sa mise en page en mémoire (hauteur nulle, rien n'est dessiné),
   elle réapparaît donc sans tout recalculer — l'échange ne fige pas le fond 3D */
@supports (content-visibility: hidden) {
  .js:not(.view-legal) #view-legal, .view-legal #view-home { display: block; content-visibility: hidden; }
}
.view:focus { outline: none; }
/* intro terminée : au retour sur l'accueil, le logo et l'indicateur de défilement ne rejouent pas leur entrée */
.intro-done .hero-logo, .intro-done .scroll-hint { animation: none; }

/* ---------- Page introuvable (404.html, sans 3D : lueur de secours en fond) ---------- */
.notfound {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  padding: 0 var(--gutter); text-align: center;
}
.notfound img { width: 84px; height: auto; margin-bottom: 6px; }
.notfound h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 300; text-shadow: 0 3px 24px rgba(0,0,0,.55); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); row-gap: 80px; }
}
@media (max-width: 1099px) {
  /* frise verticale */
  .timeline { max-width: 640px; margin: 0 auto; padding-left: 48px; }
  .timeline ol { grid-template-columns: 1fr; gap: 48px; }
  .timeline-line { left: 4px; right: auto; top: 0; bottom: 0; width: 9px; height: auto; }
  .timeline-line::before, .timeline-line span { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline-line span { transform-origin: top; }
  .js .timeline:not(.is-in) .timeline-line span { transform: scaleY(0); }
  .timeline-line::after { width: 9px; height: 100%; background-size: 9px 110px; transform: translateY(-110px); }
  .timeline.is-in .timeline-line::after { animation-name: travelY; }
  .step { padding-top: 0; }
  .step::before, .step::after { left: -46px; top: 6px; }
  .step b { font-size: 3rem; }
}
@media (max-width: 899px) {
  .offer-grid, .formula-row, .stats { grid-template-columns: 1fr; }
  .offer-grid { gap: 80px; }
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav { padding: 16px; }
  .nav-logo { gap: 8px; }
  .nav-logo img { height: 34px; }
  .nav-name { font-size: .55rem; letter-spacing: .1em; padding-left: 8px; }
  .nav nav { gap: 14px; }
  .nav nav a { font-size: .68rem; letter-spacing: .1em; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-lines li { flex-direction: column; gap: 2px; }
  .aura { display: none; }
}

/* Filet de sécurité : si le script ne s'exécute pas, tout le contenu reste visible */
.fallback [data-reveal], .fallback .step > *, .fallback [data-split] .wi { opacity: 1 !important; transform: none !important; }
.fallback .manifesto-text .wi { color: #fff !important; }
.fallback .step::before, .fallback .timeline-line span { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  [data-reveal], [data-split] .wi, .step > *, .step::before, .timeline-line span, .select-list, .field--select::after { transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .marquee-track { animation: none; }
}