/* ============================================================
   Page commune des sites spécialisés (AvocatCV, LuxeCV, ConseilCV,
   AuditCV, FinanceCV) — générée depuis
   my-cv-app/packages/ui/src/landing/LandingStyles.tsx.
   Ne pas retoucher à la main : régénérer avec le script de la README,
   puis surcharger dans hub.css.
   ============================================================ */
.avl-page {
  --ink-900: #071628;
  --ink-800: #0b2347;
  --ink-700: #1f3a5f;
  --ink-500: #42618c;
  --ink-300: #8fa3be;
  --ink-200: #c3cedd;
  --ink-100: #e4e9f0;
  --grey-600: #645f5b;
  --grey-400: #948e88;
  --paper: #f9f8f3;
  --white: #ffffff;
  --hair: rgba(11, 35, 71, 0.13);
  --hair-strong: rgba(11, 35, 71, 0.24);
  /* Accent du site : --accent, --accent-dark et leurs triplets RGB
     arrivent en style en ligne (VerticalLanding). */
  --accent-tint: rgba(var(--accent-rgb), 0.08);
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-menu: 0 8px 24px rgba(7, 22, 40, 0.1);
  --shadow-float: 0 1px 2px rgba(7, 22, 40, 0.06), 0 24px 56px -24px rgba(7, 22, 40, 0.28);
  --shadow-lift: 0 1px 2px rgba(7, 22, 40, 0.06), 0 32px 72px -28px rgba(7, 22, 40, 0.36);
  --font-display: 'Gabarito', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  /* Maquettes de CV : surtout pas 'Times New Roman'. Les globals.css
     redéclarent cette famille en @font-face (woff2 de l'éditeur), ce
     qui faisait télécharger 700 à 900 Ko de polices à chaque visite de
     l'accueil (audit vitesse du 18/10, C1). 'Times' n'est redéclaré
     nulle part : Mac et iOS le prennent en local, Windows et Android
     retombent sur Georgia ou Noto Serif, sans rien télécharger. */
  --font-cv: Times, Georgia, 'Noto Serif', serif;

  position: relative;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body { background: #f9f8f3; }
.avl-page main { position: relative; z-index: 1; }
.avl-page footer { position: relative; z-index: 1; }
.avl-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Filet de tête et en-tête pilule ───────────────────────── */
.avl-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); z-index: 1001;
}

/* ── Ruban de filets (fond fixe) ───────────────────────────── */
.avl-ribbon {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  animation: avl-fade-in 1.4s 0.2s var(--ease) both;
}
.avl-ribbon canvas { display: block; width: 100%; height: 100%; }

/* ── Grille, typographie ───────────────────────────────────── */
.avl-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 28px; }
@media (min-width: 880px) { .avl-wrap { padding-inline: 48px; } }
.avl-section { padding-block: 96px; }
.avl-center { text-align: center; margin-inline: auto; }
.avl-muted { color: var(--ink-500); }

.avl-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--grey-600);
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
}
.avl-eyebrow::before {
  content: ''; flex: none; width: 7px; height: 7px;
  border-radius: 999px; background: var(--accent);
}
.avl-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px); line-height: 1.06; letter-spacing: -0.03em;
  margin: 24px auto 0; max-width: 1180px; text-wrap: balance;
}
.avl-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.025em;
  margin: 0 0 16px; max-width: 24ch; text-wrap: balance;
}
.avl-h2.avl-center, .avl-sub.avl-center { margin-inline: auto; }
.avl-h3 { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
.avl-sub { font-size: 17px; color: var(--ink-700); max-width: 62ch; margin: 0; text-wrap: pretty; }
.avl-lead { font-size: 17px; color: var(--ink-700); max-width: 62ch; margin: 24px auto 0; text-wrap: pretty; }
.avl-body { font-size: 15px; color: var(--ink-700); max-width: 62ch; margin: 0; }
.avl-small { font-size: 13.5px; color: var(--ink-700); margin: 0; }
.avl-ref { font-family: var(--font-mono); font-size: 13px; color: var(--grey-600); margin: 0; }
.avl-head { margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.avl-head .avl-eyebrow { justify-content: center; }
.avl-head .avl-h2 { margin-inline: auto; }

.avl-list { list-style: none; padding: 0; margin: 0; }
.avl-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--ink-700); }
.avl-list li::before {
  content: ''; position: absolute; left: 2px; top: 0.66em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}
.avl-list--sm li { font-size: 14.5px; line-height: 1.6; }

.avl-textlink {
  color: var(--accent); font-weight: 600; font-size: 15px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-thickness 0.2s;
}
.avl-textlink:hover { text-decoration-thickness: 2px; }

