a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline} /* or : #D3A35A */ /* bleu : #89E5D3 */ :root {--darker-gold: #D3A35A;--medium-gold: #e0c69d} /* GENERAL */ html {font-family: 'Poppins';text-size-adjust: 100%;font-size: 10px;box-sizing: border-box} body {color: #202020;padding: 0;height: 100%} .bg-black-full {background: #101112} .wrapper {padding: 0 40px;margin: 0 auto;max-width: 1200px} .grecaptcha-badge {display: none !important} p, .value {color:white;font-size: 1.5rem;font-weight: 200} body.article .contenu strong {font-weight: 400} strong {font-weight: 700} .cky-btn-revisit-wrapper.cky-revisit-bottom-left {display: none} a {text-decoration: none} .hexagon {margin: calc(50vh - 100px) auto;width: 30px;height: 30px; position: relative;transform: rotate(52deg)} .hexagon:before {content: "";width: 100%;height: 100%;margin: auto;display: block;position: absolute; top: 0;bottom: 0; left: 0;right: 0;background-color: #fff;background-image: linear-gradient(-30deg, #000, #000 18.3%, transparent 18.3%, transparent 81.7%, #000 81.7%, #000), linear-gradient(30deg, #000, #000 18.3%, transparent 18.3%, transparent 81.7%, #000 81.7%, #000), linear-gradient(to right, #000, #000 6%, transparent 6%, transparent 94%, #000 94%, #000);background-size: 100% 100%} div.grid.cta {display: flex} div.grid.cta > a {margin: auto!important} .grid.fadein {opacity: 0;transform: translateY(30px);transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-delay: 0.35s} .grid.fadein.animate {opacity: 1;transform: translateY(0)} /* MAIN + GRID */ main {min-height: 100vh;overflow: hidden;position: relative} section .grid:first-child {padding-bottom: 0} .grid {display: grid;padding:10rem 10rem 0;grid-template-columns: repeat(12, minmax(4rem, 1fr)); z-index: 1;position: relative;row-gap: 1rem;max-width: 1600px;margin: 0 auto} .cta-contact, .punch, .baseline {grid-column: 1 / 7} .picture {grid-area: 1 / 7 / 6 / 13} /* WIDGET FLOTTANT */ /*back to top*/ .button, .whatsapp {display: inline-block;text-align: center; position: fixed; bottom: 13rem;right: 7rem;transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0; visibility: hidden;z-index: 1000} .button svg, .whatsapp svg {position: absolute;rotate:105deg;z-index: 1} .button i, .whatsapp i {position: absolute;z-index: 2;left:15px;top: -2px} .button i::before, .whatsapp i::before {font-size: 1.75em;line-height: 55px;color: #fff} .button:hover, .whatsapp:hover {cursor: pointer} .button.show {opacity: 1;visibility: visible} .whatsapp {opacity: 1;visibility: visible; bottom: 7rem} .whatsapp i::before {font-size: 2.15rem;padding-left: .1rem} /*whats app*/ span.ButtonBase__Overlay-sc-c65ab2ce-4 {padding: 6px!important} span.ButtonBase__Overlay-sc-c65ab2ce-4 .jyLjuf svg {width: 26px;height: 26px} .FloatingWindow__Container-sc-ef30a58d-0 > a::before {content: ''} .FloatingWindow__Container-sc-ef30a58d-0 > a svg {opacity: 0} .fJiePE {margin-bottom: 0!important} a[href*="elfsight.com"] {display: none !important;visibility: hidden !important;opacity: 0 !important} /* NAVIGATION */ nav {display: flex;flex-direction: column;position: fixed;top: 0;left: 0;right: 0;z-index: 1999} nav > .etranger {display: none} nav.ilemaurice > .etranger {display: flex;justify-content: center;align-items: center; text-align:center;color: black;z-index: 2000;padding: 10px 0;background: #D3A35A;font-size: 1.3rem;font-family: 'Work Sans'} nav.ilemaurice > .etranger a {display: flex;align-items: center;color: black} nav.ilemaurice > .etranger img {max-width: 100px;vertical-align: middle;padding: 0 5px} nav.ilemaurice > .menu {padding: 5rem 10rem 1rem} nav > .menu {display: flex;justify-content: space-between;align-items:center;position: fixed;top: 0;left: 0;right: 0;z-index: 1999;box-shadow: rgb(0 0 0 / 20%) 0px 0px 5px 0px;background: transparent;max-width: 100vw;padding: 1rem 10rem;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);margin: auto} /*logo*/ a#logo img {width: 80px;transition: transform .2s ease;} a#logo:hover img {transform: translateX(0%) scale(1.1) rotate(-25deg)} /*items du menu*/ nav input, nav label {display: none} nav ul {display: flex;list-style-type: none;align-items: center} li.general a {color: white;text-decoration: none;margin: 0 20px;font-size: 1.5rem;font-family: 'Work Sans';text-transform: uppercase;position: relative} li.general a:hover:before {content: '';background: #D3A35A;opacity:0.5;width: 65%;height: 7px;position: absolute;z-index: -1;bottom: -1px;left: 42px;left: 0!important;width: 90%!important} li.contact a, .formulaire button, div.grid.cta > a {font-family: 'Work Sans';position: relative;overflow: hidden;margin: 0 15px;display: inline-block;outline: none;color: #fff;text-decoration: none;text-transform: uppercase;font-size: 1.5em;font-weight: 500;border-radius: 30px;min-width: 200px;text-align: center} li.contact a {margin-right: 0} li.contact a:before, div.grid.cta > a::before {position: absolute;top: 0;left: 0;z-index: -1;padding: 10px 0;width: 100%;height: 100%;background: #fff;color: #D3A35A;content: attr(data-hover);-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;-webkit-transform: translateX(-25%)} li.contact a span, div.grid.cta > a span {display: block;padding: 10px 25px;background: #D3A35A; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s;transition: transform 0.3s} li.contact a:hover:before, div.grid.cta > a:hover:before {-webkit-transform: translateX(0%);-moz-transform: translateX(0%);transform: translateX(0%)} li.contact a:hover span, div.grid.cta > a:hover span {-webkit-transform: translateX(100%);-moz-transform: translateX(100%);transform: translateX(100%)} /* HEADER */ /*bg*/ #header {min-height: 700px;display: grid;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;overflow: hidden;position: relative;z-index: 2} #header .bg {position: absolute;inset: 0px;z-index: 0;overflow: hidden;min-width: 100vw;height: 700px;background-image: url("/photos/bg-hp-remibailly.jpeg");background-repeat: no-repeat;background-size: cover;background-position: center center} main.googleads #header .bg {background-image: url("/photos/bg-remi-bailly-google-ads.jpg")} #header .bg.bordeaux {background-image: url("/photos/bordeaux/remi-bailly-seo-bordeaux.jpg")} #header .bg.marseille {background-image: url("/photos/marseille/remi-bailly-seo-marseille.jpg")} #header .bg.lyon {background-image: url("/photos/lyon/remi-bailly-seo-lyon.jpg")} #header .bg.toulouse {background-image: url("/photos/toulouse/remi-bailly-seo-toulouse.jpg")} #header .bg.paris {background-image: url("/photos/paris/remi-bailly-seo-paris.jpg")} #header .bg.Nice {background-image: url("/photos/nice/remi-bailly-seo-nice.jpg")} #header .bg.Nantes {background-image: url("/photos/nantes/remi-bailly-seo-nantes.jpg")} #header .bg.Strasbourg {background-image: url("/photos/strasbourg/remi-bailly-seo-strasbourg.jpg")} #header .bg.Montpellier {background-image: url("/photos/montpellier/remi-bailly-seo-montpellier.jpg")} #header .bg.Lille {background-image: url("/photos/lille/remi-bailly-seo-lille.jpg")} #header .opacite-noir {position: absolute;inset: 0px;z-index: 1;overflow: hidden;min-width: 100vw;height: 700px;background: rgba(0,0,0,0.6)} #header img {max-width: 315px; -webkit-filter: drop-shadow(5px 5px 10px rgba(255,255,255,0.3) );filter: drop-shadow(5px 5px 10px rgba(255,255,255,0.3))} /*grid*/ .cta-contact {grid-column: 1 / 4;min-width: 310px} em.gratuit {grid-column: 1 / 4;color: white;font-style: italic;text-align: center;font-size: 1.2rem;padding-top: 1rem;display: block} .punch, .baseline {grid-column: 1 / 8} /*gauche*/ .punch {margin-top: 6rem} .cta-contact, .baseline {margin-top: 3rem} .cta-contact a {text-decoration:none;font-size: 1.5rem;display:flex;justify-content: center; align-items: center;min-height: 2rem;line-height: 2rem;box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 20px;color: rgb(255, 255, 255);border-radius: 1rem;margin: 0;padding: 0.8rem 1.2rem;gap: 0.8rem;background: linear-gradient(90deg, rgba(211,163,90,0.85) 0%, rgba(137,229,211,0.85) 100%);background-size: 400% 400%;animation: gradient 6s ease infinite;} @keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} .cta-contact > a:hover {transform: translateX(1rem);transition: transform 0.3s ease 0s;cursor: pointer} p.tel {width: 90%;padding-left: 10px;font-weight: 200;text-align: center} p.tel.mobile {display: none} .punch h2 {font-size: 6rem;color: #89E5D3;font-family: 'Work Sans';font-weight: 600} .fade-in {-webkit-animation-name: fadeInOpacity;animation-name: fadeInOpacity;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;-webkit-animation-duration: 3s;animation-duration: 3s} @-webkit-keyframes fadeInOpacity {0% {opacity: 0} 100% {opacity: 1}} @keyframes fadeInOpacity {0% {opacity: 0} 100% {opacity: 1}} .baseline h1, .baseline span, .baseline p {font-size: 2rem;color:white;max-width: 700px;font-weight: 200;display: block} /*droite*/ a.link-qaseo:hover .qaseo {transform: translate(-50%, -70%);transition: transform 0.3s ease 0s} .picture {position: absolute;bottom: -11rem;right: 0;z-index: 1} .picture::before {content: '';background-image: url("/photos/fusee-or.png");display: block;height: 100px;width:100px;background-size: cover;position: absolute;animation: float 3s ease-in-out infinite;z-index: 99;left: calc(50% - 50px);top: 10rem} @keyframes float {0% {transform: translateY(0px);}50% {transform: translateY(-25px);}100% {transform: translateY(0px)}} .hexa-q {width: 60.75px;height: 95px;background-image: linear-gradient(90deg, #a88147, #D3A35A);border-radius: 15px;transition: transform 400ms ease;transform: rotate(-30deg);} .hexa-q:before, .hexa-q:after {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: inherit;height: inherit;background-image: inherit;border-radius: inherit} .hexa-q:before {transform: rotate(60deg)} .hexa-q:after {transform: rotate(-60deg)} .qaseo {position: absolute;top: 0; left: 16rem;transform: translate(-50%, -50%); z-index: 2} .qaseo p {position: absolute;z-index: 4;width: 93px;font-size: 12px;text-align: center;top: 3rem;left: -17px} .qaseo p::before {content: '';display: block;width:80px;height: 15px; background-image:url("/photos/logo-seo-camp.png");background-size: contain;background-repeat: no-repeat;margin: 0 auto .5rem} /* PRESENTATION + FRISE */ #presentation {background: black;color: white;margin-top:-0.5rem;font-size: 2rem;position: relative;z-index: 2} /*zero*/ #presentation .zero {padding: 0} #presentation .zero ul, #services ul.infinite, #references ul.infinite {list-style-type: none;padding-left: 0;display: flex;grid-column: 1/13;background: #89E5D3;padding: 1rem;transform: skewY(-1deg);margin-top: -3rem;animation: scroll-left 20s linear infinite;white-space: nowrap;width: max-content;animation: scroll-infinite 40s linear infinite} #presentation .zero li, #services ul.infinite li, #references ul.infinite li {font-size: 1.5rem;margin: 0 2rem;color: black;flex-shrink: 0;text-transform: uppercase} @keyframes scroll-infinite {0% {transform: skewY(-1deg) translateX(0%)}100% {transform: skewY(-1deg) translateX(-50%)}} /*questions*/ #presentation .questions {padding-top: 5rem} #presentation .questions ul {flex-direction: column;margin-top: 0;align-items: center} #presentation .questions ul li i {margin-right: 1rem} #presentation .questions ul li i.fa-thumbs-up {color: #89E5D3} #presentation .questions ul li i.fa-thumbs-down {color: red} /*cta*/ #presentation .cta-contact, #references .cta-contact {display: grid;padding-top: 10rem;position: relative;margin: 0 auto;width: fit-content;min-width: auto} /*prenom-nom*/ #presentation .prenom-nom {padding-top: 5rem} #presentation .prenom-nom svg {grid-column: 1/13;margin: 0 auto;transform: rotate(45deg)} #presentation h3 {grid-column: 1 / 13; font-size: 5rem;font-family: "Work Sans";font-weight: 500;text-align: center;margin-top: 1rem} #presentation h3 em.age {display: block;color: #89E5D3} #presentation h3 em.ville {font-size: 3rem} /*un*/ #presentation .un .gauche {grid-area: 1 / 2 / 1 / 6} #presentation .un .droite {grid-area: 1 / 7 / 6 / 13} #presentation .un .gauche {display: flex;flex-direction: column;align-items: center;position: relative} #presentation .un .gauche:before {content: '';width: 300px;height: 460px;border: 2px solid #89E5D3;display: block;position: absolute;bottom: 5rem;left: 0rem;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='460' preserveAspectRatio='none' viewBox='0 0 300 460'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1101%26quot%3b)' fill='none'%3e%3crect width='300' height='460' x='0' y='0' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/rect%3e%3cuse xlink:href='%23SvgjsPath1102' x='30' y='30' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1103' x='30' y='90' stroke='rgba(137%2c 229%2c 211%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='30' y='150' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='30' y='210' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='30' y='270' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='30' y='330' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='30' y='390' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='30' y='450' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='90' y='30' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1106' x='90' y='90' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='90' y='150' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='90' y='210' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1103' x='90' y='270' stroke='rgba(137%2c 229%2c 211%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='90' y='330' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1106' x='90' y='390' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='90' y='450' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='150' y='30' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1107' x='150' y='90' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='150' y='150' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='150' y='210' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='150' y='270' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='150' y='330' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='150' y='390' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='150' y='450' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='210' y='30' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='210' y='90' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1102' x='210' y='150' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='210' y='210' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='210' y='270' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='210' y='330' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='210' y='390' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1104' x='210' y='450' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='270' y='30' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='270' y='90' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1103' x='270' y='150' stroke='rgba(137%2c 229%2c 211%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='270' y='210' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1107' x='270' y='270' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1102' x='270' y='330' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1105' x='270' y='390' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1106' x='270' y='450' stroke='rgba(137%2c 229%2c 211%2c 1)'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1101'%3e%3crect width='300' height='460' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1107'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1102'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1105'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1106'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1104'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1103'%3e%3c/path%3e%3c/defs%3e%3c/svg%3e")} main.googleads #presentation .un .gauche:before {bottom: 6rem} /*2eme bloc*/ #presentation .deux .gauche {grid-area: 1 / 2 / 1 / 8;margin-top: 5rem;display: flex;flex-direction: column} #presentation .deux .droite {grid-area: 1 / 9 / 6 / 13;position: relative} #presentation .deux .droite:before {content: '';width: 300px;height: 460px;border: 2px solid #89E5D3;display: block;position: absolute;top: -5rem;right: 5rem;z-index: -1} #presentation .deux h4, #presentation .deux p {text-align: right} /*3eme bloc timeline*/ #presentation .trois {padding-left: 0;padding-right: 0} #presentation .trois .timeline {grid-column:1 / 13} #presentation .trois .intro {grid-column:2 / 12;padding-left: 8rem;padding-right: 8rem;margin-top: 5rem} .timeline {display: flex} .timeline:hover .tl-item {width:23.3333%} .tl-item {transform:translate3d(0,0,0);position:relative;width:25%;height:100vh;min-height:600px;color:#fff;overflow:hidden;transition:width .5s ease} .tl-item:after, .tl-item:before {transform:translate3d(0,0,0);content:"";position:absolute;left:0;top:0;width:100%;height:100%} .tl-item:after {background:rgba(0,0,0,.65);opacity:1;transition:opacity .5s ease} .tl-item:before {background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#89E5D3 75%);z-index:1;opacity:0;transform:translate3d(0,0,0) translateY(50%);transition:opacity .5s ease,transform .5s ease} .tl-item:hover {width:45%!important} .tl-item:hover:after {opacity:0} .tl-item:hover:before {opacity:1;transform:translate3d(0,0,0) translateY(0);transition:opacity 1s ease,transform 1s ease .25s} .tl-item:hover .tl-content {opacity:1;transform:translateY(0);transition:all .75s ease .5s} .tl-item:hover .tl-bg {filter:grayscale(0)} .tl-content{transform:translate3d(0,0,0) translateY(25px);position:relative;z-index:1;text-align:center;margin:0 1.618em;top:55%;opacity:0} #presentation .tl-content h4 {text-transform:uppercase;color:white;font-size: 2rem;font-weight: 500} .tl-content p, .tl-content a {color: black} .tl-content a {text-decoration: underline} .tl-year{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:1} .tl-bg{transform:translate3d(0,0,0);position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:center center;transition:filter .5s ease;filter:grayscale(100%)} .tl-year p {font-size: 3rem;font-family: 'Work Sans';color: #89E5D3;font-weight: 500} .tl-item:hover p {color: black} .foret {background-image: url('/photos/foret.jpg')} .montagne {background-image: url('/photos/montagne.jpg')} .cap-town {background-image: url('/photos/cap-town.jpg')} .maurice {background-image: url('/photos/maurice.jpg')} .chemin {background-image: url('/photos/chemin.jpg')} /**/ #presentation img {max-width: 300px;z-index: 1} #presentation h4 {margin-bottom: 2rem;color: #89E5D3;font-family: 'Work Sans';font-weight: 500;font-size: 3rem} #presentation p.first {margin-bottom: 4rem} /* SERVICES OUTILS */ /*effet gradient gold*/ .gradient-container{z-index:0;filter:blur(170px);justify-content:space-between;max-width:100%;display:flex;position:absolute;inset:0 0% auto;overflow:hidden;top: 10rem;opacity: .50} .gold-gradient,.gold-bis-gradient{border-radius:50%;width:35vw;height:70vw;position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform} .gold-gradient{background-color:var(--darker-gold)}.gold-bis-gradient{background-color:var(--medium-gold)} /*services*/ #services {background: #101112;position: relative} #services .un svg {grid-area: 1 / 1 / 2 / 2;margin: 2rem auto 0;transform: rotate(45deg)} #services .un h3 {grid-area: 1 / 2 / 1 / 9;font-size: 5rem;font-family: "Work Sans";font-weight: 500;margin-bottom: 15rem;color: white} #services .un h3 em {color: #D3A35A} #services .un .flex {grid-area: 3 / 2 / 3 / 13;display: flex;flex-wrap: wrap;justify-content: space-between} #services .un .flex > div {width: 30rem;margin: 1rem} #services .apr > div {width: 35rem;margin: 0 3rem 5rem} #services .apr.googleads > div {width: 45rem} #services .apr h4 {margin-bottom: 2rem;color: #D3A35A;font-family: 'Work Sans';font-weight: bold;font-size: 3rem;position: relative;text-align: center} #services .apr h4:before {position: absolute; z-index: 0;font-size: 13rem;opacity: .5;background: -webkit-linear-gradient(#D3A35A, #000);-webkit-background-clip: text;-webkit-text-fill-color: transparent;width: 100%;text-align: center;left: 0;bottom: 0} #services .audit h4:before {content: '1'} #services .precos h4:before {content: '2'} #services .reporting h4:before {content: '3'} #services ul.infinite {background: none} #services ul.infinite li img {width: 650px} /*slide search console*/ #services ul.infinite, #references ul.infinite {transform: skewY(0deg);animation: scroll-left 20s linear infinite;animation: scroll-infinite-normal 40s linear infinite} @keyframes scroll-infinite-normal { 0% {transform: skewY(0deg) translateX(0%)} 100% {transform: skewY(0deg) translateX(-50%)} } /*outils*/ #services .deux {padding: 0 5rem 5rem} #services .deux h4.titre {margin: 5rem 0;color: #D3A35A;font-family: 'Work Sans';font-weight: bold;font-size: 3rem;text-align: right;padding-right: 5rem;grid-column: 1/13} #services .deux h4.titre.gauche {text-align: left} #services .deux img {margin-bottom: 3rem;display: block;width: 200px;margin: auto} #services .deux h5 {margin-bottom: 3rem;color: white;font-family: 'Work Sans';font-weight: bold;font-size: 2rem;text-align: center} #services .deux .flex {display: flex;flex-wrap: wrap;justify-content: center;grid-column: 1/13} #services .outil > div {width: 25rem;margin: 0 3rem 0} #services .outil {grid-column: 1/13} /*FACON*/ #facon {background-color: black;padding: 5rem 0 0} .comparison-wrapper{position:relative;background:linear-gradient(135deg,rgba(211,163,90,0.05) 0%,rgba(137,229,211,0.05) 100%);border-radius:20px;padding:3rem 0;overflow:hidden;max-width: 900px;margin: 10rem auto 5rem} .comparison-wrapper::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(180deg,transparent 0%,#D3A35A 20%,#89E5D3 50%,#D3A35A 80%,transparent 100%);animation:pulse 3s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}} @keyframes rotate{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}} .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 40px 0} .column-header{padding:20px;text-align:center;font-family:'Work Sans';font-size:3rem;font-weight:700;margin-bottom:3rem;text-transform: uppercase} .column-header.agency{color:#666;opacity:.7} .column-header.you{background:#D3A35A ;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .comparison-row{display:contents} .comparison-item{padding:25px 30px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;display:flex;align-items:center;gap:15px} .comparison-item::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.02);opacity:0;transition:opacity .4s ease} .comparison-row:hover .comparison-item::before{opacity:1} .comparison-item.agency{justify-content:flex-end;text-align:right} .comparison-item.you{justify-content:flex-start;text-align:left} .icon{flex-shrink:0;width:35px;height:35px;display:flex;align-items:center;justify-content:center;transition:all .4s ease} .comparison-item.agency .icon{order:2;opacity:.3} .comparison-item.you .icon{order:1} .comparison-row:hover .comparison-item.you .icon{transform:scale(1.2) rotate(5deg);filter:drop-shadow(0 0 10px #D3A35A)} .comparison-row:hover .comparison-item.agency .icon{transform:scale(.9)} .hexagon{width:23px;height:26px} .cross{font-size:24px;color:#666;font-weight:300} .text-content{flex:1} .comparison-item.agency .text-content{order:1} .comparison-item.you .text-content{order:2} .label{font-size:2rem;text-transform:uppercase;font-weight:bold;margin-bottom:1rem;opacity:.6;font-family: 'Work Sans'} .comparison-item.agency .label{color:#666} .comparison-item.you .label{color:#89E5D3} .value{transition:all .4s ease} .comparison-item.agency .value{color:#888} .comparison-item.you .value{color:#fff} .comparison-row:hover .comparison-item.you .value{color:#D3A35A;transform:translateX(5px)} .comparison-row:hover .comparison-item.agency .value{opacity:.5;transform:translateX(-5px)} /*slider photos*/ .carousel-container, .carousel-track {max-height: 420px} .carousel-container{width:100%;overflow:hidden;position:relative;margin-top: 1rem} .carousel-track.left {display:flex;gap:1rem;animation:scrollLeft 30s linear infinite;will-change:transform} .carousel-track.right {display:flex;gap:1rem;animation:scrollRight 30s linear infinite;will-change:transform} .carousel-item{flex-shrink:0;height:420px;border-radius:2rem;overflow:hidden} .carousel-item img{height:100%;width:auto;object-fit:cover;display:block} .carousel-stat {padding:3rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem;width:auto;min-width:240px;max-width:500px;border-radius: 2rem} .carousel-stat.blue {background-color:#89E5D3} .carousel-stat.gold {background-color:#D3A35A} .carousel-stat h2{font-size:6rem;font-weight:700;line-height:1;color:#000;font-family: 'Work Sans'} .carousel-stat p{font-size:1.5rem;color:#000} @keyframes scrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes scrollRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}} /* PERSONNALITE */ #personnalite {background-image: url("/photos/fond-hexagon-noir-gris.jpg");background-size: contain;position: relative} #personnalite:before, #personnalite:after {background: linear-gradient(to right,black 0%,rgba(0,0,0,0) 100%);content: "";height: 100%;position: absolute;width: 290px} #personnalite:after {right: 0;top: 0;-webkit-transform: rotateZ(180deg);-ms-transform: rotateZ(180deg);transform: rotateZ(180deg)} .bg-black-opacite:before, .bg-black-opacite:after {background: linear-gradient(to bottom,black 0%,rgba(0,0,0,0) 100%);content: "";height: 290px;position: absolute;width: 100%} .bg-black-opacite:after {bottom: 0;-webkit-transform: rotateZ(180deg);-ms-transform: rotateZ(180deg);transform: rotateZ(180deg)} #personnalite > svg {position: absolute} #personnalite > .shadow-rond-noir {position: absolute;z-index: 2;left: 0;right: 0;top: 0;bottom: 0;box-shadow: inset 0px 0px 50px 180px #000000;} #personnalite > .grid {padding-top: 15rem} #personnalite .un svg, #facon .grid svg {grid-area: 1 / 1 / 2 / 2;margin: 2rem auto 0;transform: rotate(45deg)} #personnalite .un h3, #facon h3.titre {grid-area: 1 / 2 / 1 / 11;font-size: 5rem;font-family: "Work Sans";font-weight: 500;color: white} #personnalite .grid.baba {grid-column: 1 / 13;grid-template-columns: 1fr 2fr 1fr;column-gap:2rem;padding:10rem 0 5rem} #personnalite .logo {grid-area: span 2 / 2 / auto / 3;place-self: center;z-index: 1} #personnalite .logo img {max-width: 333px} #personnalite .dji {grid-template-columns: 1fr;grid-template-rows: repeat(3, auto);text-align: center;justify-self:center;width: 40rem;margin-bottom: 5rem} #personnalite .dji.un, #personnalite .dji.quatre, #personnalite .dji.six {margin-bottom: 0} #personnalite .dji.un {grid-area: 1 / 2 / 2 / 3} #personnalite .dji.deux {grid-area: 2 / 1 / 3 / 2} #personnalite .dji.cinq {grid-area: 4 / 2 / 5 / 3} #personnalite .dji img {max-width: 60px} #personnalite .dji h4 {margin:1rem 0 2rem 0;color: #D3A35A;font-family: 'Work Sans';font-weight: bold;font-size: 3rem} #personnalite .dji em {font-style: italic} /* references */ #references {background: #101112;padding-bottom: 10rem} #references .un svg, #avenir .grid svg {grid-area: 1 / 1 / 2 / 2;margin: 2rem auto 0;transform: rotate(45deg)} #references .un h3 {grid-area: 1 / 2 / 1 / 11!important} #references .grid.testimonial {grid-column: 1 / 12;grid-template-columns: 1fr 1fr 1fr 1fr;column-gap:2rem;padding:10rem 0 0;position: relative} #references .slick-slide {height: 300px;padding-bottom: 2rem;margin: 0 20px;position: relative; background-size: cover;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='460' preserveAspectRatio='none' viewBox='0 0 300 460'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1224%26quot%3b)' fill='none'%3e%3crect width='300' height='460' x='0' y='0' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/rect%3e%3cuse xlink:href='%23SvgjsPath1225' x='30' y='30' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1226' x='30' y='90' stroke='rgba(137%2c 229%2c 211%2c 0.5)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='30' y='150' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='30' y='210' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='30' y='270' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='30' y='330' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='30' y='390' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='30' y='450' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='90' y='30' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='90' y='90' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='90' y='150' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='90' y='210' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='90' y='270' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1225' x='90' y='330' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='90' y='390' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='90' y='450' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1225' x='150' y='30' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='150' y='90' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1226' x='150' y='150' stroke='rgba(137%2c 229%2c 211%2c 0.5)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1225' x='150' y='210' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='150' y='270' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='150' y='330' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='150' y='390' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='150' y='450' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='210' y='30' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='210' y='90' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='210' y='150' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='210' y='210' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='210' y='270' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1228' x='210' y='330' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='210' y='390' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1226' x='210' y='450' stroke='rgba(137%2c 229%2c 211%2c 0.5)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1229' x='270' y='30' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='270' y='90' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1225' x='270' y='150' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='270' y='210' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='270' y='270' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1227' x='270' y='330' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='270' y='390' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1230' x='270' y='450' stroke='rgba(137%2c 229%2c 211%2c 0.5)'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1224'%3e%3crect width='300' height='460' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1228'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1225'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1229'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1230'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1227'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1226'%3e%3c/path%3e%3c/defs%3e%3c/svg%3e")} #references .slick-slide p {text-align: center;padding:7rem 4rem 0rem;height: 180px;display: flex;justify-content: center;font-style: italic;color:black;font-size: 1.5rem} #references .slick-slide p:before {content: '\f10d';font-family: 'FontAwesome';position: absolute;font-size: 4rem;color: #89E5D3;top: 2rem;left: 3rem} #references .slick-slide h4 {color: black;font-family: "Work Sans";position: absolute;bottom:3rem;left: 0;right: 0;text-align: center;text-transform: uppercase;font-size: 1.75rem;z-index: 1} #references .slick-slide img {border-radius: 100%;position: absolute;border: 2px solid white;bottom: 7rem;left: calc(50% - 20px);z-index: 1;width: 40px} #references .slick-slide svg {height: auto!important;position: absolute;bottom: 0} #references button.slick-arrow {z-index: 3;font-size: 0;cursor: pointer;color: transparent;border: none;background: #89E5D3;position: absolute;top: 62%;display: block;width: 40px;height: 40px;padding: 0; -webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%)} #references button.slick-arrow:before {font-size: 20px;color: white} body.home .slick-prev:before {content: '<'} body.home .slick-next:before {content: '>'} #references button.slick-prev {left: 5rem} #references button.slick-next {right: 5rem} /*cta*/ #references .cta {padding-top: 4em} /*effet ombré*/ body.home .slick-list:hover {cursor: pointer} body.home .slick-list:before, body.home .slick-list:after {background: linear-gradient(to right,black 0%,rgba(0,0,0,0) 100%);content: "";height: 100%;position: absolute;width: 290px;z-index: 2} body.home .slick-list:after {right: 0;top: 0; -webkit-transform: rotateZ(180deg);-ms-transform: rotateZ(180deg);transform: rotateZ(180deg)} /*google review*/ .review-google {padding-top: 5rem} .review-google > a {grid-column: 1 / 13} .review-google .bloc-blanc {text-align: center;font-size: 1.25rem} .review-google .bloc-blanc i {color: #D3A35A} .review-google .bloc-blanc span {display: block;color: white;font-size:1.5rem} .review-google .bloc-blanc img {max-width: 115px;display: block;margin: 10px auto 0} #references .cta-contact {padding-top: 5rem} /*ecoles*/ #references .titre-ecoles svg, #villes .titre-villes svg, #avenir .grid svg {grid-area: 1 / 1 / 2 / 2;margin: 2rem auto 0;transform: rotate(45deg)} #references .titre-ecoles h3, #villes .titre-villes h3, #references .un h3, #facon h3.titre, #avenir .grid h3 {grid-area: 1 / 2 / 1 / 13;font-size: 5rem;font-family: "Work Sans";font-weight: 500;color: white} #references ul.infinite {background: transparent;margin-top: 0;margin-top: 5rem} #references ul.infinite img {height: 100px;display: block;margin: 0 0 2rem} /*FAQ*/ /*titre*/ #faq > .titre-faq {padding-top: 0} #faq .titre-faq svg, #blog .grid.titre svg, #references .titre-ecoles svg {grid-area: 1/ 12 / 2 / 13;margin: 2rem auto 0;transform: rotate(45deg)} #faq .titre-faq h3, #blog .grid.titre h3, #references .titre-ecoles h3 {grid-area: 1 / 1 / 1 / 12;font-size: 5rem;font-family: "Work Sans";font-weight: 500;color: white;text-align: right} /*faq*/ #faq .cd-faq {display: block;width: 900px;margin: 10em auto;overflow: hidden;padding-top: 0} .cd-faq-categories {position:absolute;top:0;left:0;width:250px;z-index:2} .cd-faq-categories.is-fixed {position: fixed} .cd-faq-categories .selected {background: rgba(137, 229, 211,1)} .cd-faq-categories a {font-size: 2rem;position:relative;display:block;overflow:hidden;height:52px;line-height:52px;padding-left:53px;background-color:rgba(137, 229, 211,0.5);color:#fff;white-space:nowrap;border-bottom:1px solid #555b61;text-overflow:ellipsis;-moz-transition: background 0.2s, padding 0.2s; -o-transition: background 0.2s, padding 0.2s; -webkit-transition: background 0.2s, padding 0.2s; transition: background 0.2s, padding 0.2s;font-family: 'Work Sans'} .cd-faq-categories a.brief::before {background: url("/photos/pictos/picto-brief.png");background-size: contain} .cd-faq-categories a.consulting::before {background: url("/photos/pictos/picto-consulting.png");background-size: contain} .cd-faq-categories a.tracking::before {background: url("/photos/pictos/picto-tracking.png");background-size: contain} .cd-faq-categories a.reporting::before {background: url("/photos/pictos/picto-reporting.png");background-size: contain} .cd-faq-categories a.budget::before {background: url("/photos/pictos/picto-budget.png");background-size: contain} .cd-faq-categories a::before {content: '';position: absolute;top: 15px;left: 15px;display: block;height: 23px;width: 23px} .cd-faq-trigger {position:relative;display:block;margin:1.6em 0 .4em;line-height:1.2} .cd-faq-content p {font-size: 1.5rem;color: white} .cd-faq-group {display: block;margin-bottom: 5rem} .cd-faq-group > li {margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.08);-moz-transition:box-shadow .2s;-o-transition:box-shadow .2s;-webkit-transition:box-shadow .2s;transition:box-shadow .2s} .cd-faq-group .cd-faq-title {margin: 2em 0 1em} .cd-faq-group:first-child .cd-faq-title {margin-top: 0} .cd-faq-items {position:static;height:auto;overflow:visible;-moz-transform:translateZ(0) translateX(0);-ms-transform:translateZ(0) translateX(0);-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0);padding:0;background:0 0} .cd-faq-group.selected {display: block} .cd-faq-group .cd-faq-title {background: transparent;margin: 1em 0} .cd-faq-group .cd-faq-title h2 {text-transform:uppercase;font-size:3rem;font-family: 'Work Sans';color: #89E5D3} .cd-faq-trigger {font-size: 1.55rem;margin: 0;padding: 15px 45px 15px 15px;color: white;font-family: 'Work Sans';font-weight: 500} .cd-faq-trigger::before, .cd-faq-trigger::after {content:'';position: absolute;right: 0;top: 50%; height: 2px;width: 13px;background: #89E5D3;-webkit-backface-visibility: hidden;backface-visibility: hidden; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transition-duration: 0.2s;-o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;transition-duration: 0.2s} .cd-faq-trigger::before {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);transform: rotate(45deg);right: 9px} .cd-faq-trigger::after {-moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);transform: rotate(-45deg)} .content-visible .cd-faq-trigger::before {-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg)} .content-visible .cd-faq-trigger::after { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);transform: rotate(45deg)} .cd-faq-content {padding: 0 24px 30px;display: none} .cd-faq-content p a {text-decoration: underline;color: white} /*VILLES*/ #villes {padding-bottom: 10rem} #villes .titre-villes {padding-top: 0} #villes ul, #presentation .questions ul {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;grid-area:2 / 1 / 2 / 13;margin-top: 5rem;padding: 0 2rem} #villes ul li, #presentation .questions ul li {background: rgba(255, 255, 255, 0.1);padding: 12px 20px;border-radius: 25px;font-weight: 500;font-size: 1rem;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);transition: transform 0.3s ease, background 0.3s ease;font-size: 1.5rem;color: white;text-align: center} #villes ul li a {color: white;display: block} #villes ul li:hover, #presentation .questions ul li:hover {transform: translateY(-2px);background: rgba(255, 255, 255, 0.2)} #villes ul li:hover {background: #89E5D3} #villes ul li::before {content: "✓";color:white;font-weight: bold;margin-right: 8px} /* 4 DATA + CONTACT FORM */ #contact .custom-bg {background: linear-gradient(180deg,#101112 50%,#ffffff 50%)} #contact .grid.onelife {padding: 0 10rem 2rem} #contact .wrapper_contact {border-radius: 30px; grid-area: 1 / 1 / 5 / 13; display: flex;justify-content: space-around;padding: 5rem;-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='600' preserveAspectRatio='none' viewBox='0 0 1440 600'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1269%26quot%3b)' fill='none'%3e%3crect width='1440' height='600' x='0' y='0' fill='url(%23SvgjsLinearGradient1270)'%3e%3c/rect%3e%3cpath d='M1440 0L730.53 0L1440 198.76z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M730.53 0L1440 198.76L1440 378.92999999999995L696.03 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M696.03 0L1440 378.92999999999995L1440 425.88999999999993L520.5799999999999 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M520.5799999999999 0L1440 425.88999999999993L1440 510.5999999999999L178.62999999999994 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 600L180.67 600L0 286.91z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 286.91L180.67 600L641.1999999999999 600L0 130.48000000000002z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 130.48000000000002L641.1999999999999 600L911.43 600L0 59.890000000000015z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 59.889999999999986L911.43 600L1135.71 600L0 21.26999999999999z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1269'%3e%3crect width='1440' height='600' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='100%25' y1='50%25' x2='0%25' y2='50%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1270'%3e%3cstop stop-color='rgba(211%2c 163%2c 90%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(168%2c 129%2c 71%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");background-size: cover} #contact .wrapper_contact > div {width: 50%;display:flex;justify-content: center;align-items: center;flex-direction: column} /*4 datas*/ .formulaire span.data {font-family: "Work Sans";color: white;font-size: 4rem;display: block;margin-bottom: 5rem} .formulaire form {width: 100%;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center} .quatre-data ul {list-style-type: none;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around} .quatre-data ul li {width: 45%;font-family: "Work Sans";text-align: center;font-size: 2rem;margin: 5rem 0;display: flex} .quatre-data ul img {width: 75px;height: 75px} .quatre-data ul div {margin-left: 2rem;text-align: left} .quatre-data ul li svg {transform: rotate(45deg);opacity: .5} .quatre-data ul li em {display: block; font-size: 5rem;font-family: 'Work Sans';text-align: left} /*contact form*/ .formulaire span.titre {font-family: "Work Sans";color: white;font-size: 4rem;display: block;margin-bottom: 2rem;text-align: center} form input, form textarea {border: none;background: transparent;color: white;font-family: 'Poppins';font-size: 1.5rem;width: 100%;padding: 1rem} textarea:focus, input:focus{outline: none} input:-internal-autofill-selected, input:-webkit-autofill {background-color: #D3A35A} form span {width: 35%;border-bottom: 1px solid white;margin: 2rem 0;padding: 0 0 0 30px;position: relative} form span.nom {width: 85%} form span:before {content: '';position: absolute;color: white;font-family: "FontAwesome";top: 7px;left: 0;font-size: 2rem} form span.nom:before {content: '\f007'} form span.prenom:before {content: '\f007'} form span.tel:before {content: '\f095'} form span.email:before {content: '\f0e0'} form span.message:before {content:'\f040'} form span.message {width: 85%;margin:2rem 0;border-bottom: 1px solid white;padding:0 0 0 30px} form span.rgpd {width: 85%;border-bottom: none;display: flex;margin-bottom: 5rem;padding-left: 0;justify-content: center} form span.rgpd > input {width: 20px} form span.rgpd label {display: flex;justify-content: center} form span.rgpd label input {width: 20px} form span.rgpd p a {color: white} form span.rgpd label:hover {cursor: pointer} form span.rgpd p a:hover {text-decoration: underline} form span.newsletter {opacity: 0;position: absolute;top: 0;left: 0;height: 0;width: 0;z-index: -1} form span.envoyer {width: 150px;border-bottom: 0;padding: 0;margin: 0} form span.envoyer:hover input {background: white;color: #D3A35A;cursor: pointer} form input.btn {border: 1px solid white} ::placeholder {color: white;font-size: 1.5rem;font-family: 'Poppins'} /* GOOGLE ADS */ main.googleads .picture::before {display: none} main.googleads #presentation .grid.un img {max-width: 375px;margin-top: 10rem} main.googleads #presentation .grid.deux {margin-bottom: 5rem} main.googleads #services .outil > div {width: 35rem;margin: 0 5rem 5rem} main.googleads #avenir {position: relative;height: 400px;display: flex;justify-content: center;align-items: center;flex-direction: column} main.googleads #avenir .bg {background: url("/photos/bg-avenir-googleads.jpg");height: 400px;background-repeat: no-repeat;width: 100%;position: absolute;background-size:cover} main.googleads #avenir .opacite-noir {position: absolute;background: rgba(0, 0, 0, 0.5);left: 0;top: 0;right: 0;bottom: 0} main.googleads #avenir p {max-width: 900px;margin: 5rem auto 5rem;z-index: 2;position: relative} /*BLOG*/ #blog {margin-bottom: 10rem} #blog .grid.titre svg {grid-area: 1/1/2/2} #blog .grid.titre h3 {color: black;text-align: left;grid-area: 1/2/1/13} .btn.view-all,.slider-main_button{transition:.3s;text-decoration:none} .blog-card,.blog-card_img-wrapper{position:relative;overflow:hidden} .blog_category-detail,.blog_read{font-family:Poppins,sans-serif;font-size:1.3rem} .blog-card h3,.slider-main_top-wrapper h2{font-family:'Work Sans',sans-serif;font-weight:600;color:#d3a35a;margin:0} .slider-main_top-wrapper{display:grid;margin-bottom:5rem} .slider-main_top-wrapper h2{font-size:4rem} .slider-main_button-wrapper{display:flex;align-items:center;gap:1rem;grid-area: 1/13/1/14;justify-self: end} .slider-main_button{width:5rem;height:5rem;border-radius:50%;background:#fff;border:2px solid #d3a35a;display:flex;align-items:center;justify-content:center;cursor:pointer} .slider-main_button:hover:not(.is-disabled){background:#d3a35a;transform:scale(1.1)} .slider-main_button.is-disabled{opacity:.3;cursor:not-allowed} .slider-main_button svg{width:3rem;height:3rem;color:#d3a35a;transition:color .3s;margin-top: 1rem!important} .slider-main_button:hover:not(.is-disabled) svg{color:#fff} .btn.view-all{padding:1.2rem 3rem;background:#d3a35a;color:#fff;border-radius:50px;font-family:Poppins,sans-serif;font-weight:400;font-size:1.4rem;display:inline-block} .btn.view-all:hover{background:#89e5d3;transform:translateY(-2px);box-shadow:0 5px 15px rgba(137,229,211,.3)} .swiper-wrapper {height: auto!important} .swiper{width:100%;padding:2rem 10rem 4rem;overflow:visible} .swiper-slide{height:auto;max-width: 310px} .blog-card{width:100%;background:#fff;border:2px solid #d3a35a;box-shadow:0 5px 15px rgba(0,0,0,.15);border-radius:30px;transition:.35s;height:auto;display:flex;flex-direction:column} .blog-card:hover{box-shadow:0 10px 30px rgba(211,163,90,.3);transform:translateY(-5px)} .blog-card_link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%} .blog-card_img-wrapper{border-radius:30px 30px 0 0;height:250px;background:linear-gradient(-45deg,#000 0,#fff 100%)} .blog-card_img{width:calc(100% + 10px);height:100%;object-fit:cover;margin:-10px 0 0 -10px;opacity:.9;transition:opacity .35s,transform .35s;transform:translate3d(10px,10px,0);backface-visibility:hidden} .blog-card:hover .blog-card_img{opacity:.6} .blog-card_text-wrap{padding:2.5rem;display:flex;flex-direction:column;background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,.98) 100%);min-height: 120px} .blog_category-detail_wrap{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;justify-content: space-between} .blog_category-detail{font-weight:400;color:#89e5d3;text-transform:uppercase;letter-spacing:.5px;font-size: 1.5rem} .blog-card svg {transform: rotate(45deg)} .blog_read{font-weight:200;color:#666} .blog-card h3{font-size:2rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s;text-align: center} .blog-card:hover h3{color:#89e5d3} /* MENTIONS LEGALES + CGV */ main#legales #header, main#legales .opacite-noir, main#legales .bg, {min-height: 500px;height: 500px} main#legales.mentions .bg {background-image: url("/photos/bg-legales-rbweb.jpeg")} main#legales.cgv .bg {background-image: url("/photos/bg-cgv.jpeg")} main#legales .flex {display: flex;z-index: 1} main#legales .flex h2 {color: white;font-size:6rem;font-family: 'Work Sans';padding: 0 5rem;text-align: center} #conditions {padding: 10rem 10rem 0;margin: 0 auto 10rem;max-width: 1600px} #conditions h3 {margin-bottom: 2rem;color: #89E5D3;font-family: 'Work Sans';font-weight: bold;font-size: 3rem} #conditions h4 {margin-bottom: 1rem;color: #D3A35A;font-family: 'Work Sans';font-weight: bold;font-size: 2rem} #conditions p {color: black;margin-bottom: 2rem} #conditions ul {list-style-type: none;margin-bottom: 2rem;margin-left: 0} #conditions ul li {font-size: 1.5rem;color: black} /* FOOTER */ footer {margin-top: 10rem;overflow: hidden} footer .grid {padding-top:0} footer .flex {grid-area: 1 / 1 / 2 / 13;display: flex;flex-wrap: wrap;justify-content: center} footer .flex > div {width: 33%} footer .legales {margin: 5rem auto 2rem;text-align: center;color: black;font-size: 1.2rem;padding: 0 7rem 2rem} footer .legales a {color: black} footer .legales a:hover {text-decoration: underline} /*info*/ footer .info img {max-width: 115px} footer .info > span {display: block;margin-top: 1rem;font-family: "Work Sans";font-size: 2.5rem} footer .info > span.name {font-size: 4rem} footer .info > span.job, footer .manifeste p {color:#D3A35A} footer .info > span.ville {margin-bottom: 1rem;color: #89E5D3} footer .info i {font-size: 3rem;color: #0B65C2} /*details*/ footer .details {display: flex;flex-direction: column;justify-content: center;align-items: center} footer .details span {font-family: "Work Sans";color: black;font-size:2rem;margin: 1rem 0 0;text-align: center} footer .details span.tel {margin-bottom: 2rem} footer .details span.tel a {color: black} footer .details span.tel a:hover {text-decoration: underline} footer .details span.tel em {font-size: 1.25rem} footer .details i {font-size: 2rem;color: black} /*vidéo youtube ou manifeste*/ footer .manifeste {display: flex;justify-content: center;align-items: center;flex-direction: column} footer .manifeste p {font-family: "Work Sans";font-size: 2.5rem;margin-bottom: 4rem} footer .manifeste a img {max-width: 115px} /*ARTICLE*/ /*progress bar*/ .progress-bar {position: fixed;bottom: 0;left: 0;width: 0;height: 5px;background-color: #D3A35A;z-index: 9999} .hidden {display: none} #scroll-percent {position: absolute;font-size: 15px;color: white;z-index: 9999;background: #D3A35A;bottom:5px;right: 0;text-align: center;padding: 1px 4px;font-family: 'Work Sans'} /*header*/ body.article li.general a {color: black} body.article .button.partenariat-st {bottom: 155px} body.article .button.partenariat-st > i {font-weight: normal;left: 10px} .button.partenariat-st i::before {content: '15%';font-family: 'Montserrat'} body.article .etranger {display: none} body.article .nuage#header, .nuage#header .bg, .nuage#header .opacite-noir {min-height: 550px} body.article #header, body.article #header .bg, body.article #header .opacite-noir {min-height: 550px} body.article #header .grid {padding-top: 0} body.article .nuage#header::after {content: '';display: block;width: 100%;height: 300px;position: absolute;bottom: 0;background-image: url("/photos/article/nuage-2.webp");background-size: cover;background-repeat: no-repeat;z-index: 9;background-position: bottom} body.article #header .bg {background-image: url("/photos/le-morne.webp")} body.article #header .opacite-noir {background: rgba(0,0,0,0.4)} body.article #header .punch, body.article #header .baseline {margin-top: 0;grid-column: 1 / 13;padding: 0} body.article #header h1 {font-size: 4rem;color: #89E5D3;font-family: 'Work Sans';font-weight: 500;text-align: center} body.article #header h2 {font-size: 1.75rem;color: white;text-align: center;max-width: 60%;margin: 5rem auto 0;font-weight: 200} /*temps de lecture*/ body.article #temps-lecture {margin: 4rem 0 4rem 0} body.article #temps-lecture ul {display: flex;justify-content: center;list-style-type: none} body.article #temps-lecture ul li {display: flex;align-items: center;flex-wrap: wrap;margin: 1rem} body.article #temps-lecture ul em {color: #D3A35A;font-family: "Work Sans";font-size: 1.75em;display: inline-block;margin: 0 10px} body.article #temps-lecture ul span {font-size: 1.5rem;display: inline-block;margin-top: 1px} /*aside sommaire*/ body.article main {overflow-x: initial} body.article #contenu-textuel .grid, body.article #auteur .grid {padding: 0;max-width: 1900px;grid-template-columns: 1fr 4fr 1fr;grid-gap: 5rem;position: relative} body.article #auteur .grid {grid-template-columns: 1fr 4fr 1fr;} body.article #contenu-textuel aside {position: sticky;top: 150px;align-self: start;left: 0;display: flex;align-items: flex-end;z-index: 3;width: 85px} body.article #contenu-textuel aside::before {content: 'SOMMAIRE';position: absolute;top: 0;left: 70px;font-size: 2em!important} body.article #contenu-textuel aside nav {position: relative;z-index: 1;width: 100%;margin: 0 0 0 5rem} body.article #contenu-textuel aside .all-svg {display: block;position: relative;z-index: 10;left: -15px;border-left: 3px solid #D3A35A;height: 525px} body.article #contenu-textuel aside svg {display: block;position: absolute;z-index: -1;top: 0;left: -17px} body.article #contenu-textuel aside svg:nth-child(1) {top: -2px} body.article #contenu-textuel aside svg:nth-child(2) {margin-top: 100px} body.article #contenu-textuel aside svg:nth-child(3) {margin-top: 200px} body.article #contenu-textuel aside svg:nth-child(4) {margin-top: 300px} body.article #contenu-textuel aside svg:nth-child(5) {margin-top: 400px} body.article #contenu-textuel aside svg:nth-child(6) {margin-top: 500px} body.article #contenu-textuel aside ul {list-style-type: none;width: 200px;position: absolute;z-index: 1;top: 97px; left:30px; opacity: 0;display: flex;flex-direction: column;align-items: self-start} body.article #contenu-textuel aside ul li, body.article #contenu-textuel aside::before {font-weight: bold;font-size: 1.5rem;height: 100px;font-family: 'Work Sans'} body.article #contenu-textuel aside ul li a {color: #D3A35A;display: block} body.article #contenu-textuel aside ul li a::first-letter {font-size: 3rem} body.article #contenu-textuel aside:hover {cursor: pointer} body.article #contenu-textuel aside:hover ul {opacity: 1/*mettre une animation avec key frames*/} /*contenu textuel*/ body.article #contenu-textuel {margin-bottom: 0;position: relative} body.article #contenu-textuel h3 {color: #D3A35A;font-size: 2.5rem;font-family: 'Work Sans';margin-top: 5rem} body.article #contenu-textuel h3.noh4 {margin-bottom: 3rem} body.article #contenu-textuel h4 {color: #89E5D3;font-size: 2rem;margin: 3rem 0;font-family: 'Work Sans'} body.article #contenu-textuel p, body.article #contenu-textuel li {color: black;margin-bottom: 1.5rem;font-size: 1.5rem;font-weight: 200} body.article #contenu-textuel ol li::marker {color: #D3A35A;font-weight: bold} body.article #contenu-textuel ol li em {color: #D3A35A} body.article #contenu-textuel i {font-style: italic} body.article #contenu-textuel p a {color: #D3A35A} body.article #contenu-textuel ul.liste-puce {max-width: 95%;margin-left:auto;margin-right:auto;list-style-type: none;margin-top: 2.5rem} body.article #contenu-textuel ul.liste-puce li {font-size: 1.5rem;color: black;margin-bottom: 2rem;position: relative;font-style: italic;font-weight: 200} body.article #contenu-textuel ul.liste-puce li em {font-style: normal;font-weight: 400} body.article #contenu-textuel p a, body.article #contenu-textuel li a {color: #D3A35A} body.article #contenu-textuel p a:hover, body.article #contenu-textuel li a:hover {text-decoration: underline} body.article #contenu-textuel ul.liste-puce li svg {transform: rotate(105deg);padding-right: 1rem;position: absolute;left: -30px;top: 10px} body.article #contenu-textuel p:last-child {margin-bottom: 0} body.article #contenu-textuel p.update {color: #D3A35A;font-style: italic} body.article .last {margin-bottom: 8rem!important} body.article .contenu .cta-contact {max-width: 225px;margin: auto} /*slider photo des articles*/ body.article #slider-photos .grid, body.article #slider-10-choses .grid {padding: 0} body.article #slider-10-choses .carousel-item {max-width: 300px!important; margin: 0 2rem;height: auto!important;border-radius: 20px;padding: 3rem;position: relative;background-image: linear-gradient(to right bottom, #89e5d360, #a1ebf460, #c9efff60, #ecf5ff60, #ffffff60)} body.article #slider-10-choses h4 {font-family: 'Work Sans';font-size: 2rem;margin-bottom: 1rem} body.article #slider-10-choses p {color: black} /*image*/ body.article #contenu-textuel img, body.article #contenu-textuel video {max-width: 70%;display: block;margin: 5rem auto;border: 1px solid #D3A35A;box-shadow: 1px 1px 11px 0px rgba(0,0,0,.5);-webkit-box-shadow: 1px 1px 11px 0px rgba(0,0,0,.5)} body.article #contenu-textuel img.full, body.article #contenu-textuel video.full {max-width: 100%} /*author*/ body.article #auteur {margin: 10rem 0} body.article #auteur .author {position: relative;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 500'%3E%3Crect fill='%23D3A35A' width='2000' height='500'%3E%3C/rect%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FFFFFF'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23D3A35A'%3E%3C/stop%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23e9d1ad'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23D3A35A'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'%3E%3C/path%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'%3E%3C/use%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'%3E%3C/use%3E%3C/g%3E%3C/defs%3E%3Cg%3E%3Cg transform=''%3E%3Ccircle fill='url(%23a)' r='3000'%3E%3C/circle%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1800'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1700'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1651'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1450'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1250'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='1175'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='900'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='750'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='500'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='380'%3E%3C/circle%3E%3Ccircle fill='url(%23a)' r='250'%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(-162 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'%3E%3C/use%3E%3Cuse href='%23g' transform='rotate(120)'%3E%3C/use%3E%3Cuse href='%23g' transform='rotate(240)'%3E%3C/use%3E%3C/g%3E%3Ccircle fill-opacity='0.5' fill='url(%23a)' r='3000'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;background-size: cover; display: flex;align-items: center;border-radius: 50px;box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);position: relative} body.article #auteur .author .remi-bailly {padding: 0 4rem} body.article #auteur .author img {width: 250px;border-radius: 50px} body.article #auteur .author h2 {font-size: 3rem;font-family: 'Work Sans';font-weight: 500;margin-bottom: 2rem;color: white} body.article #auteur .author p {font-size: 1.5rem;margin-bottom: 0!important;color: black} @keyframes rotation {from{transform: rotate(0deg)}to{transform: rotate(359deg)}} body.article #auteur .author .tour-du-monde {width: 80px;position: absolute;right: 10px;top: 10px;animation: rotation 70s infinite linear;border-radius: initial} /*coupon smart traveller*/ .smarttraveller {width: 750px;margin:60px auto;background: #3FCDD6;padding: 0;border-radius: 20px;display: flex;align-items: normal;box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2)} .smarttraveller .gauche {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px 115px;position: relative} .smarttraveller .gauche::before {content: '';position: absolute;left: 20px;top: 20px;width: 118px;height: 59px;background-image: url("/photos/article/tampon02.webp");background-size: cover} .smarttraveller .gauche::after {content: '';position: absolute;right: -15px;bottom: 0;width: 130px;height: 110px; background-image: url("/photos/article/tampon01.webp");background-size: cover} .smarttraveller .gauche .partenariat {color: #fecc2f;text-transform: uppercase;font-size: 1.85rem;display: block;text-align: center} .smarttraveller .gauche .partenariat em {font-weight: bold;font-style: normal;font-size: 3.5rem;display: block;margin-top: -10px;font-family: Montserrat} .smarttraveller .gauche .coupon {color: white;font-size: 5rem;text-transform: uppercase;font-family: 'Montserrat';display: block;text-align: center} body.article #contenu-textuel .smarttraveller .gauche p {color: white;text-align: center;margin-top: 20px;font-size: 1.75rem} .smarttraveller .droite {background: #fecc2f;border-top-right-radius: 20px;border-bottom-right-radius: 20px;width: 250px;display: flex;justify-content: center;align-items: center;z-index: 2;background-image: url("/photos/article/logo-smart-traveller.png");background-size: 25px;position: relative} .smarttraveller .droite::before {content: '';position: absolute;top: 0;bottom: 0;width: 2px;left: -5px;border-left: 5px dashed #fecc2f} .smarttraveller .droite span {writing-mode: vertical-rl;transform: rotate(-180deg);color: #FFEFD0;display: block;text-align: center;font-size: 1.75rem} .smarttraveller .droite span em {display: block;font-size: 2.4rem;text-transform: uppercase;margin-right: -5px} /*footer*/ body.article footer {padding-top: 5rem;background: black;-webkit-box-shadow: 2px 0px 10px -3px rgba(0,0,0,0.7); box-shadow: 2px 0px 10px -3px rgba(0,0,0,0.7)} body.article footer span.name {color: white} body.article footer span.ville {color: #89E5D3} body.article footer .legales, body.article footer .legales a, body.article footer .details span, body.article footer .details span.tel a, body.article footer .details i {color: white} /* RESPONSIVE */ @media (max-width: 1400px) { /*PERSONNALITES*/ #personnalite .grid.baba {display: flex;padding: 5rem 0;flex-wrap: wrap;justify-content: space-between;} #personnalite .logo {width: 100%;text-align: center;margin-bottom: 5rem} #personnalite .logo img {max-width: 200px} #personnalite .dji {width: 45%;max-width: 45%;display: flex;justify-content: center;align-items: center;margin-bottom: 5rem!important;text-align: left} #personnalite .dji div {margin-left: 2rem} #personnalite .dji h4 {margin-top: 0} /*FAQ*/ #faq .cd-faq {width: 70%} .cd-faq-categories {width: 200px} } @media (max-width: 1200px) { .slider-main_top-wrapper h2{font-size:3rem} .blog-card h3{font-size:1.8rem} #services .apr > div {margin-bottom: 10rem} #services .apr > div:last-child {margin-bottom: 5rem} } @media (max-width: 1060px) { /* GRID GENERAL */ .grid, #conditions {padding: 10rem 5rem 0} /**/ main#legales #header {align-items: center} /* NAV */ nav label {display: block} a#logo {z-index: 1} #navigation {position: fixed;top: 0rem;left: 0rem;height: 100%;width: 100%;background: #000;clip-path: circle(25px at calc(100% - 7.5rem) 5rem);transition: all 0.3s ease-in-out} #active:checked ~ #navigation {clip-path: circle(150%)} .menu-btn {position:absolute;z-index:2;right:5rem;top:2.5rem;height:50px;width:50px;text-align:center;line-height:50px;border-radius:50%;font-size:20px;color:#fff;cursor:pointer;background:#000;transition:all .3s ease-in-out} #active:checked ~ .menu-btn {color: #fff} .menu-btn i {font-size: 2rem;margin-top: 1.5rem} #active:checked ~ .menu-btn i:before {content: "\f00d"} #navigation ul {position: fixed;top: 10rem;left: 0;right: 0;list-style: none;text-align: center;background: black;flex-wrap: wrap;justify-content: center;height: auto;flex-direction: column} #navigation ul li {padding: 10px 0;width: 100%;background: black} #navigation ul li a:after{position:absolute;content:"";background:#fff;background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);width:104%;height:110%;left:-2%;top:-5%;border-radius:50px;transform:scaleY(0);z-index:-1;animation:rotate 1.5s linear infinite;transition:transform .3s ease} #navigation ul li a:hover:after {transform: scaleY(1)} #navigation ul li a:hover{color: #fff} #navigation li.contact a {margin-left: 0} main.legales #header {align-items: center} /*top header ile maurice*/ nav > .menu, nav.ilemaurice > .menu {background: black;padding: 1rem 3rem} nav.ilemaurice {padding: 0} nav.ilemaurice > .etranger {padding: 10px} nav.ilemaurice .menu-btn {top: 6.5rem} nav.ilemaurice #navigation {top: 6rem} nav.ilemaurice #navigation ul {top: 13rem;padding-bottom: 2rem} nav.ilemaurice > .menu {padding-top: 7rem} nav.ilemaurice .menu-btn {top: 8.5rem} /* HEADER */ #header, #header .bg, #header .opacite-noir {min-height: 600px!important;align-items: start;height: auto} #header .grid {padding: 0 2rem 0;margin-top: 15rem} .punch {margin-top: 0} .punch h2, main#legales h2 {font-size: 5rem} main.googleads .punch h2 {font-size: 4rem} .punch, .baseline {grid-column: 1 / 13;text-align: center} .baseline h1 {margin: auto} .cta-contact {grid-column: 1 / 13;min-width: 430px;max-width: 430px;margin: 3rem auto 0;padding: 0 2rem} .picture {position: relative;bottom: -6rem;text-align: center} .qaseo {left: 0;top: -6rem} #header img, .picture {display: none} /*PRES FRISE*/ section .grid:first-child, section .titre-ecoles, #presentation .grid.un, #services .grid.un {display: flex;flex-direction: column;padding-top: 5rem} #presentation .un .gauche, #presentation .deux {display: flex;flex-direction: column} #presentation .un .gauche:before {bottom: -3rem;left: calc(50% - 150px);transform: rotate(90deg)} #presentation h3 {margin: 0 auto 5rem;text-align: center} #presentation img {max-width: 250px} main.googleads #presentation .grid.un img {max-width: 300px} main.googleads #presentation .un .gauche:before {bottom: -45px} #presentation .un .droite {margin-top: 5rem} #presentation .deux .droite {order: 1;margin: auto;max-width: 250px} #presentation .deux .droite:before {width: 250px;height: 410px} #presentation .deux .gauche {order: 2} #presentation .trois {padding-top: 5rem} #presentation .trois .intro {grid-area: 1 / 1 / 13 / 13;padding-left: 5rem;padding-right: 5rem;text-align: center} #presentation .trois .timeline {flex-direction: column} .tl-item {height: 400px;min-height: 400px;width: 100%!important} .tl-content {opacity: 1!important;top: 40%;transform: none} .tl-item:before {opacity: .85!important;transform: none;background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#89E5D3 100%)} .tl-item .tl-bg {filter: grayscale(0)} .tl-item .tl-year {top: 15%!important;left: calc(50% - 34px);transform: none;width: 68px} .tl-item:hover {width: 100%!important} /*SERVICES OUTIL*/ #services .un h3 {text-align: center} #services .un .flex {flex-direction: column;align-items: center} #services .un .flex > div {width: 100%;margin: 0 0 15rem;text-align: center} #services .un .flex > div.reporting {margin-bottom: 3rem} #services .un h3 {margin-bottom: 15rem} #services .apr h4:before {font-size: 10rem;width: 100%} /*references*/ #references {padding-bottom: 5rem} #references .ecoles .flex {padding-top: 5rem} #references .un h3, #references .titre-ecoles h3, #faq .titre-faq h3, #blog .grid.titre h3, #villes .titre-villes h3, #personnalite .un h3, #facon h3.titre {text-align: center} .review-google {padding-top: 5rem} /*FAQ*/ #faq .cd-faq {width: 80%;margin-bottom: 5rem} .cd-faq-categories {display: none} .cd-faq-items {width: 100%} /*CONTACT FORM*/ #contact {margin-bottom: 5rem} #contact .wrapper_contact {flex-direction: column;align-items: center;justify-content: center;padding: 3rem} #contact .wrapper_contact > div {width: 100%;margin-bottom: 5rem} .quatre-data ul {justify-content: space-around} .quatre-data ul li {width: 175px;margin: 1rem;align-items: center} .quatre-data ul li em {font-size: 4rem} /*ARTICLE*/ body.article #header .bg, body.article #header .opacite-noir {min-height: 500px!important} body.article .nuage#header::after {height: 100px} body.article #header::after {bottom: 50px} body.article #header h2 {max-width: 100%} body.article #header .grid {margin-top: 18rem;display: flex;flex-direction: column;padding: 0 2rem} body.article #temps-lecture {margin-top: 4rem} body.article .contenu {padding: 0 3rem 0} body.article #auteur {margin: 8rem auto 5rem;max-width: 80%} body.article #contenu-textuel .grid, body.article #auteur .grid {grid-gap: 0} body.article .last {margin-bottom: 6rem!important} /*FOOTER*/ footer {margin-top: 0rem} .slider-main_top-wrapper {align-items: center} #blog .grid.titre h3 {margin-bottom: 3rem} footer .flex {justify-content: center} footer .flex > div {width: auto} footer .details {align-items: center} footer .youtube {width: 100%!important;margin-top: 5rem!important} footer .youtube iframe {width: 400px;margin: auto;display: block} } @media (max-width:810px) { /*hp*/ .baseline h1, .baseline p {font-size: 15px!important} .punch h2, main#legales h2 {font-size: 4rem!important} #blog .grid.articles figure {width: 30rem} #blog .grid.articles figure h2 {font-size: 2rem} #blog .grid.articles figure figcaption {display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.4)} #blog .grid.articles figure figcaption::before, #blog .grid.articles figure p {display: none} /*facon*/ #facon {padding-top: 0} .comparison-item{padding:20px 15px} .comparison-item.you {text-align: center} .comparison-wrapper::before, .vs-badge, .column-header.agency, .comparison-item.agency, .comparison-item::before {display:none} .comparison-grid{grid-template-columns:1fr;gap:0;padding:0 15px 20px} .comparison-row{display:block;margin-bottom:15px;background:rgba(255,255,255,0.02);border-radius:12px;overflow:hidden;animation:fadeInUp .6s ease-out backwards} .comparison-item.you{padding:20px;background:linear-gradient(135deg,rgba(211,163,90,0.1) 0%,rgba(137,229,211,0.1) 100%)} .comparison-row:nth-child(1){animation-delay:.1s} .comparison-row:nth-child(2){animation-delay:.2s} .comparison-row:nth-child(3){animation-delay:.3s} .comparison-row:nth-child(4){animation-delay:.4s} .comparison-row:nth-child(5){animation-delay:.5s} .comparison-row:nth-child(6){animation-delay:.6s} .comparison-row:nth-child(7){animation-delay:.7s} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} /**/ body.article #auteur {max-width: 410px} body.article #auteur .author {flex-direction: column} body.article #auteur .author .remi-bailly {padding: 4rem 2rem;text-align: center} body.article #auteur .author .tour-du-monde {position: relative;top: inherit;right: inherit;bottom: 2rem} .smarttraveller {flex-direction: column;width: 90%} .smarttraveller .gauche {padding: 20px 130px 20px 40px;overflow: hidden} /*avenir google ads*/ #avenir .grid p {font-size: 1.5rem} #avenir .grid p::before {font-size: 14rem;left: -3rem;top: -5rem} /**/ /*je baisse les fonts de 0.5rem*/ .smarttraveller .gauche .partenariat {font-size: 1.35em} .smarttraveller .gauche .partenariat em {font-size: 3rem} .smarttraveller .gauche .coupon {font-size: 4rem} .smarttraveller .droite span em {font-size: 2rem} /**/ .smarttraveller .droite {width: 100%;border-top-right-radius:0;border-bottom-left-radius:20px} .smarttraveller .gauche::before {right: 20px;left: auto} .smarttraveller .droite span {writing-mode: inherit;transform: rotate(0deg)} .smarttraveller .droite::before {left: 0;right: 0;top: -4px;width: 100%;border-left: none;border-top: 5px dashed #fecc2f} } @media (max-width: 685px) { /*top header*/ nav.ilemaurice > .etranger {flex-direction: column} main.googleads .punch h2 {font-size: 3rem!important} #header .grid {display: grid} .grid {grid-template-columns: inherit} /**/ #services .deux h4.titre {padding-right: 0} #services .outil > div {margin: 0 0 5rem} /*avenir google ads*/ #avenir {height: auto;max-height: inherit} #avenir .bg, #avenir .opacite-noir {width: 100%;height: 100%} #avenir .grid p {padding: 3rem} /*on rétrécit les polices*/ .punch h2, #presentation h3, #services .un h3, #personnalite .un h3, #references .un h3, main#legales h2, #references .titre-ecoles h3, #facon h3.titre, #villes .titre-villes h3 {font-size: 4rem!important} footer .info > span.name, .formulaire span.titre {font-size: 3rem} #personnalite .dji img {width: 60px} /*blog*/ #blog .grid.articles figure {width: 30rem;margin: auto} #blog .grid.articles figure h2 {padding: 3rem;font-size: 2.25rem} #blog .grid.articles figure figcaption::before {right: -70px;width: 250px;height: 250px} #blog .grid.articles figure p {padding: 1rem} body.article #slider-10-choses .grid.slider-10-choses .slick-slide {height: auto!important} body.article #slider-10-choses {margin-bottom: 4rem!important} /**/ footer .flex > div {text-align: center} footer .details {align-items: center} #personnalite .grid.baba {justify-content: center} #personnalite .dji div {margin-left: 0;margin-top: 2rem} #personnalite .dji {width: 100%;max-width: 100%;text-align: center;flex-direction: column} .formulaire form {flex-direction: column} form span {width: 85%} body.home .slick-list:before, body.home .slick-list:after {display: none} #contact .grid.onelife {padding: 0 2rem 0} footer .flex > div.youtube {margin-bottom: 0} footer .youtube iframe {width: 100%} } @media (max-width: 505px) { em.gratuit {display: none} /*maj des grid*/ .grid, #conditions {padding: 10rem 3rem 0} #presentation .trois .intro {padding-left: 3rem;padding-right: 3rem} #services .deux {padding: 0 3rem 5rem} /*AVENIR GOOGLE ADS*/ #avenir .grid {padding: 5rem 2rem} /*ARTICLE*/ body.article #header .bg, body.article #header .opacite-noir {min-height: 450px} body.article #header h1 {font-size: 3rem} body.article #header h2 {font-size: 1.5rem;margin-top: 2rem} body.article #temps-lecture ul {flex-direction: column;align-items: center} body.article #contenu-textuel h3 {font-size: 2rem} body.article #contenu-textuel h4 {font-size: 1.75rem} body.article #contenu-textuel img {max-width: 90%} body.article #auteur {max-width: 300px} body.article #auteur .author .remi-bailly {padding: 4rem 2rem} body.article #auteur .author img {width: 100%} .smarttraveller .gauche {padding: 20px} .smarttraveller .gauche .partenariat em {font-size: 2.5rem} .smarttraveller .gauche .coupon {font-size: 3rem} .smarttraveller .gauche::before {right: 10px;top: 10px;height: 33px;width: 66px} .smarttraveller .gauche::after {display: none} /**/ #navigation ul li {width: 120px;margin: 0 1rem} li.general a {margin: 0} p.tel.mobile {display: block} p.tel.ordi {display: none} .punch, .baseline {grid-column: 2 / 12} main.googleads .punch, main.googleads .baseline {grid-column: 1 / 13} .tl-content {top: initial;transform: none;margin: 10rem 1rem 5rem} .tl-item .tl-year {top: 0!important;left: 0;transform: none;width: 100%;text-align: center;margin-top: 5rem} .tl-content {top: initial;transform: none;margin: 10rem 1rem 5rem} .tl-item {height: auto;min-height: auto} #references button.slick-prev {left: 0} #references button.slick-next {right: 0} #references .slick-slide p {padding: 7rem 3rem 0rem;font-size: 1.5rem} .cta-contact {grid-column: 2 / 12;min-width: auto} .picture {bottom: -3rem} .hexa-q {width: 68.75px;height: 101px} #header img {max-width: 200px} .qaseo p {top:3rem;left: -4rem;font-size: 1.2rem} .qaseo p::before {width: 80px;height: 16px} #services .apr > div {margin: 0 auto 10rem} #services .deux .flex, footer .flex {flex-direction: column} #services .deux .flex > div, footer .flex > div {width: 100%} #services .deux h4 {margin-bottom: 5rem} .slider-main_top-wrapper h2{font-size:2rem} .blog-card_img-wrapper{height:180px} .btn.view-all{font-size:1.2rem;padding:1rem 2rem} .formulaire form footer .info img {max-width: 80px} footer .details span.tel {margin-bottom: 2rem} footer .youtube {display: none} }