/*:root {
  --color: white;
  --bg-color: black;
  --low-color-color: #999;
}*/
.white_page {
  --color: black;
  --bg-color: white;
  --low-color: #00ADEF;
}
.black_page {
  --color: white;
  --bg-color: black;
  --low-color: #00ADEF;
}

html, body { 
  /*font-family: 'basier_circle', Helvetica, Arial, sans-serif;*/
  font-family: 'silka', Helvetica, Arial, sans-serif;
  width:100%; height:100%; 
  margin:0; padding:0; 
  background-color: var(--bg-color); 
  color: var(--color);
  /*font-size: 14px;*/
}

*, *:before, *:after {
    box-sizing: border-box;
    outline:none; /* pas de cadre de sélection */
}

ul, li { list-style:none; margin:0; padding:0; }

a { text-decoration: none; color: var(--low-color); }
a:hover { /*text-decoration: underline;*/ }

strong *, strong { font-weight:bold; }

.hidden { display:none; } .clear { clear:both; }
.abs { position:absolute; left:0; top:0; } .rel { position: relative; }
.pointer { cursor:pointer; } .left { float: left; } .right { float: right; }
.upper, .upper * { text-transform: uppercase; } .nopper, .nopper * { text-transform: none; } 
.t-center { text-align: center; } .t-right { text-align: right; }
.through { pointer-events: none; }
.noselect { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; }
.img-cover, .img-cover img { object-fit:cover; }
.bold { font-weight:bold; } .weight800 { font-weight:800; } .weight900 { font-weight:900; }
 .weight100 { font-weight:100; } .weight200 { font-weight:200; }
/* */


/* grid lover */
html, .root {
  font-size: 12px;
  line-height: 20px;
}
body, .article {
  font-size: 1rem;
  line-height: 1.3333333rem;
}
h1, .h1 {
  font-size: 4.2666667rem;
  line-height: 5.3333333rem;
  padding-top: 1.3333333rem; margin-top:0;
  margin-bottom: 2.6666666rem;
}
h2, .h2 {
  font-size: 2.6rem;
  line-height: 2.6666667rem;
  margin-top: 1.3333333rem;
  margin-bottom: 1.3333333rem;
}
h3, .h3 {
  font-size: 1.6rem;
  line-height: 2rem; /*2.6666667rem;*/
  margin-top: 1.3333333rem;
  margin-bottom: 0rem;
}
h4, .h4 {
  font-size: 1.3rem; font-weight:600;
  line-height: 1.3333333rem;
  margin-top: 1.3333333rem;
  margin-bottom: 1.3333333rem;
}
h5, .h5 {
  font-size: 1rem;
  line-height: 1.3333333rem;
  margin-top: 1.3333333rem;
  margin-bottom: 0rem;
}
.small {
  font-size: .9rem;
  line-height: 1.2777778rem;
  margin-top: 1.2777778rem;
  margin-bottom: 0rem;
}
p, ul, ol, pre, table, blockquote {
  margin-top: 0rem;
  margin-bottom: 1.3333333rem;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Let's make sure all's aligned */
hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}
/*a,*/ b, i, strong, em, small, code {
  line-height: 0;
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}


/* */

.max700 { max-width:700px; }
.max600 { max-width:600px; }
.max500 { max-width:500px; }

.left0 { margin-left:0vw; }
.left5 { margin-left:5vw; }
.left10 { margin-left:10vw; }
.left15 { margin-left:15vw; }
.left20 { margin-left:20vw; }
.left30 { margin-left:30vw; }
.left40 { margin-left:40vw; }
.left50 { margin-left:50vw; }

.w50 { width:50%; }

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



/* colors stuff */

main, header, footer { background-color:var(--bg-color); color:var(--color);  }
main a, header a, footer a { color:var(--color);  }
.invert-colors { background-color:var(--color); color:var(--bg-color); }
.invert-colors a { color:var(--bg-color); }
.invert-colors a:hover { color:var(--low-color); }
.low-colors { background-color:var(--low-color); color:var(--color); }
.low-colors a { color:var(--color); }



/* main stuff */

main { width:100%; padding:2.5rem; }

header { position: fixed; left:0; top:0; width:100%; z-index:100;
  padding:0.75rem 2.5rem .8rem 2.5rem; }
header h1 { margin:0; padding:0; position: absolute; /*font-size:3.75rem;*/ }

