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



.bitter {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


.audio {
	display: none;
}
*,
*:after,
*:before, input, label {
padding: 0;
margin: 0;
box-sizing:border-box;
}

html, body {
width:100%;
height: 100%;
border: 0;
margin: 0;
background-color: #fff;
color: #000;
font-family: "Bitter", serif;
font-optical-sizing: auto;
font-style: normal;
overflow-x: hidden;
scroll-behavior: smooth;
}


/* =============================================================================
HEADER
========================================================================== */
header {
  z-index: 500;
}


.logo  {
display: flex;
align-items: center;
justify-content: center;
margin: 100px 50px 50px 50px;	
}

.logo img {
max-width: 100%;	
width: 350px;

}







nav {
display: flex;
flex-wrap: nowrap;
align-items: start;
justify-content: center;	


position: absolute;
top: 20px;
left: 20px;
z-index: 10000000000000000;
cursor: pointer;
background: none;
border: 0 none;

}




/* =============================================================================
TEMPS DE LECTURE
========================================================================== */
.article-lecture {
position: relative;
width: 100%;
font-family: 'Bitter', serif;
font-size: 12px;
color: #000;	
margin-bottom: 20px;			
}

.article-lecture img {
height: 10px;
padding-right: 5px;
}








/* =============================================================================
CARROUSEL
========================================================================== */
	.carrousel-home {
	  width: 100%;
	  height: 500px;
		
	}
	.swiper {
	  position: relative;
	  display: block;
	  margin: 10px 0;
	}
	.margin-img {
	  margin: 0 10px 0 10px;
	}
	.carrousel-home .swiper {
	  max-width: 100%;
	  width: 100%;
	  height: 500px;
	}
	.carrousel-img {
	  display: flex;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: center;
	  max-width: 100%;
	  height: 100%;
	}
	.carrousel-100-img1 {
	  background-image: url("../img/swipper/calanques.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img2 {
	  background-image: url("../img/swipper/cosquer.jpg");
	  background-size: cover;
	  background-position: bottom;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img3 {
	  background-image: url("../img/swipper/bermudes.jpg");
	  background-size: cover;
	  background-position: bottom;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img4 {
	  background-image: url("../img/swipper/globe.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img5 {
	  background-image: url("../img/swipper/posidonie.jpg");
	  background-size: cover;
	  background-position: bottom;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img6 {
	  background-image: url("../img/swipper/tsunami.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img7 {
	  background-image: url("../img/swipper/titanic.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img8 {
	  background-image: url("../img/swipper/corail.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img9 {
	  background-image: url("../img/swipper/shepherd.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img10 {
	  background-image: url("../img/swipper/clean.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img11 {
	  background-image: url("../img/swipper/mille.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img12 {
	  background-image: url("../img/swipper/atlantide.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.carrousel-100-img13 {
	  background-image: url("../img/swipper/gabian.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}	

.carrousel-100-img14 {
	  background-image: url("../img/swipper/port.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
.carrousel-100-img15 {
	  background-image: url("../img/swipper/sea.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.swiper-pagination-bullet-active {
	  background: #000;
	  cursor: pointer;
	}


.carrousel-titre {
position: relative;	
color: #000;
font-family: 'George Bold';
font-style: normal;
font-weight: normal;
padding-top: 10px;
max-width: 400px;
margin: 20px;
font-size: 40px;
line-height: 35px;
text-align: center;
z-index: 10;
}

.carrousel-chapo {
position: relative;	
max-width: 500px;
color: #000;
text-align: center;	
font-weight: 400;
font-size: 16px;
z-index: 10;
margin: 30px 10px 0 10px;
}

.carrousel-theme {
position: relative;	
font-family: 'Bitter', serif;
font-size: 15px;
line-height: 20px;	
font-weight: 400;	
margin: 20px;
color: #000;
text-align: center;	
z-index: 10;
text-transform: uppercase;
}

.swiper-pagination-bullet {
height: 10px;
width: 10px;
background: #fff;
	
}

.swiper-pagination-bullet-active {
background: #fff;
cursor: pointer;	
}


.page-article-contenu {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
justify-content: center;
}

.page-article {
	max-width: 800px;
	margin: 0 auto;
}


.article{
margin: 50px 5px;
}

.article-inside {
margin: 50px 20px 0 20px;

}

.article-perspectives-separateur {
display: flex;
}

.article-question {
color: #000;
font-family: 'Bitter', serif;
font-weight: 400;
margin-top: 10px;
font-size: 15px;
line-height: 20px;
text-align: left;	
}



.article-texte {
margin-top: 10px;
column-count: 2;
text-wrap: balance;	

}

.article-chapo {
font-weight: 600;
margin-bottom: 20px;
color: #000;
font-family: 'Bitter', serif;
font-size: 15px;
line-height: 20px;
text-align: left;	
}

.article-paragraphe {
margin-bottom: 20px;
color: #000;
font-family: 'Bitter', serif;
font-weight: 300;	
font-size: 15px;
line-height: 20px;
text-align: left;	
}

.video-full {
position: relative;
display: block;
max-width: 100%;
width: 100%;
height: auto;
margin: 50px 0;
aspect-ratio: 16/9;	
}

iframe.full {
max-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 16/9;		
border-radius: 10px;
}

.article-exergue {
font-family: "NarzissMedium";	
padding: 50px;
font-size: 30px;
line-height: 35px;	
break-inside: avoid-column;
/* column-span: all; */
}

.article-lien {
color: #000;
font-family: 'Bitter', serif;
font-weight: 200;
font-size: 15px;
line-height: 20px;
text-align: left;	
font-style: italic;
margin-top: 50px;
}

.separateur-theme-menu {
width: 100%;
height: 30px;
align-content: end;
}
.separateur-theme-menu-alt {
width: 100%;
height: 42px;
align-content: end;
}



.separateur-theme {
width: 100%;
height: 30px;
align-content: end;
}
.separateur-theme-alt {
width: 100%;
height: 42px;
align-content: end;
}

.separateur-theme-inside {
border-top: 2px dotted;
margin: 5px;
}

.article-perspectives {
font-family: "Megrim", system-ui;
font-weight: 400;
font-style: normal;
font-size: 20px;
	
}

.article-perspectives-alt {
font-family: "Megrim", system-ui;
font-weight: 400;
font-style: normal;
font-size: 12px;
text-align: right;
}

.article-titre {
position: relative;	
color: #000;
font-family: 'Bitter', serif;
font-weight: 200;
padding-top: 10px;
font-size: 20px;
line-height: 20px;
text-align: left;
text-wrap: balance;	
}


.page-separateur {
width: 200px;

}

.page-separateur-inside {
border-top: 2px dotted;
margin: 30px 0 30px 0;
}




.article-auteur {
text-align: left;
margin-top: 30px;	
}




.article-auteur-nom {

font-family: 'Bitter', serif;
font-size: 15px;
line-height: 20px;	
font-weight: 400;	
color: #000;	
margin-top: 10px;
	
}

.article-auteur-fonction {
font-family: 'Bitter', serif;
font-size: 12px;
line-height: 15px;	
font-weight: 200;	
max-width: 400px;
color: #888;	
font-style: italic;	
}





.blanc {
color: #fff;
}





.content {
	width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}










/* =============================================================================
LIEN
========================================================================== */	

a {
text-decoration: none;
border: 0;
transition: all 1s ease;
	color: #888;
}

a img {
border: 0;
}

a:active, a:visited, a:link, a:hover {
outline-style: none;

}	


a:hover {
color: #000;	
}





/* =============================================================================
RS
========================================================================== */


.partage {
font-family: 'Bitter', serif;
font-size: 12px;
line-height: 14px;	
font-weight: 200;	
max-width: 400px;
color: #000;	
margin: 10px 0px;	
	
}
	.rs {
	  margin-bottom: 20px;
	}
	.rs div {
	  display: inline;
	}
	.rs img {
	  display: inline;
	  height: 18px;
	  margin: 0 1px 0 1px;
		transition: all 1s ease;

	}
	.rs a:hover img {
	  opacity: 1;
	  text-decoration: none;
		transition: all 1s ease;

	}
	.rs a:hover {
	  opacity: 0.5;
	  text-decoration: none;
		transition: all 1s ease;

	}



.applepodcast  {
	display: flex;
font-family: 'Bitter', serif;
font-weight: 300;
font-size: 10px;
line-height: 12px;
text-wrap: balance;	
align-items: center;

}



.applepodcast img {
	  height: 18px;
	transition: all 1s ease;
margin-right: 10px;

}

.applepodcast a:hover img {
	  opacity: 0.5;
	  text-decoration: none;
	transition: all 1s ease;

}









/* =============================================================================
TEXTE
========================================================================== */


h1 {
font-family: 'Bitter', serif;
font-style: normal;
font-weight: 900;
font-size: 40px;
line-height: 35px;
text-align: left;
text-transform: uppercase;
text-wrap: balance;	
	
}

h2 {
font-family: 'Bitter', serif;
font-size: 30px;
line-height: 35px;
text-wrap: balance;	
}

h3 {
font-family: 'Bitter', serif;
font-size: 15px;
line-height: 20px;
text-wrap: balance;	
}
p {
font-family: 'Bitter', serif;
font-weight: 300;
font-size: 16px;
line-height: 20px;
text-wrap: balance;	
}

.chapo {
font-family: 'Bitter', serif;
font-weight: 500;
font-size: 20px;
line-height: 25px;
text-wrap: balance;	
}

i {
font-family: 'Bitter', serif;	
font-weight: 300;	

}

b {
font-family: 'Bitter', serif;	
font-weight: 500;	
	
	
}

.liste-puce li {
  padding-left: 5px;
  margin: 5px 0 5px 15px;
}



/* =============================================================================
FOOTER
========================================================================== */
.copyright {
font-family: 'Bitter', serif;
font-weight: 300;
font-size: 10px;
line-height: 12px;
text-wrap: balance;	
	margin: 200px 0 0 0;
}



/* =============================================================================
RESPONSIVE
========================================================================== */



@media only screen and (max-width: 800px) {
	

	
.separateur-theme-menu {
width: 100%;
height: 20px;
align-content: end;
}
.separateur-theme-menu-alt {
width: 100%;
height: 32px;
align-content: end;
}
	



	
.separateur-theme-inside {
border-top: 2px dotted;
margin: 0 0 3px 5px;
}
	
.article-separateur {
width: 100%;
height: 20px;
align-content: end;
}
	
	
	
.article-separateur-inside {
border-top: 2px dotted;
margin: 10px 0;
color: #000;
}
	
.article-texte {
	
column-count: 1;	
}
	
	
	
}