/* ============================================================
   KOMPRESSOR — landing v2
   Structure / marges / effets de texte : design system v2.
   Style graphique : la vraie app Kompressor (blanc/noir/gris,
   accent bleu système, barre de progression arc-en-ciel).
   Version alternative — n'altère pas style.css (version actuelle).
   Fonte unique : TWK Continental (Regular/Medium) partout.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "TWK Continental";
  src: url("fonts/TWKContinental-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TWK Continental";
  src: url("fonts/TWKContinental-Medium.otf") format("opentype");
  font-weight: 500 700; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* COLOR · light — style graphique app Kompressor (blanc/noir/gris) */
  --canvas:        #ffffff;
  --canvas-2:      #fafafa;
  --surface:       #ffffff;
  --ink:           #0a0a0a;
  --ink-soft:      #6b6b6b;
  --ink-muted:     #8a8a8a;
  --hairline:      #e5e5e5;
  --hairline-soft: #ececec;
  --accent:        #007aff;   /* bleu système Apple */
  --accent-soft:   #4aa3ff;
  --accent-ink:    #ffffff;
  --success:       #1f7a1f;

  /* Apple system colors — accents arc-en-ciel (barre de progression de l'app) */
  --rb-red:#ff3b30; --rb-orange:#ff9500; --rb-yellow:#ffcc00; --rb-green:#34c759;
  --rb-mint:#00c7be; --rb-blue:#007aff; --rb-indigo:#5856d6; --rb-purple:#af52de; --rb-pink:#ff2d55;

  /* SURFACE : carte blanche propre (bordure + ombre douce) */
  --glass-bg:      var(--surface);
  --glass-border:  var(--hairline);
  --glass-blur:    18px;
  --glass-sat:     140%;
  --glass-hi:      transparent;

  /* TYPE */
  --font-display:  "TWK Continental", "Helvetica Neue", Arial, sans-serif;
  --font-text:     "TWK Continental", system-ui, -apple-system, sans-serif;
  /* Une seule fonte dans tout le branding : TWK Continental.
     --font-mono conservé comme alias pour les libellés techniques. */
  --font-mono:     "TWK Continental", system-ui, -apple-system, sans-serif;

  --fs-display:    clamp(2.75rem, 6vw, 5.5rem);
  --fs-h1:         clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-eyebrow:    0.8125rem;

  --lh-display:    1.0;
  --lh-heading:    1.06;
  --lh-body:       1.42;

  --tracking-tight:   -0.02em;
  --tracking-eyebrow:  0.14em;

  /* SPACE (base 4) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;
  --space-section: clamp(4rem, 10vw, 8rem);
  --container: 72rem;

  /* RADIUS */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* SHADOW */
  --shadow-sm:    0 1px 2px rgba(26,23,20,0.05);
  --shadow-md:    0 8px 30px rgba(26,23,20,0.08);
  --shadow-glass: 0 8px 32px rgba(26,23,20,0.12);

  /* MOTION */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   640ms;
  --dur-reveal: 1100ms;

  --z-base: 0; --z-float: 40; --z-nav: 80; --z-modal: 120;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:    #0a0a0a;
    --canvas-2:  #141414;
    --surface:   #1a1a1a;
    --ink:       #f5f5f5;
    --ink-soft:  #a0a0a0;
    --ink-muted: #777777;
    --hairline:  #2a2a2a;
    --hairline-soft: #232323;
    --accent:    #0a84ff;
    --accent-soft: #409cff;
    --success:   #30d158;
    --glass-bg:     var(--surface);
    --glass-border: var(--hairline);
    --glass-hi:     transparent;
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.5);
  }
}
html[data-theme="dark"] {
  --canvas:    #0a0a0a;
  --canvas-2:  #141414;
  --surface:   #1a1a1a;
  --ink:       #f5f5f5;
  --ink-soft:  #a0a0a0;
  --ink-muted: #777777;
  --hairline:  #2a2a2a;
  --hairline-soft: #232323;
  --accent:    #0a84ff;
  --accent-soft: #409cff;
  --success:   #30d158;
  --glass-bg:     var(--surface);
  --glass-border: var(--hairline);
  --glass-hi:     transparent;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.5);
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-text); font-weight: 500; font-size: var(--fs-body);
  padding: 0.7em 1.4em; border-radius: 0.6em; cursor: pointer; /* ≈ 20% de la hauteur (test) */
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--canvas); border: 0; }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { padding: 0.85em 1.7em; font-size: var(--fs-body-lg); }
.btn--xl { padding: 1em 2.2em; font-size: var(--fs-body-lg); }

/* ---------- SURFACE (ex-glass : carte blanche propre, style app) ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* ---------- REVEAL ---------- */
/* padding-bottom : laisse passer les jambages (Q, p, y…) sous le masque ;
   margin-bottom négatif compense pour ne pas changer la rythmique. */
