/* =========================================================
   PAGE CONTACT — HERO
   ========================================================= */

.hero-contact {
    position: relative;

    min-height: clamp(560px, 72vh, 820px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: var(--couleur-bleu-fonce);
}


/* Image du hero */

.hero-contact-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}


/* Voile pour améliorer la lisibilité */

.hero-contact-voile {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgb(10 20 47 / 10%),
            rgb(10 20 47 / 28%)
        );

    z-index: 1;
}


/* Conteneur du cartouche */

.hero-contact-contenu {
    position: relative;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;

    padding:
        clamp(40px, 6vw, 80px)
        var(--esp-h-2);

    z-index: 2;
}
/* Cartouche contact */

.hero-contact-cartouche {
    width: min(100%, 520px);
}


/* Surtitre */

.hero-contact-surtitre {
    margin-bottom: 8px;

    color: var(--couleur-orange-secondaire);

    font-size: clamp(0.9rem, 1.5vw, 1rem);
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* Titre */

.hero-contact-cartouche h1 {
    margin-bottom: clamp(16px, 2vw, 24px);

    color: var(--couleur-blanc);

    font-size: clamp(2rem, 4vw, 3.5rem);
}


/* Introduction */

.hero-contact-introduction {
    margin-bottom: clamp(24px, 3vw, 36px);

    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.6;
}


/* Coordonnées */

.hero-contact-coordonnees {
    display: flex;
    flex-direction: column;
    gap: 18px;

    font-style: normal;
    line-height: 1.6;
}


/* Liens de contact */

.hero-contact-coordonnees a {
    color: var(--couleur-blanc);

    text-decoration: none;

    transition: color 0.2s ease;
}


.hero-contact-coordonnees a:hover {
    color: var(--couleur-orange-secondaire);
}