@font-face {
  font-family: Hurme;
  src:
  url("HurmeGeometricSans4-Bold.ttf") format("opentype"),
  url("HurmeGeometricSans4-Bold.woff") format("woff");
  font-weight:bold;
}

@font-face {
  font-family: Hurme;
  src:
  url("HurmeGeometricSans4-Regular.ttf") format("opentype"),
  url("HurmeGeometricSans4-Regular.woff") format("woff");
  font-weight:500;
}

@font-face {
  font-family: Hurme1;
  src:
  url("HurmeGeometricSans1-SemiBold.otf") format("opentype"),
  font-weight:bold;
}

@font-face {
  font-family: Hurme1;
  src:
  url("HurmeGeometricSans1.otf") format("opentype"),
  font-weight:500;
}
/* General Style */

body{
	font-family: Hurme1;
	
    font-weight:500;
	overflow-x: hidden;
	margin:0;
	padding: 0;
	background-color:#fff;
}

.container{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;  
}

.container img{
	
    display: block;
    width: 100%;
	border:none;
	margin:0;
}

.container2{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;  
}

.container2 img{
    display: block;
    width: 100%;
	border:none;
	margin:0;
}

.siren
{
 white-space: nowrap;
 display:inline-block;
 }
.apple span
{
 color: inherit !important;
 text-decoration: none !important;
 font-size: inherit !important;
 font-family: inherit !important;
 font-weight: inherit !important;
 line-height: inherit !important;
 }

/* Header */
header {
	background-color: #fff;
	container-name: remiseContainer;
	container-type: inline-size
}
header h1{
    margin: 0;
}
header h3{
	color: #64666c;
    text-align: center;
    padding: 4%;
	font-size: 4.8cqi;
	margin:0;
}
/* Logos */
.logos {
	text-align: center;
}
.logos img{
    display: inline-block;
	margin:2%;
	padding:0;
	border:none;
	width:44%;
	text-align: center;
	vertical-align: middle;
}

/* Main */



main section > p strong{
	text-align: center;
    line-height: 1.3;
	margin-bottom:12px;
	margin-top:12px;
	color:#fff;
}



.fond-blanc {
    height: 70px;
	display:block;
}

.text-over-fixed{
	background-color:#000000;
	color:#fff;
	right:4%;
	bottom: 0px;
	margin:auto;
	width:45%;
	height:35%;
}

.typed-text {
	container-name: remiseContainer;
	container-type: inline-size;
	transform: skew(-18deg,-1deg);
    position: absolute;
top: 35%;
    left: 72%;
    width: 30cqi;
    height: 8cqi;
    border-radius: 106%;
	color: black;
    opacity: 1;
}

.image-under {
  position: relative;
  	container-name: remiseContainer;
	container-type: inline-size;
}
.image-under h1 {
  text-transform: uppercase;
  letter-spacing: 1pt;
    color: #fff;
    margin-bottom: -7cqi;
    text-align: center;
    font-size: 38cqi;
  font-family: 'Oxygen Mono', monospace;
}
.image-under h2 {
  color: #fff;
	width: 129%;
text-transform: uppercase;
  letter-spacing: 1pt;
  margin:5cqi -20cqi 0;
    text-align: center;
    font-size: 20cqi;
  font-family: 'Oxygen Mono', monospace;
}
@media only screen and (max-width: 440px) {
  .image-under h2 {
   font-size: 18cqi;
  }
}
.image-under p {
margin: 14% 0% 0;
    font-size: 8.5cqi;
    font-weight: 900;
    width: 55%;
    color: #f3f2f2;
    font-family: 'Oxygen Mono', monospace;
    transform: skew(3deg, -3deg);
    text-align: center;
    padding: 0 8% 0% 22%;
    line-height: 1.3;
}
.image-under h3 {
margin: 0% 0;
    font-size: 8.5cqi;
    font-weight: 900;
    width: 75%;
    color: #f3f2f2;
    font-family: 'Oxygen Mono', monospace;
    transform: skew(3deg, -3deg);
    text-align: center;
    padding: 0 8% 0% 16%;
    line-height: 1.3;
}
.image-under sup{
	font-size:5cqi;
	  }
