@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 {
  --vertfonce: #3f6a3b;
  --vertflash: #75d36e;
  --couleurtexte: #30322f;
  --vertfoncemobile: #0b0908;
  --textfooter:#979797;

}
::selection{
    background-color: var(--vertflash); 
	color:black;
	}
.reponserapide p::selection, .reponserapide h3::selection{
    background-color: var(--vertfonce); 
	color:white;	
}
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(--couleurtexte);
}
h2, h1{
	font-family: 'inter', sans-serif;
    text-transform: none;
	text-decoration:none;
	color:var(--couleurtexte);
	font-weight:normal;
	font-size:2em;
	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(--couleurtexte);
}
h2 + h3 {
	margin-top:0rem;
}
h3:first-child, h2:first-child, h1:first-child {
	margin-top:0!important;
}
p, input, ul{
	font: normal 17px / 160% 'inter', sans-serif;
	position:relative;
	margin:0 0 1rem 0;
	margin-block-start: 1em;
	margin-block-end:1em;
	color:var(--couleurtexte);
}
ul {
	margin-block-start:1em;
	margin-block-end:1em;
	padding-inline-start:20px;
}
.citation{
	font-weight:bold;
	margin:2rem 0 2rem 1rem;
	padding-left:1rem;
	border-left:5px solid var(--vertflash);
	box-sizing:border-box;
}
.surligne{
	background-color:var(--vertflash);
	color:#2a3329;
}
.ulsource{
	font-size:80%;
	line-height:1.2em;
}
.ulsource li{
	margin-bottom:0.5em;
}
.source{
	text-decoration: none;
	vertical-align:super;
	font-size:80%;
	cursor:pointer;
	color:var(--vertflash);
}
.blinksource{
	animation: blinker 300ms linear 5;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.btn-rr{
	background-color:transparent;
	border:2px solid var(--vertfoncemobile);
	display: block;
    font-family: 'oswald', sans-serif;
	font-size:0.8em;
    padding: 0.8em;
	border-radius: 0 11px;
	transition: background-color 200ms ease-in-out;
	-webkit-transition: background-color 200ms ease-in-out;
	-moz-transition: background-color 200ms ease-in-out;
	-o-transition: background-color 200ms ease-in-out;
	-ms-transition: background-color 200ms ease-in-out;
}
.btn-rr:focus{
	background-color:#60b15a;
	transition: background-color 200ms ease-in-out;
	-webkit-transition: background-color 200ms ease-in-out;
	-moz-transition: background-color 200ms ease-in-out;
	-o-transition: background-color 200ms ease-in-out;
	-ms-transition: background-color 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%;}
}

.btn1{
	background-color: transparent;
	border:0;
	box-sizing:border-box;
    margin: 2em auto;
    display: block;
    font-family: 'oswald', sans-serif;
	font-size:1em;
    padding: 1em;
	color:var(--vertflash);
}
.btn1::before, .btn1::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.btn1::before {
  top: 0;
  left: 0;
}
.btn1::after {
  bottom: 0;
  right: 0;
}
.btn1animated{
	color:white;
	background-color:var(--vertflash);
	transition:background-color 0.4s ease-out 1.6s, color 0.4s ease-out 1.6s;
	-webkit-transition: background-color 0.4s ease-out 1.6s, color 0.4s ease-out 1.6s; 
    -moz-transition: background-color 0.4s ease-out 1.6s, color 0.4s ease-out 1.6s;
    -o-transition: background-color 0.4s ease-out 1.6s, color 0.4s ease-out 1.6s;
    -ms-transition: background-color 0.4s ease-out 1.6s, color 0.4s ease-out 1.6s;
}
.btn1animated::before, .btn1animated::after {
  width: 100%;
  height: 100%;
}
.btn1animated::before {
  border-top-color: var(--vertflash);
  border-right-color: var(--vertflash);
  transition: width 0.4s ease-out, height 0.4s ease-out 0.4s;
}
.btn1animated::after {
  border-bottom-color: var(--vertflash);
  border-left-color: var(--vertflash);
  transition: border-color 0s ease-out 0.8s, width 0.4s ease-out 0.8s, height 0.4s ease-out 1.2s;
  -webkit-transition: border-color 0s ease-out 0.8s, width 0.4s ease-out 0.8s, height 0.4s ease-out 1.2s;
  -moz-transition: border-color 0s ease-out 0.8s, width 0.4s ease-out 0.8s, height 0.4s ease-out 1.2s;
  -o-transition: border-color 0s ease-out 0.8s, width 0.4s ease-out 0.8s, height 0.4s ease-out 1.2s;
  -ms-transition: border-color 0s ease-out 0.8s, width 0.4s ease-out 0.8s, height 0.4s ease-out 1.2s;
}
button {
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	position:relative;
}


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

.Cbloc {
	position:relative;
	display:block;
	width:100%;
	background-color:white;
}

.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%;
}

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

