/************************************
 * CSS commune, datée du 24/11/2023 *
 ************************************/
body
{
 font-size : calc(7px + 1vmin);
 color : #000000;
 background-color : #EEEEEE;
}

body header
{
 background-color : rgba(96, 192, 192, 0.2);
 border : solid 1px rgba(0, 255, 255, 0.3);
 top : 0;
 width : calc(100% - 19px);
 height : 7.5vmin;
 position : fixed;
 z-index : 10;
 transition : height 1s ease-in, background-color 3s 2s;
}

body header.small
{
 background-color : rgba(96, 192, 192, 0.6);
 height : 3.5vmin;
}

body header h1
{
 font-size : 3vmin;
 margin-top : 1.8vmin;
 transition : all 1s ease-in;
}

body header.small h1
{
 font-size : 2vmin;
 margin-top : 0.5vmin;
}

body footer
{
 background-image : linear-gradient(to right, transparent 5%, rgba(0, 200, 150, 0.9), transparent 95%);
 bottom : 0;
 font-size : calc(7px + 1vmin);
 left : 0px;
 margin : 0;
 padding : 5px;
 position: fixed;
 text-align : center;
 width : 100%;
 z-index : 10;
 transition : opacity 2s 2s;
}

/*section.accord
{
 max-height : 200vh;
}*/

header + section
{
 background-color : rgba(32, 153, 198, 0.2);
 top : 8.12vmin;
 width : calc(100% - 39px);
 justify-content : space-between;
 height : 2.7vmin;
 position : fixed;
 margin-top : 0;
 margin-left : 0;
 margin-right : 0.1vw;
 padding : 0.5vmin;
 padding-left : 1.8vmin;
 z-index : 10;
 transition : top 1s ease-in, background-color 8s 3s ease-in;
}

header + section.small
{
 background-color : rgba(96, 198, 153, 0.4);
 top : 4vmin;
}

header + section.small:hover
{
 background-color : rgba(255, 255, 255, 0.9);
 transition : background-color 1s;
}

section.aide article
{
 width : 100%;
}

section
{
 background-color : rgba(220, 220, 220, 0.2);
 border : solid 1px rgba(0, 192, 192, 0.3);
 display : flex;
 flex-direction : row;
 flex-wrap : wrap;
 justify-content : space-around;
 margin-top : 5px;
 margin-left : calc(10px + 16.5vmin);
 margin-right : 0.1vw;
 min-width : 400px;
 transition : transform 2s, margin-left 3s 4s, max-height 2s ease-out, margin-top 2s, font-size 3s 8s;
}

section article
{
 background-color : rgba(220, 240, 240, 0.3);
 border : solid 1px rgba(0, 255, 0, 0.2);
 min-width : 46vmin;
 margin : 0.4vmin;
}

header + section article
{
 margin-top : 0.15vmin;
 margin-left : 0;
 margin-right : 0;
 font-size : 1.8vmin;
 background-color : rgba(150, 150, 150, 0.3);
 min-width : 2vmin;
 height : 2.4vmin;
}

header + section article.artiDemo
{
 background-color : #0FF;
 box-shadow : #000 0.2vmin 0.2vmin 0.2vmin;
 transition : background-color 3s 1s, box-shadow 2s, transform 6s 5s;
}

header + section article.artiDemo:hover
{
 background-color : #0F0;
 box-shadow : #0AF 0.5vmin 0.5vmin 0.8vmin;
 transform : scale(2.5) rotate(25deg);
 transition : background-color 500ms, box-shadow 500ms 250ms, transform 500ms 2s;
}

section:nth-of-type(1n+2) article
{
 box-shadow : rgba(128, 128, 128, 0.6) 3px 3px 5px;
 border-radius : 1.5vmin;
 transition : background-color 10s 5s ease-out, border-color 4s 5s, box-shadow 3s ease-out;
}

section:nth-of-type(1n+2) article:hover
{
 background-color : rgba(255, 255, 255, 0.9);
 border-color : #FFAA00;
 box-shadow : rgba(0, 0, 0, 0.8) 3px 3px 5px;
 transition : background-color 1s, border-color 4s, box-shadow 1s;
}