@media only screen and (max-width: 540px) {
  .image-under p {
	padding: 0 8% 0% 28%;
	width: 35%;
  }
.image-under h3 {
  }
}

.glowing-text{
	animation:glowy 1s ease-in-out infinite alternate;
  }
.image-with-glasses {
  position: relative;
}

.glasses-sparkle1 {
    position: absolute;
	top: 8%;
    left: 40%;
    width: 11cqi;
    height: 8cqi;
    background: radial-gradient(circle, white -11%, transparent 40%);
    border-radius: 106%;
    opacity: 1;
    animation: sparkle 1s ease-in-out infinite alternate;
}
.glasses-sparkle2 {
    position: absolute;
    top: 10%;
    left: 51%;
    width: 11cqi;
    height: 8cqi;
    background: radial-gradient(circle, white -11%, transparent 40%);
    border-radius: 106%;
    opacity: 1;
    animation: sparkle 1s ease-in-out infinite alternate;
}

.glasses-sparkle3 {
    position: absolute;
    top: 11%;
    left: 60%;
    width: 11cqi;
    height: 8cqi;
    background: radial-gradient(circle, white -11%, transparent 40%);
    border-radius: 106%;
    opacity: 1;
    animation: sparkle 1s ease-in-out infinite alternate;
}


.text-sparkle {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 11cqi;
    height: 8cqi;
    background: radial-gradient(circle, white -11%, transparent 40%);
    border-radius: 106%;
    opacity: 1;
    animation: sparkle 1s ease-in-out infinite alternate;
}

.text-over {
  position: absolute;
  max-width: 600px;
  text-align: center;
  padding: 3%;
}

.text-over1 {
	container-name: remiseContainer;
	container-type: inline-size;
  position: absolute;
  max-width: 600px;
  text-align: center;
  border: solid 3px #ffffff;
  background-color: #ffffff;
  padding: 0% 3%;
  top: 55%;
  left: 72%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
width: 39cqi;
height: 30cqi;
  line-height:7cqi;
}

.text-over2 {
		container-name: remiseContainer;
	container-type: inline-size;
  position: absolute;
  max-width: 600px;
  text-align: left;
  padding: 3%;
  top: 79%;
  left: 73%;
  color: #fff;
  transform: translate(-50%, -50%);
  opacity: 0; /* Initialement invisible */
  width: 47cqi;
  line-height:2cqi;
}

.text-over-translate {
  margin: auto;
  padding: 15px;
  transition-duration: .5s;
}

.text-over-translate.animate {
  animation: text-over-show 2s 1 forwards;
}

.text-over-translate-glow.animate {
  animation: translate-show 2s forwards, contenant-glow 1s ease-in-out infinite alternate;
}

.text-over-translate-no-glow.animate {
  animation: translate-show-short 1s forwards 2.1s;
}

