@font-face {

	font-family: myFontSemiBold;
	src: url(../fonts/OpenSans-Semibold.ttf);

}

@font-face{

	font-family: MyFontLight;
	src: url(../fonts/OpenSans-Light.ttf);
}

@font-face{

	font-family: MyFontRegular;
	src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face{

	font-family: MyFontBold;
	src: url(../fonts/OpenSans-Bold.ttf);
}


/* La hauteur de .full (cover) est le 100% de la hauteur de body qui est le 100% de la hauteur de html qui est la heuteur du viewport. Du coup #pano fait 100% en hauteur de la fenêtre du navigateur  */



@media (min-width: 1280px){

html{

	height:100%;
}}


/*Avec ça, l'image principale s'affiche intégralement jusqu'en bas de la page*/

@media (max-width: 768px){

html{

	height:100%;
}}





body{

	background-color:white;
/*	background-color:#f1f4fd;*/
	margin-bottom:20px;
	height: 100%;
}



h1{

	color:white;
	font-size: 48px;
/*	text-shadow: 0px 1px 0px #ffffff;*/
	font-family: myFontSemiBold;
	letter-spacing: -0.05em;




}

h2{

	color:#202020;
	font-size: 35px;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family: myFontRegular;
	letter-spacing: -0.05em;



}

h3{

	color:#202020;
	font-size: 30px;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family: myFontLight;
	letter-spacing: -0.05em;



}

.textCover{

	color:rgba(255,255,255,1);
	font-size: 15pt;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family:myFontLight;


}

.textAbout{

	color:black;
	font-size: 15pt;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family:myFontLight;
	margin:20px 50px 0px 50px;

}

.marginBottom20{


	margin-bottom:20px;
}




#cover{

  margin-top: 300px;
/*  background:rgba(0,0,0,0.5);*/
  text-align:center;

}

.titleCategory{

	margin-bottom:50px;


}




.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;

}


/*.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}*/



.footer{

font-family:myFontLight;
color:#888888;
margin-bottom:30px;

}


.navbar{

	background-color:rgba(0,0,0,0);
	border-style: none;
	font-family:myFontSemiBold;
	height:100px;



}

.navbar-fixed-top:focus{

outline:0;

}





.navbarWhite{

	background-color:rgba(255,255,255,0.98);
	border-style: none;
	font-family:myFontSemiBold;
	height:100px;


}




.navbar-brand-scroll{

	color:#101010 !important;

}

.navbar-brand-scroll:hover{

	color:#b21212 !important;

}

.navbar-collapse-Blanc{

	background-color:white;
}

@media (max-width: 768px){

.navbar-collapse{

	background-color:white;
}


}




.insideNavBar{

padding-top:20px;
text-transform:uppercase;
letter-spacing:1px;
font-family:myFontBold;
color: red;


}

@media (min-width: 768px){

.insideNavBar{width: 1226px; /*  élargie le menu pour avoir assez de place. Seulement sur desktop */}

}




.text-cover{

	max-width:900px;
	margin: 0 auto;
}

#divButton{

	margin:15px;
	text-align:center;

}

.btn-default{

	background-color:rgba(255,255,255,0);
	transition: background 0.5s;
	border-color:#ffffff;
	border-width:2px;
	width:180px;
	height:40px;
	font-family:myFontSemiBold;
	color:white;

}

.btn-default:focus{

	background-color:rgba(255,255,255,0);

	border-color:#ffffff;
	color:white;

}



.btn-default a{

	color:white;
}



.btn-default:hover{

background-color:rgba(255,255,255,0.5);
border-color:#ffffff;
transition: background 0.5s;
color:white;


}

.btn-default-black{

	background-color:rgba(0,0,0,0);
	transition: background 0.5s;
	border-color:black;
	border-width:1px;
	font-family:myFontLight;
	font-size: 15pt;
	color:black;

}

.btn-default-black:focus{

	background-color:white;

	border-color:black;
	color:black;

}



.btn-default-black a{

	color:white;
}



.btn-default-black:hover{

background-color:rgba(1,1,1,0.1);
border-color:black;
transition: background 0.5s;
color:black;


}