.reveal-lines .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.reveal-lines .line > span {
  display: block;
  animation: lineUp var(--dur-reveal) var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 130ms);
}
@keyframes lineUp {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: inherit; }
.reveal.is-visible[data-stagger] > * { opacity: 1; transform: none; }
.reveal.is-visible[data-stagger] > *:nth-child(2){ transition-delay: 80ms; }
.reveal.is-visible[data-stagger] > *:nth-child(3){ transition-delay: 160ms; }
.reveal.is-visible[data-stagger] > *:nth-child(4){ transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-lines .line > span { animation: none; }
  .reveal, .reveal[data-stagger] > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding: var(--space-3) var(--space-4);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
  /* radius dans la famille du bouton « Try for free » (0.6em) mais un peu
     plus large, pour un joli contour arrondi autour du header */
  border-radius: 16px;
  border: none;
  /* repli universel (Safari/Firefox) : frosted glass translucide + saturation */
  background: color-mix(in srgb, var(--canvas) 56%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--ink) 6%, transparent),
    0 8px 30px rgba(26, 23, 20, 0.12);
}
/* VRAI liquid glass (Chromium) : réfraction SVG du fond + voile plus léger.
   Activé en JS (html.glass-on) une fois le displacement map généré. */
html.glass-on .nav-inner {
  background: color-mix(in srgb, var(--canvas) 14%, transparent);
  -webkit-backdrop-filter: blur(1.5px) saturate(170%) url(#liquidGlass);
  backdrop-filter: blur(1.5px) saturate(170%) url(#liquidGlass);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 65%, transparent),
    inset 0 10px 16px -10px color-mix(in srgb, white 50%, transparent),
    inset 0 -1px 2px color-mix(in srgb, var(--ink) 9%, transparent),
    0 10px 34px rgba(26, 23, 20, 0.14);
}
/* repli si backdrop-filter non supporté → fond presque opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner { background: color-mix(in srgb, var(--canvas) 92%, white); }
}
.nav-logo { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 500; font-size: 1.05rem; }
.nav-logo-mark { color: var(--accent); font-weight: 500; }
/* icône logo à gauche du mot Kompressor (header + footer) */
.brand-logo-img { height: 1.05em; width: auto; display: block; flex: none; }
.nav-links { display: flex; gap: var(--space-6); }
.nav-links a { color: var(--ink-soft); font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: stretch; gap: var(--space-2); }
/* Switch dark mode : pilule VERTICALE, hauteur = bouton « Try for free »,
   le pouce glisse de haut (soleil) en bas (lune). */
.theme-switch {
  position: relative; width: 28px; padding: 3px;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--canvas-2); cursor: pointer; flex: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.theme-switch:hover { border-color: var(--ink-muted); }
.theme-switch-knob {
  position: absolute; left: 3px; right: 3px; top: 3px;
  height: calc(50% - 3px);
  display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}
.theme-switch-knob svg { grid-area: 1 / 1; width: 13px; height: 13px;
  color: var(--ink-soft); transition: opacity var(--dur-base) var(--ease-out); }
.ico-moon { opacity: 0; }
/* état sombre (manuel ou système) → pouce en bas, lune visible */
html[data-theme="dark"] .theme-switch-knob { transform: translateY(100%); }
html[data-theme="dark"] .ico-sun { opacity: 0; }
html[data-theme="dark"] .ico-moon { opacity: 1; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-switch-knob { transform: translateY(100%); }
  html:not([data-theme="light"]) .ico-sun { opacity: 0; }
  html:not([data-theme="light"]) .ico-moon { opacity: 1; }
}
@media (max-width: 760px) { .nav-links { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: var(--space-24) var(--space-4) var(--space-section);
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: var(--z-base);
  pointer-events: none;
  /* halo arc-en-ciel flouté concentré derrière l'aperçu de l'app */
  background:
    radial-gradient(ellipse 38% 26% at 22% 64%, rgba(255, 59, 48, 0.20), transparent 60%),
    radial-gradient(ellipse 42% 30% at 80% 60%, rgba(0, 199, 190, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 36% at 50% 92%, rgba(175, 82, 222, 0.18), transparent 60%),
    radial-gradient(ellipse 30% 28% at 78% 90%, rgba(255, 149, 0, 0.16), transparent 60%);
  filter: blur(34px) saturate(120%);
}
.hero-inner { position: relative; max-width: 48rem; margin: 0 auto; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-6);
}
.hero-title { font-size: var(--fs-display); line-height: var(--lh-display); }
.hero-title .muted { color: var(--ink-muted); }
.hero-subtitle {
  max-width: 38rem; margin: var(--space-6) auto 0;
  font-size: var(--fs-body-lg); color: var(--ink-soft);
}
.hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-8); }
.hero-note { margin-top: var(--space-4); font-family: var(--font-mono);
  font-size: var(--fs-small); color: var(--ink-muted); }

/* ============================================================
   APP MOCKUP — reprise fidèle de la vraie app Kompressor
   (blanc/noir/gris, feux macOS, slider noir, barre arc-en-ciel)
   ============================================================ */
.hero-stage { position: relative; max-width: 44rem; margin: var(--space-16) auto 0; }
/* l'aperçu de l'app arrive ~0,6 s après le titre, et plus doucement */
.hero-stage.reveal { transition-duration: 1s; transition-delay: 0.6s; }
.app-window {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden; text-align: left;
  box-shadow: 0 30px 60px rgba(0,0,0,0.16), 0 8px 20px rgba(0,0,0,0.06);
  user-select: none;
}
.app-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline-soft);
  position: relative;
}
.app-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; }
.app-title { position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 500; color: var(--ink); }
.app-body { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 18px; }

