:root {
--wrapper: 96vw;
--gutter: 1.4vw;
--leftMargin: 2vw;
--col: calc((var(--wrapper) - 11*var(--gutter))/12);
--col-2: calc(var(--col)*2 + var(--gutter));
--col-3: calc(var(--col)*3 + 2*var(--gutter));
--col-4: calc(var(--col)*4 + 3*var(--gutter));
--col-5: calc(var(--col)*5 + 4*var(--gutter));
--col-6: calc(var(--col)*6 + 5*var(--gutter));
--col-7: calc(var(--col)*7 + 6*var(--gutter));
--col-8: calc(var(--col)*8 + 7*var(--gutter));
--col-9: calc(var(--col)*9 + 8*var(--gutter));
--col-10: calc(var(--col)*10 + 9*var(--gutter));
--col-11: calc(var(--col)*11 + 10*var(--gutter));
--col-12: calc(var(--col)*12 + 11*var(--gutter));
--cg1: calc((var(--wrapper) - 11*var(--gutter))/12 + var(--gutter));
--cg2: calc(var(--col)*2 + var(--gutter) + var(--gutter));
--cg3: calc(var(--col)*3 + 2*var(--gutter) + var(--gutter));
--cg4: calc(var(--col)*4 + 3*var(--gutter) + var(--gutter));
--cg5: calc(var(--col)*5 + 4*var(--gutter) + var(--gutter));
--cg6: calc(var(--col)*6 + 5*var(--gutter) + var(--gutter));
--cg7: calc(var(--col)*7 + 6*var(--gutter) + var(--gutter));
--cg8: calc(var(--col)*8 + 7*var(--gutter) + var(--gutter));
--cg9: calc(var(--col)*9 + 8*var(--gutter) + var(--gutter));
--cg10: calc(var(--col)*10 + 9*var(--gutter) + var(--gutter));
--cg11: calc(var(--col)*11 + 10*var(--gutter) + var(--gutter));
--cg12: calc(var(--col)*12 + 11*var(--gutter) + var(--gutter))
}
@media(max-width:767px) {
:root {
--wrapper: calc(100vw - 40px);
--leftMargin: 20px
}
}
#grille {
	position: fixed;
	inset: 0;
	opacity: .1;
	pointer-events: none;
	display: none;
	z-index: 10
}
#grille .wrap {
	width: var(--wrapper);
	margin: 0 auto
}
#grille .wrap div {
	width: var(--col);
	background: blue;
	height: 100vh
}
.dev #grille {
	display: block
}
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: 0;
	margin: 0;
	padding: 0;
	border: 0
}
button {
	background: 0 0;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit
}
.grosP {
	font: 200 normal clamp(59px, 7.6vw, 146px)/1.14 "Orbikular"
}
@media(max-width:767px) {
.grosP {
	font-size: 40px
}
}
.intitule {
	font: 500 normal clamp(32px, 4.16vw, 80px)/1 "Roobert";
	text-transform: uppercase;
	letter-spacing: -1px
}
.sousTitre {
	font: 200 normal clamp(23px, 2vw, 40px)/1.2 "Orbikular";
	letter-spacing: -.01em
}
.para {
	font: 200 normal clamp(40px, 4.9vw, 93px)/1.03 "Orbikular"
}
#showreel {
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 8;
	visibility: hidden;
	background: #001713;
	justify-content: center;
	cursor: pointer
}
#showreel video {
	width: 80vw;
	height: auto;
	border-radius: 20px
}
#showreel svg {
	display: none;
	position: absolute;
	-webkit-filter: invert(1);
	filter: invert(1);
	left: 50%;
	top: 75vh;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
