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

/* Couleurs : H 220 */

@font-face {
  font-family: 'oxanium';
  src:url('/zfiles/Oxanium-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
h1, h2 { font-family: oxanium; }

/* 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; background-color: #F6F6F6; }
h1 { font-size: 3em; text-align: center; margin: 0; padding: 0.6em 1em; color: #E8EEFC; }
h2 { font-size: 1.8em; margin: 0.4em 20px 0; }
h3 { font-size: 1.4em; }
div, p, section, article { text-align: justify; }
p, ul { margin: 1em 0; width: 100%; }
li ul { margin: 0.2em 0 0.2em 3%; width: 97%; }
ul { list-style-position: inside; }
.suivi { margin-bottom: 0.3em; }
.suivi + * { margin-top: 0; }
a { text-decoration: none; color: #1F5FDF; }
a:hover { color: #0E41A7; }
table { width: 100%; margin: 1em 0; border-collapse: collapse; border: medium solid #999; }
table td, table th { text-align: center; padding: 0.15em 0.3em 0; border: thin solid #AAA; }
/* Spécial */
.petit { text-align: right; font-size: 0.9em; font-style: italic; }
.warning { text-align: center; width: 50%; margin: 1em auto; padding: 0.5em 3%; color: #BA0D1F; border: 2px solid #BA0D1F; }
.annonce { margin: 1em auto; padding: 1em 4%; width: 76%; }
.note { color: #BA0D1F; }

/* Blocs principaux, icônes */
header { background-image: url('/zfiles/baniere.jpg'); background-size: cover; margin: 2.4em auto 1em; width: 1000px; }
nav { position: fixed; top: 0; left: 0; right: 0; height: 1.4em; margin: 0 auto; z-index: 20; width: 900px; 
      border-bottom: 1px solid black; padding: 0.5em 50px; background-color: #99B3E5; text-align-last: justify; }
nav a { font-size: 1.2em; text-decoration: none; color: #001030; }
nav a.actuel { color: #1F5FDF; }
article { margin: 2em auto; padding: 1em 50px; width: 900px; background-color: #CDD5E4; position: relative; }
section { padding-bottom: 1px; }

/* Formulaire de connexion et liste des Cahiers */
input.ligne, select.ligne { margin: 1em 20px; width: calc(100% - 40px); display: block; box-sizing: border-box; border: 1px solid; border-radius: 2px; padding: 0 0.3em; font-size: 0.8em; height: 1.6em; }
.cahiers { text-align: center; }
.cahiers a { text-decoration: none; font-weight: 700; display: block; color: #000; }
.cahiers a:hover { color: #002877; background-color: #E7EEFE; }
article a[class^="icon-"] { float: right; margin: 0.7em 0 0 0.3em; font-size: 1.3em; }
#recherche { padding-left: 1.8em; }
.icon-recherche { position: absolute; left: 77px; margin-top: -2.15em; font-size: 0.85em; }
.hidden-option { display: none; }
.permconn { font-size: 0.8em; text-align: center; }
.permconn label { font-weight: 700; }
.permconn input { margin-left: 1em; vertical-align: text-top; }
#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;}
.ok { background-color: #090; color: #EFE; border: 1px solid #EFE; }
.nok { background-color: #FEE; color: #D00; border: 1px solid #D00; }
.ok span { color: #EFE; }
.nok span { color: #D00; }

/* Responsive design */
@media screen and (max-width: 1000px) {
  header { width: 100%; min-width: 320px; }
  nav { width: 90%; min-width: 180px; padding: 0.5em 5%; }
  article { width: calc(100% - 140px); min-width: 256px; padding: 0.5em 40px; }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; margin: 1.2em 20px 1em; }
  article a[class^="icon-"] { font-size: 1.2em; margin-top: 1.5em; }
  .icon-recherche { left: 66px; }
}

/* Vidéos */
video { display: block; max-width: 100%; max-height: 90vh; margin: 2em auto; text-align: center; }

/* Icônes */
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.woff?v=4') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"] {
  font-family: 'icomoon' !important;
  color: black;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a[class^="icon-"] {
  cursor: pointer;
  text-decoration: none;
}
.icon-montre:before {
  content: "\e600";
}
.icon-accueil:before {
  content: "\e601";
}
.icon-historique:before {
  content: "\e603";
}
.icon-questions:before {
  content: "\e604";
}
.icon-technique:before {
  content: "\e605";
}
.icon-licence:before {
  content: "\e606";
}
.icon-cache:before {
  content: "\e607";
}
.icon-annule:before {
  content: "\e608";
}
.icon-ok:before {
  content: "\e609";
}
.icon-prefs:before {
  content: "\e60a";
}
.icon-monte:before {
  content: "\e60b";
}
.icon-descend:before {
  content: "\e60c";
}
.icon-ferme:before {
  content: "\e60d";
}
.icon-recherche:before {
  content: "\e60e";
}
.icon-connexion:before {
  content: "\e60f";
}
.icon-deconnexion:before {
  content: "\e610";
}
.icon-lock:before {
  content: "\e611";
}
.icon-rss:before {
  content: "\e612";
}