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

/* ---------- Variables globales (design tokens) ---------- */
:root {
    /* Couleurs */
    --bg: #090A0C;
    --bg-surface: #111318;
    --bg-surface-2: #17191F;
    --border: #24262D;
    --border-strong: #32353E;
    --text: #F5F5F5;
    --text-muted: #9CA3AF;
    --text-faint: #6B6E77;
    --accent: #FF7A00;
    --accent-hover: #FF9433;
    --accent-soft: rgba(255, 122, 0, 0.12);
    --success: #3E8E63;
    --danger: #C0503E;
    --cashflow-red: #E5484D; /* accent de marque "CASHFLOW" (S et O) — distinct de --danger, usage purement décoratif */

    /* Typographie */
    --font-display: 'Fraunces', Georgia, 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 "CASHFLOW" — 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 CASHFLOW" 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); }

@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 CASHFLOW" — 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;
}

.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; }

/* =========================================================
   CASHFLOW — 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,
        #17191F
    );
    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 CASHFLOW
========================================================= */

.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: #0B0C0F;
    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;
}

/* 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;
    }
}