/*
===============================
PAGE AUTODEFENSE INTELLECTUELLE
===============================
*/


/* Titres */
.cs_AI_ressources_title {
  color: var(--main-navbar-color);
  margin-top: -75px !important;
}
.cs_AI_bao_title {
  color: white;
  margin-top: -55px;
}
.cs_AI_ressources_title,
.cs_AI_bao_title {
  font-weight: 800;
  font-family: 'Roboto', serif;
  font-size:3em;
  text-align: center;
  margin-left: 0px;
  margin-bottom: 20px;
  padding-top: 50px;
}
@media (max-width: 450px) {
  .cs_AI_ressources_title,
  .cs_AI_bao_title {
      font-size: 11vw;
  }
}

/* Ressources */
.cs_AI_ressource_blocks {
  display:block;
  margin: 0 auto;
  margin-bottom: 20px;
  width: 80%;
}
.cs_AI_ressource_div {
  display:inline-block;
  position:relative;
  width: calc((100% - 2.8vw) / 2);
  height:150px;
  margin: 0 0.7vw 1vw 0.7vw;
  background-size: 70%,100%;
  background-repeat: no-repeat;
  background-position: center,center;
}
.cs_AI_ressource_div a img{
  height:100%;
  width:100%;
}
.cs_AI_debuter {
  background-image: url('../images/débuter_txt.png'),
                    url('../images/débuter_img.png');
}
.cs_AI_entrainer {
  background-image: url('../images/entrainer_txt.png'),
                    url('../images/entrainer_img.png');
}
.cs_AI_approfondir {
  background-image: url('../images/approfondir_txt.png'),
                    url('../images/approfondir_img.png');
}
.cs_AI_enseigner {
  background-image: url('../images/enseigner_txt.png'),
                    url('../images/enseigner_img.png');
}

@media (max-width: 1200px) {
  .cs_AI_ressource_blocks {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .cs_AI_ressource_div {
    background-size: 90%,auto 100%;
  }
}
@media (max-width: 552px) {
  .cs_AI_ressource_blocks {
    padding: 0 3vw 0 3vw;
  }
  .cs_AI_ressource_div {
    width:100%;
    height:150px;
    background-size: 70%,100% auto;
  }
}
@media (max-width: 450px) {
  .cs_AI_ressource_div {
    background-size: 90%,auto 100%;
  }
}


/* Boite à Outils */
.cs_AI_bao {
  background-color: var(--main-navbar-color);
  width: 100%;
  margin-top: 90px;
}
.cs_AI_bao_blocks {
  background-color: var(--main-navbar-color);
  margin-top: 50px;
  padding-right: 1.6vw;
}

.cs_AI_bao_div {
  display:inline-block;
  width:calc((100% - 4.8vw) / 3);
  position:relative;
  margin: 0px 0px 1.6vw 1.6vw;
  height:230px;
  background-repeat: no-repeat;
  background-size: 90%,auto 100%;
}
.cs_AI_bao_div a img {
  height:100%;
  width:100%;
}
.cs_AI_influence {
  background-image: url('../images/influence_txt.png'),
                    url('../images/influence_img.png');
  background-position: center, right -20px center;
}
.cs_AI_chiffres {
  background-image: url('../images/chiffres_txt.png'),
                    url('../images/chiffres_img.png');
  background-position: center, right -30px center;
}
.cs_AI_science {
  background-image: url('../images/science_txt.png'),
                    url('../images/science_img.png');
  background-position: center, left -80px center;
}
.cs_AI_information {
  background-image: url('../images/information_txt.png'),
                    url('../images/information_img.png');
  background-position: center, right -130px center;
}
.cs_AI_ethique {
  background-image: url('../images/ethique_txt.png'),
                    url('../images/ethique_img.png');
  background-position: center, center;
}
.cs_AI_langage {
  background-image: url('../images/langage_txt.png'),
                    url('../images/langage_img.png');
  background-position: center, left -40px center;
}

@media (max-width: 991px) {
  .cs_AI_bao_div {
    width:calc((100% - 3.2vw) / 2);
    height:200px;
  }
  .cs_AI_information {
    background-position: center, right -110px center;
  }
}
@media (max-width: 768px) {
  .cs_AI_bao {
    margin-top: 40px;
  }
}
@media (max-width: 695px) {
  .cs_AI_bao_div {
    height:150px;
  }
  .cs_AI_information {
    background-position: center, right -80px center;
  }
}
@media (max-width: 552px) {
  .cs_AI_bao_blocks {
    padding-right: unset;
  }
  .cs_AI_bao_div {
    width:calc(100% - 6vw);
    margin: 0 3vw 3vw 3vw;
    height:150px;
    background-size: 70%,100% auto;
    background-position: center, center;
  }
  .cs_AI_chiffres {
    background-position: center, right center;
  }
}
@media (max-width: 520px) {
  .cs_AI_bao_div {
    background-size: 70%,auto 100%;
  }
}
@media (max-width: 450px) {
  .cs_AI_bao_div {
    background-size: 90%,auto 100%;
  }
}