/* ==========================================================================
   Page « Contacter A2PRL » (/contact/) — mise en page « panneau »
   Coordonnées dans un panneau sombre à gauche, formulaire en carte à droite.
   Le formulaire Contact Form 7 n'est pas modifié : seule sa mise en forme l'est.
   Valeurs reprises du thème Ohio : marque #b51f69, sombre #17161a, rayon 15 px,
   champs rgba(23,22,26,.04) / 5 px, bouton 50 px.
   ========================================================================== */

.a2prl-contact.vc_row {
    margin-top: 24px;
    margin-bottom: 96px;
}

/* Les deux colonnes : même hauteur, colonne intérieure pleine hauteur */
.a2prl-contact .vc_column_container > .vc_column-inner {
    height: 100%;
    box-sizing: border-box;
}

/* ── Panneau sombre ──────────────────────────────────────────────────── */
.a2prl-contact__panneau > .vc_column-inner {
    background: #17161a;
    border-radius: 15px;
    padding: 56px 52px !important;
    color: #ffffff;
}
.a2prl-contact__panneau .wpb_wrapper,
.a2prl-panneau {
    height: 100%;
}
.a2prl-panneau {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}
.a2prl-panneau__haut {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.a2prl-surtitre {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b51f69;
}
.a2prl-panneau__titre {
    margin: 0;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.a2prl-panneau__intro {
    margin: 0;
    max-width: 400px;
    font-size: 16px;
    line-height: 1.65;
    color: #a7a6aa;
}

/* Coordonnées */
.a2prl-coordonnees {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.a2prl-coordonnees li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0;
}
.a2prl-coordonnees__icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.a2prl-coordonnees__icone svg {
    width: 20px;
    height: 20px;
}
.a2prl-coordonnees__texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.a2prl-coordonnees__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a898d;
}
.a2prl-coordonnees__valeur,
.a2prl-coordonnees__valeur a {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #ffffff;
}
.a2prl-coordonnees__valeur a:hover {
    color: #b51f69;
}
.a2prl-coordonnees__note {
    font-size: 14px;
    line-height: 1.5;
    color: #a7a6aa;
}

/* Bas du panneau : réseaux + Espace Pro */
.a2prl-panneau__bas {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.a2prl-panneau .a2prl-reseaux a {
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.a2prl-panneau .a2prl-reseaux a:hover {
    background: #b51f69;
    border-color: #b51f69;
    color: #ffffff;
}
.a2prl-panneau__pro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}
.a2prl-panneau__pro svg {
    width: 20px;
    height: 20px;
    transition: transform .2s ease;
}
.a2prl-panneau__pro:hover {
    color: #ffffff;
}
.a2prl-panneau__pro:hover svg {
    transform: translateX(4px);
}

/* ── Carte du formulaire ─────────────────────────────────────────────── */
.a2prl-contact__carte > .vc_column-inner {
    background: #ffffff;
    border: 1px solid rgba(23, 22, 26, 0.08);
    border-radius: 15px;
    padding: 52px 56px !important;
    box-shadow: 0 30px 60px -40px rgba(23, 22, 26, 0.25);
}
.a2prl-contact__carte .ohio-heading-sc {
    margin-bottom: 28px;
}
.a2prl-contact__carte h2 {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Le formulaire : grille de deux colonnes pour les champs courts, une pour le
   reste. La ligne du message prend toute la hauteur restante de la carte, pour
   que la carte et le panneau finissent au même niveau quelle que soit la largeur
   d'écran. On ne touche pas au balisage de CF7, seulement au flux. */
.a2prl-contact__carte > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.a2prl-contact__carte .wpcf7 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.a2prl-contact__carte form.wpcf7-form {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 20px;
    align-items: start;
}
.a2prl-contact__carte form.wpcf7-form > p {
    min-width: 0;
    margin: 0;
}
.a2prl-contact__carte form.wpcf7-form > p:empty {
    display: none;
}
.a2prl-contact__carte form.wpcf7-form > p:has(input[name="mail"]),
.a2prl-contact__carte form.wpcf7-form > .dycast-turnstile,
.a2prl-contact__carte form.wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
}
/* La zone de message remplit sa ligne (la 4e, extensible) */
.a2prl-contact__carte form.wpcf7-form > p:has(textarea) {
    grid-column: 1 / -1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.a2prl-contact__carte form.wpcf7-form > p:has(textarea) > label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.a2prl-contact__carte form.wpcf7-form > p:has(textarea) .wpcf7-form-control-wrap {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
/* Le défi Cloudflare est invisible : sa boîte ne doit pas coûter une ligne de grille */
.a2prl-contact__carte form.wpcf7-form > .dycast-turnstile {
    margin: -20px 0 0;
}
.a2prl-contact__carte form.wpcf7-form label {
    display: block;
    font-size: 14.88px;
    font-weight: 500;
    color: #17161a;
}
.a2prl-contact__carte form.wpcf7-form label br {
    display: none;
}
.a2prl-contact__carte form.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 6px;
}
.a2prl-contact__carte form.wpcf7-form input.wpcf7-text,
.a2prl-contact__carte form.wpcf7-form textarea.wpcf7-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border-radius: 5px;
    background: rgba(23, 22, 26, 0.04);
    border: 1px solid transparent;
    font-size: 14.88px;
    color: #232226;
    transition: border-color .15s ease, background-color .15s ease;
}
.a2prl-contact__carte form.wpcf7-form input.wpcf7-text {
    height: 50px;
}
.a2prl-contact__carte form.wpcf7-form textarea.wpcf7-textarea {
    flex: 1 1 auto;
    height: auto;
    min-height: 180px;
    resize: vertical;
}
.a2prl-contact__carte form.wpcf7-form input.wpcf7-text:focus,
.a2prl-contact__carte form.wpcf7-form textarea.wpcf7-textarea:focus {
    outline: none;
    border-color: #b51f69;
    background: #ffffff;
}
.a2prl-contact__carte form.wpcf7-form .wpcf7-not-valid {
    border-color: #dc3232;
}
.a2prl-contact__carte form.wpcf7-form .wpcf7-not-valid-tip {
    font-size: 13px;
    margin-top: 6px;
}

/* Bouton : à droite, couleur de marque, hauteur 50 px comme partout sur le site */
.a2prl-contact__carte form.wpcf7-form input.wpcf7-submit {
    grid-column: 2;
    justify-self: end;
    height: 50px;
    padding: 0 26px;
    border-radius: 5px;
    background: #b51f69;
    border: 1px solid #b51f69;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.a2prl-contact__carte form.wpcf7-form input.wpcf7-submit:hover {
    background: #9c1a5a;
    border-color: #9c1a5a;
}
.a2prl-contact__carte form.wpcf7-form .wpcf7-spinner {
    grid-column: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
}
.a2prl-contact__carte form.wpcf7-form .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border-radius: 5px;
    font-size: 14px;
}
.a2prl-contact__carte .a2prl-mention {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6a696c;
}

/* ── Écrans étroits ──────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .a2prl-panneau__titre {
        font-size: 46px;
    }
    .a2prl-contact__panneau > .vc_column-inner {
        padding: 44px 36px !important;
    }
    .a2prl-contact__carte > .vc_column-inner {
        padding: 40px 36px !important;
    }
}
/* Tablette portrait : une colonne, le panneau au-dessus de la carte */
@media (max-width: 991px) {
    .a2prl-contact .a2prl-contact__panneau,
    .a2prl-contact .a2prl-contact__carte {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .a2prl-contact .a2prl-contact__panneau {
        margin-bottom: 24px;
    }
    .a2prl-contact__carte form.wpcf7-form {
        grid-template-rows: none;
    }
}
@media (max-width: 767px) {
    .a2prl-contact.vc_row {
        margin-top: 8px;
        margin-bottom: 56px;
    }
    .a2prl-contact__panneau {
        margin-bottom: 24px;
    }
    .a2prl-panneau {
        gap: 36px;
    }
    .a2prl-panneau__titre {
        font-size: 40px;
    }
    .a2prl-contact__panneau > .vc_column-inner,
    .a2prl-contact__carte > .vc_column-inner {
        padding: 32px 24px !important;
    }
    .a2prl-contact__carte form.wpcf7-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    .a2prl-contact__carte form.wpcf7-form input.wpcf7-submit {
        grid-column: 1;
        justify-self: stretch;
        width: 100%;
    }
    .a2prl-contact__carte form.wpcf7-form .wpcf7-spinner {
        grid-column: 1;
        justify-self: center;
    }
}