/* Boutons pilule — une seule action pleine par écran */
.avl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink-800); color: var(--paper);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.35s var(--ease), box-shadow 0.45s var(--ease);
}
.avl-btn:hover {
  background: var(--accent); transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb), 0.6);
}
.avl-btn:active { transform: translateY(0) scale(0.99); }
.avl-btn-arrow { transition: transform 0.3s var(--ease); }
.avl-btn:hover .avl-btn-arrow { transform: translateX(3px); }
.avl-btn--ghost {
  background: rgba(255, 255, 255, 0.82); color: var(--ink-800);
  border-color: var(--hair-strong); font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.avl-btn--ghost:hover { background: var(--white); border-color: var(--ink-800); box-shadow: 0 12px 28px -16px rgba(7, 22, 40, 0.4); }
.avl-btn--lg { height: 60px; padding: 0 36px; font-size: 16px; }

/* Apparition au défilement : seulement une fois le JS chargé. */
.avl-page[data-motion] [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s);
}
.avl-page[data-motion] [data-reveal][data-in] { opacity: 1; transform: none; }

/* ── Hero ──────────────────────────────────────────────────── */
.avl-hero { padding-top: clamp(32px, 7vh, 72px); text-align: center; }
.avl-hero-head { display: flex; flex-direction: column; align-items: center; }
.avl-word {
  display: inline-block; opacity: 0; transform: translateY(0.3em);
  animation: avl-word-in 0.8s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.avl-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--hair);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--grey-600);
}
.avl-badge-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  animation: avl-pulse 2.4s ease-in-out infinite;
}
/* Le h1 hérite de la typographie de son conteneur .avl-h1 (la file de
   mots est son frère, hors du titre) : neutraliser les styles du navigateur. */
.avl-h1-title { font: inherit; letter-spacing: inherit; margin: 0; }
.avl-h1-line { display: block; }
/* Le titre prend toute la largeur du hero (et non celle de l'accroche,
   comme un enfant centré d'une colonne flex) : la file de mots a besoin
   de place à droite pour montrer les mots qui attendent. */
.avl-hero-head .avl-h1 { width: 100%; }
/* File de mots (Hero.tsx) : le mot du moment au centre, les suivants
   attendent à droite et avancent d'un rang à chaque pas. Positions et
   opacités sont posées en JS ; --qs réduit la ligne quand le mot le plus
   long ne tient pas, --qf règle les fondus des bords. Sans JS : le
   premier mot seul, centré. */
.avl-queue {
  position: relative; display: block; height: 1.24em; overflow: hidden;
  font-size: calc(var(--qs, 1) * 1em);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--qf, 48px), #000 calc(100% - var(--qf, 48px)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--qf, 48px), #000 calc(100% - var(--qf, 48px)), transparent);
}
.avl-queue-static { display: inline-block; white-space: nowrap; }
.avl-queue[data-ready] .avl-queue-static { display: none; }
.avl-queue-item {
  position: absolute; top: 0; left: 50%; height: 100%;
  display: flex; align-items: center; padding-bottom: 0.1em;
  white-space: nowrap; visibility: hidden; will-change: transform;
}
.avl-queue[data-ready] .avl-queue-item { visibility: visible; }
/* Transitions seulement après le premier placement (data-moving), sinon
   les mots partiraient tous du centre ; le mot sorti à gauche repart en
   fin de file d'un coup, invisible. */
.avl-queue[data-moving] .avl-queue-item { transition: transform 0.75s var(--ease), opacity 0.75s var(--ease); }
.avl-queue[data-moving] .avl-queue-item[data-wrap] { transition: none; }
.avl-queue-word { position: relative; }
.avl-queue-word::after {
  content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.02em;
  height: max(3px, 0.055em); border-radius: 999px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
}
.avl-queue-static .avl-queue-word::after { animation: avl-rule 0.9s 0.45s var(--ease) forwards; }
.avl-queue-item.is-active .avl-queue-word::after { animation: avl-rule 0.6s 0.3s var(--ease) forwards; }

.avl-hero-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.avl-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.avl-hero-note { margin: 0; font-size: 13.5px; color: var(--grey-600); }

.avl-hero-stage { margin-top: 48px; padding-bottom: 64px; }
.avl-hero-persp {
  position: relative; max-width: 1080px; margin: 0 auto; padding-inline: 28px;
  perspective: 1400px; perspective-origin: 50% 0%;
}
.avl-hero-window {
  --p: 0;
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--white); border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-lift);
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--p)) * -48px)) rotateX(calc((1 - var(--p)) * 14deg)) scale(calc(0.9 + var(--p) * 0.1));
  will-change: transform;
}
.avl-hero-window img { display: block; width: 100%; height: auto; }
.avl-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--hair);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-float);
  animation: avl-pop 0.7s var(--ease) both, avl-bob 7s ease-in-out infinite;
}
.avl-chip--review { left: -8px; top: 22%; animation-delay: 1.1s, 1.8s; }
.avl-chip--adapt { right: -16px; top: 46%; animation-delay: 1.35s, 0.6s; }
.avl-chip--translate { left: 9%; bottom: -20px; animation-delay: 1.6s, 2.6s; }
.avl-chip-text { display: flex; flex-direction: column; }
.avl-chip-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-600); }
.avl-chip-value { font-size: 15px; font-weight: 600; color: var(--ink-800); line-height: 1.35; }
.avl-chip-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--hair); color: var(--ink-800);
}
.avl-chip-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.avl-chip-ring { width: 40px; height: 40px; }
.avl-chip-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.avl-chip-ring circle { fill: none; stroke-width: 3.5; }
.avl-chip-ring-track { stroke: var(--ink-100); }
.avl-chip-ring-fill {
  stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 94.25;
  stroke-dashoffset: 13.2; animation: avl-chip-ring 1.6s 1.4s var(--ease) both;
}