/*

 ========================= HISTORIQUE DU PETIT BUG AVEC CHROME 

Chrome juge ceci 

.nav.navbar-nav.navbar-right li a:link{

	color:rgba(255,255,255,0.5);

	}


...plus spécifique que 

	.navbar-default .navbar-nav > li > a {
    color:rgba(255,255,255,0.5);
}



Avant le problème avec Chrome, c'était comme ça: 

.navbar-right li a:link{

	color:rgba(255,255,255,0.5);

	}

*/











/*Couleurs du OLIVIER FATZER en haut à gauche. J'ai repris le même code css que dans bootstrap.css et l'ai collé ici. La deuxième feuille CSS n'override la première que si le selecteur est de force égale ou supérieur à la première feuille. Genre 1) class="vert" et 2) class="vert", la deuxième feuille override. */

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus {
  color: white;
    outline:0;
}
.navbar-default .navbar-brand:hover
 {
  color: #b21212;
  background-color: transparent;

}

@media (min-width: 768px) {


.navbar-brand {
margin-left: -100px !important; 
/*Pour déplacer le "OLIVIER FATZER plus à gauche pour faire de la place, mais seulement sur desktop, sinon il glisse trop à gauche sur mobile*/
}
}





.navbar-brand{
/*Permet d'aligner le logo et le text du logo. Sinon le text fini sous le logo*/
	  margin-top: 10px; /* align le text du logo sur le reste du menu */
	  display: flex;
    align-items: center; /* Aligne l'image et le texte verticalement */
    gap: 10px; /* Espacement entre l'image et le texte */
    text-decoration: none; /* Supprime le soulignement du lien */
}







/*Couleurs du menu. Suite à bug avec Chrome, j'ai repris le code de bootstrap et l'ai collé ici en le modifiant. Etant donné que ce fichier vient en deuxième, et que les codes (identique) ont une spécificité égale,  ce code écrase celui du premier fichier*/

.navbar-default .navbar-nav > li > a {
    color:rgba(255,255,255,0.5);
}

.navbar-default .navbar-nav > li > a:hover {
    color:white;
}

.navbar-default .navbar-nav > li > a:focus {
    color:rgba(255,255,255,0.5);
    outline:0;
}


/*Ceci génére la petite ligne rouge en dessous des éléments du menu, au survol */

.nav.navbar-nav.navbar-right li:hover{

	border-bottom-style:solid;
	border-color:#b21212;
}


/* Class qui rend les éléments du menu noir, lorsque l'on scroll down */


.navbar-right-Noir{

color:#505050 !important;

}

@media (max-width: 768px){

	.navbar-right li a:link{
		color:#505050
	}} 
	/*Met le menu mobile en noir dès le début*/



.navbar-right-Noir:hover{

color:#b21212 !important;

}

/* ------------- */


.imagePerso{

	border-radius:0px;
	margin-top:30px;



}

.verticalMargin{

	padding-top:70px;

}

.paddingBottom50{
	padding-bottom: 50px;
}

.red{

color:#b21212;

}

/* Class de la visite virtuelle */

#pano{

	height:700px;
	width:98%;
	margin:auto;
}

.adresseEmail{

	color:black;
	font-size:20px;
		font-family:MyFontLight;

}

a{

	color:#b21212;
}

a:hover{

	color:#b21212;
}

a:visited{

	color:#b21212;
}

a:active{

	color:#b21212;
}

a:focus{

	color:#b21212;
}

/*De base, le logo est blanc*/

#imgLogo path{
	fill: white;

}

/*tout se qui est dans .navbar-brand devient rouge au survol de la souris. fill pour le logo .svg et color pour le reste du text*/

.navbar-brand:hover * {
    fill: #b21212 !important; /* Pour le SVG */
    color: #b21212 !important; /* Pour le texte */
}


/*sert à faire passer le logo au noir lorsque scroll down, en partenariat avec Jquerry qui ajoute et retire la classe selon le scroll. Pas tout compris ce que chatGPT me proposait. Notamment pourquoi faire appel à "body"*/

body.inverted #imgLogo path {
    fill: black; /* Noir */
}


/*#imgLogo.inverted {
    filter: invert(1);  Inverse les couleurs de l'image logo, quand c'était un .png */
}