/* ==========================================================================
   SYNACT. — charte issue de la présentation (DA studio)
   Noir chaud, dégradés radiaux orange, orange #e8471f, crème #f5f3e8
   Display : Anton (équiv. Impact LT Std) — Corps : Roboto Mono
   ========================================================================== */

:root {
  --ink: #0a0605;
  --coal: #1d1d1b;
  --orange: #e8471f;
  --ember: #fd6f22;
  --creme: #f5f3e8;
  --creme-72: rgba(245, 243, 232, .72);
  --creme-45: rgba(245, 243, 232, .45);
  --hairline: rgba(245, 243, 232, .22);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;

  --wrap: 76rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--creme);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--orange); color: var(--creme); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 52rem; text-align: center; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .8em 1.6em;
  border: 1px solid var(--orange);
  transition: background .25s ease, color .25s ease, border-color .25s ease,
    transform .25s ease, box-shadow .25s ease;
}

.btn--solid { background: var(--orange); color: var(--creme); }
.btn--solid:hover {
  background: var(--ember);
  border-color: var(--ember);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(232, 71, 31, .65);
}

.btn--ghost { background: transparent; color: var(--creme); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--orange); color: var(--ember); transform: translateY(-2px); }

.btn--dark { background: var(--ink); color: var(--creme); border-color: var(--ink); }
.btn--dark:hover { background: var(--coal); border-color: var(--coal); }

.btn--lg { font-size: .9rem; padding: 1em 2em; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem var(--pad);
  background: linear-gradient(to bottom, rgba(10, 6, 5, .85), rgba(10, 6, 5, 0));
  transition: background .3s ease;
}

.nav.is-scrolled {
  background: rgba(10, 6, 5, .92);
  border-bottom: 1px solid rgba(245, 243, 232, .08);
  backdrop-filter: blur(8px);
}

.nav__brand { display: flex; align-items: center; gap: .7rem; }
.nav__stamp { width: 2.1rem; height: 2.1rem; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: var(--creme);
}

.nav__links { display: flex; gap: 1.35rem; margin-inline: auto; }
.nav__links a {
  position: relative;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--creme-72);
  padding-block: .35rem;
  transition: color .2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.nav__links a:hover { color: var(--ember); }
.nav__links a.is-active { color: var(--creme); }
.nav__links a.is-active::after { transform: scaleX(1); }

/* le lien Contact n'apparaît que dans le menu mobile (le CTA le remplace sur desktop) */
.nav__link-contact { display: none; }

.nav__right { display: flex; align-items: center; gap: 1.5rem; }

.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav__burger span {
  display: block; width: 1.5rem; height: 2px;
  background: var(--creme); margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.hero__media, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__media video { filter: grayscale(1) contrast(1.15) brightness(.85); }

/* duotone orange façon slide 1 */
.hero__tint {
  position: absolute; inset: 0;
  background: var(--orange);
  mix-blend-mode: multiply;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(10, 6, 5, .55) 100%),
    linear-gradient(to top, rgba(10, 6, 5, .65), transparent 35%);
}

/* fines diagonales façon slide de couverture */
.hero__lines { position: absolute; inset: 0; pointer-events: none; }
.hero__line {
  position: absolute;
  width: 42vw; height: 1px;
  background: rgba(245, 243, 232, .5);
}
.hero__line--left { left: -4vw; top: 38%; transform: rotate(24deg); transform-origin: left top; }
.hero__line--right { right: -4vw; bottom: 30%; transform: rotate(24deg); transform-origin: right bottom; }

.hero__corner {
  position: absolute;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--creme-72);
  z-index: 2;
}
.hero__corner--tr { top: 5.5rem; right: var(--pad); }
.hero__corner--br { bottom: 2.5rem; right: var(--pad); }

.hero__content { position: relative; z-index: 2; padding: 7rem var(--pad) 4rem; }

.hero__stamp {
  width: clamp(3.5rem, 6vw, 5rem);
  margin: 0 auto 1.5rem;
  animation: stamp-in 1s ease both;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 11rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--creme);
  text-transform: uppercase;
}
.hero__dot { color: var(--ember); }

.hero__tagline {
  margin-top: 1.25rem;
  font-weight: 700;
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hero__sub {
  margin: 1.5rem auto 0;
  max-width: 38rem;
  font-size: .92rem;
  color: var(--creme-72);
}

.hero__cta { margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Entrée du hero — rejouée à chaque retour sur l'onglet Accueil */
.hero__stamp { animation: stamp-in 1s ease both; }
.hero__title { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) backwards .15s; }
.hero__tagline { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) backwards .35s; }
.hero__sub { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) backwards .5s; }
.hero__cta { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) backwards .65s; }
.hero__line--left { animation: line-grow 1.2s cubic-bezier(.2, .7, .2, 1) backwards .7s; }
.hero__line--right { animation: line-grow 1.2s cubic-bezier(.2, .7, .2, 1) backwards .85s; }

@keyframes stamp-in { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(2.2rem); }
  to { opacity: 1; transform: none; }
}
@keyframes line-grow { from { scale: 0 1; opacity: 0; } }

/* ==========================================================================
   Sections — fond noir + halos radiaux orange (langage du deck)
   ========================================================================== */

.section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 8.5rem);
  overflow: hidden;
}

.section--glow-left::before,
.section--glow-center::before,
.section--glow-right::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.section--glow-left::before {
  background: radial-gradient(ellipse 70% 60% at 12% 85%, rgba(232, 71, 31, .38), transparent 65%);
}
.section--glow-center::before {
  background: radial-gradient(ellipse 55% 55% at 50% 60%, rgba(232, 71, 31, .32), transparent 68%);
}
.section--glow-right::before {
  background: radial-gradient(ellipse 70% 60% at 88% 20%, rgba(232, 71, 31, .34), transparent 65%);
}

/* sections avec photo duotone en fond */
.section--photo { background: var(--ink); }
.section__bg {
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.1) brightness(.5);
  opacity: .5;
}
.section--photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--ink), transparent 25%, transparent 75%, var(--ink)),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(232, 71, 31, .30), transparent 70%);
}
.section--photo .wrap { position: relative; z-index: 2; }

.wrap { position: relative; z-index: 1; }

/* En-tête de section : eyebrow façon numéro de slide */
.section__head { margin-bottom: clamp(3rem, 6vw, 5rem); max-width: 46rem; }

.eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.25rem;
}
.eyebrow::after {
  content: "";
  flex: 0 0 4.5rem; height: 1px;
  background: var(--orange);
}
.eyebrow__num {
  font-weight: 700;
  padding: .15em .5em;
  border: 1px solid var(--orange);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--creme);
}

.section__lede { margin-top: 1rem; color: var(--creme-72); font-size: .95rem; }

/* ==========================================================================
   01 — Le constat : monolithes de stats (slide 4)
   ========================================================================== */

.constat__text { max-width: 34rem; color: var(--creme-72); font-size: .92rem; margin-bottom: 3.5rem; }

.constat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Cartes-objets : chaque statistique est incarnée par un objet de bureau réaliste */
.objet {
  position: relative;
  background: linear-gradient(160deg, rgba(29, 29, 27, .92), rgba(20, 12, 8, .96));
  border: 1px solid rgba(245, 243, 232, .1);
  border-top: 2px solid var(--orange);
  padding: 2.25rem 1.25rem 2.5rem;
  margin-top: var(--lift, 0);
  text-align: center;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.objet:hover {
  transform: translateY(-.45rem);
  border-color: rgba(232, 71, 31, .55);
  box-shadow: 0 24px 48px -22px rgba(232, 71, 31, .45);
}

.objet__ill { position: relative; height: 8rem; margin-bottom: 1.75rem; }

.objet__value {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--creme);
}
.objet__value-sm { font-size: .42em; margin-left: .25em; }
.objet__unit {
  color: var(--ember);
  font-size: .95rem;
  margin-top: .35rem;
}
.objet__label {
  margin-top: 1.1rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--creme-72);
}