.dropzone-mock {
  border: 1.5px dashed var(--hairline); border-radius: var(--radius-lg);
  padding: 44px 18px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dropzone-mock-title { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.dropzone-mock-hint { margin: 0 0 22px; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; }
.dropzone-mock-actions { display: flex; gap: 10px; justify-content: center; }
.mock-btn {
  display: inline-block; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface); font-size: 13px; color: var(--ink);
}
.mock-btn-text { border-color: transparent; background: transparent; color: var(--ink-muted); padding: 6px 10px; }
.mock-btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.settings-mock { display: flex; flex-direction: column; gap: 14px; }
.quality-mock { display: flex; flex-direction: column; gap: 8px; }
.settings-label { font-size: 11px; color: var(--ink-muted); display: inline-flex; align-items: baseline; gap: 4px; }
.settings-label strong { font-weight: 400; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.badge-quality {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  background: hsl(95, 78%, 84%); color: hsl(95, 65%, 24%);
  font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; line-height: 1.5;
}
.badge-recommended {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  background: var(--hairline); color: var(--ink-muted);
  font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; line-height: 1.5;
}
.slider-mock { position: relative; height: 4px; background: var(--hairline); border-radius: 2px; }
.slider-fill { position: absolute; inset: 0 28% 0 0; background: var(--ink); border-radius: 2px; }
.slider-thumb {
  position: absolute; left: 72%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.select-mock { display: flex; flex-direction: column; gap: 6px; }
.select-trigger {
  display: flex; align-items: center; gap: 8px; padding: 12px 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface); font-size: 13px; color: var(--ink);
}
.select-trigger .chev { margin-left: auto; font-size: 10px; color: var(--ink-muted); }

.app-sep { border: 0; border-top: 1px solid var(--hairline-soft); margin: 2px 0; }

.files-mock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.files-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 6px; }
.files-count { font-size: 11px; color: var(--ink-muted); font-weight: 400; }
.savings { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-left: 6px; }
.savings[hidden] { display: none; }
.files-actions-mock { display: flex; align-items: center; gap: 6px; }
.files-actions-mock .mock-btn { padding: 8px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.files-list-mock { border: 1px solid var(--hairline-soft); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden; min-height: 120px; }
.files-list-mock li {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--hairline-soft); font-size: 12px;
  transition: opacity 240ms ease;
}
.files-list-mock li:last-child { border-bottom: none; }
.file-status { width: 10px; height: 10px; border-radius: 50%; justify-self: center;
  background: var(--hairline); transition: background-color 280ms ease; }
.files-list-mock li.is-pending .file-status { background: var(--hairline); }
.files-list-mock li.is-processing .file-status { background: var(--ink); animation: dot-pulse 1.1s ease-in-out infinite; }
.files-list-mock li.is-done .file-status { background: var(--success); }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.file-name { font-variant-numeric: tabular-nums; }
.files-list-mock li.is-pending .file-info,
.files-list-mock li.is-processing .file-info { color: var(--ink-muted); }
.file-info { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 11px; transition: color 200ms ease; }
.progress-mock-wrap { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.progress-mock { flex: 1; height: 8px; background: var(--hairline-soft); border-radius: 4px; overflow: hidden; position: relative; }
.progress-mock-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg,
    var(--rb-red), var(--rb-orange), var(--rb-yellow), var(--rb-green), var(--rb-mint),
    var(--rb-blue), var(--rb-indigo), var(--rb-purple), var(--rb-pink), var(--rb-red));
  background-size: 250% 100%;
  animation: rainbow-flow 2.4s linear infinite;
  transition: width 120ms linear;
}
@keyframes rainbow-flow { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } }
.progress-text-mock { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums;
  min-width: 38px; text-align: right; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section.block { padding: var(--space-section) var(--space-4); }
section.block.alt { background: var(--canvas-2); }
.section-head { max-width: 44rem; margin: 0 auto var(--space-16); text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-title { font-size: var(--fs-h2); }
.section-title .muted { color: var(--ink-muted); }
.section-sub { margin-top: var(--space-4); font-size: var(--fs-body-lg); color: var(--ink-soft); }

/* FEATURES */
.features-grid { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.feature-card { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-8);
  display: flex; flex-direction: column; }
.feature-icon { width: 40px; height: 40px; color: var(--accent); margin-bottom: var(--space-4); }
.feature-icon svg { width: 100%; height: 100%; }
.feature-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.feature-card p { color: var(--ink-soft); }
/* « technical bit » ancré en bas, à la même hauteur dans les 3 cartes,
   avec un peu d'espace au-dessus */
.feature-card > .tech { margin-top: auto; padding-top: var(--space-6); }

/* QUALITY */
.quality-grid { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.quality-card { padding: var(--space-8); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; }
.quality-card.glass { padding: var(--space-8); }
/* « technical bit » ancré en bas : il s'étend vers le bas au clic */
.quality-card > .tech { margin-top: var(--space-4); }
/* bloc d'animation : même boîte (ratio de l'image) dans les deux cartes,
   poussé en bas, avec de l'espace au-dessus et en dessous */
/* ratio = 6 images portrait 799×1600 côte à côte → chaque cellule montre
   l'image entière (cover, sans recadrage ni déformation) */
.q-demo { width: 100%; aspect-ratio: 4794 / 1600; margin-top: auto; margin-bottom: var(--space-3); }
/* slot sous l'animation (toggle Normal/Zoom à gauche, espace équivalent à droite) */
.qs-controls { height: 32px; margin-bottom: var(--space-6);
  display: flex; align-items: center; justify-content: center; }
.qs-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); background: var(--canvas-2); }
.qs-opt { font-family: var(--font-text); font-size: var(--fs-small); font-weight: 500;
  color: var(--ink-muted); padding: 0.3em 0.95em; border: 0; background: transparent;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.qs-opt:hover { color: var(--ink-soft); }
.qs-opt.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.q-demo--center { display: flex; align-items: center; justify-content: center; }
.quality-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.quality-card p { color: var(--ink-soft); margin-bottom: var(--space-4); }
.quality-uses { display: grid; gap: var(--space-3); }
.quality-uses li { color: var(--ink-soft); padding-left: var(--space-4); position: relative; }
.quality-uses li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.quality-uses strong { color: var(--ink); }

/* HOW */
.how-grid { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-16); }
.how-card .how-icon { width: 40px; height: 40px; color: var(--accent); margin-bottom: var(--space-4); }
.how-card .how-icon svg { width: 100%; height: 100%; }
.how-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.how-card p { color: var(--ink-soft); }
.inline-pill { font-family: var(--font-mono); font-size: 0.78em; padding: 0.1em 0.5em;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); }
.how-card code { font-family: var(--font-mono); font-size: 0.85em;
  background: var(--canvas-2); padding: 0.1em 0.4em; border-radius: var(--radius-sm); }

