/* =====================================================================
   IMMO-2026.08.05-01  —  style_investisseur_index.css
   Styles specifiques a la page d'accueil (index).
   ---------------------------------------------------------------------
   Historique (anti-chronologique) :
   - 2026.08.05-01 : garde anti-debordement horizontal sur mobile
                     (blocs limites a 100% + filet overflow-x, scope index).
   ===================================================================== */

/* =========================================================
   Accueil ImmoKitLoc — styles spécifiques à l'index.
   Chargé APRÈS style_investisseur.css : prioritaire pour ces
   sélecteurs. Objectif : bannière contenue + page responsive.
   ========================================================= */

/* ---------- Reset largeur (corrige les débordements) ----------
   Sans border-box, tout élément en "width:100% + padding" dépasse
   son conteneur et élargit la page (cas du tableau comparatif et
   de la FAQ). Ce reset règle le problème pour toute la page.
   (À terme, mieux vaut le mettre dans style_investisseur.css pour
   en faire profiter tout le site.) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Bannière (hero) ----------
   Le dégradé (défini dans la feuille principale) reste pleine
   largeur ; SEUL le contenu est limité en largeur et centré,
   donc le titre ne s'étire plus sur tout l'écran. */
.banniere {
    display: flex;
    flex-wrap: wrap;                 /* passe à la ligne si besoin */
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 20px;              /* un peu moins haut qu'avant */
    text-align: left;
}

.banniere h1 {
    margin: 0;
    max-width: 640px;                /* <-- empêche le titre de s'étirer */
    color: #1e3d33;
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);  /* taille fluide */
    line-height: 1.25;
}

/* ---------- Avatars ---------- */
.avatar-banniere {
    width: 72px;
    height: auto;
    flex: 0 0 auto;                  /* ne se compresse pas */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);  /* ombre douce */
}

.avatar-interactif {
    width: 110px;
    height: auto;
    cursor: pointer;
    display: block;
    margin: 16px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;
}
.avatar-interactif:hover {
    transform: scale(1.05);
}

/* Animation « coucou » */
@keyframes wave {
    0%, 40%, 60%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
}
.avatar-interactif.anim {
    animation: wave 2s infinite;
    transform-origin: 50% 90%;       /* pivote depuis le bas, plus naturel */
}

/* ---------- Cartes formulaires ----------
   Le bouton « Remplir » ne déborde plus grâce au reset border-box
   ci-dessus. On garde un padding un peu plus aéré. */
.carte-formulaire {
    padding: 20px;
}

.carte-formulaire .boutons {
    width: 100%;
}

.bouton-remplir,
.bouton-details,
.bouton-acheter {
    max-width: 100%;                 /* ne déborde jamais de la carte */
}

/* ---------- Tablette ---------- */
@media (max-width: 768px) {
    .banniere {
        gap: 18px;
        padding: 28px 16px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .banniere {
        flex-direction: column;      /* avatar au-dessus du titre */
        text-align: center;
        gap: 14px;
        padding: 24px 16px;
    }
    .banniere h1 {
        max-width: 100%;
    }
    .avatar-banniere {
        width: 64px;
    }
    .avatar-interactif {
        width: 96px;
    }
}

/* ---------- Confort : tableaux larges scrollables ----------
   Évite que le tableau comparatif ne déborde de l'écran sur
   mobile : il devient scrollable horizontalement dans son cadre. */
.full-width-section {
    overflow-x: auto;
}

/* Respecte les réglages "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) {
    .avatar-interactif.anim { animation: none; }
}

/* ---------------------------------------------------------------------
   Anti-débordement horizontal sur mobile (accueil uniquement).
   Objectif : aucun bloc ne dépasse la largeur de l'écran. Le tableau
   comparatif reste scrollable via .full-width-section (overflow-x:auto).
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .banniere,
    section,
    .section-formulaires,
    .grille-formulaires,
    .carte-formulaire,
    .offre-speciale,
    .statut-bandeau {
        max-width: 100%;
    }
    /* Filet : coupe un éventuel débordement résiduel sans casser le
       scroll interne du tableau comparatif ni la mise en page desktop. */
    html,
    body {
        overflow-x: hidden;
    }
}