.os-contact,
.os-contact-form {
    --osc-bg:     #efede8;
    --osc-card:   #ffffff;
    --osc-ink:    #111111;
    --osc-muted:  #8a8a8a;
    --osc-line:   #e0ded8;
    --osc-black:  #000000;
    --osc-font:   'Archivo', 'Rubik', -apple-system, 'Segoe UI', sans-serif;
    --osc-hand:   'Rock Salt', cursive;
}



.os-contact {
    font-family: var(--osc-font);
    color: var(--osc-ink);
    padding: 40px 60px 0 60px;
    box-sizing: border-box;
}

.os-contact-eyebrow {
    display: block;
    font-family: var(--osc-hand);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--osc-ink);
    margin-bottom: 14px;
}

.os-contact .os-contact-title {
    font-family: var(--osc-font);
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--osc-ink) !important;
    margin: 0 0 36px 0;
}

.os-contact .os-contact-soustitre {
    font-family: var(--osc-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--osc-ink) !important;
    margin: 0 0 20px 0;
}
.os-contact .os-contact-soustitre--form {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--osc-line);
}



.os-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px;
    align-items: start;
}

/* GARDE-FOU : seules les agences sont des cases de la grille.
   WordPress transforme volontiers une ligne blanche en paragraphe vide.
   Invisible à l'écran, un tel paragraphe occupe pourtant une case et
   repousse les agences dans la colonne suivante — c'est ce qui les
   empilait toutes deux à droite, la colonne de gauche restant vide. */
.os-contact-grid > *:not(.os-agence) {
    display: none !important;
}

/* Placement explicite : chaque agence a sa colonne, quoi qu'il arrive. */
.os-contact-grid > .os-agence:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.os-contact-grid > .os-agence:nth-of-type(2) { grid-column: 2; grid-row: 1; }

.os-agence {
    min-width: 0;              /* sans cela, une colonne refuse de rétrécir */
}

.os-contact .os-agence-nom {
    font-family: var(--osc-font);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--osc-ink) !important;
    margin: 0 0 16px 0;
}


.os-agence-infos {
    font-style: normal;        /* <address> est en italique par défaut */
    background: var(--osc-card);
    padding: 22px 22px;
    margin: 0 0 18px 0;
    font-size: .9rem;
    line-height: 1.4;
}
.os-agence-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--osc-muted);
    margin: 16px 0 3px 0;
}
.os-agence-label:first-child { margin-top: 0; }

.os-agence-valeur {
    display: inline-block;
    color: var(--osc-ink) !important;
    text-decoration: none !important;
    transition: opacity .2s ease;
}
.os-agence-valeur:hover {
    opacity: .6;
    text-decoration: underline !important;
}
.os-agence-valeur:focus-visible {
    outline: 2px solid var(--osc-black);
    outline-offset: 3px;
}

/* --- Carte ---
   Le rapport de forme est imposé au conteneur : la carte garde la même
   hauteur des deux côtés, quelle que soit la longueur de l'adresse. */
.os-agence-carte {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--osc-line);
    background: var(--osc-card);
    overflow: hidden;
}
.os-agence-carte iframe {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Repli pour les navigateurs sans aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
    .os-agence-carte { height: 300px; }
}




.os-contact-form {
    font-family: var(--osc-font);
    padding: 0 60px 60px 60px;
    box-sizing: border-box;
}

.os-contact-form label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--osc-muted);
    margin: 0 0 6px 0;
}

.os-contact-form input[type="text"],
.os-contact-form input[type="email"],
.os-contact-form input[type="tel"],
.os-contact-form input[type="url"],
.os-contact-form input[type="date"],
.os-contact-form input[type="number"],
.os-contact-form select,
.os-contact-form textarea {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    font-family: var(--osc-font) !important;
    font-size: .95rem;
    color: var(--osc-ink);
    background: var(--osc-card);
    border: 1px solid var(--osc-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 14px;
    margin: 0 0 18px 0;
    transition: border-color .2s ease;
}
.os-contact-form textarea { min-height: 170px; resize: vertical; }

.os-contact-form input:focus,
.os-contact-form select:focus,
.os-contact-form textarea:focus {
    border-color: var(--osc-black) !important;
    outline: none;
}

/* --- Bouton d'envoi : noir plein, inversion au survol --- */
.os-contact-form input[type="submit"],
.os-contact-form .wpcf7-submit {
    display: inline-block;
    width: auto;
    font-family: var(--osc-font) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--osc-black) !important;
    border: 1px solid var(--osc-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 13px 26px !important;
    margin-top: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .22s ease, color .22s ease;
}
.os-contact-form input[type="submit"]:hover,
.os-contact-form .wpcf7-submit:hover {
    color: var(--osc-black) !important;
    background: #fff !important;
}
.os-contact-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--osc-black);
    outline-offset: 3px;
}

/* --- Messages de Contact Form 7 --- */
.os-contact-form .wpcf7-response-output {
    font-size: .9rem;
    border-width: 1px !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    margin: 20px 0 0 0 !important;
}
.os-contact-form .wpcf7-not-valid-tip {
    font-size: .78rem;
    color: #8c2f1f;
    margin: -12px 0 14px 0;
}


/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .os-contact      { padding: 30px 30px 0 30px; }
    .os-contact-form { padding: 0 30px 40px 30px; }

    .os-contact-grid {
        grid-template-columns: 1fr;   /* une agence sous l'autre */
        gap: 34px;
    }
    /* Le placement explicite du mode large doit être levé, sinon les
       deux agences se superposeraient sur la même ligne. */
    .os-contact-grid > .os-agence:nth-of-type(1),
    .os-contact-grid > .os-agence:nth-of-type(2) {
        grid-column: 1;
        grid-row: auto;
    }
    .os-contact .os-contact-title { margin-bottom: 26px; }
    .os-contact .os-contact-soustitre--form {
        margin-top: 40px;
        padding-top: 30px;
    }
}

@media screen and (max-width: 600px) {
    .os-contact      { padding: 24px 20px 0 20px; }
    .os-contact-form { padding: 0 20px 32px 20px; }

    .os-agence-carte { aspect-ratio: 3 / 2; }
    .os-agence-infos { padding: 18px 18px; }
    .os-contact-form input[type="submit"],
    .os-contact-form .wpcf7-submit { width: 100%; }
}

/* Garde-fou anti-débordement, limité aux médias : appliqué à « * », il
   écraserait les largeurs de grille. */
.os-contact img,
.os-contact iframe,
.os-contact svg { max-width: 100%; }



@media (prefers-reduced-motion: reduce) {
    .os-agence-valeur,
    .os-contact-form input,
    .os-contact-form textarea,
    .os-contact-form .wpcf7-submit {
        transition: none !important;
    }
}