/* flotrade.css — feuille de styles commune de flotrade.fr (pages publiques).
   Les pages la chargent avec /flotrade.css?v=… : changer ce numéro dans les pages après chaque modification
   (les navigateurs gardent les feuilles CSS 30 jours en cache).
   Classes posées sur <html> : famille (f-a accueil/stratégies, f-p pages produit, f-d CGV/404) et page (pg-…).
   Les règles propres à certaines pages sont limitées par :where(…), qui ne change pas leur priorité. */

/* ═══ Polices auto-hébergées (Cormorant Garamond, Montserrat) ═══ */
/* fonts.css — Cormorant Garamond & Montserrat auto-hébergées (fichiers dans /fonts/).
   Aucune requête vers Google. Ce sont des polices variables : un seul fichier couvre
   toutes les graisses d'une famille (avant : un téléchargement identique par graisse).
   Sous-ensembles latin + latin-ext uniquement (français). */

/* Cormorant Garamond italic 300–400 · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-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;
}

/* Cormorant Garamond italic 300–400 · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-latin.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;
}

/* Cormorant Garamond normal 300–700 · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-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;
}

/* Cormorant Garamond normal 300–700 · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-700-latin.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;
}

/* Montserrat normal 200–700 · latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(fonts/montserrat-normal-200-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-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;
}

/* Montserrat normal 200–700 · latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(fonts/montserrat-normal-300-latin.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;
}
/* ═══════════════════════════════════════════════════════════
   REPÈRES COMMUNS À TOUTES LES PAGES
   ═══════════════════════════════════════════════════════════ */
/* Couleurs et texte. Trois niveaux de texte : blanc (titres, chiffres, mots importants),
   --text-2 (texte courant), --text-3 (notes, légendes, libellés).
   --fs-body : taille du texte courant, 15 px sur téléphone et 16 px sur ordinateur. */
:root {
  --gold: #C9A84C;
  --gold-light: #E8C96A;
  --gold-dim: rgba(201,168,76,0.15);
  --white: #FFFFFF;
  --bg: #060606;
  --bg2: #0D0D0D;
  --border: rgba(201,168,76,0.18);
  --ease: cubic-bezier(.22,1,.36,1);
  --text-2: rgba(255,255,255,0.74);
  --text-3: rgba(255,255,255,0.6);
  --muted: var(--text-3);
  --muted-soft: var(--text-3);
  --off-white: rgba(255,255,255,0.75);
  --fs-body: 15px;
}
@media (min-width: 900px) { :root { --fs-body: 16px; } }
/* Focus clavier visible partout (invisible à la souris) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Mots mis en valeur dans le texte courant (les règles plus précises gardent la main) */
:where(p, li, td, dd) :where(strong, b) { font-weight: 600; }
/* Titres sur plusieurs lignes : lignes équilibrées */
h1, h2, h3, .about-benefits-title { text-wrap: balance; }
/* Paragraphes : pas de mot seul sur la dernière ligne (navigateurs récents) */
p, li, .product-stat, .faq-answer { text-wrap: pretty; }
/* Accueil : le badge du haut tient sur une ligne sur téléphone, sans point isolé s'il passe à la ligne */
@media (max-width: 420px) {
  .selector-wrap .selector-badge { letter-spacing: 0.6px; padding-left: 12px; padding-right: 12px; text-wrap: balance; }
  .selector-wrap .selector-badge::before { display: none; }
}
/* Petit intitulé doré au-dessus des titres de section (« FONCTIONNALITÉS ——— ») */
.section-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 16px; }
/* ═══ En-tête (le même sur toutes les pages) ═══ */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 48px; background: rgba(6,6,6,0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201,168,76,0.12); }
.topnav-logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--white); text-decoration: none; border: 0; }
.topnav-logo span { color: var(--gold); }
.topnav-links { display: flex; align-items: center; gap: 26px; }
.topnav-links a { white-space: nowrap; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-3); text-decoration: none; border: 0; transition: color 0.3s; }
.topnav-links a:hover, .topnav-links a[aria-current="page"] { color: var(--gold); }
.topnav-links .topnav-cta { display: inline-flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; color: #000; background: var(--gold); border: 1px solid var(--gold); padding: 11px 20px; cursor: pointer; text-decoration: none; transition: background 0.3s, border-color 0.3s; }
.topnav-links .topnav-cta:hover { color: #000; background: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 900px) {
  .topnav { padding: 14px 24px; }
  .topnav-links { gap: 14px; }
  .topnav-links a { letter-spacing: 1px; }
  .topnav-links .topnav-cta { padding: 10px 14px; letter-spacing: 1.5px; }
}
@media (max-width: 800px) {
  .topnav-links a:not(.topnav-cta) { display: none; }
}
@media (max-width: 700px) {
  .topnav { padding: 8px 16px; }
  .topnav-logo { font-size: 19px; letter-spacing: 4px; padding: 10px 0; }
  .topnav-links .topnav-cta { min-height: 40px; padding: 0 14px; letter-spacing: 1px; }
}
@media (max-width: 360px) {
  .topnav { padding: 8px 12px; }
  .topnav-logo { font-size: 17px; letter-spacing: 3px; }
  .topnav-links .topnav-cta { padding: 0 10px; letter-spacing: 0.5px; }
}
/* ═══ Pied de page (le même sur toutes les pages) ═══ */
footer { border-top: 1px solid var(--border); padding: 40px 60px calc(40px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; position: relative; z-index: 2; }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; }
.footer-logo span { color: var(--gold); }
.footer-copy { font-size: 12px; letter-spacing: 1px; color: var(--text-3); text-align: center; line-height: 1.8; }
.footer-right { font-size: 12px; letter-spacing: 1px; color: var(--text-3); text-align: right; line-height: 1.8; }
.footer-legal { display: flex; gap: 6px 24px; justify-content: center; flex-wrap: wrap; width: 100%; padding-top: 18px; border-top: 1px solid rgba(201,168,76,0.08); }
.footer-legal.footer-pages { border-top: 0; padding-top: 0; }
.footer-legal button, .footer-legal a { font-family: inherit; background: none; border: none; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); cursor: pointer; text-decoration: none; padding: 4px 2px; transition: color 0.3s; }
.footer-legal button:hover, .footer-legal a:hover { color: var(--gold); }
@media (max-width: 900px) {
  footer { padding: 40px 24px calc(40px + env(safe-area-inset-bottom)); flex-direction: column; align-items: center; text-align: center; }
  .footer-right { text-align: center; }
}
@media (max-width: 700px) {
  .footer-legal { flex-direction: column; align-items: center; gap: 0; }
  .footer-legal.footer-pages { flex-direction: row; justify-content: center; gap: 0 18px; }
  .footer-legal button, .footer-legal a { padding: 13px 8px; }
}
/* ═══ Chiffres-clés des pages produit (« 1 minute », « 0 », « 100 % ») ═══ */
.stat-tiles { display: flex; flex-direction: column; gap: 16px; }
.stat-tile { border: 1px solid var(--border); padding: 28px 32px; background: var(--bg); }
.stat-tile-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.stat-tile-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); margin-top: 10px; line-height: 1.6; }
/* Sur téléphone : un seul encadré, une ligne par chiffre (chiffre à gauche, libellé à droite) */
/* ═══ Rappel « à utiliser sur le XAUUSD d'IC Markets » (sous les formules des stratégies) ═══ */
.broker-note { max-width: 820px; margin: 22px auto 0; padding: 14px 18px; border-left: 2px solid var(--gold); background: rgba(201,168,76,0.05); font-size: 14px; line-height: 1.65; color: var(--text-2); text-align: left; }
.broker-note strong { color: var(--white); font-weight: 600; }
@media (max-width: 700px) { .broker-note { margin-top: 18px; padding: 12px 14px; font-size: 13.5px; } }
/* Page Stratégies : quatre cartes « pour toutes les stratégies », deux par ligne */
.steps-grid.steps-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .steps-grid.steps-grid--4 { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .stat-tiles { gap: 0; border: 1px solid var(--border); background: var(--bg); }
  .stat-tile { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 0; background: none; }
  .stat-tile + .stat-tile { border-top: 1px solid var(--border); }
  .stat-tile-num { flex: 0 0 88px; font-size: 24px; }
  .stat-tile-label { margin-top: 0; letter-spacing: 1px; line-height: 1.5; }
}
/* ═══ Graphique avant / après (pages produit) ═══ */
.ba-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.ba-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3vw, 42px); font-weight: 300; }
.ba-title strong { font-weight: 700; }
.ba-badge { position: absolute; top: 12px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background: rgba(0,0,0,0.6); padding: 5px 10px; }
.ba-badge--avant { left: 16px; color: var(--text-2); }
.ba-badge--apres { right: 16px; color: var(--gold); }
.ba-drag { text-align: center; margin-top: 12px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); }
.ba-caption { text-align: center; max-width: 720px; margin: 14px auto 0; font-size: 14px; line-height: 1.7; color: var(--text-3); }
/* ═══ Fenêtre de confirmation après paiement ═══ */
.modal-next { border: 1px solid rgba(201,168,76,0.2); background: rgba(201,168,76,0.04); padding: 24px 28px; margin: 28px 0; text-align: left; }
.modal-next-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.modal-next table { width: 100%; }
.modal-step-n { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--gold); width: 26px; vertical-align: top; }
.modal-step-t { font-size: 14px; color: var(--text-2); line-height: 1.7; vertical-align: top; }
.modal-next tr:not(:last-child) td { padding-bottom: 12px; }
.modal-step-t strong { color: #fff; }
.modal-help { font-size: 13px; color: var(--text-3); line-height: 1.8; margin-bottom: 28px; }
.modal-help a { color: var(--gold); }
.modal-btn { display: block; width: 100%; font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; text-align: center; text-decoration: none; padding: 14px; cursor: pointer; transition: all 0.3s; margin-bottom: 12px; }
.modal-btn--gold { background: var(--gold); color: #000; font-weight: 600; padding: 18px; border: 0; }
.modal-btn--gold:hover { background: var(--gold-light); }
.modal-btn--outline { background: none; border: 1px solid rgba(201,168,76,0.25); color: var(--gold); }
.modal-btn--back { background: none; border: 1px solid rgba(201,168,76,0.2); color: var(--text-3); margin-bottom: 0; }
/* ═══ Essai gratuit de l'indicateur : aide « où trouver mon pseudo » et confirmation ═══ */
.trial-help-text { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3); }
.trial-help-text b { color: #fff; font-weight: 500; }
.trial-help-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(201,168,76,0.25); color: var(--gold); font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 12px; cursor: pointer; margin-top: 8px; transition: all 0.25s; }
.trial-video-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); }
.trial-video-close { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 18px; font-family: monospace; padding: 0 4px; }
.trial-ok-icon { font-size: 44px; margin-bottom: 18px; }
.trial-ok-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; margin-bottom: 14px; }
.trial-ok-text { font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; }
.trial-ok-text strong { color: #fff; }
/*Fondu entre index.html et les pages produit (Chrome/Edge)*/
/*Fondu entre les pages du site (navigateurs qui le gèrent)*/
@view-transition { navigation: auto; }
/*══════════════════════════════════════════════
   1. VARIABLES
   ══════════════════════════════════════════════*/
/*══════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════*/
:where(.f-a, .f-d),
:where(.f-a, .f-d) * { margin: 0; padding: 0; box-sizing: border-box; }
html:where(.f-a) { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
:where(.f-a) body { max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 400; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
:where(.f-a) a,
:where(.f-a) button,
:where(.f-a) .product-card { touch-action: manipulation; }
/*Anti-copie limité au décoratif : le texte utile (email, noms de produits)
   reste sélectionnable, ce qui est indispensable pour vos visiteurs.*/
.product-ghost-num, .product-ribbon, .floating-particles, .about-avatar { user-select: none; -webkit-user-select: none; }
:where(.f-a) section { scroll-margin-top: 20px; }
/*Grain de film — décoratif, ne bloque aucun clic*/
:where(.f-p),
:where(.f-p) * { margin: 0; padding: 0; box-sizing: border-box; }
html:where(.f-p) { scroll-behavior: smooth; }
html:where(.f-p),
:where(.f-p) body { max-width: 100%; overflow-x: hidden; }
:where(.f-p) body { background: var(--bg); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 400; overflow-x: hidden; }
:where(.f-a, .f-p) body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.6; }
/*Focus clavier visible — invisible à la souris*/
/*══════════════════════════════════════════════
   3. ANIMATIONS
   ══════════════════════════════════════════════*/
:where(.f-p) button,
:where(.f-p) a { pointer-events: auto !important; cursor: pointer !important; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
/*Glow via opacity (composé par le GPU) au lieu de box-shadow (repaint constant)*/
@keyframes glowFade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes iconRing {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes borderShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes rotateBorder {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-700px) translateX(30px); opacity: 0; }
}
@keyframes ribbonShine {
  0%        { transform: translateX(0); }
  60%, 100% { transform: translateX(350%); }
}
/*Les particules montent en puissance au lieu d'apparaître d'un bloc*/
@keyframes particlesAppear     { from { opacity: 0; } to { opacity: 1; } }
@keyframes particlesAppearSoft { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
:where(.f-a) .fade-up-2 { animation: fadeUp 0.9s var(--ease) 0.15s both; }
:where(.f-a) .fade-up-3 { animation: fadeUp 0.9s var(--ease) 0.3s both; }
/*Révélation au scroll (piloté en JS)*/
:where(.f-a) .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
/*══════════════════════════════════════════════
   4. HERO / SÉLECTEUR
   ══════════════════════════════════════════════*/
.selector-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px 48px; text-align: center; position: relative; overflow-x: clip; }
.selector-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 900px; height: 900px; max-width: 130vw; background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 65%); pointer-events: none; }
.selector-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); padding: 7px 18px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; position: relative; z-index: 2; }
.selector-badge::before { content: ''; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; animation: pulse 2s infinite; }
/*── Hero en deux colonnes : la promesse à gauche, le produit à droite ──*/
.hero-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; width: 100%; max-width: 1120px; text-align: left; position: relative; z-index: 2; margin-bottom: 64px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.selector-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 3.7vw, 50px); font-weight: 300; line-height: 1.12; margin-bottom: 18px; position: relative; z-index: 2; max-width: 640px; }
.selector-title strong { font-weight: 700; }
.selector-subtitle { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 26px; max-width: 520px; position: relative; z-index: 2; }
.selector-subtitle strong { color: var(--white); font-weight: 500; }
/*Trois faits vérifiables sous la promesse*/
:where(.f-a) .hero-proofs { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
:where(.f-a) .hero-proofs li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.6px; color: var(--text-3); }
:where(.f-a) .hero-proofs li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
/*Capture réelle de l'indicateur, encadrée*/
.hero-visual { position: relative; margin: 0; border: 1px solid rgba(201,168,76,0.28); border-radius: 4px; background: #0b0b0b; box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 40px rgba(201,168,76,0.07); overflow: hidden; }
.hero-visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 2; }
.hero-visual img { display: block; width: 100%; height: auto; }
.hero-visual-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid rgba(201,168,76,0.15); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hero-visual-caption span:last-child { color: var(--gold); }
/*Intitulé du sélecteur, juste au-dessus des deux cartes*/
.selector-heading { position: relative; z-index: 2; margin-bottom: 26px; }
.selector-heading-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.selector-heading-text { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; line-height: 1.25; }
.selector-heading-text strong { font-weight: 700; }
/*── Particules ──*/
.floating-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0; animation: particlesAppear 9s ease-in 1.2s forwards; }
.floating-particles span { position: absolute; width: 3px; height: 3px; background: var(--gold); border-radius: 50%; opacity: 0; animation: particleFloat 12s linear infinite backwards; will-change: transform, opacity; }
.floating-particles span:nth-child(1) { left: 8%; top: 90%; animation-delay: 0s; animation-duration: 14s; }
.floating-particles span:nth-child(2) { left: 22%; top: 90%; animation-delay: 2s; animation-duration: 11s; }
.floating-particles span:nth-child(3) { left: 45%; top: 90%; animation-delay: 4s; animation-duration: 16s; }
.floating-particles span:nth-child(4) { left: 63%; top: 90%; animation-delay: 1s; animation-duration: 13s; }
.floating-particles span:nth-child(5) { left: 80%; top: 90%; animation-delay: 5s; animation-duration: 15s; }
.floating-particles span:nth-child(6) { left: 92%; top: 90%; animation-delay: 3s; animation-duration: 12s; }
/*══════════════════════════════════════════════
   5. CARTES PRODUIT
   ══════════════════════════════════════════════*/
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 760px; width: 100%; position: relative; z-index: 2; }
.product-card { background: linear-gradient(165deg, #0F0F0F 0%, #070707 60%, #050505 100%); border: 1px solid var(--border); border-radius: 3px; padding: 34px 24px 28px; text-align: center; text-decoration: none; color: var(--white); position: relative; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; display: flex; flex-direction: column; align-items: center; }
/*La carte « mise en avant » : liseré un peu plus présent au repos.
   En classe et non en style inline : un style inline écrasait la règle :hover.*/
.product-card--featured { border-color: rgba(201,168,76,0.35); }
/*Halo respirant : opacity animée sur un calque, pas de box-shadow en boucle*/
.product-card > .card-breath { position: absolute; inset: -1px; border-radius: 3px; box-shadow: 0 0 40px rgba(201,168,76,0.15); opacity: 0; pointer-events: none; z-index: 0; animation: glowFade 5s ease-in-out infinite; }
/*:nth-of-type et non :nth-child — .vs-divider est le 1er enfant de la grille,
   l'ancien nth-child(2) décalait tous les délais d'une carte.*/
.product-card:nth-of-type(2) > .card-breath { animation-delay: 2.5s; }
.product-card:hover > .card-breath, .product-card:focus-visible > .card-breath { animation-play-state: paused; opacity: 0; }
/*Chiffre fantôme géant en fond de carte.
   Placé en bas à GAUCHE : en haut à droite il passait sous le ruban.*/
.product-ghost-num { position: absolute; bottom: -16px; left: -4px; font-family: 'Cormorant Garamond', serif; font-size: 116px; font-weight: 700; color: rgba(201,168,76,0.04); line-height: 1; pointer-events: none; z-index: 1; transition: color 0.4s; }
.product-card:hover .product-ghost-num { color: rgba(201,168,76,0.08); }
/*── Rubans d'angle ──
   Largeur FIXE (200px) et non dépendante du texte : les deux rubans ont
   donc exactement la même géométrie, quelle que soit la longueur du mot.
   Les 200px dépassent largement de part et d'autre du coin, donc les deux
   extrémités sortent de la carte au lieu de s'arrêter net à l'intérieur.*/
:where(.pg-strategies) .product-ribbon { position: absolute; top: 19px; right: -70px; width: 200px; padding: 5px 0; text-align: center; transform: rotate(45deg); background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%); color: #000; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; line-height: 1.4; white-space: nowrap; overflow: hidden; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
:where(.pg-index) .product-ribbon { position: absolute; top: 28px; right: -56px; width: 200px; padding: 5px 0; text-align: center; transform: rotate(45deg); background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%); color: #000; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; line-height: 1.4; white-space: nowrap; overflow: hidden; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
/*Reflet qui balaie le ruban*/
.product-ribbon::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); animation: ribbonShine 4.5s ease-in-out infinite; }
/*Décalage pour que les deux reflets ne brillent pas à l'unisson*/
.product-card:nth-of-type(2) .product-ribbon::after { animation-delay: 2.2s; }
/*Pour remettre l'accent sur l'offre gratuite uniquement, il suffit de
   remplacer le sélecteur ci-dessus par :
   .product-card:nth-of-type(2) .product-ribbon::after { display: none; }*/
