@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'beausite_edu_classicmedium';
  	src: url("font/webfontkit-20240905-082103/beausiteeduclassic-medium-webfont.woff2")
	format('woff2'),
		   
	url("font/webfontkit-20240905-082103/beausiteeduclassic-medium-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'beausite_edu_classicMdIt';
    src: url('beausiteeduclassic-mediumitalic-webfont.woff2') format('woff2'),
         url('beausiteeduclassic-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	margin: 0px;
	padding: 0px;
	
  -moz-osx-font-smoothing: grayscale; /* Lissage des polices pour macOS sur Firefox */
  -webkit-font-smoothing: antialiased; /* Lissage des polices pour macOS sur WebKit (Safari et Chrome) */
overflow-x:hidden;
}

/* Masquer les éléments sur les écrans plus larges que 768px */
@media screen and (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}


/* curseur */

* {
  box-sizing: border-box;
}
 
/* Cursor design */
:root {
    --purple: #800080; /* Couleur pour le curseur */
    --dark: #333;      /* Couleur pour le petit point à l'intérieur du curseur */
    --black: #000;     /* Couleur noire */
    --white: #FFF;     /* Couleur blanche */
}

#cursor {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    background: var(--white);
    pointer-events: none;
    mix-blend-mode: difference;
    transition: transform .5s;
    z-index: 99;
}

#cursor.hovered {
    transform: scale(1.75);
}

#cursor #circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    animation: rotateDot 2s infinite linear;
}

#cursor #circle:after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    background-color: var(--dark);
    top: 5px;
    left: 5px;
    opacity: 0;
    border-radius: 100%;
}

#cursor.hovered #circle:after {
    opacity: 1;
}

@keyframes rotateDot {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Suppression du cercle tournant */
#cursor #circle {
    display: none; /* Masquer le cercle */
}
		
	


