/* PictoWave marketing site — shared styles
   Palette pulled 1:1 from the app's own Theme (Code-V2/Sources/PictoWavePro/ProConsoleView.swift)
   so the site and the product never look like two different brands. */

:root {
  --bg: #101216;
  --bg-raised: #16191F;
  --bg-card: #181C22;
  --line: #262B33;
  --blue: #4169E1;
  --blue-soft: #5B7CFF;
  --red: #FF2E2E;
  --green: #2EC27D;
  --orange: #F29926;
  --text: #E8EBED;
  --text-dim: #99A1AB;
  /* ⚠️ #7E8794 ET NON #5C6370 (2026-08-19, audit UX m10). L'ancienne valeur faisait 3,1:1 sur
     le fond : SOUS le seuil AA (4,5:1), et elle portait des informations substantielles, les
     restrictions Pro Tools Artist, les conditions de prix, la note fiscale. Les textes les plus
     engageants de la page étaient les plus durs à lire. Mesuré : 5,16:1 sur --bg, et > 4,7:1
     sur --bg-raised comme sur --bg-card, donc AA partout où la couleur apparaît. */
  --text-faint: #7E8794;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
img { max-width: 100%; display: block; }

/* ---------- WORDMARK ---------- */
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .pict, .wordmark .wave { color: var(--blue); }
.wordmark .o { color: var(--red); }
.hero-icon { width: 56px; height: 56px; margin-bottom: 24px; border-radius: 14px; }

/* ⚠️ BLANC ET NON PLUS ROUGE (2026-08-16, demandé par Clem). Le rouge est devenu la couleur
   d'ALERTE du site (.req-note pour les prérequis, .legal-pending pour ce que l'avocat n'a pas
   relu) : l'employer pour mettre en valeur une promesse commerciale envoyait le signal inverse
   de celui voulu, « what's coming next » se lisait comme un avertissement. Seul le gras marque
   désormais le passage, exactement comme le fait déjà .hl-pro. */
.hl { color: var(--text); font-weight: 600; }
.wordmark .suffix {
  color: var(--text);
  font-weight: 600;
  font-size: 0.62em;
  /* 0.35em et non 0.15 (2026-08-19, audit UX p5) : à 12,5 px de corps, 0.15em fait moins de
     2 px et le mockup se lisait « PictoWavePro ». La vraie fenêtre s'appelle « PictoWave Pro ». */
  margin-left: 0.35em;
  transform: translateY(0.35em);
  display: inline-block;
}

/* ---------- NAV ---------- */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(16,18,22,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* ⚠️ `margin-left: auto` sur les liens : la barre porte TROIS blocs depuis le menu mobile
   (marque, liens, actions) au lieu de deux. Sans lui, `space-between` répartirait les trois et
   les liens dériveraient au centre — ils doivent rester collés au bouton d'achat, exactement
   comme quand le CTA vivait encore dans le même conteneur qu'eux. */
.nav-links { display: flex; gap: 32px; align-items: center; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--text-dim); font-weight: 500; transition: color 0.15s; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 32px; }
.nav-cta {
  background: var(--blue); color: white !important;
  padding: 9px 20px; border-radius: 6px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}

/* Bouton du menu mobile. Caché tant que les liens tiennent dans la barre : c'est la requête
   média en bas de fichier qui l'affiche et transforme .nav-links en panneau déroulant. */
.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 38px; height: 34px; padding: 0; flex-shrink: 0;
  background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--text-faint); }
.nav-toggle-bar {
  display: block; width: 16px; height: 1.5px; border-radius: 1px;
  background: var(--text-dim); transition: transform 0.18s, opacity 0.18s;
}
/* Croix à l'ouverture. 5,5 px = hauteur d'une barre (1,5) + l'écart (4) : les deux barres
   extrêmes se rejoignent donc exactement sur celle du milieu, qui s'efface. */
nav.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--blue); color: white; padding: 14px 28px; border-radius: 7px;
  font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  transition: background 0.15s, transform 0.15s; display: inline-block;
}
.btn-primary:hover { background: var(--blue-soft); transform: translateY(-1px); }
.btn-secondary {
  background: transparent; color: var(--text); padding: 14px 24px; border-radius: 7px;
  font-weight: 600; font-size: 15px; border: 1px solid var(--line); cursor: pointer;
  transition: border-color 0.15s, background 0.15s; display: inline-block;
}
.btn-secondary:hover { border-color: var(--text-dim); background: var(--bg-raised); }
.btn-block { width: 100%; text-align: center; }

/* ---------- ICONS ----------
   Hand-drawn line icons (feather-style: 1.75 stroke, round caps) — no icon font/library
   dependency, keeps the page self-contained and each glyph exactly on-brand. */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- HERO (asymmetric two-column — copy left, product shot right) ---------- */