/* THEME mention */
.theme-mention { padding: 0 var(--space-4) var(--space-section); }
.theme-mention-card { max-width: var(--container); margin: 0 auto; padding: var(--space-12);
  display: flex; gap: var(--space-8); align-items: center; }
.theme-mention-icon { width: 48px; height: 48px; flex: none; color: var(--ink); }
.theme-mention-icon svg { width: 100%; height: 100%; }
.theme-mention-content h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.theme-mention-content p { color: var(--ink-soft); }

/* USE CASES */
.usecase-grid { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.usecase { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex; flex-direction: column; min-height: 320px; overflow: hidden; }
.usecase h4 { margin: 0 0 var(--space-2); font-size: var(--fs-body-lg); font-weight: 500; }
.usecase p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- illustrations animées au survol (schématiques, gris) ---- */
.uc-anim {
  --uc-fill: color-mix(in srgb, var(--ink) 9%, transparent);
  --uc-line: color-mix(in srgb, var(--ink) 16%, transparent);
  --uc-solid: color-mix(in srgb, var(--ink) 14%, var(--surface)); /* gris opaque, sans transparence */
  --uc-frame: var(--hairline);
  margin-top: auto; padding-top: var(--space-6);
  height: 168px; display: flex; align-items: flex-end; justify-content: center;
}
.uc-anim > * { position: relative; }

/* WEBSITES — écran Apple synthétisé, images qui apparaissent L→R */
.uc-screen {
  width: 210px; height: 132px; margin-bottom: 26px; padding: 18px 12px 12px;
  border: 1.5px solid var(--uc-frame); border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ink) 4%, transparent);
  overflow: visible;
}
/* pied = demi-cercle, partie ronde en haut (touche l'écran), base plate en bas */
.uc-screen::after { content: ""; position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%);
  width: 58px; height: 26px; background: var(--canvas-2);
  border: 1.5px solid var(--uc-frame); border-radius: 29px 29px 0 0; }