/* ── Bandeau de logos de cabinets ──────────────────────────── */
.avl-firms { padding-block: 32px 64px; }
.avl-firms-eyebrow { justify-content: center; text-align: center; }
.avl-marquee {
  overflow: hidden; padding-block: 16px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.avl-marquee-track { display: flex; width: max-content; animation: avl-marquee 60s linear infinite; }
.avl-marquee:hover .avl-marquee-track { animation-play-state: paused; }
.avl-marquee-row { display: flex; align-items: center; gap: 64px; padding: 0 64px 0 0; margin: 0; list-style: none; }
.avl-firm { flex: none; display: flex; align-items: center; height: 48px; }
.avl-firm img {
  display: block; height: var(--h); width: auto;
  filter: grayscale(1) brightness(0.35); opacity: 0.55;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.avl-firm:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

/* ── Problèmes : cartes verre + halo liquide ───────────────── */
.avl-problems .avl-h2 { max-width: 26ch; margin-bottom: 48px; }
.avl-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.avl-problem {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 24px;
  padding: 32px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--hair);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: transform 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft), background 0.55s var(--ease-soft);
}
.avl-page[data-motion] .avl-problem[data-reveal][data-in] { transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft), background 0.55s; }
.avl-problem:hover, .avl-problem.is-active { background: rgba(255, 255, 255, 0.86); box-shadow: var(--shadow-lift); }
.avl-page .avl-problem:hover, .avl-page .avl-problem.is-active,
.avl-page[data-motion] .avl-problem[data-reveal][data-in]:hover,
.avl-page[data-motion] .avl-problem[data-reveal][data-in].is-active { transform: translateY(-6px) scale(1.012); }
.avl-problem-num {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1;
  letter-spacing: -0.04em; color: var(--ink-300); font-variant-numeric: tabular-nums;
  transition: color 0.4s, transform 0.4s var(--ease); position: relative; z-index: 1;
}
.avl-problem:hover .avl-problem-num, .avl-problem.is-active .avl-problem-num { color: var(--accent); transform: translateY(-2px) scale(1.06); }
.avl-problem-body { position: relative; z-index: 1; }
.avl-liquid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  overflow: hidden; opacity: 0; filter: blur(40px); transform: translateY(18%);
  transition: opacity 0.7s ease-in, transform 0.7s ease-in;
}
.avl-problem:hover .avl-liquid, .avl-problem.is-active .avl-liquid {
  opacity: 1; transform: none;
  transition: opacity 1.4s cubic-bezier(0.18, 0.72, 0.3, 1), transform 1s var(--ease);
}
.avl-liquid i { position: absolute; inset: 0; display: block; animation: avl-orbit 24s linear infinite paused; }
.avl-liquid i:nth-child(1) { animation-delay: var(--phase, 0s); }
.avl-liquid i:nth-child(2) { animation-delay: calc(var(--phase, 0s) - 8s); }
.avl-liquid i:nth-child(3) { animation-delay: calc(var(--phase, 0s) - 16s); }
.avl-liquid b {
  position: absolute; top: 50%; left: 50%; display: block; border-radius: 50%;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-iteration-count: infinite; animation-play-state: paused;
}
.avl-problem:hover .avl-liquid i, .avl-problem:hover .avl-liquid b,
.avl-problem.is-active .avl-liquid i, .avl-problem.is-active .avl-liquid b { animation-play-state: running; }
.avl-liquid i:nth-child(1) b {
  width: 120%; height: 120%; margin: -60% 0 0 -60%; opacity: 0.8;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.55), transparent);
  animation-name: avl-wobble-a; animation-duration: 13s; animation-delay: -4s;
}
.avl-liquid i:nth-child(2) b {
  width: 116%; height: 110%; margin: -55% 0 0 -58%; opacity: 0.9;
  background: radial-gradient(closest-side, rgba(var(--accent-dark-rgb), 0.85), transparent);
  animation-name: avl-wobble-b; animation-duration: 17s; animation-delay: -9s;
}
.avl-liquid i:nth-child(3) b {
  width: 110%; height: 118%; margin: -59% 0 0 -55%; opacity: 0.9;
  background: radial-gradient(closest-side, rgba(195, 206, 221, 0.9), transparent);
  animation-name: avl-wobble-c; animation-duration: 19s; animation-delay: -15s;
}

