/*------------------------------*/
/*         MOBILE               */
/*------------------------------*/

@media screen and (max-width: 564px) {
.Bgd-articles{background-position:42% 0% !important;background-size:800px !important;}

#header-dark-mobile{background-size:630px !important;background-position:40% 50% !important;}
}

@media screen and (min-width: 565px) and (max-width:775px) {
.Bgd-articles{background-position:45% 50% !important;}

#header-dark-mobile{background-size:760px !important;}

}


@media screen and (max-width: 775px) {
.Cbloc-int{width:95%!important;}
.chapeau p{font-size:1em!important;}
.hidemobile{display:none!important;}
.showmobile{display:block!important;}
.titrepunchy{font-size:1.5em!important;padding:0 0 6rem 0 !important;}
#cadre-img-article {padding-bottom:37.5%!important;}
#cadre {padding-bottom:37.5%!important;}

/* quotes
#cadre > ::before {margin-right:6px!important;width:25px!important;height:24px!important;bottom:1em!important;}
#cadre > ::after {margin-left:6px!important;width:25px!important;height:24px!important;top:0.8em!important;}
*/

#logo-blanc{margin:8rem 0 5rem 0!important;}
#nav{display:none!important;}
.Cbloc-with-padding {padding:5em 0!important;}
.centermobile{text-align:center;}
.multicolonne{align-items: center!important;justify-content: space-between!important;flex-direction:column!important;}
.videocadre{transform:scale(1.3);}
.img-illustration-widescreen{margin:2rem -6.5%!important;width:113%!important;border-radius:0!important;}
.rr-maxheight {max-height:10rem!important;}
input {width:100%!important;}
.tag-sur-img-illustration{left:0%!important;}
.firsth1{margin-top:4rem!important;}
#navfooter {align-items: center!important;}
}

.showmobile{display:none;}

/*------------------------------*/
/*         GENERAL              */
/*------------------------------*/

@font-face {
  font-family: inter;
  src: url('/fonts/inter.ttf');
}
@font-face {
  font-family: oswald;
  src: url('/fonts/oswald-regular.ttf');
}
.interfont {
  font-family: 'inter', sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

:root {
  --texte: #091717;
  --textesource: #b99539;
  
  --flash: #ffdb80;
  --textesurflash: #091717;
  
  --sombre: #0c1818;
  --textesursombre1:#fdf5ebde;
  --textesursombre2:#fef8f1;
  
  --lightshade1:#dad2c8;
  --lightshade2:#e9e6e2;
  
  --presqueblanc:#fdfdfd;
}
::selection{
    background-color: var(--flash); 
	color:black;
	}
.reponserapide p::selection, .reponserapide h3::selection{
    background-color: var(--textesurflash); 
	color:var(--presqueblanc);	
	position:relative;
}
body{
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family: Corps;
	font-size:1.2em;
	line-height:1.5em;
	color:var(--texte);
}
h1 {
	font-family: 'inter', sans-serif;
    text-transform: none;
	text-decoration:none;
	color:var(--texte);
	font-weight:normal;
	font-size:2em;
	line-height:1.2em;
	margin:3rem 0 1rem 0;
}
h2{
	font-family: 'inter', sans-serif;
    text-transform: none;
	text-decoration:none;
	color:var(--texte);
	font-weight:900;
	font-size:1.5em;
	line-height:1.2em;
	margin:3rem 0 1rem 0;
}
h3{
	font-family: 'inter', sans-serif;
	font-weight:900;
	font-size:100%;
	margin:3rem 0 1rem 0;
	color:var(--texte);
}

h2 + h3, h1 + h2 {
	margin-top:0rem;
}

p, ul{
	font: normal 17px / 160% 'inter', sans-serif;
	position:relative;
	margin:0 0 1rem 0;
	margin-block-start: 1rem;
	margin-block-end:1rem;
	color:var(--texte);
}

input, textarea, label, body {
	font: normal 17px / 160% 'inter', sans-serif;
	color:var(--texte);
}
textarea{
	width:100%;
    border: 1px solid #c0c0c0;
	border-radius:11px;
    padding: 0.5em;
	box-sizing:border-box;
	resize:vertical;
	background-color:var(--presqueblanc);
}
input {
	width:50%;
	min-width:250px;
    border: 1px solid #c0c0c0;
	border-radius:11px;
    padding: 0.5em;
	box-sizing:border-box;
	background-color:var(--presqueblanc);
}
ul {
	margin-block-start:1em;
	margin-block-end:1em;
	padding-inline-start:20px;
}

.cache{
    max-height: 0px !important;
    visibility:hidden !important;
    border: 0 !important;
    padding: 0 !important;
    -webkit-transition: 1s ease max-height !important;  
    -moz-transition: 1s ease max-height !important;  
    -o-transition: 1s ease max-height !important;  
    -ms-transition: 1s ease max-height !important;  
    transition: 1s ease max-height !important;
}

.visible{  
    overflow:hidden !important;
    max-height:1500px !important;
    visibility:visible !important;
    -webkit-transition: 3s ease max-height !important;  
    -moz-transition: 3s ease max-height !important;  
    -o-transition: 3s ease max-height !important;  
    -ms-transition: 3s ease max-height !important;  
    transition: 3s ease max-height !important;
}

.fakesub{
	bottom: -0.3em;
    font-size: 80%;
    position: relative;
}
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;  
	background: #d3d3d3;
	outline: none;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: var(--flash);
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--flash);
	cursor: pointer;
}
	
