/*
Valeurs "vertes" 
    --url-background : none;
    --fond-global : white ;
    --h1 : #234d20;
    --h2 : #234d20;
    --h3 : #234d20;
    --h4 : #234d20;
    --h5 : #234d20;
    --h6 : #234d20;
    --a  : #36802d;
    --a-visited : #4040F0 ;
    --a-hover : #77ab59;
    --a-hover-background : #f0f7da;
    --hr-border : #234d20;

    --table-border : #234d20;
    --table-background-chilodd : #f0f7da;
    --table-background-chileven : #eff2f3;
    --th-background : #77ab59;
    --th-border : #36802d ;
    --td : #f0f7da ;
    --td-border : #36802d;
    --td-background-color: white;

    --tr-vide : #FFF;
    --th-vide : #FFF;
    --th-vide-border : #36802d;


    --input-background : #c9df8a;
    --input-focus : #c0d784;
    --input-focus-shadow : #36802d;
    
    --button-resultats : #c9df8a;
    --button-grand : #36802d;  //etudcom
    --button-blue : #f0f7da; //etudcom
    --button-admin : #c9df8a;
    --button-pink : #c9df8a;
    --button-gray : #c9df8a;
    --button-darkblue : #c9df8a;
    --button-commun : #c9df8a;
*/
/*
Autres couleurs : 
 https://huemint.com/website-magazine/#palette=ffffff-c5d9f9-4551a5-d7d8e8
 https://huemint.com/website-magazine/#palette=ffffff-c5d9f9-4551a5-d7d8e8

 https://huemint.com/gradient-4/#palette=f9fffd-dcdcdf-a5a6b3-81688b
 https://huemint.com/illustration-1/#palette=fbfefe-122d41-10b7ff-f14a67-f9ba3a-d6e1d9


 TEST POUR LA HES-SO
f7fdfe "blanc"
26296b "bleu foncé"
eb6228 "orange"
357be9 "bleu clair"
*/
:root{ /*définition des couleurs d'après https://www.color-hex.com/color-palette/5016 */
    --url-background : #fdfdfd;
    --fond-global : #f7fdfe ;
    --h1 : #357be9;
    --h2 : #357be9;
    --h3 : #357be9;
    --h4 : #357be9;
    --h5 : #357be9;
    --h6 : #357be9;
    --a  : #26296b;
    --a-visited : ##c5d9f9 ;
    --a-hover : ##eb6228;
    --a-hover-background : #eb6228;
    --hr-border : #26296b;

    --table-border : #eb6228;
    --table-background-chilodd : #d7d8e8;
    --table-background-chileven : #d2d3e3;
    --th-background : #FBFBFB;
    --td : #FFFFFF ;
    --td-background-color: #FFFFFF;

    --td-border : #4551a5;
    --th-border : #4551a5 ;

    --tr-vide : #FFFFFF;
    --th-vide : #FFFFFF;
    --th-vide-border : #4551a5;


    --input-background : #F8F7F8;
    --input-focus : #357be9;
    --input-focus-shadow : #26296b;

    /* pour les partenaire */
    --button-resultats : #357be9a6;
    --button-grand : #357be9a6;/*Les grand bouttons qui englobent d'autres bouttons */
    --button-commun : #c5d9f9; /*utiliser pour afficher les mois des fiagra pou les étudiants*/
    --button-admin : #c6c0bd;

}

body {
    background: var(--fond-global);

    background :var(--url-background) no-repeat center top;
    background-size: contain;

    margin: 2% 2%;
    padding: 0px;
    position : relative;
    top: 0px;
    height: 95%;
    background-attachment:fixed;

    font: 1.2em "Helvetica", "Arial", sans-serif;
    font-family: var(--sansFont);
    font-size: 12pt;

    text-align : justify;
    text-justify: inter-word;

}


ul {

    position: relative;
    list-style :  circle ;
    list-style: disc inside none;
    margin-left: 0;
    padding-left: 20px;
}

li {
    margin-left:20px;
}

li.vide {
    list-style :  none ;
}

li.alert:before {
    content: "⚠";

    position: absolute;
    left: 0;
}


h1 {
    text-align : center;
    color: var(--h1);
}

