html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-family : Outfit, sans-serif;
}
* {
    box-sizing: border-box;
}
.video-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top : 80px;
  box-shadow: 0 0 10px #000;
  background : #000 url('../images/photos/blaireau-0-lebecel.jpg') no-repeat;
  background-size: cover;
    background-position: left top;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position : absolute;

}

.video-container .content {
  position: relative;
  z-index: 1;
	width : 100%;
	height : 100%;
}
#lignehaut{
	position : fixed;
	z-index : 100;
	height : 80px;
	width : 100%;
	background : linear-gradient(45deg, #347f99, #2a687e);
	top : 0;
	left : 0;
	box-shadow: 0 0 10px #000;
}

#box_1{
	width: 475px;
    height: 350px;
	background : #fff;
	position : absolute;
	bottom : 10%;
	right : 10%;
	border-left : 25px solid #347f99;
}
.menu_btn{
	width : 80px;
	height : 80px;
	color : #fff;
	cursor : pointer;
	float : left;
	visibility : hidden;
}
.menu_btn::after{
	width: 58px;
    height: 80px;
    text-align: center;
    content: '|||';
    transform: rotate(90deg);
    display: block;
    font-size: 50px;
}
.lignehaut_logo{
	height : 80px;
	width : auto;
}
.lignehaut_date{
	font-family : "Source Sans 3";
	float : right;
	color: #fff;
    font-size: 58px;
    padding-right: 50px;
}

h1{
	font-family: 'Bebas Neue';
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 82px;
    font-size: 90px;
    color: #fff;
    margin: 80px 0 0 75px;
    /* border-left: 22px solid #fff; */
    padding: 17px 0 0px 34px;
    text-shadow: 0 0 10px #00000087;
}
.h1petit{
	font-size: 40px;
}
h2{
	font-family: 'Bebas Neue';
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 32px;
    color: #29687f;
    margin: 15px 0 0 20px;
}
h3{
	margin: 35px 0 0 20px;
	color : #ed8d00;
}

.grid-container {
      display: grid;
      gap: 0;
      padding: 20px 30px;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

.grid-item {
    font-size: 1.2rem;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
	position : relative;
}
.grid-item:nth-child(1){
	border-bottom : 2px solid #29687f;
	border-right : 2px solid #29687f;
}
.grid-item:nth-child(2){
	border-bottom : 2px solid #29687f;
}
.grid-item:nth-child(3){
	border-right : 2px solid #29687f;
}

.grid-item:nth-child(1) img{
	height : 90%;
	width : auto;
}
.grid-item:nth-child(2) img{
	height : 90%;
	width : auto;
}
.grid-item:nth-child(2) .nb-events{
	position: absolute;
    top: 26px;
    font-size: 26px;
    font-weight: bold;
    left: 50%;
    transform: translate(-13px, 0px);
}
.grid-item:nth-child(3) img{
	height : 90%;
	width : auto;
}
.grid-item:nth-child(4){
	padding: 0 13px;
    text-align: center;
    font-size: 14px;
}


.partie{
	min-height : 400px;
	max-width : 1200px;
	margin : 30px auto;
}
.partie2{
	border-top: 1px solid #27677f;
}

p{
	text-align: justify;
    font-size: 17px;
    font-weight: 300;
    line-height: 25px;
    color: #1c1c1c;
	padding : 0 20px;
	margin: 5px 0;
}
b{
	font-weight : 700;
}
a{
	color: #296980;
}
.infos{
	text-align : center;
	font-style : italic;
	margin-top : 25px;
}
.btn{
	display: block;
    margin: 50px auto 10px auto;
    background: #29697f;
    padding: 15px 30px;
    width: max-content;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 2px 2px 7px #00000082;
}
.btn:hover{
	background: #1e5163;
}
.btn2{
	margin: 20px auto;
    font-size: 14px;
    padding: 5px 15px;
}
#bandeau-suite {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#btn-suitelecture {
    cursor: pointer;
}