.swipeicon{
	position:relative;
	height:1em;
}

.swipemain{
	position:absolute;
	width:1.5em;
	top:0.3em;
	pointer-events: none;
	animation:swipemain 2.5s ease-in-out infinite normal;
}

@keyframes swipemain {
	0% {transform:translateX(0)}
	20% {transform:translateX(+100%)}
	40% {transform:translateX(-100%)}
	60% {transform:translateX(0)}
}

.swipefleche{
	position:absolute;
	width:4em;
	top:0;
	left:-1.2em;
	opacity:0;
	animation:swipefleche 2.5s ease-in-out infinite forwards;
}

@keyframes swipefleche {
	0% {opacity:0.5; transform:translateX(0)}
	20% {opacity:1; transform:translateX(+20%)}
	40% {opacity:1; transform:translateX(-20%)}
	60% {opacity:0.5; transform:translateX(0)}
	80% {opacity:0}
	100% {opacity:0.5}
}

	
.citation{
	font-weight:bold;
	margin:2rem 0 2rem 1rem;
	padding-left:1rem;
	border-left:5px solid var(--flash);
	box-sizing:border-box;
}
.surligne{
	background-color:var(--flash);
	color:#2a3329;
}

.statbox{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap:1em;
	width:100%;
	margin:2rem 0;
	padding:0 1em;
	box-sizing:border-box;
	border-radius:20px;
	background-color:#f6f5f3;
}
.statbox-p{
	font-weight:bold;
	background-color: var(--lightshade2);
	border-radius: 11px;
	padding: 1em 1em 1em 3.2em;
	font-size:80%;
	cursor:pointer;
	-webkit-transition: 200ms ease background-color;  
	-moz-transition: 200ms ease background-color;  
	-o-transition: 200ms ease background-color;   
	-ms-transition: 200ms ease background-color; 
	transition: 200ms ease background-color; 
}
.statbox-p:hover{	
	background-color: var(--lightshade1);
	-webkit-transition: 200ms ease background-color;  
	-moz-transition: 200ms ease background-color;  
	-o-transition: 200ms ease background-color;   
	-ms-transition: 200ms ease background-color; 
	transition: 200ms ease background-color; 
}
.statbox img{
	position:absolute;
	left:0.9em;
}


