@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-dark: #0D1117;
    --bg-card: #161B22;
    --bg-card-hover: #21262D;
    --border-color: #30363D;
    
    --text-main: #E6EDF3;
    --text-muted: #8B949E;
    
    --accent-main: #3FA9F5;
    --accent-main-hover: #1e90ff;
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --transition: all 0.3s ease;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(9, 10, 15, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 20px;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.5px;
}

.logo span {
    color: var(--accent-main);
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--accent-main);
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 16px;
}

.btn-primary {
    background: var(--accent-main);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    background: var(--accent-main-hover);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Effet de lueur en arrière-plan */
.hero::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(9, 10, 15, 0) 70%);
    z-index: -1;
}

.hero-content {
    text-align: left;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hero-image {
    position: relative;
}

.marketing-card {
    background: #161B22;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    backdrop-filter: blur(10px);
}

.marketing-card h3 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.marketing-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.marketing-list li {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    line-height: 1.3;
}

.marketing-list li span.highlight {
    color: #F85149; /* YZY Negative */
}

.badge-rare {
    background: #F85149; /* YZY Negative */
    color: white;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 8px;
    transform: rotate(-10deg);
    display: inline-block;
    margin-left: 10px;
    font-weight: 800;
}

.cpf-banner {
    background: #BA7517; /* YZY Alert (Orange/Doré) */
    color: white;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px;
    transform: rotate(-3deg);
    margin-top: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.price-tag {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}

.hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-main);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 64px;
    margin-bottom: 24px;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    margin-bottom: 64px;
}

/* =========================================
   Video Showcase Section
   ========================================= */
.video-showcase {
    padding: 100px 0;
    background: radial-gradient(circle at center top, #141720 0%, #050608 100%);
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.video-title {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.video-subtitle {
    font-size: 18px;
    color: #BA7517;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 600;
}
/* =========================================
   Carrousel payouts
   Defilement natif par scroll-snap : une vidéo par vue, glissement
   tactile pris en charge sans code, et les flèches ne font que
   déclencher un scroll. Les miniatures restent des images tant qu'on
   n'a pas cliqué — l'iframe YouTube est construite à ce moment-là.
   ========================================= */
.payout-carousel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.payout-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.payout-track::-webkit-scrollbar { display: none; }
.payout-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.payout-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    border: 2px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.payout-video:hover {
    box-shadow: 0 30px 60px rgba(186, 117, 23, 0.25);
    border-color: rgba(186, 117, 23, 0.6);
}
.payout-thumb-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.payout-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, filter 0.45s ease;
}
.payout-video:hover .payout-thumb-wrap img {
    transform: scale(1.08);
    filter: brightness(0.6);
}
.payout-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Bouton lecture : purement decoratif, c'est la vignette entiere qui est cliquable */
.payout-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.payout-video:hover .payout-play {
    transform: translate(-50%, -50%) scale(1.15);
    background: #ff0000;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}
.payout-play::after {
    content: '';
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px;
}
.payout-caption {
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
    color: #8b949e;
    transition: color 0.3s ease;
}
.payout-slide:hover .payout-caption { color: #fff; }
/* Fleches : posees par-dessus, debordant legerement sur les cotes */
.payout-nav {
    position: absolute;
    top: calc(50% - 14px);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.payout-nav:hover {
    background: #3FB950;
    border-color: #3FB950;
    transform: translateY(-50%) scale(1.08);
}
.payout-prev { left: -24px; }
.payout-next { right: -24px; }
.payout-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.payout-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    transition: all 0.25s ease;
}
.payout-dot.active {
    background: #3FB950;
    width: 26px;
    border-radius: 4px;
}

/* YouTube Facades (Thumbnails + Play Button) */
.youtube-facade {
    cursor: pointer;
}
.yt-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease;
}
.testi-card:hover .yt-thumb {
    transform: scale(1.05);
}
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.9);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 2;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    transition: transform 0.3s, background 0.3s;
}
.youtube-facade:hover .yt-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
    background: #ff0000;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}

/* =========================================
   Testimonials Section
   ========================================= */
.testimonials-section {
    padding: 80px 0;
    background: #0a0c10;
}
/* Carrousel des temoignages (pleine largeur, avec apercu des voisins) */
.testi-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.testi-carousel-track-wrap {
    flex: 1;
    overflow: hidden;
}
.testi-carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.testi-carousel-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}
.testi-carousel-arrow:hover {
    background: #3FB950;
    border-color: #3FB950;
    transform: scale(1.08);
}
.testi-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.testi-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    transition: all 0.25s ease;
}
.testi-carousel-dot.active {
    background: #3FB950;
    width: 26px;
    border-radius: 4px;
}
.testi-card {
    background: #111;
    border: 1px solid #1a1c23;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    flex: 0 0 46%;
    max-width: 46%;
    opacity: 0.4;
    filter: brightness(0.4) saturate(0.6);
    transform: scale(0.9);
    cursor: pointer;
    transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.35s ease;
}
.testi-card.active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    border-color: #3FB950;
    box-shadow: 0 15px 45px rgba(63, 185, 80, 0.35);
}
.testi-card:hover {
    border-color: #3FB950;
}
.testi-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.testi-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.testi-content {
    padding: 15px;
}
.stars {
    color: #ffc107;
    margin-bottom: 8px;
    font-size: 11px;
}
.quote {
    color: #ccc;
    font-style: italic;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.author {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

/* =========================================
   Community Section
   ========================================= */
.community-section {
    padding: 80px 0;
    background: radial-gradient(circle at center, #1a1c23 0%, #050608 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 35px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}
.btn-discord {
    background: #5865F2; /* Discord Blurple */
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.3);
}
.btn-discord:hover {
    background: #4752C4;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(88, 101, 242, 0.5);
}
.btn-telegram {
    background: #0088cc; /* Telegram Blue */
    box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3);
}
.btn-telegram:hover {
    background: #0077b5;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 136, 204, 0.5);
}
.btn-social i {
    font-size: 24px;
}

/* =========================================
   Lead Magnet Section (2 Vidéos)
   ========================================= */
.lead-magnet-section {
    padding: 80px 0 40px;
    background: #0a0c10;
    position: relative;
    z-index: 2;
}
.lead-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}
.lead-title .text-red {
    color: #ff0000;
}
.lead-subtitle {
    font-size: 18px;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.6;
    text-align: center;
}
.btn-red-massive {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    padding: 25px 50px;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 30px rgba(255,0,0,0.4);
    letter-spacing: 1px;
}
.btn-red-massive:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255,0,0,0.6);
}

