/* BODY POUR TOUTES LES PAGES */ /* Styles pour l'élément */ body { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 100vh; background-color: #f9f8f8; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Styles pour les titres de niveau 1 */ .corps h1 { font-size: 34px; color: #333; } /* Styles pour les titres de niveau 2 */ .corps h2 { font-size: 30px; color: #333; } .corps h3{ font-size: 26px; } .corps p{ font-size: 20px; line-height: 1.5em; margin-bottom: 1em; } .corps ul { font-size: 20px; line-height: 1.5em; margin-inline-start: auto; margin-inline-end: auto; margin-bottom: 1em; } /* HEADER */ /* Styles pour les éléments ayant la classe "corps" */ .corps { margin-left: 20%; margin-right: 20%; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Styles pour l'élément

*/ header { display: flex; justify-content: space-between; align-items: center; padding: 1em; background-color: #1bc376; color: #9d3e2f; border-bottom: #16a464 solid 3px; } /* Styles pour l'élément ayant la classe "logo" à l'intérieur de

*/ header .logo { font-weight: bold; text-transform: uppercase; flex-shrink: 0; } /* Styles pour les images à l'intérieur de l'élément ayant la classe "logo" */ .logo img{ border-radius: 10px; } /* Styles pour l'élément

à l'intérieur de

*/ header nav { display: flex; flex-direction: column; align-items: center; font-size: 25px; flex-grow: 1; margin-top: 1em; } /* Styles pour les listes à l'intérieur de

*/ nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; margin-top: -20px; margin-right: 20px; } /* Styles pour chaque élément de liste à l'intérieur de

*/ nav ul li { position: relative; } /* Styles pour les liens à l'intérieur des éléments de liste de

*/ nav ul li a { display: block; padding: 1em; color: #333; text-decoration: none; transition: color 0.3s ease-in-out; text-decoration: none; } /* Styles pour les liens lorsqu'ils sont survolés */ nav ul li a:hover { color: #fff; text-decoration: underline; } /* Styles pour le menu déroulant */ .menu-déroulant { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 0.5em 1em rgb(0, 0, 0); z-index: 2; } .dérouler:hover .menu-déroulant { display: block; } .menu-déroulant li { display: block; } .menu-déroulant li a { display: block; padding: 0.5em; color: #333; text-decoration: none; transition: color 0.3s ease-in-out; } .menu-déroulant li a:hover { color: #fff; background-color: #16a464; } .menu-déroulant li a:before { content: ""; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 2px; height: 100%; background-color: #9d3e2f; opacity: 0; transition: opacity 0.3s ease-in-out; } .menu-déroulant li a:hover:before { opacity: 1; } .dérouler a:hover{ text-decoration: underline; } /* Ajout des Media Queries pour le responsive */ @media screen and (max-width: 1067px) { nav ul li a { padding: 0.5em; font-size: 24px; } .menu-déroulant { margin-top: 0px; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 0.5em 1em rgb(0, 0, 0); transition: opacity 0.3s ease-in-out; z-index: 2; right: -10px; /* Décalage vers la gauche */ } } @media screen and (max-width: 890px) { nav ul li a { padding: 0.5em; font-size: 20px; } .menu-déroulant { margin-top: 1px; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 0.5em 1em rgb(0, 0, 0); transition: opacity 0.3s ease-in-out; z-index: 2; right: -10px; /* Décalage vers la gauche */ } } @media screen and (max-width: 779px) { nav ul li a { padding: 0.5em; font-size: 18px; } .menu-déroulant { margin-top: 1px; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 0.5em 1em rgb(0, 0, 0); transition: opacity 0.3s ease-in-out; z-index: 2; right: -10px; /* Décalage vers la gauche */ } } /* Calcul de la largeur maximale */ .menu-déroulant { width: max-content; } /* FOOTER */ /* Styles pour le footer */ footer { padding: 1em; background-color: #1bc376; color: #fff; margin-top: auto; /* position: sticky; */ bottom: 0; border-top: 1px solid #000; } footer li { margin: auto; list-style-type: none; text-align: center; } footer p { font-size: 1em; margin-bottom: 0.5em; text-align: center; } footer a { color: #fff; text-decoration: none; } footer a:hover { text-decoration: underline; } footer ul { padding: 0; } /* IMAGES ZOOM */ /* Styles pour les images en lightbox (sur clic) */ .voile{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: black; display: none; opacity: 70%; } .lightbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.336); z-index: 9999; display: none; } .lightbox img { display: block; margin: 0 auto; max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }