html {
    scroll-behavior: smooth;
}
body {
	/* font-family: 'Alkatra', Courgette, Century Gothic, Calbri, serif; */
	font-family:'Gravity Regular', sans-serif, 'Alkatra', Courgette, Century Gothic, Calbri, serif;;
	font-size:13px;
	margin:0px;
	padding:0px;
	/* background-color: white !important; */
	background-color: black !important;
	background-repeat:no-repeat;	
}
@font-face {
  font-family: 'Brittany Signature'; 
  src: url('../Fonts/BrittanySignature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gabiant'; 
  src: url('../Fonts/Gabiant-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.contener {
	display: block;
  	width: 100%;
}
.contener-sculp {
	position: fixed !important;
	z-index: 100;
  	top: 0;
  	width: 100%;
	margin-bottom: 30px ;
	/* background-color: rgba(255,255,255,0.6); */
	background-color: black;
}
.sous-contener {
	height: 225px;
}
.sous-contener-realisations {
	height: 225px;
}
header {
	width: 100%;
	height: 150px;
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.header-sculp {
	margin-top: 20px;
}
.header-sculp-index-bis {
	margin-top: 0px;
	padding-top: 20px;
}
/* Logo en entête du site */
.logoentete {
	justify-content: flex-start;
	width: 70%;
	margin: 10px 10px 10px 35px;
}
/* Phrase "SofiB.Sculptures" */
.p0 {
	display: flex;
	font-size: 40px;
	text-align: center;
	align-items: center;
	font-style: italic;
	font-family: 'Kaushan Script';
	/* font-family:'Brittany Signature'; */
	/* color:black; */
	color:rgb(204, 201, 201);
	margin: 0px 0px 0px 5px;
}
/* Phrase "Graveuse, Sculptrice & Emailleuse sur pierre de lave" */
.p01 {
	display: flex;
	font-size: 20px;
	text-align: center;
	align-items: center;
	font-style: italic;
	font-family: 'Kaushan Script';
	/* color:black; */
	color:rgb(204, 201, 201);
	margin: 0px 0px 0px 5px;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Menu de navigation essaie d'un menu Burger */
/* Affichage de base (desktop) */
/* .menu {
	display: flex;
	flex-direction: row;
	gap: 20px;
} */
/* Style de base du bouton burger */
.burger {
	display: none;
	flex-direction: column;
  	justify-content: space-around;
	align-items: center;
  	width: 40px;
  	height: 30px;
	font-size: 28px;
	background: none;
	border: none;
	cursor: pointer;
	/* color:black; */
	color:rgb(204, 201, 201);
	padding: 0px 0px 0px 5px;
  	z-index: 1001; /* au-dessus du menu */
	/* color: #333; */
}
.burger span {
	display: block;
	width: 100%;
	height: 3px;
	background-color:rgb(204, 201, 201);
	border-radius: 3px;
	transition: all 0.3s ease-in-out;
	transform-origin: center;
}
/* Quand le menu est actif, on transforme les spans */
.burger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 9px);
}
.burger.active span:nth-child(2) {
	opacity: 0;
}
.burger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -9px);
}
/* Contenu normal */
#main-content {
	transition: margin-top 0.3s ease;
}
/* Quand le menu est ouvert */
#main-content.pushed {
	margin-top: 300px;
}
/* Quand le menu est ouvert pour la page Réalisations */
#main-content.main-sculp.pushed {
	/* margin-top: 310px; */
	margin-top: 200px;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* Permet de mettre le menu de navigation sur toute la lageur de la page ainsi que de le placer à droite de la page */
nav {
	width: 100%;
	display: flex;
	justify-content: right;
	/* margin-bottom: 25px; */
}
/* Permet de mettre le menu de navigation horizontalement.  */
nav div {
	display: flex;
}
/* Permet de supprimer le point devant chaque lien.  */
nav li {
	list-style-type: none;
}
.div-nav-sculp {
	/* margin-top: 50px; */
	margin: 50px 0px 0px 0px;
}
.div-nav-sculp-realisation {
	margin-top: 50px;
}
/* Permet de supprimer les marges et le padding existant sur le menu. */
.menu-deroulant, .menu-deroulant ul {
	padding: 0;
	margin: 0;
	list-style: none; 
}
/* Permet de mettre le lien de page ouverte d'une autre couleur pour savoir sur quelle page on se trouve.*/
.actif {
	font-style:italic;
	font-family:'Kaushan Script';
	text-decoration:none;
	font-size:30px;
	color: #c7a113;
	margin: 20px;
	padding: 10px 15px 10px 15px;
}
/* Permet styliser les liens */
.liens {
	font-style:italic;
	font-family:'Kaushan Script';
	text-decoration:none;
	font-size:30px;
	/* color:black; */
	color:rgb(204, 201, 201);
	margin: 20px;
	padding: 10px 15px 10px 15px;
}
/* Permet styliser les liens de la page sculptures.html */
.liens-sculptures {
	font-style:italic;
	font-family:'Kaushan Script';
	text-decoration:none;
	font-size:30px;
	color:rgb(204, 201, 201);
	margin: 20px;
	padding: 10px 15px 10px 15px;
}
/* Permet de modifier les liens au sur-vol de la souris */
.liens:hover, .liens-sculptures:hover {
	font-style:italic;
	font-family:'Kaushan Script';
	text-decoration:none;
	font-size:30px;
	color: grey;
}
.realisations {
	width: 255px;
}
.sous-menu {
	width: 300px;
}
/* Permet de cibler les liens */
a {
	white-space: nowrap;/* Permet de ne pas découper les liens quand ils ont plusieurs mots */
}
/* Comprend tout les titres "h1" du site */
h1 {
	font-family:'Brittany Signature';
	font-size:40px;
	font-style:italic;
	color: #c7a113;
	/* color:rgb(204, 201, 201); */
	margin: 60px 0px 0px 40px;
}
/* Permet de faire disparaitre le h1 de la page SofiB */
.h1sofib {
	display: none;
}
/* Permet de décaler les h1 et h2 des pages réalisations*/
.h1réalisation, .h2réalisation {
	margin-left: 50px;
	display: none !important;
}
/* Comprend tout les titres "h2" du site */
h2 {
	/* font-family:'Alkatra'; */
	font-family:'Brittany Signature';
	text-align: center;
	font-size:30px;
	/* font-style:italic; */
	font-weight: normal;
	/* color:rgb(204, 201, 201); */
	/* color:black; */
	color: #c7a113;


}
.h2-titre{
	font-family:'Alkatra';
	text-align: left;
	font-size:40px;
	font-style:italic;
	font-weight: bold;
	color:rgb(204, 201, 201);
	margin: 50px 0px 0px 40px;
}
.h2-titre-pierre {
	font-family:'Brittany Signature';
	text-align: center;
	font-size:40px;
	color: #c7a113;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 0px 0px;
}
.h2-titre-emaux {
	font-family:'Brittany Signature';
	text-align: center;
	font-size:40px;
	/* font-style:italic; */
	color: #c7a113;
	padding: 0px 0px 10px 0px;
	margin: 0px;
}
/* Comprend tout le texte du site */
p {
	font-family:'Gravity Regular', sans-serif;
	font-weight: 300;
	font-size:25px;
	/* font-style:italic; */
	/* font-weight: bold; */
	line-height:40px;
	/* color:black; */
	color:rgb(204, 201, 201);
	/* text-align:center; */
	text-align: justify;
}
/* Permet de mettre le texte de toutes les pages sur toute la largeur de la div. */
.textparag {
	width: 100%;
}
/************/
/* "Footer" */
/************/
/* Permet de modifier les icones */
i {
	display: block;
	/* color:black; */
	color:rgb(204, 201, 201);
	font-size: 50px;
	margin: 10px;
}
/* Permet de modifier les icones au sur-vol de la souris */
i:hover {
	scale: 1.4;
}
/* Permet de centrer les icons au centre du footer */
.icons-portfolio {
	padding: 10px 0px 10px 0px;
}
.icons-droits {
	display: flex;
	align-items: center;
}
/* .icons {
	display: flex;
	justify-content: center;
} */
/* Permet de modifier le lien "Mentions légales" */
.lien-mentions {
	text-decoration: none;
	color:rgb(204, 201, 201);
	font-size: 25px;
}
.lien-portfolio {
	text-decoration: none;
	color:rgb(204, 201, 201);
	font-size: 30px;
	margin: 0px;
}
.lien-mentions-droit {
	font-size: 25px;
	margin: 0px;
}
.lien-mentions-tiret {
	padding: 0px 5px 0px 5px;
	margin: 0px;
}
/*********************/
/* Page "Principale" */
/*********************/
/**************************************************************************************************************************************/
/* Permet de centrer les vidéos sur la page "Principale" */
.video-container {
    display: flex;
    justify-content: center;
    gap: 0px; /* espace entre les vidéos */
    flex-wrap: wrap; /* permet de passer à la ligne sur petits écrans */
	padding: 50px 20px 50px 20px;
}
.video-container video {
	width: 300px;
	height: auto;
	padding: 0px 25px 0px 25px;	
}
.last-video {
	display: none;
}
/**************************************************************************************************************************************/

