body{font-family:Arial, Times New Roman, serif;width:100%;margin:auto;padding:0px}
header{display:flex;align-items:center;justify-content:space-between;width:91.5%;margin:auto;margin-top:20px}
#navDesktop{display:flex;font-weight:bold}
#imgLogoHeader{display:block;cursor:pointer;align-items:flex-start;transition:0.6s ease}
#imgLogoHeader:hover{box-shadow:none}
#ulNavDesktop{display:flex}
.liNavDesktop{list-style-type:none;margin-right:20px}
.aNavDesktop{text-decoration:none;color:rgba(83,88,98,1)}
.aNavDesktop:hover{color:rgba(11,58,26,1)}
.signinHeader,.signinHeader3{text-decoration:none;padding:12px 20px 12px 20px;background-color:rgb(85,117,95);color:white;font-weight:bold;border-radius:5px;transition:0.6s ease}
.signinHeader3{display:block;width:80%;margin:auto}
.signinHeader4{display:block;width:80%;margin:auto;text-decoration:none;padding:12px 20px 12px 20px;background-color:rgb(255,255,255);border:1px solid rgb(85,117,95);color:rgb(11,58,26);font-weight:bold;border-radius:5px;transition:0.6s ease}
#navMobile{display:none;font-weight:bold;overflow:hidden}
#navMobile #myLinks{display:none}
.myLinksa{color:rgba(83,88,98,1);padding: 14px 16px;text-decoration: none;font-size:17px;display:block}
.icon{display:none;cursor:pointer;padding:10px;transition:0.4s}
.bar{width:25px;height:3px;background-color:rgba(83,88,98,1);margin:5px 0;transition:0.4s}
.icon.active .bar:nth-child(1){transform: translateY(8px) rotate(45deg)}
.icon.active .bar:nth-child(2){opacity:0}
.icon.active .bar:nth-child(3){transform: translateY(-8px) rotate(-45deg)}
.myLinksa:hover{color: black}
.signinHeader2{display:none;text-decoration:none;padding:12px 20px 12px 20px;background-color:rgb(85,117,95);color:white;font-weight:bold;border-radius:5px;transition:0.6s ease}
.banner{width:91.5%;margin:auto;margin-top:20px;display:flex;align-items:center;justify-content:space-around;background-image: linear-gradient(to top left, rgb(11,58,26), rgb(11,58,26), rgb(11,58,26), rgb(209,37,17), rgb(244,233,57));border-radius:10px}
.banner2{width:91.5%;margin:auto;display:flex;justify-content:space-around;align-items:flex-start}
.aboutUs{width:100%;margin:auto;margin-top:50px;display:flex;justify-content:space-between}
.asHeader{display:flex;align-items:center;justify-content:space-between;width:91.5%;margin:auto}
.bannerDiv11, .asBanDiv{width:50%}
.bannerDiv12{width:40%;text-align:center;margin:50px 0 50px 0}
#bannerDiv12Bis{width:45%;margin-top:50px;margin-left:5%}
#imgBanner{width:100%;border-radius:0 0 50% 50%;border-bottom:5px solid white}
.imgBanner2{display:block;width:30%;border-bottom:5px solid rgba(11,58,26,1);border-radius:0 0 50% 0}
.divAbout{display:flex;align-items:center}
.divAbout i{padding:12px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;margin-right:5px}
.divAbout div h3{font-size:1.5em}
.divAbout ul{font-size:1.1em;line-height:1.3em}
.bannerDiv11 h1,.bannerDiv11 p{font-size:2.5em;color:white}
.asBanDiv h1{font-size:2em;color:rgb(85,117,95);margin-bottom:0.2em}
.asBanDiv p{font-size:2em;color:rgba(83,88,98,1);font-weight:bold;margin-bottom:0.2em;margin-top:0}
.bannerDiv11 p{margin-bottom:70px}
.bannerDiv11 p span{font-weight:bold;color:rgba(255,255,255,0.7)}
.bannerA1, .bannerA2{box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);text-decoration:none;padding:12px 30px 12px 30px;background-color:rgba(85,117,95,1);color:white;font-weight:bold;font-size:1.3em;border-radius:5px;transition:0.6s ease}
.blogPlus div div .bannerA1, .blogPlus div div .bannerA2{display:block;width:fit-content;margin-top:2em}
.bannerA2{display:none}
.bannerA1:hover,.bannerA2:hover{color:rgba(11,58,26);background-color:rgba(255,255,255,1)}
.blogPlus div div .bannerA1:hover{color:white;background-color:rgba(11,58,26,1);}
.signinHeader:hover,.signinHeader2:hover,.signinHeader3:hover{background-color:rgba(11,58,26,1)}
.signinHeader4:hover{background-color:rgba(11,58,26,1);color:white}
.blogPlus,.contactSection,.avis-clients,.faq-section{width:100%;margin:auto;margin-top:40px}
.avis-clients,.faq-section{background-color:rgba(11,58,26,0.1)}
.asHeader2{display:flex;align-items:center;width:91.5%;margin:auto;background-color:rgba(11,58,26,0.1);justify-content:center;border-radius:10px;padding-top:50px;padding-bottom:100px;margin-bottom:50px}
.asBanDiv2{width:50%;text-align:center}
.asBanDiv2 h1{font-size:2em;color:rgb(85,117,95);margin-bottom:0.2em}
.asBanDiv2 p{font-size:2em;color:rgba(83,88,98,1);font-weight:bold;margin-bottom:0.2em;;margin-top:0}
.swiper-container{width:91.5%;margin:auto;margin-top:10px}
.swiper-container2{width:91.5%;margin:auto;margin-top:10px;position:relative;bottom:100px}
.blogsAcceuil{width:100%;display:flex;justify-content:space-around;align-items:stretch}
.contenuBillet2{width:91.5%;margin:auto;display:flex;justify-content:space-between;align-items:flex-start}
.blogsAcceuil2{width:68.7%;margin:auto;display:flex;justify-content:space-between;align-items:stretch;align-content:center;flex-wrap:wrap;border-radius:20px}
.blogsAcceuil .billet{display:block;width:23%;text-decoration:none;border-radius:5px;background-color:white;transition:0.6s ease}
.blogsAcceuil .avis{width:30%;border-radius:20px;background-color:white;padding:15px;border:1px solid rgba(0,0,0,0.2);margin-bottom:50px;transition:0.6s ease}
.offre{width:30%;border:1px solid rgba(0,0,0,0.1);background-color:white;color:rgba(83,88,98,1);border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}
.avis h3{color:#555}
.offreDiv1{width:91.5%;border-bottom:1px solid rgba(0,0,0,0.1);margin-top:30px;margin-bottom:30px;padding-bottom:30px}
.offreDiv2{width:91.5%;color:rgba(83,88,98,1)}
.offreDiv3{width:91.5%;border-top:1px solid rgba(0,0,0,0.1);padding: 30px 0 30px 0;text-align:center;margin-top:30px}
.offreDiv1 h1{color:rgba(11,58,26,1);background-color:rgba(11,58,26,0.1);border:5px solid rgba(255,255,255,0.5);border-radius:10px;width:fit-content;padding:12px;margin:auto;font-size:1em}
.offreDiv1 p{text-align:center;line-height:1.7em}
.offreSpan1{font-size:2em;color:red}
.offreSpan2{color:rgba(11,58,26,1);background-color:rgba(11,58,26,0.1);border-radius:11px;width:fit-content;padding:5px 10px 5px 10px}
.offreDiv2 div{width:100%;margin:auto;display:flex;align-items:center}
.offreDiv2 div i{border:3px solid rgba(11,58,26,0.5);border-radius:50%;margin-right:10px;color:rgba(11,58,26,0.5)}
.offreDiv2 div p{line-height:1.5em;margin:10px}
.notation{color:gold;font-size:1.2em;margin-bottom:10px}
.etoile.vide{color: #ccc}
.avis .commentaire{color: #777;font-style: italic}
.blogsAcceuil2 .billet{display:block;width:29%;text-decoration:none;border-radius:5px;background-color:white;margin:10px;transition:0.6s ease}
.billet img{border-radius:10px 10px 0 0;width:100%}
.titreBillet{color:rgba(83,88,98,1);margin-top:0}
.titreBillet h1{margin-bottom:0;margin-top:0}
.titreBillet p{margin-top:0.2em}
.contenuBillet{width:91.5%;margin:auto;display:flex;justify-content:flex-end;align-items:flex-start}
.contenuBillet article{width:50%;margin-right:12.5%;color:rgba(83,88,98,1)}
.groupePopulaire{width:22%;border-left:1px solid rgba(11,58,26,1);border-radius:5px}
.groupePopulaire2{width:25%;border-left:1px solid rgba(11,58,26,1);border-radius:5px}
.groupePopulaire h2,.groupePopulaire2 h2{font-size:2em;color:rgba(11,58,26,1);margin-left:20px}
.blogPopulaire{margin-left:20px;border-top:1px solid rgba(11,58,26,1)}
.billetPopulaire{display:flex;align-items:flex-start;text-decoration:none;color:rgba(83,88,98,1);margin-top:20px;margin-bottom:10px}
.billetPopulaire img{width:30%}
.billetPopulaire h3{margin:0;margin-left:10px;font-size:1em}
.contenuBillet article img{width:100%}
.titreArticle{font-size:2.8em;margin:0}
.intro{font-size:1.3em}







.faq-container {
	width:50%;
	margin:auto;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacement entre chaque élément FAQ */
}

.faq-item {
    border-bottom: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: 0.6s ease;
}

.faq-question h2 {
    margin:0 10px 0 0 ;
    font-size: 1.1em;
    color:rgba(83,88,98,1);
}

.faq-toggle {
    font-size: 1.5em;
    color: #555;
    transition: transform 0.6s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px; /* Padding latéral pour l'esthétique */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    margin: 15px 0; /* Espacement vertical pour le paragraphe */
    color: #666;
    line-height: 1.6;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg); /* Fait pivoter le '+' en 'x' */
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Ou une valeur suffisamment grande pour contenir la réponse */
    padding-bottom: 15px; /* S'assure que le padding inférieur est appliqué quand la réponse est visible */
}










.contDiv{width:100%;margin:auto;margin-top:100px;display:flex;flex-direction:column;align-items:center;background-color:rgba(11,58,26,0.5);padding:50px 0 50px 0}
.contactDiv{width:91.5%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:20px}
.contDiv1{width:30%;margin:20px}
.trait{width:90%;height:1px;background-color:rgba(11,58,26,0.1);margin:50px 0 50px 0}
.contDiv2{width:40%;margin:20px}
#contactImg{display:block;width:20%;margin:auto;border-radius:0 0 20px 20px;opacity:0.8}
.contactDiv2{width:90%;margin:auto}
.contactDiv1{width:80%;margin:auto;text-align:center}
.contactDiv1 p{font-size:1.5em}
.contactDiv1 a{text-decoration:none;color:rgb(11,58,26);font-weight:bold}
.form-group{margin-bottom: 15px}
.form-group label{display: block;margin-bottom: 5px}

.contID{display:flex;width:100%;justify-content:space-between}
.contID .form-group{width:48%}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group textarea,.form-group select{width: 100%;padding: 10px;border: 3px solid rgba(229,229,229,0.8);border-radius: 5px;box-sizing: border-box;font-size:1em}
.form-group textarea{resize: vertical;font-size:1.3em}
::placeholder{color:rgba(85,117,95,0.4)}


/* Style pour l'affichage de l'émoji du drapeau */
        .flag-emoji {
            margin-right: 0.5rem;
        }
        /* Assurer que le select a une bonne largeur et flexibilité */
        
        .select-wrapper select {
            flex-shrink: 0; /* Empêche le select de se rétrécir trop */
            margin-right: 0.5rem;
            max-width: 150px; /* Limiter la largeur du select pour les petits écrans */
        }
        .select-wrapper input {
            flex-grow: 1; /* Permet à l'input de prendre l'espace restant */
        }





button[type="submit"]{background-color: rgba(85,117,95);color: white;padding: 10px 15px;border: none;border-radius: 5px;cursor: pointer;font-size: 1em}
button[type="submit"]:hover {background-color: rgba(11,58,26,1)}
.formulaireDiv{width:50%;margin:auto;background-color:rgba(11,58,26);display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);border-radius:10px;margin-top:50px;font-size:1.3em}
.formulaireDiv img{width:8%;border-radius:30px;border:10px solid rgba(255,255,255,0.7);margin-top:50px}
#qstButton{width:100%;margin-bottom:50px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;}
#formQst{width:fit-content;margin:auto}
#qstButton div h3{color:rgba(255,255,255,1);text-align:center}
#qstButton div h3#qstButtonDivH3{text-align:left;margin-left:20px}
#qstButton div p{color:rgba(255,255,255,0.9);width:fit-content;margin-left:50px;margin-right:50px;line-height:1.5em}
.qstButtonDivP{color:rgba(255,255,255,1);width:fit-content;padding:20px;margin-left:50px;margin-right:50px;line-height:1.5em;border-radius:8px;background-color:rgba(255,255,255,0.2);font-weight:bold}
#formButtons{width:100%;display:flex;justify-content:space-around;margin-top:50px}
#qstButton button{display:block;width:30%;background-color: rgba(255,255,255,0.8);color:rgba(11,58,26,1);padding: 10px 15px;border: none;border-radius: 10px;cursor: pointer;font-size: 1em;transition:0.6s ease}
#qstButton button:hover{background-color: rgba(255,255,255,1)}
#formPagination{width:90%;margin-top:40px;color:rgba(255,255,255,0.8);font-weight:bold}
#lesSites p{width:fit-content;margin:auto;line-height:2em}
#lesSites p a{font-size:1em;font-weight:bold;color:rgba(204,204,255,1)}
.loaderBigDiv{display:none;width:90px;padding: 10px 15px;border: none;border-radius: 10px;margin:auto}
.loader-container{position:relative;width:80px;height:80px;margin:auto}
.circle{position: absolute;border:1px solid rgba(11,58,26,1);border-radius:50%;width:100%;height:100%;opacity:0;animation:scaleFade 2s infinite}
.circle:nth-child(1){animation-delay:0s}
.circle:nth-child(2){animation-delay:0.5s}
.circle:nth-child(3){animation-delay: 1s}
@keyframes scaleFade{
	0%{transform:scale(0);opacity:0}
	50%{opacity:1}
	100%{transform:scale(1);opacity:0}
}
.cookiesOk{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,0.7);display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.cookiesOk p{width:fit-content;text-align:center;background-color:rgba(255,255,255,1);padding:20px;margin:0 20px 100px 20px;border-radius:5px;font-size:1.2em}
.cookiesOk button{background-color: rgba(77,172,119,1);color:rgba(255,255,255,1);padding: 10px 15px;margin-top:20px;border: none;border-radius: 10px;cursor: pointer;font-size: 1em;transition:0.6s ease}
.cookiesOk button:hover{background-color: rgba(4,124,58,1)}
footer{background-color:rgba(85,117,95,1);display:flex;justify-content:space-around;align-items:stretch;color:white;font-size:1.2em}
.basFooterElt1{width:50%;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.basFooterElt2{width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(255,255,255,1)}
footer figure, .basFooterElt2P{margin:0;padding:0}
.copyright{margin:10px}
.basFooterElt2P{margin-top:5px;color:rgba(0,0,0,0.8)}
.copyright span{font-style:oblique}
#logoPalmImg{cursor:pointer}
.social-links {
            margin-top:10px
        }
        .social-links a {
            color: white;
            font-size: 2em; /* Taille des icônes */
            margin: 0 15px;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .social-links a:hover {
            color: #007bff; /* Couleur au survol */
        }
.social-links .fa-facebook:hover { color: #3b5998; }
        .social-links .fa-instagram:hover {
            background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .social-links .fa-tiktok:hover { color: #fe2c55; }


form .container input[type=email],form .container input[type=password],form .container input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin:auto;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1em;
}
.submitbtn{background-color: #04AA6D;color:white;padding:14px 20px;margin:8px 0;border:none;cursor:pointer;width:100%;font-size:1em}
.googlebtn{display:flex;align-items:center;justify-content:center;background-color:rgba(53, 122, 232,0.2);padding:10px 15px;margin:8px 0;border:1px solid rgba(53, 122, 232,0.1);cursor:pointer;width:auto;border-radius:5px;font-size:1em}
.googlebtn img{width:24px;height:24px;margin-right:10px}
.cancelbtn{width:auto;padding:10px 18px;background-color:#f44336;color:white;margin:8px 0;border:none;cursor:pointer}
.googlebtn:hover{background-color: rgba(53, 122, 232,0.5)}
.submitbtn:hover,.cancelbtn:hover{opacity: 0.8}
.imgcontainer{text-align:center;margin:24px 0 12px 0;position:relative}
img.avatar{width:40%;border-radius:50%}
.container{padding:16px}
span.psw{float:right;padding-top:16px;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  border-radius:10px;
  width: 25%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}


form.formSignUp,form.formMdp{display:none}
.recaptcha-text { font-size: 0.8em; color: #777; margin-top: 10px; }


        /* Styles pour la bannière de consentement */
        #cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 15px 20px;
            text-align: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none; /* Masqué par défaut */
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }
        #cookie-banner p {
            margin: 0;
            font-size: 0.9em;
            flex-grow: 1;
            text-align: left;
            max-width: 700px;
        }
        #cookie-banner a {
            color: #87CEEB; /* Couleur bleue claire */
            text-decoration: underline;
        }
        #cookie-banner button {
            background-color: #4CAF50; /* Vert pour Accepter */
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.3s ease;
            white-space: nowrap; /* Empêche le bouton de se casser sur plusieurs lignes */
        }
        #cookie-banner button:hover {
            background-color: #45a049;
        }
        #cookie-banner .decline-btn {
            background-color: #f44336; /* Rouge pour Refuser */
        }
        #cookie-banner .decline-btn:hover {
            background-color: #da190b;
        }
        




@media (max-width: 1024px) {
	header{align-items:flex-start}
	#navDesktop,.signinHeader{display:none}
	#navMobile,.icon{display:block}
	.signinHeader2{display:block}
	.banner{width:100%;border-radius:0;flex-direction:column-reverse;background-image: linear-gradient(to bottom right, rgb(11,58,26), rgb(11,58,26), rgb(11,58,26), rgb(209,37,17), rgb(244,233,57))}
	.banner2{width:100%;flex-direction:column;align-items:center}
	.bannerDiv11, .imgBanner2{width:95%}
	.bannerDiv11 p, .bannerDiv11 h1{font-size:1.5em;margin-bottom:0;line-height:1.2em}
	.bannerA1, .blogPlus div div .bannerA1{display:none}
	.bannerDiv12{width:95%;margin:40px 0 40px 0}
	.bannerA2{width:fit-content;display:block;margin-bottom:25px;font-size:1em;text-align:center}
	.asBanDiv{width:100%}
	.asBanDiv h1,.asBanDiv p{font-size:1.5em}
	.swiper-container{overflow: hidden}
	.blogsAcceuil{margin:0;padding:0;overflow-x:auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling:touch;transition: transform 0.3s ease-in-out;width:100%}
	.blogsAcceuil .billet{margin:0;padding:0;flex:0 0 100%;scroll-snap-align: start}
	.blogsAcceuil .avis,.offre{margin:0;padding:0;flex:0 0 100%;scroll-snap-align: start;box-shadow:none}
	.offre{border:1px solid rgba(0,0,0,0.5)}
	.blogsAcceuil .avis h3,.blogsAcceuil .avis div,.blogsAcceuil .avis p{margin-left:15px;margin-right:15px}
	.blogsAcceuil::-webkit-scrollbar{display: none}
	.dots-container,.dots-container2{width:fit-content;margin:auto;margin-top:20px;margin-bottom:20px;display:flex;gap:10px}
        .dot,.dot2{width: 15px;height: 15px;border-radius:50%;background-color:#ddd;cursor:pointer}
        .dot.active,.dot2.active {background-color: #333}
	.contDiv{width:100%;border-radius:0}
	footer,.contID{flex-direction:column}
	#contactImg{width:40%}
	.contDiv2{width:100%;margin:20px 0 20px 0;border:none}
	.contDiv1{width:100%;margin:20px 0 20px 0}
	.contID .form-group{width:100%}
	.basFooterElt1,.basFooterElt2{width:100%;font-size:0.9em}
	footer{border-top:1px solid rgba(0,0,0,0.1)}
	.basFooterElt1 p{width:fit-content;text-align:center}
	.asBanDiv2,.asHeader2{width:100%;border-radius:0}
	.asBanDiv2 h1,.asBanDiv2 p{font-size:1.5em;margin-left:10px;margin-right:10px}
	.contenuBillet,.contenuBillet2,.blogsAcceuil2{flex-direction:column}
	.blogsAcceuil2,.faq-container{width:100%}
	.contenuBillet{width:91.5%}
	.blogsAcceuil2 .billet{width:100%;margin-left:0;margin-right:0}
	.contenuBillet article,.groupePopulaire,.groupePopulaire2{width:100%;margin:0}
	.titreArticle{font-size:2em}
	.billetPopulaire h3{font-size:1em}
	.formulaireDiv{width:91.5%}
	#qstButton div p{margin-right:20px;margin-left:20px}
	.formulaireDiv img{width:25%}
	#qstButton button{width:fit-content}
	.modal-content{width:80%}
	#cookie-banner{padding: 15px 0}
	#cookie-banner p{margin-left:10px;margin-right:10px}
}
@media screen and (max-width: 768px){
	.modal-content{width:85%}
}
@media screen and (max-width: 425px){
	.modal-content{width:90%}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
	.modal-content{width:95%}
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}