@charset "UTF-8";
/* CSS Document */
body {margin:0px; font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: normal; color:#333; line-height:1.5; background:#fff; font-size:1em; }
* {outline:none;
}
footer {text-align:center; font-size:1em; padding:5px; position:fixed; bottom:0; left:30px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #574258; color:#8B6384;z-index:99999999999;}
a {color:#4b5a76; text-decoration:none;}
a:hover{text-decoration:none;}
h1,h2 {margin-block-end: 0.3em;}
input {padding:10px;}
img {max-width:100%; }
p{font-size: 0.9em;font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: normal; text-align: justify; color:#3A3A3A;display: block; margin-block-start: 0.5em !important; margin-block-end: 0.5em !important; margin-inline-start: 0px; margin-inline-end: 0px;}
ul li {font-size: 0.9em ;font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: normal;}
ol li {font-size: 0.9em ;font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: normal;}
h1{font-size:4em;font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: 300; margin-top:0px}
h2{font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;color:#8B6384; text-align: left; font-weight: 700; font-size:2em;}

article {
	padding:7em 10% 5% 5%;
}

/* ---------- ----------- */


#conteneur-onglet{position: fixed; right: -280px; top: 40vh; transition: all 1s; z-index:9999999999999; width:315px;}
#conteneur-onglet:hover{right:0px;transition: all 1s;}
#image-onglet{background:url(img/img-menu.svg) center no-repeat;width:35px; min-height:30px; display:table-cell; padding-top:7px;vertical-align: middle; text-align:center; background-color: #6d5672; float:left;border-radius: 10px 0px 0px 10px;-moz-border-radius: 10px 0px 0px 10px; -webkit-border-radius: 5px 0px 0px 5px; border: 0px solid #000000;-webkit-background-size:60%; background-size: 60%; moz-background-size: 60%;}
#conteneur-items{float:right; height:auto; width:280px;}


#menu {list-style-type:none; margin:0px; padding:0px; background:rgba(139,99,132,0.8);}
#menu li{ font-size:0.9em; font-weight:500; margin-bottom:0px; padding:5px;letter-spacing:1px; }
#menu li.current {background:rgba(109,86,115,0.8);}
#menu li.current a {color:#fff;}
#menu li a:hover {background:rgba(109,86,115,0.8);}
#menu li a { color:#fff; padding:5px; }

#footer-info a {
	color: #fff;
}

.logo-tna {
	display: block;
	position: absolute;
	margin: 30px;
	text-align: center;
}

.logo-tna.in-footer {
	position: static;
	margin: 30px 35px;
	text-align: left;
}

.logo-tna span {
	display: block;
	color: #fff;
	font-size: 14px;
	margin-left: -25px;
}
.logo-tna a:hover span {
	text-decoration: underline;
}

.logo-tna.in-footer span {
	margin-left: 7px;
}
.logo-tna.in-footer a:hover span {
	text-decoration: underline;
}

#container-remerciements,
#container-remerciements p,
#container-remerciements a,
#adresse,
#adresse p,
#adresse a {
	color: #fff;
}


#container-remerciements,
#adresse {
	padding-left: 35px;
}

#adresse {
	padding-top: 10px;
}


section {
	min-height:100vh;
	height:auto;
	display:grid;
	grid-gap:0px;
	grid-template-columns: 70% 30%;
}

#section-1{
	grid-template-areas: 
		'section-1-1 section-1-2';
	background-color: #896484;
}
#section-1-1{
	display:flex; 
	flex-direction: column; 
	justify-content: center;
}
#section-1-2{
	background:url(img/Axo3.jpg) center no-repeat; 
	-webkit-background-size:contain;
	background-size: contain; 
	-moz-background-size: contain;
	background-color: #fff;
}
#section-2{
	grid-template-areas: 
		'titre-2 titre-2'
		'section-2-1 section-2-2'
		'section-2-3 section-2-4';
	background-color: #E8E4DF;
	position:relative;
}
#section-2-1{
	grid-area: section-2-1;
	top:0;
	left:0;
	background:url(img/sergey-zolkin-m9qMoh-scfE-unsplash1920.jpg) center no-repeat; 
	-webkit-background-size:cover; 
	background-size: cover; 
	-moz-background-size: cover;
	-moz-background-size: cover;
	position:-webkit-sticky; 
	position:sticky;
	position:-moz-sticky; 
	top:0px;}
#section-2-2{
	grid-area: section-2-2;
}
#section-2-3{
	grid-area: section-2-3;
	background:url(img/b2.Perspective-vue-d-entree-2500px.jpg) center no-repeat; 
	-webkit-background-size:cover;
	background-size: cover; 
	-moz-background-size: cover;
	-moz-background-size: cover;
	position:-webkit-sticky; 
	position:sticky;
	position:-moz-sticky; 
	top:0px;}
#section-2-4{
	grid-area: section-2-4;
	background-color: #896484;
}

