body {
  background:rgba(255,255,255,1.0);
  _background:rgb(220,220,200,0.5);
  _background-repeat:no-repeat;
  _background-attachment:fixed;
  _background-position:bottom right;
  _background-image:url(../images/web_2023/vague1.png);
  _background-size:60%;    
  opacity: 0;
  _transition: opacity 0.5s;

}
/*
rgb(162, 24, 91) #a2185b Mauve
rgb(214, 11, 82) #d60b52 Rose
rgb(40, 152, 213) #2898d5 Bleu
rgb(148, 193, 31) #94c11f Vert
rgb(243, 146, 0) #f39200 Orange
*/

.center_vertical {
  height:100%;
  display:flex; align-items:center; 
  justify-content:center;
}
.circle_mauve,.circle_rose, .circle_bleu, .circle_rose, .circle_orange, .circle_vert {
  display: block;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: auto;
  margin-top:10px;
  margin-bottom:10px;
  border:1px solid rgba(190,190,190,1.0);
  color:rgb(30,30,30,);
  transition-duration:0.4s;
  text-align:center;
}
.circle_mauve,.circle_rose, .circle_bleu, .circle_rose, .circle_orange, .circle_vert {
  transition-duration:0.4s;
  color:rgba(255,255,255,1.0); text-shadow: black 0.1em 0.1em 0.2em;
}

.circle_mauve {
 background:rgba(162, 24, 91,1.0);
 _background-image: url("../images/web_2023/vignettes/mlbdm_carte_2024.jpg"); 
 background-image: url("../images/web_2023/vignettes/accueil_maml.png"); 
 background-position:center;
 background-size:120%;
 color:rgb(255,255,255);
 border:2px solid rgba(162, 24, 91,1.0);
 border:2px solid rgba(220,220,220,1.0);
 
 transition-duration:0.4s;
}
.circle_rose {
 background:rgba(214, 11, 82,1.0);
 color:rgb(255,255,255);
 border:2px solid rgba(214, 11, 82,1.0);
 border:2px solid rgba(220,220,220,1.0);
 transition-duration:0.4s;
}
.circle_bleu {
  background:rgba(40, 152, 213,1.0);
 color:rgb(255,255,255);
 _background-image: url("../images/web_2023/vignettes/jeune101.jpg"); 
 background-image: url("../images/web_2023/vignettes/accueil_jeune.png"); 
 background-position: center;
 background-size:120%;
 border:2px solid rgba(40, 152, 213,1.0);
 border:2px solid rgba(220,220,220,1.0);
 transition-duration:0.4s;
}
.circle_vert {
 background:rgba(148, 193, 31,1.0);
 _background-image: url("../images/web_2023/vignettes/emp102.jpg"); 
 background-image: url("../images/web_2023/vignettes/accueil_emp.png"); 
 background-position:center;
 background-size:120%;
 color:rgb(255,255,255);
 border:2px solid rgba(148, 193, 31,1.0);
 border:2px solid rgba(220,220,220,1.0);
 transition-duration:0.4s;
}
.circle_orange {
 background:rgba(243, 146, 0,1.0);
 _background-image: url("../images/web_2023/vignettes/services.jpg"); 
 background-image: url("../images/web_2023/vignettes/accueil_services.png"); 
 background-position:center;
 background-size:120%;
 color:rgb(255,255,255);
  border:2px solid rgba(243, 146, 0,1.0);
  border:2px solid rgba(220,220,220,1.0);
  transition-duration:0.4s;
}

.circle_mauve:hover {
 background:rgb(162, 24, 91,1.0);
 _color:rgb(30,30,30);
 letter-spacing:2pt;
 border:2px solid transparent;
 transition-duration:0.4s;
}
.circle_rose:hover {
 background:rgb(214, 11, 82,0.35);
 _color:rgb(30,30,30);
 letter-spacing:2pt;
 border:2px solid transparent;
}
.circle_bleu:hover {
 background:rgba(40, 152, 213,1.0);
 _color:rgb(30,30,30);
 letter-spacing:2pt;
 border:2px solid transparent;
 transition-duration:0.4s;
}
.circle_vert:hover {
 background:rgb(148, 193, 31,0.35);
 background:rgba(148, 193, 31,1.0);
 _color:rgb(30,30,30);
 letter-spacing:2pt;
 border:2px solid transparent;
}
.circle_orange:hover {
 background:rgb(243, 146, 0,1.0);
 _color:rgb(30,30,30);
 letter-spacing:2pt;
 border:2px solid transparent;
}

.circle_mauve:hover,.circle_rose:hover, .circle_bleu:hover, .circle_rose:hover, .circle_orange:hover, .circle_vert:hover {
  _background:rgba(220,220,220,1.0);
  transition-duration:0.4s;
}


.rect_bleu, .rect_vert, .rect_rose, .rect_orange, .rect_mauve {
_border:2px solid rgba(190,190,190,1.0);
border-radius:50px;
width:90%;
height:100px;
display:inline-block;
margin:10px;
color:rgba(255,255,255,1.0);
padding:2px;
}
.rect_bleu {
background:rgb(40, 152, 213); 
}
.rect_mauve {
background:rgb(162, 24, 91);  
}
.rect_rose {
background:rgb(214, 11, 82);  
}
.rect_vert {
background:rgb(148, 193, 31);  
}
.rect_orange {
background:rgb(243, 146, 0);  
}
.btn_rose:hover, .btn:hover, .btn_padd_0:hover {background:rgb(255,255,255);}
.btn_roseb {border:1px solid rgb(214, 11, 82);background:rgb(214, 11, 82);color:rgb(255,255,255);}