h2 {
    padding-top: 25px;
    text-align : center;
    color: var(--h2);
}

h3 {
    text-align : center;
    color: var(--h3);
}

.left {
    text-align: left;
}

h4 {
    color:var(--h4);
}
h5 {
    color:var(--h5);
}
h6 {
    color: var(--h6);
}

a {
    color:var(--a);
    text-decoration:none;
    transition-property: all;
    transition-duration: 1s;
    text-align: center;
    border-radius: 10px;
}

a.visited {
    color:var(--a-visited);
}

a:hover {
    background: var(--a-hover-background);
    color: var(--a-hover);
    transition-property: all;
    transition-duration: 1s ;
}

a.info {
    position: relative;
}
a.info div {
    display: none; /* On masque l'infobulle. */

}
a.info:hover {
    background: none; /* Correction d'un bug d'Internet Explorer. */
    z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

    /* cursor: help;  On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover div {
    display: inline; /* On affiche l'infobulle. */
    position: absolute;
    white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
    top: 30px; /* On positionne notre infobulle. */
    left: 20px;
    background: white;
    padding: 3px;
    border: 1px solid;
    border-left: 1px solid ;
}

hr {
    display: block;
    clear: both;
    height: auto;
    padding: auto;
    border: var(--hr-border);
    font-family: arial;
    line-height: 2;
}


/* ==========================Gestion des tables===================*/
caption {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    background: var( --th-background);
}

table {
    border-style : solid ;
    border-color: #A9CCE3;
    border-spacing: 0px;
    border-width: 0px;
    padding: 0px;
    table-layout: auto;
}

table.bordure{
    border-width: 1px;
}

table.vide {
    border-style : solid ;
    border-color: var(--table-border);
    border-spacing: 0px;
}

tfoot {
    display: table-caption;
    text-align: center;
    font-weight: bold;
}


thead.gauche {
    text-align: left;
}


tr:nth-child(odd) {
    background-color: var(--table-background-chilodd);
}

tr:nth-child(even) {
    background-color: var(--table-background-chileven);
}

tr.vide{
    background-color: var(--tr-vide);
}

tr.vide:nth-child(odd) {
    background-color: var(--tr-vide);
}

tr.vide:nth-child(even) {
    background-color: var(--tr-vide);
}



th {
    background: var( --th-background);
    /*text-align: Center;*/
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
    border-width:1px;
    border-style:   none none solid none ;
    border-color: var(--th-border);
    word-break: unset;
    word-wrap: unset ;
}

th.vide {
    vertical-align : middle;
    /*text-align: center;*/
    background: var(--th-vide);
    padding: 1em;
    border-width:0px;
    border-style:none ;
    border-color: var(--th-vide-border);
}


th.gauche {
    text-align: left;
}

th.droite {
    text-align: right;
}
th.centre {
    text-align: center;
}

th.petit {
    text-align: center;
    font-size: 0.75em;
}

th.bordure{
    border-width: 1px;
}

th.cadre{
    border-style: solid;
    border-width: 1px;
}

th.spacieux{
    padding : 20px 20px 0px 20px ;
    vertical-align: bottom;
}




td {
    text-align: right;
    padding: 0px 5px 0px 5px;
    border-width: 1px;
    border-style:   none none solid none ;
    border-color: var(--td-border);
    background-color: var(--td);
    word-break: unset ;
    word-wrap: unset;
}


td.vide {
    border-width:0px;
    border-style: none ;
    /* background: none;

    
    padding: 0.5em; 
    text-align: left;
    vertical-align: top;
    */
}

td.vide:hover {
    background: none;
    /*
    padding: 0.5em;
    border-width:0px;
    border-style:none;
    border-color:gray;    
    */
}

td.droite {
    text-align: right;
}

td.gauche {
    text-align: left;
}

td.centre {
    text-align: center;
}

td.centrefonce {
    text-align: center;
    background: #D5D5D5;
}


td.petit {
    font-size: 0.75em;
}


td.rouge{
    text-align: center;
    vertical-align:top;
    width :30px;
    background: #FF0000;
    font-size: large;
    font-family:"Times New Roman", Times, serif;
    padding: 10px;
}

td.vert{
    text-align: center;
    vertical-align:top;
    width :30px;
    background: #00FF00;
    font-size: 1.2em;
    font-family:"Times New Roman", Times, serif;
    padding: 10px;
}


td.resultat{
    text-align: center;
    vertical-align: middle;
    font-size : small;
    vertical-align:top;
}

td.petitvide {
    text-align: center;
    padding: 0.1em;
    font-size: 0.75em;
}

td.bordure{
    border-width: 1px;
    border-style: solid;
}


/*=================================I N P U T=====================*/
input {
    background-color: var(--input-background);
    filter:alpha(opacity=85);
    opacity: 0.85;
    text-align:center;
    border:1px;
}

input[type=text] {
    font-weight: normal ;
    /*box-shadow: 5px 5px 2px #A9CCE3 ;*/
}

input[type=text]:focus {
    background-color: var(--input-focus);
    font-weight: bold;
    box-shadow: 5px 5px 2px var(--input-focus-shadow);
}

input[type=password] {
    font-weight: normal ;
}

input[type=password]:focus {
    background-color: var(--input-focus);
    font-weight: bold;
    box-shadow: 5px 5px 2px var(--input-focus-shadow);
}

input[type=button], input[type=submit], input[type=reset] {
    border: none;
    /*color: black;*/
    padding: 12px 12px;
    text-decoration: none;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 60px;
    box-shadow: 5px 5px 2px var(--input-focus-shadow) ;
}


select {
    border-style: solid ;
    border-width: medium ;
    border: var(--table-border) ;
    border-radius: 10px;
    background-color: var(--input-background);
    font-size: 1.2em;
    margin: 5px 5px 5px 5px;
    padding: 2px 2px ;
    box-shadow: 5px 5px 2px var(--input-focus-shadow) ;
}


.footer{
    bottom: 15px;
    left : 15px;
    position: fixed;
    text-align: left;
    z-index: -1;
}

.footer-right {
    bottom: 15px;
    right : 15px;
    position: fixed;
    text-align: right;
    z-index: -1;
}

/*=================================D I V======================*/
/*position d'un div par défaut' */
div {
    float:left;
    position: relative;
    margin-left: 10px;
}
div.center {
    position: absolute;
    left: 10%;
    width:80%;
    text-align: center;
}

div.messagecourt {
    position: absolute;
    width:80%;
    text-align: justify;
    left:10%;
    padding: 10px;
}

div.grandmenupartenaire {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: rgba(250, 250, 250, 0.8);
    width: 100%;
}

div.menupartenaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-between;
    flex-wrap: wrap;
    background-color: rgba(245, 245, 245, 0.8);
    margin: 10px;
}



div.grandezone {

    border-width: thin ;

    width:80%;

    padding: 1.5em;
    float: left ;
    position:relative;
    margin-left: 5%;
    text-align : justify;
    display:inline;
}

div.retour {
    width:90%;
    text-align : right;
    bottom: 5px;
    position: fixed;
}

div.warning {
    float: none ;
    position: static;
    margin-left: 5%;
    text-align : center;
    display: block;
}

div.alerteGPAO {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: rgba(240, 250, 240, 0.8);
    width: 33%;
}

.containerstock {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));/* s'ajuste automatiquement au contenu'*/
    grid-template-columns: repeat(auto-fit, 700px); 
    gap: 5px;               /* espace entre les blocs */
    width: 100%;             /* occupe 100% de la largeur */
    box-sizing: border-box;  /* prend en compte padding/bordures */
    justify-content: center; /* centre horizontalement la grille */
    align-content: start;    /* positionne les lignes depuis le haut */
}

.fichestock {
    /*max-width: 100%;*/
    width:100%;
    justify-self: center;    /* centre chaque bloc dans sa "case" */
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: rgba(240, 250, 240, 0.8);
    text-align: center;      /* centre le contenu textuel */
    margin-top: 0;
}


.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));/* s'ajuste automatiquement au contenu'*/
    /*grid-template-columns: repeat(3, 1fr); /* exactement 3 colonnes égales */
    gap: 5px;               /* espace entre les blocs */
    width: 100%;             /* occupe 100% de la largeur */
    box-sizing: border-box;  /* prend en compte padding/bordures */
    justify-content: center; /* centre horizontalement la grille */
    align-content: start;    /* positionne les lignes depuis le haut */
}

.card {
    /*max-width: 100%;*/
    width:100%;
    justify-self: center;    /* centre chaque bloc dans sa "case" */
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: rgba(240, 250, 240, 0.8);
    text-align: center;      /* centre le contenu textuel */
    margin-top: 0;
}

  
.buttonGrand {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10 10px;
    font-size: 1.1em;
    margin: 5px ;
    color: black;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 1px solid;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
    background: var(--button-grand);
}

.button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 36px;
    line-height: 35px;
    padding: 0 10px;
    font-size: 1.1em;
    margin: 5px ;
    color: black;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 1px solid;
    border-radius: 8px;
    cursor: pointer;
    background: var(--button-commun);
    border-color: white;
}

.button-resultats {
    background: var(--button-resultats);
}


.button-admin {
    background: var(--button-admin);
}




/*         POUR LE FIAGRA    */
div.graph {
    max-width: 40rem;
    height: content-box;
    width: content-box;
    margin: 0 auto
}

.fiagra {
    width: 80%;
    margin: 0px auto;
    text-align: justify;
    text-justify: distribute ;
    padding-left: 10%;
}

.fiagra h1 {
    width: 100%;
    padding-top: 15px;
    text-align : center;
    font-family: 'decnodi';
    color: #4D5656;
}

.fiagra h2 {
    width: 100%;
    padding-top: 10px;
    text-align : center;
    font-family: 'decnodi';
    color: #5F6A6A;
}

.fiagra h3 {
    padding-top: 5px;
    text-align : center;
    color: #717D7E;
}

.fiagra h4 {
    color: #839192;
}

.fiagra p {
    font-family: "Times";
    font-size: 1.2em;
}

@font-face {
    font-family: 'decnodi';
    src: url('/ogplay/fonts/decnodi.ttf')  format('truetype'); /* Safari, Android, iOS */
    /*src: url('/ogplay/fonts/mytype.ttf')  format('truetype'); /* Safari, Android, iOS */
}


@font-face {
    font-family: 'dayslater';
    /*src: url('/ogplay/fonts/28DaysLater.ttf')  format('truetype'); /* Safari, Android, iOS */
    src: url('/ogplay/fonts/Cash_Currency.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'angelina';
    src: url('/ogplay/fonts/angelina.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'DOTMATRI';
    src: url('/ogplay/fonts/DOTMATRI.ttf')  format('truetype'); /* Safari, Android, iOS */

}
@font-face {
    font-family: 'fiagracorps';
    src: url('/ogplay/fonts/mytype.ttf')  format('truetype'); /* Safari, Android, iOS */
}

div.dayslater {
    font-family: dayslater;
}


/* POUR LA GESTION DU MENU */
.menuflex{
    display: flow;
    flex-direction: row;
    justify-content: space-around;
    align-content: space-around;
    align-items: stretch; /* baseline ou strech */
    align-self : center;
    gap: 0px ;
    width : 100%;
}
.menuflex > * {
    padding: 5px;
    flex: 2 ;
}

div.menu {
    /*border: #997;*/
    background: var(--fond-global);
    top : 0;
    align-items: center;
    text-align : center;
    position : fixed;
    width: 100%
}

.menu ul, .menu li {
    margin: 0;
    padding: 0;
}
.menu ul {
    /*background: #30A6E6;*/
    background: none;
    list-style: none;
    width: 100%;
}
.menu li {
    float: left;
    position: relative;
    width:auto;
}



.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}


.ajaxtooltip{
    position: absolute; /*leave this alone*/
    display: none; /*leave this alone*/
    /*width: 600px;*/
    left: 0; /*leave this alone*/
    top: 100; /*leave this alone*/
    background: lightgrey;
    border: 2px solid gray;
    border-width: 1px 2px 2px 1px;
    padding: 1px;
    font-size: 0.80em;
}


/*pour le trie des tableaux avec filtrage : librairie DataTable.js*/
#monTableau {
    width: 100% !important;
    table-layout: fixed;  /* Force les colonnes à respecter les largeurs définies */
}