/* === Fomu — Formulaire de contact autonome
   Version : 1.0 | 2026-06-25 — CSS complet auto-suffisant (tokens + champs + bouton)
   Tous les styles nécessaires sont embarqués ici : aucune dépendance externe.
   Les variables sont scopées au wrapper .fomu-contact-form pour ne pas
   polluer le thème hôte.
   ================================================================ */

.fomu-contact-form {
    /* ── Design tokens (sous-ensemble utile, scopé au formulaire) ── */
    --k-primary:       #1e6faa;
    --k-primary-dark:  #165d92;
    --k-primary-rgb:   30, 111, 170;
    --k-text:          #1a202c;
    --k-text-muted:    #4a5568;
    --k-text-xlight:   #a0aec0;
    --k-300:           #cbd5e0;
    --k-radius-sm:     8px;
    --k-radius-xs:     6px;
    --k-font-size-base:16px;
    --k-transition:    .2s ease;

    max-width:   650px;
    margin:      0 auto;
    font-family: inherit;
}

.fomu-contact-form *,
.fomu-contact-form *::before,
.fomu-contact-form *::after { box-sizing: border-box; }

/* ── Rangée côte à côte (Prénom / Nom) ──────────────────────────── */
.fomu-row {
    display: flex;
    gap:     20px;
}
.fomu-row .fomu-field-group { flex: 1; }

/* ── Champs formulaire — labels flottants ────────────────────────── */
.fomu-field-group {
    position:      relative;
    margin-bottom: 22px;
    text-align:    left;
}

.fomu-label {
    position:       absolute;
    left:           14px;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      15px;
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          var(--k-text-xlight);
    pointer-events: none;
    transition:     top .15s ease, font-size .15s ease, font-weight .15s ease,
                    letter-spacing .15s ease, color .15s ease, background .15s ease,
                    padding .15s ease, transform .15s ease;
    background:     transparent;
    z-index:        1;
    white-space:    nowrap;
    padding:        0;
}

/* Label flottant — champ focus ou rempli */
.fomu-field-group:has(.fomu-input:focus) .fomu-label,
.fomu-field-group:has(.fomu-input:not(:placeholder-shown)) .fomu-label {
    top:            0;
    transform:      translateY(-50%);
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--k-text-muted);
    background:     #fff;
    padding:        0 4px;
    left:           10px;
}
.fomu-field-group:has(.fomu-input:focus) .fomu-label {
    color: var(--k-primary);
}

.fomu-input {
    width:         100%;
    padding:       15px 14px 11px;
    border:        1px solid var(--k-300);
    border-radius: var(--k-radius-sm);
    box-sizing:    border-box;
    font-size:     15px;
    font-family:   inherit;
    color:         var(--k-text);
    background:    #fff;
    transition:    border-color var(--k-transition), box-shadow var(--k-transition);
}
.fomu-input:focus {
    outline:      none;
    border-color: var(--k-primary);
    box-shadow:   0 0 0 3px rgba(var(--k-primary-rgb), .12);
}
.fomu-input::placeholder { color: transparent; }

/* ── Textarea — label statique au-dessus ────────────────────────── */
.fomu-textarea-group .fomu-label {
    position:       static;
    transform:      none;
    display:        block;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--k-text-muted);
    background:     transparent;
    padding:        0;
    margin-bottom:  8px;
    white-space:    normal;
}
.fomu-textarea-group .fomu-input {
    min-height: 160px;
    padding:    12px 14px;
    resize:     vertical;
}
/* La règle de label flottant ne doit pas s'appliquer au textarea */
.fomu-textarea-group:has(.fomu-input:focus) .fomu-label,
.fomu-textarea-group:has(.fomu-input:not(:placeholder-shown)) .fomu-label {
    top:        auto;
    background: transparent;
    left:       auto;
    color:      var(--k-text-muted);
}

/* ── Marker champ obligatoire ────────────────────────────────────── */
.fomu-req { color: #e53e3e; }

/* ── Compteur de caractères ─────────────────────────────────────── */
.fomu-char-count {
    display:    block;
    font-size:  11px;
    color:      var(--k-text-xlight);
    text-align: right;
    margin-top: 4px;
}
.fomu-char-count.ok { color: #38a169; }

/* ── Bouton ──────────────────────────────────────────────────────── */
.fomu-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      8px;
    padding:         10px 22px;
    font-family:     inherit;
    font-size:       var(--k-font-size-base);
    font-weight:     600;
    line-height:     1.2;
    text-align:      center;
    text-decoration: none;
    color:           #fff;
    background:      var(--k-primary);
    border:          2px solid var(--k-primary);
    border-radius:   var(--k-radius-xs);
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background var(--k-transition), border-color var(--k-transition),
                     color var(--k-transition), box-shadow var(--k-transition);
    -webkit-font-smoothing: antialiased;
}
.fomu-btn:hover {
    background:    var(--k-primary-dark);
    border-color:  var(--k-primary-dark);
    color:         #fff;
    text-decoration: none;
}
.fomu-btn:active        { transform: translateY(1px); }
.fomu-btn:focus-visible {
    outline:        3px solid rgba(var(--k-primary-rgb), .45);
    outline-offset: 2px;
}

/* ── Notices succès / erreur ─────────────────────────────────────── */
.fomu-notice {
    padding:       12px 16px;
    margin-bottom: 24px;
    border-radius: var(--k-radius-sm);
    font-size:     14px;
    border-left:   4px solid;
    line-height:   1.5;
}
.fomu-error {
    background:        #fff5f5;
    color:             #c53030;
    border-left-color: #fc8181;
}
.fomu-success {
    background:        #f0fff4;
    color:             #276749;
    border-left-color: #68d391;
}

/* ── Honeypot ────────────────────────────────────────────────────── */
.fomu-honeypot {
    display:        none !important;
    position:       absolute;
    left:           -9999px;
    width:          1px;
    height:         1px;
    overflow:       hidden;
    opacity:        0;
    pointer-events: none;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .fomu-row { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fomu-contact-form *,
    .fomu-contact-form *::before,
    .fomu-contact-form *::after {
        transition-duration: .01ms !important;
    }
}