/* =============================================================================
   ttk-home.css — page publique / (accueil marketing)
   -----------------------------------------------------------------------------
   Page à style unique (charte graphique) : tout le transverse vient de
   `ttk-foundation.css` (carte, bouton, label, typo, icônes, rythme marketing
  , carrousel, révélation au défilement). Ce fichier ne porte QUE la
   mise en page propre à l'accueil : hero à mascotte + statistiques d'accroche,
   encart des sujets abordés, témoignage, visuel de contact.
   Préfixe : `ttk-home-`.

   Le rythme des sections, la grille et la carte d'argument, le numéro d'étape
   et la colonne texte + visuel sont partis en **fondation** le jour où
   `Programme` en a eu besoin : ils sont désormais `ttk-mkt-*`.
   ============================================================================= */

/* =============================================================================
   1. HERO
   -----------------------------------------------------------------------------
   Le hero remonte SOUS l'en-tête public, qui est `position: fixed` et compensé
   par `main.ttk-site-main` (80px = --ttk-site-header-height, chrome public
   ttk-site.css) : `--ttk-home-header-offset` en est la valeur miroir.
   ============================================================================= */
.ttk-home-hero {
    --ttk-home-header-offset: 80px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin-top: calc(-1 * var(--ttk-home-header-offset));
    padding: calc(var(--ttk-home-header-offset) + var(--ttk-space-8)) 0 var(--ttk-space-10);
    overflow: hidden;
    background: var(--ttk-gradient-hero);
}

/* Halo indigo derrière le texte du hero (décor, non cliquable). */
.ttk-home-hero-glow {
    position: absolute;
    inset: 0;
    background: var(--ttk-gradient-glow);
    pointer-events: none;
}

.ttk-home-hero-content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ttk-space-8);
    align-items: center;
}

.ttk-home-hero-title {
    margin: var(--ttk-space-4) 0;
}

.ttk-home-hero-subtitle {
    color: var(--ttk-text-secondary);
    margin: 0;
    max-width: 34em;
}

.ttk-home-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ttk-space-4);
    margin-top: var(--ttk-space-6);
}

.ttk-home-hero-visual {
    text-align: center;
}

.ttk-home-hero-panda {
    max-width: 100%;
    max-height: 450px;
    filter: drop-shadow(0 0 40px var(--ttk-glow));
}

/* =============================================================================
   2. STATISTIQUES D'ACCROCHE DU HERO
   -----------------------------------------------------------------------------
   Chiffres nus alignés sous les CTA — à distinguer de `.ttk-stat-card`
   (fondation), qui est une carte de pilotage à pastille d'icône.
   ============================================================================= */
.ttk-home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ttk-space-8);
    margin-top: var(--ttk-space-8);
}

.ttk-home-stat {
    text-align: center;
}

.ttk-home-stat-value {
    font-family: var(--ttk-font-title);
    font-size: var(--ttk-text-2xl);
    font-weight: var(--ttk-weight-extrabold);
    line-height: var(--ttk-leading-tight);
    color: var(--ttk-warm);
}

.ttk-home-stat-label {
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-muted);
    margin-top: var(--ttk-space-2);
}

/* =============================================================================
   3. ENCART « SUJETS ABORDÉS »
   ============================================================================= */
.ttk-home-topics-title {
    margin: 0 0 var(--ttk-space-4);
}

/* Liste à puces rondes chaudes (pas de puce native). */
.ttk-home-topics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ttk-text-secondary);
}

.ttk-home-topics-list li {
    position: relative;
    padding-left: var(--ttk-space-5);
    margin-bottom: var(--ttk-space-3);
}

.ttk-home-topics-list li:last-child {
    margin-bottom: 0;
}

.ttk-home-topics-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--ttk-radius-pill);
    background: var(--ttk-warm);
}

/* =============================================================================
   4. TÉMOIGNAGE (contenu des diapositives du carrousel)
   ============================================================================= */
.ttk-home-testimonial {
    border-left: 4px solid var(--ttk-warm);
}

.ttk-home-testimonial-text {
    font-size: var(--ttk-text-md);
    font-style: italic;
    line-height: var(--ttk-leading-relaxed);
    color: var(--ttk-text-secondary);
    margin: 0 0 var(--ttk-space-4);
}

.ttk-home-testimonial-author {
    font-weight: var(--ttk-weight-semibold);
    color: var(--ttk-warm);
    margin: 0;
}

/* =============================================================================
   5. SECTION CONTACT
   ============================================================================= */
.ttk-home-contact-title {
    margin: var(--ttk-space-3) 0 var(--ttk-space-4);
}

/* Rangée de CTA en pied de colonne de texte (le hero a la sienne). */
.ttk-home-contact-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ttk-space-4);
}

.ttk-home-contact-visual {
    text-align: center;
}

/* `filter: drop-shadow()` n'accepte qu'une ombre simple (ni étalement, ni liste) :
   les tokens `--ttk-shadow-*` n'y sont pas utilisables. */
.ttk-home-contact-panda {
    max-width: 300px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* =============================================================================
   6. RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .ttk-home-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ttk-home-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .ttk-home-hero-ctas,
    .ttk-home-contact-ctas,
    .ttk-home-stats {
        justify-content: center;
    }

    .ttk-home-hero-visual {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    /* La colonne empilée est centrée par `.ttk-mkt-split` (fondation) : la
       liste, elle, reste un contenu à lire — alignée à gauche. */
    .ttk-home-topics-list {
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .ttk-home-hero {
        min-height: auto;
        padding-bottom: var(--ttk-space-8);
    }

    /* La mascotte du hero cède la place au discours sur petit écran. */
    .ttk-home-hero-visual {
        display: none;
    }

    .ttk-home-stats {
        gap: var(--ttk-space-6);
    }

    .ttk-home-hero-ctas > .ttk-btn,
    .ttk-home-contact-ctas > .ttk-btn {
        flex: 1 1 100%;
    }

    .ttk-home-contact-panda {
        max-width: 200px;
    }
}