@media(max-width:767px) {
#showreel svg {
	display: block
}
}
@media(pointer:fine) {
}
.r {
	position: relative
}
.a {
	position: absolute
}
.f {
	position: fixed
}
.s {
	position: -webkit-sticky;
	position: sticky
}
.inset {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.flex {
	display: flex;
	flex-wrap: wrap
}
.flexSB {
	justify-content: space-between
}
.flexFS {
	align-items: flex-start
}
.flexFE {
	align-items: flex-end
}
.flexCE {
	align-items: center
}
.flexCL {
	flex-direction: column
}
.wrap {
	width: var(--wrapper);
	margin: 0 auto
}
.h100 {
	height: 100vh
}
.cover {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%
}
.up {
	text-transform: uppercase
}
main.off {
	display: none
}
main.off2 {
	display: block;
	overflow: hidden;
	height: 100vh
}
.menuOuvert .logo svg.off path {
	fill: #f0ff3d
}
.logoFull {
	z-index: 10;
	position: absolute;
	top: var(--gutter);
	height: 35px;
	left: var(--leftMargin);
	width: 15vw;
	opacity: 0;
	visibility: hidden
}
@media(max-width:767px) {
.logoFull {
	width: 140px;
	top: 16px
}
}
.s-hero2 {
	background: #002921;
	color: #f7f7f7
}
.s-hero2 h1, .s-hero2 h2 {
	font-family: "Epilogue", sans-serif;
	font-size:175px;
}
.s-hero2 .s {
	top: 0;
	z-index: 3
}
.span1 {
	font: 300 italic clamp(81px, 10.5vw, 201px)/0.7 "Orbikular"
}
.trioImg {
	padding: 10vw 0 calc(100vh + 114vw);
	z-index: 2
}
.trioImg .innerImg {
	width: var(--cg3);
	border-radius: 20px;
	overflow: hidden
}
.trioImg .innerImg1 {
height:calc(var(--col-2) + 2*var(--gutter));
	margin: 0 0 0 37%
}
.trioImg .innerImg2 {
	height: calc(var(--col-4) - var(--gutter));
	margin: 10vw 0 0 13%;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg)
}
.trioImg .innerImg3 {
height:calc(var(--col-3) + 2*var(--gutter));
	margin: -12vw 0 0 62%;
	-webkit-transform: translateX(0%) rotate(-20deg);
	transform: translateX(0%) rotate(-20deg);
	z-index: 100
}
.trioImg img, .trioImg video {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-transform: scale(1.4, 1.4);
	transform: scale(1.4, 1.4);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%
}
@media(max-width:767px) {
.trioImg {
	padding: 26vw 0;
	overflow: hidden
}
.trioImg .innerImg1 {
	width: var(--cg11);
height:calc(var(--col-6) + 4*var(--gutter));
	margin: 0 0 0 40vw;
	-webkit-transform: translateX(-20%) rotate(12deg);
	transform: translateX(-20%) rotate(12deg)
}
.trioImg .innerImg2 {
	width: var(--col-9);
	height: 70vw;
	margin: -5vw 0 0 -20vw;
	-webkit-transform: translateX(30%) rotate(-10deg);
	transform: translateX(30%) rotate(-10deg)
}
.trioImg .innerImg3 {
	width: calc(var(--cg8) + var(--gutter));
	height: calc(var(--cg8) + var(--gutter));
	margin: -4vw 0 0 40vw;
	-webkit-transform: translateX(-10%) rotate(10deg);
	transform: translateX(-10%) rotate(10deg)
}
.trioImg img, .trioImg video {
	-webkit-transform: none!important;
	transform: none!important
}
}
h1, .h1Bis {
	width: 100%
}
h1 .innerL, .h1Bis .innerL {
	position: relative;
	overflow: hidden;
	display: block;
	text-align: center;
	padding: .2em 0;
	margin: -.4em 0;
	text-transform: uppercase
}
h1 .l, .h1Bis .l {
	display: inline-block
}
@media(max-width:767px) {
h1 .innerL, .h1Bis .innerL {
	font: 500 normal 40px/1 "Roobert"
}
}
h1 {
	-webkit-transform: translateY(70px);
	transform: translateY(70px);
	visibility: hidden
}
h1 .l {
	-webkit-transform: translateY(120%);
	transform: translateY(120%)
}
.h1Bis {
	-webkit-transform: translateY(-20px);
	transform: translateY(-20px)
}
.h1Bis .heroFleche {
	visibility: hidden
}
.motGauche, .motDroite {
	display: inline-block
}
.innerH1Bis {
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%
}
.innerH1Bis.off {
	display: none
}
.innerH1Bis h2 {
	width: 100%;
	color: #003d31
}
@media(max-width:767px) {
.innerH1Bis {
	height: auto
}
.innerH1Bis h2 {
	display: none
}
}
.innerH1Bis2 {
	z-index: 4
}
.innerH1Bis2 .innerL.off {
	visibility: hidden;
}
.h1Bis .l2{
	color: #fff;
}
#fauxDebut {
	background: #002921;
	color: #f7f7f7;
	visibility: hidden;
	z-index: -1
}
#fauxDebut.devant {
	z-index: 3
}
#fauxDebut h2 {
	font: 500 normal clamp(81px, 10.5vw, 201px)/1 "Roobert";
	letter-spacing: -.008em;
	width: 100%;
	-webkit-transform: translateY(70px);
	transform: translateY(70px)
}
#fauxDebut .innerL {
	position: relative;
	overflow: hidden;
	display: block;
	text-align: center;
	font: 500 normal clamp(81px, 10.5vw, 201px)/1 "Roobert";
	padding: .2em 0;
	margin: -.4em 0;
	text-transform: uppercase
}
#fauxDebut .l {
	display: inline-block;
	-webkit-transform: translateY(120%);
	transform: translateY(120%)
}
@media(max-width:767px) {
#fauxDebut .innerL {
	font: 500 normal 40px/1 "Roobert"
}
}
.heroFleche {
	margin: 0 -1vw;
	z-index: 2;
	position: relative;
	width: 12.4vw;
	border-radius: .35em;
	height: .7em;
	background: #f0ff3d;
	display: inline-block;
	overflow: hidden;
	line-height: 0
}
.heroFleche img {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -200%);
	transform: translate(-50%, -200%);
	width: 4.4vw
}
@media(max-width:767px) {
.heroFleche {
	width: 55px;
	height: 29px;
	margin: 0
}
}
.mask {
	transition: 1s;
	transition-property: background;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	z-index: 2;
	background: url(../img/casestudy/truefans/clone-bg.jpg) no-repeat;
    background-size: 100%;
}
.mask.visible {
	-webkit-clip-path: none;
	clip-path: none
}
.mask.off {
	visibility: hidden
}
.part2.part2A {
	background: #FFF28C;
	color: #f7f7f7;
	position: relative;
	z-index: 3;
	padding: 20vh 0 20vh 33.33%;
	margin:calc(-1*(100vh + 100vw)) 0 0;
	-webkit-transform: translateX(100%);
	transform: translateX(100%)
}
.part2.part2A p {
	font-size: 120px;
	line-height: 1.1;	
}
.part2.part2A .mot {
	display: inline-block
}
.part2.part2A .l {
	position: relative;
	color: #111111;
	display: inherit;
	opacity: .05
}
@media(max-width:767px) {
.part2.part2A {
	margin: 0;
	-webkit-transform: none;
	transform: none;
	padding: 20vw 20px
}
.part2.part2A p {
	font-size: 45px
}
.part2.part2A .l {
	opacity: 1
}
}
.pin-hero {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	background: #002921
}
.s-hero {
	justify-content: center;
	text-align: center;
	color: #f7f7f7;
	text-transform: uppercase;
	width: 100vw
}
.s-hero h1 {
	font: 400 normal clamp(54.5px, 7vw, 136px)/1.04 "Roobert";
	width: 100%
}
.s-hero h1 .span1 {
	font-style: italic
}
.s-hero h1 .span2 {
	color: #f0ff3d;
	font: 200 normal clamp(54.5px, 7vw, 136px)/1.04 "Orbikular"
}
.s-hero h1 .l {
	display: inline-block;
	width: 100%
}
.s-hero .scroll {
	position: absolute;
	bottom: 36px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font: 400 normal clamp(11px, 1.4vw, 27px)/1.2 "Orbikular"
}
.pin-garder h2 {
	transition: .2s;
	transition-property: color
}
.pin-garder svg {
	transition: .2s;
	transition-property: fill
}
.pin-garder svg path {
	transition: .2s;
	transition-property: opacity
}
.pin-garder.invert {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
.pin-garder.invert h2 {
	color: #002921
}
.pin-garder.invert svg {
	fill: #f0ff3d
}
.pin-garder.invert svg path {
	opacity: 1;
	stroke: #f0ff3d
}
@media(max-width:767px) {
.pin-garder {
	padding: 10vw 0 28vw;
	background: #002921;
	overflow: hidden;
	margin: -10vw 0 0
}
.pin-garder svg path {
	opacity: 1;
	stroke: #c0d8d7
}
}
.s-garder {
	background: #002921
}
.s-garder svg {
	width: 53vw;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.s-garder h2 {
	width: 100%;
	text-align: center;
	color: #f0ff3d;
	text-transform: uppercase;
	font: 300 normal clamp(37px, 4.9vw, 93px)/normal "Orbikular";
	position: relative;
	z-index: 2
}
.s-garder h2 span {
	display: inline-block
}
.s-garder h2 span.off {
	visibility: hidden
}
@media(max-width:767px) {
.s-garder {
	height: auto;
	z-index: 3;
	padding: 20vw 0
}
.s-garder h2 {
	font-size: 37px
}
.s-garder svg {
	width: 110vw;
	height: auto;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: translate(-50%, -50%) rotate(10deg);
	transform: translate(-50%, -50%) rotate(10deg)
}
}
.s-intro {
	margin: -100vh 0 0;
	background: #f7f7f7;
	z-index: 2
}
@media(min-width:1280px) {
.s-intro {
	padding: 14vw 0 16vw
}
}
.s-intro .grosP {
	margin: 0 auto;
	width: 80vw
}
.s-intro .s-player {
	width: var(--col-8);
	margin: 180px auto 0
}
.s-intro .gauche {
	width: var(--col-3);
	cursor: pointer
}
.s-intro .gauche::before {
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: #000;
	border-radius: 20px;
	z-index: 1
}
.s-intro .gauche video {
	width: 100%;
	display: block;
	border-radius: 20px;
	transition: .3s;
	opacity: .8;
	z-index: 2;
	position: relative
}
.s-intro .gauche span {
	text-align: center;
font-size:clamp(7px, .9vw, 16px);
	padding: 15px 0 0;
	position: absolute;
	top: 100%;
	width: 100%;
	pointer-events: none
}
.s-intro .gauche svg {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: .3s;
	z-index: 3
}
.s-intro .gauche:hover video {
	opacity: .4
}
.s-intro .gauche:hover svg {
	-webkit-transform: translate(-50%, -50%) scale(1.15, 1.15);
	transform: translate(-50%, -50%) scale(1.15, 1.15)
}
.s-intro .droite {
	text-indent: calc(var(--col) - var(--gutter));
	text-transform: uppercase;
	width: var(--col-5);
	padding: 0 0 0 var(--cg1)
}
.s-intro .innerMot {
	position: relative;
	display: inline-block;
	-webkit-clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
	clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%)
}
.s-intro .mot {
	display: inline-block;
	-webkit-transform: translateY(100%);
	transform: translateY(100%)
}
@media(max-width:1279px) {
.s-intro {
	padding: 130px 0 170px
}
}
@media(max-width:767px) {
.s-intro {
	margin: 0;
	padding: 20vw 0
}
.s-intro .grosP {
	width: calc(100vw - 40px)
}
.s-intro .mot {
	-webkit-transform: none;
	transform: none
}
.s-intro .s-player {
	width: var(--wrapper);
	margin: 20vw auto 0
}
.s-intro .gauche, .s-intro .droite {
	width: var(--wrapper)
}
.s-intro .gauche span {
	display: none
}
.s-intro .droite {
	margin: 20vw 0 0;
	padding: 0;
	color: #002921;
	font-size: 17px;
	line-height: 23px;
	text-indent: 0
}
}
.s-pushs {
	background: #001713;
	color: #f7f7f7;
	text-align: center;
	padding: 14vw 0
}
.s-pushs button {
	pointer-events: none
}
.s-pushs button>span {
	font: 300 normal clamp(320px, 41vw, 800px)/1.2 "Orbikular";
	color: #f0ff3d;
	pointer-events: initial
}
.s-pushs .sousTitre {
	margin: 34px 0 0
}
.s-pushs button {
	margin: 25vw 0 0
}
.s-pushs .nom {
	display: flex
}
.s-pushs .nom video {
width:calc(var(--col-4) + 2*var(--gutter));
	height: auto;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, -40%);
	transform: translate(-50%, -40%);
	border-radius: 20px;
	z-index: 2
}
.s-pushs .lettre {
	z-index: 1
}
.s-pushs .lettre:nth-child(1) {
	z-index: 3
}
.s-pushs .lettre:nth-child(2) {
	z-index: 3
}
.s-pushs .innerElls {
	opacity: .15;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}
