@charset "utf-8";
/* CSS Document */
html {font-size: 100%;}
body {margin:0; padding:0; color:#ffffff; font-family:'Open Sans', Arial, Verdana, sans-serif; background:#ffffff; position: relative;}
p, h1, h2, h3, h4, table, tr, td, img, ul, li {margin:0; padding:0; border:none; font-weight:normal;}

/* TOO SMALL */
#toosmall {position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #242843; background-size: 50%; z-index: 2000; display: none;}
#toosmall div {top: 50%; transform:translateY(-50%); position: absolute; width: 100%; text-align: center;}
#toosmall div img {width: 100px; height: auto; margin-bottom: 20px;}
#toosmall div p {font-weight: bold; color: #ffffff; line-height: 1.563rem;}
/* TOO SMALL */


/* TRANSITIONS CHANGEMENT DE PAGE */
body:after, body:before {content: ''; height: 100vh; width: 50vw; position: fixed; background-color: #242843; z-index: 200; box-sizing: border-box; transition: all 0.6s ease 0.3s; -webkit-transition: all 0.6s ease 0.3s; -moz-transition: all 0.6s ease 0.3s; -o-transition: all 0.6s ease 0.3s;}
body:before {top: 0; left: 0; transform: translateY(-100%);}
body:after {bottom: 0; right: 0; transform: translateY(100%);}
body.projet-is-changing:after, body.projet-is-changing:before {transform: translateY(0); transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s;}

.cd-loading-bar {position: fixed; z-index: 201; left: calc(50vw - 0.5px); bottom: 0; height: 100vh; width: 1px; background-color: #06cabc; transform: translateY(-100%); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.cd-loading-bar:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #06cabc; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0);}
.projet-is-changing .cd-loading-bar {transform: translateY(0) scaleX(0.3); -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s;}
.projet-is-changing .cd-loading-bar:before {transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}

#pagemove {position: fixed; z-index:200; top: 0; left: 0; height: 100vh; width: 100vw; background:#dfe9f2;}
/* TRANSITIONS CHANGEMENT DE PAGE */

/* HEADER */
#logo {position: fixed; width: 50px; height: 50px; background:#242843; top: 10px; left: 10px; z-index: 15; border: 0;}
#logo img {width: 30px; position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); z-index: 2;}
#logo:after {content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background: #06cabc; z-index: 1; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;}
#logo:hover:after {height: 100%; width: 100%;}
#ico {position: fixed; width: 40px; height: 40px; top: 10px; right: 10px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; z-index: 11;}
#ico span {position: absolute; height: 1px; background: #ffffff; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; z-index: 2;}
#ico span:nth-child(1) {width: 10px; left: 15px; top: 15px;}
#ico span:nth-child(2) {width: 20px; left: 10px; top: 20px;}
#ico span:nth-child(3) {width: 10px; right: 15px; top: 25px;}
#ico:hover span:nth-child(1) {width: 20px; left: 10px;}
#ico:hover span:nth-child(3) {width: 20px; right: 10px;}
#ico.open {cursor: default;}
#ico.open span:nth-child(1) {width: 0px; left: 0px;}
#ico.open span:nth-child(2) {width: 0px; left: 20px;}
#ico.open span:nth-child(3) {width: 0px; right: 0px;}

#cadre {position: fixed; top: 9px; right: 9px; width: 52px; height: 52px; box-sizing:border-box; border: solid 1px #06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 10;}
#cadre.open {height: calc(100vh - 18px);}
#carre {position: fixed; top: 0px; right: 0px; width: 50px; height: 50px; background:#242843; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 9;}
#carre.open {width: 100%; height: 100vh;}

#menuClose {display: none; font-weight: 600; color: #ffffff; font-size: 0.750rem; position: fixed; top: 10px; right: 10px; padding-right: 40px; text-transform: uppercase; line-height: 40px; cursor: pointer; z-index: 11;}
#menuClose:after {content: ""; position: absolute; top: 20px; right: 10px; height: 1px; width: 0; background: #06cabc; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
#menuClose.show:after {width: 20px;}
#menuClose.show:hover:after {width: 10px; right: 15px;}
/* HEADER */

/* MENU */
ul#menu {position: fixed; top: 50%; left: 50%; color: #000000; text-align: center; transform: translateX(-50%) translateY(-50%); z-index: 12; display: none;}
ul#menu li {list-style: none; font-family: 'Playfair Display', serif; color: #ffffff; font-size: 3.750rem; margin: 50px 0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";/*HACK IE 8*/ filter:alpha(opacity=0);/*HACK IE 5-7*/}
ul#menu li:nth-child(1) {margin-left: -150px;}
ul#menu li:nth-child(2) {margin-left: -150px;}
ul#menu li:nth-child(3) {margin-left: -150px;}
ul#menu li a {color: #ffffff; text-decoration: none; position: relative;}
ul#menu li a.actif {color: #06cabc;}
ul#menu li a:after {content:""; position: absolute; width: 0; height: 1px; background: #ffffff; bottom: -5px; right: 100%; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;}
ul#menu li a.actif:after {width: 0; background: #06cabc; bottom: 35%; right: 100%;}
ul#menu li a:hover:after {width: 100px; right: -50px;}
ul#menu li a.actif:hover:after {width: 100px; right: 50%; transform: translateX(50%);}
/* MENU */

/* CONTENT */
/* ----- GENERAL -----*/
section {position: relative; width: 100%;}
h1 {font-family: 'Playfair Display', serif; font-size: 3.750rem; text-align: left; color:#29316b; margin-bottom: 60px; position: relative;}
h1 span {position: relative;}
h1 span:after {content: ""; width: 100px; height: 1px; background: #06cabc; bottom: -9.5px; right: -50px; position: absolute;}
h3 {font-family: 'Playfair Display', serif; font-size: 1.125rem; color:#525252; margin-top: 30px;}
p {color: #525252;}
body section article .slide {position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;}
body section article .visuel {position: absolute; height: 100vh; width: 50vw; right: 0; top: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0;}
body section article .visuel.vc {background-image: url("../images/projet-vc0.jpg");}
body section article .visuel.hgm {background-image: url("../images/projet-hgm0.jpg");}
body section article .visuel.igs {background-image: url("../images/projet-igs0.jpg");}
body section article .visuel.orange {background-image: url("../images/projet-orange0.jpg");}
body section article .visuel.party {background-image: url("../images/projet-ap0.jpg");}
body section article .visuel.maif {background-image: url("../images/projet-maif0.jpg");}
body section article .visuel.ovk {background-image: url("../images/projet-ovk0.jpg");}
body section article .visuel.neuilly {background-image: url("../images/projet-neuilly0.jpg");}
body section article .visuel.orlyse {background-image: url("../images/projet-orlyse0.jpg");}
body section article .visuel.cuba {background-image: url("../images/projet-cuba0.jpg");}
/* ----- GENERAL -----*/
/* ----- INDICATEUR DE SCROLL ----- */
.gauche {left: 25vw;}
.centre {left: 50vw;}
#top {display: none;}
.scroll.white, .top.white {color: #ffffff;}
.scroll.white:before, .top.white:before {background:#ffffff;}
.scroll, .top, #back {position: fixed; text-transform: uppercase; color: #242843; font-size: 0.813rem; font-weight: 600; padding: 10px 20px; box-sizing:border-box; cursor: pointer; transform:translateX(-50%);  z-index:5;}
.scroll {bottom: 30px;}
.top {top: 30px;}
#back {top: 50vh; left: -52px; text-decoration: none; padding: 5px 20px 10px 20px; transform:rotate(-90deg);}
.scroll:before, .top:before, #back:before, .scroll:after, .top:after, #back:after {content:""; position: absolute; left: calc(50% - 0.5px); transform:translateX(-50%); transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
.scroll:before, .top:before{height: 30px; width: 1px; background:#242843; z-index: 0;}
#back:before {height: 20px; width: 1px; background:#242843; z-index: 0;}
.scroll:after, .top:after, #back:after {height: 0; width: 1px; background:#06cabc; z-index: 1;}
.scroll:before, .scroll:after {top: 100%;}
.top:before, .top:after {bottom: 100%;}
#back:before, #back:after {bottom: 100%;}
.scroll:hover:before {top: calc(100% + 30px); height: 0;}
.top:hover:before {bottom: calc(100% + 30px); height: 0;}
#back:hover:before {bottom: calc(100% + 20px); height: 0;}
.scroll:hover:after, .top:hover:after {height: 30px;}
#back:hover:after {height: 20px;}
.scroll span, .top span, #back span {position: absolute; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
.scroll span:nth-child(1), .top span:nth-child(1), #back span:nth-child(1) {top: 0; left: 0; width: 0; height: 1px;}
.scroll span:nth-child(2), .top span:nth-child(2), #back span:nth-child(2) {bottom: 0; right: 0; width: 0; height: 1px;}
.scroll span:nth-child(3), .top span:nth-child(3), #back span:nth-child(3) {top: 0; left: 0; width: 1px; height: 0;}
.scroll span:nth-child(4), .top span:nth-child(4), #back span:nth-child(4) {bottom: 0; right: 0; width: 1px; height: 0;}
.scroll:hover span:nth-child(1), .scroll:hover span:nth-child(2), .top:hover span:nth-child(1), .top:hover span:nth-child(2), #back:hover span:nth-child(1), #back:hover span:nth-child(2) {width: 100%;}
.scroll:hover span:nth-child(3), .scroll:hover span:nth-child(4), .top:hover span:nth-child(3), .top:hover span:nth-child(4), #back:hover span:nth-child(3), #back:hover span:nth-child(4) {height: 100%;}
/* ----- INDICATEUR DE SCROLL ----- */
/* ----- HOME ----- */
#home section {position: relative; width: 100vw; height: 100vh; overflow: hidden;}
#home section article {margin: 0 auto; position: relative; position: relative; width: 100vw; height: 100vh; z-index:1;}
#home section article#s1 {display: block;}
#home section article#s2, #home section article#s3 {display: none;}
#home section article .slide {left: 100px; width: calc(50vw - 100px);}
#home section article .slide p {width: 98%; margin-bottom: 40px;}
#home section article .slide a {display: inline-block; color: #06cabc; text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 10px 20px; border: solid 1px #29316b; box-sizing:border-box; position: relative;}
#home section article .slide a:after {content:""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #29316b; z-index: -1; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;}
#home section article .slide a:before {content:""; position: absolute; top: 50%; right: calc(100% - 10px); width: 20px; height: 1px; background: #06cabc; transition: all 0.8s ease 0.2s; -webkit-transition: all 0.8s ease 0.2s; -moz-transition: all 0.8s ease 0.2s; -o-transition: all 0.8s ease 0.2s;}
#home section article .slide a:hover:after {width: 100%;}
#home section article .slide a:hover:before {right:-10px;}
#home section article .visuel a {display: block; border: 0; width: 100%; height: 100%; padding: 0;}
/* ----- HOME ----- */
/* ----- INFOS ----- */
#infos section article {width: 50%; max-width: 580px; margin: 0 auto;}
section.donnees article, section.other article {text-align: center; font-size: 0;}
#infos section article .col {width: 66%; margin-right: 2%; display: inline-block; text-align: left; font-size: 1rem;}
#infos section article .col:nth-child(even) {width: 30%;}
section.me {background:url("../images/infos.jpg") bottom right no-repeat #242843; height: 100vh; position: relative; background-size: cover;}
section.me article {position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%);}
section.me h1 {color:#ffffff;}
section.me p {color:#ffffff; margin-bottom: 35px; line-height: 1.5rem;}
section.me a {color:#06cabc; text-decoration: none; margin-top: 15px; display: block;}
section.me a span {position: relative;}
section.me a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 1px; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
section.me a:hover span:after {left: calc(100% + -20px);}
section.donnees {background:#dfe9f2; padding: 50px 0; box-sizing:border-box;}
section.donnees article:first-of-type {text-align: left; font-size: 1rem; padding-bottom: 30px;}
section.donnees article h3:first-of-type {margin-top: 0;}
section.donnees article h3 a {text-decoration: none; color: #525252;}
section.donnees article p {margin-top: 5px; color:#242843;}
section.donnees article p a {text-decoration: none; color:#242843;}
section.donnees a span {position: relative;}
#infos section.donnees a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 20px; height: 1px; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
#infos section.donnees a:hover span:after {left: calc(100% + -10px);}
section.other {background:#242843; padding: 50px 0 100px 0; position: relative;}
section.other h1 {color:#ffffff; margin-top: 100px;}
section.other h1:first-of-type {margin-top: 0px;}
section.other ul {text-align: left;}
section.other ul li {width: 66%; margin-right: 2%; display: inline-block; font-size: 1rem; list-style: none; line-height: 24px; vertical-align: top;}
section.other ul li:nth-child(even) {width: 30%;}
section.other ul.comp {width: 100%; margin-top: 20px;}
section.other ul.comp li {width: 100%;}
section.other ul.item {margin-top: 30px;}
section.other ul.item.pop {cursor: pointer;}
section.other ul.comp li:nth-child(1), section.other ul li:nth-child(2) {margin-top: 0px;}
section.other ul.comp li:nth-child(1), section.other ul.item li:nth-child(1) {color:#06cabc; font-weight: 600;}
section.other ul.item li:nth-child(3) span {position: relative;}
section.other ul.item li:nth-child(3) span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 20px; height: 1px; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
section.other ul.item:hover li:nth-child(3) span:after {left: calc(100% + -10px);}
/* ----- INFOS ----- */
/* ----- PORTFOLIO ----- */
#portfolio section article {width: calc(100% - 120px); margin: 0 auto; padding: 120px; box-sizing:border-box;}
#portfolio section article:after {content: ''; display: block; clear: both;}
#portfolio section article ul li {float: left; list-style: none; width: 50%; min-width:490px; box-sizing:border-box;}
#portfolio section article ul li:nth-child(odd) {padding-bottom: 100px;}
#portfolio section article ul li:nth-child(even) {padding-top: 100px;}
#portfolio section article ul li .visu {width: 450px; height: 250px; color: #000000; font-size: 1rem; background:#dfe9f2; margin: 0 auto; position: relative;}
#portfolio section article ul li .visu img {width: 100%;}
#portfolio section article ul li .visu a {position: absolute; width: 100%; height: 100%; border: solid 1px #06cabc; color:#242843; text-decoration: none; text-align: center; display: flex; justify-content: center; align-items: center; box-sizing:border-box; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; }
#portfolio section article ul li:nth-child(odd) .visu a {top: 10px; left: 10px;}
#portfolio section article ul li:nth-child(even) .visu a {bottom: 10px; right: 10px;}
#portfolio section article ul li .visu.survol a {width: calc(100% - 20px); height: calc(100% - 20px); background:#ffffff;}
#portfolio section article ul li .visu a h2 {font-family: 'Playfair Display', serif; font-size: 1.875rem; margin-bottom: 30px; display: none;}
#portfolio section article ul li .visu a .btn {font-size: 0.813rem; text-transform: uppercase; color:#06cabc; font-weight: 600; border: solid 1px #06cabc; padding: 10px 20px; box-sizing:border-box; position: absolute; bottom: 30px; left: 50%; transform:translateX(-50%); display: none;}
#portfolio section article ul li .visu a .wait {font-size: 0.813rem; text-transform: uppercase; color:#06cabc; font-weight: 600; padding: 10px 20px; box-sizing:border-box; position: absolute; bottom: 30px; left: 50%; transform:translateX(-50%); display: none;}
#portfolio section article ul li .visu a .btn:after {content:""; position: absolute; top: 50%; right: -10px; width: 20px; height: 1px; background: #06cabc;}
/* ----- PORTFOLIO ----- */
/* ----- PROJET ----- */
#projet section.intro {position: relative; width: 100%; height: 100vh; overflow: hidden;}
#projet section.intro article {margin: 0 auto; position: relative; position: relative; width: 100%; height: 100vh; z-index:1;}
#projet section.intro article .slide {left: 120px; width: calc(50% - 180px);}
#projet section.intro article .slide p {margin-bottom: 35px;}
#projet section.intro article .slide p.reco {margin-bottom: 0px; font-weight: 600; color: #06cabc;}
#projet section.donnees article {width: calc(100% - 240px); font-size: 0; margin: 0 auto;}
#projet section.donnees article .col {width: 25%; display: inline-block; text-align: left; font-size: 1.250rem; vertical-align: top;}
#projet section.donnees article .col h3 {font-size: 1.250rem;}
#projet section.donnees article a {display: inline-block; font-size: 1rem; margin-top: 60px; color: #06cabc; text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 10px 20px; border: solid 1px #29316b; box-sizing:border-box; position: relative;}
#projet section.donnees article a span{z-index: 1;}
#projet section.donnees article a:after {content:""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #29316b; z-index: 0; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;}
#projet section.donnees article a:before {content:""; position: absolute; top: 50%; right: calc(100% - 10px); width: 20px; height: 1px; background: #06cabc; z-index: 1; transition: all 0.8s ease 0.2s; -webkit-transition: all 0.8s ease 0.2s; -moz-transition: all 0.8s ease 0.2s; -o-transition: all 0.8s ease 0.2s;}
#projet section.donnees article a:hover:after {width: 100%;}
#projet section.donnees article a:hover:before {right:-10px;}
#projet section.apercu article {width: calc(100% - 180px); max-width: 1000px; margin: 0 auto;}
#projet section.apercu {padding-top: 60px; box-sizing:border-box;}
#projet section.apercu article img {width: 100%; margin-bottom: 60px;}
/* ----- PROJET ----- */
/* ----- 404 - FAIL ----- */
section#fail {background:#242843; height: 100vh; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center;}
section#fail article {width: 100%; text-align: center;}
section#fail h1 {color:#161929; font-size: 500px; position: absolute; top: 5%; left: 50%; transform: translateX(-50%); z-index: 0;}
section#fail p {color:#ffffff; margin-bottom: 35px; font-size: 1.250rem; line-height: 1.5rem; position: relative; z-index:1;}
section#fail a {color:#06cabc; text-decoration: none; margin-top: 15px; display: block; position: relative; z-index:1;}
section#fail a span {position: relative;}
section#fail a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 1px; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
section#fail a:hover span:after {left: calc(100% + -20px);}
/* ----- 404 - FAIL ----- */
/* ----- POP ----- */
#pop {position: fixed; width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background:#242843; z-index: -10; opacity:0; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; cursor: pointer;}
#pop img {position: fixed; height: 70vh; display: none;}
#popClose {font-weight: 600; color: #ffffff; font-size: 0.750rem; position: absolute; top: 10px; right: 20px; padding-right: 40px; text-transform: uppercase; line-height: 40px; cursor: pointer; z-index: 11;}
#popClose:after {content: ""; position: absolute; top: 20px; right: 10px; height: 1px; width: 20px; background: #06cabc; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
#popClose:hover:after {width: 10px; right: 15px;}
#pop.affiche {opacity:1; z-index:50; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s;}
/* ----- POP ----- */
/* CONTENT */

/* EN DESSOUS DE 700px de large et 600px de haut */
@media screen and (max-width:700px), (max-height:600px) {
	body {overflow: hidden;}
	#toosmall {display: block;}
}

/* EN DESSOUS DE 1500px de large */
@media screen and (max-width:1500px) {
	#portfolio section article {padding: 120px 0;}
}

/* EN DESSOUS DE 1250px de large ET AU DESSUS DE 1000px de large */
@media screen and (max-width:1250px) and (min-width:1000px) {
	#portfolio section article ul li {min-width: 380px}
	#portfolio section article ul li .visu {width: 360px; height: 200px;}
	#portfolio section article ul li .visu a h2 {font-size: 1.563rem;}
}

/* EN DESSOUS DE 1000px de large */
@media screen and (max-width:1000px) {
	#portfolio section article {padding: 80px 0;}
	#portfolio section article ul li {width: 100%; padding: 30px !important;}
	#projet section.donnees article .col {display: block; margin: 0 auto 40px auto;}
	#projet section.donnees article .col:last-of-type {display: block; margin: 0 auto 0 auto;}
}

/* EN DESSOUS DE 800px de haut */
@media screen and (max-height:800px) {
	#portfolio section article {padding: 80px 0;}
}

/* EN DESSOUS DE 900px de large et 750px de haut */
@media screen and (max-width:900px), (max-height:750px) {
	html {font-size: 14px;}
	h1 {font-size: 3.125rem;}
}