/*Bordure animée au survol (conic-gradient).
   Le masque "exclude" évide le centre : sans lui, le dégradé conique
   remplit toute la carte au lieu de dessiner un liseré de 1px.*/
.product-card-border { position: absolute; inset: 0; border-radius: 3px; padding: 1px; opacity: 0; transition: opacity 0.4s; pointer-events: none; overflow: hidden; z-index: 4; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.product-card-border::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent 0deg, var(--gold-light) 40deg, transparent 100deg); animation: rotateBorder 3s linear infinite; animation-play-state: paused; will-change: transform; }
.product-card:hover .product-card-border, .product-card:focus-visible .product-card-border { opacity: 1; }
.product-card:hover .product-card-border::before, .product-card:focus-visible .product-card-border::before { animation-play-state: running; }
/*Filet lumineux en haut de carte*/
.product-card::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 300%; background: linear-gradient(90deg, transparent, var(--gold) 45%, var(--gold-light) 50%, var(--gold) 55%, transparent); background-size: 50% 100%; animation: borderShimmer 7s linear infinite; z-index: 2; }
/*Halo radial au survol*/
.product-card::after { content: ''; position: absolute; top: -60%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 60%); opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 1; }
/*Simple élévation, sans agrandissement : le scale(1.015) donnait
   une impression de carte qui gonfle au survol.*/
.product-card:hover { border-color: rgba(201,168,76,0.6); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 26px rgba(201,168,76,0.12); }
.product-card:hover::after { opacity: 1; }
/*── Icône ──*/
.product-icon { width: 50px; height: 50px; border: 1px solid rgba(201,168,76,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--gold); transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease); position: relative; z-index: 2; background: rgba(201,168,76,0.03); }
.product-icon svg { width: 20px; height: 20px; }
/*Onde qui s'échappe : transform+opacity, pas de box-shadow animée*/
.product-icon::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.4); animation: iconRing 2.6s ease-out infinite; pointer-events: none; }
.product-card:nth-of-type(2) .product-icon::after { animation-delay: 1.3s; }
.product-card:hover .product-icon { border-color: var(--gold); background: rgba(201,168,76,0.14); transform: scale(1.06) rotate(-6deg); }
.product-card:hover .product-icon::after { animation: none; opacity: 0; }
/*── Contenu carte ──*/
.product-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; position: relative; z-index: 2; }
.product-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(21px, 3.2vw, 27px); font-weight: 700; margin-bottom: 13px; line-height: 1.12; position: relative; z-index: 2; }
.product-divider { width: 28px; height: 1px; background: rgba(201,168,76,0.35); margin: 0 0 14px; position: relative; z-index: 2; }
.product-stat { font-size: 12px; letter-spacing: 0.3px; color: var(--muted-soft); margin-bottom: 13px; position: relative; z-index: 2; line-height: 1.7; }
.product-stat strong { color: var(--white); font-weight: 500; }
/*Repère de prix : qualifie le visiteur avant le clic*/
.product-price { font-size: 12px; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 14px; position: relative; z-index: 2; }
.product-price strong { color: var(--white); font-weight: 500; }
/*Pastille "essai gratuit" sous la description*/
.product-trial-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,168,76,0.35); background: rgba(201,168,76,0.07); border-radius: 999px; padding: 5px 12px; margin-bottom: 15px; position: relative; z-index: 2; }
.product-trial-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; flex-shrink: 0; }
/*Ligne bonus révélée au survol*/
.product-hover-hint { font-size: 12px; color: var(--gold); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.35s, max-height 0.35s, margin 0.35s; position: relative; z-index: 2; letter-spacing: 0.5px; }
.product-card:hover .product-hover-hint, .product-card:focus-visible .product-hover-hint { opacity: 1; max-height: 40px; margin-bottom: 14px; }
.product-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,168,76,0.3); padding: 12px 22px; text-align: center; margin-top: auto; position: relative; z-index: 2; transition: background 0.35s, color 0.35s, border-color 0.35s, letter-spacing 0.35s; }
.product-cta svg { transition: transform 0.3s; width: 12px; height: 12px; flex-shrink: 0; }
.product-card:hover .product-cta, .product-card:focus-visible .product-cta { background: var(--gold); color: #000; border-color: var(--gold); letter-spacing: 3px; }
.product-card:hover .product-cta svg { transform: translateX(5px); }
/*── Indicateur de scroll (le contenu sous les cartes était invisible) ──*/
.scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; color: var(--gold); text-decoration: none; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; position: relative; z-index: 2; opacity: 0.75; transition: opacity 0.3s; }
.scroll-hint:hover { opacity: 1; }
/*Disparaît dès que le visiteur a compris le message*/
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.scroll-hint svg { width: 16px; height: 16px; animation: scrollBounce 2.4s ease-in-out infinite; }
/*══════════════════════════════════════════════
   6. SECTIONS
   ══════════════════════════════════════════════*/
