/************************************************************************* BASE */

html {
    box-sizing: border-box;
    /* 1 */
    font-family: sans-serif;
    /* 2 */
}

html,
body {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/**
   * Removes the default spacing and border for appropriate elements.
   */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
figure,
p {
    margin: 0;
}

button {
    background: transparent;
    border: 0;
    padding: 0;
}

/**
   * Work around a Firefox/IE bug where the transparent `button` background
   * results in a loss of the default `button` focus styles.
   */

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

iframe {
    border: 0;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
   * Suppress the focus outline on elements that cannot be accessed via keyboard.
   * This prevents an unwanted focus outline from appearing around elements that
   * might still respond to pointer events.
   */

[tabindex="-1"]:focus {
    outline: none !important;
}




/************************************************************************* START */


html {
    font-size: 18px;
    line-height: 1.35em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media screen and (min-width:400px) {
    html {
        font-size: 22px;
    }
}

.page-wrapper {
    width: 100%;
    margin: 0 auto;
}

.page-header {
    margin: 4rem 0 8rem 0;
    text-align: center;
}

.page-header__title {
    font-size: 1.7rem;
    line-height: 1.2em;
}

.page-header__title__img {
    width: 100%;
    max-width: 520px;
}

.page-header__tm-logo {
    max-width: 160px;
}

.page-header__tm-logo-signature {
    font-size: 1rem;
}

.content h2 {
    font-size: 1.5rem;
    margin: 0 0 1em 0;
    text-align: center;
}

.content p {
    font-size: 1rem;
    margin: 0.5em 0 1em 0;
    line-height: 1.35em;
}

.block {
    margin: 0 0 8rem 0;
}

.block--intro {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.6rem;
}

.block--map {
    text-align: center;
    padding: 0 0.6rem;
}

.block--map img {
    max-width: 100%;
    height: auto;
}

.block--questions {
    margin-bottom: 0;
}

.poi {
    text-align: center;
}

.poi+.poi {
    margin-top: 6rem;
}

.poi>* {
    padding: 0 0.6rem;
}

.poi-sep {
    width: 100%;
    margin: 2rem 0 -0.3em;
    padding: 0;
}

.poi__title {
    padding-top: 1rem;
}

.poi__title .light {
    font-weight: normal;
    font-size: 1rem;
}

.poi__img {
    display: block;
    margin: 2em auto;
    width: 100%;
    max-width: 480px;
    height: auto;
}

.poi__img+.poi__img {
    margin-top: 0;
}

.poi__audio {
    margin:0 auto 2em;
}

.poi__audio figcaption {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.75em;
}

.poi__question {
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.poi__question__question+.poi__question__question {
    margin-top: 1em;
}

.poi__question ul {
    margin: 1em 0;
    padding-left: 1em;
    list-style: circle;
}

ul.poi__question__reponses {
    padding: 0;
}

.poi__question__reponse {
    list-style: inside;
    margin: 0.4em;
    transition: font-size 150ms ease-out;
}

.show-results .poi__question__reponse-correct {
    font-weight: bold;
    font-size: 1.1rem;
    color: #003b62;
    list-style: inside url('../img/correct-symbol.svg');
}

.poi__question__reponse.last {
    display: none;
}

.show-results .poi__question__reponse.last {
    display: block;
}

.poi__question__results {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    transform: scaleY(1);
    transition: transform 150ms ease-out;
}

.show-results .poi__question__results {
    transform: scaleY(0);
}

.poi__question__results__btn {
    background-color: #003b62;
    color: white;
    padding: 0.7em 1em;
    font-size: 1rem;
    border-radius: 2px;
    box-shadow: 0px 1px 7px #999;
    transition: box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.poi__question__results__btn:hover,
.poi__question__results__btn:active {
    background: #0097FB;
    box-shadow: 0px 0px 6px -1px #999;
    cursor: pointer;
}

.show-results .poi__question__results__btn {
    display: none;
}

.poi__explication {
    transform: scaleY(0);
    height: 0;
    transition: transform 150ms ease-out, height 150ms ease-out;
    background: #003b62;
    color: white;
    padding: 0.5em 0.7em;
    border-radius: 3px;
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}

.poi__explication>*+* {
    margin-top: 1em;
}

.poi__explication a {
    color: white;
}

.poi__explication ul {
    list-style: circle;
    padding-left: 1.5em;
}
.poi__explication ol {
    list-style: decimal;
    padding-left: 1.5em;
}

.show-results .poi__explication {
    height: auto;
    transform: scaleY(1);
}

video {
    max-width: 100%;
}

.video {
    width: 90%;
    margin: 2em auto;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-player {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em auto;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-repeat: no-repeat;
    ;
    background-position: center center;
    cursor: pointer;
}

/* play button */

.video-player>a {
    transition: 0.25s ease-in-out;
    width: 64px;
    height: 48px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAwCAYAAAChS3wfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM2MCwgMjAyMC8wMi8xMy0wMTowNzoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzdCMjkyRjk3NTNEMTFFREJCMUFCMzU5MUYyMjgxQzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzdCMjkyRkE3NTNEMTFFREJCMUFCMzU5MUYyMjgxQzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3N0IyOTJGNzc1M0QxMUVEQkIxQUIzNTkxRjIyODFDMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3N0IyOTJGODc1M0QxMUVEQkIxQUIzNTkxRjIyODFDMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnhRufQAAAWtSURBVHja5FtNiBRHFH71urp7ZvbPrMu6/iSuCEYD6iF4iZCgx5wkCAGDOZoQDwnEmzkk4lkThAghR4mHgDEeBQkYD4knBTEYjcEf3FXjrvs/3V0/+aqmR9ddlRy2dzo7Ba+ru6a3qt573/up6lpxa/NmahYjJQVJQh1RRHVmMpOTJKVckVarAybLlgshegTRMkvUkd9XtbUdTFQjIWJrbRXdxGRtLKwNLbN7roEqvp0ozEnmxM2hQRqkckpBSU4zoGlQ5p6tEHXWegZjp1rKaVZqCuPVbRiOW2Mm8M44Mz/mLBtB+wMVRXcCrQnPZGs10qj7u7qoWsGU0C5pTnEzAlOvgplPdKXyrhZiIykVgWH/u83fw+9+1qLZZu3TTvAumH+2bYGKcOMGQeMeDNj83jHzZI7GkG60G2HM35jFL4b5e8zodzG3v9kIcJ2xMR+Dsa8h6dh16BgV9P8vThUB8zda688GurupUgU4lQK/kJzBjZMauP1CMx/3zOdaXQrMU45UMP8p0P2zRyZ4JvAs7m/f7uGqZ2Z2JklyjplpKRfbcEJfQclfgkjc3rbN2ywkchNIWEdC0FIvztsGadonlHrE0LzT/nbdJsx7Rw8+JfNHAaIeC3cJgg9EmzDv/QFsP6tU3jc9PeQtHp5+J7VRcX5AZNkWJDMrXBRYiefX20kAHu1Q/djU1FuM2L+pOFFbH2pKiQKXBYbhJg7TdKUtIvQ5KYchqXv3SA0Nwe0GVCYn65M+pVYyUsQVooCU1SK6cBxT/9GjVEWukVy6RGZ8nJzTLYsZIOz3sw7DvkIEAIjpkRHq2ruXVp06RX2HDpGt1ym5cqVhFi1OuNjNLwyXM1vba4sRsa/S69d93XvwIK05d466du+mDG3qzp2WmoXPAq3tZDC/rIhVW1MIsyEfbdxIAydO0MDJkxStX99ys4AAqgwodD9ZUi5S6dy1i9ZcuNByswAKKg4BrxSGgJdJH1pvtVkIL4AgWC5aIIAymAUy4Ihx7S5DWGqRWUjXe7U0Kerim0XgBFC6HZBFNAvB9HSfs3RlnllcvdowiQVEQ+n3v5pm8drFi9R74IBHAmVZ+wjgibdavZqiDRuQWqZ+p7qtBDB99izd3bGDhvftI+7pIRHHCydYovLufKvbt+nR4cM0AWfoTME5x4XeY5BldYKjWEY/PnaM1N27FAL6XutaL3gu5EwgKSPcH8LhOU3HW7Y0wt/CM++KcQhwHxT7ygb3eOtWD3frvuAUOKwTwAhoXRvA/XnL4YzhAR+1CdznOwCiusRlvE3g/pwkgL0AxorMh+0cbbYK7i9YD88w1lkjtpjOvUajwcFSwH2e/TeUPi2tEP8UsiOEBUvQ20vJ5cs0eeYMjR450lq4z7d/J4QRZwIPCzGvamObYWjPHlLDwyTXrm0t3J+jIGHMfSmEGLZFIADLVjs15QcK1+VRtizMuwwI84q1vi8DIf5UBfkAt5MjFnnH+T8DwB2w6uy8wUqpv/B8j9qs+E9jExO/MTf22863E/PuO4hQ6lY0OnqDE9iqYv7RlnldXEBuIuP4NK1aRbI/SRwCTo8zT6ZEnUE7wN8dthTiuI0iYhmGJKPISObPydr2sH8gHr7vWoYoxdzZSVyrUW9Hx3cR809mCQshP9J7UyXJh7peJw30cwUIqAAKEWrkA+/hpW+XlC9wW+iOoNhAyl8Rlt80WVY3aUqoif3+GsgdlXXaD4JgP4fhO7j/AX/24Jm4nqPDvmywVmh1btvsebi0m+gSG7O/xvw2GHzsQiDMwJN8wSLhvCP39RSCeAPIGIRgBv3OkTF9aK+hrTuvG0fgUcO5uLVF8yh8QE+PxAc58ay6Sc0D52ZW3Tw+byBUhb7dc/MofYZnhXb3cSBlIVLMoY77MWocqx8NtJ4wzA8xl6F4evpaJuUf7l8B3PnAuQL7V4ABAE5N/i+TMKf/AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
}

.video-player:hover>a,
.video-player>a:focus {
    transform: scale(1.1);
}

/* video player iframe */

.video-player>iframe {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fresque-img {
    width: 100%;
}

.fresque_et-toi {
    text-align: center;
}

.page-footer {
    text-align: center;
    font-size: 1rem;
    margin: 4rem 0 2rem 0;
}

.page-footer img {
    max-width: 200px;
}

.page-footer p {
    margin-top: 0.5em;
}

.text-italic {
    font-style: italic;
}

.text-bold {
    font-weight: bold;
}

.btn {
    display: inline-block;
    background-color: #003b62;
    color: white;
    padding: 0.7em 1em;
    font-size: 1rem;
    border-radius: 2px;
    box-shadow: 0px 1px 7px #999;
    text-decoration: none;
    transition: box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.btn:hover,
.btn:focus {
    background: #003b62;
    box-shadow: 0px 0px 6px -1px #999;
    cursor: pointer;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/pt-sans-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/pt-sans-bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}