#section-3{
	grid-template-areas: 
		'titre-3 titre-3'
		'section-3-1 section-3-2';
	position:relative;
}
#section-3-1{
	grid-area: section-3-1;
	background:url(img/b2.Perspective-interieure-2500px.jpg) center no-repeat; 
	-webkit-background-size:cover; 
	background-size: cover;
	-moz-background-size: cover;
	position:-webkit-sticky; 
	position:sticky;
	position:-moz-sticky; 
	top:0px;
}
#section-3-2{
	grid-area: section-3-2;
}
#section-4{
	grid-template-areas: 
		'titre-4 titre-4'
		'section-4-1 section-4-2'
		'section-4-1 section-4-3'
		'section-4-1 section-4-4';
	background-color: #fff;
}
#section-4-1{
	grid-area: section-4-1;
	position:-webkit-sticky; 
	position:sticky; 
	position:-moz-sticky; 
	top:0px; 
}
#section-4-2{
	grid-area: section-4-2;
}
#section-4-3{
	grid-area: section-4-3;
}
#section-4-4{
	grid-area: section-4-4;
}
#section-5{
	grid-template-areas: 
		'titre-5 titre-5'
		'section-5-1 section-5-2';
	background-color: #C7B2C3;
}
#section-5-1{
	grid-area: section-5-1;
	position:-webkit-sticky; 
	position:sticky;
	position:-moz-sticky; 
	top:0px;
	background:url("img/serveurs-BIM.png") center no-repeat; 
	-webkit-background-size:contain; 
	background-size: contain; 
	-moz-background-size: contain;
	background-color: #C7B2C3;
	z-index:500;
}
#section-5-2{
	grid-area: section-5-2;
	background-color:#fff;
}
#section-6{
	grid-template-areas: 
		'titre-6 titre-6'
		'section-6-1 section-6-2';
	background-color: #E8E4DF;
}
#section-6-1{
	grid-area: section-6-1;
	position:relative; 
	top:0px;
	width:100%; 
	height:100vh;
}
#section-6-2{
	grid-area: section-6-2;
	background-color: #C7B2C3;
}
#section-7{
	grid-template-areas: 
		'titre-7 titre-7'
		'section-7-1 section-7-2';
	background-color: #fff;
}
#section-7-1{
	grid-area: section-7-1;
	background:url(img/b2.Perspective-depuis-le-Boulevard-Thomas-Voeckler-2500px.jpg) center no-repeat; 
	-webkit-background-size:cover; 
	background-size: cover; 
	-moz-background-size: cover;
	position:-webkit-sticky; 
	position:sticky;
	position:-moz-sticky; 
	top:0px;
	height:100vh;
}
#section-7-2{
	grid-area: section-7-2;
}
#section-8{
	display:flex; 
	flex-direction: column; 
	justify-content: center;
	grid-template-columns: 100% !important;
	grid-template-areas: 
		'section-9-1';
	background-color: #896484;
}
#section-8-1{
	display:flex; 
	flex-direction: column; 
	justify-content: center;
}

.container-img{
	width:100%;
	height:100vh;
}

.titre{ 
	position:-webkit-sticky; 
	position:sticky; 
	position:-moz-sticky; 
	right:0px; 
	top:0px; 
	z-index:999; 
	text-align: center;
	width:30vw; 
	height:0px;
	margin-left:70vw;

}
.titre h1{
	color:white;
	display:block;
	background:#896484;
	margin-top:0em; 
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#titre-2{
	grid-area: titre-2;
}
#titre-3{
	grid-area: titre-3;
}
#titre-4{
	grid-area: titre-4;
}
#titre-5{
	grid-area: titre-5;
}
#titre-6{
	grid-area: titre-6;
}
#titre-7{
	grid-area: titre-7;
}
.txt-blanc p {
	color:white;
}
.txt-blanc h2 {
	color:white;
}
	

.container-txt {
	min-height:100vh;
	height:auto;
	display:flex; 
	flex-direction:column;
	justify-content: center;
}

.coul-ecru{
	background-color:#E8E4DF;
}

.coul-gris{
	background-color: #F4F1EC; 
}
.container {
	min-height:100vh;
	height:auto;
}
#conteneur-anim-1{ 
	position:-webkit-sticky; 
	position:sticky; 
	position:-moz-sticky; 
	top:0px; 
	height:0px; 
	width:100%;
	z-index:400;
}
#diapotna2_hype_container {
	margin:auto;
	position:relative;
	min-width:100%;
	min-height:0px;
	padding-top:50%;
	height:100%;
	max-height:100vh;
	overflow:hidden;
}

