/* ==========================================================================
   VARIABLES & RESET
   ========================================================================== */
:root {
    color-scheme: dark;
    
    --bg-base: #030614;
    --text-primary: #FFFFFF;
    --text-secondary: #86868B;
    --accent-color: #5E5CE6;
    --accent-gradient: linear-gradient(135deg, #5E5CE6 0%, #BF5AF2 100%);
    --android-gradient: linear-gradient(135deg, #32D74B 0%, #30A840 100%);
    
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-hover: rgba(255, 255, 255, 0.05);
    --glass-blur: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    background-color: var(--bg-base);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background-color: transparent;
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   CLASSES D'ANIMATION AU DÉFILEMENT (INJECTÉES VIA JS)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   FOND BLEU NUIT ANIMÉ & SOURIS
   ========================================================================== */
.animated-background {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.bg-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    animation: floatHalo 25s infinite alternate ease-in-out;
}

.bg-halo-1 { top: -20%; left: -10%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(30, 45, 120, 0.4) 0%, transparent 70%); }
.bg-halo-2 { bottom: -20%; right: -20%; width: 80vw; height: 80vw; background: radial-gradient(circle, rgba(15, 25, 75, 0.6) 0%, transparent 70%); animation-delay: -10s; animation-duration: 30s; }
.bg-halo-3 { top: 20%; left: 30%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(50, 70, 180, 0.2) 0%, transparent 70%); animation-delay: -5s; animation-duration: 20s; }

@keyframes floatHalo {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(15vw, 15vh, 0) scale(1.2); }
}

/* Pas d'animation des halos si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    .bg-halo { animation: none; }
}

.cursor-glow {
    position: fixed;
    top: -300px; left: -300px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(94, 92, 230, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: background 0.3s ease, scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cursor-glow.hovered {
    scale: 1.333;
    background: radial-gradient(circle, rgba(94, 92, 230, 0.25) 0%, transparent 60%);
}

/* ==========================================================================
   NAVIGATION FLOTTANTE
   ========================================================================== */
.floating-nav {
    position: fixed;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 960px;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    /* padding-top/bottom/right = 8px (espacement uniforme autour du CTA) ;
       padding-left = 22px pour aérer la marque. Le bouton "Obtenir l'App"
       a donc 8px d'air des trois côtés visibles → il s'intègre proprement. */
    padding: 8px 8px 8px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    /* IMPORTANT : background + backdrop-filter sont déplacés sur ::before
       pour que .floating-nav ne soit PAS un backdrop-root. Sinon les
       backdrop-filter des descendants (notamment le dropdown mobile)
       floutent le rendu du parent (vide en dehors de ses bounds) au lieu
       du contenu de la page, donnant un effet d'opacité au lieu d'un
       vrai flou. */
}

.floating-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: -1;
    pointer-events: none;
}

.nav-brand {
    display: flex; align-items: center; gap: 12px;
    font-weight: 700; font-size: 20px; color: var(--text-primary); text-decoration: none;
}

.nav-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }

.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 16px; }

.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; }
.mobile-menu-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }

.btn-cta {
    background: var(--text-primary); color: var(--bg-base);
    padding: 11px 22px; border-radius: 100px;
    text-decoration: none; font-weight: 600; font-size: 14px;
    line-height: 1;
    transition: transform 0.2s, opacity 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-cta:hover { transform: scale(1.04); }
.btn-cta:active { transform: scale(0.97); }

/* ==========================================================================
   LAYOUT & BENTO BOXES
   ========================================================================== */
.container { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 200px 0 32px; text-align: center; }
.hero h1 { font-size: clamp(48px, 8vw, 90px); line-height: 1.05; margin-bottom: 24px; font-weight: 700; letter-spacing: -0.03em; }
.hero p { font-size: 20px; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }

.text-gradient { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-android { background: var(--android-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 24px; display: block; margin-top: 80px; }

.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 24px; }
.block {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 40px; padding: 48px;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: background 0.4s ease, border-color 0.4s ease, opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.block:hover {
    background: var(--glass-hover);
    border-color: rgba(255, 255, 255, 0.1);
}

.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }

.block h2 { font-size: 40px; margin-bottom: 16px; line-height: 1.1; letter-spacing: -0.02em; }
.block h3 { font-size: 24px; margin-bottom: 12px; }
.block p { font-size: 17px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }

.block-icon {
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    border: 1px solid var(--glass-border);
}
.block-icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   HERO SHOWCASE (mainpic) — billboard cinématique
   Pas d'interaction souris. Reveal premium au scroll + parallax-scale doux
   pilotée par JS (--scroll-scale). Image servie en pleine qualité native.
   ========================================================================== */
.hero-showcase {
    position: relative;
    margin: 8px auto 64px;
    max-width: 1120px;
    padding: 0 24px;
    /* État initial du reveal (révélé via .is-visible) */
    opacity: 0;
    transform: translateY(56px) scale(0.96);
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-showcase.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Scène : flottement vertical doux + scale piloté par scroll (JS).
   --scroll-scale est mis à jour ~60×/s par script.js en fonction de la
   position dans le viewport → effet billboard cinéma. */
.hero-showcase-stage {
    position: relative;
    z-index: 1;
    transform:
        translateY(var(--floatY, 0px))
        scale(var(--scroll-scale, 1));
    animation: showcaseFloat 7s ease-in-out infinite alternate;
    will-change: transform;
}

.hero-showcase-stage img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    /* Aucun filter sur l'IMG : l'image passe directement par le pipeline
       d'image du navigateur (décodage → bitmap → scaling haute qualité vers
       les pixels physiques). filter: drop-shadow forçait un rééchantillonnage
       dans un backing buffer dimensionné en CSS px × DPR, ce qui dégradait
       le rendu par rapport au rendu direct. L'ombre est restituée via
       .hero-showcase-stage::after (copie floutée + noircie de l'image). */
    image-rendering: auto;
    image-rendering: high-quality;
}

/* Ombre portée "drop-shadow" recréée sans filter sur l'IMG : on peint
   une copie de l'image en background, on la noircit et on la floute.
   L'IMG d'origine reste intact pour un rendu maximal. */
.hero-showcase-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('mainpic.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    filter: brightness(0) blur(40px);
    opacity: 0.6;
    transform: translate3d(0, 30px, 0);
    z-index: -1;
    pointer-events: none;
}

.hero-showcase-glow {
    position: absolute;
    inset: -8% -4%;
    z-index: 0;
    background:
        radial-gradient(42% 52% at 50% 52%, rgba(94, 92, 230, 0.45) 0%, transparent 70%),
        radial-gradient(34% 42% at 34% 58%, rgba(191, 90, 242, 0.28) 0%, transparent 70%);
    filter: blur(48px);
    pointer-events: none;
    animation: showcaseGlow 7s ease-in-out infinite alternate;
}

@keyframes showcaseFloat {
    0%   { --floatY: -6px; }
    100% { --floatY: 10px; }
}
@keyframes showcaseGlow {
    0%   { opacity: 0.75; transform: scale(0.97); }
    100% { opacity: 1;    transform: scale(1.04); }
}

/* Permet d'animer la variable --floatY (sinon le keyframe ne l'interpole pas) */
@property --floatY {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-showcase-stage { animation: none; transform: none; }
    .hero-showcase-glow { animation: none; }
    .hero-showcase { transition: opacity 0.3s ease; transform: none; }
}

/* ==========================================================================
   CARROUSEL COVERFLOW 3D — phones tournant autour d'un axe central
   Slide centrale dominante (1.0, opacity 1) qui passe devant les voisines.
   Voisines (±1) rotées sur Y, reculées en Z. Slides à |distance|>=2 invisibles
   → le wrap-around modulo est silencieux (pas de DOM clones, pas de bug à la fin).
   ========================================================================== */
.carousel-block {
    position: relative;
    overflow: hidden;
    padding: 56px 0 40px;
}
/* Le carrousel utilise déjà des transitions internes complexes (transform 3D
   per-slide). On exclut donc le bloc parent du reveal global pour éviter les
   bugs de transitions imbriquées qui peuvent figer le rendu. */
.carousel-block.reveal {
    opacity: 1;
    transform: none;
}
.carousel-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
    padding: 0 24px;
}
.carousel-header h2 {
    font-size: clamp(32px, 4vw, 44px);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.carousel-header p {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0;
}

.carousel { position: relative; }

.carousel-viewport {
    position: relative;
    height: 600px;
    perspective: 1800px;
    perspective-origin: 50% 50%;
    /* fondu doux aux extrêmes — la zone centrale est intacte */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.carousel-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 290px;
    /* transform + opacity + z-index pilotés par le JS pour la 3D coverflow */
    transform: translate(-50%, -50%);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease;
    backface-visibility: hidden;
    pointer-events: none;
    /* `will-change` fige le layer GPU dès le départ → la rasterisation reste
       à la résolution native, évite les passes de re-décodage qui adoucissent. */
    will-change: transform, opacity;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    /* Pas de drop-shadow sur chaque image (filtre composé = re-rasterisation).
       L'ombre est rendue par le pseudo-élément ::after du slide actif. */
}
.carousel-slide.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8%;
    width: 70%;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    z-index: -1;
}

/* --- Boutons précédent / suivant ----------------------------------------- */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(10, 12, 28, 0.65);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease,
                border-color 0.25s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease;
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-arrow svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    pointer-events: none;
}
.carousel-arrow:hover {
    background: rgba(94, 92, 230, 0.35);
    border-color: rgba(94, 92, 230, 0.6);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 16px 40px rgba(94, 92, 230, 0.35);
}
.carousel-arrow:active {
    transform: translateY(-50%) scale(0.94);
    transition-duration: 0.12s;
}
.carousel-arrow:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