nav { float:right; }
nav ul, nav li, nav .h2 { margin:0; padding:0; }
nav li.h2 { display:inline-block; margin-top:1.35rem; /*font-weight:600;*/ }
nav li:first-child:after { content:'/'; margin-left:0.5rem; }
nav li a { padding:0 1rem; }
nav li a:hover { color:var(--low-color); }
nav li.active {}
nav li.active a { font-weight:700; color:var(--low-color); /*text-decoration: underline;*/ }

#sub-nav-technique { position: absolute; right:2rem; top:8.5rem; width:14.5rem; 
  /*text-align:right;*/ z-index:5; }
#sub-nav-technique li { margin:0rem 0; padding:0; }
#sub-nav-technique li a { font-weight:700; }
#sub-nav-technique li a:hover { color:var(--low-color); }
#sub-nav-technique li.active a { color:var(--low-color); /*text-decoration: underline;*/ }

footer, footer.small { text-align:center; padding:0 2.5rem; margin:0; }
footer ul { margin:0; padding:2.5rem 0; }
footer li { display:inline-block; margin: 0 4rem 0 0; font-weight:400; font-size:1.05rem; }
footer .contact-link { /*text-decoration: underline;*/ }
footer a:hover { color:var(--low-color); }

section { padding:15rem 0 10rem; }

section .introduction { margin-bottom:10rem; width:60%; max-width:1000px; }
section .introduction h2 { font-weight:900; }
section .introduction h3 { font-weight:600; /*line-height:2.3rem;*/ }

article a:hover { color:var(--low-color); }

article { padding:4rem 0; margin:0rem 0; position:relative; z-index:1; }
/*article:hover { z-index:2; }*/
.projet article { padding-top:0; }

article .bloc { margin: 2rem 0; }

article .annee { margin:0 0 0 0rem; font-weight:600; }

article .bloc-texte {/* margin-bottom:6rem;*/ max-width:900px; }
article .bloc-texte p { font-size:1.1rem; line-height:1.4em; }
article .bloc-texte h3 { margin-bottom:1.3333333rem; }
article .bloc-texte ul { padding: 0 0 0 .9rem; }
article .bloc-texte li { font-size:1.1rem; list-style:disc; margin: 0rem 0 .3333333rem 0;
		padding-left: .5rem; }

article .bloc-infos { position:relative; z-index:2; }
article .bloc-infos h2 { margin:0rem 0 0 0; }
article .bloc-infos h3 { margin:0rem 0 0 0rem; font-weight:200; }
.projet article .bloc-infos h2 { margin:1.3333333rem 0; }

article .bloc-siblings { margin-top:12rem; }
article .bloc-siblings .next { float:right; }
article .bloc-siblings .sibling .title { line-height:1em; margin:.55rem 0 0 0; }

article .bloc-siblings .sibling { position: relative; display:inline-block; max-width:50%; }
article .bloc-siblings .prev { padding-left:3.25rem; }
article .bloc-siblings .prev div:before { content:'←'; display:block; 
  font-size:2.5rem;
  position: absolute; left:0; top:2.7rem; }
article .bloc-siblings .next { padding-right:3.25rem; }
article .bloc-siblings .next div:after { content:'→'; display:block; 
  font-size:2.5rem;
  position: absolute; right:0; top:2.7rem; }

article .menu-siblings { width:50%; /*margin-left:auto; margin-right:auto;*/
  margin-left:50%; margin-top:12rem; }
article .menu-siblings li { font-weight:500; margin:0 0 0 1em; padding-left:.25em; list-style: disc; }

@media screen and (max-width: 550px){
  article .menu-siblings { width:80%; margin-left:10%; }
}

article .bloc-liens { padding:1.5rem; max-width:500px; margin-bottom:6rem; font-size:1.25rem;
	border-radius:1rem; }
article .bloc-liens .titre { margin:.5rem 0 .75rem 0; font-size:1.7rem; font-weight:700; letter-spacing:0.01em; }
article .bloc-liens li { padding-left:.5rem; }
article .bloc-liens li a { display:block; width:100%; /*color:var(--low-color);*/ }
article .bloc-liens li a:hover { color:var(--low-color); }
article .bloc-liens li a:before { content:'→'; margin-right:.5em; }

article .bloc-pj { padding:1.5rem; }


/*article .media { width:100%; position: absolute; z-index:1;
  left:100%; top:0; }*/

article .bloc.diaporama { width:100%; max-width:1200px; height:0; padding-top:60%; position: relative; 
  cursor:pointer; }
article .diaporama img { max-width:100%; max-height:100%; opacity: 0;
	object-fit:contain; object-position:left top; border-radius:1rem; }
