/***** Class *****/ h1 { font: 400 clamp(1.4rem, 1.5rem + .2vw, 1.8rem)/1.6 var(--fontBody); display: block; margin-bottom: 10px;} h2.chapo { font: 400 clamp(1.4rem, 1.5rem + .2vw, 1.8rem)/1.6 var(--fontBody);} h2.chapo span { display: block; margin-bottom: 10px;} .sous_titre, .bloc-fiche h3 { font: 300 clamp(4.5rem, 5.6rem + .2vw, 6rem)/1.2 var(--fontTitre); position: relative; margin-bottom: 60px; } .sous_titre::after, .bloc-fiche h3::after { content:url("../images/rosace-titre.svg"); position: absolute; left: 0; bottom: -50px; } @media (max-width:800px) { .sous_titre, .bloc-fiche h3 { font: 300 clamp(2.5rem, 3.5rem + .2vw, 5rem)/1.2 var(--fontTitre);} } @media (max-width:400px) { .link { display: block;} } /***** Banner *****/ .banner { width: 100vw; position: relative; z-index: 10; height: 95vh; overflow: hidden; background:#170863} .banner-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/pattern.svg") center repeat #170863; background-size: 35%; background-blend-mode: color-burn; opacity: 0.3; z-index: 10;} .banner-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/noise.webp") center repeat; z-index: 15;} @media (max-width:1200px) { .banner { height: 75vh;} } @media (max-width:600px) { .banner { height: 65vh;} } /*@media (max-width:500px) { .banner { height: 55vh;} }*/ /* feGaussianBlur CSS */ @keyframes moveInCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes moveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } } @keyframes moveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } } .gradients-container { filter: url(#goo) blur(40px); width: 100%; height: 100%; } .blur { position: absolute; z-index: 1; border-radius: 900px; filter: blur(var(--blur-amount)); background: #6700c3;} .blur:nth-child(1) { height: var(--blur-1-size); width: calc(var(--blur-1-size) * 1.1);} .blur:nth-child(2) { /*filter: blur(var(--blur-amount)) hue-rotate(135deg) brightness(1.1);*/ height: var(--blur-2-size); width: calc(var(--blur-2-size) * 0.75); top: 20vh; right: 20vh; background: #3c42d0;} .blur:nth-child(3) { filter: blur(var(--blur-amount)) hue-rotate(-135deg); height: var(--blur-3-size); width: calc(var(--blur-3-size) * 2); bottom: 20vh; left: 20vw; background: #c765c8;} /* Titre */ .bloc-titre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200;width: 95vw;} .cd-intro { text-align: center; color: #ffffff;} .cd-intro .cd-headline { font: 300 clamp(2.5rem, 4rem + .2vw, 6rem)/1.2 var(--fontTitre);} .cd-words-wrapper { display: inline-block; position: relative; text-align: left; } .cd-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: -15px; font-weight: 300; } .cd-words-wrapper b.is-visible { position: relative; } .animate_texte { display: block; font: 300 clamp(5.5rem, 14rem + .2vw, 16rem)/1.5 var(--fontTitre);} .cd-headline.rotate-2 .cd-words-wrapper { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } @-webkit-keyframes cd-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); } } @-moz-keyframes cd-rotate-2-in { 0% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(0deg); } } @keyframes cd-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); -moz-transform: translateZ(-20px) rotateX(90deg); -ms-transform: translateZ(-20px) rotateX(90deg); -o-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); -moz-transform: translateZ(-20px) rotateX(-10deg); -ms-transform: translateZ(-20px) rotateX(-10deg); -o-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); -moz-transform: translateZ(-20px) rotateX(0deg); -ms-transform: translateZ(-20px) rotateX(0deg); -o-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @-webkit-keyframes cd-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); } } @-moz-keyframes cd-rotate-2-out { 0% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(-90deg); } } @keyframes cd-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); -moz-transform: translateZ(-20px) rotateX(0); -ms-transform: translateZ(-20px) rotateX(0); -o-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); -moz-transform: translateZ(-20px) rotateX(-100deg); -ms-transform: translateZ(-20px) rotateX(-100deg); -o-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); -moz-transform: translateZ(-20px) rotateX(-90deg); -ms-transform: translateZ(-20px) rotateX(-90deg); -o-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } .cd-headline.clip span { display: inline-block; } .cd-headline.clip .cd-words-wrapper { /*overflow: hidden; */vertical-align: middle; } .cd-headline.clip .cd-words-wrapper::after { content:''; position: absolute; top: 0; right: 0; width: 2px; height: 90%; opacity: .3; background-color: #ffffff; } .cd-headline.clip b { opacity: 0; } .cd-headline.clip b.is-visible { opacity: 1; } @media (max-width:1366px) { .animate_texte { font: 300 clamp(3.5rem, 10rem + .2vw, 14rem)/1.5 var(--fontTitre);} } @media (max-width:1200px) { .cd-intro .cd-headline { font: 300 clamp(2.2rem, 3.2rem + .2vw, 5rem)/1.2 var(--fontTitre);} } @media (max-width:1000px) { .animate_texte { font: 300 clamp(3rem, 8rem + .2vw, 9rem)/1.5 var(--fontTitre);} } @media (max-width:800px) { .animate_texte { font: 300 clamp(2.2rem, 5rem + .2vw, 7rem)/1.5 var(--fontTitre);} .cd-headline.clip .cd-words-wrapper { margin-top: 20px;} .cd-intro .cd-headline { font: 300 clamp(1.6rem, 2.5rem + .2vw, 3.5rem)/1.2 var(--fontTitre);} } @media (max-width:500px) { .animate_texte { font: 300 3.5rem/1.8 var(--fontTitre);} .cd-intro .cd-headline { font: 300 2.5rem/1.2 var(--fontTitre);} } /***** Wrapper Object *****/ .wrapper-object-1 { position: relative; width: 100vw; background: url("../images/objet-1.webp") right bottom no-repeat; padding-bottom: 100px;} /*.wrapper-object-3 { position: relative; width: 100vw; background: url("../images/objet-3.webp") right top no-repeat; }*/ /*.wrapper-object-1::before { content: ""; position: absolute; width: 350px; height: 250px; background: url("../images/objet-1.webp") right center no-repeat; bottom: 0; right:-40px; z-index: 750; }*/ .wrapper-object-3 { position: relative;} #obj2 { position: absolute; top: -400px; left: -380px; z-index: -1;} #obj3 { position: absolute; top: -200px; right: -100px; z-index: 200;} @media (max-width:1500px) { .wrapper-object-1 { background: none; padding-bottom: 0;} #obj2, #obj3 { display: none;} } /*@media (max-width:1000px) { .wrapper-object-1 { background: url("../images/objet-1.webp") 80vw bottom no-repeat;} } @media (max-width:800px) { .wrapper-object-1 { background: url("../images/objet-1.webp") 90vw bottom no-repeat; padding-bottom: 30px;} } @media (max-width:600px) { .wrapper-object-1 { background: none; padding-bottom: 0;} }*/ /***** Bloc *****/ /* Intro */ .bloc-intro { margin: 0 auto 100px auto; position: relative; max-width: 980px; width: 90vw; display: grid; grid-template-rows: 1fr auto; grid-template-columns: auto 1fr; grid-gap: 0; align-items: center;} .bloc-intro .item:nth-child(1) { grid-area: 1 / 1 / 2 / 3; position: relative;} .bloc-intro .item:nth-child(1) img { max-width: 100%; height: auto; border-radius: 20px; margin-top: -190px; z-index: 700; position: relative; margin-bottom: 120px;} .bloc-intro .item:nth-child(1)::before { content: ""; position: absolute; width: 137px; height: 171px; background: url("../images/rosace.svg") left top no-repeat; top: -250px; left: -60px; z-index: 750;} .bloc-intro .item:nth-child(1)::after { content: ""; position: absolute; width: 137px; height: 171px; background: url("../images/rosace.svg") left top no-repeat; bottom: 80px; right: -60px; z-index: 750; transform: rotate(180deg);} .bloc-intro .item:nth-child(2) { grid-area: 2 / 1 / 3 / 2; position: relative; font: 400 clamp(4rem, 6.8rem + .2vw, 7rem)/1.2 var(--fontTitre); font-style: italic; letter-spacing: .9px; padding-right: 120px;} .bloc-intro .item:nth-child(3) { grid-area: 2 / 2 / 3 / 3; position: relative;} @media (max-width:1200px) { .bloc-intro { width: 80vw;} .bloc-intro .item:nth-child(1) img { margin-top: -140px;} .bloc-intro .item:nth-child(1)::before { top: -200px;} } @media (max-width:1000px) { .bloc-intro { width: 100vw; max-width: inherit; grid-template-columns: 1fr 1fr;} .bloc-intro .item:nth-child(1)::before, .bloc-intro .item:nth-child(1)::after { content: none;} .bloc-intro .item:nth-child(1) img { border-radius: 0; max-width: inherit; width: 100%;} .bloc-intro .item:nth-child(2) { padding-left: 5vw; padding-right: 0;} .bloc-intro .item:nth-child(3) { padding-right: 5vw;} } @media (max-width:800px) { .bloc-intro { display: block; margin-top: -120px; margin-bottom: 0;} .bloc-intro .item:nth-child(1) img { margin-top: 0;} .bloc-intro .item:nth-child(2) { padding-right: 5vw; text-align:center; top: -80px; font: 400 clamp(2.5rem, 4rem + .2vw, 5rem)/1.2 var(--fontTitre); } .bloc-intro .item:nth-child(2) br { display: none;} .bloc-intro .item:nth-child(3) { padding-left: 5vw; padding-right: 5vw; text-align:center; top: -40px;} } @media (max-width:600px) { .bloc-intro .item:nth-child(2) { text-align: left; font: 400 clamp(1.6rem, 2.2rem + .2vw, 3rem)/1.2 var(--fontTitre);} .bloc-intro .item:nth-child(3) { text-align: left; top: -50px;} } /* Team Building */ .bloc-activites { margin: 0 auto 100px auto; position: relative; max-width: 1200px; width: 90vw; display: grid; grid-template-columns: 50% 50%; grid-gap: 0; align-items: center;} .nav_slider-activites-theme { position: absolute; z-index: 300; left: -60px; top: 50%; transform: translateY(-50%); background: #ffffff; border-radius: 100%; width: 120px; height: 120px; display: flex; align-items: center;} .nav_slider-activites-soiree { position: absolute; z-index: 300; right: -60px; top: 50%; transform: translateY(-50%); background: #ffffff; border-radius: 100%; width: 120px; height: 120px; display: flex; align-items: center;} .bloc-activites .photo { position: relative;} .bloc-activites .photo .slider { position: relative; z-index: 1; margin-left:-50vw;} .bloc-activites .photo .img { margin: 0 15px;} .bloc-activites .photo .slider img { width: 100%; height: 650px; object-fit: cover; display: block; border-radius: 10px;} .bloc-activites .texte { position: relative; padding-left: 80px;} .bloc-activites .texte p { margin-bottom: 20px;} .bloc-activites.reverse { margin: 150px auto 150px auto; } .bloc-activites.reverse .texte { grid-area: 1 / 1;} .bloc-activites.reverse .photo { grid-area: 1 / 2;} .bloc-activites.reverse .photo .slider { margin-left:0; margin-right:-50vw;} .bloc-activites.reverse .texte { position: relative; padding-left: 0; padding-right: 60px;} @media (max-width:1200px) { .bloc-activites .texte { padding-left: 60px;} .bloc-activites.reverse .texte { padding-left: 60px;} } @media (max-width:1000px) { .bloc-activites { grid-template-columns: 45% 55%;} .bloc-activites .texte { padding-left: 40px;} .bloc-activites.reverse { grid-template-columns: 55% 45%;} .bloc-activites.reverse .texte { padding-right: 40px; padding-left: 0;} } @media (max-width:800px) { .bloc-activites.reverse { margin-bottom: 40px;} .bloc-activites { display: block;} .bloc-activites .texte { padding-left: 0; text-align: center; padding-top: 40px;} .sous_titre::after, .bloc-fiche h3::after { left: 50%; transform: translateX(-50%);} .nav_slider-activites-theme, .nav_slider-activites-soiree { display: none;} .bloc-activites .photo .slider { margin-left: inherit;} .bloc-activites .photo .img { display: none;} .bloc-activites .photo .img:first-child { display: block;} .bloc-activites.reverse .photo .slider { margin-right: inherit} .bloc-activites.reverse .texte { padding-right: 0;} } @media (max-width:600px) { .bloc-activites.reverse { margin-top:50px; } .bloc-activites .photo .slider img { height: 75vw; } } /* Idées */ .bloc-idees { position: relative; padding: 0 0 100px 0;} .bloc-idees::before { content: ''; position: absolute; top: -150px; left: 0; width: 100%; height: calc(100% + 150px); background: #001344; z-index: -2;} .bloc-idees::after { content: ''; position: absolute; top: -150px; left: 0; width: 100%; height: calc(100% + 150px); background: url("../images/pattern.svg") center repeat #001344; background-size: 35%; background-blend-mode: hard-light; opacity: 0.3; z-index: -1;} .bloc-idees .arrowsIdees { position: absolute; top: 0; right: 0;} .bloc-idees-slider { position: relative; z-index: 1; margin: 0 auto; max-width: 1200px; width: 90vw; } .bloc-idees-slider .titre { color: #ffffff; font: 300 clamp(3rem, 3.8rem + .2vw, 4.2rem)/1.4 var(--fontTitre);} .bloc-contact { color: #ffffff; font: 300 clamp(3rem, 3.8rem + .2vw, 4.2rem)/1.4 var(--fontTitre); text-align: center; position: relative;} .bloc-contact a { color: var(--colorBodyLinkHover);} .idees-slider { width: 100vw; margin: 30px 0 95px; position: relative;} .idees-slider .item { position: relative; width: 280px; margin-right: 30px;} .idees-slider .item a { position: relative; display: block;} .idees-slider .item a:after { background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 70%); content: ''; width: 100%; height: 100%; position: absolute; z-index: 0; top: 0; left: 0; border-radius: 10px;} .idees-slider .item img { width: 100%; height: auto; display: block; border-radius: 10px;} .idees-slider .item h3 { position: absolute; z-index: 1; bottom: 10px; /*left: 50%; transform: translateX(-50%);*/ left: 0; width: 100%; text-align: center; color: #ffffff; text-transform: uppercase; font-size: 1.4rem; font-weight: 400;} @media (max-width:800px) { .bloc-idees { padding: 0;} .bloc-idees::before, .bloc-idees::after { top:-40px;} .bloc-contact { font: 300 clamp(1.8rem, 2.5rem + .2vw, 3rem)/1.4 var(--fontTitre);} .arrowsIdees { display: none;} } @media (max-width:600px) { .bloc-idees::before { height: calc(100% - 150px); } .bloc-idees::after { height: calc(100% - 150px); } .bloc-contact { color: var(--colorBody); padding-top: 50px; width: 80vw; margin: 0 auto;} .bloc-contact span { display: none;} .bloc-contact a { padding: 20px 30px; border: none; display: inline-block; vertical-align: middle; color: #ffffff; background: #cdb375; cursor: pointer; border-radius: 5px; text-align: center; margin: 20px 0 0 0; width: 80vw; font: 400 1.6rem/1.8 var(--fontBody);} } @media (max-width:400px) { /*.idees-slider .item h3 { width: 100%; text-align: center; left: inherit; transform: none;}*/ } /* Event */ .bloc-event { color: #ffffff; position: relative; z-index: 1; padding: 100px 0; text-align: center;} .bloc-event::before { content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: #001344; z-index: -2;} .bloc-event::after { content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url("../images/pattern.svg") center repeat #001344; background-size: 35%; background-blend-mode: hard-light; opacity: 0.3; z-index: -1;} .bloc-event>div {margin: 0 auto; max-width: 1200px; width: 90vw; } .bloc-event h3.sous_titre { margin-bottom: 60px;} .bloc-event h3.sous_titre::after { left:50%; transform:translateX(-50%);} .bloc-event p { margin-bottom: 40px;} /* Domaine */ .bloc-domaine { margin: 150px auto; position: relative; max-width: 980px; width: 90vw; display: grid; grid-template-rows: 1fr auto; grid-template-columns: auto 1fr; grid-gap: 0; align-items: start;} .bloc-domaine .item:nth-child(1) { grid-area: 1 / 1 / 2 / 3; position: relative;} .bloc-domaine .item:nth-child(1) img { max-width: 100%; height: auto; border-radius: 20px; position: relative; margin-bottom: 120px;} /*.bloc-domaine .item:nth-child(1) iframe { max-width: 100%; position: relative; margin-bottom: 120px;}*/ .bloc-domaine .item:nth-child(1)::before { content: ""; position: absolute; width: 137px; height: 171px; background: url("../images/rosace.svg") left top no-repeat; top: -50px; left: -60px; z-index: 750;} .bloc-domaine .item:nth-child(1)::after { content: ""; position: absolute; width: 137px; height: 171px; background: url("../images/rosace.svg") left top no-repeat; bottom: 50px; right: -60px; z-index: 750; transform: rotate(180deg);} .bloc-domaine .item:nth-child(2) { grid-area: 2 / 1 / 3 / 2; position: relative; font: 400 clamp(4rem, 6.8rem + .2vw, 7rem)/1 var(--fontTitre); letter-spacing: .9px; padding-right: 120px;} .bloc-domaine .item:nth-child(2) em { font: 400 clamp(3.5rem, 3.8rem + .2vw, 4rem)/1 var(--fontTitre); font-style: italic;} .bloc-domaine .item:nth-child(3) { grid-area: 2 / 2 / 3 / 3; position: relative;} .bloc-domaine .item:nth-child(3) p { margin-bottom: 20px;} @media (max-width:1200px) { .bloc-domaine { width: 80vw;} /*.bloc-domaine .item:nth-child(1) iframe { margin-top: -140px;}*/ .bloc-domaine .item:nth-child(1)::before { top: -200px;} } @media (max-width:1000px) { .bloc-domaine { width: 100vw; max-width: inherit; grid-template-columns: 1fr 1fr; margin-top: 140px;} .bloc-domaine .item:nth-child(1)::before, .bloc-domaine .item:nth-child(1)::after { content: none;} /*.bloc-domaine .item:nth-child(1) iframe { border-radius: 0; max-width: inherit; width: 100%;}*/ .bloc-domaine .item:nth-child(2) { padding-left: 5vw; padding-right: 0;} .bloc-domaine .item:nth-child(3) { padding-right: 5vw;} } @media (max-width:800px) { .bloc-domaine { display: block; margin-top: 0; margin-bottom: 0;} /*.bloc-domaine .item:nth-child(1) iframe { margin-top: 0;}*/ .bloc-domaine .item:nth-child(2) { padding-right: 5vw; text-align:center; top: -80px; font: 400 clamp(2.5rem, 4rem + .2vw, 5rem)/1.2 var(--fontTitre); } .bloc-domaine .item:nth-child(2) br { display: none;} .bloc-domaine .item:nth-child(3) { padding-left: 5vw; padding-right: 5vw; text-align:center; top: -40px;} } @media (max-width:600px) { .bloc-domaine .item:nth-child(2) { text-align: left; font: 400 clamp(1.6rem, 2.2rem + .2vw, 3rem)/1.2 var(--fontTitre);} .bloc-domaine .item:nth-child(3) { text-align: left; top: -50px;} } /* Vidéo */ video { max-width: 980px; width: 100%; height: auto; position: relative; display: block; padding-bottom: 100px;} @media (max-width:1200px) { video { margin-top: -140px;} } @media (max-width:1000px) { video { max-width: inherit;} } @media (max-width:800px) { video { margin-top: 0; padding-bottom: 120px;} } /***** hide question *****/ .hide_question { position: relative;} .hide_question .anchor { top: -120px; position: relative;} .hide_question .bloc_texte { margin: 0 auto; width: 90vw; max-width: 1200px;}