.ulsource{
	font-size:80%;
	line-height:1.2em;
}
.ulsource li{
	margin-bottom:0.5em;
}
.ulsource li a{
	color:var(--texte);
}
.source{
	text-decoration: none;
	position:relative;
	top:-0.5em;
	font-size:80%;
	cursor:pointer;
	color:var(--textesource);
}
p .source{
	white-space:nowrap;
}
p .source::before {
  content: "\00a0";
}
.blinksource{
	animation: blinker 300ms linear 5;
	background-color:var(--flash);
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

hr{
	border:4px solid var(--flash);
	width:20%;
	margin:0 auto 2%;
}

.Cbloc {
	position:relative;
	overflow:hidden;
	display:block;
	width:100%;
	background-color:var(--presqueblanc);
}

.Cbloc-with-padding {
	padding:3.5em 0;
}

.Cbloc-int{
	position: relative;
    box-sizing: border-box;
    max-width: 1100px;
    width: 80%;
    margin: 0 auto;
    min-width: 300px;
	padding-right:3%;
	padding-left:3%;
}

.endcontent{
	margin-bottom:3.5rem;
}

.multicolonne{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

.multicolonne > div{
	box-sizing:border-box;
}

.smoothopacity{
	transition: opacity 200ms ease-in-out;
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	-o-transition: opacity 200ms ease-in-out;
	-ms-transition: opacity 200ms ease-in-out;
}
/*------------------------------*/
/*         BOUTONS              */
/*------------------------------*/

.btn-rr{
	background-color:transparent;
	border:0;
    font-family: 'oswald', sans-serif;
	font-size:0.8em;
    padding: 0.8em 0.8em 0.5em 0.8em;
	border-radius: 11px;
	transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, right 200ms ease-in-out;
	-webkit-transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, right 200ms ease-in-out;
	-moz-transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, right 200ms ease-in-out;
	-o-transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, right 200ms ease-in-out;
	-ms-transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, right 200ms ease-in-out;
}

.btn-rr-anim::before{
	content:"✔ Copié";
	position:absolute;
	left:120%;
	bottom:0%;
	opacity:0%;
	animation: copie 1s linear 1;
}
@keyframes copie {
	0% {opacity:0;bottom:0%;}
	50% {opacity:1;bottom:40%;}
	100% {opacity:0;bottom:80%;}
}

.btn-flash{
	background-color: var(--flash);
	border:0;
	border-radius:11px;
	box-sizing:border-box;
    margin-top: 2em;
	margin-bottom: 2em;
    display: block;
    font-family: 'oswald', sans-serif;
	font-size:1em;
    padding: 1em;
	color:var(--textesurflash);
	box-shadow:1px 2px 3px 0px #0000005e;
}

.btnearth{
	background-color:var(--flash);
	border:0;
	border-radius:11px;
	box-sizing:border-box;
	box-shadow: none; 
	font-family: 'oswald', sans-serif;
	font-size: 1em;
	padding: 1em;
	color: black;
	transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-webkit-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-moz-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-o-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-ms-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
}

.btnearthselected{
	box-shadow: inset 8px 4px 5px 0px #00000078;
	background-color: var(--presqueblanc);
	transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-webkit-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-moz-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-o-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	-ms-transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out;
	cursor:not-allowed;
	color:#000000bf;
}

button {
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	position:relative;
}

/*------------------------------*/
/*         CBLOC HEADER         */
/*------------------------------*/

#header{
	background-color:var(--presqueblanc);
}
#header-dark{
	background-image: url('/images/background2.jpg');
    background-size: 1300px;
	background-color:#000002;
	background-repeat:no-repeat;
	background-position: 50% 100%;
}
#header-dark-mobile{
	background-image: url('/images/background2.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 33%;	
	background-color:#000002;
}
#header-int{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	padding:2.5em 3%;
}

#logo-noir{
	height:80px;
}
#logo-blanc{
	height:80px;
	margin:1em 0;
}

.Bgd-articles{
	background-image: url('/images/background2.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:unset;
	background-position:50% 100%;
	background-color:#000002;
}

/*------------------------------*/
/*         PAGES D'ARTICLES     */
/*------------------------------*/

.img-titre-article{
	display:block;
	border-radius: 20px;
	position:absolute;
	width:100%;
	height: 200%;
	bottom:0;
	background-size: cover;
}
.img-illustration{
	display:block;
	border-radius: 20px;
	position:relative;
	width:100%;
	margin:2rem 0;
}

.tag-sur-img-illustration{
	color:var(--presqueblanc);
	position:absolute;
	top:6%;
	left:5.5%;
}

.sous-titre-img{
	text-align:center;
	font-size:0.8em;
	margin-top:-1.5rem;
	margin-bottom:2rem;
	color:#565767;
	font-style:italic;
}

.titrepunchy{
	padding:9rem 0 8rem 0;
	margin:0 auto;
	color:var(--textesursombre2);
	text-align:center;
	width:80%;
}

#cadre-img-article {
	padding-bottom:28%;position:relative;
}
#cadre {
	padding-bottom:28%;
}