/* --- 60 M$ : liasse de billets cerclée d'une bande orange --- */
.bill {
  position: absolute;
  top: 50%; left: 50%;
  width: 7.2rem; height: 3.3rem;
  margin: -1.4rem 0 0 -3.6rem;
  border-radius: .3rem;
  background: linear-gradient(120deg, #efecdb, #d8d2b8);
  border: 1px solid rgba(29, 29, 27, .4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.bill::before {
  content: "";
  position: absolute; inset: .28rem;
  border: 1px solid rgba(29, 29, 27, .22);
  border-radius: .15rem;
}
.bill::after {
  content: "$";
  position: absolute; top: 50%; left: 50%;
  width: 1.7rem; height: 1.7rem;
  margin: -.85rem 0 0 -.85rem;
  display: grid; place-items: center;
  border: 1px solid rgba(29, 29, 27, .35);
  border-radius: 50%;
  font: 700 .8rem/1 var(--font-mono);
  color: rgba(29, 29, 27, .6);
}
.bill--1 { transform: rotate(-9deg) translate(-.55rem, .8rem); }
.bill--2 { transform: rotate(5deg) translate(.6rem, -.1rem); }
.bill--3 { transform: rotate(-2deg) translateY(-.75rem); }
.bill__band {
  position: absolute; top: 50%; left: 50%;
  width: 1.5rem; height: 4.3rem;
  margin: -2.15rem 0 0 -.75rem;
  background: linear-gradient(to bottom, var(--ember), var(--orange));
  border-radius: .15rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transform: rotate(-2deg) translateY(-.7rem);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.objet:hover .bill--1 { transform: rotate(-15deg) translate(-1.15rem, 1rem); }
.objet:hover .bill--2 { transform: rotate(10deg) translate(1.15rem, 0); }
.objet:hover .bill--3 { transform: rotate(-2deg) translateY(-1rem); }
.objet:hover .bill__band { transform: rotate(-2deg) translateY(-.95rem); }

/* --- 2 598 $ : reçu de caisse au bord dentelé --- */
.ill--receipt { display: grid; place-items: center; }
.receipt {
  position: relative;
  width: 5.6rem; height: 7.6rem;
  padding: .65rem .6rem 0;
  background: linear-gradient(175deg, #f4f1e4, #e4dfc8);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, 100% 0, 100% 95%, 90% 100%, 80% 95%, 70% 100%,
    60% 95%, 50% 100%, 40% 95%, 30% 100%, 20% 95%, 10% 100%, 0 95%);
  text-align: left;
  transform: rotate(4deg);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.objet:hover .receipt { transform: rotate(0deg) translateY(-.3rem); }
.receipt__header { display: block; width: 55%; height: .55rem; background: #1d1d1b; }
.receipt__lines {
  display: block;
  margin-top: .55rem; height: 2.7rem;
  background: repeating-linear-gradient(to bottom, rgba(29, 29, 27, .35) 0 2px, transparent 2px 9px);
}
.receipt__total {
  display: block;
  margin-top: .35rem; padding-top: .3rem;
  border-top: 1px dashed rgba(29, 29, 27, .5);
  font-size: .52rem; font-weight: 700;
  color: #1d1d1b;
  white-space: nowrap;
}
.receipt__barcode {
  display: block;
  margin-top: .4rem; height: 1rem;
  background: repeating-linear-gradient(to right, #1d1d1b 0 2px, transparent 2px 4px, #1d1d1b 4px 7px, transparent 7px 9px);
}

/* --- 3-15 jours : dossier kraft, papiers qui dépassent, tampon "En attente" --- */
.folder__back {
  position: absolute; bottom: .2rem; left: 50%;
  width: 9.4rem; height: 6rem;
  margin-left: -4.7rem;
  background: linear-gradient(170deg, #c08a3e, #96662a);
  border-radius: .3rem .3rem .2rem .2rem;
}
.folder__back::before {
  content: "";
  position: absolute; top: -.8rem; left: .35rem;
  width: 3rem; height: 1rem;
  background: #c08a3e;
  border-radius: .3rem .3rem 0 0;
}
.folder__papers i {
  position: absolute; bottom: 2.6rem; left: 50%;
  width: 7.8rem; height: 4.6rem;
  margin-left: -3.9rem;
  background: #f2efe2;
  border: 1px solid rgba(29, 29, 27, .25);
  border-radius: .15rem;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.folder__papers i::before {
  content: "";
  position: absolute; inset: .5rem .5rem auto;
  height: 1.4rem;
  background: repeating-linear-gradient(to bottom, rgba(29, 29, 27, .25) 0 2px, transparent 2px 8px);
}
.folder__papers i:nth-child(1) { transform: rotate(-3deg) translateX(-.5rem); }
.folder__papers i:nth-child(2) { transform: rotate(2deg) translate(.4rem, -.3rem); }
.folder__papers i:nth-child(3) { transform: rotate(-1deg) translateY(-.55rem); }
.objet:hover .folder__papers i:nth-child(1) { transform: rotate(-4deg) translate(-.6rem, -.5rem); }
.objet:hover .folder__papers i:nth-child(2) { transform: rotate(3deg) translate(.5rem, -.85rem); }
.objet:hover .folder__papers i:nth-child(3) { transform: rotate(-1deg) translateY(-1.15rem); }
.folder__front {
  position: absolute; bottom: .2rem; left: 50%;
  width: 9.8rem; height: 5.2rem;
  margin-left: -4.9rem;
  display: grid; place-items: center;
  background: linear-gradient(175deg, #d9a54e, #b17a31);
  border-radius: .25rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .28);
}
.folder__front em {
  font-style: normal;
  font-size: .55rem; font-weight: 500;
  color: #2a1a08;
  background: rgba(245, 243, 232, .88);
  padding: .25em .6em;
  border-radius: .1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.folder__stamp {
  position: absolute; left: 50%; bottom: 3.7rem;
  margin-left: 2rem;
  white-space: nowrap;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: .2rem;
  padding: .12em .45em;
  transform: rotate(-11deg);
  opacity: .92;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  z-index: 1;
}
.objet:hover .folder__stamp { transform: rotate(-7deg) scale(1.12); }

/* --- 10x : éventail de photocopies du même dossier --- */
.copy {
  position: absolute; bottom: .2rem; left: 50%;
  width: 4.8rem; height: 6.4rem;
  margin-left: -2.4rem;
  background: linear-gradient(160deg, #efecdb, #ddd7bf);
  border: 1px solid rgba(29, 29, 27, .35);
  border-radius: .15rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  transform-origin: bottom center;
  transform: translateX(var(--x)) rotate(var(--r));
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.copy::before {
  content: "";
  position: absolute; inset: .9rem .6rem auto;
  height: 3.6rem;
  background: repeating-linear-gradient(to bottom, rgba(29, 29, 27, .3) 0 2px, transparent 2px 9px);
}
.copy--top { display: grid; place-items: center; }
.copy--top em {
  position: relative; z-index: 1;
  font-style: normal;
  font-weight: 700; font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: .2rem;
  padding: .15em .5em;
  transform: rotate(-10deg);
  opacity: .9;
}
.objet:hover .copy { transform: translateX(calc(var(--x) * 1.6)) rotate(calc(var(--r) * 1.45)); }

/* ==========================================================================
   02 — La solution : la ligne de vol en trois actes
   ========================================================================== */

/* la preuve voyage au-dessus des trois panneaux */
.acts__flight { position: relative; height: 2.4rem; }
.acts__rail {
  position: absolute;
  top: 50%;
  left: 16.5%; right: 16.5%;
  border-top: 1px dashed rgba(245, 243, 232, .28);
}
.acts__node {
  position: absolute;
  top: 50%;
  width: .62rem; height: .62rem;
  margin: -.31rem 0 0 -.31rem;
  border-radius: 50%;
  background: rgba(232, 71, 31, .35);
  border: 1px solid var(--ember);
}
.acts__node--1 { left: 16.5%; }
.acts__node--2 { left: 50%; background: var(--ember); box-shadow: 0 0 10px 2px rgba(253, 111, 34, .5); }
.acts__node--3 { left: 83.5%; }
.acts__comet {
  position: absolute;
  top: 50%;
  left: 16.5%;
  width: .55rem; height: .55rem;
  margin: -.27rem 0 0 -.27rem;
  border-radius: 50%;
  background: #ffd9a8;
  box-shadow: 0 0 14px 5px rgba(253, 111, 34, .85);
  animation: acts-run 6.5s ease-in-out infinite;
}
.acts__comet::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 4.5rem; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(253, 111, 34, .8), transparent);
}
@keyframes acts-run {
  0% { left: 16.5%; opacity: 0; }
  5% { opacity: 1; }
  10% { left: 16.5%; }
  34% { left: 50%; }
  46% { left: 50%; }
  70% { left: 83.5%; }
  92% { left: 83.5%; opacity: 1; }
  100% { left: 83.5%; opacity: 0; }
}

.acts__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 1.4rem;
}

.act {
  background: linear-gradient(160deg, rgba(29, 29, 27, .92), rgba(20, 12, 8, .96));
  border: 1px solid rgba(245, 243, 232, .1);
  border-top: 2px solid var(--orange);
  padding: 1.6rem 1.5rem 1.9rem;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.act:hover {
  transform: translateY(-.45rem);
  border-color: rgba(232, 71, 31, .55);
  box-shadow: 0 24px 48px -22px rgba(232, 71, 31, .45);
}
.act--synact {
  background: linear-gradient(160deg, rgba(232, 71, 31, .18), rgba(20, 12, 8, .96));
  border-color: rgba(232, 71, 31, .4);
  border-top-color: var(--ember);
}

.act__kicker {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
}
.act--synact .act__kicker { color: var(--creme); }
.act__head { display: flex; align-items: baseline; gap: .8rem; margin-top: .9rem; }
.act__num { font-weight: 300; font-size: 1.9rem; line-height: 1; color: var(--creme-45); }
.act__name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  text-transform: uppercase;
  color: var(--creme);
}

/* la mini-scène illustrée de chaque acte */
.act__scene {
  height: 5.2rem;
  margin-block: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border-block: 1px solid rgba(245, 243, 232, .08);
}

/* acte 1 : le dossier devient passeport */
.sc-folder {
  position: relative;
  width: 3.1rem; height: 2.2rem;
  background: linear-gradient(170deg, #c08a3e, #96662a);
  border-radius: .2rem;
  transition: transform .35s ease;
}
.sc-folder::before {
  content: "";
  position: absolute;
  top: -.4rem; left: .2rem;
  width: 1.1rem; height: .5rem;
  background: #c08a3e;
  border-radius: .2rem .2rem 0 0;
}
.sc-folder i {
  position: absolute;
  inset: .45rem .4rem auto;
  height: 1rem;
  background: repeating-linear-gradient(to bottom, rgba(29, 29, 27, .3) 0 2px, transparent 2px 6px);
}
.sc-arrow { color: var(--ember); font-size: 1rem; }
.sc-passport {
  position: relative;
  width: 4rem; height: 2.7rem;
  background: linear-gradient(170deg, #201510, #120a06);
  border: 1px solid rgba(253, 111, 34, .6);
  border-top: .45rem solid var(--orange);
  border-radius: .25rem;
  padding: .3rem .4rem 0;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sc-passport b { display: block; font-size: .58rem; color: var(--creme); letter-spacing: .1em; }
.sc-passport i { display: block; font-style: normal; font-size: .48rem; color: var(--ember); margin-top: .15rem; }
.act:hover .sc-folder { transform: translateX(-.25rem); }
.act:hover .sc-passport {
  transform: translateX(.25rem) scale(1.06);
  box-shadow: 0 0 18px rgba(253, 111, 34, .45);
}

/* acte 2 : le coffre et la chaîne d'empreintes */
.sc-vault {
  position: relative;
  width: 2.9rem; height: 2.9rem;
  background: linear-gradient(170deg, #241a12, #120a06);
  border: 1px solid rgba(245, 243, 232, .3);
  border-radius: .3rem;
}
.sc-vault i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.45rem; height: 1.45rem;
  border: 2px solid rgba(253, 111, 34, .8);
  border-radius: 50%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.sc-vault i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .35rem; height: .35rem;
  border-radius: 50%;
  background: var(--ember);
}
.act:hover .sc-vault i { transform: rotate(120deg); }
.sc-chain { display: flex; align-items: center; }
.sc-chain i {
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  color: var(--creme-45);
  background: rgba(10, 6, 5, .6);
  border: 1px solid rgba(245, 243, 232, .25);
  border-radius: .2rem;
}
.sc-chain i + i { margin-left: .55rem; position: relative; }
.sc-chain i + i::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: .55rem; height: 1px;
  background: rgba(245, 243, 232, .35);
}
.sc-chain__hot {
  color: var(--creme) !important;
  border-color: var(--ember) !important;
  box-shadow: 0 0 10px rgba(253, 111, 34, .45);
}

/* acte 3 : la vérification instantanée */
.sc-term {
  width: min(100%, 11.5rem);
  background: #0d0906;
  border: 1px solid rgba(245, 243, 232, .16);
  border-radius: .25rem;
  padding: .5rem .65rem;
  font-size: .55rem;
  line-height: 1.6;
}
.sc-term i { display: block; font-style: normal; color: var(--creme-45); white-space: nowrap; }
.sc-term b { display: block; color: var(--ember); white-space: nowrap; }

.act__text { font-size: .82rem; color: var(--creme-72); }
.act__list {
  margin-top: 1.1rem;
  border-top: 1px solid rgba(245, 243, 232, .12);
  padding-top: .95rem;
}
.act__list li {
  position: relative;
  padding-left: 1rem;
  font-size: .74rem;
  color: var(--creme-72);
  margin-top: .45rem;
}
.act__list li::before { content: "▪"; position: absolute; left: 0; color: var(--ember); }

/* le rappel : les données ne voyagent pas */
.acts__vault {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  border: 1px solid var(--hairline);
  background: rgba(10, 6, 5, .5);
  padding: 1.15rem 1.5rem;
}
.acts__vault p { font-size: .82rem; color: var(--creme-72); }
.acts__vault strong { color: var(--creme); }
.acts__lock {
  position: relative;
  flex: 0 0 1.7rem;
  height: 1.3rem;
  margin-top: .6rem;
  background: var(--orange);
  border-radius: .2rem;
}
.acts__lock::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: .85rem; height: .65rem;
  margin-left: -.425rem;
  border: 3px solid var(--orange);
  border-bottom: 0;
  border-radius: .6rem .6rem 0 0;
}
.acts__lock::after {
  content: "";
  position: absolute;
  top: .4rem; left: 50%;
  width: .3rem; height: .3rem;
  margin-left: -.15rem;
  border-radius: 50%;
  background: var(--ink);
}

/* ==========================================================================
   03 — Architecture : flux animé + couches + garanties + standards (slide 6)
   ========================================================================== */

/* la ligne de vol de la preuve : Banque A → Coffre → Passeport → Ancrage → Banque B */
.archflow { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.archflow__track { position: relative; padding-top: .1rem; }
.archflow__rail {
  position: absolute;
  top: .41rem;
  left: 10%; right: 10%;
  border-top: 1px dashed rgba(245, 243, 232, .28);
}
.archflow__comet {
  position: absolute;
  top: .17rem;
  left: 10%;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #ffd9a8;
  box-shadow: 0 0 12px 4px rgba(253, 111, 34, .8);
  animation: archflow-run 7s ease-in-out infinite;
}
.archflow__comet::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 4rem; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(253, 111, 34, .8), transparent);
}
@keyframes archflow-run {
  0% { left: 10%; opacity: 0; }
  5% { opacity: 1; }
  22% { left: 30%; }
  30% { left: 30%; }
  44% { left: 50%; }
  52% { left: 50%; }
  66% { left: 70%; }
  74% { left: 70%; }
  94% { left: 90%; opacity: 1; }
  100% { left: 90%; opacity: 0; }
}

.archflow__stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
}
.archflow__stop { position: relative; text-align: center; padding-top: 1.5rem; }
.archflow__stop::before {
  content: "";
  position: absolute;
  top: .1rem; left: 50%;
  width: .62rem; height: .62rem;
  margin-left: -.31rem;
  border-radius: 50%;
  background: rgba(232, 71, 31, .35);
  border: 1px solid var(--ember);
}
.archflow__stop--bank::before { background: var(--creme); border-color: var(--creme); }
.archflow__stop b {
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme);
}
.archflow__stop i {
  display: block;
  font-style: normal;
  font-size: .66rem;
  color: var(--creme-45);
  margin-top: .3rem;
}
.archflow__caption {
  margin-top: 1.75rem;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--creme-72);
}

.layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.layer {
  background: linear-gradient(160deg, rgba(29, 29, 27, .92), rgba(20, 12, 8, .96));
  border: 1px solid rgba(245, 243, 232, .1);
  padding: 2rem 1.75rem 2.25rem;
  transition: border-color .3s ease, transform .3s ease;
}
.layer:hover {
  border-color: rgba(232, 71, 31, .5);
  transform: translateY(-.4rem);
  box-shadow: 0 22px 44px -20px rgba(232, 71, 31, .35);
}

.layer__kicker {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
}
.layer__name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  margin-top: .5rem;
  color: var(--creme);
}
.layer__text { margin-top: 1rem; font-size: .85rem; color: var(--creme-72); }
.layer__list { margin-top: 1.25rem; border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.layer__list li { font-size: .8rem; color: var(--creme-72); margin-top: .5rem; }
.layer__list strong { color: var(--creme); font-weight: 700; }

.garanties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 4rem;
}
.garantie h3 {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--creme);
  padding-left: 1rem;
  border-left: 2px solid var(--orange);
}
.garantie p { margin-top: .75rem; font-size: .82rem; color: var(--creme-72); padding-left: 1rem; }

/* bandeau standards défilant */
.standards {
  margin-top: 4.5rem;
  border-block: 1px solid var(--hairline);
  padding-block: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.standards__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: standards-scroll 40s linear infinite;
}
.standards__track span {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-45);
  white-space: nowrap;
}
@keyframes standards-scroll { to { transform: translateX(-50%); } }

/* ==========================================================================
   04 — Parcours client : la vie d'un passager, en ligne de temps
   ========================================================================== */

.journey { position: relative; }

/* axe de piste vertical, entre la colonne temps et le contenu */
.journey::before {
  content: "";
  position: absolute;
  left: 8rem;
  top: .5rem; bottom: .5rem;
  border-left: 1px dashed rgba(245, 243, 232, .3);
}

.moment {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr minmax(14rem, 16.5rem);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: 2.25rem;
}
.moment + .moment { border-top: 1px solid rgba(245, 243, 232, .07); }

/* jalon sur l'axe */
.moment::before {
  content: "";
  position: absolute;
  left: calc(8rem - .31rem);
  top: 3.1rem;
  width: .62rem; height: .62rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px 3px rgba(253, 111, 34, .55);
}

.moment__when {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-45);
  text-align: right;
  line-height: 1.3;
}
.moment__when strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: .02em;
  color: var(--creme);
}

.moment__actors { display: flex; gap: .5rem; flex-wrap: wrap; }
.tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-72);
  border: 1px solid var(--hairline);
  padding: .25em .7em;
}
.tag--client {
  color: var(--creme);
  border-color: var(--orange);
  background: rgba(232, 71, 31, .18);
}