/* ── Récit épinglé des fonctionnalités ─────────────────────── */
.avl-story { padding-top: 96px; }
.avl-story-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; }
.avl-story-head .avl-h2 { max-width: 28ch; }
.avl-story-track { position: relative; height: calc(var(--n) * 78vh + 100vh); }
.avl-story-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  padding: 96px 0 40px; display: grid;
}
.avl-story-scene {
  position: relative; width: 100%; max-width: 1320px; margin: 0 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr);
  align-items: center; column-gap: 64px; padding: 0 48px 0 104px;
}
.avl-story-step { display: contents; }
.avl-story-text {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(32px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.avl-story-step[data-state='past'] .avl-story-text { transform: translateY(-32px); }
.avl-story-step[data-state='active'] .avl-story-text {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.6s var(--ease) 0.08s, transform 0.7s var(--ease) 0.08s, visibility 0s;
}
.avl-story-count {
  display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em; color: var(--grey-600);
}
.avl-story-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.12; margin: 0 0 24px; text-wrap: balance;
}
.avl-story-desc { font-size: 17px; line-height: 1.65; color: var(--ink-700); margin: 0; max-width: 42ch; text-wrap: pretty; }
.avl-story-desc + .avl-story-desc { margin-top: 12px; }
.avl-story-view {
  grid-area: 1 / 2; align-self: stretch; display: grid; place-items: center; min-height: 0;
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 32px));
  transition: opacity 0.7s var(--ease), transform 0.85s var(--ease), visibility 0s linear 0.85s;
}
.avl-story-step[data-state='past'] .avl-story-view { transform: translateY(calc(-100% - 32px)); }
.avl-story-step[data-state='active'] .avl-story-view {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.85s var(--ease), visibility 0s;
}
.avl-story-view .avl-frame { max-width: min(100%, calc((100vh - 160px) * 4 / 3)); }

.avl-rail { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); height: 130px; overflow: hidden; z-index: 2; }
.avl-rail ol {
  list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 26px;
  transform: translateY(calc((2 - var(--i)) * 26px)); transition: transform 0.6s var(--ease);
}
.avl-rail li { display: grid; place-items: center; }
.avl-rail-dot {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.avl-rail-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--ink-300);
  opacity: max(0.18, calc(1 - var(--dist, 0) * 0.3)); transition: background 0.4s, opacity 0.4s, transform 0.4s var(--ease);
}
.avl-rail-dot[aria-current]::before { background: var(--accent); opacity: 1; transform: scale(1.2); }
.avl-rail-dot[aria-current]::after {
  content: ''; position: absolute; inset: 4px; border-radius: 999px; border: 1.5px solid var(--accent);
  animation: avl-pop 0.4s var(--ease) both;
}

.avl-story-list { display: flex; flex-direction: column; gap: 64px; padding-bottom: 32px; }
.avl-story-stacked { display: flex; flex-direction: column; gap: 24px; }
.avl-story-stacked .avl-story-text { opacity: 1; visibility: visible; transform: none; }

/* Cadre des maquettes */
.avl-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: #f3f1ea; border: 1px solid var(--hair-strong); box-shadow: var(--shadow-float);
  container-type: inline-size;
}
.avl-frame-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 6.4cqw; z-index: 1;
  display: flex; align-items: center; gap: 1.6cqw; padding: 0 2.4cqw;
  background: var(--white); border-bottom: 1px solid var(--hair); font-size: 1.5cqw;
}
.avl-frame-logo { font-family: 'Outfit', var(--font-body); font-weight: 500; font-size: 1.9cqw; letter-spacing: -0.01em; color: var(--ink-800); }
.avl-frame-logo i { font-style: normal; color: var(--accent); }
.avl-frame-doc { padding: 0.4em 1.2em; border-radius: 0.5em; background: var(--paper); border: 1px solid var(--hair); color: var(--ink-700); }
.avl-frame-spacer { flex: 1; }
.avl-frame-btn { padding: 0.45em 1.1em; border-radius: 999px; background: var(--ink-800); color: var(--paper); font-weight: 600; }
.avl-scene-host { position: absolute; inset: 6.4cqw 0 0; }
.avl-scene {
  position: absolute; inset: 0; font-size: 1.78cqw; line-height: 1.45; color: var(--ink-800);
  font-family: var(--font-body);
}

/* Feuille de CV commune (maquettes + schéma) */
.avl-sheet {
  background: var(--white); border: 1px solid var(--hair); border-radius: 0.5em;
  padding: 2.2em 2.4em; font-family: var(--font-cv); color: #141414; line-height: 1.4; text-align: left;
}
.avl-sheet p { margin: 0; }
.avl-sheet-name { font-size: 2em; font-weight: 700; text-align: center; letter-spacing: 0.01em; line-height: 1.2; }
.avl-sheet-contact { text-align: center; font-size: 0.9em; margin-top: 0.3em !important; }
.avl-sheet-headline { text-align: center; font-style: italic; font-size: 0.92em; margin-top: 0.2em !important; }
.avl-sheet-section {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.92em;
  border-bottom: 1px solid #141414; padding-bottom: 0.15em; margin: 1em 0 0.45em !important;
}
.avl-sheet-row { display: flex; justify-content: space-between; gap: 1em; font-size: 0.92em; }
.avl-sheet-row em { white-space: nowrap; }
.avl-sheet-lines { margin: 0.3em 0 0; padding-left: 1.3em; list-style: disc; font-size: 0.92em; }
.avl-sheet-lines li { margin-bottom: 0.2em; }

