/* ==========================================================================
   Page Contact — design repris du modèle « contact » (carte formulaire
   pleine largeur + deux cartes en bas : coordonnées et arguments).

   Transpositions par rapport au modèle :
     - accent doré (#F2C94C) -> noir de la charte (#000000), comme sur la page
       de demande de subvention (consigne « pas de jaune »)
     - noir du modèle (#0D3B2E) -> noir de la charte (#000000)
     - icônes Bootstrap Icons (bi bi-*) -> Font Awesome 6 (fas fa-*)
   ========================================================================== */

:root {
    --ct-primary: #000000;
    --ct-accent: #000000;
}

/* ==========================================================================
   CARTE DU FORMULAIRE (pleine largeur)
   ========================================================================== */
.contact-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.contact-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-card-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--ct-primary);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-head h3 {
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 700;
    /* Couleur des titres du site (définie dans css/style.css) */
    color: var(--couleur-titres, #000000);
}

/* ==========================================================================
   CHAMPS DU FORMULAIRE
   ========================================================================== */
#contactForm .form-control,
#contactForm .form-select,
#contactForm textarea {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid #e0e5ec;
}

#contactForm .form-control:focus,
#contactForm .form-select:focus,
#contactForm textarea:focus {
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

#contactForm .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #3a3a3a;
}

/* ==========================================================================
   BOUTON D'ENVOI
   ========================================================================== */
.btn-contact {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    background: var(--couleur-boutons);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-contact:hover:not(:disabled) {
    background: var(--couleur-boutons-fonce);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-contact:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ct-spin 0.8s linear infinite;
}

@keyframes ct-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   CARTE COORDONNÉES (fond noir)
   ========================================================================== */
/* Carte des coordonnées — fond gris clair, texte foncé.
   ⚠️ Le texte était blanc pour un fond noir. En gris clair il devient foncé :
   sans cela, les valeurs et le titre seraient blancs ou noirs sur clair, donc
   illisibles. */
.card-coords {
    background: #f5f5f5;
    color: #333333;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.card-coords h3 {
    color: var(--ct-accent);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.coords-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.coords-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.coords-icon--accent {
    background: rgba(0, 0, 0, 0.07);
}

.coords-icon--accent i {
    color: #000000;
}

.coords-icon--whatsapp {
    background: rgba(37, 211, 102, 0.12);
}

.coords-icon--whatsapp i {
    color: #25d366;
}

.coords-label {
    font-size: 0.7rem;
    opacity: 0.6;
}

.coords-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1c1c1c;
    text-decoration: none;
    /* L'adresse e-mail est longue : on laisse le navigateur la couper
       proprement plutôt que de déborder de la carte. */
    overflow-wrap: anywhere;
}

a.coords-value:hover {
    color: var(--ct-accent);
}

.coords-note {
    font-size: 0.65rem;
    opacity: 0.5;
}

/* ==========================================================================
   CARTE « POURQUOI NOUS »
   ========================================================================== */
.card-why {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.card-why h3 {
    color: var(--ct-primary);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.why-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #535353;
}

.why-item i {
    font-size: 1.05rem;
    color: var(--ct-accent);
    flex: 0 0 auto;
}

.why-item i.text-green {
    color: var(--ct-primary);
}

.btn-why {
    width: 100%;
    padding: 0.6rem;
    border: none;
    border-radius: 12px;
    background: var(--couleur-boutons);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-why:hover {
    background: var(--couleur-boutons-fonce);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   MODALES (succès / erreur)
   ========================================================================== */
.modal-contact-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

.modal-contact-icon--success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.modal-contact-icon--error {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767.98px) {
    .contact-card-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .coords-item {
        gap: 0.7rem;
    }
}