/* Extrait de teacher-dashboard.html. Ordre historique : 2. */ /* ══════════════════════════════════════════════════════════════════════════ ORDRE DE LA PILE DE POLICES — corrigé le 01/09/2026 LES POLICES D'ÉMOJIS DOIVENT VENIR EN DERNIER, APRÈS sans-serif. Elles étaient placées juste après 'Inter', donc AVANT toute police de texte de repli. Tant qu'Inter se charge, rien ne paraît. Mais Inter vient de Google Fonts, par une requête réseau qui peut échouer — proxy d'établissement, filtrage, poste hors ligne. Le navigateur descend alors la liste et tombe sur les polices d'émojis, qui contiennent les CHIFFRES (les bases des émojis clavier 0️⃣ à 9️⃣). Deux conséquences, toutes deux constatées au banc : · une police d'émojis EN COULEUR peint ses propres pixels et ignore `color`. Les chiffres sortaient en gris quelle que soit la règle CSS — mesuré : rgb(111,111,111) au lieu de la teinte demandée, y compris avec !important. On cherche le défaut dans la cascade ; il n'y est pas ; · ces glyphes sont carrés et larges : « 01 sept. 2026 » s'étalait en « 0 1 sept. 2 0 2 6 », et un libellé mesuré passait de 335 px à 481 px, soit 43 % de plus. C'est l'espacement irrégulier visible sur les captures d'écran. La pile de Tailwind, dans ce même dossier, a toujours eu le bon ordre : ui-sans-serif, system-ui, sans-serif, PUIS les émojis. On s'aligne. Les émojis restent parfaitement rendus : ils ne sont demandés que pour les caractères qu'aucune police de texte ne fournit. ══════════════════════════════════════════════════════════════════════════ */ * { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla'; margin: 0; padding: 0; box-sizing: border-box; } /* ✅ FIX GLOBAL EMOJI — tous les boutons/spans avec emojis Même ordre que la règle universelle ci-dessus : émojis en dernier. */ button, .ribbon-tab, .ribbon-tool, [id^="tpProBtn-"], .tpProView-content button, .tab-btn, .nav-btn { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla' !important; } /* ========== BOUTONS EDT MODERNES ========== */ .edt-btn { position: relative !important; padding: 12px 8px !important; border: 2px solid #e5e7eb !important; border-radius: 8px !important; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important; cursor: pointer !important; transition: all 0.3s ease !important; font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; text-align: center !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; } .edt-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; border-color: #60a5fa !important; } .edt-btn.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; border-color: #2563eb !important; color: white !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important; } .edt-btn.active::before { content: '✓' !important; position: absolute !important; top: 4px !important; right: 4px !important; font-size: 10px !important; font-weight: bold !important; background: #10b981 !important; color: white !important; border-radius: 50% !important; width: 16px !important; height: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .edt-btn:active { transform: translateY(0) !important; } .edt-btn .time { display: block !important; } .edt-morning.active { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border-color: #d97706 !important; } .edt-afternoon.active { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; border-color: #7c3aed !important; } /* CSS d'impression pour préserver les couleurs */ @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } @page { margin: 0; } } /* CSS de base (fusionné) */ :root { --primary: #7c3aed; --secondary: #06b6d4; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --bg-main: linear-gradient(135deg, #0f0e17 0%, #1a0033 100%); --bg-card: rgba(26, 24, 37, 0.9); --bg-card-hover: rgba(37, 35, 54, 0.9); --glass-bg: rgba(255, 255, 255, 0.1); --text-primary: #fffffe; --text-secondary: #a7a9be; --border: #2e2b41; --shadow: rgba(124, 58, 237, 0.3); --transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); --border-radius: 16px; } body { background: var(--bg-main); color: var(--text-primary); min-height: 100vh; padding: 20px; overflow-x: hidden; max-width: 100vw; } /* 🛡️ Protection contre l'affichage de code textuel */ body > script:not([type]), body > script[type="text/javascript"]:not([src]) { display: none !important; visibility: hidden !important; } /* ══════════════════════════════════════════════════════════════════ 02/09/2026 — 18 HABILLAGES SUPPRIMÉS : ILS NE S'APPLIQUAIENT JAMAIS Ce fichier portait les mêmes thèmes pop culture que le tableau élève (Marvel, Roblox, Zelda, Naruto…). Ils étaient inatteignables : le seul code qui pose une classe « theme-… » côté professeur lit localStorage.selectedTheme (dashboard/runtime.js), et RIEN côté professeur ne l'écrit — seul l'élève l'écrit, depuis sa boutique. Le panneau de paramètres partagé se contente d'AFFICHER le nom du thème actif ; il n'en propose aucun. Deux cents lignes maintenues pour rien, et une divergence de nom en prime : le professeur écrivait « theme-strangerthings » là où l'élève écrit « theme-stranger ». Les thèmes vivent donc désormais à un seul endroit, public/apps/student/core/dashboard.css, où ils sont vendus et appliqués. Si le professeur doit un jour choisir un habillage, il faudra un sélecteur ET ces règles — pas ces règles seules. ══════════════════════════════════════════════════════════════════ */ /* ========== MODES ACCESSIBILITÉ ========== */ /* 🛡️ PROTECTION LISIBILITÉ - FORCE LES CONTRASTES CRITIQUES */ /* Ces règles garantissent la lisibilité même avec des thèmes extrêmes */ /* EXCEPTION : Le header garde le style du thème */ header, header * { /* Le header peut garder les couleurs du thème */ } /* ══════════════════════════════════════════════════════════════════════════ 🔴 ALIGNEMENT DES ONGLETS — correction du 17/08/2026 SYMPTÔME : certains onglets (Simulateur, Progression, Professeur principal, Projets & Tâches) s'étalaient sur toute la largeur de l'écran au lieu de rester dans l'axe de l'en-tête. En dézoomant, l'écart devenait flagrant : ces onglets continuaient de s'élargir alors que le reste de la page restait centré. CAUSE : le conteneur principal du tableau de bord
ouvre ligne 124 de teacher-dashboard.html et se ferme ligne 5804. Or ces quatre onglets sont déclarés APRÈS cette fermeture, donc à la racine du document : rien ne limitait plus leur largeur. Les dix autres onglets, eux, sont bien à l'intérieur — d'où deux mises en page différentes selon l'onglet ouvert. CORRECTION : on donne à tout « .tab-content » la même enveloppe que le conteneur principal. Les onglets déjà à l'intérieur ne changent pas (ils sont déjà contraints à 1400 px) ; les quatre orphelins s'alignent enfin. Corriger par la CSS plutôt qu'en déplaçant un millier de lignes de HTML évite tout risque de casser une structure imbriquée. ══════════════════════════════════════════════════════════════════════════ */ .tab-content { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } /* Cartes de statistiques - texte TOUJOURS sombre sur fond clair */ .stat-card, .glass { background: rgba(255, 255, 255, 0.95) !important; color: #1a202c !important; } /* ══════════════════════════════════════════════════════════════════ 🔴 CORRECTION LISIBILITÉ — 17/08/2026 : TEXTE BLANC SUR FOND BLANC La règle ci-dessus force un fond blanc sur toute carte « .glass », et son « !important » écrase même un dégradé écrit en style inline. Plusieurs cartes avaient été conçues à l'inverse : fond coloré foncé + texte en classe Tailwind « .text-white ». Leur fond devenant blanc, leur texte restait blanc → INVISIBLE. C'est ce qui rendait illisibles « Gestion des Accès » et plusieurs libellés de boutons. Puisque le fond est désormais blanc dans tous les cas, tout texte qui se déclarait blanc doit passer en sombre. On exclut les cartes réellement exemptées (calendrier annuel), qui gardent leur fond coloré et donc leur texte clair. ══════════════════════════════════════════════════════════════════ */ .glass:not([data-progression-card]) .text-white, .glass:not([data-progression-card]) .text-white *, .glass:not([data-progression-card]) [class*="text-white"] { color: #1a202c !important; text-shadow: none !important; } /* Les boutons de ces cartes avaient un fond blanc translucide sur dégradé : sur fond blanc ils disparaissaient. On leur redonne un contour et un fond lisibles. */ .glass:not([data-progression-card]) button.text-white, .glass:not([data-progression-card]) button .text-white { color: #1a202c !important; } .glass:not([data-progression-card]) button[class*="bg-white"][class*="bg-opacity"] { background: #eef2ff !important; border-color: #4f46e5 !important; color: #1a202c !important; } /* « opacity-90 » sur du texte devenu sombre le rendait délavé. */ .glass:not([data-progression-card]) .opacity-90 { opacity: 1 !important; } /* Exemption : cartes du calendrier annuel conservent leurs fonds colorés */ .glass[data-progression-card] { background: var(--prog-bg, rgba(255,255,255,0.95)) !important; color: var(--prog-color, #1a202c) !important; } .glass[data-progression-card] strong { color: var(--prog-text, #1a202c) !important; } .glass[data-progression-card] span { color: var(--prog-span, var(--text-secondary)) !important; } .glass[data-progression-card] div { color: var(--prog-div, var(--text-secondary)) !important; } .stat-card p, .stat-card span, .glass p, .glass span, .glass h1, .glass h2, .glass h3, .glass h4, .glass label { color: #1a202c !important; } /* Chiffres des statistiques - NOIR pour maximum contraste */ .stat-card .text-4xl, #totalStudents, #totalClasses, #totalTP, #totalPaquetsTop, #totalQuestions, #globalSuccessRate { color: #000000 !important; font-weight: 700 !important; } /* Inputs et formulaires - fond blanc, texte noir */ .input-modern, input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select { background: #ffffff !important; color: #1a202c !important; border: 2px solid #cbd5e0 !important; } .input-modern::placeholder, textarea::placeholder { color: #718096 !important; opacity: 0.8 !important; } /* Tableaux - fond blanc, texte noir */ .modern-table, .modern-table td, .modern-table th { background: #ffffff !important; color: #1a202c !important; } .modern-table thead th { background: #f7fafc !important; color: #2d3748 !important; font-weight: 700 !important; } /* Cartes de classes et paquets - fond blanc */ #classesList > div, .paquet-card, .question-card { background: rgba(255, 255, 255, 0.98) !important; color: #1a202c !important; } /* Titres et labels - toujours lisibles */ h1, h2, h3, h4, h5, h6 { color: #1a202c !important; } .text-gray-800, .text-gray-700, .text-gray-600 { color: #2d3748 !important; } /* Zones d'import et zones spéciales - fond clair garanti */ /* 20/09/2026 — :not(button) AJOUTÉ. .bg-gradient-to-r est l'utilitaire de dégradé : 19 div l'emploient pour leurs zones d'import — ce que cette règle vise — mais 8 BOUTONS l'emploient aussi pour leur fond coloré, et tous portent text-white. Le fond leur était repeint en blanc ici, pendant que la règle balai des boutons (plus bas, chaîne de :not() donc plus spécifique) leur imposait color:#ffffff !important. Fond blanc, texte blanc : « Valider l'import », « Réinitialiser les filtres », « Générer le planning » et cinq autres n'existaient plus à l'écran qu'au survol de la souris. Les div gardent leur fond clair ; les boutons gardent leur dégradé. */ .bg-gradient-to-r:not(button), .bg-blue-50, .bg-green-50, .bg-yellow-50, .bg-purple-50 { background: rgba(255, 255, 255, 0.95) !important; color: #1a202c !important; } /* Texte dans le contenu principal - toujours lisible */ /* 31/08/2026 — même porte que pour les boutons (voir plus bas) : un élément qui porte data-couleurs peint son texte lui-même. Sans elle, les pastilles de semaine de « Matières » (.mat-sem, blanches sur un aplat de couleur) repassaient en gris ardoise : 2,32:1 sur le bleu #2563eb. Le texte du bandeau violet de ce même onglet tombait à 1,03:1. */ .tab-content p:not([data-couleurs]), .tab-content li:not([data-couleurs]), .tab-content span:not(.badge):not(.gradient-btn *):not([data-couleurs]):not(#tpProList button) { color: #2d3748 !important; } /* Badges et étiquettes colorées - gardent leur style */ .badge, .px-3.py-1.rounded-full, [class*="bg-purple-100"], [class*="bg-blue-100"], [class*="bg-green-100"], [class*="bg-red-100"], [class*="bg-yellow-100"] { /* Les badges gardent leurs couleurs d'origine */ } /* Boutons - gardent leurs couleurs mais texte blanc garanti */ /* ✅ FIX DÉFINITIF — exclusions ajoutées pour ribbon-tool (fond blanc) et boutons sans fond */ .gradient-btn, /* 18/08/2026 — Les boutons du panneau « Paramètres » sont ajoutés à la liste d'exceptions ci-dessous. Sans cela, la règle balai leur imposait « color: #ffffff !important » : les entrées « Identité », « Affichage » et « Compte » s'affichaient en blanc sur gris clair, et deux boutons paraissaient vides. Ce n'est pas un contournement : cette liste EST le mécanisme d'exception prévu par la règle. */ /* 30/08/2026 — quatre exclusions ajoutées pour l'onglet Référentiel : .chip (les niveaux et le « comparer avec »), .cellbtn (les cases de la carte), .aide, et .vg-b (les boutons de la visite guidée, que le script attache à , donc hors de #refCroisement). Même symptôme que pour les boutons « Paramètres » décrit au-dessus : texte blanc sur fond clair, boutons qui paraissent vides tant qu'on ne les a pas cliqués — une fois pressés le fond devient sombre et le blanc redevient lisible. C'est ce qui rendait toute la vue Référentiel illisible. Le fond du problème reste entier : cette règle repeint en blanc tout bouton qui n'a pas pensé à s'inscrire ici, et rien ne prévient l'auteur d'un nouveau composant. Le correctif durable est de la supprimer et de colorer les boutons là où ils sont définis — un chantier à mener à froid, en repassant sur chaque famille de boutons du tableau de bord. */ /* 31/08/2026 — UNE ÉCHAPPATOIRE GÉNÉRALE, PLUTÔT QU'UNE 21e EXCEPTION La liste ci-dessous a été allongée quatre fois (Paramètres, ruban, Référentiel…) et le commentaire au-dessus disait déjà pourquoi : « cette règle repeint en blanc tout bouton qui n'a pas pensé à s'inscrire ici, et rien ne prévient l'auteur d'un nouveau composant ». L'onglet « Matières » l'a vérifié : ses boutons « Ouverte », « Fermée », « Faite », « Supprimer », « Simuler un TP » s'affichaient en BLANC SUR BLANC — invisibles tant qu'on ne les surlignait pas à la souris. Mesuré : de 1,00:1 à 1,10:1, quand le minimum lisible est 4,5:1. Plutôt qu'ajouter sept classes de plus, on ouvre UNE porte, valable pour tous les composants à venir : un bouton qui porte l'attribut data-couleurs (n'importe quelle valeur ; « maison » par convention) déclare qu'il gère lui-même sa couleur, et le balai le laisse tranquille. Même mécanisme que les :not() existants, mais il n'oblige plus à revenir modifier CETTE feuille à chaque écran. :not([data-couleurs]) est un sélecteur de niveau 3 : aucun navigateur ne le refuse, la règle ne peut donc pas être invalidée dans son ensemble. Contrôle : scripts/test-lisibilite-matieres.js. 24/09/2026 — les boutons créés en JavaScript avec « background:#fff » échappaient aux exceptions [style*='background:#fff'] : le navigateur réécrit l'attribut en « background: rgb(255, 255, 255) ». Les deux formes réécrites sont maintenant exclues aussi. */ button:not(.prm-roue):not(.prm-fermer):not(.prm-menu-btn):not(.prm-bouton):not(.prm-pastille):not(.domain-chip):not(.analytics-tab-btn):not(.amgr-action-btn):not(.amgr-btn-add):not(.amgr-btn-mass):not(.amgr-view-switch button):not(.amgr-cancel-btn):not(.amgr-deadline-edit .cancel):not(.tab-btn):not(#amgrRefreshBtn):not(.amgr-apply-btn):not(.amgr-group-header button):not(.ribbon-tool):not(.ribbon-tab):not(.modal-close-btn):not(.filter-prof-btn):not(.chip):not(.cellbtn):not(.aide):not(.vg-b):not([style*='background:white']):not([style*='background: white']):not([style*='background:#fff']):not([style*='background: #fff']):not([style*='background:transparent']):not([style*='background: transparent']):not([style*='background: rgb(255, 255, 255)']):not([style*='background-color: rgb(255, 255, 255)']):not([data-couleurs]):not(#tpProList button) { color: #ffffff !important; font-weight: 600 !important; } /* ✅ FIX RIBBON — boutons de la toolbar éditeur TP (fond blanc → texte sombre) */ .ribbon-tool { color: #0f172a !important; font-weight: 700 !important; } .ribbon-tool.special { color: #ffffff !important; } /* ✅ FIX RIBBON TABS — onglets du ruban éditeur */ .ribbon-tab { color: #1e293b !important; font-weight: 700 !important; } .ribbon-tab.active { color: #1e40af !important; font-weight: 800 !important; } /* ✅ FIX DÉFINITIF NAV TP PRO ══════════════════════════════════ Les boutons de nav ont des fonds gradient → texte BLANC obligatoire On utilise des sélecteurs ID (haute spécificité) pour battre les règles génériques ═════════════════════════════════════════════════════════════════ */ #tpProBtn-bibliotheque { background:linear-gradient(135deg,#6366f1,#4f46e5) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-editeur { background:linear-gradient(135deg,#fb923c,#f97316) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-rotation { background:linear-gradient(135deg,#60a5fa,#3b82f6) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-a-corriger { background:linear-gradient(135deg,#f87171,#ef4444) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-timer { background:linear-gradient(135deg,#4ade80,#14b8a6) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-analytics { background:linear-gradient(135deg,#f472b6,#ec4899) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } #tpProBtn-supervision { background:linear-gradient(135deg,#2dd4bf,#06b6d4) !important; color:#ffffff !important; border:none !important; border-radius:10px !important; padding:10px 18px !important; font-weight:600 !important; cursor:pointer !important; } /* ✅ FIX BOUTONS FOND BLANC — tout bouton avec classe bg-white ou sans fond coloré */ button.bg-white, button[style*="background:white"], button[style*="background: white"], button[style*="background:#fff"], button[style*="background: #fff"] { color: #374151 !important; } /* Exceptions boutons gestionnaire d'assignations */ .amgr-action-btn.edit { color: #1d4ed8 !important; background: transparent !important; border: 1px solid #93c5fd !important; } .amgr-action-btn.del { color: #dc2626 !important; background: transparent !important; border: 1px solid #fca5a5 !important; } .amgr-action-btn.report { color: #1d4ed8 !important; background: #dbeafe !important; border: 1px solid #93c5fd !important; } .amgr-btn-add { color: #ffffff !important; background: #16a34a !important; } .amgr-btn-mass { color: #1d4ed8 !important; background: transparent !important; border: 1px solid #1d4ed8 !important; } .amgr-view-switch button { color: #374151 !important; background: transparent !important; font-weight: 600 !important; } .amgr-view-switch button.active { color: #ffffff !important; background: #1d4ed8 !important; } .amgr-cancel-btn { color: #374151 !important; background: transparent !important; border: 1px solid #d1d5db !important; } .amgr-apply-btn { color: #ffffff !important; background: #1d4ed8 !important; } .amgr-deadline-edit .ok { color: #ffffff !important; background: #1d4ed8 !important; } .amgr-deadline-edit .cancel { color: #374151 !important; background: #e5e7eb !important; } #amgrRefreshBtn { color: #374151 !important; background: transparent !important; border: 1px solid #d1d5db !important; font-weight: 500 !important; } /* Onglets Questions & Exercices — tab-btn + tab-active */ .tab-btn { color: #374151 !important; background: transparent !important; font-weight: 600 !important; } .tab-btn:not(.tab-active):not(.active) { color: #374151 !important; } .tab-btn.tab-active { color: #1f2937 !important; font-weight: 700 !important; border-bottom: 3px solid #3b82f6 !important; background: transparent !important; } .tab-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #667eea, #764ba2) !important; } /* Texte dans la carte gestionnaire */ .amgr-group-name { color: #1f2937 !important; } .amgr-table td { color: #374151 !important; } .amgr-table th { color: #9ca3af !important; } .amgr-meta { color: #6b7280 !important; } .amgr-header h3 { color: #111827 !important; } .amgr-badge.blue { color: #1e3a8a !important; } .amgr-badge.green { color: #14532d !important; } .amgr-badge.orange{ color: #78350f !important; } .amgr-badge.red { color: #7f1d1d !important; } .amgr-status.assigned { color: #3730a3 !important; } .amgr-status.completed { color: #14532d !important; } .amgr-status.late { color: #78350f !important; } .amgr-deadline-late { color: #dc2626 !important; } /* Toolbar selects */ .amgr-toolbar select { color: #374151 !important; background: #ffffff !important; } /* Carte bouton ouvrir gestionnaire */ .from-blue-50 h3, .from-blue-50 p { color: #1e3a8a !important; } /* Exception pour les boutons clairs */ button.bg-gray-400, button.bg-gray-500 { color: #ffffff !important; } /* Onglets - fond transparent quand inactifs, texte foncé lisible */ .tab-btn:not(.active):not(.tab-active) { background: transparent !important; color: #374151 !important; } .tab-btn.active { color: #ffffff !important; } /* Messages et notifications - contrastes maximaux */ .notification { background: #ffffff !important; color: #1a202c !important; border: 2px solid #cbd5e0 !important; } /* Modaux - fond blanc */ .modal-content { background: #ffffff !important; color: #1a202c !important; } /* Bouton de fermeture des modals - Style uniforme */ .modal-close-btn { background: #ef4444; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); transition: all 0.2s; flex-shrink: 0; } .modal-close-btn:hover { background: #dc2626; transform: scale(1.05); } body.accessibility-dyslexia { font-family: 'OpenDyslexic', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important; font-size: 12pt !important; letter-spacing: 0.12em; word-spacing: 0.16em; line-height: 2 !important; } body.accessibility-dyslexia * { font-family: 'OpenDyslexic', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important; } body.accessibility-contrast { --text-primary: #ffffff !important; --text-secondary: #ffff00 !important; --bg-card: #000000 !important; --bg-card-hover: #1a1a1a !important; --glass-bg: #000000 !important; --border: #ffffff !important; } /* ⚠️ MODE CONTRASTE - Surcharger TOUS les backgrounds blancs fixes */ body.accessibility-contrast .stat-card, body.accessibility-contrast .glass, body.accessibility-contrast .input-modern, body.accessibility-contrast input[type="text"], body.accessibility-contrast input[type="email"], body.accessibility-contrast input[type="number"], body.accessibility-contrast input[type="password"], body.accessibility-contrast textarea, body.accessibility-contrast select, body.accessibility-contrast .modern-table, body.accessibility-contrast .modern-table td, body.accessibility-contrast .modern-table th, body.accessibility-contrast .modern-table thead th, body.accessibility-contrast #classesList > div, body.accessibility-contrast .paquet-card, body.accessibility-contrast .question-card { background: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } body.accessibility-contrast .stat-card p, body.accessibility-contrast .stat-card span, body.accessibility-contrast .glass p, body.accessibility-contrast .glass span, body.accessibility-contrast .glass h1, body.accessibility-contrast .glass h2, body.accessibility-contrast .glass h3, body.accessibility-contrast .glass h4, body.accessibility-contrast .glass label, body.accessibility-contrast h1, body.accessibility-contrast h2, body.accessibility-contrast h3, body.accessibility-contrast h4, body.accessibility-contrast h5, body.accessibility-contrast h6, body.accessibility-contrast label { color: #ffffff !important; } body.accessibility-contrast .stat-card .text-4xl, body.accessibility-contrast #totalStudents, body.accessibility-contrast #totalClasses, body.accessibility-contrast #totalTP, body.accessibility-contrast #totalPaquetsTop, body.accessibility-contrast #totalQuestions, body.accessibility-contrast #globalSuccessRate { color: #ffff00 !important; font-weight: 700 !important; } body.accessibility-large-text { font-size: 120% !important; } body.accessibility-reduced-motion * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Glass morphism (Styles originaux) */ .glass { background: var(--glass-bg); backdrop-filter: blur(20px); border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid var(--border); color: var(--text-primary); /* Assure que le texte utilise la var */ } /* Boutons gradient (Styles originaux) */ /* ========== 🎨 SYSTÈME DE BOUTONS ULTRA-PROFESSIONNEL ========== */ /* Bouton gradient principal avec effet de brillance */ .gradient-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } /* Effet de brillance qui glisse au survol */ .gradient-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .gradient-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5); } .gradient-btn:hover::before { left: 100%; } .gradient-btn:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } .gradient-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Boutons génériques - Style unifié avec effets */ button { transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; } button:not(.gradient-btn):not(.tab-btn):not(.modal-close-btn):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); filter: brightness(1.1); } button:not(.gradient-btn):not(.tab-btn):not(.modal-close-btn):active { transform: translateY(0); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* Boutons colorés spécifiques - Effets personnalisés */ /* Bouton VERT (succès, validation) */ button[style*="background:#10b981"], button[style*="background: #10b981"], button[class*="bg-green"], .btn-success { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } button[style*="background:#10b981"]:hover, button[style*="background: #10b981"]:hover, button[class*="bg-green"]:hover, .btn-success:hover { background: #059669 !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Bouton ROUGE (danger, suppression) */ button[style*="background:#ef4444"], button[style*="background: #ef4444"], button[class*="bg-red"], .btn-danger { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } button[style*="background:#ef4444"]:hover, button[style*="background: #ef4444"]:hover, button[class*="bg-red"]:hover, .btn-danger:hover { background: #dc2626 !important; box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Bouton BLEU (info, actions principales) */ button[style*="background:#3b82f6"], button[style*="background: #3b82f6"], button[class*="bg-blue"], .btn-primary { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } button[style*="background:#3b82f6"]:hover, button[style*="background: #3b82f6"]:hover, button[class*="bg-blue"]:hover, .btn-primary:hover { background: #2563eb !important; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Bouton ORANGE/JAUNE (warning, attention) */ button[style*="background:#f59e0b"], button[style*="background: #f59e0b"], button[class*="bg-yellow"], button[class*="bg-orange"], .btn-warning { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } button[style*="background:#f59e0b"]:hover, button[style*="background: #f59e0b"]:hover, button[class*="bg-yellow"]:hover, button[class*="bg-orange"]:hover, .btn-warning:hover { background: #d97706 !important; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Bouton VIOLET/PURPLE */ button[style*="background:#8b5cf6"], button[style*="background: #8b5cf6"], button[class*="bg-purple"], .btn-purple { box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); } button[style*="background:#8b5cf6"]:hover, button[style*="background: #8b5cf6"]:hover, button[class*="bg-purple"]:hover, .btn-purple:hover { background: #7c3aed !important; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Bouton GRIS (secondaire, annuler) */ button[style*="background:#6b7280"], button[style*="background: #6b7280"], button[class*="bg-gray"], .btn-secondary { box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3); } button[style*="background:#6b7280"]:hover, button[style*="background: #6b7280"]:hover, button[class*="bg-gray"]:hover, .btn-secondary:hover { background: #4b5563 !important; box-shadow: 0 8px 24px rgba(107, 114, 128, 0.5) !important; transform: translateY(-3px) scale(1.03); } /* Effet ondulation (ripple) au clic */ button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } button:active::after { width: 300px; height: 300px; } /* Boutons avec gradient intégré dans le HTML */ button[style*="background:linear-gradient"], button[style*="background: linear-gradient"] { position: relative; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } button[style*="background:linear-gradient"]:hover, button[style*="background: linear-gradient"]:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5); filter: brightness(1.1); } /* Boutons désactivés - Pas d'effet */ button:disabled, button[disabled] { opacity: 0.5; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; filter: none !important; } button:disabled:hover, button[disabled]:hover { transform: none !important; box-shadow: none !important; } /* Boutons semi-transparents (type "retour") */ button[style*="background:rgba"], button[style*="background: rgba"] { backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } button[style*="background:rgba"]:hover, button[style*="background: rgba"]:hover { backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* Tabs avec effets améliorés */ /* 🔧 !important : ce fichier contient plusieurs autres règles .tab-btn dispersées (ligne ~1845, ~3604...) — pour garantir que CETTE taille gagne quoi qu'il arrive, plutôt que de dépendre de l'ordre exact du CSS en cascade. */ .tab-btn { padding: 6px 12px !important; /* réduit de moitié (était 12px 24px) */ font-size: 13px !important; border-radius: 8px !important; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); border: none; background: transparent; color: var(--text-secondary); position: relative; /* 🔥 CHANGÉ: overflow visible pour afficher les badges */ overflow: visible; } /* Effet de fond au survol pour onglets inactifs */ .tab-btn:not(.active)::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(102, 126, 234, 0.1); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: -1; } .tab-btn:not(.active):hover::before { transform: scaleX(1); } .tab-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); transform: translateY(-2px); } .tab-btn:hover:not(.active) { background: rgba(102, 126, 234, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); } .tab-btn:active { transform: translateY(0); } /* Content sections (Styles originaux) */ .tab-content { display: none; } .tab-content.active { display: block; /* L'animation d'entrée vit désormais dans css/transitions.css, commun à tout le site. Voir la note ci-dessous. */ } /* ══════════════════════════════════════════════════════════════════ ANCIENNE ANIMATION D'ONGLET — RETIRÉE LE 18/08/2026 Elle jouait « fadeIn .45s » avec translateY(14px) ET scale(.985). Trois défauts cumulés : · 450 ms : au-delà de ~250 ms, une transition n'est plus perçue comme une réponse mais comme une attente ; · 14 px : sur un panneau plein écran, le contenu semblait « tomber » à sa place ; · le zoom faisait respirer toute la page, et se cumulait à la remise à zéro du défilement déclenchée au même instant. C'est cette superposition qui donnait l'à-coup. Remplacée par « onglet-entree » — 200 ms, 5 px, sans zoom — dans css/transitions.css. Ne pas réintroduire d'animation ici : deux animations concurrentes sur le même élément, c'est la plus spécifique qui gagne, et le débogage est pénible. ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ LISIBILITÉ DU PANNEAU SNT — 18/08/2026 CE QUI SE PASSAIT ───────────────── Le fond de page du tableau de bord est un dégradé SOMBRE (--bg-main : #0f0e17 → #1a0033). Tous les autres panneaux posent leur contenu sur des cartes blanches, si bien que la règle générale « .tab-content p, li, span → #2d3748 » tombe juste. Le panneau SNT, lui, écrivait son titre, son texte d'introduction et ses libellés DIRECTEMENT SUR LE FOND SOMBRE, avec des couleurs pensées pour un fond clair (#64748b notamment). Résultat : gris moyen sur violet foncé — un rapport de contraste d'environ 2:1, très en dessous du minimum de 4,5:1 exigé pour du texte courant. Concrètement : illisible. LE PARTI RETENU ─────────────── Ne pas éclaircir les textes un par un — ce serait recommencer à chaque ajout — mais donner à ce panneau LA MÊME SURFACE CLAIRE que les autres. Le contenu redevient alors sombre sur clair, ce que le reste de la feuille suppose déjà partout ailleurs. Les valeurs ci-dessous tiennent toutes le niveau AA du RGAA (4,5:1 minimum) : c'est vérifiable, contrairement à « ça se voit bien sur mon écran ». ══════════════════════════════════════════════════════════════════ */ #content-snt > div { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 16px; padding: 24px 22px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); } #content-snt h1 { color: #0f172a !important; /* 17,9:1 sur blanc */ font-size: 1.6rem; font-weight: 800; } #content-snt p, #content-snt label, #content-snt span, #content-snt div { color: #334155 !important; /* 10,4:1 — remplace #64748b */ } #content-snt label, #content-snt b, #content-snt strong { color: #0f172a !important; } /* Le bloc de déverrouillage était une carte blanche DANS une zone déjà blanche : sans fond distinct, on ne voyait plus où il commençait. */ #content-snt [style*="background:#fff"] { background: #f8fafc !important; border-color: #cbd5e1 !important; } /* ── Pastilles de thème ──────────────────────────────────────────── Elles portaient leurs couleurs en style inline, mais une règle plus spécifique les repeignait en blanc : blanc sur vert pâle et blanc sur rose pâle, donc invisibles. On tranche ici, avec des teintes assez foncées pour rester lisibles. */ #content-snt #sntLockBtns button { font-weight: 700 !important; border-width: 1.5px !important; } #content-snt #sntLockBtns button[style*="#f0fdf4"] { background: #dcfce7 !important; border-color: #16a34a !important; color: #166534 !important; /* 6,4:1 */ } #content-snt #sntLockBtns button[style*="#fef2f2"] { background: #fee2e2 !important; border-color: #dc2626 !important; color: #991b1b !important; /* 6,6:1 */ } /* Les listes déroulantes : contour plus franc et texte sombre. */ #content-snt select { color: #0f172a !important; background: #ffffff !important; border: 1.5px solid #94a3b8 !important; font-weight: 600; } /* En-têtes du tableau de progression. */ #content-snt th { color: #0f172a !important; font-weight: 800; } #content-snt td { color: #1e293b !important; } /* Cards (Styles originaux) */ .stat-card { transition: var(--transition); cursor: pointer; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } /* Input moderne (Styles originaux) */ .input-modern { border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; transition: var(--transition); width: 100%; background: rgba(0,0,0,0.05); /* Léger fond pour contraste */ color: var(--text-primary); /* S'assurer que le texte est lisible */ } .input-modern::placeholder { color: var(--text-secondary); opacity: 0.7; } .input-modern:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--shadow); } /* La liste déroulante native est dessinée par le système : ses options doivent recevoir des couleurs explicites, sinon texte blanc sur blanc. */ select.input-modern { color-scheme: dark; } select.input-modern option { background-color: var(--bg-card, #1e1b2e); color: var(--text-primary, #ffffff); } /* Table moderne (Styles originaux) */ .modern-table { width: 100%; border-collapse: separate; border-spacing: 0; } .modern-table thead th { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 16px; font-weight: 600; text-align: left; } .modern-table thead th:first-child { border-top-left-radius: 12px; } .modern-table thead th:last-child { border-top-right-radius: 12px; } .modern-table tbody tr { transition: all 0.2s; } .modern-table tbody tr:hover { background: rgba(0, 0, 0, 0.05); } .modern-table tbody td { padding: 16px; border-bottom: 1px solid #e2e8f0; color: var(--text-primary); /* S'assurer que le texte est lisible */ } /* ... (Reste de tes styles originaux, badge, notif, etc.) ... */ /* Badge tiers-temps */ .tier-temps-badge { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; /* 19/09/2026 — ESSAYÉ PUIS RETIRÉ : « white-space: nowrap » sur cette pastille. Elle cessait bien de se couper en deux, mais élargissait sa colonne de 43 px, et le tableau repassait en débordement horizontal à 1280 px — exactement ce que la grille 5 × 2 venait de supprimer. La pastille coupée est laide ; une barre de défilement rendue à toute une liste coûte plus cher. À reprendre en raccourcissant la pastille elle-même, pas en élargissant sa colonne. */ } /* Badges rareté */ .badge-classique { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #333; padding: 6px 16px; border-radius: 20px; font-weight: 600; } .badge-rare { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #333; padding: 6px 16px; border-radius: 20px; font-weight: 600; } /* 24/08/2026 — « Épique » existait comme rareté côté élève mais n'avait ni option de création, ni badge ici : un article épique s'affichait avec le badge « classique ». */ .badge-epique { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); color: #fff; padding: 6px 16px; border-radius: 20px; font-weight: 600; } .badge-legendaire { background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%); color: #333; padding: 6px 16px; border-radius: 20px; font-weight: 600; } /* Notifications */ .notification { position: fixed; top: 20px; right: 20px; z-index: 9999; padding: 16px 24px; border-radius: 12px; color: white; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: slideIn 0.3s ease; } .notification.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .notification.error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .notification.info { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Progress bar */ .progress-bar { height: 8px; border-radius: 999px; overflow: hidden; background: #e2e8f0; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); transition: width 0.5s ease; } /* Modal */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999999 !important; align-items: center; justify-content: center; backdrop-filter: blur(4px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal.active { display: flex !important; opacity: 1; visibility: visible; pointer-events: auto !important; } .modal-content { background: white; /* Fond blanc pour lisibilité du modal */ color: #1a202c; /* Texte sombre pour lisibilité */ border-radius: 24px; padding: 32px; max-width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); z-index: 999999 !important; position: relative; pointer-events: auto !important; } /* Drag & Drop zone */ .dropzone { border: 3px dashed #cbd5e0; border-radius: 12px; padding: 40px; text-align: center; transition: var(--transition); cursor: pointer; color: var(--text-secondary); } .dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: rgba(102, 126, 234, 0.05); } /* Import boutique : aperçu groupé lisible sur tablette et mobile. */ .shop-image-dropzone { min-height: 285px; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .shop-image-dropzone:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; } .shop-batch-preview { width: 100%; text-align: left; } .shop-batch-summary { color: #3730a3; font-weight: 800; margin: 0.35rem 0 0.65rem; } .shop-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0.75rem; max-height: 390px; overflow: auto; padding: 0.25rem; } .shop-batch-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 0.75rem; padding: 0.55rem; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .shop-batch-card img { display: block; width: 100%; height: 92px; object-fit: contain; background: #f8fafc; border-radius: 0.5rem; margin-bottom: 0.5rem; } .shop-batch-name-label { display: block; color: #334155; font-size: 0.75rem; font-weight: 700; } .shop-batch-name { width: 100%; min-height: 2.25rem; margin-top: 0.25rem; padding: 0.45rem 0.55rem; font-size: 0.8rem; } .shop-batch-details { display: block; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.35rem; } .shop-batch-remove { width: 100%; border: 0; border-radius: 0.45rem; background: #fee2e2; color: #b91c1c; cursor: pointer; font-size: 0.75rem; font-weight: 700; margin-top: 0.45rem; padding: 0.42rem; } .shop-batch-remove:hover, .shop-batch-remove:focus-visible { background: #fecaca; } .shop-import-status { width: 100%; border-radius: 0.6rem; font-size: 0.84rem; font-weight: 700; line-height: 1.35; margin-top: 0.5rem; padding: 0.55rem 0.7rem; text-align: left; } .shop-import-status[data-state="info"] { background: #dbeafe; color: #1e3a8a; } .shop-import-status[data-state="success"] { background: #dcfce7; color: #166534; } .shop-import-status[data-state="warning"] { background: #fef3c7; color: #92400e; } .shop-import-status[data-state="error"] { background: #fee2e2; color: #991b1b; } @media (max-width: 640px) { .shop-image-dropzone { min-height: 240px; padding: 1.15rem; } .shop-batch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .shop-batch-card img { height: 74px; } } /* Chart container */ .chart-container { position: relative; height: 300px; margin: 20px 0; } /* Loading spinner */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Animation pulse pour le point vert */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } } /* Spinner pour Firebase Manager */ .firebase-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 8px; } /* Scrollbar personnalisée */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary); } /* === Styles pour Outils d'Import === */ .question-card { border: 2px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all 0.3s; } .question-card:hover { border-color: #667eea; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); } .badge-energie { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; } .badge-matiere { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: white; } .badge-info { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; } /* ========== AFFICHAGE ULTRA-ROBUSTE DES BOUTONS ========== */ /* Table container avec scroll */ .modern-table { table-layout: auto !important; width: 100% !important; min-width: 100% !important; } /* Colonne actions avec largeur fixe */ .modern-table thead th:last-child, .modern-table tbody td:last-child { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } /* ══════════════════════════════════════════════════════════════ 19/09/2026 — LES NEUF OUTILS TIENNENT SUR DEUX RANGÉES Neuf boutons de 32 px et huit écarts de 4 px font 320 px. La colonne en faisait 320 elle aussi, mais la cellule a 16 px de marge de chaque côté : il n'en restait que 288. Le dernier bouton tombait hors du cadre, et il fallait faire glisser le tableau pour l'atteindre — ce que personne ne devine. Cinq colonnes : cinq boutons en haut, quatre en dessous. La colonne passe à 208 px (5 × 32 + 4 × 4 + les marges), et les 112 px libérés vont aux noms, qui tiennent alors sur une seule ligne. La marge verticale passe à 10 px pour que deux rangées ne rallongent pas la ligne : 68 + 20 = 88 px, soit la hauteur d'avant. TOUT EST PORTÉ PAR #tableEleves, et c'est délibéré : « .action-buttons » sert aussi à des boutons de TEXTE dans referentiel-tp-database.js, et « .modern-table th:last-child » vise trois tables du tableau de bord plus deux simulateurs. ══════════════════════════════════════════════════════════════ */ #tableEleves thead th:last-child, #tableEleves tbody td:last-child { width: 208px !important; min-width: 208px !important; max-width: 208px !important; } #tableEleves tbody td:last-child { padding: 10px 16px !important; } #tableEleves .action-buttons { display: grid !important; grid-template-columns: repeat(5, 32px) !important; gap: 4px !important; align-items: center !important; justify-content: start !important; } /* Container des boutons d'action */ /* ── Identifiant élève ───────────────────────────── */ .student-id-cell { display: flex; align-items: center; gap: 6px; } .student-id-code { font-family: 'Courier New', monospace; font-size: 0.82rem; font-weight: 700; color: #1e293b !important; background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 5px; padding: 3px 8px; letter-spacing: 0.05em; white-space: nowrap; } .copy-id-btn { flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 4px; background: #94a3b8; color: white; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: background .15s; } .copy-id-btn:hover { background: #3b82f6; } /* ── Actions rapides + menu contextuel ──────────── */ .action-buttons { display: flex !important; gap: 4px !important; align-items: center !important; flex-wrap: nowrap !important; } .act-btn { width: 32px; height: 32px; border: none; border-radius: 7px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: transform .12s, box-shadow .12s; flex-shrink: 0; position: relative; } .act-btn:hover { transform: scale(1.18); box-shadow: 0 3px 10px rgba(0,0,0,.25); } /* Tooltip global — injecté dans par JS, jamais clippé */ #act-tooltip { position: fixed; background: #1e293b; color: #f1f5f9; font-size: 12px; font-family: system-ui, sans-serif; font-weight: 500; padding: 5px 10px; border-radius: 6px; pointer-events: none; z-index: 99999; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.3); opacity: 0; transition: opacity .15s ease; transform: translateX(-50%); } #act-tooltip.visible { opacity: 1; } #act-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1e293b; } /* Bouton "plus" qui ouvre le mini-menu */ .act-more-btn { background: #64748b; color: white; } .act-more-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: #ffffff !important; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 9999; min-width: 210px; padding: 6px 0; /* Isolation totale du thème */ color: #1e293b !important; font-family: system-ui, sans-serif !important; } .act-more-menu.open { display: block; } .act-more-menu * { box-sizing: border-box; } .act-more-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 14px !important; font-size: 13px !important; font-weight: 500 !important; /* Forcer couleur sombre sur fond blanc, immunisé contre tout thème */ color: #1e293b !important; background: transparent !important; cursor: pointer !important; transition: background .1s !important; border: none !important; width: 100% !important; text-align: left !important; line-height: 1.4 !important; } .act-more-item:hover { background: #f1f5f9 !important; color: #0f172a !important; } .act-more-item .act-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .act-more-item span:not(.act-icon) { color: #1e293b !important; font-size: 13px !important; font-weight: 500 !important; } .act-more-sep { height: 1px; background: #e2e8f0; margin: 4px 0; } .act-wrapper { position: relative; } /* Tous les boutons d'action */ .action-buttons button { flex-shrink: 0 !important; min-width: 32px !important; width: auto !important; height: 32px !important; padding: 4px 8px !important; font-size: 0.75rem !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: visible !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; font-weight: 600 !important; } /* Empêcher le zoom sur les boutons */ body.accessibility-large-text .action-buttons button { font-size: 0.75rem !important; padding: 4px 8px !important; height: 32px !important; min-width: 32px !important; } body.accessibility-dyslexia .action-buttons button { font-size: 0.75rem !important; letter-spacing: 0.02em !important; } /* Styles des différents types de boutons */ .action-buttons .bg-blue-500 { background-color: #3b82f6 !important; color: white !important; } .action-buttons .bg-blue-500:hover { background-color: #2563eb !important; } .action-buttons .bg-gray-500 { background-color: #6b7280 !important; color: white !important; } .action-buttons .bg-gray-500:hover { background-color: #4b5563 !important; } .action-buttons .bg-purple-500 { background-color: #a855f7 !important; color: white !important; } .action-buttons .bg-purple-500:hover { background-color: #9333ea !important; } .action-buttons .bg-orange-500 { background-color: #f97316 !important; color: white !important; } .action-buttons .bg-orange-500:hover { background-color: #ea580c !important; } .action-buttons .bg-yellow-500 { background-color: #eab308 !important; color: white !important; } .action-buttons .bg-yellow-500:hover { background-color: #ca8a04 !important; } .action-buttons .bg-red-500 { background-color: #ef4444 !important; color: white !important; } .action-buttons .bg-red-500:hover { background-color: #dc2626 !important; } .action-buttons .bg-gray-400 { background-color: #9ca3af !important; color: white !important; } .action-buttons .bg-gray-400:hover { background-color: #6b7280 !important; } /* Protection MAXIMALE contre tous les thèmes */ body[class*="theme-"] .action-buttons button { font-size: 0.75rem !important; padding: 4px 8px !important; height: 32px !important; } body[class*="accessibility-"] .action-buttons button { font-size: 0.75rem !important; padding: 4px 8px !important; height: 32px !important; } /* Protection contre overflow */ .modern-table tbody td { overflow: visible !important; } /* Wrapper table avec scroll horizontal si nécessaire */ .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* ========== INDICATEURS - STYLES ÉPOUSTOUFLANTS ========== */ .indicator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; } .indicator-card { background: var(--glass-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .indicator-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .indicator-value { font-size: 2rem; font-weight: 800; line-height: 1; margin: 8px 0; } .indicator-trend { font-size: 0.875rem; font-weight: 600; margin-top: 8px; } .trend-up { color: #10b981; } .trend-down { color: #ef4444; } .mini-chart { width: 100%; height: 60px; display: flex; align-items: flex-end; gap: 2px; padding: 8px; background: rgba(0,0,0,0.05); border-radius: 4px; margin-top: 12px; } .mini-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; transition: all 0.3s ease; min-height: 4px; } .mini-bar:hover { background: var(--secondary); } /* ========== TOGGLE SWITCH EFFECTS ========== */ .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: 0.3s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: 0.3s; border-radius: 50%; } input:checked + .toggle-slider { background: linear-gradient(135deg, #10b981, #059669); } input:checked + .toggle-slider:before { transform: translateX(24px); } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } /* TPs Drag & Drop */ .tp-card { transition: all 0.2s ease; border: 2px solid #e5e7eb; } .tp-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .tp-card:active { cursor: grabbing; } /* ========== BADGES DE NOTIFICATION CLIGNOTANTS ========== */ .notification-badge { position: absolute; top: -10px; right: -10px; min-width: 28px; height: 28px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 900; padding: 0 8px; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.8), 0 0 0 3px rgba(255, 255, 255, 0.9); animation: pulse-badge 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; z-index: 100; border: 2px solid white; } .notification-badge-new { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: bold; padding: 4px 8px; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5); animation: pulse-badge 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; z-index: 10; text-transform: uppercase; letter-spacing: 0.5px; } @keyframes pulse-badge { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.8), 0 0 0 3px rgba(255, 255, 255, 0.9); } 50% { opacity: 1; transform: scale(1.15); box-shadow: 0 6px 20px rgba(239, 68, 68, 1), 0 0 0 4px rgba(255, 255, 255, 1); } } /* Badge sur les onglets de navigation */ .tab-btn { position: relative; } /* ═══════════════════════════════════════════════════════════════════ */ /* 📦 DROP ZONES MÉDIA - Solution Gemini */ /* ═══════════════════════════════════════════════════════════════════ */ .drop-zone-media { border: 2px dashed #cbd5e1; border-radius: 8px; background-color: #f8fafc; color: #94a3b8; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 120px; cursor: pointer; transition: all 0.2s ease; margin: 10px 0; width: 100%; overflow: hidden; position: relative; } .drop-zone-media.dragover { border-color: #667eea; background-color: #e0e7ff; color: #4338ca; transform: scale(1.02); } .drop-zone-media img, .drop-zone-media video { width: 100%; height: 100%; max-height: 300px; object-fit: contain; border-radius: 6px; } /* ======================================== STYLES POUR LA GESTION DES VIDÉOS ======================================== */ .video-wrapper { position: relative; margin: 20px 0; border: 2px solid transparent; border-radius: 12px; transition: all 0.3s ease; display: inline-block; max-width: 100%; cursor: move; } .video-wrapper.selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .video-wrapper:hover { border-color: #94a3b8; } .video-wrapper video, .video-wrapper iframe { display: block; width: 100%; height: auto; border-radius: 8px; } .video-toolbar { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); padding: 8px; border-radius: 10px; display: none; gap: 5px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 1000; white-space: nowrap; } .video-wrapper.selected .video-toolbar { display: flex; } .video-toolbar button { background: rgba(255, 255, 255, 0.1); border: none; color: white; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; white-space: nowrap; } .video-toolbar button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .video-toolbar button.danger:hover { background: #ef4444; } .video-resize-handle { position: absolute; width: 12px; height: 12px; background: #3b82f6; border: 2px solid white; border-radius: 50%; cursor: nwse-resize; opacity: 0; transition: opacity 0.2s; } .video-wrapper.selected .video-resize-handle { opacity: 1; } .video-resize-handle.bottom-right { bottom: -6px; right: -6px; } .video-resize-handle.bottom-left { bottom: -6px; left: -6px; cursor: nesw-resize; } .video-resize-handle.top-right { top: -6px; right: -6px; cursor: nesw-resize; } .video-resize-handle.top-left { top: -6px; left: -6px; } .video-dimension-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(30, 41, 59, 0.9); color: white; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: bold; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .video-wrapper.resizing .video-dimension-badge, .video-wrapper.selected .video-dimension-badge { opacity: 1; } .video-wrapper.dragging { opacity: 0.6; cursor: grabbing !important; } .video-wrapper[data-align="left"] { display: block; margin-left: 0; margin-right: auto; } .video-wrapper[data-align="center"] { display: block; margin-left: auto; margin-right: auto; } .video-wrapper[data-align="right"] { display: block; margin-left: auto; margin-right: 0; } @keyframes videoInsert { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .video-wrapper.just-inserted { animation: videoInsert 0.4s ease-out; } /* Styles pour les boutons de filtre de Gestion Comptes */ .filter-prof-btn { position: relative; overflow: hidden; } .filter-prof-btn:hover { background: rgba(124, 58, 237, 0.1) !important; color: #7c3aed !important; border-color: #7c3aed !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2); } .filter-prof-btn:active { transform: translateY(0); } /* ========== LISIBILITE ET ACCESSIBILITE DE BASE ========== */ /* Tailwind applique display:grid aux elements .grid, ce qui peut neutraliser l'attribut HTML hidden. Cette regle garantit aussi que les anciens KPI conserves pour compatibilite restent reellement hors de l'interface. */ *[hidden] { display: none !important; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Le texte secondaire reste nettement lisible sur les cartes blanches. */ .text-gray-400, .text-gray-500, .text-gray-600 { color: #475569 !important; } .text-xs { font-size: 0.875rem !important; line-height: 1.45 !important; } .text-sm, .tab-btn, .ribbon-tab, .ribbon-tool { font-size: 0.9375rem !important; line-height: 1.45 !important; } button, input, select, textarea { line-height: 1.4; } button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 3px !important; } /* Actions des copies TP injectees par tp-sti2d.js. Ces styles explicites ne dependent pas du balayage Tailwind : le libelle ne peut donc plus disparaitre lors de la compilation du CSS de production. */ .tp-pending-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .tp-pending-action { min-width: 15rem; min-height: 44px; flex: 1 1 15rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.75rem 1rem; border: 2px solid transparent; border-radius: 0.75rem; color: #ffffff !important; font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 1px 1px rgba(15, 23, 42, 0.35); cursor: pointer; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18); transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .tp-pending-action--correct { background: #4f46e5 !important; border-color: #3730a3; } .tp-pending-action--validate { background: #047857 !important; border-color: #065f46; } .tp-pending-action:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(15, 23, 42, 0.24); } .tp-pending-action:active { transform: translateY(0); } @media (max-width: 640px) { .tp-pending-action { min-width: 100%; width: 100%; } } @media (prefers-reduced-motion: reduce) { .tp-pending-action { transition: none; } } .login-count-badge { display:inline-block; min-width:5.6rem; padding:.35rem .55rem; border:1px solid #c7d2fe; border-radius:.55rem; background:#eef2ff; color:#312e81; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; } /* ═══════════ BANDEAU — L'ÉTABLISSEMENT (26/09/2026) ═══════════════════════ Remplace « Connecté en tant que » dans l'en-tête : le logo importé depuis Paramètres › Établissement (ou le monogramme des cartes d'accès, ou 🏫), puis le nom et la commune. Logique : apps/teacher/core/bandeau-etablissement.js. Les « !important » répondent à ceux de « .glass p » et « .glass span », qui forcent tout texte d'une carte en #1a202c : sans eux, les initiales blanches deviendraient sombres sur leur dégradé. En mode contraste, les règles « body.accessibility-contrast .glass … », plus précises, gagnent. */ .bandeau-etab { display: flex; align-items: center; gap: 12px; min-width: 0; /* un nom long se replie au lieu de pousser la roue */ } .bandeau-etab-logo { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 56px; min-width: 56px; max-width: 160px; /* un logo en bandeau reste lisible sans dévorer la ligne */ padding: 0; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; } .bandeau-etab-logo:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; } .bandeau-etab-logo img { display: block; height: 100%; width: auto; max-width: 158px; object-fit: contain; padding: 5px; } .bandeau-etab-attente { background: #f1f5f9; } .bandeau-etab-attente img { visibility: hidden; } .bandeau-etab-sans-logo { width: 56px; border: 0; background: linear-gradient(135deg, #5b54e8 0%, #c026d3 100%); /* le dégradé des cartes d'accès */ } .bandeau-etab-inconnu { width: 56px; background: #eef2ff; border-color: #c7d2fe; } .glass .bandeau-etab-monogramme { color: #ffffff !important; font-size: 21px; font-weight: 800; letter-spacing: .04em; line-height: 1; } .glass .bandeau-etab-monogramme-long { font-size: 17px; letter-spacing: .02em; } .bandeau-etab-emoji { font-size: 30px; line-height: 1; } .bandeau-etab-texte { min-width: 0; max-width: 250px; text-align: left; } .glass .bandeau-etab-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; color: #1a202c !important; } .glass .bandeau-etab-nom[hidden] { display: none; } .glass .bandeau-etab-vide { font-weight: 500; font-style: italic; color: #4a5568 !important; } .glass .bandeau-etab-commune { margin-top: 2px; font-size: 13px; line-height: 1.3; color: #4a5568 !important; } /* Hors écran, lu par les lecteurs d'écran : « Connecté en tant que … ». */ .bandeau-etab-masque { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Téléphone debout : la ligne porte déjà la roue et « Déconnexion ». Le logo reste, le nom s'efface — comme la phrase de présentation sous le titre. Mesuré dans Chromium à 390 et 360 points : avant ce changement, « Déconnexion » (190 points avec ses marges de bureau) sortait déjà de la carte, poussé par « Connecté en tant que ». Logo borné à 60, écarts à 10 et bouton resserré : la ligne tient, même avec un logo en bandeau. */ @media (max-width: 690px) { .bandeau-actions { gap: 10px; } .bandeau-actions > button[onclick="logout()"] { padding: 10px 12px; font-size: 14px; gap: 6px; } .bandeau-etab-texte { display: none; } .bandeau-etab-logo { height: 44px; min-width: 44px; max-width: 60px; border-radius: 12px; } .bandeau-etab-sans-logo, .bandeau-etab-inconnu { width: 44px; } .bandeau-etab-logo img { max-width: 58px; padding: 4px; } .glass .bandeau-etab-monogramme { font-size: 16px; } .glass .bandeau-etab-monogramme-long { font-size: 13px; } .bandeau-etab-emoji { font-size: 24px; } } /* Cartes TP : contraste indépendant du thème et du focus natif. */ #tpProList { color: #1e293b; } #tpProList select, #tpProList select:hover, #tpProList select:focus, #tpProList select option, #tpProList select optgroup { color: #1e293b !important; background-color: #fff !important; -webkit-text-fill-color: #1e293b; color-scheme: light; } #tpProList select { min-height: 36px; font-size: 13px !important; } #tpProList button.bg-blue-600 { background: #1d4ed8; color: #fff; } #tpProList button.bg-green-600 { background: #166534; color: #fff; } #tpProList button.bg-purple-600 { background: #7e22ce; color: #fff; } #tpProList button.bg-red-600 { background: #b91c1c; color: #fff; } #tpProList button { min-height: 32px; } #tpProList button:disabled { color: #334155 !important; -webkit-text-fill-color: #334155; background: #e2e8f0 !important; opacity: 1; cursor: not-allowed; } #tpProList button:focus-visible, #tpProList select:focus-visible, #tpProList label:focus-within { outline: 3px solid #4338ca; outline-offset: 3px; } /* Repère stable par approche, complété par un libellé textuel. */ #tpProList .tp-approach-card { border-left: 6px solid var(--tp-approach-accent, #475569); background: linear-gradient(145deg, var(--tp-approach-background, #f8fafc), #fff 65%); } #tpProList .tp-card-approach { color: var(--tp-approach-accent, #475569) !important; background: var(--tp-approach-background, #f8fafc); border: 1px solid var(--tp-approach-accent, #475569); } /* Cartes pastel : la teinte couvre toute la carte, pas seulement la bordure. */ #tpProList .tp-approach-card { background: var(--tp-approach-background, #f8fafc) !important; border: 1px solid #dce2ea; border-top: 4px solid var(--tp-approach-accent, #475569); border-radius: 22px; padding: 22px; box-shadow: 0 6px 20px rgba(15,23,42,.07); transform: none; color: #1e293b; } #tpProList .tp-approach-card:hover { box-shadow: 0 10px 28px rgba(15,23,42,.12); } #tpProList .tp-card-approach { border: none; border-radius: 999px; padding: 6px 12px; background: #ffffffb3; } #tpProList .tp-approach-card button[class*="bg-"] { background: #ffffffc9 !important; color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: none; } #tpProList .tp-approach-card button[class*="bg-"]:hover { background: white !important; border-color: var(--tp-approach-accent); } #tpProList .tp-approach-card button.bg-red-600 { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; } #tpProList .tp-approach-card button[onclick^="exportTPPDFOffline"] { color: #075985 !important; -webkit-text-fill-color: #075985; background: #e0f2fe !important; border: 1px solid #7dd3fc !important; border-radius: 10px; box-shadow: none; } #tpProList .tp-approach-card button[onclick^="exportTPPDFOffline"] span { color: #334155 !important; opacity: 1 !important; } body .tpb-section { background: #eef4ff; border-radius: 22px; padding: 22px; } body .tpb-bouton { -webkit-text-fill-color: #312e81 !important; color: #312e81 !important; } body .tpb-bouton.tpb-fort { -webkit-text-fill-color: white !important; color: white !important; }