/* -----------------------------------------------
--------------------------------------------------
    POLICES POUR DYSLEXIQUES
        * OpenDyslexic pour les titres
        * Andika pour le texte
--------------------------------------------------
-------------------------------------------------- */
@font-face {
    font-family: OpenDyslexic;
    src: url('../fonts/opendyslexic-webfont.woff2') format('woff2'),
         url('../fonts/opendyslexic-webfont.woff') format('woff');
}

@font-face {
    font-family: Andika;
    src: url('../fonts/Andika-R.woff') format('woff');
}





/* -----------------------------------------------
--------------------------------------------------
    MISE EN PAGE GLOBALE
--------------------------------------------------
-------------------------------------------------- */
html { font-size: 125%; }

h1, h2 { font-size: 36px; font-size: 3.6rem; }
h3 { font-size: 30px; font-size: 3rem; }
h4 { font-size: 24px; font-size: 2.4rem; }
h5 { font-size: 18px; font-size: 1.8rem; }
h6 { font-size: 14px; font-size: 1.4rem; }
p { font-size: 18px; font-size: 1.8rem; }
li { font-size: 14px; font-size: 1.4rem; }
pre, code { font-size: 14px; font-size: 1.4rem; }

body {
    text-align: center;
    font-family: Andika;
    background: #ced8db;
}
h1, h2, h3, h4 {
    font-family: OpenDyslexic;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
}
p {
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
}
pre {
    margin-left: 5em;
    margin-right: 5em;
    text-align: left;
}
code { font-family: Andika; }
ul, ol {
    list-style-position: inside;
}
li {
    font-family: Andika;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    padding-left: 3em;
    line-height: 1.8em;
    text-align: left;
}





/* -----------------------------------------------
--------------------------------------------------
    DES TRUCS À NE PAS SUPPRIMER
        indispensables pour faire fonctionner
        les présentations
--------------------------------------------------
-------------------------------------------------- */
.hidden {
    display: none;
}

.impress-supported .fallback-message {
    display: none;
}

/* affichage des steps */
.step {
    width: 1000px;
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}
.step.active { opacity: 1 }

/* fenêtre pop-up de l'aide */
#hovercraft-help {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #EEEEEE;
    left: 2em;
    bottom: 2em;
    width: 26em;
    border-radius: 1em;
    padding: 1em;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 100;
    display: block;
    font-family: Verdana, Arial, Sans;
}
.impress-enabled #hovercraft-help.hide {
    display: none;
}
#hovercraft-help.disabled {
    display: none;
}

/* step aligné à gauche ou à droite */
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* affichage du step en type "slide" (fond blanc genre diapositive) */
.slide {
    display: block;

    width: 900px;
    height: 650px;
    padding: 40px 60px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}

/* affichage des images et vidéos */
.figure {
    text-align: center;
}
.figure > img, .figure > p > img, p > img {
    display: center-block;
    max-width: 100%;
    height: auto;
}
.figure > video {
    max-width: 70%;
    height: auto;
}

.graph {
    display: block;
    margin: auto;
    width: 800px;
}



/* -----------------------------------------------
--------------------------------------------------
    TOOLBAR PLUGIN
        récupéré dans 
        impress.js-1.1.0/css/impress-common.css
--------------------------------------------------
-------------------------------------------------- */
.impress-enabled div#impress-toolbar {
    position: fixed;
    right: 1px;
    bottom: 1px;
    opacity: 0.6;
    z-index: 10;
    font-size: 70%;
}
.impress-enabled div#impress-toolbar > span {
    margin-right: 10px;
}
.impress-enabled div#impress-toolbar.impress-toolbar-show {
    display: block;
}
.impress-enabled div#impress-toolbar.impress-toolbar-hide {
    display: none;
}



/* -----------------------------------------------
--------------------------------------------------
    VERSION IMPRIMABLE
        pour l'export PDF
--------------------------------------------------
-------------------------------------------------- */
@media not print {
    .step .notes {
        display: none;
    }
}
@media print {
    body {
        background: white;
    }
    .step {
        page-break-before: auto;
        /*page-break-before: always;*/
        page-break-inside: avoid;
        width: 1500px;
        min-height: 500px;
        margin: 0;
        opacity: 1;
    }
    .slide {
        margin: auto;
        width: 80%;
        /*height: 80%;*/
    }
    #overview {
        display: none;
    }
    .graph {
        margin: auto;
        width: 80%;
    }
}




/* -----------------------------------------------
--------------------------------------------------
    EFFETS DIVERS SUPPLÉMENTAIRES
        animations etc
--------------------------------------------------
-------------------------------------------------- */
/* un tour selon l'axe x */
@keyframes anim-rotate-x {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}
@-webkit-keyframes anim-rotate-x {
    0%   { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(360deg); }
}
.present .anim-rotate-x {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-rotate-x 1s;
    animation: anim-rotate-x 1s;
}

/* un tour selon l'axe y */
@keyframes anim-rotate-y {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@-webkit-keyframes anim-rotate-y {
    0%   { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(360deg); }
}
.present .anim-rotate-y {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-rotate-y 1s;
    animation: anim-rotate-y 1s;
}

/* un tour selon l'axe z */
@keyframes anim-rotate-z {
    0%   { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg); }
}
@-webkit-keyframes anim-rotate-z {
    0%   { -webkit-transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(-360deg); }
}
.present .anim-rotate-z {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-rotate-z 1s;
    animation: anim-rotate-z 1s;
}

/* effet scale */
@keyframes anim-scale {
    0%   { transform: scale(1); }
    5%   { transform: scale(0.1); }
    100% { transform: scale(1); }
}
@-webkit-keyframes anim-scale {
    0%   { -webkit-transform: scale(1); }
    5%   { -webkit-transform: scale(0.1); }
    100% { -webkit-transform: scale(1); }
}
.present .anim-scale {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-scale 1s;
    animation: anim-scale 1s;
}

/* rotation infinie à gauche et à droite */
@keyframes anim-rotate-y-infinite {
    0%   { transform: rotateY(-10deg); }
    100% { transform: rotateY(10deg); }
}
@-webkit-keyframes anim-rotate-y-infinite {
    0%   { -webkit-transform: rotateY(-10deg); }
    100% { -webkit-transform: rotateY(10deg); }
}
.present .anim-rotate-y-infinite {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-rotate-y-infinite 6s infinite alternate ease-in-out;
    animation: anim-rotate-y-infinite 6s infinite alternate ease-in-out;
}

