* {
    box-sizing: border-box;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
    height: 100%;
	margin: 0;
	padding: 0;
	background-color: #3a3a3a;
	overflow: hidden;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #3a3a3a;
	font-size: 17px;
	letter-spacing : 1.5px;
}
@media (max-width: 768px) {
	body{
		overflow-y:scroll;
	}
}


.Normal{
      font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	  color: #c0c1c6;
	  font-size: 17px;
	  letter-spacing : 1.5px;
}
.DateV{
      font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	  color: #c6c6c5;
	  font-size: 12px;
	  letter-spacing : 1.5px;
}
.Grand{
      font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	  color: #c0c1c6;
	  font-size: 22px;
	  letter-spacing : 2px;
}
.Titre{
      font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	  color: #ffd700;
	  font-size: 30px;
	  letter-spacing : 1.5px;
}
.TitreNews{
      font-family: Roboto-light, sans-serif;
	  color: #606060;
	  font-size: 20px;
	  letter-spacing : 1.5px;
}
.DescNews{
      font-family: Roboto-light, sans-serif;
	  color: #606060;
	  font-size: 16px;
	  letter-spacing : 1.2px;
}
.header {
      padding: 0px;
      text-align: center;
	  width: 100%;
	  margin: 0 auto;
}
.Titre_Article{
      font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	  color: #c0c1c6;
	  font-size: 22px;
	  letter-spacing : 2px;
	  width: 90%;
	  margin: 0 auto;
	  text-align: center;
}


#MainDiv
 {
    width: 100vw;
    height: 100vh;
    background-color: #3a3a3a;
 }
#header
{
    width: 100%;
    display: flex;
    justify-content: center; /* Centrer le contenu horizontalement */
    position: fixed; /* Fixer la position de l'en-tête */
    top: 0; /* Positionner en haut */
    left: 0; /* Positionner à gauche */
    z-index: 1000; /* Assurer que l'en-tête reste au-dessus des autres éléments */
	height: 200px;

}

#header-content 
{
    width: 100%;
    max-width: 1400px; /* Largeur maximale de 1440px */
	height: 200px;
	background-color: #3a3a3a;
    padding: 0px; /* Ajout d'un peu de padding */
    box-sizing: border-box; /* Inclure le padding dans la taille totale */
    display: flex;
    justify-content: space-between; /* Espacer le logo et le menu */
    align-items: center; /* Centrer verticalement */
	background-image: url('/images/header.png'); /* Chemin de l'image */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image dans l'élément */
}
@media (max-width: 900px) {
	#header{
		height: 80px;
	}
	#header-content{
		height: 80px;
	}
}
#fontLogo {
	padding: 0px;
	background-image: url('/images/font-logo.png'); /* Chemin de l'image */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image dans l'élément */
}
#main-content {
    width: 100%;
    max-width: 1440px; /* Assurer que le contenu a la même largeur maximale que l'en-tête */
    margin: 0 auto; /* Centrer horizontalement */
    padding: 20px;
    box-sizing: border-box;
	overflow-y: auto; /* Permettre le défilement vertical */
    height: 100vh; 
}
#main-content::-webkit-scrollbar {
  width: 2px; /* Largeur de la barre de défilement */
}

#main-content::-webkit-scrollbar-thumb {
  background-color: #888; /* Couleur de la poignée de la barre de défilement */
}

#main-content::-webkit-scrollbar-track {
  background-color: #f2f2f2; /* Couleur de la piste de la barre de défilement */
}
#footer
{
    width: 100%;
	height: 40px;
    display: flex;
    justify-content: center; /* Centrer le contenu horizontalement */
    position: fixed; /* Fixer la position de l'en-tête */
    bottom: 0; /* Positionner en haut */
    left: 0; /* Positionner à gauche */
    z-index: 1000; /* Assurer que l'en-tête reste au-dessus des autres éléments */
	
}
#footer-content 
{
    width: 100%;
    max-width: 1440px; /* Largeur maximale de 1440px */
	background-color: #3a3a3a;
    padding: 0px; /* Ajout d'un peu de padding */
    box-sizing: border-box; /* Inclure le padding dans la taille totale */
	color: #fff;
	padding-top: 10px;
	
}