article .bloc.diaporama.single { cursor:inherit; }
article .diaporama.single img { opacity:1; }

#projet-art article .bloc.diaporama { max-width:none; margin:0; }

article .bloc.video { width:70%; max-width:1000px; margin:0 0 6rem 0;
  height:0; padding-top:40%; }
article .video { position: relative; padding-top:60%; }
article .video iframe { position:absolute; width:100%; height:100%; left:0; top:0; border-radius:1rem; }
.black_page #projet-art .video { /*border:solid 1px white;*/ }

.diaporama { position: relative; }
.diaporama img { position: absolute; left:0; top:0; }
/*.diaporama img:first-child { position: relative; }*/

article .bloc-logos {}
article .bloc-logos li { display:inline-block; }
article .bloc-logos li img { max-height:160px; border-radius:.75rem; }

aside.activites { margin:8rem 0 4rem 0; }
aside.activites .bloc-sub-page { width:45%; margin-right:5%; padding:2rem; float:left;
	border-radius: 1rem; }
aside.activites .bloc-sub-page h1 { margin-top:0; }

.more { margin-left:1em; font-weight: 500; }
.more:before { content:'→'; margin-right:.5em; }


/* specific stuff */

main#index, #index header { background:none; }
#index header .titrage { position: absolute; left:3.5rem; top:2.5rem; }
#index header h1 { position: static; }
#index header h2 { margin:0; }
#index nav { float:none; }
#index nav li a { padding:0; }
#index nav li:first-child::after { content: none; }

#index nav li {}

#index header, #index #diaporama { position: absolute; z-index:2;
  left:0; top:0; width:100vw; height:100vh; }
#index #diaporama { z-index:1; }
#index header { z-index:2; padding-top:2rem; background:none; }

#index nav li { position:absolute; left:0; top:0; width:50vw; height:100vh; }
#index nav li.h1 { margin:0; }
#index nav li.first {}
#index nav li.second { left:50vw; text-align:right; }
#index nav li a { display:block; position: absolute; width:100%; height:100%; 
  left:0; top:0; }
#index nav li a span { display:block; 
  position: absolute; left:1rem; bottom:2.5rem;
  font-weight:600; line-height:1em; margin:2.5rem; }
#index nav li.second a span { left:auto; right:1rem; }
#index nav li a:hover span { color:var(--low-color) !important; /*text-decoration: underline; /*color:white;*/ }

#index #diaporama { position: absolute; z-index:1;
  left:0; top:0; width:100vw; height:100vh; }
#index #diaporama .half, #index #diaporama .half img { position: absolute; z-index:1;
  left:0; top:0; width:100%; height:100%; }

#index #diaporama .technique { display:none; background:black; }
#index #diaporama .technique img { object-fit:contain; }
#index #diaporama img { opacity:0; }

@media screen and (max-width: 690px){
  #index nav li, #index nav li a, #index nav li a span { position:static; width:auto; height:auto; text-align:left; }
  #index nav ul { padding-top: 9rem; }
  #index header .titrage { left: 2.5rem; }
}




/* cv */
section.technique {}
section.technique article { width:90%; max-width:1100px; margin-left:auto; margin-right:auto; 
  position: relative; padding:2rem 0; }
section.technique article a { display:block; width:100%; }
section.technique .infos { width:70%; /*max-width:800px;*/ padding-right:3rem; }
section.technique .infos h2 { font-size:2rem; margin: .25rem 0 .25rem 0; }
section.technique .infos h3 { font-size:1.2rem; line-height:1.5em; font-weight:500;
  margin-top:0; }
section.technique .more { margin:.75rem 0 0 3.5rem; }
section.technique .bloc-logos { position: absolute; left:70%; top:0;
  width:30%; padding-left:2rem; }
section.technique article .bloc-logos li img { max-height:120px; }


section#projet-technique .bloc-logos, section#projet-technique .bloc-liens {
  float:left; margin-right:4rem; }


section.etalonnage {}
section.etalonnage article { /*width:90%;*/ max-width:1110px; margin:0 auto; }
section.etalonnage article .bloc-logos { margin-top:1rem; width:53%; position: absolute; right:0; top:5rem; }
section.etalonnage article .infos { width:47%; }
section.etalonnage article .bloc-logos li { width:48%; margin-left:1.5%; }
section.etalonnage article .bloc-logos li img { width:100%; }

#projet-etalonnage {}
#projet-etalonnage .bloc-logos { max-width:1100px; }
#projet-etalonnage .bloc-logos li { width:48%; margin: 0 1% 1% 0; display:inline-block;
  max-width:740px; }
