/* CSS Document */

/* ===================================
   Global Styles
   =================================== */

/* Variables globales */
:root {
    --background-color: #282828;
    --text-color: #EAEAEA;
    --menu-color: #a8d5ba;
    --titre-color: #2e8b57;
	--link-color: #FF4081;
    --font-family-default: 'Roboto', sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;
}

/* Styles de base */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family-default);
    padding: 10px;
    text-align: justify;
    width: 1000px;
	margin: 32px auto;
}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
    background-color: var(--background-color);
    color: var(--titre-color);
    font-family: var(--font-family-heading);
    text-shadow: 1px 1px 2px #2a2a2a;
}

h2, h3 {
	font-size: 24px;
}

main {
	background-color: var(--background-color);
	margin: 0px 2px 0px;
	padding: 0px 10px;
}

header{
	padding: 2px 2px;
}

section {
	background-color: var(--titre-color);
	margin: 20px 0px;
}

p {
	background-color: var(--background-color);
	margin: 2px 0px;
	padding: 2px 0px;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer {
	margin-top: 48px;
}

/* Autres styles globaux (a, p, section, etc.) */

/* ===================================
   Menu Styles (menu.php)
   =================================== */

.menu {
    background-color: var(--menu-color); /* Choisissez la couleur de fond que vous préférez */
    color: #333;
    font-family: 'Arial', sans-serif;
	font-size: 16px;
  	position: fixed;
    top: 0px;
    z-index: 100;
    width: 1000px;
	margin: 0px;
	padding: 0px;
}

.menu > ul {
    padding-left: 0;
    margin: 0;
    display: flex;
    justify-content: space-around; /* Cette propriété répartit les éléments uniformément */
    list-style: none;
}

.menu > ul > li {
	font-weight: bold;
	font-size: 14px;
    position: relative;
}

.menu > ul > li:last-child ul {
    right: 0;
}

.menu li ul {
    display: none;
    position: absolute;
	list-style: none;
    background-color: var(--menu-color); /* Assurez-vous que la couleur de fond correspond à celle du menu principal */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Ajoute un peu d'ombre pour le style */
    top: 100%;
}

.menu li:hover ul {
    display: block;
}

.menu li ul li {
    clear: both;
	list-style: decimal-leading-zero;
}

.menu li a {
    display: block;
    text-decoration: none;
    padding: 10px; /* Augmente la taille du padding pour mieux espacer */
    color: #333;
    white-space: nowrap; /* Assure que le texte du menu ne passe pas à la ligne */
}

.menu li ul li a:hover {
    background-color: var(--titre-color); /* Change la couleur au survol */
}

/* ===================================
   Index Page Styles (index.php)
   =================================== */

/* Image page Index */
.img-background { background-size: cover; } 
.img-background-1 { background-image: url('img/01.png'); }
.img-background-2 { background-image: url('img/02.png'); }
.img-background-3 { background-image: url('img/03.png'); }
.img-background-4 { background-image: url('img/04.png'); }
.img-background-5 { background-image: url('img/05.png'); }
.img-background-6 { background-image: url('img/06.png'); }
.img-background-7 { background-image: url('img/07.png'); }
.img-background-8 { background-image: url('img/08.png'); }

.index {
	padding-left: 16px;
	background-color: var(--background-color);
}


.index a {
	font-weight: bold;
	padding-right: 4px;
}

.titre {
    color: var(--titre-color);
	font-size: 32px;
	text-align: center;
	margin: 2px 2px;
	padding: 10px;
}

.liner {
	background-color: var(--titre-color);
	padding: 1px;
}

/* Pour l'introduction et la conclusion */
.intro-conclusion-grid, .section-grid {
    display: flex;
    gap: 10px;
}

/* Pour les autres sections */
.section-grid {
    grid-template-columns: 74% 25%;
	height: auto;
	margin-right: -6px;
    margin-left: -12px; /* Augmentez cette valeur selon vos préférences */
	padding: 2px;
}

.image-contener, .image-contener-conclusion {
	margin: 2px;
	padding: 4px;
	padding-bottom: 6px; 
	border: dashed;
	border-width: 2px;
	border-color: var(--titre-color);
	height: auto;
	width: auto;
}

.intro-image, .conclusion-image, .section-image {
    display: flex;
    grid-template-columns: 74% 25%;
    padding: 2px 0px; /* Augmentez cette valeur pour créer plus d'espace */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
	width: 200px;
}

.intro-image {
    grid-template-columns: 50% 50%;
	width: 240px;
}

/* ===================================
   Plante Page Styles (plante.php)
   =================================== */

.nom {
    color: var(--link-color);
	font-size: 32px;
	text-align: center;
	margin: 2px 2px;
	padding: 10px;
}

.liner-nom {
	background-color: var(--link-color);
	padding: 1px;
	width: 100%;
	margin: 20px auto;
}

.article-grid {
    display: grid;
    grid-template-columns: 74% 25%;
    gap: 10px;
    align-items: start; /* Ajouté pour aligner le contenu au début */
	margin: 2px 0px;
	padding: 2px;
}

.article-image-contener {
    margin: 2px;
	padding: 4px;
	padding-bottom: 4px;
	border: dashed;
	border-width: 2px;
	border-color: var(--link-color);
    display: flex; /* Ajouté pour étendre le contenu à toute la hauteur */
    align-items: stretch; /* Ajouté pour étirer le contenu */
	min-height: 100%;
}

.article-image {
    margin: 2px; /* Augmentez cette valeur pour créer plus d'espace */	
	padding: 4px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100%;
	width: 100%;
	height: auto;
}

.conclusion {
	background-color: var(--background-color);
	margin: 0px;
	padding:  0px 10px;
}

.back_to_index {
	text-align: center;
	background-color: #202020;
	font-size: 18px;
	padding: 16px 0px;
	margin-bottom: 0px; 
	position: fixed;
    bottom: 0px;
    z-index: 100;
	width: 1000px;
}

/* ===================================
   Media Queries
   =================================== */

@media (max-width: 1024px) {
	/* ===================================
	   Global Styles
	   =================================== */

    body {
		width: auto;
		padding: 0px;
		margin: 44px auto 100px; /* Centrer le contenu sur la page */
	}

	/* ===================================
	   Menu Styles (menu.php)
	   =================================== */

	.menu {
		font-size: 10px;
		position: fixed;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
	}

	/* ===================================
	   Index Page Styles (index.php)
	   =================================== */
	
	.section-grid {
		margin: 10px 0px 0px; /* Augmentez cette valeur selon vos préférences */
	}	

	/* ===================================
	   Plante Page Styles (plante.php)
	   =================================== */

	.article-grid {
		display: grid;
		grid-template-columns: 60% 39%;
		gap: 10px;
		align-items: start; /* Ajouté pour aligner le contenu au début */
		margin: 0px;
		padding: 0px;
	}
	
	.back_to_index {
		font-size: 18px;
		padding: 16px 0px;
		margin-bottom: 0px; 
		position: fixed;
		bottom: 0px;
		z-index: 100;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.menu > ul > li {
		font-size: 8px;
	}
}

@media (max-width: 480px) {
	
	/* ===================================
	   Global Styles
	   =================================== */
	
	body, h1, h2, h3, main, p, .nom, .titre, .back_to_index {
		font-size: 12px;
	}
	
	.menu li a {
    padding: 14px 4px; /* Augmente la taille du padding pour mieux espacer */
}

	/* ===================================
	   Menu Styles (menu.php)
	   =================================== */

	/* ======================================================================
	   Index Page Styles (index.php) et Plante Page Styles (plante.php)
	   ====================================================================== */	
		
	.intro-conclusion-grid, .section-grid {
		display: block;
		gap: 10px;
		margin: 0px;
	}
	
	 .section-grid, .article-grid {
		width: 100%;
		height: auto;
		}	
	
	.image-contener {
		width: auto;
		height: auto;
		padding: 0px; /* Augmentez cette valeur pour créer plus d'espace */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.image-contener-conclusion {
		display: none;
	}
	
	.intro-image, .conclusion-image, .section-image, .article-image  {
		margin: 2px; /* Augmentez cette valeur pour créer plus d'espace */	
		padding: 4px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}	
	
	.intro-image, .conclusion-image, .section-image  {
		width: auto;
		height: 300px;
	}		
	
	.article-image  {
		width: 100%;
		height: auto;
	}
}