.s-pushs .innerElls img {
	position: absolute;
	left: 50%;
	width: 33.33%;
	height: auto;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}
@media(max-width:767px) {
.s-pushs {
	padding: 20vw 0;
	background: #002921
}
.s-pushs .lettre {
	z-index: 3
}
.s-pushs button {
	margin: 80vw 0 0;
	display: block;
	width: 100%;
	padding: 0 var(--leftMargin)
}
.s-pushs button>span {
	font-size: 140px
}
.s-pushs .nom {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center
}
.s-pushs .nom video {
width:calc(100% - 4*var(--leftMargin));
	-webkit-transform: translate(-50%, -70%);
	transform: translate(-50%, -70%)
}
}
.lesCercles {
	width: 100%;
	height: 100vh;
	top: 0;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%)
}
.lesCercles img {
	width: 34%;
	height: auto;
	position: absolute;
	top: 100%;
	left: var(--leftMargin);
	opacity: .1
}
.lesCercles img:nth-child(2) {
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0)
}
.lesCercles img:nth-child(3) {
	left: auto;
	right: var(--leftMargin)
}
.s-interlude {
	background: #f7f7f7
}
.s-interlude p {
	width: 80%;
	margin: 0 auto
}
@media(max-width:767px) {
.s-interlude {
	height: auto;
	padding: 34vw 0
}
.s-interlude p {
	width: calc(100% - 40px)
}
}
.s-sticky {
	height: 400vh;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	white-space: nowrap
}
.s-sticky picture:not(.current) {
	visibility: hidden
}
.s-sticky .gauche, .s-sticky .droite {
	width: 50%
}
.s-sticky .gauche {
	height: 100vh;
	top: 0
}
.s-sticky .gauche img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}
.s-sticky .droite {
	background: #f0ff3d;
	color: #002921;
	height: 100%;
	margin: -100vh 0 0;
	white-space: initial
}
.s-sticky .droite picture:not(.current) {
	display: none
}
.s-sticky h3 {
	font: 400 normal clamp(17px, 1.25vw, 24px)/1.22 "Roobert";
	max-width: var(--cg2)
}
.s-sticky h2 {
	font: 300 normal clamp(35px, 3.125vw, 60px)/1.045 "Orbikular";
	margin: 80px 0
}
.s-sticky p {
	font-size: clamp(18px, 1.25vw, 24px);
padding:0 var(--col) 0 calc(var(--col) + 2*var(--gutter))
}
.s-sticky .part {
	height: 100vh;
	top: 0;
	left: 0;
	width: 100%;
	justify-content: center;
	padding: 0 var(--leftMargin) 0 calc(var(--gutter)/2 + var(--col));
	transition: .2s;
	transition-delay: .2s
}
.s-sticky .part:not(.current) {
	opacity: 0;
	transition: .2s;
	transition-delay: 0s
}
@media(max-width:767px) {
.s-sticky {
	height: auto
}
.s-sticky .gauche, .s-sticky .droite {
	width: 100%
}
.s-sticky .gauche {
	display: none
}
.s-sticky .droite {
	margin: 0;
	z-index: 2;
	padding: 0 0 20vw
}
.s-sticky .part {
	height: auto;
	position: relative;
	padding: 0 20px
}
.s-sticky .part:not(.current) {
	opacity: 1
}
.s-sticky .part h3 {
	max-width: var(--col-6);
	padding: 18vw 0 0
}
.s-sticky .part h2 {
	margin: 16vw 0
}
.s-sticky .part p {
	padding: 0
}
.s-sticky .part h3, .s-sticky .part h2, .s-sticky .part p {
width:calc(100vw - 2*var(--leftMargin))
}
.s-sticky .part+.part {
	margin: 20vw 0 0
}
.s-sticky .droite picture:not(.current) {
	display: block;
	visibility: visible
}
.s-sticky .droite picture:not(.current) img {
	width: 100vw;
	height: 100vw;
	-o-object-fit: cover;
	object-fit: cover;
margin:0 0 0 calc(-1*var(--leftMargin))
}
}
.s-pire {
	background: #002921;
	color: #f7f7f7;
	text-transform: uppercase
}
.s-pire .r, .s-pire>div {
	overflow: hidden
}
.s-pire h2 {
	font: 400 normal clamp(69px, 9vw, 173px)/1.2 "Roobert"
}
.s-pire h2 .autre {
	font: 300 normal clamp(69px, 9vw, 173px)/1.2 "Orbikular"
}
.s-pire h2.a {
	bottom: 91%;
	right: 0
}
.s-pire h2 .trans {
	-webkit-animation: 10s defiler infinite linear;
	animation: 10s defiler infinite linear;
	display: block;
	white-space: nowrap;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}
