/* -----------------------------------------------
--------------------------------------------------
    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;*/
    background: #ced8db url('../../data/specifications/logo_afpar.png') no-repeat bottom right;
    background-size: 15%;
}

h1,
h2,
h3,
h4 {
    font-family: OpenDyslexic;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    color: #011547;
}

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;
    padding-inline-start: 0px;
}

li {
    font-family: Andika;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    padding-left: 1em;
    line-height: 1.8em;
    text-align: left;
}

.logo {
    padding-left: 50%;
    position: absolute;
    top: 10px;
}




/* -----------------------------------------------
--------------------------------------------------
    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: 2px solid rgba(0, 243, 167, .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 {
    max-width: 100%;
    height: auto;
}

.figure > video {
    max-width: 70%;
    height: auto;
}

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



/* -----------------------------------------------
--------------------------------------------------
    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;
}