/* ==========================================================================
   SavoirUp — style.css
   Feuille de style principale (variables, layout, sections communes)
   ========================================================================== */

/* ---------- Variables globales (design tokens) ---------- */
:root {
    /* Couleurs */
    --bg: #0B1020;
    --bg-surface: #121A33;
    --bg-surface-2: #18223F;
    --border: #243059;
    --border-strong: #33406D;
    --text: #EAF0FF;
    --text-muted: #9AA6C4;
    --text-faint: #6F7BA0;
    --accent: #19D3E6;
    --accent-hover: #5BE3F0;
    --accent-soft: rgba(25, 211, 230, 0.13);
    --success: #3E8E63;
    --danger: #C0503E;
    --cashflow-red: #19D3E6; /* accent de marque "SavoirUp" (S et O) — distinct de --danger, usage purement décoratif */

    /* Typographie */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Rayons / ombres */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);

    /* Rythme */
    --section-padding: 120px;
    --container-width: 1180px;

    /* Étape 49 (Lot C) — icônes de coche/croix pour les puces
       générées en CSS (::before), tracés Tabler Icons identiques à
       icon('check')/icon('x') (includes/functions.php), licence MIT.
       Coloré via background-color + mask-image (pas de couleur fixe
       dans le SVG) pour rester cohérent avec currentColor ailleurs. */
    --icon-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    --icon-x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font-family: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Focus clavier visible partout (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(28px, 4vw, 42px);
    margin-bottom: 16px;
}

.section-subtitle {
    color: var(--text-muted);
    max-width: 560px;
    font-size: 17px;
}

.section-head {
    margin-bottom: 56px;
}
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--accent);
    color: #14140F;
}
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-outline:hover {
    background: var(--bg-surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); }

.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 13.5px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 12, 15, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.logo {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* =========================================================
   BRANDING "SavoirUp" — classe réutilisable
   Toutes les lettres blanches, sauf S et O en rouge (identité
   de marque). N'impose ni police ni taille : hérite toujours du
   contexte où elle est placée (logo, titre de page, eyebrow...).
   Une seule définition ici, réutilisée partout où le nom de la
   marque est affiché — voir cashflowBrand() dans functions.php.
   ========================================================= */
.cashflow-brand {
    color: var(--cashflow-brand-color, #FFFFFF);
    white-space: nowrap;
}
.cashflow-brand .cashflow-red {
    color: var(--cashflow-red);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.main-nav a {
    font-size: 14.5px;
    color: var(--text-muted);
    transition: color 0.15s ease;
    position: relative;
}
.main-nav a:hover,
.main-nav a.active { color: var(--text); }
.main-nav a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -22px;
    height: 2px;
    background: var(--accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.burger {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--bg);
    /* Au-dessus de .site-header (z-index:100), qui l'englobe en tant que
       parent DOM (voir includes/header.php) et etablit son propre contexte
       d'empilement (position:sticky + z-index) -- un enfant fixed avec un
       z-index inferieur a son ancetre stackant reste fragile/ambigu. */
    z-index: 101;
    padding: 32px 24px;
    overflow-y: auto;
    /* Corrige la superposition du contenu de la page au defilement interne
       du menu mobile (bug de repaint/compositing courant sur mobile avec
       position:fixed + overflow-y:auto sans calque de composition dedie --
       le navigateur peut laisser transparaitre le contenu derriere pendant
       le scroll sans cette isolation). */
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    will-change: transform;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
    /* Étape 84 (correctif) : héritait de --font-display (Fraunces,
       police de titres) à 24px -- taille/police de bandeau héros, pas
       de navigation. Repasse sur la police body (aucun font-family
       déclaré ici = héritage naturel de .mobile-nav, elle-même dans
       body { font-family: var(--font-body) }) à une taille standard,
       cohérente avec .public-menu a (nav desktop, 15px) et la sidebar
       membre (14px) sans descendre aussi bas -- le menu mobile reste
       le contenu principal de l'écran une fois ouvert. Padding
       légèrement augmenté (14px -> 16px) pour compenser la taille de
       texte réduite et garder une zone de clic confortable au doigt. */
    display: block;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.mobile-nav .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 28px;
    gap: 12px;
}
/* Étape 84 (correctif) : .btn de base (min-height:48px, padding:0 26px,
   font-size:15px) reste inchangé partout ailleurs sur le site -- ici,
   uniquement dans le menu mobile, proportions resserrées ("Se
   connecter"/"Rejoindre SavoirUp" prenaient toute la largeur avec un
   gabarit pensé pour un bouton isolé, pas une paire empilée dans un
   menu). border-radius non redéclaré : hérite déjà de var(--radius-sm)
   via .btn, cohérent avec le reste du design system. */
.mobile-nav .header-actions .btn {
    /* Étape 85 (correctif) : ".mobile-nav a" (règle générique, plus
       haut dans ce fichier) force "display: block" sur TOUS les liens
       du menu mobile, y compris ces deux boutons -- avec une
       spécificité (.mobile-nav a) supérieure à celle de .btn
       (display: inline-flex), elle l'emportait et cassait le
       centrage : .btn garde bien align-items/justify-content:center,
       mais ces propriétés n'ont aucun effet une fois display:block
       (elles ne s'appliquent qu'en display flex/inline-flex). Texte
       retombait donc aligné à gauche (text-align par défaut) au lieu
       d'être centré dans le bouton. display:flex ici (spécificité de
       cette règle supérieure à ".mobile-nav a") réactive le centrage
       déjà défini par .btn, sans le redéclarer en double. */
    display: flex;
    min-height: 44px;
    padding: 0 20px;
    font-size: 14.5px;
}

@media (max-width: 900px) {
    .main-nav { display: none; }
    .header-actions { display: none; }
    .burger { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    padding: 90px 0 var(--section-padding);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.hero-title {
    font-size: clamp(38px, 5.4vw, 64px);
    margin-bottom: 24px;
}
.hero-title em {
    font-style: normal;
    color: var(--accent);
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 18px;
    max-width: 480px;
    margin-bottom: 36px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.hero-trust {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-faint);
}
.hero-trust strong { color: var(--text); font-size: 15px; display: block; }

/* Visuel signature : courbe de cashflow animée */
.hero-visual {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-visual-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-faint);
    display: flex;
    justify-content: space-between;
}

.hero-visual-figure {
    font-family: var(--font-mono);
    font-size: 34px;
    color: var(--text);
    margin-top: 6px;
}
.hero-visual-figure span { color: var(--success); font-size: 15px; margin-left: 8px; }

.cashflow-chart { width: 100%; height: 170px; }
.cashflow-chart path.line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw-line 1.8s ease forwards 0.3s;
}
.cashflow-chart path.area { fill: url(#cashflowGradient); opacity: 0; animation: fade-in 1s ease forwards 1.4s; }
.cashflow-chart circle { fill: var(--accent); opacity: 0; animation: fade-in 0.4s ease forwards; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { height: 300px; }
}

/* ==========================================================================
   PROBLEME / SOLUTION
   ========================================================================== */
.problem-solution {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--border);
}

.ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.ps-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 36px;
}
.ps-card h3 { font-size: 20px; margin-bottom: 20px; }

.ps-list li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 15px;
}
.ps-list li:first-child { border-top: none; padding-top: 0; }
.ps-list.problem li::before { content: '—'; color: var(--text-faint); }
.ps-list.solution li::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 3px;
    background-color: var(--success);
    -webkit-mask-image: var(--icon-check-mask);
    mask-image: var(--icon-check-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 760px) {
    .ps-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORMATIONS (cartes)
   ========================================================================== */
.formations-section { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); }

.formations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.formation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.formation-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.formation-thumb {
    height: 150px;
    background: var(--bg-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.formation-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
}

.formation-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.formation-category {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.formation-title { font-size: 19px; }

.formation-desc { color: var(--text-muted); font-size: 14.5px; flex: 1; }

.formation-body .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 980px) { .formations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .formations-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   COMMUNAUTE
   ========================================================================== */
.community-section {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--border);
}

.community-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.community-copy h2 { margin-bottom: 18px; }
.community-copy p { color: var(--text-muted); margin-bottom: 28px; max-width: 460px; }

.mock-feed {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mock-post {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.mock-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.mock-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #7a611a);
    flex-shrink: 0;
}

.mock-post-meta { display: flex; flex-direction: column; }
.mock-post-name { font-size: 14px; font-weight: 600; }
.mock-post-time { font-size: 12px; color: var(--text-faint); }

.mock-post-text { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }

.mock-post-actions { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }

@media (max-width: 900px) {
    .community-grid { grid-template-columns: 1fr; }
    .community-grid { direction: ltr; }
}

/* ==========================================================================
   TARIFS
   ========================================================================== */
.pricing-section { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 820px;
    margin: 0 auto;
}

.price-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    position: relative;
}

.price-card.featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), var(--bg-surface) 60%);
}