.s-pire h2 .trans2 {
	display: block;
	white-space: nowrap;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	-webkit-animation: 10s defiler2 infinite linear;
	animation: 10s defiler2 infinite linear;
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}
.s-pire h3 {
	font-size: 70px;
	line-height: 76px;
	text-transform: initial;
	display: none;
	text-align: center;
	width: 100vw;
	margin: 0 0 10vw
}
.s-pire h3 .l1 {
	font-weight: 400;
	font-family: roobert
}
.s-pire h3 .l2 {
	display: block;
	font-weight: 300;
	font-family: orbikular
}
.s-pire .travaille {
	font: 400 normal clamp(9px, 1.1vw, 21px)/1.56 "Roobert";
	color: #f0ff3d;
	text-align: center;
	margin: 108px 0 0
}
.s-pire.actif .trans, .s-pire.actif .trans2 {
	-webkit-animation-play-state: initial;
	animation-play-state: initial
}
@media(max-width:767px) {
.s-pire h2 {
	display: none
}
.s-pire h3 {
	display: block
}
.s-pire .travaille {
	font-size: 17px;
	margin: 0
}
}
@-webkit-keyframes defiler {
from {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
to {
	-webkit-transform: translate3d(-33.33%, 0, 0);
	transform: translate3d(-33.33%, 0, 0)
}
}
@keyframes defiler {
from {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
to {
	-webkit-transform: translate3d(-33.33%, 0, 0);
	transform: translate3d(-33.33%, 0, 0)
}
}
@-webkit-keyframes defiler2 {
from {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
to {
	-webkit-transform: translate3d(33.33%, 0, 0);
	transform: translate3d(33.33%, 0, 0)
}
}
@keyframes defiler2 {
from {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
to {
	-webkit-transform: translate3d(33.33%, 0, 0);
	transform: translate3d(33.33%, 0, 0)
}
}
.s-desole {
	padding: 150px 0;
	background: #f7f7f7
}
.s-desole .flex {
	padding: 0 0 0 var(--cg1);
	height: 100%
}
.s-desole h2 {
	width: var(--col-5)
}
.s-desole .droite {
	width: var(--cg4);
	justify-content: flex-end
}
.s-desole p {
	text-indent: calc(var(--col) - var(--gutter))
}
.s-desole p svg {
	left: calc(50% - 1px);
	bottom: calc(100% + var(--cg1))
}
@media(max-width:767px) {
.s-desole {
	padding: 20vw 0;
	height: auto;
	color: #002921
}
.s-desole .flex {
	padding: 0;
	height: auto
}
.s-desole h2 {
	width: var(--wrapper)
}
.s-desole .droite {
	width: var(--wrapper);
	padding: 300px 0 0;
	z-index: 2
}
.s-desole p {
	font-size: 17px;
	line-height: 23px;
	text-indent: 0
}
.s-desole p svg {
	bottom: calc(100% + 70px)
}
}
.s-ici {
	padding: 150px 0 0;
	text-align: center;
	background: #dae5e3
}
.s-ici .sousTitre {
	margin: 0 0 34px
}
@media(max-width:767px) {
.s-ici {
	padding: 20vw 0 0;
	background: 0 0
}
}
.s-vignette {
	background: #dae5e3
}
.s-vignette .innerImg {
	justify-content: center
}
.s-vignette picture:not(.current) {
	visibility: hidden
}
.s-vignette .img {
width:calc(var(--col-4) + 2*var(--gutter));
	height: 568px;
	border-radius: 20px;
	overflow: hidden;
	position: relative
}
.s-vignette .img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}
@media(max-width:767px) {
.s-vignette {
	background: 0 0
}
.s-vignette .innerImg {
	height: auto;
	padding: 20vw 0 0
}
.s-vignette .img {
width:calc(100% - 2*var(--leftMargin));
	height: 110vw
}
}
.innerMob {
	background: #c0d8d7
}
.s-textes {
	margin: -400vh 0 0;
	z-index: 3
}
.s-textes p:not(.p2) {
	text-indent: calc(var(--col) - var(--gutter));
	font: 400 normal clamp(11px, 1.46vw, 28px)/1.38 "Roobert";
	color: #f7f7f7;
	width: var(--col-5);
	margin: 0 0 0 var(--cg7)
}
@media(max-width:767px) {
.s-textes {
	margin: 0;
	height: auto;
	padding: 20vw 0 0
}
.s-textes p:not(.p2) {
	font-size: 17px;
	line-height: 23px;
	text-indent: 0;
	width: 100%;
	margin: 0;
	color: #002921
}
.s-textes p:not(.p2) br {
	display: none
}
}
.s-textes2 {
	justify-content: center
}
.s-textes2 .p2 {
	color: #f0ff3d;
	font: 200 normal clamp(79px, 10.2vw, 197px)/normal "Orbikular";
	display: inline-block
}
.s-textes2 .p2 br {
	display: none
}
.s-textes2 .p2>span {
	opacity: 0;
	display: inline-block;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: translateY(50%) scaleY(1.4);
	transform: translateY(50%) scaleY(1.4)
}
.s-textes2 .innerTrait {
	display: inline-block
}
.s-textes2 .trait {
	top: 100%;
	left: 0;
	width: 100%;
	background: #f0ff3d;
	height: 3px;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
	transform: scaleX(0)
}
@media(max-width:767px) {
.s-textes2 {
	height: auto
}
.s-textes2 .p2 {
	font-size: 40px;
	width: 100%;
	line-height: 48px;
	color: #002921;
	text-decoration: underline;
	font-weight: 300;
	text-decoration-thickness: 1px;
	text-underline-offset: 10px
}
.s-textes2 .p2>span {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	display: inline
}
.s-textes2 .innerTrait {
	margin: 0 auto;
	width: calc(100vw - 40px);
	padding: 14vw 0 24vw
}
}
.s-carac {
	position: relative;
	background: #f7f7f7;
	z-index: 2;
	padding: 240px 0 0
}
.s-carac .first {
	width: var(--col-4);
	text-align: center;
	margin: 50px auto 240px
}
.s-carac .flex {
	padding: 0 0 240px var(--cg1)
}
.s-carac .gauche {
	width: var(--col-3);
	margin: 60px var(--gutter) 0 0
}
.s-carac .droite {
	width: var(--cg7)
}
@media(max-width:767px) {
.s-carac {
	padding: 0
}
.s-carac .gauche {
	width: 100%;
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 23px
}
.s-carac .droite {
	width: 100%;
	font-size: 31px;
	line-height: 37px;
	font-weight: 300;
	padding: 4vw 0 0
}
.s-carac .flex {
	padding: 0
}
.s-carac .flex+.flex {
	padding: 20vw 0 0
}
.s-carac .uneCarac {
	padding: 20vw var(--leftMargin)!important;
	width: 100vw;
margin:0 0 0 calc(-1*var(--leftMargin))
}
.s-carac .uneCarac+.uneCarac {
	border-top: 1px solid rgba(0,61,49,.3)
}
}
.s-cartes {
	background: #001713;
	color: #f7f7f7;
	margin: -100vh 0 0
}
.s-cartes.off {
	pointer-events: none
}
.s-cartes .pin-spacer {
	width: -webkit-max-content!important;
	width: -moz-max-content!important;
	width: max-content!important;
	white-space: nowrap!important
}
.s-cartes .cartes {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	padding: 0 130vw;
	white-space: nowrap
}
.s-cartes .carte {
	width: var(--cg3);
	height: 36vw;
	border-radius: 20px;
	background: #003d31;
	padding: 38px;
	min-width: 330px;
	min-height: 460px;
	white-space: initial
}
.s-cartes .carte2.carte {
	background: #f0ff3d;
	color: #001713
}
.s-cartes .carte2.carte .job {
	color: #001713
}
.s-cartes .carte3.carte {
	background: #dae5e3;
	color: #001713
}
.s-cartes .carte3.carte .job {
	color: #001713
}
.s-cartes .carte h2 {
	font: 500 normal clamp(29px, 3.75vw, 72px)/1.075 "Roobert"
}
.s-cartes .carte .job {
	color: #f0ff3d;
	margin: 30px 0 0;
	font-weight: 500
}
.s-cartes .carte+.carte {
	margin: 0 0 0 5vw
}
.s-cartes .carte .bas {
	font-size: clamp(13px, 1vw, 19px);
	line-height: 1.57
}
@media(max-width:1024px) {
.s-cartes .carte {
	width: var(--cg4);
	height: 48vw
}
}
@media(max-width:767px) {
.s-cartes {
	margin: 0
}
.s-cartes .cartes {
	width: 100%;
	padding: 0;
	height: auto;
	padding: 24vw 0 30vw;
	overflow: hidden
}
.s-cartes .carte {
	width: 280px;
	height: auto;
	padding: 30px;
	margin: 0 auto;
	min-width: auto;
	min-height: auto
}
.s-cartes .carte+.carte {
	margin: 0 auto
}
.s-cartes .carte h2 {
	font-size: 43px
}
.s-cartes .carte .job {
	margin: 20px 0 0;
	font-size: 14px
}
.s-cartes .carte .bas {
	padding: 40px 0 0;
	font-size: 12px
}
.s-cartes .carte:nth-child(1) {
	-webkit-transform: translateX(-40px) rotate(9deg);
	transform: translateX(-40px) rotate(9deg)
}
.s-cartes .carte:nth-child(2) {
	-webkit-transform: translateX(40px) rotate(-9deg);
	transform: translateX(40px) rotate(-9deg)
}
.s-cartes .carte:nth-child(3) {
	-webkit-transform: translateX(-40px) rotate(9deg);
	transform: translateX(-40px) rotate(9deg)
}
.s-cartes .carte:nth-child(4) {
	-webkit-transform: translateX(40px) rotate(-9deg);
	transform: translateX(40px) rotate(-9deg)
}
.s-cartes .carte:nth-child(5) {
	-webkit-transform: translateX(-40px) rotate(9deg);
	transform: translateX(-40px) rotate(9deg)
}
.s-cartes .carte:nth-child(6) {
	-webkit-transform: translateX(40px) rotate(-9deg);
	transform: translateX(40px) rotate(-9deg)
}
}
@media(max-width:767px) {
picture:not(.current) {
	display: none;
	visibility: hidden
}
}
.s-debuter {
	color: #f7f7f7;
	margin: -45vw 0 0;
	position: relative;
	z-index: 1
}
.s-debuter .para {
	width: var(--col-6);
	text-align: center;
	margin: 0 auto
}
.s-debuter .onglets {
	width: var(--col-10);
	padding: 156px 0 220px;
	margin: 0 auto
}
.s-debuter .gauche {
	width: var(--col-4)
}
.s-debuter .droite {
	width: var(--col-5);
	margin: 44px 0 0
}
.s-debuter .droite p {
	padding: 26px 0 0;
	line-height: 27px
}
.s-debuter .reponse {
	padding: 0 0 0 30px;
	font: 400 normal clamp(12px, 1.2vw, 24px)/1.5 "Roobert"
}
.s-debuter .reponse:not(:first-child) {
	top: 0;
	left: 0
}
.s-debuter .reponse:not(.current) {
	visibility: hidden;
	opacity: 0
}
.s-debuter .reponse::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #f0ff3d;
	position: absolute;
	right: 100%;
	top: 32px
}
.s-debuter .reponse ul {
	margin: var(--gutter) 0 0;
	list-style-type: none
}
.s-debuter .reponse ul li {
	margin: 5px 0 0
}
.s-debuter button {
	width: 100%;
	height: 120px;
	border-radius: 60px;
	border: 1px solid rgba(247,247,247,.2);
	display: block;
	color: #f7f7f7;
	text-align: left;
	padding: 0 50px;
	background: #001713;
	font: 400 normal clamp(12px, 1.2vw, 24px)/1.5 "Roobert"
}
.s-debuter button.premierButton {
	position: relative;
	z-index: 10
}
.s-debuter button.current, .s-debuter button:hover {
	background: #f0ff3d;
	border-color: #f0ff3d;
	color: #001713
}
.s-debuter .innerOnglet {
	padding: var(--gutter) 0 0;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	visibility: hidden;
	-webkit-perspective: 900px;
	perspective: 900px
}
.s-debuter .innerOnglet button {
	-webkit-transform: rotateX(70deg);
	transform: rotateX(70deg);
	-webkit-transform-origin: 0 90%;
	transform-origin: 0 90%
}
@media(max-width:767px) {
.s-debuter {
	margin: 0
}
.s-debuter .para {
	width: var(--wrapper);
	font-size: 34px
}
.s-debuter .onglets {
	width: 100%;
	padding: 20vw 0
}
.s-debuter .gauche {
	width: var(--wrapper);
	display: flex;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	overflow-y: scroll;
	padding: 0 20px
}
.s-debuter .droite {
	width: var(--wrapper);
	margin: 0 auto;
	padding: 10vw 0 0
}
.s-debuter .innerOnglet {
	-webkit-transform: none;
	transform: none;
	visibility: initial;
	padding: 0;
	pointer-events: initial
}
.s-debuter .innerOnglet button {
	-webkit-transform: none;
	transform: none;
	height: 96px;
	width: var(--col-9);
	font-size: 14px;
	padding: 0 40px
}
.s-debuter .innerOnglet+.innerOnglet {
	margin: 0 0 0 20px
}
.s-debuter .reponse {
	font-size: 16px;
	line-height: 22px;
	position: relative;
	padding: 0
}
.s-debuter .reponse::before {
	content: none
}
.s-debuter .reponse:not(.current) {
	display: none
}
}
footer {
	background: #f7f7f7;
	overflow: hidden
}
footer .innerFoot {
	padding: 130px 0 0
}
footer .passe {
	font: 500 normal clamp(32px, 4.16vw, 80px)/1 "Roobert";
	width: var(--col-4);
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase
}
footer .fleche .fl {
	margin: 66px auto 18px;
	display: block;
	z-index: 2;
	pointer-events: none;
	position: relative
}
footer .fleche .toMorph {
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1
}
footer #logo {
	display: none
}
footer .pBig {
	font: 200 normal 18.46vw/normal "Orbikular";
	letter-spacing: -.006em;
	white-space: nowrap;
margin:0 0 0 -.8vw
}
footer .pBig span {
	display: inline-block;
	will-change: transform
}
@media(max-width:767px) {
footer .innerFoot {
	padding: 20vw 0 0
}
footer .passe {
	width: var(--col-8)
}
footer .pBig {
	font-size: 16.5vw;
	text-align: center;
	padding: 20vw 0 0;
	letter-spacing: -.38px
}
}
.footerInfos {
	font: 400 normal clamp(10px, 1.25vw, 24px)/normal "Roobert";
	padding: 0 0 44px;
	margin: -2vw 0 0;
	z-index: 2;
	position: relative
}
.footerInfos .gauche>* {
	margin: 0 64px 0 0
}
.footerInfos .gauche a {
	text-decoration: none;
	color: inherit
}
.footerInfos .social img {
	width: 13.3px;
	height: auto
}
.footerInfos .social a {
	margin: 0 25px 0 0;
	-webkit-filter: grayscale(1) contrast(200%);
	filter: grayscale(1) contrast(200%)
}
.footerInfos .social a:last-child img {
	width: 7px;
	height: auto
}
@media(max-width:767px) {
.footerInfos {
	font-size: 13px;
	width: 100vw;
margin:0 0 0 calc(-1*var(--leftMargin));
	padding: 0
}
.footerInfos .social {
	margin: 16vw auto 0;
	display: block;
	width: 100%;
	text-align: center
}
.footerInfos .social img {
	width: 20px
}
.footerInfos .social a {
	margin: 0 10px
}
.footerInfos .social a:last-child img {
	width: 10px;
	height: auto
}
.footerInfos .gauche>a {
	margin: 0 auto;
	width: 100%;
	display: block;
	text-align: center
}
.footerInfos .toTop {
	margin: 0;
	width: 100%;
	display: block;
	text-align: center
}
}
@media(max-width:767px) {
.mobTrait {
	line-height: 94px;
	font-size: 22px;
	border-top: 1px solid rgba(0,61,49,.3)
}
#menu .mobTrait {
	border: 0;
	position: relative
}
#menu .mobTrait::before {
	content: "";
	width: 100vw;
	height: 1px;
	background: rgba(255,255,255,.3);
	position: absolute;
	top: 0;
left:calc(-1*var(--leftMargin))
}
}
.ball {
	position: fixed;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	z-index: 9;
	pointer-events: none;
	opacity: 0;
	visibility: hidden
}
.ball div {
	border-radius: 100%;
	border: 10px solid #f0ff3d;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .4s cubic-bezier(.5, 0, 0, 1)
}
.ball div.gros {
	-webkit-transform: scale(1.5, 1.5);
	transform: scale(1.5, 1.5);
	border: 1px solid #f0ff3d
}
@media(pointer:coarse) {
.ball {
	display: none
}
}
#fondPopIn {
	background: rgba(0,23,19,.3);
	visibility: hidden;
	z-index: 9;
	cursor: pointer
}
#popIn {
	bottom: var(--leftMargin);
	left: var(--leftMargin);
	background: #fff;
	width: 564px;
	z-index: 10;
	border-radius: 20px;
	padding: 45px;
	overflow: hidden;
	-webkit-transform: translateY(150%) rotate(20deg);
	transform: translateY(150%) rotate(20deg)
}
#popIn h4 {
	font: 500 normal 34px/41px "Roobert";
	letter-spacing: .001em
}
#popIn p {
	font: 300 normal 22px/normal "Orbikular";
	letter-spacing: .001em;
	padding: 70px 0 0
}
#popIn p span {
	margin: 0 12px 0 0
}
#popIn .social {
	padding: 27px 0 0
}
#popIn .social a {
	margin: 0 38px 0 0
}
#popIn button {
	top: 24px;
	right: 24px
}
#popIn svg {
	top: -398px;
	right: -398px;
	z-index: -1
}
#popIn svg .circle1 {
	-webkit-transform: translateY(-15%);
	transform: translateY(-15%)
}
#popIn svg .circle2 {
	-webkit-transform: translateY(-30%);
	transform: translateY(-30%)
}
#popIn svg .circle3 {
	-webkit-transform: translateY(-45%);
	transform: translateY(-45%)
}
#menu {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	background: #002921;
	z-index: 5;
	color: #f7f7f7
}
#menu.off {
	display: none
}
#menu .innerMenu2 {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%)
}
#menu .toFermer {
	font: 500 normal clamp(13px, 1.25vw, 24px)/normal "Roobert";
	top: calc(var(--gutter) - 2px);
	z-index: 2;
	height: 35px;
	text-transform: uppercase;
	right: var(--leftMargin);
	color: #f7f7f7
}
#menu .toFermer:hover {
	color: #f0ff3d
}
#menu ul {
	list-style-type: none;
	width: 25vw;
	min-width: 400px
}
#menu ul li {
	overflow: hidden;
	position: relative;
	height: clamp(85px, 7.6388888889vw, 146.6666666667px);
	z-index: 1
}
#menu ul li.devant {
	z-index: 2
}
#menu .innerMenu {
	width: 100%;
	padding: 0 230px 0 148px
}
@media(max-width:1024px) {
#menu .innerMenu {
	padding: 0;
	width: var(--wrapper);
	margin: 0 auto
}
}
#menu .gauche {
	line-height: 2.2;
	padding: 0 0 1.8vw
}
#menu .gauche a {
	text-decoration: none;
	color: inherit
}
#menu .social {
	padding: 40px 0 0
}
#menu .social img {
	width: 13.3px;
	height: auto
}
#menu .social a {
	margin: 0 25px 0 0;
	-webkit-filter: grayscale(1) contrast(200%) invert(1);
	filter: grayscale(1) contrast(200%) invert(1)
}
#menu .social a:last-child img {
	width: 7px;
	height: auto
}
#menu .droite button {
	font: 400 normal clamp(80px, 6.9444444444vw, 133.3333333333px)/1.1 "Roobert";
	white-space: nowrap;
	color: #f7f7f7;
	width: 100%;
	text-align: left;
	padding: 0 0 10px
}
#menu .droite button span {
	display: inline-block
}
#menu .droite button .mot1, #menu .droite button .mot2 {
	-webkit-transform: translateY(-20px);
	transform: translateY(-20px)
}
#menu .droite button .mot2 {
	font: 400 italic clamp(80px, 6.9444444444vw, 133.3333333333px)/1.1 "Orbikular";
	color: #f0ff3d;