/* ── Les trois exigences : mode focus + schéma ─────────────── */
.avl-pillars { position: relative; isolation: isolate; }
.avl-pillars-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.avl-pillars-title { font-size: clamp(26px, 2.6vw, 34px); max-width: 22ch; }
.avl-pillar-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.avl-pillar {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: 16px 24px;
  padding: 16px 24px 16px 16px; border-radius: 16px; outline: none;
  transition: transform 1s cubic-bezier(0.2, 0.92, 0.26, 1), filter 0.8s, opacity 0.8s, box-shadow 0.9s;
}
.avl-page[data-motion] .avl-pillar[data-reveal][data-in] {
  transition: opacity 0.8s var(--ease) var(--d, 0s), transform 1s cubic-bezier(0.2, 0.92, 0.26, 1), filter 0.8s, box-shadow 0.9s;
}
.avl-pillar-glass {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--white);
  border: 1px solid var(--hair); opacity: 0; transition: opacity 0.6s var(--ease);
}
.avl-pillar[data-active] .avl-pillar-glass { opacity: 1; }
.avl-pillar-chip {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--hair); color: var(--ink-800);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.avl-pillar-chip svg, .avl-node-chip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.avl-pillar[data-active] .avl-pillar-chip { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--accent); }
.avl-pillar-head { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.avl-pillar-num { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--grey-600); margin-right: 8px; }
.avl-pillar-label {
  display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-600); transition: color 0.4s;
}
.avl-pillar[data-active] .avl-pillar-label { color: var(--accent); }
.avl-pillar-desc { margin: 0; font-size: 15px; color: var(--ink-700); max-width: 52ch; }
.avl-pillar-conclusion { margin-top: 32px; padding-left: 16px; border-left: 2px solid var(--ink-800); transition: filter 0.8s, opacity 0.8s; }
.avl-pillar-conclusion p { margin: 0; font-size: 15px; color: var(--ink-700); max-width: 56ch; }

@media (hover: hover) and (min-width: 1001px) {
  .avl-pillars::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--ink-900); opacity: 0; transition: opacity 0.9s cubic-bezier(0.2, 0.92, 0.26, 1);
    mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent);
  }
  .avl-pillars[data-focus]::after { opacity: 0.24; }
  .avl-pillars-title { transition: filter 0.8s, opacity 0.8s; }
  .avl-page .avl-pillars[data-focus] .avl-pillars-title[data-reveal],
  .avl-page .avl-pillars[data-focus] .avl-pillar:not([data-active])[data-reveal],
  .avl-page .avl-pillars[data-focus] .avl-pillar-conclusion[data-reveal] { filter: blur(4px); opacity: 0.45; }
  .avl-page .avl-pillars[data-focus] .avl-pillar[data-active][data-reveal] { z-index: 2; transform: scale(1.06); box-shadow: var(--shadow-lift); }
  .avl-pillars[data-focus] .avl-diagram { z-index: 2; }
}