/**************************************************************************************************************************************/
/* Test pour faire une page principale en regroupant la page 'Sofib', la page 'La pierre de volvic' et la page 'Les emaux'. */
/* Permet de mettre le paragraphe Sofib sur la hauteur de l'écran et cliquant sur le menu 'Sofib' */
/* #info-sofib {
    min-height: 100vh;
} */
/* Permet de mettre une image en plein écran entre les deux sections 'Sofib' et 'Pierre de volvic' */
.image-fond {
  position: relative;
  height: 100vh; /* prend toute la hauteur de l'écran */
  background-image: url('Public/Img/test-video.mp4'); /* chemin vers votre image */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* effet de parallaxe */
}
/* Petit espace visuel entre les div */
.spacer {
  height: 80px; /* espace avant que l’image apparaisse */
  /* background-color: white; */
}

/* === Image de fond entre deux sections === */

.image-fente {
  position: relative;
  width: 100%;
  height: 200px; /* hauteur visible = la "fente" (ajuste 40–100px selon effet désiré) */
  overflow: hidden; /* pour masquer tout débordement */
  /* background-color: white; garde le fond blanc autour */
  background-color: transparent; /* garde le fond blanc autour */
}

/* Image de fond fixe */
.image-fente__background {
  position: fixed; /* reste fixe pendant le scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* occupe tout l’écran, même si on n’en voit qu’une bande */
  background-image: url('../Img/imgfondindexbisnb.jpg'); 
  background-size: cover;
  background-position: center;
  z-index: -2; /* en dessous de tout */
}

