/* Feuille de style général : tailles et positionnements */

/* Couleurs mode clair :
 * #F6F6F6 : fond
 * #99B3E5(HSL: 220,60,75) : menus/icones
 * #CDD5E4(HSL: 220,30,85) : articles
 * #E7EEFE(HSL: 220,90,95) : fenêtre/fenêtre+menu
 * #BA0D1F : rouge annonces
 * #001030,#002877 : titres/liens dans menus à gauche
 * #DDD : bandeau bas, barre de recherche, boutons d'édition des textarea
 * #AAA : articles cachés
 * #EFE/#090 : bandeau ok vert (fond/texte)
 * #FEE/#D00 : bandeau non-ok rouge (fond/texte)
 * #EFF : hover sur les tableaux (#planning,.notes,.destinataires,.usergrp,.usermat)
*/

:root {
  --teinte: 220;
  --texte: black;
  --liens: hsl(calc(var(--teinte) - 30),80%,35%);
  --liens-visites: hsl(calc(var(--teinte) - 45),80%,35%);
  --fond-opaque: black;
  /* Fonds */
  --body-fond: hsl(var(--teinte),2%,95%);/*#F6F6F6;*/
  --menu-fond: hsl(var(--teinte),60%,75%);/*#99B3E5;*/
  --articles-fond: hsl(var(--teinte),30%,85%);/*#CDD5E4;*/
  --article-cache-fond: hsl(var(--teinte),10%,80%);/*#AAA;*/
  --fenetre-fond: hsl(var(--teinte),90%,95%);/*#E7EEFE;*/
  --fenetre-ombre: hsl(var(--teinte),30%,55%);/*#777;*/
  --footer-fond: hsl(var(--teinte),25%,80%);/*#DDD;*/
  --topbarre-fond: hsl(var(--teinte),25%,75%);/*#DDD;*/
  --table-hover-fond: hsl(var(--teinte),60%,90%);/*#EFF;*/ 
  --textarea-fond: hsl(var(--teinte),60%,98%);/*#FFF;*/
  /* Textes */
  --menu-titres: hsl(var(--teinte),80%,20%);/*#001030;*/
  --menu-liens: hsl(var(--teinte),80%,35%);/*#002877;*/
  --menu-actuel: hsl(calc(var(--teinte) - 180),80%,35%);/*#1F5FDF;*/
  --menu-icones-hover: hsl(var(--teinte),80%,85%);/*#CDF;*/
  --texte-titres1: hsl(var(--teinte),80%,20%);/*#001030;*/
  --texte-titres2: hsl(var(--teinte),80%,30%);/*#002877;*/
  /* Textes couleur */
  --alerte: hsl(0,80%,50%);/*#BA0D1F;*/
  --ok-texte: #090;
  --ok-fond: #EFE;
  --nok-texte: #D00;
  --nok-fond: #FEE;
  --nepassortir: hsl(var(--teinte),80%,60%);/*#1F5FDF;*/
  /* Textes gris */
  --texte-oubli: #555;
  --texte-indication: #999;
  --texte-inactif: #AAA;
  /* Bordures */
  --topbarre-bord: hsl(var(--teinte),30%,40%);
  --ligne-pointilles: hsl(var(--teinte),30%,50%);
  --table-bord: hsl(var(--teinte),30%,35%);
  --table-interieur: hsl(var(--teinte),30%,50%);
}