.price-badge {
    position: absolute;
    top: -13px; left: 32px;
    background: var(--accent);
    color: #14140F;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
}

.price-name { font-size: 15px; color: var(--text-muted); margin-bottom: 10px; }

.price-amount {
    font-family: var(--font-mono);
    font-size: 40px;
    color: var(--text);
    margin-bottom: 4px;
}
.price-amount span { font-size: 15px; color: var(--text-faint); }

.price-period { font-size: 13px; color: var(--text-faint); margin-bottom: 28px; }

.price-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.price-features li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-muted); }
.price-features li::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--accent);
    -webkit-mask-image: var(--icon-check-mask);
    mask-image: var(--icon-check-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.price-features li.has-own-icon::before { display: none; content: none; }
.price-features .icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   AFFILIATION
   ========================================================================== */
.affiliate-section {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--border);
}

.affiliate-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
}

.affiliate-box h2 { margin-bottom: 12px; }
.affiliate-box p { color: var(--text-muted); max-width: 480px; }

.affiliate-rate {
    font-family: var(--font-mono);
    text-align: center;
    border-left: 1px solid var(--border);
    padding-left: 40px;
}
.affiliate-rate strong { display: block; font-size: 52px; color: var(--accent); }
.affiliate-rate span { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }

@media (max-width: 760px) {
    .affiliate-box { grid-template-columns: 1fr; text-align: center; padding: 36px; }
    .affiliate-box p { margin: 0 auto; }
    .affiliate-rate { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 24px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section { padding: var(--section-padding) 0; border-bottom: 1px solid var(--border); }

.faq-list { max-width: 760px; margin: 0 auto; }

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 4px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.faq-icon {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 18px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.faq-answer p {
    color: var(--text-muted);
    font-size: 14.5px;
    padding: 0 4px 22px;
    max-width: 620px;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final-cta {
    padding: var(--section-padding) 0;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.final-cta h2 { font-size: clamp(30px, 4.5vw, 48px); margin-bottom: 32px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { padding: 72px 0 32px; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
}

.footer-brand .logo { display: block; margin-bottom: 14px; }
.footer-brand p { color: var(--text-faint); font-size: 14px; max-width: 260px; }

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 18px;
}
.footer-col a {
    display: block;
    color: var(--text-muted);
    font-size: 14.5px;
    padding: 6px 0;
    transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 28px;
    font-size: 13px;
    color: var(--text-faint);
}

.footer-social { display: flex; gap: 14px; }
.footer-social a {
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
/* Correctif : aucune règle ne fixait la taille du SVG ici -- sans
   width/height explicites, le rendu par défaut d'un <svg> non dimensionné
   varie selon le navigateur (visible dans certains, réduit à 0x0 et donc
   invisible dans d'autres, notamment sur mobile -- signalé par
   l'utilisateur : logos des réseaux sociaux en bas de page toujours
   "vides" sur son appareil). Taille fixe explicite = rendu identique
   partout. */
.footer-social .icon { width: 16px; height: 16px; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ANIMATIONS AU SCROLL (classes ajoutées par JS)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PAGE INTERNE GENERIQUE (formations.php / tarifs.php)
   ========================================================================== */
.page-header {
    padding: 70px 0 60px;
    border-bottom: 1px solid var(--border);
}
.page-header .eyebrow { margin-bottom: 14px; }
.page-header h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 16px; }
.page-header p { color: var(--text-muted); max-width: 560px; font-size: 17px; }

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 40px 0 8px;
}
.filter-chip {
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--text-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.filter-chip.active,
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Étape 108 -- champ de recherche des catalogues publics (ebooks,
   formations), même langage visuel que .filter-chip ci-dessus. */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px;
    transition: border-color 0.15s ease;
}
.search-box:focus-within { border-color: var(--accent); }
.search-box .icon { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }
.search-box input {
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    width: 100%;
}
.search-box input:focus { outline: none; }
.search-box input::placeholder { color: var(--text-faint); }
.search-clear {
    display: flex;
    color: var(--text-faint);
    flex-shrink: 0;
}
.search-clear .icon { width: 14px; height: 14px; }
.search-clear:hover { color: var(--accent); }

.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.compare-table th, .compare-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14.5px;
}
.compare-table thead th {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    background: var(--bg-surface-2);
}
.compare-table tbody td:not(:first-child) { text-align: center; color: var(--accent); font-weight: 700; }
.compare-table tbody td.table-neutral { color: var(--text-faint); }
.compare-table tbody tr:last-child td { border-bottom: none; }

/* Conteneurs de défilement horizontal pour .compare-table (utilisée à la
   fois pour le comparatif des offres — includes/pricing_cards.php — et le
   comparatif "Seul vs SavoirUp" — public/index.php) : sur petit écran, le
   tableau garde sa largeur naturelle (jamais de colonnes écrasées), tout
   débordement défile horizontalement à l'intérieur de son propre wrapper,
   jamais sur la page entière. */
.pricing-table-wrapper,
.compare-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .pricing-table-wrapper .compare-table,
    .compare-table-wrapper .compare-table {
        width: auto;
    }
}

/* ==========================================================================
   ALERTES (succès / erreur / avertissement / information)
   ========================================================================== */
.alert {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    line-height: 1.5;
}
.alert-success { background: rgba(62, 142, 99, 0.12); border-color: rgba(62, 142, 99, 0.4); color: #7FD9A4; }
.alert-error   { background: rgba(192, 80, 62, 0.12); border-color: rgba(192, 80, 62, 0.4); color: #E38A7A; }
.alert-warning { background: rgba(201, 162, 39, 0.12); border-color: rgba(201, 162, 39, 0.4); color: var(--accent); }
.alert-info    { background: var(--bg-surface-2); border-color: var(--border-strong); color: var(--text-muted); }

/* ==========================================================================
   ESPACE MEMBRE (profil, mot de passe)
   ========================================================================== */
.member-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 70px 24px 100px;
}

.member-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
.member-tabs a {
    padding: 12px 4px;
    margin-right: 24px;
    font-size: 14.5px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transform: translateY(1px);
}
.member-tabs a.active,
.member-tabs a:hover { color: var(--text); border-color: var(--accent); }

.profile-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    max-width: 680px;
}

/* Sur mobile, 40px de padding de chaque côté mangeait ~21% d'un écran de
   375px (fil de messagerie écrasé, formulaires à l'étroit). Réduit ici
   pour toutes les pages qui utilisent .profile-card (profil, mot de
   passe, abonnement, affiliation, messagerie...). */
@media (max-width: 600px) {
    .profile-card { padding: 22px; }
}

/* =========================================================
   MESSAGERIE PRIVÉE — bulles de conversation (membre/messagerie.php)
   Remplace des styles inline : les bulles s'ajustaient mal à leur
   contenu (max-width:78% atteint même pour un mot).
   ========================================================= */
.msg-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.msg-row { display: flex; }
.msg-row-out { justify-content: flex-end; }
.msg-row-in  { justify-content: flex-start; }

.msg-bubble {
    width: fit-content;
    max-width: min(80%, 440px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.msg-bubble-out {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg-bubble-in {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.msg-sender {
    font-size: 11px;
    font-weight: 700;
    opacity: .75;
    margin-bottom: 2px;
}
.msg-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg-attachment img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
}
.msg-time {
    font-size: 10.5px;
    opacity: .7;
    margin-top: 4px;
    text-align: right;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.profile-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #7a611a);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    color: #14140F;
    overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-name { font-size: 20px; margin-bottom: 4px; }
.profile-meta { font-size: 13px; color: var(--text-faint); display: flex; gap: 14px; flex-wrap: wrap; }

.role-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 2px 7px;
    color: var(--text-muted);
}

.form-group textarea {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    color: var(--text);
    font-size: 14.5px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}
.form-group textarea:focus { border-color: var(--accent); outline: none; }

.form-group input[type="file"] {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.form-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }

/* =========================================================
   SavoirUp — SITE PUBLIC
   HEADER + NAVIGATION
========================================================= */

.public-header {
    width: 100%;
    background: rgba(9, 10, 12, 0.95);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.public-container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.public-nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.public-logo {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

.public-menu {
    display: flex;
    align-items: center;
    gap: 36px;
}

.public-menu a {
    position: relative;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    padding: 28px 0;
    transition: color 0.2s ease;
}

.public-menu a:hover {
    color: var(--text);
}

.public-menu a.active {
    color: var(--text);
}

.public-menu a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
}

.public-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.login-link {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: var(--text);
}

/* =========================================================
   HERO PUBLIC
========================================================= */

.public-hero {
    padding: 100px 0 80px;
}

.public-hero h1 {
    max-width: 800px;
    font-size: clamp(42px, 6vw, 72px);
    margin: 18px 0 20px;
}

.public-hero h1 span {
    color: var(--accent);
}

.public-hero p {
    max-width: 720px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.section-kicker {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-heading {
    margin-bottom: 40px;
}

.section-heading p {
    color: var(--text-muted);
    max-width: 700px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7;
}

.section-heading.center {
    text-align: center;
}

.section-heading.center p {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   FORMATIONS PUBLIC
========================================================= */

.public-formations {
    padding: 80px 0 120px;
}

.public-formations h2 {
    font-size: 42px;
    margin-bottom: 12px;
}

.formations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.formation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.formation-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
}

.formation-thumb {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #28251B,
        #18223F
    );
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 14px;
}

.formation-body {
    padding: 28px;
}

.formation-category {
    display: block;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.formation-title {
    font-size: 24px;
    margin-bottom: 12px;
}

.formation-desc {
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* =========================================================
   BOUTONS (voir la définition unifiée en haut du fichier —
   .btn / .btn-primary / .btn-outline sont déjà complets)
========================================================= */

/* =========================================================
   POUR QUI / PAS POUR QUI
========================================================= */

.public-fit {
    padding: 60px 0;
}

.fit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.fit-card {
    padding: 28px 26px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

.fit-card h3 {
    margin: 0 0 18px;
    font-size: 18px;
}

.fit-card.yes h3 { color: var(--accent); }
.fit-card.no h3 { color: var(--text-faint); }

.fit-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fit-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.fit-card.yes li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--accent);
    -webkit-mask-image: var(--icon-check-mask);
    mask-image: var(--icon-check-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fit-card.no li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--text-faint);
    -webkit-mask-image: var(--icon-x-mask);
    mask-image: var(--icon-x-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 720px) {
    .fit-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   COMPARAISON SEUL / AVEC SavoirUp
========================================================= */

.public-compare {
    padding: 60px 0;
}


/* =========================================================
   CTA
========================================================= */

.public-cta {
    padding: 40px 0 100px;
}

.cta-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 60px;
    text-align: center;
}

.cta-card h2 {
    font-size: 40px;
    margin: 14px 0;
}

.cta-card p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 28px;
}

/* =========================================================
   FOOTER
========================================================= */

.public-footer {
    border-top: 1px solid var(--border);
    padding: 50px 0;
    background: var(--bg-surface);
}

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

.footer-content p {
    color: var(--text-muted);
    font-size: 14px;
}

.footer-links {
    display: flex;
    gap: 24px;
    margin-top: 30px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 14px;
}

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

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .public-nav {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    /* Étape 75 : sur mobile, la barre du haut n'affiche plus le menu
       ni les boutons connexion/inscription en permanence — seul le
       burger reste visible (même bascule que includes/header.php,
       .burger passe à display:flex ici). Le menu et les boutons
       restent accessibles dans .mobile-nav une fois le burger ouvert
       (voir public/index.php) — jamais retirés, juste déplacés. */
    .public-menu {
        display: none;
    }

    .public-actions {
        display: none;
    }

    .burger {
        display: flex;
    }

    .formations-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {

    .public-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .public-nav {
        gap: 16px;
    }

    .public-logo {
        font-size: 21px;
    }

    .login-link {
        display: none;
    }

    .public-hero {
        padding: 70px 0 60px;
    }

    .public-hero h1 {
        font-size: 42px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .formations-grid {
        grid-template-columns: 1fr;
    }

    .cta-card {
        padding: 35px 20px;
    }
}/* =========================================
   CORRECTION ALIGNEMENT FORMATIONS
   ========================================= */

.page-header,
.formations-section {
    width: 100%;
}

.page-header .container,
.formations-section .container {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.formations-section {
    padding-top: 60px;
    padding-bottom: 100px;
}

.formations-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.formation-card {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.formation-body {
    padding: 28px;
}

.formation-thumb {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .formations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .page-header .container,
    .formations-section .container {
        width: calc(100% - 30px);
    }

    .formations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}/* =========================================================
   CORRECTION ALIGNEMENT PAGE FORMATIONS
   ========================================================= */

.formations-section {
    padding: 60px 0 100px;
}

.formations-grid {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.formation-card {
    width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.formation-thumb {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formation-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px;
}

.formation-title {
    margin: 12px 0;
}

.formation-desc {
    flex: 1;
    margin-bottom: 24px;
}

.formation-body .btn {
    align-self: flex-start;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
    padding: 90px 0 50px;
}

.page-header .container {
    max-width: 1180px;
    margin: 0 auto;
}

.page-header h1 {
    max-width: 850px;
    margin-bottom: 20px;
}

.page-header p {
    max-width: 750px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .formations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .formations-grid {
        grid-template-columns: 1fr;
    }

    .formations-section {
        padding: 40px 0 70px;
    }

    .page-header {
        padding: 60px 0 40px;
    }

}
/* Le centrage "2 formations seulement" vit désormais plus bas dans ce
   fichier, correctement limité à partir de 641px (voir plus bas) —
   l'ancienne règle non protégée par media query cassait le mobile. */

/* =========================================================
   CARTES FORMATION — refonte visuelle (public catalogue, page
   d'accueil, dashboard membre, catalogue membre). Ce bloc est
   volontairement placé en fin de fichier : plusieurs anciennes
   définitions de .formation-card/.formations-grid existent plus
   haut dans ce fichier (accumulées au fil des itérations) — on ne
   les supprime pas pour éviter toute régression sur un style qui
   en dépendrait encore ailleurs, mais celles ci-dessous les
   remplacent effectivement (dernière règle = règle appliquée à
   spécificité égale).
   ========================================================= */

.formations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.formation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-width: 0;
    margin: 0;

    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.formation-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.formation-card.locked { opacity: .92; }

/* Étape 159 : badge "Top vente" -- coin OPPOSÉ à .lock-badge (haut
   droite, voir dashboard.css) pour que les deux badges cohabitent
   sans jamais se chevaucher sur une formation à la fois mise en avant
   ET verrouillée pour le palier du visiteur. .formation-card a déjà
   position:relative (règle ci-dessus), aucun prérequis CSS
   supplémentaire. */
.featured-badge {
    position: absolute;
    top: 12px; left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #0E1530;
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
}
.featured-badge .icon { width: 12px; height: 12px; }

/* ---------- Cover / miniature ---------- */

.formation-thumb {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-surface-2);
    /* Étape 79 (correctif) : height/min-height annulés explicitement --
       plusieurs anciennes définitions .formation-thumb plus haut dans ce
       fichier (150px/160px/180px, jamais nettoyées, voir le bloc "CARTES
       FORMATION" plus bas) fixaient encore une hauteur ou min-height. Le
       simple fait de ne plus DÉFINIR height ici ne suffisait pas à
       l'annuler : sans une valeur explicite ici, l'ancienne déclaration
       restait la seule en vigueur pour cette propriété précise (cascade
       CSS par propriété, pas par bloc) -- overflow:hidden ci-dessus
       recadrait donc encore l'image contre cette ancienne hauteur. */
    height: auto;
    min-height: 0;
}

/* Étape 79 : hauteur fixe + object-fit:cover (Étape 74) retirés --
   "cover" recadrait toujours un peu l'image dès que son ratio ne
   correspondait pas exactement au cadre fixe (190px desktop/160px
   mobile), coupant parfois du texte/des éléments visibles sur les
   visuels de formation. L'image s'affiche maintenant à sa hauteur
   naturelle (height:auto, largeur 100%) : jamais recadrée, jamais de
   fond de carte visible en marge (la boîte épouse exactement l'image,
   il n'y a plus de hauteur fixe à combler). Les cartes d'une même
   rangée peuvent avoir des hauteurs légèrement différentes si les
   visuels n'ont pas tous le même ratio -- compromis assumé, moins
   grave que de perdre du contenu ou d'afficher une marge. */
.formation-thumb img {
    display: block;
    width: 100%;
    height: auto;
    /* Étape 79c (correctif) : "aspect-ratio: auto 16/9" réserve un cadre
       16:9 tant que l'image n'a pas encore chargé (avant que le navigateur
       ne connaisse ses dimensions réelles) -- sans ça, .formation-thumb
       (height:auto) restait à hauteur ~0 avant chargement, et les images
       en loading="lazy" ne se déclenchaient jamais (rect 0x0 => jamais
       "dans le viewport" pour l'IntersectionObserver natif), constaté en
       test réel (public/index.php mobile : image jamais chargée même
       après scroll). Le mot-clé "auto" fait que dès que l'image charge,
       son ratio RÉEL reprend le dessus (aucun recadrage, conforme au
       correctif Étape 79 ci-dessus) -- 16/9 n'est qu'un espace réservé
       par défaut, pas une contrainte finale. */
    aspect-ratio: auto 16 / 9;
}

.formation-thumb-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-surface-2) 75%);
}

.formation-thumb-placeholder span {
    font-family: var(--font-mono);
    font-size: 42px;
    font-weight: 800;
    color: var(--accent);
    opacity: .55;
}

/* Étape 171 : carte "bientôt disponible" (formations/ebooks) --
   même placeholder que ci-dessus, mais avec une icône (icon(),
   includes/functions.php) au lieu d'une lettre -- sizing dédié
   puisque aucune icône n'y était utilisée jusqu'ici. */
.formation-card-soon .formation-thumb-placeholder .icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
    opacity: .55;
}

.lock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* ---------- Contenu ---------- */

.formation-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 20px 22px 22px;
}

.formation-category {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.formation-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.formation-desc {
    flex: 1;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.formation-body .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 6px;
}

.formation-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formation-card-actions .btn {
    margin-top: 0;
    /* Étape 167 (correctif) : .btn impose white-space:nowrap (pensé pour
       de courts libellés de bouton) -- les textes d'incitation plus longs
       ("Passe à un palier supérieur pour débloquer plus de formations")
       débordaient donc du bord de la carte au lieu de passer à la ligne.
       Boutons empilés sur toute la largeur (width:100%, cohérent avec
       .formation-card-actions en colonne) + retour à la ligne autorisé +
       hauteur qui grandit naturellement (min-height reste une valeur
       plancher, jamais fixe) si le texte prend 2 lignes. */
    width: 100%;
    white-space: normal;
    text-align: center;
}

@media (max-width: 980px) {
    .formations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .formations-grid { grid-template-columns: 1fr; gap: 18px; }
    .formation-body { padding: 18px; }
}

/* Grille à 2 formations seulement : on centre plutôt que de laisser
   une 3e colonne vide et déséquilibrée. Seulement au-delà de 640px :
   sur mobile, une seule colonne reste toujours prioritaire. */
@media (min-width: 641px) {
    .formations-grid:has(.formation-card:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 340px));
        justify-content: center;
    }
}

.formation-hero-cover {
    display: block;
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 20px;
}

/* =========================================================
   HERO DE FICHE DESCRIPTION (formation / ebook) -- image de
   couverture et typographie resserrées pour un rendu plus moderne.
   Scopé à .formation-detail-hero (la VRAIE fiche de
   public/formation.php + public/ebook.php uniquement -- jamais leur
   état "introuvable"). Ne touche JAMAIS .page-header ni
   .formation-hero-cover de base : ces classes sont partagées par
   14 autres pages (formations.php, tarifs.php, communaute.php,
   formations-gratuites.php, outils-ia.php, CGU...).
   ========================================================= */

.formation-detail-hero .formation-hero-cover {
    max-width: 480px;
    max-height: 240px;
}

.formation-detail-hero h1 {
    font-size: clamp(24px, 3.2vw, 32px);
}

.formation-detail-hero p {
    font-size: 15px;
}

@media (max-width: 600px) {
    .formation-detail-hero .formation-hero-cover {
        max-width: 100%;
        max-height: 200px;
    }
}

/* Stats rapides (modules/leçons) — page détail formation */
.formation-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Carte prix — page détail formation (valeur / prix abonnement réel /
   économie), distincte de .formation-value-block utilisé sur les
   cartes du catalogue, qui reste inchangée. */
.formation-pricing-card {
    max-width: 420px;
    margin-top: 22px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-surface);
}

.formation-pricing-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.formation-pricing-row:last-of-type { border-bottom: none; }

.formation-pricing-label {
    color: var(--text-muted);
    font-size: 13.5px;
}

.formation-pricing-amount {
    font-weight: 700;
    color: var(--text);
}

.formation-pricing-amount.strike {
    text-decoration: line-through;
    color: var(--text-faint);
    font-weight: 500;
}

.formation-pricing-amount.highlight {
    color: var(--success);
    font-size: 19px;
}

.formation-savings {
    color: var(--success);
    font-weight: 700;
    font-size: 13.5px;
}

@media (max-width: 600px) {
    .formation-pricing-card { max-width: 100%; }
}

/* =========================================================
   VALEUR DE LA FORMATION (prix barré + badge "incluse dans
   l'abonnement") — carte catalogue ET page détail formation.
   Une seule définition ici, réutilisée sur toutes les pages
   (public/membre) : voir formatFcfa() dans functions.php.
   ========================================================= */

.formation-value-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 6px;
}

.formation-value-strike {
    color: var(--text-faint);
    font-size: 13px;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.formation-included-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;

    padding: 5px 12px;
    border-radius: 10px;

    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    --cashflow-brand-color: #F5F5F5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Étape 49 (Lot B) — tailles des icônes icon() remplaçant les
   emoji sur les pages formation/leçon (public + membre, même
   feuille de style partagée). */
.formation-included-badge .icon { width: 14px; height: 14px; flex-shrink: 0; }
.formation-back-link .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.formation-stats-row .icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.alert-cta-link .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

/* Étape 95 (correctif) : icon('file-text') utilisée dans
   .formation-category sur les cartes ebook (public/ebooks.php,
   membre/ebooks.php, public/index.php) n'avait jamais eu de règle de
   taille dédiée -- les formations, dont cette classe est calquée,
   n'y ont jamais mis d'icône (juste du texte), donc aucune règle
   n'existait pour ce contexte précis. Sans width/height explicites,
   le SVG (aucune dimension propre, seulement un viewBox) prenait sa
   taille par défaut du navigateur (~300x150px), écrasant toute la
   carte. */
.formation-category .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

.formation-benefits {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.formation-benefits li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 13px;
}

.formation-benefits li::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: var(--success);
    -webkit-mask-image: var(--icon-check-mask);
    mask-image: var(--icon-check-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.formation-body .btn.btn-primary + .btn.btn-outline,
.formation-body .btn.btn-outline + .btn.btn-primary {
    margin-left: 8px;
}

/* =========================================================
   ÉTAPE 49 (LOT C) — TAILLES DES ICÔNES icon() REMPLAÇANT
   LES DERNIERS EMOJI DU SITE (alertes, indices, affiliation)
========================================================= */
.alert .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.form-hint .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.copy-affiliate-btn .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.compare-table td:first-child .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.compare-table td:not(:first-child) .icon { width: 16px; height: 16px; }
.empty-state-icon .icon { width: 30px; height: 30px; color: var(--accent); }
.mock-post-actions .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }

/* =========================================================
   HERO OUTILS IA (Étape 176) -- propre à public/outils-ia.php,
   ne touche pas .page-header (partagé par 8 autres pages).
   ========================================================= */

.outils-ia-hero {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: center;
}

.outils-ia-hero__visual svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .outils-ia-hero {
        grid-template-columns: 1fr;
    }
    .outils-ia-hero__visual {
        max-width: 380px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Étape 2 — Tarifs : un palier x 3 durées + bandeau gratuit + tableau 2 colonnes
   ========================================================================== */
.pricing-grid.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
.price-positioning {
    color: var(--accent); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}
.price-fcfa { color: var(--accent); font-weight: 700; font-size: 17px; margin: -4px 0 6px; }
.price-fcfa-inline { display: block; font-size: 14px; margin: 4px 0 0; }
.cur-switch { text-align: right; margin: 0 0 14px; }
.cur-switch-label { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.cur-select { background: var(--surface, #14161b); color: var(--text); border: 1px solid var(--border, rgba(255,255,255,.18)); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-family: inherit; cursor: pointer; }
.cur-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* référence en dollars entre parenthèses, discrète à côté du prix local (étape 64) */
.cur-alt { font-family: var(--font-body, inherit); font-size: .8em; font-weight: 500; color: var(--text-muted); white-space: nowrap; letter-spacing: 0; }
.price-amount .cur-alt, .monetized-price-current .cur-alt, .fu-amount .cur-alt, .fp-amount .cur-alt { display: block; font-size: 15px; margin: 6px 0 0; }
.monetized-buy-bar-price .cur-alt { display: block; font-size: 11px; line-height: 1.2; margin-top: 1px; }
.monetized-final-cta-price .cur-alt { font-size: .85em; }
.monetized-price-note { color: var(--text-muted); font-size: 13px; margin: 8px 0 0; line-height: 1.5; }
.price-note { text-align: center; color: var(--text-muted); font-size: 13.5px; margin: 22px auto 0; max-width: 620px; }
.price-monthly { color: var(--text-muted); font-size: 14px; margin: -14px 0 24px; }
.price-monthly strong { color: var(--text); }
.price-chip {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
}
.price-description { color: var(--text-muted); font-size: 13px; margin: 8px 0 0; }
.pricing-free {
    max-width: 1080px; margin: 28px auto 0; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    background: var(--bg-surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.pricing-free h3 { font-size: 20px; margin-bottom: 14px; }
.pricing-free .price-features { margin-bottom: 0; }
.compare-table-2 { max-width: 860px; margin-left: auto; margin-right: auto; }
.compare-table-2 td:first-child { text-align: left; }
.compare-sub { font-weight: 400; font-size: 11.5px; color: var(--text-faint); text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) {
    .pricing-grid.pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-free { flex-direction: column; align-items: flex-start; }
}
.formation-pricing-amount.highlight { white-space: nowrap; }


/* ==========================================================================
   Étape 3 — Liens réseaux (page "Rejoins-nous" + pied de page)
   ========================================================================== */
.icon-lg { width: 32px; height: 32px; }

.rejoins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.rejoins-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    transition: border-color .18s ease, transform .18s ease;
}
.rejoins-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rejoins-card-icon { color: var(--accent); }
.rejoins-card-label { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.rejoins-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: 13.5px;
}
.rejoins-card-cta .icon { width: 14px; height: 14px; transform: rotate(45deg); }


/* ==========================================================================
   Catalogue "Commander un compte monétisé" (monetized_accounts) --
   volontairement séparé de .price-card (offres d'abonnement /tarifs),
   jamais mélangés, voir includes/monetized_accounts.php.
   ========================================================================== */
.monetized-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 640px;
    margin: 0 auto 40px;
}
.monetized-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.monetized-badge {
    position: absolute;
    top: -13px; left: 32px;
    background: var(--accent);
    color: #14140F;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    z-index: 1;
}

/* Étape 16 -- carte de l'offre mise en valeur : contour lumineux animé +
   badge "Le plus populaire" (distinct du badge -X% déjà en place). */
.monetized-card-featured {
    border-color: var(--accent);
    animation: monetized-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes monetized-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 16px 0 rgba(25, 211, 230, 0.25); }
    50%      { box-shadow: 0 0 0 1px var(--accent), 0 0 28px 3px rgba(25, 211, 230, 0.45); }
}
.monetized-popular-badge {
    position: absolute;
    top: -13px; right: 32px;
    background: var(--bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    z-index: 1;
}
@media (max-width: 480px) {
    .monetized-badge { left: 16px; }
    .monetized-popular-badge { right: 16px; font-size: 10px; padding: 4px 9px; }
}
.monetized-title { font-size: 22px; margin: 0 0 18px; }
.monetized-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; padding: 0; }
.monetized-features li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-muted); }
.monetized-features .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.monetized-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.monetized-price-strike { font-size: 15px; color: var(--text-faint); text-decoration: line-through; }
.monetized-price-current { font-family: var(--font-mono); font-size: 32px; color: var(--text); }
.monetized-delivery { font-size: 13px; color: var(--text-faint); margin: 0 0 4px; }
.monetized-stock { font-size: 13px; color: var(--accent); margin: 0 0 20px; font-weight: 600; }
.monetized-order-btn { width: 100%; justify-content: center; margin-top: 8px; }
.monetized-guarantee {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12.5px; color: var(--text-faint);
    margin: 18px 0 0; line-height: 1.5;
}
.monetized-guarantee .icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Étape 7 -- maquette validée : bandeau de confiance, sous-titre produit,
   grille de confiance 2x2 et FAQ, ajoutés à la carte monetized_accounts. */
.monetized-trustline {
    text-align: center; font-size: 13.5px; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 20px;
}
.monetized-trustline .icon { width: 16px; height: 16px; color: var(--cashflow-red); }
.monetized-subtitle { color: var(--text-muted); font-size: 14.5px; margin: -10px 0 20px; }
.monetized-trust-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--border);
}
.monetized-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.monetized-trust-item .icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.monetized-faq { max-width: 640px; margin: 48px auto 0; }
.monetized-faq-item {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 16px 20px; margin-bottom: 10px; background: var(--bg-surface);
}
.monetized-faq-item summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.monetized-faq-item p { margin-top: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 480px) { .monetized-trust-grid { grid-template-columns: 1fr; } }
.monetized-login-note { text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 10px; }

/* Étape 10 -- reproduction fidèle comptedejamonetise.com : hero, stats,
   pourquoi-nous-choisir, étapes, CTA formation, à-propos, CTA final. */
.monetized-hero { padding: 80px 0 32px; }
.monetized-hero-grid {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
    max-width: var(--container-width);
}
.monetized-hero-copy h1 { margin: 18px 0 16px; font-size: 40px; line-height: 1.15; }
.monetized-hero-copy h1 span { color: var(--accent); }
.monetized-hero-copy > p { color: var(--text-muted); font-size: 16px; margin-bottom: 28px; }
.monetized-hero .hero-actions { margin-bottom: 24px; }
.monetized-hero-image { display: flex; justify-content: center; }
.monetized-hero-image-float { position: relative; max-width: 260px; width: 100%; animation: monetized-hero-float 4.5s ease-in-out infinite; }
.monetized-hero-image img {
    display: block; width: 100%; border-radius: var(--radius-lg);
    border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.monetized-hero-badge {
    position: absolute; display: flex; align-items: center; gap: 6px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--text); box-shadow: var(--shadow-card); white-space: nowrap;
}
.monetized-hero-badge .icon { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.monetized-hero-badge-top { top: 10px; left: -18px; animation: monetized-badge-in 0.6s ease-out 0.3s both, monetized-hero-float 4.5s ease-in-out 0.3s infinite; }
.monetized-hero-badge-bottom { bottom: 36px; right: -22px; animation: monetized-badge-in 0.6s ease-out 0.6s both, monetized-hero-float 4s ease-in-out 0.6s infinite; }
@keyframes monetized-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes monetized-badge-in {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
    .monetized-hero-badge-top { left: -8px; }
    .monetized-hero-badge-bottom { right: -8px; }
}
.monetized-flags-marquee {
    overflow: hidden;
    border-top: 1px solid var(--border);
    padding-top: 20px; margin-top: 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.monetized-flags-track {
    display: flex; align-items: center; gap: 40px; width: max-content;
    animation: monetized-flags-scroll 24s linear infinite;
}
.monetized-flags-marquee:hover .monetized-flags-track { animation-play-state: paused; }
.monetized-flag-item {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 13px; color: var(--text-faint); flex-shrink: 0;
}
.monetized-flag-item img { width: 22px; height: auto; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
@keyframes monetized-flags-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 900px) {
    .monetized-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .monetized-hero .hero-actions { justify-content: center; }
    .monetized-hero-image { order: -1; margin-bottom: 8px; }
    /* Correctif : max-width réduit ici sans annuler le width:100% de la
       règle de base -- l'image se retrouvait plus étroite que son
       conteneur (.monetized-hero-image-float, resté à 260px) sans être
       centrée dedans (display:block, pas de margin:auto), décalée vers
       la gauche avec un vide à droite (signalé par l'utilisateur,
       capture mobile). */
    .monetized-hero-image img { max-width: 200px; margin: 0 auto; }
}

.monetized-stats-bar { padding: 32px 0; border-bottom: 1px solid var(--border); }
.monetized-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
}
.monetized-stat { display: flex; flex-direction: column; gap: 4px; }
.monetized-stat-num { font-family: var(--font-display); font-size: 30px; color: var(--accent); }
.monetized-stat span:last-child { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 700px) { .monetized-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.monetized-why { padding: 72px 0; }
.monetized-why-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;
}
.monetized-why-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px 22px; text-align: center;
}
.monetized-why-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent); margin-bottom: 14px;
}
.monetized-why-icon .icon { width: 20px; height: 20px; }
.monetized-why-card h3 { font-size: 16px; margin-bottom: 8px; }
.monetized-why-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) { .monetized-why-grid { grid-template-columns: repeat(2, 1fr); } }

.monetized-steps-section { padding: 72px 0; background: var(--bg-surface-2); }
.monetized-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.monetized-step { text-align: center; }
.monetized-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
    color: #14140F; font-family: var(--font-mono); font-weight: 700; margin-bottom: 14px;
}
.monetized-step h3 { font-size: 16px; margin-bottom: 8px; }
.monetized-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 700px) { .monetized-steps { grid-template-columns: 1fr; } }

.monetized-formation-cta, .monetized-about {
    padding: 64px 0; text-align: center;
}
.monetized-formation-cta .container, .monetized-about .container { max-width: 640px; }
.monetized-formation-cta h2, .monetized-about h2 { margin: 12px 0 16px; font-size: 26px; }
.monetized-formation-cta p, .monetized-about p { color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.monetized-formation-cta .btn { margin-top: 12px; }

.monetized-final-cta {
    padding: 64px 0; text-align: center; background: var(--bg-surface);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.monetized-final-cta h2 { font-size: 28px; margin-bottom: 12px; }
.monetized-final-cta p { color: var(--text-muted); margin-bottom: 20px; }
.monetized-final-cta-price { margin-top: 16px; font-size: 14px; color: var(--text-faint); }
.monetized-final-cta-price .monetized-price-strike { margin-right: 8px; }

/* Étape 13 -- section vidéo d'introduction (includes/video_intro_section.php),
   partagée accueil + "Commander un compte monétisé". */
.video-intro-section { padding: 48px 0; }
.video-intro-player {
    position: relative; width: 100%; max-width: 860px; margin: 0 auto;
    aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-surface); border: 1px solid var(--border);
}
.video-intro-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-intro-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; color: var(--text-faint);
}
.video-intro-play-btn {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: var(--accent);
    color: #14140F; flex-shrink: 0;
}
.video-intro-play-btn .icon { width: 26px; height: 26px; margin-left: 3px; }
.video-intro-placeholder p { font-size: 13.5px; margin: 0; }
.video-intro-caption { text-align: center; margin: 16px 0 0; color: var(--text-muted); font-size: 14.5px; }
@media (max-width: 700px) { .video-intro-section { padding: 32px 0; } }

/* ==========================================================================
   Étape 39 -- badges de menu (PREMIUM / GRATUIT) + burger à 1320px
   Le menu public est plus large (Formations [PREMIUM], Formations gratuites)
   et débordait DÉJÀ entre 900 et ~1200px (bouton d'inscription coupé). En
   dessous de 1500px on resserre l'espacement et on masque le badge GRATUIT
   (redondant avec le mot "gratuites") ; en dessous de 1320px le menu complet
   laisse la place au burger (les liens et boutons restent dans .mobile-nav).
   ========================================================================== */
.nav-badge {
    /* Étape 41 : -10 % (8px / 3px 6px -> 7.2px / 2.7px 5.4px), demande utilisateur */
    font-size: 7.2px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 2.7px 5.4px;
    border-radius: 999px;
    flex-shrink: 0;
}
.nav-badge-premium { background: var(--accent); color: #0B1020; }
.nav-badge-free {
    background: rgba(61, 220, 132, 0.14);
    color: #3DDC84;
    box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.38);
}
.main-nav a.has-badge,
.public-menu a.has-badge {
    display: inline-flex;
    align-items: center;
    gap: 5.4px;
    white-space: nowrap;
}
.mobile-nav a.has-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Étape 54 -- l'en-tête débordait entre ~1500 et ~1740px (zoom navigateur 125 %
   sur écran 1920 = ~1520px) : bouton d'inscription coupé, "Comptes monétisés" et
   "Se connecter" sur deux lignes. Compression PROGRESSIVE (palier par palier,
   testé de 1335 à 1920px sans débordement) + aucun retour à la ligne dans le menu. */
