/* =============================================================================
   ttk-contact.css — page publique /Contact (formulaire de contact)
   -----------------------------------------------------------------------------
   Page à style unique (charte graphique) : tout le transverse vient de
   `ttk-foundation.css` (carte, pastille d'icône, champs, bouton, modale, lien,
   état vide). Ce fichier ne porte QUE la mise en page propre à la page contact :
   hero, colonne centrée, rangée de cartes d'information, mascotte de la modale.
   Préfixe : `ttk-contact-`.
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */
.ttk-contact-hero {
    position: relative;
    padding: var(--ttk-space-10) 0 var(--ttk-space-8);
    overflow: hidden;
}

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

.ttk-contact-hero-content {
    position: relative;
    text-align: center;
}

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

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

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

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

/* =============================================================================
   3. CARTES D'INFORMATION (email / localisation / délai de réponse)
   ============================================================================= */
.ttk-contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ttk-space-4);
    margin-bottom: var(--ttk-space-6);
}

.ttk-contact-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ttk-space-2);
    text-align: center;
}

.ttk-contact-info-label {
    font-size: var(--ttk-text-xs);
    color: var(--ttk-text-muted);
    margin: 0;
}

/* Couleur volontairement héritée : un `<a class="ttk-link">` garde ainsi
   l'indigo de la fondation, un `<span>` prend le texte de la carte. */
.ttk-contact-info-value {
    font-size: var(--ttk-text-sm);
    font-weight: var(--ttk-weight-semibold);
}

/* =============================================================================
   4. CARTE DU FORMULAIRE
   ============================================================================= */
.ttk-contact-form-title {
    text-align: center;
    margin: 0 0 var(--ttk-space-6);
}

/* =============================================================================
   5. MODALE DE CONFIRMATION
   ============================================================================= */
/* Le `.ttk-modal-body` fournit déjà sa gouttière : l'état de réussite qu'il
   héberge n'a pas besoin du grand rembourrage d'un état vide pleine carte. */
.ttk-contact-modal .ttk-empty {
    padding: var(--ttk-space-4) var(--ttk-space-2);
}

.ttk-contact-panda {
    display: block;
    max-height: 120px;
    margin: 0 auto var(--ttk-space-5);
}

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

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

    .ttk-contact-info {
        grid-template-columns: 1fr;
    }
}