.moment__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-transform: uppercase;
  color: var(--creme);
  margin-top: .8rem;
}
.moment__text { margin-top: .75rem; font-size: .85rem; color: var(--creme-72); max-width: 34rem; }
.moment__text strong { color: var(--ember); }

.moment__visual { display: grid; place-items: center; }

/* ---- Base des vignettes : petites cartes-objets réalistes ---- */
.v-pass, .v-app, .v-term, .v-consent, .v-revoke {
  position: relative;
  width: min(100%, 15.5rem);
  border-radius: .35rem;
  font-size: .62rem;
  line-height: 1.5;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.moment:hover .v-pass, .moment:hover .v-app, .moment:hover .v-term,
.moment:hover .v-consent, .moment:hover .v-revoke {
  transform: translateY(-.3rem) scale(1.03);
  box-shadow: 0 18px 40px -16px rgba(232, 71, 31, .45);
}

/* le passeport SYNACT */
.v-pass {
  background: linear-gradient(170deg, #201510, #120a06);
  border: 1px solid rgba(253, 111, 34, .55);
  padding: 0 .9rem .8rem;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.v-pass__band {
  margin: 0 -.9rem .7rem;
  padding: .45em .9rem;
  background: linear-gradient(90deg, var(--orange), var(--ember));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme);
}
.v-pass__row { color: var(--creme-72); margin-top: .2rem; }
.v-pass__hash { color: var(--ember); }
.v-pass__seal {
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: 2px solid rgba(253, 111, 34, .8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(253, 111, 34, .25);
  font-weight: 700;
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
  transform: rotate(-14deg);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.moment:hover .v-pass__seal { transform: rotate(-8deg) scale(1.12); }
.v-pass--renew { padding-bottom: 2.3rem; }
.v-pass__stamp {
  position: absolute;
  right: .6rem; bottom: .55rem;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
  border: 2px solid var(--ember);
  border-radius: .2rem;
  padding: .15em .5em;
  transform: rotate(-9deg);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.moment:hover .v-pass__stamp { transform: rotate(-5deg) scale(1.12); }

/* l'espace client "Mon passeport" */
.v-app, .v-consent, .v-revoke {
  background: linear-gradient(175deg, #f4f1e4, #e8e3cd);
  color: #1d1d1b;
  padding: .75rem .9rem .85rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.v-app__bar, .v-consent__bar, .v-revoke__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(29, 29, 27, .18);
}
.v-app__pill {
  font-size: .55rem;
  letter-spacing: .14em;
  color: var(--creme);
  background: var(--orange);
  border-radius: 2em;
  padding: .15em .7em;
}
.v-app__row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
  color: rgba(29, 29, 27, .75);
}
.v-app__row b { color: var(--orange); }

/* la réponse API verify */
.v-term {
  background: #0d0906;
  border: 1px solid rgba(245, 243, 232, .16);
  padding: .6rem .9rem .8rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.v-term__dots { display: flex; gap: .3rem; margin-bottom: .55rem; }
.v-term__dots i {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: rgba(245, 243, 232, .22);
}
.v-term__dots i:first-child { background: var(--orange); }
.v-term__line { color: var(--creme-72); white-space: nowrap; }
.v-term__ok { color: var(--ember); font-weight: 700; }
.v-term__caret {
  display: inline-block;
  width: .45em; height: 1em;
  margin-left: .3em;
  vertical-align: text-bottom;
  background: var(--ember);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* la demande de consentement granulaire */
.v-consent__row { margin-top: .4rem; color: rgba(29, 29, 27, .8); }
.v-consent__row b { color: var(--orange); margin-right: .35em; }
.v-consent__row--off { color: rgba(29, 29, 27, .4); }
.v-consent__win {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px dashed rgba(29, 29, 27, .3);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(29, 29, 27, .55);
}
.v-consent__cta { display: flex; gap: .5rem; margin-top: .55rem; }
.v-consent__ok, .v-consent__no {
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45em 0;
  border-radius: .2rem;
}
.v-consent__ok { background: var(--orange); color: var(--creme); }
.moment:hover .v-consent__ok { background: var(--ember); }
.v-consent__no { border: 1px solid rgba(29, 29, 27, .35); color: rgba(29, 29, 27, .6); }

/* la révocation en un clic */
.v-revoke__row { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; font-weight: 700; }
.v-revoke__switch {
  flex: 0 0 1.7rem;
  height: .95rem;
  border-radius: 2em;
  background: rgba(29, 29, 27, .25);
  position: relative;
  transition: background .35s ease;
}
.v-revoke__switch::after {
  content: "";
  position: absolute;
  top: .12rem; left: .14rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: #f4f1e4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.moment:hover .v-revoke__switch { background: var(--orange); }
.moment:hover .v-revoke__switch::after { transform: translateX(.72rem); }
.v-revoke__note {
  margin-top: .45rem;
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(29, 29, 27, .55);
}
.v-revoke__stamp {
  position: absolute;
  right: .55rem; top: .45rem;
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: .2rem;
  padding: .12em .45em;
  transform: rotate(8deg);
  opacity: .9;
}

/* ---- Le bilan du parcours ---- */
.journey__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 2.5rem;
  text-align: center;
}
.total__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--ember);
}
.total__num span { font-size: .4em; margin-left: .2em; }
.total__label {
  margin-top: .6rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--creme-72);
}

/* ==========================================================================
   05 — Marché (slide 8)
   ========================================================================== */

.market {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.market__item {
  padding: 2.5rem clamp(1rem, 2.5vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
  transition: background .3s ease;
}
.market__item:hover { background: rgba(232, 71, 31, .07); }
.market__item + .market__item { border-left: 1px solid var(--hairline); }

.market__name {
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; font-weight: 700;
  color: var(--creme);
}
.market__name::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
/* mini-graphe : valeur de départ (neutre) vs valeur cible (orange) */
.market__viz {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  height: 6.6rem;
  margin-top: 1.6rem;
  border-bottom: 1px solid rgba(245, 243, 232, .2);
}
.market__bar {
  position: relative;
  flex: 0 0 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.market__bar span {
  font-size: .7rem;
  font-weight: 700;
  color: var(--creme);
  white-space: nowrap;
  margin-bottom: .35rem;
}
.market__bar::after {
  content: "";
  width: 100%;
  height: max(calc(var(--p) * 4.4rem), 4px);
  background: rgba(245, 243, 232, .14);
  border: 1px solid rgba(245, 243, 232, .28);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: bar-grow .9s cubic-bezier(.2, .7, .2, 1) backwards .4s;
}
.market__bar--hot::after {
  background: linear-gradient(to top, var(--orange), var(--ember));
  border-color: rgba(253, 111, 34, .7);
  animation-delay: .55s;
}
@keyframes bar-grow { from { transform: scaleY(0); } }
.market__bar i {
  position: absolute;
  top: 100%;
  margin-top: .35rem;
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--creme-45);
}

.market__note { margin-top: 2.2rem; font-size: .82rem; color: var(--creme-72); }
.market__note span { font-size: .72rem; color: var(--creme-45); }

/* ==========================================================================
   06 — Tarifs : billets d'embarquement + console de simulation
   ========================================================================== */

.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* le billet : carte papier crème, encoches latérales et talon détachable */
.pass {
  --tear: 8.4rem;                    /* hauteur du talon sous la perforation */
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(175deg, #f6f3e6, #e9e4ce);
  color: #1d1d1b;
  border-radius: .55rem;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
  -webkit-mask:
    radial-gradient(circle .5rem at 0 calc(100% - var(--tear)), transparent 97%, #000),
    radial-gradient(circle .5rem at 100% calc(100% - var(--tear)), transparent 97%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle .5rem at 0 calc(100% - var(--tear)), transparent 97%, #000),
    radial-gradient(circle .5rem at 100% calc(100% - var(--tear)), transparent 97%, #000);
  mask-composite: intersect;
}
.pass:hover {
  transform: rotate(0deg) translateY(-.55rem);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(232, 71, 31, .3));
}

.pass__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  background: #1d1d1b;
  color: var(--creme);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem .95rem;
  border-radius: .55rem .55rem 0 0;
}
.pass__head span:last-child { color: var(--ember); }

.pass__body { flex: 1; padding: 1.3rem 1.1rem 1.1rem; }
.pass__tier {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #1d1d1b;
}
.pass__amount {
  margin-top: .55rem;
  font-weight: 300;
  font-size: clamp(1.45rem, 1.8vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--orange);
}
.pass__amount span { font-size: .5em; color: rgba(29, 29, 27, .55); }
.pass__list {
  margin-top: 1.1rem;
  border-top: 1px solid rgba(29, 29, 27, .15);
  padding-top: .85rem;
}
.pass__list li { font-size: .72rem; color: rgba(29, 29, 27, .75); padding-block: .25rem; }
.pass__list li::before { content: "✓ "; color: var(--orange); font-weight: 700; }

.pass__stub {
  height: var(--tear);
  border-top: 2px dashed rgba(29, 29, 27, .3);
  padding: .75rem 1.1rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pass__meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(29, 29, 27, .55);
}
.pass__barcode {
  display: block;
  height: 1.45rem;
  background: repeating-linear-gradient(to right,
    #1d1d1b 0 2px, transparent 2px 5px, #1d1d1b 5px 6px, transparent 6px 8px);
  opacity: .85;
}
.pass__cta {
  display: block;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #1d1d1b;
  color: var(--creme);
  padding: .7em 0;
  border-radius: .25rem;
  transition: background .25s ease, color .25s ease;
}
.pass__cta:hover { background: var(--orange); color: var(--creme); }

/* le vol charter : billet orange */
.pass--featured { background: linear-gradient(175deg, #f0592a, #c3350f); color: var(--creme); }
.pass--featured .pass__head { background: rgba(10, 6, 5, .88); }
.pass--featured .pass__head span:last-child { color: #ffd9a8; }
.pass--featured .pass__tier { color: var(--creme); }
.pass--featured .pass__amount { color: var(--creme); }
.pass--featured .pass__amount span { color: rgba(245, 243, 232, .7); }
.pass--featured .pass__list { border-top-color: rgba(245, 243, 232, .3); }
.pass--featured .pass__list li { color: rgba(245, 243, 232, .92); }
.pass--featured .pass__list li::before { color: #ffd9a8; }
.pass--featured .pass__stub { border-top-color: rgba(245, 243, 232, .45); }
.pass--featured .pass__meta { color: rgba(245, 243, 232, .7); }
.pass--featured .pass__barcode {
  background: repeating-linear-gradient(to right,
    #f5f3e8 0 2px, transparent 2px 5px, #f5f3e8 5px 6px, transparent 6px 8px);
}
.pass--featured .pass__cta { background: #1d1d1b; }
.pass--featured .pass__cta:hover { background: var(--ink); color: #ffd9a8; }

/* la console d'embarquement : simulateur palier + rétrocession */
.simulator {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid rgba(245, 243, 232, .12);
  border-top: 2px solid var(--orange);
  background: linear-gradient(160deg, rgba(29, 29, 27, .9), rgba(18, 10, 6, .95));
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.simulator__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  text-transform: uppercase;
  color: var(--creme);
}
.simulator__lede { margin-top: .6rem; font-size: .85rem; color: var(--creme-72); max-width: 42rem; }

.simulator__panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.25rem;
  align-items: center;
}

.simulator__field { display: block; }
.simulator__field + .simulator__field { margin-top: 1.75rem; }
.simulator__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.simulator__label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--creme-72);
}
.simulator__row output { font-weight: 700; font-size: .9rem; color: var(--ember); white-space: nowrap; }
.simulator__field input[type="range"] {
  width: 100%;
  margin-top: .65rem;
  accent-color: var(--orange);
  cursor: pointer;
}

.simulator__results {
  display: grid;
  gap: 1.5rem;
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}
.simulator__key {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
}
.simulator__value {
  margin-top: .35rem;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--creme);
}
.simulator__value--credit { color: var(--ember); }
.simulator__sub { margin-top: .3rem; font-size: .75rem; color: var(--creme-45); }
.simulator__note { margin-top: 2rem; font-size: .68rem; line-height: 1.7; color: var(--creme-45); }

/* ==========================================================================
   07 — Itinéraire : trajectoire de vol (slide 10)
   ========================================================================== */

.route__path {
  width: 100%; height: 7rem;
  color: var(--creme-45);
  margin-bottom: 2.5rem;
}
.route__path circle { fill: var(--creme); }

.route__phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.phase { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.phase__when {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
}
.phase h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  margin-top: .6rem;
  color: var(--creme);
}
.phase__lot {
  margin-top: .55rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-45);
}
.phase > p:not(.phase__when):not(.phase__lot):not(.phase__tags) {
  margin-top: .75rem;
  font-size: .8rem;
  color: var(--creme-72);
}
.phase__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.phase__tags span {
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid rgba(232, 71, 31, .45);
  padding: .22em .55em;
  white-space: nowrap;
}
.phase ul { margin-top: 1rem; }
.phase li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .78rem;
  color: var(--creme-72);
  margin-top: .35rem;
}
.phase li::before { content: "▪"; position: absolute; left: 0; color: var(--orange); }

/* ==========================================================================
   08 — Équipe (slide 2)
   ========================================================================== */

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.founder { text-align: center; }

.founder__photo {
  width: clamp(9rem, 16vw, 12rem);
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--creme);
  filter: grayscale(.25);
  transition: filter .3s ease, border-color .3s ease, transform .3s ease;
}
.founder:hover .founder__photo {
  filter: grayscale(0);
  border-color: var(--ember);
  transform: scale(1.04);
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }

.founder__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ember);
  letter-spacing: .04em;
}
.founder__school { margin-top: .35rem; font-weight: 700; font-size: .9rem; color: var(--creme); }
.founder__role { margin-top: .5rem; font-size: .8rem; color: var(--creme-72); max-width: 22rem; margin-inline: auto; }

/* ==========================================================================
   Contact — inversion crème (slide "Merci.")
   ========================================================================== */

.section--creme {
  background: var(--creme);
  color: var(--coal);
  text-align: center;
}
.section--creme .section__bg--light {
  filter: grayscale(1) brightness(1.15) contrast(.9);
  opacity: .18;
}

.contact__stamp { width: clamp(3.5rem, 6vw, 5rem); margin: 0 auto 2rem; position: relative; z-index: 2; }

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--orange);
  position: relative; z-index: 2;
}

.contact__lede {
  margin: 1.75rem auto 0;
  max-width: 36rem;
  font-size: .92rem;
  color: rgba(29, 29, 27, .75);
  position: relative; z-index: 2;
}

.contact__cta { margin-top: 2.5rem; position: relative; z-index: 2; }

.contact__names {
  margin-top: 4rem;
  font-size: .8rem;
  letter-spacing: .08em;
  color: rgba(29, 29, 27, .6);
  position: relative; z-index: 2;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--ink);
  border-top: 1px solid rgba(245, 243, 232, .08);
  padding-block: 2rem;
}
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer__brand { font-family: var(--font-display); font-size: 1.2rem; }
.footer__brand span { color: var(--ember); }
.footer__meta { font-size: .75rem; letter-spacing: .08em; color: var(--creme-45); }

/* ==========================================================================
   Vues (onglets) — chaque section est une "escale" qui s'ouvre au clic
   ========================================================================== */

.view { display: none; }
.view.is-active { display: block; }

.view.section {
  min-height: 100svh;
  padding-top: clamp(7.5rem, 13vh, 10rem);
}

#contact.is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Apparition en cascade, rejouée à chaque ouverture d'onglet
   (le passage display none → block relance les animations CSS) */
.reveal {
  animation: rise .65s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1.9rem); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Warp — voile de transition entre onglets, traînées façon pose longue
   ========================================================================== */

.warp {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.warp.is-active { visibility: visible; }

.warp__veil {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
}
.warp.is-active .warp__veil { animation: veil-flash .85s ease both; }
@keyframes veil-flash {
  0% { opacity: 0; }
  32% { opacity: .82; }
  55% { opacity: .82; }
  100% { opacity: 0; }
}

.warp__streak {
  position: absolute;
  left: -50vw;
  width: 46vw;
  border-radius: 3px;
  background: linear-gradient(to right,
    transparent,
    rgba(232, 71, 31, .85) 45%,
    rgba(255, 214, 170, .95) 82%,
    transparent);
  filter: drop-shadow(0 0 7px rgba(253, 111, 34, .85));
  opacity: 0;
}
.warp.is-active .warp__streak { animation: streak-fly .75s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes streak-fly {
  0% { transform: translateX(0) scaleX(.4); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(205vw) scaleX(1.2); opacity: 0; }
}

.warp__streak:nth-child(2) { top: 16%; height: 2px; animation-delay: 0s !important; }
.warp__streak:nth-child(3) { top: 31%; height: 4px; animation-delay: .09s !important; }
.warp__streak:nth-child(4) { top: 47%; height: 2px; animation-delay: .04s !important; }
.warp__streak:nth-child(5) { top: 60%; height: 5px; animation-delay: .12s !important; }
.warp__streak:nth-child(6) { top: 74%; height: 2px; animation-delay: .02s !important; }
.warp__streak:nth-child(7) { top: 88%; height: 3px; animation-delay: .15s !important; }

/* ==========================================================================
   Ambient — traînées lumineuses discrètes en fond permanent
   ========================================================================== */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient span {
  position: absolute;
  left: -40vw;
  width: 34vw;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(253, 111, 34, .5), transparent);
  filter: blur(.5px);
  animation: ambient-drift linear infinite;
}
.ambient span:nth-child(1) { top: 18%; animation-duration: 17s; animation-delay: -3s; }
.ambient span:nth-child(2) { top: 37%; animation-duration: 23s; animation-delay: -11s; opacity: .7; }
.ambient span:nth-child(3) { top: 55%; animation-duration: 14s; animation-delay: -7s; }
.ambient span:nth-child(4) { top: 71%; animation-duration: 27s; animation-delay: -18s; opacity: .6; }
.ambient span:nth-child(5) { top: 86%; animation-duration: 20s; animation-delay: -5s; opacity: .8; }
@keyframes ambient-drift { to { transform: translateX(180vw); } }

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

/* Grain argentique très léger sur l'ensemble du site (matière print) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Micro-animations dans les vues (rejouées à chaque ouverture)
   ========================================================================== */

/* Itinéraire : pointillés qui avancent + jalons + avion en vol */
.route__line { animation: dash-march 1.1s linear infinite; }
@keyframes dash-march { to { stroke-dashoffset: -24; } }

.route__plane path {
  fill: var(--ember);
  filter: drop-shadow(0 0 6px rgba(253, 111, 34, .9));
}

.route__path circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-pop .5s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.route__path circle:nth-of-type(1) { animation-delay: .35s; }
.route__path circle:nth-of-type(2) { animation-delay: .55s; }
.route__path circle:nth-of-type(3) { animation-delay: .75s; }
.route__path circle:nth-of-type(4) { animation-delay: .95s; }
@keyframes dot-pop { from { transform: scale(0); opacity: 0; } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 74rem) {
  .nav__links { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .nav__right { margin-left: auto; }
  .nav__burger { margin-left: 0; }

  .nav.is-open { background: rgba(10, 6, 5, .97); }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 6, 5, .97);
    border-bottom: 1px solid rgba(245, 243, 232, .1);
    padding: .5rem 0 1rem;
  }
  .nav.is-open .nav__links a { padding: .8rem var(--pad); }
  .nav.is-open .nav__links a.is-active { color: var(--ember); }
  .nav.is-open .nav__links a::after { display: none; }
  .nav.is-open .nav__link-contact { display: block; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 64rem) {
  .constat__grid, .pricing { grid-template-columns: repeat(2, 1fr); }
  .objet { margin-top: 0; }
  .route__phases { grid-template-columns: repeat(2, 1fr); }
  .simulator__panel { grid-template-columns: 1fr; }
  .simulator__results {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  /* parcours client : la vignette passe sous le texte */
  .moment { grid-template-columns: 5.5rem 1fr; }
  .journey::before { left: 7rem; }
  .moment::before { left: calc(7rem - .31rem); }
  .moment__visual { grid-column: 2; justify-items: start; margin-top: 1rem; }
}

@media (max-width: 44rem) {
  .nav__right { display: none; }

  .constat__grid, .pricing, .layers, .garanties,
  .market, .route__phases, .team, .journey__totals {
    grid-template-columns: 1fr;
  }
  .market__item + .market__item { border-left: 0; }

  /* parcours client : tout empilé, axe masqué */
  .journey::before, .moment::before { display: none; }
  .moment { grid-template-columns: 1fr; gap: .75rem; }
  .moment__when { text-align: left; }
  .moment__when br { display: none; }
  .moment__when strong { display: inline; font-size: 1.2rem; margin-left: .4rem; }
  .moment__visual { grid-column: 1; justify-items: start; }

  /* architecture : le flux passe en colonne */
  .archflow__rail, .archflow__comet { display: none; }
  .archflow__stops { grid-template-columns: 1fr; gap: 1rem; }
  .archflow__stop { text-align: left; padding-top: 0; padding-left: 1.5rem; }
  .archflow__stop::before { top: .25rem; left: 0; margin-left: 0; }
  .archflow__caption { text-align: left; }

  /* tarifs : résultats du simulateur empilés */
  .simulator__results { grid-template-columns: 1fr; }

  /* la solution : actes empilés, ligne de vol masquée */
  .acts__flight { display: none; }
  .acts__row { grid-template-columns: 1fr; margin-top: 0; }
  .acts__vault { align-items: flex-start; }

  .hero__line { display: none; }
  .hero__corner--tr { top: 4.5rem; }
}

/* ==========================================================================
   Accessibilité — mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
  .standards__track { animation: none; }
  .hero__stamp, .hero__title, .hero__tagline, .hero__sub, .hero__cta,
  .hero__line--left, .hero__line--right { animation: none; }
  .route__line, .route__path circle { animation: none; }
  .route__plane { display: none; }
  .archflow__comet { animation: none; opacity: 0; }
  .market__bar::after { animation: none; }
  .acts__comet { animation: none; opacity: 0; }
  .v-term__caret { animation: none; }
  .ambient, .warp { display: none; }
  body::after { display: none; }
  * { transition-duration: .01ms !important; }
}