/* contenu de l'écran clippé aux coins arrondis malgré overflow visible */
.uc-screen .uc-grid { border-radius: 6px; overflow: hidden; }
/* encoche façon MacBook Pro : même couleur que le contour, opaque */
.uc-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 30px; height: 8px; border-radius: 0 0 7px 7px; background: var(--uc-frame); }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: 7px; height: 100%; }
.uc-grid span { background: var(--uc-fill); border-radius: 5px;
  opacity: 0; transform: translateY(6px) scale(0.94);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.usecase:hover .uc-grid span { opacity: 1; transform: none; }
.usecase:hover .uc-grid span:nth-child(1) { transition-delay: 0s; }
.usecase:hover .uc-grid span:nth-child(2) { transition-delay: 0.07s; }
.usecase:hover .uc-grid span:nth-child(3) { transition-delay: 0.14s; }
.usecase:hover .uc-grid span:nth-child(4) { transition-delay: 0.1s; }
.usecase:hover .uc-grid span:nth-child(5) { transition-delay: 0.17s; }
.usecase:hover .uc-grid span:nth-child(6) { transition-delay: 0.24s; }

/* SOCIAL — téléphone (format iPhone), feed qui défile + nouveau post */
.uc-feed-frame { width: 96px; height: 154px; padding: 15px 9px 9px; overflow: hidden; position: relative;
  border: 1.5px solid var(--uc-frame); border-radius: 22px; background: var(--surface); }
.uc-feed-frame::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 32px; height: 9px; border-radius: 999px; background: var(--canvas-2);
  border: 1px solid var(--ink-muted); } /* Dynamic Island opaque, le contenu passe dessous */
.uc-feed { display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.9s var(--ease-out); }
.uc-post { display: flex; flex-direction: column; gap: 5px; }
.uc-post .uc-img { height: 42px; border-radius: 6px; background: var(--uc-fill); }
.uc-post .uc-lines { display: flex; flex-direction: column; gap: 4px; }
.uc-post .uc-lines span { height: 4px; border-radius: 2px; background: var(--uc-line); }
.uc-post .uc-lines span:last-child { width: 55%; }
.uc-post--new { opacity: 0; transition: opacity 0.6s var(--ease-out) 0.3s; }
.usecase:hover .uc-feed { transform: translateY(-62px); }
.usecase:hover .uc-post--new { opacity: 1; }

/* EMAIL — pile d'images qui s'envolent à droite, l'une après l'autre */
.uc-email .uc-stack { width: 210px; height: 128px; }
.uc-email .uc-card { position: absolute; left: 6px; top: 50%; width: 92px; height: 68px;
  border-radius: 10px; border: 1px solid var(--uc-frame);
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out); }
/* 3 nuances de gris, plus claires (moins « mastock ») */
.uc-email .uc-card:nth-child(1) { background: color-mix(in srgb, var(--ink) 13%, var(--surface));
  transform: translateY(-50%) translate(0, 0) rotate(-5deg); }
.uc-email .uc-card:nth-child(2) { background: color-mix(in srgb, var(--ink) 9%, var(--surface));
  transform: translateY(-50%) translate(12px, 2px) rotate(0deg); }
.uc-email .uc-card:nth-child(3) { background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  transform: translateY(-50%) translate(24px, 4px) rotate(5deg); }
.usecase:hover .uc-email .uc-card { transform: translateY(-50%) translateX(240px) rotate(10deg); opacity: 0; }
.usecase:hover .uc-email .uc-card:nth-child(1) { transition-delay: 0s; }
.usecase:hover .uc-email .uc-card:nth-child(2) { transition-delay: 0.14s; }
.usecase:hover .uc-email .uc-card:nth-child(3) { transition-delay: 0.28s; }

/* NEWSLETTERS — enveloppe qui s'ouvre, 3 cartes qui sortent en éventail */
/* NEWSLETTERS — enveloppe qui s'ouvre, 3 lettres en stack qui en sortent.
   Couches, de l'arrière vers l'avant :
     1. uc-env-body  = dos de l'enveloppe (rectangle)         z1
     2. uc-card x3   = les lettres                             z2
     3. uc-env-front = face avant (poche) qui cache le bas      z3
     4. uc-flap      = rabat ▽ qui se lève pour ouvrir          z4
*/
.uc-news { perspective: 720px; }
.uc-news .uc-env { width: 168px; height: 104px; }

.uc-env-body {
  position: absolute; inset: 0; z-index: 1;
  background: var(--surface); border: 1.5px solid var(--uc-frame); border-radius: 11px;
}

