body,html{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
a,body{color:#666}::-moz-selection{color:#fff;background-color:#e8760f}::selection{color:#fff;background-color:#e8760f}
section ol,section ul{font-size:1.3rem}
#cursor{position:fixed;top:20px;left:20px;width:10px;height:10px;border-radius:50%;user-select:none;pointer-events:none;z-index:1000000000;transition:width .1s cubic-bezier(.75,-.27,.3,1.33),height .1s cubic-bezier(.75,-.27,.3,1.33),left .1s ease-in-out,top .1s ease-in-out,background-color .2s ease-in-out}
#cursor.active,#cursor.scroll{top:-5px;left:-5px;opacity:1;background-image:url(../img/clic.png);background-repeat:no-repeat;background-size:contain}
#cursor.active{background-color:transparent;width:30px;height:30px}
#cursor img{max-width:initial}
#cursor.scroll{width:75px;height:75px}
a,a:active,a:focus,a:visited{text-decoration:none;letter-spacing:1px;}
header{position:fixed;width:100vw;top:0;left:0;padding:1rem;transition:.8s;background-color:#fff;z-index:100}
header nav{max-width:1200px;margin:0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
header ul{margin:0;padding:10px;list-style:none;min-width:55%;width:max-content;max-width:1050px}
header ul li{display:inline-block;padding:10px}
header a{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem}
.tipa:hover{background:linear-gradient(180deg,#71196f 50%,#c8276a 100%)}
.tipa:hover{background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
#accueil h1 span:hover {color:#FCE05D;text-shadow: 10px 10px 0px #0080AF, -10px -10px 0px #e8760f;}
#accueil h1 span{transition:.3s}
header a:after{content:"";position:relative;left:0;right:0;bottom:0;display:block;height:2px;-webkit-transition:-webkit-transform .8s cubic-bezier(.77,0,.175,1);-o-transition:transform .8s cubic-bezier(.77,0,.175,1);transition:transform .8s cubic-bezier(.77,0,.175,1),-webkit-transform .8s cubic-bezier(.77,0,.175,1);transition-timing-function:cubic-bezier(.77,0,.175,1),cubic-bezier(.77,0,.175,1);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0)}header a:hover::after{-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}
#logo{width:160px}.container,.container-bis{max-width:1200px;margin-right:auto;margin-left:auto;padding:4rem 2rem}
.container-bis{padding:0 2rem;height:65px}#accueil{margin-top:140px}
#accueil .pic{cursor:pointer;background-image:url(../img/palm-trees.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;height:calc(100vh - 350px);position:relative}
#accueil .pic:after{content:'\002794';position:absolute;color:#fff;transform:rotate(90deg);font-size:2rem;left:49%;bottom:5px}

#accueil .pic .center{
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;}
#accueil h1{font-size:7rem;line-height:7rem;color:#fff;}
#accueil h2{font-size:3rem;font-weight:normal;}
#accueil .slogan{font-size:3rem;color:#0085ad;text-align:right;font-weight: normal;font-style: italic;}
.sans-serif{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
p{font-size:1.1rem;margin-bottom:1rem}.petit{font-size:90%}
.toutpetit{font-size:60%;color:#efc382;}
.p2{padding:0;margin-left:10.255%;margin-right:10.255%}.p2{margin-left:30%}.tipa{color:#0085ad;font-weight:700;transition:all .8s ease;cursor:cell}.standard{font-size:1.3rem}.demi{font-size:1.5rem}
figure{display:block;overflow:hidden;width:max-content;max-width:100%; margin-bottom: 10px;}
figure img{transition:transform 1.4s cubic-bezier(.16,1.08,.38,.98),-webkit-transform 1.4s cubic-bezier(.16,1.08,.38,.98)}
figure:hover img{transform:translateZ(0) scale(1.04)}.m-t-2{margin-top:2rem}
figure figcaption {display: none;}
figure:hover figcaption {display: block;position: absolute;padding: 0.2rem 1.5rem;bottom: 1rem;color: white;transition:all .8s ease;}


.m-t-4{margin-top:4rem}.m-t-8{margin-top:8rem}.m-t-12{margin-top:12rem}.m-t-20{margin-top:20rem}.accordion__single__hidden{display:none}.accordion__single__hidden:checked~.accordion__single__answer{max-height:600px;opacity:1;transform:translate(0,0);margin-top:14px;padding:1rem;background:#f2eee7;height:initial}.accordion__single__hidden:checked~.accordion__single__question:after{content:"-"}.accordion__single__answer{margin-top:0;max-height:0;opacity:0;transform:translate(0,50%);transition:all .4s ease;position:relative;font-size:1.5rem;height:0}.accordion{max-width:80%}.accordion__single{margin-bottom:15px}.accordion__single__question{font-weight:600;letter-spacing:1px;cursor:pointer;position:relative;font-size:2rem}.accordion__single__question:focus,.accordion__single__question:hover{text-decoration:underline}.accordion__single__question:after{display:inline-block;margin-left:10px;color:#009f4d;content:"+"}
#adn-pic{margin-left:20%}
#accuiel h2,#adn h2,#clients h2,#equipe h2,#impact h2,#innovation h2,#metier h2,#rejoindre h2{font-size:3rem;font-weight:normal;}
h3{font-size:2rem;color:#000;font-weight: normal;}#innovation p.standard{margin-top:.5rem}.text-center,blockquote p{text-align:center}.bg-img{background-repeat:no-repeat;background-size:cover;min-height:30vh;background-position:center;transition:ease 1s}.bg-rouen{background-image:url(../img/rouen.jpg)}.bg-equipe{background-image:url(../img/bureau-equipe.jpg)}.bg-rejoindre{background-image:url(../img/moulin.jpg)}.bg-metier{background-image:url(../img/metiers.jpg)}.bg-adn{background-image:url(../img/equipe-reflet.jpg)}.bg-innovation{background-image:url(../img/innovation.jpg);background-position:top!important}.bg-txt h2,.bg-txt p{color:#fff;margin-top:4rem;text-shadow:1px 1px 12px #555}.img--equipe{max-width:250px;margin:4px 0;}blockquote{position:relative}.container-carousel{padding:5rem 30%;color:#000}

.coul0{background-color:#bc90c1;min-height:500px;padding-top:10rem;text-align:center}
.coul1,.coul2,.coul3{background-color:#c8276a;min-height:500px}
.coul2,.coul3{background-color:#e8760f}
.coul3{background-color:#95c11f}
.coul4,.coul5,.coul6{background-color:#77c8d2;min-height:500px}
.coul5,.coul6{background-color:#f3953f}
.coul6{background-color:#ffcd00}

#projets-urbains h3 {
	color:#0085ad;
}
#planification h3 {
	color:#FCE05D;
}
#architecture h3 {
	color:#e8760f;
}
#concertation h3 {
	color:#e7e4c0;
}
#adn h3 {
	color:#efc382;
}
#rejoindre h3 {
	color:#591d5e;
}



.blocker:has(> #projets-urbains)  {
	background: no-repeat url("../img/griffe-pu.gif");
	background-position: right bottom -20px;
	background-color: white !important;
	background-size: 80%;
}

.blocker:has(> #planification)  {
	background: no-repeat url("../img/griffe-pe.gif");
	background-position: right bottom -20px;
	background-color: white !important;
	background-size: 80%;
}


.blocker:has(> #architecture)  {
	background: no-repeat url("../img/griffe-archi.gif");
	background-position: right bottom -20px;
	background-color: white !important;
	background-size: 80%;
}


figure.bandeau{
	width:100%;
	max-height:500px;
	background-color: #575756;
	margin: 4rem 0;
}

.metiers.coul-0{background:no-repeat url("../img/griffe-pu.gif");	background-position: right 0px bottom -60px;
	background-color: white;
	background-size: 50%;
	transition: 1s;}
.metiers.coul-1{background:no-repeat url("../img/griffe-pe.gif");	background-position: right 0px bottom -60px;
	background-color: white;
	background-size: 50%;
	transition: 1s;}
.metiers.coul-2{background:no-repeat url("../img/griffe-archi.gif");	background-position: right 0px bottom -60px;
	background-color: white;
	background-size: 50%;
	transition: 1s;}
.metiers.coul-3{background:no-repeat url("../img/griffe-concert.gif");	background-position: right 0px bottom -60px;
	background-color: white;
	background-size: 50%;
	transition: 1s;}


.metiers a span {
	letter-spacing:0px !important;
}

.liste-annonce{
	list-style: none;
}
.liste-annonce a {
	color: #591d5e;
}


.top-layer{position:fixed;width:100%;height:0;top:0;left:0;background:#6c567b;z-index:1000000}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{font-size:3rem!important}.owl-stage-outer{cursor:grab}blockquote{margin-top:3rem;padding:2rem}blockquote p{font-size:35px;font-style:italic}blockquote p::after,blockquote p::before{content:"";display:block;width:50%;height:2px;background-color:#71196f;margin:2rem auto}
.bloc-equipe, .dg{display:block;max-width:70vw;margin:0 auto;text-align: center;}
.dg figure{
	position: relative;
	overflow: hidden;
	margin: 0;
	display: inline-block;
	text-align: center;
}
.dg .img--equipe{
	max-width: 31.7%
}
.btn-modal,.metiers{border:1px solid #ccc;padding:2rem;position:relative;overflow:hidden}

/*.metiers:after{content:"";position:absolute;background-color:#4dc7a0;transform:rotate(30deg) rotate(90deg);width:100%;height:100%;right:-220px}*/

.metiers.coul-0:hover,
.metiers.coul-1:hover,
.metiers.coul-2:hover,
.metiers.coul-3:hover{background-position: right -10px bottom -80px;}

.arrow-icon{position:relative;top:-1px;transition:transform .3s ease;vertical-align:middle}
.arrow-icon--circle{transition:stroke-dashoffset .3s ease;stroke-dasharray:95;stroke-dashoffset:95}
label:hover .arrow-icon{transform:translate3d(5px,0,0)}
label:hover .arrow-icon--circle{stroke-dashoffset:0}

.list-ex{list-style:none}.list-ex li{padding:.8rem;border-top:1px solid #fff;border-bottom:1px solid #fff;transition:.8s}.list-ex li:hover{background-color:#f0f8ff;border-top:1px solid #555;border-bottom:1px solid #555}.reveal{opacity:0;transform:translateY(40px)}.reveal-visible{opacity:1;transform:translateY(0);transition:1s cubic-bezier(.5,0,0,1)}.owl-item{min-height:5rem!important}#typed-carousel{display:inline}.imgfred{max-width:50%;float:right}@media (max-width:576px){#cursor{display:none}
header ul li{padding:5px}
#accueil h1{margin-top:10rem;line-height:3rem}#accueil .slogan{font-size:1.5rem}#accueil h1,#accueil h2{font-size:2.5rem}figure img{max-width:100%}figure{margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}.container{padding:2rem 1rem}.container-carousel{padding:2rem 1rem;color:#000}.modal__inner{position:absolute;width:100%;height:100%;box-sizing:border-box}blockquote,header{padding:.5rem}
blockquote{margin-top:1rem;margin-inline-start:0;margin-inline-end:0}.bloc-equipe{max-width:initial}blockquote,h3{margin-block-start:0;margin-block-end:0}.imgfred{max-width:50%;float:left}}@media (min-width:577px) and (max-width:993px){#cursor{display:none;min-width: 150px}#accueil h1{margin-top:10rem;font-size:4.5rem;line-height:5rem}#accueil .slogan,#accueil h2{font-size:2.5rem}.container-carousel{padding:2rem;color:#000}.coul0,.coul1,.coul2,.coul3,.coul4,.coul5,.coul6{min-height:350px}figure,img{max-width:100%;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}.imgfred{max-width:50%;float:left}}#cursor.text{color:#4b4f54;font-size:1rem;min-width:150px;max-height:200px;height:max-content;padding:5px 10px;border-radius:5px;background-color:#fff}

header a:hover{text-decoration: none;}
#link-accueil.active, #link-accueil:hover, #accueil .container h2 {color:#e8760f;}
#link-accueil:after {background-color:#e8760f;}
#link-metier.active, #link-metier:hover, #metier .container h2 {color:#0085ad;}
#link-metier:after {background-color:#0085ad;}
#link-adn.active, #link-adn:hover, #adn .container h2 {color:#efc382;}
#link-adn:after {background-color:#efc382;}
#link-innovation.active, #link-innovation:hover, #innovation .container h2 {color:#009F4D;}
#link-innovation:after {background-color:#009F4D;}
#link-impact.active, #link-impact:hover, #impact .container h2 {color:#000;}
#link-impact:after {background-color:#000;}
#link-equipe.active, #link-equipe:hover, #equipe .container h2 {color:#ffcc00;}
#link-equipe:after {background-color:#ffcc00;}
#link-rejoindre.active, #link-rejoindre:hover, #rejoindre .container h2 {color:#591d5e;}
#link-rejoindre:after {background-color:#591d5e;}
#link-contacts.active, #link-contacts:hover, #contact .container h2 {color:#d82042;}
#link-contacts:after {background-color:#d82042;}
a.link {cursor: auto;}

.modal{
	max-width: 80vw !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-o-box-shadow: none !important;
	-ms-box-shadow: none !important;
	box-shadow: none !important;
	border: 1px solid #666;
}
.contain-modal{
	display: flex;
	gap: 20px;
	align-items:flex-start;
}
.column-modal{
	flex-basis: 50%;
}

.row-img {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
  }
  
  /* Create two equal columns that sits next to each other */
  .column-img {
	flex: 50%;
	padding: 0 4px;
  }
  
  .column-img img {
	margin-top: 8px;
	vertical-align: middle;
  }

video {
    width: 100% !important;
    height: auto !important;
}

.bloc-equipe figure {
	position: relative;
	width: 250px;
	height: 250px;
	overflow: hidden;
	margin: 0;
	display: inline-block;
}
.bloc-equipe figure img {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0) scale(1);
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

.bloc-equipe img.top:hover {
	opacity:0;
}
.metiers p {
	height: 110px;
}

@media (max-width:576px){
	.bloc-equipe figure {
		width: 150px;
		height: 150px;
	}
}

@media (min-width:1330px) {
	.bloc-equipe figure {
		width: 200px;
		height: 200px;
	}
	.img--equipe {
		max-width: 300px;
	}
}