.wrapper{ margin:0 auto; width: 20vw; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.logo{height:auto;}
.logo img {width:100%; height:auto; }
#logo-1{ grid-column:1/5; grid-row:1/2/;}
#logo-2{ grid-column: 1; grid-row:2/3; }
#logo-3{ grid-column: 2/5; grid-row:2/3;}


/*------------------ Photos ------------------------*/
.conteneur-personne{ z-index:9999; width:20vw; margin-left:-10vw; height:auto; padding-top:0px; position:absolute; transform: translate(0); }
.conteneur-photo{width:20vw; min-height:15vh; height:auto;}
.photo{ width:100%; padding-top:45%; overflow:hidden;}
.avatar{ background: url("img/avatar.svg") top center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain; }
.referent-avatar{ background: url("img/referent-avatar.svg") top center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain; }

#thierry{background: url("img/Thierry-Naberes.svg") center no-repeat; -webkit-background-size:contain; background-size: contain; -moz-background-size: contain;}
#elyse{background: url("img/Elise-Thullier.svg") center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain; }
#coline{background: url("img/Coline-Foulon.svg") center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain;}
#gaelle{background: url("img/Gaelle-Ladeveze.svg") center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain;}
#anabelle{background: url("img/Anabelle-Deverge.svg") center no-repeat;-webkit-background-size:contain; background-size: contain; -moz-background-size: contain;}



#titre-organigramme {width:100%; text-align:center; margin:30px auto 0 auto; }
.identite{ margin-top: 5px; text-align: center;}
.nom{font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: 600 !important; font-size:0.9em; color:#8B6384;}
.fonction{color:#AEABA7;font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: 400 !important; font-size:0.9em;}
.user{font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;font-weight: 300 !important; font-size:0.9em; color:#3A3A3A;}

#number-1{bottom:65vh; left:37.5%;}
#number-2{bottom:65vh; left:62.5%;}
#number-3{bottom:40vh; left:25%;}
#number-4{bottom:40vh; left:50%;}
#number-5{bottom:40vh; left:75%;}
#number-6{bottom:20vh; left:12.5%;}
#number-7{bottom:20vh; left:37.5%;}
#number-8{bottom:20vh; left:62.5%;}
#number-9{bottom:20vh; left:87.5%;}
#number-10{bottom:2.5vh; left:25%;}
#number-11{bottom:2.5vh; left:75%;}

@media (min-aspect-ratio: 2/1) {
	h1{ font-size:3em;}
	h2{font-size:1.5em;}
	.txt-blanc h2 {font-size:1.5em;}

.photo{  width:30%; padding-top:30%; margin:0 auto; }
.avatar{}

	
#number-1{bottom:60vh; left:37.5%;}
#number-2{bottom:60vh; left:62.5%;}
#number-3{bottom:36vh; left:25%;}
#number-4{bottom:36vh; left:50%;}
#number-5{bottom:36vh; left:75%;}
#number-6{bottom:18vh; left:12.5%;}
#number-7{bottom:18vh; left:37.5%;}
#number-8{bottom:18vh; left:62.5%;}
#number-9{bottom:18vh; left:87.5%;}
#number-10{bottom:2.5vh; left:25%;}
#number-11{bottom:2.5vh; left:75%;}
	



.partie{width:100vw;height:100vh; float:left; }
.container { display:table-cell; vertical-align:middle; }
#container-remerciements{width:auto; padding: 0 50px; }
#container-remerciements p {color:white; text-align: center; letter-spacing:1px; font-weight: 400; }
#container-contact{width:100%; position:absolute; bottom:50px;}

#logo{margin:100px auto 20px auto; 
	background:url(img/tna-architectes-blanc.png) center no-repeat; 
	-webkit-background-size:contain; 
	background-size: contain; 
	-moz-background-size: contain;
	width:100%; 
	height:200px;}
#logo img{width:10%}

#adresse{
	width: 100vh;
	margin:0 auto; 
	texte-align:center;
}
#adresse p {color:white; text-align: center; letter-spacing:3px; font-weight: 500;}
#adresse a {color:white; text-decoration: none;}

#animation-1 {
	 height:100vh;
	overflow: hidden;
}





#calendrier{ 
display: grid; 
grid-template-columns: 25% 75%; 
grid-column-gap: 10px;
grid-row-gap: 10px; 
	margin: 20px 0;
}

#a-2014-1{	
	grid-area: 1 / 1 / 2 / 2;
}
#a-2014-2{	
	grid-area: 1 / 2 / 2 / 3;
}
#a-2015-1{	
	grid-area: 2 / 1 / 3 / 2;
}
#a-2015-2{	
	grid-area: 2 / 2 / 3 / 3;
}
#a-2016-1{	
	grid-area: 3 / 1 / 4 / 2;
}
#a-2016-2{	
	grid-area: 3 / 2 / 4 / 3; 
}
#a-2019-1{	
	 grid-area: 4 / 1 / 5 / 2; 
}
#a-2019-2{	
	grid-area: 4 / 2 / 5 / 3; 
}
#a-2020-1{	
	grid-area: 5 / 1 / 6 / 2;
}
#a-2020-2{	
	grid-area: 5 / 2 / 6 / 3;
}

.tablo-coul{
	font-weight:700;
	font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;
	line-height:1.5;
	font-size:0.9em; 
	text-align: right;
	color:#8B6384;
	width:auto;
	border-right: 2px solid #896484;
	padding-right:10px;
}
.tablo-noir{
	font-weight:400;
	font-family:'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif;
	line-height:1.5;
	font-size:0.9em; 
	text-align: left;
	color:#333;	
	width:auto;
}