/* 
Page créée par Loïc Rotzetter
Page css pour les pages de châssis
Page créée le 9 janvier 2025 
*/
/* Style des sections avec image et texte */
.image-texte, .image-texte-inverse {
    display: flex;                  /* Utiliser un flex pour aligner les éléments */
    align-items: center;            /* Centrer verticalement les éléments */
    justify-content: space-between; /* Espacement entre l'image et le texte */
    margin: 20px 0;                 /* Espacement entre les sections */
}

.image-gauche, .image-droite {
    flex: 1;                        /* La moitié de l'espace disponible */
    max-width: 50%;                 /* Limiter la largeur de l'image */
    padding-right: 20px;
}

.image-gauche img, .image-droite img {
    width: 100%;                    /* L'image prend toute la largeur du conteneur */
    height: auto;                   /* Pour conserver les proportions de l'image */
    padding-right: 40px;                /* Espacement */
}

.texte-droit, .texte-gauche {
    font-family: Arial, Helvetica, sans-serif;  /* Police de caractère */
    flex: 2;                        /* Le double de l'espace disponible */
    padding-right: 40px;                /* Espacement */
}


.texte-droit p, .texte-gauche h2 {
    font-size: 18px;                /* Taille de la police */
    line-height: 1.6;               /* Espacement entre les lignes */
    text-align: justify;
}



.texte-gauche ul li {
    font-size: 18px;                /* Taille de la police */
    line-height: 1.6;               /* Espacement entre les lignes */
    margin-bottom: 10px;            /* Espacement entre les éléments de la liste */
    text-align: justify;
}

.fond-logo {
    display: flex;                  /* Utiliser un flex pour centrer le logo */
    justify-content: center;        /* Centrer horizontalement */
    align-items: center;            /* Centrer verticalement */
    width: 100%;                    /* Prendre toute la largeur disponible */
    height: 288px;                  /* Hauteur fixe */
    background: #000000;          /* Fond noir */
}

.boutons {
    display: none;
    font-size: 0px;
    margin: 0;
      padding: 0px;
}

#null{
    display: none;
}
@media (max-width: 1050px) {
    /* Alterner texte et image */
    .image-texte, .image-texte-inverse {
        display: flex;
        flex-direction: column; /* Empile le texte et l'image verticalement */
        align-items: center;    /* Centre les éléments horizontalement */
        gap: 20px;              /* Espacement entre texte et image */
    }

    .image-texte .image-gauche,
    .image-texte-inverse .image-droite {
        order: 2; /* L'image passe après le texte */
    }

    .image-texte .texte-droit,
    .image-texte-inverse .texte-gauche {
        order: 1; /* Le texte passe avant l'image */
        text-align: center; /* Centrer le texte pour une meilleure lisibilité */
    }

    .menu {
        display: none;  /* Cacher le menu principal */
    }
    .fond-boutons {
        height: 0px;    /* Cacher le fond des boutons */
        background-color: transparent;  /* Fond transparent */
        border: none;            /* Pas de bordure */
    }
    .texte-droit p, .texte-gauche h2 {
        padding-left: 30px;
    }
/*aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
    #null{
        display: block;
    }
    .boutons {
        display: block;
        background-color: transparent;
        border: none;
        font-size: 55px;
        padding-bottom: 10px;
        padding-left: 5px;
    }
}