/* --- quotes
#cadre > ::before{
	content: ""; 
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px; 
	width: 50px; 
	height: 48px; 
	background-image: url('images/quotation-marks.svg');
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
	position:relative;
	bottom:1.1em;
}
#cadre > ::after{
	content: ""; 
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px; 
	width: 50px; 
	height: 48px; 
	transform:rotate(180deg);
	background-image: url('images/quotation-marks.svg');
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
	position:relative;
	top:0.84em;
}
*/

.reponserapide{
	background-color:var(--flash);	
	border-radius:20px;	
	padding:5%;	
	box-sizing:border-box;
	position:relative;
}
.reponserapide > :last-child {
	margin-bottom:0;
}
.reponserapide h2, .reponserapide p{
	color:var(--texte);
}
#rr-wrap{
	max-height:1000px;
	overflow:hidden;
    -webkit-transition: 1s ease max-height;  
    -moz-transition: 1s ease max-height;  
    -o-transition: 1s ease max-height;  
    -ms-transition: 1s ease max-height;  
    transition: 1s ease max-height;		
}

/*------------------------------*/
/*         VIDEOS               */
/*------------------------------*/

.video169 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.video169 video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit:cover;
}


/*------------------------------*/
/*         NAVIGATION           */
/*------------------------------*/

#nav {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
	list-style:none;
	padding:0;
	margin:calc(1.535*1em) 0 calc(0.61*1em) 0;
	gap:1em;
	overflow:visible;
}
#nav li{
	padding:0.5em 0;
	margin:0;
}
.nav-dark a{
	color:var(--presqueblanc) !important;
	text-shadow:1px 1px 6px black;
}
#nav a{
	position:relative;
	font-family: oswald, sans-serif;
    text-transform: uppercase;
	text-decoration:none;
	padding:0.5em 0;
	color:black;
}
#nav li a::after{
	background-color:var(--flash);
	content: '';
    position: absolute;
    width: 0%;
    height: 3px;
    bottom: 0;
    left: 0;
	transition: width 400ms ease-in-out;
	-webkit-transition: width 400ms ease-in-out;
	-moz-transition: width 400ms ease-in-out;
	-o-transition: width 400ms ease-in-out;
	-ms-transition: width 400ms ease-in-out;
}
#nav li a:hover::after {
	background-color:var(--flash);
	content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
	transition: width 400ms ease-in-out;
	-webkit-transition: width 400ms ease-in-out;
	-moz-transition: width 400ms ease-in-out;
	-o-transition: width 400ms ease-in-out;
	-ms-transition: width 400ms ease-in-out;
}
#nav li a:hover {
	cursor:pointer;
}

.currentpage::after{
	background-color:var(--flash);
	content: '';
    position: absolute;
    width: 100% !important;
    height: 3px;
    bottom: 0;
    left: 0;
}

/* -----MENU MOBILE------------------ */
#menumobile{
	position:fixed;
	width:100%;
	height:100%;
	overflow:visible;
	z-index:9;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}
#menumobile #enveloppe{
	position:relative;
	background-color:black;
	width:70%;
	border-radius:0 0 0 20px;
	padding:90px 30px 30px 30px;
	box-sizing:border-box;
	display:flex;
	flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
#menumobile #cotegauche{
	position:fixed;
	width:30%;
	height:100%;
	top:0;
	left:0;
}
#menumobile #cotefond{
	position:relative;
	width:70%;
	height:100%;
}

.menumobileON{
	transform:translate(0%,0%);
	transition: transform 300ms ease-out;
	-webkit-transition: transform 300ms ease-out;
	-moz-transition: transform 300ms ease-out;
	-o-transition: transform 300ms ease-out;
	-ms-transition: transform 300ms ease-out;
}
.menumobileOFF{
	transform:translate(100%,-100%);
	transition: translate 300ms ease-out;
	-webkit-transition: transform 300ms ease-out;
	-moz-transition: transform 300ms ease-out;
	-o-transition: transform 300ms ease-out;
	-ms-transition: transform 300ms ease-out;
}
#navmobile {
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
	list-style:none;
	padding:0;
	margin:0;
	overflow:visible;
	gap:1em;
}
#navmobile li{
	padding:0.5em 0;
	margin:0;
}

