html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    position: relative;
}
.city-info{display: block; font-size: 13px; color: #213f97; padding: 2%;position: relative; float: left;width: 100%; background-color: #f0f8ff;}
.city-info h2{font-size: 16px; font-weight: bold; margin-bottom: 20px;}
.city-info h3{font-size: 14px; font-weight: bold; margin-top: 20px;margin-bottom: 20px;}
.mobilenone{display: block;} 
.bandeau{display: none}
header{padding:15px 0;background:#FFF;margin:0;position: relative;z-index: 10;}
.logo{width:20%;float:left;}
.logo img{width: 100%;height: auto;}
.banner{float: left; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0;background: none; background-color: #FFF;}
.banner .overlay{float: left; width: 100%; margin: 0 0 0 0; padding: 75px 0 75px 0;}
.banner h1{text-align: center;font-size: 32px;line-height: 34px; font-weight: 600;margin-bottom: 30px;position: relative; color: #FFF;padding-left: 5%;padding-right: 5%;}
.banner h2{text-align: center;font-size: 28px; line-height: 30px; font-weight: 600;margin-bottom: 40px;position: relative;color: #FFF;padding-left: 5%;padding-right: 5%;}
.banner h3{text-align: center;font-size: 25px; line-height: 27px;font-weight: 600;margin-bottom: 20px; padding-top: 40px;position: relative;color: #FFF;padding-left: 5%;padding-right: 5%;}
.banner p{text-align: center;font-size: 16px; line-height: 20px;font-weight: 300;margin-bottom: 40px; padding-top: 40px;position: relative;color: #FFF;display: block;padding-left: 5%;padding-right: 5%;}
.calloption{display: table;width: 250px; height: 40px; line-height: 40px; padding: 20px;margin: 0 auto 0 auto;text-align: center;font-size: 32px;font-weight: 600;position: relative;z-index: 3; background-color: #71c23b; box-sizing: content-box; color: #FFF}
.calloption .borderside{position: absolute; width: 386px; height:96px ;left: -6px; top: -6px; margin: 0 0 0 0; content: ''; z-index: -1;}
.calloption img{
	display: inline-table;
	margin-right: 10px; margin-top: -5px;
	vertical-align: middle;
	height: 36px; width: auto;
}
.cartouche-container {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.cartouche-container img {
    max-width: 100%;
    height: auto;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.container{
	margin:0 auto 0 auto;
	width:1100px;
	position:relative;
	}
.topbutton{
	position:fixed;
	right:25px;
	bottom:22px;
	width:34px;
	height:34px;
	text-align:center;
	line-height:34px;
	font-size:16px;
	color:#fff;
	text-decoration:none;
	z-index:9;
	cursor:pointer;
	box-shadow:0 0 5px rgba(0,0,0,0.4); 
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
	transition:0.3s; -webkit-transition:0.3s;
	display: none;
	}
.topbutton span{
	line-height:34px;
	}
.button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.responsive-button {
    background-color: #fff;
    color: #0091ff;
    border: 2px solid #0091ff;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    text-align: center;
    flex: 1;
    max-width: 200px;
}

.responsive-button:hover {
    background-color: #0091ff;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.francemap{position: relative;float: left;width: 30%; text-align: center;margin-right: 1%}
.francemap img{width: 100%; max-width: 100%;height: auto;}
.francetxt{position: relative;float: left;width: 69%; text-align: left;margin-bottom: 20px}

@media (max-width: 768px) {
    .button-container {
        flex-direction: column; /* Empile les boutons en colonne */
        align-items: center;   /* Centre les boutons horizontalement */
    }

    .responsive-button {
        width: 100%;           /* Les boutons occupent toute la largeur */
        max-width: 300px;      /* Limite la largeur maximale */
        margin-bottom: 10px;   /* Espace entre les boutons */
    }
	.francemap{position: relative;float: left;width: 100%; text-align: center;}
.francetxt{position: relative;float: left;width: 100%; text-align: left;margin-bottom: 20px}
	
}

.depnoncouverts{text-align: center; font-size: 12px;}
.imgpharmacie{width: 100%; position: relative; float: left; display: none}
.img_pharmacie{border-radius: 5px; width: 100%;}
.titleh1{color:#000; font-size: 1.5rem;line-height: 2rem; margin-bottom: 10px; font-weight: bold;}
.formtext{font-weight: 900;font-size: 14px;}
.bloc_text{text-align: left;}
.bloc_text p{margin:0 0 10px 0;font-size:12px;line-height:18px;text-align: left;}
.bloc_text h1{font-size:19px;font-weight:bold;text-transform:uppercase;margin: 5px 0;}
.bloc_text h2{font-size:19px;font-weight:bold;text-transform:uppercase;margin: 5px 0;}
.bloc_text h3{font-size:19px;font-weight:bold;text-transform:uppercase;margin: 5px 0;}
#suggestions {border: 1px solid #ddd;max-height: 150px;overflow-y: auto;position: absolute;background-color: white;box-shadow: 0px 0px 5px rgba(0,0,0,0.2);margin-top: -13px;display: none; z-index: 10;}
.suggestion-item {padding: 5px;cursor: pointer;}
.suggestion-item:hover {background-color: #f0f0f0;}
#resultContent{text-align: center; font-weight: bold; font-size: 1.4rem;line-height: 1.6rem;}
.textpharmacie{text-align: center; font-weight: bold; font-size: 1.3rem;line-height: 1.8rem;display: block;}
.textpharmacie2{text-align: center; font-weight: bold; font-size: 1rem;line-height: 1.2rem;display: block;}
.textpharmaciemobile{display: none;}
.textpharmaciemobile2{display: none;}

.contacterpharmacie{text-align: center; font-size: 20px; color: #297219; position: relative; float: left; width: 100%; font-weight: bold; padding-bottom: 20px; line-height: 24px;}
#results {margin-top: 20px;}
#contactButton {margin-top: 20px;padding: 10px 20px;background-color: #007bff;color: white;border: none;cursor: pointer;}
#contactButton:hover {background-color: #0056b3;}
#livewire-error{display: none;}
.blockform{border:2px solid #CCC; border-radius: .75rem; height: 40px;margin-bottom: 10px; width: 100%;}
.btn-col {animation-name: col;animation-duration: 2s;animation-iteration-count: infinite;}
.btn-border {animation-name: bord-pop;animation-duration: 2s;animation-iteration-count: infinite;}
.btn-icon {animation-name: btn-icon;animation-duration: 2s;animation-iteration-count: infinite;}
.contactpharmacie{color: #FFF;font-weight: 500;font-size: 0.9em;}
.contactpharmacie2{color: #FFF;font-weight: 900;font-size: 1.2em; text-transform: uppercase;}
.contactpharmacie3{color: #FFF;font-weight: 900;font-size: 1.5em; text-transform: uppercase;}
.contactbutton{color: #FFF; padding: 10px; font-weight: bold; background: #107aca;cursor: pointer;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;clear: both;}

/* Overlay pleine page */
.cc-overlay{position: fixed; inset: 0;background: rgba(0,0,0,.55);z-index: 2000;animation: ccFadeIn .18s ease-out;}

/* Carte centrale */
.cc-modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(640px, 92vw);
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  padding: 20px 24px 16px; z-index: 2001;
  animation: ccFadeScaleIn .18s cubic-bezier(.2,.6,.2,1);
  transform-origin: center;
}

/* En-tête (logo + close) */
.cc-header{
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 8px;
}
.cc-logo{ height: 22px; width: auto; }
.cc-close{border: 0; background: transparent; font-size: 28px; line-height: 1;cursor: pointer; color: #444; display: none;}

/* Titre/texte */
.cc-title{
  font-size: 20px; line-height: 1.2; font-weight: 700; margin: 6px 0 10px;
}
.cc-text{
  font-size: 14px; line-height: 1.5; color: #333; margin: 0 0 16px;
}
.cc-link{ color: #107aca; text-decoration: underline; }  /* bleu de votre charte */

/* Boutons */
.cc-actions{ display:flex; justify-content:flex-end; gap: 12px; }
.cc-btn{
  appearance:none; border: 0; cursor:pointer; border-radius: 8px;
  padding: 16px 20px; font-weight: 700; font-size: 16px;
}
.cc-btn-accept{
  background: #107aca;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255,106,0,.35);
}
.cc-btn-accept:hover{ filter: brightness(0.95); }

/* Mobile : aspect “bottom sheet” */
@media (max-width: 480px){
  .cc-modal{
    left: 50%; top: auto; bottom: 10px; transform: translateX(-50%);
    width: calc(100vw - 20px); border-radius: 16px;
    padding: 18px 16px 14px;
    animation: ccRiseIn .22s cubic-bezier(.2,.6,.2,1);
  }
  .cc-title{ font-size: 18px; }
  .cc-text{ font-size: 13px; }
  .cc-actions{ justify-content: center; }
}

/* Keyframes */
@keyframes ccFadeIn{
  from{ opacity: 0; } to{ opacity: 1; }
}
@keyframes ccFadeScaleIn{
  from{ opacity: 0; transform: translate(-50%,-50%) scale(.98); }
  to  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes ccRiseIn{
  from{ opacity: 0; transform: translateX(-50%) translateY(12px); }
  to  { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .cc-overlay, .cc-modal{ animation: none !important; }
}

/* footer */
.blackblock{background:rgb(16 122 202); width: 100%; padding-bottom: 30px; margin-top: 50px;}
.tel3240{font-size: 28px; color: #FF0004; font-weight: bold; text-transform: uppercase;}
.serviceindextitre{width: 100%; font-size: 28px; color: #FFF; font-weight: bold;text-align: center; margin-top:30px;text-transform: uppercase;}
.serviceindex{width: 31.33%; position: relative; float: left; text-align: center;margin-top:30px; margin-bottom: 30px;padding-left:1%; padding-right: 1%}
.serviceindeximg{width: 100%; position: relative; float: left; text-align: center; margin-bottom: 20px;}
.serviceindex img{width: 50px; height: auto; display: inline;}
.serviceindextitle{font-size: 16px; color: #FFF; font-weight: bold;text-align: center;line-height: 20px;margin-bottom: 10px;}
.serviceindextitle2{font-size: 24px; color: #FFF; font-weight: bold;text-align: center;margin-left:20px;margin-right:20px; line-height: 26px; margin-top: 20px;}
.tel3240{font-size: 28px; color: #FFF; font-weight: bold; text-transform: uppercase; background: #71c23b; padding: 5px;}
.serviceindextext{font-size: 14px; color: #FFF; text-align: center;}
.whiteblock{background:#FFF; width: 100%; padding-bottom: 30px;}
.wrap{width:95%;margin:0 auto;overflow:hidden;}
nav.footer_menu{float:none;}
nav.footer_menu ul{padding-left:0;text-align:center;}
nav.footer_menu ul li a, nav.footer_menu ul li{color:#FFF;}
.cartouche{float:right;text-align:right;}
.cartouche img{display: inline;}
.bloc_service .tarif{clear:both;}
footer{margin-top:20px;margin-bottom: 100px; padding:0 15px;background:#FFF;}
nav.footer_menu{float:left;}
nav.footer_menu ul{text-align:left;padding:0;}
nav.footer_menu ul li a,
nav.footer_menu ul li{font-size:16px;color:#535353;}
nav.footer_menu ul li a{text-decoration:none;}
nav.footer_menu ul li{display:inline-block;margin:10px 2px;}
/* fin footer */

        @keyframes bord-pop {
            0% { opacity: 0.5; }
            50% { transform: scale(1.5); opacity: 0.05; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        @keyframes col {
            0% { transform: scale(1) translate(0,0); }
            10% { transform: scale(1.1) translate(0,0); }
            75% { transform: scale(1) translate(0,0); }
            100% { transform: scale(1) translate(0,0); }
        }

        @keyframes btn-icon {
            5%, 15% { transform: rotate(25deg); }
            10%, 20% { transform: rotate(-25deg); }
            25% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }
           
            @keyframes mmfadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }

            @keyframes mmfadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }

            @keyframes mmslideIn {
            from { transform: translateY(15%); }
                to { transform: translateY(0); }
            }

            @keyframes mmslideOut {
                from { transform: translateY(0); }
                to { transform: translateY(-10%); }
            }

@media (max-width: 1024px){
.topbutton{display: none !important;visibility: hidden;}
.container{width:100%;}
.banner h1{font-size: 28px; line-height: 30px;}
.banner h2{font-size: 24px; line-height: 26px}
.banner h3{font-size: 20px; line-height: 22px;}
	}

   @media (max-width : 480px) {
body {overflow-x: hidden;}
	   * {
        max-width: 100%;
        box-sizing: border-box;
    }
.banner p{display: block;font-size: 12px; line-height: 16px;}
header {padding: 0px 0;position: relative;z-index: 10;}	  
	   .city-info{display: block}
.imgpharmacie{width: 100%; position: relative; float: left; display: block}

.logo{text-align:center;width:100%;float:none;}
.logo img{width:63%;padding-top: 10px; padding-bottom: 10px;margin-left: 15%;}
.bandeau{display: block;width: 100%;position: fixed;bottom: 0;border-top:3px solid #FFF;z-index: 1000;}
.bandeau img{width: 100%; border: 0}	
.bandeau a{border: 0;}
.textpharmaciemobile{text-align: center; font-weight: bold; font-size: 1.4rem;line-height: 1.6rem;display: block;}
.textpharmaciemobile2{text-align: center; font-weight: bold; font-size: 1rem;line-height: 1.2rem;display: block;}
	   .mobilenone{display: none;}  
	   }