html {
    scroll-behavior: smooth;
  }

/***********************************************NAVBAR COMMUN************************************************************/
    
.navbar-brand img {
  max-height: 50px;
}
  
.logo{
  position: absolute; /*logo défini en position absolute pour l'animation*/
  margin-left: 10px;
}

.navbar-brand {
  font-size: 1.9rem;
  font-weight: bold;
}

/* Par defaut, la propriété fixed-top est telle que definie plus bas,
malheureusement cela fait afficher à droite une grosse page blanche sur les pages ressources et recherche */
/* Pour pallier à ce problème, on va la définir en position static, ce qui fait qu'elle ne pourra être repositionnée
par les propriétés right, top, left and bottom */
/* .fixed-top {
  position: fixed; 
  top: 0;
  right: 0;
  left: 0;
} */


@media screen and (max-width:767px) {
  .navbar-brand img {
      max-height: 28px;
  }
  .navbar-brand {
      font-size: 0px;
  }
  .logo{
      margin-top:0px;
  }
  .fixed-top{
    position: static;
  }
}

.navbar-light .navbar-brand .navbar-nav .nav-link a {
  color: rgb(22, 20, 20);
}

.navbar-light .navbar-toggler {
  color: rgb(22, 20, 20);
  border-color:#f8f9fa;
}

.bg-light {
  background: rgb(225, 227, 230);
}
a {
  text-decoration: none;
  background-color: #0ab6e000;
}
/*******************************************HEADER COMMUN AU RESSOURCES**************************************/
#enteteCommunRessources{
  width: 100%;
  height: 100%;
}