.hero { padding: 56px 0 0; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(65,105,225,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; padding-bottom: 72px; }
.hero-copy { max-width: 520px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--blue-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%;
  box-shadow: 0 0 8px var(--blue);
}
.eyebrow.pro { color: var(--orange); }
/* Signature reprise telle quelle de la console PictoWave Pro (ligne sous le logo) — le site
   dit exactement ce que l'utilisateur lira au lancement de l'app. Discrète par construction :
   c'est une devise, pas un argument, elle ne doit pas concurrencer le H1 juste au-dessus. */
.signature {
  font-family: var(--mono); font-size: 13px; color: var(--text-dim);
  letter-spacing: 0.04em;
  /* Remonte sous l'eyebrow, dont la marge basse (22px) vise le H1 et non une sous-ligne. */
  margin: -16px 0 20px;
  /* Aligné sur le TEXTE de l'eyebrow, pas sur son bord : celui-ci est un flex précédé d'une
     pastille de 6px + 10px de gap. La signature se lit ainsi comme la sous-ligne du nom du
     produit, exactement comme sous le logo de la console. */
  padding-left: 16px;
}

.eyebrow.pro::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.eyebrow.lite { color: var(--green); }
.eyebrow.lite::before { background: var(--green); box-shadow: 0 0 8px var(--green); }

h1 {
  font-family: var(--display); font-size: clamp(34px, 3.6vw, 50px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.02em;
}
h1 .accent { color: var(--blue-soft); }
.hero-sub { font-size: 16.5px; color: var(--text-dim); max-width: 460px; margin-top: 20px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* L'essai est l'argument n°1 d'une marque inconnue : il se dit à côté de CHAQUE bouton d'achat,
   jamais plus bas dans la page. */
.hero-note { font-size: 13.5px; color: var(--text-faint); margin-top: 16px; }
.hero-note a { color: var(--blue-soft); font-weight: 600; }

/* ---------- PRODUCT SHOT (hero visual) ----------
   A realistic app-chrome mockup rather than an abstract gradient block: a macOS-style window
   (traffic lights + title) whose "video" stage is an explicit placeholder (diagonal stripes,
   the standard missing-asset convention) — the app can drop in a real screen recording later —
   with the PictoWave overlay panel floating on top, rendered for real (working canvas demo)
   since that part IS accurate today, unlike the video content behind it. */
.hero-visual { position: relative; }

/* ⚠️ LA VIDÉO DÉBORDE À DROITE SUR GRAND ÉCRAN (2026-08-14), et c'est la seule façon de l'agrandir
   sans rien casser. Le héros est une grille à deux colonnes égales dans un `.wrap` plafonné à
   1160 px : la vidéo y fait 516 px, pendant qu'un écran large laisse 400 px de vide de chaque côté.
   Les deux fausses bonnes idées, écartées :
     . rééquilibrer les colonnes ne donne RIEN — `.hero-copy` est déjà à son `max-width` de 520 px,
       il n'y a aucune marge à lui reprendre, et la rétrécir ferait casser le titre en plus de lignes ;
     . élargir le `.wrap` du seul héros désalignerait son texte avec le logo de la barre de
       navigation et avec toutes les sections en dessous, qui restent à 1160 px.
   La marge négative laisse donc le texte exactement où il est et ne fait grandir que l'image.
   Le `clamp` prend la moitié de la place libre (d'où le `/ 2`), sans jamais dépasser 220 px pour
   que la vidéo ne finisse pas par écraser le titre. `.hero` porte déjà `overflow: hidden`, aucun
   risque de barre de défilement horizontale. */
@media (min-width: 1300px) {
  .hero-visual { margin-right: calc(-1 * clamp(0px, (100vw - 1224px) / 2, 220px)); }
}
.product-shot {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -24px rgba(0,0,0,0.65); background: #0A0B0E;
}
/* Vidéo réelle du héros de l'accueil (2026-08-14), posée dans le même cadre `.product-shot` que la
   maquette qu'elle remplace. `aspect-ratio` reprend EXACTEMENT les dimensions du fichier encodé
   (1248×784) : c'est ce qui réserve la place avant même que la vidéo soit chargée, donc pas de
   saut de mise en page, et ce qui garantit qu'aucun étirement n'est possible.
   `display: block` supprime l'espace sous la vidéo (une balise <video> est `inline` par défaut,
   et sa ligne de base laisse quelques pixels de fond visibles sous elle, dans l'angle arrondi). */
/* `aspect-ratio` reprend EXACTEMENT les dimensions du fichier encodé : c'est ce qui réserve la
   place avant même le chargement, donc pas de saut de mise en page, et ce qui garantit qu'aucun
   étirement n'est possible. Les deux vidéos n'ont pas le même rapport, d'où deux règles.
   `display: block` supprime l'espace sous la vidéo (une balise <video> est `inline` par défaut,
   et sa ligne de base laisse quelques pixels de fond visibles sous elle, dans l'angle arrondi). */
.hero-video, .shot-video {
  display: block; width: 100%; height: auto;
  background: #0A0B0E; cursor: pointer;
}
/* ⚠️ LE RAPPORT NE SE MET PLUS ICI (2026-08-19). Il était figé PAR CLASSE, aux dimensions des
   deux seules vidéos d'alors (1248/784 et 1188/668). En ajoutant celles des pages PictoWave et Pro,
   toute vidéo d'un autre format héritait en silence du rapport d'une autre et se retrouvait
   étirée — constaté sur la vidéo 4:5 de « How it works », affichée en 16:9. Le rapport est
   désormais posé EN LIGNE sur chaque <video>, aux dimensions exactes de son fichier : impossible
   d'en ajouter une sans le déclarer, et impossible de se tromper de voisine. */

/* Les vidéos sont cliquables, donc focalisables au clavier : sans anneau de focus visible, une
   personne qui navigue à la tabulation ne saurait pas qu'elle est dessus. */
.hero-video:focus-visible, .shot-video:focus-visible {
  outline: 2px solid var(--blue-soft); outline-offset: 3px;
}

.video-player { position: relative; }
/* Le repère de lecture n'apparaît qu'en pause (classe posée par player.js). Il est
   `pointer-events: none` pour ne pas intercepter le clic qui doit relancer la vidéo : il est
   dessiné PAR-DESSUS elle, donc sans cette ligne il avalerait le clic en plein centre, à l'endroit
   exact où l'on vise pour reprendre. */
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 11, 14, 0.72); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px); pointer-events: none;
}
.video-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.video-player.is-paused .video-play { display: flex; }
/* ⚠️ Le respect de « réduire les animations » ne peut PAS se faire ici : aucune propriété CSS ne
   met une <video> en pause. C'est du JavaScript, dans player.js. */

