body {
            height: 100vh;
            margin: 0;
            background-color: #FEC3AC;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
        }

        #general {
            width: 78%; 
            height: 100%; /* Ajusté pour laisser de la place au header */
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqnXEdTiWhU_8VVRzRrAO3yhbkCCm09tv4cV524hAN3Ud7SRByZCaaRtKKDQ6Vbd2UtOZJZ8pM63MjuK0p01lBzKCiJVeTytWqEp8Wv8b90snC51Vg_JvuAcOLHbjNF0QYdXkNqzYrEOZEgk-tqwNxtvsV63Pnb2qSSOf6f4kq5c0csokEpTc0jkA/s600/TheBeach.png);
            background-position: 0% 40%; 
            background-size: 50% 80%;
            display: flex;
            flex-direction: column;
            position: absolute;
            padding-bottom: 2.5vmax; /* Espacement pour le footer */
        }

        #calque {
            background-color: rgba(255, 255, 255, 0.6);
            width: 100%;
            height: 150%;
            position: relative;
            top: 0vh; /* Ajusté pour laisser de la place au header */
        }

        /* Style pour le cadre d'entête */
        #header {
            width: 63.45vw;
            height: 5.8vmax;
            color: #D48ADF;
            background-color: rgba(28, 28, 28, 0.9);
            border-radius: 6px;
            z-index: 2;
            text-align: center;
            position: absolute;
            top: 1vh;
            left: 6.5vw;
            display: flex;
            justify-content: center;
            align-items: center;
			padding: 2vh;
        }

        #header-content {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 2vmax;
            color: #D48ADF;
        }

        #header-title {
            color: white;
            font-family: Algerian;
            font-size: 3.5vmax;
            letter-spacing: 3px;
        }

        #header-subtitle {
            color: white;
            font-family: Algerian;
            font-size: 1.5vmax;
            letter-spacing: 3px;
        }

        /* Style pour le cadre de pied */
        #footer {
            width: 63.45vw;
            height: 2.5vmax;
            text-align: center;
            color: black;
            font-size: 1.2vmax;
            background-color: #CBBEBE;
            font-family: Comic Sans MS;
            letter-spacing: 2px;
            position: fixed;
            bottom: 0;
            left: 18.5vw;
            margin: 0 auto;
            border-radius: 6px;
            z-index: 2;
        }

        #footer-content {
            margin-top: 0.5%;
            margin-bottom: 1.5%;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 2vmax;
        }

        /* Cadre de contenu principal */
        .main-content {
            padding: 0;
            width: 59%;
            height: 75vh; /* Ajusté pour s'adapter au header fixe */
            background-color: rgba(126, 11, 51, 0.7);
            border-radius: 10px 100px / 120px;
            text-align: center;
            overflow: hidden;
            z-index: 3;
            margin-top: 18vh;
			margin-left: 0vw;
            position: relative;
        }
		
		/* Cadre de contenu principal */
        .nav-content {
            padding: 0;
            width: 39%;
            height: 75vh; /* Ajusté pour s'adapter au header fixe */
            background-color: rgba(126, 11, 51, 0.7);
            border-radius: 10px 100px / 120px;
            text-align: center;
            overflow: hidden;
            z-index: 3;
            margin-top: -75vh;
			right: 0vw;
            position: absolute;
			overflow: hidden;
        }
		.nav-content a {
			text-decoration: none;
			}

        /* Commentaires */
        .comment-section {
            margin-top: 1.2vh;
            margin-left: auto;
            margin-right: auto;
            width: 84%;
            color: black;
            font-size: 1.2vmax;
            background-color: rgba(126, 11, 51, 0.7);
            font-family: Comic Sans MS;
            letter-spacing: 10px;
            border-radius: 2vh;
            overflow: hidden;
            z-index: 4;
            position: relative;
        }

        /* Liens du bas de la page */
        .footer-link {
            width: 25%;
            color: #DCB253;
            font-family: "times", "times new roman", serif;
            letter-spacing: 2px;
            display: inline-block;
            text-align: center;
        }

        .footer-link a {
            color: #DCB253;
            text-decoration: none;
            font-size: 2.5vh;
        }

        .footer-link a:hover {
            color: #e9ce92;
        }

        /* Style du contenu principal */
        .content {
            margin-top: 5%;
            width: 96%;
            height: 55vh;
            overflow: auto;
            z-index: 3;
			box-sizing: border-box;
			padding: 0 1vw;
        }

        .content span {
            color: white;
            font-family: Blackadder ITC;
            font-size: 3vh;
            letter-spacing: 2px;
            line-height: 5vh;
            text-align: left;
        }

        .content span.title {
            font-size: 5vh;
        }

        .construction {
            color: red;
            font-family: Ink Free;
            font-size: 6.5vh;
            letter-spacing: 2px;
        }

        /* Style pour les listes déroulantes */
        .dropdown {
            display: block;
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
            text-align: center;
			width:48%;
			top: -2vh;
			margin-top: -2vh;
        }

        .dropdown-item {
            padding: 8px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        .dropdown-item:hover {
            background-color: #f0f0f0;
        }

        .toggle-div {
            display: none;
            margin-top: 10px;
            text-align: center;
			border: 1px solid lime;
        }
		.navboxbehind {
    top: 5%
            margin-top: 0%;
            width: 96%;
            height: 98%;
            overflow: auto;
            z-index: 1;
			text-align: center;
			position: absolute;
			display: block;
	        overflow: hidden;
}
.navboxbehind a {
	        color: #DCB253;
            font-family: "times", "times new roman", serif;
			font-size: 2.5vh;
}	
.contentnav a {
	color: blue;
            font-family: "times", "times new roman", serif;
			font-size: 2.5vh;
	}
.conteneurnav {
    position: relative; /* ou absolute/fixed selon votre mise en page */
    z-index: 10;
	top: 10%
}
		       /* Style du contenu principal */
        .contentnav {
		    top: 5%
            margin-top: 0%;
            width: 96%;
            height: 98%;
            overflow: auto;
            z-index: 3;
			text-align: center;
			position: absolute;
			display: block;
			 overflow: hidden;
        }
		.relative {
		position: relative;
		width:100%;
		height: 100%;
		 overflow: hidden;
		 top:4%;
		}
.navbox {
    width: 80%;  /* Largeur de 80% pour les divs parent */
    margin: 0 auto; /* Centrage horizontal */
}

.comm {
    height: 25%; /* Hauteur de 25% pour la div .comm */
}

.share {
    height: 35%; /* Hauteur de 35% pour la div .share */
}

.copy {
    height: 45%; /* Hauteur de 40% pour la div .copy */
}

.comm1 {
    height: 25%; /* Hauteur de 25% pour la div .comm */
}

.share1 {
    height: 35%; /* Hauteur de 35% pour la div .share */
}

.copy1 {
    height: 45%; /* Hauteur de 40% pour la div .copy */
}

.inner-box {
    width: 100%; /* Largeur de 100% pour les divs enfants */
}

.small {
    height: 48px; /* 10vh de hauteur pour les deux premières divs */
	color: white;
            font-family: Algerian;
            font-size: 1.6vmax;
            letter-spacing: 2px;
	text-align: center;
	transition: opacity 0.5s ease;
		opacity: 1;
}
.small1 {
    height: 48px; /* 10vh de hauteur pour les deux premières divs */
	color: white;
            font-family: Algerian;
            font-size: 1.6vmax;
            letter-spacing: 2px;
	text-align: center;
		transition: opacity 0.5s ease;
	opacity: 1;
}
.small1:hover {
    opacity: 0;
}
.large {
    height: calc(100% - 48px);
	text-align: center;
}

/* Classe pour ajouter une bordure noire de 1 pixel */
.cadre {
	text-align: center;
}
.up {
	top: -5%;
	}
	/* Cadre de contenu principal */
        .comcom {
            padding: 2vh;
            width: 44%;
            height: 70vh; /* Ajusté pour s'adapter au header fixe */
            background-color: rgba(126, 11, 51, 1);
            border-radius: 10px 100px / 120px;
            text-align: center;
            overflow: hidden;
            z-index: 3;
            margin-top: 18vh;
			margin-left: -31vw;
            position: fixed;
			display: none;
			color: white;
            font-family: Blackadder ITC;
            font-size: 3vh;
            letter-spacing: 2px;
            line-height: 5vh;
            text-align: center;
        }