/* ============================================================================ 05-excel-exercice.css PAGE RÉSULTAT — EXERCICES SheetSkills UNIQUEMENT (catégorie WP "exercice"). À placer dans : /wp-content/themes/infinite-child/css/quiz_ai/05-excel-exercice.css ⚠️ SÉPARATION STRICTE (règle CLAUDE.md) : ce CSS ne stylise QUE les exercices. Le style des quiz vit dans 03-excel-ai-analysis.css. On ne mélange jamais. Activé par 05-excel-exercice.js : le reçoit la classe .qai-ex-mode. Modèle (repris du premium) : un wrapper #excel-ai-exercice inséré en tête de .ays_quiz_results_page ; accordéon à corps dédié .qai-acc-body, replié par défaut. Le bloc natif de relecture (énoncé + grille SheetSkills + réponse attendue) est DÉPLACÉ par le JS dans le corps de l'accordéon. ============================================================================ */ /* Masquer le bazar natif d'AYS : message de score, score moyen, partages, barre de progression et bouton "Redémarrer" natif (on en remet un plus joli). */ .qai-ex-mode .ays_score_message, .qai-ex-mode .ays_message, .qai-ex-mode .ays_average, .qai-ex-mode .ays-quiz-social-shares, .qai-ex-mode .ays-progress, .qai-ex-mode .ays_restart_button_p{ display:none !important; } /* Étapes du FORMULAIRE de quiz qu'AYS laisse affichées en mode résultats (~5700px de vide au-dessus de notre récap) + relecture native désormais vidée de ses blocs → on masque les deux. Tout notre contenu vit dans #excel-ai-exercice, inséré en tête de .ays_quiz_results_page. ⚠️ Exclure .ays_thank_you_fs : c'est aussi un .step mais il CONTIENT la page résultats — le cacher rendrait tout invisible. */ .qai-ex-mode .ays-quiz-form > .step:not(.ays_thank_you_fs), .qai-ex-mode .ays_quiz_results{ display:none !important; } /* Largeur de lecture homogène */ #excel-ai-exercice, .qai-ex-mode .qai-ex-secthead, .qai-ex-mode .qai-ex-after{ max-width:760px; margin-left:auto; margin-right:auto; font-family:'Inter',sans-serif; color:#36443e; } /* ---- Hero "Exercice terminé" ---- */ #excel-ai-exercice .qai-ex-hero{ text-align:center; background:#fff; border:1px solid #d4dcd7; border-radius:16px; padding:28px 24px; margin:0 0 18px; } #excel-ai-exercice .qai-ex-badge{ display:inline-block; font-size:13px;font-weight:600;letter-spacing:.02em; color:#107C41;background:#eaf4ee; border-radius:999px;padding:6px 14px;margin-bottom:14px; } #excel-ai-exercice .qai-ex-score{ font-size:18px;color:#36443e; } #excel-ai-exercice .qai-ex-num{ font-size:40px;font-weight:800;color:#0e1814;line-height:1; } #excel-ai-exercice .qai-ex-den{ font-size:24px;font-weight:700;color:#677571; } #excel-ai-exercice .qai-ex-bar{ height:12px;border-radius:999px;background:#eef1f0;overflow:hidden; margin:16px auto 14px;max-width:420px; } #excel-ai-exercice .qai-ex-bar > span{ display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,#ef4444 0%,#f59e0b 50%,#22c55e 100%); transition:width .9s cubic-bezier(.22,1,.36,1); } #excel-ai-exercice .qai-ex-msg{ font-size:15px;line-height:1.5;color:#36443e;margin:0; } /* ---- Titre de la section détail ---- */ .qai-ex-mode .qai-ex-secthead{ font-size:17px;font-weight:700;color:#0e1814;margin:4px 0 10px; } /* ---- Accordéon : élément, en-tête, corps replié (modèle premium) ---- */ .qai-ex-mode .qai-acc-item{ border:1px solid #e3e8e6; border-left:4px solid #c9d2ce; border-radius:10px; margin:10px 0; overflow:hidden; background:#fff; } .qai-ex-mode .qai-acc-item.qai-correct{ border-left-color:#22c55e; } .qai-ex-mode .qai-acc-item.qai-wrong{ border-left-color:#ef4444; } /* Plié par défaut : seul l'en-tête est visible ; le corps .qai-acc-body s'ouvre au clic via la classe .qai-open. */ .qai-ex-mode .qai-acc-head{ display:flex !important; } .qai-ex-mode .qai-acc-body{ display:none; } .qai-ex-mode .qai-acc-item.qai-open .qai-acc-body{ display:block; } /* Éléments natifs du bloc déplacé toujours masqués (redondants ou bruts). */ .qai-ex-mode .qai-acc-item .ays-question-counter, .qai-ex-mode .qai-acc-item .ays_user_points_container, .qai-ex-mode .qai-acc-item .ays-quiz-question-validation-error, .qai-ex-mode .qai-acc-item .ays-quiz-additonal-box, .qai-ex-mode .qai-acc-item .ays-text-right-answer, .qai-ex-mode .qai-acc-item .ays-field, .qai-ex-mode .qai-acc-item .ays_check_answer, .qai-ex-mode .qai-acc-item .ays_buttons_div{ display:none !important; } /* En-tête cliquable */ .qai-ex-mode .qai-acc-head{ align-items:center;gap:12px;width:100%; padding:14px 16px;background:#fafbfa;border:0; cursor:pointer;text-align:left;font:inherit;color:#2b3a35; transition:background .15s; } .qai-ex-mode .qai-acc-head:hover{ background:#f1f5f3; } .qai-ex-mode .qai-acc-icon{ flex:0 0 22px;width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;color:#fff;line-height:1; } .qai-ex-mode .qai-correct .qai-acc-icon{ background:#22c55e; } .qai-ex-mode .qai-wrong .qai-acc-icon{ background:#ef4444; } .qai-ex-mode .qai-acc-title{ flex:1 1 auto;font-size:14.5px;font-weight:600;line-height:1.35; } .qai-ex-mode .qai-acc-chevron{ flex:0 0 auto;color:#5b6b64;transition:transform .2s; font-size:22px;line-height:1;width:22px;text-align:center; } .qai-ex-mode .qai-open .qai-acc-chevron{ transform:rotate(180deg); } /* Corps de l'accordéon : grille SheetSkills + détail */ .qai-ex-mode .qai-acc-body{ padding:0; } /* AYS impose une hauteur/min-height aux .step pour le flux quiz — on l'écrase dans l'accordéon pour supprimer la zone blanche au-dessus de la grille. */ .qai-ex-mode .qai-acc-body > .step, .qai-ex-mode .qai-acc-body .ays-abs-fs{ height:auto !important; min-height:0 !important; } .qai-ex-mode .qai-acc-item .ays-abs-fs{ padding:10px 14px 6px !important; } .qai-ex-mode .qai-acc-item .ays_quiz_question{ font-size:14px;color:#36443e; } .qai-ex-mode .qai-acc-item .sheetskills-embed{ margin:8px auto !important; } /* Notre bloc "votre formule" injecté EN TÊTE du corps (au-dessus de la grille) */ .qai-ex-mode .qai-ex-detail{ padding:14px 16px 12px;border-bottom:1px solid #eef1f0;margin-bottom:0; } .qai-ex-mode .qai-ex-userf, .qai-ex-mode .qai-ex-expected{ display:flex;align-items:center;gap:10px; font-size:19px;color:#677571; } .qai-ex-mode .qai-ex-userf code, .qai-ex-mode .qai-ex-expected code{ font-family:'Space Mono','Courier New',monospace;font-size:19px; color:#0e1814;background:#f4f7f5;border:1px solid #e3e8e6;border-radius:6px;padding:3px 8px; } .qai-ex-mode .qai-ex-expected code{ color:#0e6a31;background:#eaf4ee;border-color:#cfe7d8; } .qai-ex-mode .qai-ex-userf.qai-ex-empty{ font-style:italic; } .qai-ex-mode .qai-ex-bodymsg{ margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#36443e; } /* ---- Bloc après le détail : cours dorés + recommencer ---- */ .qai-ex-mode .qai-ex-after{ margin-top:18px; } .qai-ex-mode .ai-section{ background:#fbf7ef;border:1px solid #d4dcd7;border-radius:14px; padding:20px 22px;margin:0 0 18px; } .qai-ex-mode .ai-section-head h3{ font-size:17px;font-weight:700;color:#0e1814;margin:0 0 14px; } .qai-ex-mode .qai-ex-courses{ display:flex;flex-direction:column;gap:12px; } .qai-ex-mode .qai-course{ display:flex;align-items:center;gap:14px;text-decoration:none; background:linear-gradient(135deg,#fff8e7 0%,#fbeec8 100%); border:1px solid #efd58a;border-radius:12px;padding:14px 16px; transition:transform .15s ease, box-shadow .15s ease; } .qai-ex-mode .qai-course:hover{ transform:translateY(-2px);box-shadow:0 6px 18px rgba(94,67,16,.14); } .qai-ex-mode .qai-course-ic{ font-size:24px;flex:0 0 auto; } .qai-ex-mode .qai-course-main{ flex:1 1 auto; } .qai-ex-mode .qai-course-title{ font-size:15px;font-weight:700;color:#5e4310;margin:0 0 2px; } .qai-ex-mode .qai-course-desc{ font-size:13px;line-height:1.45;color:#7a5a1f; } .qai-ex-mode .qai-badge-free{ flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:#0e6a31;background:#e3f3e9;border-radius:999px;padding:5px 10px; } .qai-ex-mode .qai-ex-actions{ text-align:center;margin:6px 0 4px; } .qai-ex-mode .qai-ex-restart{ font:inherit;font-size:15px;font-weight:700;color:#fff;background:#5e4310; border:0;border-radius:10px;padding:13px 26px;cursor:pointer;transition:background .2s ease; } .qai-ex-mode .qai-ex-restart:hover{ background:#7a571a; } @media (max-width:600px){ #excel-ai-exercice .qai-ex-num{ font-size:34px; } .qai-ex-mode .qai-course{ flex-wrap:wrap; } .qai-ex-mode .qai-badge-free{ order:3; } }