/* --- Indicateurs (dots) -------------------------------------------------- */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 100px;
    padding: 0;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background 0.3s ease,
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel-dot:hover { background: rgba(255, 255, 255, 0.35); }
.carousel-dot.is-active {
    width: 28px;
    background: var(--accent-color);
}
.carousel-dot:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

/* Accessibilité : pas d'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    .hero-showcase img { animation: none; }
    .carousel-track,
    .carousel-slide,
    .carousel-arrow,
    .carousel-dot { transition: none; }
}

/* ==========================================================================
   SECTION PREMIUM (TARIFS)
   ========================================================================== */
.premium-perks { list-style: none; margin-top: 8px; }
.premium-perks li {
    position: relative; padding-left: 28px; margin-bottom: 12px;
    font-size: 17px; color: var(--text-secondary); line-height: 1.6;
}
.premium-perks li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--accent-color); font-weight: 700;
}
.premium-perks strong { color: var(--text-primary); }

.pricing-card {
    display: flex; flex-direction: column;
    padding: 36px 32px; position: relative;
}
.pricing-plan {
    font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-secondary); font-weight: 600; margin-bottom: 12px;
}
.pricing-price {
    font-size: 40px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 1; margin-bottom: 12px;
}
.pricing-price span {
    font-size: 15px; font-weight: 500; color: var(--text-secondary);
    letter-spacing: 0; margin-left: 4px;
}
.pricing-note { font-size: 15px; color: var(--text-secondary); margin-bottom: 28px; }
.pricing-cta {
    margin-top: auto; align-self: stretch;
    text-align: center; padding: 12px 20px;
}
.pricing-card--featured {
    border-color: rgba(94, 92, 230, 0.5);
    box-shadow: 0 20px 60px -25px rgba(94, 92, 230, 0.7);
}
.pricing-badge {
    position: absolute; top: -12px; left: 32px;
    background: var(--accent-gradient); color: #fff;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 5px 12px; border-radius: 100px;
}
.pricing-disclaimer {
    font-size: 13px; color: var(--text-secondary); text-align: center;
    max-width: 580px; margin: 4px auto 0;
}
.pricing-disclaimer a { color: var(--text-primary); }

