/* contact.css */

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #fff;
    background-blend-mode: overlay;

    background:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url('../img/background_contact_light.webp') center/cover no-repeat fixed;
}

/* Fallback AVIF */
@supports (background-image: url('../img/background_contact_light.avif')) {
    body {
        background:
            linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
            url('../img/background_contact_light.avif') center/cover no-repeat fixed;
    }
}

/* Fallback JPG */
body.no-webp {
    background:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url('../img/background_contact_light.jpg') center/cover no-repeat fixed;
}

/* Titre Contact en hero */
.main-title-contact {
    /* sprint-25 (retour Arnaud) : titre remonté (100→72) pour que l'ensemble
       titre+boîtes+formulaire ne colle plus la bottombar. */
    margin-top: 72px;
    margin-bottom: 34px;
    text-align: center;
    font-size: 4.2rem;
    color: #fff;
    text-shadow: 0 3px 15px rgba(0,0,0,0.7);
}

/* Layout 2 colonnes : info + formulaire */
.contact-outer {
    display: flex;
    gap: 30px;
    max-width: 1000px;
    width: 92%;
    margin: 0 auto 80px auto;
    align-items: stretch;
    /* Centrage robuste — évite l'overflow gauche sur grands écrans */
    position: relative;
    left: 0;
    right: 0;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 64px; /* espace pour la bottombar fixée */
}

/* Sécurise la largeur globale */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Boite infos de contact — aligné sur landing-box index */
.contact-info-box {
    flex: 0 0 300px;
    background: var(--card-bg, rgba(0,0,0,0.28));  /* sprint-25 : canon unique .landing-box */
    backdrop-filter: var(--card-blur, blur(2px));
    -webkit-backdrop-filter: var(--card-blur, blur(2px));
    border: var(--card-border, 1px solid rgba(255,255,255,0.15));
    padding: 30px;
    border-radius: var(--card-radius, 0);
    transition: var(--card-transition, background 0.3s, transform 0.25s);
}
.contact-info-box:hover {
    /* Survol qui ASSOMBRIT (canon .landing-box ; avant il blanchissait à 0.18). */
    background: rgba(0,0,0,0.45);
    transform: translateY(-2px);
}
.contact-info-box h2 {
    font-size: 1.4em;
    margin-bottom: 22px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.info-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.info-icon {
    font-size: 1.4em;
    min-width: 24px;
    text-align: center;
    opacity: 0.9;
}
/* C15 sprint-05 — contraste a11y : #009FCB turquoise sur fond rgba(0,0,0,0.28)
 * donnait ~1.3:1 (Lighthouse "Contrast insufficient", screenshot Arnaud).
 * Passage à l'accent #f0e3a4 (jaune marque, déjà utilisé pour CTA client portal
 * et border-top bannière cookies) + underline persistante + font-weight 600.
 * Ratio mesuré ~5-7:1 sur fond rgba(0,0,0,0.28) au-dessus du background photo
 * → conforme WCAG 2.2 AA (4.5:1 texte normal). */
.info-item a {
    color: #f0e3a4;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.info-item a:hover,
.info-item a:focus {
    color: #ffffff;
    text-decoration-thickness: 2px;
    outline: none;
}
.info-item a:focus-visible {
    outline: 2px solid #f0e3a4;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Wrapper du formulaire — aligné sur landing-box index */
.contact-wrapper {
    flex: 1;
    background: var(--card-bg, rgba(0,0,0,0.28));  /* sprint-25 : canon unique .landing-box */
    backdrop-filter: var(--card-blur, blur(2px));
    -webkit-backdrop-filter: var(--card-blur, blur(2px));
    border: var(--card-border, 1px solid rgba(255,255,255,0.15));
    padding: 35px;
    border-radius: var(--card-radius, 0);
}

/* Formulaire */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, select, textarea {
    width: 100%;
    padding: 11px;
    border-radius: 0;  /* sprint-06 itér. 15 : carré pur. */
    border: none;
    background: rgba(255,255,255,0.9);
    color: #000;
    font-size: 1em;
    box-sizing: border-box;
}

/* sprint-25 (retour Arnaud) : hauteur fixe et compacte (avant 15vh = trop haut sur
   grand écran → le formulaire collait la bottombar). */
textarea { min-height: 80px; height: 96px; resize: vertical; }

/* Ligne telephone */
.phone-row {
    display: flex;
    gap: 8px;
}

/* Boutons côte à côte */
.button-row {
    display: flex;
    gap: 10px;
}

.send {
    flex: 1;
    background: var(--cta-primary-bg, #009FCB);
    color: var(--cta-primary-color, #fff);
    padding:12px;
    border:none;
    border-radius: var(--cta-radius, 0);
    font-weight:600;
    cursor:pointer;
    transition: var(--cta-transition, background 0.3s, transform 0.2s);
}
.send:hover {
    background: var(--cta-primary-bg-hover, #61C452);
    transform: translateY(-2px);
}

.back {
    flex: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#000;
    text-align:center;
    padding:12px;
    border-radius: 0;  /* sprint-06 itér. 15 : carré pur. */
    text-decoration:none;
    font-weight:600;
    transition: background 0.3s;
}
.back:hover { background:#61C452; color:#fff; }

/* Success */
.contact-success {
    text-align:center;
    font-size:1.2em;
    color:#ffd700;
    margin-bottom:20px;
}

/* Mobile */
@media(max-width:768px){
    .main-title-contact {
        margin-top: 70px;
        margin-bottom: 14px;
        font-size: 1.8rem;
    }
    .contact-outer {
        flex-direction: column;
        margin: 0 4% 50px 4%;
        gap: 20px;
    }
    .contact-info-box {
        flex: none;
        width: 100%;
    }
    .contact-wrapper {
        padding: 18px;
    }
    form {
        gap: 8px;
    }
    input, select, textarea {
        padding: 10px;
        font-size: 0.95em;
    }
    .phone-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .phone-row select {
        flex: 0 0 110px;
        min-width: 110px;
        min-height: 44px;
    }
    .phone-row input {
        flex: 1 1 180px;
        min-height: 44px;
    }
}