/* Police Inter servie par le site (public/fonts, licence SIL OFL) : pas d'attente d'un autre serveur. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-latin-v20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-latin-ext-v20.woff2) format('woff2');
  unicode-range: U+0100-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Landing VINTYTRACK — base sombre, une section après l'autre (en-tête → hero → … → pied de page).
   Chaque section garde son propre bloc ci-dessous pour être refaite sans toucher aux autres. */

:root {
  --fond: #030812;
  --fond-2: #060D1A;
  --surface: #0A1222;
  --surface-2: #0F1A2F;
  --bord: #17243A;
  --bord-fort: #23365A;
  --texte: #EEF3FF;
  --texte-2: #B4C1D8;
  --muet: #8494AF;
  --primaire: #0A5FFE;
  --primaire-hover: #2A74FF;
  --accent: #4F8BFF;
  --cyan: #22D3EE;
  --violet: #8B5CF6;
  --rouge: #F0645A;
  --degrade: linear-gradient(135deg, #2A74FF 0%, #0A5FFE 100%);
  --degrade-texte: linear-gradient(100deg, #79A9FF 0%, #4F8BFF 45%, #8B5CF6 100%);
  --rayon: 16px;
  --rayon-s: 10px;
  --ombre: 0 24px 60px -24px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.03);
  --largeur: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--primaire); border-radius: 8px; }