.gradient-text {
  background: linear-gradient(to bottom, #3a64ac, #4ba5da);
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes translate-show {
  from {
    opacity: 0;
    transform: translate(90%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes translate-show-short {
  from {
    opacity: 0;
    transform: translate(90%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes text-over-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7beeff;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #a5f1fc, 0 0 40px #a5f1fc;
  }
}

@keyframes glowy {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7beeff;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #a5f1fc, 0 0 40px #a5f1fc;
  }
}

@keyframes contenant-glow {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7beeff;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #a5f1fc, 0 0 40px #a5f1fc;
  }
}

@keyframes sparkle {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1.5);
  }
}
.tagline {
	container-name: remiseContainer;
	container-type: inline-size;
    position: absolute;
    color: #fff;
    left: 4.5%;
    top: 83%;
    margin: 0;
    width: 89%;
	    animation: fadeInOpacity 3s ease-in-out forwards;
    animation-delay: 2s; /* Ajuste ce délai selon le moment où tu veux que la phrase apparaisse */
    opacity: 0; /* Masquer au début */
	z-index:2;
}
@media only screen and (max-width: 400px) {
  .tagline {
    top: 79%;
	line-height:5cqi;
  }
}
.taglinetext {
	font-size: 5.5cqi;
	line-height:4cqi;
    font-weight: bold;
	color:#fff;
    /* text-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5); */
}

.text-over p{
	margin:0;
}
.montant-remise{
	
font-size: 17cqi;
    position: relative;
    font-weight: bold;
    line-height: 0.8em;
   
}	
.euro{
	text-align:center;
	font-size:7cqi;
	font-weight:500;
	line-height:9cqi;
}
.ttc{
	font-size:1.3em;
	font-weight:normal;
}
.de-remise{
	font-size:15cqi;
	font-weight:600;
}
.intro > p{
	color: #fff;
    text-align: center;
    padding: 3%;
	margin:0;
}
.intro-shop{
	container-name: remiseContainer;
	container-type: inline-size;
	color: #212527;
    text-align: center;
    padding: 0 4% 2%;
	margin:0px;
	font-weight:normal;
	background-color:#fff;
}
.intro-shop > h3{
    font-size: 4.8cqi;
	font-weight:normal;
	margin-top:4cqi;
}
.operation {
    text-align: center;
	padding: 5px 20px;
}
.btn{
    display: inline-block;
    color: #0000ff;
    margin: 0% 0% 4% 0%;
    box-sizing: border-box;
	border:0px solid #0000ff;
    background-color: #fff;
    text-decoration: none;
	text-align:center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
	border-radius: 50px 50px 50px 50px;
    padding: 20px 30px;
}
.btn3{
	display: inline-block;
	/*font-family: Arial, sans serif;*/
	background-color: #54B5F5;
	border:0px solid #54B5F5;
	color:#ffffff;
    }
	
.btn i{
    font-size: 18px;
    margin: auto;
}

.btn:hover,
.btn:focus{
    background-color: #000;
	color:#fff;
}
.btn3:hover,
.btn3:focus{
    background-color: #e72629;
	color:#fff;
}
/* Shop */
/*.address{
		font-family:Arial, sans serif;*/
		/*font-family:Arial, sans serif;
background-color:#64666c;
}*/

.address{
	padding: 0 7%;
    color: black;
	}
	
.address h3{
	font-size:20px;
	text-align:center;
	padding-bottom:0;
	margin-bottom:0;
}

.autour-shop{
	/* background-image: linear-gradient(to right, #2980b9, #92bbda, #c7c2f3); */
	background-color:#2265d8;
    border-radius: 30px 30px 0 0;
    padding: 35px 0 30px 0;
    color: white;
	/* border: 1px solid #374183;*/
}
	
.shop{
	color:#fff;
    text-align: center;
	margin:0 auto;
}
.shop2{

    text-align: center;
    padding: 20px 0 20px;
    margin: 0px auto 20px;
}
.shop img {
    display: block;
    margin: auto;
    max-width: 40%;
}
.shop h3{
    font-size: 20px;
    margin: 0 0 10px 0;
}

.shop p{
    font-size: 20px;
    line-height: 1.3;
	margin : 0 0 4%;
}

.shop2 p{
    font-size: 20px;
    line-height: 1.3;
}

.shop2 h4{
	font-weight:500;
    font-size: 18px;
    line-height: 1.3;
}
.shop .btn1{
    display: inline-block;
    width: 45%;
    color: #fff;
    padding: 9px 5px;
    margin: 0 1%;
    box-sizing: border-box;
    background-color: #e72629;
    text-decoration: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px; 
}
.shop .btn2{
	display: inline-block;
    width: 45%;
    color: #e72629;
    padding: 9px 5px;
    margin: 0% 1%;
    box-sizing: border-box;
	border:1px solid #e72629;
    background-color: #ffffff;
    text-decoration: none;
	text-align:center;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px; 
}

.shop .website-link a{
    color:#e72629;
}

.shop .btn i{
    font-size: 18px;
    margin-right: 10px;
}

.shop .btn1:hover,
.shop .btn1:focus{
    background-color: #990102;
}
.shop .btn2:hover,
.shop .btn2:focus{
    background-color: #990102;
	color:#ffffff;
}
.shop .btn3:hover,
.shop .btn3:focus{
    background-color: #990102;
}

.gmaps
{
border-radius: 30px 30px 30px 30px;
}

#framemaps {
    /*border-radius: 20px 20px 20px 20px;
    /* border: 2px solid #0000ff;*/
	height: 560px;
	width:99.3%;
    border-radius: 0 0 30px 30px;
    /*border: 1px solid #374183;*/

}

/* social */
.social {
		background-color: #ffffff;
		color:#003883;
		text-align: center;
}
.social img{
    display: inline-block;
	margin:auto;padding:0;border:0;
	width:46px;
}
.social p strong{
    font-family: Arial, sans-serif;
	text-align: center;
    padding: 0 6%;
    line-height: 1.3;
	margin-bottom:12px;
	margin-top:12px;
	color:#003883;
}
.social hr {
	display: block;
	clear: both;
	height: 0;
	margin: 20px auto 20px;
	padding: 0;
	text-align: center;
	border-top: 1px solid #003883;
	width:80%;
}
.social hr:after {
	height: 0;			
	letter-spacing: 1em;
	color:#003883;
	text-align: center;
}

/* footer */

footer{
	width: 100%;
	max-width:500px;
	color:#212527;
	padding:20px 0px;
}
footer p{
	margin: 12px;
	color:#212527;
}
footer #divAnim{
    display: inline-block;
    display: none;
    width: 100%;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;

}

