{"id":11631,"date":"2025-09-16T20:58:48","date_gmt":"2025-09-17T00:58:48","guid":{"rendered":"https:\/\/www.atelierpm.ca\/sansfautes\/?page_id=11631"},"modified":"2025-09-20T18:08:06","modified_gmt":"2025-09-20T22:08:06","slug":"entree-en-matiere-2","status":"publish","type":"page","link":"https:\/\/www.atelierpm.ca\/sansfautes\/","title":{"rendered":"Entr\u00e9e en mati\u00e8re&#8230;"},"content":{"rendered":"<style>\n\t\t@media screen and (min-width: 601px) \n        {\n\t        .affichage \n\t\t\t{\n\t\t\t\tfont-size: 2px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: white;\n\t\t\t}\n\t\t\t.affichlien \n\t\t\t{\n\t\t\t\tfont-size: 2px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: white;\n\t\t\t}\n\t\t\t.affichage:hover \n\t\t\t{\n\t\t\t\tfont-size: 2px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: white;\n\t\t\t}\n\t\t\t.affichlien:hover\n\t\t\t{\n\t\t\t\tfont-size: 2px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: white;\n\t\t\t}\n\t\t\t.affichdiv \n\t\t\t{ \n\t\t\t\tbackground-color: #f5e1ad;\n\t\t\t}\n\t\t}\n\t\t@media screen and (max-width: 600px) \n        {\n\t\t\t.affichage \n\t\t\t{ \n\t\t\t\tfont-size: 6 px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: #2d4e5e;\n\t\t\t}\n\t\t\t.affichlien \n\t\t\t{\n\t\t\t\tfont-size: 6 px; \n\t\t\t\tfont-weight:bold;\n\t\t\t\tcolor: #96453e;\n\t\t\t}\n\t\t\t.affichdiv \n\t\t\t{ \n\t\t\t\tbackground-color: #f5e1ad;\n\t\t\t}\n\t\t}\n\t\t<\/style>\n\t\t\n\t\t<div class=\"affichdiv\">\n\t\t\n\t\t<p class=\"affichage\">Bonne visite !\n\t\t\n\t    <span class=\"affichlien\">\n\t\t<a class=\"affichlien\" href=\"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/connexion\/\">Connexion<\/a> ***\n\t\t<a class=\"affichlien\" href=\"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/inscription\/\">Inscription<\/a>\n\t\t<\/span><\/p><\/div>\n\n\n\n<style>\n\n.boutonInstructions {\n\n background: rgba(45, 78, 94, 0.9);\n  box-shadow: 0 12px 20px rgba(45, 78, 94, 0.35);\n \n  color: #b2f0e8;\n border: 4px solid #b2f0e8;\n\n  padding: 10px 40px;\n  margin: 5px;\n  font-size: 1.2em;\n  font-weight: 600;\n \n  border-radius: 12px;\n  cursor: pointer;\n  backdrop-filter: blur(6px);\n\n  transition: all 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.boutonInstructions:hover {\nbackground: rgba(45, 78, 94, 0.7); \/* bleu-gris transparent *\/\n  color: #e8f2d9;                   \/* texte pastel clair *\/\n border: 2px solid rgba(45, 78, 94, 0.8);\n  box-shadow: 0 8px 15px rgba(45, 78, 94, 0.2);\n \n \n}\n\n.boutonInstructions:active {\n  animation: rebound 0.25s ease forwards;\n  transform: scale(0.92);\n  box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);\n}\n\n.boutonInstructions2 {\n  background: rgba(45, 78, 94, 0.9);\n  box-shadow: 0 12px 20px rgba(45, 78, 94, 0.35);\n  color: #e8f2d9;\n  border: 4px solid #fbd4e1;\n  padding: 10px 40px;\n  margin: 5px;\n  font-size: 1.2em;\n  font-weight: 600;\n  border-radius: 12px;\n  cursor: pointer;\n  backdrop-filter: blur(6px);\n  transition: all 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* D\u00e9grad\u00e9 rose p\u00e2le + effet de brillance au hover *\/\n.boutonInstructions2:hover {\n  background: linear-gradient(145deg, #2d4e5e 10%, #f9dbe7 90%);\n  color: #ffe6f0;\n  border: 2px solid #f285b9;\n  box-shadow: 0 8px 18px rgba(242, 133, 185, 0.4);\n}\n\n\/* Ajout d\u2019un reflet brillant qui glisse doucement *\/\n.boutonInstructions2::before {\n  content: \"\";\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: linear-gradient(60deg, transparent, rgba(255,255,255,0.2), transparent);\n  transform: rotate(25deg);\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n\n.boutonInstructions2:hover::before {\n  opacity: 1;\n  animation: shine 1.2s linear;\n}\n\n@keyframes shine {\n  0% {\n    transform: translateX(-100%) rotate(25deg);\n  }\n  100% {\n    transform: translateX(100%) rotate(25deg);\n  }\n}\n\n\/* Rebond au clic *\/\n.boutonInstructions2:active {\n  animation: rebound 0.35s ease forwards;\n  transform: scale(0.8);\n  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n@keyframes rebound {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n\n\n@keyframes rebound {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n\n.boutonInstrucRectang  {\n    background: linear-gradient(145deg, #4a6a7a, #214051); \/* d\u00e9grad\u00e9 p\u00e2le *\/\n    color: white;\n    padding: 12px 36px;\n    margin: 5px;\n    font-size: 1.3em;\n    font-weight: bold;\n    border: none;\n    border-radius: 8px; \/* coins l\u00e9g\u00e8rement arrondis *\/\n    cursor: pointer;\n\n    \/* Ombres pour effet 3D *\/\n    box-shadow: 4px 4px 8px #1a2b34,\n                -4px -4px 8px #5f8ca3;\n\n    transition: all 0.3s ease;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonInstrucRectang:hover {\n    background: linear-gradient(145deg, #5b7b8b, #2c5163);\n}\n\n.boutonInstrucRectang:active {\n    animation: rebound 0.3s ease forwards;\n    box-shadow: inset 2px 2px 5px #1a2b34;\n    transform: scale(0.95);\n}\n\n@keyframes rebound {\n    0% {\n        transform: scale(1);\n    }\n    50% {\n        transform: scale(0.85);\n    }\n    100% {\n        transform: scale(1);\n    }\n}\n\n\n.boutonInstrucOvale {\n    background: linear-gradient(145deg, #4a6a7a, #214051); \/* d\u00e9grad\u00e9 plus p\u00e2le et doux *\/\n    color: white;\n    padding: 12px 36px;\n    margin: 5px;\n    font-size: 1.3em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50px;\n    cursor: pointer;\n\n    \/* Ombres pour effet 3D *\/\n    box-shadow:  4px 4px 8px #1a2b34,\n                 -4px -4px 8px #5f8ca3;\n\n    \/* Transition fluide *\/\n    transition: all 0.3s ease;\n    \/* Pour centrer texte + ic\u00f4ne si besoin *\/\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\/* Effet rebondissant \u00e0 l'appui *\/\n.boutonInstrucOvale :active {\n    animation: rebound 0.3s ease forwards;\n    box-shadow: inset 2px 2px 5px #1a2b34;\n    transform: scale(0.95);\n}\n\n.boutonInstrucOvale :hover {\n    background: linear-gradient(145deg, #5b7b8b, #2c5163);\n}\n\n\/* Animation rebond *\/\n@keyframes rebound {\n    0% {\n        transform: scale(1);\n    }\n    50% {\n        transform: scale(0.85);\n    }\n    100% {\n        transform: scale(1);\n    }\n}\n\n.boutonchoix5 {\n    background-color: #f7c6d9;         \/* rose pastel *\/\n    color: #5a2e3d;                    \/* texte bordeaux doux *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #d99aaa;         \/* ombre ros\u00e9e pour effet 3D *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix5:hover {\n    background-color: #fbb5cc;         \/* plus vif au survol *\/\n}\n\n.boutonchoix5:active {\n    box-shadow: 0 2px #d99aaa;\n    transform: translateY(2px);\n}\n\n.boutonchoix6 {\n    background-color: #d8c4f3;         \/* violet pastel *\/\n    color: #3e2a5e;                    \/* texte violet fonc\u00e9 pour bon contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #bca0e8;         \/* ombre violette douce *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix6:hover {\n    background-color: #cdb3ef;         \/* un peu plus vif au survol *\/\n}\n\n.boutonchoix6:active {\n    box-shadow: 0 2px #bca0e8;\n    transform: translateY(2px);\n}\n.boutonchoix7 {\n    background: linear-gradient(135deg, #e7c6ff, #f3c6e7);  \/* d\u00e9grad\u00e9 lavande \u2192 rose pastel *\/\n    color: #4a2b5f;                    \/* texte violet fonc\u00e9 lisible *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #caa0db;         \/* ombre lavande *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix7:hover {\n    background: linear-gradient(135deg, #dab6ff, #f6b9e0);  \/* d\u00e9grad\u00e9 plus vif au survol *\/\n}\n\n.boutonchoix7:active {\n    box-shadow: 0 2px #caa0db;\n    transform: translateY(2px);\n}\n.boutonchoix8 {\n    background-color: #ffd8b2;         \/* orange pastel doux *\/\n    color: #5a2e00;                    \/* texte brun fonc\u00e9 pour contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #e6b07a;         \/* ombre orang\u00e9e plus fonc\u00e9e *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix8:hover {\n    background-color: #ffc999;         \/* plus vif au survol *\/\n}\n\n.boutonchoix8:active {\n    box-shadow: 0 2px #e6b07a;\n    transform: translateY(2px);\n}\n.boutonchoix9 {\n    background-color: #b2f0e8;         \/* turquoise pastel *\/\n    color: #1e4e4a;                    \/* texte vert-bleu fonc\u00e9 pour bon contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #88d8ce;         \/* ombre turquoise plus fonc\u00e9e *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix9:hover {\n    background-color: #a3e7dd;         \/* turquoise plus vif au survol *\/\n}\n\n.boutonchoix9:active {\n    box-shadow: 0 2px #88d8ce;\n    transform: translateY(2px);\n}\n\n\nbutton {\n        padding: 10px 20px;\n        margin: 5px;\n        font-size: 1.2em;\n        font-weight:bold;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n\n\n.boutonchoix {\n    background-color: #e8f2d9;\n    color: #2d4e5e;        \n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%; \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #2d4e5e; \/* ombre 3D assortie *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix:hover {\n    background-color: pink;\n}\n\n.boutonchoix:active {\n    box-shadow: 0 2px #2d4e5e;\n    transform: translateY(2px);\n}\n.boutonchoix2 {\n    background-color: #d1eeff;          \/* bleu tr\u00e8s p\u00e2le *\/\n    color: #2d4e5e;                     \/* texte fonc\u00e9 pour le contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #7aa7c7;         \/* ombre bleu-gris assortie *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix2:hover {\n    background-color: #c2e2fc;         \/* l\u00e9g\u00e8rement plus fonc\u00e9 au survol *\/\n}\n\n.boutonchoix2:active {\n    box-shadow: 0 2px #7aa7c7;\n    transform: translateY(2px);\n}\n.boutonchoix3 {\n    background-color: #FFF277;          \/* jaune pastel *\/\n    color: #2d4e5e;                     \/* texte fonc\u00e9 pour contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                 \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #d1c84f;          \/* ombre jaune dor\u00e9 pour effet 3D *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix3:hover {\n    background-color: #ffee55;          \/* un peu plus vif au survol *\/\n}\n\n.boutonchoix3:active {\n    box-shadow: 0 2px #d1c84f;\n    transform: translateY(2px);\n}\n.boutonchoix4 {\n    background-color: #f7e7d0;          \/* beige doux *\/\n    color: #2d4e5e;                     \/* texte fonc\u00e9 lisible *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                 \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #d6bfa3;          \/* ombre dans les m\u00eames tons *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix4:hover {\n    background-color: #efd3b5;          \/* l\u00e9g\u00e8rement plus soutenu au survol *\/\n}\n\n.boutonchoix4:active {\n    box-shadow: 0 2px #d6bfa3;\n    transform: translateY(2px);\n}\n\n .boutonchoixorig {\nwidth:80%;\nbackground-color:#e8f2d9;\ncolor:#2d4e5e;        \npadding: 10px 20px;\n        margin: 5px;\n        font-size: 1.2em;\n        font-weight:bold;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n    boutonchoixorig:hover {\n        background-color: pink;\n    }    \n.boutonchoix5 {\n    background-color: #f7c6d9;         \/* rose pastel *\/\n    color: #5a2e3d;                    \/* texte bordeaux doux *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #d99aaa;         \/* ombre ros\u00e9e pour effet 3D *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix5:hover {\n    background-color: #fbb5cc;         \/* plus vif au survol *\/\n}\n\n.boutonchoix5:active {\n    box-shadow: 0 2px #d99aaa;\n    transform: translateY(2px);\n}\n\n.boutonchoix6 {\n    background-color: #d8c4f3;         \/* violet pastel *\/\n    color: #3e2a5e;                    \/* texte violet fonc\u00e9 pour bon contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;                \/* bouton rond *\/\n    cursor: pointer;\n    box-shadow: 0 4px #bca0e8;         \/* ombre violette douce *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix6:hover {\n    background-color: #cdb3ef;         \/* un peu plus vif au survol *\/\n}\n\n.boutonchoix6:active {\n    box-shadow: 0 2px #bca0e8;\n    transform: translateY(2px);\n}\n.boutonchoix7 {\n    background: linear-gradient(135deg, #e7c6ff, #f3c6e7);  \/* d\u00e9grad\u00e9 lavande \u2192 rose pastel *\/\n    color: #4a2b5f;                    \/* texte violet fonc\u00e9 lisible *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #caa0db;         \/* ombre lavande *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix7:hover {\n    background: linear-gradient(135deg, #dab6ff, #f6b9e0);  \/* d\u00e9grad\u00e9 plus vif au survol *\/\n}\n\n.boutonchoix7:active {\n    box-shadow: 0 2px #caa0db;\n    transform: translateY(2px);\n}\n.boutonchoix8 {\n    background-color: #ffd8b2;         \/* orange pastel doux *\/\n    color: #5a2e00;                    \/* texte brun fonc\u00e9 pour contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #e6b07a;         \/* ombre orang\u00e9e plus fonc\u00e9e *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix8:hover {\n    background-color: #ffc999;         \/* plus vif au survol *\/\n}\n\n.boutonchoix8:active {\n    box-shadow: 0 2px #e6b07a;\n    transform: translateY(2px);\n}\n.boutonchoix9 {\n    background-color: #b2f0e8;         \/* turquoise pastel *\/\n    color: #1e4e4a;                    \/* texte vert-bleu fonc\u00e9 pour bon contraste *\/\n    padding: 10px 20px;\n    margin: 5px;\n    font-size: 1.9em;\n    font-weight: bold;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px #88d8ce;         \/* ombre turquoise plus fonc\u00e9e *\/\n    transition: all 0.2s ease-in-out;\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.boutonchoix9:hover {\n    background-color: #a3e7dd;         \/* turquoise plus vif au survol *\/\n}\n\n.boutonchoix9:active {\n    box-shadow: 0 2px #88d8ce;\n    transform: translateY(2px);\n}\n\n\n.imgfleche {\n    width: 100px;\n    height: auto;\n}\n.custom-button-pink {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #e6a4b4, #ff758c); \/* D\u00e9grad\u00e9 doux *\/\n    color: white;\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombre et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), \n                -4px -4px 10px rgba(255, 255, 255, 0.6), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.5), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.custom-button-pink img {\n    width:130px;\n    height: auto;\n}\n\n.custom-button-pink:hover {\n    background: linear-gradient(145deg, #ff5e99, #ff3b6f);\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.7);\n}\n\n.custom-button-pink:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.5);\n}\n.custom-button-vert {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #dbe7c5, #e8f2d9); \/* D\u00e9grad\u00e9 subtil *\/\n    color: #4a5a30; \/* Texte plus fonc\u00e9 pour le contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), \n                -4px -4px 10px rgba(255, 255, 255, 0.6), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.5), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.custom-button-vert img {\n    width: 130px;\n    height: auto;\n}\n\n.custom-button-vert:hover {\n    background: linear-gradient(145deg, #cddbb2, #e8f2d9);\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.7);\n}\n\n.custom-button-vert:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.5);\n}\n\n.custom-button-bleu {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #3b6275, #4a7389); \/* D\u00e9grad\u00e9 subtil *\/\n    color: #e0eaf0; \/* Texte plus clair pour le contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), \n                -4px -4px 10px rgba(255, 255, 255, 0.6), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.5), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.custom-button-bleu img {\n    width: 124px;\n    height: auto;\n}\n\n.custom-button-bleu:hover {\n    background: linear-gradient(145deg, #4a7389, #5a8499);\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.7);\n}\n\n.custom-button-bleu:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.5);\n}\n\n.custom-button-2d4e5e {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #264554, #2d4e5e); \/* D\u00e9grad\u00e9 subtil *\/\n    color: #ffffff; \/* Texte blanc pour contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.2), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.1), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.custom-button-2d4e5e img {\n    width: 24px;\n    height: 24px;\n}\n\n.custom-button-2d4e5e:hover {\n    background: linear-gradient(145deg, #203b47, #2d4e5e);\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4), \n                -4px -4px 10px rgba(255, 255, 255, 0.2);\n}\n\n.custom-button-2d4e5e:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.1);\n}\n.custom-button-degrade {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #4a7082, #2d4e5e); \/* Bleu plus clair sur le dessus *\/\n    color: #ffffff; \/* Texte blanc pour contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.2), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.1), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.custom-button-degrade img {\n    width: 154px;\n    height: auto;\n}\n\n.custom-button-degrade:hover {\n    background: linear-gradient(145deg, #5c8297, #3a6272); \/* Encore plus clair au hover *\/\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4), \n                -4px -4px 10px rgba(255, 255, 255, 0.2);\n}\n\n.custom-button-degrade:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.1);\n}\n\n.custom-button-bleu-pale {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #b8d8e8, #d1eeff); \/* D\u00e9grad\u00e9 doux *\/\n    color: #2a4d5f; \/* Texte bleu fonc\u00e9 pour contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15), \n                -4px -4px 10px rgba(255, 255, 255, 0.7), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.5), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.custom-button-bleu-pale img {\n    width: 130px;\n    height: auto;\n}\n\n.custom-button-bleu-pale:hover {\n    background: linear-gradient(145deg, #a3cbe0, #c3e4f5); \/* L\u00e9g\u00e8rement plus fonc\u00e9 au hover *\/\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.2), \n                -4px -4px 10px rgba(255, 255, 255, 0.8);\n}\n\n.custom-button-custom-bleu-pale:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.5);\n}\n.custom-button {\n    width: 200px;\n    height: 100px;\n    border: none;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #2d4e5e, #2980b9);\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\nmargin-left: auto;\n  margin-right: auto;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.custom-button img {\n    width: 90px;\n    height: 90px;\n    filter: brightness(1.2);\n}\n\n.custom-button:hover {\n    transform: scale(1.1);\n    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);\n}\n\n\n img {\n        max-width: 100%;\n        height: auto;\n        margin: 10px auto;\n        display: block;\n    }\n.centrertout {\nmargin: auto;\n  width: 90%;\n  border: 3px solid #2d4e5e;\n  padding: 10px;\n}\n#imagequestion {\nmax-width: 10%; \nheight: auto\n}\n#imagenext {\nmax-width: 60%;\nwidth: 60px;  \nheight: auto;\n}\n\n#imageresult {\nwidth: 100px; \nheight: auto;\n}\n\n\/* Conteneur des boutons des lettres *\/\n.letter-buttons {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 10px;\n}\n#boutonB {\ncolor: #d3d879;\n}\n\n.boutoncapsule {\nbackground-color: #e8f2d9;\n    color: #2d4e5e;\n    width: auto;\n    height:auto;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n  margin-left: auto;\n  margin-right: auto;\n   \n}\n\n.boutoncapsule:hover {\n    background-color: #2d4e5e;\n    color: #d3d879;\n}\n.boutoncapsule:active {\n    background-color: #96453e;\n    color: #d3d879;\n}\n.boutoncapsule2 {\n    background-color: #d1eeff;\n    color: #2d4e5e;\n    width: 40%;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n  margin-left: auto;\n  margin-right: auto;\n   \n}\n.boutoncapsule2:hover {\n    background-color: #e5f9a7;\n}\n.boutoncapsule2:active {\n    background-color: #d3d879;\n    color: #d3d879;\n}\n\n.boutoncapsule3 {\n    background-color: #e8f2d9;\n    color: #2d4e5e;\n    width: 40%;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n  margin-left: auto;\n  margin-right: auto;\n   \n}\n.boutoncapsule3:hover {\n    background-color: #f7e7d0;\n}\n.boutoncapsule3:active {\n    background-color: #f7e7d0;\n    color: #d3d879;\n}\n\n\n.boutonquestion {\n    background-color: #f8f9eb;\n    color: #2d4e5e;\n    width: fit-content; \/* Permet d\u2019adapter la taille au contenu (comme l\u2019image) *\/\n    padding: 3px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n\n    display: flex; \/* Flexbox pour centrer *\/\n    align-items: center; \/* Centre verticalement *\/\n    justify-content: center; \/* Centre horizontalement *\/\n    margin: 0 auto; \/* Centre le bouton lui-m\u00eame dans le parent *\/\ntransition: border 0.2s ease;\n}\n\n\n.boutonquestion:hover {\n    background-color: #f8f9eb;\n}\n.boutonquestion:active {\n    background-color: #f8f9eb;\n    color: #d3d879;\n border: 3px solid #2d4e5e;\n}\n.boutonquestion.selectionnee {\n  border: 3px solid #2d4e5e;\n  box-shadow: 0 0 0 3px rgba(45, 78, 94, 0.3);\n}   \n\n#megaphone {\n    max-width: 40px;\n    height:auto;\n}\n.target {\n      margin-top: 100px;\n      padding: 10px;\n      \n    }\n    audioquestions {\n        width: 20%;\n        margin:10px 0;\n    }\naudioinstructions {\n        width: 20%;\n        margin:10px 0;\n    }\naudiomessages {\n        width: 20%;\n        margin:10px 0;\n    }\n    #timer {\n        font-size: 1.3em;\n        color:#2d4e5e;\n background-color:#c0f8e2;\n    }\n    #ecoute{\n        font-size: 1.3em;\n        color:#96453e;\nfont-weight:bold;\n        background-color:#d1eeff;\n        text-align: center;\n    }\n    #instructions{\n        font-size: 18px;\nfont-weight:bold;\nbackground-color:#2d4e5e;\n        color:#fbd4e1;\ntext-align:center;\n padding: 20px;\n       }\n    #quoifaire{\n        font-size: 1.5em;\n        text-align:center;\n        color:#980785;\n        font-weight:bold;\n        background-color:#d1eeff;\n    }\n    #autremessage{\n        font-size: 1.8em;\ntext-align: center;\n        color:#e8f2d9;\n        background-color:#980785;\n    }\n    #nophrase{\n        font-size: 1.3em;\n        color:#d1eeff;\n        background-color:#2d4e5e;\n        text-align: center;\n    }\n    #feedback {\n        font-size: 1.6em;\ntext-align: center;\n        margin: 10px;\n        font-weight:bold;\n    }\n  #bonhomme {\n   width: 220px;\n    height:auto;\npadding: 10px;\n}\n    \n   \n    #resultsButton {\n        display: none;\n        background-color : #c2a3f9;\n        color:#e8f2d9;\n        font-weight:bold;\n        width: 20%;\n        padding: 10px;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n        box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n        font-size: 1em;\n        text-align: center;\n    }\n #resultsButton:hover {\n     background-color : #f9aca3;\n     color:#e8f2d9;\n    }\n\n    #nextButton {\n     background-color : #f9a3ca;\n     color:#e8f2d9;\n    }\n\n    #nextButton:hover {\n       background-color : #a3f9d7;\n       color:#e8f2d9;\n    }\n\n.boutonrespvoice{\n    background-color: #f9a3ca;\n    color: #2d4e5e;\n    width: 30%;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n  margin-left: auto;\n  margin-right: auto;\n   \n}\n\n#boutonrespvoice {\n background-color : #f9a3ca;\n     color:#e8f2d9;\n    }\n\n#boutonrespvoice:hover {\n       background-color : #a3f9d7;\n       color:#e8f2d9;\n    }\n.letter-buttons {\n    display: flex;\n    justify-content: center;\n    gap: 10px; \/* Espace entre les boutons *\/\n    margin-top: 10px;\n}\n    \n\/********************************************* Responsive styles *\/\n   \n@media (max-width: 768px) {\n\nbutton {\n        flex: 1; \/* Permet aux boutons de s\u2019adapter \u00e0 l\u2019espace disponible *\/\n        max-width: 200px; \/* Emp\u00eache les boutons de devenir trop larges *\/\n        padding: 2px 2px;\n    }\n\n #resultsButton {\n        width: 90%;\n        min-width: 100px; \/* Force une taille minimale *\/\n        font-size: 1.4em;\n        padding: 15px;\n        text-align: center;\n    }\n\n#nextButton {\n        width: 80%;\n        min-width: 100px; \/* Force une taille minimale *\/\n        font-size: 1.4em;\n        padding: 15px;\n        text-align: center;\n    }\n\n#boutonrespvoice {\n        width: 80%;\n        min-width: 100px; \/* Force une taille minimale *\/\n        font-size: 1.4em;\n        \/*padding: 10px;*\/\n        text-align: center;\ndisplay: flex;\n  justify-content: center;\n  align-items: center;\n    }\n\n \n\n#imagenext {\nmax-width: 100%; \nwidth:50%;\nheight: auto\n}\n\n#imageresult {\nmax-width: 100%; \nwidth:80%;\nheight: auto;\n}\n\n\n\n.letter-buttons {\n        flex-wrap: wrap; \/* Permet le retour \u00e0 la ligne si n\u00e9cessaire *\/\n    }\n    \n   \n    \n    .boutoncapsule {\n        width: 90%;\n        min-width: 150px; \/* Force une taille minimale *\/\n        font-size: 1.4em;\n        padding: 15px;\n        text-align: center;\n    }\n.boutoncapsule2 {\n    background-color: #d1eeff;\n    color: #2d4e5e;\n    width: 70%;\n    padding: 3px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block; \/* Assure une bonne prise d'espace *\/\n    align-items: center; \/* Centre horizontalement *\/\n    justify-content: center; \/* Centre verticalement *\/\n }\n.boutoncapsule2:hover {\n    background-color: #e5f9a7;\n}\n.boutonquestion {\n    background-color: #f8f9eb;\n    color: #2d4e5e;\n    width: 70%;\n    padding: 3px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block; \/* Assure une bonne prise d'espace *\/\n    align-items: center; \/* Centre horizontalement *\/\n    justify-content: center; \/* Centre verticalement *\/\n }\n\n\n#bonhomme {\n    max-width: 200px;\n    height:auto;\npadding: 15px;\n}\n   .target {\n      margin-top: 100px;\n      padding: 10px;\n      \n    }\n    audioquestions {\n        width: 20%;\n        margin:10px 0;\n    }\naudioinstructions {\n        width: 20%;\n        margin:10px 0;\n    }\naudiomessages {\n        width: 20%;\n        margin:10px 0;\n    }\n    #timer {\n        font-size: .9em;\n        color:#2d4e5e;\n        font-weight:bold;\n    }\n    #ecoute{\n        font-size: .9em;\n        color:#2d4e5e;\n        background-color:#d1eeff;\n        text-align: center;\n        font-weight:bold;\n    }\n    #instructions{\n        font-size: 14px;\nfont-weight:bold;\nbackground-color:#2d4e5e;\n        color:#fbd4e1;\ntext-align:center;\n padding: 20px;\n    }\n    #quoifaire{\n        font-size: 1em;\n        text-align:center;\n        color:#96453e;\n        font-weight:bold;\n        background-color:#d1eeff;\n    }\n    #autremessage{\n        font-size: 1.2em;\ntext-align: center;\n        color:#e8f2d9;\n        background-color:#980785;\n    }\n    #nophrase {\n        font-size: 1em;\n        color:#d1eeff;\n        background-color:#2d4e5e;\n        text-align: center;\n    }\n    #feedback {\n        font-size: 1.1em;\ntext-align: center;\n        margin: 10px;\n        font-weight:bold;\n    }\n}\n <\/style>\n\n\n\n<script>\nif (!window.responsiveVoice) {\n    var script = document.createElement(\"script\");\n    script.src = \"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=sN9vfOzO\";\n    document.head.appendChild(script);\n}\n<\/script>\n\n\n\n\n\n<p style=\"font-size: 1.275em; font-weight:bold;color:#96453e;\">Bienvenue Invit\u00e9(e) ! <br>\n\n\n\n\n\n\n\n\n\n<div style=\"\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\nbackground-color:#f5e1ad;\n  background-image: url('https:\/\/www.atelierpm.ca\/sansfautes\/wp-content\/uploads\/2025\/08\/etudiants-table-030825.jpg');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center center;\n  opacity: 0.45; \n  z-index: -1;\n  pointer-events: none;\n\">\n<\/div>\n\n\n\n<!--Responsive Voice avec boutons arret et pause-->\n<center>\n<div id=\"alire\"> \n<p>Jeux et exercices pour apprendre la grammaire fran\u00e7aise.<\/p>\n<p> (Site en construction, alors l&rsquo;indulgence est de mise !)<\/p>\n<\/div><br>\n<div><p>\n  <button class=\"boutoncapsuleresp\" onclick=\"gorespvoice()\">\n    <img decoding=\"async\" id=\"bonhomme\" src=\"https:\/\/www.atelierpm.ca\/sansfautes\/wp-content\/uploads\/2025\/03\/haut-parleur-sens-inverse-bleu-moyen.png\" alt=\"Cliquez pour \u00e9couter\">\n  <\/button><br>\n<button class=\"boutoncapsuleresp\" onclick=\"responsiveVoice.cancel();\">Arr\u00eat<\/button><br>\n<button class=\"boutoncapsuleresp\" id=\"respvoicepause\" style=\"display: none\" onclick=\"pauserespvoice();\">Pause<\/button><br>\n<button class=\"boutoncapsuleresp\" id=\"respvoicereprendr\" style=\"display: none\" onclick=\"recommrespvoice();\">Reprendre<\/button> <br>\n<\/p><\/div>\n<\/center>\n\n\n\n\n<script>\nfunction lettrerespvoice() {\n    responsiveVoice.speak(document.getElementById('lirelalettre').innerHTML, 'French Canadian Female', {rate: 1.0, volume: 1});\n}\nfunction gorespvoice() {\n    responsiveVoice.speak(document.getElementById('alire').innerHTML, 'French Canadian Female', {rate: 1.0, volume: 1});\ndocument.getElementById('respvoicepause').style.display = 'block'; \ndocument.getElementById('respvoicereprendr').style.display = 'block';\n}\nfunction pauserespvoice() {\n    if (responsiveVoice.isPlaying())\n    {\n        responsiveVoice.pause();\n    }\n}\nfunction recommrespvoice() {\n    \n        responsiveVoice.resume();\n    \n}\n\n<\/script>\n<style>\n\n#alire \n{\ncolor:#2d4e5e;\nfont-size:1.4em;\n\/*background-color:#96453e;*\/\nbackground-color:#D1EEFF8C;\n\/*background-color:#d1eeff;*\/\n\n\/*background-color:#f7e7d0;*\/\npadding: 40px;\n}\n\n.boutoncapsuleresp \n{\n    background-color: #e8f2d9;\n    color: #2d4e5e;\n    width: auto;\n    height:auto;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.boutoncapsuleresp:hover \n{\n    background-color: #2d4e5e;\n    color: #d3d879;\n}\n\n.boutoncapsuleresp:active \n{\n    background-color: #96453e;\n    color: #d3d879;\n}\n.boutoncapsuleconsign \n{\n    background-color: #e8f2d9;\n    color: #2d4e5e;\n    width: 180px;\n    height:auto;\n    padding: 10px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    box-shadow: 0 8px 16px 0 rgba(45, 78, 94, 0.4), 0 6px 20px 0 rgba(45, 78, 94, 0.3);\n    font-size: 1em;\n    text-align: center;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.boutoncapsuleconsign:hover \n{\n    background-color: #d1eeff;\n    color: #d3d879;\n}\n\n.boutoncapsuleconsign:active \n{\n    background-color: #96453e;\n    color: #d3d879;\n}\n\n#bonhomme \n{\n    max-width: 90px;\n    height:auto;\n}\n<\/style>\n\n\n\n<p class=\"has-text-align-center has-text-color has-background has-medium-font-size\" id=\"semaine17fevrier2025\" style=\"color:#96453e;background-color:#96503e30\"><strong>Semaine du 15 septembre 2025<\/strong><\/p>\n\n\n\n<p class=\"has-text-color has-background has-medium-font-size\" style=\"color:#96453e;background-color:#cff4fca3\">Il est pr\u00e9f\u00e9rable de <strong>s&rsquo;<a href=\"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/inscription\/\">inscrire<\/a><\/strong> et\/ou de <strong>se<\/strong> <strong><a href=\"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/connexion\/\">connecter<\/a><\/strong> pour profiter pleinement des <strong>activit\u00e9s offertes<\/strong> sur le site. Cela permet <strong>un suivi des progr\u00e8s<\/strong> parce que le <strong>r\u00e9sultat de chaque exercice\/jeu est enregistr\u00e9<\/strong> et est disponible dans <strong>l&rsquo;Espace Utilisateur<\/strong> <strong>personnel<\/strong>.  De plus, en guise de rappel, l&rsquo;exercice du jour peut \u00eatre envoy\u00e9 par courriel<strong> si d\u00e9sir\u00e9<\/strong> ; des <strong>quiz, dict\u00e9e, lecture, jeu ou autres activit\u00e9s<\/strong> favorisant <strong>la r\u00e9p\u00e9tition et la pratique quotidiennes<\/strong> <strong>essentielles <\/strong>\u00e0 l&rsquo;<strong>apprentissage <\/strong>(compr\u00e9hension et m\u00e9morisation)<strong> de la grammaire fran\u00e7aise<\/strong>. Finalement, l&rsquo;adh\u00e9sion <strong>\u00e0 un syst\u00e8me de points<\/strong> est sugg\u00e9r\u00e9, <strong>motiv\u00e9 <\/strong>par l&rsquo;objectif de dresser un <strong>tableau d&rsquo;honneur<\/strong>, juste pour le plaisir de la chose. <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#024b61\" class=\"has-inline-color\">D\u00e9tente et grammaire<\/mark><\/strong> ne sont pas incompatibles ! \u00c0 raison d&rsquo;une <strong>quinzaine de minutes<\/strong> par jour, il est possible d&rsquo;<strong>atteindre son but<\/strong>, qu&rsquo;il soit de <strong>ma\u00eetriser les r\u00e8gles<\/strong> de cette belle langue ou simplement d&rsquo;<strong>\u00eatre avis\u00e9<\/strong> de ses <strong>nombreux pi\u00e8ges<\/strong> et ainsi <strong>\u00e9viter d&rsquo;y tomber<\/strong>. Car ce qu&rsquo;il est <strong>i<mark style=\"background-color:rgba(0, 0, 0, 0);color:#014d65\" class=\"has-inline-color\">mportant de retenir, c&rsquo;est qu&rsquo;il n&rsquo;est pas n\u00e9cessaire de tout retenir<\/mark><\/strong> ; le web est truff\u00e9 de <strong>ressources grammaticales<\/strong>. Ce qu&rsquo;il faut <mark style=\"background-color:rgba(0, 0, 0, 0);color:#015270\" class=\"has-inline-color\"><strong>retenir<\/strong><\/mark>, ce sont les <em><strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#01596c\" class=\"has-inline-color\">situations qui sonnent l&rsquo;alarme<\/mark><\/strong><\/em>, qui <strong>agitent le drapeau et signalent<\/strong> : <mark style=\"background-color:rgba(0, 0, 0, 0);color:#015862\" class=\"has-inline-color\"><strong>Danger, v\u00e9rification requise !<\/strong><\/mark> Il faut <strong>soup\u00e7onner<\/strong>, savoir <strong>identifier <\/strong>les <strong>potentielles sources de probl\u00e8mes<\/strong>. Et <mark style=\"background-color:rgba(0, 0, 0, 0);color:#024767\" class=\"has-inline-color\"><strong><em>les retenir est bien suffisant<\/em><\/strong><\/mark>. Parce que<mark style=\"background-color:rgba(0, 0, 0, 0);color:#035d7c\" class=\"has-inline-color\"> <strong>l&rsquo;action d&rsquo;aller chercher une aide grammaticale<\/strong><\/mark> n&rsquo;est d\u00e9clench\u00e9e que par le <strong>doute<\/strong>, et le<strong> doute n&rsquo;est soulev\u00e9<\/strong> que par l&rsquo;<strong>identification<\/strong> de, par exemple, un <strong>accord que l&rsquo;on sait fourmillant d&rsquo;exceptions<\/strong>. <mark style=\"background-color:rgba(0, 0, 0, 0);color:#02618e\" class=\"has-inline-color\"><strong>Nul besoin de conna\u00eetre par coeur  ces exceptions !<\/strong> <\/mark>Juste savoir qu&rsquo;<mark style=\"background-color:rgba(0, 0, 0, 0);color:#045f75\" class=\"has-inline-color\"><strong>elles existent<\/strong><\/mark> incite \u00e0 <strong>r\u00e9viser <\/strong>pour \u00e9ventuellement <strong>corriger <\/strong>et \u00e9crire Sans Fautes. <strong>Bienvenue <\/strong>!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"background-color:#96453e;color:#96453e\"\/>\n\n\n\n<br><br>\n<style>\n.no0\n{\nbackground-color:#D1EEFF8C;\n}\n.no1\n{\nfont-size:1.5em; \ncolor:#2d4e5e;\n\n}\n.no2\n{\n color:#96453e;\n font-size:1.2em; \n \n}\n<\/style>\n\n\n<center>\n<div class=\"no0\">        \n<span class=\"no1\"><\/span>\n\t<span class=\"no2\" id=\"day\"><\/span>\n\t<span class=\"no2\" id=\"date\"><\/span>\n\t<span class=\"no1\" id=\"time\"><\/span>\n<\/div><\/center>\n<script>\n\/\/ R\u00e9cup\u00e9rer l'\u00e9l\u00e9ment HTML o\u00f9 afficher le jour\nvar dayElement = document.getElementById(\"day\");\n\n\/\/ R\u00e9cup\u00e9rer l'\u00e9l\u00e9ment HTML o\u00f9 afficher la date locale\nvar dateElement = document.getElementById(\"date\");\n\n\/\/ R\u00e9cup\u00e9rer l'\u00e9l\u00e9ment HTML o\u00f9 afficher l'heure\nvar timeElement = document.getElementById(\"time\");\n\n\/\/ Fonction pour mettre \u00e0 jour l'affichage du jour, de la date et de l'heure\nfunction updateTime() {\n  \/\/ Obtenir la date actuelle\n  var currentDate = new Date();\n  var jourenchiffre=currentDate.getDate();\n  var annee=currentDate.getFullYear();\n  \/\/ Obtenir le jour de la semaine sous forme de texte\n  \/\/var daysOfWeek = [\"dimanche le \", \"lundi le \", \"mardi le \", \"mercredi le \", \"jeudi le \", \"vendredi le \", \"samedi\"];\nvar daysOfWeek = [\"Aujourd'hui dimanche \", \"Aujourd'hui lundi \", \"Aujourd'hui mardi \", \"Aujourd'hui mercredi \", \"Aujourd'hui jeudi \", \"Aujourd'hui vendredi \", \"Aujourd'hui samedi\"];\n  var currentDay = daysOfWeek[currentDate.getDay()];\n\nvar mois=new Array(13);\nmois[1]=\" janvier \";\nmois[2]=\" f\u00e9vrier \";\nmois[3]=\" mars \";\nmois[4]=\" avril \";\nmois[5]=\" mai \";\nmois[6]=\" juin \";\nmois[7]=\" juillet \";\nmois[8]=\" ao\u00fbt \";\nmois[9]=\" septembre \";\nmois[10]=\" octobre \";\nmois[11]=\" novembre \";\nmois[12]=\" d\u00e9cembre \";\n var currentMonth = mois[currentDate.getMonth()+1];\n\n  \/\/ Obtenir la date locale sous forme de texte\n  var currentDateString = currentDate.toLocaleDateString(\"fr\");\n  if (jourenchiffre==1)\n  {\n     jourenchiffre=\"premier\";\n  }\n  var ladate=jourenchiffre+currentMonth+annee+\", il est \";\n  \/\/ Obtenir l'heure actuelle sous forme de texte\n  var currentHour = currentDate.getHours();\nif (currentHour<10)\n{\n    currentHour=\"0\"+currentHour;\n}\n  var currentMinute = currentDate.getMinutes(); \nif (currentMinute<10)\n{\n    currentMinute=\"0\"+currentMinute;\n}\n  var currentSecond = currentDate.getSeconds();\nif (currentSecond<10)\n{\n    currentSecond=\"0\"+currentSecond;\n}\n  var currentTimeString = currentHour + \":\" + currentMinute + \":\" + currentSecond;\n\n  \/\/ Mettre \u00e0 jour le contenu des \u00e9l\u00e9ments HTML\n  dayElement.textContent = currentDay;\n  \/\/dateElement.textContent = currentDateString;\ndateElement.textContent = ladate;\n  timeElement.textContent = currentTimeString;\n}\n\n\/\/ Appeler la fonction updateTime une fois pour l'affichage initial\nupdateTime();\n\n\/\/ Mettre \u00e0 jour l'affichage toutes les secondes\nsetInterval(updateTime, 1000);\n<\/script>\n<br><br>\n\n\n\n<!--bouton chat cliquable sur lien de page-->\n<center>\n<button id=\"go-message\" class=\"bouton-carre-vert-pale\" style=\"position: relative; display: inline-block; border: none; padding: 0; cursor: pointer;\">\n    <span style=\"position: absolute; top: 10px; left: 50%; transform: translateX(-50%); \n                 rgba(245, 225, 173, 0.8); \/* couleur f5e1ad en transparence *\/ padding: 5px 10px; border-radius: 6px; \n                 font-weight: bold; color: #2d4e5e;white-space: nowrap;\">\n      Entrer\n    <\/span>\n    <img decoding=\"async\" src=\"https:\/\/www.atelierpm.ca\/sansfautes\/wp-content\/uploads\/2025\/08\/etudiants-table-030825.jpg\" alt=\"Aller au message\">\n  <\/button>\n<\/center>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const pagecourante = window.location.pathname;\n  const pagecourante2 = pagecourante.endsWith(\"\/\") \n    ? pagecourante.slice(0, -1) \n    : pagecourante;\n\n  \/\/const addmess = \"https:\/\/www.atelierpm.ca\" + pagecourante2 + \"-message\/\";\nconst addmess = \"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/en-matiere-de-grammaire\/\";\n  document.getElementById(\"go-message\").addEventListener(\"click\", function(e) {\n    e.preventDefault();\n    window.location.href = addmess;\n  });\n});\n<\/script>\n<style>\n\n.bouton-carre-vert-pale {\n    display: flex;\n    align-items: center;\n    gap: 8px; \/* Espacement entre l'image et le texte *\/\n    padding: 12px 25px;\n    border: none;\n    border-radius: 12px;\n    background: linear-gradient(145deg, #dbe7c5, #e8f2d9); \/* D\u00e9grad\u00e9 subtil *\/\n    color: #4a5a30; \/* Texte plus fonc\u00e9 pour le contraste *\/\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    \n    \/* Effet 3D : ombres et relief *\/\n    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), \n                -4px -4px 10px rgba(255, 255, 255, 0.6), \n                inset 2px 2px 5px rgba(255, 255, 255, 0.5), \n                inset -2px -2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.bouton-carre-vert-pale img {\n    width: 200px;\n    height: auto;\npadding:10px;\n}\n\n.bouton-carre-vert-pale:hover {\n    background: linear-gradient(145deg, #cddbb2, #e8f2d9);\n    transform: translateY(-3px); \/* Effet de sur\u00e9l\u00e9vation *\/\n    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3), \n                -4px -4px 10px rgba(255, 255, 255, 0.7);\n}\n\n.bouton-carre-vert-pale:active {\n    transform: translateY(2px); \/* Effet d'enfoncement *\/\n    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), \n                inset -2px -2px 6px rgba(255, 255, 255, 0.5);\n}\n\n\n.custom-buttonchat {\n    width: 220px;\n    height: auto;\n    border: none;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #d3d879, #f5e1ad);\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.custom-buttonchat img {\n    width: 220px;\n    height: auto;\n    \/*filter: brightness(1.2);*\/\n}\n\n.custom-buttonchat:hover {\n    transform: scale(1.1);\n    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);\n}\n<\/style>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"background-color:#96453e;color:#96453e\"\/>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"background-color:#96453e;color:#96453e\"\/>\n\n\n\n<div style=\"height:394px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jeux et exercices pour apprendre la grammaire fran\u00e7aise. (Site en construction, alors l&rsquo;indulgence est de mise !) Arr\u00eat Pause Reprendre Semaine du 15 septembre 2025 Il est pr\u00e9f\u00e9rable de s&rsquo;inscrire et\/ou de se connecter pour profiter pleinement des activit\u00e9s offertes sur le site. Cela permet un suivi des progr\u00e8s parce que le r\u00e9sultat de chaque [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/pages\/11631"}],"collection":[{"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/comments?post=11631"}],"version-history":[{"count":9,"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/pages\/11631\/revisions"}],"predecessor-version":[{"id":11662,"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/pages\/11631\/revisions\/11662"}],"wp:attachment":[{"href":"https:\/\/www.atelierpm.ca\/sansfautes\/index.php\/wp-json\/wp\/v2\/media?parent=11631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}