/* Formulaire de contact unifié — charte FNI
 *
 * Couleurs reprises du thème (rendu fni.fr) :
 *   --fni-navy   : bleu marine signature
 *   --fni-yellow : jaune adhésion (CTA primaire)
 */

.fni-contact-wrap {
    --fni-navy: #0C1C6B;
    --fni-navy-soft: #1f2d8c;
    --fni-navy-bg: #f0f2fa;
    --fni-yellow: #FFED7D;
    --fni-yellow-strong: #FFE150;
    --fni-yellow-bg: #fffbe6;
    --fni-gray-50: #f8fafc;
    --fni-gray-100: #f1f5f9;
    --fni-gray-200: #e2e8f0;
    --fni-gray-400: #94a3b8;
    --fni-gray-600: #475569;
    --fni-gray-800: #1e293b;
    --fni-red: #dc2626;
    --fni-green: #059669;
    --fni-radius: 10px;
    --fni-radius-lg: 14px;
    --fni-shadow: 0 4px 20px rgba(12, 28, 107, 0.08);

    max-width: 820px;
    margin: 3rem auto;
    padding: 0 1rem;
    color: var(--fni-gray-800);
    font-size: 16px;
    line-height: 1.55;
}

/* Alpine : masquer les éléments conditionnels tant que le composant n'est pas hydraté (anti-flash) */
.fni-contact-wrap [x-cloak] { display: none !important; }

/* ─── Objet pré-rempli (arrivée via lien direct ?type=…) ── */
.fni-preset-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    background: var(--fni-navy-bg);
    border: 1px solid rgba(12, 28, 107, 0.12);
    border-radius: var(--fni-radius);
}
.fni-preset-head__eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fni-gray-600);
}
.fni-preset-head__label {
    font-size: 1.15rem;
    color: var(--fni-navy);
    line-height: 1.3;
}
/* NB : spécificité + !important nécessaires pour battre le style <button> global du thème (fond navy) */
.fni-contact-wrap .fni-preset-head__change {
    align-self: flex-start;
    margin-top: 0.15rem;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    color: var(--fni-navy-soft) !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}
.fni-contact-wrap .fni-preset-head__change:hover {
    color: var(--fni-navy) !important;
    background: none !important;
}

/* ─── Intro : texte full width, puis coords + carte en 2 colonnes ── */
.fni-contact-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--fni-gray-50);
    border-radius: var(--fni-radius-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--fni-gray-200);
}
.fni-contact-intro__content h2 {
    font-size: 1.35rem;
    color: var(--fni-navy);
    margin: 0 0 0.6rem;
    font-weight: 700;
}
.fni-contact-intro__content p {
    margin: 0;
    color: var(--fni-gray-600);
    line-height: 1.6;
}
.fni-contact-intro__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.fni-contact-intro__coords {
    border-left: 3px solid var(--fni-yellow);
    padding-left: 1.1rem;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fni-contact-intro__coords strong {
    display: block;
    color: var(--fni-navy);
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.fni-contact-intro__phone {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--fni-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fni-contact-intro__phone a {
    display: inline-block;
    margin-top: 0.2rem;
    color: var(--fni-navy);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0;
}
.fni-contact-intro__phone a:hover {
    text-decoration: underline;
}
.fni-contact-intro__map {
    border-radius: var(--fni-radius);
    overflow: hidden;
    border: 1px solid var(--fni-gray-200);
    height: 180px;
    box-shadow: 0 2px 8px rgba(12, 28, 107, 0.06);
}
.fni-contact-intro__map {
    position: relative;
    background: var(--fni-gray-100);
}
.fni-contact-intro__map > a {
    display: block;
    width: 100%;
    height: 100%;
}
.fni-contact-intro__map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}
.fni-contact-intro__map-link {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    padding: 0.3rem 0.65rem;
    background: #fff;
    color: var(--fni-navy);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(12, 28, 107, 0.15);
}
.fni-contact-intro__map > a:hover .fni-contact-intro__map-link,
.fni-contact-intro__map > a:focus-visible .fni-contact-intro__map-link {
    text-decoration: underline;
}
.fni-contact-intro__map-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    color: var(--fni-gray-600);
}
.fni-contact-intro__map-credit a {
    color: inherit;
}

/* ─── Bloc orientation services dédiés ──────────────────────── */
.fni-contact-orient {
    background: var(--fni-yellow-bg);
    border: 1px solid #f5e8a8;
    border-left: 4px solid var(--fni-yellow-strong);
    border-radius: var(--fni-radius);
    padding: 1.1rem 1.5rem;
    margin-bottom: 2rem;
}
.fni-contact-orient strong {
    display: block;
    color: var(--fni-navy);
    margin-bottom: 0.35rem;
    font-size: 1rem;
}
.fni-contact-orient p {
    margin: 0 0 0.6rem;
    color: var(--fni-gray-600);
    font-size: 0.95rem;
}
.fni-contact-orient ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--fni-gray-600);
    font-size: 0.95rem;
}
.fni-contact-orient ul li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
/* le thème WP global force parfois display:block sur <strong> dans des <li> :
   on force inline pour garder la phrase sur une ligne */