.avl-diagram {
  position: relative; margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr);
  align-items: stretch; min-height: 440px;
}
.avl-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.avl-wire-line { fill: none; stroke: var(--ink-300); stroke-width: 1.2; opacity: 0.55; transition: stroke 0.4s, opacity 0.4s, stroke-width 0.4s; }
.avl-wire-flow { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 11; opacity: 0; transition: opacity 0.4s; }
.avl-wire-end { fill: var(--ink-300); transition: fill 0.4s; }
.avl-diagram[data-lit='0'] [data-wire='0'] .avl-wire-line,
.avl-diagram[data-lit='1'] [data-wire='1'] .avl-wire-line,
.avl-diagram[data-lit='2'] [data-wire='2'] .avl-wire-line { stroke: var(--accent); opacity: 0.35; stroke-width: 1.6; }
.avl-diagram[data-lit='0'] [data-wire='0'] .avl-wire-flow,
.avl-diagram[data-lit='1'] [data-wire='1'] .avl-wire-flow,
.avl-diagram[data-lit='2'] [data-wire='2'] .avl-wire-flow { opacity: 1; animation: avl-flow 0.9s linear infinite; }
.avl-diagram[data-lit='0'] [data-wire='0'] .avl-wire-end,
.avl-diagram[data-lit='1'] [data-wire='1'] .avl-wire-end,
.avl-diagram[data-lit='2'] [data-wire='2'] .avl-wire-end { fill: var(--accent); }
.avl-nodes { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; }
.avl-node { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.45s var(--ease); }
.avl-node-chip {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--hair); color: var(--ink-500);
  transition: box-shadow 0.4s var(--ease), color 0.4s;
}
.avl-node-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-600); }
.avl-diagram[data-lit='0'] [data-node='0'],
.avl-diagram[data-lit='1'] [data-node='1'],
.avl-diagram[data-lit='2'] [data-node='2'] { transform: scale(1.08); }
.avl-diagram[data-lit='0'] [data-node='0'] .avl-node-chip,
.avl-diagram[data-lit='1'] [data-node='1'] .avl-node-chip,
.avl-diagram[data-lit='2'] [data-node='2'] .avl-node-chip { color: var(--ink-800); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--accent); }
.avl-diagram-sheet {
  position: relative; z-index: 1; align-self: center; font-size: clamp(10.5px, 0.95vw, 13px);
  padding: 2.6em 2.8em; box-shadow: var(--shadow-float);
}
.avl-zone { border-radius: 0.25em; transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.avl-diagram[data-lit='0'] [data-zone='0'],
.avl-diagram[data-lit='1'] [data-zone='1'],
.avl-diagram[data-lit='2'] [data-zone='2'] { background: rgba(var(--accent-rgb), 0.07); box-shadow: 0 0 0 0.4em rgba(var(--accent-rgb), 0.07); }
.avl-zone--figures mark { color: inherit; background: transparent; border-radius: 0.15em; transition: background 0.5s, box-shadow 0.5s; }
.avl-diagram[data-lit='2'] .avl-zone--figures mark { background: rgba(var(--accent-rgb), 0.16); box-shadow: inset 0 -1.5px 0 var(--accent); }
.avl-secret { display: inline-grid; }
.avl-secret > span { grid-area: 1 / 1; }
.avl-secret-before {
  opacity: 0; color: var(--grey-600);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 0% 1.5px;
}
.avl-secret.is-playing .avl-secret-before { animation: avl-secret-before 2.8s var(--ease) both; }
.avl-secret.is-playing .avl-secret-after { animation: avl-secret-after 2.8s var(--ease) both; }

/* ── Profils en onglets ────────────────────────────────────── */
.avl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.avl-tab {
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px 0 16px;
  border-radius: 999px; border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-700); cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.avl-tab:hover { border-color: var(--ink-800); color: var(--ink-800); }
.avl-tab-ring { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--ink-300); transition: all 0.3s; }
.avl-tab[aria-selected='true'] { background: var(--ink-800); border-color: var(--ink-800); color: var(--paper); }
.avl-tab[aria-selected='true'] .avl-tab-ring { border-color: transparent; background: var(--accent-dark); box-shadow: 0 0 0 2.5px var(--ink-800), 0 0 0 4px var(--accent-dark); }
.avl-profile-panel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center;
  max-width: 980px; margin: 0 auto; padding: 48px; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--hair);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.avl-profile-text { animation: avl-panel-in 0.55s var(--ease) both; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.avl-profile-text .avl-list { margin: 8px 0; }
.avl-profile-role { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.18; letter-spacing: -0.022em; }
.avl-profile-sheet {
  justify-self: center; width: min(100%, 280px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px;
  background: var(--white); border: 1px solid var(--hair); box-shadow: var(--shadow-float);
  transform: rotate(2deg); animation: avl-sheet-in 0.6s var(--ease) both;
}
.avl-profile-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avl-profile-sheet { container-type: inline-size; }
.avl-profile-mock {
  height: 100%; border: 0; border-radius: 0; overflow: hidden;
  font-size: 3cqw; padding: 8cqw 7cqw;
}
.avl-profile-mock .avl-sheet-name { font-size: 1.9em; }

/* ── Comparatif ────────────────────────────────────────────── */
.avl-compare-scroll { overflow-x: auto; }
.avl-compare-table {
  width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px;
  background: rgba(255, 255, 255, 0.84); border: 1px solid var(--hair-strong);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.avl-compare-table th, .avl-compare-table td {
  text-align: left; vertical-align: top; padding: 16px 24px; border-bottom: 1px solid var(--hair);
  transition: background 0.3s;
}
.avl-compare-table thead th { padding-block: 24px; border-bottom-color: var(--hair-strong); }
.avl-compare-table thead th.is-av { box-shadow: inset 0 3px 0 var(--accent); }
.avl-compare-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; color: var(--ink-800); }
.avl-compare-sub { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: var(--grey-600); }
.avl-compare-crit { width: 22%; font-weight: 600; color: var(--ink-800); }
.avl-compare-table td { position: relative; padding-left: 48px; color: var(--ink-700); }
.avl-compare-table .is-av { background: rgba(var(--accent-rgb), 0.045); color: var(--ink-800); }
.avl-compare-table tbody tr:hover th, .avl-compare-table tbody tr:hover td { background: rgba(11, 35, 71, 0.035); }
.avl-compare-table tbody tr:hover .is-av { background: rgba(var(--accent-rgb), 0.09); }
.avl-compare-mark {
  position: absolute; left: 24px; top: calc(16px + 0.62em); width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent); transition: box-shadow 0.3s;
}
.avl-compare-mark.is-empty { background: transparent; border: 1.5px solid var(--grey-400); }
.avl-compare-table tbody tr:hover .is-av .avl-compare-mark { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }

/* ── Tarifs (mêmes offres que FinanceCV) ───────────────────── */
.avl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 0 auto; align-items: stretch; }
.avl-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.avl-plan {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: 32px; border-radius: 16px; background: rgba(255, 255, 255, 0.84); border: 1px solid var(--hair);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
}
.avl-plan-name { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--ink-800); }
.avl-plan-amount {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink-800);
}
.avl-plan-amount small { font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--grey-600); }
.avl-plan-note { margin: 0; font-size: 13.5px; color: var(--grey-600); }
.avl-plan-list { margin: 24px 0 32px; flex: 1; }
.avl-plan-cta { align-self: stretch; }
.avl-plan-ribbon {
  position: absolute; top: 24px; right: 24px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(var(--accent-dark-rgb), 0.16); color: var(--accent-dark);
}
/* Carte mise en avant sur fond encre : l'accent passe à sa version sombre. */
.avl-plan--featured { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); box-shadow: var(--shadow-lift); }
.avl-plan--featured .avl-plan-name, .avl-plan--featured .avl-plan-amount { color: var(--paper); }
.avl-plan--featured .avl-plan-amount small, .avl-plan--featured .avl-plan-note { color: var(--ink-200); }
.avl-plan--featured .avl-list li { color: var(--ink-100); }
.avl-plan--featured .avl-list li::before { background: var(--accent-dark); }
.avl-plan--featured .avl-btn { background: var(--paper); color: var(--ink-900); }
.avl-plan--featured .avl-btn:hover { background: var(--accent-dark); color: var(--ink-900); box-shadow: 0 14px 30px -14px rgba(var(--accent-dark-rgb), 0.6); }
.avl-plan--featured .avl-glow { background: radial-gradient(closest-side, rgba(var(--accent-dark-rgb), 0.28), transparent); }
.avl-plans-foot { margin: 24px 0 0; text-align: center; font-size: 13.5px; color: var(--grey-600); }
.avl-glow {
  position: absolute; z-index: -1; right: -18%; bottom: -42%; width: 72%; height: 96%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-dark-rgb), 0.38), transparent); filter: blur(24px);
  animation: avl-glow 14s ease-in-out infinite alternate;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.avl-faq-wrap { max-width: 880px; }