/*width:100% : le body est en flex-column, sans ça une section au contenu
   étroit (la FAQ) rétrécissait à la largeur de son contenu et se décalait.*/
:where(.f-a) section { padding: 120px 60px; max-width: 1200px; width: 100%; margin: 0 auto; }
:where(.f-p) .fade-up-2 { animation: fadeUp 0.9s cubic-bezier(.22,1,.36,1) 0.15s both; }
:where(.f-p) .fade-up-3 { animation: fadeUp 0.9s cubic-bezier(.22,1,.36,1) 0.3s both; }
:where(.f-p) .fade-up-4 { animation: fadeUp 0.9s cubic-bezier(.22,1,.36,1) 0.45s both; }
/*── ANIMATIONS AU SCROLL ──*/
:where(.pg-indicator) .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
:where(.pg-indicator) .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/*NAV*/
/*HERO*/
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 50px 60px 1px; text-align: center; overflow: hidden; }
.hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 65%); pointer-events: none; }
.hero-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-lines::before, .hero-lines::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(201,168,76,0.12) 30%, rgba(201,168,76,0.12) 70%, transparent); }
.hero-lines::before { left: 3%; }
.hero-lines::after { right: 3%; }
.hero-content { position: relative; z-index: 2; max-width: 900px; }
.hero-title { font-size: clamp(60px, 18vw, 90px); letter-spacing: 4px; }
.hero-floedge { color: #E8E8E0; font-family: 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: 4px; }
.hero-sub { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 50px; margin-top: 20px; }
.hero-cta-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: #000; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s; text-decoration: none; border: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 60px rgba(201,168,76,0.25); }
.btn-secondary { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,1); cursor: pointer; transition: color 0.3s; text-decoration: none; border: none; background: none; padding: 18px 0; }
.btn-secondary:hover { color: var(--white); }
/*STATS*/
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-item { padding: 40px; text-align: center; border-right: 1px solid var(--border); }
.stat-item:last-child { border-right: none; }
.stat-number { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
/*SECTIONS*/
:where(.f-p) section { padding: 120px 60px; max-width: 1200px; margin: 0 auto; }
.section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--gold); opacity: 0.4; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 4vw, 56px); font-weight: 300; line-height: 1.15; margin-bottom: 24px; text-wrap: balance; }
.section-title strong { font-weight: 700; }
.section-intro { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); max-width: 620px; margin-bottom: 8px; }
/*══════════════════════════════════════════════
   6b. COMMENT ÇA MARCHE — trois étapes, du paiement à l'accès
   ══════════════════════════════════════════════*/
:where(.f-a) #comment { border-top: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.step-card { position: relative; border: 1px solid var(--border); padding: 34px 30px 30px; background: rgba(201,168,76,0.025); transition: border-color 0.35s, background 0.35s; }
.step-card:hover { border-color: rgba(201,168,76,0.45); background: rgba(201,168,76,0.05); }
.step-num { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 700; line-height: 1; color: var(--gold); opacity: 0.6; margin-bottom: 18px; }
:where(.f-a) .step-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.step-text { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.step-text strong { color: var(--white); font-weight: 500; }
.step-text a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); }
.steps-footnote { margin-top: 28px; font-size: 13px; line-height: 1.8; color: var(--text-3); border-left: 2px solid rgba(201,168,76,0.45); padding-left: 16px; max-width: 720px; }
/*══════════════════════════════════════════════
   6c. FAQ — <details> natif : accessible, sans JavaScript
   ══════════════════════════════════════════════*/
#faq { border-top: 1px solid var(--border); }
.faq-list { margin-top: 44px; max-width: 820px; }
.faq-item { border-top: 1px solid rgba(201,168,76,0.14); }
.faq-item:last-child { border-bottom: 1px solid rgba(201,168,76,0.14); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; line-height: 1.3; transition: color 0.3s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid rgba(201,168,76,0.4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 300; color: var(--gold); transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.faq-item[open] summary { color: var(--gold); }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--gold); color: #000; }
.faq-item summary:hover { color: var(--gold); }
.faq-answer { padding: 0 4px 24px; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); max-width: 720px; }
.faq-answer strong { color: var(--white); font-weight: 500; }
.faq-answer a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); }
/*══════════════════════════════════════════════
   7. À PROPOS  (converti en classes : les anciens sélecteurs
   du type "> div:first-child > div:last-child > div" cassaient
   au moindre déplacement de balise)
   ══════════════════════════════════════════════*/