.fni-contact-orient ul li strong,
.fni-contact-orient ul li em {
    display: inline;
}
.fni-contact-orient a {
    color: var(--fni-navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.fni-contact-orient a:hover {
    color: var(--fni-navy-soft);
}

/* ─── Formulaire ─────────────────────────────────────────────── */
.fni-contact-form {
    background: #ffffff;
    border: 1px solid var(--fni-gray-200);
    border-radius: var(--fni-radius-lg);
    padding: 2rem;
    box-shadow: var(--fni-shadow);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.fni-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: var(--fni-gray-800);
}
.fni-contact-form label > span {
    font-weight: 500;
}
.fni-contact-form .fni-required {
    color: var(--fni-red);
    margin-left: 2px;
}

.fni-contact-form input[type="text"],
.fni-contact-form input[type="email"],
.fni-contact-form input[type="tel"],
.fni-contact-form input[type="number"],
.fni-contact-form select,
.fni-contact-form textarea {
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--fni-gray-200);
    border-radius: var(--fni-radius);
    font-size: 1rem;
    color: var(--fni-gray-800);
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.fni-contact-form input:focus,
.fni-contact-form select:focus,
.fni-contact-form textarea:focus {
    outline: none;
    border-color: var(--fni-navy);
    box-shadow: 0 0 0 3px rgba(12, 28, 107, 0.12);
}
.fni-contact-form textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.45;
}
.fni-contact-form input.fni-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.5px;
}

/* Grilles */
.fni-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* Fieldsets section spécifique au type */
.fni-section {
    border: 1px solid var(--fni-gray-200);
    border-radius: var(--fni-radius);
    padding: 1.25rem 1.4rem;
    margin: 0;
    background: var(--fni-gray-50);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fni-section legend {
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--fni-navy);
    font-size: 0.95rem;
}
.fni-section__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--fni-gray-600);
    background: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border-left: 3px solid var(--fni-yellow);
}

/* Consentement RGPD — override le flex-column hérité de .fni-contact-form label */
.fni-contact-form label.fni-rgpd {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    flex-direction: initial;
    /* IMPORTANT : column-gap déclaré APRÈS gap pour ne pas être écrasé
       par le shorthand qui reset les deux axes */
    gap: 0;
    column-gap: 1.25rem;
    font-size: 0.92rem;
    color: var(--fni-gray-600);
    padding: 1.1rem 1.25rem;
    background: var(--fni-gray-50);
    border-radius: var(--fni-radius);
    border: 1px solid var(--fni-gray-200);
    margin-top: 0.5rem;
}
.fni-rgpd input[type="checkbox"] {
    accent-color: var(--fni-navy);
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
.fni-rgpd > span {
    line-height: 1.5;
    font-weight: 400;
}
.fni-rgpd a {
    color: var(--fni-navy);
    font-weight: 600;
}

/* Turnstile compact */
.fni-contact-form .cf-turnstile {
    display: flex;
    justify-content: flex-end;
    transform: scale(0.95);
    transform-origin: right top;
}

/* Messages d'état */
.fni-msg {
    padding: 0.85rem 1rem;
    border-radius: var(--fni-radius);
    font-size: 0.95rem;
    line-height: 1.45;
}
.fni-msg--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.fni-msg--success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

/* CTA principal — full-width pour cohérence avec les champs du form */
.fni-contact-form .fni-cta,
button.fni-cta {
    background-color: var(--fni-yellow) !important;
    color: var(--fni-navy) !important;
    padding: 1rem 2rem;
    border: 2px solid var(--fni-navy);
    border-radius: 999px;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.05s;
    width: 100%;
    font-family: inherit;
    letter-spacing: 0.3px;
    margin-top: 0.5rem;
    text-align: center;
}
.fni-contact-form .fni-cta:hover:not(:disabled),
button.fni-cta:hover:not(:disabled) {
    background-color: var(--fni-yellow-strong) !important;
}
.fni-contact-form .fni-cta:active:not(:disabled),
button.fni-cta:active:not(:disabled) {
    transform: translateY(1px);
}
.fni-contact-form .fni-cta:disabled,
button.fni-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* La section Elementor porte déjà la marge latérale de la page */
    .fni-contact-wrap {
        margin: 1.5rem auto;
        padding: 0;
    }
    .fni-contact-intro {
        padding: 1.25rem 1rem;
        gap: 1.25rem;
    }
    .fni-contact-orient {
        padding: 1rem;
    }
    .fni-contact-intro__bottom {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .fni-contact-intro__map {
        height: 200px;
    }
    .fni-contact-form {
        padding: 1.25rem 1rem;
        gap: 1rem;
    }
    .fni-grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .fni-contact-form .cf-turnstile {
        justify-content: center;
        transform: scale(1);
    }
}

/* Champ fichier RIB */
.fni-contact-form .fni-file input[type="file"] {
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--fni-gray-800);
    padding: 0.6rem;
    min-height: 44px;
    border: 1.5px dashed var(--fni-gray-200);
    border-radius: var(--fni-radius);
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.fni-contact-form .fni-file input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 40px;
    margin-right: 0.75rem;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid var(--fni-navy);
    border-radius: 6px;
    background: #ffffff;
    color: var(--fni-navy);
    cursor: pointer;
}
.fni-contact-form .fni-file input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--fni-navy);
    box-shadow: 0 0 0 3px rgba(12, 28, 107, 0.12);
}
.fni-file__status {
    font-size: 0.85rem;
    color: var(--fni-gray-600);
    line-height: 1.4;
}
.fni-file__status--error {
    color: #991b1b;
    font-weight: 500;
}