* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  scroll-behavior: smooth;
  --res: calc(0.01 * 10vmin);
}
html {
  font-size: 80.5%;
}

/*Travaillons sur la barre de menu*/
header {
  background-color: #fff;
  padding: 0.5em;
  border-bottom: 1px solid #3534348a;
  box-shadow: 2px 0px 2px 2px #3534348a;
}
nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: clamp(0.4em, 30vw, 11em);
}
.listNavOrdi{
  display:none;
  gap:2em;
}
.listNavOrdi li {
  list-style: none;
}
.listNavOrdi li a{
  text-decoration: none;
  color:#0c0c0c;
  font-size:clamp(0.5rem, 40vw, 1.6rem);
}
.listNavOrdi li a:hover{
  color:#ed1f27;
}
.conteneur-btn-connecter a {
  text-decoration: none;
  font-size:clamp(0.5rem, 30vw, 1.75rem);
  background-color: #e85353;
  padding: 04px 10px;
  border-radius: 10px;
  color: #fff;
}

/*Section Acceuil*/
.acceuil {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(#fdfdfd4f, #fdfdfdf3),
    url(/img-acceuil-1.jpg);
  backdrop-filter: blur(10);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}
.texte-acceuil {
  margin-bottom: 60px;
}
.texte-acceuil h1 {
  text-align: center;
  font-size: calc(120 * var(--res));
  color: #e85353;
}
.texte-acceuil h2 {
  text-align: center;
  font-size: calc(62 * var(--res));
}
.texte-acceuil h2 span {
  color: #3664f4;
}

.citation-acceuil {
  margin-bottom: 50px;
}
.citation-acceuil p {
  text-align: center;
  font-size: calc(50 * var(--res));
  color: #525252;
}
.citation-acceuil p span {
  font-size: calc(40 * var(--res));
}
.btn-isncription-acceuil {
  text-align: center;
}

.btn-isncription-acceuil a {
  background-color: #e85353;
  padding: 0.6em;
  border-radius: 08px;
  text-decoration: none;
  color: #fff;
  font-size:clamp(0.5rem, 30vw, 1.65rem);
}
.container-accueil-img{
  display:none;
}


/*Section Avantage*/
.section-avantage {
  padding: 1em;
  /* background-color: #3664F4; */
}

.conteneur-avantage {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:1em;
}
.avantage-boite {
  flex: 1 1 140px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f3f9ff;
  border: 1px solid #3534348a;
}
.img-avantage-conteneur {
  width: 100%;
  height: auto;
  margin-bottom:0.7em;
  display: flex;
  justify-content: center;
}
.img-avantage {
  margin-top:0.7em;
  width:clamp(2em, 40vw, 4.5em);
  height: auto;
}
.container-svg-avantage{
  width: 100%;
  height: auto;
  padding:0.5em;
  margin-bottom:0.7em;
  display: flex;
  justify-content: center;
}
.container-svg-avantage svg{
  width:clamp(2em, 40vw, 4.5em);
  color:#00c6fb;
}

.texte-avantage-conteneur {
  text-align: center;
  font-size: clamp(1rem, 45vw, 1.5rem);
  padding: 0.3em;
}

/*Section Catalogue*/
.catalogue {
  padding: 1em;
}
.texte-catalogue {
  margin: calc(50 * var(--res)) calc(0 * var(--res));
}
.texte-catalogue h1 {
  text-align: center;
  font-size: calc(90 * var(--res));
  color: #e85353;
}
.texte-catalogue p {
  text-align: center;
  font-size: calc(40 * var(--res));
  color: #5b5858;
}
.genre-catalogue {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: calc(80 * var(--res));
}
.genre-document-catalogue {
  margin: calc(10 * var(--res));
  background-color: #2764e7;
  color: #fff;
  font-weight: 500;
  font-size: calc(40 * var(--res));
  border: 1px solid rgb(255, 255, 255);
  border-radius: 05px;
  padding: calc(10 * var(--res));
}

.conteneur-documents {
  display: flex;
  justify-content: center;
  margin-bottom: calc(70 * var(--res));
}
.conteneur-documents img {
  margin: calc(10 * var(--res));
  width: calc(170 * var(--res));
}

.btn-catalogue {
  display: flex;
justify-content: center;
}
.btn-catalogue a {
  text-decoration: none;
  background-color: #e85353;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 05px;
  padding: .3em 1em;
}

/*Section Invitation Auteur*/
.invit-auteur {
  width: 100%;
  height: 60vh;
  max-height: max-content;
  background-image: linear-gradient(#00c5fb2d, #2764e7c0),
    url(/img-invit-auteur.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  padding:1em;
  color: #fff;
  overflow:hidden
}
.text-invit-auteur {
  display:flex;
  flex-direction: column;
  gap:1.4em;
  justify-content: space-around;
  text-align: center;
}
.text-invit-auteur h2 {
  font-size:clamp(0.5rem,30vw, 2.7rem);
}
.text-invit-auteur p {
  font-size: clamp(0.5rem,20vw, 1.9rem);
}
.btn-publication-auteur a {
  background-color: #ffffff;
  color: #5b5858;
  text-decoration: none;
  padding:0.4em 1.5em;
  font-size:clamp(1rem, 45vw, 1.5rem);
  font-weight: bold;
}
.btn-publication-auteur a:hover{
  background-color: #5b5858;
  color:#ffffff;
}
.img-invit-auteur{
  display:none;
}
/*Plan d'abonnement*/
.plan-abonnement {
  padding: 1.5em;
}
.titre-abonnement {
  margin: 2em;
}
.titre-abonnement h2 {
  text-align: center;
  font-size: calc(75 * var(--res));
  color: #474747;
}
.conteneur-plan-abonnement {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
.plan{
  flex: 0 0 280px;
  border: 1px solid #fd7a7abd;
  border-radius: 10px;
  background-color: #fafafa;
  padding: 1em;
  gap: 1em;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.entete h2 {
  position: relative;
  font-size: 3.5rem;
  color:  #883c3c;
}
.entete h2 span {
  color: #000000;
  font-size: 1.5rem;
  position: absolute;
  top: 10px;
}
.entete p {
  color: #1f1e1e;
  font-size: 1rem;
  font-weight: bold;
}
.description-plan {
  border-top: 1px solid #52525260;
  list-style: none;
  margin: auto;
}
.description-plan span li {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.btn-abonnement1 {
  width: 100%;
  text-align: center;
  padding: 05px;
  background: linear-gradient(0.25turn, #00c6fb, #2764e7);
}
.btn-abonnement1 a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size:1.2em;
}

.btn-abonnement2 {
  width: 100%;
  text-align: center;
  padding: 5px;
  background: linear-gradient(0.25turn, #ed1f27, #2764e7);
}

.btn-abonnement2 a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size:1.2em;
}

/*Pied de page*/
footer {
  background: linear-gradient(0.25turn, #00c6fb, #2764e7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 1em 1em 0 1em;
}
.allList {
  display: flex;
  justify-content: flex-start;
  gap: 1em;
  flex-wrap: wrap;
}
.list {
  flex: 1 1 200px;
  list-style: none;
  text-align: center;
}

.list h2 {
  font-size: 2rem;
  color: #ffe0e0;
}
.list h3 {
  margin-top: 0.5em;
  font-size: 1.6rem;
  color: #fff;
}
.list li a,
.list li {
  text-decoration: none;
  font-size: 1.3rem;
  color: #ffffff;
}

.social {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.social li svg {
  width: 2.5rem;
  background-color: #ffffff;
  padding: 5px;
}

.copy {
  padding: 1em;
}
.copy hr {
  color: #ffffff;
  margin-bottom: 0.5em;
}
.copy p {
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  color: #ffffff;
}




/*Responsive pour les ordinateurs:*/
@media screen and (min-width:800px){
  header{
    border-bottom:2px solid #ed1f27;
  }
  nav{
    justify-content:space-around;    
  }
  .listNavOrdi{
    display:flex;
  }

  /*Accueil -------- Premiere partie*/
  .acceuil{
    position:relative;
    background-image: none;
    background-color: #ffffff;
    /* background-color: #0532ac1f; */
    padding:5em;
    overflow: hidden;
  }
  .accueil-left{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width:55%;
  }
  .texte-acceuil h1, .texte-acceuil h2 {
    text-align: left;
  }
  .citation-acceuil p{
    text-align: left;
  }
  .container-accueil-img{
    display:block;
    position:absolute;
    right:6em;
  }
  .accueil-img{
    width:80%;
    height:auto;
    background-size: cover;
  }

  /*Gestion de la section avantage*/
  .section-avantage {
    padding: 5em;
    background-color: #BECEFF;
  }
  .avantage-boite {
    flex: 0 1 235px;
    border:1px solid #ffffff;
  }


  /*Gestion de la section pour l'invitation aux auteurs*/
  .invit-auteur{
    background-image: none;
    background-color: #2764e7;
    display:flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: left;
    gap:1.5em;
    padding:1.2em;
    position:relative;
  }
  .img-invit-auteur{
    display:block;
    width:45%;
    height:100%;
    border-radius:10px;
  }
  .img-invit-auteur img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:10px;
  }
  .text-invit-auteur {
    width:40%;
    text-align:left;
  }

  /*Pied de page*/
  footer {
    background-image: linear-gradient(#00087a8e,#00087ad8 ),url(/assets/footer-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1em 1em 0 1em;
  }

}