/* ============================================================
   ACT FINANCE — Contact Page Styles
   Targets page ID 75 only. Overrides BeTheme, Customizer,
   Yellow Pencil, and page-level CSS with high specificity.
   ============================================================ */

/* ----------------------------------------------------------
   HERO SECTION — "CONTACTEZ-NOUS"
   Gradient identique aux autres sections bleues du site.
   Extra padding-bottom pour laisser la place à l'overlap.
   ---------------------------------------------------------- */
body.page-id-75 .mcb-section-skewetm6 {
    background: linear-gradient(135deg, #0a0e3d 0%, #0d2080 60%, #1a3fa8 100%) !important;
    background-color: #0d2080 !important; /* fallback */
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 90px !important; /* espace pour l'overlap des cartes */
    position: relative !important;
    z-index: 1 !important;
}

body.page-id-75 .mcb-section-skewetm6 .mcb-background-overlay {
    background: transparent !important;
}

body.page-id-75 .mcb-section-skewetm6 .section_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.page-id-75 .mcb-section-skewetm6 .mcb-wrap-inner {
    padding: 0 !important;
}

/* ----------------------------------------------------------
   CONTACT CONTENT SECTION — info cards + formulaire
   Force le background pour écraser le gradient body du site.
   Remonte avec margin-top négatif pour l'effet "élevé".
   ---------------------------------------------------------- */
body.page-id-75 .mcb-section-uavddi6o {
    /* background shorthand écrase tout gradient hérité */
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
    background-image: none !important;
    margin-top: -60px !important;        /* les cartes rentrent dans la section bleue */
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    position: relative !important;
    z-index: 10 !important;
    border-radius: 0 !important;
}

/* Tuer l'overlay BeTheme qui laisse passer le gradient body */
body.page-id-75 .mcb-section-uavddi6o .mcb-background-overlay {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* S'assurer que la section_wrapper n'est pas transparente */
body.page-id-75 .mcb-section-uavddi6o > .section_wrapper {
    background: transparent !important;
    padding-top: 60px !important;
    padding-bottom: 0 !important;
}

/* ----------------------------------------------------------
   LEFT COLUMN — Info Cards Sidebar
   Les 3 cartes (Bureau, Téléphone, Email)
   ---------------------------------------------------------- */
body.page-id-75 .info-card-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 0 !important;
    height: 100% !important;
}

body.page-id-75 .card-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 14px !important;
    padding: 22px 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 96, 255, 0.07) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

body.page-id-75 .card-item:hover {
    box-shadow: 0 8px 28px rgba(0, 96, 255, 0.14) !important;
    transform: translateY(-2px) !important;
}

body.page-id-75 .card-icon-box {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    background: #eef4ff !important;
    background-image: none !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

body.page-id-75 .card-content {
    flex: 1 !important;
    min-width: 0 !important;
}

body.page-id-75 .card-content h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

body.page-id-75 .card-content p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.65 !important;
}

/* ----------------------------------------------------------
   RIGHT COLUMN — Form Card
   Fond blanc forcé, border-radius, ombre
   ---------------------------------------------------------- */
body.page-id-75 .mcb-wrap-352o0ino > .mcb-wrap-inner {
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 16px !important;
    padding: 40px 42px !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.09) !important;
}

/* Overlay BeTheme dans le wrap droit */
body.page-id-75 .mcb-wrap-352o0ino .mcb-wrap-background-overlay {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    border-radius: 16px !important;
}

/* Overlay du wrap gauche aussi */
body.page-id-75 .mcb-wrap-mqumpy8 .mcb-wrap-background-overlay {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

body.page-id-75 .mcb-item-heading-inner .title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 28px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* ----------------------------------------------------------
   FORM LAYOUT — deux colonnes sur nom + email
   ---------------------------------------------------------- */
body.page-id-75 .wpcf7-form .form-row {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
}

body.page-id-75 .wpcf7-form .form-row .form-group {
    flex: 1 !important;
    min-width: 0 !important;
}

body.page-id-75 .wpcf7-form .form-group {
    margin-bottom: 20px !important;
}

body.page-id-75 .wpcf7-form p {
    margin: 0 !important;
}

/* Labels */
body.page-id-75 .wpcf7-form label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 7px !important;
    letter-spacing: 0.01em !important;
}

