@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
}

body{
  margin: auto!important;
  align-items: center!important;
  width: auto;
}

.img-home {
  min-width: 100%; 
  height: auto;
}
.img-flex{
  margin:auto;
  display: flex
}

/*nav style*/

nav {
  display: flex;
  justify-content: space-between;
 margin-right: 20px;
 align-items: center;
  height: 80px!important;
    background-color: white!important;

}

.navbar{
  background-color: white;
   background-size: cover; 
  position: fixed!important; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  border-bottom: 1px solid;
  margin-right: 10px;
  z-index: 3!important;

}
.navbar-noir{
  background-color: black;
   background-size: cover; 
    position: fixed!important; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  border-bottom: 1px solid;
  z-index: 3!important;
}

li{
  list-style-type: none;
}
.nav-font a {
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: black!important;
}

.nav-font a:hover{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 600;
  color: black!important;
}

.active a{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 600!important;
    font-style: normal;
  color: black!important;
}



section{
    z-index: 1!important;
}


.logo a img{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  height: 100px!important;
  margin-left: 10px!important;
}



.slidersize{
  max-width:300px!important;
}


.navbas a{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: black!important;
  z-index: 900;
  padding: 10px;
  background: white;
}

.navbas a:hover{
  text-decoration: none!important;
  font-family: "brother-1816", sans-serif;
  font-weight: 800;
  color: black!important;
}

/*marges*/
/*marges*/
/*marges*/

.marge-menu{
  margin-top: 120px;
}

.marges{
 padding: 20px!important;
}

.marges-top{
  margin-top: 20px;
}

/* font projet */
/* font projet */
/* font projet */
/* font projet */

.image-background{
    background-image: url('../img/fiktion/fiktion-index.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh; /* Hauteur de l'élément pour couvrir tout l'écran */
    width: 300vh;  /* Largeur de l'élément */

}

.image-background-prisma{
    background-image: url('../img/prisma/PRISMA-GRAND-IMAGE.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh; /* Hauteur de l'élément pour couvrir tout l'écran */
    width: 300vh;  /* Largeur de l'élément */

}

.image-background-flash{
    background-image: url('../img/flash/index-flash.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh; /* Hauteur de l'élément pour couvrir tout l'écran */
    width: 300vh;  /* Largeur de l'élément */
}

.image-background-hybride{
    background-image: url('../img/hybride/index-hybride.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh; /* Hauteur de l'élément pour couvrir tout l'écran */
  

}

.image-background-blinki{
    background-image: url('../img/blinki/blinki-index.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh!important; /* Hauteur de l'élément pour couvrir tout l'écran */
}

.image-background-vege{
  background-image: url('../img/vege/vege-index.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh!important; /* Hauteur de l'élément pour couvrir tout l'écran */
     width: 300vh;  /* Largeur de l'élément */
}

.image-background-freep{
  background-image: url('../img/freep/freep-index.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh!important; /* Hauteur de l'élément pour couvrir tout l'écran */
     width: 300vh;  /* Largeur de l'élément */
}

.image-background-memoire{
  background-image: url('../img/memoire/Index-memoire1.jpg'); /* Remplacez par l'URL de votre image */
    background-size: cover; /* L'image couvre toute la zone de l'élément */
    background-position: center; /* L'image est centrée */
    background-repeat: no-repeat; /* L'image ne se répète pas */
    height: 100vh!important; /* Hauteur de l'élément pour couvrir tout l'écran */
    
}


.cartel{
  background-color: white;
  padding-left: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 200px;
  margin-top: 80px!important;
}
.cartel-galerie{
  padding-left: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 400px;
  margin-top: 90px;
}


.retour{
  position: fixed!important;
   z-index: 3!important;

}





/*font */
/*font */
/*font */
/*font */

/*titre */
h1{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 1000;
  font-size: 40px;
}

.brother{
    font-family: "brother-1816", sans-serif!important;
    font-variation-settings: "wght" 1000!important;
}

/*texte big responsive petit*/
h2{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 20px;
  color: black;
}

/*texte blanc grand*/
h3{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 30px;
  color: white;
}

/*texte big responsive grand*/
h4{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 30px;
  color: black;
}

h5{
  font-family: "brother-1816", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 14px;
  color: black;
}


/*texte menu blanc petit*/
h6{
  font-family: "brother-1816", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 17px;
  color: white;
}

p{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 100;
  font-size: 18px;
  color: black;
}

.width-text-large{
  max-width: 80vh;
  margin:auto;
}

.width-image-large{
  max-width: 100vh;
  margin:auto;
}

.padding-texte-centre{
  padding-right: 120px;
  padding-left: 120px;

}

.height{
  height: 100%;
}

.carouselle{
  max-width: 100vh; 

  margin: auto;
  padding: 20px;
}

.date{
  font-family: "lektorat-text-variable", sans-serif;
  font-variation-settings: "wght" 800;
  font-size: 25px;
  color: black;
}




/*reglage background color */
/*reglage background color */
/*reglage background color */


.backgroundjaunelarge-fiktion{
    margin-top: 40px!important;
    width: 100%;
    float: right;
    text-align: center;;
    background-color: #FFFD8A;
}

.fond{
    background-color: #FFFD8A;
    width: 100%;
}

.backgroundvioletlarge-fiktion{
    margin-top: -1000px!important;
    width: 100%;
    height: 1500px;
    float: right;
    text-align: center;;
    background-color: #8C8AFF;
}

.backgroundvioletsmall-fiktion{
   margin-top: -100px!important;
    width: 100%;
    height: 1000px;
    float: right;
    text-align: center;;
    background-color: #8C8AFF;
}

.texteviolet-fiktion{
  margin-top: 870px;
  padding: 100px;
}

.plus-bas200px{
  margin-top:200px;

}

.plus-haut160px{
  margin-top:-360px;
}

.plus-haut460px{
  margin-top:-260px!important;
}

.backgroundroselarge-fiktion{
    margin-top: 500px!important;
    width: 100%;
    float: right;
    height: 1100px;
    text-align: center;;
    background-color: #FF8AA5;
}

.backgroundrosesmall-fiktion{
    margin-top: 500px!important;
    width: 100%;
    float: right;
    height: 850px;
    text-align: center;;
    background-color: #FF8AA5;
}

.backgroundroselarge-blinki{
    margin-top: 300px!important;
    width: 100%!important;
    float: right;
    height: 2500px;
    text-align: center;;
    background-color: #ECD2E3;
}

.backgroundrosesmall-blinki{
    margin-top: 300px!important;
    width: 100%!important;
    float: right;
    height: 1000px;
    text-align: center;;

}

.backgroundrosesmall-blinki{
    margin-top: 300px!important;
    width: 100%!important;
    float: right;
    height: 2000px;
    text-align: center;;
    background-color: #ECD2E3;
}



.marge{
  margin:auto!important;

}

.bloc-blanc{
  background-color: white;
  height: 5em;
}









/*footer */


.footer-fiktion-small {

    width: 100%;
    float: right;
    height: 280px;
    text-align: center;;
    background-color: black;
}

.footer-vege-small {

    width: 100%;
    float: right;
    height: 250px;
    text-align: center;;
    background-color: black;
}


.footer-fiktion-grand {

    width: 100%;
    float: right;
    height: 300px;
    text-align: center;;
    background-color: black;
}