@charset "UTF-8";
/*
 * Mise en forme pour la page ObjectifPAss Vs EasyPACES
 */
/* Definie les couleurs du template1
 * utilisé par default pour les auteurs
 */
/** Couleurs ObjectifPASS */
/** pour les cours https://coolors.co/5c91cd-69c0b3-f45b69-233d4d-fcca46*/
/* Couleurs du theme*/
/*#00cccc*/
/*$colorC */
/* Couleurs specifiques */
/* Backgrounds */
/** Couleurs pour les visiteurs **/
/*Bleu clair -> bleu*/
/*Orange -> vert*/
/*violet - bleu foncé*/
/*Vert*/
/* presque noir */
/* gris foncé pour le text #8c8c8c*/
/* gris clair */
/* gris très clair */
/*
 * Mise en forme des styles de bases réutilisé sur tout le site
 * inclu dans visiteur.css, auteur.css et etudiant.css
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html .ui-widget {
  font-family: inherit;
  font-size: 1em; }

/*
 * Styles de bases pouvant être réutilisé
 * et variables
 */
/* ----------------- SASS mixin -----------------*/
.cache {
  display: none !important; }

/* ----------------- Styles à réutiliser -----------------*/
.BoiteRonde {
  position: relative;
  margin: 5px 0 5px 0;
  padding: 6px 10px 6px 10px;
  border-radius: 14px;
  border: 2px solid #333; }

.Block {
  position: relative;
  margin: 5px 0 5px 0;
  padding: 1px 2px 1px 2px;
  border-radius: 6px; }

.TextBoite {
  /*content:'Text :';*/
  position: absolute;
  top: -9px;
  left: 20px;
  height: 11px;
  padding: 0 4px 0 4px;
  font-weight: bold;
  font-size: 16px; }

@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?-d85osp");
  src: url("fonts/icomoon.eot?#ieaix-d85osp") format("embedded-opentype"), url("fonts/icomoon.woff?-d85osp") format("woff"), url("fonts/icomoon.ttf?-d85osp") format("truetype"), url("fonts/icomoon.svg?-d85osp#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
.icon-ai:before, .icon-robot:before,
.icon-happy:before, .icon-angry:before, .icon-confused:before, .icon-neutral:before,
.icon-user:before, .icon-user2:before, .icon-user3:before, .icon-envelop:before, .icon-at:before, .icon-lock:before, .icon-key:before, .icon-switch:before,
.icon-bolt:before, .icon-warning:before, .icon-new:before, .icon-checkmark:before, #wrapper #text li:before, .icon-cancel:before,
.icon-remove:before, .icon-play:before, .icon-info:before, .icon-cart:before, .icon-plus:before, .icon-minus:before,
.icon-thumbs-up:before, .icon-thumbs-down:before, .icon-stopwatch:before, .icon-stats:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-arrow-up:before,
.icon-arrow-down:before, .icon-record:before, .icon-feather:before, .icon-bolt:before, .icon-chat:before, .icon-list:before, .icon-facebook:before, .icon-home:before,
.icon-mobile:before, .icon-bars:before, .icon-trophy:before, .icon-gift:before, .icon-euro:before, .icon-lab:before, .icon-billet:before, .icon-books:before, .icon-copy:before,
.icon-signup:before, .icon-cloud-upload:before, .icon-question:before,
.icon-quotes-right:before, .icon-quotes-left:before,
.icon-arrow-down1:before, .icon-arrow-down2:before, .icon-file-pdf:before, .icon-file-word:before,
.icon-random:before, .icon-refresh:before, .icon-equalizer:before, .icon-parameters:before, .icon-eye:before, .icon-eye-blocked:before,
.icon-save:before, .icon-book_no:before, .icon-book:before {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  /*line-height: 1;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-random:before {
  content: "\e905"; }

.icon-question:before {
  content: "\e904"; }

.icon-trophy:before {
  content: "\e60e"; }

.icon-euro:before {
  content: "\e610"; }

.icon-ai:before {
  content: "\e903"; }

.icon-robot:before {
  content: "\e902"; }

.icon-billet:before {
  content: "\e613"; }

.icon-refresh:before {
  content: "\e984"; }

.icon-equalizer:before {
  content: "\e992"; }

.icon-parameters:before {
  content: "\e994"; }

.icon-eye:before {
  content: "\e9ce"; }

.icon-eye-blocked:before {
  content: "\e9d1"; }

.icon-happy:before {
  content: "\e9df"; }

.icon-angry:before {
  content: "\e9ed"; }

.icon-confused:before {
  content: "\e9f5"; }

.icon-neutral:before {
  content: "\e9f7"; }

.icon-arrow-down1:before {
  content: "\ea36"; }

.icon-arrow-down2:before {
  content: "\ea3e"; }

.icon-file-pdf:before {
  content: "\eadf"; }

.icon-file-word:before {
  content: "\eae1"; }

.icon-books:before {
  content: "\e614"; }

.icon-copy:before {
  content: "\e615"; }

.icon-quotes-right:before {
  content: "\e901"; }

.icon-quotes-left:before {
  content: "\e900"; }

.icon-signup:before {
  content: "\e616"; }

.icon-cloud-upload:before {
  content: "\e617"; }

.icon-home:before {
  content: "\e609"; }

.icon-cart:before {
  content: "\e60a"; }

.icon-bars:before {
  content: "\e60d"; }

.icon-gift:before {
  content: "\e60f"; }

.icon-lab:before {
  content: "\e612"; }

.icon-lock:before {
  content: "\e006"; }

.icon-play:before {
  content: "\e013"; }

.icon-mobile:before {
  content: "\e60c"; }

.icon-feather:before {
  content: "\e606"; }

.icon-chat:before {
  content: "\e605"; }

.icon-bolt:before {
  content: "\e607"; }

.icon-list:before {
  content: "\e608"; }

.icon-record:before {
  content: "\e604"; }

.icon-facebook:before {
  content: "\e60b"; }

.icon-arrow-left:before {
  content: "\e600"; }

.icon-arrow-down:before {
  content: "\e601"; }

.icon-arrow-up:before {
  content: "\e602"; }

.icon-arrow-right:before {
  content: "\e603"; }

.icon-key:before {
  content: "\e007"; }

.icon-switch:before {
  content: "\e008"; }

.icon-user:before {
  content: "\e000"; }

.icon-new:before {
  content: "\e00e"; }

.icon-checkmark:before, #wrapper #text li:before {
  content: "\e011"; }

.icon-cancel:before {
  content: "\e003"; }

.icon-thumbs-up:before {
  content: "\e01b"; }

.icon-thumbs-down:before {
  content: "\e01c"; }

.icon-stopwatch:before {
  content: "\e01d"; }

.icon-stats:before {
  content: "\e01e"; }

.icon-user2:before {
  content: "\e001"; }

.icon-user3:before {
  content: "\e002"; }

.icon-envelop:before {
  content: "\e004"; }

.icon-remove:before {
  content: "\e014"; }

.icon-info:before {
  content: "\e015"; }

.icon-plus:before {
  content: "\e019"; }

.icon-minus:before {
  content: "\e018"; }

.icon-warning:before {
  content: "\e00d"; }

.icon-save:before {
  content: "\e906"; }

.icon-book:before {
  content: "\e91f"; }

.icon-book_no:before {
  content: "\e920"; }

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  top: 4px;
  cursor: pointer;
  background: url(../img/switch3.png) 0 0 no-repeat; }

.switch .ss-on {
  position: absolute;
  display: block;
  width: 30px;
  height: 17px;
  background: url(../img/switch3.png) -30px 0 no-repeat; }

.switch .ss-slider {
  position: absolute;
  left: 0px;
  width: 15px;
  height: 16px;
  margin: 0 1px;
  background: url(../img/switch3.png) -60px 0 no-repeat; }

.switch.icons {
  background-position: 0 -17px; }

.switch.icons .ss-on {
  background: url(../img/switch3.png) -30px -17px no-repeat; }

.switch.letters {
  background-position: 0 -35px; }

.switch.letters .ss-on {
  background: url(../img/switch3.png) -30px -35px no-repeat; }

/* en desous style mobile*/
/*HTML5*/
wrapper, header, section, nav, aside, footer, article {
  display: block; }

#menu_mobile, #bouton_menu_mobile {
  display: none; }

/*------------------------------------------------*
 *     					Styles                       *
 *------------------------------------------------*/
/* ----------------- Styles generaux -----------------*/
html {
  line-height: 1.2; }

h1 {
  font-size: 180%;
  font-weight: bold; }

h2 {
  font-size: 125%; }

h3 {
  font-size: 110%; }

p {
  margin: 0.4em 0 0.4em 0;
  text-align: justify; }

h1, h2, h3, h4, h5, h6 {
  margin: 0.4em 0 0.4em 0; }

strong, b {
  font-weight: bold; }

i {
  font-style: italic; }

em {
  font-style: italic; }

sup {
  line-height: 1em;
  vertical-align: super;
  font-size: smaller; }

.smallcaps {
  font-variant: small-caps !important; }

.erreur {
  color: #F00; }

.centerH {
  text-align: center; }

.clear {
  /*Pour les flotants*/
  clear: both;
  height: 0;
  overflow: hidden;
  /* Précaution pour IE 7 */ }

.EasyPaces span {
  font-variant: small-caps !important; }

.ObjectifPass {
  color: #5C91CD;
  position: relative;
  display: inline-block;
  height: 1em;
  width: 5em;
  top: 0.5ex;
  background: center/contain no-repeat url(../img/logo_objectifpass.png); }
  .ObjectifPass span {
    font-size: 0; }

.colorV1 {
  color: #5C91CD !important; }

.colorV2 {
  color: #69C0B3 !important; }

.colorOrange {
  color: #f1833d !important; }

/* ----------------- Styles menu -----------------*/
#menu a {
  font-variant: small-caps;
  text-decoration: none; }

/* ----------------- Styles status -----------------*/
#status {
  font-weight: bolder;
  font-size: 95%; }

/* ----------------- Styles sidebar -----------------*/
/* voir _sidebar */
/* ----------------- Styles main -----------------*/
#main ul {
  list-style: circle;
  padding-left: 2em; }

#main ol {
  list-style: decimal;
  padding-left: 2em; }

#main .noteBasPage {
  font-style: italic;
  font-size: 90%; }

@media (min-width: 621px) {
  #main {
    font-size: 18px; } }
@media (max-width: 620px) {
  #main {
    font-size: 16px; } }
@media (max-width: 440px) {
  #main {
    font-size: 14px; } }

/* ----------------- Styles help -----------------*/
#help ul {
  list-style: circle;
  padding-left: 2em; }
#help ol {
  list-style: decimal;
  padding-left: 2em; }
#help p {
  text-align: justify; }
#help h2, #help h3, #help a {
  color: #FFF; }
#help h2 {
  font-size: 140%;
  font-weight: bold; }
#help h3 {
  font-size: 100%;
  font-weight: bold;
  font-style: italic; }
#help a {
  font-style: italic; }

/* ------------------ Loading (quand navigation en Ajax)*/
#loading {
  display: none;
  position: absolute;
  top: 150px;
  width: 100%;
  text-align: center; }

/* ------------------ Boutons */
.bouton, .bouton_vert, .bouton_rouge {
  border: none;
  display: inline-block;
  font-size: 100%;
  padding: 4px 8px 4px 8px;
  margin: 2px;
  text-align: center;
  text-decoration: none;
  font-family: Arial,sans-serif;
  color: #000;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 1px 2px 4px black, 1px 2px 2px rgba(255, 255, 255, 0.6) inset;
  transition: all 0.5s ease; }

.bouton {
  background: #1E7094;
  /*@include background-image(linear-gradient(#AAA, #555));*/ }

.bouton_vert {
  background: #00cccc;
  /*@include background-image(linear-gradient(#3F6, #050));*/ }

.bouton_rouge {
  background: #878787;
  /*@include background-image(linear-gradient(#F41, #521));*/ }

.bouton:hover, .bouton_vert:hover, .bouton_rouge:hover {
  background: #00425F;
  	/*box-shadow: 1px 1px 10px rgba( 0, 0, 0, 0.8) inset,
                 0px -1px 0 rgba( 255, 255, 255, 0.8) inset;*/ }

.bouton:active, .bouton_vert:active, .bouton_rouge:active {
  transition: all 0.1s ease;
  position: relative;
  top: 2px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8) inset;
  	/*box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.9) inset,
                 0px -2px 0 rgba( 255, 255, 255, 0.8) inset;*/ }

.bouton_bleu, .bouton_v4 {
  margin: 10px;
  padding: 10px 10px;
  cursor: pointer;
  font-family: Comfortaa, cursive;
  font-weight: 300;
  font-size: 100%;
  transition: all 0.3s ease;
  border-radius: 5px;
  color: #fff; }

.bouton_bleu {
  /* Jolie bouton bleu pour inscription */
  background: #56c2e1;
  border: 1px solid #46b3d3;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.75); }
  .bouton_bleu:hover {
    color: #fff;
    text-decoration: none;
    background: #3f9db8;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
  .bouton_bleu:active {
    top: 35px;
    background: #56c2e1;
    box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.75); }

.bouton_v4 {
  /* Jolie bouton bleu pour inscription */
  background: #69C0B3;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 255, 255, 0.4); }
  .bouton_v4:hover {
    color: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 255, 255, 0.7); }
  .bouton_v4:active {
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.7); }

.tagAnnales {
  float: right;
  cursor: help;
  font-size: 80%;
  border-radius: 7px;
  padding: 0.2em 0.5em;
  margin: 4px 0 -4px 0;
  opacity: 0.5;
  background: white;
  font-weight: normal;
  font-style: italic; }

/*------------------------------------------------*
 *     			  Developpement                    *
 *------------------------------------------------*/
/* ------------------ Debug */
.debug {
  position: relative;
  z-index: 1000;
  padding: 6px;
  font-size: 15px;
  font-family: Arial,sans-serif;
  color: #FA0;
  background: #222; }

/* ------------------ MAJ du site */
#MAJsite {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99000;
  padding: 25% 0;
  text-align: center;
  font-size: 20px;
  font-family: Arial,sans-serif;
  color: #5C91CD;
  background: #242A57; }
  #MAJsite p {
    text-align: center; }

/*------------------------------------------------*
 *   		  Mobile et petit ecran                  *
 *------------------------------------------------*/
@media (min-width: 722px) {
  .show_mobile {
    display: none !important; } }
@media (max-width: 721px) {
  /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
  img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%; }

  /* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
  img {
    height: auto;
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

  /* gestion des mots longs */
  textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
    /* passage à la ligne forcé */
    -webkit-hyphens: auto;
    /* césure propre */
    -moz-hyphens: auto;
    hyphens: auto; }

  code, pre, samp {
    white-space: pre-wrap;
    /* passage à la ligne spécifique pour les éléments à châsse fixe */ }

  /* masquer les éléments superflus */
  .hide_mobile {
    display: none !important; } }
@media (max-width: 280px) {
  p {
    text-align: left; } }
body {
  background-color: #242A57;
  color: white;
  font-family: Comfortaa;
  line-height: 3ex;
  overflow: hidden;
  font-size: 20px; }
  body a {
    font-weight: bold;
    color: #69C0B3;
    text-decoration: none; }
  @media (max-width: 600px) {
    body {
      font-size: 18px; } }
  @media (max-width: 500px) {
    body {
      font-size: 15px; } }
  @media (max-width: 400px) {
    body {
      font-size: 12px; } }

#logo_big {
  display: block;
  margin: 0 auto 2em auto;
  max-width: 28em; }
  @media (max-width: 800px) {
    #logo_big {
      max-width: 90%; } }

#wrapper {
  position: relative;
  margin: 0 auto 0 auto;
  margin-top: 50vh;
  /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%);
  /* tiré de la moitié de sa propre hauteur */
  max-width: 700px;
  padding: 0 3em; }
  @media (max-width: 500px) {
    #wrapper {
      padding: 0 1em; } }
  #wrapper #big_check {
    position: absolute;
    z-index: -100;
    top: -4em;
    left: -15em;
    width: 40em; }
  #wrapper #text {
    position: relative;
    z-index: 100; }
    #wrapper #text li {
      margin: 1ex 0;
      padding-left: 2em; }
      #wrapper #text li:before {
        position: relative;
        top: 1px;
        padding-right: 1ex;
        color: #69C0B3;
        font-size: 90%; }