#projet-etalonnage .bloc-logos li img { width:100%; max-height:none; }
#projet-etalonnage {}
#projet-etalonnage {}

@media screen and (max-width: 700px){
  section.etalonnage article .infos, section.etalonnage article .bloc-logos {
    width:100%; position: static; }
  section.etalonnage article .bloc-logos li { margin-right:1.5%; margin-left:0; }
}


section.ateliers {}
section.ateliers article { width:100%; max-width:1010px; margin:0 auto; }
section.ateliers article .bloc-logos { margin:.75rem 0 0 0; }
section.ateliers article .bloc-logos img { margin:.35rem; }
/*section.ateliers article .more { font-size:1.1rem; }*/

@media screen and (max-width: 550px){
  .ateliers article .bloc-logos li { width:45%; }
  .ateliers article .bloc-logos li img { width:100%; }
}




/*
#art .moz article { width:80%; position: relative; padding:6rem 0; margin:4rem 0; }
#art .moz article a {}
#art .moz article .infos { width:45%; padding-right:0.5rem; }
#art .moz article .media { width:55%; height:100%; position: absolute; right:0; top:0; }
#art .moz article .media.diaporama { padding-top:30%; }
#art .moz article .video { height:0; padding-top:40%; }
#art .moz article .infos.no-media { width:100%; }
#art .moz article .diaporama img { max-height:100%; object-fit:contain; }
#art .moz article {}
#art .moz article.margin5 { margin-left:5%; }
#art .moz article.margin10 { margin-left:10%; }
#art .moz article.margin15 { margin-left:15%; }
#art .moz article.margin20 { margin-left:20%; }

#art .moz article .diaporama img { filter: grayscale(100%); transition-duration:.3s; }
#art .moz article:hover .diaporama img { filter: grayscale(0%); transition-duration:.3s; }
*/

#art .moz {}
#art .moz article { width:360px; float:left; margin:0; padding:0; }
#art .moz article .content { position: relative; margin:30px 60px 25px 0; padding-bottom:30px; }
#art .moz article .diaporama { padding-top:0; height:auto; margin:0; }
#art .moz article .diaporama img { width:100%; height:auto; filter:grayscale(100%); transition-duration:.35s; 
	border-radius: 1rem; }
#art .moz article:hover .diaporama img { filter:grayscale(0%); transition-duration:.35s; }
#art .moz article .diaporama img:first-child { position:static; }
#art .moz article .infos h2 { font-size:2.2rem; margin:1rem 0 .75rem 0; }
#art .moz article .infos h3 { font-size:1.4rem; line-height:1.5em; font-weight:300; margin:0; }
#art .moz article .infos .annee { position:absolute; bottom:0; left:0; }
#art .moz article.teas_texte .content { background-color:var(--color); padding:1rem 1.5rem 4rem 1.5rem; }
#art .moz article.teas_texte h2, #art .moz article.teas_texte h3, #art .moz article.teas_texte .annee { color:var(--bg-color); }
#art .moz article.teas_texte:hover h2, #art .moz article.teas_texte:hover h3, #art .moz article.teas_texte:hover .annee { color:var(--low-color); }
#art .moz article.teas_texte .annee { left:1.5rem; bottom:1.5rem; }

/* */

@media screen and (max-width: 1000px){
  section .introduction { width:80%; }
}
@media screen and (max-width: 820px){
  header { position:static; padding:0; }
  header h1 { position: static; }
  nav { float:none; }
  nav li a { padding:0; }
  #sub-nav-technique { position: static; margin:1.5rem 0 0 2.5rem; }
  /*#sub-nav-technique li { display:inline-block; }*/
  section { padding-top:7.5rem; }
  section .introduction { margin-left:auto; margin-right:auto; }

  section.technique article { width:100%; max-width:600px; margin-left:0; margin-right:0; }
  section.technique .bloc-logos { display:none; /*position: static; margin:0; width:100%;*/ }
  section.technique .infos { width:100%; padding-right:0; }
}
@media screen and (max-width: 650px){
  section .introduction { width:100%; }
  article .bloc.video { width:100%; }
  #art .moz article { width:100%; max-width:400px; float:none; margin-left:auto; margin-right:auto; }
}
@media screen and (max-width: 600px){
  aside.activites .bloc-sub-page { float:none; margin-bottom:1rem; width:100%; max-width:400px; }
}

@media screen and (max-width: 400px){
  #art .moz article .content { margin-right:0; }
}