/*
==========================================================================
CAP WIDGET — PORTFOLIO JULIEN PINOT

Habillage du <cap-widget> (https://github.com/tiagozip/cap) pour qu'il se
fonde dans le formulaire de contact, en thème clair comme en thème sombre.

Le widget est un web component : son shadow DOM n'est pas atteignable au
sélecteur. Toute la personnalisation passe donc par les variables CSS
custom qu'il expose (--cap-*), posées ici sur l'élément hôte.
==========================================================================
*/

cap-widget {
    /* Boîte, calée sur les champs du formulaire */
    --cap-background: var(--bg-tertiary, #f1f5f9);
    --cap-border-color: var(--border-color, #7FD1A5);
    --cap-border-radius: 8px;
    --cap-widget-width: 100%;
    --cap-widget-height: 30px;
    --cap-widget-padding: 14px;
    --cap-gap: 14px;
    /* Typographie alignée sur le reste du site */
    --cap-color: var(--text-primary, #0f172a);
    --cap-font: var(--font-family-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    /* Case à cocher */
    --cap-checkbox-size: 24px;
    --cap-checkbox-border: 2px solid var(--border-color, #7FD1A5);
    --cap-checkbox-border-radius: 6px;
    --cap-checkbox-background: var(--bg-primary, #F4F1EA);
    --cap-checkbox-margin: 2px;
    /* États */
    --cap-spinner-color: var(--primary-blue, #2563eb);
    --cap-spinner-background-color: var(--border-color, #7FD1A5);
    --cap-spinner-thickness: 4px;
    --cap-focus-ring: var(--primary-blue, var(--accent));
    --cap-invalid-border-color: var(--error, var(--danger));
    --cap-invalid-ring-color: var(--danger);
    --cap-troubleshoot-color: var(--text-muted, var(--ink-3));
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Le widget met un peu de temps à s'hydrater : on réserve sa place pour
   éviter que le bouton d'envoi ne saute quand il apparaît. */
cap-widget:not(:defined) {
    display: block;
    min-height: 58px;
    border: 2px dashed var(--border-color, var(--rule));
    border-radius: 2px;
}

/* ==================== THÈME SOMBRE ==================== */
[data-theme="dark"] cap-widget {
    --cap-background: var(--bg-tertiary, var(--accent));
    --cap-border-color: var(--border-light, var(--accent));
    --cap-color: var(--text-primary, #F4F1EA);
    --cap-checkbox-background: var(--bg-secondary, var(--accent));
    --cap-checkbox-border: 2px solid var(--border-light, var(--accent));
    --cap-spinner-background-color: var(--border-light, var(--accent));
    --cap-troubleshoot-color: var(--text-muted, var(--accent));
}

/* ==================== INTÉGRATION FORMULAIRE ==================== */
.form-group--captcha {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Libellé du bloc anti-robot : ce n'est pas un <label> (aucun contrôle natif
   à cibler), d'où la mise en forme dédiée plutôt qu'un `.form-group label`. */
.form-label-static {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
}

.form-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}