section article.artiFlex
{
 /*background-color : rgba(0, 255, 255, 0.3);*/
 flex : 1;
 display : flex;
 flex-wrap : wrap-reverse;
 justify-content : space-around;
 align-content : flex-end;
}

section article.avecImage
{
 background-color : rgba(0, 32, 32, 0.8);
 text-align : right;
 min-width : initial;
}

section article.avecImage:hover
{
 background-color : #111;
}

section article.artiErreur
{
 background-color : rgba(255, 0, 0, 0.2);
 box-shadow : #F00 0.3vmin 0.3vmin 0.4vmin 0.6vmin, #FF0 0.8vmin 0.8vmin 1vmin 1.1vmin;
}

section:last-of-type
{
 margin-bottom : 10vmin;
}

aside
{
 position : fixed;
 top : 12.5vmin;
 right : -28vw;
 width : 30vw;
 height : 75vmin;
 background-color : rgba(0, 128, 0, 0.2);
 border: solid 1px rgba(255, 255, 0, 0.3);
 border-radius : 2vmin;
 z-index : 4;
 transition : right 3s 4s ease-in, background-color 3s 2s, border-radius 1s, box-shadow 4s, width 5s 3s;
}

aside:hover
{
 right : 0.3vw;
 background-color : rgba(220, 255, 255, 0.9);
 border: solid 1px rgba(128, 255, 0, 0.8);
 border-radius : 0.5vmin;
 box-shadow : rgba(0, 0, 0, 0.6) 1vmin 1vmin 2vmin;
 transition : right 500ms, background-color 2s 2s, border-radius 1s 2s, box-shadow 2s 1s, width 5s 3s;
}

aside div.scrollable
{
 overflow : auto;
 resize : vertical;
 max-height : 90%;
}

aside table
{
 width : 99%;
}

aside table thead tr th
{
 vertical-align : middle;
}

aside table tr th input[type=button]
{
 width : 85%;
 height : 4vmin;
}

aside table tr td input[type=button]
{
 width : 99%;
}

nav.small
{
 top : 8.5vmin;
}

nav
{
 background-color : rgba(255, 255, 255, 0.7);
 border : solid 1px rgba(0, 0, 128, 0.25);
 color : #000000;
 width : 17vmin;
 top : 12.5vmin;
 left : 8px;
 font-size : 1.8vmin;
 position : fixed;
 padding : 0px;
 z-index : 3;
 transform-origin : top left;
 transition : left 2s 3s ease-in, width 3s 4s ease-out, font-size 3s 4s, background-color 2s 4s, top 1s ease-in, box-shadow 10s 8s ease-out, transform 3s 3s;
}

nav p
{
 transition : background-color 2s ease-in, box-shadow 1s;
}

nav p:hover
{
 background-color : rgba(0, 64, 128, 0.3);
 box-shadow : #000 0.4vmin 0.4vmin 0.6vmin;
 transition : background-color 2s 3s ease-out, box-shadow 1s 4s ease-in;
}

nav:first-of-type p:first-of-type
{
 margin-top : 0;
}

nav table
{
 width : 100%;
 font-size : 0.9em;
}

nav:first-of-type div.scrollable
{
 max-height : 40vmin;
 overflow : auto;
}

nav ul
{
 margin-top : 0px;
 margin-bottom : 0px;
 margin-left : 1vmin;
 padding-left : 1.5vmin;
}

nav ul li
{
 margin-bottom : 0.5vmin;
}

nav:nth-of-type(2)
{
 top : 55vmin;
}

nav:nth-of-type(2).small
{
 top : 45vmin;
}

nav + section
{
 margin-top : 12.5vmin;
}

nav input[type=button]
{
 display : block;
 background-color : #AAAAAA;
 font-size : 1.5vmin;
 margin : 1vmin auto 1vmin auto;
 width : 15vmin;
 height : 3vmin;
 transition : width 3s 4s ease-in;
}

nav input[type=button]:hover
{
 background-color : #CCFFFF;
 box-shadow : 4px 4px 8px #000000;
 color : #000000;
 transition : none;
}

nav ~ section article div.scrollable
{
 min-height : 20vh;
 max-height : 60vh;
 overflow : auto;
 resize : vertical;
}

a
{
 transition : background-color 3s 5s;
}

a:link
{
 color : #0000AA;
}

a:visited
{
 color : #AA00AA;
}

a:hover
{
 background-color : rgba(0, 255, 255, 0.3);
 transition : none;
}

a:active
{
 color : #FFFFFF;
}

section:nth-of-type(1n+2) table
{
 margin : 1vmin auto 3vmin auto;
 width : 98%;
 font-size : calc(7px + 1vmin);
 border : dotted 1px #000000;
 border-spacing : 1px;
}

section article.artiFlex table
{
 width : initial;
}

table.claire
{
 border-collapse : collapse;
}

table.claire td
{
 border-style : dotted;
 border-color : rgba(64, 128, 128, 0.8);
}

table.claire > tbody > tr:hover
{
 background-color : #CFF;
 transition : background-color 2s 1s ease-in;
}

table.claire > tbody > tr
{
 transition: background-color 3s 4s ease-out;
}

table.rayee tr td
{
 border : none;
}

table.rayee > tbody > tr:nth-child(2n)
{
 background-color : rgba(0, 0, 0, 0.1);
}

table.rayee > tbody > tr:nth-child(2n):hover
{
 background-color : rgba(48, 48, 80, 0.2);
 transition : background-color 1s 200ms;
}

table.rayee > tbody > tr:nth-child(2n+1)
{
 background-color : transparent;
}

table.rayee > tbody > tr:nth-child(2n+1):hover
{
 /*color : #FFFFFF;*/
 background-color : rgba(0, 128, 192, 0.2);
 transition : background-color 1s 200ms, color 1s 1s;
}

table > tbody > tr
{
 transition : background-color 1s, color 3s 2s, transform 2s ease-in;
}

table > tbody > tr.editLigne
{
 background-color : #FDFDCA;
 transition : background-color 3s 2s, box-shadow 4s;
}

table > tbody > tr.editLigne:hover
{
 background-color : #FFFFFF;
 box-shadow:#000000 0.5vmin 0.5vmin 0.9vmin;
 color : #000;
 z-index : 2;
 transition : background-color 1s, box-shadow 1s;
}

table tbody tr.ligneJaune
{
  color : #0000CC;
  background-color : rgba(255, 255, 0, 0.4) !important;
}

table tbody tr.ligneJaune:hover
{
 color : #00AA00;
 background-color : rgba(255, 255, 0, 0.8) !important;
}

table tbody tr.ligneBleue
{
  color : #000000;
  background-color : rgba(64, 64, 255, 0.3) !important;
}
table tbody tr.ligneBleue:hover
{
 color : #FFFF00;
 background-color : rgba(0, 0, 64, 0.6) !important;
}

table tbody tr.ligneRouge
{
  color : #000000;
  background-color : rgba(255, 128, 128, 0.5) !important;
}

table tbody tr.ligneRouge:hover
{
 color : #0000CC;
 background-color : rgba(255, 0, 0, 0.5) !important;
}

table tbody tr.ligneVerte
{
  color : #000000;
  background-color : rgba(128, 255, 128, 0.5) !important;
}

table tbody tr.ligneVerte:hover
{
 color : #0000CC;
 background-color : rgba(0, 255, 0, 0.5) !important;
}

table tfoot tr.ligneTotal, table.rayee tfoot tr.ligneTotal
{
 background-color : rgba(128, 192, 255, 0.8);
 font-size : 1.1em;
}

table tbody tr td
{
 vertical-align : top;
 border : solid 1px rgba(0, 0, 0, 0.3);
 padding-left : 2px;
 padding-right : 2px;
}

table thead tr th
{
 background-color : rgba(128, 192, 192, 0.4);
 border-style : solid;
 border-color : rgba(0, 204, 204, 0.3);
 border-width : 1px;
 vertical-align : top;
 text-align : center;
 padding : 5px;
}

td.noire
{
 color : #FFFF00;
 border-width : 1px;
 border-style : dotted;
 border-color : #484848;
 background-color : rgba(0, 0, 0, 0.3);
 padding : 3px;
}

td.blanche
{ 
 background-color : rgba(255, 255, 255, 0.6);
 border : solid 1px rgba(255, 255, 255, 0.6);
 color : #000000;
 padding : 3px;
}

