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

h1,
h2 {
    font-size: 30px;
    font-size: 3rem;
}

h3 {
    font-size: 24px;
    font-size: 2.4rem;
}

h4 {
    font-size: 20px;
    font-size: 2rem;
}

h5 {
    font-size: 16px;
    font-size: 1.6rem;
    color: #011547;
    font-family: OpenDyslexic;
    margin-top: -0.3em;
}

h6 {
    font-size: 14px;
    font-size: 1.4rem;
    color: #011547;
    font-family: OpenDyslexic;
    margin-top: -0.3em;
}

p {
    font-size: 14px;
    font-size: 1.4rem;
}

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-image: url('../../data/mediateur/background.jpg');
    background-size: cover;
}

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.1em;
    margin-top: 0.1em;
}

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.1em;
    margin-top: 0.1em;
    padding-left: 1em;
    line-height: 1.6em;
    text-align: left;
}

.logo {
    padding-left: 60%;
    position: absolute;
    top: 30%;
}

.row {
    display: inline-flex;
    width: 100%;
}

.col-4 {
    text-align: center;
}

.qui,
.infos {
    background-image: url('../../data/mediateur/bg_theme.png');
    background-position: center;
    background-repeat: no-repeat;
    color: #011547;
    padding: 100px 0px 0px 0px;
    text-align: center;
}

.qui {
    height: 260px;
}

.infos {
    height: 160px;
}

.col_left,
.col_right {
    display: inline-flex;
    padding: 20px;
}

.col_left {
    width: 80%;
}

.col_right {
    width: 20%;
}

/* -----------------------------------------------
--------------------------------------------------
    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: 10px 20px;
    background-color: white;
    border: 3px solid rgba(0, 243, 167, .3);
    border-radius: 10px;
    box-shadow: 13px 14px 16px rgba(255, 255, 255, 1);
    color: rgb(102, 102, 102);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    /*background-image: url(../../data/mediateur/logo_GEN.png), url(../../data/mediateur/logo_afpar.png);*/
	background-image: url(../../data/mediateur/logo_afpar.png);
    background-size: auto, 70px;
    background-repeat: no-repeat;
    background-position: 98% 98%, 2% 98%;
}

/* 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 {
    from {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes anim-scale {
    from {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0;
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.present .anim-scale {
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: anim-scale 1.5s ease-in 1;
    animation: anim-scale 1.5s ease-in 1;
}

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

/* zoom-in animation */
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.present .zoomIn {
    display: inline-block;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}