/*--------------------FONTS--------------------*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Cinzel+Decorative&family=Flavors&family=Freckle+Face&family=Macondo&family=Square+Peg&family=Zen+Loop&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kablammo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tsukimi+Rounded:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Autour+One&family=Handlee&family=Poiret+One&family=Shadows+Into+Light&family=Viga&display=swap');
/*--------------------FIN-FONTS--------------------*/

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
    font-size: 62.5%;
    font-size: 10px;
    cursor: url(images/animals-bumblebee-cursor.png) 0 0, default !important;
}

.cursor {
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 250px;
}

body,
head {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

html:-webkit-any-link {
    cursor: url(images/animals-bumblebee-pointer.png) 0 0, pointer !important;
    color: -webkit-link;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.p {
    margin-bottom: 2em;
}

/*--------------------SCROLLBAR--------------------*/
html::-webkit-scrollbar {
    width: 0; /* Set the width to 0 to hide the scrollbar */
}

/* Styles pour la piste de la barre de défilement */
html::-webkit-scrollbar-track {
    background-color: transparent; /* Couleur de fond */
}

/*--------------------FIN-SCROLLBAR--------------------*/ 

/*--------------------Barre de recherche--------------------*/
.nav .search-container {
    float: left;
    transition: width 0.3s ease-in-out;
    border: none;
  }
  
  .nav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    background-color: #ffffff33;
    border-radius: 8px;
    -moz-border-radius: 8px;
    width: 150px;
  }
  
  .nav .search-container button:hover {
    background: #cccccc00;
  }
  
  @media screen and (max-width: 600px) {
    .nav .search-container {
      float: none;
    }
    .nav a, .nav input[type=text], .nav .search-container button {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .nav input[type=text] {
      border: 1px solid #cccccc00;  
    }
  }

  .nav div.searchicon {
    float:left;
    margin-top: 20px;
    margin-left: 10px;
    padding: 0;
}

/*--------------------Navbar section--------------------*/
.nav {
    width: 100%;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
    box-shadow: none;
    z-index: 1000;
}

.nav div.logopng {
    float:left;
    margin-top: 10px;
    margin-left: 20px;
    padding: 0;
}

.nav div.logo {
    float: left;
    width: auto;
    height: auto;
    padding-left: 3rem;
    font-weight: 800; /* gras */
    text-shadow: 2px 2px #2223245b;
    margin-left: 70px;
    font-family: 'Shadows Into Light', sans-serif;
}

.nav div.logo a {
    text-decoration: none;
    color: #ffffff;
    font-size: 2.5rem;
}

.nav div.logo a:hover {
    color: #ffeaa7;
}

.nav div.main_list {
    height: 65px;
    float: right;
    font-weight: 1000;
    font-family: 'Amatic SC', cursive;
    text-shadow: 1px 1px #2223245b;
}

.nav div.main_list ul {
    flex-direction: row;
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-inline: 15px;
}

.nav div.main_list ul li a {
    text-decoration: none;
    color: #ffffff;
    line-height: 65px;
    font-size: 2rem;
}

.nav div.main_list ul li a:hover {
    color: #fdca23;
}

/*-----------------------////------------------------//
/* stroke */
.nav div.main_list ul li a,
.nav div.main_list ul li a {
  position: relative;
}
.nav div.main_list ul li a:after,
.nav div.main_list ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
.nav div.main_list ul li a:hover:after {
  width: 100%;
}

.nav div.main_list ul li a {
  transition: all 1s;
}

.nav div.main_list ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
.nav div.main_list ul li a:hover {
  color: #ffeaa7;
  z-index: 1;
}
.nav div.main_list ul li a:hover:after {
  z-index: -10;
  animation: fill 2s forwards;
  -webkit-animation: fill 2s forwards;
  -moz-animation: fill 2s forwards;
  opacity: 1;
}
  
/* Keyframes */
@keyframes fill {
    0% {
      width: 0%;
      height: 1px;
    }
    50% {
      width: 100%;
      height: 1px;
    }
    100% {
      width: 100%;
      height: 1px;
      background: #ffffff00;
    }
  }
/*--------------------FIN-SEARCHBAR--------------------*/

.DevisCommunes {
    width: 100%; /* Ajustez la largeur selon vos besoins */
    margin: 0 auto; /* Cela centre la div horizontalement en utilisant une marge automatique à gauche et à droite */
    text-align: center; /* Cela centre le contenu à l'intérieur de la div */
}

.DevisBtn {
	box-shadow: 4px 7px 10px -6px #6e4404;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:20px;
	padding:14px 14px;
	text-decoration:none;
}
.DevisBtn:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.DevisBtn:active {
	position:relative;
	top:1px;
}

/*--------------------BOUTON-SOUTENIR--------------------*/
.btn{
font-family: 'Tsukimi Rounded', sans-serif;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #FFFFFF;
font-family: Trebuchet MS;
font-size: 15px;
font-weight: 500;
padding: 8px;
background-color: #303030;
-webkit-box-shadow: 2px 2px 5px 0 #000000;
-moz-box-shadow: 2px 2px 5px 0 #000000;
box-shadow: 2px 2px 5px 0 #000000;
border: solid #000000 0;
text-decoration: none;


text-align: center;
margin-top: 6px;
transition: transform 0.5s ease;
}

.btn:hover {
    background: #545454;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-decoration: none;
    transform: scale(1.1);
    transition: transform 0.1s ease;
}

/*--------------------FIN-BOUTON--------------------*/


.btn01 {
    font-family: 'Tsukimi Rounded', sans-serif;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: Trebuchet MS;
    font-size: 15px;
    font-weight: 500;
    padding: 8px;
    background-color: #303030;
    -webkit-box-shadow: 2px 2px 5px 0 #000000;
    -moz-box-shadow: 2px 2px 5px 0 #000000;
    box-shadow: 2px 2px 5px 0 #000000;
    border: solid #000000 0;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin-top: 6px;
    transition: transform 0.5s ease;
}

.btn01:hover {
    background: #545454;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-decoration: none;
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.home.show {
    opacity: 1;
}

.btn01.show {
    display: block;
    opacity: 1;
    transition-delay: 1s;
}


/*--------------------Home section--------------------*/

.home {
    width: 100vw;
    height: 100vh;
    background-image: url(images/background.webp);
    background-position: center top;
	background-size:cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    justify-content: center;
}

.home .btn {
    align-self: flex-end;
}

.navTrigger {
    display: none;
}

.nav {
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.titre {
    padding-inline: 15% 15%;
    padding-block: 0 0;
	text-align: justify;
	font-size: 100px;
    font-weight: 500;
    font-family: 'Handlee', cursive;
    width: auto;
    max-width: 100vw;
    color: #fff;
    transition: all 10s ease;
    text-shadow: 5px 2px #2223245b, 2px 4px #2223245b, 3px 5px #2223245b;

}
  

h3 {
    margin: 0;
    padding: 0;
}




/*--------------------Column section--------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .row {
    display: flex;
    padding-block: 50px 50px;
    justify-content: center;
  }

        /* Create three equal columns that floats next to each other */
        .column {
            float: left;
            width: 28vw;
            height: fit-content; /* Should be removed. Only for demonstration */
            margin: 1em;
            border-radius: 20px;
            overflow: hidden; /* Cacher le débordement de l'image */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a box shadow to the columns */
            justify-content: center;
            align-items: center;
            align-content: center;
            text-align: center;
        }
        .column1 {
            float: left;
            width: 28vw;
            height: auto; /* Should be removed. Only for demonstration */
            margin: 1em;
            border-radius: 20px;
            overflow: hidden; /* Cacher le débordement de l'image */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a box shadow to the columns */
            justify-content: center;
            align-items: center;
            align-content: center;
            text-align: center;
        }

                  /* Create dashed border */
        .column2 {
            float: left;
            width: 30%;
            height: auto; /* Should be removed. Only for demonstration */
            margin: 1em;
            border-radius: 20px;
            overflow: hidden; /* Cacher le débordement de l'image */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a box shadow to the columns */
            justify-content: center;
            align-items: center;
            align-content: center;
            text-align: center;
            border-style: double;
            border-color: #fdca23;
            transition: transform 0.5s ease;
        }

        
        .column3 {
            float: left;
            width: 30%;
            height: 50vh; /* Should be removed. Only for demonstration */
            margin: 20px 20px; /* Add margin to create equal spaces between columns */
            border-radius: 20px;
            overflow: hidden; /* Cacher le débordement de l'image */
        }
          
          
/* Remove padding from the column-content */
.column-content2 {
    flex-grow: 1; /* Make the column-content expand to fill the available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
      
/* Image takes up the entire upper half of the column-content */
.column-content2 img {
   height: 20%; /* The image takes half of the column height */
    width: 80%; /* The image spans the full width of the column-content */
    object-fit: fill; /* Preserve the aspect ratio of the image */
  }

/* Remove padding from the column-content */
.column-content {
    flex-grow: 1; /* Make the column-content expand to fill the available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

.column-content a {
    margin-bottom: 2em;
  }  
  
      
/* Image takes up the entire upper half of the column-content */
.column-content img {
   height: 50%; /* The image takes half of the column height */
    width: 100%; /* The image spans the full width of the column-content */
    object-fit: fill; /* Preserve the aspect ratio of the image */
  }  
  
          /* Clear floats after the columns */
          .row:after {
            content: "";
            display: table;
            clear: both;
          }
          


/*-----------------MENU-HAMBURGER------------------*/
/*--------------------Animation--------------------*/
.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

/*-------FIN-MENU-HAMBURGER------- */

.affix {
    padding: 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.affix div.main_list ul li a {
    color: #000000;
}

.affix div.logo a {
    color: #000000;
}

.affix #btnNS {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 1s linear;
    width: 100%;
}

.affix div.container span.navTrigger i {
    background-color: #303030;
}

/*--------------------FIN-ANIMATION--------------------*/

/*--------------------TEXT--------------------*/
.h2t1 {
    padding-inline: 15% 15%;
    padding-block: 8px;
	text-align: justify;
	font-size: 50px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
}

.h2t2 {
	text-align: center;
	font-size: 40px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
    padding-block: 8px;
}

.h2t3 {
	text-align: center;
	font-size: 30px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
    padding-block: 5px;
}

.h2t4 {
    padding-inline: 15% 15%;
	text-align: center;
	font-size: 50px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
}

.h2t5 {
	text-align: center;
	font-size: 60px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
    padding-block: 0 0;
}

.h2faq {
	text-align: justify;
	font-size: 70px;
    font-weight: 2000;
    font-family: 'Amatic SC', cursive;
    width: auto;
    max-width: 100%;
}

.section {
    background-size: cover;
    display: flex; /* Utiliser flexbox pour la mise en page */
    flex-flow: row wrap;
    align-items: center; /* Aligner verticalement au centre */
    padding-block: 50px 50px;
}

.section2 {
    background-size: cover;
    display: flex; /* Utiliser flexbox pour la mise en page */
    flex-flow: row wrap;
    align-items: center; /* Aligner verticalement au centre */
    padding-block: 50px 50px;
}

.section .containert1 {
/* Faire flotter la div à gauche */
    text-align: justify;
    width: auto;
    max-width: 60%;
}

.section .containert2 {
    padding-block: 8px;
    position: relative;
    margin: 0 auto;
    width: 100vw;
    text-align: center;
}

.section .containert3 {
/* Faire flotter la div à gauche */
    justify-content: center;
    align-items: center;
    text-align: justify;
    width: 100%;
    max-width: 60%;
}    

.section .photo01 {
    margin-left: 0px; /* Espacement entre le texte et l'image */
    border-radius: 20px; /* Bords arrondis */
    overflow: hidden; /* Cacher le débordement de l'image */
    width: 30%; /* Largeur souhaitée */
    height: 30%; /* Hauteur souhaitée */
    display: flex; /* Utiliser flexbox pour aligner verticalement */
    flex-flow: column wrap;
    align-items: center; /* Aligner verticalement au centre */
    margin-top: 2%;
}

.section .photo05 {
    margin-left: 0px; /* Espacement entre le texte et l'image */
    border-radius: 20px; /* Bords arrondis */
    overflow: hidden; /* Cacher le débordement de l'image */
    width: 30%; /* Largeur souhaitée */
    height: 30%; /* Hauteur souhaitée */
    display: flex; /* Utiliser flexbox pour aligner verticalement */
    flex-flow: row wrap;
    align-items: center; /* Aligner verticalement au centre */
    margin-top: 2%;
    margin-left: 9%;
}

.section .photo05 img {
    max-width: 100%; /* Ajuster l'image à la largeur de la boîte */
    max-height: 100%;
    object-fit: cover; /* Ajuster l'image tout en conservant le rapport hauteur/largeur */
    z-index: -1;
    flex-grow: 1;
}

.section .photo01 img {
    max-width: 100%; /* Ajuster l'image à la largeur de la boîte */
    max-height: 100%;
    object-fit: cover; /* Ajuster l'image tout en conservant le rapport hauteur/largeur */
    z-index: -1;
    flex-grow: 1;
}


.p1 {
	text-align: left;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
    width: fit-content;
    padding-block: 5px;
}

.p2 {
	text-align: center;
	padding-left:15%;
	padding-right:15%;
	font-size: 15px;
    width: fit-content;
}

.p3 {
	text-align: center;
	padding-left:15%;
	padding-right:15%;
	font-size: 15px;
    width: fit-content;
    padding-block: 5px;
}

.p4 {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 13px;
    width: fit-content;
    padding-block: 5px;
}

.p6 {
	text-align: left;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
    width: fit-content;
    color: #ddd;
}


.FAQ {
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8%;
    background-image: url('images/banner01a.png'); /* Chemin vers votre image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%; /* Image prend 100% en hauteur et s'ajuste en largeur automatiquement */
    max-height: 100px;
}

.title01 {
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: 7%;
    background-image: url('images/banner02.png'); /* Chemin vers votre image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%; /* Image prend 100% en hauteur et s'ajuste en largeur automatiquement */
    max-height: 80px;
}




.section2 {
    justify-content: center;
    border-radius: 20px;
    background-color: #fff;
    padding-inline: 10% 10%;
    height: fit-content;
    text-align: center;
}

.wrapper {
    border-radius: 20px;
    display: grid;
    grid-template-rows: fit-content;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a box shadow to the columns */
    overflow: hidden; /* Cacher le débordement de l'image */
    height: fit-content;
    background-color: #ebebeb;
}

.box {
    height: fit-content;
    background-color: #ebebeb;
}

/*--------------------PAGE-NOUS-SOUTENIR-------------------------*/

.container1 {
    display: flex;
    align-items: center; /* Pour centrer le contenu verticalement */
    width: 100%;
    height: 600px; /* Ajustez la hauteur comme nécessaire */
    overflow: hidden; /* Cacher le débordement de l'image */
}

.left {
    flex: 1; /* Utilisez la moitié de la largeur disponible */
    display: flex;
    justify-content: center; /* Pour centrer le contenu horizontalement */
    align-items: center; /* Pour centrer le contenu verticalement */
    flex-direction: column; /* Organisez le contenu en colonnes */
}

.right {
    flex: 1; /* Utilisez la moitié de la largeur disponible */
    display: flex;
    justify-content: center; /* Pour centrer le contenu horizontalement */
    align-items: center; /* Pour centrer le contenu verticalement */
    flex-direction: column; /* Organisez le contenu en colonnes */
}

.left img {
    max-width: 100%;
    max-height: 60%;
}

.right img {
    max-width: 100%;
    max-height: 60%;
}

.line {
    margin: 10px 0; /* Espace entre les lignes */
}

/*--------------------FOOTER--------------------*/
.footer {
    background-image: url('images/footer.webp');
    background-repeat: no-repeat;
    background-size: 100% auto; /* Couvrir toute la largeur, hauteur auto */
    width: 100%;
    height: 0;
    padding-top: 90%;
    background-position: bottom;
    color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: center;
    align-content: center;
    z-index: auto;
}


.footer-content {
    margin-top: 0;
    display: flex;
    width: fit-content;
    height: fit-content;
    padding-block: 2% 2%;
    width: 100%; /* Prendre toute la largeur de .footer */
    align-self: flex-end; /* Aligner .footer-content en bas */
    justify-content: center; /* Centrer horizontalement les éléments enfants */
}

.gmap {
    height: 250px;
    width: 400px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Cacher le débordement de l'image */
    padding-inline: 2% 2%;
    padding-bottom: 1%;
    transition: transform 0.5s ease;
    display: flex;
    align-self: flex-end;
}

.gmap2 {
    height: 650px;
    width: 1000px;
    margin-left: auto; /* Remplacez "margin-left: 20px" par "margin-left: auto" */
    margin-right: auto; /* Ajoutez "margin-right: auto" pour centrer horizontalement */
    margin-bottom: 20px;
    padding: 0;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Cacher le débordement de l'image */
    padding-inline: 2% 2%;
    padding-bottom: 1%;
    transition: transform 0.5s ease;
}


.footer-info:hover {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.footer-social:hover {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.gmap:hover {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.footer-info {
    margin: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden; /* Cacher le débordement de l'image */
    width: fit-content;
    padding-inline: 1% 1%;
    padding-bottom: 1%;
    transition: transform 0.5s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.footer-social {
    align-self: flex-end;
    margin: 20px;
    background-color: #e7c9a600;
    border-radius: 20px;
    overflow: hidden; /* Cacher le débordement de l'image */
    width: fit-content;
    padding-inline: 1% 1%;
    padding-bottom: 1%;
    transition: transform 0.5s ease;
}

.footer h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    font-family: 'Amatic SC', cursive;
    font-weight: 1000;
}

.footer p {
    margin-bottom: 20px;
    font-size: 2rem;
    font-family: 'Quicksand', sans-serif;
}

.footer a img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.footer a img:hover {
    transform: scale(1.2);
}
/*--------------------FOOTER-END--------------------*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
*,
*::before,
*::after {
  box-sizing: border-box;
}

.section5 {
  position: relative;
  width: 100%;
  display: block;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.modal-btn:checked + label,
.modal-btn:not(:checked) + label{
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  height: fit-content;
  transition: all 200ms linear;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
    -ms-flex-item-align: center;
    align-self: center;
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  color: #ffeaa7;
}
.modal-btn:not(:checked) + label:hover{
  background-color: #ffeaa700;
  color: #f7f7f7;
}
.modal-btn:checked + label .uil,
.modal-btn:not(:checked) + label .uil{
	margin-left: 10px;
	font-size: 18px;
}
.modal-btn:checked + label:after,
.modal-btn:not(:checked) + label:after{
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 110;
  width: 40px;
  border-radius: 3px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  background-color: #ffeba7;
  color: rgb(255, 255, 255);
  font-family: 'unicons';
  content: '\eac6'; 
  box-shadow: 0 12px 25px 0 rgba(16,39,112,.25);
  transition: all 200ms linear;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.modal-btn:checked + label:hover:after,
.modal-btn:not(:checked) + label:hover:after{
  background-color: rgb(192, 35, 35);
  color: #ffeba7;
}
.modal-btn:checked + label:after{
  transition: opacity 300ms 300ms ease, transform 300ms 300ms ease, background-color 250ms linear, color 250ms linear;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.modal{
  position: fixed;
  display: block;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow-x: hidden;
  background-color: rgba(31,32,41,.75);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms 700ms ease;
}
.modal-btn:checked ~ .modal{
  pointer-events: auto;
  opacity: 1;
  transition: all 300ms ease-in-out;
}
.modal-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 0px;
  background-color: #ffffff00;
    -ms-flex-item-align: center;
    align-self: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
}
.modal-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.modal-wrap p {
  padding: 20px 30px 0 30px;
}
.modal-btn:checked ~ .modal .modal-wrap{
  opacity: 1;
  transform: scale(1);
  transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}

.modal-btn:checked ~ .logo img {
  	filter: brightness(100%);
	transition: all 250ms linear;
}


@media screen and (max-width: 500px) {
	.modal-wrap {
		width: calc(100% - 40px);
		padding-bottom: 15px;
	}
	.modal-wrap p {
	  padding: 15px 20px 0 20px;
	}
}

.search-container {
    justify-content: center;
    text-align:center;
    position: absolute;
    top: 70%;
    left: 50vm;
    width: 100%;
    height: 100%;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: block;
    font-size: 2em;
    border-radius: 25px;
    padding: 0 0px;
}

.body {
    background-color: #ffffff00;
}

/*--------------------Media query section--------------------*/

@media screen and (min-width: 320px) and (max-width: 1281px) {
    .container {
        margin: 0;
    }



@media screen and (min-width: 1133px) {
    .row {
        justify-content: center;
        align-content: center;
        flex-flow: row wrap;
        display: flex;
        margin-inline: 5vw;
    }
    .column {
        height: fit-content;
        width: 30%;
        height: auto;
        margin: 20px 20px; /* Add margin to create equal spaces between columns */
        border-radius: 20px;
        overflow: hidden; /* Cacher le débordement de l'image */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a box shadow to the columns */
        flex: 1;
        }
    .column-content {
        height: auto; /* Rétablissez la hauteur automatique pour le contenu de la colonne sur les écrans plus petits */
        padding-bottom: 1em;
    }
    .section .photo01 {
        margin-left: 0px; /* Espacement entre le texte et l'image */
        border-radius: 20px; /* Bords arrondis */
        overflow: hidden; /* Cacher le débordement de l'image */
        width: 30%; /* Largeur souhaitée */
        height: 30%; /* Hauteur souhaitée */
        display: flex; /* Utiliser flexbox pour aligner verticalement */
        flex-flow: row wrap;
        align-items: center; /* Aligner verticalement au centre */
        margin-top: 2%;
        min-width: 500px;
    }
    .section .photo05 {
    margin-left: 0px; /* Espacement entre le texte et l'image */
    border-radius: 20px; /* Bords arrondis */
    overflow: hidden; /* Cacher le débordement de l'image */
    width: 30%; /* Largeur souhaitée */
    height: 30%; /* Hauteur souhaitée */
    display: flex; /* Utiliser flexbox pour aligner verticalement */
    flex-flow: row wrap;
    align-items: center; /* Aligner verticalement au centre */
    margin-top: 2%;
    margin-left: 9%;
    }
    .section .containert1 {
    /* Faire flotter la div à gauche */
        text-align: justify;
        width: auto;
        max-width: 60%;
    }
    .nav div.main_list ul {
    flex-direction: row;
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    }

}



/* Responsive layout - Under 1133px screens and under */
@media screen and (max-width: 1133px) {
    .titre {
        display: flex;
        font-size: 5em;
        justify-content: center;
        align-content: center;
        flex-flow: column wrap;
        text-align: center;
    }
    
    .p3 {
      display: flex;
      flex-wrap: wrap;
      text-align: center; /* Center the text horizontally */
      justify-content: center;
      align-content: center;
      padding-left: 0;
      padding-right: 0;
      margin-inline: 35%;
      font-size: 15px;
      width: fit-content;
      padding-block: 5px;
    }

    
    .p6 {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-flow: column wrap;
        text-align: center;
    }
    
    .row {
        justify-content: center;
        align-content: center;
        flex-flow: column wrap;
    }
    .column {
        float: center;
        min-width:80vw;
        min-height: 80vh;
        max-height: fit-content;
        display: flex;
        justify-content: center;
        margin: 2em;
    }
    .column2 {
        float: center;
        min-width:80vw;
        min-height: 80vh;
        max-height: fit-content;
        display: flex;
        justify-content: center;
        margin: 2em;
        padding-bottom: 6em;
    }
    .h2t3 {
        margin-block: 10px;
    }
    .column-content {
        height: auto; /* Rétablissez la hauteur automatique pour le contenu de la colonne sur les écrans plus petits */
    }
    .section .photo01 {
        border-radius: 20px; /* Bords arrondis */
        overflow: hidden; /* Cacher le débordement de l'image */
        width: 30%; /* Largeur souhaitée */
        height: 30%; /* Hauteur souhaitée */
        display: flex; /* Utiliser flexbox pour aligner verticalement */
        flex-flow: column wrap-reverse;
        align-items: center; /* Aligner verticalement au centre */
        margin-top: 2%;
        min-width: fit-content;
        max-width: 700px;
        object-fit: contain;
        justify-content: center;
    }
    .section .photo05 {
        border-radius: 20px; /* Bords arrondis */
        overflow: hidden; /* Cacher le débordement de l'image */
        width: 30%; /* Largeur souhaitée */
        height: 30%; /* Hauteur souhaitée */
        display: flex; /* Utiliser flexbox pour aligner verticalement */
        flex-flow: column wrap-reverse;
        align-items: center; /* Aligner verticalement au centre */
        margin-top: 2%;
        min-width: fit-content;
        max-width: 700px;
        object-fit: contain;
        justify-content: center;
    }
    .section .containert1 {
        text-align: justify;
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
    .section .containert1 p {
        text-align: center;
        font-size: 2em;
        margin-bottom: 1em;
    }
    
    .section .containert1 h2 {
        text-align: center;
        font-size: 4em;
        margin-bottom: 1em;
    }
            
    .navTrigger {
        display: block;
    }
    .nav div.logo {
        margin-left: 15px;
    }
    .nav div.main_list {
        width: 100vw;
        height: 0;
        overflow: hidden;
        justify-content: flex-start;
        text-align: center;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
    .nav div.main_list ul {
        flex-direction: column;
        width: 60vw;
        height: fit-content;
        right: 0;
        left: 0;
        bottom: 0;
        /*same background color of navbar*/
        background-position: center top;
        vertical-align: middle;
    }
    .nav div.main_list ul li {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        background-color: #ebebebf2;
        /*same background color of navbar*/
        background-position: center top;
        border-radius: 10% / 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        vertical-align: middle;
    }
    .nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 3rem;
        padding: 20px;
    }
    .nav div.media_button {
        display: block;
    }
    .footer {
        width: 100vw;
        height: 100vh;
        background-image: url(images/footer.png);
        background-position: center top;
    	background-size:cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .footer-content {
        flex-direction: column;
        width: 100vw;
        justify-content: center;
        text-align: center;
    }
    .footer-social {
        margin: 20px;
        background-color: #ffffff;
        border-radius: 20px;
        overflow: hidden; /* Cacher le débordement de l'image */
        width: 89vw;
        padding-inline: 1% 1%;
        padding-bottom: 1%;
        transition: transform 0.5s ease;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .gmap {
        width: 100vw;
        height: 60vh;
    }
    .nav .btn{
        font-family: 'Tsukimi Rounded', sans-serif;
        -webkit-border-radius: 10% / 50%;
        -moz-border-radius: 10% / 50%;
        border-radius: 10% / 50%;
        color: #fac870;
        font-weight: 1000;
        font-family: 'Amatic SC', cursive;
        font-size: 1em;
        padding: 8px;
        background-color: #FEFEFE00;
        -webkit-box-shadow: 0px 0px 0px 0 #000000;
        -moz-box-shadow: 0px 0px 0px 0 #000000;
        box-shadow: 0px 0px 0px 0 #000000;
        border: solid #000000 0;
        text-decoration: none;
        text-shadow: 2px 2px #2223245b;
        
        
        text-align: center;
        margin-top: 6px;
        transition: transform 0.5s ease;
    }
}

@media screen and (max-width:1133) {

}

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
    
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }