/*************************************************
 * CSS complémentaire au simulateur astronomique *
 *************************************************/
body
{
 overflow-x : hidden;
 transition : background-color 10s;
}

header h1 span:last-of-type
{
 display : none;
}

header + section article:first-of-type
{
 opacity : 0;
 visibility : hidden;
 transition : opacity 15s 10s;
}

header + section article:nth-of-type(4)
{
 transition : background-color 2s 1s, box-shadow 3s 2s;
}

nav, nav.small
{
 border : none;
 transform-origin : top left;
 transition : transform 2s 1s ease-out, box-shadow 4s 3s, top 750ms 500ms ease-in;
}

nav:first-of-type
{
 display : none;
}

nav:first-of-type:hover
{
 box-shadow : #000000 0.5vmin 0.5vmin 0.8vmin;
 transform : scale(4.5);
 transition : transform 10s 10s, box-shadow 3s 4s;
 z-index : 14;
}

nav:first-of-type p
{
 transition : opacity 3s 2s, background-color 1s;
}

/*nav:first-of-type div
{
 display : none;
 opacity : 0;
 background-color : #0AF;
 border : 3px solid #FF0;
 box-shadow : #00A 0.5vmin 0.5vmin 0.8vmin;
 transition : opacity 3s, box-shadow 5s 15s, border-color 10s 20s, background-color 20s 40s;
}*/

nav:first-of-type canvas
{
 opacity : 0;
 width : 100%;
 transition : opacity 40s ease-in;
}

nav:nth-of-type(2)
{
 top : 40vmin;
 z-index : 1;
}

table tbody tr td
{
 vertical-align : middle;
 transition : background-color 5s;
}

table tbody tr td input[type=range]
{
 width : 98%;
}

div canvas
{
 width : 100%;
 height : 100%;
}

section article#menu
{
 flex : 1;
 display : flex;
 flex-wrap : wrap;
 justify-content : space-around;
 background-color : rgba(0, 0, 64, 1);
 perspective : 60vmin;
 z-index : 12;
}

section article#menu div
{
 cursor : url("../pics/cur/belge.cur"), auto;
 border-radius : 0.8vmin;
 border : 0.3vmin outset rgba(0, 0, 0, 0.8);
 padding : 0;
 opacity : 0;
 width : 8vmin;
 height : 8vmin;
 transition : transform 2s 1s, width 1s 9s, height 1s 9s, border 1s, background-color 3s 24s, border-radius 1s 6s, box-shadow 2s 12s;
 /*animation : anim3dGraphe 3s ease-in;*/
}

section article#menu ~ article
{
 display : none;
 opacity : 0;
 text-align : center;
 min-width : 12vmin;
 padding : 1vmin;
 font-size : 0.8em;
 background-color : rgba(255, 255, 0, 0.3);
 transition : background-color 6s, min-width 4s 1s ease-in, opacity 4s 1s;
}

section article#menu div:hover
{
 box-shadow : rgba(255, 255, 64, 0.6) 0.2vmin 0.2vmin 0.4vmin;
 background-color : rgba(0, 80, 64, 0.8);
 border-radius : 1.5vmin;
 border : 0.1vmin outset rgba(255, 255, 255, 0.6);
 width : 7vmin;
 z-index : 13;
 transition : transform 1s 1s, background-color 500ms, border 1s, border-radius 500ms 1s, box-shadow 500ms 300ms;
 transform : scale(2);
}

section > article#presentoir
{
 display : flex;
 flex : 1;
 flex-wrap : wrap-reverse;
 justify-content : space-around;
 align-items : center;
 padding : 0.4vmin;
 background-color : rgba(0, 32, 64, 0.9);
 transition : background-color 3s, box-shadow 3s 5s, border-color 6s 10s;
}

section > article#presentAlgol, section > article#presentOmbres
{
 display : none;
 flex : 1;
 flex-wrap : wrap-reverse;
 padding : 0.5vmin;
 background-color : rgba(0, 128, 92, 0.2);
 align-items : center;
 justify-content : space-around;
}

section > article#presentoir div
{
 background-color : rgba(0, 0, 0, 0.5);
 box-shadow : #000032 0.3vmin 0.3vmin 1vmin;
 margin : 0.1vmin;
 transform-origin : top;
 transition : border-radius 3s 4s, transform 1s, box-shadow 2s 2s, background-color 3s, opacity 40s ease-in;
}

section > article#presentoir div:hover
{
 background-color : #000000;
 border-radius : 2vmin;
 box-shadow : #AAAA80 0.3vmin 0.3vmin 0.5vmin;
 z-index : 5;
 transition : border-radius 3s, transform 6s 8s, box-shadow 3s 20s, background-color 3s 15s, opacity 1s ease-in;
 transform : scale(1.8);
}

section > article#presentAlgol > div, section article#presentOmbres > div
{
 text-align : center;
 box-shadow : #000032 0.3vmin 0.3vmin 1vmin;
 margin : 1vmin;
 width : 30vmin;
 height : 30vmin;
 transform-origin : top;
 transition : transform 2s 1s, box-shadow 2s 10s, background-color 3s, opacity 20s ease-in;
}

section > article#presentOmbres > div > div > span
{
 color : rgba(48, 48, 48, 0.5);
}

section > article#presentoir div canvas
{
 transition : border-radius 3s;
}

section > article#presentoir div canvas:hover
{
 border-radius : 2vmin;
}

article#artiGraphes table tbody tr td input[type=button]
{
 min-height : 3vmin;
 min-width : 8vmin;
}

section article#artiLocal
{
 min-width : 35vmin;
}

section article#artiTemps
{
 transition : all 10s, background-color 15s;
}

section article#artiTemps tr td
{
 transition : box-shadow 3s, background-color 8s ease-out;
}

section article#artiTemps div:last-of-type
{
 width : 100%;
 margin : auto;
 max-width : 50vmin;
 display : flex;
 flex-wrap : wrap;
 justify-content : space-around;
}

section article#artiTemps div:last-of-type input[type=button]
{
 margin : 0.3vmin;
}

article#artiAge
{
 opacity : 0;
 min-width : 14vmin;
 font-size : 0.9em;
 transition : all 4s 8s, opacity 3s ease-in;
}

article#artiAge table
{
 white-space : nowrap;
 font-size : 0.9em;
}

article#artiAge table tbody tr td:last-of-type
{
 min-width : calc(35px + 3vmin);
 text-align : right;
}

div.face
{
 background-position : center;
 background-repeat : no-repeat;
}

@keyframes anim3dGraphe
{
 from 
 {
  opacity : 0;
  transform : rotateY(-20deg) rotateX(60deg) translateY(20vmin) rotateZ(90deg);
 }
 
 10%
 {
  opacity : 1;
  transform : rotateY(-20deg) rotateX(60deg) translateY(20vmin) rotateZ(90deg);
 }
 
 70%
 {
  opacity : 1;
  transform : rotateY(-20deg) rotateX(60deg) translateY(20vmin) rotateZ(90deg);
 }
 
 80%
 {
  opacity : 1;
  transform : rotateY(-5deg) rotateX(40deg);
 }
 
 90%
 {
  opacity : 1;
  transform : rotateY(-5deg);
 }
 
 to
 {
  opacity : 1;
 }
}