/**************************************************************************
 * PAGE /pro — Maintenance IT Apple pour Entreprise (B2B)
 * Reconstruction depuis l'archive Wayback (snapshot 20260306091315),
 * habillée avec la charte du site : polices auto-hébergées (Avenir LT Pro /
 * Helvetica W01 Light) et l'orange maison #E94615 des boutons d'appel.
 **************************************************************************/
.pro-main{
    max-width: 1080px;
    margin: 20px auto 60px;
    padding: 0 16px;
    font-family: 'Avenir LT Pro', sans-serif;
    color: #1a1a1a;
}

/* ---- sections en deux colonnes (texte / image) ------------------------- */
.pro-hero,
.pro-environnements,
.pro-contact{
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 48px 0;
}
.pro-hero > div,
.pro-environnements > div,
.pro-contact > div{
    flex: 1;
    min-width: 0;
}
.pro-hero img,
.pro-environnements img,
.pro-contact img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ---- titres ------------------------------------------------------------ */
.pro-main h1,
.pro-main h2{
    font-family: "Helvetica W01 Light";
    font-weight: 100;
    line-height: 1.2;
    margin: 0 0 18px;
}
.pro-main h1{
    font-size: 38px;
}
.pro-main h2{
    font-size: 30px;
}
.pro-surtitre{
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #E94615;
    margin: 0 0 10px;
}

/* ---- héro -------------------------------------------------------------- */
.pro-hero-bandeau{
    font-size: 17px;
    letter-spacing: 1px;
    color: #444;
    margin: 0 0 14px;
}
.pro-hero-accroche{
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 28px;
}

/* ---- environnements ---------------------------------------------------- */
.pro-environnements{
    background-color: #f1f1f1;
    border-radius: 6px;
    padding: 48px 40px;
}
.pro-profils{
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.pro-profils li{
    font-size: 17px;
    padding: 9px 0 9px 26px;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.pro-profils li:last-child{
    border-bottom: none;
}
.pro-profils li::before{
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #E94615;
}

/* ---- contact ----------------------------------------------------------- */
.pro-contact-texte p{
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 28px;
}

/* ---- bouton orange (charte .btn-call du site) -------------------------- */
.pro-btn,
.pro-btn:link,
.pro-btn:visited{
    display: inline-block;
    padding: 14px 34px;
    border: 1px solid #E94615;
    background-color: #E94615;
    color: #FFFFFF;
    font-family: 'Avenir LT Pro', sans-serif;
    font-size: 16px;
    font-weight: lighter;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
}
.pro-btn:hover{
    color: #E94615;
    background-color: #FFFFFF;
    transition: all .2s;
}
.pro-btn-grand{
    font-size: 18px;
    padding: 16px 44px;
}

/* ---- desktop : dégagement sous le header fixe --------------------------
 * À partir de 64em, style.css passe le header en position:fixed (138 px de
 * haut) : il ne réserve plus sa place dans le flux et recouvrirait le héro
 * sans cette marge. */
@media only screen and (min-width: 64em){
    .pro-main{
        margin-top: 178px;
    }
}

/* ---- mobile ------------------------------------------------------------ */
@media only screen and (max-width: 52em){
    .pro-hero,
    .pro-environnements,
    .pro-contact{
        flex-direction: column;
        gap: 28px;
        padding: 32px 0;
    }
    .pro-environnements{
        padding: 32px 20px;
        /* l'image passe SOUS le texte, comme sur les autres sections */
        flex-direction: column-reverse;
    }
    .pro-main h1{
        font-size: 28px;
    }
    .pro-main h2{
        font-size: 24px;
    }
    .pro-btn{
        display: block;
    }
}