@media (prefers-color-scheme: dark) {
:root {
  --texte: hsl(220,2%,95%);
  --liens: hsl(190,60%,60%);
  --liens-visites: hsl(160,60%,60%);
  --fond-opaque: black;
  /* Fonds */
  --body-fond: hsl(220,90%,5%); /*rgb(0,10,32)*/
  --menu-fond: hsl(220,90%,15%);
  --articles-fond: hsl(220,90%,12%);
  --article-cache-fond: hsl(220,40%,12%);
  --fenetre-fond: hsl(220,40%,25%);
  --fenetre-ombre: hsl(220,40%,22%);
  --footer-fond: hsl(220,10%,12%);
  --topbarre-fond: hsl(220,10%,20%);
  --table-hover-fond: hsl(220,40%,30%); 
  --textarea-fond: hsl(220,40%,30%);
  /* Textes */
  --menu-titres: hsl(220,80%,70%);
  --menu-liens: hsl(220,50%,90%);
  --menu-actuel: hsl(220,60%,70%);
  --menu-icones-hover: hsl(220,60%,80%);
  --texte-titres1: hsl(220,80%,70%);
  --texte-titres2: hsl(220,50%,90%);
  /* Textes couleur */
  --alerte: hsl(0,80%,60%);
  --ok-texte: #EFE;
  --ok-fond: #090;
  --nok-texte: #D00;
  --nok-fond: #FEE;
  --nepassortir: #1F5FDF;
  /* Textes gris */
  --texte-oubli: #777;
  --texte-indication: #666;
  --texte-inactif: #999;
  /* Bordures */
  --topbarre-bord: #BBB;
  --ligne-pointilles: #BBB;
  --table-bord: #999;
  --table-interieur: #AAA;
}
  /* Images désaturées */
  img { filter: brightness(.8) contrast(1.2); }
}

/* Police et taille globales */
* { font-size: 1em; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
       position: relative; width: 100%; margin: 0 auto; min-width: 320px; max-width: 1500px; color: var(--texte); background-color: var(--body-fond); }
h1 { font-size: 2.2em; text-align: center; padding: 1em 2em; }
h2 { font-size: 1.8em; margin: 1em 0 0.5em; }
h3 { font-size: 1.5em; margin: 1em 0 0.5em; }
h2 + h3 { padding-left: 1%; }
h4 { font-size: 1.3em; margin: 0.5em 0 0.2em; padding-left: 2.5%; }
h5 { font-size: 1.1em; margin-top: 0.2em; padding-left: 4%; }
h6 { font-size: 1em; margin-top: 0.2em; padding-left: 5.5%; }
ul, ol { margin: 0.5em 0; padding: 0 2% 0 6%; }
p { padding: 0 2%; }
p + p { margin-top: 0.5em; }
img { border: none; max-width: 100%; }
div, p, section, article { text-align: justify; }
#log { position: fixed; top:3%; left: 3%; padding: 0.3em 2%; z-index: 25; margin-right: 3%; }
#log span { cursor: pointer; position: relative; right: -0.8em; top: 0.1em;}
body::after { content: "-"; clear: both; display: block; color: var(--body-fond); }

/* Couleurs liens, icônes, zones de saisies */
a { color: var(--liens); }
a:not([class^="icon-"]):visited { color: var(--liens-visites); }
input, select, textarea, radio { color: var(--texte); background-color: var(--textarea-fond); }
input:disabled, select:disabled, textarea:disabled, radio:disabled { color: var(--texte-inactif); background-color: var(--acrticle-cache-fond); }
[class^="icon-"] { color: var(--texte); }

/* Menu */
#iconesmenu { background-color: var(--menu-fond); text-align-last: justify; }
#iconesmenu a { padding: 0 3px; color: var(--menu-titres); }
#iconesmenu a:hover { color: var(--menu-icones-hover); }
#menu h3 { font-size: 1.3em; margin: 0.5em 0 0 0; padding-top: 0.3em; color: var(--menu-titres); border-top: 1px solid var(--menu-titres); }
#menu h3 span { display: inline-block; font-size: 0.77em;}
#menu h4 { font-size: 1.1em; margin: 0 0 0 0.1em; padding: 0; color: var(--menu-titres); }
#menu h4 span { display: inline-block; font-size: 0.91em;}
#menu hr { margin: 0.7em 0; color: var(--menu-titres); border-top: 1px solid var(--menu-titres); border-bottom: none; }
#menu a { margin-left: 0.5em; text-decoration: none; color: var(--menu-liens); }
#menu hr + a, #menu hr + a ~ a { display: block; margin: 0.5em 0.2em; text-decoration: none; color: var(--menu-liens); }
a#actuel, a.actuel { color: var(--menu-actuel); }
#menu a#actuel { font-style: italic; }

