body{  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;}

 .h1,h1{font-size:calc(2.0rem + 2.0vw)}@media (min-width:1200px){.h1,h1{font-size:3.0rem; font-weight:600}}
 .h2,h2{font-size:calc(1.9rem + 1.9vw)}@media (min-width:1200px){.h2,h2{font-size:1.9rem}}
 .h3,h3{font-size:calc(1.4rem + 1.0vw)}@media (min-width:1200px){.h3,h3{font-size:1.0rem}}
 .h4,h4{font-size:calc(1.0rem + 0.7vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}
 .h5,h5{font-size:1.25rem}
 .h6,h6{font-size:1rem}

a{text-decoration:none; color:inherit; font-optical-sizing: auto;
  font-style: normal;}
  a:hover{ color:grey}
.bg-blue{background:#006eb4;}
.bg-grey{background:#ebebeb;}
#content{
margin-top:60px;
}

img{
max-width: 100%;
}

/**********NAIGATION**********************/
.nav-link{font-size:calc(0.7rem + 0.6vw); font-weight:600}
  @media (min-width:1200px){.nav-link{font-size:1.0rem}}

ul.dropdown-menu li a:hover{background:lightgrey!important;background-color: lightgrey!important;}





/**************************BUTTONS**************/
.btn {
	display: inline-block;
	font-weight: 600;
	padding:15px;
	overflow: hidden;
	position: relative;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color;
	transition-property: color;
	vertical-align: middle;
	border: 0;
	margin: auto;
	font-size: inherit;
  border-radius:0px;
}
.btn:before {
	bottom: 0;
	content: "";
	left: -5px;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: width;
	transition-property: width;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	width: 0;
	z-index: -1;
	border-radius: 0px;
	display: inline-block;

}
.btn:hover {
	padding: 15px;
}
.btn:hover:before {
	-webkit-transition-timing-function: cubic-bezier(.52,1.64,.37,.66);
	transition-timing-function: cubic-bezier(.52,1.64,.37,.66);
	width: calc(100% + 10px)
}





.btn-primary {background:#006eb4;}
       .btn-primary:hover {background:black}
     
     
 .btn-default {background:black; color:white}
       .btn-default:hover {background:#006eb4; color:white}    
     
     
     
     /*hover menu*/

          .dropend .dropdown-toggle {
            color: salmon;
            margin-left: 1em;
          }
          .dropdown-item:hover {
            background-color: lightsalmon;
            color: #fff;
          }
          .dropdown .dropdown-menu {
            display: none;
          }
          .dropdown:hover > .dropdown-menu,
          .dropend:hover > .dropdown-menu {
            display: block;
            xxmargin-top: 0.125em;
            xxmargin-left: 0.125em;
          }
          @media screen and (min-width: 769px) {
            .dropend:hover > .dropdown-menu {
              position: absolute;
              top: 0;
              left: 100%;
            }
            .dropend .dropdown-toggle {
              margin-left: 0.5em;
            }
          }



.btn-info {
  display: inline-block;
  position: relative;
  font-weight:800;
  padding: 15px;
  color: white; /* Couleur du texte */
  background-color: #006eb4; /* Couleur de fond */
  xxxoverflow: hidden;
  transition: all 0.3s ease; /* Transition fluide */
  padding-right: 50px;
  transition: color .3s ease-out,border .3s ease-out,background 0.7s ease-out,box-shadow .3s ease-out !important;
}
          
.btn-info::after {
  content: '\21FE'; /* Fleche droite */
  position: absolute;
  right: 10px; /* Position initiale */
  top: 3px;
  opacity: 1; /* Invisible au départ */
  transition: all 0.3s ease; /* Transition fluide pour l'apparition */
  font-size:1.8em
}


/* Déplacement du texte a gauche au survol */
.btn-info:hover {
  padding-right: 60px; /* Décale le texte vers la gauche */
  xxxcolor: #cdcd53!important;
  xxxborder-bottom:2px solid #09d4e9 !important;
  background:black; color:white
}

/* Apparition de la fleche a droite au survol */
.btn-info:hover::after {
  opacity: 1; /* La fleche devient visible */
  right: 10px; /* Positionne la fleche a droite du bouton */
  color: white!important;
}
   



footer{

}