/* Masquer les éléments sur les écrans plus petits que 768px */
@media screen and (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

.fonttest{
    font-family: 'beausite_edu_classicmedium';

	
	
}

/* media queries *//* media queries *//* media queries *//* media queries */

.filter-btn{
	font-size: 25px; /* Ajuste la taille de la police si nécessaire */
	}

.footer-link {
    color: black; /* Couleur du lien */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    font-size: 25px; /* Taille de la police pour les liens */
    text-decoration: none; /* Enlève le soulignement */
}

.footer-logo {
    font-size: 25px; /* Taille de la police pour le logo */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    color: black; /* Couleur du logo */
}

	.header-detail{
		
	height: 250px; /* Hauteur pour les écrans plus larges */
		width: 100%;
	}

.header-home{
	height: 180px; /* Hauteur pour les écrans plus larges */
	width: 100%;
}

.header-about{
	height: 400px;
	width: 100%;

}

.fleches{
	margin-left: 2vw;

}



.index_list{
	 	font-size: 22px;
  		font-family: 'beausite_edu_classicmedium';
  		color: black;
	}
		
.trait_noir_mobile{
	border-top: solid 2px black;
	margin-left: 1vw;
    margin-right: 1vw;
	
}


.header_petit{
	width: 99%;
	height: 200px;
}



.photoprojet_index{
		width: 98.8%;

}

@media (min-width: 576px){
	.filter-btn{
		 font-size: 20px;
	}
	
	.navfiltre{
		 font-size: 20px;
	}
	
	
    .navbar-expand-sm .navbar-nav .nav-link {
        padding-left: 0; /* Supprimer le padding gauche */
		padding-right: 0; 
    }

	.header-detail{
		
	height: 200px; /* Hauteur pour les écrans plus larges */
	margin-top: 55px;
	}
	
	.header-home{
		height: 200px;
		
	}
	
	
	.header-about{
	height: 400px;
	width: 100%;
	margin-top: 55px;


}
	
	.trait_noir_mobile{
	display: none;
	border-top: solid 2px black;
	margin-left: 1vw;
    margin-right: 1vw;
	
}
	
}
	
@media (min-width: 768px){
	
	.filter-btn{
	font-size: 20px;
	}

	
	.footer-link {
    color: black; /* Couleur du lien */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    font-size: 25px; /* Taille de la police pour les liens */
    text-decoration: none; /* Enlève le soulignement */
}

	.footer-logo {
    font-size: 25px; /* Taille de la police pour le logo */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    color: black; /* Couleur du logo */
}
		
	.fleches{
	margin-left: 2vw;
	margin-right: 2vw;
	width: 98%; /* Assurez-vous que le conteneur prend toute la largeur */

}

	.header_petit{
		width: 99%;
		height: 100px;
	}
	
}


@media (min-width: 992px) {
	.filter-btn{
		 font-size: 30px;
	}
	
	.footer-link {
    color: black; /* Couleur du lien */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    font-size: 30px; /* Taille de la police pour les liens */
    text-decoration: none; /* Enlève le soulignement */
}

	.footer-logo {
    font-size: 30px; /* Taille de la police pour le logo */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    color: black; /* Couleur du logo */
}
	
	.fleches{
	margin-left: 1vw;
	margin-right: 1vw;
	width: 98%; /* Assurez-vous que le conteneur prend toute la largeur */

}
	
	.index_list{
	 	font-size: 30px;
  		font-family: 'beausite_edu_classicmedium';
  		color: black;
	}
	

	.header_petit{
		width: 99%;
		height: 100px;
	}
	
	.header-detail{
		
	height: 250px; /* Hauteur pour les écrans plus larges */
 	margin-left: 5px;
	width: 98%;
		
	}
	
	.header-about{
	height: 250px;
	width: 98%;
	margin-top: 55px;
	}
}

@media (min-width: 1200px) {
	.filter-btn{
		 font-size: 30px;
	}
	.fleches{
	margin-left: 1vw;
	width: 98%; /* Assurez-vous que le conteneur prend toute la largeur */

}
}



.navinterligne{
	line-height: 10px; /* Ajuste l'interlignage pour les petits écrans */

}


/* font base *//* font base *//* font base *//* font base */

p{
    font-family: 'beausite_edu_classicmedium';
	
}

/* navigation *//* navigation *//* navigation *//* navigation *//* navigation */

.margelargeur{
	padding: 0px !important;
	
}

.navbar-toggler {
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Change la couleur de l'icône */
}

nav {
  border-bottom: 2px solid black;
  margin-left: 1vw;
  margin-right:  1vw;
  display: flex;
  justify-content: space-between; /* Ensure space between brand and nav links */
}

.navtext {
  font-size: 30px;
  font-family: 'beausite_edu_classicmedium';
  color: black;
}

.navtext:hover {
  color: black;
}

.navbar-nav {
  display: flex;
  gap: 0px; /* Adjust spacing between nav items */

}

.nav-link {
  color: black;
  font-family: 'beausite_edu_classicmedium';
  font-size: 30px;

}

.naveffect{
	  transition: background-color 0.3s, transform 0.3s; /* Ajout de transitions pour un effet fluide */

}

.naveffect:hover{
	  	transform: scale(1.05); /* Légère augmentation de la taille au survol */
}


.nav-link:hover {
  color: black;
	
}

.navlogo{
  font-size: 30px;
  font-family: 'beausite_edu_classicmedium';
  color: black;
}

.navbar {
    padding-top: 0.0rem !important; /* Ajustez cette valeur selon vos besoins */
    padding-bottom: 0.0rem !important; /* Ajustez cette valeur selon vos besoins */
}



.navbar-nav .nav-item .btn {
    background-color: transparent; /* Enlever le fond */
    color: inherit; /* Garder la couleur du texte par défaut */
}

.navbar-nav .nav-item .btn:hover {
    background-color: transparent; /* Assurer qu'il n'y a pas de changement de fond au survol */
    color: inherit; /* Assurer qu'il n'y a pas de changement de couleur au survol */
}



/* header *//* header *//* header *//* header *//* header *//* header *//* header */



/* Afficher le header pour les écrans plus larges */




/* grille projets *//* grille projets *//* grille projets *//* grille projets */


.btn{
	 font-family: 'beausite_edu_classicmedium';
	 color: #000000;

}

.filter-btn {
  border: none; /* Enlève la bordure du bouton */
  background: none; /* Enlève l'arrière-plan du bouton */
  color: #000; /* Définit la couleur du texte */
  text-decoration: none; /* Enlève le soulignement du lien */
  padding: 0; /* Enlève les marges internes */
}

.grille{
  margin-right: 1vw;
}


* {
  margin: 0;
  padding: 0;
}

.container {
  width:100%;
  max-width: 100%;
  position: relative;
}
.item {
  position: absolute;
  text-align: center;
  font-size: 2em;
  font-weight: white;
  color: white;
  line-height: 1.5em;
  border-radius: 0px;
  /*box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);*/
  /*background-image: linear-gradient( 135deg, #F761A1 10%, #AC46C8 100%);*/
  overflow: hidden;
	cursor: pointer; 
}

.container_1 .item {
    transition: transform 0.3s ease; /* Transition douce pour le zoom */
    padding-right: 0px;
    padding-bottom: 0px;
	
}

.container_1 .item img {
    width: 100%;
    height: auto;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 576px){
   .container_1 .item {
       padding-bottom: 12px;
		padding-right: 6px;
		padding-left: 6px;
   }

   .photoprojet{
	    width: calc((98 * (100% - 1vw)/100) + 2 * 6px);	
   }
	
}

@media (min-width: 768px){
   .container_1 .item {
       padding-bottom: 12px;
		padding-right: 6px;
		padding-left: 6px;
   }

   .photoprojet{
	    width: calc((98 * (100% - 1vw)/100) + 2 * 6px);	
   }
}

@media (min-width: 992px){
     .container_1 .item {
       padding-bottom: 12px;
		padding-right: 6px;
		padding-left: 6px;
   }

   .photoprojet{
	    width: calc((98 * (100% - 1vw)/100) + 2 * 6px);	
   }
}




.container_1 .item:hover {
    transform: scale(1.05); /* Zoom à 105% de la taille originale */
}



/* fleches *//* fleches *//* fleches *//* fleches *//* fleches *//* fleches */

.traits_noir{
	border-top: 2px solid black; /* Bordure supérieure pour le footer */
 	margin-left: 1vw;
    margin-right: 1vw;
}




.fleche-1 {
    display: inline-block;
    width: 75px;
    height: 75px;
   background-image: url('images/fleches/Fichier 1.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.fleche-2 {
    display: inline-block;
    width: 60px;
    height: 75px;
    background-image: url('images/fleches/Fichier 2.svg');
    background-size: contain;
    background-repeat: no-repeat;
	text-align: end;
}



/* Footer styles */
.footer-container {
    width: 99%;
	margin: auto;
    display: flex;
    justify-content: space-between; /* Espace entre le logo et les liens du footer */
    padding: 5px 0 10px 0; /* 10px en haut, 0 à droite et à gauche, 20px en bas */
	gutter-x: 0;
}

.footer-text {
    font-size: 20px; /* Taille de la police pour le texte du footer */
    font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
    color: black; /* Couleur du texte */
}

.footer-text:hover {
    color: white; /* Couleur au survol */
}

.footer-links {
    display: flex; /* Disposition en ligne pour les liens */
    gap: 20px; /* Espace entre les liens */
}

.footer-brand{
	text-decoration: none;
}


.footer-link:hover {
    color: gray; /* Couleur au survol pour les liens */
}



.footer-links .footer-item {
    margin-top: 0; /* Réduit la marge supérieure */
    margin-bottom: 0; /* Réduit la marge inférieure */
}

.footer-links .footer-link {
    padding-top: 0; /* Réduit le padding supérieur */
    padding-bottom: 0; /* Réduit le padding inférieur */
}

.fleche-1:hover {
        transform: scale(1.05); /* Légère augmentation de la taille au survol */
    }

.fleche-2:hover {
        transform: scale(1.05); /* Légère augmentation de la taille au survol */
    }

/* page index *//* page index *//* page index *//* page index *//* page index */


.marge_3{
	width: 99%;
}



/* video youtubex */

.video-container {
      width: 100%;
      padding-bottom: 56.25%; /* Ratio 16:9 */
      position: relative;
    }
    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }


.alignement_book{
	width: 100%;
	margin: auto;
}

/* video youtubex */

.cv{
	font-family: 'beausite_edu_classicmedium'; /* Police personnalisée */
	color: black;
	font-size: 20px;
}