/* Blocs principaux */
section > :first-child, article > :first-child, article > h2:first-of-type, article > h3:first-of-type, #fenetre h3:first-of-type { margin-top: 0; }
article > :last-child, #fenetre > :last-child { margin-bottom: 0; }
article { margin-bottom: 1em; padding: 1em 2%; background-color: var(--articles-fond); overflow-x: auto; }
h2.classe { margin: 0 auto 0.3em; text-align: center; font-size: 1.7em; }
#fenetre { position: fixed; z-index: 15; padding: 1em 2% 0; background-color: var(--fenetre-fond); opacity: 0.97; box-shadow: 0.5em 0.5em 0.5em var(--fenetre-ombre); }
#fenetre h3 { color: var(--texte-titres1); }
#fenetre:after { content: ""; display: block; height: 1em; width: 100%; clear: both; } /*bug Firefox qui supprime le padding si scroll*/
#fenetre_fond { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background-color: var(--fond-opaque); opacity: 0.2; z-index: 14; }
article > a[class^="icon-"], #fenetre > a[class^="icon-"], #ajoute-copies > a[class^="icon-"] { float: right; margin-left: 0.3em; }
#fenetre hr { margin: 1.5em 0; }
#epingle hr { margin: 0.5em 0; }
footer { text-align: center; width: 90%; padding: 1em 5%; clear: both; position: fixed; left: 0; bottom: 0; z-index: 10;
         border-top: 1px solid var(--texte); background-color: var(--footer-fond); opacity: 0.97; }

/* Blocs principaux, affichage différentiés selon la taille de l'écran */
@media screen and (min-width: 801px) {
  nav { float: left; width: 256px; margin: 0 30px; padding: 0.7em 20px 0.5em; padding-top: 0.1em; margin-bottom: 3em; background-color: var(--menu-fond); }
  #iconesmenu { width: 256px; padding: 0.7em 0 0; }
  #iconesmenu a:first-child { display: none; }
  #menu a:hover { color: var(--menu-icones-hover); }
  section { position: relative; margin: 0 30px 0 356px; padding-bottom: 3em;  }
  #icones { position: absolute; top: -4em; right: 0; }
  header + section { width: 96%; margin: 0 auto; max-width: 1500px; text-align: center;}
  footer { font-size: 0.8em; }
  #fenetre { top: 10%; left: 0; right: 0; width: 70%; margin: 0 auto; max-height: calc(90% - 7em); }
  p.ligne input, p.ligne select, p.ligne code { width: 65%; }
}
@media screen and (max-width: 801px) {
  body { padding-top: 2.2em; }
  h1 { font-size: 1.8em; padding: 0.3em 2em; }
  h2 { font-size: 1.65em; }
  #iconesmenu { position: fixed; top: 0; left: 0; right: 0; z-index: 20; min-width: 320px; height: 1.4em; border-bottom: 1px solid var(--texte); padding: 0.4em 0; }
  #iconesmenu a:first-child { padding-left: 20px; }
  #iconesmenu a:last-child { padding-right: 20px; }
  a#actuel2 { color: var(--menu-actuel); }
  #menu { position: fixed; top: 2.2em; left: 0; z-index: 19; height: calc(100% - 5.4em); width: 0; padding: 0 0 0.7em; overflow-x: hidden; transition: all 1s ease-in-out; background-color: var(--fenetre-fond); }
  #menu.visible { display: block; width: 80%; padding: 0 20px 0.7em; }
  #menu_fond { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--fond-opaque); opacity: 0.2; z-index: 18; }
  #menu a:hover { color: var(--menu-actuel); }
  #menu :first-child { border-top: none; margin-top: 0; }
  #menu a:last-child { padding-bottom: 0.5em; }
  section { position: relative; width:96%; margin: 0 auto; padding-bottom: 3em; }
  #icones { position: absolute; top: -2.2em; right: 0; }
  header + section { text-align: center; }
  footer { font-size: 0.6em; height: 1.4em; }
  #fenetre { top: 3em; left: 0; right: 0; width: 92%; margin: 0 auto; max-height: calc(100% - 8em); }
  p.ligne input, p.ligne select, p.ligne code { width: 50%; }
}

/* PDF et JPG */
.pdf { height: 0; width: 100%; overflow: hidden; position: relative; }
.portrait { padding-bottom: 138%; }
.paysage { padding-bottom: 74%; }
.hauteur50 { padding-bottom: 50%; }
.pdf object { position: absolute; }
video { max-width: 100%; max-height: 90vh; }