.evitement:focus { left: 16px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.conteneur-etroit { max-width: 820px; }
.section { padding: 112px 0; position: relative; }
.muet { color: var(--muet); }
.insecable { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Boutons ─────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.bouton-grand { height: 50px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.bouton-principal { background: var(--degrade); color: #fff; box-shadow: 0 8px 24px -8px rgb(10 95 254 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.bouton-principal:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgb(10 95 254 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.18); }
/* Bleu foncé (bouton « Commencer » de l'en-tête) */
.bouton-fonce { background: linear-gradient(180deg, #12398A 0%, #0A2763 100%); color: #fff; border-color: rgb(79 139 255 / 0.35); box-shadow: 0 6px 18px -8px rgb(10 39 99 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.bouton-fonce:hover { background: linear-gradient(180deg, #1646A3 0%, #0C2F78 100%); border-color: rgb(79 139 255 / 0.55); transform: translateY(-1px); }
.bouton-contour { border-color: var(--bord-fort); color: var(--texte); background: rgb(255 255 255 / 0.02); }
.bouton-contour:hover { border-color: var(--accent); background: rgb(79 139 255 / 0.08); }
.bouton-discret { color: var(--texte-2); }
.bouton-discret:hover { color: var(--texte); }

/* Bouton brillant (port du composant « ShinyButton », couleurs du logo) : un trait de lumière bleue fait le tour
   du contour, une trame de points le suit, un reflet tourne à l'intérieur. Au survol, la lumière s'élargit,
   s'éclaircit et accélère, et une lueur respire sous le texte. */
@property --brillant-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --brillant-decalage { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --brillant-pourcent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --brillant-eclat { syntax: "<color>"; initial-value: white; inherits: false; }
.bouton-brillant {
  --b-fond: #030812;
  --b-fond-doux: #16243D;
  --b-lueur: #1C70FF;
  --b-lueur-douce: #79A9FF;
  --animation: brillant-angle linear infinite;
  --duree: 3s;
  --ombre-taille: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; outline-offset: 4px; padding: 1rem 2.25rem; white-space: nowrap;
  font: 600 16px/1.2 Inter, system-ui, sans-serif; color: #fff;
  border: 1px solid transparent; border-radius: 360px;
  background:
    linear-gradient(var(--b-fond), var(--b-fond)) padding-box,
    conic-gradient(from calc(var(--brillant-angle) - var(--brillant-decalage)), transparent, var(--b-lueur) var(--brillant-pourcent),
      var(--brillant-eclat) calc(var(--brillant-pourcent) * 2), var(--b-lueur) calc(var(--brillant-pourcent) * 3),
      transparent calc(var(--brillant-pourcent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--b-fond-doux), 0 10px 30px -12px rgb(28 112 255 / 0.55);
  transition: var(--transition);
  transition-property: --brillant-decalage, --brillant-pourcent, --brillant-eclat;
}
.bouton-brillant:focus-visible { border-radius: 360px; }
.bouton-brillant::before, .bouton-brillant::after, .bouton-brillant span::before {
  content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1;
}
.bouton-brillant:active { translate: 0 1px; }
/* Trame de points qui suit la lumière */
.bouton-brillant::before {
  --taille: calc(100% - var(--ombre-taille) * 3);
  --pos: 2px;
  --pas: calc(var(--pos) * 2);
  width: var(--taille); height: var(--taille);
  background: radial-gradient(circle at var(--pos) var(--pos), white calc(var(--pos) / 4), transparent 0) padding-box;
  background-size: var(--pas) var(--pas); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--brillant-angle) + 45deg), black, transparent 10% 90%, black);
  mask-image: conic-gradient(from calc(var(--brillant-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit; opacity: .4;
}
/* Reflet intérieur qui tourne */
.bouton-brillant::after {
  --animation: brillant-tour linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--b-lueur), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .6;
}
.bouton-brillant span { z-index: 1; }
.bouton-brillant span::before {
  --taille: calc(100% + 1rem);
  width: var(--taille); height: var(--taille);
  box-shadow: inset 0 -1ex 2rem 4px var(--b-lueur);
  opacity: 0; transition: opacity var(--transition);
  animation: calc(var(--duree) * 1.5) brillant-respire linear infinite;
}
.bouton-brillant, .bouton-brillant::before, .bouton-brillant::after {
  animation: var(--animation) var(--duree), var(--animation) calc(var(--duree) / 0.4) reverse paused;
  animation-composition: add;
}
.bouton-brillant:is(:hover, :focus-visible) { --brillant-pourcent: 20%; --brillant-decalage: 95deg; --brillant-eclat: var(--b-lueur-douce); }
.bouton-brillant:is(:hover, :focus-visible), .bouton-brillant:is(:hover, :focus-visible)::before, .bouton-brillant:is(:hover, :focus-visible)::after { animation-play-state: running; }
.bouton-brillant:is(:hover, :focus-visible) span::before { opacity: 1; }
@keyframes brillant-angle { to { --brillant-angle: 360deg; } }
@keyframes brillant-tour { to { rotate: 360deg; } }
@keyframes brillant-respire { from, to { scale: 1; } 50% { scale: 1.2; } }

/* Bouton principal « Commencer » mis en avant : le même trait de lumière, sur un fond bleu plein, plus grand, avec un
   halo qui respire autour et une flèche qui avance au survol. */
.booster-cadre { position: relative; display: inline-flex; border-radius: 360px; }
.booster-cadre::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: booster-halo 2.6s ease-out infinite; }
@keyframes booster-halo { 0% { box-shadow: 0 0 0 0 rgb(42 116 255 / 0.55); } 70%, 100% { box-shadow: 0 0 0 16px rgb(42 116 255 / 0); } }
.bouton-brillant.est-booster {
  --b-fond-doux: rgb(255 255 255 / 0.18); --b-lueur: #A9C8FF; --b-lueur-douce: #fff;
  padding: 1.1rem 2.4rem; font-size: 17px; font-weight: 700; letter-spacing: -0.005em;
  background:
    linear-gradient(180deg, #3381FF 0%, #0A5FFE 55%, #0749D8 100%) padding-box,
    conic-gradient(from calc(var(--brillant-angle) - var(--brillant-decalage)), transparent, var(--b-lueur) var(--brillant-pourcent),
      var(--brillant-eclat) calc(var(--brillant-pourcent) * 2), var(--b-lueur) calc(var(--brillant-pourcent) * 3),
      transparent calc(var(--brillant-pourcent) * 4)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 16px 44px -12px rgb(10 95 254 / 0.9);
}
.bouton-brillant.est-booster::before { opacity: .22; }
.booster-fleche { display: inline-block; margin-left: 8px; font-style: normal; transition: transform .25s ease; }
.est-booster:is(:hover, :focus-visible) .booster-fleche { transform: translateX(4px); }

.sig-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgb(79 139 255 / 0.16); color: #79A9FF; box-shadow: inset 0 0 0 1px rgb(79 139 255 / 0.35); }
.sig-texte { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.sig-texte small { display: flex; align-items: center; gap: 6px; color: #79A9FF; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sig-texte b { color: #fff; font-size: 15px; font-weight: 700; }
.sig-texte b span { color: var(--texte-2); font-weight: 500; }
.sig-texte em { color: var(--texte-2); font-size: 13px; font-style: normal; }
.sig-floue { display: inline-block; filter: blur(3.6px); color: #fff; font-weight: 800; text-shadow: 0 0 1px #fff; user-select: none; -webkit-user-select: none; pointer-events: none; }
.sig-texte b .sig-floue { color: #fff; }
.sig-cadenas { display: inline-block; margin: 0 2px 0 6px; vertical-align: -1px; color: #79A9FF; }
.sig-lien { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.sig-voir { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: #79A9FF; font-size: 13px; font-weight: 700; }
.sig-lien:hover .sig-voir { color: #fff; }
.sig-indice { display: block; margin-top: 2px; color: #79A9FF; font-size: 12px; font-weight: 600; }

/* Chiffres pas encore relevés : une barre qui scintille au lieu d'un tiret. */
[data-chiffre]:not([data-valeur]) { display: block; width: 62%; max-width: 180px; height: 0.9em; margin: 0.1em auto; border-radius: 8px; color: transparent;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0.06) 100%) 0 0 / 200% 100%; animation: chiffre-attente 1.4s linear infinite; }
@keyframes chiffre-attente { to { background-position: -200% 0; } }

/* ── Titres de section ───────────────────────────────────── */
.surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.titre-section { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.titre-section h2 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; text-wrap: balance; }
.titre-section p:not(.surtitre) { margin-top: 16px; font-size: 18px; color: var(--texte-2); }
.titre-section.a-gauche { margin: 0; text-align: left; }
.degrade { background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Point « en direct » */
.pouls { width: 7px; height: 7px; border-radius: 50%; background: #4F8BFF; box-shadow: 0 0 0 0 rgb(79 139 255 / 0.6); animation: pouls 2s infinite; flex: none; }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px rgb(79 139 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(79 139 255 / 0); } }

/* ── Cartes et grilles ───────────────────────────────────── */
.carte {
  background: linear-gradient(180deg, var(--surface) 0%, var(--fond-2) 100%);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 28px;
  transition: border-color .25s, transform .25s;
}
.carte:hover { border-color: var(--bord-fort); }
.carte h3 { font-size: 18px; font-weight: 700; margin: 18px 0 8px; }
.carte p { color: var(--texte-2); font-size: 15px; }
.carte-ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgb(79 139 255 / 0.12); border: 1px solid rgb(79 139 255 / 0.25); color: var(--accent); font-size: 20px; font-weight: 700;
}
.carte-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-rouge { background: rgb(240 100 90 / 0.1); border-color: rgb(240 100 90 / 0.25); color: var(--rouge); }
/* Icônes vivantes : chacune rejoue son mouvement d'elle-même, l'une après l'autre (classe .joue posée par landing.js),
   et au survol de sa carte. Euro : redessiné trait par trait avec un sursaut ; tendances : la courbe se trace puis la
   flèche s'ouvre ; horloge : la grande aiguille fait un tour ; cible : le centre bat ; bouclier : la coche se trace ;
   loupe : elle cherche ; pépite : elle brille ; vendeurs : le second arrive ; étincelle : elle scintille ; cloche : elle sonne. */
.ico-anime .trait { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-euro, .ico-euro.joue) svg { animation: ico-echelle 1.2s ease-in-out, ico-bascule 1.2s ease-in-out, ico-saut 1.2s ease-in-out; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-euro, .ico-euro.joue) .t1 { animation: ico-trace .5s .06s ease-in-out backwards; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-euro, .ico-euro.joue) .t2 { animation: ico-trace .6s .16s ease-in-out backwards; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-euro, .ico-euro.joue) .t3 { animation: ico-trace .9s .26s ease-in-out backwards; }
@keyframes ico-echelle { 50% { scale: 1.06; } }
@keyframes ico-bascule { 33% { rotate: -2deg; } 66% { rotate: 2deg; } }
@keyframes ico-saut { 50% { translate: 0 -1px; } }
@keyframes ico-trace { from { stroke-dashoffset: 1; opacity: .7; } to { stroke-dashoffset: 0; opacity: 1; } }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-tendance, .ico-tendance.joue) svg { animation: ico-glisse .5s; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-hausse, .ico-hausse.joue) svg { animation: ico-glisse-haut .5s; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-tendance, .ico-tendance.joue) .ligne { animation: ico-ligne .4s backwards; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-tendance, .ico-tendance.joue) .fleche { animation: ico-fleche .3s .3s backwards; }
@keyframes ico-glisse { 50% { translate: 2px 2px; } }
@keyframes ico-glisse-haut { 50% { translate: 2px -2px; } }
@keyframes ico-ligne { 0% { stroke-dasharray: 0 2; stroke-dashoffset: -1; opacity: 0; } 25% { opacity: 1; } 100% { stroke-dasharray: 1 2; stroke-dashoffset: 0; opacity: 1; } }
@keyframes ico-fleche { 0% { stroke-dasharray: 0 2; stroke-dashoffset: -.5; opacity: 0; } 33% { opacity: 1; } 100% { stroke-dasharray: 1 2; stroke-dashoffset: 0; opacity: 1; } }

.ico-horloge .aiguille { transform-box: view-box; transform-origin: 12px 12px; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-horloge, .ico-horloge.joue) .aiguille { animation: ico-tour 1.2s cubic-bezier(.45, 0, .2, 1); }
@keyframes ico-tour { to { rotate: 360deg; } }

.ico-cible circle { transform-box: view-box; transform-origin: 12px 12px; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-cible, .ico-cible.joue) .c3 { animation: ico-bat 1s ease-out; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-cible, .ico-cible.joue) .c2 { animation: ico-resserre 1s .08s ease-out; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-cible, .ico-cible.joue) .c1 { animation: ico-onde 1s .16s ease-out; }
@keyframes ico-bat { 35% { scale: 1.9; } }
@keyframes ico-resserre { 35% { scale: .82; } }
@keyframes ico-onde { 35% { scale: 1.06; } }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-bouclier, .ico-bouclier.joue) svg { animation: ico-echelle .8s ease-in-out; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-bouclier, .ico-bouclier.joue) .coche { animation: ico-trace .5s .15s ease-out backwards; }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-loupe, .ico-loupe.joue) svg { animation: ico-cherche 1.2s ease-in-out; }
@keyframes ico-cherche { 25% { translate: -2px -1px; } 50% { translate: 1px -2px; } 75% { translate: 2px 1px; } }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-gemme, .ico-gemme.joue) svg { animation: ico-eclat 1s ease-in-out; }
@keyframes ico-eclat { 30% { scale: 1.14; rotate: -8deg; filter: drop-shadow(0 0 5px currentColor); } 60% { scale: .97; rotate: 5deg; } }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-vendeurs, .ico-vendeurs.joue) .second { animation: ico-arrive .6s ease-out backwards; }
@keyframes ico-arrive { from { translate: -5px 0; opacity: 0; } }

:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-etincelle, .ico-etincelle.joue) svg { animation: ico-scintille 1s ease-in-out; }
@keyframes ico-scintille { 40% { scale: 1.28; rotate: 45deg; filter: drop-shadow(0 0 6px currentColor); } 100% { rotate: 90deg; } }

.ico-cloche svg { transform-origin: 50% 12%; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-cloche, .ico-cloche.joue) svg { animation: ico-sonne 1s ease-in-out; }
:is(:is(.carte, .orb-tag):is(:hover, :focus-within) .ico-cloche, .ico-cloche.joue) .battant { animation: ico-battant 1s ease-in-out; }
@keyframes ico-sonne { 10% { rotate: 14deg; } 25% { rotate: -12deg; } 40% { rotate: 9deg; } 55% { rotate: -6deg; } 70% { rotate: 3deg; } 85% { rotate: -1deg; } }
@keyframes ico-battant { 10% { translate: -1.5px 0; } 25% { translate: 1.5px 0; } 40% { translate: -1px 0; } 55% { translate: 1px 0; } }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ═════════════ FOND (motif sombre élégant, port du composant « elegant-dark-pattern ») ═════════════
   Fixé à l'écran derrière toutes les sections, aux couleurs du logo : lueur bleu nuit de la tuile en haut
   à gauche (#0A1B3A → #030812), cinq traînées du bleu de la flèche (#1C70FF) inclinées à 45°, grain, points. */
.fond-motif { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--fond); }
.fond-degrade {
  position: absolute; inset: 0;
  background: radial-gradient(100% 100% at 0% 0%, #0E2550 0%, #0A1B3A 35%, #030812 100%);
  -webkit-mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0 0 0) 0%, rgb(0 0 0 / 0.224) 88.2883%, rgb(0 0 0 / 0) 100%);
  mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0 0 0) 0%, rgb(0 0 0 / 0.224) 88.2883%, rgb(0 0 0 / 0) 100%);
}
.fond-degrade span {
  position: absolute; inset: 0; opacity: .24; transform: skewX(45deg);
  background: linear-gradient(#1C70FF 0%, rgb(10 88 245 / 0) 100%);
  -webkit-mask-image: var(--trainee); mask-image: var(--trainee);
}
.fond-degrade span:nth-child(1) { --trainee: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, #000 20%, rgb(0 0 0 / 0) 36%, #000 55%, rgb(0 0 0 / 0.13) 67%, #000 78%, rgb(0 0 0 / 0) 97%); }
.fond-degrade span:nth-child(2) { --trainee: linear-gradient(90deg, rgb(0 0 0 / 0) 11%, #000 25%, rgb(0 0 0 / 0.55) 41%, rgb(0 0 0 / 0.13) 67%, #000 78%, rgb(0 0 0 / 0) 97%); }
.fond-degrade span:nth-child(3) { --trainee: linear-gradient(90deg, rgb(0 0 0 / 0) 9%, #000 20%, rgb(0 0 0 / 0.55) 28%, rgb(0 0 0 / 0.424) 40%, #000 48%, rgb(0 0 0 / 0.267) 54%, rgb(0 0 0 / 0.13) 78%, #000 88%, rgb(0 0 0 / 0) 97%); }
.fond-degrade span:nth-child(4) { --trainee: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, #000 17%, rgb(0 0 0 / 0.55) 26%, #000 35%, rgb(0 0 0 / 0) 47%, rgb(0 0 0 / 0.13) 69%, #000 79%, rgb(0 0 0 / 0) 97%); }
.fond-degrade span:nth-child(5) { --trainee: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, #000 20%, rgb(0 0 0 / 0.55) 27%, #000 42%, rgb(0 0 0 / 0) 48%, rgb(0 0 0 / 0.13) 67%, #000 74%, #000 82%, rgb(0 0 0 / 0.47) 88%, rgb(0 0 0 / 0) 97%); }
/* Grain : bruit SVG maison (remplace l'image du CDN de 21st.dev, rien de chargé ailleurs). */
.fond-grain {
  position: absolute; inset: 0; opacity: .05; background-size: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fond-points { position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.5) 1px, transparent 0); background-size: 20px 20px; }
.fond-halo { position: absolute; inset: 0; background: radial-gradient(rgb(10 27 58 / 0.35), transparent 70%); }

/* ═════════════ EN-TÊTE ═════════════ */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, border-color .25s, backdrop-filter .25s; border-bottom: 1px solid transparent; }
.entete.est-defile { background: rgb(3 8 18 / 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--bord); }
.entete-in { display: flex; align-items: center; gap: 32px; height: 72px; }
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .02em; font-size: 17px; }
.marque img { border-radius: 9px; }

/* Logo (en-tête) : halo bleu qui s'illumine au survol. */
.logo-anime { flex: none; overflow: visible; border-radius: 8px; filter: drop-shadow(0 0 6px rgb(28 112 255 / 0.3)); transition: filter .3s, transform .3s; }
.marque-vivante:hover .logo-anime { filter: drop-shadow(0 0 12px rgb(28 112 255 / 0.65)); transform: translateY(-1px) scale(1.04); }
.marque-texte {
  display: inline-block;
  background: linear-gradient(100deg, var(--texte) 0%, var(--texte) 38%, #4F8BFF 45%, #fff 50%, #4F8BFF 55%, var(--texte) 62%, var(--texte) 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: marque-entree .8s .4s cubic-bezier(.2, .7, .2, 1) both, marque-reflet 6s 1.6s ease-in-out infinite;
}
@keyframes marque-entree { from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-6px); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@keyframes marque-reflet { 0%, 10% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
.nav { display: flex; gap: 28px; margin: 0 auto; }
.nav .nav-seul-mobile { display: none; }
.nav a { font-size: 14px; font-weight: 500; color: var(--texte-2); transition: color .2s; }
.nav a:hover { color: var(--texte); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.menu-mobile { display: none; width: 40px; height: 40px; border: 1px solid var(--bord-fort); border-radius: 10px; background: transparent; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-mobile span { width: 16px; height: 2px; border-radius: 2px; background: var(--texte); transition: transform .2s; }
.entete.menu-ouvert .menu-mobile span:first-child { transform: translateY(3.5px) rotate(45deg); }
.entete.menu-ouvert .menu-mobile span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ═════════════ 1. HERO ═════════════ */
.hero { padding: 152px 0 104px; overflow: hidden; }
/* Hero centré : le texte, les boutons et le signal au milieu, puis la démo en grand en dessous. */
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 64px; }
.hero-texte { width: 100%; max-width: 880px; margin: 0 auto; text-align: center; }
.hero-visuel { width: 100%; max-width: 1000px; margin: 0 auto; }
/* Preuve sous le bouton : petits visages de vrais membres (et d'Hugo) qui se chevauchent, une phrase vraie. */
.hero-preuve { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 4px 0 0; color: var(--muet); font-size: 13px; }
.hero-preuve-visages { display: flex; }
.hero-preuve-visages img { width: 24px; height: 24px; border: 2px solid #071226; border-radius: 50%; object-fit: cover; }
.hero-preuve-visages img + img { margin-left: -7px; }
/* Preuve « en direct » : le nombre d'inscrits de la semaine, sous le hero et sous le sous-titre des tarifs. La
   pastille verte dit « c'est vivant » ; elle ne concerne pas l'habillage bleu des offres. */
.preuve-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; color: var(--texte-2); font-size: 13px; }
.preuve-live[hidden] { display: none; }
.preuve-live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgb(74 222 128 / 0.18); }
/* Pastille de preuve sous le sous-titre des tarifs : trois visages qui se chevauchent puis le nombre d'inscrits de
   la semaine. Centrée par le `text-align: center` de .titre-section. La règle `.titre-section p:not(.surtitre)`
   impose 18px à tous les paragraphes de ce bloc : d'où la taille redonnée ici, avec une spécificité plus forte. */
.titre-section .preuve-pastille { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 5px 15px 5px 7px; border: 1px solid var(--bord); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: var(--texte-2); font-size: 13px; }
.preuve-pastille[hidden] { display: none; }
.preuve-visages { display: flex; flex: none; }
.preuve-visages img { width: 26px; height: 26px; border: 2px solid #071226; border-radius: 50%; object-fit: cover; }
.preuve-visages img + img { margin-left: -9px; }
.hero .surtitre { padding: 6px 12px; border: 1px solid #D4D9E1; border-radius: 999px; background: rgb(255 255 255 / 0.03); text-transform: none; letter-spacing: 0; color: var(--texte-2); font-weight: 500; }

/* Bandeau vivant (hero et petits titres de section) : un trait de lumière bleue fait le tour du contour, un reflet
   passe sur le texte ; dans le hero, trois barres de graphique bougent comme un marché en direct. */
@property --badge-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.badge-vivant {
  gap: 10px; padding: 7px 14px 7px 12px; border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(#07101F, #07101F) padding-box,
    conic-gradient(from var(--badge-angle), transparent 0%, transparent 60%, #0A58F5 75%, #9CC1FF 86%, transparent 97%) border-box,
    linear-gradient(var(--bord-fort), var(--bord-fort)) border-box;
  box-shadow: 0 0 28px -8px rgb(28 112 255 / 0.45);
  animation: badge-tour 4.5s linear infinite;
}
@keyframes badge-tour { to { --badge-angle: 360deg; } }
.badge-barres { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.badge-barres i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(#9CC1FF, #1C70FF); transform-origin: bottom; animation: badge-barre 1.4s ease-in-out infinite; }
.badge-barres i:nth-child(1) { animation-delay: -.25s; }
.badge-barres i:nth-child(2) { animation-delay: -.7s; }
.badge-barres i:nth-child(3) { animation-delay: -1.1s; }
@keyframes badge-barre { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.badge-texte {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #79A9FF 50%, #fff 60%, #fff 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: marque-reflet 4.5s 1s ease-in-out infinite;
}
/* Petits titres de section : capitales bleues, reflet blanc. */
.titre-section .badge-vivant { gap: 8px; padding: 6px 14px 6px 12px; font-size: 12px; letter-spacing: .08em; }
.titre-section .badge-texte { background-image: linear-gradient(100deg, #79A9FF 0%, #79A9FF 40%, #fff 50%, #79A9FF 60%, #79A9FF 100%); }
.hero h1 { color: #fff; font-size: clamp(40px, 5.6vw, 66px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
/* « Vinted » écrit avec le logo (public/images/vinted.svg, en dégradé bleu), posé sur la ligne de base du titre ; le point
   final prend le bleu de la fin du dégradé. */
/* « Vinted » en blanc partout (Hugo, 25/10), sans le dégradé bleu du logo. */
.mot-vinted { display: inline-block; width: auto; height: 1.12em; margin-left: 0.04em; vertical-align: -0.14em; filter: brightness(0) invert(1); }
.point-vinted { color: #fff; }
/* Mot « RENTABLES » : posé dans une case bleu nuit, un point à chaque coin. Fixe, sans animation. */
.cover { position: relative; display: inline-block; padding: 6px 12px; margin: 4px 0; border-radius: 4px; background: rgb(8 20 46 / 0.9); }
.cover-texte { position: relative; display: inline-block; text-transform: uppercase; color: #fff; }
.cover-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .3; pointer-events: none; }
.cover-point-hd { top: -2px; right: -2px; }
.cover-point-bd { bottom: -2px; right: -2px; }
.cover-point-hg { top: -2px; left: -2px; }
.cover-point-bg { bottom: -2px; left: -2px; }
.hero-sous { margin: 24px auto 0; font-size: 19px; color: #fff; max-width: 620px; text-wrap: pretty; }
/* Preuve en direct : deux blocs courts, chacun sur une ligne (ils passent l'un sous l'autre si la largeur manque). */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Barre d'action fixe (téléphone), montée depuis le bas une fois le haut de page passé. */
.barre-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgb(3 8 18 / 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--bord); color: var(--texte-2); font-size: 13px; transform: translateY(100%); transition: transform .25s ease; }
.barre-cta .bouton { flex: none; }
.barre-cta.est-visible { transform: none; }
.hero-actions.centre, .hero .hero-actions { justify-content: center; }
.hero .hero-actions { margin-top: 18px; }
/* Bouton principal du hero, dans un viseur (d'après l'exemple d'Hugo, aux couleurs de VINTYTRACK) : bouton bleu plein,
   quatre coins bleus autour qui respirent ; au survol, les coins se resserrent sur le bouton et la flèche avance. */
.cta-viseur { position: relative; display: inline-flex; padding: 18px 26px; }
.cta-coin { position: absolute; width: 18px; height: 18px; border: 0 solid #4F8BFF; filter: drop-shadow(0 0 6px rgb(79 139 255 / 0.55)); animation: cta-coin 2.8s ease-in-out infinite; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cta-coin-hg { top: 0; left: 0; --dx: 1; --dy: 1; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 3px; }
.cta-coin-hd { top: 0; right: 0; --dx: -1; --dy: 1; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 3px; }
.cta-coin-bg { bottom: 0; left: 0; --dx: 1; --dy: -1; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 3px; }
.cta-coin-bd { bottom: 0; right: 0; --dx: -1; --dy: -1; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 3px; }
@keyframes cta-coin { 50% { translate: calc(var(--dx) * -3px) calc(var(--dy) * -3px); } }
.cta-viseur:hover .cta-coin, .cta-viseur:focus-within .cta-coin { transform: translate(calc(var(--dx) * 10px), calc(var(--dy) * 9px)); }
.cta-principal { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; min-width: 340px; height: 58px; padding: 0 34px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 14px;
  background: linear-gradient(180deg, #3381FF 0%, #0A5FFE 55%, #0749D8 100%); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 16px 44px -12px rgb(10 95 254 / 0.85); transition: transform .25s, box-shadow .25s, filter .25s; }
.cta-principal:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), 0 20px 50px -12px rgb(10 95 254 / 1); }
.cta-principal:focus-visible { outline: 2px solid #79A9FF; outline-offset: 4px; }
.cta-principal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.cta-principal:hover svg { transform: translateX(4px); }
.hero-actions .bouton-grand { height: auto; padding: 1rem 2rem; border-radius: 360px; font-size: 16px; line-height: 1.2; }

/* Vidéo de démo (public/js/video-demo.js) : cadre arrondi aux couleurs du logo, lueur bleue derrière.
   Tant qu'il n'y a pas de vidéo (ou si elle ne se lit pas), le cadre montre un bouton de lecture qui pulse. */
.video-demo { position: relative; margin: 0; padding: 8px; border-radius: 20px; border: 1px solid var(--bord-fort); background: linear-gradient(180deg, rgb(15 26 47 / 0.85), rgb(6 13 26 / 0.85)); box-shadow: var(--ombre), 0 40px 120px -40px rgb(10 95 254 / 0.55); }
.video-ecran { position: relative; overflow: hidden; border-radius: 13px; aspect-ratio: 16 / 9; background: radial-gradient(70% 90% at 50% 40%, rgb(28 112 255 / 0.22) 0%, rgb(28 112 255 / 0) 70%), #050E20; }
.video-ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.video-demo[data-etat="prete"] video, .video-demo[data-poster="prete"] video { opacity: 1; }
.video-attente { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; transition: opacity .4s; }
.video-demo[data-etat="prete"] .video-attente, .video-demo[data-poster="prete"]:not([data-etat="erreur"]) .video-attente { opacity: 0; pointer-events: none; }
/* Téléphone : la vidéo attend un appui (image d'attente visible, bouton « Lire la démo » par-dessus). */
.video-demo[data-etat="attente"] .video-attente, .video-demo[data-etat="attente"][data-poster="prete"] .video-attente { opacity: 1; pointer-events: auto; cursor: pointer; }
.video-demo[data-etat="attente"] { cursor: pointer; }
.video-attente p { font-size: 14px; font-weight: 600; color: var(--texte-2); }
.video-lecture { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--degrade); box-shadow: 0 10px 30px -8px rgb(10 95 254 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.2); }
.video-lecture svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.video-lecture::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(79 139 255 / 0.6); animation: video-onde 2s ease-out infinite; }
@keyframes video-onde { from { transform: scale(1); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.video-demo[data-etat="erreur"] .video-lecture { background: var(--surface-2); box-shadow: none; }
.video-demo[data-etat="erreur"] .video-lecture::after { display: none; }

/* ═════════════ 2. CHIFFRES EN DIRECT ═════════════ */
.chiffres { padding: 0; }
.chiffres-in { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-2); }
.chiffres-in > div { padding: 28px 24px; text-align: center; }
.chiffres-in > div + div { border-left: 1px solid var(--bord); }
.chiffres-in b { display: block; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chiffres-in > div > span { color: var(--muet); font-size: 14px; }
.chiffres-pays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 14px 0 0; color: var(--muet); font-size: 14px; }
.chiffres-pays b { color: var(--texte); }
.chiffres-drapeaux { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chiffres-drapeaux small { font-size: 12px; }
/* Drapeau dessiné (drapeaux.js), comme dans l'application. */
.drapeau-svg { display: inline-block; width: 1.4em; height: 0.94em; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--texte) 28%, transparent); font-size: 18px; vertical-align: -0.12em; }
.drapeau-svg svg { display: block; width: 100%; height: 100%; }
/* Compteur odomètre (public/js/count-up.js) : une colonne 0→9→0 par chiffre, qui roule ; espaces et « + » fixes.
   Tout est dessiné par le CSS (content) : la page ne contient le chiffre qu'une fois, en texte caché. */
.odo { display: inline-flex; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; user-select: none; }
.odo-sep::before { content: attr(data-c); white-space: pre; }
.odo-chiffre { position: relative; display: inline-block; width: 1ch; height: 1em; overflow: hidden; overflow: clip; }
.odo-rouleau { position: absolute; top: 0; left: 0; right: 0; text-align: center; will-change: transform; }
.odo-rouleau::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0"; display: block; white-space: pre; line-height: 1; }

/* ═════════════ 3. PROBLÈME → SOLUTION ═════════════ */

/* ═════════════ 4. FONCTIONNALITÉS ═════════════ */
/* Orbite (public/js/orbite.js) : scène 1200 × 490 réduite à la largeur, arcs qui se tracent, éléments qui apparaissent
   l'un après l'autre puis flottent, chiffres qui comptent ; titre et outils apparaissent ensuite. Couleurs du logo. */
.fonctionnalites { overflow: hidden; padding-top: 24px; }
.orbite-cadre { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; height: 490px; }
.orbite-scene { position: absolute; left: 50%; top: 0; width: 1200px; height: 490px; transform-origin: top center; transform: translateX(-50%); }
.orbite-arcs { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.arc { fill: none; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease-out; }
.arc-ext { stroke: rgb(121 169 255 / 0.16); stroke-width: 2; }
.arc-int { stroke: rgb(121 169 255 / 0.22); stroke-width: 3; transition-delay: .1s; }
.orbite-visible .arc { stroke-dashoffset: 0; }
.orbite-el { position: absolute; translate: -50% -50%; opacity: 0; scale: .7; transition: opacity .5s, scale .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.5s + var(--i, 0) * .07s); }
.orbite-visible .orbite-el { opacity: 1; scale: 1; }
.orbite-el.hors-cadre { visibility: hidden; }
.orbite-flotte { animation: orbite-flotte var(--flotte-duree, 4s) var(--flotte-retard, 0s) ease-in-out infinite; transition: scale .2s; }
.orbite-flotte:hover { scale: 1.06; }
@keyframes orbite-flotte { 50% { translate: 0 -4px; } }
.orb-pastille, .orb-carte, .orb-avatar, .orb-check {
  background: linear-gradient(180deg, rgb(22 36 61 / 0.8), rgb(8 15 30 / 0.8));
  border: 1px solid rgb(121 169 255 / 0.16);
  box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.orb-pastille { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 6px; white-space: nowrap; border-radius: 999px; color: rgb(230 237 255 / 0.9); font-size: 12.5px; font-weight: 500; letter-spacing: .005em; }
.orb-pastille-statut { border-color: rgb(79 139 255 / 0.42); background: linear-gradient(180deg, rgb(28 112 255 / 0.24), rgb(10 39 99 / 0.4)); color: #E8F0FF; }
.orb-tuile { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: rgb(28 112 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(79 139 255 / 0.28); color: #8FB6FF; }
.orb-tuile svg, .orb-check svg, .orb-ico-grand { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orb-tuile svg { width: 13px; height: 13px; }
.orb-tuile-pleine { background: #1C70FF; color: #fff; box-shadow: 0 0 14px rgb(28 112 255 / 0.65); }
.orb-tuile-pleine svg { stroke-width: 3; }
.orb-carte { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; }
.orb-carte .orb-logo { width: 26px; height: 26px; fill: rgb(255 255 255 / 0.92); }
.orb-ico-grand { width: 22px; height: 22px; color: #8FB6FF; filter: drop-shadow(0 0 8px rgb(28 112 255 / 0.55)); }
.orb-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.orb-avatar .orb-logo { width: 28px; height: 28px; fill: rgb(255 255 255 / 0.92); }
/* Logo VINTYTRACK de l'orbite : tuile en verre bleu nuit, flèche du logo en dégradé, lueur qui respire. */
.orb-carte-marque { width: 62px; height: 62px; border-radius: 18px; border-color: rgb(79 139 255 / 0.5);
  background: linear-gradient(180deg, #0E2550 0%, #050E20 100%);
  box-shadow: 0 0 0 5px rgb(28 112 255 / 0.07), 0 0 34px -8px rgb(28 112 255 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.12);
  animation: orb-respire 3.2s ease-in-out infinite; }
.orb-fleche { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgb(28 112 255 / 0.55)); }
@keyframes orb-respire { 50% { box-shadow: 0 0 0 7px rgb(28 112 255 / 0.1), 0 0 44px -6px rgb(28 112 255 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.12); } }
.orb-check { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border-color: rgb(79 139 255 / 0.42); color: #8FB6FF; }
.orb-check svg { width: 18px; height: 18px; stroke-width: 2.6; }
.orbite-stats { position: absolute; left: 50%; top: 393px; translate: -50% 0; width: max-content; display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 28px; }
.orbite-stats > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.orbite-stats b { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.orbite-stats span { margin-top: 15px; font-size: var(--stat-police, 14px); line-height: 1.2; color: var(--muet); white-space: nowrap; }
.orbite-stats > div, .orbite-bas > * { opacity: 0; translate: 0 14px; filter: blur(4px); transition: opacity .6s, translate .6s cubic-bezier(.22, 1, .36, 1), filter .6s; }
.orbite-stats > div { transition-delay: calc(.9s + var(--i, 0) * .12s); }
.orbite-bas { text-align: center; }
.orbite-bas .badge-vivant { margin: 8px auto 18px; transition-delay: 1.2s; }
.orbite-titre { max-width: 640px; margin: 0 auto; font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; line-height: 1.18; transition-delay: 1.3s; }
.orbite-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 820px; margin: 35px auto 0; opacity: 1; translate: none; filter: none; }
.orbite-visible :is(.orbite-stats > div, .orbite-bas > *) { opacity: 1; translate: none; filter: none; }
.orb-tag { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.1); background: #0A1222; color: rgb(238 243 255 / 0.85); font-size: 14px; font-weight: 500;
  opacity: 0; translate: 0 14px; filter: blur(4px); transition: opacity .5s, translate .5s cubic-bezier(.22, 1, .36, 1), filter .5s, border-color .2s, box-shadow .2s, background .2s; transition-delay: calc(1.6s + var(--i, 0) * .08s), calc(1.6s + var(--i, 0) * .08s), calc(1.6s + var(--i, 0) * .08s), 0s, 0s, 0s; }
.orbite-visible .orb-tag { opacity: 1; translate: none; filter: none; }
.orbite-visible .orb-tag:hover { translate: 0 -2px; transition-delay: 0s; border-color: rgb(79 139 255 / 0.4); background: #0F1A2F; box-shadow: 0 6px 16px -6px rgb(10 95 254 / 0.45); }
.orb-tag-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgb(28 112 255 / 0.15); color: #79A9FF; transition: background .2s, color .2s; }
.orb-tag:hover .orb-tag-ico { background: #1C70FF; color: #fff; }
.orb-tag-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═════════════ 5. PLATEFORME (image + texte) ═════════════ */
.plateforme-in { display: flex; align-items: center; gap: 80px; }
/* La vidéo dans un MacBook Pro : le dessin (SVG 650 × 400) et l'écran placé sur sa dalle (74,52 ; 21,32 ; 501,22 × 323,85). */
.video-demo.macbook { aspect-ratio: 650 / 400; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.video-demo.macbook::before { content: ''; position: absolute; inset: 8% 10% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(10 95 254 / 0.45), transparent); filter: blur(30px); }
.macbook > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.macbook-corps { filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55)); }
.macbook-encoche { pointer-events: none; }
.video-ecran.macbook-ecran { position: absolute; left: 11.4646%; top: 5.33%; width: 77.1108%; height: 80.9625%; aspect-ratio: auto; border-radius: 0.77% / 1.2%; }
.plateforme-visuel { flex: 1.15; min-width: 0; }
.plateforme-texte { flex: 1; max-width: 520px; }
.plateforme-texte .badge-vivant { margin-bottom: 20px; }
.plateforme-texte h2 { font-size: clamp(28px, 3.4vw, 42px); text-wrap: balance; }
.plateforme-texte p:not(.surtitre) { max-width: 440px; }

/* ═════════════ 6. AVIS : défilement (composant « Marquee ») ═════════════ */
.defile-zone { display: grid; gap: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.defile { --ecart: 16px; display: flex; gap: var(--ecart); overflow: hidden; padding: 4px 0; }
.defile-piste { display: flex; flex-shrink: 0; gap: var(--ecart); animation: defile var(--duree, 40s) linear infinite; }
.defile-inverse .defile-piste { animation-direction: reverse; }
.defile:hover .defile-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-100% - var(--ecart))); } }

/* Avis utilisateurs : cartes en verre, titre de l'avis,
   texte sur 4 lignes au plus, auteur avec ses initiales dans une pastille bleue. */
.avis-carte { margin: 0; width: 330px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgb(22 36 61 / 0.75), rgb(8 15 30 / 0.75)); border: 1px solid rgb(121 169 255 / 0.14);
  box-shadow: 0 12px 32px -18px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.06); transition: border-color .2s; }
.avis-carte:hover { border-color: rgb(79 139 255 / 0.4); }
.avis-titre { font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; }
.avis-texte { margin: 0; flex: 1; font-size: 14px; line-height: 1.55; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.avis-auteur { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgb(121 169 255 / 0.1); }
.avis-auteur b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.avis-auteur small { display: block; font-size: 12px; color: var(--muet); }
.avis-photo { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(121 169 255 / 0.25); }
.avis-initiales { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, #2A74FF, #0A3FA8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 0 3px rgb(28 112 255 / 0.12); }

/* ═════════════ 7. TARIFS ═════════════ */
.bascule { display: flex; width: max-content; margin: 0 auto 40px; padding: 4px; border: 1px solid var(--bord-fort); border-radius: 999px; background: var(--fond-2); }
.bascule button { border: 0; background: transparent; color: var(--texte-2); font: 600 14px/1 Inter, system-ui, sans-serif; padding: 10px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; }
.bascule button[aria-checked="true"] { background: var(--degrade); color: #fff; }
.bascule button span { font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgb(28 112 255 / 0.2); color: #9CC1FF; }
.bascule button[aria-checked="true"] span { background: rgb(255 255 255 / 0.2); color: #fff; }
.grille-tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tarif { display: flex; flex-direction: column; position: relative; }
.tarif.en-avant { border-color: rgb(79 139 255 / 0.6); background: linear-gradient(180deg, rgb(10 95 254 / 0.14) 0%, var(--fond-2) 60%); box-shadow: 0 30px 80px -40px rgb(10 95 254 / 0.6); }
.tarif-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--degrade); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tarif h3 { margin: 0; font-size: 20px; }
.tarif h3 small { display: block; font-size: 12px; font-weight: 600; color: var(--muet); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.tarif-info { margin-top: 6px; }
.tarif-prix { display: flex; align-items: baseline; gap: 6px; margin: 24px 0 4px; }
.tarif-prix b { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tarif-prix span { color: var(--muet); font-size: 15px; }
.tarif-facturation { font-size: 13px; color: var(--muet); min-height: 20px; }
/* Venu par le lien d'un affilié : le vrai prix barré, à côté du prix du premier paiement (−15 %). */
.tarif-barre { align-self: center; color: var(--muet); font-size: 20px; font-weight: 600; }
.tarif-remise { margin: 0 0 6px; font-size: 13px; color: var(--muet); }
.tarif-remise strong { color: var(--accent); }
.hero-affilie { display: inline-block; margin: 0 0 14px; padding: 8px 14px; border: 1px solid rgb(79 139 255 / 0.35); border-radius: 999px; background: rgb(79 139 255 / 0.12); font-size: 14px; }
.hero-affilie a { color: var(--accent); }
.tarif .bouton { margin: 24px 0; width: 100%; }
.tarif ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--bord); display: grid; gap: 11px; font-size: 14px; color: var(--texte-2); }
.tarif li { display: flex; gap: 10px; align-items: flex-start; }
.tarif li::before { content: ''; flex: none; margin-top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgb(79 139 255 / 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F8BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat; }
/* Lignes d'offre en deux colonnes : le nom à gauche, la valeur à droite, pour qu'on compare les trois cartes à la
   verticale. Elles remplacent les puces à coche — d'où le `content: none` qui annule `.tarif li::before`. */
.tarif-lignes li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tarif-lignes li::before { content: none; }
.tarif-lignes li > span { min-width: 0; }
.tarif-lignes li > b { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.tarif-lignes li > b svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
/* Verrouillée : la ligne s'efface et nomme l'offre qui la débloque. Elle doit se lire sans attirer l'œil avant le reste. */
.tarif-lignes li.est-verrou > span, .tarif-lignes li.est-verrou > b { color: var(--muet); font-weight: 500; }
.tarif-lignes li.est-verrou > b svg { stroke: var(--muet); stroke-width: 2.2; }
/* Nouveautés de l'offre : sous ce qui est inclus, pastille dans le bleu de la marque. */
.tarif-nouveau { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bord); }
.tarif-nouveau p { display: inline-flex; margin: 0 0 13px; padding: 4px 11px; border-radius: 999px; background: rgb(79 139 255 / 0.15); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tarif-nouveau ul { padding: 0; border-top: 0; }

/* ═════════════ 8. FAQ ═════════════ */
.faq-liste { display: grid; gap: 12px; }
.faq-liste details { border: 1px solid var(--bord); border-radius: 14px; background: var(--fond-2); transition: border-color .2s; }
.faq-liste details[open] { border-color: var(--bord-fort); }
.faq-liste summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; position: relative; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--muet); transition: transform .2s; }
.faq-liste details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-liste details p { padding: 0 22px 20px; color: var(--texte-2); }
.faq-liste details p a { color: #79A9FF; text-decoration: underline; text-underline-offset: 3px; }
.faq-liste details p a:hover { color: #fff; }

/* ═════════════ 9. APPEL FINAL ═════════════ */
.cta-carte {
  position: relative; overflow: hidden; text-align: center; padding: 72px 32px; border-radius: 24px;
  border: 1px solid rgb(79 139 255 / 0.35);
  background: radial-gradient(60% 90% at 50% 0%, rgb(10 95 254 / 0.35) 0%, rgb(10 95 254 / 0) 70%), var(--fond-2);
}
.cta-carte h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; text-wrap: balance; }
.cta-carte p { margin: 16px auto 0; max-width: 560px; font-size: 18px; color: var(--texte-2); }
.cta-carte .hero-actions { margin-top: 18px; }
.cta-carte p.cta-rassure { margin-top: 4px; color: var(--muet); font-size: 13px; }

/* ═════════════ 10. PIED DE PAGE ═════════════ */
.pied { border-top: 1px solid var(--bord); padding: 64px 0 32px; background: rgb(3 8 18 / 0.6); }
.pied-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.pied-marque p { margin-top: 14px; color: var(--muet); font-size: 14px; max-width: 320px; }
.pied-col { display: flex; flex-direction: column; gap: 10px; }
.pied-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte); margin-bottom: 4px; }
.pied-col a { font-size: 14px; color: var(--muet); transition: color .2s; }
.pied-col a:hover { color: var(--texte); }
.pied-lien { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muet); text-align: left; cursor: pointer; transition: color .2s; }
.pied-lien:hover:not(:disabled) { color: var(--texte); }
.pied-lien:disabled { cursor: default; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--muet); }

/* ═════════════ PAGES LÉGALES (legal/*.md, server/modules/legal.js) ═════════════ */
.legal { padding-top: 120px; padding-bottom: 96px; }
.legal-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.legal-onglets a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bord-fort); background: rgb(255 255 255 / 0.02); color: var(--texte-2); font-size: 13px; font-weight: 500; transition: border-color .2s, color .2s; }
.legal-onglets a:hover { border-color: var(--accent); color: var(--texte); }
.legal-onglets a[aria-current="page"] { background: var(--degrade); border-color: transparent; color: #fff; }
.legal-texte { padding: 44px; border-radius: 20px; border: 1px solid var(--bord); background: linear-gradient(180deg, rgb(15 26 47 / 0.78), rgb(6 13 26 / 0.78)); box-shadow: var(--ombre); }
.legal-texte h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; text-wrap: balance; }
.legal-texte h2 { font-size: 19px; font-weight: 700; margin: 38px 0 12px; scroll-margin-top: 96px; }
.legal-texte h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.legal-texte p, .legal-texte li { color: var(--texte-2); font-size: 15px; line-height: 1.75; }
.legal-texte p + p, .legal-texte ul + p, .legal-texte .legal-tableau + p { margin-top: 12px; }
.legal-texte ul { display: grid; gap: 6px; margin: 12px 0; padding-left: 22px; }
.legal-texte strong { color: var(--texte); }
.legal-texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-tableau { overflow-x: auto; margin: 16px 0; border: 1px solid var(--bord); border-radius: 12px; }
.legal-tableau table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-tableau th { text-align: left; padding: 12px 14px; font-weight: 600; color: var(--texte); background: rgb(255 255 255 / 0.03); }
.legal-tableau td { padding: 12px 14px; border-top: 1px solid var(--bord); color: var(--texte-2); }
.legal-sommaire { margin: 22px 0 6px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--bord); background: rgb(255 255 255 / 0.02); }
.legal-sommaire summary { cursor: pointer; font-weight: 600; color: var(--texte); }
.legal-sommaire ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; }
.legal-sommaire a { text-decoration: none; }
/* Champ encore à compléter : surligné pour qu'il ne passe pas inaperçu. */
.a-completer { padding: 1px 5px; border-radius: 5px; background: rgb(251 146 60 / 0.14); color: #FDBA74; font-weight: 600; }
@media (max-width: 760px) {
  .legal { padding-top: 96px; }
  .legal-texte { padding: 22px; }
}

/* Pas encore prêt : trois guides (cartes-liens) et les outils gratuits. */
.carte-lien { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.carte-lien:hover { transform: translateY(-2px); }
.carte-lien h3 { margin-top: 10px; }
.ressource-genre { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ressource-suite { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--texte); }
.ressources-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 28px; font-size: 14px; color: var(--muet); }
.ressources-outils a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bord-fort); color: var(--texte-2); transition: border-color .2s, color .2s; }
.ressources-outils a:hover { border-color: var(--accent); color: var(--texte); }

/* ═════════════ TÉLÉPHONE : carrousels et défilement des outils ═════════════ */
.carrousel-points, .orbite-tags-defile { display: none; }
@media (max-width: 760px) {
  /* Cartes du problème et offres : on glisse d'une carte à l'autre, celle du milieu est mise en avant. */
  [data-carrousel][data-carrousel] {
    display: flex !important; position: relative; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 14px 16px 6px; max-width: none;
  }
  [data-carrousel]::-webkit-scrollbar { display: none; }
  [data-carrousel] > * { flex: 0 0 84%; scroll-snap-align: center; scale: .94; filter: brightness(.72); transition: scale .35s ease, filter .35s ease; }
  [data-carrousel] > .est-centre { scale: 1; filter: none; }
  .carrousel-points { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .carrousel-points i { width: 6px; height: 6px; border-radius: 999px; background: var(--bord-fort); transition: width .3s ease, background .3s ease; }
  .carrousel-points i.actif { width: 20px; background: var(--accent); }
  /* Outils sous l'orbite : deux rangées qui défilent en sens inverse. */
  .orbite-tags { display: none; }
  .orbite-tags-defile {
    display: grid; gap: 10px; margin: 28px -16px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .orbite-tags-defile .defile { --ecart: 10px; }
  .orbite-tags-defile .defile-piste { animation-duration: 26s; }
  .orbite-tags-defile .orb-tag { flex: none; }
}

/* ── Apparition au défilement ────────────────────────────── */
.apparait { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .marque-texte, .badge-texte, .badge-vivant, .badge-barres i { animation: none; }
  .bouton-brillant, .bouton-brillant::before, .bouton-brillant::after, .bouton-brillant span::before { animation: none; }
  .booster-cadre::before, [data-chiffre]:not([data-valeur]), .cta-coin { animation: none; }
  .ico-anime svg, .ico-anime svg * { animation: none !important; }
  .orbite-flotte, .orb-carte-marque { animation: none; }
  .defile-piste { animation: none; }
  .ov-onglets, .ov-flux, .analyse .ov-balayage, .plateformes-piste, .avis-colonne-piste, .offre-voile, .offre-fenetre { animation: none; }
  .offre-cta.is-attente::after { animation-duration: 2.4s; }
  .offre-squelette i { animation: none; }
  .rapport-criteres i::after, .rapport-barres i, .fiche-mois i, .fiche-cats i::after, .fiche-semaines i { transition: none; }
  .ov-score, .ov-spark-ligne, .ov-spark-aire, .ov-pile img, .ov-produit, .ov-lens-res > * { transition: none; }
  .defile { overflow-x: auto; }
  .arc { stroke-dashoffset: 0; transition: none; }
  .orbite-el, .orbite-stats > div, .orbite-bas > *, .orb-tag { opacity: 1; scale: 1; translate: none; filter: none; transition: none; }
  .orbite-el { translate: -50% -50%; }
  html { scroll-behavior: auto; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .pouls, .video-lecture::after { animation: none; }
}

/* ── Plateformes (sous la démo) : phrase courte, puis l'icône et le nom de chaque appli qui défilent lentement (quatre
   fois la même série, décalée d'une série par tour), fondus sur les bords, en pause au survol. ── */
.plateformes { margin-top: 30px; }
.plateformes-titre { margin: 0 0 12px; color: var(--muet); font-size: 13px; text-align: center; opacity: .85; }
.plateformes-defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.plateformes-piste { display: flex; align-items: center; width: max-content; animation: plateformes 36s linear infinite; }
.plateformes-defile:hover .plateformes-piste { animation-play-state: paused; }
@keyframes plateformes { from { transform: translateX(-25%); } to { transform: none; } }
/* Discret : icônes et noms à demi transparents, couleurs adoucies ; chaque plateforme s'éclaire au survol. */
.plateforme { display: inline-flex; align-items: center; gap: 10px; height: 36px; margin-right: 52px; color: #fff; opacity: .55; transition: opacity .3s; }
.plateforme:hover { opacity: 1; }
.plateforme img { display: block; width: 24px; height: 24px; border-radius: 7px; filter: saturate(.55); transition: filter .3s; }
.plateforme:hover img { filter: none; }
.plateforme b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

/* ── Fonctionnalités : trois outils (port du composant « Feature sections », sans React) ──
   Une carte par outil : un visuel dessiné en HTML/CSS (sans chiffre), le nom, une phrase. La carte monte d'un cran au survol. */
.outils { padding-top: 40px; }
.outils-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: 40px; }
.outil { transition: transform .3s; }
.outil:hover { transform: translateY(-3px); }
.outil h3 { margin-top: 20px; font-size: 19px; font-weight: 700; color: #fff; }
.outil p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--texte-2); }
.outil-visuel { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--bord-fort); border-radius: 16px;
  background: radial-gradient(90% 80% at 50% 0%, rgb(28 112 255 / 0.24), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--fond-2));
  box-shadow: var(--ombre); transition: border-color .3s, box-shadow .3s; }
.outil-visuel::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.07) 1px, transparent 0); background-size: 16px 16px; }
.outil:hover .outil-visuel { border-color: rgb(79 139 255 / 0.55); box-shadow: var(--ombre), 0 24px 60px -30px rgb(10 95 254 / 0.7); }
.ov-i { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Fenêtre d'application (les trois visuels), reprise du dashboard : barre latérale avec les icônes du menu, titre de
   page, contenu aux couleurs du thème sombre (cyan = succès, bleu = podium). Elle sort par le bas, comme une capture
   recadrée. Animée par public/js/outils-visuels.js. */
.ov-app { position: absolute; left: 6%; right: 6%; top: 9%; bottom: -16%; display: flex; overflow: hidden; border: 1px solid var(--bord-fort); border-radius: 12px; background: #03070E; box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.85); }
.ov-app-cote { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 30px; padding: 9px 0; border-right: 1px solid var(--bord); background: #050B16; }
.ov-app-cote i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--muet); }
.ov-app-cote i .ov-i { width: 11px; height: 11px; stroke-width: 2; }
.ov-app-cote i.actif { background: rgb(10 95 254 / 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgb(79 139 255 / 0.45); }
.ov-app-page { flex: 1; min-width: 0; padding: 10px 11px; }
.ov-app-titre { display: flex; align-items: center; gap: 6px; height: 18px; margin-bottom: 9px; }
.ov-app-titre b { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.ov-app-titre > .ov-i { width: 13px; height: 13px; color: #79A9FF; }
.ov-puce { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muet); font-size: 8.5px; font-weight: 600; white-space: nowrap; }
.ov-puce-bleue { background: rgb(79 139 255 / 0.16); color: #79A9FF; }
.ov-floue { display: inline-block; filter: blur(3.2px); color: #fff; font-weight: 700; user-select: none; -webkit-user-select: none; }
.ov-cadenas { flex: none; width: 10px; height: 10px; margin-left: 3px; fill: none; stroke: #79A9FF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tracker : les onglets chiffrés d'une recherche (ils défilent), le fil de ses annonces (vraies photos qui passent en
   continu, avec prix et taille), puis ses niches ; celle qu'on examine s'allume et son score se trace autour du rond. */
.ov-onglets-cadre { margin: 0 -11px 8px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.ov-onglets { display: flex; gap: 5px; width: max-content; animation: ov-onglets 16s ease-in-out infinite alternate; }
@keyframes ov-onglets { 0%, 18% { transform: none; } 82%, 100% { transform: translateX(calc(-100% + 230px)); } }
.ov-onglet { display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 50px; height: 40px; padding: 5px 8px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); }
.ov-onglet b { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-onglet .ov-i { width: 13px; height: 13px; margin: 1px 0; color: var(--muet); }
.ov-onglet small { color: var(--muet); font-size: 8.5px; white-space: nowrap; }
.ov-onglet.actif { border-color: rgb(79 139 255 / 0.65); background: rgb(10 95 254 / 0.13); }
.ov-onglet.actif small { color: #fff; }
.ov-onglet.ov-cyan b { color: #22D3EE; }
.ov-flux-cadre { margin: 0 -11px 8px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.ov-flux { display: flex; gap: 6px; width: max-content; animation: ov-flux 26s linear infinite; }
.ov-flux-cadre:hover .ov-flux { animation-play-state: paused; }
@keyframes ov-flux { to { transform: translateX(calc(-50% - 3px)); } }
.ov-annonce { position: relative; flex: none; width: 58px; height: 72px; overflow: hidden; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface-2); }
.ov-annonce img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ov-annonce::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(3 7 14 / 0.85)); }
.ov-badge { position: absolute; z-index: 1; top: 4px; left: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 4px; background: var(--primaire); color: #fff; font-size: 7px; font-style: normal; font-weight: 700; white-space: nowrap; }
.ov-badge .ov-i { width: 7px; height: 7px; stroke-width: 3; }
.ov-badge-cyan { background: #0891B2; }
.ov-badge-orange { background: #EA7A2A; }
.ov-annonce-prix { position: absolute; z-index: 1; left: 5px; right: 4px; bottom: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 3px; color: #fff; font-size: 9.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-annonce-prix small { color: rgb(255 255 255 / 0.7); font-size: 7.5px; font-weight: 600; }
.ov-niches { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ov-niches li { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 8px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); transition: border-color .45s, background .45s, box-shadow .45s; }
.ov-niches li.focus { border-color: rgb(79 139 255 / 0.85); background: rgb(10 95 254 / 0.1); box-shadow: 0 0 20px -6px rgb(10 95 254 / 0.8); }
@property --ov-p { syntax: '<number>'; inherits: true; initial-value: 0; }
.ov-score { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgb(34 211 238 / 0.12); color: #22D3EE; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; transition: --ov-p 1s cubic-bezier(.2, .8, .2, 1); }
.ov-score::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(#22D3EE calc(var(--ov-p) * 1%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); }
.ov-niches li.focus .ov-score { --ov-p: var(--s); }
.ov-niche { display: grid; gap: 3px; min-width: 0; }
.ov-niche-nom { display: flex; align-items: center; font-size: 11px; }
.ov-niche-nom .ov-floue { color: #79A9FF; }
.ov-niche-nom em { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: #16243D; color: var(--muet); font-size: 8px; font-style: normal; font-weight: 600; }
.ov-niche small { overflow: hidden; color: var(--muet); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.ov-niche small b { color: #fff; }
.ov-niche small .ov-i { width: 8px; height: 8px; vertical-align: -1px; }

/* Tendance : le podium des catégories. Les photos de chaque catégorie changent de place, les courbes se tracent, les
   compteurs montent ; le curseur se pose sur une ligne et ouvre son détail réel (prix vendu, délai, annonces postées). */
.ov-periodes { display: flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); }
.ov-periodes span { padding: 2px 6px; border-radius: 6px; color: var(--muet); font-size: 8.5px; white-space: nowrap; }
.ov-periodes .actif { background: var(--primaire); color: #fff; font-weight: 600; }
.ov-tend-entete, .ov-tend li { display: grid; grid-template-columns: 20px 42px minmax(0, 1fr) 28px 44px; align-items: center; gap: 7px; }
.ov-tend-entete { padding: 0 9px 5px; color: var(--muet); font-size: 7.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ov-tend-entete span:first-child { grid-column: 2 / 4; }
.ov-tend-entete span:not(:first-child) { text-align: right; }
.ov-tend { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ov-tend li { height: 48px; padding: 0 9px 0 8px; transition: background .4s; }
.ov-tend li + li { border-top: 1px solid rgb(23 36 58 / 0.8); }
.ov-tend li.survol { background: var(--surface-2); }
.ov-tend-rang { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--primaire); color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 3px 10px rgb(10 95 254 / 0.35); }
.ov-pile { position: relative; height: 22px; }
.ov-pile img { position: absolute; top: 0; left: calc(var(--k) * 10px); z-index: calc(3 - var(--k)); width: 22px; height: 22px; border: 1.5px solid var(--surface); border-radius: 6px; object-fit: cover; transition: left .6s cubic-bezier(.2, .8, .2, 1), transform .6s; }
.ov-tend li.survol .ov-pile img { border-color: var(--surface-2); }
.ov-tend-cat { display: grid; gap: 1px; min-width: 0; }
.ov-tend-cat strong { overflow: hidden; color: #fff; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.ov-tend-cat small { overflow: hidden; color: var(--muet); font-size: 7.5px; letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ov-tend-ventes { color: #fff; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.ov-spark { width: 44px; height: 18px; overflow: visible; }
.ov-spark-aire { fill: rgb(79 139 255 / 0.16); opacity: 0; transition: opacity .8s .9s; }
.ov-spark-ligne { fill: none; stroke: #4F8BFF; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) .3s; }
.vu .ov-spark-aire { opacity: 1; }
.vu .ov-spark-ligne { stroke-dashoffset: 0; }
.ov-tend li.survol .ov-spark-ligne { stroke: #79A9FF; }
.outil .ov-releve { margin: 8px 2px 0; color: var(--muet); font-size: 8.5px; }
.ov-bulle { position: absolute; z-index: 2; left: 0; top: 0; display: grid; gap: 3px; width: 148px; padding: 8px 10px; border: 1px solid var(--bord-fort); border-radius: 10px; background: rgb(10 18 34 / 0.96); box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.8); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.ov-bulle.visible { opacity: 1; transform: none; }
.ov-bulle strong { color: #fff; font-size: 10.5px; }
.ov-bulle span { display: flex; justify-content: space-between; gap: 6px; color: var(--muet); font-size: 8.5px; }
.ov-bulle b { color: #fff; font-variant-numeric: tabular-nums; }
.ov-curseur { position: absolute; z-index: 3; left: 0; top: 0; width: 15px; height: 15px; fill: #fff; stroke: #0B1528; stroke-width: 1.4; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6)); transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .4s; pointer-events: none; }
.vu .ov-curseur { opacity: 1; }
.ov-curseur.clic { animation: ov-clic .32s ease-out; }
@keyframes ov-clic { 50% { scale: .82; } }

/* Lens IA : la photo est déposée, balayée dans un viseur (léger zoom), puis l'article identifié et le prix conseillé
   arrivent. */
.ov-lens { display: flex; gap: 10px; }
.ov-depot { position: relative; display: grid; place-items: center; flex: none; width: 42%; aspect-ratio: 4 / 5; overflow: hidden; border: 1.5px dashed var(--bord-fort); border-radius: 10px; background: var(--surface); transition: border-color .4s; }
.ov-depot-vide { display: grid; justify-items: center; gap: 5px; color: var(--muet); font-size: 8.5px; text-align: center; transition: opacity .3s; }
.ov-depot-vide .ov-i { width: 18px; height: 18px; color: #79A9FF; }
.ov-produit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-14%) scale(1.08) rotate(-4deg); transition: opacity .45s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.depose .ov-produit { opacity: 1; transform: none; }
.analyse .ov-produit { transform: scale(1.06); transition: opacity .45s, transform 2s ease-out; }
.depose .ov-depot { border-style: solid; border-color: var(--bord); }
.depose .ov-depot-vide { opacity: 0; }
.ov-coin { position: absolute; z-index: 1; width: 11px; height: 11px; border: 2px solid #fff; opacity: 0; filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.6)); transition: opacity .3s, border-color .4s; }
.ov-coin-hg { top: 5px; left: 5px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.ov-coin-hd { top: 5px; right: 5px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.ov-coin-bg { bottom: 5px; left: 5px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.ov-coin-bd { bottom: 5px; right: 5px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.analyse .ov-coin, .trouve .ov-coin { opacity: 1; }
.trouve .ov-coin { border-color: #22D3EE; }
.ov-balayage { position: absolute; z-index: 1; left: 6%; right: 6%; top: 10%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #79A9FF, transparent); box-shadow: 0 0 12px 2px rgb(79 139 255 / 0.7); opacity: 0; transition: opacity .3s; }
.analyse .ov-balayage { opacity: 1; animation: ov-balaye .9s ease-in-out infinite alternate; }
@keyframes ov-balaye { to { top: 88%; } }
.ov-lens-res { display: grid; flex: 1; align-content: start; gap: 6px; min-width: 0; }
.ov-ident { display: grid; gap: 3px; margin: 0; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 9px; background: var(--surface); }
.ov-ident div { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 8.5px; }
.ov-ident dt { color: var(--muet); }
.ov-ident dd { display: flex; align-items: center; margin: 0; overflow: hidden; color: #fff; font-weight: 600; white-space: nowrap; }
.ov-lens-prix { display: grid; gap: 1px; padding: 6px 8px; border: 1px solid rgb(79 139 255 / 0.5); border-radius: 9px; background: rgb(10 95 254 / 0.13); }
.ov-lens-prix small { color: var(--texte-2); font-size: 8.5px; }
.ov-lens-prix strong { width: fit-content; font-size: 17px; line-height: 1.15; }
.ov-tranches { display: grid; gap: 4px; }
.ov-tranches span { display: flex; justify-content: space-between; gap: 4px; padding: 4px 7px; border: 1px solid var(--bord); border-radius: 7px; background: var(--surface); color: var(--texte-2); font-size: 8.5px; white-space: nowrap; }
.ov-tranches span.actif { border-color: rgb(79 139 255 / 0.5); color: #fff; }
.ov-tranches b { font-size: 9px; }
.ov-lens-res > * { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.trouve .ov-lens-res > * { opacity: 1; transform: none; }
.trouve .ov-lens-res > :nth-child(2) { transition-delay: .35s; }
.trouve .ov-lens-res > :nth-child(3) { transition-delay: .7s; }

/* ── Les données : titre, puis les compteurs en direct, plus petits, à la largeur du titre ── */
.donnees { padding-top: 40px; }
.donnees .titre-section { margin-bottom: 30px; }
.donnees .chiffres-in { max-width: 840px; margin: 0 auto; }
.donnees .chiffres-in > div { padding: 18px 10px; }
.donnees .chiffres-in b { font-size: clamp(20px, 2.2vw, 26px); }
.donnees .chiffres-in > div > span { font-size: 12.5px; white-space: nowrap; }

/* Exemple réel sous les compteurs : une niche analysée, en deux questions. 1) Vaut-elle le coup ? (score, et chaque
   critère dit en clair) ; 2) À quel prix acheter et revendre ? (prix en ligne, seuil de bonne affaire, revente
   réaliste). Puis le résultat, en trois points. */
.rapport-intro { margin: 56px 0 14px; color: var(--muet); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.rapport { overflow: hidden; border: 1px solid var(--bord-fort); border-radius: 24px; background: linear-gradient(180deg, var(--surface), var(--fond-2)); box-shadow: var(--ombre); }
.rapport-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding: 24px 32px 18px; border-bottom: 1px solid var(--bord); }
.rapport-sur { margin: 0; color: #79A9FF; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rapport-tete h3 { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #fff; font-size: 22px; font-weight: 700; }
.rapport-tete h3 .ov-floue { color: #fff; }
.rapport-tete h3 .ov-cadenas { width: 13px; height: 13px; }
.rapport-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.rapport-puces span { padding: 4px 10px; border: 1px solid var(--bord-fort); border-radius: 999px; color: var(--texte-2); font-size: 12px; font-weight: 600; }
.rapport-puces span:first-child { border-color: rgb(79 139 255 / 0.5); background: rgb(10 95 254 / 0.14); color: #fff; }
.rapport-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rapport-bloc { min-width: 0; padding: 26px 32px 28px; }
.rapport-bloc + .rapport-bloc { border-left: 1px solid var(--bord); }
.rapport-question { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #fff; font-size: 17px; font-weight: 700; }
.rapport-question i, .concurrents-num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--primaire); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; box-shadow: 0 4px 12px -2px rgb(10 95 254 / 0.6); }
.rapport-score { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rapport-score p { margin: 0; }
.rapport-score b { color: #fff; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rapport-score small { margin-left: 2px; color: var(--muet); font-size: 15px; font-weight: 600; }
.rapport-score-note { max-width: 240px; color: var(--texte-2); font-size: 14px; line-height: 1.45; }
.rapport-criteres { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rapport-critere { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; }
.rapport-critere > div { display: grid; gap: 1px; min-width: 0; }
.rapport-critere b { color: #fff; font-size: 14px; }
.rapport-critere span { color: var(--muet); font-size: 12.5px; }
.rapport-verdict { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.rapport-verdict-bon { background: rgb(34 211 238 / 0.12); color: #22D3EE; }
.rapport-verdict-moyen { background: rgb(251 146 60 / 0.14); color: #FB923C; }
.rapport-critere i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 0.07); }
.rapport-critere i::after { content: ''; display: block; width: max(2%, calc(var(--v) * 1%)); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2A74FF, #79A9FF); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }
.vu .rapport-critere i::after { transform: none; }
.rapport-histo { height: 120px; }
.rapport-barres { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.rapport-barres i { flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: #1E2C47; transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--k) * 40ms); }
.rapport-barres i.mediane { background: linear-gradient(180deg, #79A9FF, #0A5FFE); box-shadow: 0 0 16px -2px rgb(79 139 255 / 0.6); }
.vu .rapport-barres i { transform: none; }
.rapport-axe { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muet); font-size: 11px; }
.rapport-quartiles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; overflow: hidden; border: 1px solid var(--bord); border-radius: 12px; }
.rapport-quartiles > div { display: grid; align-content: start; gap: 2px; padding: 12px 14px; }
.rapport-quartiles > div + div { border-left: 1px solid var(--bord); }
.rapport-quartiles small { color: var(--muet); font-size: 12px; }
.rapport-quartiles b { color: #fff; font-size: 19px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rapport-quartiles em { color: var(--muet); font-size: 11px; font-style: normal; line-height: 1.35; }
.rapport-quartile-affaire b { color: #22D3EE; }
.rapport-quartile-mis { background: rgb(10 95 254 / 0.1); }
.rapport-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 32px; border-top: 1px solid var(--bord); background: rgb(10 95 254 / 0.06); color: #fff; font-size: 14px; font-weight: 600; }
.rapport-resultat-titre { color: #79A9FF; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rapport-resultat span:not(.rapport-resultat-titre) { display: inline-flex; align-items: center; gap: 8px; }
.rapport-resultat svg { width: 18px; height: 18px; padding: 3px; border-radius: 5px; background: rgb(34 211 238 / 0.14); color: #22D3EE; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rapport-pied { margin: 0; padding: 12px 32px; border-top: 1px solid var(--bord); color: var(--muet); font-size: 12px; }

/* ── Analyse des concurrents : texte, points et drapeaux à gauche ; à droite, la fiche d'un vrai vendeur anonymisé
   (chiffres qui montent, ventes mois par mois, ce qu'il vend, son rythme de publication). ── */
.concurrents { padding-top: 56px; }
.concurrents-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 56px; }
.concurrents-texte .badge-vivant { margin-bottom: 16px; }
.concurrents-texte h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.concurrents-texte > p:not(.surtitre) { margin: 14px 0 0; color: var(--texte-2); font-size: 17px; line-height: 1.6; }
.concurrents-points { display: grid; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; }
.concurrents-points li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; cursor: default; transition: background .35s, border-color .35s; }
.concurrents-points li > div { display: grid; gap: 2px; }
.concurrents-points b { color: #fff; font-size: 15px; }
.concurrents-points li span:not(.concurrents-num) { color: var(--muet); font-size: 13.5px; }
.concurrents-points .concurrents-num { margin-top: 1px; background: rgb(255 255 255 / 0.08); box-shadow: none; transition: background .35s, box-shadow .35s; }
.concurrents-points li.actif { border-color: rgb(79 139 255 / 0.4); background: rgb(10 95 254 / 0.1); }
.concurrents-points li.actif .concurrents-num, .fiche [data-lien].actif .concurrents-num { background: var(--primaire); box-shadow: 0 4px 12px -2px rgb(10 95 254 / 0.6); }
.concurrents-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 24px 0 0; color: var(--muet); font-size: 13px; }
.concurrents-pays > span:first-child { margin-right: 6px; }
.concurrents-pays .drapeau-svg { font-size: 16px; }
.concurrents-cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 26px; padding: 0 22px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px;
  background: linear-gradient(180deg, #3381FF 0%, #0A5FFE 55%, #0749D8 100%); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 14px 36px -12px rgb(10 95 254 / 0.85); transition: transform .25s, filter .25s; }
.concurrents-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.concurrents-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.concurrents-cta:hover svg { transform: translateX(3px); }
.fiche { overflow: hidden; border: 1px solid var(--bord-fort); border-radius: 24px; background: linear-gradient(180deg, var(--surface), var(--fond-2)); box-shadow: var(--ombre), 0 40px 100px -50px rgb(10 95 254 / 0.6); }
.fiche-tete { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--bord); }
.fiche-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #79A9FF, #1E3A8A); filter: blur(2.5px); }
.fiche-id { display: grid; gap: 3px; min-width: 0; }
.fiche-id b { width: fit-content; color: #fff; font-size: 15px; }
.fiche-id span { display: flex; align-items: center; gap: 6px; color: var(--muet); font-size: 12.5px; white-space: nowrap; }
.fiche-id .drapeau-svg { font-size: 14px; }
.fiche-date { margin-left: auto; padding: 4px 10px; border: 1px solid var(--bord-fort); border-radius: 999px; color: var(--texte-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fiche-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -24px; }
.fiche-kpis > div { display: grid; gap: 3px; padding: 10px 24px 16px; }
.fiche-kpis > div + div { border-left: 1px solid var(--bord); }
.fiche-kpis b { color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche-kpis small { color: var(--muet); font-size: 11.5px; line-height: 1.35; }
.fiche-bloc { padding: 18px 24px; transition: background .35s, box-shadow .35s; }
.fiche [data-lien].actif { background: rgb(10 95 254 / 0.08); box-shadow: inset 3px 0 0 #4F8BFF; }
.fiche-titre span { display: inline-flex; align-items: center; gap: 8px; }
.fiche-titre .concurrents-num { width: 20px; height: 20px; border-radius: 6px; background: rgb(255 255 255 / 0.08); box-shadow: none; font-size: 11px; letter-spacing: 0; transition: background .35s, box-shadow .35s; }
.fiche-bloc-kpis { padding-bottom: 0; }
.fiche-bloc-kpis .fiche-titre { margin-bottom: 4px; }
.fiche-bloc + .fiche-bloc, .fiche-duo { border-top: 1px solid var(--bord); }
.fiche-titre { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; color: var(--muet); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fiche-titre em { color: #79A9FF; font-style: normal; letter-spacing: 0; text-transform: none; }
.fiche-mois { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.fiche-mois i { position: relative; flex: 1; height: max(3%, var(--h)); border-radius: 4px 4px 1px 1px; background: #1E2C47; transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--k) * 45ms); }
.fiche-mois i.meilleur { background: linear-gradient(180deg, #79A9FF, #0A5FFE); box-shadow: 0 0 16px -2px rgb(79 139 255 / 0.6); }
.vu .fiche-mois i { transform: none; }
.fiche-mois-lettres { display: flex; gap: 6px; margin-top: 6px; }
.fiche-mois-lettres span { flex: 1; color: var(--muet); font-size: 10.5px; text-align: center; }
.fiche-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fiche-duo > .fiche-bloc + .fiche-bloc { border-top: 0; border-left: 1px solid var(--bord); }
.fiche-cats { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.fiche-cats li { display: grid; grid-template-columns: 1fr auto; gap: 5px; color: var(--texte-2); font-size: 12.5px; }
.fiche-cats b { color: #fff; font-variant-numeric: tabular-nums; }
.fiche-cats i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 0.07); }
.fiche-cats i::after { content: ''; display: block; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2A74FF, #79A9FF); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .3s; }
.vu .fiche-cats i::after { transform: none; }
.fiche-semaines { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.fiche-semaines i { flex: 1; height: max(4%, var(--h)); border-radius: 3px 3px 1px 1px; background: #22D3EE; opacity: .85; transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .8, .2, 1) calc(.4s + var(--k) * 50ms); }
.vu .fiche-semaines i { transform: none; }
.fiche-rythme { display: grid; gap: 4px; margin: 12px 0 0; color: var(--texte-2); font-size: 12.5px; }
.fiche-rythme b { color: #fff; }
.fiche-pied { margin: 0; padding: 12px 24px; border-top: 1px solid var(--bord); color: var(--muet); font-size: 11.5px; }

/* ── Avis utilisateurs : mur incliné en perspective (quatre colonnes qui défilent en sens alternés, en pause au
   survol), fondu sur les quatre bords. Cartes : .avis-carte (plus haut), en plus étroit. ── */
.avis { padding-top: 56px; }
.avis .titre-section { margin-bottom: 8px; }
.avis-mur { position: relative; display: flex; align-items: center; justify-content: center; height: 540px; overflow: hidden; perspective: 650px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
.avis-scene { display: flex; gap: 16px; transform: translateX(-10px) translateZ(-80px) rotateX(18deg) rotateY(-8deg) rotateZ(16deg); }
.avis-colonne { flex: none; width: 250px; }
.avis-colonne-piste { animation: avis-monte var(--duree, 60s) linear infinite; }
.avis-colonne.inverse .avis-colonne-piste { animation-direction: reverse; }
.avis-mur:hover .avis-colonne-piste { animation-play-state: paused; }
@keyframes avis-monte { to { transform: translateY(-50%); } }
.avis-colonne .avis-carte { width: 100%; margin-bottom: 16px; gap: 8px; padding: 16px; }
.avis-colonne .avis-titre { font-size: 14px; }
.avis-colonne .avis-texte { font-size: 13px; }

/* ── On en parle ? : texte rassurant à gauche, formulaire de rappel à droite (prénom et numéro obligatoires, le reste
   facultatif, accord à cocher) ; une fois envoyé, le formulaire laisse place à la confirmation. ── */
.rappel { padding-top: 56px; }
.rappel-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 56px; }
.rappel-texte h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.rappel-texte > p:not(.surtitre) { margin: 14px 0 0; color: var(--texte-2); font-size: 17px; line-height: 1.6; }
.rappel-points { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.rappel-points li { display: flex; align-items: center; gap: 10px; color: var(--texte); font-size: 15px; }
.rappel-points svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: rgb(79 139 255 / 0.16); color: #79A9FF; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rappel-carte { padding: 32px; border: 1px solid var(--bord-fort); border-radius: 24px; background: linear-gradient(180deg, var(--surface), var(--fond-2)); box-shadow: var(--ombre); }
.rappel-carte h3 { color: #fff; font-size: 21px; font-weight: 700; }
.rappel-carte > p { margin: 6px 0 0; color: var(--muet); font-size: 14px; }
.rappel-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 24px; }
.rappel-champ { display: grid; gap: 7px; min-width: 0; }
.rappel-champ.plein { grid-column: 1 / -1; }
.rappel-champ label { color: var(--texte); font-size: 13.5px; font-weight: 600; }
.rappel-champ label > span[aria-hidden] { color: #FB923C; }
.rappel-champ label small { color: var(--muet); font-weight: 500; }
.rappel-champ input, .rappel-champ select, .rappel-champ textarea { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--bord-fort); border-radius: 12px; background: var(--fond-2); color: var(--texte); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.rappel-champ textarea { min-height: 88px; padding: 11px 14px; resize: vertical; }
.rappel-champ select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--fond-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494AF' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.rappel-champ ::placeholder { color: #5D6C86; }
.rappel-champ :is(input, select, textarea):focus { border-color: #4F8BFF; outline: none; box-shadow: 0 0 0 3px rgb(79 139 255 / 0.25); }
.rappel-champ [aria-invalid="true"] { border-color: #F87171; }
.rappel-erreur { color: #F87171; font-size: 12.5px; }
.rappel-erreur:empty { display: none; }
.rappel-champ .rappel-accord { display: flex; align-items: flex-start; gap: 10px; color: var(--texte-2); font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.rappel-accord input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #0A5FFE; }
.rappel-accord a { color: #79A9FF; }
.rappel-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rappel-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--bord); }
.rappel-bas small { color: var(--muet); font-size: 12.5px; }
.rappel-envoyer { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px;
  background: linear-gradient(180deg, #3381FF 0%, #0A5FFE 55%, #0749D8 100%); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 14px 36px -12px rgb(10 95 254 / 0.85); transition: transform .25s, filter .25s, opacity .2s; }
.rappel-envoyer:hover { transform: translateY(-1px); filter: brightness(1.08); }
.rappel-envoyer:disabled { opacity: .6; cursor: wait; transform: none; }
.rappel-envoyer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rappel-message { grid-column: 1 / -1; margin: 0; color: #F87171; font-size: 13.5px; }
.rappel-message:empty { display: none; }
.rappel-merci { display: grid; justify-items: center; gap: 10px; padding: 28px 8px; text-align: center; }
.rappel-merci[hidden] { display: none; }
.rappel-merci svg { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: rgb(34 211 238 / 0.14); color: #22D3EE; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rappel-merci h3 { color: #fff; font-size: 21px; }
.rappel-merci p { margin: 0; color: var(--texte-2); font-size: 15px; }

/* ── Fenêtre « Commencer gratuitement » (d'après l'exemple d'Hugo, aux couleurs de VINTYTRACK) : l'essai gratuit de
   7 jours d'Advanced. Étape 1 sur 2 (l'offre, puis le compte) ; 0 € aujourd'hui, le prix et la date ensuite, la carte
   annoncée ; le vrai nombre d'inscrits de la semaine s'il est connu ; ce qui est inclus. Ouverte par landing.js. ── */
.offre-voile { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(2 6 14 / 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: offre-voile .25s ease both; }
@keyframes offre-voile { from { opacity: 0; } }
.offre-fenetre { position: relative; width: min(100%, 620px); max-height: calc(100dvh - 40px); overflow: auto; padding: 34px 38px 30px; border: 1px solid var(--bord-fort); border-radius: 24px;
  background: radial-gradient(70% 50% at 50% 0%, rgb(10 95 254 / 0.18), transparent 70%), linear-gradient(180deg, #0B1426, #060C18); box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.03); animation: offre-fenetre .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes offre-fenetre { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.offre-etapes { display: flex; gap: 6px; }
.offre-etapes i { width: 34px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.12); }
.offre-etapes i.actif { background: #4F8BFF; }
.offre-fermer { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muet); cursor: pointer; transition: background .2s, color .2s; }
.offre-fermer:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.offre-fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.offre-titre { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.offre-titre h2 { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.offre-badge { padding: 4px 9px; border-radius: 7px; background: var(--primaire); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.offre-sous { margin: 6px 0 0; color: var(--texte-2); font-size: 15.5px; }
.offre-bascule { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid var(--bord-fort); border-radius: 12px; background: var(--fond-2); }
.offre-bascule button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--texte-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.offre-bascule button[aria-checked="true"] { background: var(--primaire); color: #fff; }
.offre-bascule small { padding: 2px 7px; border-radius: 999px; background: rgb(34 211 238 / 0.14); color: #22D3EE; font-size: 11.5px; font-weight: 700; }
.offre-bascule button[aria-checked="true"] small { background: rgb(255 255 255 / 0.18); color: #fff; }
.offre-prix { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.offre-prix b { color: #fff; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.offre-prix span { color: var(--texte-2); font-size: 17px; }
.offre-puis { margin: 10px 0 0; color: var(--texte-2); font-size: 16px; }
.offre-puis b { color: #fff; }
.offre-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 24px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 14px;
  background: linear-gradient(180deg, #3381FF 0%, #0A5FFE 55%, #0749D8 100%); color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 16px 44px -12px rgb(10 95 254 / 0.85); transition: transform .25s, filter .25s; }
.offre-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.offre-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.offre-cta:hover svg { transform: translateX(4px); }
.offre-rassure { margin: 12px 0 0; color: var(--muet); font-size: 13px; line-height: 1.5; text-align: center; }
.offre-inscrits { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; color: var(--texte-2); font-size: 14px; }
.offre-inscrits[hidden] { display: none; }
.offre-inscrits i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgb(74 222 128 / 0.18); }
.offre-inclus { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--bord); }
.offre-inclus p { margin: 0 0 12px; color: var(--muet); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.offre-inclus ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.offre-inclus li { display: flex; align-items: flex-start; gap: 10px; color: var(--texte); font-size: 14px; line-height: 1.4; }
.offre-inclus svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #4F8BFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Le bloc des nouveautés de la fenêtre : même mise en page que « Inclus dans », en vert, et sans le trait du haut
   puisqu'il vient juste avant lui. */
/* Les mêmes lignes en deux colonnes dans la fenêtre de souscription : une par ligne (et non la grille à deux
   colonnes de `.offre-inclus ul`), sinon la valeur de droite se retrouve collée au nom de la colonne suivante. */
.offre-lignes { grid-template-columns: 1fr !important; gap: 9px !important; }
.offre-lignes li { justify-content: space-between; align-items: baseline; gap: 14px; }
.offre-lignes li > b { display: inline-flex; align-items: center; gap: 5px; flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.offre-lignes li > b svg { width: 15px; height: 15px; }
.offre-lignes li.est-verrou > span, .offre-lignes li.est-verrou > b { color: var(--muet); font-weight: 500; }
.offre-lignes li.est-verrou > b svg { stroke: var(--muet); }
.offre-nouveau { margin-top: 18px; padding-top: 18px; }
.offre-nouveau p { color: var(--accent); }
body.offre-ouverte { overflow: hidden; }
/* Étape 2 de la fenêtre : le compte et le paiement sur la même page ; le formulaire de carte de Stripe (son cadre
   s'insère dans .offre-paiement) s'active dès que l'e-mail et le mot de passe sont bons. */
.offre-retour { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--texte-2); font: inherit; font-size: 14.5px; cursor: pointer; }
.offre-retour:hover { color: #fff; }
.offre-retour svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.offre-compte-titre { margin-top: 8px; color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.offre-recap { margin-top: 12px; overflow: hidden; border: 1px solid var(--bord-fort); border-radius: 14px; background: rgb(255 255 255 / 0.03); }
.offre-recap > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding: 9px 14px; color: var(--texte-2); font-size: 14px; }
.offre-recap > div + div { border-top: 1px solid var(--bord); font-size: 13px; }
.offre-recap b { color: #fff; font-size: 15.5px; }
.offre-lien { padding: 0; border: 0; background: none; color: #79A9FF; font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.offre-lien:hover { color: #fff; }
.offre-compte { display: grid; gap: 10px; margin-top: 14px; }
.offre-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.offre-champ { display: grid; gap: 6px; min-width: 0; color: var(--texte); font-size: 13.5px; font-weight: 600; }
.offre-champ em { color: var(--muet); font-style: normal; font-weight: 500; }
.offre-champ input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--bord-fort); border-radius: 12px; background: var(--fond-2); color: var(--texte); font: inherit; font-size: 15px; font-weight: 500; transition: border-color .2s, box-shadow .2s; }
.offre-champ input::placeholder { color: #5D6C86; }
.offre-champ input:focus { border-color: #4F8BFF; outline: none; box-shadow: 0 0 0 3px rgb(79 139 255 / 0.25); }
.offre-champ input[aria-invalid="true"] { border-color: #F87171; }
.offre-champ small { color: #F87171; font-size: 12.5px; font-weight: 500; }
.offre-champ small:empty { display: none; }
/* E-mail et mot de passe sur toute la largeur ; prénom / nom et téléphone / indicatif tiennent en deux colonnes. */
.offre-champ:has(input[name="email"]), .offre-champ:has(input[name="motDePasse"]) { grid-column: 1 / -1; }
.offre-tel { display: flex; gap: 8px; min-width: 0; }
.offre-tel select { flex-shrink: 0; width: 92px; min-height: 46px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 12px; background: var(--fond-2); color: var(--texte); font: inherit; font-size: 14px; font-weight: 500; }
.offre-tel input { min-width: 0; }
.offre-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.offre-champs[hidden] { display: none; }
/* Le pied (accord, bouton, CGV) reste collé au bas de la fenêtre : le bouton est toujours à l'écran. */
.offre-pied { position: sticky; bottom: -30px; z-index: 2; display: grid; gap: 8px; margin: 4px -38px -6px; padding: 12px 38px 16px; border-top: 1px solid var(--bord);
  background: linear-gradient(180deg, rgb(6 12 24 / 0.94), #060C18 22px); box-shadow: 0 -16px 24px -12px rgb(0 0 0 / 0.55); }
.offre-pied .offre-case { font-size: 12px; line-height: 1.4; }
.offre-pied .offre-cta { height: 52px; margin-top: 0; }
.offre-case { display: flex; align-items: flex-start; gap: 10px; color: var(--texte-2); font-size: 12.5px; line-height: 1.5; cursor: pointer; border-radius: 10px; transition: background .2s, box-shadow .2s; }
.offre-case.is-a-cocher { background: rgb(248 113 113 / 0.08); box-shadow: 0 0 0 6px rgb(248 113 113 / 0.08); }
.offre-case input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: #0A5FFE; }
.offre-case a { color: #79A9FF; }
.offre-erreur { margin: 0; color: #F87171; font-size: 13.5px; }
.offre-erreur:empty { display: none; }
.offre-compte .offre-cta { margin-top: 4px; }
.offre-cta:disabled { cursor: default; }
.offre-cta.is-attente { pointer-events: none; filter: saturate(.7); }
.offre-cta.is-attente svg { display: none; }
.offre-cta.is-attente::after { content: ""; width: 18px; height: 18px; border: 2.5px solid rgb(255 255 255 / 0.3); border-top-color: #fff; border-radius: 50%; animation: offre-roue .8s linear infinite; }
.offre-accord { margin: 0; color: var(--muet); font-size: 11.5px; line-height: 1.45; text-align: center; }
.offre-accord a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 2px; }
.offre-compte-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid rgb(34 211 238 / 0.35); border-radius: 12px; background: rgb(34 211 238 / 0.08); color: #fff; font-size: 14px; }
.offre-compte-ok[hidden] { display: none; }
.offre-compte-ok svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #22D3EE; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.offre-paiement-bloc { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--bord); }
.offre-paiement-titre { margin: 0 0 10px; color: var(--texte); font-size: 14.5px; font-weight: 700; }
.offre-paiement { min-height: 96px; transition: opacity .3s, filter .3s; }
.offre-paiement:has(.offre-paiement-secours) { min-height: 0; }
.offre-paiement-secours.is-local { border-color: rgb(251 191 36 / 0.5); background: rgb(251 191 36 / 0.06); color: #FDE68A; }
.offre-paiement-bloc:not(.is-actif) .offre-paiement { opacity: .42; filter: saturate(.5); pointer-events: none; user-select: none; }
.offre-paiement-attente { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; color: var(--texte-2); font-size: 13px; }
.offre-paiement-attente::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4F8BFF; box-shadow: 0 0 0 3px rgb(79 139 255 / 0.2); }
.offre-paiement-attente[hidden] { display: none; }
.offre-paiement-secours { margin: 0; padding: 16px; border: 1px dashed var(--bord-fort); border-radius: 12px; color: var(--texte-2); font-size: 13.5px; line-height: 1.5; }
/* En attendant le formulaire de Stripe : la forme de ses champs (numéro ; date et code ; pays). */
.offre-squelette { display: grid; gap: 12px; }
.offre-squelette span { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offre-squelette i { display: block; height: 46px; border: 1px solid var(--bord-fort); border-radius: 12px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.02) 30%, rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0.02) 70%) 0 0 / 300% 100% var(--fond-2); animation: offre-squelette 1.4s ease-in-out infinite; }
@keyframes offre-squelette { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes offre-roue { to { transform: rotate(360deg); } }
.offre-confiance { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0 0; color: var(--texte-2); font-size: 13px; }
.offre-confiance span { display: inline-flex; align-items: center; gap: 6px; }
.offre-confiance span:first-child { color: #22D3EE; }
.offre-confiance svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.offre-deja { margin: 14px -38px -30px; padding: 16px; border-top: 1px solid var(--bord); background: rgb(255 255 255 / 0.03); color: var(--texte-2); font-size: 14px; text-align: center; }
.offre-deja a { color: #fff; font-weight: 700; }


/* ── Tablette ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .plateforme-in { flex-direction: column-reverse; align-items: stretch; gap: 40px; }
  .plateforme-texte { max-width: none; }
  .grille-tarifs { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  /* Sur mobile les cartes s'empilent : l'offre recommandée passe en tête, sinon il faut faire défiler Essential en
     entier pour la découvrir. L'ordre du HTML ne bouge pas (desktop et lecteurs d'écran gardent Essential d'abord). */
  .tarif.en-avant { order: -1; }
  .concurrents-in { grid-template-columns: 1fr; gap: 36px; }
  .rappel-in { grid-template-columns: 1fr; gap: 32px; }
  .pied-in { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }

}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .conteneur { padding: 0 16px; }
  .section { padding: 64px 0; }
  .chiffres { padding: 0; }
  /* Haut de page resserré sur téléphone : le bouton, la carte de niche et le début de la démo dans le premier écran. */
  .hero { padding: 92px 0 32px; }
  .hero .surtitre { margin-bottom: 12px; font-size: 12px; }
  .hero-preuve { margin-top: 2px; font-size: 12.5px; }
  .preuve-live { margin-top: 6px; font-size: 12.5px; }
  .plateformes { margin-top: 22px; }
  .plateformes-titre { font-size: 12px; }
  .plateforme { margin-right: 36px; }
  .plateforme b { font-size: 14px; }
  .hero h1 { font-size: 34px; }
  .hero-sous { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  .hero-actions { margin-top: 20px; }
  .hero-in { gap: 32px; }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px;
    background: rgb(3 8 18 / 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord);
  }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--bord); font-size: 16px; }
  .entete.menu-ouvert { background: rgb(3 8 18 / 0.95); }
  .entete.menu-ouvert .nav { display: flex; }
  .entete-actions .bouton-discret { display: none; }
  /* Téléphone : un seul appel à l'action visible à la fois — le gros bouton du haut, puis la barre du bas. */
  .entete-actions .bouton-fonce { display: none; }
  .nav .nav-seul-mobile { display: block; }
  .menu-mobile { display: inline-flex; }
  .entete-in { gap: 12px; justify-content: space-between; }
  .grille-3 { grid-template-columns: 1fr; }
  .chiffres-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres-in > div { padding: 22px 10px; }
  .chiffres-in b { font-size: max(18px, 5vw); }
  .chiffres-in > div:nth-child(3) { border-left: 0; }
  .chiffres-in > div:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .donnees .chiffres-in > div > span { white-space: normal; }
  .rapport-intro { margin-top: 36px; }
  .rapport-tete { padding: 20px 20px 16px; }
  .rapport-corps { grid-template-columns: 1fr; }
  .rapport-bloc { padding: 20px; }
  .rapport-bloc + .rapport-bloc { border-left: 0; border-top: 1px solid var(--bord); }
  .rapport-quartiles > div { padding: 10px; }
  .rapport-quartiles b { font-size: 16px; }
  .rapport-quartiles em { font-size: 10px; }
  .rapport-resultat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 20px; }
  .rapport-pied { padding: 12px 20px; }
  .concurrents { padding-top: 32px; }
  .avis { padding-top: 32px; }
  .rappel { padding-top: 32px; }
  .offre-voile { place-items: end center; padding: 0; }
  .offre-fenetre { width: 100%; max-height: 92dvh; padding: 26px 20px 22px; border-radius: 22px 22px 0 0; }
  .offre-prix b { font-size: 44px; }
  .offre-inclus ul { grid-template-columns: 1fr; }
  .offre-champs { grid-template-columns: 1fr; gap: 10px; }
  .offre-champ input { min-height: 44px; padding: 0 12px; }
  .offre-pied { bottom: -22px; margin: 4px -20px -6px; padding: 10px 20px 14px; }
  .offre-deja { margin: 14px -20px -22px; }
  .rappel-carte { padding: 22px 18px; border-radius: 20px; }
  .rappel-form { grid-template-columns: 1fr; gap: 16px; }
  .rappel-envoyer { width: 100%; justify-content: center; }
  .avis-mur { height: 460px; }
  .avis-colonne { width: 220px; }
  .concurrents-texte > p:not(.surtitre) { font-size: 16px; }
  .fiche-tete, .fiche-bloc { padding-left: 18px; padding-right: 18px; }
  .fiche-kpis { margin: 0 -18px; }
  .fiche-kpis > div { padding: 10px 18px 14px; }
  .fiche-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-date { display: none; }
  .fiche-kpis > div:nth-child(3) { border-left: 0; }
  .fiche-kpis > div:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .fiche-duo { grid-template-columns: 1fr; }
  .fiche-duo > .fiche-bloc + .fiche-bloc { border-left: 0; border-top: 1px solid var(--bord); }
  .fiche-pied { padding: 12px 18px; }
  .hero-actions .bouton, .hero-actions .bouton-brillant, .hero-actions .booster-cadre, .hero-actions .cta-viseur { flex: 1 1 100%; }
  .cta-viseur { padding: 14px 18px; }
  .cta-principal { width: 100%; min-width: 0; height: 56px; padding: 0 20px; }
  .booster-cadre .bouton-brillant { flex: 1 1 auto; }
  /* Téléphone : le signal réel juste sous le bouton principal ; les offres restent dans le menu et la barre du bas. */
  .hero .hero-actions .bouton-contour, .cta .hero-actions .bouton-contour { display: none; }
  .barre-cta:not([hidden]) { display: flex; }
  body.barre-cta-visible { padding-bottom: 64px; }
  .titre-section { margin-bottom: 40px; }
  .outils { padding-top: 24px; }
  .outils-grille { grid-template-columns: minmax(0, 420px); gap: 36px; }
  .titre-section p:not(.surtitre) { font-size: 16px; }
  .pied-in { grid-template-columns: 1fr 1fr; }

  .cta-carte { padding: 48px 14px; }
  .cta-carte .cta-viseur { padding: 12px 10px; }
  .cta-carte .cta-principal { padding: 0 16px; font-size: 16px; }
}

/* Téléphone et écran tactile : champs à 16 px au moins (en dessous, Safari zoome sur la page à la saisie). */
@media (max-width: 760px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* Trois descriptions de longueurs différentes : même hauteur réservée, pour que les prix et les boutons des trois
   cartes restent sur la même ligne. */
.tarif-info { min-height: 44px; }
@media (max-width: 900px) { .tarif-info { min-height: 0; } }

/* Note sous la grille des tarifs (paiement sécurisé). */
.tarifs-note { margin: 28px 0 0; text-align: center; color: var(--muet); font-size: 12.5px; }