/* =============================================================================
   ttk-faq-page.css — page publique /Faq (foire aux questions)
   -----------------------------------------------------------------------------
   Page à style unique (charte graphique) : `_Layout` ne charge que
   `ttk-foundation.css`, donc tout le transverse vient de la fondation (liste
   `.ttk-faq-list`, callout `.ttk-cta-callout`, état vide, bouton). Ce fichier
   ne porte QUE la mise en page propre à la page : hero et colonne de lecture.
   Préfixe : `ttk-faqpage-` (distinct de `ttk-faq-` — la liste de
   questions/réponses de la fondation, partagée avec `app/faq`).
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */
.ttk-faqpage-hero {
    position: relative;
    padding: var(--ttk-space-10) 0 var(--ttk-space-6);
    overflow: hidden;
    text-align: center;
}

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

.ttk-faqpage-hero-content {
    position: relative;
}

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

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

/* =============================================================================
   2. COLONNE DE LA PAGE
   ============================================================================= */
.ttk-faqpage-section {
    padding: 0 0 var(--ttk-space-10);
}

/* Colonne de lecture — page publique centrée (≠ wrapper à max-width d'une page
   tableau de bord, interdit par la charte). */
.ttk-faqpage-shell {
    max-width: 800px;
    margin: 0 auto;
}

/* Rythme vertical entre la liste (ou l'état vide) et le callout de contact :
   ni l'une ni l'autre ne porte de marge propre. */
.ttk-faqpage-shell > * + * {
    margin-top: var(--ttk-space-6);
}

/* =============================================================================
   3. RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .ttk-faqpage-hero {
        padding: var(--ttk-space-6) 0 var(--ttk-space-5);
    }

    .ttk-faqpage-section {
        padding: 0 0 var(--ttk-space-6);
    }
}