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

@font-face {
    font-family: 'robotoblack';
    src: url('fonts/roboto-black-webfont.woff2') format('woff2'),
         url('fonts/roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'robotothin';
    src: url('fonts/roboto-thin-webfont.woff2') format('woff2'),
         url('fonts/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'spectralextralight';
    src: url('fonts/spectral-extralight-webfont.woff2') format('woff2'),
         url('fonts/spectral-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

*{
	padding:0;
	margin:0;
}

body{
	color:#FFF;
	background-color:#000;
}

#fond-page{
	background: #000 url("../img/fond-accueil.webp") no-repeat top center;
}
@media screen and (max-width: 880px){
	#fond-page{
		background: #000 url("../img/fond-accueil.webp") no-repeat top center;
	}
}

main {
    padding: 0 25px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    float: left;
    display: block;
}
.fond-page{
	background:  url("../img/fond-page.webp") no-repeat center 1000px / 100% auto;
}
@media screen and (max-width: 880px){
	.fond-page{
		background:  url("../img/fond-page.webp") no-repeat center 950px / 100% auto;
	}
}
h1,h2,h3{
	font-weight: normal;
}

a{
	text-decoration: none;
	color:#FFF;
}
strong{ 
	font-weight:normal;
}
.ttr{
	font-family: 'spectralextralight';
	letter-spacing: 8px;
	text-transform: uppercase;
}

.t1{
	font-size:46px;
}
@media screen and (max-width: 680px){
	.t1{
		font-size:36px; 
		width: 90%;
		margin-left: 5%;
	}
}
@media screen and (max-width: 580px){
	.t1{
		font-size:26px;
	}
}
@media screen and (max-width: 480px){
	.t1{
		font-size:20px;
	}
}
.btn{
	width:100%;
	max-width:270px;
	padding:12px 24px;
	font-family: 'robotoblack';
	font-size:15px;
	letter-spacing: 4px;
	border:3px solid #FFF;
	text-align:center;
	display:table;
	box-sizing: border-box;
	margin: 0 auto;
	text-transform: uppercase;
	background-color:#000;
	line-height: 20px;
}
.btn:hover{
	color:#000;
	background-color:#FFF;
}

.btn-b{
	width:100%;
	max-width:420px;
	padding:12px 24px;
	font-family: 'robotoblack';
	font-size:15px;
	letter-spacing: 4px;
	border:3px solid #FFF;
	text-align:center;
	display:table;
	box-sizing: border-box;
	margin: 0 auto;
	text-transform: uppercase;
	background-color:#000;
	line-height: 20px;
}
.cnt-btn{
	display: table;
	width:100%;
}
.txt{
	font-size:18px;
	line-height: 28px;
	font-family: 'robotothin';
	letter-spacing: 1px;
}
.txt p{
	margin-top:15px;
}
.ctr{
	text-align: center;
}
.ph{
	margin-top:23px;
	text-align: center;
	letter-spacing:3px;
	text-transform: uppercase;
	font-family: 'robotothin';
	font-size:14px;
	width:100%;
}
.ph-b{
	margin-top:23px;
	text-align: center;
	letter-spacing:6px;
	text-transform: uppercase;
	font-family: 'robotoblack';
	font-size:10px;
	width:100%;
}
.lien{
	border-bottom: 3px dotted #FFF;
}
.bloc{
	float:left;
	width:100%;
}
.centre{
	width:100%;
	max-width:1145px;
	margin: 0 auto;
}
.centre-b{
	width:100%;
	max-width:700px;
	margin: 0 auto;
}
.mrg{
	margin-top:85px;
}
.mrg-b{
	margin-top:35px;
}

.logo{
	width:156px;
	height: auto;
	display: inline-block;
}
@media screen and (max-width: 1180px){
	.logo{
		display: none;
	}
}

.contenu{
	width:45%;
	float:left;
	padding-right:5%;
	box-sizing: border-box;
}
@media screen and (max-width: 880px){
	.contenu{
		width:100%;
		padding:inherit;
	}
}
.galerie{
	width:45%;
	margin-left:5%;
	box-sizing: border-box;
	float:left;
}
@media screen and (max-width: 880px){
	.galerie{
		width:100%;
		margin-left:0;
	}
}

@media screen and (max-width: 880px){
	.slider{
		width:100%;
		max-width:515px;
		margin:40px auto 0;
	}
}
.slider img{
	width:100%;
	height:auto;
	float:left;
	display: block;
}
/* Cacher le bouton play/pause */
.galerie button{
  display: none;
}

#le-salon, #equipe, #evenements, #contact{
	padding-top:90px;
    overflow: hidden;
}
@media screen and (max-width: 1180px){
	#le-salon, #equipe, #evenements, #contact{
		padding-top:145px;
	}
}
@media screen and (max-width: 880px){
	#le-salon, #equipe, #evenements, #contact{
		padding-top:90px;
	}
}	
#le-salon.mrg, #equipe.mrg, #evenements.mrg, #contact.mrg{
	margin-top:15px;
}
.haut-page{
	margin-top:180px;
}
    /* Conteneur qui maintient la taille fixe demandée */
    #video {
      width: 100%;
      height: 1200px;
      /* centrer le conteneur sur la page (optionnel) */
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000; /* arrière-plan si la vidéo n'occupe pas toute la zone */
      overflow: hidden;  /* coupe ce qui dépasse */
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      border-radius: 6px;
	  position: absolute;
	  z-index: 0;
	  top:0;
    }

    /* La balise video prend exactement la zone du conteneur */
    #video video {
      width: 1424px;   /* largeur fixe */
      height: 1200px;  /* hauteur fixe */
      object-fit: cover; /* cover -> remplit la zone, coupe si nécessaire.
                         changer en 'contain' pour voir toute la video avec bandes */
      display: block;
    }

    /* Petit style responsive : si l'écran est plus petit que 1424px,
       on réduit proportionnellement le bloc (garde ratio visuel) */
    @media (max-width: 1424px) {
      #video {
        /*transform: scale(0.8);*/ /* option simple pour éviter overflow sur petits écrans */
        transform-origin: top center;
      }
    }
    @media (max-width: 880px) {
      #video {
        display: none;
      }
    }