/* ----------------------------------------------------------
   INPUTS, SELECT, TEXTAREA
   border-radius forcé, fond blanc, border propre
   ---------------------------------------------------------- */
body.page-id-75 .wpcf7-form input[type="text"],
body.page-id-75 .wpcf7-form input[type="email"],
body.page-id-75 .wpcf7-form select,
body.page-id-75 .wpcf7-form textarea {
    width: 100% !important;
    border: 1.5px solid #d1d9e8 !important;
    border-radius: 10px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-family: "Lato", sans-serif !important;
    color: #1a1a2e !important;
    background: #f8fafc !important;
    background-image: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.page-id-75 .wpcf7-form input[type="text"]::placeholder,
body.page-id-75 .wpcf7-form input[type="email"]::placeholder,
body.page-id-75 .wpcf7-form textarea::placeholder {
    color: #b0bac9 !important;
    font-size: 13px !important;
}

body.page-id-75 .wpcf7-form input[type="text"]:focus,
body.page-id-75 .wpcf7-form input[type="email"]:focus,
body.page-id-75 .wpcf7-form select:focus,
body.page-id-75 .wpcf7-form textarea:focus {
    border-color: #0060ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 96, 255, 0.1) !important;
}

/* Flèche custom sur le select */
body.page-id-75 .wpcf7-form .wpcf7-form-control-wrap[data-name="sujet"] {
    position: relative !important;
    display: block !important;
}

body.page-id-75 .wpcf7-form .wpcf7-form-control-wrap[data-name="sujet"]::after {
    content: "▾" !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6b7280 !important;
    pointer-events: none !important;
    font-size: 16px !important;
}

/* Textarea */
body.page-id-75 .wpcf7-form textarea {
    min-height: 150px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* ----------------------------------------------------------
   SUBMIT BUTTON
   ---------------------------------------------------------- */
body.page-id-75 .wpcf7-form input[type="submit"],
body.page-id-75 .wpcf7-form .wpcf7-submit {
    background: #0060ff !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 36px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: "Lato", sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    letter-spacing: 0.02em !important;
    margin-top: 6px !important;
    display: inline-block !important;
    box-shadow: 0 4px 14px rgba(0, 96, 255, 0.35) !important;
}

body.page-id-75 .wpcf7-form input[type="submit"]:hover,
body.page-id-75 .wpcf7-form .wpcf7-submit:hover {
    background: #0050d8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 96, 255, 0.45) !important;
}

body.page-id-75 .wpcf7-form input[type="submit"]:active,
body.page-id-75 .wpcf7-form .wpcf7-submit:active {
    transform: translateY(0) !important;
    background: #0040b0 !important;
}

/* ----------------------------------------------------------
   CF7 — Messages de validation
   ---------------------------------------------------------- */
body.page-id-75 .wpcf7-not-valid {
    border-color: #ef4444 !important;
}

body.page-id-75 .wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #ef4444 !important;
    margin-top: 4px !important;
    display: block !important;
}

body.page-id-75 .wpcf7-response-output {
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-top: 12px !important;
    border: none !important;
}

body.page-id-75 .wpcf7-mail-sent-ok {
    background: #ecfdf5 !important;
    color: #065f46 !important;
}

body.page-id-75 .wpcf7-validation-errors {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media only screen and (max-width: 959px) {
    body.page-id-75 .mcb-wrap-352o0ino > .mcb-wrap-inner {
        padding: 28px 24px !important;
    }

    body.page-id-75 .wpcf7-form .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

@media only screen and (max-width: 767px) {
    body.page-id-75 .mcb-section-uavddi6o {
        margin-top: -30px !important;
        padding-bottom: 50px !important;
    }

    body.page-id-75 .mcb-section-uavddi6o > .section_wrapper {
        padding-top: 30px !important;
    }

    body.page-id-75 .info-card-sidebar {
        margin-bottom: 24px !important;
    }

    body.page-id-75 .mcb-wrap-352o0ino > .mcb-wrap-inner {
        padding: 24px 18px !important;
    }
}