/* Liste classable des Cahiers  */
.cahiers { margin: 0 3%; }
.cahiers h3 { font-size: 1.3em; border-bottom: 1px dotted var(--ligne-pointilles); margin: 0.8em 0 0 0; }
.cahiers h4 { font-size: 1.1em; border-bottom: 1px dotted var(--ligne-pointilles); margin: 0.3em 0 0 2.5%; padding: 0; }
.cahiers h3 span, .cahiers h4 span { float: right; }
.cahiers h3 a, .cahiers h4 a { font-size: 1rem; margin-left: 0.2em; }
.cahiers h3:hover, .cahiers h4:hover { background-color: var(--table-hover-fond); }
form + h3 { margin-top: 1em !important;}
.classable p { width: 80%; margin: 0.3em auto; padding: 0.2em 2%; background: var(--textarea-fond); border: 1px dashed var(--ligne-pointilles);
               cursor: move; touch-action: none; user-select: none; }
.classable p.en_mvt { opacity: 0.5; }
.classable p .icon-ferme { float: right; margin-top: 0.2em; cursor: default; }

/* Alerte visuelle */
.ok { background-color: var(--ok-fond); color: var(--ok-texte); border: 1px solid var(--ok-texte); }
.nok { background-color: var(--nok-fond); color: var(--nok-texte); border: 1px solid var(--nok-texte); }
.ok span { color: var(--ok-texte); }
.nok span { color: var(--nok-texte); }
.nepassortir { color: var(--nepassortir); }
.mev { color: var(--alerte) !important; }
.note { margin: 0.5em 2%; padding: 0 4%; color: var(--alerte); }
.annonce { margin: 1em 3%; padding: 0.5em 4%; color: var(--alerte); border: 2px solid var(--alerte); }
.warning { text-align: center; display: block; width: 50%; margin: 1em auto; padding: 0.5em 3%; color: var(--alerte); border: 2px solid var(--alerte); }
.nodispo { opacity: 0.5; }
article.cache { background-color: var(--article-cache-fond); opacity: 0.6; }

/* Page de connexion */
article.login { margin: 2em auto; padding: 1em 50px; width: 900px; max-width: calc(100% - 200px); min-width: 200px; }
article.login p { margin: 1em 0; }
article.login p.ok, article.login p.nok { padding: 1em 2%; }
article.login .icon-ok, article.login .icon-deconnexion { font-size: 1.4em; margin-top: 0.2em; }
.souvenir { font-weight: 700; font-size: 0.8em; text-align: center; }
.souvenir input { margin-left: 1em; vertical-align: text-top; }
#rgpd p { font-size: 0.8em} /* texte d'information */

/* Barre de recherche */
.topbarre { min-height: 1.6em; background-color: var(--topbarre-fond); border: 1px solid var(--topbarre-bord); width: auto; border-radius: 4px; padding: 0 1em; margin-bottom: 1.5em; }
.topbarre * { margin: 0.3em 0.4em 0.3em 0; }
.topbarre *:last-child { margin-right: 0; }
.topbarre a { width: 1em; }
.topbarre select { font-size: 0.8em; height: 1.4em; width: 12em; }
#recherchecolle select { width: calc(100% - 4.3em); }
@media screen and (max-width: 500px) {
  .topbarre *:not(:last-child) { margin-right: 0; margin-bottom: 0; }
}

/* Documents */
.rep, .doc { margin: 0 2%; padding: 0; border-bottom:  1px dotted var(--ligne-pointilles); line-height: 1.3em; }
.rep:hover, .doc:hover { background-color: var(--table-hover-fond); }
.rep a.lienlocal { cursor: pointer; }
.repcontenu, .docdonnees { float: right; font-size: 0.8em; padding-left: 0.5em; line-height: 1.625em; }
.rep .icon-lien2, .doc .icon-play { float: right; margin-left: 0.3em; line-height: 1.3em; }
#parentsdoc .nom { font-weight: 700; }
#parentsdoc .icon-ferme { float: right; margin-top: 0.15em; cursor: pointer; }
#parentsdoc { padding-top: 0.3em; margin-bottom: 1em; }
#parentsdoc * { color: var(--texte) !important; }
#parentsdoc .nom a { margin: 0; cursor: pointer; }
.rep a:not(.mev), .doc a:not(.mev), .copie a:not(.mev), .moyenne a:not(.mev) { text-decoration: none; color: var(--texte) !important; /* éviter la couleur des a:visited */ }
.rep .nom, .doc .nom, .copie .nom { font-weight: 700; margin-left: 0.4em; }
@media screen and (max-width: 500px) { a + .docdonnees { display: none; } }