.uc-news .uc-card {
  position: absolute; left: 50%; bottom: 12px; width: 54px; height: 80px; margin-left: -27px;
  z-index: 2; border-radius: 8px; border: 1px solid var(--uc-frame);
  opacity: 0; transform: translateY(8px);
  transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out);
}
.uc-news .uc-card:nth-child(1) { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.uc-news .uc-card:nth-child(2) { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.uc-news .uc-card:nth-child(3) { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }

/* face avant : rectangle plat qui cache le bas des lettres (la poche) */
.uc-env-front {
  position: absolute; left: 1.5px; right: 1.5px; bottom: 1.5px; height: 56px; z-index: 3;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  border-top: 1.5px solid var(--uc-frame); border-radius: 0 0 10px 10px;
}

/* rabat : triangle pointe en bas, fermé au repos ; se lève (rotateX) pour ouvrir */
.uc-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 58px; z-index: 4;
  background: color-mix(in srgb, var(--ink) 11%, var(--surface));
  border: 1.5px solid var(--uc-frame); border-radius: 11px 11px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; backface-visibility: hidden;
  transition: transform 0.55s var(--ease-out);
}
.usecase:hover .uc-flap { transform: rotateX(-165deg); }

.usecase:hover .uc-news .uc-card { opacity: 1; }
.usecase:hover .uc-news .uc-card:nth-child(1) { transform: translateY(-30px) translateX(-14px) rotate(-8deg); transition-delay: 0.05s; }
.usecase:hover .uc-news .uc-card:nth-child(2) { transform: translateY(-44px) translateX(0) rotate(0deg); transition-delay: 0.13s; }
.usecase:hover .uc-news .uc-card:nth-child(3) { transform: translateY(-30px) translateX(14px) rotate(8deg); transition-delay: 0.21s; }

/* MOBILE / tactile : pas de hover → on montre l'état « ouvert » compréhensible */
@media (hover: none) {
  .uc-grid span { opacity: 1; transform: none; }
  .uc-feed { transform: translateY(-62px); }
  .uc-post--new { opacity: 1; }
  .uc-flap { transform: rotateX(-165deg); }
  .uc-news .uc-card { opacity: 1; }
  .uc-news .uc-card:nth-child(1) { transform: translateY(-30px) translateX(-14px) rotate(-8deg); }
  .uc-news .uc-card:nth-child(2) { transform: translateY(-44px) rotate(0deg); }
  .uc-news .uc-card:nth-child(3) { transform: translateY(-30px) translateX(14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-anim * { transition: none !important; }
}

/* PRICING */
.pricing-grid { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-6); }
.price-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.price-pill { position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); }
.price-pill-free { background: var(--success); }
.price-card header h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.price { display: flex; align-items: baseline; gap: 0.4em; }
.price .amount { font-family: var(--font-display); font-size: 2.75rem; font-weight: 500;
  letter-spacing: var(--tracking-tight); }
.price .period { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }
.price-tagline { color: var(--ink-muted); font-size: var(--fs-small); margin-top: var(--space-2); }
.price-card ul { display: grid; gap: var(--space-3); }
.price-card li { color: var(--ink-soft); padding-left: var(--space-6); position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--success); }
.price-card li strong { color: var(--ink); }
.pricing-fineprint { max-width: var(--container); margin: var(--space-8) auto 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }

/* DOWNLOAD */
.download { text-align: center; }
.download-icon { width: 104px; height: 104px; display: block; margin: 0 auto var(--space-6);
  border-radius: 22.5%; /* squircle macOS */
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.18)); }
.download-title { font-size: var(--fs-h1); }

/* halo bleu derrière le bouton (uniquement dans le fond gris) */
.download-cta { position: relative; display: inline-flex; justify-content: center; isolation: isolate; }
.download-glow {
  position: absolute; inset: -70px; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--accent) 60%, transparent), transparent 62%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.download-cta.is-glowing .download-glow { opacity: 0.16; }
@media (prefers-reduced-motion: reduce) { .download-glow { display: none; } }
.download-sub { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted);
  margin: var(--space-4) 0 var(--space-8); }
/* encart « first launch » : repliable, discret, en gris */
.download-note { max-width: 38rem; margin: var(--space-24) auto 0; text-align: left;
  border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas-2); }
.download-note > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted);
}
.download-note > summary::-webkit-details-marker { display: none; }
.download-note > summary:hover { color: var(--ink-soft); }
.download-note[open] > summary { color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.download-note-body { padding: var(--space-6); }
.download-note-body p { color: var(--ink-soft); font-size: var(--fs-small); }
.download-steps { list-style: none; padding: 0; counter-reset: step;
  display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.download-steps li { counter-increment: step; position: relative; padding-left: var(--space-8);
  color: var(--ink-soft); font-size: var(--fs-small); }
.download-steps li::before { content: counter(step);
  position: absolute; left: 0; top: 0; width: 1.4em; height: 1.4em;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--hairline); color: var(--ink-soft); font-size: 0.72em; font-weight: 500; }
.download-steps strong { color: var(--ink); }
.download-note-meta { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--ink-muted); }

/* FOOTER */
.footer { background: var(--canvas-2); border-top: 1px solid var(--hairline);
  padding: var(--space-section) var(--space-4) var(--space-8); }
.footer-inner { max-width: var(--container); margin: 0 auto; display: flex; gap: var(--space-16);
  flex-wrap: wrap; justify-content: space-between; }
