/* DysAide — styles propres à l'application (au-dessus de style.css) */ .active-nav { color: var(--primary-text) !important; font-weight: 700; } /* ---- Préférences utilisateur : taille / interligne / espacement ---- --bg, --bg-alt, --text, --card-bg, --border sont déjà utilisées par style.css ; on se contente de les redéfinir sur pour retheme tout le site sans y toucher. font-size/line-height/letter-spacing ne sont pas var-isées dans style.css, donc on les pose ici avec une classe de même spécificité que .font-lexend/.font-systeme, chargée après elles. */ body.dysaide-prefs { font-size: var(--u-font-size, 16px); line-height: var(--u-line-height, 1.9); letter-spacing: var(--u-letter-spacing, 0.02em); } /* ---- AUTH ---- */ /* Piège anti-bot (voir _lib/auth.php::bot_trap_field()) : masqué hors écran plutôt qu'en display:none/visibility:hidden, pour rester rempli par les bots qui filtrent spécifiquement ces deux propriétés avant de remplir un formulaire. Un humain ne le voit ni ne le tabule jamais (tabindex="-1"). */ .bot-trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 20px 60px; } .auth-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; max-width: 420px; width: 100%; box-shadow: var(--shadow); } .auth-card h1 { font-size: 1.6rem; margin-bottom: 8px; } .auth-sub { color: var(--text-light); margin-bottom: 28px; font-size: 0.95rem; } .auth-card--wide { max-width: 560px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } .field { margin-bottom: 20px; } .field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; } .field input[type="email"], .field input[type="password"], .field input[type="text"] { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; background: var(--bg); color: var(--text); } .field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .field-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 6px; } .field-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-light); line-height: 1.5; margin-bottom: 20px; cursor: pointer; } .field-checkbox input[type="checkbox"] { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; } .form-error, .form-success { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.9rem; } .form-error { background: rgba(255,101,132,0.1); border: 1px solid rgba(255,101,132,0.3); color: #C03355; } .form-success { background: rgba(67,198,172,0.1); border: 1px solid rgba(67,198,172,0.3); color: var(--primary-text); } .form-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.88rem; line-height: 1.5; background: rgba(30,75,74,0.08); border: 1px solid rgba(30,75,74,0.2); color: var(--primary-text); } .btn-block { width: 100%; justify-content: center; } .btn-secondary { background: var(--card-bg); color: var(--text); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary-text); } .btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); } .btn-danger { background: var(--card-bg); color: var(--danger); border: 2px solid var(--danger); box-shadow: 0 3px 0 var(--danger); } .btn-danger:hover { background: var(--danger); color: var(--danger-on); } .btn-danger:active { transform: translateY(3px); box-shadow: 0 0 0 var(--danger); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .auth-switch { margin-top: 24px; text-align: center; font-size: 0.9rem; color: var(--text-light); } .auth-switch a { color: var(--primary-text); font-weight: 600; } /* ---- DASHBOARD ---- */ .dashboard-hero { padding: 140px 0 40px; } /* :has() plutôt qu'une classe dédiée : .dashboard-hero est une classe générique réutilisée par d'autres pages (exercice.php...), .dashboard-hero-row n'existe elle que sur le tableau de bord, donc ce sélecteur ne touche que ce premier écran sans devoir toucher style.css (partagé, plus risqué). */ .dashboard-hero:has(.dashboard-hero-row) { background: radial-gradient(circle at 12% 15%, rgba(201,122,61,0.14), transparent 55%), radial-gradient(circle at 88% 5%, rgba(30,75,74,0.12), transparent 50%); } .dashboard-grid .def-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-alt); margin-bottom: 16px; } .dashboard-grid > *:nth-child(1) .def-icon { background: rgba(30,75,74,0.12); } .dashboard-grid > *:nth-child(1) .def-icon-svg { color: var(--feat-teal); } .dashboard-grid > *:nth-child(2) .def-icon { background: rgba(201,122,61,0.14); } .dashboard-grid > *:nth-child(2) .def-icon-svg { color: var(--feat-orange); } .dashboard-grid > *:nth-child(3) .def-icon { background: rgba(37,99,235,0.12); } .dashboard-grid > *:nth-child(3) .def-icon-svg { color: var(--feat-blue); } .dashboard-grid > *:nth-child(4) .def-icon { background: rgba(124,58,237,0.12); } .dashboard-grid > *:nth-child(4) .def-icon-svg { color: var(--feat-violet); } .dashboard-grid > *:nth-child(5) .def-icon { background: rgba(14,148,136,0.12); } .dashboard-grid > *:nth-child(5) .def-icon-svg { color: var(--feat-green); } .dashboard-grid > *:nth-child(6) .def-icon { background: rgba(219,39,119,0.12); } .dashboard-grid > *:nth-child(6) .def-icon-svg { color: var(--feat-pink); } .dashboard-grid > *:nth-child(7) .def-icon { background: rgba(220,38,38,0.12); } .dashboard-grid > *:nth-child(7) .def-icon-svg { color: var(--feat-red); } /* Couleur des cartes de lecons : voir plus bas .lessons-grid--, une teinte fixe par categorie plutot qu'une rotation par position. */ .dashboard-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 40px; } .dashboard-hero-row .section-header { text-align: left; margin-bottom: 0; flex: 1 1 auto; } .dashboard-hero-row .section-intro { margin-left: 0; margin-right: 0; } .dashboard-hero-row .weekly-goal { margin-left: 0; margin-right: 0; } .dashboard-hero-row .mascot-card { flex: 0 0 320px; margin: 0; } @media (max-width: 860px) { .dashboard-hero-row { flex-direction: column; } .dashboard-hero-row .section-header { text-align: center; } .dashboard-hero-row .section-intro { margin-left: auto; margin-right: auto; } .dashboard-hero-row .weekly-goal { margin-left: auto; margin-right: auto; } .dashboard-hero-row .mascot-card { flex-basis: auto; width: 100%; max-width: 480px; } } .dashboard-grid { display: grid; /* Largeur de carte plafonnée (au lieu de 1fr) + justify-content: center : une dernière rangée incomplète (ex. 6 cartes sur des colonnes qui n'en tiennent pas un multiple exact) se retrouve centrée avec un espace équilibré des deux côtés, plutôt qu'un grand vide à droite. */ grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; gap: 24px; margin-top: 8px; } .dashboard-grid .def-card { text-decoration: none; } /* La carte "Exercices" est la boucle centrale du produit : elle mérite un poids visuel différent des 6 autres raccourcis plutôt que d'être une carte identique parmi d'autres (relevé lors de l'audit polish du 2026-07-13). Étend sur 2 colonnes quand la grille le permet, fond teinté, icône plus grande, ligne de contexte dynamique. */ .def-card--featured { grid-column: span 2; background: linear-gradient(135deg, rgba(30,75,74,0.07), rgba(201,122,61,0.05)); border-color: var(--primary); } .def-card--featured .def-icon { width: 68px; height: 68px; } .def-card--featured .def-icon-svg { width: 48px; height: 48px; } .def-card--featured h3 { font-size: 1.15rem; } .def-card-nudge { display: inline-block; margin-top: auto; padding-top: 10px; font-size: 0.85rem; font-weight: 700; color: var(--primary-text); } @media (max-width: 560px) { .def-card--featured { grid-column: span 1; } } /* ---- GRILLE DE THÉMATIQUES ILLUSTRÉES (page /exercices) ---- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 24px 0 40px; } .theme-card { position: relative; display: flex; align-items: flex-end; height: 160px; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); background-size: cover; background-position: center; background-color: var(--bg-alt); overflow: hidden; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .theme-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,42,0) 30%, rgba(13,27,28,0.85) 100%); } .theme-card:hover { border-color: var(--primary); } .theme-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); } .theme-card-title { position: relative; z-index: 1; padding: 16px; color: #FFFFFF; font-weight: 700; font-size: 1.05rem; } /* ---- BANNIÈRE PLEINE LARGEUR (vue filtrée par thématique) ---- */ .theme-banner { position: relative; display: flex; align-items: flex-end; min-height: 240px; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); background-size: cover; background-position: center; background-color: var(--bg-alt); overflow: hidden; margin: 24px 0 32px; } .theme-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,42,0.1) 0%, rgba(13,27,28,0.88) 100%); } .theme-banner-inner { position: relative; z-index: 1; padding: 28px 32px; color: #FFFFFF; } .theme-banner-inner h2 { color: #FFFFFF; margin-bottom: 8px; } .theme-banner-inner p { color: rgba(255,255,255,0.85); margin-bottom: 16px; } .theme-banner-back { display: inline-block; color: #FFFFFF; font-weight: 600; font-size: 0.9rem; text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .theme-card, .def-card { transition: none; } } .mascot-card { display: flex; align-items: flex-start; gap: 16px; max-width: 560px; margin: 28px auto 0; padding: 0; background: transparent; border: none; box-shadow: none; } /* Icône en badge rond, et message en bulle de dialogue avec une pointe vers le badge : la mascotte "parle", plus vivant qu'un simple texte à côté d'un émoji. */ .mascot-icon { flex-shrink: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; background: var(--bg-alt); border: 2px solid var(--border); border-radius: 50%; } .mascot-visual-svg { width: 78%; height: 78%; color: var(--primary-text); } /* Bulle de dialogue générique (queue pointant vers la gauche), partagée par la mascotte et le bilan mensuel raconté plutôt que dupliquée à l'identique aux deux endroits (relevé lors de l'audit polish du 2026-07-13). Un futur composant "quelqu'un/quelque chose qui parle" n'a qu'à ajouter cette classe. */ .speech-bubble { position: relative; background: var(--card-bg); border: 2px solid var(--border); border-radius: 16px; box-shadow: 0 3px 0 var(--border); } .speech-bubble::before { content: ''; position: absolute; left: -9px; top: 18px; width: 15px; height: 15px; background: var(--card-bg); border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: rotate(45deg); } .mascot-body { flex: 1; padding: 14px 18px; } .mascot-title { font-weight: 700; display: block; margin-bottom: 4px; } .mascot-message { color: var(--text-light); font-size: 0.9rem; margin: 0; } /* Bilan mensuel raconté : même esprit "bulle" que la mascotte, pour donner à un texte de synthèse une présence plus chaleureuse qu'un simple bloc de texte. */ .bilan-raconte { display: flex; align-items: flex-start; gap: 16px; max-width: 640px; margin: 28px auto 0; } .bilan-raconte-icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 2px solid var(--border); border-radius: 50%; } .bilan-raconte-icon .def-icon-svg { width: 24px; height: 24px; } .bilan-raconte-body { flex: 1; padding: 18px 22px; text-align: left; } .bilan-raconte-title { font-weight: 700; display: block; margin-bottom: 8px; } .bilan-raconte-body p { margin: 0 0 10px; font-size: 0.95rem; color: var(--text); line-height: 1.6; } .bilan-raconte-body p:last-child { margin-bottom: 0; color: var(--text-light); font-size: 0.85rem; } .mascot-next { font-size: 0.78rem; color: var(--text-light); margin: 6px 0 0; } .mascot-dress-link { display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--primary-text); margin-top: 8px; text-decoration: none; } .mascot-dress-link:hover { text-decoration: underline; } /* ---- PROFIL / PRÉFÉRENCES ---- */ .pref-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: start; } @media (max-width: 860px) { .pref-form { grid-template-columns: 1fr; } .pref-preview { position: static; } } .pref-block { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; } .pref-block h3 { margin-bottom: 16px; } .pref-radio-group { display: flex; flex-direction: column; gap: 10px; } .pref-radio { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .pref-radio:has(input:checked) { border-color: var(--primary); background: rgba(108,99,255,0.06); } .pref-radio input { accent-color: var(--primary); } .pref-range { margin-bottom: 20px; } .pref-range label { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; } .pref-range output { color: var(--primary-text); font-weight: 700; } .pref-range input[type="range"] { width: 100%; accent-color: var(--primary); } .pref-preview { position: sticky; top: 100px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .pref-preview h4 { margin-bottom: 12px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); } .pref-preview-text { font-size: 1rem; } /* ---- MODE LECTURE ---- */ .lire-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.2); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 20px; } .lire-resume p { margin: 0; margin-right: auto; color: var(--text); } .lire-controls textarea { width: 100%; min-height: 160px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; resize: vertical; } .lire-controls textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); } .lire-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0; } .lire-speed { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-light); } .lire-speed input[type="range"] { accent-color: var(--primary); } .lire-output { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; font-size: inherit; line-height: inherit; letter-spacing: inherit; white-space: pre-wrap; min-height: 120px; /* 60-70 caractères par ligne : recommandation British Dyslexia Association pour ne pas perdre le fil d'une ligne à l'autre. */ max-width: 68ch; margin-left: auto; margin-right: auto; } .lire-placeholder { color: var(--text-light); font-style: italic; } .lire-word { border-radius: 4px; padding: 0 1px; } .lire-word.lire-current { background: rgba(30,75,74,0.18); box-shadow: 0 0 0 2px rgba(30,75,74,0.3); } .grapheme-highlight { background: rgba(217,164,65,0.35); border-radius: 3px; } .lire-unsupported { background: var(--card-bg); border: 1px solid #F8B500; color: var(--text); padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.9rem; } .lire-tip { display: inline-block; background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.2); color: var(--text); padding: 10px 18px; border-radius: var(--radius-sm); margin-top: 14px; font-size: 0.88rem; max-width: 560px; } /* ---- Bibliothèque de textes courts ---- */ .reading-library { margin-bottom: 24px; } .library-zone { margin-top: 16px; padding: 24px; background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius); } .library-zone .field-hint { margin-bottom: 16px; max-width: 560px; } .library-list { display: flex; flex-wrap: wrap; gap: 10px; } .library-item { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 0.9rem; } .library-item:hover { border-color: var(--primary); color: var(--primary-text); } .library-item--poeme { border-color: var(--accent); } .library-item-author { display: block; font-size: 0.75rem; color: var(--text-light); font-style: italic; margin-top: 2px; } /* ---- OCR photo → texte ---- */ .file-import-panel { margin-bottom: 24px; } .file-import-panel .form-error { margin-top: 12px; } .ocr-panel { margin-bottom: 24px; } .ocr-zone { margin-top: 16px; padding: 24px; background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius); } .ocr-zone .field-hint { margin-bottom: 16px; max-width: 560px; } .ocr-preview-wrap { margin-top: 16px; } .ocr-preview { max-width: 240px; max-height: 240px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; } .ocr-progress-wrap { margin-top: 16px; max-width: 400px; } .ocr-progress-label { font-size: 0.85rem; color: var(--text-light); margin-top: 6px; } /* ---- EXERCICES : moteur de session ---- */ .ex-progress-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; } .ex-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background 0.25s ease, transform 0.25s ease; } .ex-dot--done { background: var(--accent); } .ex-dot--current { background: var(--primary); transform: scale(1.3); animation: ex-dot-pulse 1.4s ease-in-out infinite; } @keyframes ex-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,75,74,0.35); } 50% { box-shadow: 0 0 0 5px rgba(30,75,74,0); } } @media (prefers-reduced-motion: reduce) { .ex-dot--current { animation: none; } } /* ---- Entrée glissée à chaque nouvelle question ---- */ .ex-question-enter { animation: ex-question-enter 0.35s ease; } @keyframes ex-question-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ex-question-enter { animation: none; } } /* ---- Confettis légers sur bonne réponse (CSS pur, aucune dépendance) ---- */ .ex-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .ex-confetti-piece { position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 2px; animation: ex-confetti-fall 0.9s ease-in forwards; } @keyframes ex-confetti-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x, 0), 180px) rotate(360deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ex-confetti-piece { display: none; } } .ex-question-card { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; max-width: 640px; margin: 0 auto; text-align: center; } /* ---- Écran "Comment ça marche ?" avant chaque session ---- */ .ex-intro-card { background: var(--card-bg); border: 2px dashed var(--border); border-radius: var(--radius); padding: 36px 40px; max-width: 640px; margin: 0 auto 32px; text-align: center; } .ex-intro-card h3 { margin-bottom: 12px; } .ex-mascot.ex-mascot--intro { position: static; width: 64px; height: 64px; margin: 0 auto 12px; } .ex-action-badge--intro { margin: 0 auto 20px; } .ex-intro-example { background: var(--bg-alt); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; } .ex-intro-example .ex-prompt { margin-bottom: 16px; } .ex-choices--preview .ex-choice-btn { cursor: default; } .ex-choices--preview .ex-choice-btn:hover { border-color: var(--border); transform: none; } .ex-intro-note { color: var(--text-light); font-size: 0.9rem; margin: 0; } /* ---- Découpe syllabique visuelle (feedback après réponse) ---- */ .ex-syllable-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 20px; } .ex-syllable-chip { font-family: inherit; font-size: 1.1rem; font-weight: 800; padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer; color: #fff; opacity: 0; transform: scale(0.5); animation: ex-syllable-pop 0.35s ease forwards; animation-delay: calc(var(--i, 0) * 0.12s); } .ex-syllable-chip:nth-child(6n+1) { background: #1E4B4A; } .ex-syllable-chip:nth-child(6n+2) { background: #C97A3D; } .ex-syllable-chip:nth-child(6n+3) { background: #2563EB; } .ex-syllable-chip:nth-child(6n+4) { background: #7C3AED; } .ex-syllable-chip:nth-child(6n+5) { background: #0E9488; } .ex-syllable-chip:nth-child(6n+6) { background: #DB2777; } .ex-syllable-chip:hover { filter: brightness(1.1); } @keyframes ex-syllable-pop { to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ex-syllable-chip { animation: none; opacity: 1; transform: none; } } /* La mascotte reste visible pendant toute la session, pas seulement sur le dashboard, et réagit à chaque réponse (voir exercice.js). */ .ex-mascot { position: absolute; top: -24px; right: -24px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 2px solid var(--border); border-radius: 50%; transition: transform 0.2s ease; } .ex-mascot .mascot-visual-svg { width: 78%; height: 78%; color: var(--primary-text); } .ex-mascot--happy { border-color: var(--accent); animation: ex-mascot-bounce 0.6s ease; } .ex-mascot--happy .mascot-visual-svg { color: var(--accent); } .ex-mascot--oops { animation: ex-mascot-wobble 0.6s ease; } @keyframes ex-mascot-bounce { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-10px) scale(1.15); } 55% { transform: translateY(0) scale(0.95); } 75% { transform: translateY(-4px) scale(1.05); } } @keyframes ex-mascot-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { .ex-mascot--happy, .ex-mascot--oops { animation: none; } } @media (max-width: 560px) { .ex-mascot { top: -16px; right: -12px; width: 46px; height: 46px; } } .ex-action-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 16px; padding: 6px 16px; border-radius: 999px; background: var(--bg-alt); color: var(--text-light); font-size: 0.85rem; font-weight: 700; width: fit-content; } .ex-action-icon { font-size: 1.2rem; } .ex-prompt { /* La question est l'élément le plus important de l'écran d'exercice : agrandie pour qu'elle domine clairement les boutons secondaires (consigne, mode focus) plutôt que d'être au même niveau visuel qu'eux (relevé lors de l'audit polish du 2026-07-13). */ font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-bottom: 30px; } .ex-word-display { font-size: 2.2rem; font-weight: 800; color: var(--primary-text); margin: -8px 0 28px; } .ex-audio-controls { margin: -8px 0 28px; } .ex-consigne-audio { margin: 0 0 20px; } .btn-audio { border-color: var(--accent); /* #A06130 : version assombrie de --accent (#C97A3D, 3.3:1 sur blanc, sous le seuil AA) pour atteindre 4.9:1 sans changer la variable partagee (utilisee ailleurs en fond/decor, pas seulement en texte). */ color: #A06130; font-weight: 700; animation: ex-audio-invite 2.6s ease-in-out infinite; } .btn-audio:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* Invitation douce au clic (pas un clignotement) : signale qu'il y a du son disponible sans jamais le déclencher tout seul, voir feedback_dysaide_audio_manual_only. */ @keyframes ex-audio-invite { 0%, 100% { box-shadow: 0 3px 0 var(--border); } 50% { box-shadow: 0 3px 0 var(--border), 0 0 0 4px rgba(201,122,61,0.18); } } @media (prefers-reduced-motion: reduce) { .btn-audio { animation: none; } } .ex-blank { display: inline-block; border-bottom: 3px solid var(--primary); vertical-align: baseline; height: 1em; /* Zone de clic/depot plus genereuse que le simple soulignement visuel : un trou de quelques caracteres de large reste difficile a viser au doigt sur mobile si la cible tactile se limite au trait visible. */ padding: 6px 6px 2px; margin-top: -6px; } .ex-blank--letter { min-width: 0.85em; margin-left: 2px; margin-right: 2px; } .ex-blank--word { min-width: 4.5em; margin-left: 4px; margin-right: 4px; } .ex-blank--drop-target { background: rgba(108,99,255,0.15); border-bottom-color: var(--primary-dark); border-radius: 4px; } /* Des qu'un glisser commence, on indique ou deposer avant meme que le pointeur soit precisement dessus (sinon la cible n'est visible qu'au moment ou on la survole deja, trop tard pour viser). */ body.ex-dragging .ex-blank { box-shadow: 0 0 0 2px rgba(108,99,255,0.35); border-radius: 4px; } .ex-drag-hint { font-size: 0.85rem; color: var(--text-light); margin: -8px 0 16px; } /* ---- Mini-jeu de rythme syllabique ---- */ .ex-rhythm { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 20px; margin-bottom: 20px; background: var(--bg-alt); border-radius: var(--radius); } .ex-rhythm-syllable { font-size: 2.6rem; font-weight: 800; color: var(--primary-text); min-height: 1.3em; min-width: 2.5em; text-align: center; transition: transform 0.15s ease; } .ex-rhythm-syllable--pulse { animation: ex-rhythm-pulse 0.3s ease; } .ex-rhythm-syllable--hit { color: var(--accent); } @keyframes ex-rhythm-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .ex-rhythm-tap { font-size: 1.3rem; padding: 20px 40px; border-radius: 999px; } .ex-rhythm-status { font-size: 0.9rem; color: var(--text-light); text-align: center; margin: 0; } .ex-choice-btn--draggable { cursor: grab; touch-action: none; } .ex-choice-btn--dragging-source { opacity: 0.4; } .ex-choice-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.9; box-shadow: var(--shadow-lg); cursor: grabbing; } body.ex-dragging { -webkit-user-select: none; user-select: none; } .ex-choices { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .ex-choice-btn { width: 100%; padding: 16px 20px; font-size: 1.15rem; font-family: inherit; font-weight: 600; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 3px 0 var(--border); color: var(--text); text-align: left; overflow-wrap: break-word; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease; } .ex-choice-btn:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 5px 0 var(--border); } .ex-choice-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--border); } .ex-choice-btn:disabled { cursor: default; } .ex-choice-btn--illustrated { display: flex; align-items: center; gap: 12px; } .ex-choice-icon { flex-shrink: 0; width: 40px; height: 40px; } .ex-choice-icon-svg { width: 100%; height: 100%; color: var(--primary-text); } .ex-choice-btn--correct .ex-choice-icon-svg { color: var(--accent-dark, var(--accent)); } .ex-choice-btn--correct { border-color: var(--accent) !important; box-shadow: 0 3px 0 var(--accent) !important; background: rgba(67,198,172,0.15) !important; } .ex-choice-btn--wrong { border-color: rgba(255,101,132,0.5) !important; box-shadow: 0 3px 0 rgba(255,101,132,0.5) !important; background: rgba(255,101,132,0.08) !important; opacity: 0.8; } .ex-feedback { min-height: 1.6em; font-size: 1rem; font-weight: 500; margin: 0; } .ex-feedback--positive { color: #2AA897; } .ex-feedback--gentle { color: #9A7000; } .ex-pause-break { margin: 16px auto 0; max-width: 420px; padding: 16px 20px; border-radius: var(--radius-sm); background: rgba(30,75,74,0.08); border: 1px solid rgba(30,75,74,0.2); text-align: center; } .ex-pause-break p { margin: 0 0 12px; color: var(--primary-text); font-weight: 500; } .ex-feedback-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .ex-feedback-replay { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-alt); cursor: pointer; font-size: 0.95rem; line-height: 1; transition: border-color 0.12s ease; } .ex-feedback-replay:hover { border-color: var(--primary); } .ex-intro-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .ex-citation { margin: 20px auto 0; max-width: 460px; padding: 18px 22px; border: 1px solid var(--border); background: var(--bg-alt); border-radius: var(--radius-sm); text-align: left; opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .ex-citation--visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .ex-citation { transition: opacity 200ms ease; transform: none; } } .ex-citation p { font-style: italic; font-size: 1.02rem; line-height: 1.6; margin: 0 0 6px; } .ex-citation cite { display: block; font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--primary-text); } #ex-next { margin-top: 24px; } .ex-end-card { text-align: center; max-width: 520px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 32px; } .ex-end-icon { font-size: 3rem; margin-bottom: 16px; } .ex-end-icon--celebrate { animation: ex-mascot-bounce 0.7s ease; } @media (prefers-reduced-motion: reduce) { .ex-end-icon--celebrate { animation: none; } } .ex-end-card h3 { margin-bottom: 12px; } .ex-end-card p { color: var(--text-light); margin-bottom: 28px; } .ex-level-message { font-weight: 600; padding: 10px 16px; border-radius: var(--radius-sm); margin: -16px 0 28px !important; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); } .ex-level-message--up { border-left: 4px solid #2AA897; } .ex-level-message--down { border-left: 4px solid var(--primary); } .ex-path-advance-link { margin-bottom: 28px; } .ex-mood-picker { margin-bottom: 28px; } .ex-mood-question { font-size: 0.9rem; margin-bottom: 12px !important; } .ex-mood-choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ex-mood-btn { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 16px; font-family: inherit; font-size: 0.9rem; cursor: pointer; } .ex-mood-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); } .ex-mood-btn:disabled { opacity: 0.5; cursor: default; } .ex-mood-thanks { font-size: 0.85rem; color: var(--text-light); margin: 10px 0 0 !important; } .ex-end-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ---- PROGRESSION ---- */ .stat-hero { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; text-align: center; } .stat-hero--empty { display: flex; flex-direction: column; gap: 20px; align-items: center; } .stat-hero-number { font-size: 3.5rem; font-weight: 800; color: var(--primary-text); line-height: 1; } .stat-hero-label { color: var(--text-light); margin: 8px 0 24px; } .fluency-card { background: var(--card-bg); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); border-radius: var(--radius); padding: 24px 32px; text-align: center; margin: 0 auto 24px; max-width: 480px; } .fluency-number { font-size: 2.2rem; font-weight: 800; color: var(--accent2); line-height: 1; } .fluency-unit { font-size: 1rem; font-weight: 600; color: var(--text-light); } .fluency-label { color: var(--text-light); margin-top: 8px; font-size: 0.9rem; } .fluency-trend { display: block; margin-top: 6px; font-weight: 700; font-size: 0.85rem; } .fluency-trend--up { color: #2AA897; } .fluency-trend--down { color: var(--text-light); } .progress-bar-track { height: 18px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 2px 0 rgba(0,0,0,0.06); overflow: hidden; max-width: 480px; margin: 0 auto; } .progress-bar-track--sm { height: 10px; max-width: none; margin: 6px 0 0; } .progress-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: inset 0 2px 0 rgba(255,255,255,0.25); transition: width 0.6s ease; } .history-list { display: flex; flex-direction: column; gap: 12px; } .history-item { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; } .history-icon { font-size: 1.6rem; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(30,75,74,0.12); } .history-icon .def-icon-svg { width: 22px; height: 22px; color: #1E4B4A; } /* flex-basis généreux (pas 0) : avec plusieurs boutons d'action à côté (ex. /famille, deux boutons), un flex:1 basis:0% laissait le nom d'un enfant se faire écraser à quelques pixels avant de tronquer, même quand il y avait la place ailleurs. flex-wrap sur .history-item fait passer les actions à la ligne plutôt que d'écraser le nom quand ça ne rentre pas. */ .history-body { flex: 1 1 160px; min-width: 120px; } .history-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .history-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; margin-bottom: 2px; } .history-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .history-date { color: var(--text-light); white-space: nowrap; flex-shrink: 0; } .history-score { font-weight: 700; color: var(--primary-text); white-space: nowrap; } .badges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .badge-card { text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; } .badge-card-icon { font-size: 2.4rem; margin-bottom: 12px; } .badge-card-title { font-weight: 700; margin-bottom: 6px; } .badge-card-desc { font-size: 0.85rem; color: var(--text-light); } .badge-card--locked .badge-card-icon { filter: grayscale(1); opacity: 0.6; } .chest-panel { margin-top: 20px; padding: 24px; border-radius: 20px; background: var(--bg-alt); border: 2px dashed var(--feat-orange); text-align: center; max-width: 480px; } .chest-panel-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; transition: transform 0.3s ease; } .chest-panel-icon--opening { transform: scale(1.3) rotate(-8deg); } .chest-panel-label { margin: 0 0 14px; color: var(--text); } .chest-panel-result { margin-top: 12px; font-weight: 600; color: var(--feat-green); min-height: 1.2em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- NOTIFICATION DE BADGE ---- */ .badge-toast { position: fixed; bottom: calc(24px + var(--pwa-banner-h, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 24px; z-index: 9999; opacity: 0; transition: all 0.35s ease; } .badge-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .badge-toast-icon { font-size: 2rem; } .badge-toast-text { display: flex; flex-direction: column; font-size: 0.9rem; } /* ---- ADMIN ---- */ /* Le tableau des comptes a trop de colonnes pour le container standard (1200px, partage avec tout le site) : elargi jusqu'a 1600px sur grand ecran pour afficher toutes les colonnes sans scroll horizontal, et retombe sur le container standard en dessous (pas de depassement sur tablette/mobile, ou admin-table-wrap garde son overflow-x:auto). */ .container--admin-wide { max-width: 1600px; } .admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .admin-filters input[type="search"] { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font-size: 0.9rem; } .admin-filters select { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font-size: 0.9rem; } .admin-filters-reset { font-size: 0.85rem; color: var(--text-light); } .admin-filters-count { margin-left: auto; font-size: 0.82rem; color: var(--text-light); white-space: nowrap; } .admin-sort-link { color: inherit; text-decoration: none; } .admin-sort-link:hover { color: var(--primary-text); text-decoration: underline; } .admin-table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; } .admin-table th, .admin-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); } .admin-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: var(--bg-alt); } .text-muted { color: var(--text-light); } /* Colonnes fusionnées (Profil+Détail, Sessions+Réussite+Session moy., Inscrit le+Dernière connexion) pour que le tableau tienne dans la largeur de la page sans scroll horizontal sur un écran standard. */ .admin-table--compact { font-size: 0.82rem; } .admin-table--compact th, .admin-table--compact td { padding: 10px 12px; } .admin-subline { color: var(--text-light); font-size: 0.78rem; margin-top: 2px; } .admin-cell-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .admin-table--compact .admin-actions { flex-direction: column; gap: 6px; align-items: flex-start; } .admin-table--compact .admin-action-btn { min-height: unset; padding: 6px 10px; } .admin-badge-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; } .admin-status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } /* Couleurs assombries (2.62:1 et 4.08:1 avant, sous le seuil AA) pour atteindre 4.9:1 sur le fond composite reel de chaque pastille. */ .admin-status--active { background: rgba(67,198,172,0.15); color: #1D7569; } .admin-status--pending { background: rgba(248,181,0,0.15); color: #8A6400; } .admin-actions { display: flex; gap: 8px; white-space: nowrap; } .admin-action-btn { min-height: 40px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .admin-action-btn:hover { border-color: var(--primary); color: var(--primary-text); } .admin-action-btn--danger:hover { border-color: #C03355; color: #C03355; } .badge-toast-text strong { color: var(--primary-text); } /* ---- RETOUR BÊTA-TEST ---- */ .feedback-fab { position: fixed; bottom: calc(24px + var(--pwa-banner-h, 0px)); right: 24px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-lg); cursor: pointer; z-index: 9998; transition: transform 0.2s ease, bottom 0.2s ease; } .feedback-fab:hover { transform: scale(1.06); } .feedback-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .feedback-modal[hidden] { display: none; } .feedback-modal-content { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 32px; max-width: 440px; width: 100%; } .feedback-modal-content h3 { margin-bottom: 6px; } .feedback-modal-close { position: absolute; top: 16px; right: 16px; border: none; background: none; color: var(--text-light); font-size: 1.1rem; cursor: pointer; } .feedback-modal-close:hover { color: var(--text); } #feedback-message { width: 100%; margin: 16px 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: var(--bg); color: var(--text); resize: vertical; } #feedback-message:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .feedback-status { min-height: 1.2em; font-size: 0.85rem; margin-bottom: 12px; } .feedback-status--success { color: #2AA897; } .feedback-status--error { color: #C03355; } /* ---- SONDAGE PERIODIQUE NOTE ---- */ .survey-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .survey-modal--visible { display: flex; } .survey-modal-content { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 32px; max-width: 460px; width: 100%; } .survey-modal-content { text-align: center; } .survey-modal-content h3 { margin-bottom: 6px; } .survey-rating-block { margin-top: 20px; } .survey-rating-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; } .survey-stars-input { display: flex; justify-content: center; gap: 4px; } .survey-star-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.7rem; color: var(--border); background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); } .survey-star-btn:hover, .survey-star-btn:focus-visible { color: #F5A623; outline: 2px solid var(--primary); outline-offset: 1px; } .survey-star-btn--filled { color: #F5A623; } .survey-message-label { text-align: left; } .survey-message-label { display: block; font-weight: 600; font-size: 0.92rem; margin: 20px 0 6px; } #survey-message { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: var(--bg); color: var(--text); resize: vertical; text-align: left; } #survey-message:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .survey-modal-actions { display: flex; gap: 12px; margin-top: 16px; } .survey-modal-actions .btn { flex: 1; min-height: 44px; text-align: center; justify-content: center; } @media (max-width: 480px) { .survey-modal-content { padding: 24px 20px; } } button.feedback-trigger { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-family: inherit; text-align: left; width: 100%; cursor: pointer; } /* ---- Rapport / bilan imprimable ---- */ .rapport-print-header { display: none; } .rapport-print-watermark { display: none; } .rapport-hint { font-size: 0.85rem; color: var(--text-light, #6B7280); margin-top: 8px; } .rapport-btn { margin-top: 16px; } @media print { /* Rendu papier volontairement indépendant du thème d'affichage choisi à l'écran (y compris sombre) : un PDF toujours sur fond crème doux, jamais noir pur sur blanc pur, avec un espacement généreux, quel que soit le réglage de taille/interligne/espacement de l'utilisateur sur l'application. L'accessibilité du document imprimé ne doit pas dépendre d'un réglage qu'on pourrait avoir oublié d'ajuster avant d'imprimer. */ @page { margin: 18mm 16mm; } * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } #navbar, #footer, .feedback-fab, .feedback-modal, .reply-modal, .no-print, .a11y-bar, .breadcrumb { display: none !important; } /* Le rail de navigation est masque (regle ci-dessus) mais le decalage desktop (margin-left: 240px sur #main-content/#footer, voir style.css) n'est pas automatiquement annule par ce display:none : sans ce reset, le contenu imprime garderait une marge gauche vide de 240px. */ #main-content, #footer { margin-left: 0 !important; } body { background: #FFF9F0 !important; color: #26302F !important; font-size: 13pt !important; line-height: 1.65 !important; letter-spacing: 0.01em !important; /* Le bilan s'imprime toujours sur fond clair, quel que soit le thème à l'écran : le teal de texte revient à sa version foncée, sinon un utilisateur en thème sombre imprimerait du #6DC5C3 sur du blanc. !important est nécessaire pour battre le style inline du thème. */ --primary-text: #1E4B4A !important; } p, li { margin-bottom: 10px; } .dashboard-hero { position: relative; padding-top: 0; } /* Filigrane : logo en fond, discret, centré derrière le contenu */ .rapport-print-watermark { display: block; position: fixed; top: 50%; left: 50%; width: 480px; height: 480px; transform: translate(-50%, -50%); background-image: url('/cerveau-singulier.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.05; z-index: -1; } .rapport-print-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; border-bottom: 3px solid #1E4B4A; padding-bottom: 18px; } .rapport-print-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: #1E4B4A; } .rapport-print-logo img { width: 32px; height: 32px; border-radius: 8px; } .rapport-print-header h1 { font-size: 1.6rem; margin: 12px 0 0; color: #26302F; } .rapport-print-header h1 em { color: #1E4B4A; font-style: normal; } .rapport-print-header p { font-size: 0.9rem; color: #6B7280; margin: 0; } /* Repères visuels nets (utile dyspraxie/dyslexie : structure prévisible, bordures franches plutôt que des ruptures uniquement typographiques). */ .section-tag { background: #1E4B4A !important; color: #fff !important; font-size: 0.75rem !important; } h2, h3 { color: #26302F !important; } .stat-hero { background: #FFFFFF !important; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 28px !important; break-inside: avoid; } .stat-hero-number { color: #1E4B4A !important; } .progress-bar-fill { background: #1E4B4A !important; } .progress-bar-track { background: #F3EEE3 !important; } .history-item, .badge-card { break-inside: avoid; background: #FFFFFF !important; border: 1.5px solid #E5E7EB; padding: 14px 16px !important; } .badge-card--locked { display: none; } .bilan-raconte-body { background: #FFFFFF !important; border: 1.5px solid #E5E7EB; } .fluency-card { background: #FFFFFF !important; border: 1.5px solid #E5E7EB; } h3 { break-after: avoid; } /* ---- Export PDF du texte adapté (page /lire) : ne garder que le texte reformaté, jamais les contrôles (zone de saisie, boutons, import). ---- */ .lire-print-header { display: none; } body:has(#lire-output) .section-header, body:has(#lire-output) .lire-controls, body:has(#lire-output) .lire-toolbar, body:has(#lire-output) .reading-library, body:has(#lire-output) .file-import-panel, body:has(#lire-output) .ocr-panel, body:has(#lire-output) #lire-resume, body:has(#lire-output) #lire-unsupported { display: none !important; } body:has(#lire-output) .lire-print-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; border-bottom: 3px solid #1E4B4A; padding-bottom: 16px; } body:has(#lire-output) .lire-output { background: #FFFFFF !important; border: 1.5px solid #E5E7EB; max-width: none; font-size: 15pt; line-height: 1.8; } body:has(#lire-output) .lire-word.lire-current { background: none !important; box-shadow: none !important; } } /* ---- Guide / aide (page /guide) ---- */ .guide-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 40px; } .guide-toc a { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease; } .guide-toc a:hover { border-color: var(--primary); color: var(--primary-text); } .guide-toc a .def-icon-svg { width: 18px; height: 18px; } /* Même code couleur que les pastilles du dashboard, pour que "Mode lecture" ait toujours la même teinte partout dans l'app (repère visuel constant). */ .guide-toc a:nth-child(1) .def-icon-svg, .guide-faq-list .faq-item:nth-of-type(1) .faq-icon .def-icon-svg { color: var(--feat-teal); } .guide-toc a:nth-child(2) .def-icon-svg, .guide-faq-list .faq-item:nth-of-type(2) .faq-icon .def-icon-svg { color: var(--feat-orange); } .guide-toc a:nth-child(3) .def-icon-svg, .guide-faq-list .faq-item:nth-of-type(3) .faq-icon .def-icon-svg { color: var(--feat-blue); } .guide-toc a:nth-child(4) .def-icon-svg, .guide-faq-list .faq-item:nth-of-type(4) .faq-icon .def-icon-svg { color: var(--feat-violet); } .guide-toc a:nth-child(5) .def-icon-svg, .guide-faq-list .faq-item:nth-of-type(5) .faq-icon .def-icon-svg { color: var(--feat-green); } .guide-faq-list .faq-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-alt); opacity: 1; margin-top: 0; } .guide-faq-list .faq-item:nth-of-type(1) .faq-icon { background: rgba(30,75,74,0.12); } .guide-faq-list .faq-item:nth-of-type(2) .faq-icon { background: rgba(201,122,61,0.14); } .guide-faq-list .faq-item:nth-of-type(3) .faq-icon { background: rgba(37,99,235,0.12); } .guide-faq-list .faq-item:nth-of-type(4) .faq-icon { background: rgba(124,58,237,0.12); } .guide-faq-list .faq-item:nth-of-type(5) .faq-icon { background: rgba(14,148,136,0.12); } /* ---- BLOC ILLUSTRÉ ALTERNÉ (page /guide) ---- */ .guide-media-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .guide-media-row--reverse { flex-direction: row-reverse; } .guide-media-image { flex: 1 1 240px; min-height: 180px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-color: var(--bg-alt); } .guide-media-text { flex: 2 1 360px; min-width: 0; } @media (max-width: 640px) { .guide-media-row, .guide-media-row--reverse { flex-direction: column; } .guide-media-image { width: 100%; } } .guide-faq-list .faq-answer p { margin-bottom: 14px; } .guide-steps { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .guide-steps li { line-height: 1.7; } /* ---- RECOMMANDATIONS (questionnaire) ---- */ .reco-cta { text-decoration: none; border: 2px dashed var(--primary); background: rgba(108,99,255,0.05); margin-bottom: 8px; } .reco-heading { margin: 32px 0 16px; } .reco-grid { margin-bottom: 8px; } .reco-card { border: 2px solid var(--primary); } .reco-refresh { margin: 12px 0 8px; } /* ---- GRILLE D'EXERCICES PAR COMPÉTENCE (page /exercices) ---- */ .competency-heading { margin: 40px 0 16px; } .exercise-card { position: relative; } .reco-badge { position: absolute; top: 14px; right: 14px; background: var(--accent2); color: #26302F; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; } .reco-badge-inline { display: inline-block; background: var(--accent2); color: #26302F; font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; vertical-align: middle; } .mastery-dots { display: flex; gap: 5px; margin-top: 14px; } .mastery-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } .mastery-dot--filled { background: var(--primary); } .pinned-heading { margin-top: 8px; } .pin-toggle { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,0.85); cursor: pointer; z-index: 1; } .pin-toggle-icon { width: 18px; height: 18px; fill: none; stroke: var(--text-light); stroke-width: 1.6; } .pin-toggle:hover .pin-toggle-icon { stroke: var(--primary-text); } .pin-toggle--active .pin-toggle-icon { fill: var(--accent2); stroke: var(--accent2); } /* ---- PROFIL DYS (résumé) ---- */ .profile-dys-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .profile-dys-chip { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(108,99,255,0.1); color: var(--primary-text); font-size: 0.85rem; font-weight: 600; } .profile-dys-empty { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; } /* ---- ICONES SVG DES EXERCICES ---- */ .ex-visual { display: flex; justify-content: center; margin-bottom: 12px; } .ex-visual-svg { width: 72px; height: 72px; color: var(--primary-text); } .def-icon-svg { width: 40px; height: 40px; color: var(--primary-text); } /* ---- MINUTEUR DE CONCENTRATION DOUX ---- */ .focus-timer-badge { position: fixed; bottom: calc(24px + var(--pwa-banner-h, 0px)); left: 24px; z-index: 900; background: var(--card-bg); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 0.95rem; color: var(--text); font-variant-numeric: tabular-nums; } .focus-timer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(20,40,42,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .focus-timer-card { background: var(--card-bg); border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); padding: 36px 32px; max-width: 420px; text-align: center; } .focus-timer-breath { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: radial-gradient(circle, var(--accent2), var(--accent)); animation: focus-breathe 4s ease-in-out infinite; } @keyframes focus-breathe { 0%, 100% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .focus-timer-breath { animation: none; } } .focus-timer-card h3 { margin-bottom: 10px; } .focus-timer-card p { color: var(--text-light); margin-bottom: 20px; } .focus-timer-actions { display: flex; flex-direction: column; gap: 10px; } @media (max-width: 480px) { .focus-timer-badge { left: 12px; bottom: calc(12px + var(--pwa-banner-h, 0px)); } } .admin-feedback-item { flex-direction: column; align-items: flex-start; } .admin-feedback-message { margin: 8px 0 4px; white-space: pre-wrap; } .admin-feedback-ratings { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; font-size: 0.9rem; } .admin-feedback-rating-line { color: #F5A623; letter-spacing: 1px; } /* ---- LEÇONS EN CARTE MENTALE (Fantadys-inspiré) ---- Le bandeau de notion centrale a un texte de longueur tres variable ("Calcul mental" vs "Lire une consigne sans se tromper"). En pastille ajustee au texte (ancien rendu), ca donnait des bulles de tailles tres differentes d'une carte a l'autre, y compris a l'intitule aligne en dessous. Bandeau plein largeur a hauteur fixe : toutes les cartes d'une meme rangee restent alignees quelle que soit la longueur du texte. */ .lesson-card { align-items: stretch; text-align: center; padding: 0 0 24px; overflow: hidden; } .lesson-card-central { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 20px; margin-bottom: 18px; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: 0.85rem; line-height: 1.3; text-align: center; /* Filet de securite si un futur contenu tres long depassait 2 lignes : coupe avec des points de suspension plutot que de faire grandir le bandeau au-dela de la hauteur fixe (min-height ci-dessus). */ max-height: 64px; overflow: hidden; } .lesson-card-central span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .lesson-card h3, .lesson-card p { padding-left: 24px; padding-right: 24px; } .mindmap { margin-top: 16px; } .mindmap-central { display: block; width: fit-content; max-width: 100%; margin: 0 auto 32px; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: 1.15rem; text-align: center; padding: 18px 32px; border-radius: 999px; box-shadow: 0 3px 0 var(--primary-dark); } .mindmap-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .mindmap-branch { position: relative; background: var(--card-bg); border: 2px solid var(--border); border-top: 5px solid var(--primary); border-radius: var(--radius); box-shadow: 0 3px 0 var(--border); padding: 20px 22px; } .mindmap-branch--primary { border-top-color: var(--primary); } .mindmap-branch--accent { border-top-color: var(--accent); } .mindmap-branch--accent2 { border-top-color: var(--accent2); } .mindmap-branch--secondary { border-top-color: var(--secondary); } .mindmap-branch h3 { margin-bottom: 10px; } .mindmap-rule { font-weight: 600; margin-bottom: 12px; } .mindmap-example { color: var(--text-light); font-size: 0.9rem; background: var(--bg-alt); border-radius: var(--radius-sm); padding: 10px 14px; white-space: pre-line; } .lesson-listen-btn { margin-top: 14px; font-size: 0.85rem; padding: 8px 14px; } /* ---- BANNIÈRE D'INSTALLATION PWA (mobile/tablette) ---- */ .pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950; display: flex; align-items: center; gap: 12px; background: var(--dark); color: #FFFFFF; border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .pwa-install-text { flex: 1; font-size: 0.88rem; line-height: 1.4; } .pwa-install-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pwa-install-btn { padding: 8px 16px; font-size: 0.85rem; } .pwa-install-dismiss { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; } .pwa-install-dismiss:hover { color: #FFFFFF; } /* ---- Parcours illustré (page /parcours, vague 5) ---- */ .path-map { /* Repli de la couleur de domaine, posé sur le conteneur racine et non sur .path-node : sur .path-node il écrasait la valeur héritée de .path-domain, si bien que les cercles ressortaient tous en teal alors que les titres et les traits de liaison, eux, prenaient bien la teinte de leur domaine. L'intention du code n'avait donc jamais pris effet (corrigé 2026-07-14). */ --domain-color: var(--feat-teal); position: relative; display: flex; flex-direction: column; gap: 36px; padding: 24px 70px 70px; } .path-map--adventure { background: radial-gradient(circle at 15% 20%, rgba(124,58,237,0.10), transparent 45%), radial-gradient(circle at 85% 75%, rgba(11,120,110,0.10), transparent 45%); border-radius: 24px; border: 1px dashed var(--border); } .path-map--adventure .path-domain-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--domain-color); margin-right: 8px; } .path-domain-title { color: var(--domain-color); font-size: 1.05rem; margin-bottom: 16px; } .path-row { display: flex; align-items: center; flex-wrap: wrap; row-gap: 20px; } .path-connector { flex: 0 0 24px; height: 4px; background: var(--domain-color); opacity: 0.35; border-radius: 2px; margin: 0 -2px; align-self: center; } .path-node { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; text-align: center; text-decoration: none; flex-shrink: 0; } .path-node-circle { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 3px solid var(--domain-color); background: var(--card-bg); transition: transform 0.15s ease, box-shadow 0.15s ease; } .path-node:hover .path-node-circle { transform: translateY(-3px); box-shadow: 0 4px 0 var(--border); } .path-node--done .path-node-circle { background: var(--domain-color); } .path-node--done .path-node-icon-svg { color: #FFFFFF; } /* L'étape franchie remplit son cercle avec la couleur de domaine. Sur le thème sombre cette couleur est claire : l'icône y passe en foncé, sinon c'est du blanc sur turquoise pâle (2:1). */ body.bg-sombre .path-node--done .path-node-icon-svg { color: #14282A; } .path-node--upcoming .path-node-circle { opacity: 0.5; border-style: dashed; filter: grayscale(0.7); } .path-node-icon-svg { width: 28px; height: 28px; color: var(--domain-color); } .path-node-label { font-size: 0.72rem; font-weight: 700; color: var(--text-light); line-height: 1.25; } .path-mascot { position: absolute; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 2px solid var(--border); border-radius: 50%; pointer-events: none; z-index: 5; transition: left 0.9s ease, top 0.9s ease; } .path-mascot .mascot-visual-svg { width: 78%; height: 78%; color: var(--primary-text); } .path-celebration { text-align: center; background: var(--card-bg); border: 2px dashed var(--accent); border-radius: var(--radius); padding: 32px; max-width: 460px; margin: 16px auto 0; } .path-celebration-icon { font-size: 2.4rem; margin-bottom: 8px; } @media (max-width: 640px) { .path-map { padding: 20px 12px 60px; } .path-node { width: 76px; } .path-node-circle { width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .path-mascot { transition: none; } } /* ---- Ma mascotte : objets à collectionner (page /ma-mascotte, vague 6) ---- */ .mascotte-preview { position: relative; width: fit-content; margin: 8px auto 40px; } .mascotte-preview-icon { width: 140px; height: 140px; border-radius: 50%; background: var(--bg-alt); border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; } .mascotte-preview-icon .mascot-visual-svg { width: 75%; height: 75%; color: var(--primary-text); } .mascotte-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; } .mascotte-item-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px; background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center; font-family: inherit; transition: transform 0.12s ease, border-color 0.12s ease; } .mascotte-item-card--locked { opacity: 0.55; cursor: default; } .mascotte-item-card--locked .mascot-item-svg { filter: grayscale(1); } .mascotte-item-card--unlocked:hover { transform: translateY(-3px); border-color: var(--primary); } .mascotte-item-card--equipped { border-color: var(--accent); background: rgba(67,198,172,0.1); } .mascot-item-svg { width: 40px; height: 40px; color: var(--primary-text); } .mascotte-item-title { font-weight: 700; font-size: 0.9rem; } .mascotte-item-status { font-size: 0.75rem; color: var(--text-light); } /* ---- Glisser-déposer : syllabes à remettre en ordre (vague 7) ---- */ .ex-reorder { margin-bottom: 8px; } .ex-reorder-label { font-size: 0.85rem; font-weight: 700; color: var(--text-light); margin: 0 0 10px; text-align: left; } .reorder-pool, .reorder-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; min-height: 56px; } .reorder-chip { font-family: inherit; font-size: 1.1rem; font-weight: 700; padding: 12px 18px; border-radius: var(--radius-sm); border: 2px solid var(--primary); background: var(--card-bg); color: var(--primary-text); cursor: grab; touch-action: none; box-shadow: 0 3px 0 var(--primary); transition: transform 0.08s ease; } .reorder-chip:active { cursor: grabbing; } .reorder-chip--dragging-source { opacity: 0.35; } .reorder-chip--ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.95; box-shadow: var(--shadow-lg); cursor: grabbing; } .reorder-slot { min-width: 64px; height: 52px; padding: 0 14px; border-radius: var(--radius-sm); border: 3px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: var(--text); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .reorder-slot--filled { border-style: solid; border-color: var(--primary); background: var(--bg-alt); } .reorder-slot--drop-target { border-color: var(--accent); background: rgba(67,198,172,0.15); } .reorder-slot--flash { animation: reorder-flash 0.3s ease; } .reorder-slot--locked { cursor: default; } @keyframes reorder-flash { 0% { transform: scale(1.15); } 100% { transform: scale(1); } } .ex-reorder-hint { font-size: 0.85rem; color: var(--text-light); margin: 0; } .ex-choices--syllable-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* ---- Mini-jeu bonus : mémoire des lettres (vague 8) ---- */ .ex-memory-offer { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; text-align: center; } .ex-memory-offer p { margin: 0 0 14px; font-weight: 600; } .ex-memory-game { margin-bottom: 24px; } .ex-memory-title { font-weight: 700; margin-bottom: 16px; } .memory-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; max-width: 340px; margin: 0 auto; } .memory-card { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--card-bg); font-size: 1.4rem; font-weight: 800; color: var(--text-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .memory-card svg { width: 60%; height: 60%; } .memory-card--flipped { border-color: var(--primary); transform: scale(1.04); } .memory-card--matched { border-color: var(--accent); background: rgba(67,198,172,0.12); cursor: default; } .ex-memory-win { text-align: center; font-weight: 700; color: #2AA897; margin: 16px 0 0; } /* ---- Mini-jeux ludiques (memory + chrono, reserves aux enfants/ados) ---- */ .ex-chrono-bar { height: 10px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; margin-bottom: 18px; } .ex-chrono-bar-fill { height: 100%; width: 100%; border-radius: 999px; background: var(--accent); } .ex-pairs { text-align: center; } .ex-pairs-status { font-weight: 700; margin: 0 0 16px; color: var(--primary-text); } .ex-pairs-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 12px; max-width: 440px; margin: 0 auto; } .ex-pair-card { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ex-pair-card:disabled { cursor: default; } .ex-pair-card-face { font-size: 1.6rem; font-weight: 800; color: #FFFFFF; } .ex-pair-card--flipped { background: var(--card-bg); border-color: var(--primary); transform: scale(1.04); } .ex-pair-card--flipped .ex-pair-card-face { color: var(--text); font-size: 0.95rem; } .ex-pair-card--flipped .ex-pair-card-face img { width: 72%; height: 72%; object-fit: contain; } .ex-pair-card--matched { background: rgba(67,198,172,0.12); border-color: var(--accent); cursor: default; } .ex-pair-card--matched .ex-pair-card-face { color: var(--primary-text); font-size: 0.95rem; } .ex-pair-card-wrap { position: relative; } .ex-pair-speak-btn { position: absolute; bottom: -6px; right: -6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-alt); cursor: pointer; font-size: 0.95rem; line-height: 1; transition: border-color 0.12s ease; } .ex-pair-speak-btn:hover { border-color: var(--primary); } @media (max-width: 560px) { .ex-pair-speak-btn { width: 40px; height: 40px; } } /* ---- Bibliothèque d'images par son (vague 9) ---- */ .sound-icon-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin-right: 6px; padding: 3px; border-radius: 50%; background: var(--card-bg, #fff); color: var(--primary, #1E4B4A); animation: sound-icon-pop 0.3s ease; } .sound-icon-badge svg { width: 100%; height: 100%; } @keyframes sound-icon-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .sound-icon-badge { animation: none; } } /* ---- Passage de lecture (exercice de compréhension) ---- */ .ex-passage { background: var(--bg-alt); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; text-align: left; } .ex-passage-text { font-size: 1.05rem; line-height: 1.7; margin: 0 0 14px; color: var(--text); } .ex-short-toggle { text-align: center; margin-top: 12px; font-size: 0.9rem; } .ex-short-toggle a { color: var(--text-light); text-decoration: underline; } .ex-short-toggle a:hover { color: var(--primary-text); } .ex-focus-toggle { margin-top: 10px; font-size: 0.85rem; padding: 6px 14px; } .mascot-speak-btn { margin-top: 8px; font-size: 0.78rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--primary-text); cursor: pointer; } .mascot-speak-btn:hover { border-color: var(--primary); } body.focus-mode-active #navbar, body.focus-mode-active #footer, body.focus-mode-active .feedback-fab { display: none !important; } body.focus-mode-active .container { max-width: 720px; } .focus-mode-exit { display: none; position: fixed; top: 12px; right: 12px; z-index: 500; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } body.focus-mode-active .focus-mode-exit:not([hidden]) { display: block; } .trend-chart-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 16px; margin-bottom: 24px; } .trend-chart-svg { width: 100%; height: auto; display: block; } .trend-chart-gridline { stroke: var(--border); stroke-width: 1; } .trend-chart-axis-label { font-size: 9px; fill: var(--text-light); } .trend-chart-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .trend-chart-dot { fill: var(--primary); stroke: var(--card-bg); stroke-width: 2; } .trend-chart-caption { font-size: 0.85rem; color: var(--text-light); margin: 10px 0 0; } .ex-image-target { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 16px; padding: 18px; width: 160px; border: 3px dashed var(--border); border-radius: var(--radius, 12px); background: var(--card-bg); transition: border-color 0.15s ease, background-color 0.15s ease; } /* Photo de vocabulaire (association-image-mot). Carrée et recadrée au centre : les photos Pexels n'ont pas toutes le même ratio, sans object-fit certaines s'étireraient. */ .ex-image-target-icon img { width: 96px; height: 96px; object-fit: cover; border-radius: calc(var(--radius, 12px) / 2); display: block; } .ex-image-target-hint { font-size: 0.8rem; color: var(--text-light); margin: 0; text-align: center; } .ex-image-target--drop-active { border-color: var(--primary); background: var(--primary-soft, rgba(30, 75, 74, 0.08)); } /* Zone de depot generique : questions a choix simple, sans trou ni image, la carte de question entiere sert de cible (voir currentDropTarget() dans exercice.js). Meme logique en deux temps que le trou de texte : un repere discret des le debut du glisser, puis un etat actif au survol precis. */ body.ex-dragging .ex-question-card { outline: 2px dashed var(--primary); outline-offset: 6px; border-radius: var(--radius); } .ex-question-card--drop-active { background: var(--primary-soft, rgba(30, 75, 74, 0.06)); } .ex-speech { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 16px; } .ex-speech-target { font-size: 1.6rem; font-weight: 700; color: var(--text); background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius, 12px); padding: 16px 24px; margin: 0; } .ex-speech-record { font-size: 1.05rem; } .ex-speech-record:disabled { opacity: 0.6; } .ex-speech-status { min-height: 1.4em; color: var(--text-light); font-style: italic; margin: 0; } .ex-speech-unsupported { color: var(--text-light); background: var(--card-bg); border: 1px dashed var(--border); border-radius: 8px; padding: 10px 14px; margin: 0; font-size: 0.9rem; } .ex-speech-privacy { font-size: 0.78rem; color: var(--text-light); max-width: 480px; margin: 4px 0 0; } .impersonation-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 10px 20px; background: rgba(248, 181, 0, 0.15); color: #6B4E00; border-bottom: 1px solid rgba(248, 181, 0, 0.4); font-size: 0.92rem; text-align: center; } .impersonation-banner form { margin: 0; } .impersonation-banner-btn { background: #6B4E00; color: #FFF9F0; border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 160ms ease-out; } .impersonation-banner-btn:hover { background: #59400a; } .impersonation-banner-btn:active { transform: scale(0.97); } /* ============================================================ DASHBOARD : action principale unique ============================================================ */ .dashboard-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 18px 0 10px; } .dashboard-continue-btn { font-size: 1.1em; padding: 14px 28px; min-height: 52px; display: inline-flex; align-items: center; } .dashboard-cta-alt { color: var(--text-light); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .dashboard-cta-alt:hover { color: var(--primary-text); } /* ============================================================ MES PROGRÈS : onglets communs carte / statistiques ============================================================ */ .progress-tabs { display: flex; gap: 8px; margin: 14px 0 4px; } .progress-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 22px; border-radius: 22px; border: 2px solid var(--border); background: var(--card-bg); color: var(--text-light); font-weight: 600; transition: border-color var(--transition), color var(--transition); } .progress-tab--active { border-color: var(--primary); background: var(--primary); color: #fff; } .progress-tab:not(.progress-tab--active):hover { border-color: var(--primary); color: var(--primary-text); } /* ============================================================ LEÇONS : catégories, mini-quiz, bouton d'entraînement ============================================================ */ .lessons-category-header { display: flex; align-items: center; gap: 14px; margin: 36px 0 16px; } .lessons-category-photo { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 4.5px var(--border); } .lessons-category-title { margin: 0; font-size: 1.15em; color: var(--primary-text); } /* Une teinte fixe par categorie (mappee a une thematique TROUBLE_THEMES dans lecons.php), coherente avec les couleurs deja utilisees sur /exercices et /programme-ete, plutot qu'une rotation par position sans rapport avec le contenu. Toutes assombries pour porter du texte blanc a >= 4.5:1. */ .lessons-grid--dyslexie .lesson-card-central { background: #1E4B4A; } .lessons-grid--dysorthographie .lesson-card-central { background: #985A2A; } .lessons-grid--dyscalculie .lesson-card-central { background: #2563EB; } .lessons-grid--dysphasie .lesson-card-central { background: #7C3AED; } .lessons-grid--attention .lesson-card-central { background: #0B766C; } .lesson-quiz { margin-top: 40px; padding: 24px; background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius); } .lesson-quiz-title { margin-bottom: 16px; } .lesson-quiz-question { font-weight: 600; margin-bottom: 12px; } .lesson-quiz-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .lesson-quiz-feedback { margin: 10px 0; } .lesson-quiz-next, .lesson-quiz-again { margin-top: 8px; } .lesson-quiz-result { font-weight: 600; margin-top: 12px; } .lesson-train { margin-top: 28px; text-align: center; } .lesson-train-hint { margin-top: 8px; color: var(--text-light); font-size: 0.9em; } .ex-lesson-link { margin: 12px auto 0; display: inline-flex; } /* ============================================================ SAISIE LIBRE : dictée au clavier ============================================================ */ .ex-typing { margin: 18px 0; } .ex-typing-label { display: block; margin-bottom: 10px; font-weight: 600; } .ex-typing-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .ex-typing-input { font-family: inherit; font-size: 1.2em; letter-spacing: 0.06em; padding: 12px 16px; min-height: 52px; min-width: min(320px, 100%); border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); } .ex-typing-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .ex-length-picker a, .ex-length-current { margin: 0 6px; display: inline-block; padding: 6px 12px; border-radius: 16px; } .ex-length-current { background: var(--primary); color: #fff; font-weight: 600; } .ex-length-picker a { border: 1px solid var(--border); } /* ============================================================ GAMIFICATION : niveau de compte, défi personnel ============================================================ */ .mascot-level { display: inline-block; margin: 4px 0; font-weight: 600; color: var(--primary-text); font-size: 0.92em; } .mascot-level-bar { margin: 6px 0 10px; max-width: 220px; } .weekly-challenge { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg-alt); border-left: 4px solid var(--accent); font-size: 0.95em; } .weekly-challenge--done { border-left-color: var(--primary); font-weight: 600; } .family-challenge { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg-alt); border-left: 4px solid var(--feat-violet, var(--primary)); font-size: 0.95em; } .family-challenge-label { font-weight: 700; margin: 0 0 6px; } .family-challenge-hint { color: var(--text-light); font-size: 0.85em; margin: 0 0 10px; } .family-challenge-code { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.12em; color: var(--primary-text); margin-bottom: 10px; } .family-challenge-regen { font-size: 0.85em; } .family-child-challenge-label { font-weight: 700; font-size: 0.85em; margin: 10px 0 6px; } .family-child-card > .family-inline-form { margin-bottom: 4px; } /* ============================================================ ESPACE FAMILLE : vue consolidée multi-enfants ============================================================ */ .family-children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; } .family-child-card { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px; } .family-child-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .family-child-name { font-weight: 700; font-size: 1.1em; } .family-child-tag { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-text); background: var(--bg-alt); padding: 2px 8px; border-radius: 10px; } .family-child-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .family-child-stats div { text-align: center; } .family-child-stats strong { display: block; font-size: 1.3em; color: var(--primary-text); } .family-child-stats span { font-size: 0.72em; color: var(--text-light); } .family-child-last { font-size: 0.85em; color: var(--text-light); margin-bottom: 12px; } .family-child-actions { display: flex; flex-wrap: wrap; gap: 14px; row-gap: 12px; align-items: center; margin-top: 14px; } .family-open-form { display: flex; gap: 8px; align-items: center; padding-left: 14px; border-left: 1px solid var(--border); } .family-pin-input { width: 70px; min-height: 44px; text-align: center; letter-spacing: 0.2em; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 6px; font-family: inherit; } .family-child-manage { margin-top: 12px; } .family-child-manage summary { cursor: pointer; color: var(--text-light); font-size: 0.9em; } .family-inline-form { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .family-inline-form label { font-size: 0.85em; display: flex; flex-direction: column; gap: 4px; } .family-inline-form input { min-height: 40px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-family: inherit; } .family-pin-reveal { background: var(--bg-alt); border-left: 4px solid var(--accent); padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; } .impersonation-banner--family { background: var(--primary); } .auth-child-login { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; } .auth-child-login summary { cursor: pointer; font-weight: 600; color: var(--primary-text); } .auth-child-login form { margin-top: 12px; } /* ============================================================ ADMIN : matrice de couverture du contenu ============================================================ */ .cov-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cov-chip { padding: 4px 10px; border-radius: 12px; font-size: 0.82em; font-weight: 600; } .cov-block { margin-bottom: 28px; } .cov-trouble-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .cov-count { font-size: 0.8em; font-weight: 500; color: var(--text-light); } .cov-warning { color: var(--accent); font-weight: 600; margin-bottom: 8px; } .cov-table th, .cov-table td { text-align: center; padding: 6px 8px; } .cov-table .cov-ex-name { text-align: left; white-space: nowrap; font-weight: 600; } .cov-band-head { border-left: 2px solid var(--border); } .cov-lv { font-size: 0.78em; color: var(--text-light); font-weight: 500; } .cov-cell { font-weight: 700; min-width: 34px; } .cov-cell--empty { background: #fde2e2; color: #a12626; } .cov-cell--thin { background: #fdf1d6; color: #8a5a00; } .cov-cell--ok { background: #e0f0e4; color: #1e6b3a; } .cov-cell--fallback { background: #ece9f5; color: #5a4a85; } .cov-total { font-weight: 800; border-left: 2px solid var(--border); } .cov-lessons { display: flex; flex-wrap: wrap; gap: 10px; } .cov-lesson-item { padding: 10px 16px; border-radius: var(--radius-sm); } .cov-lesson-item strong { font-size: 1.3em; margin-right: 6px; } /* Lisibilité en thème sombre : les fonds pâles gardent un texte foncé lisible */ :root[data-theme="dark"] .cov-cell--empty, :root[data-theme="dark"] .cov-cell--thin, :root[data-theme="dark"] .cov-cell--ok, :root[data-theme="dark"] .cov-cell--fallback { color: #14282a; } /* ============================================================ THÈME AUTOMATIQUE (body.bg-auto) : suit prefers-color-scheme. Aucune variable de couleur inline en mode auto (voir preferences_body_style), donc ces règles gagnent sans !important. Valeurs alignées sur BACKGROUND_THEMES (cream / sombre). ============================================================ */ body.bg-auto { --bg: #FFF9F0; --bg-alt: #FFF3E0; --text: #26302F; --text-light: #5A6570; --card-bg: #FFFFFF; --border: #E5E7EB; } @media (prefers-color-scheme: dark) { body.bg-auto { --bg: #14282A; --bg-alt: #0D1B1C; --text: #EDEDF5; --text-light: #9FB0AC; --card-bg: #1C3634; --border: #2E4A47; --primary-text: #6DC5C3; } body.bg-auto { --feat-teal: #64C4C2; --feat-orange: #CA9872; --feat-blue: #90A6D5; --feat-violet: #B59FDB; --feat-green: #49E9DA; --feat-pink: #D590AF; --feat-red: #D59090; --danger: #DF869C; --danger-on: #26302F; } body.bg-auto .path-node--done .path-node-icon-svg { color: #14282A; } } /* ---- Palette de fonctionnalité en thème sombre (audit du 2026-07-14) ---- Les sept teintes de rubrique sont pensées pour du blanc cassé : sur le thème sombre, les pastilles du dashboard tombaient entre 1,3:1 et 2,7:1, soit des icônes presque invisibles. Chaque teinte est reprise à l'identique (même hue) avec la luminosité remontée, et garde son rapport de saturation d'origine : le vert reste vif (78%) là où le teal reste doux (45%), sinon les deux, séparés de 4° seulement, deviendraient le même bleu-vert. Toutes tiennent au moins 4,5:1 sur les fonds réellement composés. */ body.bg-sombre { --danger: #DF869C; --danger-on: #26302F; --feat-teal: #64C4C2; --feat-orange: #CA9872; --feat-blue: #90A6D5; --feat-violet: #B59FDB; --feat-green: #49E9DA; --feat-pink: #D590AF; --feat-red: #D59090; } /* ============================================================ FIN DE SESSION : étoiles de récompense ============================================================ */ .ex-end-stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; } .ex-star { font-size: 2.4rem; line-height: 1; color: var(--border); transform: scale(0.7); } .ex-star--on { color: var(--accent); animation: ex-star-pop 0.4s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--star-i) * 0.18s + 0.1s); } @keyframes ex-star-pop { 0% { transform: scale(0.4) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ex-star--on { animation: none; transform: scale(1); } } /* Mascotte : cercle d'accueil chaleureux (dégradé doux) plutôt qu'un fond plat, pour donner au compagnon une vraie identité visuelle sans redessiner les SVG (qui restent au trait, en var(--primary)). */ .mascot-icon { background: radial-gradient(circle at 50% 35%, var(--bg-alt), var(--card-bg)); box-shadow: inset 0 0 0 2px var(--border), 0 4px 14px rgba(30, 75, 74, 0.10); border: none; } /* ============================================================ PASSE MOBILE (audit iPhone du 2026-07-14) ============================================================ Constat de départ : le catalogue /exercices faisait 22 écrans de défilement pour 38 exercices, le dashboard 4,7 écrans pour 7 raccourcis. Deux causes cumulées, aucune propre au contenu : 1. .dashboard-grid plafonne ses colonnes à 280px (correctif du 2026-07-09 contre les rangées incomplètes sur desktop). Sur un écran de 390px, la colonne unique restait à 280px et centrée : 28% de la largeur perdue en marges. 2. .def-card empile icône, titre et description à la verticale avec 32px de padding. Format juste sur une grille desktop multi-colonnes, mais une carte occupait un écran entier sur mobile. La correction ne crée pas un nouveau format : elle reprend celui que /progression utilise déjà pour l'historique (.history-item : pastille à gauche, texte à droite, ligne compacte). Les pastilles colorées par fonctionnalité, la hiérarchie et la palette restent intactes. ------------------------------------------------------------ */ @media (max-width: 560px) { /* 1. La colonne unique reprend toute la largeur disponible. Le plafond de 280px n'a de sens qu'à partir de 2 colonnes. */ .dashboard-grid, .badges-grid { grid-template-columns: 1fr; gap: 12px; } /* 2. Raccourcis et exercices en ligne. La carte "Exercices" (--featured) est exclue : elle reste en format vertical pour rester la seule carte dominante de l'écran. */ .dashboard-grid .def-card:not(.def-card--featured) { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; } .dashboard-grid .def-card:not(.def-card--featured) .def-icon { grid-column: 1; grid-row: 1 / 3; /* la pastille couvre le titre et sa description */ align-self: center; width: 48px; height: 48px; margin-bottom: 0; } .dashboard-grid .def-card:not(.def-card--featured) > *:not(.def-icon) { grid-column: 2; } .dashboard-grid .def-card:not(.def-card--featured) h3 { margin-bottom: 0; align-self: end; font-size: 1rem; } .dashboard-grid .def-card:not(.def-card--featured) p { margin-bottom: 0; align-self: start; font-size: 0.9rem; } .dashboard-grid .def-card:not(.def-card--featured) .mastery-dots { margin-top: 8px; } /* Le badge "Recommandé" est en position:absolute : au format vertical il flottait dans le vide au-dessus du titre, au format ligne il tomberait dessus. Réancré en bas à droite, seule zone libre de la ligne. */ .dashboard-grid .exercise-card .reco-badge { top: auto; bottom: 10px; right: 12px; } .dashboard-grid .exercise-card:has(.reco-badge) { padding-bottom: 34px; } /* La carte dominante garde le format vertical mais n'a plus besoin du padding d'une grille desktop. */ .def-card--featured { padding: 22px; } /* 3. Badges au même format ligne. Ils étaient centrés sur trois lignes chacun, soit les trois quarts de /progression pour une information consultée occasionnellement. */ .badge-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; text-align: left; padding: 12px 16px; } .badge-card-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; margin-bottom: 0; font-size: 1.9rem; text-align: center; } .badge-card-title { grid-column: 2; align-self: end; margin-bottom: 0; } .badge-card-desc { grid-column: 2; align-self: start; } } /* ---- Cibles tactiles (audit mobile du 2026-07-14) ---- Mesurées sous les 44x44px recommandés au doigt. Le hamburger est le plus grave : c'est la seule porte d'entrée de la navigation sur mobile et il ne faisait que 32x24. Les zones sont agrandies sans déplacer le dessin (padding + marge négative), pour ne pas décaler les mises en page existantes. */ .hamburger { padding: 14px 12px; margin: -14px -12px; } .pwa-install-dismiss { padding: 10px 12px; margin: -10px -6px -10px 0; min-width: 44px; min-height: 44px; } .a11y-btn { min-height: 44px; } .dashboard-cta-alt { display: inline-block; padding: 8px 0; } .mascot-dress-link { display: inline-block; padding: 11px 0; } /* Les liens du pied de page et du guide ("directement ici") sont inline dans une phrase : WCAG 2.5.8 les exempte, leur hauteur est contrainte par l'interligne du texte qui les porte. Les agrandir couperait le rythme des lignes sans rien gagner. */ /* Les étapes du parcours descendaient à 11,5px, sous le plancher de lisibilité qu'on s'impose ailleurs dans l'app. */ .path-node-label { font-size: 0.82rem; } /* Le lien du logo mesurait 32px de haut, la hauteur de sa vignette. La barre en fait 64 : la zone tactile monte à 44 sans toucher au dessin ni décaler la mise en page. */ .nav-logo { min-height: 44px; } /* ---- Barre de navigation et thème sombre (audit mobile 2026-07-14) ---- #navbar, .nav-dropdown et le menu mobile déplié avaient un fond blanc codé en dur dans style.css, alors que leur contenu utilise les variables du thème. En thème sombre, le résultat était un bandeau blanc dont les trois traits du hamburger (var(--text), blanc cassé) ressortaient à 1,16:1 : le seul bouton de navigation du mobile était invisible. Les liens du menu déplié, eux, tombaient à 2,26:1. Ces fonds suivent maintenant le thème. color-mix garde le voile translucide sous le flou ; la ligne au-dessus sert de repli aux navigateurs qui ne le connaissent pas. */ #navbar { background: var(--card-bg); background: color-mix(in srgb, var(--card-bg) 92%, transparent); } .nav-dropdown { background: var(--card-bg); } @media (max-width: 900px) { #navbar.menu-open .nav-links { background: var(--card-bg); } } /* ---- Bouton principal sur thème sombre (audit du 2026-07-14) ---- L'aplat teal de marque (#1E4B4A) et son ombre portée (--primary-dark, #123332) sont tous deux plus foncés que le fond de page (#14282A) : le bouton ne ressortait qu'à 1,6:1 de sa page, une forme à peine devinable. Aucune teinte d'aplat ne règle ça en gardant le texte blanc (à 3:1 du fond, le blanc dessus passe sous 4,5:1). D'où un liseré plutôt qu'un changement de fond : le bouton garde sa couleur, son texte blanc à 9,7:1 et sa géométrie (box-shadow ne pousse pas la mise en page), et se détache à 7,6:1. */ body.bg-sombre .btn-primary, body.bg-sombre .btn-primary:hover { box-shadow: 0 0 0 2px var(--primary-text), 0 4px 0 var(--primary-dark); } body.bg-sombre .btn-primary:active { box-shadow: 0 0 0 2px var(--primary-text); } @media (prefers-color-scheme: dark) { body.bg-auto .btn-primary, body.bg-auto .btn-primary:hover { box-shadow: 0 0 0 2px var(--primary-text), 0 4px 0 var(--primary-dark); } body.bg-auto .btn-primary:active { box-shadow: 0 0 0 2px var(--primary-text); } } /* ---- Fiches imprimables facon cahier de vacances (voir fiche.php) ---- Vraie mise en page papier (bandeau de couleur par theme, logo, mode d'emploi, activites numerotees), pas un export de l'ecran : la version precedente reutilisait tel quel le composant .mindmap de /lecon, ce qui donnait exactement l'effet "capture d'ecran" reproche. --fiche-color est pose en inline sur .fiche-preview (voir fiche.php), une couleur par theme (TROUBLE_PRINT_COLORS, _lib/troubles.php), coherente avec /lecons et /programme-ete. */ .fiche-preview { display: flex; flex-direction: column; gap: 32px; align-items: center; margin: 24px 0; } .fiche-page { width: 100%; max-width: 720px; background: #FFFFFF; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; color: #26302F; } .fiche-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; background: var(--fiche-color, #1E4B4A); color: #FFFFFF; } .fiche-band--verso { background: #26302F; } .fiche-band-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; } .fiche-band-logo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .fiche-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; background: rgba(255,255,255,0.08); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .fiche-content { padding: 32px 36px; } .fiche-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fiche-color, #1E4B4A); margin: 0 0 6px; } .fiche-title { font-size: 1.7rem; margin: 0 0 24px; color: #14282A; } .fiche-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; padding: 18px; background: #FFF9F0; border-radius: var(--radius-sm); } .fiche-howto-step { display: flex; align-items: flex-start; gap: 10px; } .fiche-howto-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--fiche-color, #1E4B4A); color: #FFFFFF; font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; } .fiche-howto-step p { margin: 0; font-size: 0.85rem; line-height: 1.4; } .fiche-section-title { font-size: 1.15rem; margin: 32px 0 6px; color: #14282A; } .fiche-section-hint { font-size: 0.85rem; color: #6B7280; margin: 0 0 16px; } .fiche-rules { display: flex; flex-direction: column; gap: 14px; } .fiche-rule-card { padding: 14px 18px; border-left: 4px solid var(--fiche-color, #1E4B4A); background: #FAFAFA; border-radius: 0 8px 8px 0; } .fiche-rule-card h4 { margin: 0 0 6px; font-size: 1rem; color: #14282A; } .fiche-rule-text { margin: 0 0 6px; font-weight: 600; font-size: 0.92rem; } .fiche-rule-example { margin: 0; font-size: 0.85rem; color: #6B7280; white-space: pre-line; } .fiche-quiz-card { display: flex; gap: 14px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px dashed #E5E7EB; } .fiche-quiz-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--fiche-color, #1E4B4A); color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fiche-quiz-num--verso { background: #26302F; } .fiche-quiz-body { flex: 1; } .fiche-quiz-q { margin: 2px 0 12px; font-weight: 600; } .fiche-quiz-choices { display: flex; flex-wrap: wrap; gap: 10px 18px; } .fiche-choice-box { padding: 6px 16px; border: 2px solid #D9D3C7; border-radius: 999px; font-size: 0.9rem; } .fiche-answer-card { display: flex; gap: 14px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid #E5E7EB; } .fiche-answer-q { margin: 2px 0 6px; color: #6B7280; font-size: 0.88rem; } .fiche-answer { margin: 0 0 4px; color: var(--fiche-color, #1E4B4A); font-weight: 700; } .fiche-explication { margin: 0; font-size: 0.85rem; color: #6B7280; } .fiche-closing { margin-top: 28px; padding: 16px 20px; background: #FFF9F0; border-radius: var(--radius-sm); font-size: 0.92rem; } .fiche-footer-band { padding: 12px 28px; background: #FAFAFA; border-top: 1px solid var(--border); font-size: 0.75rem; color: #5C5C5C; text-align: center; } .fiche-footer-band--verso { background: #F3F1EC; } @media print { * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } .fiche-preview { gap: 0; margin: 0; } .fiche-page { max-width: none; border: none; box-shadow: none; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; } .fiche-page--verso { page-break-before: always; } .fiche-content { flex: 1; padding: 40px 48px; } .fiche-quiz-card, .fiche-answer-card, .fiche-rule-card { break-inside: avoid; } .fiche-choice-box { border-color: #C4BCA8; } } /* ---- Kit de révision brevet (voir brevet.php) ---- */ .brevet-summary { margin: 8px 0 24px; padding: 12px 18px; background: var(--bg-alt); border-radius: var(--radius); font-weight: 600; color: var(--primary-text); } .brevet-card { align-items: flex-start; text-align: left; gap: 10px; } .brevet-check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; } .brevet-check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); } .brevet-check-title { line-height: 1.4; } .brevet-card-links { font-size: 0.9rem; color: var(--text-light); margin: 0; } .brevet-card-links a { text-decoration: underline; text-underline-offset: 2px; } /* ---- Programme d'été (voir programme-ete.php) ---- */ .ete-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 8px; } .ete-week { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); } .ete-week-desc { margin: 0; font-size: 0.9rem; color: var(--text-light); } /* ---- Suivi des recommandations (voir progression.php) ---- */ .reco-history { display: flex; flex-direction: column; gap: 16px; } .reco-history-day { padding: 14px 18px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); } .reco-history-date { font-weight: 700; margin: 0 0 8px; color: var(--primary-text); } .reco-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .reco-history-item { color: var(--text-light); } .reco-history-item--done { color: var(--primary-text); font-weight: 600; } /* ---- Administration : bandeau de statistiques (voir admin.php) ---- */ .admin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .admin-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; } .admin-stat-card--online { background: rgba(30,75,74,0.06); border-color: var(--primary); } .admin-stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--primary-text); line-height: 1; } .admin-stat-label { display: block; color: var(--text-light); font-size: 0.85rem; margin-top: 4px; } .admin-stat-detail { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .admin-online-pill { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #FFFFFF; } /* ---- Administration : réponse aux avis ---- */ .admin-feedback-replies { margin: 10px 0; padding: 10px 14px; background: rgba(30,75,74,0.06); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; } .admin-feedback-reply { margin: 0; font-size: 0.92rem; } .admin-feedback-reply-toggle summary { cursor: pointer; color: var(--primary-text); font-weight: 600; font-size: 0.9rem; margin-top: 8px; } .admin-feedback-reply-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 480px; } .admin-feedback-reply-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.92rem; resize: vertical; } .btn-sm { padding: 6px 16px; font-size: 0.85rem; align-self: flex-start; } /* ---- Popup de réponse à un avis (voir index.php) ---- */ .reply-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .reply-modal-content { background: var(--card-bg); border: 1px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 32px; max-width: 440px; width: 100%; } .reply-banner-title { font-weight: 700; color: var(--primary-text); margin: 0 0 6px; } .reply-banner-original { font-size: 0.85rem; color: var(--text-light); margin: 0 0 6px; font-style: italic; } .reply-banner-message { margin: 0 0 20px; } .reply-modal-close { width: 100%; } /* ---- Administration : graphique de connexions 24h ---- */ .admin-login-chart { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; margin-bottom: 24px; overflow-x: auto; } .admin-login-chart h3 { margin: 0 0 16px; } .admin-login-chart-bars { display: flex; align-items: flex-end; gap: 4px; min-width: 640px; height: 140px; } .admin-login-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .admin-login-chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; } .admin-login-chart-bar { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 0; transition: height 0.2s ease; } .admin-login-chart-count { font-size: 0.7rem; font-weight: 700; color: var(--primary-text); } .admin-login-chart-label { font-size: 0.65rem; color: var(--text-light); } /* ---- Bandeau de présentation du site cerveau-singulier.fr (voir index.php) ---- */ .site-promo-banner { display: flex; align-items: center; min-height: 200px; margin-top: 32px; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); background-image: linear-gradient(120deg, rgba(20,40,42,0.88) 0%, rgba(20,40,42,0.55) 45%, rgba(20,40,42,0.15) 100%), url('/cerveau-singulier.webp'); background-size: cover; background-position: center; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .site-promo-banner:hover { border-color: var(--primary); } .site-promo-banner:active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); } .site-promo-body { padding: 32px 40px; max-width: 560px; } .site-promo-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; background: rgba(255,255,255,0.18); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; } .site-promo-body h3 { color: #FFFFFF; font-size: 1.6rem; margin-bottom: 8px; } .site-promo-body p { color: rgba(255,255,255,0.9); margin-bottom: 16px; } .site-promo-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #FFFFFF; } .site-promo-cta svg { width: 18px; height: 18px; } @media (max-width: 640px) { .site-promo-banner { min-height: 160px; } .site-promo-body { padding: 24px; } } /* ---- Tableau de bord plus vivant (voir index.php, dashboard.js) ---- */ .mascot-card { position: relative; } /* Respiration douce continue de la mascotte sur le dashboard, distincte des réactions ponctuelles ex-mascot--happy/--oops (celles-ci restent des sursauts courts déclenchés par une action, pas un mouvement permanent). */ .mascot-icon { animation: dash-mascot-idle 3.2s ease-in-out infinite; } @keyframes dash-mascot-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .mascot-icon { animation: none; } } /* Défi perso : deux barres comparatives plutôt qu'une phrase seule. */ .weekly-challenge-label { margin: 0 0 10px; } .challenge-compare { display: flex; flex-direction: column; gap: 8px; } .challenge-compare-row { display: flex; align-items: center; gap: 10px; } .challenge-compare-label { flex: 0 0 110px; font-size: 0.82rem; color: var(--text-light); } .challenge-compare-row .progress-bar-track--sm { flex: 1; margin: 0; } .challenge-compare-value { flex: 0 0 24px; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--primary-text); } .progress-bar-fill--muted { background: var(--border); box-shadow: none; } /* Flamme de série active : léger pulse pour donner envie de ne pas la casser. */ .streak-pill { display: inline-block; animation: dash-streak-pulse 2s ease-in-out infinite; } @keyframes dash-streak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .streak-pill { animation: none; } } /* Micro-interaction sur les raccourcis du dashboard uniquement (pas les .def-card des autres pages, qui gardent le hover générique du site). */ .dashboard-grid .def-card .def-icon { transition: transform 0.18s ease; } .dashboard-grid .def-card:hover .def-icon { transform: scale(1.1) rotate(-4deg); } @media (prefers-reduced-motion: reduce) { .dashboard-grid .def-card .def-icon { transition: none; } .dashboard-grid .def-card:hover .def-icon { transform: none; } }