td.grise
{ 
 border-color : #808080;
 border-style : solid;
 color : #000000;
 background-color : #AAAAAA;
 padding : 3px;
}

td.caseVerte
{
 border-width : 0px;
 background-color : rgba(100, 255, 100, 0.5);
}

td.caseRouge
{ 
 border-width : 0px;
 background-color : rgba(255, 0, 0, 0.4);
}

td.caseBleue
{ 
 border-width : 0;
 background-color : rgba(100, 100, 255, 0.4);
}

td.caseOrange
{
 border-width : 0;
 background-color : rgba(204, 100, 0, 0.4);
}

td.caseJaune
{
 border-width : 0;
 background-color : rgba(255, 255, 0, 0.3);
}

td.caseDoree
{
 background-color : rgba(255, 255, 0, 0.3);
 box-shadow : #000000 0.3vmin 0.3vmin 0.5vmin;
 transition : box-shadow 5s 8s, background-color 3s 2s;
}

td.caseDoree:hover
{
 background-color : #FFAA00;
 box-shadow : #FFFF00 0.3vmin 0.3vmin 0.5vmin;
 transition : box-shadow 500ms 200ms, background-color 250ms;
}

td.caseDoree:hover:before
{
 color : #FFFFFF;
}
td.caseDiscrete
{
 border : dotted 1px rgba(0, 0, 255, 0.3);
 /*border-style : none;*/
}

td.alerte
{
 border-width : 1px;
 border-style : solid;
 border-radius : 0;
 border-color : #FF0000;
 background-color : rgba(255, 192, 0, 0.5);
 box-shadow : #FFFFAA 0.5vmin 0.5vmin 0.7vmin;
 opacity : 0.8;
 transition : box-shadow 4s 4s, background-color 1s 3s, color 3s 2s, border-radius 1s 4s, border-color 2s 5s, padding 1s 7s;
}

td.alerte h2
{
 transition : color 6s 8s, text-shadow 5s 12s;
}

td.alerte:hover
{
 color:#FFFF00;
 background-color : #CC0000;
 border-radius : 1vmin;
 border-color : transparent;
 padding : 1vmin;
 box-shadow : #000000 0.3vmin 0.3vmin 0.3vmin;
 transition : box-shadow 1s 500ms, padding 1s 500ms, border-color 2s, background-color 1s, border-radius 1s 1s;
 z-index : 1;
}

td.alerte:hover h2
{
 color : #FFF;
 text-shadow : #000 5vmin 1.8vmin;
 transition : color 1s 1s, text-shadow 2s 3s;
}
   
td.secondaire
{
 color : #008064; 
}

td.degrade
{
 background-image : linear-gradient(to right, rgba(0, 0, 255, 0.4), rgba(0, 128, 128, 0.6) 20%, transparent 50%);
}

.noGsm
{
 border : dotted 1px rgba(255, 255, 255, 0.4);
 box-shadow : rgba(0, 0, 0, 0.3) 0.2vmin 0.2vmin 0.4vmin;
 /*background-image : linear-gradient(135deg, rgba(128, 128, 192, 0.1), transparent);*/
}

h1
{
 font-size : calc(12px + 2vmin);
 color : #000064;
 text-align : center;
}

h2
{
 margin : 0.8vmin;
 font-size : calc(6px + 1.4vmin);
 color : #486464;
}

h3
{
 font-size : calc(5px + 1.2vmin);
 margin : 0.3vmin;
}

h4
{
 font-size : calc(4px + 1vmin);
 margin : 0;
}

.remarque
{
 color : #FFFFFF;
}

em
{
 color : #161600;
}

pre
{
 font-size : 0.7em;
}

iframe
{
 width : 98%;
 height : 60vh;
 text-align : center;
}

input, select
{
 font-size : calc(7px + 0.8vmin);
 transition : color 3s 3s, background-color 2s 1s, opacity 3s, box-shadow 1s;
}

select
{
 background-color : transparent;
}

input:not([type=range]), select
{
 color : #000000;
 background-color : transparent;
}

input:disabled, select:disabled
{
 background-color : rgba(128, 128, 128, 0.5);
 opacity : 0.4;
}

input[type=date]
{
 min-width : 110px;
}

input[type=date]:focus
{
 background-color : rgba(0, 255, 192, 0.6);
 box-shadow : 3px 3px 6px rgba(255, 255, 0, 0.3);
 transition : color 4s 5s, background-color 3s 2s;
}

input[type=number]
{
 text-align : right;
}

input[type=submit]:hover
{
 color : #FFFF00;
 background-color : rgba(0, 255, 0, 0.5);
 transition : background-color 2s 5s, color 1s 6s;
}

input[type=reset]:hover
{
 color : #FFFF00;
 background-color : rgba(255, 0, 0, 0.5);
 transition : background-color 2s 5s, color 1s 6s;
}

input:required, select:required
{
 background-color : rgba(0, 255, 255, 0.1);
 box-shadow : #AAAACC 0.2vmin 0.2vmin 0.4vmin;
}

input:required:hover, select:required:hover
{
 background-color : rgba(0, 255, 255, 0.1);
 box-shadow : #FFFFAA 0.2vmin 0.2vmin 0.4vmin;
}

input:focus, select:focus
{
 box-shadow : #000064 0.2vmin 0.2vmin 0.4vmin;
}

.inputDore
{
 background-color : #003232;
 color : #FFFFFF;
 border-color : #FFFF00;
}

.increase
{
 width:50px;
 height:50px;
}

img#imgQr
{
 transition : opacity 5s ease-in, background-color 6s 3s ease-out, transform 5s 4s ease-in, border-radius 4s 10s ease-in, box-shadow 5s 13s;
}

img#imgQr:hover
{
 background-color : #000;
 border-radius : 50%;
 box-shadow : #000000 0.6vmin 0.6vmin 1vmin;
 transform : rotate(270deg);
 transition : transform 3s 2s ease-out, opacity 5s 3s ease-in, background-color 3s 2s, box-shadow 2s, border-radius 2s 1s;
}

fieldset
{
 margin : 1vmin;
 border-radius : 1.5vmin;
}

span#cadran
{
 transition : background-color 4s ease-in;
}

p.alerte
{
 text-align : center;
 width : 80%;
 padding : 2vmin;
 margin : auto;
 font-size : 2.5vmin;
 color : #FFA;
 background-color : rgba(255, 0, 0, 0.5);
 text-shadow : #000 0.3vmin 0.3vmin;
 box-shadow:#000 0.5vmin 0.5vmin 0.8vmin;
}

@keyframes onGlisse
{
  from
  {
    margin-left: 30%;
    width: 100%
  }
  
  to
  {
    margin-left: 0%;
    width: 100%;
  }
}

.clignoteRouge
{
 animation-name : clignoteRouge01;
 animation-delay : 6s;
 animation-duration : 3s;
 animation-direction : alternate;
 animation-iteration-count : 10;
 border-radius : 12px;
}

@keyframes clignoteRouge01
{
 from
 {
  color:#FF0000;
 }
    
 to
 {
  color:#00FFFF;
  background-color:#CC0000;
 }
}

/***********************
 * Animation keyframes *
 ***********************/
@keyframes anim3d001
{
 from
 {
  opacity : 0;
  transform : rotateX(40deg) translateX(-60vw) translateY(-60vh) rotateZ(90deg) scale(0.8);
 }
 
 30%
 {
  opacity : 1;
  transform : rotateX(40deg) translateX(-60vw) translateY(-60vh) rotateZ(90deg) scale(0.8);
 }
 
 40%
 {
  transform : rotateX(80deg) translateX(-60vw) translateY(20vh) rotateZ(-90deg) scale(0.6);
 }
 
 70%
 {
  transform : rotateX(60deg) translateX(-20vw) rotateZ(-40deg) scale(0.6);
 }
 
 80%
 {
  transform : rotateX(50deg) scale(0.6);
 }
 
 90%
 {
  transform : scale(0.8);
 }
}

@keyframes anim3d002
{
 from
 {
  transform : rotateX(-60deg) rotateY(120deg) translateX(60vmin);
 }
 
 40%
 {
  transform : rotateX(-70deg) rotateY(-20deg) rotateZ(-40deg) translateX(15vmin) translateZ(-30vmin);
 }
 
 60%
 {
  transform : rotateX(70deg) rotateY(10deg) rotateZ(30deg) translateX(20vmin) translateY(-50vmin) translateZ(40vmin);
 }
 
 80%
 {
  transform : rotateX(-120deg) rotateY(10deg) rotateZ(-60deg) translateX(30vmin);
 }
 
 to
 {
  transform : rotateX(0deg) rotateY(0deg) translateX(0px);
 }
}

@keyframes anim3d003
{
 from
 {
  transform : rotateX(180deg) rotateY(120deg) translateX(-800px) scale(0.1);
 }

 25%
 {
  transform : rotateX(240deg) rotateY(120deg) translateX(-500px) translateZ(400px) scale(0.5);
 }
 
 50%
 {
  transform : rotateX(-20deg) rotateY(60deg) rotateZ(-90deg) translateY(-300px);
 }
 
 80%
 {
  transform : rotateX(45deg) scale(0.75);
 }
}

/* Part du bas à gauche, créée pour animer l'<ARTICLE> de la facture trimestrielle, page d'accueil de Démosthène */
@keyframes anim3d004
{
 from
 {
  opacity : 0;
  background-color : rgba(255, 255, 0, 0.6);
  transform : rotateX(70deg) translateY(25vh) translateX(-60vw) rotateZ(90deg) scale(0.8);
  border-radius : 4vmin;
  box-shadow : #FFAA00 1vmin 1vmin 2vmin;
 }
 
 30%
 {
  opacity : 1;
  background-color : rgba(255, 255, 0, 0.6);
  transform : rotateX(70deg) translateY(25vh) translateX(-60vw) rotateZ(90deg) scale(0.8);
  border-radius : 6vmin;
  box-shadow : #FFAA00 1vmin 1vmin 2vmin;
 }

 60%
 {
  transform : rotateX(70deg) translateY(25vh) translateX(-20vw) rotateZ(45deg) scale(0.5);
  border-radius : 8vmin;
  box-shadow : #AA0000 0.5vmin 0.5vmin 1vmin;
 }

 80%
 {
  transform : rotateX(70deg) translateY(10vh) rotateZ(-45deg) scale(0.5);
  border-radius : 8vmin;
 }
}

@keyframes anim3d005
{
 from
 {
  opacity : 0;
  background-color : rgba(0, 255, 192, 0.6);
  transform : rotateX(70deg) translateX(-80vmin) translateY(25vh) scale(2);
 }
 
 30%
 {
  opacity : 1;
  background-color : transparent;
  transform : rotateX(70deg) translateY(25vh) scale(1.7);
 }

 50%
 {
  transform : rotateX(70deg) translateY(25vh) rotateZ(-90deg);
 }

 70%
 {
  transform : rotateX(70deg) rotateZ(-90deg);
 }

 90%
 {
  transform : rotateX(40deg);
 }
}


@media screen and (max-width : 1200px)
{
 .noGsm
 {
  display : none;
 }

 nav
 {
  /*font-size : calc(5px + 1.2vmin);*/
  background-color : rgba(0, 64, 192, 0.5);
  border : solid 1px #AAAAAA;
  box-shadow : 4px 4px 8px rgba(255, 255, 0, 0.4);
  left : -12.5vmin;
 }
 
 /*aside
 {
  width : 60vw;
  right : -58vw;
 }*/
 
 nav:nth-of-type(2)
 {
  top : calc(130px + 37vmin);
 }
 
 nav:hover
 {
  opacity : 1;
  left : 8px;
  border-color : transparent;
  box-shadow : 0px 0px transparent;
  background-color : rgba(192, 255, 255, 0.9);
  background-image : none;
  z-index : 4;
  transform : scale(1.8);
  transition : left 300ms ease-in, background-color 2s, box-shadow 1s, transform 1s 500ms;
 }
 
 nav a:hover
 {
  background-color : rgba(0, 128, 128, 0.5);
  transition : none;
 }

 section
 {
  margin-left : 20px;
 }
 
 section article
 {
  min-width : 400px;
  background-size : 15vmin auto;
 }
 
 section table
 {
  min-width : 200px;
 }
 
 table tr td img
 {
  max-width : 40vmin;
 }
 
 footer
 {
  font-size : 1.25vmin;
 }
}