.footer-logo { display: flex; align-items: center; gap: 0.55em; font-weight: 500; margin-bottom: var(--space-3); }
.footer-logo-mark { color: var(--accent); }
.footer-tagline { color: var(--ink-muted); font-size: var(--fs-small); }
.footer-cols { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-12); }
.footer-col { display: grid; gap: var(--space-2); align-content: start; }
.footer-col h5 { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
.footer-col a { color: var(--ink-soft); font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { max-width: var(--container); margin: var(--space-16) auto 0;
  padding-top: var(--space-6); border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-copyright { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }
.footer-powered { display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink-muted); }
.footer-powered-text { font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: 1; }
/* logo aligné pile à la hauteur du « powered by » */
.footer-powered-logo { height: 7px; width: auto; display: block; fill: var(--ink-muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .theme-mention-card { flex-direction: column; text-align: center; gap: var(--space-6); }
  .footer-inner { gap: var(--space-12); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 520px) {
  .settings-row { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .files-mock-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SHRINK DEMO — odomètre « dégonflement » (section Quality)
   Un seul chiffre central : démarre grand (poids de base), la valeur
   ET la taille du texte se réduisent ensemble (MB → KB) en dégradé
   multicolore, puis fondu multicolore → noir, puis fondu d'un petit
   « −99% · 4.95 MB saved » en dessous. Zone à hauteur fixe : rien
   d'autre ne bouge sur la page.
   ============================================================ */
.shrink-demo { text-align: center; margin: var(--space-12) auto 0; }

.shrink-stage {
  height: 140px;                      /* hauteur fixe = pas de reflow */
  display: flex; align-items: center; justify-content: center;
}
.shrink-num {
  position: relative; display: inline-block; line-height: 1;
  font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight); white-space: nowrap;
  font-size: 120px;                   /* taille de départ — pilotée en JS */
}
.shrink-num-solid { display: inline-block; color: var(--ink); }
.shrink-num-rainbow {
  position: absolute; inset: 0; display: inline-block; color: transparent;
  background: linear-gradient(90deg,
    var(--rb-red), var(--rb-orange), var(--rb-yellow), var(--rb-green), var(--rb-mint),
    var(--rb-blue), var(--rb-indigo), var(--rb-purple), var(--rb-pink), var(--rb-red));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rainbow-flow 2.4s linear infinite;
  opacity: 0;
}
.shrink-demo.is-running .shrink-num-rainbow { opacity: 1; }
.shrink-demo.is-settled .shrink-num-rainbow { opacity: 0; transition: opacity 0.55s ease; }

.shrink-caption {
  margin: var(--space-3) 0 0;
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: var(--fs-small); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(6px);
}
.shrink-demo.is-settled .shrink-caption {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease-out) 0.18s, transform 0.5s var(--ease-out) 0.18s;
}
.shrink-pct { color: var(--ink); font-weight: 500; }
.shrink-sep { color: var(--hairline); }

@media (max-width: 520px) {
  .shrink-stage { height: 92px; }
  .shrink-num { font-size: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .shrink-demo .shrink-num-rainbow { display: none; }
  .shrink-caption { opacity: 1; transform: none; }
}

/* ============================================================
   TECH DISCLOSURE — petit « + » repliable pour les détails
   techniques (formats, tailles px, encodeurs…). Sans JS.
   ============================================================ */
.tech { margin-top: var(--space-4); border-top: 1px solid var(--hairline); }
.tech > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0 0;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary:hover { color: var(--ink-soft); }
.tech[open] > summary { color: var(--ink-soft); }
.tech-body { padding-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); }
.tech-body code { background: var(--canvas-2); padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-size: 0.9em; }

/* le « + » qui devient « − » à l'ouverture */
.tech-plus { position: relative; width: 13px; height: 13px; flex: none; }
.tech-plus::before, .tech-plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.tech-plus::before { left: 0; right: 0; top: 5.5px; height: 2px; }   /* barre horizontale */
.tech-plus::after  { top: 0; bottom: 0; left: 5.5px; width: 2px; }   /* barre verticale */
.tech[open] .tech-plus::after,
.download-note[open] .tech-plus::after { transform: scaleY(0); opacity: 0; }

/* ============================================================
   PAGES DE COMPARAISON — même langage visuel que la home
   ============================================================ */
.compare { max-width: 64rem; margin: 0 auto; padding: 0 var(--space-6) var(--space-section); }

.breadcrumb { padding: var(--space-8) 0 var(--space-4); font-size: var(--fs-small); color: var(--ink-muted); }
.breadcrumb a { color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { margin: 0 0.55em; color: var(--hairline); }

.compare-hero { max-width: 48rem; margin: var(--space-8) auto var(--space-12); text-align: center; }
.compare-hero h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); }
.compare-sub { font-size: var(--fs-body-lg); color: var(--ink-soft); }

.verdict-box { max-width: 52rem; margin: 0 auto var(--space-16);
  background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
.verdict-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--space-2); }
.verdict-box p { color: var(--ink-soft); margin: 0; }
.verdict-box strong { color: var(--ink); }

.compare-table-wrap { max-width: 64rem; margin: 0 auto var(--space-16); overflow-x: auto;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 32rem; }
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hairline); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-family: var(--font-mono); font-weight: 500; color: var(--ink-muted);
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  background: var(--canvas-2); }
.compare-table tbody th { font-weight: 500; color: var(--ink); }
.compare-table .col-us { color: var(--ink); font-weight: 500;
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare-table .col-them { color: var(--ink-soft); }
.compare-table .yes { color: var(--success); }
.compare-table .no { color: var(--ink-muted); }

.compare-prose { max-width: 48rem; margin: 0 auto var(--space-8); }
.compare-prose h2 { font-size: var(--fs-h2); margin: var(--space-16) 0 var(--space-4);
  letter-spacing: var(--tracking-tight); }
.compare-prose h3 { font-size: var(--fs-h3); margin: var(--space-8) 0 var(--space-2); }
.compare-prose p { color: var(--ink-soft); margin: 0 0 var(--space-4); }
.compare-prose ul { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--space-4); color: var(--ink-soft); }
.compare-prose li { margin: 0 0 var(--space-2); }
.compare-prose code { background: var(--canvas-2); padding: 0.1em 0.4em;
  border-radius: var(--radius-sm); font-size: 0.9em; }

