/* ==========================================================================
   Accueil — « Personalized Support » (bandeau 50/50 pleine largeur)

   La section n'est plus une carte centrée dans un `.col-lg-10` (≈ 83 % de la
   largeur) : c'est désormais un bandeau pleine largeur divisé en deux moitiés
   égales — le texte à gauche, la photo du conseiller à droite, bord à bord.

   Sur les très grands écrans, le texte garde une largeur maximale et reste
   centré dans sa moitié pour rester lisible.
   ========================================================================== */

/* La photo doit toucher le bord droit : aucun padding latéral sur le conteneur */
.personal-service > .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

/* --- Moitié gauche : le texte -------------------------------------------- */
.personal-service-content-col {
    background-color: #ffffff;
}

.personal-service-content {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.personal-service-content .btn {
    width: 100%;
}

/* --- Moitié droite : la photo --------------------------------------------
   `.personal-service-image img` (css/style.css) gère width/height/object-fit :
   il suffit que le conteneur ait une hauteur définie, sinon `height: 100%` de
   l'image ne peut pas se résoudre. */
.personal-service-image {
    height: 100%;
    min-height: 380px;
}

/* --- Grand écran : le bouton reprend sa largeur naturelle ---------------- */
@media (min-width: 992px) {

    .personal-service-content .btn {
        width: auto;
    }
}

/* --- Sous 992 px : les deux moitiés s'empilent --------------------------
   Colonne flex non étirée : il faut une hauteur explicite, sinon l'image
   garde sa hauteur naturelle et laisse un vide blanc sous elle. */
@media (max-width: 991.98px) {

    .personal-service-image {
        height: 340px;
        min-height: 0;
    }
}