/* --------------------------
   GLOBAL
---------------------------*/
body {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    background-color: #053f6f; /* bleu foncé Indosuez */
    color: white;
}

a {
    color: #a5c8bd; /* vert Thaler */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- TOPBAR (fixe, aligné à droite) ---------- */
#topbar {
    background-color: #053f6f; /* ta nouvelle couleur */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

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

    /* padding horizontal réduit, hauteur auto (on calcule dynamiquement) */
    padding: 6px 10px;
    box-sizing: border-box;
}

/* conteneur des éléments alignés à droite */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;

    /* Empêcher le retour à la ligne : on laissera un scroll horizontal si nécessaire
       plutôt que casser la ligne */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto; /* permet scroll horizontal si espace insuffisant */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; /* pour un alignement visuel souple */
}

/* wrapper générique pour drapeaux / globe */
.flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* état simple (FR, globe) */
.flag.single .flag-img {
    display: block;
    height: 61px; /* taille native des images sur le site */
    width: auto;
    line-height: normal;
}

/* générale : images du topbar */
.flag-img,
.ebanking-img,
.separator {
    display: block;        /* important pour alignement vertical identique */
    height: 61px;         /* taille native */
    width: auto;
    line-height: normal;
}

/* liens qui ont swap (EN, E-banking) contiennent deux images : off + on */
/* .swap .on est cachée par défaut, .off visible */
.swap .on {
    display: none;
}
.swap .off {
    display: block;
}

/* Au survol du parent swap, inverse l'affichage */
.swap:hover .off {
    display: none;
}
.swap:hover .on {
    display: block;
}

/* sélecteur FR/EN: s'assurer de la même hauteur visuelle */
.lang {
    display: inline-block;
    vertical-align: middle;
}

/* empêcher zoom CSS automatique ou réduction */
#topbar img {
    max-width: none;
}

/* Si on veut cacher les scrollbars horizontales sur desktop, on peut */
/* .topbar-right::-webkit-scrollbar { display: none; } */

/* Décalage initial du body (sera recalculé par le script) */
body {
    margin: 0;
    padding-top: 70px; /* valeur par défaut, le script ajuste à la hauteur réelle */
    background-color: #053f6f; /* ton fond demandé */
}

/* Mobile: faire en sorte que la topbar se centre et ne masque pas contenu */
@media (max-width: 640px) {
    #topbar {
        padding: 8px 8px;
    }
    .topbar-right {
        justify-content: center;
        gap: 6px;
    }
    /* garder images à la même hauteur */
    .flag-img, .ebanking-img, .separator {
        height: 50px;
    }
}


/* --------------------------
   CONTENT WRAPPER
---------------------------*/
.content-wrapper {
    padding: 30px;
}

/* --------------------------
   GRID LAYOUT
---------------------------*/
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* LEFT IMAGE */
.left-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* TEXT */
.right-text {
    font-size: 1rem;
    line-height: 1.5;
    color: white;
}

/* --------------------------
   RESPONSIVE
---------------------------*/
@media (max-width: 900px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .right-text {
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    #header {
        flex-direction: column;
        gap: 14px;
        text-align: center;
		vertical-align: top;
    }

    .header-left,
    .header-right {
        flex-wrap: wrap;
        justify-content: center;
    }

    .content-wrapper {
        padding: 20px;
    }
}