.logo img 
{
    max-height: 185px; /* Hauteur maximale de l'image du logo */
	padding-left: 20px;
}

.menu a {
    text-decoration: none;
	padding-left: 10px;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #606060;
	font-size: 20px;
	letter-spacing : 1.5px;
}

.menu a:hover {
    color: #c0c1c6;
}

.leftDiv a {
    text-decoration: none;
	margin-left: 25px;
	line-height: 30px;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #606060;
	font-size: 18px;
	letter-spacing : 1.5px;
}

.leftDiv a:hover {
    color: #c0c1c6;
}


#menuToggle {
    display: none !important;
    cursor: pointer;
    padding: 0px;
    background-color: #fefbef;
    color: #525150;
    border: none;
	height : 40px;
	width : 40px;
	font-size: 25px;
}	
#menuToggleDiv {
    display: none !important;
    cursor: pointer;
    background-color: #ffffff;
    color: #525150;
    border: none;
	height : 40px;
	width : 40px;
	font-size: 25px;
}

#leftDiv {
	display: none !important;
	box-sizing: border-box;
}
#leftDiv::-webkit-scrollbar {
	width: 2px; /* Largeur de la barre de défilement */
}

#leftDiv::-webkit-scrollbar-thumb {
	background-color: #888; /* Couleur de la poignée de la barre de défilement */
}

#leftDiv::-webkit-scrollbar-track {
	background-color: #f2f2f2; /* Couleur de la piste de la barre de défilement */
}

@media (max-width: 768px) {
	#menuToggle {
        display: block !important;
	}
	#menuToggleDiv {
        display: block !important;
    }
	#menu{
        display: none !important;
    }
	.logo img 
	{
		max-height: 75px; /* Hauteur maximale de l'image du logo */
		padding-left: 5px;
	}
	#leftDiv {
		display: block !important;
		box-sizing: border-box;
		padding-top: 0px;
		width: 100vh; /* Largeur totale sur les petits écrans */
		max-width: 250px;
		height : 100vh;
		transform: translateX(-100%); /* Initialement masquée */
		position: fixed;  /* Assure que #rightDiv reste au-dessus */
		top: 0;
		left: 0;
		transition: transform 0.3s ease; /* Transition fluide */
		overflow: auto;
		background-color: #fffefb;
		z-index: 100;
		overflow-y:scroll;
	}		  
	#leftDiv.visible {
		transform: translateX(0); /* Glisse depuis la gauche */
	}
}

:root {
  --gold: #FEDB37;
  --light-shadow: #77571d;
  --dark-shadow: #3e2904;
}
.main-top {
  background: #3a3a3a;
  display: grid;
  grid-template-areas: 'overlap';
  place-content: center;
}
.main-top > div {
  background-clip: text;  
  -webkit-background-clip: text;
  color: #FEDB37;
  font-family: "Delicious Handrawn", cursive;
  font-weight: 100;
  font-style: normal;
  font-size: clamp( 3em, 6vw, 5rem);
  grid-area: overlap;
  letter-spacing: 1px;
  -webkit-text-stroke: 8px transparent;
}
div.bg {
  background-image: repeating-linear-gradient( 105deg, 
    var(--gold) 0% , 
    var(--dark-shadow) 5%,
    var(--gold) 10%);
  color: transparent;
  filter: drop-shadow(5px 15px 15px black);
  transform: scaleY(1.05);
  transform-origin: top;
}
div.fg{
  background-image: repeating-linear-gradient( 5deg,  
    var(--gold) 0% , 
    var(--light-shadow) 23%, 
    var(--gold) 31%);
  color: #1e2127;
  transform: scale(1);
}

#main-box {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si l'espace est insuffisant */
    justify-content: space-between; /* Espacement égal entre les divs */
	margin-top: 20px;
}

#main-infobox {
    flex: 1 1 30%; 
    margin: 10px; 
    box-sizing: border-box; 
    padding: 20px; 
    background-color: #303030; 
    box-sizing: border-box; 
    text-align: center; 
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #fff;
	letter-spacing : 4px;
	font-size: 20px;
	border: 0.5px solid #ffffff; 
}

/* Supprimer la marge gauche de la première div */
#main-infobox:first-child {
    margin-left: 0;
}