footer #divAnim.bitou{
    display: block;
	text-align:justify;
}

footer a, footer a i{
    display:block;
    text-align: center;
    width: 100%;
    font-size: 13px;
    cursor: pointer;
	color:#212527;
	}


footer #divC{
    font-size: 12px;
    color: #555;
}

footer #divC:after{
    content: "";
    display:block;
    clear: both;
}

/* Début CSS Slider */

.slider-section {
  position: relative;
  /* max-height: 360px; */
  display: block;
  padding: 0;
  margin: 0;
}

@media (max-width: 500px) {
  
  
  
  .slider-section {
    max-height: 420px;
  }
}

.slider {
  margin: 10px auto;
  max-width: 500px;
}

.btn-slide {
  display: block;
  width: 70%;
  margin: 10% auto 0;
  position: absolute;
  bottom: 2%;
  left: 13.5%;
}

.slide_viewer {
  height: 470px;
  overflow: hidden;
  /* position: relative; */
}

.slide_group {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
  background-color: #fff;
}

.slide:first-child {
  display: block;
}

a.slide_btn0 {
  color: rgba(255, 255, 255, 0.27);
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  cursor: none;
}
a.slide_btn1 {
  color: rgba(255, 255, 255, 0.27);
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  cursor: none;
}
a.slide_btn2 {
  color: rgba(151, 27, 68, 0.27);
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  cursor: none;
}
a.slide_btn3 {
  color: rgba(123, 168, 96, 0.27);
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  cursor: none;
}
.slide_btn0.active,
.slide_btn0:hover {
  color: rgba(255, 255, 255, 0.77);
  cursor: pointer;
}
.slide_btn1.active,
.slide_btn1:hover {
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.slide_btn2.active,
.slide_btn2:hover {
  color: rgba(151, 27, 68, 0.93);
  cursor: pointer;
}
.slide_btn3.active,
.slide_btn3:hover {
  color: rgba(123, 168, 96, 0.72);
  cursor: pointer;
}

.slide_buttons {
  position: absolute;
  bottom: 55px;
  left: 0;
  right: 0;
  text-align: center;
  /* margin-bottom: 25px; */
  /* background-color:#fff; */
}
a.slide_btn {
  color: #3a3837;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  cursor: none;
}
.slide_btn.active,
.slide_btn:hover {
  color: #ffffff;
  cursor: pointer;
}

.directional_nav {
  /* height: 300px;
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    top: -300px; */
}

.previous_btn {
  bottom: 50%;
  left: 2%;
  margin: auto;
  position: absolute;
}

.next_btn {
  bottom: 50%;
  margin: auto;
  position: absolute;
  right: 2%;
}

.previous_btn,
.next_btn {
  cursor: pointer;
  height: 25px;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.previous_btn:hover,
.next_btn:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .previous_btn {
    left: 2%;
  }
  .next_btn {
    right: 2%;
  }
}

@media only screen and (max-width: 400px) {
  .slide_viewer {
    height: 440px;
  }
}

@media only screen and (max-width: 360px) {
  .slide_viewer {
    height: 360px;
  }
}

@media only screen and (max-width: 340px) {
  .slide_viewer {
    height: 340px;
  }
}
.swiper-pagination-bullet-active {
  background-color: #fff !important;
}

.swiper-pagination-bullet {
  background-color: #fff !important;
}

.slider-section{
  background-color: #fff;
}

.btn3 {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

/* Fin CSS Slider */
.swiper-pagination {
  position: relative !important;
  bottom: 68px !important;
  z-index: 999 !important;
}

.swiper-button-next, .swiper-button-prev {
  top: 33% !important;
}


/* grattage */

#canvas {
  display: flex;
}

/* end scratch coupon */


/* ANIMATED TITLE */

@import url('https://fonts.googleapis.com/css?family=Roboto:700');
@keyframes showTopText {
  0% { transform: translate3d(0, 100%, 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes showBottomText {
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.animated-title {
  color: #222;
  font-family: Roboto, Arial, sans-serif;
  height: 90vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90vmin;
}
.animated-title > div {
  height: 50%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.animated-title > div div {
  font-size: 12vmin;
  padding: 2vmin 0;
  position: absolute;
}
.animated-title > div div span {
  display: block;
}
.animated-title > div.text-top {
  border-bottom: 1vmin solid #000;
  top: 0;
}
.animated-title > div.text-top div {
  animation: showTopText 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  bottom: 0;
  transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
  color: #767676;
}
.animated-title > div.text-bottom {
  bottom: 0;
}
.animated-title > div.text-bottom div {
  animation: showBottomText 0.5s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
  top: 0;
  transform: translate(0, -100%);
}


/* FLIP CARD */
.card {
  margin: 0px;
}

input[type='checkbox'] {
  display: none;
}

/* Flip Cards CSS */

.card-container {
container-name: remiseContainer;
container-type: inline-size;
  display: grid;
  perspective: 1000px;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
  
}


.card-flip div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.card-img-top{
  position:relative;
}
.card-block h4{
position: absolute;
color:rgb(1, 29, 112);
    bottom: 30.1%;
    right: 11%;
    text-align: center;
    font-size: 15.5cqi;
    margin: 0;
    font-weight:normal;
    padding: 0;
	z-index: 10; 
}

.card-flip {
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  /* transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; */
}

input[type='checkbox']:checked + .card-container .front {
  opacity: 0;
  transform: translateX(-100%);   /* Shift the front card off-screen to the left */
}

input[type='checkbox']:checked + .card-container .back {
  opacity: 1;
}
.front {
  z-index: 2; /* Assurez-vous que la page avant est au-dessus */
}
.back{
	z-index:1;
	backface-visibility:hidden;
}
.open {
  transform: translateX(100%);
}


.front {
  grid-area: frontAndBack;
     
}

.back {
	position:relative;
  grid-area: frontAndBack;
  /* transform: rotateY(-180deg); */
 
}

.banner__text_cliquez {

  position: absolute;
  z-index: 3;
	left: 45cqi;
    top: 90cqi;
  width:40%;
  font-weight: normal;
  /* font-size: 3.1666666667vw; */
    /* line-height: 1.3; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.6%; /* 0 5% original */
  opacity: 0;
  text-align: center;
  margin: 1%;
  border-radius: 6% 6% 6% 6% / 6% 6% 6% 6%;
  /*background-color:#fff;*/
  gap:10px;
  /* animation: pulse 2s infinite; */
    /* animation: cards 4s infinite ease-in-out both; */
   /*animation: cardFloat 3s ease-in-out infinite;*/
	
}
 .cliquez {
	 color: #040478;
		animation: pulse 2s infinite;
		padding: 5%;
		border-radius: 6% 6% 6% 6% / 6% 6% 6% 6%;
		background-color: white;
		box-shadow: 4px 5px 11px -1px #0e71e3;
 }
 .cards {
	   animation: pulse 2s infinite;
       width:100%;
	   padding:4%;
	   border-radius: 6% 6% 6% 6% / 6% 6% 6% 6%;
 }

/* input[type='checkbox']:checked + .card-container .card-flip { */
  /* transform: rotateY(180deg); */
/* } */


        .cards:nth-child(1) {
            animation-delay: -1.5s;
            background: white;
            color: white;
        }

        .cards:nth-child(2) {
            animation-delay: 0s;
            background: white;
            color: var(--text-color);
        }

        @keyframes cardFloat {
            0%, 100% {
                transform: translateY(0) rotate(5deg);
            }
            50% {
                transform: translateY(-15px) rotate(9deg);
            }
        }

        .cards::before {
            content: '';
            position: absolute;
            bottom: -42px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 10px;
            background: #64666c66;
            border-radius: 50%;
            opacity: 0.7;
            transition: all 0.6s ease;
        }

        .cards:hover {
            transform: scale(1.05) rotateX(10deg);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .cards:hover::before {
            width: 60%;
            opacity: 0.5;
        }


/* Banner1 */
.banner1 {
    container-name: remiseContainer;
    container-type: inline-size;
    text-align: center;
    position: absolute;
    left: 0;
    top: 10vh; /* Utiliser vh pour un positionnement dynamique en hauteur */
    width: 100%; /* Utiliser 100% de la largeur du parent */
    height: auto; /* Hauteur automatique pour garder les proportions */
    margin-left: 5px;
    padding: 0 5%; /* Un peu de padding pour la réactivité */
	
}

/* Banner2 */
.banner2 {
    container-name: remiseContainer;
    container-type: inline-size;
    text-align: center;
    position: absolute;
    left: 53%; /* 53% pour que la bannière soit à moitié de l'écran */
    top: 10vh; /* Même ajustement pour la hauteur */
    width: 100%; /* Largeur complète de l'élément parent */
    height: auto;
	display: flex
;
    justify-content: space-between;
    width: 100%;
    height: 82%;
	
    position: absolute;
    top: 14cqi;
    left: 0px;
    z-index: 3;
}

/* Media Query pour les petits écrans (mobiles) */
@media (max-width: 600px) {
    .banner1, .banner2 {
        left: 0%; /* Pour que les bannières occupent toute la largeur sur mobile */
        width: 100%; /* Toujours occuper toute la largeur */
        top: 5vh; /* Réduire le top pour plus de visibilité sur petits écrans */
        margin-left: 10px
	; /* Réinitialiser le margin */
	
    }

    /* Optionnel: ajuster la taille de la bannière sur mobile */
    .banner1 {
        height: 50vh; /* Ajuster la hauteur en fonction de l'écran */
    }

    .banner2 {
        height: 50vh;
    }
}






.banner1 {
	container-name: remiseContainer;
	container-type: inline-size;
    text-align: center;
	position: absolute;
    left: 3%;
	top: -80cqi;
	width: 100%;
	height: 100%;

	
	
}
.banner2 {
	container-name: remiseContainer;
	container-type: inline-size;
    text-align: center;
	position: absolute;
    left: 53%;
	top: -80cqi;
	width: 100%;
	height: 100%;

}
.banner__baseline {
     color: #f3f2f2;
    display: flex;
    text-align: center;
    position: absolute;
    z-index: 2;
	margin-top:15px;
}
.banner__text_baseline {
   font-size: 4.5cqi;
    font-weight: normal;
    text-align: center;
    margin: auto;
    width: 86%;
	top: -50cqi;
}


.banner__text {
 /* Changement de couleur de fond */
	position: absolute;
	width: 128%;
    height: 64%;
    left: 21%;
    top: 1cqi;
	

}
.banner__text_content {
  position: absolute;
  z-index: 3;
  left: -19.5%;
  top: 100cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.6%; /* 0 5% original */
  opacity: 0;
  text-align: center;
  margin: 2%;
  border-radius: 6% 6% 6% 6% / 6% 6% 6% 6%; ;
  /*box-shadow: 7px 7px 40px 2px #0ed7d4;*/
  background-color:#fff;
  gap:10px;
  /*animation: pulse 2s infinite;*/
}



.banner__text_content--active {
  opacity: 1; /* To ensure the active content is visible */
}

.banner__text_gift {
  margin: 2% 0; 
}

.banner__text_price {
  display: flex;
  color:#0000ff;
}

.banner__text_amount {
  font-size: 16.3333333333vw; 
  line-height: 85%;
  font-weight: bold;
  color:#0000ff;
  font-family:Hurme;
}

@media only screen and (max-width: 600px) {
.
__text_content {
    padding: 5%;
  }
}
@media only screen and (min-width: 3px) {
.banner__text_baseline {
   margin-top:5px;
  }
}
@media (min-width: 37.5em) {
  .banner__text_amount {
    font-size: 98px; 
  }

}

.banner__text_group {
  position: relative;
  top: -3%; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 1.5%; 
}

.banner__text_currency {
  font-size: 6vw; 
  font-weight: bold;
}

@media (min-width: 37.5em) {
  .banner__text_currency {
    font-size: 36px; 
	margin-top:13px;
  }
}

.banner__text_taxes {
  font-size: 3.75vw; 
  font-weight: bold;
}

@media (min-width: 37.5em) {
  .banner__text_taxes {
    font-size: 22.5px; 
  }
}

.banner__text_promo {
  font-size: 5.3333333333vw; 
  font-weight: bold;
  margin: 0.125em 0; 
  color:#0000ff;
}

@media (min-width: 37.5em) {
  .banner__text_promo {
    font-size: 32px; 
  }
}

.banner__text_sup {
  font-size: 2.5vw; 
  font-weight: 400;
}

@media (min-width: 37.5em) {
  .banner__text_sup {
    font-size: 15px; 
  }
}

.banner__text_regular {
	color:black;
  font-size: 3.1666666667vw;
  line-height: 1.3;
}

@media (min-width: 37.5em) {
  .banner__text_regular {
    font-size: 23px; 
  }
}




/* ANIMATION pulse */
.blob {
	background: black;
	border-radius: 50%;
	margin: 10px;
	height: 20px;
	width: 20px;
}
	
.blob {
	background: black;
	border-radius: 50%;
	margin: 10px;
	height: 20px;
	width: 20px;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(70, 130, 180, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(70, 130, 180, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(70, 130, 180, 0);
	}
}
@keyframes pulse-cliquez {
	0% {
		transform: scale(0.95);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.95);
	}
}


}