.enteCR{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.imageRetail{
  padding: 0;
  margin:0;
  width: 100%;
  height: 650px
}

/* .descriptionRessources{
  background: rgb(225, 227, 230);
} */
/* .textDescriptionRessources {
  font-size: 25px;
  padding: 5em 3em;
} */

.svg1{
  color: #f5f913;
  position: absolute;
  z-index: 15;
  width: 100px;
  right: 70%;
  margin-top: 0;
  transform: scale(1.4) rotate(10deg);
}

.svg2{
  z-index: 15;
  width: 100px;
  position: absolute;
  top:90%;
  left: 70%;
  margin-left: 115px;
  color: #93e3c0;
  transform: scale(1.4) rotate(189deg);
}
/******************************************PIED DU HEADER*******************************************************/
@media screen and (max-width: 767px){
    .piedHeader {
        display: none;
}
}

.piedHeader {
  width: 100%;
  position: absolute;
  border-bottom: 2px solid #fff;
  bottom: -30px;
  right: 0;
  height: 50px;
}

.piedHeader__background {
  fill: #fff;
}

.piedHeader__wave {
  fill: #ccc;
}

/************************************ICI CSS PAGE RESULTAT DE RECHERCHE***********************************/

.cadreRessources1{
  width:100%;
  display:block;
  text-align:center;
}
.div_saut_ligne{
  height: 80px;
}
.cadreRessources2{
  float:left;
  width:10%;
  height:40px;
}
.cadreRessources3{
  float:left;
  width:80%;
  height:40px;
  text-align:center;
}
.cadreRessources4{
  width:auto;
  display:block;
  height:auto;
  text-align:center;
  background-color:#ccccff;
  border:#7030a0 1px solid;
  padding:10px;
  box-shadow:4px 4px 0 1px rgb(62 123 141);
}
.cadreRessources5{
  width:100%;
  height:75px;
  display:inline-block;
}
.cadreRessources6{
  width:100%;
  height:auto;
  text-align:center;
}
.cadreRessources7{
  width:800px;
  display:inline-block;
}
.cadreRessources8{
  width:800px;
  float:left;
  text-align:center;
}

.title_center{
  width: 705px;
  float: left;
  height: 55px;
  text-align:center;
  border:#333 1px solid;
  border-radius: 10px;
  background-color:#ccccff;
  border:#7030a0 1px solid;
  color:#7030a0;
  font-size:20px;
  padding-top:16px;
  padding-bottom:10px;
  margin-bottom:20px;
  margin-left:40px;
}

.liste_div {
float:left;
}

.liste{
  width:350px;
  width:100px;
height:25px;
/*Coins arrondis*/
border:#333 1px solid;
-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 20px;
text-align:center;
font-size:14px;
background-color:#fff;
color:#7030a0;
font-weight:bold;
text-decoration:none;
color: #EDEEEE;
font-weight:bold;

background: linear-gradient( #555, #2C2C2C);
text-shadow: 0px 1px 0px white;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4);
box-shadow: 0 0 10px rgba( 0, 0, 0, 0.8),
     0 -1px 0 rgba( 255, 255, 255, 0.6);
text-decoration:none;
background:rgba(43,43,43,.4);
margin-left:10px;
margin-right:10px;
}
.taille{
  width:100px;
}
.column{
width:700px;
float:left;
height:350px;
text-align:left;
border:#333 1px solid;
border-radius: 10px;
background-color:#EDEEEE;
background:rgba(100,100,100,.1);
color:#6666;
font-weight:bold;
font-size:18px;
padding-top:16px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-bottom:20px;
margin-left:40px;
}


@media screen and (max-width:767px){
  .enteCR{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr /* 1fr */;
  }
  .imageRetail {
    max-height: 290px;
    padding-left: 2em;
    padding-right: 2em;
  }
/*   .descriptionRessources{
    display: none;
  } */
  /* .textDescriptionRessources {
    font-size: 12px;
    padding: 3rem 1rem;
  } */
  .svg1 {
    color: #f5f913;
    position: absolute;
    z-index: 15;
    width: 19px;
    right: 80%;
    margin-top: 0;
    transform: scale(1.4) rotate(10deg);
  }
  .svg2 {
    color: #93e3c0;
    position: absolute;
    z-index: 15;
    width: 19px;
    top: 22%;
    left: 50%;
    margin-left: 115px;
    transform: scale(1.4) rotate(189deg);
  }
  .div_saut_ligne {
    height: 60px;
  }
  .cadreRessources3 {
    float: left;
    width: 80%;
    height: 20px;
    text-align: center;
  }
  h1 {
    font-size: 1rem;
  }
  .cadreRessources5 {
    width: 100%;
    height: 60px;
    display: inline-block;
  }
  
}
@media screen and (min-width:280px) and (max-width:319px){
  .title_center {
    width: 250px;
    margin-left: 15px;
  }
}

@media screen and (min-width:320px) and (max-width:359px){
  .title_center {
    width: 250px;
  }
}

@media screen and (min-width:360px) and (max-width:374px){
  .title_center {
    width: 280px;
  }
}

@media screen and (min-width:375px) and (max-width:410px){
  .title_center {
    width: 300px;
  }
}
@media screen and (min-width:411px) and (max-width:539px){
  .title_center {
    width: 330px;
  }
}

@media screen and (min-width:540px) and (max-width:767px){
  .title_center {
    width: 330px;
  }
}

@media screen and (min-width:768px) and (max-width:800px){

  .textDescriptionRessources {
    font-size: 15px;
    width: 100%;
  }
  .imageRetail {
    max-height: 300px;
    padding-left: 1em;
    padding-right: 1em;
  }
  .svg2{
    z-index: 15;
    width: 100px;
    position: absolute;
    top:20%;
    left: 70%;
    margin-left: 115px;
    color: #93e3c0;
    transform: scale(1.4) rotate(189deg);
  }
  .fixed-top{
    position: static;
  }
  
}
/***************** *************************FOOTER COMMUN***************************************************/
footer {
  /* padding: 50px 0 0; on n'a vraiment pas besoin de ça, au contraire le footer est trop bas avec cette marge intérieure */
  background: rgb(225, 227, 230);
  color: rgb(22, 20, 20);
  width: 100%;
  display: block;
  overflow: hidden;
}

.containerfooter {
  /* margin-right: auto; */
  /* margin-left: auto; */
  padding: 15px 30px;
}

.rowfooter {
  /* display: flex;
  flex-wrap: wrap; */
  /* margin-right: -15px;
  margin-left: -15px; */
  margin-top:30px;
}
.text-center {
  text-align: center !important;
}

.col-xs-12 .col-sm-4{
  /* min-height: 1px; */
  /* padding-right: 15px; */
  padding-left: 15px;
}

.col-xs-12 {
width: 100%;
float: center;
}
/************* SHARE/FOLLOW*********************/
.container2 {
display: flex;
justify-content: center;
/* align-items: center; pour ne pas que le bouton follow au footer ne soit pas centré*/
height: 20vh;
filter: url(#goo);
}

.buttonshare {
z-index: 99;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
background: linear-gradient(45deg, #B388EB, #8093F1);
border-radius: 20px;
color: rgb(22, 20, 20);
font-size: 20px;
letter-spacing: 1px;
font-weight: 200;
}

.social {
opacity: 0;
position: relative;
margin: 8px;
width: 40px;
height: 40px;
border-radius: 100%;
display: inline-block;
color: #FFF;
font-size: 20px;
text-align: center;
}

.social i {
margin-top: 10px;
}
.social a {
color: #FFF;
}

.twitter {
background: #00aced;
}

.facebook {
background: #3b5998;
}

.google {
background: #dd4b39;
}

.youtube {
background: #bb0000;
}

.clicked {
opacity: 1;
transition: 1.2s all ease;
transform: translateY(56px);
}

/************* NEWSLETTER********/
.optin-container {
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
  width: 15rem;
  margin-right: auto;
}

.cta {
  background: #1262fb;
  color: rgb(22, 20, 20);
  cursor: pointer;
  padding-top: 1rem;
  padding-bottom: 0;
  text-decoration: none;
  overflow: hidden;
}

.stylefooer{
  font-size: 20px;
}

.formfooter {
  background: #1262fb;
  padding-bottom: 1rem;
}

div.spoiler {
  background: #1262fb;
  padding: 20px 10px 10px 10px;
  width: 100%;
  /* border: 1px solid black; */
  position: relative;
}

div.spoiler input.boutonSpoiler {
  position: absolute;
  top: -10px;
  left: 50px;
  background: #1262fb;
}

div.spoiler .hidden {
  display: none;
}

.input_form_contact1 {
  margin: 1rem 0.5rem;
  border: none;
  font-size: 1rem;
  outline: #1262fb;
}

.input_form_contact1:focus {
  outline:0.25rem solid #1b2942
}

.input_form_contact2 {
  background: linear-gradient(#1262fb, #1b2942);
  cursor: pointer;
  color: rgb(22, 20, 20);
  border: none;
  font-size: 1rem;
  margin: 0 0 0 1rem;
  padding: 0 3rem;
  transition: all 0.25s ease-in-out;
}
.input_form_contact2:hover {
  background: linear-gradient(#1262fb, #1b2942);
}

.textera_form_contact {
  border:none;
  width: 55%;
  padding: 15px 10px;
  margin:1px 0;
  font-size: 1.2em;
  font-family: 'Advent Pro', sans-serif;
  border-radius: 8px;
}

@media screen and (max-width:767px){
  .optin-container {
      width: 12rem;
      margin-left: 55px;
      margin-bottom: 30px;
      }
  .stylefooer{
      font-size: 15px;
      margin-bottom: 10px;
      }
  .tel{
      font-size: 15px;
      }
  .margin_bottom_tel{
      margin-bottom: 30px;
      }
  .input_form_contact2 {
      margin-top: 1rem !important;
      }
  .input_form_contact1 {
      width: 10rem;
      }
  div.spoiler input.boutonSpoiler{
      position: absolute;
      top: -10px;
      left: 25px;
  }
  }


#deuxièmeTrait {
  height: 1px;
  width: 75%;
  background-color: rgb(22, 20, 20);
  margin: 10px auto;
}
#copyrightEtIcons {
  display: flex;
  margin-bottom: 20px;
  padding: 0 10%;
}
#copyright {
  width: 40%;
  text-align: left;
  color: rgb(22, 20, 20);
}
#icons {
  width: 40%;
  text-align: right;
}
#icons a {
  display: inline-block;
  margin: 0 15px;
  font-size: 1.3em;
  color: rgb(22, 20, 20);
}
#icons a:hover {
  transform: scale(1.5);
  transition: 0.1s;
}
#mlegal{
    text-align: center;
    width: 20%;
}