/* Supprimer la marge droite de la troisième div */
#main-infobox:nth-child(3) {
    margin-right: 0;
}
#main-infobox img {
    width: 100%; /* Respecter la largeur de la box */
    height: auto; /* Maintenir les proportions de l'image */
    display: block; /* Supprimer l'espace sous l'image */
    box-sizing: border-box; /* Inclure la bordure dans la taille totale */
	padding-bottom: 20px;
}

        /* Media query pour les petits écrans */
@media (max-width: 768px) {
    #main-box {
        flex-direction: column; /* Empiler les divs verticalement */
    }

    #main-infobox {
        width: 100%; /* Prendre toute la largeur de l'écran */
        margin: 10px 0; /* Ajuster les marges pour les divs empilées */
    }
}
#panoCont{	
	width: 100%;
    max-width: 1440px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    background-clip: padding-box;
    padding: 3px;
	box-shadow: 0 0 4px 2px rgba(255, 223, 0, 0.5);
	margin-top: 20px;
}

#panorama {
  
    background-color: #303030; 
	width: 100%; max-width: 1400px; height: 400px; margin: 0 auto; 

}


#main10{
	width: 100%;
    max-width: 1440px;
	margin-top: 20px;
}


#main2{
	width: 100%;
    max-width: 1440px;
	display: flex;
    justify-content: center;
	text-decoration: none;
	  font-family: "Delicious Handrawn", cursive;
	  font-weight: 300;
	  font-style: normal;
	color: #FEDB37;
	font-size: 30px;
	letter-spacing : 1.5px;
	padding: 20px;
	background-color: #303030;
}
        #main3 {
			width: 100%;
			max-width: 1440px;
            display: flex;
            align-items: center; /* Aligner les éléments verticalement au centre */
            text-decoration: none;
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
            color: #adadad;
            font-size: 18px;
            letter-spacing: 1.5px;
            padding: 16px;
            background-color: #303030;
        }

        #main3 img {
            max-width: 500px; /* Largeur maximale de l'image */
			width: 100%;
            height: auto; /* Maintenir les proportions de l'image */
            margin-right: 16px; /* Espacement entre l'image et le texte */
			float:left;
        }
		

        /* Media query pour les petits écrans */
        @media (max-width: 768px) {
            #main3 {
                flex-direction: column; /* Empiler les éléments verticalement */
                align-items: flex-start; /* Aligner les éléments au début */
            }

            #main3 img {
                margin-right: 0; /* Supprimer l'espacement à droite de l'image */
                margin-bottom: 16px; /* Ajouter un espacement en dessous de l'image */
				
            }
        }
#main5{
	width: 100%;
    max-width: 1440px;
	display: flex;
    justify-content: center;
	text-decoration: none;
	  font-family: "Delicious Handrawn", cursive;
  font-weight: 300;
  font-style: normal;
	color: #FEDB37;
	font-size: 30px;
	letter-spacing : 1.5px;
	padding: 20px;
	background-color: #303030;
}
		#main4 {
			width: 100%;
			max-width: 1440px;
            display: flex;
            align-items: center; /* Aligner les éléments verticalement au centre */
            text-decoration: none;
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
            color: #adadad;
            font-size: 18px;
            letter-spacing: 1.5px;
            padding: 16px;
            background-color: #303030;
			vertical-align: top;
        }

        #main4 img {
            max-width: 500px; /* Largeur maximale de l'image */
			width: 100%;
            height: auto; /* Maintenir les proportions de l'image */
            margin-left: 16px; /* Espacement entre l'image et le texte */
			float:right;
        }
		

        /* Media query pour les petits écrans */
        @media (max-width: 768px) {
            #main4 {
                flex-direction: column-reverse; /* Empiler les éléments verticalement avec l'image en bas */
                align-items: flex-start; /* Aligner les éléments au début */
            }

            #main4 img {
                margin-left: 0; /* Supprimer l'espacement à gauche de l'image */
                margin-bottom: 16px; /* Ajouter un espacement en dessous de l'image */
				float:none;
            }
        }
		
/* Container général */
#boxnews {
	display: flex;
	flex-wrap: wrap; /* Pour permettre aux éléments de passer à la ligne en responsive */
	justify-content: flex-start; /* Aligne les éléments à gauche */
	width: 100%;
	box-sizing: border-box;
	
}

/* Style pour chaque div */
#boxnews .box {
  flex: 1 1 30%; /* Prend 30% de la largeur et permet de s'ajuster */
  margin: 10px; /* Marge entre les éléments */
  min-width: 350px; /* Largeur minimale pour que les éléments ne deviennent pas trop petits */
  max-width: 440px;
  height: 500px;
  max-height: 500px;
  box-sizing: border-box; /* Inclut les marges et les bordures dans la largeur totale */
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  overflow: hidden;
  
}

#boxnews .box img {
    width: 75%; /* Respecter la largeur de la box */
    height: auto; /* Maintenir les proportions de l'image */
    display: block; /* Supprimer l'espace sous l'image */
    box-sizing: border-box; /* Inclure la bordure dans la taille totale */
	padding-bottom: 20px;
}

/* Responsive */
@media (max-width: 800px) {
  #boxnews .box {
    flex: 1 1 100%; /* Prend 45% de la largeur pour deux colonnes */
	min-width: 100%; /* Largeur minimale pour que les éléments ne deviennent pas trop petits */
	max-width: 100%;
	width: 100%;
	margin: 0px;
	margin-top: 20px;
  }
}

@media (max-width: 500px) {
  #boxnews .box {
    flex: 1 1 100%; /* Prend 100% de la largeur pour une colonne */
	min-width: 100%; /* Largeur minimale pour que les éléments ne deviennent pas trop petits */
	max-width: 100%;
	width: 100%;
	margin: 0px;
	margin-top: 20px;
  }
}

#newsTitre{
	width: 100%;
	background-color: #fff;
	padding: 20px;
	text-align: center;
	font-family: Roboto-light, sans-serif;
	color: #606060;
	font-size: 20px;
	letter-spacing : 2px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
#containerNewsDesc {
    display: flex;
    flex-wrap: wrap;
	width: 100%;
	padding-top: 20px;
    margin: 0 auto;
	
}

#descNews1, #descNews2 {
    padding: 20px;
    box-sizing: border-box;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	
}

#descNews1 {
    width: 550px;
    background-color: #fff;
	margin-right: 20px;
	
}
#descNews1 img {
    width: 100%; /* Respecter la largeur de la box */
    height: auto; /* Maintenir les proportions de l'image */
    display: block; /* Supprimer l'espace sous l'image */
    box-sizing: border-box; /* Inclure la bordure dans la taille totale */
	padding-bottom: 20px;
	
}

#descNews2 {
    flex: 1;
    background-color: #fff;
	font-family: Roboto-light, sans-serif;
	color: #606060;
	font-size: 16px;
	letter-spacing : 1.2px;
}