.main-nav a, .public-menu a,
.public-actions a, .header-actions a { white-space: nowrap; }
@media (max-width: 1760px) {
    .main-nav, .public-menu { gap: 26px; }
    .main-nav .nav-badge-free,
    .public-menu .nav-badge-free { display: none; }
}
@media (max-width: 1560px) {
    .main-nav, .public-menu { gap: 20px; }
}
@media (max-width: 1450px) {
    .main-nav, .public-menu { gap: 16px; }
    .public-actions, .header-actions { gap: 10px; }
    .public-actions .btn, .header-actions .btn { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1340px) {
    .main-nav, .header-actions,
    .public-menu, .public-actions { display: none; }
    .burger { display: flex; }
}

/* Étape 54 -- accueil : boutons d'action centrés sous la vidéo d'introduction */
.public-hero + .video-intro-section { padding-top: 0; }
.video-intro-section:has(+ .video-intro-actions) { padding-bottom: 28px; }
.video-intro-actions { padding: 0 0 44px; }
.video-intro-actions .hero-actions { justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 0; }
/* Étape 55 -- boutons plus discrets (48px/15px -> 38px/13px), centrés et non pleine largeur sur mobile */
.video-intro-actions .btn { min-height: 38px; padding: 0 18px; font-size: 13px; font-weight: 600; gap: 6px; width: auto; }

/* ==========================================================================
   Étape 56 -- réseaux sociaux du pied de page : style "Suis-nous" de
   comptedejamonetise.com (titre mono + pastilles rondes 42px, logos blancs
   sur fond aux couleurs officielles ; TikTok = noir + liseré rouge/cyan).
   Les liens restent pilotés par site_links ; seules les 4 marques connues
   (brandIconHtml) ont une couleur dédiée, toute autre garde la pastille neutre.
   ========================================================================== */
.footer-social { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-social-lbl {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9CA3AF;
}
.footer-social-row { display: flex; gap: 10px; }
.footer-social .footer-soc {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #121A33;
    border: 1px solid #243059;
    color: #fff;
    transition: transform .15s ease, filter .15s ease;
}
.footer-social .footer-soc .icon { width: 20px; height: 20px; color: #fff !important; }
.footer-social .footer-soc:hover { transform: translateY(-2px); filter: brightness(1.1); border-color: transparent; color: #fff; }
.footer-social .footer-soc-whatsapp { background: #25D366; border-color: #25D366; }
.footer-social .footer-soc-discord  { background: #5865F2; border-color: #5865F2; }
.footer-social .footer-soc-youtube  { background: #FF0000; border-color: #FF0000; }
.footer-social .footer-soc-tiktok   { background: #000;    border-color: #33406D; }
.footer-social .footer-soc-tiktok .icon {
    filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55);
}
@media (max-width: 600px) {
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-social { justify-content: center; flex-direction: column; gap: 12px; width: 100%; }
}


/* SavoirUp : 4 offres payantes (1, 3, 6, 12 mois) */
.pricing-grid > .price-card { min-width: 0; }
.price-amount { overflow-wrap: anywhere; line-height: 1.15; }
.pricing-grid.pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; gap: 18px; }
.pricing-grid.pricing-grid-4 .price-card { padding: 36px 22px; }
.pricing-grid.pricing-grid-4 .price-amount { font-size: clamp(20px, 2.15vw, 30px); white-space: nowrap; }
.pricing-grid.pricing-grid-4 .price-monthly { flex-wrap: wrap; }
@media (max-width: 1100px) { .pricing-grid.pricing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; gap: 24px; } .pricing-grid.pricing-grid-4 .price-card { padding: 40px 28px; } .pricing-grid.pricing-grid-4 .price-amount { font-size: clamp(28px, 4.6vw, 36px); } }
@media (max-width: 700px) { .pricing-grid.pricing-grid-4 { grid-template-columns: minmax(0, 1fr); max-width: 480px; } .pricing-grid.pricing-grid-4 .price-amount { font-size: clamp(26px, 8vw, 36px); } }