/* Custom Box Inner Styling */
.custom-box .box-inner {
    position: absolute;
    top: 0;
    left: 20px; /* offset for binding */
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 25px 15px 0 15px;
    text-align: left;
    background: rgba(0,0,0,0.4); /* Darken bg slightly */
}
.custom-box .binding-text {
    position: absolute;
    left: 3px;
    bottom: 20px;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    color: #00e6e6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0.8;
}
.custom-box .box-top-logo {
    color: #00e6e6;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.custom-box .box-main-title {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.custom-box .box-sub-title {
    font-size: 24px;
    font-weight: 300;
    color: #3fb950;
    margin-bottom: auto;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.custom-box .box-bottom-banner {
    background: linear-gradient(to right, #cca360, #a87b38);
    margin: 0 -15px 0 -15px;
    padding: 10px 15px 15px;
    color: #111;
    text-align: center;
    border-radius: 0 0 8px 0;
}
.custom-box .banner-icons {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #fff;
}
.custom-box .banner-footer {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    background: #111;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
}

/* =========================================
   Statistics Section
   ========================================= */
.stats-section {
    padding: 80px 0;
    background: #050608;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.stats-title {
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}
.stat-card {
    background: linear-gradient(145deg, #111, #0a0a0a);
    border: 1px solid #1a1c23;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    border-color: #3FB950;
    box-shadow: 0 15px 40px rgba(63, 185, 80, 0.15);
}
.stat-year {
    color: #BA7517;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.stat-main {
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.stat-percent {
    font-size: 32px;
    color: #3FB950;
}
.stat-label {
    font-size: 16px;
    color: #e6edf3;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.stat-sub {
    font-size: 14px;
    color: #888;
}
.stat-cert-card {
    background: linear-gradient(to right, #111, #1a1a1a);
    border: 1px solid #2d3139;
    border-left: 4px solid #3FB950;
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.stat-cert-main {
    font-size: 72px;
    font-weight: 900;
    color: #3FB950;
    line-height: 1;
}
.stat-cert-text {
    font-size: 16px;
    color: #ccc;
    line-height: 1.6;
}
.stat-cert-text strong {
    color: #fff;
    font-size: 20px;
}
.stats-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

/* =========================================
   Offers Section (Pricing & Features)
   ========================================= */
.offers-section {
    padding: 100px 0;
    background: #0D1117;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.offers-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.offers-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.offers-price-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.price-old {
    font-size: 48px;
    color: var(--text-muted);
    position: relative;
    font-weight: 800;
}
.price-old::after {
    content: '';
    position: absolute;
    left: -10%; top: 50%; width: 120%; height: 6px;
    background: #F85149; /* YZY Negative (Rouge) */
    transform: translateY(-50%) rotate(-10deg);
}

.price-arrow {
    font-size: 50px;
    color: #3FB950; /* YZY Positive (Vert) */
}

.price-new {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 72px;
    color: #3FB950; /* YZY Positive (Vert) */
    font-weight: 900;
    text-shadow: 0 0 30px rgba(63, 185, 80, 0.3);
    letter-spacing: -2px;
}

.price-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1;
    margin-top: 5px;
}

.price-badge-num {
    display: block;
    font-size: 46px;
    font-weight: 900;
    color: #3FB950;
    text-transform: uppercase;
    text-shadow: 0 0 25px rgba(63, 185, 80, 0.3);
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.price-badge-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.features-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-box {
    width: 250px;
    height: 380px;
    background: #090a0f;
    border: 2px solid #BA7517; /* Bordure dorée YZY */
    border-radius: 4px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateY(30deg); /* Angle de 30deg pour sublimer la grande épaisseur */
    box-shadow: -30px 30px 50px rgba(0,0,0,0.9), inset 0 0 30px rgba(186,117,23,0.15);
}

/* La tranche (le côté gauche de la boîte 3D) */
.feature-box::before {
    content: 'INTRAD TRADING';
    position: absolute;
    left: -90px; /* Décalé de sa nouvelle largeur ultra-profonde */
    top: -2px;
    width: 90px; /* Épaisseur de la boîte très augmentée (façon coffret) */
    height: calc(100% + 4px);
    background: linear-gradient(to right, #050608, #1a1c23);
    border: 2px solid #BA7517;
    border-right: none;
    transform-origin: right; /* Charnière sur le bord droit de la tranche (attaché à la boîte) */
    transform: rotateY(-90deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #BA7517;
    font-weight: 800;
    font-size: 16px; /* Texte un peu plus grand pour remplir l'espace */
    letter-spacing: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
}

.feature-box:hover {
    transform: perspective(1200px) rotateY(0deg) scale(1.05);
    box-shadow: 0 30px 50px rgba(186, 117, 23, 0.4);
    z-index: 10;
}

.feature-box .feature-icon {
    display: none;
}

.feature-box-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px 20px;
    background: rgba(5, 8, 12, 0.5); /* Sombre transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.6);
}

.feature-box h3 {
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 8px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.feature-box p {
    color: #F0F4F8;
    font-size: 13.5px;
    line-height: 1.5;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0;
}

/* =========================================
   Pricing Section (Packs - Effet Classeur/Dossier)
   ========================================= */
.pricing-section {
    padding: 20px 0 100px; /* Espace en haut réduit pour rapprocher de la section précédente */
    background: var(--bg-dark);
}

.pricing-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 80px;
    color: var(--text-main);
    text-transform: uppercase;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    flex: 1;
    background: #1c1f26; /* Gris foncé chic */
    color: #e6edf3;
    border-radius: 0 16px 8px 8px; /* Coins arrondis sauf en haut à gauche (onglet) */
    position: relative;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    margin-top: 40px; /* Espace pour l'onglet */
    border: 1px solid #2d3139;
}

/* L'onglet du dossier (Tab) */
.pricing-tab {
    position: absolute;
    top: -40px;
    left: 0;
    height: 40px;
    background: inherit;
    padding: 0 24px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: inherit;
}

/* Effet ligne de marge rouge assombri */
.pricing-card::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(200, 50, 50, 0.15);
}

/* =========================================
   Curriculum Section (Grand bloc unique)
   ========================================= */
.curriculum-block {
    margin-top: 0;
    padding: 60px 0;
}

.curriculum-header {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.curriculum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.curriculum-title {
    font-size: 22px;
    color: #BA7517;
    margin-bottom: 25px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(186, 117, 23, 0.3);
    padding-bottom: 10px;
}

.curriculum-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.curriculum-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #e6edf3;
    line-height: 1.6;
}

.curriculum-list li::before {
    content: '✅';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 14px;
}

.alt-list li::before {
    content: '▶';
    color: #3FB950;
    font-size: 12px;
    top: 4px;
}

.curriculum-note {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #BA7517;
    font-size: 14px;
    color: #ccc;
    font-style: italic;
    line-height: 1.6;
}

.pricing-card.premium {
    background: #090a0f; /* Dossier premium noir profond */
    color: #fff;
    transform: translateY(-20px); /* Mis en avant */
    border: 1px solid #1a1c23;
    border-left: 2px solid #BA7517; /* Reliure dorée */
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

.pricing-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px dashed rgba(255,255,255,0.1);
    position: relative;
    z-index: 2; /* Au dessus des lignes */
    background: inherit;
}
.pricing-card.premium .pricing-header {
    border-bottom-color: rgba(255,255,255,0.15);
}

.pricing-price {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-heading);
}
.pricing-card.premium .pricing-price {
    color: #BA7517;
}

.pricing-desc {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #999;
}
.pricing-card.premium .pricing-desc {
    color: #aaa;
}

.pricing-summary {
    margin-top: 25px;
    font-size: 14px;
    color: #a0a5ab; /* Gris clair */
    font-weight: 500;
    line-height: 1.6;
}
.pricing-card.premium .pricing-summary {
    color: #e0e5eb; /* Gris plus clair pour ressortir sur noir */
}

/* Bouton d'achat */
.pricing-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    background: #1a1c23;
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 30px;
    position: relative;
    z-index: 2;
    transition: var(--transition);
}
.pricing-card.premium .pricing-btn {
    background: #BA7517;
    color: #000;
}
.pricing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* =========================================
   Packs : mise en perspective facon presentoir

   Au repos, le Pack Deluxe domine : plus grand, en avant, il mord
   legerement sur ses voisins. Les deux autres sont en retrait, inclines
   vers le centre et assombris.

   Des qu'on survole la grille, la dominance suit la souris : la carte
   pointee vient au premier plan et se redresse, toutes les autres
   passent en retrait — y compris le Deluxe.

   L'inclinaison de chaque carte est portee par --rot, ce qui permet aux
   regles d'etat (retrait / dominant) de ne piloter que l'echelle et la
   profondeur, sans avoir a redeclarer la rotation a chaque fois.

   Le !important sur transform et opacity n'est pas un raccourci : les
   cartes portent la classe .animate-up, dont l'animation fadeIn est en
   "forwards". Une animation CSS l'emporte sur toute declaration normale,
   et seul !important passe devant elle. Sans ca, rien ne bouge — c'est
   d'ailleurs pour cette raison que le translateY(-20px) cense surelever
   le Deluxe n'avait jamais eu d'effet.
   ========================================= */
.pricing-grid {
    perspective: 1600px;
    /* Marge laterale : la carte dominante deborde de sa colonne */
    padding: 0 10px;
    /* Gouttiere resserree : c'est ce qui permet a la carte dominante de
       mordre franchement sur ses voisines au lieu de les froler. */
    gap: 4px;
}
.pricing-card {
    --rot: 0deg;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.28, 1),
                box-shadow 0.45s ease,
                opacity 0.45s ease,
                filter 0.45s ease;
}
.pricing-grid > .pricing-card:first-child { --rot: 9deg; }
.pricing-grid > .pricing-card:last-child { --rot: -9deg; }

/* Etat en retrait */
.pricing-grid > .pricing-card {
    transform: scale(0.9) rotateY(var(--rot)) translateZ(-70px) !important;
    opacity: 0.78 !important;
    filter: brightness(0.82) saturate(0.88);
    z-index: 1;
}

/* Etat dominant : le Deluxe au repos */
.pricing-card.premium {
    transform: scale(1.12) rotateY(0deg) translateZ(70px) translateY(-16px) !important;
    opacity: 1 !important;
    filter: none;
    z-index: 3;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.7);
}

/* Souris sur la grille : le Deluxe rentre dans le rang... */
.pricing-grid:hover > .pricing-card.premium {
    transform: scale(0.9) rotateY(var(--rot)) translateZ(-70px) !important;
    opacity: 0.78 !important;
    filter: brightness(0.82) saturate(0.88);
    z-index: 1;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
/* La carte du milieu n'a pas d'inclinaison propre : quand elle recule,
   on la penche vers celle qui domine, sinon elle reste plate et le
   presentoir perd sa coherence. Les navigateurs sans :has() l'ignorent
   simplement, la carte reste droite. */
.pricing-grid:has(> .pricing-card:first-child:hover) > .pricing-card.premium { --rot: -7deg; }
.pricing-grid:has(> .pricing-card:last-child:hover) > .pricing-card.premium { --rot: 7deg; }

/* ...et la carte pointee prend le dessus, quelle qu'elle soit.
   Le :focus-within fait la meme chose au clavier. */
.pricing-grid:hover > .pricing-card:hover,
.pricing-grid > .pricing-card:focus-within {
    transform: scale(1.14) rotateY(0deg) translateZ(80px) translateY(-16px) !important;
    opacity: 1 !important;
    filter: none;
    z-index: 5;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.75);
}

/* Le bouton a sa propre translation au survol : sans ca elle ecraserait
   celle de la carte, qui est son parent transforme. */
.pricing-card:hover .pricing-btn {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

/* Ecrans intermediaires : a 1024px et en dessous, la carte dominante
   depassait du bord droit et se faisait rogner. On lui laisse de la
   marge et on calme l'agrandissement. */
@media (min-width: 769px) and (max-width: 1200px) {
    .pricing-grid { padding: 0 34px; }
    .pricing-card.premium,
    .pricing-grid:hover > .pricing-card:hover,
    .pricing-grid > .pricing-card:focus-within {
        transform: scale(1.08) rotateY(0deg) translateZ(40px) translateY(-12px) !important;
    }
    .pricing-grid > .pricing-card,
    .pricing-grid:hover > .pricing-card.premium {
        transform: scale(0.92) rotateY(var(--rot)) translateZ(-45px) !important;
    }
}

/* Mouvement reduit demande par le systeme : on garde la hierarchie
   visuelle, on retire le deplacement. */
@media (prefers-reduced-motion: reduce) {
    .pricing-card { transition: opacity 0.2s ease, filter 0.2s ease; }
    .pricing-grid > .pricing-card,
    .pricing-card.premium,
    .pricing-grid:hover > .pricing-card.premium,
    .pricing-grid:hover > .pricing-card:hover,
    .pricing-grid > .pricing-card:focus-within {
        transform: none !important;
    }
}

/* Stats / Qualiopi Bar */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
    text-align: left;
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid var(--border-color);
}

.trust-item:last-child {
    border-right: none;
}

.trust-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.trust-value {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

.trust-value.highlight {
    color: var(--accent-main);
}

.trust-col-qualiopi {
    padding-right: 24px;
    border-right: 1px solid var(--border-color);
}

.trust-col-rncp {
    padding-left: 24px;
}

.trust-col-financia {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trust-logo-qualiopi {
    height: 130px;
}

.trust-logo-financia {
    height: 40px;
}

.trust-value-financia {
    font-size: 16px;
}

/* =========================================
   Footer Styles
   ========================================= */
footer {
    background: #05070a;
    padding: 40px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 50px;
    color: #ccc;
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 8px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #3FB950;
}

.footer-col p {
    margin-bottom: 5px;
    line-height: 1.6;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 20px;
}

.footer-links-list li {
    margin-bottom: 6px;
}

.footer-links-list a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links-list a:hover {
    color: #3FB950;
}

.btn-espace-perso {
    display: inline-block;
    background: #1f2937;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    margin-top: 15px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s;
}

.btn-espace-perso:hover {
    background: #374151;
}
.btn-espace-perso i {
    margin-right: 8px;
    color: #3FB950;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}

.social-icons a:hover {
    background: #3FB950;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-bottom p {
    color: #666;
    font-size: 12px;
}@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-up {
    animation: fadeIn 0.8s ease forwards;
}

/* =========================================
   Organisme Section Styles
   ========================================= */
.organisme-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 60px;
    align-items: center;
}

.organisme-grid.reverse {
    grid-template-columns: 2fr 3fr;
}

.organisme-text {
    color: #ccc;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.organisme-text h3 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 25px;
}

.organisme-text p {
    margin-bottom: 15px;
}

.organisme-image-wrapper {
    position: relative;
}

.organisme-image-wrapper img.main-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}

.organisme-cert-box {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

@media (max-width: 992px) {
    .organisme-grid, .organisme-grid.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================
   Team Section Styles
   ========================================= */
.team-section {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 60px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s;
}

.team-member:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.04);
}

@media (min-width: 769px) {
    .team-member.reverse {
        flex-direction: row-reverse;
    }
}

.team-photo, .team-photo-placeholder {
    width: 250px;
    height: 250px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.team-photo-placeholder {
    background: #161b22;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #8b949e;
    font-size: 14px;
    border: 2px dashed #30363d;
}
.team-photo-placeholder i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #30363d;
}

.team-info {
    text-align: left;
}

.team-info h4 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 5px;
}

.team-info .role {
    color: #3FB950;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

.team-info .bio {
    color: #ccc;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
}

@media (max-width: 768px) {
    .team-member {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .team-info {
        text-align: center;
    }
}

/* =========================================
   Contact Form Styles
   ========================================= */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.contact-info {
    padding-right: 40px;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
    color: #3FB950;
    margin-bottom: 20px;
}

.contact-detail i {
    font-size: 24px;
}

.contact-form-container {
    background: #0a0c10;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form .form-group {
    margin-bottom: 25px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ccc;
    font-size: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    background: #161b22;
    border: 1px solid #30363d;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #3FB950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.2);
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.form-status {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: none;
    font-weight: 600;
    font-size: 15px;
}

.form-status.success {
    display: block;
    background: rgba(63, 185, 80, 0.1);
    color: #3FB950;
    border: 1px solid #3FB950;
}

.form-status.error {
    display: block;
    background: rgba(255, 85, 85, 0.1);
    color: #ff5555;
    border: 1px solid #ff5555;
}

@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px;
    }
    .contact-info {
        padding-right: 0;
    }
}
@media (max-width: 576px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 42px; }
    .hero p { font-size: 18px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-content { text-align: center; }
    .hero-buttons { justify-content: center; }
    .nav-links { display: none; } /* On cache sur mobile pour l'instant */
    .hero-buttons { flex-direction: column; }

    /* Trust bar Qualiopi/RNCP/Financia : reste sur 3 colonnes, juste rapetissee */
    .trust-bar { padding: 14px 8px; gap: 6px; }
    .trust-col-qualiopi { padding-right: 6px; }
    .trust-col-rncp { padding-left: 6px; text-align: center; }
    .trust-col-financia { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
    .trust-logo-qualiopi { height: 46px; }
    .trust-logo-financia { height: 18px; padding: 2px; }
    .trust-item { gap: 3px; }
    .trust-label { font-size: 7px; letter-spacing: 0; }
    .trust-value { font-size: 10px; }
    .trust-value-financia small { font-size: 6px; }

    /* Bouton Contactez-nous de la navbar : logo + bouton reduits pour degager de la marge */
    .navbar { padding: 14px 0; }
    .navbar .container { padding-left: 16px; padding-right: 16px; }
    .logo { font-size: 16px; gap: 5px; }
    .logo img { height: 30px !important; }
    .navbar .btn-primary { padding: 7px 10px; font-size: 10px; }

    /* Coffrets 3D (offres + videos gratuites) : 2 par ligne au lieu d'empiler */
    .features-grid { gap: 14px; }
    .feature-box {
        width: calc(50% - 7px);
        height: auto;
        aspect-ratio: 250 / 380;
        transform: none;
        box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    }
    .feature-box::before { display: none; }
    .feature-box:hover { transform: scale(1.03); }
    .feature-box h3 { font-size: 14px; }
    .feature-box p { font-size: 10.5px; }
    .feature-box-content { padding: 12px 10px 10px; }
    .custom-box .box-inner { left: 8px; padding: 14px 10px 0 10px; }
    .custom-box .binding-text { display: none; }
    .custom-box .box-top-logo { font-size: 9px; margin-bottom: 8px; }
    .custom-box .box-main-title { font-size: 17px; margin-bottom: 6px; }
    .custom-box .box-sub-title { font-size: 12px; }
    .custom-box .box-bottom-banner { padding: 6px 10px 8px; margin: 0 -10px 0 -10px; }
    .custom-box .banner-icons { font-size: 6px; flex-wrap: wrap; gap: 3px; justify-content: center; }
    .custom-box .banner-footer { font-size: 8px; padding: 4px; letter-spacing: 1px; }

    /* Bloc prix barre (1990 -> 1590, 1 AN) */
    .offers-title { font-size: 28px; }
    .offers-price-container { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .price-old { font-size: 32px; }
    .price-arrow { font-size: 32px; }
    .price-new { font-size: 42px; gap: 12px; }
    .price-badge { align-items: center; text-align: center; margin-top: 0; }
    .price-badge-num { font-size: 28px; }
    .price-badge-label { font-size: 11px; }

    /* Carte RNCP (Excellence en chiffres) */
    .stat-cert-card { flex-direction: column; text-align: center; gap: 15px; padding: 25px 20px; }
    .stat-cert-main { font-size: 40px !important; }

    /* Grilles multi-colonnes qui debordaient sur mobile */
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
    .stat-card { padding: 14px 6px; }
    .stat-year { font-size: 9px; letter-spacing: 1px; margin-bottom: 6px; }
    .stat-main { font-size: 26px; margin-bottom: 6px; }
    .stat-percent { font-size: 13px; }
    .stat-label { font-size: 7px; margin-bottom: 8px; }
    .stat-sub { font-size: 7px; line-height: 1.3; }
    .pricing-title { font-size: 22px; margin-bottom: 34px; }
    .pricing-grid { gap: 6px; }
    .pricing-card { padding: 18px 6px 14px; margin-top: 24px; }
    /* La mise en perspective des packs est desactivee : les trois cartes
       tiennent deja tout juste en largeur, et il n'y a pas de survol. */
    .pricing-grid { perspective: none; padding: 0; }
    .pricing-grid > .pricing-card,
    .pricing-card.premium,
    .pricing-grid:hover > .pricing-card.premium,
    .pricing-grid:hover > .pricing-card:hover,
    .pricing-grid > .pricing-card:focus-within {
        transform: none !important;
        opacity: 1 !important;
        filter: none;
        z-index: auto;
    }
    .pricing-tab { top: -22px; height: 22px; padding: 0 6px; font-size: 7px; letter-spacing: 0; border-radius: 8px 8px 0 0; white-space: nowrap; }
    .pricing-card::before { left: 12px; }
    .pricing-price { font-size: 17px; }
    .pricing-desc { font-size: 7px; }
    .pricing-summary { font-size: 8px; margin-top: 8px; line-height: 1.3; }
    .pricing-btn { padding: 8px 2px; font-size: 8px; margin-top: 14px; }
    .curriculum-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Carrousel payouts : fleches plus petites et ramenees a l'interieur,
       sinon elles debordent hors de l'ecran sur mobile */
    .payout-nav { width: 36px; height: 36px; font-size: 13px; }
    .payout-prev { left: 6px; }
    .payout-next { right: 6px; }
    .payout-track { gap: 14px; }
    .payout-play { width: 54px; height: 54px; }
    .payout-play::after { border-width: 9px 0 9px 15px; }

    /* ---------------------------------------------------------------
       Mise au propre du mobile
       --------------------------------------------------------------- */

    /* Le badge Trustpilot est en inline-flex et refusait de passer a la
       ligne : il mesurait 438px et debordait de l'ecran a lui seul, ce
       qui decalait toute la page vers la gauche. */
    .trustpilot-lien { max-width: 100%; }
    .trustpilot-badge {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        padding: 10px 16px !important;
        gap: 8px !important;
    }

    /* Le hero imposait 100vh de hauteur minimale avec son contenu centre
       verticalement : sur telephone, ca creait de grands vides au-dessus
       et en dessous de la banniere. */
    .hero {
        min-height: auto;
        padding: 84px 0 44px;
    }
    /* Marge sous la banniere, posee en style="" dans le HTML */
    .hero .animate-up { margin-bottom: 24px !important; }
    /* Ecart banniere -> bouton CPF, lui aussi en style="" */
    .hero .animate-up > div { margin-top: 22px !important; }
    /* Ecart avant le bandeau Qualiopi/RNCP, lui aussi en style="" */
    .hero .trust-bar { margin-top: 30px !important; }

    /* Sections : 100px de respiration haut et bas, c'est fait pour un
       ecran large. Sur telephone ca oblige a beaucoup faire defiler. */
    .offers-section,
    .video-showcase { padding: 56px 0; }
    .testimonials-section,
    .community-section,
    .stats-section { padding: 48px 0; }
    .lead-magnet-section { padding: 48px 0 28px; }
    .video-subtitle { margin-bottom: 34px; }
    .testi-carousel { gap: 10px; }
    .testi-carousel-arrow { width: 36px; height: 36px; font-size: 13px; }
    .testi-carousel-track { gap: 14px; }
    .testi-card { flex: 0 0 84%; max-width: 84%; }
}