.partie-photo{
	display : flex;
	margin : 100px 0;
}
.partie-photo-img{
	width : 70%;
}
.partie-photo-img img{
	width : 100%;
	height : auto;
	max-height : 550px;
	object-fit: cover;
}
.partie-photo-contenu{
	width : 40%;
	display : flex;
	justify-content : right;
}
.partie-photo-contenu2{
	justify-content : left;
}
.partie-photo-contenu-txt{
	max-width: 700px;
    width: 700px;
    background: linear-gradient(45deg, #efefef, #ffffff);
    margin: 50px -30% 100px 0;
    /* height: 400px; */
    z-index: 1;
    border-right: 30px solid #2c7088;
	padding : 0 0 20px 0;
}
.partie-photo-contenu-txt2{
	margin: 50px 0 100px -30%;
	border-right: 0;
	border-left: 30px solid #2c7088;
	background: linear-gradient(45deg, #ffffff, #efefef);
	/* width : 120%; */
	/* max-width : 690px; */
}
.partie-photo-img2{
	/* width : 50%; */
}

.events_liste{
	list-style: none;
    margin: 20px;
    padding: 0;
	
    overflow: hidden;
	position : relative;
}
.events_liste li{
	margin-bottom: 25px;
    border-left: 5px solid #2a6f87;
    padding-left: 10px;
	text-align : justify;
	font-size: 17px;
    font-weight: 300;
    color: #1c1c1c;
	/* border-bottom: 1px solid #e5e5e5; */
}
.ville{
	font-weight : 700;
	color: #fff;
    background: #286e86;
    padding: 3px 10px;
}
.titre{
	font-weight : 600;
}
.descr{
	font-size: 15px;
    font-weight: 500;
    display: block;
    margin: 3px 0;
    background: #e9e9e9;
    padding: 4px 10px 4px 4px;
}
.orga, .lieu, .liens{
	font-size: 14px;
    display: block;
    margin: 0 0 5px 0;
}
.lieu{
	color: #27687f;
    margin: 4px 0 0 0;
}
.liens{
	margin : 0;
}
.orga b, .lieu b, .liens b{
	font-weight : 500;
}
#programme{
	margin-bottom : 0;
}
#btn_programme, #btn_affut{
	cursor : pointer;
}
.degrade_blanc{
	position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: 100%;
    padding: 0 !important;
    border-bottom: 1px solid #d1d1d1;
	border-left : 0 !important;
}
.degrade_blanc img{
	width: 100%;
    display: block;
}
.btn_affich_events{
	display: block;
    background: #29697f;
    padding: 15px 30px;
    width: max-content;
    color: #fff;
    text-decoration: none;
    box-shadow: 2px 2px 7px #00000082;
	font-size: 17px;
    margin: 0 auto;
	cursor : pointer;
}

#logosassocs{
	max-width : 1024px;
	width : 80%;
	margin : auto;
	height : auto;
	display : block;
}

.docs{
	display : flex;
	justify-content : center;
	margin-top : 25px;
}
.docs img{
	display : block;
	width : 100%;
	max-width : 210px;
	height : auto;
	border: 1px solid #e3e3e3;
	margin : 0 20px;
}

.bas{
	background : linear-gradient(45deg, #347f99, #2a687e);
	width : 100%;
	height : 250px;
	margin-top : 70px;
	padding : 20px;
	color : #fff;
	text-align : center;
}

.logos_site{
	display : flex;
	justify-content : center;
}
.logos_site img{
	display : block;
	width : 100%;
	height : auto;
	max-width : 100px;
	margin : 15px;
}

.mentions{
	    border-top: 1px solid #fff;
    width: 70%;
    margin: 20px auto;
    padding: 10px;
}
.mentions a{
	color : #fff;
}
.datevideo{
	display : none;
}