/* État d'envoi de la waitlist (succès / erreur / en attente de configuration) */
.waitlist-status { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.waitlist-status--ok { color: #32D74B; }
.waitlist-status--error { color: #FF6B6B; }
.waitlist-status--pending { color: var(--text-secondary); }

.status-upcoming {
    color: var(--text-secondary);
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: -8px;
    margin-bottom: 16px;
    font-weight: 600;
}

/* ==========================================================================
   FORMULAIRE WAITLIST (ANDROID)
   ========================================================================== */
.waitlist-form {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.glass-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 12px 20px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.glass-input:focus { border-color: #32D74B; background: rgba(255, 255, 255, 0.08); }
.glass-input::placeholder { color: var(--text-secondary); }

.btn-submit {
    background: var(--text-primary);
    color: var(--bg-base);
    border: none;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}
.btn-submit:hover { transform: scale(1.05); }

/* ==========================================================================
   PAGES LÉGALES (Politique de confidentialité, CGU)
   ========================================================================== */
.hero-legal {
    padding: 180px 0 40px;
    max-width: 800px;
    margin: 0 auto;
}
.hero-legal h1 {
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.hero-legal p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 32px;
}
.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}
.legal-meta .meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.5;
}

.legal-layout {
    margin-top: 40px;
    align-items: start;
}

/* Les blocs légaux sont trop grands pour l'IntersectionObserver (threshold 0.1)
   et resteraient invisibles. On force leur affichage immédiat. */
.legal-toc-block.reveal,
.legal-content.reveal {
    opacity: 1;
    transform: none;
}

.legal-toc-block {
    position: sticky;
    top: 100px;
    padding: 32px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    /* Scrollbar masquée : elle débordait du cadre arrondi du sommaire.
       Le défilement reste possible (molette/trackpad) et le scrollspy suit la lecture. */
    scrollbar-width: none;          /* Firefox */
}
.legal-toc-block::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge */

.legal-toc-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-weight: 600;
}

.legal-toc {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}
.legal-toc li {
    counter-increment: toc-counter;
    margin-bottom: 4px;
}
.legal-toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.legal-toc a::before {
    content: counter(toc-counter, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.legal-toc a:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}
/* Catégorie en cours de lecture (scrollspy) */
.legal-toc a.active {
    background: rgba(94, 92, 230, 0.14);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent-color);
}
.legal-toc a.active::before {
    color: var(--accent-color);
}

.legal-content {
    padding: 56px;
    scroll-behavior: smooth;
}
.legal-content > p:first-of-type {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.legal-content .legal-intro {
    padding: 20px 24px;
    background: rgba(94, 92, 230, 0.06);
    border: 1px solid rgba(94, 92, 230, 0.18);
    border-radius: 18px;
    margin: 24px 0 32px;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
}
.legal-content .legal-callout {
    position: relative;
    padding: 22px 24px 22px 28px;
    margin: 24px 0 28px;
    background: rgba(191, 90, 242, 0.05);
    border: 1px solid rgba(191, 90, 242, 0.15);
    border-left: 3px solid #BF5AF2;
    border-radius: 16px;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.65;
}
.legal-content .legal-callout p {
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 10px;
}
.legal-content .legal-callout p:last-child { margin-bottom: 0; }
.legal-content .legal-callout ul {
    margin-bottom: 0;
}
.legal-content .legal-callout ul > li {
    color: var(--text-primary);
    font-size: 15px;
}
.legal-content .legal-callout ul > li::before {
    background: #BF5AF2;
    opacity: 0.9;
}
.legal-content h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 56px 0 20px;
    line-height: 1.2;
    color: var(--text-primary);
    scroll-margin-top: 110px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 32px 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.legal-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}
.legal-content ul,
.legal-content ol {
    color: var(--text-secondary);
    padding-left: 0;
    margin: 0 0 20px 0;
    list-style: none;
}
.legal-content li {
    font-size: 16px;
    line-height: 1.7;
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
}
.legal-content ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.7;
}
.legal-content ol {
    counter-reset: legal-ol;
}
.legal-content ol > li {
    counter-increment: legal-ol;
}
.legal-content ol > li::before {
    content: counter(legal-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.legal-content strong {
    color: var(--text-primary);
    font-weight: 600;
}
.legal-content em {
    color: var(--text-primary);
    font-style: italic;
    opacity: 0.85;
}
.legal-content a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(94, 92, 230, 0.5);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.legal-content a:hover {
    border-bottom-color: var(--accent-color);
    color: #BF5AF2;
}
.legal-content hr {
    border: none;
    height: 1px;
    background: var(--glass-border);
    margin: 48px 0;
}
.legal-content code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
}

.legal-table-wrapper {
    margin: 20px 0 28px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
}
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.legal-content th,
.legal-content td {
    text-align: left;
    padding: 14px 18px;
    vertical-align: top;
    color: var(--text-secondary);
    line-height: 1.5;
}
.legal-content th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.legal-content tr + tr td {
    border-top: 1px solid var(--glass-border);
}

.legal-placeholder {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(191, 90, 242, 0.1);
    border: 1px dashed rgba(191, 90, 242, 0.45);
    border-radius: 6px;
    color: #d9a6ff;
    font-size: 0.88em;
    font-weight: 500;
}

.legal-footnote {
    margin-top: 56px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
    text-align: center;
}

/* ==========================================================================
   PAGE 404
   ========================================================================== */
.hero-404 {
    padding: 180px 0 120px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.error-code {
    font-size: clamp(140px, 24vw, 240px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 16px;
    display: block;
    /* halo subtil derrière le 404 */
    filter: drop-shadow(0 8px 60px rgba(94, 92, 230, 0.35));
}

.hero-404 h1 {
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-404 p {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ghost {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 10px 22px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-ghost:hover {
    background: var(--glass-hover);
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}

/* Pas d'animation reveal sur la 404 : l'utilisateur veut une info instantanée */
.hero-404 h1.reveal,
.hero-404 p.reveal {
    opacity: 1;
    transform: none;
    transition-delay: 0s !important;
}

/* ==========================================================================
   PAGE FAQ / SUPPORT
   ========================================================================== */
.faq-content {
    padding: 56px;
}
.faq-content > .faq-category:first-child > h2 {
    margin-top: 0;
}

.faq-support-cta {
    background: var(--accent-gradient);
    border-radius: 24px;
    padding: 28px 32px;
    margin-bottom: 48px;
    color: #fff;
    box-shadow: 0 8px 32px rgba(94, 92, 230, 0.18);
}
.faq-support-cta h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}
.faq-support-cta .cta-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.faq-support-cta .cta-icon svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
}
.faq-support-cta p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}
.faq-support-cta a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.2s ease;
}
.faq-support-cta a:hover {
    border-bottom-color: #fff;
}

.faq-category {
    margin-bottom: 48px;
}
.faq-category h2 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    line-height: 1.2;
    color: var(--text-primary);
    scroll-margin-top: 110px;
}

.faq-item {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.faq-item:hover {
    background: var(--glass-hover);
    border-color: rgba(255, 255, 255, 0.1);
}
.faq-item[open] {
    background: rgba(94, 92, 230, 0.05);
    border-color: rgba(94, 92, 230, 0.22);
}

.faq-question {
    cursor: pointer;
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    line-height: 1.4;
    transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker,
.faq-question::marker {
    display: none;
    content: "";
}
.faq-question::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    margin-right: 4px;
}
.faq-item[open] .faq-question {
    color: var(--text-primary);
}
.faq-item[open] .faq-question::after {
    transform: rotate(-135deg) translateY(-2px);
    border-color: #BF5AF2;
}

.faq-answer {
    padding: 4px 22px 22px;
    color: var(--text-secondary);
}
.faq-answer p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: var(--text-secondary);
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong {
    color: var(--text-primary);
    font-weight: 600;
}
.faq-answer em {
    color: var(--text-primary);
    opacity: 0.85;
}
.faq-answer a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(94, 92, 230, 0.5);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.faq-answer a:hover {
    border-bottom-color: var(--accent-color);
    color: #BF5AF2;
}
.faq-answer ul,
.faq-answer ol {
    padding-left: 0;
    margin: 0 0 14px;
    list-style: none;
}
.faq-answer li {
    font-size: 15px;
    line-height: 1.7;
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.faq-answer ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.7;
}
.faq-answer ol { counter-reset: faq-ol; }
.faq-answer ol > li { counter-increment: faq-ol; }
.faq-answer ol > li::before {
    content: counter(faq-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.faq-answer code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-primary);
}
.faq-answer .faq-table-wrapper {
    margin: 12px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
}
.faq-answer table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.faq-answer th,
.faq-answer td {
    text-align: left;
    padding: 12px 16px;
    vertical-align: top;
    color: var(--text-secondary);
    line-height: 1.5;
}
.faq-answer th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.faq-answer tr + tr td {
    border-top: 1px solid var(--glass-border);
}

/* Empêche le bug d'IntersectionObserver sur les blocs FAQ trop hauts */
.faq-content.reveal {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   FOOTER GLOBAL
   ========================================================================== */
.site-footer {
    margin-top: 100px;
    padding: 48px 24px;
    background: rgba(10, 10, 20, 0.4);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary);
}

.footer-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-divider {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 0 0 32px 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* ==========================================================================
   FIXES GLOBAUX (s'appliquent partout)
   ========================================================================== */

/* Tableaux : scroll horizontal sur petits écrans, jamais coupés */
.legal-table-wrapper,
.faq-answer .faq-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}
.legal-table-wrapper::-webkit-scrollbar,
.faq-answer .faq-table-wrapper::-webkit-scrollbar { height: 6px; }
.legal-table-wrapper::-webkit-scrollbar-track,
.faq-answer .faq-table-wrapper::-webkit-scrollbar-track { background: transparent; }
.legal-table-wrapper::-webkit-scrollbar-thumb,
.faq-answer .faq-table-wrapper::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 100px; }

/* Force une largeur minimale sur les tableaux de 3+ colonnes pour éviter
   l'écrasement des cellules — déclenche le scroll horizontal si besoin */
.legal-content table:has(th:nth-child(3)),
.faq-answer table:has(th:nth-child(3)) {
    min-width: 480px;
}

/* Tableau Premium des tarifs (5 colonnes) : a besoin de plus d'espace */
.legal-content table:has(th:nth-child(5)) {
    min-width: 620px;
}

/* Cache le halo curseur sur appareils tactiles (pas de souris, GPU économisé) */
@media (hover: none), (pointer: coarse) {
    .cursor-glow { display: none; }
}

/* ==========================================================================
   RESPONSIVE — TABLETTE & MOBILE (< 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
    .block { padding: 32px; border-radius: 32px; }

    /* Hero showcase plus compact */
    .hero-showcase { margin: 8px auto 24px; padding: 0 8px; }

    /* Carrousel : viewport plus court, slides plus étroits */
    .carousel-block { padding: 40px 0 32px; }
    .carousel-header { margin-bottom: 28px; padding: 0 8px; }
    .carousel-viewport { height: 480px; }
    .carousel-slide { width: 220px; }
    .carousel-arrow { width: 42px; height: 42px; }
    .carousel-arrow svg { width: 16px; height: 16px; }
    .carousel-prev { left: 4px; }
    .carousel-next { right: 4px; }

    /* ----- NAV FLOTTANTE COMPACTE ----- */
    .floating-nav {
        top: 16px;
        width: calc(100% - 24px);
        padding: 8px 8px 8px 16px;
        border-radius: 100px;
    }
    .nav-brand {
        gap: 10px;
        font-size: 17px;
    }
    .nav-logo {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }
    .nav-actions { gap: 8px; }
    .btn-cta {
        padding: 9px 16px;
        font-size: 13px;
    }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--glass-border);
        transition: background 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-menu-btn:active { background: rgba(255, 255, 255, 0.12); }
    .mobile-menu-btn svg { width: 18px; height: 18px; }
    /* Bascule en croix quand menu ouvert */
    .mobile-menu-btn.active {
        transform: rotate(90deg);
        background: var(--accent-color);
        border-color: transparent;
    }

    /* ----- MENU DÉROULANT iOS-NATIVE -----
       Coins concentriques (règle iOS) : outer_radius = inner_radius + padding.
       Les items sont en pill (rayon effectif = height/2 ≈ 26px à l'item-height
       courant de ~52px) et le padding du dropdown est 8px → conteneur à
       26 + 8 = 34px pour que la courbe extérieure et la courbe intérieure
       des items partagent le même centre aux coins. Même background, blur
       et border que la toolbar. */
    .nav-links {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(10, 10, 20, 0.6);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--glass-border);
        border-radius: 34px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
        /* Animation fluide */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px) scale(0.96);
        transform-origin: top right;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0s linear 0.28s;
        pointer-events: none;
    }
    .nav-links.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0s linear 0s;
    }
    .nav-links li { width: 100%; text-align: left; }
    .nav-links a {
        display: flex;
        align-items: center;
        padding: 14px 18px;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        /* Items courts (~46px de haut) : 100px se plafonne à ~23px → pill
           horizontale, même courbure visible que la toolbar et que le
           conteneur du dropdown. L'item .active hérite de la même valeur. */
        border-radius: 100px;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .nav-links a:active {
        background: rgba(94, 92, 230, 0.28);
        color: #fff;
    }
    .nav-links a.active {
        background: rgba(94, 92, 230, 0.22);
        color: #fff;
        font-weight: 600;
    }

    /* ----- HERO : moins de padding-top pour ne pas être trop loin de la nav ----- */
    .hero { padding: 140px 0 24px; }
    .hero-legal,
    .hero-404 { padding-top: 130px; }

    /* ----- SOMMAIRE NON-STICKY SUR MOBILE ----- */
    /* La pile bento devient verticale : le sommaire doit être un bloc statique,
       sinon il colle en haut et masque le contenu pendant tout le scroll. */
    .legal-toc-block {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding: 24px;
    }
    .legal-content,
    .faq-content {
        padding: 32px 24px;
    }
    .legal-content h2 { font-size: 24px; margin: 40px 0 16px; }
    .faq-category h2 { font-size: 22px; }

    /* ----- HALOS RÉDUITS SUR MOBILE (perf : blur 120px → 80px, dimensions plus petites) ----- */
    .bg-halo { animation-duration: 40s; filter: blur(80px); }
    .bg-halo-1 { width: 55vw; height: 55vw; }
    .bg-halo-2 { width: 65vw; height: 65vw; }
    .bg-halo-3 { width: 40vw; height: 40vw; }
}

