/*
Page créée par Loïc Rotzetter
Page CSS pour les pages moteurs, pistes et evoltion
Page créée le 19 janvier 2025 
*/
/* Fond général des pages */
.page-contenu {
    background-color: #ffffff; /* Fond gris clair commun */
    padding: 40px;
}

/* Style des sections avec image et texte */
.section-contenu {
    display: flex;
    flex-direction: row; /* Alternance texte à gauche et image à droite */
    align-items: center; /* Centrer verticalement les éléments */
    justify-content: space-between; /* Espacement entre l'image et le texte */
    margin: 0px 0; /* Espacement entre les sections */
    min-height: 300px; /* Augmente la hauteur minimale de la section */
    gap: 60px; /* Espacement entre les colonnes (image et texte) */
}

/* Image à gauche, texte à droite */
.section-contenu.image-texte {
    flex-direction: row; /* L'image est placée à gauche */
}

/* Image à droite, texte à gauche */
.section-contenu.image-texte-inverse {
    flex-direction: row-reverse; /* L'image est placée à droite */
}

/* Style des images */
.section-contenu img {
    flex: 1; /* L'image occupe une proportion flexible */
    height: auto; /* Maintient les proportions de l'image */
    object-fit: cover; /* Gère le contenu pour bien remplir l'espace */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre douce */
    border: 3px solid #C0C0C0; /* Bordure grise harmonisée avec le fond */
    border-radius: 10px; /* Coins légèrement arrondis */
    width: 500px;
}

/* Style du texte */
.section-contenu .texte {
    flex: 1; /* Le texte occupe une proportion égale à l'image */
    padding: 20px; /* Espacement intérieur autour du texte */
    text-align: justify; /* Justifie le texte pour un alignement propre */
}
/* Titres */
.section-contenu h2 {
    font-size: 80px; /* Taille de la police */
    line-height: 1.6; /* Espacement entre les lignes */
    margin-bottom: 20px; /* Espacement en bas du titre */
}

/* Paragraphes */
.section-contenu p {
    font-size: 20px; /* Taille de la police */
    line-height: 1.8; /* Espacement entre les lignes */
    text-align: justify; /* Justifie les paragraphes */
}

/* Style des listes */
.section-contenu ul li {
    font-size: 21px; /* Taille de la police */
    line-height: 1.8; /* Espacement entre les lignes */
    margin-bottom: 10px; /* Espacement entre les éléments de la liste */
    font-weight: bold; /* Texte en gras */
}

/* Centrer les titres */
.section-titre {
    text-align: center; /* Centrer horizontalement */
    font-size: 30px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    color: #000; /* Couleur noire */
    margin: 40px 0; /* Espacement au-dessus et en dessous */
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    background: none; /* Pas de fond */
}

/* Logo */
.fond-logo {
    display: flex; /* Utiliser un flex pour centrer le logo */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 288px;
    background: #000000;
}

/* Style des puces */
.puces {
    list-style-type: circle;
}

/* Titres des caractéristiques */
.section-contenu h3 {
    font-size: 30px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    margin-bottom: 10px; /* Espacement sous le titre */
}

img {
    max-width: none;
}
.boutons {
    display: none;
    font-size: 0px;
    margin: 0;
    padding: 0px;
}
/* Responsive design */
@media (max-width: 1050px) {
    .menu {
        display: none;
    }
    .boutons {
        display: block;
        background-color: transparent;
        border: none;
        font-size: 55px;
        padding-bottom: 10px;
        padding-left: 5px;
    }
    .sidenav {
        display: block; /* Le menu latéral devient visible */
        width: 0; /* Initialement caché */
    }
    .section-contenu {
        display: block; /* Les éléments passent en colonne */
    }

    /* Changer l'ordre pour que l'image vienne après le texte */
    .section-contenu img {
        order: 1; /* L'image sera après le texte */
        max-width: 100%; /* L'image prend toute la largeur */
        height: auto; /* Ajuste la hauteur proportionnellement */
        width: 250px;   /*taille des images */
    }

    .section-contenu .texte {
        order: 0; /* Le texte reste en premier */
    }

    /* Tout le texte devient plus petit (20px), sauf les titres (h2, h3) */
    .section-contenu p,
    .section-contenu ul li {
        font-size: 20px; /* Taille de la police pour les paragraphes et les éléments de liste */
    }

    .section-contenu h2, .section-contenu h3 {
        font-size: 30px; /* Taille de la police pour les titres */
    }
}