{% set section = 'marathon' %}{% extends 'base.html.twig' %}{% block title %}Pitch - Toi & Pitch{% endblock %}{% block body %}<div data-controller="marathon">{% include '_elements/page-header.html.twig'with {breadcrumb: [{ path:'home', label:"Accueil"},{ path:'jeux', label: "Toi & Pitch" },{ label: "Marathon des jeux" }]}%}<div id="marathon"><div class="content content--intro"><div class="depths"><div class="depth-1 moving-depth" data-speed="6">{% include 'marathon/depth-1.svg' %}</div><div class="depth-2 moving-depth" data-speed="3">{% include 'marathon/depth-2.svg' %}</div><div class="depth-3 moving-depth" data-speed="1.5">{% include 'marathon/depth-3.svg' %}</div></div><div id="marathon-home"><div class="desktop-version">{% include 'marathon/bg-intro.svg' %}</div><div class="mobile-version">{% include 'marathon/bg-intro-mobile.svg' %}</div><button class="btn btn-primary btn-yellow enter" data-no-swup>Je me lance !</button><a href="#" data-bs-toggle="modal" data-bs-target="#reglesModal" id="btn-regles" data-no-swup>Règles</a><div id="modals-buttons"><a href="#" id="btn-modal-bravo" data-bs-toggle="modal" data-bs-target="#bravoModal" data-no-swup></a><a href="#" id="btn-modal-jeux" data-bs-toggle="modal" data-bs-target="#jeuxModal" data-no-swup></a><a href="#" id="btn-modal-end" data-bs-toggle="modal" data-bs-target="#endModal" data-no-swup></a></div></div></div><!-- /content--intro --><div class="content content--steps"><div class="depths"><div class="depth-1 moving-depth" data-speed="6">{% include 'marathon/depth-1.svg' %}</div><div class="depth-2 moving-depth" data-speed="3">{% include 'marathon/depth-2.svg' %}</div><div class="depth-3 moving-depth" data-speed="1.5">{% include 'marathon/depth-3.svg' %}</div></div><div id="steps">{% include 'marathon/steps.svg' %}<a href="#" class="btn btn-primary btn-back" role="button" data-no-swup>Retour</a></div></div><!-- /content--steps --><div class="content content--games"><div class="depths"><div class="depth-1 moving-depth" data-speed="6">{% include 'marathon/depth-1.svg' %}</div><div class="depth-2 moving-depth" data-speed="3">{% include 'marathon/depth-2.svg' %}</div><div class="depth-3 moving-depth" data-speed="1.5">{% include 'marathon/depth-3.svg' %}</div></div><div class="game-content"><div class="desktop-version">{% include 'marathon/bg-games.svg' %}</div><div class="mobile-version">{% include 'marathon/bg-games-mobile.svg' %}</div><div id="game-bg"></div><div id="game-container"></div><a href="javascript:void(0);" class="btn btn-primary btn-back-steps" role="button" data-no-swup>Retour</a></div></div><!-- /content--games --></div><div class="modal fade modal-marathon" id="reglesModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="marathon-title"><span>Le Marathon des jeux</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Joue à nos mini-jeux pour atteindre la ligne d’arrivée ! <br />Chaque jeu gagné te fera avancer pour t’aider à gagner le marathon des jeux !</p><button class="btn btn-primary btn-yellow enter" data-no-swup data-bs-dismiss="modal" aria-label="Close">Je me lance !</button></div></div></div></div><div class="modal fade modal-marathon" id="bravoModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" data-keyboard="false" data-backdrop="static"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h2 id="bravo-title"><span>Bravo !</span></h2><button type="button" id="btn-modal-bravo-close" class="btn-close-hidden" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Tu as réussi ce jeu ! <br />Tu peux passer à la suite !</p><button type="button" class="btn btn-primary btn-yellow" data-bs-dismiss="modal" aria-label="Close">Jeu suivant</button></div></div></div></div><div class="modal fade modal-marathon" id="jeuxModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" data-keyboard="false" data-backdrop="static"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h2 id="jeux-title"><span>3 jeux réussis !</span></h2><button type="button" id="btn-modal-jeux-close" class="btn-close-hidden" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body modal-body-jeux"><p>BRAVO ! Tu as réussi ces trois jeux tu passes donc à la prochaine borne kilométrique !</p><button type="button" class="btn btn-primary btn-yellow" data-bs-dismiss="modal" aria-label="Close">Jeux suivants</button></div></div></div></div><div class="modal fade modal-marathon" id="endModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" data-keyboard="false" data-backdrop="static"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h2 id="end-title"><span>Arrivée</span></h2></div><div class="modal-body modal-body-end"><p>Bravo ! Tu es arrivé.e au bout des 42 km de jeux ! <br />Tu peux être fier.e de toi !</p><a class="btn btn-primary btn-green swup-link" href="{{ path('jeux') }}" data-swup-color="#7aac34">Je découvre d'autres jeux</a><button class="btn btn-primary btn-rose" id="btn-replay">Je rejoue</button></div></div></div></div><div class="modal fade modal-marathon" id="reglesMotsMelesModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="motsmeles-title" class="regles-title"><span>Mots Mêlés</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p class="desktop-version">Retrouve les mots de la liste cachés dans la grille ! <br />Pour les sélectionner, tu n'as qu'à cliquer sur la première lettre de ton mot et faire glisser ta souris jusqu'à la dernière. Attention les mots peuvent être écrit dans tous les sens (haut en bas, bas en haut, horizontal, diagonal).</p><p class="mobile-version">Retrouve les mots de la liste cachés dans la grille ! <br />Pour les sélectionner, tu n'as qu'à cliquer sur la première lettre de ton mot et faire glisser ton doigt jusqu'à la dernière. Attention les mots peuvent être écrit dans tous les sens (haut en bas, bas en haut, horizontal, diagonal).</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesRebusModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="rebus-title" class="regles-title"><span>Rébus</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Devine le mot à partir des dessins. Chaque dessin représente une ou plusieurs syllabes. Dès que tu as trouvé, tu peux cliquer sur le mot qui te semble le bon pour valider ta réponse.</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesOmbresModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="ombres-title" class="regles-title"><span>Pitch'ombres</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p class="desktop-version">Devine quelle ombre correspond au dessin à gauche de l’écran et clique dessus !</p><p class="mobile-version">Devine quelle ombre correspond au dessin en haut de l'écran et clique dessus !</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesMotsCoupesModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="motscoupes-title" class="regles-title"><span>Mots coupés</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Relie le début de mot à la fin correspondante. Pour les relier, clique sur la première partie du mot puis ensuite sur la seconde.</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesDifferencesModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="differences-title" class="regles-title"><span>Les 7 différences</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p class="desktop-version">Découvre les 7 différences entre les deux images ! <br />Clique sur l'image de droite lorsque tu aperçois une différence.</p><p class="mobile-version">Découvre les 7 différences entre les deux images ! <br />Clique sur l'image du bas lorsque tu aperçois une différence.</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesDevinetteModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="devinette-title" class="regles-title"><span>Devinette</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Clique sur la bonne réponse à la question !</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div><div class="modal fade modal-marathon" id="reglesCharadeModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header modal-header-regles"><h2 id="charade-title" class="regles-title"><span>Charade</span></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Trouve les différentes syllabes d’un mot grâce à chaque définition donnée !</p><a href="#" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary btn-rose" data-no-swup>Je me lance !</a></div></div></div></div>{% endblock %}