html { font-size: 100%; background-color:#eeeee;}
span {vertical-align:middle;display: table-cell;}
.text-blanc,  .text-blanc a { color: #ffffff; }

.bulle { position: absolute; border: 0px solid #888888;  border-radius: 50%; text-align: center; opacity:1; display: table; aspect-ratio: 1/1; height:auto}
.obj { position: absolute;  text-align: center; opacity:1; display: table; border: 0px solid #888888;}

.badc, .bdev, .cadc, .eadc, .tel { position: absolute; border: 0px solid #888888;}
.badc{ background-color:#000000; color:#ffffff; width: 34%; top: 19%; right:0px; font-size:14vw; line-height: 1em; padding-left:2%; height:auto; aspect-ratio: 2/1; }
.bdev{ background-color:#000000; color:#ffffff; width: 100%; bottom: 0; left:0px; right:0px; font-size:5vw; line-height: 1em; letter-spacing: 0.2vw; text-align: center;  height:auto; aspect-ratio: 16/1; }
.cadc{ background-color:#000000; color:#ffffff; width: 100%; bottom: -23%; right:0px; font-size:2vw; line-height: 1em; padding-left:2%; padding-right:2%; height:20%; aspect-ratio: 2/1;
display: flex;justify-content: right;align-items: center;
 }
.tel {
background-color:#000000; color:#ffffff; width: 100%; bottom: 30%; right:0px; font-size:5vw; line-height: 1em; padding-left:2%; padding-right:2%; height:100px; 
display: flex; justify-content: center; align-items: center;
}
 
.eadc {
  background-color: #950202;
  color: #ffffff;
  bottom: 12%;
  left: 20px;
  right: 20px;
  font-size: 2vw;
  line-height: 3em;
  letter-spacing: 1.2vw;
  text-align: center;
  height: auto;
  aspect-ratio: 16/1;
  font-family: "Impact", sans-serif;
  text-transform: uppercase;
}

.eadc a {
  color: #ffffff;
  font-size: 2vw;
  padding: 0.5em 2em;
  text-decoration: none;
  border: 3px solid #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, #111 20%, #950202 100%);
  box-shadow: 0 0 10px #ff0000, inset 0 0 5px #000;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-weight: bold;
}

/* Effet au survol */
.eadc a:hover {
  background: linear-gradient(135deg, #950202 20%, #111 100%);
  color: #ffcc00;
  border-color: #ffcc00;
  box-shadow: 0 0 20px #ffcc00, 0 0 30px #ff0000;
  animation: war-shake 0.3s infinite;
}

/* Animation type explosion/vibration */
@keyframes war-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-2px, 2px) rotate(-1deg); }
  40% { transform: translate(-2px, -2px) rotate(1deg); }
  60% { transform: translate(2px, 2px) rotate(0deg); }
  80% { transform: translate(2px, -2px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(-1deg); }
}

/* Ajout d’un effet de cadre “militaire” clignotant */
.eadc a::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 2px dashed #ffffff;
    border-radius: 10px;
  opacity: 0.6;
  animation: blink-frame 1s infinite alternate;
}

@keyframes blink-frame {
  from { opacity: 0.2; }
  to { opacity: 1; }
}
.hamburger-menu { position: fixed; top: 20px; right: 20px; z-index: 1000;}
.hamburger {cursor: pointer;display: flex;flex-direction: column;justify-content: space-between;width: 30px;height: 25px;}
.bar {width: 100%;height: 3px;background-color: #333;}
.menu {display: none;position: absolute;top: 40px;right: 0;background-color: #000000;border: 1px solid #ccc;box-shadow: 0px 8px 16px rgba(0, 0, 0, 1); font-size:20px; width:200px; }
.menu.show {display: block;}
.menu ul {list-style: none;padding: 10px;}
.menu ul li { margin: 10px 0;}
.menu ul li a {color: #ffffff;text-decoration: none;padding: 2px 2px;display: block;}
.menu ul li a:hover {background-color: #ffffff;color: #000;}
.hamburger.open .bar:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.hamburger.open .bar:nth-child(2) {opacity: 0;}
.hamburger.open .bar:nth-child(3) {transform: rotate(-45deg) translate(10px, -10px);}

 
.fenetre {  display:none; }

.bulle a  {  cursor:pointer;  }

.orange   { background: rgb(230,95,37);  background: linear-gradient(192deg, rgba(230,95,37,1) 0%, rgba(236,122,45,1) 100%); }
.rouge    { background: rgb(167,5,15);   background: linear-gradient(192deg, rgba(167,5,15,1) 0%, rgba(233,16,40,1) 100%); }
.bordeaux { background: rgb(138,2,67);   background: linear-gradient(192deg, rgba(138,2,67,1) 0%, rgba(184,0,67,1) 100%); }
.rose     { background: rgb(190,6,75);   background: linear-gradient(192deg, rgba(190,6,75,1) 0%, rgba(239,78,132,1) 100%);  }
.jaune    { background: rgb(250,156,61); background: linear-gradient(192deg, rgba(250,156,61,1) 0%, rgba(250,212,70,1) 100%);   }
.bleu     { background: rgb(8,71,101);   background: linear-gradient(192deg, rgba(8,71,101,1) 0%, rgba(0,113,131,1) 100%);  }
.vert     { background: rgb(58,132,46);  background: linear-gradient(192deg, rgba(58,132,46,1) 0%, rgba(49,161,81,1) 100%); }
.violet   { background: rgb(79,54,126);  background: linear-gradient(192deg, rgba(79,54,126,1) 0%, rgba(120,80,157,1) 100%);  }
.vert2    { background: rgb(79,122,21);  background: linear-gradient(192deg, rgba(79,122,21,1) 0%, rgba(142,195,92,1) 100%);   }
.bleu2    { background: rgb(0,129,192);  background: linear-gradient(192deg, rgba(0,129,192,1) 0%, rgba(0,162,236,1) 100%);}

		.b1 img, .b9 img, .b3 img { width: 50%; }
		.b4 img, .b5 img, .b10 img { width: 55%; }
		.b2 img, .b7 img, .b8 img, .b14 img { width: 45%; }
		.b21 img { width: 80%; }
		.b22 img, .b23 img, .b24 img, .b25 img, .b26 img, .b27 img, .b28 img, .b29 img, .b31 img, .b32 img, .b33 img, .b34 img, .b35 img, .b36 img, .b37 img, .b38 img, .b40 img { width: 100%;  }


@-webkit-keyframes move_eye { from { transform: rotate(5deg); } to { transform: rotate(-5deg); }  }
@keyframes move_eye { from { transform: rotate(5deg); } to { transform: rotate(-5deg); }  }
a .b1:hover, a .b3:hover, a .b4:hover, a .b5:hover, a .b2:hover, a .b7:hover, a .b9:hover, a .b10:hover, a .b14:hover, a .b21:hover, a .b40:hover, a .b41:hover
{ z-index: 5; -moz-box-shadow:4px 4px 10px #000000; -webkit-box-shadow:4px 4px 10px #000000; box-shadow:4px 4px 10px #000000;  }


 
a .b1,  a .b4, a .b14, a .b5 {-webkit-animation: 2s ease 0s infinite alternate move_eye; animation: 2s ease 0s infinite alternate move_eye; }
a .b3,  a .b9, a .b41 {-webkit-animation: 1.5s ease 0s infinite alternate move_eye; animation: 1.5s ease 0s infinite alternate move_eye; }
a .b7,  a .b40, a .b2 {-webkit-animation: 1.2s ease 0s infinite alternate move_eye; animation: 1.2s ease 0s infinite alternate move_eye; }
a .b21, a .b10, a .b17 {-webkit-animation: 0.8s ease 0s infinite alternate move_eye; animation: 0.8s ease 0s infinite alternate move_eye; }


.card.flip-card .card-body{padding: 0 0; }
.flip-card {
    perspective: 1000px;
    position: relative; /* Garder la carte dans son flux */
    width: 100%;
    /*height: 100%;*/
}

.flip-card-inner {
    position: relative; /* Garder l'élément en place */
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
    
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Supprimer les propriétés de centrage vertical */
    display: block; /* Remettre le comportement par défaut de block */
    padding-top: 0; /* Assure-toi que le padding est nul en haut */
    justify-content: flex-start; /* Aligner le contenu en haut */
    align-items: flex-start; /* Aligner les éléments enfants en haut */
}

.flip-card-front {
    transform: rotateY(0deg);
}

.flip-card-back {
    transform: rotateY(180deg);
    position: absolute; /* Ceci garde le verso caché à l'origine mais le montre lors du flip */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	font-size:0.9em;
	overflow: auto;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}




		.b1 {left:24%; top:12%; width: 19%;}
		.b2 {left:15%; top:27%; width: 18%;}
		.b3 {left:27%; top:37%; width: 21%;}
		.b4 {left:41%; top:19%; width: 11%;}
		.b5 {left:10%; top:20%; width: 12%;}
		.b6 {left:9%;  top:36%; width: 10%;}
		.b7 {left:41%; top:50%; width: 15%;}
		.b8 {left:55%; top:36%; width: 15%;}
		.b9 {left:12%; top:45%; width: 12%;}
		.b10 {left:56%; top:25%; width: 12%;}
		.b11 {left:60%; top:17%; width: 4%;}
		.b12 {left:21%;  top:21%; width: 6%;}
		.b13 {left:41%;  top:7%; width: 6%;}
		.b14 {left:24%;  top:5%; width: 11%;}
		.b15 {left:18%;  top:11%; width: 5%;}
		.b16 {left:7%;  top:33%; width: 4%;}
		.b17 {left:51%; top:16%; width: 6%;}
		.b18 {left:22%; top:60%; width: 5%;}
		.b19 {left:56%; top:60%; width: 4%;}
		.b20 {left:65%; top:38%; width: 7%;}
		.b21 {left:43%; top:29%; width: 20%;}
		.b22 {left:27%; top:68%; width: 3%;}
		.b23 {left:38%; top:3%; width: 4%;}
		.b24 {left:61%; top:62%; width: 3%;}
		.b25 {left:55%; top:69%; width: 4%;}	
		.b26 {left:32%; top:2%; width: 4%;}
		.b27 {left:4%; top:24%; width: 5%;}
		.b28 {left:57%; top:12%; width: 4%;}
		.b29 {left:76%; top:29%; width: 4%;}	
		.b30 {left:18%; top:63%; width: 3%;}
		.b31 {left:6%; top:42%; width: 3%;}	
		.b32 {left:48%; top:6%; width: 2%;}	
		.b33 {left:1%; top:37%; width: 5%;}
		.b34 {left:70%; top:23%; width: 5%;}
		.b35 {left:9%; top:18%; width: 3%;}	
		.b36 {left:71%; top:47%; width: 3%;}	
		.b37 {left:13%; top:13%; width: 3%;}
		.b38 {left:66%; top:20%; width: 3%;}	
		.b39 {left:69%; top:32%; width: 3%;}
		.b40 {left:36%; top:8%; width: 2%;}
		.b41 {left:73%; top:52%; width: 2%;}	
		
		

@media screen and (max-width: 1280px) {

}


@media all and (min-width: 1024px) and (max-width: 1280px) {

}

@media all and (orientation: portrait) {
	.b1 {top:6%;}
		.b2 {top:13%;}
		.b3 {top:18%;}
		.b4 {top:10%;}
		.b5 {top:10%;}
		.b6 {top:18%;}
		.b7 {top:25%;}
		.b8 {top:18%;}
		.b9 {top:22%;}
		.b10 {top:12%;}
		.b11 {top:8%;}
		.b12 {top:10%;}
		.b13 {top:3%;}
		.b14 {top:2%;}
		.b15 {top:11%;}
		.b16 {top:16%;}
		.b17 {top:8%;}
		.b18 {top:30%;}
		.b19 {top:30%;}
		.b20 {top:19%;}
		.b21 {top:14%;}
		.b22 {top:34%;}
		.b23 {top:2%;}
		.b24 {top:31%;}
		.b25 {top:35%;}	
		.b26 {top:1%;}
		.b27 {top:12%;}
		.b28 {top:6%;}
		.b29 {top:15%;}	
		.b30 {top:31%;}
		.b31 {top:21%;}	
		.b32 {top:3%;}	
		.b33 {top:18%;}
		.b34 {top:12%;}
		.b35 {top:9%;}	
		.b36 {top:24%;}	
		.b37 {top:6%;}
		.b38 {top:10%;}	
		.b39 {top:16%;}
		.b40 {top:4%;}
		.b41 {top:27%;}	
		.badc{top: 10%;}

		.bdev{}
.fenetre-dialog.col-3{  margin-left:  2% !important ;  margin-right:  2% !important;   opacity:1 !important;    }
		}
		

		
.bgnoir	{ z-index: 2; background-color:#222222CC; position: fixed; top: 0;left: 0; width: 100%;height: 100%;}
.fenetre { z-index: 100;  position: fixed;  top: 10%;  left: 10%;  overflow: auto;  max-height: 60vh;  bottom: 10%;  right: 10%; }
.fenetre-dialog {  margin:  20px ;  position: relative; opacity:0.95;  width: auto;  pointer-events: none; border-radius: 8px;  box-shadow:8px 8px 5px 5px rgba(0, 0, 0, 0.5) ;}
.fenetre-content {color:  #000000; background-color:  #ffffff ; position: relative; display: flex; flex-direction: column; width: 100%;  pointer-events: auto; background-clip: padding-box; border: 1px solid #888888;  outline: 0; }
.fenetre-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #888888; color: #ffffff; background-color: #000000;}
.fenetre-header h5{  font-size: clamp(1.2rem, 5vw, 3.3rem);}

.fenetre-title {margin-bottom: 0; line-height: 10px }
.fenetre-body{ padding: 10px; position: relative;  flex: 1 1 auto; }

.fenetre-dialog.col-3{  margin-top:  20px ;  margin-bottom:  20px ;  margin-left:  3% ;  margin-right:  36%;   opacity:1;  width: auto;  }


#fenetre_cloud {  top: 3%; left:0px; max-height:80vh;-moz-box-shadow:4px 4px 10px #000000; -webkit-box-shadow:4px 4px 10px #000000; box-shadow:4px 4px 10px #000000; } 
#fenetre_cloud .fenetre-dialog.col-3 {
  margin-top: 20px;
  margin-left: 3%;
margin-right: 24%;
}
#fenetre_cloud .fenetre-content {
  width: 131%;
}


@media screen and (max-width: 767.98px) { /* < md en BS5 */
.fenetre { top: 2%;  left: 2%;  overflow: scroll;  max-height: 70%;  bottom: 2%;  right: 2%; }

}

@media screen and (max-width: 575.98px) {
.fenetre { top: 2%;  left: 2%;  overflow: scroll;  max-height: 70%;  bottom: 2%;  right: 2%; }
}