@media screen and (max-width: 775px) {
.Bgd-Vert-Img{background-repeat:no-repeat!important;background-attachment:unset!important;
background-image: url('images/background-home-mobile.jpg') !important;background-color:var(--vertfoncemobile) !important;background-position:10% 50%!important;background-size:1000px!important;}
.Cbloc-int{width:95%!important;}
.chapeau p{font-size:0.8em!important;}
.hidemobile{display:none!important;}
.showmobile{display:block!important;}
.titrepunchy{font-size:1.5em!important;padding:0 0 5rem 0 !important;}
#cadre > ::before {margin-right:6px!important;width:25px!important;height:24px!important;bottom:1em!important;}
#header{background-color:var(--vertfonce)!important;}
#logo-blanc{margin:8rem 0 5rem 0 !important;}
#nav{display:none!important;}

}
.showmobile{display:none;}


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

#header{
	background-color:white;
}
#header-int{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	padding:1em 3%;
}

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

.Bgd-Vert-Img{
	background-image: url('images/background-home-blurry.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:50% 10%;
}

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

.img-titre-article{
	display:block;
	border-radius: 20px;
	position:absolute;
	width:100%;
	bottom:0;
}
.img-illustration{
	display:block;
	border-radius: 20px;
	position:relative;
	width:100%;
	margin:2rem 0;
}
.sous-titre-img{
	text-align:center;
	font-size:0.7em;
	margin-top:-1.5rem;
	margin-bottom:2rem;
	color:#565767;
	font-style:italic;
}

.titrepunchy{
	padding:8rem 0;
	margin:0 auto;
	color:white;
	text-align:center;
	width:80%;
	/*text-shadow: #0000006b 4px 5px 8px;*/
}
#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;
}

.chapeau{
	display:flex;
	border-top:1px solid grey;
	border-bottom:1px solid grey;
	width:100%;
	box-sizing:border-box;
	justify-content: space-between;
    align-items: center;
	flex-direction: row;
    flex-wrap: nowrap;
	font-size:80%;
	margin:3rem 0 ;
}
.chapeau p{
	margin: 1em 0;
    line-height: 1.5em;
}

.chapeau .share::before{
	content:url('https://assets.plataformadevendas.com.br/img/social/icon-share.svg');
	height:15px;
	width:15px;
	position:absolute;
	left:-20px;
}

.reponserapide{
	background-color:var(--vertflash);	
	border-radius:20px;	
	padding:5%;	
	box-sizing:border-box;
}
.reponserapide > :last-child {
	margin-bottom:0;
}
.reponserapide h2, .reponserapide p{
	color:var(--vertfonce);
}


/*------------------------------*/
/*         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 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(--vertflash);
	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(--vertflash);
	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(--vertflash);
	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:2;
	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:calc(1.535*1em) 0 calc(0.61*1em) 0;
	gap:1em;
	overflow:visible;
}
#navmobile li{
	padding:0.5em 0;
	margin:0;
}

#navmobile a{
	position:relative;
	font-family: oswald, sans-serif;
    text-transform: uppercase;
	text-decoration:none;
	padding:0.5em 0;
	color:white;
}

/* -----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(--vertflash);
	top:30px;
	right:30px;
	z-index:9;
	box-shadow:2px 3px 8px 0px #0000005e;
	border-radius:5px;
}
#boutonmenumobile .barremenu{
	pointer-events: none;
	position:absolute;
	width:54%;
	height:10%;
	right:23%;
	background-color:var(--vertfoncemobile);
}
.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;
}

/*------------------------------*/
/*         FOOTER               */
/*------------------------------*/
footer{
	background-color:var(--vertfoncemobile)!important;
}
footer p{
	color:var(--textfooter);
	}




































#menu-ordi{
	position:relative;
	width:100%;
	background-color:white;
}
.menu-ordi-noir{
	background-color:black!important;
	background-size:cover;
	background-image: url(images/background-home.jpg);
	background-position-y: 10%;
}
.menu-ordi-noir nav ul li a {
	color:white!important;
}
.menu-ordi-noir .currentpage {
	color:black!important;
}










#entete-accueil{
	width:100%;
	position:relative;
	background-size:cover;
	background-image: url(images/background-home.jpg);
	background-position-x: 64%;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:center;
	color:white;
	height:900px;
}

#entete-accueil #degrade{
position:absolute;
display:none;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
background:linear-gradient(0deg, #050704b3 20%, transparent 62%);
}

#entete-accueil h2{
    text-align: center;
	margin-top:100px;
	text-shadow:0px 0px 10px black;
	z-index:2;
}
#entete-accueil p{
	z-index:2;
	text-align:center;
	margin:40px auto 70px auto;
	width:75%;
	text-shadow:0px 0px 10px black;
	font-size:110%;
	max-width:600px;
}


#cadre-entete{
	z-index: 2;
    width: fit-content;
    margin: 0 auto;
    transform: rotate(355deg);
    background-color: #040702b5;
}



.souligne{
	position:relative;
}
.souligne:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 31px;
  left: 0;
  background-color: var(--jaune);
  transform: scaleX(1);
  transform-origin: bottom right;
  animation-name: Surlignage;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-delay: 2s;
}

@keyframes Surlignage {
  0% {transform: scaleX(1);transform-origin: bottom right;}
 15% {transform: scaleX(0);transform-origin: bottom left;}
  30% {transform: scaleX(0);transform-origin: bottom left;}
  45% {transform: scaleX(1);transform-origin: bottom right;}
  100% {transform: scaleX(1);transform-origin: bottom right;}
}



/*ANIMATION DU MENU MOBILE*/





/*FIN ANIMATION DU MENU MOBILE*/