/* Masque pour transition douce avec les blocs blancs */
.image-fente__mask {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0; /* on peut animer cette opacité avec JS */
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* (facultatif) pour que les blocs .infosofib gardent le fond blanc opaque */
.infosofib, .infosofib-contact, .main-content, .header-sculp-index-bis, .div-nav-sculp-index-bis {
  /* background-color: white; */
  background-color: black;
  position: relative;
  z-index: 1;
}

/* Permet de changer la couleur du fond de l'écran pour le 'footer' de la page 'index-bis'*/
.footer-index-bis {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* background-color: gainsboro; */
	position: relative;
  	z-index: 1;
	padding-top: 20px;
	padding-bottom: 20px;
}
/* Permet de supprimer le margin-bottom sur ce texte (qui rajoutait un espace transparent où apparaissait la photo en dessous), le margin est remplacé par le padding. */
.texte4-emaux-index-tri {
	margin: 0px;
	padding: 15px 0px 50px 0px;
}
.nav-sculp-index-bis {
	margin-bottom: 0px;
	padding-bottom: 25px;
}
/* Permet de mettre un padding à tout le texte de Sofib */
.texte-sofib-complement {
	padding: 0px 100px 0px 100px;
}
/* Permet de mettre un padding à tout le texte de Pierre de Volvic et de lui mettre un fond de couleur différent du paragraphe du dessus et du dessous. */
.texte-pierre-complement {
	padding: 0px 100px 0px 100px;
	/* background-color: gainsboro; */
}
/* Permet de mettre un padding à tout le texte des Emaux */
.texte-emaux-complement {
	padding: 0px 100px 0px 100px;
}
.texte1-emaux-index-tri {
	margin: 0px;
	padding: 30px 0px 15px 0px;
}
.texte2-emaux-index-tri, .texte3-emaux-index-tri {
	margin: 0px;
	padding: 15px 0px 15px 0px;
}


/**************************************************************************************************************************************/
/* Div comprenant l'image et le texte de la page "Principale" */
.infosofib, .infosofib-contact {
	display: flex;
}
.infosofib-sofib {
	display: block;
	/* border: solid 4px red; */
}
.infosofib-sofib-pierre {
	display: flex;
	padding: 0px 0px 0px 0px;
	background-color: black;
	/* background-color: white;
	border: solid 1px red; */
}
.infosofib-sofib-emaux {
	display: flex;
	padding: 0px;
	background-color: black;
	/* border: solid 1px red;
	/* background-color: white; */
}
.imgparag {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	/* border: solid 4px black; */
}
.imgparag-pierre {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 0px 100px 0px 0px;
	/* border: solid 4px black; */
}
/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
.textparag-sofib-pierre {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0px 0px 0px 100px;
}
/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
.imgparag-pierre-tri {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 0px 130px 0px 0px;
}
.imgparag-emaux {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 0px 0px 0px 100px;

	/* border: solid 4px black; */
}
.textparag-sofib {
	/* width: 90%; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: solid 5px orange; */
}
/* Permet de modifier le padding de l'image de la section 'Emaux'*/
.imgparag-emaux-tri {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 0px 0px 0px 170px;
	/* border: solid 4px black; */
}
/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
.textparag-sofib-emaux {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: solid 5px orange; */
	padding: 0px 140px 0px 0px;
}
/* Image de la page "Principale" */
.imgsofib {
	width: 60%;
	height: auto;
	/* /* border: 3px solid black; */
}
/* Phrase d'accroche Sofib */
.phrase-accroche1 {
	padding: 0px;
	margin: 0px;
	font-family: 'Kaushan Script';
	/* border: solid 2px green; */
}
.phrase-accroche1-pierre {
	padding: 0px;
	margin: 0px;
	font-family: 'Kaushan Script';
	/* border: solid 2px green; */
}
/* Dernière Phrase d'accroche Sofib section Emaux */
.phrase-accroche1-emaux {
	padding: 0px 0px 20px 0px;
	margin: 0px;
	font-family: 'Kaushan Script';
	/* border: solid 2px green; */
}
/* Comprend le texte 1 de la page "Principale" */
.texte1sofib {
	margin: 0px 0px 0px 0px;
	padding: 50px 50px 15px 40px;
}
.texte1sofib-tri {
	margin: 0px;
	padding: 60px 0px 15px 0px;
}
/* Comprend le texte 2 de la page "Principale" */
.texte2sofib {
	margin: 0px;
	padding: 15px 50px 15px 40px;
}
.texte2sofib-tri {
	margin: 0px;
	padding: 15px 0px 15px 0px;
}
/* Comprend le texte 4 de la page "Principale" */
.texte4sofib {
	margin: 0px;
	padding: 20px 50px 15px 40px;
}
/* Comprend le texte final de la section Sofib de la page "Tri" */
.texte6sofib-tri {
	margin: 0px;
	padding: 15px 0px 30px 0px;
}
.div_logofinpage {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
/* Logo fin de page "Principale" */
.logofinpage1 {
	margin: 70px 0px 30px 0px;	
}
/* Logo fin de page "La pierre de Volvic" */
.logofinpage {
	margin: 30px 0px 30px 0px;	
}
.logofinpage-realisations {
	clear:both;
	width:100%;
	margin:40px 50px 0px 40px;
	padding-right:30px;	
}
/******************************/
/* Page "La pierre de Volvic" */
/******************************/
/* Image de la page "La pierre de Volvic" */
.imglapierredevolvic1 {
	width:600px;
	height:700px;
	/* border: 3px solid black;
	border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin: 56px 25px 20px 40px;
}
.img-pierre-volvic-tri {
	width: 50%;
	height: auto;
	margin: 0px;
	padding: 0px;
}
.img-emaux-tri {
	width: 60%;
	height: auto;
	margin: 0px;
	padding: 0px;
}
/* Comprend le texte 1 de la page "La pierre de Volvic" */
.texte1lapierredevolvic {
	margin : 0px;
	padding: 15px 50px 15px 40px;
	/* background-color: gainsboro; */
}
.texte1-pierre-index-tri {
	margin : 0px;
	padding: 30px 0px 15px 0px;
	/* background-color: gainsboro; */
}
/* Comprend le texte 2 de la page "La pierre de Volvic" */
.texte2lapierredevolvic {
	margin: 0px;
	padding: 15px 50px 15px 40px;
	/* background-color: gainsboro; */
}
.texte2-pierre-index-tri {
	margin: 0px;
	padding: 15px 0px 15px 0px;
	/* background-color: gainsboro; */
}
/* Comprend le texte 3 de la page "La pierre de Volvic" */
.texte3lapierredevolvic {
	margin: 0px;
	padding: 15px 50px 50px 40px;
	/* background-color: gainsboro; */
}
.texte3-pierre-index-tri {
	margin: 0px;
	padding: 15px 0px 30px 0px;
	/* background-color: gainsboro; */
}
/********************/
/* Page "Les Emaux" */
/********************/
/* Image de la page "Les Emaux" */
.imgemaux1 {
	width:600px;
	height:430px;
	/* border: 3px solid black;
	border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin: 56px 40px 20px 25px;
}
/* Comprend le texte 1 de la page "Les Emaux" */
.texte1emaux {
	margin: 45px 50px 0px 40px;
}
/* Comprend le texte 2 de la page "Les Emaux" */
.texte2emaux {
	margin: 30px 50px 30px 40px;
}
/* Comprend le texte 3 de la page "Les Emaux" */
.texte3emaux {
	margin: 0px 50px 0px 40px;
}
/* Div comprenant le Logo fin de page et permettant de center le logo dans la page */
/* .logofinpage4 {
	display: flex;
	justify-content: center;
} */

/***********************/
/* Page "Réalisations" */
/***********************/
/* Permet de mettre une vidéo en fond d'écran sur la nouvelle page réalisation
/* La vidéo couvre tout l'écran */
video#background-video {
  position: fixed;   /* reste fixe même au scroll */
  /* top: 0; */
  /* left: 0; */
  /* right: 0;
  bottom: 0; */
  min-width: 100%;   /* s'adapte à la largeur */
  /*min-height: 0%;*/ /* s'adapte à la hauteur */
  object-fit: cover; /* recadre la vidéo pour remplir l’écran */
  /* object-position: center;  */
  /* object-position: center top;  */
  /* object-position: center bottom;  */
  /* object-position: 50% 30%;   */
  z-index: -1;       /* envoie la vidéo derrière le texte */
}
/* Overlay semi-transparent */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); */ /* Dégradé en commençant par le haut */
  background: linear-gradient(to bottom, rgba(255, 255, 255,0.7), transparent); /* Dégradé en commençant par le bas */
  /* background:rgba(255, 255, 255, 0.4);*/ /* blanc léger */
  /* background:rgba(255,255,255,0.3); */ /* blanc léger */
  /* background: rgba(0, 0, 0, 0.5); */ /* noir avec 50% de transparence */
  z-index: -1; /* au-dessus de la vidéo, mais derrière le texte */
}
/* Le contenu de la page */
.content {
  position: relative;
}
/*******************************************************************************/
.logonav_realisation {
	margin: 0px 0px 20px 0px;
}
.menu-imgrealisations ul {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.imgrealisations {
	width: 300px;
	/* border: 3px solid black;
	border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin: 10px 30px 30px 30px;
}
.imagesrealisations-container {
	display: flex;
	/* border : solid 2px red; */
}
.imagesrealisations {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: left; 
	/* justify-items: center; */
	margin: 0px 20px 20px 20px;
	/* border : solid 2px blue; */
}
/* Permet de modifier les images et le titre positionné à gauche de la nouvelle page réalisation */
.imagesrealisations-new-left {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: left; 
	/* justify-items: center; */
	margin: 0px 40px 0px 200px;
	/* border : solid 2px blue; */
}
/* Permet de modifier les images et le titre positionné à droite de la nouvelle page réalisation */
.imagesrealisations-new-right {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: left; 
	/* justify-items: center; */
	margin: 0px 200px 0px 40px;
	/* border : solid 2px blue; */
}
.h2-imagesrealisations {
	text-align: center;
	/* border : solid 2px black; */
}
/* Permet de modifier le texte positionné à droite de la nouvelle page réalisation */
.div-p-imagesrealisations-right {
	display: flex;
	align-items: center;
	justify-content: center;
	/* border : solid 2px green; */
	margin: 0px 200px 0px 40px;
}
/* Permet de modifier le texte positionné à gauche de la nouvelle page réalisation */
.div-p-imagesrealisations-left {
	display: flex;
	align-items: center;
	justify-content: center;
	/* border : solid 2px green; */
	margin: 0px 40px 0px 200px;
}
.p-imagesrealisations {
	font-size: 20px;
	text-align: center;
	margin: 77px 20px 5px 0px;
}
/*********************/
/* Page "Sculptures" */
/*********************/
.h2-page-sculptures {
	/* height: 50px; */
	/* margin-top: 150px; */
	display: none;
}
/* Permet de maintenir le menu à droite de l'écran, sans qu'il ne soit tout au fond à droite */
/* contener > nav {
	position: fixed;
  	top: 0;
  	width: 100%;
	margin-bottom: 100px ;
} */
/* .premiere {
	display: flex;

}
.vide {
	width: 100px;
	border: 2px solid blue;

} */
/* Div comprenant toutes les images de la page réalisation */
.div-imagesculptures { 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center; 
	justify-items: center;
	margin-top: 80px;
}
.imagesculptures {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center; 
	justify-items: center;
	margin: 50px 20px 20px 20px;
	/* margin-top: 50px;
	margin-bottom: 20px; */
}
.imagesculptures >  a {
	justify-content: space-evenly;
}
/* Toutes les images de la page "Sculptures" */
.imagesculpture {
	width: 250px;
	/* height: 400px; */
	border: 3px solid rgb(204, 201, 201);
	/*border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin: 5px;
	transition-duration: 2s;
}
/* Conséquences sur toutes les images de la page "Sculptures" au survol de la souris */
.imagesculpture:hover {
	transform: scale(1.1)
}
/****************************/
/* Page "Plaques émaillées" */
/****************************/
/* Toutes les images de la page "Plaques émaillées" */
.imagesplaquesemaillees {
	width: 300px;
	border: 1px solid rgb(150, 100, 40);
	margin: 10px;
	transition-duration: 2s;
}
/* Conséquences sur toutes les images de la page "Plaques émaillées" au survol de la souris */
.imagesplaquesemaillees:hover {
	transform: scale(1.1)
}
/*********************/
/* Page "Evènements" */
/*********************/
/* Contener de la page "Evènement" */
.contener-event {
	display: block;
	height: 200px;
}
/* H1 de la page "Evènement" */
.h1-event {
	height: 50px;
	margin-top: 0px; 
	/* color: gainsboro; */
}
/* Image de la page "Evènement" */
.imgevenements {
	width: 700px;
	/* border: 3px solid black;
	border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin:40px 40px 40px 25px;
}
.texte-event {
	margin-top: 90px;
	/* border: solid 2px black; */
}
/* Comprend le texte 1 de la page "Principale" */
.texte1event {
	font-size: 20px;
	margin:0px 10px 0px 10px;
	/* border: solid 2px red; */
}
/* Comprend le texte 2 de la page "Principale" */
.texte2event {
	font-size: 20px;
	margin: 30px 10px 40px 10px;
}
/* Comprend le texte 2 de la page "Principale" */
.texte3event {
	font-size: 20px;
	text-align: center;
	margin: 10px 10px 0px 10px;
}
/* Comprend le texte 2 de la page "Principale" */
.texte4event {
	font-size: 20px;
	text-align: center;
	margin: 0px 10px 0px 10px;
}
.texte5event {
	font-size: 16px;
	text-align: center;
	margin: -20px 0px 0px 0px;
}
.texte6event {
	font-size: 16px;
	text-align: center;
	margin: -10px 0px 20px 0px;
}
.link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px 0px 50px 0px;
	/* border: solid 2px red; */
}
.link-site {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: solid 2px blue; */

}
.link-lien {
	text-decoration: none;
	color: black;
	font-size: 20px;
}
/******************/
/* Page "Contact" */
/******************/
/* Image de la page "Contact" */
.imgcontact {
	width:600px;
	border: 3px solid rgb(204, 201, 201);
	/* border-radius:35px;
	box-shadow:5px 5px 12px black; */
	margin: 50px 40px 25px 60px
}
/* Div comprenant le titre et tout le formulaire de la page contact, qui me permet de centrer le tous en hauteur. */
.parag-contact {
	width: 100%;
	margin-top: 50px;
}
/* Div comprenant le formulaire de la page "Contact" */
.formulaire {
	display: flex;
	flex-direction: column;
	margin: 30px 50px 0px 40px;
}
/* Comprend tous les "label" de la page "Contact"*/
label {
	font-family:'Georgia';
	font-size:30px;
	font-style:italic;
	/* color:black; */
	color:rgb(204, 201, 201);

}
/* Comprend tous les "input" de la page "Contact"*/
input {
	height: 30px;
	border: 1px solid rgb(204, 201, 201);
	border-radius: 5px;
	margin-bottom: 10px; 
	padding-left: 10px;
}
/* Comprend tous les "textarea" de la page "Contact"*/
textarea {
	border-radius: 5px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-left: 10px;
}
.erreurmessage {
	color: red;
}
/* Permet de modifier le bouton "Envoyer" */
.envoyer {
	height: 35px;
	color: #c7a113;
	/* color:rgb(204, 201, 201); */
	background-color: gainsboro;
	font-family:'Georgia';
	font-size:20px;
	font-style:italic;
	align-self: flex-end;
	border: 2px solid rgb(204, 201, 201);
	padding: 5px 10px 10px 10px;
	cursor: pointer;
}
/**************************/
/* Page "Mentions légales" */
/**************************/

/* Permet de centrer le titre h1 */
.h1-mentions {
	text-align: center;
	margin: 0px 0px 20px 0px;
}
/* Permet de centrer le titre h2 de la page "Mentions légales". */
.h2-mentions {
	display: block;
	text-align: center;
	color:rgb(204, 201, 201);
	margin: 25px 0px 5px 0px;
}
/* Permet de centrer le titre h2 */
/* .h2-mentions-spe {
	text-align: center;
	color: rgb(204, 201, 201);
} */
.mentions1 {
	margin: 25px 0px 25px 0px;
}
/* Permet de pouvoir center le texte */
.mentions > p, .mentions1 > p {
	text-align: center;
	margin: 5px 0px 5px 0px;
}
.mentions > .p-final {
	margin: 5px 0px 25px 0px;
}
#scroll_to_top {
	display: none; /* Masqué par défaut */
    position: fixed;
    z-index: 100;
    width: 50px;
    height: 30px;
    bottom: 50px;
    right: 40px;
}
.boutonup {
	width: 50px;
	/* color: gainsboro; */
}
@media screen  and (max-width: 1700px) {
	header {
		height:150px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 105px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 150px 0px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 110px 0px 0px;
	}
	/* .liens {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color:rgb( 77, 11, 0);
		border: 2px solid gainsboro;
		border-radius: 10px;
		background-color: gainsboro;
	}  */
	/* Permet de modifier les liens au sur-vol de la souris */
	/* .liens:hover {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color: whitesmoke;
		border: 2px solid rgb( 77, 11, 0);
		border-radius: 10px;
		background-color: rgb( 77, 11, 0);
	} */
}
@media screen  and (max-width: 1600px) {
	header {
		height:150px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 110px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 150px 0px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 115px 0px 0px;
	}
	/* .liens {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color:rgb( 77, 11, 0);
		border: 2px solid gainsboro;
		border-radius: 10px;
		background-color: gainsboro;
		margin: 20px;
		padding: 10px 15px 10px 15px;
	}  */
	/* Permet de modifier les liens au sur-vol de la souris */
	/* .liens:hover, .sculptures:hover, .plaquesemaillees:hover {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color: whitesmoke;
		border: 2px solid rgb( 77, 11, 0);
		border-radius: 10px;
		background-color: rgb( 77, 11, 0);
		margin: 20px;
		padding: 10px 15px 10px 15px;
	} */
}
@media screen  and (max-width: 1500px) {
	header {
		height:150px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 130px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 150px 0px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 115px 0px 0px;
	}
	.img-emaux-tri {
		width: 65%;
	}
	/* .liens {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color:rgb( 77, 11, 0);
		border: 2px solid gainsboro;
		border-radius: 10px;
		background-color: gainsboro;
		margin: 20px;
		padding: 10px 20px 10px 15px;
	} */
	/* Permet de modifier les liens au sur-vol de la souris */
	/* .liens:hover {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color: whitesmoke;
		border: 2px solid rgb( 77, 11, 0);
		border-radius: 10px;
		background-color: rgb( 77, 11, 0);
		margin: 20px;
		padding: 10px 15px 10px 15px;
	} */
	.p0 {
		margin: 0px 0px 0px 5px;
	}
}
@media screen  and (max-width: 1400px) {
	header {
		height:150px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 140px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 150px 0px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 115px 0px 0px;
	}
	.img-emaux-tri {
		width: 70%;
	}
	/* .liens {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color:rgb( 77, 11, 0);
		border: 2px solid gainsboro;
		border-radius: 10px;
		background-color: gainsboro;
		margin: 20px;
		padding: 10px 15px 10px 15px;
	} */
	/* Permet de modifier les liens au sur-vol de la souris */
	/* .liens:hover {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color: whitesmoke;
		border: 2px solid rgb( 77, 11, 0);
		border-radius: 10px;
		background-color: rgb( 77, 11, 0);
		margin: 20px;
		padding: 10px 15px 10px 15px;
	} */
}
@media screen  and (max-width: 1300px) {
	header {
		height:150px;
	}
	.actif {
		margin: 13px;
		padding: 13px;
	}
	.liens {
		margin: 13px;
		padding: 13px;
	}
	.liens-sculptures {
		margin: 13px;
		padding: 13px;
	}
	.logoentete {
		width: 70%;
		padding: 0px 0px 0px 0px;
		margin-bottom: 10px;
	}
	.p0 {
		font-size: 40px;
		margin-bottom: 0px;
		margin: 0px 0px 0px 5px;
	}
	.nav > div {
		margin-right: 20px;
	}
	.nav-sculp > div {
		margin-right: 20px;
	}
	h1 {
		margin: 60px 0px 0px 40px;
	}
	/* .infosofib {
		display: block;
	} */
	 /* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 130px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 130px 0px 0px;
	}
	.imgparag {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* .imgsofib  {
		width: 60%;
		height: auto;
		margin: 0px 0px 0px 0px;
	} */
	.imglapierredevolvic1 {
		margin: 56px 25px 0px 40px;
	}
	.img-emaux-tri {
		width: 75%;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 120px 0px 0px;
	}
	.imgemaux1 {
		margin: 56px 40px 20px 25px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 600px;
		margin:40px 40px 40px 25px;
	}
	.texte1sofib {
		padding: 50px 50px 15px 40px;
	}
}
@media screen  and (max-width: 1250px) {
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
}
@media screen  and (max-width: 1200px) {
	header {
		height: 150px;
	}
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.nav > div {
		display: flex;
		justify-content: center;
	}
	.logonav {
		margin-left: 8px;
	}
	.logonav_realisation {
		margin: 12px 0px 20px 0px;
	}
	.actif {
		margin: 13px;
		padding: 13px;
	}
	.liens {
		margin: 13px;
		padding: 13px;
	}
	.liens-sculptures {
		margin: 13px;
		padding: 13px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 85px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 85px 0px 0px;
	}
	.img-pierre-volvic-tri {
		width: 50%;
	}
	/* .texte-pierre-complement {
		padding: 0px 100px 0px 100px;
	} */
	.img-emaux-tri {
		width: 80%;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 130px 0px 0px;
	}
	/* .imgsofib  {
		margin: 36px 40px 40px 25px;
	} */
	/* Page Evènement */
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 550px;
		margin:40px 40px 40px 25px;
	}
	.texte-event {
		margin-top: 90px;
		border: solid 2px rgb(204, 201, 201);
	}
	.logofinpage-event {
		margin: 70px 0px 30px 0px;	
	}
}
@media screen  and (max-width: 1150px) {
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.logonav {
		margin-top: -6px;
	}
}
@media screen  and (max-width: 1100px) {
	header {
		height: 150px;
	}
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.logonav {
		margin: 1px 0px 22px 8px;
	}
	.logonav_realisation {
		margin: 30px 0px 20px 0px;
	}
	.actif {
		margin: 10px;
		padding: 10px;
	}
	.liens {
		margin: 10px;
		padding: 10px;
	}
	.liens-sculptures {
		margin: 10px;
		padding: 10px;
	}
	.video-container video {
		width: 280px;
		height: auto;
		padding: 0px 20px 0px 20px;	
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 110px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 105px 0px 0px;
	}
	/* .texte-pierre-complement {
		padding: 0px 70px 0px 70px;
	} */
	.img-pierre-volvic-tri {
		width: 57%;
	}
	.img-emaux-tri {
		width: 85%;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 155px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 145px 0px 0px;
	}
	/* .imgsofib  {
		margin: 34px 40px 40px 25px;
	} */
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 500px;
		margin:40px 40px 40px 25px;
	}
}
@media screen  and (max-width: 1050px) {
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 8px;
		padding: 8px;
	}
}
@media screen  and (max-width: 1000px) {
	header {
		height: 150px;
	}
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.logonav_realisation {
		margin: 30px 0px 20px 0px;
	}
	.actif {
		font-size: 30px;
		margin: 8px;
		padding: 8px;
	}
	.liens {
		font-size: 30px;
		margin: 8px;
		padding: 8px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 5px;
		padding: 5px;
	}
	.video-container video {
		width: 260px;
		height: auto;
		padding: 0px 15px 0px 15px;	
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 105px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 105px 0px 0px;
	}
	.img-pierre-volvic-tri {
		width: 65%;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 135px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 140px 0px 0px;
	}
	/* .infosofib {
		display: block;
	} */
	.infosofib-contact{
		display: block;

	}
	.imgparag {
		display: flex;
		justify-content: center;
	}
	/* .imgsofib  {
		width: 70%;
		height: auto;
		margin: 32px 0px 0px 0px;
	} */
	.imglapierredevolvic1 {
		width: 70%;
		height: auto;
		margin: 32px 0px 32px 0px;
	}
	.imgemaux1 {
		width: 70%;
		height: auto;
		margin: 32px 0px 20px 0px;
	}
	.imgcontact {
		width: 70%;
		height: auto;
		margin: 50px 0px 0px 0px;
	}
	h1 {
		text-align: center;
		margin: 45px 0px 0px 0px;
	}
	.h2-titre {
		margin-top: 0px;
		padding-top: 40px;
	}
	.h2-titre-emaux {
		margin-top: 0px;
		padding-top: 0px;
	}
	.texte1sofib {
		padding: 50px 50px 15px 40px;
	}
	/* .texte-pierre-complement {
		padding: 0px 50px 0px 50px;
	} */
	.imgcontact {
		margin: 0px 0px 0px 0px;
	}
	/* Image de la page "Evènement" */
	.h1-event {
		text-align: left;
		margin: 0px;
	}
	.imgevenements {
		width: 800px;
		margin:40px 0px 40px 0px;
	}
}
@media screen  and (max-width: 950px) {
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 4px;
		padding: 4px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 125px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 140px 0px 0px;
	}
}
@media screen  and (max-width: 910px) {
	.video-container video {
		width: 240px;
		height: auto;
		padding: 0px 10px 0px 10px;	
	}
	/* .video-container {
		display: none;
	}
	.last-video {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50px 0px 50px 0px;
	}
	.last-video video {
		width: 300px;
		height: auto;
		border: 2px solid #ccc;
		border-radius: 8px;
	} */
}
@media screen  and (max-width: 900px) {
	header {
		height: 150px;
	}
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 40px;
		margin: 0px 0px 0px 5px;
	}
	.logonav_realisation {
		margin: 30px 0px 20px 0px;
	}
	.nav > .imgrealisations {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.actif {
		font-size: 30px;
		margin: 6px;
		padding: 6px;
	}
	.liens {
		font-size: 30px;
		margin: 6px;
		padding: 6px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 2px;
		padding: 2px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 85px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 82px 0px 0px;
	}
	.img-pierre-volvic-tri {
		width: 70%;
	}
	.texte-pierre-complement {
		padding: 0px 90px 0px 90px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 95px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		padding: 0px 105px 0px 0px;
	}
	.texte-emaux-complement {
		padding: 0px 90px 0px 90px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 750px;
	}
}
@media screen  and (max-width: 850px) {
	header {
		height: 150px;
		display: flex;
		flex-direction: column;
	}
	/* Fin du Menu Burger à 850 px */
	.contener-sculp {
		position: static !important;
		height: 250px;
		margin-bottom: 0px;
		/* top: 0;
		width: 100%;
		margin-bottom: 30px ; */
		/* background-color: rgba(0,0,0,0.6); */
		background-color: rgba(220,220,220,0.6);
	}
	.main-sculp {
		margin-top: 20px;
	}
	.sous-contener {
		height: 0px;
	}
	.sous-contener-realisations {
		height: 0px;
	}
	/* .href_logo {
		width: 100px;
		height: 100px;
	} */
	.logoentete {
		width: 100%;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	} 
	.logonav {
		margin: -2px 0px 22px 6px;
	}
	.p0 {
		font-size: 30px;
		justify-content: center;
	}
	.p01 {
		justify-content: center;
	}
	.imglapierredevolvic1 {
		margin: 32px 0px 32px 0px;
	}
	 .imgemaux1 {
		margin: 32px 0px 0px 0px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 1px;
		padding: 1px;
	}
	/* Permet de faire apparaitre le menu Burger à 850px */
	.menu {
		display: none;
		flex-direction: column;
		align-items: center;
		/* background-color: gainsboro; */
		/* background-color: rgba(220,220,220,0.9); */
		background-color: rgba(0,0,0,0.6);

		position: absolute;
		top: 60px; /* hauteur approximative du header */
		left: 0;
		width: 100%;
		/* box-shadow: 0px 4px 8px rgba(0,0,0,0.1); */
		z-index: 1000;
	}
	.menu.active {
		display: flex;
	}
	.burger {
		/* display: block; */
		display: flex;
	}
	.nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20px 0px 20px 0px;
	}
	.nav > div {
		flex-direction: column;
		align-items: center;
		margin-right: 0px;
	}
	/* Permet de diminuer l'espace entre le premier lien du menu de navigation et la croix du burger. */
	.first-nav {
		/* margin-top: -14px; */
		margin-top: 0px;
	}
	.nav-sculp {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin: 20px 0px 0px 0px;
	}
	.nav-sculp > div {
		flex-direction: column;
		align-items: center;
		margin-right: 0px;
	}
	.actif {
		display: block;
		height: 44px;
		font-size: 30px;
		/* color: rgb(204, 201, 201); */
		/* margin: 0px; */
		padding: 0px;
		border: none;
	}
	.liens {
		display: block;
		height: 44px;
		font-size: 30px;
		/* margin: 0px; */
		padding: 0px;
		/* border: none; */
		/* border: inherit;
		border-radius: inherit;
		background-color: inherit; */
	}
	.liens-sculptures {
		display: block;
		height: 44px;
		font-size: 30px;
		/* margin: 0px; */
		padding: 0px;
		border: none;
	}
	/* Activer :active pour les écrans tactiles */
	@media (hover: none) and (pointer: coarse) {
		.liens:active, .liens-sculptures:active {
			color: rgb(204, 201, 201);
			margin: 0px;
			padding: 0px 2px 0px 2px;
		}
	}
	/* Permet de modifier les liens au sur-vol de la souris */
	.liens:hover, .liens-sculptures:hover {
		font-style:italic;
		font-family:'Kaushan Script';
		text-decoration:none;
		font-size:30px;
		color: whitesmoke;
		border: 2px solid gainsboro;
		border-radius: 10px;
		background-color: rgba(220,220,220,0.6);
		margin: 0px;
		padding: 0px 2px 0px 2px;
	} 
	.menu-deroulant {
		/* padding: 0px 8px 0px 0px; */
		padding: 0px 0px 0px 0px;
	}
	.video-container {
		padding: 30px 20px 50px 20px;
	}
	/* h1 de la page "Evènement" */
	.h1-event {
		height: 20px;
		text-align: center;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		padding: 0px 0px 0px 105px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 65px 0px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px 0px 0px 80px;
	}
	.textparag-sofib-emaux {
		padding: 0px 100px 0px 0px;
	}
	.div-imagesculptures {
		margin-top: 20px;
	}
	.imagesculptures {
		margin: 0px 10px 20px 10px;
	}
	/* Contener de la page "Evènement" */
	.contener-event {
		height: 210px;
		margin-bottom: 0px;
	}
	.imgcontact {
		margin: -20px 0px 0px 0px;
	}
}
@media screen and (max-width:820px){ 
	/* header {
		height: 150px;
	} */
	/* header {
		height: 150px;
		display: flex;
		flex-direction: column;
	} */
	.logoentete {
		width: 100%;
		padding: 0px 0px 0px 0px;
		margin: 0px;
	}
	.p0 {
		margin: 0px 0px 0px 5px;
	}
	.logonav_index {
		margin: 30px 0px 5px 12px;
	}
	.logonav {
		margin: 32px 0px 4px 6px;
	}
	.logonav_contact {
		margin-top: 32px;
	}
	/* Permet de diminuer l'espace entre le premier lien du menu de navigation et la croix du burger. */
	/* .first-nav {
		margin-top: 30px;
	} */
	.actif {
		font-size: 30px;
		/* margin: 4px;
		padding: 4px; */
	}
	.liens {
		font-size: 30px;
		margin: 4px;
		padding: 4px;
	}
	.liens-sculptures {
		font-size: 30px;
		margin: 0px;
		padding: 0px;
	}
	.video-container video {
		width: 220px;
		height: auto;
		padding: 0px 5px 0px 5px;	
	}
	.texte1sofib {
		padding: 40px 50px 10px 50px;
	}
	.texte2sofib {
		padding: 10px 50px 10px 50px;
	}
	.texte1sofib-tri {
		padding: 50px 0px 10px 0px;
	}
	.texte2sofib-tri {
		padding: 10px 0px 10px 0px;
	}
	/* Comprend le texte final de la section Sofib de la page "Tri" */
	.texte6sofib-tri {
		padding: 10px 0px 20px 0px;
	}
	.infosofib-sofib-pierre {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px 0px 0px 0px;
		/* border: solid 4px red; */
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		width: 100%;
		padding: 20px 0px 20px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		width: 100%;
		padding: 0px 0px 0px 0px;
	}
	.texte-pierre-complement {
		padding: 0px 80px 0px 80px;
	}
	.texte1lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte2lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte3lapierredevolvic {
		margin: 20px 50px 0px 50px;
	}
	.texte1-pierre-index-tri {
		padding: 20px 0px 10px 0px;
	}
	.texte2-pierre-index-tri {
		padding: 10px 0px 10px 0px;
	}
	.texte3-pierre-index-tri {
		padding: 10px 0px 40px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Emaux'*/
	.imgparag-emaux-tri {
		padding: 0px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Emaux'*/
	.textparag-sofib-emaux {
		width: 100%;
		padding: 20px 0px 20px 0px;
	}
	.infosofib-sofib-emaux {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		padding: 0px 0px 0px 0px;
		/* border: solid 4px red; */
	}
	.texte-emaux-complement {
		padding: 0px 80px 0px 80px;
	}
	.texte1emaux {
		margin: 40px 50px 20px 50px;
	}
	.texte2emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte3emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte4emaux {
		margin: 20px 50px 0px 50px;
	}
	.texte1-emaux-index-tri, .texte2-emaux-index-tri, .texte3-emaux-index-tri {
		padding: 10px 0px 10px 0px;
	}
	.texte4-emaux-index-tri {
		padding: 10px 0px 30px 0px;
	}
	p {
		font-size: 25px;
		margin: 0px;
	}
	.imglapierredevolvic1 {
		margin: 32px 0px 32px 0px;
	}
	.img-pierre-volvic-tri {
		width: 60%;
	}
	.imgemaux1 {
		margin: 32px 0px 0px 0px;
	}
	.logofinpage {
		margin: 30px 0px 32px 0px;
	}
	.imgrealisations {
		margin: 30px 30px 15px 30px;
	}
	.logofinpage-realisations {
		margin: 0px 0px 20px 0px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 700px;
	}
	.imgcontact {
		margin: 0px 0px 0px 0px;
	}
}
@media screen  and (max-width: 750px) {
	.video-container video {
		width: 200px;
		height: auto;
		padding: 0px 5px 0px 5px;	
	}
	.h2-titre {
		margin-top: 0px;
		padding-top: 40px;
	}
	.h2-titre-emaux {
		margin-top: 0px;
		padding-top: 0px;
	}
	.texte-pierre-complement {
		padding: 0px 70px 0px 70px;
	}
	.texte-emaux-complement {
		padding: 0px 70px 0px 70px;
	}
	.img-pierre-volvic-tri {
		width: 60%;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 650px;
	}
}
@media screen  and (max-width: 718px) {
	.contener {
		margin-bottom: 0px;
		height: 250px;
	}
	.contener-event {
		height: 210px;
		margin-bottom: 0px;
	}
	/* .sous-contener {
		height: 230px;
	} */
	.sous-contener-realisations {
		height: 0px;
	}
	/* header {
		height: 150px;
		display: flex;
		flex-direction: column;
	} */
	.header-sculp {
		margin-top: 10px;
	}
	.logoentete {
		width: 100%;
		margin: 0px;
	}
	.p0 {
		margin: 0px 0px 0px 0px;
	}
	/* .div-nav-sculp {
		margin-bottom: 20px;
	} */
	.div-nav-sculp-realisation {
		margin-bottom: 20px;
	}
	.logonav_contact {
		margin-top: 32px;
	}
	.video-container {
		padding: 10px 20px 50px 20px;
	}
	/* H1 de la page "Evenement" */
	/* .h1-event {
		margin: 0px 0px 30px 0px; 
	} */
	/* Permet de supprimer le fait de metre le paragraphe Sofib sur la hauteur de l'écran et cliquant sur le menu 'Sofib' */
	/* #info-sofib {
		min-height: 0;
	} */
	/* Permet de mettre la photo de Sofib et de la phrase d'accroche l'un en dessous de l'autre*/
	.infosofib-sofib {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* border: solid 4px red; */
	}
	h2 {
		margin: -10px 0px 15px 0px;
	}
	.imgsofib {
		width: 70%;
	}
	.texte1sofib {
		padding: 40px 50px 10px 50px;
	}
	.texte2sofib {
		padding: 10px 50px 10px 50px;
	}
	.texte-sofib-complement{
		padding: 0px 90px 0px 90px;
	}
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	/* .textparag-sofib-pierre {
		padding: 0px 0px 0px 65px;
	} */
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	/* .imgparag-pierre-tri {
		padding: 0px 50px 0px 0px;
	} */
	.texte-pierre-complement {
		padding: 0px 50px 0px 50px;
	}
	.texte1lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte2lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte3lapierredevolvic {
		margin: 20px 50px 0px 50px;
	}
	.texte-emaux-complement {
		padding: 0px 50px 0px 50px;
	}
	.texte1emaux {
		margin: 40px 50px 20px 50px;
	}
	.texte2emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte3emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte4emaux {
		margin: 20px 50px 0px 50px;
	}
	p {
		text-align: center;
		font-size: 25px;
		margin: 0px;
	}
	.imglapierredevolvic1 {
		margin: 20px 0px 20px 0px;
	}
	.imgemaux1 {
		margin: 20px 0px 0px 0px;
	}
	.logofinpage {
		margin: 30px 0px 32px 0px;
	}
	.imgrealisations {
		margin: 30px 30px 15px 30px;
	}
	.logofinpage-realisations {
		margin: 0px 0px 20px 0px;
	}
	.imgcontact {
		margin: 20px 0px 0px 0px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 600px;
	}
	.div-imagesculptures {
		margin-top: 20px;
	}
	.icons-droits {
		flex-direction: column;
	}
	.lien-mentions-tiret {
		line-height: 5px;
	}	
}	
@media screen and (max-width:670px){ 
	.video-container {
		display: none;
	}
	.last-video {
		display: flex;
		justify-content: center;
		align-items: center;
		/* width: 90%; */
		padding: 20px 0px 20px 0px;
	}
	.last-video video {
		width: 70%;
		height: auto;
	}
}
@media screen and (max-width:660px){ 
	header {
		height: 150px;
	}
	.logoentete {
		padding: 0px 0px 0px 0px;
	}
	.logonav_index {
		margin: 30px 0px 5px 12px;
	}
	.logonav {
		margin: 32px 0px 4px 6px;
	}
	.logonav_contact {
		margin-top: 32px;
	}
	/* .actif {
		display: block;
		height: 45px;
		font-size: 30px;
		margin: 0px;
		padding: 0px;
	}
	.liens {
		display: block;
		height: 45px;
		font-size: 30px;
		margin: 0px;
		padding: 0px;
	} */
	.texte1sofib {
		padding: 35px 50px 10px 50px;
	}
	.texte2sofib {
		padding: 10px 50px 10px 50px;
	}
	/* .infosofib-sofib-pierre {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px 0px 0px 0px;
	} */
	/* Permet de modifier le padding du titre h2 et du texte d'accroche de la section 'Pierre de Volvic'*/
	.textparag-sofib-pierre {
		width: 100%;
		padding: 20px 0px 20px 0px;
	}
	/* Permet de modifier le padding de l'image de la section 'Pierre de Volvic'*/
	.imgparag-pierre-tri {
		padding: 0px 0px 0px 0px;
	}
	.texte1lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte2lapierredevolvic {
		margin: 20px 50px 20px 50px;
	}
	.texte3lapierredevolvic {
		margin: 20px 50px 0px 50px;
	}
	.texte1emaux {
		margin: 40px 50px 20px 50px;
	}
	.texte2emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte3emaux {
		margin: 20px 50px 20px 50px;
	}
	.texte4emaux {
		margin: 20px 50px 0px 50px;
	}
	p {
		font-size: 25px;
		margin: 0px;
	}
	/* .imglapierredevolvic1, .imgemaux1 {
		margin: -2px 0px 0px 0px;
	} */
	.logofinpage {
		margin: 30px 0px 32px 0px;
	}
	.imgrealisations {
		margin: 30px 30px 15px 30px;
	}
	.logofinpage-realisations {
		margin: 0px 0px 20px 0px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 550px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
		right: 30px;
  	}
}
@media screen and (max-width:625px){ 
	header {
		height: 150px;
	}
	.logoentete {
		width: 100%;
		margin: 0px 0px 0px 0px;
	}
	.p0 {
		padding: 0px 0px 0px 0px;
		/* margin-bottom: 10px; */
	}
	.logonav {
		margin-top: 30px;
	}
	.logonav_realisation {
		margin: 28px 0px 0px 0px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	.img-pierre-volvic-tri {
		width: 60%;
	}
	.texte-sofib-complement{
		padding: 0px 80px 0px 80px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 520px;
	}
	.imagesculptures {
		margin: 0px 10px 10px 10px;
	}
}
@media screen  and (max-width: 550px) {
	.header-sculp {
        margin-top: 5px;
	}
	header {
		height: 140px;
	}
	/* .href_logo {
		width: 100px;
		height: 100px;
	} */
	.logoentete {
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
	.liens-sculptures {
		font-size: 25px;
		margin: 0px;
		padding: 0px;
		border: none;
	}
	/* Permet de diminuer l'espace entre le premier lien du menu de navigation et la croix du burger. */
	/* .first-nav {
		margin-top: -20px;
	} */
	.nav-realisations {
		margin-top: 18px;
	}
	.div-nav-sculp-realisation {
		margin-top: 60px;
	}
	.nav-sculp {
		margin: 20px 0px 0px 0px;
	}
	.contener {
		margin-bottom: 0px ;
		height: 230px;
	}
	.contener-sculp {
		height: 230px;
	}
	/* .sous-contener {
		height: 190px;
	} */
	.sous-contener-realisations {
		height: 0px;
	}
	/* Quand le menu est ouvert */
	#main-content.pushed {
		margin-top: 270px;
	}
	/* Quand le menu est ouvert pour la page Réalisations */
	#main-content-sculp.pushed {
		margin-top: 280px;
	}
	.infosofib {
		margin-top: 7px;
	}
	h2 {
        margin: 10px 0px 20px 0px;
    }
	/* .phrase-accroche1-pierre {
		font-size: 20px;
	} */
	.div-imagesculptures {
		margin-top: -10px;
	}
	.imagesculpture {
		width: 225px;
	}
	.imagesculptures {
		margin: -20px 10px 10px 10px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	.img-pierre-volvic-tri {
		width: 65%;
	}
	.img-emaux-tri {
		width: 100%;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 480px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
		right: 23px;
  	}
}
@media screen and (max-width:500px){ 
	header {
		height: 140px;
	}
	.p0 {
		font-size: 30px;
	}
	.nav-realisations {
		margin-top: 40px;
	}
	.logonav_contact {
		margin-top: 52px;
	}
	.logonav_realisation {
		margin-top:10px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	.texte1sofib {
		padding: 30px 50px 10px 50px;
	}
	.texte-sofib-complement{
		padding: 0px 70px 0px 70px;
	}
	.img-emaux-tri {
		width: 110%;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 450px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
		right: 20px;
  	}
}
@media screen and (max-width:468px){
	/* .boutonup {
		margin-left: 24px;
	} */

	/* Image de la page "Evènement" */
	.imgevenements {
		width: 420px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
		right: 17px;
  	}
}
/* @media screen and (max-width:460px){ 
	.boutonup {
		margin-left: 25px;
	} */
/* } */
@media screen  and (max-width: 450px) {
	.p0 {
		font-size: 30px;
	}
	.contener {
		height: 23s0px;
	}
	.div-nav-sculp {
		margin-top: 50px;
		margin-bottom: 0px;
	}
	.div-nav-sculp-realisation {
		margin-top: 60px;
	}
	.div-imagesculptures {
		margin-top: 10px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	.h2-titre {
		margin-top: 0px;
		padding-top: 30px;
	}
	.h2-titre-emaux {
		margin-top: 0px;
		padding-top: 0px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 385px;
	}
	/* .boutonup {
		margin-left: 20px;
	} */
}
@media screen and (max-width:416px){ 
	.contener {
		height: 270px;
	}
	.contener-sculp {
		height: 270px;
	}
	/* .sous-contener {
		height: 230px;
	} */
	.sous-contener-realisations {
		height: 0px;
	}
	.div-nav-sculp {
		margin-top: 90px;
	}
	.div-nav-sculp-realisation {
		margin-top: 90px;
		/* margin-bottom: 100px; */
	}
	.imagesculptures {
		margin: -25px 20px 20px 20px;
	}
	.texte-sofib-complement{
		padding: 0px 60px 0px 60px;
	}
}
@media screen and (max-width:400px){ 
	body {
		width: 100%;
		height: 100%;
	}
	.p0 {
		font-size: 30px;
	}
	p {
		font-size: 20px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 340px;
	}
	.texte-sofib-complement{
		padding: 0px 50px 0px 50px;
	}
	.h2-titre-pierre {
		padding: 0px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
		right: 8px;
		bottom: 120px;
	  }
}
@media screen  and (max-width: 350px) {
	.p0 {
		font-size: 30px;
	}
	.imgsofib {
		margin-top: 0px;
	}
	h1 {
	font-size:30px;	
	}
	/* Image de la page "Evènement" */
	.imgevenements {
		width: 300px;
	}
	/* Permet de positionner le bouton UP */
	#scroll_to_top {
    	bottom: 185px;
  	}
}
@media screen and (max-width:300px){ 
	.p0 {
		font-size: 30px;
	}
	.imagesculpture {
		width: 250px;
		border: 1px solid rgb(150, 100, 40);
		margin: 10px;
	}
	.logonav_contact {
		margin-top: 68px;
	}
	.imgrealisations {
		width: 240px;
		margin: 40px 30px 15px 30px;
	}
}
@media screen  and (max-width: 256px) {
	.logoentete {
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
	.p0 {
		font-size: 30px;
	}
	.logonav {
		margin-top: 68px;
	}
	.logonav_realisation {
		margin: 20px 0px 0px 0px;
	}
	.imgrealisations {
		width: 230px;
		margin: 40px 10px 15px 20px;

	}
}