/* ==========================================================================
   RESPONSIVE — PETIT MOBILE (< 500px)
   ========================================================================== */
@media (max-width: 500px) {
    .waitlist-form { flex-direction: column; }
    .btn-submit { width: 100%; }

    /* Nav encore plus compacte */
    .floating-nav { padding: 7px 7px 7px 14px; }
    .nav-brand { font-size: 16px; }
    .btn-cta { padding: 8px 14px; font-size: 12px; }

    /* Hero plus ramassé */
    .hero { padding: 120px 0 16px; }
    .hero-legal,
    .hero-404 { padding-top: 110px; }
    .hero p { font-size: 17px; }

    /* Blocs plus ramassés */
    .block { padding: 24px; border-radius: 28px; }
    .legal-content,
    .faq-content { padding: 24px 18px; }

    /* Carrousel personnalisation : slide centrale plus étroite pour laisser
       de la place aux flèches et aux slides voisines (coverflow lisible
       sur un viewport ~375px). */
    .carousel-viewport { height: 420px; }
    .carousel-slide { width: 170px; }
    .carousel-arrow { width: 36px; height: 36px; }
    .carousel-arrow svg { width: 14px; height: 14px; }
    .carousel-prev { left: 0; }
    .carousel-next { right: 0; }

    /* Footer vertical */
    .footer-top {
        flex-direction: column;
        gap: 24px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .footer-links {
        justify-content: center;
        gap: 14px 20px;
    }
    .footer-links a { font-size: 13px; }

    /* CTA finale (téléchargement home) plus modérée */
    .container [id="download"] h2 { font-size: 36px !important; }
}

/* ==========================================================================
   PAGE TARIFS (pricing.html)
   ========================================================================== */

/* Espace minimal au-dessus pour passer sous la nav flottante.
   Pas de hero, pas de titre — on tombe directement sur la carte Gratuit. */
.pricing-topspace { height: 130px; }

/* Petite tagline "Trois formules, exactement les mêmes fonctionnalités" */
.pricing-summary {
    text-align: center;
    margin: 24px auto 8px;
    max-width: 560px;
    font-size: 15px;
    color: var(--text-secondary);
}
.pricing-summary strong { color: var(--text-primary); font-weight: 600; }

/* Petit tag (étiquette en haut de la grande carte Gratuit) */
.plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
}
.plan-tag-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #32D74B;
    box-shadow: 0 0 8px rgba(50, 215, 75, 0.7);
}

