@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

 /* variables*/
:root{
    --white: #f9f9f9;
    --black: #36383F;
    --gray: #85888C;
	--grisclair: #969696;
	--red: red;
	--noirherm: #2f312e; /* 47/49/46 */
	--jauneherm: #fee87b; /* 254/232/123 */
}
/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: var(--black);
	background: var(--noirherm) url(images/fond.png); margin-top: 0px; margin-right: 0px; margin-left: 0px;
	width : 100%;
			max-width: 1700px;
			margin-left:auto;
			margin-right:auto;
	height: 100%;
    font-family: "Poppins", sans-serif;
	/*min-width: 600px;*/
}

p, h1, label, font { 
	font-family: "Poppins", sans-serif;
}
a{
    text-decoration: none;
}
a.z1  { 
	color: var(--gray); text-decoration: none;
}
a.z1:hover  { 
	color: var(--red); text-decoration: none;
}
a.group1  { 
	color: #2f7107; text-decoration: none;
}
a.group1:hover  { 
	color: red; text-decoration: none;
}
ul{
    list-style: none; 
}
.header{
    background-color: var(--noirherm);
	background-image: url("images/fondb.png");
	background-repeat: repeat;
	/* le 11/10/2025 
    box-shadow: 1px 1px 5px 0px var(--black);*/
    position: sticky;
	top: 0;
	height: 120px;
	/* le 11/10/2025 */
    width: 100%;
	z-index: 20000;
}
*.logo{
    display: inline-block;
	background-color: transparent;
	width: 200px;
	height: 120px;
	z-index: 1;
	margin-left: 0px;
	padding : 10px 10px;
    color: transparent;
	font-family: sans-serif;
	font-weight: bold;
    font-size: 10px;
}
#entete{
	position: absolute;
	background: transparent;
	background-image: url("images/entete.png");
	background-size: contain;
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	height: 100px;
	width: 500px;
	padding: 7px 0px 0px 0px;
	/*display: flex;
	align-items: center;
	justify-content: center;*/
	color: var(--white);
	font-family: "Trebuchet MS", Arial, Verdana;
	/*font-weight: bold;*/
	padding: 20px 160px;
	font-size: 20px;
	text-shadow: 1px 1px 2px black, 0 0 0.1em var(--white), 0 0 0.1em var(--white);	
	z-index: 2;
}
#contenu
{
	/* le 11/10/2025 */
    width: 100%;
	height: 100%;
	padding: 20px 10px 0px 10px ;
	text-align: justify;
}
article
{
	/* le 11/10/2025 */
    width: 100%;
	height: 100%;
	background-color: var(--noirherm);
	min-height: 100vh;
	/*background-image: url("images/fondimg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;*/
}
#ltortues
{
	font-size: 8px;
}

/* ********** Menu ********** */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 6px 20px;
    z-index: 1000;
}

.burger-toggle {
    display: none;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-item a {
    color: white;
    text-decoration: none;
    padding: 6px 20px;
    display: block;
}

@media (min-width: 1300px) {
	.nav-item a {
		padding: 10px 50px; 
	}
}

@media (min-width: 1600px) {
	.nav-item a {
		padding: 10px 70px; 
	}
}

.nav-item a:hover {
    background-color: #575757;
}

.dropdown {
    display: none;
    position: absolute;
    background-color: #333;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    left: 0;
}

.dropdown li {
    width: 100%;
}

.dropdown li a {
    padding: 6px 20px;
    color: var(--grisclair);
	tab-size: 5;
	text-align: left;
    text-decoration: none;
    display: block;
}

.dropdown li a:hover {
    background-color: #555;
}

.nav-item:hover .dropdown {
    display: block;
}

.burger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
}

.burger .line {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px;
    transition: all 0.3s ease;
}

.burger-toggle:checked + .burger .line1 {
    transform: rotate(45deg) translate(10px, 10px);
}

.burger-toggle:checked + .burger .line2 {
    opacity: 0;
}

.burger-toggle:checked + .burger .line3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 790px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        height: calc(100vh - 50px);
        position: fixed;
        top: 160px;
        left: 0;
        background-color: #333;
        z-index: 999;
        overflow-y: auto;
    }

    .burger-toggle:checked ~ .nav-links {
        display: flex;
    }

    .nav-item {
        width: 100%;
    }

    .burger {
        display: flex;
    }

    .dropdown {
        position: static;
        background-color: #444;
    }

    .dropdown li a {
        padding-left: 40px;
    }
}
/* ********** Fin Menu ********** */



/* ********** Images ********** */
* {
	box-sizing: border-box;
}
.desc {
	text-align: center;
  	font-family: "Poppins", sans-serif;
	font-size: 12px;
	color: var(--gray);
}
.responsive {
	float: left;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* ********** Fin Images********** */
.containerhome {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
	width: 100%;
	text-align: justify;
}
.containercontact {
	border-radius: 5px;
	background-color: white;
	padding: 20px;
	max-width: 800px;
}
.vertical-center{
	margin: 0 auto;
	top: 50%;
	vertical-align: middle;
	width: 300px;
	height: 300px;
}
td {
  padding-right: 5px;
  padding-left: 5px;
}
footer
{
	bottom: 0;
	background: var(--noirherm);
	width : 100%;
	padding: 10px;
	font-size: 90%;
	color: var(--white);
}

/* Responsiveness */
/* @media(min-width: 768px) and (max-width: 1388px) */
/* @media(max-width: 767px) */
/* Entrez ici vos propriétés CSS lorsque l'utilisateur est sur smartphone */
#global
{
    width : 100%;
    margin : auto ;
    padding : 0px ;
    background : var(--white) ;
}

/* Entrez ici vos propriétés CSS lorsque l'utilisateur est sur tablette */
@media (min-width: 480px) {
	#entete{
		height: 100px;
		width: 500px;
		font-size: 20px;
	}
#ltortues{
		font-size: 8px;
	)
}

/* Entrez ici vos propriétés CSS lorsque l'utilisateur est sur tablette */
@media (min-width: 600px) {
	#entete{
		width: 550px;
		font-size: 20px;
	}
	#ltortues{
		font-size: 10px;
	)
}

@media (min-width: 790px) {
	#entete{
		width: 1000px;
		font-size: 30px;
	}
	#ltortues{
		font-size: 12px;
	)
}

/* Entrez ici vos propriétés CSS lorsque l'utilisateur est sur grande tablette*/
@media (min-width: 1029px) {
	#entete{
		height: 120px;
		width: 1000px;
		font-size: 32px;	
	}
	#ltortues{
		font-size: 14px;
	)
}

/* Entrez ici vos propriétés CSS lorsque l'utilisateur est sur ecran */
@media (min-width: 1388px) {
	#global
	{
		width :90% ;
	}
	#entete{
		height: 120px;
		width: 1150px;
		font-size: 40px;
	}
	#ltortues{
		font-size: 16px;
	)
	footer{
		font-size: 100%;
	}
}