#apropos { border-top: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; margin-top: 60px; }
.about-side { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.about-avatar { width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.4); background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.about-avatar span { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 90px; color: var(--gold); line-height: 1; margin-top: 8px; }
.about-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; letter-spacing: 2px; }
.about-role { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.about-stats { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.about-stat { border: 1px solid var(--border); padding: 14px 20px; text-align: center; transition: border-color 0.35s, background 0.35s,
              opacity 0.6s var(--ease), transform 0.6s var(--ease); }
/*Apparition en cascade des trois encarts*/
.about-side:not(.is-visible) .about-stat { opacity: 0; transform: translateY(14px); }
.about-side.is-visible .about-stat:nth-child(1) { transition-delay: 0.25s; }
.about-side.is-visible .about-stat:nth-child(2) { transition-delay: 0.38s; }
.about-side.is-visible .about-stat:nth-child(3) { transition-delay: 0.51s; }
.about-stat:hover { border-color: rgba(201,168,76,0.45); background: rgba(201,168,76,0.03); }
.about-stat-value { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.about-stat-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.about-body { display: flex; flex-direction: column; gap: 28px; }
.about-text { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.about-text strong { color: var(--white); font-weight: 500; }
.about-text .hl { color: var(--gold); font-weight: 500; }
.about-benefits { border: 1px solid var(--border); padding: 32px 36px; background: rgba(201,168,76,0.04); margin-top: 8px; }
.about-benefits-title { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.about-benefit-list { display: flex; flex-direction: column; gap: 14px; }
.about-benefit { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; }
.about-benefit svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
/*══════════════════════════════════════════════
   8. CONTACT
   ══════════════════════════════════════════════*/
:where(.f-a) #contact { border-top: 1px solid var(--border); padding: 80px 60px; text-align: center; background: var(--bg); max-width: none; }
.contact-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.contact-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; margin-bottom: 20px; }
.contact-sub { font-size: var(--fs-body); color: var(--text-2); margin-bottom: 28px; line-height: 1.7; }
.contact-btn { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--border); padding: 16px 36px; color: var(--gold); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: background 0.35s, border-color 0.35s, color 0.35s; }
.contact-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.contact-btn:hover { background: var(--gold); color: #000; border-color: var(--gold); }
/*══════════════════════════════════════════════
   9. FOOTER
   ══════════════════════════════════════════════*/
/*<button> et non <a onclick> : accessible au clavier.
   Même règle pour les liens (portail Stripe, CGV) : plus de style inline.*/
/*══════════════════════════════════════════════
   10. MODALES LÉGALES
   ══════════════════════════════════════════════*/
:where(.f-a) .legal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 4000; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 24px; }
:where(.f-a) .legal-overlay.active { display: flex; }
/*Le conteneur ne défile plus : c'est .legal-body qui scrolle.
   Du coup le bouton de fermeture reste visible en haut, au lieu de
   disparaître dès qu'on descendait dans le texte.*/
:where(.f-a) .legal-modal { background: var(--bg2); border: 1px solid var(--border); max-width: 680px; width: 100%; max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: fadeUp 0.5s var(--ease) both; }
:where(.f-a) .legal-body { overflow-y: auto; overscroll-behavior: contain; padding: 52px; }
:where(.f-a) .legal-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
:where(.f-a) .legal-modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 700; margin-bottom: 32px; padding-right: 50px; color: var(--white); }
:where(.f-a) .legal-modal h3 { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--gold); margin: 28px 0 12px; }
:where(.f-a) .legal-modal p,
:where(.f-a) .legal-modal li { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 10px; }
:where(.f-a) .legal-modal ul { padding-left: 20px; }
:where(.f-a) .legal-close-btn { position: absolute; top: 20px; right: 20px; z-index: 2; background: var(--bg2); border: 1px solid var(--border); color: var(--white); font-size: 18px; width: 40px; height: 40px; cursor: pointer; line-height: 1; transition: border-color 0.3s, color 0.3s; }
:where(.f-a) .legal-close-btn:hover { border-color: var(--gold); color: var(--gold); }
/*══════════════════════════════════════════════
   11. BARRE CTA COLLANTE (mobile uniquement)
   Apparaît dès que le visiteur a dépassé les cartes : sans elle,
   il n'a plus aucun moyen d'agir une fois dans "À propos".
   ══════════════════════════════════════════════*/
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3500; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(6,6,6,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--border); transform: translateY(115%); transition: transform 0.45s var(--ease); }
.mobile-cta.is-visible { transform: translateY(0); }
.mcta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; padding: 8px 6px; border: 1px solid rgba(201,168,76,0.4); border-radius: 2px; color: var(--gold); text-decoration: none; text-align: center; }
.mcta-name { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; }
.mcta-note { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.8; }
.mcta--primary { background: var(--gold); border-color: var(--gold); color: #000; }
.mcta--primary .mcta-note { opacity: 0.65; }
.mcta:active { transform: scale(0.97); }
/*══════════════════════════════════════════════
   12. ÉCRANS TACTILES (pas de :hover possible)
   Tout l'état de survol était inaccessible au doigt : le bouton doré,
   la phrase de positionnement, la bordure animée. On les rend natifs.
   ══════════════════════════════════════════════*/
@media (hover: none) {
  /*Le CTA est doré d'emblée : au doigt, un simple filet ne se lit pas
       comme un bouton d'action.*/
  .product-cta { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 500; }
  /*La phrase bonus n'était jamais lue sur téléphone*/
  .product-hover-hint { opacity: 0.9; max-height: none; margin-bottom: 12px; font-size: 12px; line-height: 1.45; }
  .product-card:active { transform: scale(0.975); transition: transform 0.14s ease; }
  .product-card:active .product-icon { border-color: var(--gold); background: rgba(201,168,76,0.14); }
  .contact-btn:active { background: var(--gold); color: #000; }
}
/*══════════════════════════════════════════════
   13. RESPONSIVE  (un seul point de rupture, au lieu de 4 blocs dispersés)
   ══════════════════════════════════════════════*/
@media (max-width: 900px) {
  :where(.f-a) section { padding: 90px 32px; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  :where(.f-a) #contact { padding: 70px 32px; }
  /*Hero empilé : promesse centrée, capture en dessous*/
  .hero-top { grid-template-columns: 1fr; gap: 34px; text-align: center; margin-bottom: 52px; }
  .hero-copy { align-items: center; }
  .selector-title { max-width: 560px; }
  .selector-subtitle { max-width: 560px; }
  :where(.f-a) .hero-proofs { align-items: center; }
  .hero-visual { max-width: 640px; width: 100%; margin: 0 auto; }
  .steps-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
}
/*── TÉLÉPHONE : audience principale, donc le bloc le plus soigné ──*/
@media (max-width: 700px) {
  .selector-wrap { padding: 34px 14px 34px; }
  .selector-badge { font-size: 11px; letter-spacing: 2.5px; padding: 6px 14px; margin-bottom: 20px; }
  .selector-title { font-size: clamp(30px, 8.6vw, 38px); margin-bottom: 12px; }
  .selector-subtitle { margin-bottom: 20px; padding: 0 4px; }
  :where(.f-a) .hero-proofs { gap: 8px 16px; }
  :where(.f-a) .hero-proofs li { font-size: 13px; }
  .hero-top { gap: 26px; margin-bottom: 40px; }
  .hero-visual-caption { font-size: 11px; letter-spacing: 1.4px; padding: 9px 12px; flex-direction: column; align-items: flex-start; gap: 3px; white-space: normal; }
  .selector-heading { margin-bottom: 18px; }
  .selector-heading-eyebrow { font-size: 11px; letter-spacing: 3px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-card { padding: 22px 10px 18px; }
  .product-icon { width: 42px; height: 42px; margin-bottom: 12px; }
  .product-icon svg { width: 17px; height: 17px; }
  .product-eyebrow { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 7px; }
  .product-name { font-size: 18px; margin-bottom: 9px; }
  .product-divider { margin-bottom: 11px; }
  .product-stat { font-size: 12px; letter-spacing: 0; line-height: 1.5; margin-bottom: 10px; }
  .product-price { font-size: 12px; letter-spacing: 0; line-height: 1.5; margin-bottom: 11px; }
  .product-trial-tag { font-size: 11px; letter-spacing: 0.4px; padding: 5px 9px; gap: 4px; margin-bottom: 12px; }
  .product-cta { font-size: 11px; letter-spacing: 0.8px; padding: 12px 8px; gap: 5px; width: 100%; justify-content: center; line-height: 1.3; }
  .product-cta svg { width: 9px; height: 9px; }
  /*Sur une carte de 180px, le chiffre finit derrière le bouton : on le retire*/
  .product-ghost-num { display: none; }
  :where(.pg-strategies) .product-ribbon { top: 19px; right: -71px; font-size: 11px; letter-spacing: 0.5px; padding: 4px 0; }
  :where(.pg-index) .product-ribbon { top: 27px; right: -57px; font-size: 11px; letter-spacing: 0.5px; padding: 4px 0; }
  /*Particules plus discrètes sur mobile : le calque plafonne à 55 %*/
  .floating-particles { animation-name: particlesAppearSoft; }
  .floating-particles span { width: 4px; height: 4px; }
  .scroll-hint { margin-top: 32px; font-size: 11px; letter-spacing: 2px; }
  /*Comment ça marche + FAQ compacts*/
  :where(.f-a) #comment,
  :where(.f-a) #faq { padding: 60px 20px; }
  :where(.f-a) #comment .section-title,
  :where(.f-a) #faq .section-title { margin-bottom: 12px; }
  .step-card { padding: 26px 22px 24px; }
  .step-num { font-size: 36px; margin-bottom: 12px; }
  :where(.f-a) .step-title { font-size: 21px; }
  .faq-list { margin-top: 30px; }
  .faq-item summary { font-size: 18px; padding: 18px 2px; }
  .faq-answer { padding: 0 2px 20px; }
  /*À propos compact*/
  #apropos { padding: 60px 20px; }
  #apropos .section-title { margin-bottom: 12px; }
  .about-grid { gap: 26px; margin-top: 36px; }
  .about-avatar { width: 84px; height: 84px; }
  .about-avatar span { font-size: 60px; margin-top: 6px; }
  .about-name { font-size: 19px; }
  .about-stats { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .about-stat { flex: 1 1 30%; padding: 10px 8px; }
  .about-stat-value { font-size: 18px; }
  .about-stat-label { font-size: 11px; letter-spacing: 1px; }
  .about-benefits { padding: 22px 20px; }
  .about-benefits-title { letter-spacing: 2.4px; line-height: 1.6; }
  .about-benefit { gap: 11px; }
  :where(.f-a) #contact { padding: 60px 20px; }
  .contact-title { font-size: 26px; }
  .contact-btn { padding: 14px 24px; font-size: 11px; letter-spacing: 2px; }
  /*La barre CTA apparaît, il faut lui laisser la place au pied de page*/
  .mobile-cta { display: grid; }
  :where(.f-a) body { padding-bottom: 70px; }
  /*Rendu différé des sections hors écran — gain net sur mobile modeste*/
  :where(.f-a) #contact { content-visibility: auto; contain-intrinsic-size: auto 460px; }
  /*── Modale en feuille inférieure : bien plus naturel au pouce ──*/
  :where(.f-a) .legal-overlay { backdrop-filter: blur(4px); padding: 0; align-items: flex-end; }
  :where(.f-a) .legal-modal { max-height: 88dvh; border-radius: 14px 14px 0 0; border-bottom: none; animation: sheetUp 0.42s var(--ease) both; }
  :where(.f-a) .legal-modal::before { border-radius: 14px 14px 0 0; }
  /*En-tête opaque + poignée : sans cette bande, le texte défilait
       derrière la poignée et venait mourir au ras du bord.*/
  :where(.f-a) .legal-modal::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44px; background-color: var(--bg2); background-image: linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)); background-size: 38px 4px; background-position: center 10px; background-repeat: no-repeat; border-radius: 14px 14px 0 0; z-index: 2; }
  :where(.f-a) .legal-body { padding: 52px 20px calc(28px + env(safe-area-inset-bottom)); }
  :where(.f-a) .legal-close-btn { top: 7px; right: 12px; width: 30px; height: 30px; font-size: 15px; z-index: 3; }
  :where(.f-a) .legal-modal h2 { font-size: 25px; margin-bottom: 22px; padding-right: 0; }
}
/*── TRÈS PETITS ÉCRANS (≤ 340px : iPhone SE 1re gén., vieux Android) ──
   Deux colonnes n'y tiennent plus, on empile. Au-dessus de 340px les deux
   cartes restent côte à côte : c'est le principe même du sélecteur, on doit
   pouvoir comparer les deux offres d'un coup d'œil sans scroller.*/
@media (max-width: 340px) {
  .product-grid { grid-template-columns: 1fr; gap: 30px; }
  .product-card { padding: 20px 20px 18px; }
  .product-icon { width: 42px; height: 42px; margin-bottom: 10px; }
  .product-name { font-size: 20px; margin-bottom: 8px; }
  .product-divider { margin-bottom: 10px; }
  .product-stat { font-size: 12px; line-height: 1.55; margin-bottom: 10px; }
  .product-trial-tag { font-size: 11px; margin-bottom: 11px; }
  .product-cta { font-size: 11px; letter-spacing: 1.5px; }
  .product-ghost-num { font-size: 100px; }
  .about-stats { flex-direction: column; }
  .about-stat { flex: 1 1 auto; }
}
/*══════════════════════════════════════════════
   12. MOUVEMENT RÉDUIT
   ══════════════════════════════════════════════*/
@media (prefers-reduced-motion: reduce) {
  :where(.f-a),
  :where(.f-a) *,
  :where(.f-a)::before,
  :where(.f-a) *::before,
  :where(.f-a)::after,
  :where(.f-a) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  :where(.f-a) .reveal { opacity: 1; transform: none; }
  .about-side:not(.is-visible) .about-stat { opacity: 1; transform: none; }
  .floating-particles, .product-card > .card-breath { display: none; }
  .mobile-cta { transform: translateY(0); }
  .mobile-cta:not(.is-visible) { display: none; }
}
/*══════════════════════════════════════════════
   14. BARRE DE NAVIGATION + SOBRIÉTÉ
   ══════════════════════════════════════════════*/
:root:where(.f-a) { color-scheme: dark; }
:where(.f-a) ::selection { background: rgba(201,168,76,0.32); color: #fff; }
.selector-wrap { padding-top: 120px; }
@media (max-width: 700px) {
  .selector-wrap { padding-top: 84px; }
  /*Pas de particules sur téléphone : batterie et sobriété*/
  .floating-particles { display: none; }
}
/*Sobriété : plus de mouvement permanent sur les cartes (reflet du ruban,
   onde de l'icône, halo respirant). Le survol garde ses effets.*/
.product-ribbon::after, .product-icon::after, .product-card > .card-breath { display: none; }
/*══════════ TÉLÉPHONE : lisibilité et zones tactiles ══════════*/
html:where(.f-a) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(.f-a) a,
:where(.f-a) button,
:where(.f-a) summary { -webkit-tap-highlight-color: rgba(201,168,76,0.18); }
@media (max-width: 700px) {
  .product-ribbon { font-size: 11px; }
  .product-eyebrow, .product-trial-tag, .selector-badge, .selector-heading-eyebrow, .about-stat-label, .mcta-note, .scroll-hint { font-size: 11px; }
  .product-hover-hint { font-size: 12px; }
  .hero-visual-caption span { font-size: 12px; }
}
/*══════════ Page Stratégies ══════════*/
.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; }
.hero-top--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; text-align: center; margin-bottom: 52px; }
.hero-top--solo .hero-copy { align-items: center; }
.hero-top--solo .selector-title, .hero-top--solo .selector-subtitle { max-width: 680px; margin-left: auto; margin-right: auto; }
.hero-top--solo .hero-proofs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.product-grid--strat { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1320px; }
/*Quatre cartes : une ligne sur grand écran, deux par ligne en dessous de 1180 px, téléphone compris (version compacte plus bas)*/
@media (max-width: 1180px) {
  .product-grid--strat { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
:where(.pg-strategies) .product-card:nth-of-type(3) > .card-breath { animation-delay: 1.2s; }
:where(.pg-strategies) .product-card:nth-of-type(3) .product-ribbon::after { animation-delay: 3.3s; }
:where(.pg-strategies) .product-card:nth-of-type(3) .product-icon::after { animation-delay: 0.65s; }
:where(.pg-strategies) .product-card:nth-of-type(4) > .card-breath { animation-delay: 3.7s; }
:where(.pg-strategies) .product-card:nth-of-type(4) .product-ribbon::after { animation-delay: 4.4s; }
:where(.pg-strategies) .product-card:nth-of-type(4) .product-icon::after { animation-delay: 1.95s; }
/*Numéros des cartes : chiffres alignés (le 3 et le 4 de Cormorant descendaient sous la ligne), plus discrets,
   au même endroit dans chaque carte*/
.product-grid--strat .product-ghost-num { font-size: 64px; left: 14px; bottom: 10px; font-variant-numeric: lining-nums; }
/*Le « 3 » de VWAP M3 : Cormorant a des chiffres qui descendent sous la ligne, on prend un chiffre simple*/
:where(.pg-strategies) .num-plain { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .86em; }
/*Barre mobile : quatre stratégies*/
:where(.pg-strategies) .mobile-cta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-left: 10px; padding-right: 10px; }
:where(.pg-strategies) .mcta { padding: 8px 4px; }
:where(.pg-strategies) .mcta-name { letter-spacing: 0.6px; }
:where(.pg-strategies) .mcta-note { letter-spacing: 0.2px; }
#comparatif, #commun { border-top: 1px solid var(--border); }
.cmp-wrap { margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(201,168,76,0.1); line-height: 1.6; }
.cmp-table thead th { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--white); background: #0b0b0b; }
.cmp-table thead th a { color: inherit; text-decoration: none; }
.cmp-table thead th a:hover { color: var(--gold); }
.cmp-table tbody th { width: 28%; font-weight: 400; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); padding-top: 17px; }
.cmp-table td { color: var(--muted-soft); }
.cmp-table tr.cmp-sep th, .cmp-table tr.cmp-sep td { border-top: 1px solid var(--border); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-num { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--white); line-height: 1.1; white-space: nowrap; }
.cmp-links td a { color: var(--gold); text-decoration: none; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; border-bottom: 1px solid rgba(201,168,76,0.35); padding-bottom: 2px; }
.cmp-links td a:hover { border-bottom-color: var(--gold); }
.cmp-hint { display: none; }
.cmp-note { margin-top: 18px; font-size: 13px; line-height: 1.8; color: var(--text-3); max-width: 820px; }
@media (max-width: 700px) {
  #comparatif, #commun { padding: 60px 20px; }
  #comparatif .section-title, #commun .section-title { margin-bottom: 12px; }
  .hero-top--solo { margin-bottom: 34px; }
  .cmp-hint { display: block; margin-top: 26px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); opacity: 0.8; }
  .cmp-wrap { margin-top: 10px; }
  .cmp-table { font-size: 12.5px; table-layout: fixed; }
  .cmp-table th, .cmp-table td { padding: 12px 12px; }
  .cmp-table thead th { font-size: 19px; }
  .cmp-table thead th:first-child, .cmp-table tbody th { position: sticky; left: 0; z-index: 1; background: #0b0b0b; }
  .cmp-table tbody th { letter-spacing: 1.5px; }
  .cmp-num { font-size: 21px; }
}
/*Comparatif à quatre colonnes de même largeur (placé après les règles de base pour les remplacer)*/
.cmp-table { min-width: 940px; }
.cmp-table thead th:first-child, .cmp-table tbody th { width: 18%; }
.cmp-table thead th + th { width: 20.5%; }
/*Tableau plus large que l'écran sur tablette : on affiche aussi l'invite à le faire glisser*/
@media (min-width: 701px) and (max-width: 1080px) {
  .cmp-hint { display: block; margin-top: 26px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); opacity: 0.8; }
  .cmp-wrap { margin-top: 10px; }
}
@media (max-width: 700px) {
  .cmp-table { min-width: 744px; }
  .cmp-table thead th:first-child, .cmp-table tbody th { width: 104px; }
  .cmp-table thead th + th { width: auto; }
}
/*══════════ Cartes des stratégies sur téléphone : deux par ligne, version compacte ══════════
   L'essentiel seulement (catégorie, nom, unité de temps, prix) : le détail est sur chaque page
   et dans le comparatif plus bas.*/
@media (max-width: 700px) {
  .product-grid--strat { gap: 10px; }
  .product-grid--strat .product-card { padding: 18px 10px 12px; }
  .product-grid--strat .product-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .product-grid--strat .product-icon svg { width: 16px; height: 16px; }
  .product-grid--strat .product-eyebrow { letter-spacing: 1.2px; margin-bottom: 6px; }
  .product-grid--strat .product-name { font-size: 20px; margin-bottom: 10px; }
  .product-grid--strat .product-divider, .product-grid--strat .product-stat, .product-grid--strat .product-hover-hint, .product-grid--strat .tt-mkt, .product-grid--strat .pp-sep { display: none; }
  .product-grid--strat .product-trial-tag { letter-spacing: 1px; padding: 4px 10px; margin-bottom: 10px; }
  .product-grid--strat .product-price { font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
  .product-grid--strat .pp-avie { display: block; }
  .product-grid--strat .product-cta { padding: 11px 6px; letter-spacing: 0.6px; }
}
/*Sous 380 px, « Voir la stratégie » ne tient plus sur une ligne : le bouton devient « Voir → »*/
@media (max-width: 380px) {
  .product-grid--strat .cta-long { display: none; }
}
@media (max-width: 340px) {
  .product-grid--strat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product-grid--strat .product-card { padding: 16px 8px 10px; }
  .cmp-details .cmp-hint { letter-spacing: 1.2px; }
}
/*══════════ Comparatif visuel : un critère par carte, les quatre stratégies sur la même échelle ══════════
   Même couleur pour les quatre (pas de classement) ; chaque valeur est écrite en clair,
   et le tableau complet reste derrière le bouton.*/
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.vs-card { margin: 0; min-width: 0; background: linear-gradient(165deg, #0F0F0F 0%, #070707 100%); border: 1px solid var(--border); border-radius: 3px; padding: 24px 24px 20px; }
.vs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.vs-title { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.vs-sub { margin: 6px 0 18px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.vs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.vs-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 72px; align-items: center; gap: 12px; }
.vs-name { font-size: 12px; color: var(--muted-soft); white-space: nowrap; }
.vs-track { position: relative; height: 12px; background: rgba(255,255,255,0.045); }
.vs-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(201,168,76,0.75) 0%, rgba(232,201,106,0.95) 100%); transition: width 1.1s var(--ease); transition-delay: calc(0.25s + var(--i, 0) * 0.09s); }
.vs-card.is-visible .vs-fill { width: calc(var(--v) * 100%); }
.vs-val { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; line-height: 1; color: var(--white); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.vs-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3); }
/*Bouton « Voir le comparatif détaillé » (details/summary natif : marche aussi sans JavaScript)*/
.cmp-details { margin-top: 30px; }
.cmp-toggle { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 26px; border: 1px solid rgba(201,168,76,0.45); color: var(--gold); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.cmp-toggle::-webkit-details-marker { display: none; }
.cmp-toggle::marker { content: ''; }
.cmp-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.cmp-details[open] .cmp-toggle svg { transform: rotate(180deg); }
.cmp-details[open] .cmp-toggle-open, .cmp-details:not([open]) .cmp-toggle-close { display: none; }
@media (hover: hover) {
  .cmp-toggle:hover { background: var(--gold); color: #000; border-color: var(--gold); }
}
.cmp-details .cmp-wrap { margin-top: 18px; animation: cmpOpen 0.45s var(--ease) both; }
@keyframes cmpOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
  .cmp-details .cmp-hint { margin-top: 20px; }
  .cmp-details .cmp-wrap { margin-top: 10px; }
}
@media (max-width: 700px) {
  .vs-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .vs-card { padding: 18px 16px 16px; }
  .vs-sub { margin-bottom: 14px; font-size: 12px; }
  .vs-rows { gap: 11px; }
  .vs-row { grid-template-columns: 64px minmax(0, 1fr) 60px; gap: 10px; }
  .vs-name { font-size: 12px; }
  .vs-track { height: 10px; }
  .vs-val { font-size: 19px; }
  .cmp-toggle { display: flex; width: 100%; padding: 0 12px; }
}
/*══════════ Le point fort de chaque stratégie ══════════
   Une carte par stratégie, un fait vérifiable tiré de sa page (backtest 12 mois ou règles).*/
.cmp-sublabel { display: flex; align-items: center; gap: 14px; margin: 44px 0 16px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.cmp-sublabel::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cmp-sublabel + .vs-grid { margin-top: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pf-card { position: relative; overflow: hidden; min-width: 0; display: flex; flex-direction: column; padding: 22px 20px 20px; text-decoration: none; color: var(--white); background: linear-gradient(165deg, #13110A 0%, #0A0906 55%, #070707 100%); border: 1px solid rgba(201,168,76,0.28); border-radius: 3px; transition: border-color 0.35s, transform 0.35s var(--ease); }
.pf-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.85; }
@media (hover: hover) {
  .pf-card:hover { border-color: var(--gold); transform: translateY(-3px); }
}
.pf-name { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; padding-right: 18px; }
.pf-arrow { position: absolute; top: 20px; right: 16px; width: 14px; height: 14px; color: var(--gold); opacity: 0.8; }
.pf-big { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--white); white-space: nowrap; font-variant-numeric: lining-nums; margin-bottom: 8px; }
.pf-what { font-size: 12px; line-height: 1.55; color: var(--muted-soft); margin-bottom: 16px; }
.pf-facts { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid rgba(201,168,76,0.15); display: grid; gap: 7px; }
.pf-facts li { position: relative; padding-left: 18px; font-size: 12px; line-height: 1.45; color: var(--white); }
.pf-facts li::before { content: ''; position: absolute; left: 1px; top: 3px; width: 9px; height: 5px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
@media (max-width: 1180px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cmp-sublabel { margin: 30px 0 12px; font-size: 11px; letter-spacing: 2px; }
  .pf-grid { gap: 10px; }
  .pf-card { padding: 16px 12px 14px; }
  .pf-name { letter-spacing: 1px; margin-bottom: 10px; }
  .pf-arrow { top: 15px; right: 10px; width: 12px; height: 12px; }
  .pf-big { font-size: 31px; margin-bottom: 6px; }
  .pf-what { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
  .pf-facts { padding-top: 10px; gap: 6px; }
  .pf-facts li { font-size: 12px; padding-left: 15px; }
  .pf-facts li::before { width: 8px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-fill { transition: none; }
  .cmp-details .cmp-wrap { animation: none; }
}
/*══════════ Pack 4 stratégies ══════════*/
/*Le « 1 » de Scalp M1 : Cormorant a des chiffres de style ancien, on prend un chiffre simple posé sur la ligne*/
:where(.pg-vwap, .pg-scalp) .num-plain { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: .88em; }
:where(.pg-vwap, .pg-scalp) .hero-title .num-plain,
:where(.pg-vwap, .pg-scalp) strong .num-plain { font-weight: 500; font-size: .86em; }
/*── VIDEO SECTION ──*/
.video-section { border-top: 1px solid var(--border); background: var(--bg2); padding: 100px 24px 5px; }
.video-inner { max-width: 1048px; margin: 0 auto; padding: 0 60px; }
.video-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 60px; }
.video-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.video-desc strong { color: var(--gold); font-weight: 500; }
.video-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.video-points li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; }
.video-points li::before { content: '→'; color: var(--gold); font-size: 11px; margin-top: 2px; flex-shrink: 0; }
/*Lecteur vidéo*/
#demo { scroll-margin-top: 96px; }
/*l'ancre « Voir la démo » ne passe pas sous la barre fixe*/
@media (max-width: 900px) {
  #demo { scroll-margin-top: 76px; }
}
.video-player-wrap { position: relative; width: 100%; border: 1px solid rgba(201,168,76,0.2); background: #000; }
.video-player-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 2; }
.video-player-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 2; }
.video-player-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); background: rgba(6,6,6,0.9); }
.video-player-title { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-3); }
.video-player-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.video-player-badge::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; animation: pulse 2s infinite; }
:where(.f-p) video { width: 100%; display: block; background: #000; max-height: 520px; object-fit: contain; }
:where(.f-p) video:focus:not(:focus-visible) { outline: none; }
:where(.f-p) video:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.video-caption { padding: 14px 18px; background: rgba(6,6,6,0.9); border-top: 1px solid rgba(255,255,255,0.04); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); text-align: center; }
/*── SECTION PREUVES ──*/
.gallery-cta-new-wrap { position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #080808; }
/*Éventail*/
.fan-container { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; padding-bottom: 0; }
.fan-card { position: absolute; width: 220px; height: 310px; bottom: -80px; background-size: cover; background-position: center; border: 1px solid rgba(201,168,76,0.15); filter: blur(1.5px) saturate(0.5) brightness(0.6); transform-origin: center bottom; border-radius: 4px; }
.fan-1 { transform: rotate(-36deg) translateX(-20px); }
.fan-2 { transform: rotate(-18deg) translateX(-10px); }
.fan-3 { transform: rotate(0deg); }
.fan-4 { transform: rotate(18deg) translateX(10px); }
.fan-5 { transform: rotate(36deg) translateX(20px); }
.gallery-bg-overlay { position: absolute; inset: 0; background: linear-gradient(
    to top,
    rgba(8,8,8,0.2) 0%,
    rgba(8,8,8,0.55) 40%,
    rgba(8,8,8,0.75) 100%
  ); }
.gallery-cta-content { position: relative; z-index: 2; text-align: center; padding: 60px 32px; display: flex; flex-direction: column; align-items: center; }
.gallery-cta-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.gallery-cta-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 4vw, 40px); font-weight: 600; color: var(--white); margin-bottom: 10px; line-height: 1.15; }
.gallery-cta-sub { font-size: 13px; letter-spacing: 2px; color: var(--text-3); margin-bottom: 24px; }
.gallery-count-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(201,168,76,0.25); background: rgb(0,0,0); color: rgba(201,168,76,0.85); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; margin-bottom: 24px; }
.gallery-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: rgb(0,0,0); border: 1px solid rgba(201,168,76,0.5); color: var(--gold); font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: 16px 36px; cursor: pointer; transition: all 0.3s; }
.gallery-cta-btn:hover { background: rgb(0,0,0); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,168,76,0.15); }
@media (max-width: 600px) {
  .fan-card { width: 140px; height: 200px; bottom: -60px; }
  .gallery-cta-content { padding: 48px 20px; }
}
/*── GALERIE LIGHTBOX ──*/
.gallery-overlay { display: none; position: fixed; inset: 0; background: rgba(6,6,6,0.75); z-index: 3600; overflow-y: auto; backdrop-filter: blur(6px); overscroll-behavior: contain; }
.gallery-inner { max-width: 1100px; margin: 40px auto; padding: 60px 40px 100px; background: var(--bg); border: 1px solid var(--border); }
.gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; position: sticky; top: 0; background: rgba(6,6,6,0.92); padding: 28px 0; z-index: 10; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.gallery-header-title { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.gallery-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; }
.gallery-header h2 strong { font-weight: 700; }
.gallery-close-btn { background: none; border: 1px solid var(--border); color: var(--gold); font-size: 16px; width: 44px; height: 44px; cursor: pointer; transition: all 0.3s; flex-shrink: 0; font-family: 'Cormorant Garamond', serif; }
.gallery-close-btn:hover { border-color: var(--gold); background: var(--gold-dim); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gallery-item { cursor: pointer; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.gallery-item:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.gallery-item img { width: 100%; display: block; }
/*── LIGHTBOX PLEIN ÉCRAN ──*/
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.97); z-index: 3700; align-items: center; justify-content: center; padding: 40px; overflow: hidden; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid rgba(201,168,76,0.3); pointer-events: none; }
.lightbox-close-btn { position: absolute; top: 24px; right: 24px; background: none; border: 1px solid var(--border); color: var(--white); font-size: 20px; width: 44px; height: 44px; cursor: pointer; z-index: 10; }
.lightbox-close-btn:hover { border-color: var(--gold); }
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
/*FEATURES*/
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 60px; }
.feature-card { background: var(--bg); padding: 48px 40px; transition: background 0.3s; }
.feature-card:hover { background: var(--bg2); }
.feature-icon { width: 52px; height: 52px; border: 1px solid rgba(201,168,76,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; font-size: 20px; transition: border-color 0.3s; }
.feature-card:hover .feature-icon { border-color: var(--gold); }
.feature-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; margin-bottom: 14px; }
:where(.pg-strategy, .pg-fvg, .pg-vwap, .pg-scalp) .feature-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
:where(.pg-indicator) .feature-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
/*STEPS*/
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 70px; }
.step-number { font-family: 'Cormorant Garamond', serif; font-size: 72px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: -20px; }
:where(.f-p) .step-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.step-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
/*TÉMOIGNAGES*/
.testimonials-section { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 100px 60px; }
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.testimonial-card { border: 1px solid rgba(201,168,76,0.1); padding: 40px 36px; background: var(--bg); transition: border-color 0.3s; position: relative; }
.testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent); opacity: 0; transition: opacity 0.3s; }
.testimonial-card:hover { border-color: rgba(201,168,76,0.22); }
.testimonial-card:hover::before { opacity: 1; }
/*PRICING*/
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; align-items: start; }
.included-list { list-style: none; display: flex; flex-direction: column; }
.included-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.included-item:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.included-check { width: 20px; height: 20px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 10px; color: var(--gold); }
.included-text strong { display: block; font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.included-text span { font-size: 14px; color: var(--text-2); line-height: 1.6; }
/*══════════ GRILLE 3 FORMULES ══════════*/
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; align-items: stretch; }
.tier { background: var(--bg2); border: 1px solid var(--border); padding: 44px 30px 34px; position: relative; display: flex; flex-direction: column; text-align: center; transition: border-color .35s, transform .35s cubic-bezier(.22,1,.36,1); }
.tier:hover { border-color: rgba(201,168,76,0.45); transform: translateY(-4px); }
.tier--featured { border-color: rgba(201,168,76,0.55); background: linear-gradient(175deg,#111 0%,var(--bg2) 60%); }
.tier--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.tier-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #000; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 5px 16px; white-space: nowrap; }
.tier-name { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.tier-price { font-family: 'Cormorant Garamond',serif; font-size: 56px; font-weight: 700; line-height: 1; color: var(--white); }
.tier-price sup { font-size: 24px; vertical-align: super; color: var(--gold); margin-left: 4px; }
.tier-per { font-family: 'Montserrat',sans-serif; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 1px; }
.tier-note { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 12px 0 26px; min-height: 34px; }
.tier-note strong { color: var(--gold); font-weight: 500; }
.tier-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.tier-features li { font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.tier-features li::before { content: '—'; color: var(--gold); font-size: 10px; flex-shrink: 0; line-height: 1.6; }
.tier-btn { margin-top: auto; display: block; width: 100%; font-family: 'Montserrat',sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; padding: 16px 12px; text-decoration: none; text-align: center; cursor: pointer; border: 1px solid rgba(201,168,76,0.4); color: var(--gold); background: none; transition: background .3s, color .3s, border-color .3s; }
.tier-btn:hover { background: rgba(201,168,76,0.12); border-color: var(--gold); }
.tier-btn--gold { background: var(--gold); color: #000; border-color: var(--gold); }
.tier-btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 16px 44px rgba(201,168,76,0.28); }
.tier-guarantee { text-align: center; margin-top: 26px; font-size: 13px; color: var(--text-3); letter-spacing: 1px; }
/*Liste "ce qui est inclus", sur deux colonnes sous les tarifs*/
.included-list--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
/*══════════ TÉLÉPHONE : trois colonnes, comme sur ordinateur ══════════
   118px par carte à 393px de large : tout le superflu saute.
   Les <span class="opt"> marquent ce qui disparaît quand la place manque,
   et les caractéristiques sont couvertes par la liste juste en dessous.*/
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: none; margin: 40px 0 0; }
  .tier { padding: 24px 7px 13px; text-align: center; }
  .tier:hover { transform: none; }
  .tier-ribbon { font-size: 11px; letter-spacing: 0.8px; padding: 3px 8px; top: -9px; }
  .tier-name { font-size: 11px; letter-spacing: 1.2px; margin-bottom: 9px; }
  .tier-price { font-size: 26px; line-height: 1; }
  .tier-price sup { font-size: 12px; margin-left: 2px; }
  .tier-per { display: block; font-size: 12px; margin-top: 3px; letter-spacing: 0; }
  .tier-note { font-size: 12px; line-height: 1.5; margin: 9px 0 12px; min-height: 0; }
  .tier-features { display: none; }
  .tier-btn { margin-top: auto; padding: 11px 3px; font-size: 11px; letter-spacing: 0.4px; }
  .opt { display: none; }
  /*le texte long tombe en trois colonnes*/
  .tier-guarantee { margin-top: 18px; font-size: 13px; line-height: 1.6; }
  .included-list--split { grid-template-columns: 1fr; }
}
/*Sous 340px, trois colonnes ne tiennent plus : on repasse en lignes*/
@media (max-width: 340px) {
  .tier-grid { grid-template-columns: 1fr; gap: 10px; }
  .tier { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ruban ruban" "nom prix" "note note" "bouton bouton"; text-align: left; column-gap: 12px; padding: 16px 16px 14px; }
  .tier-ribbon { grid-area: ruban; position: static; transform: none; justify-self: start; margin-bottom: 8px; }
  .tier-name { grid-area: nom; margin: 0; align-self: center; }
  .tier-price { grid-area: prix; justify-self: end; font-size: 28px; }
  .tier-per { display: inline; }
  .tier-note { grid-area: note; margin-top: 5px; }
  .tier-btn { grid-area: bouton; }
  .opt { display: inline; }
}
@media (max-width: 700px) {
  :where(.pg-strategies) .tier-ribbon { font-size: 11px; }
  :where(.pg-strategies) .tier-name { font-size: 11px; }
  :where(.pg-strategies) .tier-per,
  :where(.pg-strategies) .tier-note { font-size: 12px; }
  :where(.pg-strategies) .tier-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
}
:where(.pg-strategies) .tier-btn { -webkit-user-select: none; user-select: none; }
/*Bandeau sous les cartes*/
.pack-teaser { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; width: 100%; max-width: 1320px; margin: 22px auto 0; padding: 18px 24px; border: 1px solid rgba(201,168,76,0.45); background: linear-gradient(100deg, rgba(201,168,76,0.13) 0%, rgba(201,168,76,0.04) 55%, rgba(201,168,76,0.02) 100%); text-decoration: none; color: var(--white); text-align: left; transition: border-color 0.3s, background 0.3s; }
.pack-teaser:hover { border-color: var(--gold); }
.pack-teaser-body, .pack-teaser-eyebrow, .pack-teaser-text { display: block; }
.pack-teaser-eyebrow { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.pack-teaser-text { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.pack-teaser-text strong { color: var(--white); font-weight: 500; }
.pack-teaser-cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; background: var(--gold); color: #000; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.pack-teaser-cta svg { width: 12px; height: 12px; }
@media (max-width: 1180px) {
  .pack-teaser { max-width: 820px; }
}
@media (max-width: 700px) {
  .pack-teaser { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; margin-top: 12px; padding: 16px 14px; }
  .pack-teaser-text { font-size: 14px; }
}
/*Section #pack*/
:where(.pg-strategies) #pack { border-top: 1px solid var(--border); }
.pack-inclus { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pack-inclus a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; font-size: 12px; letter-spacing: 0.5px; color: var(--white); text-decoration: none; transition: border-color 0.3s; }
.pack-inclus a::before { content: ''; width: 8px; height: 4px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg) translateY(-1px); }
.pack-inclus a:hover { border-color: var(--gold); }
@media (max-width: 700px) {
  :where(.pg-strategies) #pack { padding: 60px 20px; }
  :where(.pg-strategies) #pack .section-title { margin-bottom: 12px; }
  .pack-inclus { margin-top: 18px; gap: 6px; }
  .pack-inclus a { font-size: 12px; padding: 0 11px; min-height: 34px; }
}
/*Confirmation au retour de paiement (copie des pages produit)*/
:where(.pg-strategies) .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3800; align-items: flex-start; justify-content: center; backdrop-filter: blur(8px); overflow-y: auto; overscroll-behavior: contain; }
/*FAQ*/
:where(.f-p) .legal-body:focus { outline: none; }
#compareSlider:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/*MODAL*/
:where(.f-p) .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3800; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.modal-overlay.active { display: flex; }
:where(.pg-strategies) .modal { background: var(--bg2); border: 1px solid var(--border); max-width: 520px; width: 90%; padding: 60px 52px; margin: auto; position: relative; text-align: center; animation: fadeUp 0.5s cubic-bezier(.22,1,.36,1) both; }
:where(.f-p) .modal { background: var(--bg2); border: 1px solid var(--border); max-width: 520px; width: 90%; padding: 60px 52px; position: relative; text-align: center; animation: fadeUp 0.5s cubic-bezier(.22,1,.36,1) both; }
.modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.modal-icon { font-size: 40px; margin-bottom: 24px; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 700; margin-bottom: 12px; color: var(--white); }
.modal-title span { color: var(--gold); }
.modal-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 36px; }
@media (max-width: 700px) {
  :where(.pg-strategies) .modal-overlay { padding: 12px; }
}
:where(.f-p) input { user-select: text; -webkit-user-select: text; }
/*MODAL LÉGAL*/
:where(.f-p) .legal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 4000; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 24px; }
:where(.f-p) .legal-overlay.active { display: flex; }
/*Le cadre ne défile plus : c'est .legal-body qui défile, le bouton de fermeture reste visible en haut*/
:where(.f-p) .legal-modal { background: var(--bg2); border: 1px solid var(--border); max-width: 680px; width: 100%; max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: fadeUp 0.5s cubic-bezier(.22,1,.36,1) both; }
:where(.f-p) .legal-body { overflow-y: auto; overscroll-behavior: contain; padding: 52px; }
@media (max-width: 600px) {
  :where(.f-p) .legal-body { padding: 52px 22px 28px; }
}
:where(.f-p) .legal-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
:where(.f-p) .legal-modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 700; margin-bottom: 32px; padding-right: 50px; color: var(--white); }
:where(.f-p) .legal-modal h3 { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--gold); margin: 28px 0 12px; }
:where(.f-p) .legal-modal p,
:where(.f-p) .legal-modal li { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 10px; }
:where(.f-p) .legal-modal ul { padding-left: 20px; }
:where(.f-p) .legal-close-btn { position: absolute; top: 20px; right: 20px; z-index: 2; background: var(--bg2); border: 1px solid var(--border); color: var(--white); font-size: 18px; width: 40px; height: 40px; cursor: pointer; transition: border-color 0.3s; }
:where(.f-p) .legal-close-btn:hover { border-color: var(--gold); }
.trial-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3800; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 24px; }
.trial-overlay.active { display: flex; }
.trial-modal { background: var(--bg2); border: 1px solid var(--border); max-width: 520px; width: 100%; padding: 52px; position: relative; text-align: center; animation: fadeUp 0.5s cubic-bezier(.22,1,.36,1) both; }
.trial-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.trial-badge { display: inline-block; border: 1px solid var(--border); color: var(--gold); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: 6px 16px; margin-bottom: 24px; }
.trial-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 14px; }
.trial-title span { color: var(--gold); }
.trial-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 28px; }
.trial-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.trial-form label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.trial-form input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 14px 18px; color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 14px; outline: none; transition: border-color 0.3s; }
.trial-form input:focus { border-color: var(--gold); }
.trial-form input::placeholder { color: rgba(255,255,255,0.2); }
.trial-submit { width: 100%; background: var(--gold); color: #000; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; padding: 18px; border: none; cursor: pointer; transition: all 0.3s; margin-top: 8px; }
.trial-submit:hover { background: var(--gold-light); }
.trial-note { margin-top: 16px; font-size: 13px; color: var(--text-3); letter-spacing: 1px; }
.trial-error { display: none; color: #ff4444; font-size: 12px; margin-top: 4px; }
.trial-success { display: none; }
.trial-success.active { display: block; }
.trial-success:focus { outline: none; }
.trial-form-wrap.hidden { display: none; }
/*RESPONSIVE*/
@media (max-width: 900px) {
  :where(.f-p) section { padding: 80px 24px; }
  .features-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .included-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .testimonials-section { padding: 80px 24px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .video-section { padding: 80px 0 5px; }
  .video-inner { padding: 0 24px; }
  .video-header { grid-template-columns: 1fr; gap: 40px; }
  :where(.f-p) #contact { padding: 60px 24px; }
  .hero { padding: 60px 24px 60px; }
  :where(.f-p) .modal { padding: 40px 28px; }
}
/*── Bloc Transparence (remplace les témoignages) ──*/
.trust-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 700; color: var(--gold); opacity: 0.55; line-height: 1; margin-bottom: 18px; }
.trust-title { font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; color: #fff; }
.trust-text { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.trust-note { margin-top: 36px; font-size: 13px; line-height: 1.8; color: var(--text-3); border-left: 2px solid rgba(201,168,76,0.45); padding-left: 16px; max-width: 760px; }
/*── Finitions premium ──*/
:root:where(.f-p) { color-scheme: dark; }
:where(.f-p) ::selection { background: rgba(201,168,76,0.32); color: #fff; }
.btn-outline { display: inline-flex; align-items: center; gap: 12px; background: none; color: var(--gold); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; padding: 17px 36px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; text-decoration: none; border: 1px solid rgba(201,168,76,0.5); }
.btn-outline:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.btn-primary { letter-spacing: 3px; padding: 17px 40px; }
.btn-primary:hover { background: var(--gold-light, #E8C96A); }
.hero-cta-group { gap: 14px; }
:where(.f-p) .hero-proofs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; list-style: none; margin: 30px auto 0; padding: 0; max-width: 720px; }
:where(.f-p) .hero-proofs li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.6px; color: var(--text-3); }
:where(.f-p) .hero-proofs li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.feature-icon { color: var(--gold); }
.feature-icon svg { width: 22px; height: 22px; }
@media (max-width: 700px) {
  :where(.f-p) .hero-proofs { flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
  .hero-cta-group { flex-direction: column; }
  .btn-primary, .btn-outline { width: 100%; max-width: 320px; justify-content: center; }
}
.trial-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; background: none; border: 1px solid rgba(201,168,76,0.3); color: rgba(255,255,255,0.7); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .3s, color .3s; }
.trial-close:hover { border-color: var(--gold); color: var(--gold); }
/*══════════ TÉLÉPHONE : lisibilité, zones tactiles, fenêtres ══════════*/
:where(.pg-cgv) body { background: var(--bg); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
html:where(.pg-404),
:where(.pg-404) body { min-height: 100%; }
:where(.pg-404) body { background: var(--bg); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
:where(.pg-cgv) main { max-width: 780px; margin: 0 auto; padding: 136px 24px 90px; }
:where(.pg-404) main { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 148px 24px 90px; }
:where(.f-d) .label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
:where(.pg-cgv) h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 5vw, 50px); font-weight: 300; line-height: 1.15; margin-bottom: 14px; }
:where(.pg-404) h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 6vw, 54px); font-weight: 300; line-height: 1.15; margin-bottom: 18px; }
:where(.f-d) h1 strong { font-weight: 700; }
.updated { font-size: 13px; color: var(--text-3); margin-bottom: 44px; letter-spacing: 0.5px; }
:where(.pg-cgv) h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; color: var(--gold); margin: 42px 0 14px; line-height: 1.2; }
:where(.pg-cgv) p,
:where(.pg-cgv) li { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 12px; }
:where(.pg-cgv) li { margin-bottom: 6px; }
:where(.pg-cgv) ul { padding-left: 22px; margin-bottom: 14px; }
:where(.pg-cgv) strong { color: var(--white); font-weight: 500; }
:where(.pg-cgv) main a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); }
:where(.pg-cgv) .box { border: 1px solid var(--border); background: rgba(201,168,76,0.04); padding: 22px 24px; margin: 18px 0 22px; }
:where(.pg-cgv) .box p:last-child { margin-bottom: 0; }
:where(.pg-cgv) table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 13.5px; }
:where(.pg-cgv) th,
:where(.pg-cgv) td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: top; }
:where(.pg-cgv) th { color: var(--gold); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
:where(.pg-cgv) td strong { color: var(--white); }
:where(.pg-404) p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 36px; max-width: 560px; }
:where(.pg-404) .choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
:where(.pg-404) .choix a { display: block; border: 1px solid var(--border); padding: 22px 20px; text-decoration: none; color: var(--white); transition: border-color .25s, background .25s; }
:where(.pg-404) .choix a:hover,
:where(.pg-404) .choix a:focus-visible { border-color: var(--gold); background: rgba(201,168,76,0.05); outline: none; }
:where(.pg-404) .choix b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
:where(.pg-404) .choix span { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
@media (max-width: 600px) {
  :where(.pg-cgv) main { padding: 104px 18px 70px; }
  :where(.pg-cgv) th,
  :where(.pg-cgv) td { padding: 9px 6px; font-size: 12.5px; }
}
html:where(.f-p, .pg-cgv) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/*Le texte reste sélectionnable (copier une adresse e-mail, un pseudo…) ;
   seuls les éléments qu'on manipule au doigt sont protégés de la sélection.*/
:where(.f-p),
:where(.f-p) * { -webkit-user-select: auto; user-select: auto; }
:where(.f-p) button,
:where(.f-p) .btn-primary,
:where(.f-p) .btn-outline,
:where(.f-p) .btn-secondary,
:where(.f-p) .tier-btn,
:where(.f-p) #compareSlider,
:where(.f-p) .fan-container,
:where(.f-p) .gallery-item,
:where(.f-p) .lightbox-overlay { -webkit-user-select: none; user-select: none; }
:where(.f-p) a,
:where(.f-p) button { -webkit-tap-highlight-color: rgba(201,168,76,0.18); }
/*Fenêtres (essai gratuit, paiement confirmé) : on peut les faire défiler si elles dépassent l'écran*/
:where(.f-p) .trial-overlay,
:where(.f-p) .modal-overlay { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
:where(.f-p) .trial-modal,
:where(.f-p) .modal { margin: auto; }
.lightbox-hint { display: none; font-size: 13px; }
@media (max-width: 700px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .stat-item { padding: 28px 10px; }
  .stat-number { font-size: clamp(34px, 11vw, 46px); white-space: nowrap; }
  .stat-label { font-size: 11px; letter-spacing: 1.5px; line-height: 1.5; }
  .feature-card { padding: 32px 24px; }
  .feature-icon { width: 44px; height: 44px; margin-bottom: 18px; }
  .video-player-header { flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px; }
  .video-player-title, .video-player-badge { font-size: 11px; letter-spacing: 1.5px; }
  :where(.f-p) .tier-ribbon { font-size: 11px; }
  :where(.f-p) .tier-name { font-size: 11px; }
  :where(.f-p) .tier-per,
  :where(.f-p) .tier-note { font-size: 12px; }
  :where(.f-p) .tier-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
  .gallery-cta-eyebrow { font-size: 11px; }
  :where(.f-p) .gallery-close-btn,
  :where(.f-p) .lightbox-close-btn,
  :where(.f-p) .legal-close-btn,
  :where(.f-p) .trial-close { width: 44px; height: 44px; }
  :where(.f-p) .trial-overlay,
  :where(.f-p) .modal-overlay { padding: 12px; }
  .trial-modal { padding: 56px 20px 28px; }
  .trial-title { font-size: 30px; }
  .trial-form label, .trial-badge { font-size: 11px; letter-spacing: 2px; }
  .trial-form input { font-size: 16px; }
  .modal { width: 100%; padding: 48px 20px 28px; }
}
:where(.pg-strategies) .tvm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3800; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 16px; }
@media (max-width: 700px) {
  .lightbox-overlay { padding: 72px 0 24px; flex-direction: column; gap: 14px; }
  .lightbox-overlay img { border-left: 0; border-right: 0; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .lightbox-hint { display: block; font-size: 13px; line-height: 1.6; color: var(--text-3); text-align: center; padding: 0 24px; }
}
/*── FILM (vidéo motion verticale, 20 s) ──*/
.film-section { border-top: 1px solid var(--border); background: var(--bg2); padding: 100px 24px; }
.film-inner { max-width: 1048px; margin: 0 auto; padding: 0 60px; }
.film-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "head player" "body player"; column-gap: 80px; }
.film-head { grid-area: head; align-self: end; }
.film-body { grid-area: body; align-self: start; }
.film-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.film-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; padding: 0; }
.film-points li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; }
.film-points li::before { content: '→'; color: var(--gold); font-size: 11px; margin-top: 2px; flex-shrink: 0; }
.film-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; margin-top: 40px; }
.film-note { margin-top: 22px; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.film-player { grid-area: player; align-self: center; justify-self: end; position: relative; margin: 0; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; background: #050505; border: 1px solid rgba(201,168,76,0.2); overflow: hidden; }
.film-player::before, .film-player::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 2; pointer-events: none; }
.film-player::before { top: 0; }
.film-player::after { bottom: 0; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.film-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(201,168,76,0.5); background: rgba(6,6,6,0.65); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.film-toggle:hover, .film-toggle:focus-visible { background: rgba(6,6,6,0.9); border-color: var(--gold); }
.film-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.film-toggle::before { content: ''; box-sizing: border-box; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--gold); }
.film-player.is-playing .film-toggle::before { width: 10px; height: 14px; margin-left: 0; border-width: 0 3px; border-color: var(--gold); }
@media (max-width: 900px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "player" "body"; row-gap: 36px; }
  .film-player { justify-self: center; max-width: 320px; }
}
@media (max-width: 700px) {
  .film-section { padding: 80px 0; }
  .film-inner { padding: 0 24px; }
  .film-ctas { flex-direction: column; align-items: center; gap: 4px; }
}
/*── RÉSULTATS DU BACKTEST ──*/
.res-section { border-top: 1px solid var(--border); background: var(--bg); padding: 100px 24px; }
.res-inner { max-width: 1048px; margin: 0 auto; padding: 0 60px; }
.res-head { max-width: 760px; margin-bottom: 44px; }
.res-intro { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.res-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.res-kpi { border: 1px solid var(--border); background: var(--bg2); padding: 26px 22px 22px; }
.res-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.res-kpi-value { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.5px; color: #F4EEDF; white-space: nowrap; }
.res-kpi-sub { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-3); }
@supports (grid-template-rows: subgrid) {
  .res-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.res-card { margin: 14px 0 0; border: 1px solid var(--border); background: var(--bg2); padding: 24px 26px 20px; }
.res-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.res-card-title { font-size: 14px; font-weight: 600; color: #F4EEDF; }
.res-card-note { font-size: 13px; color: var(--text-3); }
.res-chart { position: relative; width: 100%; min-height: 190px; }
.res-chart svg { display: block; overflow: visible; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; }
.res-chart svg :focus { outline: none; }
.res-chart svg [tabindex]:focus-visible { outline: none; }
.res-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: #151310; border: 1px solid rgba(201,168,76,0.35); padding: 10px 13px; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.62); white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 2; }
.res-tip.on { opacity: 1; }
.res-tip strong { display: block; font-size: 15px; font-weight: 600; color: #F4EEDF; }
.res-table-wrap { margin-top: 18px; }
.res-table-wrap summary { cursor: pointer; padding: 8px 0; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.res-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.res-table th, .res-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: right; }
.res-table th:first-child, .res-table td:first-child { text-align: left; }
.res-table th { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); }
.res-table td { color: rgba(255,255,255,0.75); }
.res-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin: 34px 0 0; padding: 0; }
.res-facts li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.res-facts li::before { content: '→'; color: var(--gold); font-size: 11px; margin-top: 2px; flex-shrink: 0; }
.res-costs { margin: 30px 0 0; padding: 16px 20px; border-left: 2px solid var(--gold); background: rgba(201,168,76,0.05); font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.res-note { margin: 22px 0 0; font-size: 13px; line-height: 1.8; color: var(--text-3); }
@media (max-width: 1099px) {
  .res-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .res-section { padding: 80px 0; }
  .res-inner { padding: 0 20px; }
  .res-kpis { gap: 10px; }
  .res-kpi { padding: 20px 16px 18px; }
  .res-kpi-label { letter-spacing: 2px; margin-bottom: 12px; }
  .res-kpi-value { font-size: clamp(24px, 8vw, 30px); }
  .res-card { padding: 20px 14px 16px; }
  .res-facts { grid-template-columns: 1fr; }
  .res-table th, .res-table td { padding: 8px 6px; }
}
/*Petits téléphones : la colonne Résultat du tableau mensuel reste dans la carte*/
@media (max-width: 400px) {
  .res-table { font-size: 12px; }
  .res-table th { letter-spacing: 0; }
  .res-table th, .res-table td { padding: 8px 3px; }
  .res-table-wrap { overflow-x: auto; }
}
/*Menu sur une ligne entre 700 et 800 px (lien Stratégie en plus)*/
/*Préférence « réduire les animations » : ni apparitions animées, ni pulsations, ni défilement doux*/
@media (prefers-reduced-motion: reduce) {
  html:where(.f-p) { scroll-behavior: auto; }
  :where(.f-p),
  :where(.f-p) *,
  :where(.f-p)::before,
  :where(.f-p) *::before,
  :where(.f-p)::after,
  :where(.f-p) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/*Rappel du Pack 4 stratégies sous les tarifs*/
.pack-reminder { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 820px; margin: 30px auto 0; padding: 16px 22px; border: 1px solid rgba(201,168,76,0.35); background: linear-gradient(100deg, rgba(201,168,76,0.1), rgba(201,168,76,0.02) 70%); text-decoration: none; color: var(--white); transition: border-color 0.3s; }
.pack-reminder:hover { border-color: var(--gold); }
.pack-reminder-text { font-size: 14px; line-height: 1.65; color: var(--text-2); text-align: left; }
.pack-reminder-text strong { color: var(--white); font-weight: 500; }
.pack-reminder-cta { flex-shrink: 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); white-space: nowrap; border-bottom: 1px solid rgba(201,168,76,0.4); padding-bottom: 2px; }
@media (max-width: 700px) {
  .pack-reminder { flex-direction: column; align-items: stretch; text-align: center; margin-top: 22px; padding: 14px; gap: 10px; }
  .pack-reminder-text { text-align: center; font-size: 14px; }
  .pack-reminder-cta { align-self: center; font-size: 11px; padding: 6px 0 4px; }
}
:where(.pg-strategy, .pg-fvg) .num-plain { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .86em; }
:where(.f-p) .tvm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3800; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 16px; }
.tvm-overlay.active { display: flex; }
.tvm-modal { background: var(--bg2); border: 1px solid var(--border); max-width: 520px; width: 100%; padding: 44px 40px 36px; position: relative; text-align: left; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; }
.tvm-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.tvm-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: none; border: 1px solid rgba(201,168,76,0.3); color: rgba(255,255,255,0.7); font-size: 18px; cursor: pointer; }
.tvm-close:hover { border-color: var(--gold); color: var(--gold); }
.tvm-badge { display: inline-block; border: 1px solid var(--border); color: var(--gold); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: 6px 14px; margin-bottom: 16px; }
.tvm-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.15; }
.tvm-title span { color: var(--gold); }
.tvm-desc { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin-bottom: 20px; }
.tvm-desc b { color: var(--white); font-weight: 500; }
.tvm-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.tvm-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 14px 16px; color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 15px; outline: none; }
.tvm-input:focus { border-color: var(--gold); }
.tv-status { font-size: 12px; line-height: 1.6; margin-top: 8px; min-height: 18px; }
.tv-status b { color: #fff; font-weight: 600; }
.tv-status.ok { color: #4CAF50; }
.tv-status.ko { color: #ff5a5a; }
.tv-status.wait { color: var(--muted); }
.tv-status.warn { color: #FFA000; }
.tvm-help { margin-top: 18px; border: 1px solid rgba(201,168,76,0.18); background: rgba(201,168,76,0.04); padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.tvm-help b { color: var(--white); font-weight: 500; }
.tvm-link { background: none; border: none; color: var(--gold); font-family: inherit; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 6px 0; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.tvm-video { display: none; margin-top: 10px; border: 1px solid rgba(201,168,76,0.2); background: #000; }
.tvm-video.open { display: block; }
.tvm-video video { width: 100%; display: block; max-height: 240px; object-fit: contain; background: #000; }
.tvm-go { width: 100%; margin-top: 14px; background: var(--gold); color: #000; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; padding: 16px; border: none; cursor: pointer; transition: background .25s, opacity .25s; }
.tvm-go:disabled { opacity: 0.35; cursor: not-allowed !important; }
.tvm-go:not(:disabled):hover { background: var(--gold-light); }
.tvm-note { margin-top: 12px; font-size: 13px; color: var(--text-3); line-height: 1.6; text-align: center; }
/*Aperçu du menu TradingView : où lire son pseudo*/
.tvm-menu { margin: 10px 0 12px; max-width: 320px; background: #131722; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 13px 5px 5px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.tvm-menu > div { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; }
.tvm-menu > div + div { padding-left: 37px; }
.tvm-menu .tvm-me { position: relative; background: rgba(201,168,76,0.08); box-shadow: inset 0 0 0 1px var(--gold); }
.tvm-menu .tvm-me i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #2a2e39; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.tvm-menu .tvm-me b { color: #fff; font-weight: 600; }
.tvm-menu .tvm-me span { color: var(--text-3); }
.tvm-menu .tvm-me em { position: absolute; top: -7px; right: 10px; padding: 0 6px; background: #131722; line-height: 14px; font-style: normal; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.tvm-menu .tvm-bar { display: block; width: 55%; height: 7px; margin: 5px 0; border-radius: 4px; background: rgba(255,255,255,0.1); }
@media (max-width:600px) {
  .tvm-modal { padding: 36px 20px 28px; }
  .tvm-title { font-size: 26px; }
  .tvm-close { width: 44px; height: 44px; top: 8px; right: 8px; }
  .tvm-input { font-size: 16px; }
  .tvm-label { font-size: 11px; letter-spacing: 2px; }
}
@media (max-width: 420px) {
  :where(.pg-cgv) table { font-size: 12.5px; }
  :where(.pg-cgv) th,
  :where(.pg-cgv) td { padding: 9px 5px; }
  :where(.pg-cgv) th { font-size: 11px; letter-spacing: 1px; }
  :where(.pg-cgv) td { overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  :where(.pg-404) main { padding: 112px 18px 70px; }
  :where(.pg-404) .choix { grid-template-columns: 1fr; }
}