{"id":30788,"date":"2026-07-22T19:32:40","date_gmt":"2026-07-22T23:32:40","guid":{"rendered":"https:\/\/allianceenjesus.com\/?page_id=30788"},"modified":"2026-07-22T21:10:54","modified_gmt":"2026-07-23T01:10:54","slug":"jeu-classer-les-livres-bibliques","status":"publish","type":"page","link":"https:\/\/allianceenjesus.com\/?page_id=30788","title":{"rendered":"Jeu classer les livres bibliques"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30788\" class=\"elementor elementor-30788\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d7523ed elementor-section-full_width ang-section-padding-initial elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no\" data-id=\"d7523ed\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-70c7420 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"70c7420\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2a9f973 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"2a9f973\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-j6jr01l elementor-section-content-middle elementor-section-height-full elementor-section-full_width ang-section-padding-initial elementor-section-height-default elementor-section-items-middle wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no\" data-id=\"j6jr01l\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1eae7d elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"b1eae7d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e239bc3 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"e239bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-df14b24 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no\" data-id=\"df14b24\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c946b9 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4c946b9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3ce6178 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"3ce6178\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-e7c2190 e-flex e-con-boxed elementor-repeater-item-default_padding elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"e7c2190\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db91e63 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-html\" data-id=\"db91e63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta name=\"viewport\"\r\ncontent=\"width=device-width, initial-scale=1.0\">\r\n\r\n<title>\r\nJeu des livres de la Bible\r\n<\/title>\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   STYLE GENERAL\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\r\n    margin: 0;\r\n\r\n    font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #17365d,\r\n        #3f72af,\r\n        #6fa3d2\r\n    );\r\n\r\n    min-height: 100vh;\r\n\r\n    padding: 20px;\r\n\r\n}\r\n\r\n\r\n.container {\r\n\r\n    max-width: 1500px;\r\n\r\n    margin: auto;\r\n\r\n    background: white;\r\n\r\n    border-radius: 25px;\r\n\r\n    padding: 25px;\r\n\r\n    box-shadow:\r\n    0 10px 40px\r\n    rgba(0,0,0,0.3);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE\r\n===================================================== *\/\r\n\r\nh1 {\r\n\r\n    text-align: center;\r\n\r\n    color: #17365d;\r\n\r\n    margin-top: 0;\r\n\r\n    font-size: 34px;\r\n\r\n}\r\n\r\n\r\n.instructions {\r\n\r\n    text-align: center;\r\n\r\n    font-size: 18px;\r\n\r\n    color: #555;\r\n\r\n    margin-bottom: 20px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MODES\r\n===================================================== *\/\r\n\r\n.game-selection {\r\n\r\n    background: #f1f4f7;\r\n\r\n    border: 3px solid #d4dce4;\r\n\r\n    border-radius: 18px;\r\n\r\n    padding: 18px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    text-align: center;\r\n\r\n}\r\n\r\n\r\n.game-selection h2 {\r\n\r\n    margin-top: 0;\r\n\r\n    color: #17365d;\r\n\r\n}\r\n\r\n\r\n.mode-buttons {\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 12px;\r\n\r\n    flex-wrap: wrap;\r\n\r\n}\r\n\r\n\r\n.mode-button {\r\n\r\n    padding: 12px 20px;\r\n\r\n    border: 2px solid #4682b4;\r\n\r\n    border-radius: 12px;\r\n\r\n    background: white;\r\n\r\n    color: #17365d;\r\n\r\n    font-size: 16px;\r\n\r\n    font-weight: bold;\r\n\r\n    cursor: pointer;\r\n\r\n}\r\n\r\n\r\n.mode-button.active {\r\n\r\n    background: #17365d;\r\n\r\n    color: white;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SCORE\r\n===================================================== *\/\r\n\r\n.score-area {\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 20px;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    margin-bottom: 15px;\r\n\r\n}\r\n\r\n\r\n.score-box {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #ffd86b,\r\n        #e8b83f\r\n    );\r\n\r\n    padding: 12px 30px;\r\n\r\n    border-radius: 15px;\r\n\r\n    font-size: 22px;\r\n\r\n    font-weight: bold;\r\n\r\n}\r\n\r\n\r\n.placed-box {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #cce6ff,\r\n        #80b9e8\r\n    );\r\n\r\n    padding: 12px 30px;\r\n\r\n    border-radius: 15px;\r\n\r\n    font-size: 22px;\r\n\r\n    font-weight: bold;\r\n\r\n}\r\n\r\n\r\n#message {\r\n\r\n    text-align: center;\r\n\r\n    min-height: 35px;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: bold;\r\n\r\n    margin-bottom: 15px;\r\n\r\n}\r\n\r\n\r\n.good {\r\n\r\n    color: #16803c;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ZONE DE JEU\r\n===================================================== *\/\r\n\r\n.game-area {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n    1fr 2fr;\r\n\r\n    gap: 25px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ZONE LIVRES DISPONIBLES\r\n===================================================== *\/\r\n\r\n.books-area {\r\n\r\n    position: relative;\r\n\r\n    background: #f1f4f7;\r\n\r\n    border: 3px solid #d4dce4;\r\n\r\n    border-radius: 20px;\r\n\r\n    padding: 20px;\r\n\r\n    min-height: 650px;\r\n\r\n    transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n}\r\n\r\n\r\n.books-area h2 {\r\n\r\n    text-align: center;\r\n\r\n    color: #17365d;\r\n\r\n    margin-top: 0;\r\n\r\n}\r\n\r\n\r\n.books-help {\r\n\r\n    text-align: center;\r\n\r\n    color: #555;\r\n\r\n    margin-bottom: 20px;\r\n\r\n}\r\n\r\n\r\n.books-area.drop-active {\r\n\r\n    box-shadow:\r\n    0 0 0 5px\r\n    rgba(52,152,219,0.55);\r\n\r\n}\r\n\r\n\r\n.books-area.drop-active::after {\r\n\r\n    content:\r\n    \"\ud83d\udcda D\u00e9poser ici pour remettre le livre disponible\";\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n\r\n    left: 50%;\r\n\r\n    transform:\r\n    translate(-50%,-50%);\r\n\r\n    background:\r\n    rgba(255,255,255,0.96);\r\n\r\n    padding: 15px 25px;\r\n\r\n    border-radius: 12px;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: bold;\r\n\r\n    color: #17365d;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 100;\r\n\r\n    box-shadow:\r\n    0 5px 20px\r\n    rgba(0,0,0,0.2);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LISTE DES LIVRES\r\n===================================================== *\/\r\n\r\n#books {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n    repeat(2,1fr);\r\n\r\n    gap: 10px;\r\n\r\n    min-height: 350px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LIVRE DISPONIBLE\r\n===================================================== *\/\r\n\r\n.book {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #ffffff,\r\n        #e5edf5\r\n    );\r\n\r\n    border: 2px solid #4682b4;\r\n\r\n    border-radius: 10px;\r\n\r\n    padding: 13px 8px;\r\n\r\n    text-align: center;\r\n\r\n    font-weight: bold;\r\n\r\n    cursor: grab;\r\n\r\n    user-select: none;\r\n\r\n    touch-action: none;\r\n\r\n    transition:\r\n    transform 0.15s ease,\r\n    box-shadow 0.15s ease;\r\n\r\n}\r\n\r\n\r\n.book:hover {\r\n\r\n    transform:\r\n    translateY(-2px);\r\n\r\n    box-shadow:\r\n    0 4px 10px\r\n    rgba(0,0,0,0.15);\r\n\r\n}\r\n\r\n\r\n.book-in-zone {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    background: white;\r\n\r\n    border: 2px solid #999;\r\n\r\n    border-radius: 10px;\r\n\r\n    padding: 10px;\r\n\r\n    margin-bottom: 8px;\r\n\r\n    font-weight: bold;\r\n\r\n    cursor: grab;\r\n\r\n    user-select: none;\r\n\r\n    touch-action: none;\r\n\r\n    transition:\r\n    transform 0.15s ease,\r\n    box-shadow 0.15s ease;\r\n\r\n}\r\n\r\n\r\n.book-in-zone:hover {\r\n\r\n    box-shadow:\r\n    0 3px 10px\r\n    rgba(0,0,0,0.12);\r\n\r\n}\r\n\r\n\r\n.book.dragging,\r\n.book-in-zone.dragging {\r\n\r\n    opacity: 0.35;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TESTAMENTS\r\n===================================================== *\/\r\n\r\n.testaments {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n    1fr 1fr;\r\n\r\n    gap: 20px;\r\n\r\n}\r\n\r\n\r\n.testaments.single {\r\n\r\n    grid-template-columns:\r\n    1fr;\r\n\r\n}\r\n\r\n\r\n.testament {\r\n\r\n    position: relative;\r\n\r\n    border-radius: 20px;\r\n\r\n    padding: 15px;\r\n\r\n    min-height: 650px;\r\n\r\n    transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n}\r\n\r\n\r\n.ancien {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #fff5c7,\r\n        #ffe28a\r\n    );\r\n\r\n    border: 4px solid #d3a52c;\r\n\r\n}\r\n\r\n\r\n.nouveau {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #dceeff,\r\n        #a7d1f3\r\n    );\r\n\r\n    border: 4px solid #4385bd;\r\n\r\n}\r\n\r\n\r\n.testament.drop-active {\r\n\r\n    box-shadow:\r\n    0 0 0 5px\r\n    rgba(255,152,0,0.6);\r\n\r\n}\r\n\r\n\r\n.testament.drop-active::after {\r\n\r\n    content:\r\n    \"\ud83d\udcd6 D\u00e9poser le livre ici\";\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n\r\n    left: 50%;\r\n\r\n    transform:\r\n    translate(-50%,-50%);\r\n\r\n    background:\r\n    rgba(255,255,255,0.96);\r\n\r\n    padding: 15px 25px;\r\n\r\n    border-radius: 12px;\r\n\r\n    font-size: 20px;\r\n\r\n    font-weight: bold;\r\n\r\n    color: #17365d;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 100;\r\n\r\n    box-shadow:\r\n    0 5px 20px\r\n    rgba(0,0,0,0.2);\r\n\r\n}\r\n\r\n\r\n.testament h2 {\r\n\r\n    text-align: center;\r\n\r\n    margin-top: 5px;\r\n\r\n}\r\n\r\n\r\n.ancien h2 {\r\n\r\n    color: #8a6500;\r\n\r\n}\r\n\r\n\r\n.nouveau h2 {\r\n\r\n    color: #205987;\r\n\r\n}\r\n\r\n\r\n.testament-description {\r\n\r\n    text-align: center;\r\n\r\n    color: #555;\r\n\r\n    margin-bottom: 15px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LISTE DANS LE TESTAMENT\r\n===================================================== *\/\r\n\r\n.book-list {\r\n\r\n    min-height: 500px;\r\n\r\n    padding: 10px;\r\n\r\n    border-radius: 15px;\r\n\r\n    background:\r\n    rgba(255,255,255,0.35);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LIVRE CORRECT\r\n===================================================== *\/\r\n\r\n.book-in-zone.correct {\r\n\r\n    background: #b9efc7;\r\n\r\n    border: 3px solid #16803c;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PLACEHOLDER\r\n===================================================== *\/\r\n\r\n.drag-placeholder {\r\n\r\n    height: 48px;\r\n\r\n    margin-bottom: 8px;\r\n\r\n    border: 2px dashed #4682b4;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n    rgba(255,255,255,0.55);\r\n\r\n    transition:\r\n    all 0.12s ease;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FIN\r\n===================================================== *\/\r\n\r\n#end {\r\n\r\n    display: none;\r\n\r\n    text-align: center;\r\n\r\n    margin-top: 25px;\r\n\r\n    padding: 25px;\r\n\r\n    background: #d8f5df;\r\n\r\n    border: 3px solid #16803c;\r\n\r\n    border-radius: 20px;\r\n\r\n}\r\n\r\n\r\n#final {\r\n\r\n    font-size: 30px;\r\n\r\n    font-weight: bold;\r\n\r\n    color: #11652f;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOUTON\r\n===================================================== *\/\r\n\r\n.restart-button {\r\n\r\n    display: block;\r\n\r\n    margin: 25px auto 5px;\r\n\r\n    padding: 14px 35px;\r\n\r\n    border: none;\r\n\r\n    border-radius: 12px;\r\n\r\n    background: #17365d;\r\n\r\n    color: white;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: bold;\r\n\r\n    cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RESPONSIVE\r\n===================================================== *\/\r\n\r\n@media(max-width:1100px) {\r\n\r\n    .game-area {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:750px) {\r\n\r\n    .testaments {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:500px) {\r\n\r\n    body {\r\n\r\n        padding: 8px;\r\n\r\n    }\r\n\r\n\r\n    .container {\r\n\r\n        padding: 12px;\r\n\r\n    }\r\n\r\n\r\n    #books {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n    }\r\n\r\n\r\n    h1 {\r\n\r\n        font-size: 26px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n\r\n\r\n<h1>\r\n\ud83d\udcd6 Les livres de la Bible\r\n<\/h1>\r\n\r\n\r\n<div class=\"instructions\">\r\n\r\n\ud83d\uddb1\ufe0f Fais glisser un livre avec la souris.\r\n\r\n<br>\r\n\r\n\ud83d\udcf1 Sur t\u00e9l\u00e9phone ou tablette,\r\nfais glisser avec ton doigt.\r\n\r\n<br><br>\r\n\r\nTu peux d\u00e9placer les livres autant de fois que n\u00e9cessaire.\r\n\r\n<br>\r\n\r\nPour retirer un livre d'un Testament,\r\nfais-le glisser vers la zone\r\n<strong>\ud83d\udcda Livres disponibles<\/strong>.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     MODES\r\n===================================================== -->\r\n\r\n<div class=\"game-selection\">\r\n\r\n<h2>\r\n\ud83c\udfae Choisis ton jeu\r\n<\/h2>\r\n\r\n<div class=\"mode-buttons\">\r\n\r\n<button\r\nclass=\"mode-button active\"\r\ndata-mode=\"all\">\r\n\r\n\ud83d\udcd6 Toute la Bible\r\n<br>\r\n66 livres\r\n\r\n<\/button>\r\n\r\n\r\n<button\r\nclass=\"mode-button\"\r\ndata-mode=\"ancien\">\r\n\r\n\ud83d\udcdc Ancien Testament\r\n<br>\r\n39 livres\r\n\r\n<\/button>\r\n\r\n\r\n<button\r\nclass=\"mode-button\"\r\ndata-mode=\"nouveau\">\r\n\r\n\u271d\ufe0f Nouveau Testament\r\n<br>\r\n27 livres\r\n\r\n<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     SCORE\r\n===================================================== -->\r\n\r\n<div class=\"score-area\">\r\n\r\n<div class=\"score-box\">\r\n\r\n\ud83c\udfc6 Score :\r\n<span id=\"score\">0<\/span>\r\n\/\r\n<span id=\"maxScore\">66<\/span>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"placed-box\">\r\n\r\n\ud83d\udcda Livres plac\u00e9s :\r\n<span id=\"placed\">0<\/span>\r\n\/\r\n<span id=\"maxPlaced\">66<\/span>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div id=\"message\">\r\n\r\nCommence par d\u00e9placer un livre.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     ZONE DE JEU\r\n===================================================== -->\r\n\r\n<div class=\"game-area\">\r\n\r\n\r\n\r\n<!-- LIVRES DISPONIBLES -->\r\n\r\n<div\r\nclass=\"books-area\"\r\nid=\"booksArea\">\r\n\r\n<h2>\r\n\ud83d\udcda Livres disponibles\r\n<\/h2>\r\n\r\n\r\n<div class=\"books-help\">\r\n\r\nListe alphab\u00e9tique\r\n\r\n<br><br>\r\n\r\nGlisse un livre vers le Testament.\r\n\r\n<br>\r\n\r\nPour retirer un livre plac\u00e9,\r\nglisse-le ici.\r\n\r\n<\/div>\r\n\r\n\r\n<div id=\"books\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- TESTAMENTS -->\r\n\r\n<div\r\nclass=\"testaments\"\r\nid=\"testaments\">\r\n\r\n\r\n\r\n<!-- ANCIEN TESTAMENT -->\r\n\r\n<div\r\nclass=\"testament ancien\"\r\nid=\"ancienZone\"\r\ndata-testament=\"ancien\">\r\n\r\n<h2>\r\n\ud83d\udcdc Ancien Testament\r\n<\/h2>\r\n\r\n\r\n<div class=\"testament-description\">\r\n\r\n39 livres\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\nclass=\"book-list\"\r\nid=\"ancienList\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- NOUVEAU TESTAMENT -->\r\n\r\n<div\r\nclass=\"testament nouveau\"\r\nid=\"nouveauZone\"\r\ndata-testament=\"nouveau\">\r\n\r\n<h2>\r\n\u271d\ufe0f Nouveau Testament\r\n<\/h2>\r\n\r\n\r\n<div class=\"testament-description\">\r\n\r\n27 livres\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\nclass=\"book-list\"\r\nid=\"nouveauList\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- FIN -->\r\n\r\n<div id=\"end\">\r\n\r\n<h2>\r\n\ud83c\udf89 F\u00e9licitations !\r\n<\/h2>\r\n\r\n<p>\r\nTu as termin\u00e9 le jeu.\r\n<\/p>\r\n\r\n<div id=\"final\">\r\n\ud83c\udfc6 Score final\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<button\r\nclass=\"restart-button\"\r\nonclick=\"restartGame()\">\r\n\r\n\ud83d\udd04 Recommencer\r\n\r\n<\/button>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   DONNEES\r\n   Position = position r\u00e9elle dans le Testament\r\n   0 = premier livre\r\n===================================================== *\/\r\n\r\nconst booksData = [\r\n\r\n\/* =====================================================\r\n   ANCIEN TESTAMENT\r\n===================================================== *\/\r\n\r\n[\"Gen\u00e8se\",\"ancien\",0],\r\n[\"Exode\",\"ancien\",1],\r\n[\"L\u00e9vitique\",\"ancien\",2],\r\n[\"Nombres\",\"ancien\",3],\r\n[\"Deut\u00e9ronome\",\"ancien\",4],\r\n[\"Josu\u00e9\",\"ancien\",5],\r\n[\"Juges\",\"ancien\",6],\r\n[\"Ruth\",\"ancien\",7],\r\n[\"1 Samuel\",\"ancien\",8],\r\n[\"2 Samuel\",\"ancien\",9],\r\n[\"1 Rois\",\"ancien\",10],\r\n[\"2 Rois\",\"ancien\",11],\r\n[\"1 Chroniques\",\"ancien\",12],\r\n[\"2 Chroniques\",\"ancien\",13],\r\n[\"Esdras\",\"ancien\",14],\r\n[\"N\u00e9h\u00e9mie\",\"ancien\",15],\r\n[\"Esther\",\"ancien\",16],\r\n[\"Job\",\"ancien\",17],\r\n[\"Psaumes\",\"ancien\",18],\r\n[\"Proverbes\",\"ancien\",19],\r\n[\"Eccl\u00e9siaste\",\"ancien\",20],\r\n[\"Cantique des cantiques\",\"ancien\",21],\r\n[\"\u00c9sa\u00efe\",\"ancien\",22],\r\n[\"J\u00e9r\u00e9mie\",\"ancien\",23],\r\n[\"Lamentations\",\"ancien\",24],\r\n[\"\u00c9z\u00e9chiel\",\"ancien\",25],\r\n[\"Daniel\",\"ancien\",26],\r\n[\"Os\u00e9e\",\"ancien\",27],\r\n[\"Jo\u00ebl\",\"ancien\",28],\r\n[\"Amos\",\"ancien\",29],\r\n[\"Abdias\",\"ancien\",30],\r\n[\"Jonas\",\"ancien\",31],\r\n[\"Mich\u00e9e\",\"ancien\",32],\r\n[\"Nahum\",\"ancien\",33],\r\n[\"Habacuc\",\"ancien\",34],\r\n[\"Sophonie\",\"ancien\",35],\r\n[\"Agg\u00e9e\",\"ancien\",36],\r\n[\"Zacharie\",\"ancien\",37],\r\n[\"Malachie\",\"ancien\",38],\r\n\r\n\r\n\/* =====================================================\r\n   NOUVEAU TESTAMENT\r\n===================================================== *\/\r\n\r\n[\"Matthieu\",\"nouveau\",0],\r\n[\"Marc\",\"nouveau\",1],\r\n[\"Luc\",\"nouveau\",2],\r\n[\"Jean\",\"nouveau\",3],\r\n[\"Actes\",\"nouveau\",4],\r\n[\"Romains\",\"nouveau\",5],\r\n[\"1 Corinthiens\",\"nouveau\",6],\r\n[\"2 Corinthiens\",\"nouveau\",7],\r\n[\"Galates\",\"nouveau\",8],\r\n[\"\u00c9ph\u00e9siens\",\"nouveau\",9],\r\n[\"Philippiens\",\"nouveau\",10],\r\n[\"Colossiens\",\"nouveau\",11],\r\n[\"1 Thessaloniciens\",\"nouveau\",12],\r\n[\"2 Thessaloniciens\",\"nouveau\",13],\r\n[\"1 Timoth\u00e9e\",\"nouveau\",14],\r\n[\"2 Timoth\u00e9e\",\"nouveau\",15],\r\n[\"Tite\",\"nouveau\",16],\r\n[\"Phil\u00e9mon\",\"nouveau\",17],\r\n[\"H\u00e9breux\",\"nouveau\",18],\r\n[\"Jacques\",\"nouveau\",19],\r\n[\"1 Pierre\",\"nouveau\",20],\r\n[\"2 Pierre\",\"nouveau\",21],\r\n[\"1 Jean\",\"nouveau\",22],\r\n[\"2 Jean\",\"nouveau\",23],\r\n[\"3 Jean\",\"nouveau\",24],\r\n[\"Jude\",\"nouveau\",25],\r\n[\"Apocalypse\",\"nouveau\",26]\r\n\r\n];\r\n\r\n\r\n\/* =====================================================\r\n   ELEMENTS\r\n===================================================== *\/\r\n\r\nconst booksArea =\r\ndocument.getElementById(\"books\");\r\n\r\nconst booksContainer =\r\ndocument.getElementById(\"booksArea\");\r\n\r\nconst testaments =\r\ndocument.getElementById(\"testaments\");\r\n\r\nconst ancienZone =\r\ndocument.getElementById(\"ancienZone\");\r\n\r\nconst nouveauZone =\r\ndocument.getElementById(\"nouveauZone\");\r\n\r\nconst ancienList =\r\ndocument.getElementById(\"ancienList\");\r\n\r\nconst nouveauList =\r\ndocument.getElementById(\"nouveauList\");\r\n\r\nconst scoreDisplay =\r\ndocument.getElementById(\"score\");\r\n\r\nconst placedDisplay =\r\ndocument.getElementById(\"placed\");\r\n\r\nconst maxScoreDisplay =\r\ndocument.getElementById(\"maxScore\");\r\n\r\nconst maxPlacedDisplay =\r\ndocument.getElementById(\"maxPlaced\");\r\n\r\nconst message =\r\ndocument.getElementById(\"message\");\r\n\r\nconst end =\r\ndocument.getElementById(\"end\");\r\n\r\nconst final =\r\ndocument.getElementById(\"final\");\r\n\r\n\r\nlet currentMode = \"all\";\r\n\r\nlet draggedElement = null;\r\n\r\nlet placeholder = null;\r\n\r\n\r\n\/* =====================================================\r\n   MODES\r\n===================================================== *\/\r\n\r\nconst modeInfo = {\r\n\r\n    all: 66,\r\n\r\n    ancien: 39,\r\n\r\n    nouveau: 27\r\n\r\n};\r\n\r\n\r\n\/* =====================================================\r\n   CREATION DES LIVRES\r\n===================================================== *\/\r\n\r\nfunction createBooks() {\r\n\r\n    booksArea.innerHTML = \"\";\r\n\r\n    let list =\r\n    booksData.filter(book => {\r\n\r\n        if (\r\n            currentMode === \"all\"\r\n        ) {\r\n\r\n            return true;\r\n\r\n        }\r\n\r\n        return (\r\n            book[1]\r\n            ===\r\n            currentMode\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/* TRI ALPHABETIQUE *\/\r\n\r\n    list.sort((a,b) => {\r\n\r\n        return a[0].localeCompare(\r\n            b[0],\r\n            \"fr\",\r\n            {\r\n                sensitivity: \"base\"\r\n            }\r\n        );\r\n\r\n    });\r\n\r\n\r\n    list.forEach(data => {\r\n\r\n        const book =\r\n        document.createElement(\"div\");\r\n\r\n        book.className = \"book\";\r\n\r\n        book.textContent =\r\n        data[0];\r\n\r\n        book.dataset.name =\r\n        data[0];\r\n\r\n        book.dataset.testament =\r\n        data[1];\r\n\r\n        book.dataset.position =\r\n        data[2];\r\n\r\n        booksArea.appendChild(book);\r\n\r\n        book.addEventListener(\r\n            \"pointerdown\",\r\n            startDrag\r\n        );\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONFIGURATION DU MODE\r\n===================================================== *\/\r\n\r\nfunction configureMode() {\r\n\r\n    if (\r\n        currentMode === \"ancien\"\r\n    ) {\r\n\r\n        ancienZone.style.display =\r\n        \"block\";\r\n\r\n        nouveauZone.style.display =\r\n        \"none\";\r\n\r\n        testaments.classList.add(\r\n            \"single\"\r\n        );\r\n\r\n    }\r\n\r\n    else if (\r\n        currentMode === \"nouveau\"\r\n    ) {\r\n\r\n        ancienZone.style.display =\r\n        \"none\";\r\n\r\n        nouveauZone.style.display =\r\n        \"block\";\r\n\r\n        testaments.classList.add(\r\n            \"single\"\r\n        );\r\n\r\n    }\r\n\r\n    else {\r\n\r\n        ancienZone.style.display =\r\n        \"block\";\r\n\r\n        nouveauZone.style.display =\r\n        \"block\";\r\n\r\n        testaments.classList.remove(\r\n            \"single\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    const max =\r\n    modeInfo[currentMode];\r\n\r\n    maxScoreDisplay.textContent =\r\n    max;\r\n\r\n    maxPlacedDisplay.textContent =\r\n    max;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CHANGEMENT DE MODE\r\n===================================================== *\/\r\n\r\ndocument\r\n.querySelectorAll(\".mode-button\")\r\n.forEach(button => {\r\n\r\n    button.addEventListener(\r\n        \"click\",\r\n        function() {\r\n\r\n            currentMode =\r\n            this.dataset.mode;\r\n\r\n\r\n            document\r\n            .querySelectorAll(\r\n                \".mode-button\"\r\n            )\r\n            .forEach(b => {\r\n\r\n                b.classList.remove(\r\n                    \"active\"\r\n                );\r\n\r\n            });\r\n\r\n\r\n            this.classList.add(\r\n                \"active\"\r\n            );\r\n\r\n\r\n            restartGame();\r\n\r\n        }\r\n    );\r\n\r\n});\r\n\r\n\r\n\/* =====================================================\r\n   DEBUT DU GLISSEMENT\r\n===================================================== *\/\r\n\r\nfunction startDrag(event) {\r\n\r\n    event.preventDefault();\r\n\r\n\r\n    draggedElement =\r\n    event.currentTarget;\r\n\r\n\r\n    draggedElement.classList.add(\r\n        \"dragging\"\r\n    );\r\n\r\n\r\n    \/* Cr\u00e9ation du placeholder *\/\r\n\r\n    placeholder =\r\n    document.createElement(\r\n        \"div\"\r\n    );\r\n\r\n\r\n    placeholder.className =\r\n    \"drag-placeholder\";\r\n\r\n\r\n    placeholder.style.height =\r\n    draggedElement.offsetHeight\r\n    +\r\n    \"px\";\r\n\r\n\r\n    \/* Le placeholder prend\r\n       temporairement la place du livre *\/\r\n\r\n    draggedElement.parentNode.insertBefore(\r\n        placeholder,\r\n        draggedElement\r\n    );\r\n\r\n\r\n    \/* Capture du pointeur *\/\r\n\r\n    draggedElement.setPointerCapture(\r\n        event.pointerId\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"pointermove\",\r\n        moveDrag,\r\n        {\r\n            passive: false\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"pointerup\",\r\n        endDrag,\r\n        {\r\n            once: true\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"pointercancel\",\r\n        endDrag,\r\n        {\r\n            once: true\r\n        }\r\n    );\r\n\r\n\r\n    message.textContent =\r\n    \"D\u00e9place le livre et rel\u00e2che-le \u00e0 l'endroit souhait\u00e9.\";\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   OBTENIR UNE LISTE\r\n===================================================== *\/\r\n\r\nfunction getListFromZone(zone) {\r\n\r\n    if (\r\n        zone === ancienZone\r\n    ) {\r\n\r\n        return ancienList;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n        zone === nouveauZone\r\n    ) {\r\n\r\n        return nouveauList;\r\n\r\n    }\r\n\r\n\r\n    return null;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TROUVER LE LIVRE SOUS LE CURSEUR\r\n===================================================== *\/\r\n\r\nfunction getBookBeforePointer(\r\n    list,\r\n    pointerY\r\n) {\r\n\r\n    const books =\r\n    [\r\n        ...\r\n        list.querySelectorAll(\r\n            \".book-in-zone:not(.dragging)\"\r\n        )\r\n    ];\r\n\r\n\r\n    let closest = null;\r\n\r\n    let closestOffset =\r\n    Number.NEGATIVE_INFINITY;\r\n\r\n\r\n    books.forEach(book => {\r\n\r\n        const box =\r\n        book.getBoundingClientRect();\r\n\r\n\r\n        const offset =\r\n        pointerY\r\n        -\r\n        (\r\n            box.top\r\n            +\r\n            box.height \/ 2\r\n        );\r\n\r\n\r\n        if (\r\n            offset < 0\r\n            &&\r\n            offset >\r\n            closestOffset\r\n        ) {\r\n\r\n            closestOffset =\r\n            offset;\r\n\r\n            closest =\r\n            book;\r\n\r\n        }\r\n\r\n    });\r\n\r\n\r\n    return closest;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DEPLACEMENT PENDANT LE GLISSEMENT\r\n===================================================== *\/\r\n\r\nfunction moveDrag(event) {\r\n\r\n    if (\r\n        !draggedElement\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    event.preventDefault();\r\n\r\n\r\n    const element =\r\n    document.elementFromPoint(\r\n        event.clientX,\r\n        event.clientY\r\n    );\r\n\r\n\r\n    if (\r\n        !element\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       ZONE LIVRES DISPONIBLES\r\n    ================================================= *\/\r\n\r\n    if (\r\n        element.closest(\r\n            \"#booksArea\"\r\n        )\r\n    ) {\r\n\r\n        booksContainer.classList.add(\r\n            \"drop-active\"\r\n        );\r\n\r\n\r\n        ancienZone.classList.remove(\r\n            \"drop-active\"\r\n        );\r\n\r\n\r\n        nouveauZone.classList.remove(\r\n            \"drop-active\"\r\n        );\r\n\r\n\r\n        booksArea.appendChild(\r\n            placeholder\r\n        );\r\n\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       ZONE TESTAMENT\r\n    ================================================= *\/\r\n\r\n    const zone =\r\n    element.closest(\r\n        \".testament\"\r\n    );\r\n\r\n\r\n    if (\r\n        !zone\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       VERIFICATION TESTAMENT\r\n    ================================================= *\/\r\n\r\n    if (\r\n        draggedElement.dataset.testament\r\n        !==\r\n        zone.dataset.testament\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       VERIFICATION MODE\r\n    ================================================= *\/\r\n\r\n    if (\r\n        currentMode !== \"all\"\r\n        &&\r\n        currentMode\r\n        !==\r\n        draggedElement.dataset.testament\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    booksContainer.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    ancienZone.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    nouveauZone.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    zone.classList.add(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    const list =\r\n    getListFromZone(\r\n        zone\r\n    );\r\n\r\n\r\n    if (\r\n        !list\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       POSITIONNEMENT FLUIDE\r\n    ================================================= *\/\r\n\r\n    const target =\r\n    getBookBeforePointer(\r\n        list,\r\n        event.clientY\r\n    );\r\n\r\n\r\n    if (\r\n        target\r\n    ) {\r\n\r\n        list.insertBefore(\r\n            placeholder,\r\n            target\r\n        );\r\n\r\n    }\r\n\r\n    else {\r\n\r\n        list.appendChild(\r\n            placeholder\r\n        );\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FIN DU GLISSEMENT\r\n===================================================== *\/\r\n\r\nfunction endDrag() {\r\n\r\n    document.removeEventListener(\r\n        \"pointermove\",\r\n        moveDrag\r\n    );\r\n\r\n\r\n    booksContainer.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    ancienZone.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    nouveauZone.classList.remove(\r\n        \"drop-active\"\r\n    );\r\n\r\n\r\n    if (\r\n        !draggedElement\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       PLACE LE LIVRE A LA POSITION DU PLACEHOLDER\r\n    ================================================= *\/\r\n\r\n    if (\r\n        placeholder\r\n        &&\r\n        placeholder.parentNode\r\n    ) {\r\n\r\n        placeholder.parentNode.insertBefore(\r\n            draggedElement,\r\n            placeholder\r\n        );\r\n\r\n\r\n        placeholder.remove();\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       STYLE SELON LA ZONE\r\n    ================================================= *\/\r\n\r\n    if (\r\n        draggedElement.parentElement\r\n        ===\r\n        booksArea\r\n    ) {\r\n\r\n        draggedElement.className =\r\n        \"book\";\r\n\r\n    }\r\n\r\n    else {\r\n\r\n        draggedElement.className =\r\n        \"book-in-zone\";\r\n\r\n    }\r\n\r\n\r\n    draggedElement =\r\n    null;\r\n\r\n\r\n    placeholder =\r\n    null;\r\n\r\n\r\n    updateGame();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CALCUL DU SCORE\r\n===================================================== *\/\r\n\r\nfunction updateGame() {\r\n\r\n    let score = 0;\r\n\r\n    let placed = 0;\r\n\r\n\r\n    \/* =================================================\r\n       ANCIEN TESTAMENT\r\n    ================================================= *\/\r\n\r\n    if (\r\n        currentMode === \"all\"\r\n        ||\r\n        currentMode === \"ancien\"\r\n    ) {\r\n\r\n        const books =\r\n        ancienList.querySelectorAll(\r\n            \".book-in-zone\"\r\n        );\r\n\r\n\r\n        books.forEach(\r\n        (\r\n            book,\r\n            index\r\n        ) => {\r\n\r\n            placed++;\r\n\r\n\r\n            if (\r\n                Number(\r\n                    book.dataset.position\r\n                )\r\n                ===\r\n                index\r\n            ) {\r\n\r\n                score++;\r\n\r\n\r\n                book.classList.add(\r\n                    \"correct\"\r\n                );\r\n\r\n            }\r\n\r\n            else {\r\n\r\n                book.classList.remove(\r\n                    \"correct\"\r\n                );\r\n\r\n            }\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       NOUVEAU TESTAMENT\r\n    ================================================= *\/\r\n\r\n    if (\r\n        currentMode === \"all\"\r\n        ||\r\n        currentMode === \"nouveau\"\r\n    ) {\r\n\r\n        const books =\r\n        nouveauList.querySelectorAll(\r\n            \".book-in-zone\"\r\n        );\r\n\r\n\r\n        books.forEach(\r\n        (\r\n            book,\r\n            index\r\n        ) => {\r\n\r\n            placed++;\r\n\r\n\r\n            if (\r\n                Number(\r\n                    book.dataset.position\r\n                )\r\n                ===\r\n                index\r\n            ) {\r\n\r\n                score++;\r\n\r\n\r\n                book.classList.add(\r\n                    \"correct\"\r\n                );\r\n\r\n            }\r\n\r\n            else {\r\n\r\n                book.classList.remove(\r\n                    \"correct\"\r\n                );\r\n\r\n            }\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    scoreDisplay.textContent =\r\n    score;\r\n\r\n\r\n    placedDisplay.textContent =\r\n    placed;\r\n\r\n\r\n    \/* =================================================\r\n       FIN\r\n    ================================================= *\/\r\n\r\n    if (\r\n        score\r\n        ===\r\n        modeInfo[currentMode]\r\n    ) {\r\n\r\n        finishGame();\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FIN DU JEU\r\n===================================================== *\/\r\n\r\nfunction finishGame() {\r\n\r\n    const max =\r\n    modeInfo[currentMode];\r\n\r\n\r\n    message.textContent =\r\n    \"\ud83c\udf89 F\u00e9licitations ! Tous les livres sont dans le bon ordre !\";\r\n\r\n\r\n    message.className =\r\n    \"good\";\r\n\r\n\r\n    end.style.display =\r\n    \"block\";\r\n\r\n\r\n    final.textContent =\r\n    \"\ud83c\udfc6 Score final : \"\r\n    +\r\n    max\r\n    +\r\n    \" \/ \"\r\n    +\r\n    max;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RECOMMENCER\r\n===================================================== *\/\r\n\r\nfunction restartGame() {\r\n\r\n    ancienList.innerHTML =\r\n    \"\";\r\n\r\n    nouveauList.innerHTML =\r\n    \"\";\r\n\r\n\r\n    scoreDisplay.textContent =\r\n    \"0\";\r\n\r\n\r\n    placedDisplay.textContent =\r\n    \"0\";\r\n\r\n\r\n    end.style.display =\r\n    \"none\";\r\n\r\n\r\n    message.className =\r\n    \"\";\r\n\r\n\r\n    message.textContent =\r\n    \"Commence par d\u00e9placer un livre.\";\r\n\r\n\r\n    draggedElement =\r\n    null;\r\n\r\n\r\n    placeholder =\r\n    null;\r\n\r\n\r\n    createBooks();\r\n\r\n\r\n    configureMode();\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LANCEMENT\r\n===================================================== *\/\r\n\r\nrestartGame();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-852d08c e-flex e-con-boxed elementor-repeater-item-default_padding elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"852d08c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15efde6 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"15efde6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51b6126 e-flex e-con-boxed elementor-repeater-item-default_padding elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"51b6126\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d81f21 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-html\" data-id=\"4d81f21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta name=\"viewport\"\r\ncontent=\"width=device-width, initial-scale=1.0\">\r\n\r\n<title>\r\nLes 66 livres de la Bible\r\n<\/title>\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   STYLE GENERAL\r\n===================================================== *\/\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\nbody {\r\n\r\n    margin: 0;\r\n\r\n    font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #17365d,\r\n        #4f86b8,\r\n        #8fc1e3\r\n    );\r\n\r\n    min-height: 100vh;\r\n\r\n    padding: 20px;\r\n\r\n}\r\n\r\n\r\n.container {\r\n\r\n    max-width: 1100px;\r\n\r\n    margin: auto;\r\n\r\n    background: white;\r\n\r\n    border-radius: 25px;\r\n\r\n    padding: 30px;\r\n\r\n    box-shadow:\r\n    0 10px 40px\r\n    rgba(0,0,0,0.3);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE\r\n===================================================== *\/\r\n\r\nh1 {\r\n\r\n    text-align: center;\r\n\r\n    color: #17365d;\r\n\r\n    margin-top: 0;\r\n\r\n    font-size: 34px;\r\n\r\n}\r\n\r\n\r\n.subtitle {\r\n\r\n    text-align: center;\r\n\r\n    color: #555;\r\n\r\n    font-size: 18px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOUTON OUVRIR \/ FERMER\r\n===================================================== *\/\r\n\r\n.toggle-button {\r\n\r\n    display: block;\r\n\r\n    margin:\r\n    20px auto;\r\n\r\n    padding:\r\n    15px 30px;\r\n\r\n    border: none;\r\n\r\n    border-radius: 15px;\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #17365d,\r\n        #3f72af\r\n    );\r\n\r\n    color: white;\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: bold;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n    transform 0.2s,\r\n    box-shadow 0.2s;\r\n\r\n}\r\n\r\n\r\n.toggle-button:hover {\r\n\r\n    transform:\r\n    translateY(-2px);\r\n\r\n    box-shadow:\r\n    0 5px 15px\r\n    rgba(0,0,0,0.25);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PANNEAU DES LIVRES\r\n===================================================== *\/\r\n\r\n.books-panel {\r\n\r\n    display: none;\r\n\r\n    margin-top: 25px;\r\n\r\n}\r\n\r\n\r\n.books-panel.visible {\r\n\r\n    display: block;\r\n\r\n    animation:\r\n    slideDown 0.35s ease;\r\n\r\n}\r\n\r\n\r\n@keyframes slideDown {\r\n\r\n    from {\r\n\r\n        opacity: 0;\r\n\r\n        transform:\r\n        translateY(-15px);\r\n\r\n    }\r\n\r\n    to {\r\n\r\n        opacity: 1;\r\n\r\n        transform:\r\n        translateY(0);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LES DEUX TESTAMENTS\r\n===================================================== *\/\r\n\r\n.testaments {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n    1fr 1fr;\r\n\r\n    gap: 25px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TESTAMENT\r\n===================================================== *\/\r\n\r\n.testament {\r\n\r\n    border-radius: 20px;\r\n\r\n    padding: 20px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ANCIEN TESTAMENT\r\n===================================================== *\/\r\n\r\n.ancien {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #fff5c7,\r\n        #ffe28a\r\n    );\r\n\r\n    border:\r\n    3px solid #d3a52c;\r\n\r\n}\r\n\r\n\r\n.ancien h2 {\r\n\r\n    color: #8a6500;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NOUVEAU TESTAMENT\r\n===================================================== *\/\r\n\r\n.nouveau {\r\n\r\n    background:\r\n    linear-gradient(\r\n        135deg,\r\n        #dceeff,\r\n        #a7d1f3\r\n    );\r\n\r\n    border:\r\n    3px solid #4385bd;\r\n\r\n}\r\n\r\n\r\n.nouveau h2 {\r\n\r\n    color: #205987;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITRE TESTAMENT\r\n===================================================== *\/\r\n\r\n.testament h2 {\r\n\r\n    text-align: center;\r\n\r\n    margin-top: 0;\r\n\r\n    font-size: 25px;\r\n\r\n}\r\n\r\n\r\n.count {\r\n\r\n    text-align: center;\r\n\r\n    font-weight: bold;\r\n\r\n    color: #555;\r\n\r\n    margin-bottom: 18px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LISTE DES LIVRES\r\n===================================================== *\/\r\n\r\n.book-list {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n    1fr 1fr;\r\n\r\n    gap: 9px;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LIVRE\r\n===================================================== *\/\r\n\r\n.book {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    background:\r\n    rgba(255,255,255,0.85);\r\n\r\n    border-radius: 10px;\r\n\r\n    padding: 9px;\r\n\r\n    font-weight: bold;\r\n\r\n    border:\r\n    1px solid\r\n    rgba(0,0,0,0.15);\r\n\r\n    transition:\r\n    transform 0.2s,\r\n    background 0.2s,\r\n    box-shadow 0.2s;\r\n\r\n}\r\n\r\n\r\n.book:hover {\r\n\r\n    transform:\r\n    translateY(-2px);\r\n\r\n    background:\r\n    white;\r\n\r\n    box-shadow:\r\n    0 4px 10px\r\n    rgba(0,0,0,0.15);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NUMERO DU LIVRE\r\n===================================================== *\/\r\n\r\n.book-number {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    min-width: 30px;\r\n\r\n    height: 30px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n    #17365d;\r\n\r\n    color: white;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: bold;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NUMEROS ANCIEN TESTAMENT\r\n===================================================== *\/\r\n\r\n.ancien .book-number {\r\n\r\n    background:\r\n    #c29419;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NUMEROS NOUVEAU TESTAMENT\r\n===================================================== *\/\r\n\r\n.nouveau .book-number {\r\n\r\n    background:\r\n    #3576a9;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NOM DU LIVRE\r\n===================================================== *\/\r\n\r\n.book-name {\r\n\r\n    flex: 1;\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RESPONSIVE\r\n===================================================== *\/\r\n\r\n@media(max-width:850px) {\r\n\r\n    .testaments {\r\n\r\n        grid-template-columns:\r\n        1fr;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:550px) {\r\n\r\n    body {\r\n\r\n        padding: 8px;\r\n\r\n    }\r\n\r\n\r\n    .container {\r\n\r\n        padding: 15px;\r\n\r\n    }\r\n\r\n\r\n    h1 {\r\n\r\n        font-size: 27px;\r\n\r\n    }\r\n\r\n\r\n    .book-list {\r\n\r\n        grid-template-columns:\r\n        1fr;\r\n\r\n    }\r\n\r\n\r\n    .book {\r\n\r\n        padding: 11px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n\r\n\r\n<!-- =====================================================\r\n     TITRE\r\n===================================================== -->\r\n\r\n<h1>\r\n\ud83d\udcd6 Les 66 livres de la Bible\r\n<\/h1>\r\n\r\n\r\n<div class=\"subtitle\">\r\n\r\nD\u00e9couvrez les livres de l'Ancien et du Nouveau Testament.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     BOUTON\r\n===================================================== -->\r\n\r\n<button\r\nclass=\"toggle-button\"\r\nid=\"toggleButton\"\r\nonclick=\"toggleBooks()\">\r\n\r\n\ud83d\udcd6 Voir les 66 livres de la Bible\r\n\r\n<\/button>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     PANNEAU\r\n===================================================== -->\r\n\r\n<div\r\nclass=\"books-panel\"\r\nid=\"booksPanel\">\r\n\r\n\r\n<div class=\"testaments\">\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     ANCIEN TESTAMENT\r\n===================================================== -->\r\n\r\n<div class=\"testament ancien\">\r\n\r\n\r\n<h2>\r\n\ud83d\udcdc Ancien Testament\r\n<\/h2>\r\n\r\n\r\n<div class=\"count\">\r\n\r\n39 livres\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"book-list\">\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">1<\/span>\r\n<span class=\"book-name\">Gen\u00e8se<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">2<\/span>\r\n<span class=\"book-name\">Exode<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">3<\/span>\r\n<span class=\"book-name\">L\u00e9vitique<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">4<\/span>\r\n<span class=\"book-name\">Nombres<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">5<\/span>\r\n<span class=\"book-name\">Deut\u00e9ronome<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">6<\/span>\r\n<span class=\"book-name\">Josu\u00e9<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">7<\/span>\r\n<span class=\"book-name\">Juges<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">8<\/span>\r\n<span class=\"book-name\">Ruth<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">9<\/span>\r\n<span class=\"book-name\">1 Samuel<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">10<\/span>\r\n<span class=\"book-name\">2 Samuel<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">11<\/span>\r\n<span class=\"book-name\">1 Rois<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">12<\/span>\r\n<span class=\"book-name\">2 Rois<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">13<\/span>\r\n<span class=\"book-name\">1 Chroniques<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">14<\/span>\r\n<span class=\"book-name\">2 Chroniques<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">15<\/span>\r\n<span class=\"book-name\">Esdras<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">16<\/span>\r\n<span class=\"book-name\">N\u00e9h\u00e9mie<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">17<\/span>\r\n<span class=\"book-name\">Esther<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">18<\/span>\r\n<span class=\"book-name\">Job<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">19<\/span>\r\n<span class=\"book-name\">Psaumes<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">20<\/span>\r\n<span class=\"book-name\">Proverbes<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">21<\/span>\r\n<span class=\"book-name\">Eccl\u00e9siaste<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">22<\/span>\r\n<span class=\"book-name\">\r\nCantique des cantiques\r\n<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">23<\/span>\r\n<span class=\"book-name\">\u00c9sa\u00efe<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">24<\/span>\r\n<span class=\"book-name\">J\u00e9r\u00e9mie<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">25<\/span>\r\n<span class=\"book-name\">Lamentations<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">26<\/span>\r\n<span class=\"book-name\">\u00c9z\u00e9chiel<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">27<\/span>\r\n<span class=\"book-name\">Daniel<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">28<\/span>\r\n<span class=\"book-name\">Os\u00e9e<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">29<\/span>\r\n<span class=\"book-name\">Jo\u00ebl<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">30<\/span>\r\n<span class=\"book-name\">Amos<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">31<\/span>\r\n<span class=\"book-name\">Abdias<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">32<\/span>\r\n<span class=\"book-name\">Jonas<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">33<\/span>\r\n<span class=\"book-name\">Mich\u00e9e<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">34<\/span>\r\n<span class=\"book-name\">Nahum<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">35<\/span>\r\n<span class=\"book-name\">Habacuc<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">36<\/span>\r\n<span class=\"book-name\">Sophonie<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">37<\/span>\r\n<span class=\"book-name\">Agg\u00e9e<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">38<\/span>\r\n<span class=\"book-name\">Zacharie<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">39<\/span>\r\n<span class=\"book-name\">Malachie<\/span>\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     NOUVEAU TESTAMENT\r\n===================================================== -->\r\n\r\n<div class=\"testament nouveau\">\r\n\r\n\r\n<h2>\r\n\u271d\ufe0f Nouveau Testament\r\n<\/h2>\r\n\r\n\r\n<div class=\"count\">\r\n\r\n27 livres\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"book-list\">\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">1<\/span>\r\n<span class=\"book-name\">Matthieu<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">2<\/span>\r\n<span class=\"book-name\">Marc<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">3<\/span>\r\n<span class=\"book-name\">Luc<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">4<\/span>\r\n<span class=\"book-name\">Jean<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">5<\/span>\r\n<span class=\"book-name\">Actes<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">6<\/span>\r\n<span class=\"book-name\">Romains<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">7<\/span>\r\n<span class=\"book-name\">1 Corinthiens<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">8<\/span>\r\n<span class=\"book-name\">2 Corinthiens<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">9<\/span>\r\n<span class=\"book-name\">Galates<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">10<\/span>\r\n<span class=\"book-name\">\u00c9ph\u00e9siens<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">11<\/span>\r\n<span class=\"book-name\">Philippiens<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">12<\/span>\r\n<span class=\"book-name\">Colossiens<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">13<\/span>\r\n<span class=\"book-name\">\r\n1 Thessaloniciens\r\n<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">14<\/span>\r\n<span class=\"book-name\">\r\n2 Thessaloniciens\r\n<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">15<\/span>\r\n<span class=\"book-name\">\r\n1 Timoth\u00e9e\r\n<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">16<\/span>\r\n<span class=\"book-name\">\r\n2 Timoth\u00e9e\r\n<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">17<\/span>\r\n<span class=\"book-name\">Tite<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">18<\/span>\r\n<span class=\"book-name\">Phil\u00e9mon<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">19<\/span>\r\n<span class=\"book-name\">H\u00e9breux<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">20<\/span>\r\n<span class=\"book-name\">Jacques<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">21<\/span>\r\n<span class=\"book-name\">1 Pierre<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">22<\/span>\r\n<span class=\"book-name\">2 Pierre<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">23<\/span>\r\n<span class=\"book-name\">1 Jean<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">24<\/span>\r\n<span class=\"book-name\">2 Jean<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">25<\/span>\r\n<span class=\"book-name\">3 Jean<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">26<\/span>\r\n<span class=\"book-name\">Jude<\/span>\r\n<\/div>\r\n\r\n\r\n<div class=\"book\">\r\n<span class=\"book-number\">27<\/span>\r\n<span class=\"book-name\">Apocalypse<\/span>\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   OUVRIR \/ FERMER LA LISTE\r\n===================================================== *\/\r\n\r\nfunction toggleBooks() {\r\n\r\n\r\n    const panel =\r\n    document.getElementById(\r\n        \"booksPanel\"\r\n    );\r\n\r\n\r\n    const button =\r\n    document.getElementById(\r\n        \"toggleButton\"\r\n    );\r\n\r\n\r\n    if (\r\n        panel.classList.contains(\r\n            \"visible\"\r\n        )\r\n    ) {\r\n\r\n\r\n        \/* =========================\r\n           FERMER\r\n        ========================= *\/\r\n\r\n        panel.classList.remove(\r\n            \"visible\"\r\n        );\r\n\r\n\r\n        button.textContent =\r\n        \"\ud83d\udcd6 Voir les 66 livres de la Bible\";\r\n\r\n\r\n    }\r\n\r\n    else {\r\n\r\n\r\n        \/* =========================\r\n           OUVRIR\r\n        ========================= *\/\r\n\r\n        panel.classList.add(\r\n            \"visible\"\r\n        );\r\n\r\n\r\n        button.textContent =\r\n        \"\ud83d\udd3d Masquer les livres de la Bible\";\r\n\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2167cff e-flex e-con-boxed elementor-repeater-item-default_padding elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"2167cff\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cba2752 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"cba2752\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-692f03b e-flex e-con-boxed elementor-repeater-item-default_padding sk-none elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"692f03b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ffbca8 animated-slow external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-invisible elementor-widget elementor-widget-image\" data-id=\"8ffbca8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"275\" height=\"183\" src=\"https:\/\/allianceenjesus.com\/wp-content\/uploads\/2022\/03\/alliance-en-jesus-1-1.jpg\" class=\"attachment-large size-large wp-image-3707\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Jeu des livres de la Bible \ud83d\udcd6 Les livres de la Bible \ud83d\uddb1\ufe0f Fais glisser un livre avec la souris. \ud83d\udcf1 Sur t\u00e9l\u00e9phone ou tablette, fais glisser avec ton doigt. Tu peux d\u00e9placer les livres autant de fois que n\u00e9cessaire. Pour retirer un livre d&rsquo;un Testament, fais-le glisser vers la zone \ud83d\udcda Livres disponibles. \ud83c\udfae Choisis ton jeu \ud83d\udcd6 Toute la Bible 66 livres \ud83d\udcdc Ancien Testament 39 livres \u271d\ufe0f Nouveau Testament 27 livres \ud83c\udfc6 Score : 0 \/ 66 \ud83d\udcda Livres plac\u00e9s : 0 \/ 66 Commence par d\u00e9placer un livre. \ud83d\udcda Livres disponibles Liste alphab\u00e9tique Glisse un livre vers le Testament. Pour retirer un livre plac\u00e9, glisse-le ici. \ud83d\udcdc Ancien Testament 39 livres \u271d\ufe0f Nouveau Testament 27 livres \ud83c\udf89 F\u00e9licitations ! Tu as termin\u00e9 le jeu. \ud83c\udfc6 Score final \ud83d\udd04 Recommencer Les 66 livres de la Bible \ud83d\udcd6 Les 66 livres de la Bible D\u00e9couvrez les livres de l&rsquo;Ancien et du Nouveau Testament. \ud83d\udcd6 Voir les 66 livres de la Bible \ud83d\udcdc Ancien Testament 39 livres 1 Gen\u00e8se 2 Exode 3 L\u00e9vitique 4 Nombres 5 Deut\u00e9ronome 6 Josu\u00e9 7 Juges 8 Ruth 9 1 Samuel 10 2 Samuel 11 1 Rois 12 2 Rois 13 1 Chroniques 14 2 Chroniques 15 Esdras 16 N\u00e9h\u00e9mie 17 Esther 18 Job 19 Psaumes 20 Proverbes 21 Eccl\u00e9siaste 22 Cantique des cantiques 23 \u00c9sa\u00efe 24 J\u00e9r\u00e9mie 25 Lamentations 26 \u00c9z\u00e9chiel 27 Daniel 28 Os\u00e9e 29 Jo\u00ebl 30 Amos 31 Abdias 32 Jonas 33 Mich\u00e9e 34 Nahum 35 Habacuc 36 Sophonie 37 Agg\u00e9e 38 Zacharie 39 Malachie \u271d\ufe0f Nouveau Testament 27 livres 1 Matthieu 2 Marc 3 Luc 4 Jean 5 Actes 6 Romains 7 1 Corinthiens 8 2 Corinthiens 9 Galates 10 \u00c9ph\u00e9siens 11 Philippiens 12 Colossiens 13 1 Thessaloniciens 14 2 Thessaloniciens 15 1 Timoth\u00e9e 16 2 Timoth\u00e9e 17 Tite 18 Phil\u00e9mon 19 H\u00e9breux 20 Jacques 21 1 Pierre 22 2 Pierre 23 1 Jean 24 2 Jean 25 3 Jean 26 Jude 27 Apocalypse<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-30788","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"tp-image-grid":false,"ca-people-thumb":false,"ca-address-thumb":false,"ultp_layout_landscape_large":false,"ultp_layout_landscape":false,"ultp_layout_portrait":false,"ultp_layout_square":false,"mailpoet_newsletter_max":false,"masvideos_video_large":false,"masvideos_video_medium":false,"masvideos_video_thumbnail":false,"masvideos_movie_large":false,"masvideos_movie_medium":false,"masvideos_movie_thumbnail":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"Serviteur","author_link":"https:\/\/allianceenjesus.com\/author\/jaijp3a12g7"},"uagb_comment_info":0,"uagb_excerpt":"Jeu des livres de la Bible \ud83d\udcd6 Les livres de la Bible \ud83d\uddb1\ufe0f Fais glisser un livre avec la souris. \ud83d\udcf1 Sur t\u00e9l\u00e9phone ou tablette, fais glisser avec ton doigt. Tu peux d\u00e9placer les livres autant de fois que n\u00e9cessaire. Pour retirer un livre d&rsquo;un Testament, fais-le glisser vers la zone \ud83d\udcda Livres disponibles. \ud83c\udfae\u2026","_links":{"self":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30788"}],"version-history":[{"count":100,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30788\/revisions"}],"predecessor-version":[{"id":30892,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30788\/revisions\/30892"}],"wp:attachment":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}