top:clamp(8px, .6944444444vw, 13.3333333333px);
	left: 0
}
#menu .droite button .mot2 span {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	visibility: hidden
}
@media(max-width:767px) {
#menu {
	overflow: scroll
}
#menu .innerMenu {
	padding: 108px 0 0
}
#menu .gauche, #menu .droite {
	width: 100%
}
#menu .gauche {
	order: 2;
	text-align: center;
	margin: 50px 0 0;
	width: 100%;
	padding: 0
}
#menu .gauche>a {
	display: block
}
#menu .gauche br {
	display: none
}
#menu .social {
	margin: 0 auto;
	justify-content: center
}
#menu .social img {
	width: 20px
}
#menu .social a {
	margin: 0 10px
}
#menu .social a:last-child img {
	width: 10px;
	height: auto
}
#menu ul {
	width: 100%;
	min-width: auto
}
#menu ul li {
	height: 58px
}
#menu .toFermer {
	font-size: 14px;
	top: 18px
}
#menu .droite {
	margin: 0
}
#menu .droite button {
	font-size: 50px;
	padding: 20px 0 0
}
#menu .droite button .mot2 {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px)
}
#menu .droite button .mot2 {
	font-size: 50px
}
#menu .social {
	padding: 0
}
}
.single {
	background: #f7f7f7;
	color: #002921;
	height: 100vh
}
.single.off {
	display: none
}
.single .content {
	padding: var(--leftMargin) 0;
	height: 100%
}
.single .content>div {
	border-radius: 40px;
	width: 100%;
	background: #dae5e3;
	height: 100%
}
.single .titre {
	color: #002921;
	font: 300 normal 30px/36px "Orbikular";
	position: absolute;
	top: 62px;
	left: 100px
}
.single .close {
	right: 100px;
	top: 50px;
	width: 64px;
	height: 64px;
	border-radius: 100%;
	background: #f0ff3d;
	z-index: 2;
	justify-content: center
}
.single .flexGD {
	height: 100%
}
.single .gauche {
	width: var(--cg5);
	height: 100%;
	overflow: hidden
}
.single .droite {
	height: 100%;
	justify-content: center
}
.single .fact h3 {
	font: 400 normal 320px/1.031 "Roobert";
	font: 400 normal clamp(170px, 22.22vw, 426px)/1.031 "Roobert";
	letter-spacing: -.001em;
	display: inline;
	width: 100%
}
.single .fact .plus {
	margin: 0 0 0 -22px
}
.single .fact .unite {
	font: 400 normal 28px/normal "Roobert"
}
.single .fact .unite.apps {
	left: 75px
}
.single .fact .unite.sites {
	left: 558px
}
.single .bas {
	padding: 40px 0 0
}
.single .paras span {
	width: var(--col-3)
}
.single .paras span+span {
	margin: 0 0 0 var(--gutter)
}
.single .auteur {
	padding: 55px 0 0
}
.single .auteur::before {
	content: "";
	width: 100px;
	height: 1px;
	background: rgba(247,247,247,.15);
	position: absolute;
	top: 0;
	left: 0
}
.single .auteur span {
	text-transform: uppercase
}
.single .auteur p {
	text-indent: 30px
}
.single .auteur p::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #f0ff3d;
	position: absolute;
	left: 0%;
	top: 5px
}
.single .auteur p span:last-child {
	margin: 0 0 0 30px
}
.single .marquee {
	font: 300 italic 100px/80px "Orbikular";
	white-space: nowrap;
	position: absolute;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	top: 100%;
	left: 50%;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}
@media(max-width:767px) {
.single {
	height: auto
}
.single .content {
	padding: 0;
	width: 100%
}
.single .content>div {
	border-radius: 0
}
.single .gauche {
	display: none
}
.single .droite {
	width: var(--wrapper);
	margin: 0 auto;
	display: block;
	padding: 150px 0 100px
}
.single .fact .plus {
	margin: 0
}
.single .fact h3 {
	font-size: 100px
}
.single .paras {
	display: flex;
	justify-content: space-between
}
.single .paras span {
	width: calc(var(--col-6) - 10px)
}
.single .auteur p::before {
	top: 3px
}
}
.h1Bis .l1,.h1Bis .l3{
	font-weight: 400;
}