.pros-cons { max-width: 52rem; margin: 0 auto var(--space-16);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pros-cons-card { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-8); }
.pros-cons-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.pros-cons-card p { color: var(--ink-soft); margin: 0 0 var(--space-3); }
.pros-cons-card p:last-child { margin-bottom: 0; }
.pros-cons-card strong { color: var(--ink); }

.compare-cta { max-width: 48rem; margin: 0 auto var(--space-16); text-align: center;
  background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: var(--space-12); }
.compare-cta h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.compare-cta > p { color: var(--ink-soft); max-width: 32rem; margin: 0 auto var(--space-6); }
.compare-cta-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.compare-cta-note { margin-top: var(--space-4); font-family: var(--font-mono);
  font-size: var(--fs-small); color: var(--ink-muted); }

.faq { max-width: 48rem; margin: 0 auto var(--space-16); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-4) 0;
  font-weight: 500; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-muted); font-size: 1.3em; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-soft); margin: 0; padding-bottom: var(--space-4); }

.related { max-width: 64rem; margin: 0 auto; }
.related > h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-6); text-align: center; }
.related-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.related-card { display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.related-card:hover { border-color: var(--ink-muted); transform: translateY(-2px); }
.related-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
.related-title { font-weight: 500; }
.related-arrow { color: var(--accent); margin-top: var(--space-2); }

@media (max-width: 760px) {
  .pros-cons { grid-template-columns: 1fr; }
  .related-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   QUALITY STRIP — 6 fois la même image, qualité 100 → 50.
   Montre que la qualité bouge à peine ; le poids chute beaucoup.
   ============================================================ */
/* une seule image, tranchée en 6 parties collées (coins extérieurs arrondis) */
.quality-strip {
  display: flex; height: 100%;
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--hairline);
}
.qs-slice {
  position: relative; flex: 1 1 0; min-width: 0;
  background-image: var(--src);
  background-size: 100%;            /* = cover ici (ratio identique) ; animable vers le zoom */
  background-repeat: no-repeat; background-position: center;
  transition: background-size 0.45s var(--ease-out);
}
/* mode Zoom : loupe ×2 au centre, pour mieux voir les différences de qualité */
.quality-strip.is-zoom .qs-slice { background-size: 200%; }
.qs-slice + .qs-slice { border-left: 1px solid rgba(255, 255, 255, 0.5); }  /* une seule ligne */
.qs-q, .qs-w {
  position: absolute; left: 6px; font-weight: 500; font-size: 0.6rem; line-height: 1;
  padding: 0.25em 0.4em; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.qs-q { top: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; }                 /* qualité */
.qs-w { bottom: 6px; background: rgba(0, 0, 0, 0.5); color: #7ee0a0; }           /* poids récupéré */
.qs-w--base { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 620px) { .quality-strip { height: 132px; } .qs-q, .qs-w { font-size: 0.5rem; } }

/* ============================================================
   FORMAT MORPH — n'importe quel format → n'importe quel format.
   Les deux côtés changent indépendamment (1–3 s), flèche fixe.
   ============================================================ */
.format-morph {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
}
.fm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.6em; height: 1.25em; overflow: hidden;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: var(--tracking-tight);
  color: var(--ink); line-height: 1.25;
}
.fm-cell { display: inline-block; will-change: transform, opacity; }
.fm-arrow { width: 66px; height: 28px; flex: none; color: var(--ink-muted); }
@media (max-width: 620px) { .fm-chip { font-size: 1.8rem; } .fm-arrow { width: 48px; } }