@media (max-width: 600px) {
    #descNews1, #descNews2 {
        width: 100%;
		margin-right: 0px;
    }
	#descNews2 {
		margin-top: 20px;
    }
}
#newsTexte{
	width: 100%;
	background-color: #fff;
	margin-top: 20px;
	padding: 30px;
	font-family: Roboto-light, sans-serif;
	color: #606060;
	font-size: 16px;
	letter-spacing : 2px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}


     .calendar {
        width: 100%;
        max-width: 600px;
        display: grid;
        padding: 15px;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        margin: 0 auto;
        background-color: #303030;
        font-family: Roboto-light, sans-serif;
        color: #fff;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        position: relative;
    }
    .day {
        position: relative;
        padding: 10px;
        border: 1px solid #ccc;
        height: 100px;
        box-sizing: border-box;
        cursor: pointer;
        font-family: Roboto-light, sans-serif;
        color: #fff;
    }
    @media (max-width: 800px) {
        .day {
            height: 50px;
            padding: 0px;
        }
    }
    .event-multiple {
        width: 100%;
        height: 10px;
        background-color: red;
        position: absolute;
        bottom: 5px;
        left: 0;
    }
    .event-single {
        width: 10px;
        height: 10px;
        background-color: orange;
        border-radius: 50%;
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .tooltip {
        display: none;
		width: 150px;
		max-width: 150px;
		height: 175px;
		max-height: 175px;
        position: absolute;
        background-color: white;
        border: 1px solid #606060;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        z-index: 10;
        white-space: nowrap;
		font-family: Roboto-light, sans-serif;
		color: #606060;
		font-size: 14px;
    }
	.tooltip img {
		width: 75px;
		max-width: 75px;
	}
    .nav {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
		margin-top: 20px;
        margin-bottom: 20px;
		color: #fff;
    }
    .nav a {
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        border: 1px solid #ccc;
        background-color: #606060;
        border-radius: 5px;
    }
    .nav a:hover {
        background-color: #e9e9e9;
    }

        .button-wrapper {
            display: inline-block;
            padding: 3px;
            background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
            background-clip: padding-box;
            border-radius: .375rem;
        }

        .button-80 {
            background: #303030;
            backface-visibility: hidden;
            border-radius: .375rem;
            border: none;
            box-sizing: border-box;
            color: #adadad;
            cursor: pointer;
            display: inline-block;
            font-family: Circular,Helvetica,sans-serif;
            font-size: 1.125rem;
            font-weight: 700;
            letter-spacing: -.01em;
            line-height: 1.3;
            padding: .875rem 1.125rem;
            position: relative;
            text-align: left;
            text-decoration: none;
            transform: translateZ(0) scale(1);
            transition: transform .2s;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
			border: 0.5px solid #ffffff;
        }

        .button-80:not(:disabled):hover {
            transform: scale(1.05);
        }

        .button-80:not(:disabled):hover:active {
            transform: scale(1.05) translateY(.125rem);
        }

        .button-80:focus {
            outline: 0 solid transparent;
        }

        .button-80:focus:before {
            content: "";
            left: calc(-1*.375rem);
            pointer-events: none;
            position: absolute;
            top: calc(-1*.375rem);
            transition: border-radius;
            user-select: none;
        }

        .button-80:focus:not(:focus-visible) {
            outline: 0 solid transparent;
        }

        .button-80:focus:not(:focus-visible):before {
            border-width: 0;
        }

        .button-80:not(:disabled):active {
            transform: translateY(.125rem) !important;
        }

#reseaux-box {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si l'espace est insuffisant */
    justify-content: space-between; /* Espacement égal entre les divs */
}

#reseaux-infobox {
    flex: 1 1 30%; 
    margin: 10px; 
    box-sizing: border-box; 
    padding: 20px; 
    box-sizing: border-box; 
    text-align: center; 
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #fff;
	letter-spacing : 4px;
	font-size: 20px;
}


/* Supprimer la marge gauche de la première div */
#reseaux-infobox:first-child {
    margin-left: 0;
}

/* Supprimer la marge droite de la troisième div */
#reseaux-infobox:nth-child(3) {
    margin-right: 0;
}


@media (max-width: 768px) {
    #reseaux-box {
        flex-direction: column; /* Empiler les divs verticalement */
    }

    #reseaux-infobox {
        width: 100%; /* Prendre toute la largeur de l'écran */
        margin: 0 auto; /* Ajuster les marges pour les divs empilées */
		margin-top: 20px;
		text-align: center;
		
    }
}
#contactTitre{
	width: 100%;
	background-color: #303030;
	padding: 20px;
	text-align: center;
	font-family: Roboto-light, sans-serif;
	color: #fff;
	font-size: 20px;
	letter-spacing : 2px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
        #containerBoxContact {
            display: flex;
            flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
            gap: 20px; /* Espace entre les divs */
            max-width: 1440px;
            margin: 0 auto; /* Centre la conteneur horizontalement */
			margin-top: 20px;
        }
        #boxContact {
            flex: 1;
            min-width: calc(50% - 10px); /* Assurer que chaque box prend 50% moins la moitié de l'espace entre les divs */
            box-sizing: border-box;
            padding: 20px;
            background-color: #303030;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
			font-family: Roboto-light, sans-serif;
			color: #fff;
			font-size: 18px;
        }

        @media (max-width: 768px) {
            #boxContact {
                min-width: 100%; /* Prend toute la largeur de la conteneur sur petits écrans */
            }
        }
		
		#google {
			width: 100%;
			max-width: 650px;
			height: 450px;
		}