/* Édition : formulaires */
input, select, textarea { box-sizing: border-box; border: 1px solid var(--texte); border-radius: 2px; padding: 0 0.3em; }
p.ligne label { font-weight: 700; }
p.ligne input, p.ligne select, p.ligne code { float: right; margin-left: 0.2em; font-size: 0.8em; height: 1.6em; } 
p.ligne input[type="checkbox"], p.ligne input[type="radio"] { width: 1em; }
input.ligne { width: 96%;  margin: 0.5em 2%; height: 1.6em; font-size: 0.8em; display: block; }
input.ligne[type="button"] { cursor: pointer; }
p.ligne + * { clear: right; }

/* Tableaux : général */
table { width: 100%; margin: 1em 0; border-collapse: collapse; border: medium solid var(--table-bord); }
table td, table th { padding: 0.15em 0.3em 0; border: thin solid var(--table-interieur); }
#notes th, #notes td { padding: 0.15em 0.5em; text-align: center; }
tr[data-id]:hover, .notes tr:hover, #notes tbody tr:hover, #fenetre tbody tr:not(.categorie):hover { background-color: var(--table-hover-fond); }

/* Pour l'impression */
@media print {
  body { font-size: 90%; font-family:Serif; }
  nav, .topbarre, [id^="aide-"], [id^="form-"], footer, a[class^="icon-"] { display: none; }
  h1 { font-size: 1.7em; }
  h2 { font-size: 1.5em; margin: 0.7em 0; }
  h3 { font-size: 1.35em; margin: 0.6em 0; }
  h4 { font-size: 1.2em; margin: 0.4em 0 0.2em; }
  article { border: 1px solid var(--table-bord); }
  table th { padding: 0.15em 0.5%; }
}

/* Mails */
.icon-mailenvoi { font-size: 2em; }
#fichier { border: none; font-size: 0.8em; height: 1.9em; }
.fichierlourd { color: var(--alerte); }
textarea { width: calc(100% - 3em); margin: 0 1.5em; }
[id^="form-"] { display: none; }

/* Tableau d'utilisateurs */
.utilisateurs th, .utilisateurs td { border: 1px dotted var(--table-interieur); }
.utilisateurs .icone { text-align: center; width: 1.4em; width: 5em; padding: 0; }
.utilisateurs em { font-size: 0.8em; }
.categorie th:first-child { padding-left: 3%; }
.categorie span, #envoimails span { cursor: pointer; }
.sel { background-color: var(--table-hover-fond); }
/* Pour le pliage-dépliage */
.utilisateurs .cache { padding: 0 0.3em; }
.utilisateurs .cache div { padding: 0.1em 0; width: 100%; }
.utilisateurs .cache.icone div { text-align: center; }

/* Autres tableaux */
#transferts, .centre { text-align: center; }

/* Édition : positionnements globaux /
.edition { display: inline; text-align: left; padding-right: 3em; }
h3.edition.editable { padding-right: 1%; }
.edition + p, .edition ~ form { margin-top: 0.75em; }
.ligne + p.ligne { margin-top: 0.5em; }*/

/* Chargement pour les envoi ajax */
#log { position: fixed; top:3%; left: 3%; padding: 0.3em 2%; z-index: 25; margin-right: 3%; }
#log span { cursor: pointer; position: relative; right: -0.8em; top: 0.1em;}
#load { display: none; margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; text-align: center;}
#load img { position: absolute; top: 50%; }
#load p { top: 45%; position: absolute;margin: 0 25%; width: 50%; padding: 0.3em 0; text-align: center; z-index: 31;
          color: var(--texte-titres2); background-color: var(--fenetre-fond); opacity: 1; border: 2px solid var(--texte-titres2); }