.avl-faq-list { display: flex; flex-direction: column; gap: 12px; }
.avl-faq-item {
  border-radius: 16px; background: rgba(255, 255, 255, 0.74); border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: background 0.4s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.avl-page[data-motion] .avl-faq-item[data-reveal][data-in] { transition: opacity 0.8s var(--ease) var(--d, 0s), background 0.4s, box-shadow 0.45s, transform 0.45s var(--ease); }
.avl-faq-item:hover { background: rgba(255, 255, 255, 0.86); }
.avl-page .avl-faq-item:hover, .avl-page[data-motion] .avl-faq-item[data-reveal][data-in]:hover { transform: translateY(-2px); }
.avl-faq-item.is-open { background: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 40px -24px rgba(7, 22, 40, 0.3); }
.avl-faq-q { margin: 0; font-size: inherit; }
.avl-faq-q button {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 24px; border: 0; background: none;
  text-align: left; cursor: pointer; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink-800);
  border-radius: 16px;
}
.avl-faq-num {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--hair-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--grey-600);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.avl-faq-item.is-open .avl-faq-num { background: var(--ink-800); border-color: var(--ink-800); color: var(--paper); }
.avl-faq-text { flex: 1; }
.avl-faq-icon {
  width: 9px; height: 9px; flex: none; margin-right: 4px; border-right: 1.5px solid var(--ink-500); border-bottom: 1.5px solid var(--ink-500);
  transform: translateY(-2px) rotate(45deg); transition: transform 0.45s var(--ease);
}
.avl-faq-item.is-open .avl-faq-icon { transform: translateY(2px) rotate(-135deg); }
.avl-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.avl-faq-a > div { overflow: hidden; }
.avl-faq-a p { margin: 0; padding: 0 24px 24px 68px; font-size: 15px; line-height: 1.65; color: var(--ink-700); max-width: 72ch; }
.avl-faq-item.is-open .avl-faq-a { grid-template-rows: 1fr; }