#navmobile a{
	position:relative;
	font-family: oswald, sans-serif;
    text-transform: uppercase;
	text-decoration:none;
	padding:1em;
	color:var(--presqueblanc);
}
#navfooter {
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
	list-style:none;
	overflow:visible;
	margin:0;
	padding-inline-start:0px !important;
}
#navfooter li{
	margin:0;
}

#footer a{
	position:relative;
	text-decoration:none;
	color:var(--textesursombre1);
}
#navfooter .currentpage::after{
	display:none;
	visibility:hidden;
	background-color:transparent;
}


/* -----ANIMATION DU MENU MOBILE----- */
.cachetoi{
	transform:translate(-70%, 100px);
	border-radius:0 20px 0 0;
	transition: transform 300ms ease-out, border 300ms ease-out;
	-webkit-transition: transform 300ms ease-out, border 300ms ease-out;
	-moz-transition: transform 300ms ease-out, border 300ms ease-out;
	-o-transition: transform 300ms ease-out, border 300ms ease-out;
	-ms-transition: transform 300ms ease-out, border 300ms ease-out;
}
.cachetoirev{
	transform:translate(0,0);
	border-radius:0;
	transition: transform 300ms ease-out, border 300ms ease-out;
	-webkit-transition: transform 300ms ease-out, border 300ms ease-out;
	-moz-transition: transform 300ms ease-out, border 300ms ease-out;
	-o-transition: transform 300ms ease-out, border 300ms ease-out;
	-ms-transition: transform 300ms ease-out, border 300ms ease-out;
}
#boutonmenumobile{
	position:fixed;
	width:60px;
	height:60px;
	box-sizing: border-box;
	background-color:var(--flash);
	top:30px;
	right:30px;
	z-index:15;
	box-shadow:2px 3px 8px 0px #0000005e;
	border-radius:5px;
	cursor:pointer;
}
#boutonmenumobile .barremenu{
	pointer-events: none;
	position:absolute;
	width:54%;
	height:10%;
	right:23%;
	background-color:var(--textesurflash);
}
.inclineboutonmenumobile{
	transform:rotate(90deg);
	transition: transform 300ms ease-out;
	-webkit-transition: transform 300ms ease-out;
	-moz-transition: transform 300ms ease-out;
	-o-transition: transform 300ms ease-out;
	-ms-transition: transform 300ms ease-out;
}
.inclineboutonmenumobilerev{
	transform:rotate(0deg);
	transition: transform 300ms ease-out;
	-webkit-transition: transform 300ms ease-out;
	-moz-transition: transform 300ms ease-out;
	-o-transition: transform 300ms ease-out;
	-ms-transition: transform 300ms ease-out;
}

@keyframes disparait {
from {opacity:1;}
to {opacity:0;}
}

.barrecentrale {
animation-name:disparait;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

@keyframes inclinebas {
from {}
to {top: 45%;height:12%;transform: skewY(40deg);}
}

.barretop {
animation-name:inclinebas;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

@keyframes inclinehaut {
from {}
to {bottom: 45%;height:12%;transform: skewY(-40deg);}
}

.barrebottom {
animation-name:inclinehaut;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

@keyframes disparaitrev {
from {opacity:0;}
to {opacity:1;}
}

.barrecentralerev {
animation-name:disparaitrev;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

@keyframes inclinebasrev {
from {top: 45%;height:12%;transform: skewY(40deg);}
to {}
}

.barretoprev {
animation-name:inclinebasrev;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

@keyframes inclinehautrev {
from {bottom: 45%;height:12%;transform: skewY(-40deg);}
to {}
}

.barrebottomrev {
animation-name:inclinehautrev;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}

/*------------------------------*/
/*          CONTACT             */
/*------------------------------*/

.champobligatoire{
	color:#cd4646;
}

label{
	display: block; 
	font-weight: bold; 
}

/*------------------------------*/
/*         FOOTER               */
/*------------------------------*/

footer{
	background-image:url('/images/background2.jpg');
	background-size:cover;
	background-position:45% 58%;
}
footer p{
	color:var(--textesursombre1);
	}