.product-shot-chrome {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #16181d; border-bottom: 1px solid var(--line);
}
.product-shot-chrome .dot { width: 10px; height: 10px; border-radius: 50%; }
.product-shot-chrome .dot.r { background: #FF5F57; }
.product-shot-chrome .dot.y { background: #FEBC2E; }
.product-shot-chrome .dot.g { background: #28C840; }
.product-shot-chrome .chrome-title {
  margin-left: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
}
.product-shot-stage {
  position: relative; aspect-ratio: 16/10.2; overflow: hidden;
  background-image: repeating-linear-gradient(135deg, #15171c, #15171c 11px, #1a1d23 11px, #1a1d23 22px);
}
.shot-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 7px;
  background: rgba(10,11,14,0.85); border: 1px solid var(--line); backdrop-filter: blur(6px);
  padding: 6px 12px 6px 10px; border-radius: 20px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.01em;
  max-width: calc(100% - 28px);
}
.shot-tag .icon { width: 13px; height: 13px; color: var(--orange); }

.overlay-window {
  position: absolute; left: 6%; right: 6%; bottom: 8%; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.75);
}
.overlay-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: #14161B; padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.overlay-titlebar .status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--green); }
.overlay-titlebar .status::before { content:''; width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.overlay-wave { position: relative; height: 88px; background: linear-gradient(160deg,#1a2540 0%, #0d1420 60%, #050709 100%); overflow: hidden; }
#demoCanvas { width:100%; height:100%; display:block; }

/* ---------- GENERIC SHOT PLACEHOLDER (reused wherever a real screenshot/video belongs) ---------- */
.shot-placeholder {
  position: relative; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.18);
  background-image: repeating-linear-gradient(135deg, var(--bg-card), var(--bg-card) 11px, var(--bg-raised) 11px, var(--bg-raised) 22px);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px;
}
.shot-placeholder-inner { max-width: 320px; }
.shot-placeholder .icon { width: 24px; height: 24px; color: var(--text-faint); margin: 0 auto 14px; }
.shot-placeholder-label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--orange); margin-bottom: 8px;
}
.shot-placeholder-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* ---------- SHOT SLIDESHOW (real screenshots, CSS crossfade, infinite loop) ---------- */
.shot-slideshow {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #0b0d12; aspect-ratio: 7 / 5;
}
.shot-slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;   /* remplit le cadre, pas de bandes ; le contenu est centré */
  opacity: 0; cursor: zoom-in;
  animation: shotCrossfade 20s infinite;         /* 10 s par image */
}
.shot-slideshow img:nth-of-type(2) { animation-delay: -10s; }
@keyframes shotCrossfade {
  0%, 47.5%  { opacity: 1; }
  50%, 97.5% { opacity: 0; }
  100%       { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-slideshow img { animation: none; }
  .shot-slideshow img:nth-of-type(1) { opacity: 1; }
}

/* Clic → image en grand (cf. shots.js). Le <dialog> occupe tout l'écran et centre l'image ;
   le fond assombri est ::backdrop. Pas de bordure ni de liseré de focus. */
.shot-lightbox {
  border: none; padding: 0; margin: 0; background: transparent; overflow: visible;
  max-width: none; max-height: none;
  width: 100vw; height: 100vh; height: 100dvh;
  align-items: center; justify-content: center;
}
.shot-lightbox[open] { display: flex; }
.shot-lightbox:focus, .shot-lightbox:focus-visible { outline: none; }
.shot-lightbox::backdrop { background: rgba(0, 0, 0, 0.86); }
.shot-lightbox img {
  display: block; max-width: 94vw; max-height: 94vh; border-radius: 10px; cursor: zoom-out;
  animation: shotZoomIn 0.16s ease-out;
}
@keyframes shotZoomIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* ---------- TRUST BAR ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
/* Trois items depuis l'ajout de l'essai : taille et espacement calés pour tenir sur UNE ligne
   dans le .wrap de 1096px utiles (411+346+298 à 13px débordait, d'où le retour à la ligne). */
.trust .wrap { display: flex; align-items: center; justify-content: center; gap: 16px 28px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.02em; }
.trust-item .icon { width: 15px; height: 15px; color: var(--text-faint); }

/* ---------- SECTIONS ---------- */
section { padding: 110px 0; }
section.tight { padding: 72px 0; }
/* ⚠️ #products/#compare SEULEMENT, PAS section.tight (2026-09-04, 1er retour d'un ami sur le
   site) : en s'arrêtant sur les cartes d'achat, il n'avait pas vu qu'un tableau comparatif
   suivait — MESURÉ : le vide entre les deux sections faisait 220 px (110 de chaque côté), assez
   pour qu'un écran entier tombe dedans sans montrer une ligne de contenu (vérifié en réel,
   fenêtre de 450 px de haut, entièrement vide à ce point de défilement). `section.tight`
   changerait aussi le bord OPPOSÉ de chacune des deux sections (haut de #products, bas de
   #compare), jamais signalé comme trop serré : une paire de règles ciblées sur CE SEUL bord
   commun, plutôt que la classe globale. */
#products { padding-bottom: 56px; }
#compare  { padding-top: 56px; }
.section-head { max-width: 660px; margin-bottom: 60px; }
.section-head.center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
}
h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.section-head p { color: var(--text-dim); font-size: 16px; margin-top: 16px; }

/* ---------- PROBLEM / SOLUTION ----------
   Deliberately NOT a two-column ✗/✓ comparison card — that pattern is the single most
   recognizable "generated landing page" tell (Framer/AI-template shorthand). Contrast is made
   in prose instead, next to a single annotated shot with a numbered legend — the way an actual
   product page walks you through a real screenshot rather than a marketing bullet list. */
.problem-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.problem-copy .lede { font-size: 16.5px; color: var(--text-dim); line-height: 1.7; margin-top: 18px; }
/* ⚠️ La surcharge rouge de .hl qui vivait ici a été RETIRÉE avec le passage de .hl au blanc
   (2026-08-16). Elle ne visait plus aucun élément du site, et sa seule survie aurait été de
   reteindre en rouge un .hl replacé un jour dans cette section, à contre-courant de la règle
   générale et sans que personne ne comprenne pourquoi celui-là seulement. */
.problem-copy .lede + .lede { margin-top: 14px; }
.callout-legend { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.callout-legend .item { display: flex; gap: 13px; align-items: flex-start; }
.callout-legend .num {
  font-family: var(--mono); font-size: 11px; color: var(--blue-soft);
  width: 23px; height: 23px; border-radius: 50%; border: 1px solid rgba(65,105,225,0.4);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.callout-legend .item p { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.callout-legend .item strong { color: var(--text); font-weight: 600; }

/* ---------- PRODUCT PICKER ---------- */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 40px; display: flex; flex-direction: column;
}
.product-card.pro { border-color: rgba(242,153,38,0.35); background: linear-gradient(180deg, rgba(242,153,38,0.06), transparent 40%); }
.product-card.lite { border-color: rgba(46,194,125,0.3); }
.product-card .kicker {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.product-card.lite .kicker { color: var(--green); }
.product-card.pro .kicker { color: var(--orange); }
.product-card h3 { font-family: var(--display); font-size: 26px; margin-bottom: 10px; }
.product-card .tagline { color: var(--text-dim); font-size: 15px; margin-bottom: 24px; min-height: 48px; }
/* Une ligne « Best if » par carte : le visiteur doit pouvoir se reconnaître sans descendre
   jusqu'à la table comparative. */
.product-card .best-for { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin: -8px 0 22px; }
.product-card .best-for strong { font-weight: 600; }
/* ⚠️ ALIGNEMENT DES PRIX D'UNE CARTE À L'AUTRE (2026-08-10). Les deux cartes sont des colonnes
   indépendantes : rien n'oblige leurs lignes à se correspondre. Le « Best if » de Lite tient sur
   une ligne quand celui de Pro en prend deux, et la tagline de Pro passe à trois lignes avant
   celle de Lite — d'où un prix 20 px plus bas sur Pro à 1280, et 44 px à 1100. Réserver la place
   du PIRE CAS sur les deux blocs qui précèdent le prix suffit à les recaler, sans toucher à la
   structure en flex dont dépend l'alignement des boutons.
   Mesuré sur toute la plage à deux colonnes (945 → 1600+) : tagline 3 lignes de 24 px au plus,
   « Best if » 2 lignes de 20,25 px. L'unité `lh` dit la même chose en suivant la police si elle
   change ; la valeur en pixels reste devant pour les navigateurs qui l'ignorent.
   Inutile sous 940 px : les cartes s'empilent (cf. la requête média plus bas) et il n'y a plus
   rien à aligner — la réserve n'y ferait que du vide. */
@media (min-width: 941px) {
  .product-card .tagline  { min-height: 72px; min-height: 3lh; }
  .product-card .best-for { min-height: 41px; min-height: 2lh; }
}
.product-card.lite .best-for strong { color: var(--green); }
.product-card.pro .best-for strong { color: var(--orange); }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.product-card .price { font-family: var(--display); font-size: 38px; font-weight: 700; }
.product-card .price-note { color: var(--text-faint); font-size: 13.5px; margin-bottom: 22px; }
.product-card ul { margin-bottom: 28px; flex-grow: 1; }
.product-card li { font-size: 14px; color: var(--text-dim); padding: 8px 0; display: flex; gap: 10px; }
.product-card li::before { content: '•'; color: var(--text-faint); flex-shrink: 0; }
.product-card.lite li::before { color: var(--green); }
.product-card.pro li::before { color: var(--orange); }
.product-card .card-actions { display: flex; gap: 10px; }
.product-card .card-actions a { flex: 1; text-align: center; }
.upgrade-note {
  margin-top: 14px; font-size: 13px; color: var(--text-faint);
  border-top: 1px solid var(--line); padding-top: 14px;
}
/* Quand la note précède les boutons (carte Pro du comparateur, 2026-08-06), elle ne doit pas
   les toucher. Sélecteur de frère adjacent plutôt que `:has()` : même effet, aucune question de
   compatibilité, et la règle ne s'applique nulle part ailleurs.
   Reprise à 26px le 2026-08-05 : 18 restaient trop serrés à l'oeil de Clem, et cet écart est
   maintenant le même que celui posé sous les boutons d'achat des pages produit. La règle ne
   touche QUE la carte Pro de l'index : les notes de download.html n'ont pas de .card-actions
   pour frère suivant. */
.upgrade-note + .card-actions { margin-top: 26px; }
.upgrade-note strong { color: var(--text-dim); }
.upgrade-note a, .upgrade-note a strong { color: var(--blue-soft); }
/* Ligne technique sous un bouton de téléchargement (page download). */
.dl-note { font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ---------- COMPARE TABLE ---------- */
.compare-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.compare-table th, .compare-table td {
  padding: 16px 20px; text-align: left; font-size: 14.5px; border-top: 1px solid var(--line);
}
.compare-table thead th {
  border-top: none; font-family: var(--display); font-size: 15px; background: var(--bg-raised);
}
/* ⚠️ CENTRÉS SUR LEUR COLONNE (2026-08-15, demandé par Clem). Ces deux en-têtes héritaient du
   `text-align: left` commun, alors que TOUT ce qu'ils surplombent est centré (td.yes, td.no,
   td.alt) : le titre partait à gauche pendant que sa colonne de ✓ restait au milieu. La colonne
   « Feature » garde son alignement à gauche, elle, puisque ses libellés y sont aussi. */
.compare-table th.col-lite, .compare-table th.col-pro { text-align: center; }
.compare-table th.col-lite { color: var(--green); }
.compare-table th.col-pro { color: var(--orange); }
.compare-table td.feature { color: var(--text-dim); }
/* ⚠️ 200 px ET NON 110 (2026-08-16, demandé par Clem). Ces cellules ne portent qu'un ✓ ou un
   tiret, mais ce sont ELLES qui fixent la largeur des deux colonnes produit, donc celle de la
   ligne de synthèse « Best for » tout en bas. À 110 px son texte tombait sur CINQ lignes, une
   colonne de mots à la verticale. Mesuré sur la ligne réelle : 110 px → 5 lignes, 140 → 4,
   170 → 3, 200 → 2, et au-delà plus aucun gain, seulement de la place prise à la colonne de
   gauche. 200 px est donc le point où le texte se pose, pas une valeur au jugé. */
.compare-table td.yes, .compare-table td.no { text-align: center; font-family: var(--mono); width: 200px; }
.compare-table td.yes { color: var(--blue-soft); }
.compare-table td.no { color: var(--text-faint); }
/* Cellule « équivalent » : quand un — ferait croire à une capacité en moins alors que Pro la
   remplace par mieux, on l'explique en toutes lettres. */
.compare-table td.alt { text-align: center; font-size: 12.5px; color: var(--text-dim); width: 200px; line-height: 1.45; }
.compare-table tbody tr:hover { background: rgba(255,255,255,0.015); }

/* ---------- FEATURES ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.feature-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.feature-card { background: var(--bg-card); padding: 32px 28px; }
.feature-num { font-family: var(--mono); font-size: 12px; color: var(--blue-soft); margin-bottom: 18px; }
.feature-card.pro .feature-num { color: var(--orange); }
.feature-card h3 { font-family: var(--display); font-size: 17px; margin-bottom: 10px; font-weight: 600; }
.feature-card p { font-size: 14px; color: var(--text-dim); }

.feature-icon {
  width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(65,105,225,0.12); color: var(--blue-soft); margin-bottom: 18px;
}
.feature-card.pro .feature-icon { background: rgba(242,153,38,0.12); color: var(--orange); }
.feature-card.lite .feature-icon { background: rgba(46,194,125,0.12); color: var(--green); }
.feature-icon .icon { width: 18px; height: 18px; }

/* ---------- SPOTLIGHT (raised panel, breaks up the flat card-on-card rhythm) ---------- */
.spotlight { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px; padding: 64px; }
.spotlight-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.spotlight-layout.reverse { grid-template-columns: 1fr 1fr; }
.spotlight-layout.reverse > .shot-placeholder { order: -1; }

/* ---------- HOW IT WORKS ---------- */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-tc { font-family: var(--mono); font-size: 13px; color: var(--text-faint); padding-top: 3px; }
.step h3 { font-family: var(--display); font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 14.5px; max-width: 560px; }

/* ---------- SPECS / COMPATIBILITY ---------- */
/* ⚠️ `auto-fit` et non `repeat(5, 1fr)` (2026-08-07) : Lite porte cinq fiches, Pro en porte SIX
   depuis l'ajout de la résolution d'aperçu. Un nombre de colonnes figé laissait la sixième seule
   sur une deuxième rangée, au cinquième de la largeur. `auto-fit` place ce que la largeur permet
   et répartit le reste, sans qu'aucune page n'ait à connaître le compte de l'autre. */
.specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* ⚠️ Pro porte SEPT fiches, Lite cinq. À 170 px de large minimum, les sept demandent six colonnes
   et la septième se retrouve seule sur une deuxième rangée. Les serrer à sept par rangée donnerait
   ~108 px de texte utile, ce qui découperait « Built-in display, or Blackmagic DeckLink &
   UltraStudio » en colonne illisible. On donne donc plus de place aux cartes de Pro : quatre
   colonnes, soit 4 + 3, deux rangées assumées et lisibles. */
.specs-grid.roomy { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.spec-card { background: var(--bg-card); padding: 26px 24px; }
.spec-card .spec-label { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.spec-card .spec-value { font-family: var(--display); font-size: 18px; font-weight: 600; }
.spec-card .spec-note { font-size: 12.5px; color: var(--text-faint); margin-top: 8px; line-height: 1.35; }

/* ---------- PRICING ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.price-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 36px; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--orange); position: relative; background: linear-gradient(180deg, rgba(242,153,38,0.06), transparent 40%); }
/* Même traitement pour la carte de PictoWave (2026-08-16, demandé par Clem), dans SA couleur.
   Le vert est celui qui identifie déjà le produit partout ailleurs : pastille du sélecteur de
   devise, en-tête du tableau comparatif, .eyebrow.lite. La carte de PictoWave Pro reste orange,
   les deux encarts de vente sont donc traités pareil sans se confondre. --green vaut #2EC27D. */
.price-card.featured-green { border-color: var(--green); position: relative; background: linear-gradient(180deg, rgba(46,194,125,0.06), transparent 40%); }
.price-card.featured-green li::before { color: var(--green); }
.price-tag { position: absolute; top: -1px; right: 28px; background: var(--orange); color: #14161B; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 0 0 6px 6px; letter-spacing: 0.03em; }
.price-card h3 { font-family: var(--display); font-size: 18px; margin-bottom: 6px; }
.price-card .price-sub { color: var(--text-faint); font-size: 13.5px; margin-bottom: 24px; }
.price-amount { font-family: var(--display); font-size: 44px; font-weight: 700; margin-bottom: 4px; }
.price-amount span { font-size: 16px; color: var(--text-faint); font-weight: 500; }
.price-detail { font-size: 13.5px; color: var(--text-dim); margin-bottom: 28px; }
.price-card ul { margin-bottom: 28px; flex-grow: 1; }
.price-card li { font-size: 14px; color: var(--text-dim); padding: 9px 0; display: flex; gap: 10px; }
.price-card li::before { content: '•'; color: var(--text-faint); }
.price-card.featured li::before { color: var(--orange); }
/* Sortie basse friction juste sous le bouton d'achat : l'hésitant repart avec l'essai,
   pas avec un onglet fermé. */
.price-trial { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--text-dim); }

/* Précision discrète sous un bouton d'achat : dit pourquoi cette caisse-là et pas une autre, sans
   concurrencer le bouton qu'elle accompagne (cf. upgrade.html, où le code de réduction ne vaut que
   pour la boutique d'origine de la licence). */
.hint { font-size: 13px; color: var(--text-faint); margin-top: 10px; }

/* ---------- SÉLECTEUR DE DEVISE (2026-08-08) ----------
   Deux boutiques Lemon Squeezy, une par devise (cf. currency.js). Ce sélecteur bascule le prix ET
   le lien de caisse. Discret par construction : c'est un réglage, pas un argument de vente, il ne
   doit pas concurrencer le prix qu'il sert à lire. Retiré du DOM par currency.js tant qu'aucune
   grille euro n'est déclarée, pour ne jamais afficher un bouton inerte. */
/* ⚠️ LES DEUX ÉCARTS SE RÈGLENT ENSEMBLE, sinon le sélecteur colle au paragraphe. L'espace sous
   lui n'est pas à lui : c'est le `margin-bottom` du `.section-head`, qui vaut 60 px partout. En ne
   posant qu'une marge haute, on obtenait 20 px au-dessus contre 60 en dessous. Le `:has()` limite
   la reprise aux seules sections qui portent un sélecteur — les autres gardent leurs 60 px — et un
   navigateur qui l'ignorerait retomberait simplement sur l'espacement d'avant. */
.section-head:has(.currency-toggle) { margin-bottom: 40px; }
/* ⚠️ PLUS PARTAGÉE AVEC LE FILTRE DE LA FAQ (2026-08-15, retour de Clem sur le rendu). La recette
   avait été factorisée entre les deux le matin même : c'était une erreur de lecture, ils se
   ressemblaient sans jouer le même rôle. Le sélecteur de devise est un interrupteur isolé au
   milieu d'un texte, sa boîte le désigne ; le filtre de la FAQ, lui, tombe juste au-dessus du
   sommaire, une rangée de pastilles cerclées. Encadré, il en devenait une version rapetissée,
   23 px de haut contre 38, et sa boîte décalait ses boutons de 3 px vers la droite. Les deux
   composants divergent donc pour de vrai, et chacun garde ses règles. */
.currency-toggle {
  display: inline-flex; gap: 2px; padding: 2px; margin-top: 40px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised);
}
.currency-toggle button {
  border: none; background: none; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  color: var(--text-faint); transition: color 0.15s, background 0.15s;
}
.currency-toggle button:hover { color: var(--text-dim); }
.currency-toggle button.is-active { background: var(--blue); color: white; }

/* Variante réduite (2026-08-10, download.html) : sous les deux cartes plutôt que sous le titre de
   section. Les prix de cette page ne sont que la petite mention "Convinced already?", pas un grand
   chiffre à côté duquel le plein format se justifiait ailleurs — le sélecteur doit rester à cette
   échelle-là, pas dominer une page qui parle avant tout d'essai gratuit. */
.currency-toggle.compact { padding: 1px; margin-top: 0; }
.currency-toggle.compact button { padding: 3px 10px; font-size: 11.5px; }

/* Mention fiscale posée près de chaque prix (2026-08-07). Les prix du site sont HORS TAXES : la
   TVA est calculée par Lemon Squeezy au paiement, selon le pays de l'acheteur. Un visiteur français
   voyait donc 59,99 $ ici et 71,99 $ à la caisse, sans que rien ne l'ait annoncé.
   Volontairement discrète mais PAS invisible : elle doit se lire sans concurrencer le prix. */
.tax-note { display: block; margin-top: 3px; font-size: 12.5px; opacity: 0.85; }
.price-trial a { color: var(--blue-soft); font-weight: 600; }

/* ---------- ROADMAP ---------- */
.roadmap-list { display: flex; flex-direction: column; }
.roadmap-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 24px 0;
  border-top: 1px solid var(--line); align-items: baseline;
}
.roadmap-item:last-child { border-bottom: 1px solid var(--line); }
.roadmap-status {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--blue-soft); background: rgba(65,105,225,0.1); padding: 5px 10px; border-radius: 5px;
  display: inline-block; width: fit-content;
}
.roadmap-status.shipped { color: var(--green); background: rgba(46,194,125,0.1); }
.roadmap-item h3 { font-family: var(--display); font-size: 16px; margin-bottom: 6px; }
.roadmap-item p { font-size: 14px; color: var(--text-dim); max-width: 520px; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--line); padding: 26px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

/* ---------- FILTRE PAR PRODUIT DE LA FAQ (2026-08-15) ---------- */
/* PAS DE BOÎTE AUTOUR DU GROUPE, contrairement au sélecteur de devise. Le filtre vit juste
   au-dessus du sommaire, lui-même une rangée de pastilles cerclées : l'encadrer en faisait un
   double rapetissé de la rangée du dessous. Sans boîte, l'état actif porte seul l'information
   (pastille pleine) et les inactifs redeviennent du texte, ce qui distingue franchement le
   CONTRÔLE de la NAVIGATION juste en dessous.
   ⚠️ Les boutons commencent alors à la marge exacte du sommaire ; avec la boîte, son liseré et
   ses 2 px de remplissage les décalaient de 3 px, et les deux rangées ne s'alignaient pas. */
.faq-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
/* ⚠️ `display` EXPLICITE POUR L'ÉTAT MASQUÉ : la règle ci-dessus pose `flex`, ce qui BAT la
   feuille du navigateur pour [hidden]. Sans cette ligne, la barre resterait visible chez qui n'a
   pas JavaScript, alors qu'elle n'y ferait rien du tout. */
.faq-filter[hidden] { display: none; }
.faq-filter button {
  border: none; background: none; cursor: pointer;
  /* Calé sur la pastille du sommaire (38 px de haut) plutôt que sur le sélecteur de devise :
     c'est avec elle que la comparaison se fait, à quelques pixels de distance.
     ⚠️ `line-height` EXPLICITE : sans elle le bouton montait à 51 px, la hauteur de ligne héritée
     du corps de page (1,65) s'appliquant à une police plus grande que celle du sélecteur de
     devise. 8 + 22 + 8 = 38, exactement la pastille du dessous. */
  padding: 8px 15px; line-height: 22px; border-radius: 999px;
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  color: var(--text-faint); transition: color 0.15s, background 0.15s;
}
.faq-filter button:hover { color: var(--text); background: var(--bg-raised); }
.faq-filter button.is-active { background: var(--blue); color: #fff; }
.faq-item[hidden] { display: none; }
.faq-filter-etat {
  min-height: 20px; margin: 0 0 26px;
  font-size: 13px; color: var(--text-faint);
}

/* Pastille de produit, posée UNIQUEMENT là où le titre de section ne dit pas déjà de quel produit
   il s'agit. Volontairement SANS couleur d'accent, même parti pris que .hl-pro : le texte porte
   l'information, une teinte de plus entrerait en concurrence avec les états actifs en --blue. */
.faq-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-faint); white-space: nowrap;
}

/* ⚠️ LE TRAIT DE CLÔTURE SUIT LA DERNIÈRE ENTRÉE VISIBLE, PAS LE DERNIER ENFANT. `:last-child`
   ci-dessus désigne le dernier élément du DOM même masqué : dès qu'un filtre cache la fin d'une
   liste, le trait du bas disparaissait avec lui et la section restait ouverte. faq.js pose cette
   classe sur la dernière entrée réellement affichée. */
.faq-item.is-last-visible { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.faq-item p { font-size: 14.5px; color: var(--text-dim); max-width: 640px; }
/* Le `a { color: inherit }` global rendait ces liens invisibles au milieu d'une réponse. */
.faq-item p a { color: var(--blue-soft); }

/* ---------- CTA BAND ---------- */
.cta-band {
  background: linear-gradient(135deg, #1a2348 0%, #14161e 60%); border-radius: 16px;
  padding: 72px 48px; text-align: center; border: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--text-dim); max-width: 480px; margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- CONTACT FORM ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.contact-info h3 { font-family: var(--display); font-size: 18px; margin-bottom: 10px; }
.contact-info p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 20px; }
.contact-info a.mail { color: var(--blue-soft); font-weight: 600; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: 7px;
  padding: 12px 14px; color: var(--text); font-family: var(--body); font-size: 14.5px;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); }
.form-note { font-size: 12.5px; color: var(--text-faint); margin-top: 14px; }

/* ---------- NEWSLETTER ---------- */
.newsletter-box {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 40px 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.newsletter-box h3 { font-family: var(--display); font-size: 19px; margin-bottom: 6px; }
.newsletter-box p { color: var(--text-dim); font-size: 14px; max-width: 360px; }
.newsletter-form { display: flex; gap: 10px; flex-shrink: 0; }
.newsletter-form input[type="email"] {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 7px;
  padding: 12px 16px; color: var(--text); font-family: var(--body); font-size: 14.5px;
  min-width: 240px;
}
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--blue); }
.newsletter-consent { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 16px; }
.newsletter-consent a { color: var(--blue-soft); }

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.footer-col h4 { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-dim); padding: 6px 0; transition: color 0.15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between;
  align-items: center; font-size: 13px; color: var(--text-faint); flex-wrap: wrap; gap: 12px;
}
/* Le crédit vidéo est la seule ligne du bas de page à contenir un lien : sans couleur propre, il
   héritait du gris `--text-faint` et rien ne signalait qu'on pouvait cliquer sur le titre. */
.footer-bottom a { color: var(--blue-soft); }
.footer-bottom a:hover { text-decoration: underline; }

/* 940 px et non 860 : MESURÉ sur la page Lite, la barre réclame 892 px pour afficher marque, liens
   et bouton d'achat sans que rien ne soit comprimé. En dessous, flex tassait la marque. On bascule
   donc dans le menu déroulant avant d'en arriver là, avec une marge pour les libellés les plus
   longs (« Get Pro · $159.99 »). */
@media (max-width: 940px) {
  /* Menu déroulant (2026-08-06). Les liens ne tiennent plus dans la barre : ils passent dans un
     panneau ouvert par le bouton à trois barres. Le CTA, lui, RESTE dans la barre — un visiteur
     mobile garde son chemin vers l'achat sans avoir à ouvrir quoi que ce soit. Avant ce menu, les
     liens étaient simplement masqués et il ne restait plus aucun accès à la FAQ, à l'essai ni à
     la comparaison sans dérouler toute la page jusqu'au pied. */
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-left: 0; padding: 6px 0 10px;
    /* ⚠️ Fond OPAQUE et AUCUN backdrop-filter ici. La barre parente en porte déjà un, et un second
       imbriqué dedans laissait le contenu de la page transparaître à travers le panneau — le
       tableau comparatif restait lisible derrière les entrées du menu, malgré une couleur posée
       à 98 % d'opacité. Un aplat opaque règle le cas sans dépendre de la composition du navigateur. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  nav.nav-open .nav-links { display: flex; }
  /* 20 px : même retrait que le padding de nav .wrap ci-dessous, les entrées s'alignent donc
     sur la marque. */
  .nav-links a { padding: 12px 20px; font-size: 15px; }
  .nav-actions { margin-left: 12px; }

  /* ⚠️ La barre passe à trois éléments serrés (marque, bouton d'achat, menu) et, sans ces
     réglages, `flex` prend la largeur sur le plus compressible : la MARQUE. Elle gardait sa
     hauteur en perdant de la largeur, donc un mot-symbole écrasé horizontalement. `flex-shrink: 0`
     l'interdit ; le reste dégage la place nécessaire pour que rien n'ait à être comprimé, y compris
     avec les libellés d'achat les plus longs (« Get Pro · $159.99 »). */
  nav .wrap { padding: 0 20px; }
  /* ⚠️ `nav .brand img` et pas `.brand img` : le bloc du mot-symbole est déclaré PLUS BAS dans ce
     fichier, donc à spécificité égale il gagnerait par simple ordre d'écriture et la hauteur
     resterait à 56 px. Le sélecteur descendant passe devant sans dépendre de la position. */
  nav .brand img { height: 44px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .newsletter-box { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .newsletter-form { width: 100%; }
  .newsletter-form input[type="email"] { flex: 1; min-width: 0; }
  .feature-grid, .pricing-grid, .product-grid { grid-template-columns: 1fr; }
  .hero .wrap, .problem-layout, .spotlight-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero .wrap { padding-bottom: 48px; }
  .hero-copy, .hero-sub { max-width: none; }
  .spotlight-layout.reverse > .shot-placeholder { order: 0; }
  .spotlight { padding: 36px 28px; border-radius: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .step, .roadmap-item { grid-template-columns: 1fr; gap: 8px; }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 12px 10px; }
}

/* ── Mot-symbole en image (2026-08-02) ──────────────────────────────────────────────────
   Remplace le mot composé en trois <span> colorés. Le fichier est DÉJÀ RECADRÉ sur son
   empreinte visible (cf. assets/wordmark.png) : pas de rognage à faire ici, une hauteur
   suffit et la largeur suit.

   ⚠️ La hauteur porte sur TOUT le visuel, barres de waveform comprises, pas sur le lettrage.
   Celui-ci n'occupe qu'environ un quart de l'image : une hauteur de 56 px donne un nom de la
   taille d'un texte de 14 px. C'est ce qui a imposé de rester sous les 68 px de la barre de
   navigation. */
/* ⚠️ `flex-shrink: 0` : la marque est un élément flex de la barre, donc compressible par défaut.
   Quand la barre manquait de place, c'est sur ELLE que flex prenait la largeur — l'image gardait
   sa hauteur en perdant de la largeur, et le mot-symbole se retrouvait écrasé horizontalement.
   Signalé en mobile, mais le défaut existait aussi juste au-dessus du seuil, là où les liens et le
   bouton d'achat remplissent déjà toute la barre. Le seuil du menu déroulant est calé pour que
   ce blocage n'oblige jamais à déborder (cf. la requête média). */
.brand { display: inline-flex; align-items: center; text-decoration: none !important; flex-shrink: 0; }
.brand img { height: 56px; width: auto; display: block; }

/* Ligne de retour du formulaire newsletter (2026-08-03). Même place et même gabarit que la ligne
   de consentement juste en dessous, pour que l'apparition du message ne fasse pas sauter le bloc. */
.newsletter-status { margin: 12px 0 0; font-size: 14px; min-height: 20px; color: var(--text-dim); }
.newsletter-status.ok  { color: var(--green, #2ec27d); }
.newsletter-status.err { color: var(--red, #ff6b6b); }

/* ---------- CONFIGURATION REQUISE ---------- */
/* ⚠️ Demandé par Clem le 2026-08-05 : « partout où cette limitation est affichée, il faut vraiment
   qu'elle soit visible ET comprise ». Elle existait déjà sur 5 pages, mais toujours en gris faible
   (.dl-note, .spec-value) et JAMAIS à côté d'un bouton d'achat : on pouvait payer sans l'avoir
   lue. Une exigence qui exclut une partie des acheteurs (Pro Tools Artist, ou une version
   antérieure à 2025.06) n'est pas une note de bas de page, c'est une information précontractuelle.

   Traitement en orange plutôt qu'en rouge : le rouge dit « erreur » et ferait fuir un visiteur
   éligible, l'orange dit « à vérifier avant d'acheter ». Contraste MESURÉ dans le navigateur sur
   le fond teinté composité (rgb 39,37,34) : 6,81:1 pour l'orange gras, 5,85:1 pour le texte
   courant, tous deux au-delà du seuil AA de 4,5:1 pour du texte normal. La couleur
   n'est PAS le seul signal (elle ne se voit pas en daltonisme ni en impression noir et blanc) :
   le liseré à gauche, le fond teinté et le mot « Requires » en gras portent la même information. */
.req-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* Centré (2026-08-05, demandé par Clem). Toutes les occurrences de CETTE feuille vivent sous un
     appel à l'action lui-même centré : bouton pleine largeur des cartes de prix, cartes de
     download.html dont la .dl-note juste en dessous est déjà centrée, note commune sous la grille
     de l'index. Alignée à gauche, la note était le seul élément de travers de ces blocs.
     ⚠️ Volontairement PAS répercuté dans legal.css : là-bas, la même boîte porte une CLAUSE des
     CGV, au milieu de paragraphes alignés à gauche. Centrer un texte de contrat le rend plus
     difficile à lire et le ferait détonner dans le document. */
  justify-content: center;
  text-align: center;
  /* 26px et non 16 (2026-08-05, demandé par Clem) : sous un bouton d'achat, la note doit se lire
     comme une réserve séparée, pas comme une légende du bouton. Les variantes qui posent leur
     propre marge (.compact, la note commune de l'index) ne sont pas concernées. */
  margin-top: 26px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(242, 153, 38, 0.07);
  border: 1px solid rgba(242, 153, 38, 0.22);
  border-left: 3px solid var(--orange);
  border-radius: 7px;
}
.req-note strong { color: var(--orange); font-weight: 700; }
.req-note .req-icon { color: var(--orange); flex: 0 0 auto; font-size: 14px; line-height: 1.45; }
.req-note a { color: var(--blue-soft); font-weight: 600; text-decoration: underline; }

/* Variante compacte pour les endroits déjà denses (cartes de téléchargement). */
.req-note.compact { margin-top: 12px; padding: 9px 12px; font-size: 12.5px; }

/* ---------- ACCENT « MÊME SUR PRO TOOLS STUDIO » ---------- */
/* Demandé par Clem le 2026-08-05 : mettre en valeur l'argument sans aller jusqu'au rouge.
   C'est le différenciateur le plus fort de Pro (le multi-bobines sur Studio, là où Pro Tools le
   réserve à Ultimate), et il passait inaperçu au milieu du texte courant.

   ⚠️ NI VERT NI ORANGE PLEIN, et pour des raisons opposées. Le VERT est la couleur d'identité de
   LITE sur tout le site (.eyebrow.lite, .product-card.lite, .compare-table th.col-lite) : colorier
   en vert un argument exclusif à Pro le rattacherait visuellement au mauvais produit. L'ORANGE est
   bien celle de Pro, mais c'est aussi celle qu'ont prise les encadrés de configuration requise le
   même jour : un aplat orange en plein texte se lirait désormais comme une réserve, alors que
   c'est un argument de vente.

   D'où le parti pris final (soulignement orange retiré à la demande de Clem le 2026-08-05) : la
   mise en valeur ne tient qu'au TEXTE, passé en pleine intensité (--text au lieu de --text-dim)
   et en semi-gras. Aucune couleur d'accent, donc aucune ambiguïté avec les deux autres. */
.hl-pro {
  color: var(--text);
  font-weight: 600;
}
/* Dans le tableau comparatif, « even on Pro Tools Studio » passe en blanc comme ailleurs
   (demandé par Clem le 2026-08-19). Une règle `.compare-table .hl-pro { color: inherit; }` le
   ramenait à la couleur de la cellule, au motif que le blanc ressortait trop sur une ligne courte
   et pouvait faire croire à une colonne à part. Arbitrage revu : cette mention est l'argument le
   plus fort de la ligne, elle doit se voir. Ne pas remettre la règle sans le redemander. */