/* Grande carte GRATUIT (full-width, prominente) */
.plan-card-free {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 56px;
    align-items: start;
    position: relative;
}
.plan-card-free-head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.plan-card-free-title h2 {
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #fff 0%, #b8b8c5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.plan-card-free-title p {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 460px;
}
.plan-card-features { margin: 0 !important; }
.plan-card-free-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.plan-card-cta {
    padding: 13px 28px;
    font-size: 15px;
    margin: 0;
}

/* Cartes tarifaires Premium — liste de features intégrée */
.pricing-grid {
    align-items: stretch;
    margin-top: 32px;
}
.pricing-card { padding: 36px 28px; }
.pricing-card-features {
    margin: 24px 0 28px !important;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
}
.pricing-card-features li {
    font-size: 14px !important;
    margin-bottom: 10px;
    padding-left: 24px;
}
.pricing-card-features li::before {
    top: 2px;
    font-size: 13px;
}

/* Mise en avant des économies */
.pricing-saving {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: var(--accent-gradient);
    vertical-align: middle;
}
.pricing-card:not(.pricing-card--featured) .pricing-saving {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.pricing-card .pricing-note { font-size: 14px; line-height: 1.55; }

/* FAQ : on réutilise les styles globaux */
.pricing-faq .faq-item:not(:last-child) { margin-bottom: 10px; }

/* CTA finale */
.pricing-final {
    text-align: center;
    padding: 64px 24px !important;
}
.pricing-final h2 { font-size: 40px; margin-bottom: 14px; letter-spacing: -0.02em; }
.pricing-final p { max-width: 560px; margin: 0 auto 28px; }
.pricing-final-secondary {
    display: inline-block;
    margin-top: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.pricing-final-secondary:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

@media (max-width: 992px) {
    .pricing-topspace { height: 104px; }
    .plan-card-free { grid-template-columns: 1fr; gap: 24px; }
    .plan-card-free-title h2 { font-size: 54px; }
    .plan-card-free-right { gap: 16px; }
    .pricing-grid { margin-top: 24px; }
    .pricing-final h2 { font-size: 30px; }
}
@media (max-width: 500px) {
    .plan-card-free-title h2 { font-size: 44px; }
    .plan-card-cta { width: 100%; text-align: center; }
}

/* ==========================================================================
   PAGE FONCTIONNEMENT (how-it-works.html) — listes "feature"
   Bullet point lumineux dégradé. Appliquée via la classe .feature-list.
   ========================================================================== */
.feature-list { list-style: none; margin-top: 16px; }
.feature-list li {
    position: relative; padding-left: 24px; margin-bottom: 16px;
    font-size: 17px; color: var(--text-secondary); line-height: 1.6;
}
.feature-list li::before {
    content: ''; position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-gradient);
    box-shadow: 0 0 10px rgba(94, 92, 230, 0.6);
}
.feature-list li strong { color: var(--text-primary); }