/* ── Appel final ───────────────────────────────────────────── */
.avl-final { padding-block: 96px 128px; }
.avl-final-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.avl-final-title {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.avl-final-title .avl-muted { display: block; }
.avl-final-notes { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 14px; color: var(--grey-600); }
.avl-final-notes span { display: inline-flex; align-items: center; gap: 8px; }
.avl-final-notes span::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .avl-chip--review { left: 8px; }
  .avl-chip--adapt { right: 8px; }
}
@media (max-width: 1000px) {
  .avl-pillars-inner { grid-template-columns: 1fr; gap: 48px; }
  .avl-diagram { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 880px) {
  .avl-section, .avl-story { padding-block: 64px; }
  .avl-story { padding-bottom: 0; }
  .avl-hero-window { transform: none !important; }
  .avl-hero-stage { margin-top: 32px; padding-bottom: 48px; }
  .avl-chip { padding: 8px 12px 8px 8px; gap: 8px; }
  .avl-chip-value { font-size: 13px; }
  .avl-chip-ring, .avl-chip-icon { width: 30px; height: 30px; }
  .avl-chip--review { top: auto; bottom: -24px; left: 12px; }
  .avl-chip--adapt { top: -20px; right: 12px; }
  .avl-chip--translate { display: none; }
  .avl-problem-grid { grid-template-columns: 1fr; gap: 16px; }
  .avl-problem { padding: 24px; gap: 16px; }
  .avl-problem-num { font-size: 32px; }
  .avl-profile-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .avl-profile-sheet { width: min(100%, 220px); }
  .avl-plans, .avl-plans--3 { grid-template-columns: 1fr; max-width: 480px; }
  .avl-plan { padding: 24px; }
  .avl-faq-q button { padding: 16px; gap: 12px; font-size: 15px; }
  .avl-faq-a p { padding: 0 16px 16px 56px; }
  .avl-final { padding-block: 64px 96px; }
}
@media (max-width: 580px) {
  .avl-badge { font-size: 9.5px; letter-spacing: 0.1em; padding: 8px 12px; }
  .avl-hero-btns { flex-direction: column; width: 100%; }
  .avl-hero-btns .avl-btn { width: 100%; }
  .avl-queue { height: 1.3em; }
  .avl-chip-label { font-size: 9.5px; }
  .avl-marquee-row { gap: 40px; padding-right: 40px; }
  /* responsive.css impose img { height: auto !important } sur mobile. */
  .avl-firm img { height: var(--hm) !important; max-width: none !important; }
  .avl-diagram { grid-template-columns: 72px minmax(0, 1fr); min-height: 0; }
  .avl-node-chip { width: 44px; height: 44px; border-radius: 12px; }
  .avl-node-label { font-size: 9.5px; }
  .avl-diagram-sheet { padding: 1.6em 1.4em; font-size: 9.5px; }
  .avl-tab { height: 40px; padding: 0 14px 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .avl-page *, .avl-page *::before, .avl-page *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
  }
  .avl-hero-window { transform: none !important; }
  .avl-marquee { overflow-x: auto; }
}

/* ── Images clés ───────────────────────────────────────────── */
@keyframes avl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes avl-word-in { to { opacity: 1; transform: none; } }
@keyframes avl-rule { to { transform: scaleX(1); } }
@keyframes avl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes avl-pop { from { opacity: 0; transform: scale(0.88); } 60% { opacity: 1; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
@keyframes avl-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes avl-chip-ring { from { stroke-dashoffset: 94.25; } }
@keyframes avl-marquee { to { transform: translateX(-50%); } }
@keyframes avl-orbit {
  0% { transform: translate(15%, 0); } 12.5% { transform: translate(11%, 9%); } 25% { transform: translate(0, 13%); }
  37.5% { transform: translate(-11%, 9%); } 50% { transform: translate(-15%, 0); } 62.5% { transform: translate(-11%, -9%); }
  75% { transform: translate(0, -13%); } 87.5% { transform: translate(11%, -9%); } 100% { transform: translate(15%, 0); }
}
@keyframes avl-wobble-a { 0% { transform: rotate(0) scale(1); } 33% { transform: translate(3%, -2%) rotate(120deg) scale(1.07); } 66% { transform: translate(-2%, 3%) rotate(240deg) scale(0.97); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes avl-wobble-b { 0% { transform: rotate(0) scale(1.04); } 33% { transform: translate(-3%, 2%) rotate(-120deg) scale(0.96); } 66% { transform: translate(2%, -3%) rotate(-240deg) scale(1.06); } 100% { transform: rotate(-360deg) scale(1.04); } }
@keyframes avl-wobble-c { 0% { transform: rotate(0) scale(0.98); } 33% { transform: translate(3%, 3%) rotate(140deg) scale(1.09); } 66% { transform: translate(-3%, -2%) rotate(250deg) scale(1); } 100% { transform: rotate(360deg) scale(0.98); } }
@keyframes avl-flow { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes avl-secret-before {
  0% { opacity: 1; background-size: 0% 1.5px; } 32% { opacity: 1; background-size: 100% 1.5px; }
  52% { opacity: 0.4; background-size: 100% 1.5px; } 64%, 100% { opacity: 0; background-size: 100% 1.5px; }
}
@keyframes avl-secret-after { 0%, 58% { opacity: 0; transform: translateY(0.4em); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes avl-panel-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes avl-sheet-in { from { opacity: 0; transform: rotate(5deg) translateY(16px); } }
@keyframes avl-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-12%, -8%) scale(1.12); } }