/* ========================================================================== SURVOL — tout ce qui se passe quand la souris passe sur quelque chose -------------------------------------------------------------------------- 🔑 CE FICHIER EST LE SEUL ENDROIT DU SITE OÙ L'ON ÉCRIT UN `:hover`. Il est chargé EN DERNIER sur chaque page, donc il gagne toujours. ⚠️ TOUT LE FICHIER EST DANS UN SEUL `@media (hover: hover)`. Cette ligne demande au navigateur : « cet appareil a-t-il une vraie souris ? ». Sur iPhone et iPad la réponse est non, et RIEN ici ne s'applique. C'est ce qui empêche le doigt de laisser une ligne allumée derrière lui après un clic (le « survol collé » du tactile). Un iPad avec un trackpad répond oui, et retrouve donc ses survols. ⛔ NE JAMAIS écrire un `:hover` ailleurs que dans ce fichier : il échapperait à cette protection et le bug tactile reviendrait. COMMENT ÇA MARCHE Chaque famille est UNE règle qui liste ses membres dans un `:is( … )`. Pour rattacher un nouveau bouton à une famille, deux possibilités : • lui donner la classe de la famille (`survol-teinte`, `survol-texte`…), • ou ajouter son nom de classe à la liste ci-dessous. Le `:not( … )` à la fin de chaque règle liste les états qui NE réagissent pas : un onglet déjà ouvert, une case figée, une carte verrouillée. Ils n'ont donc plus besoin d'une règle à eux pour éteindre le survol. ⚠️ Aucune liste ne doit contenir de sélecteur descendant (`.a .b`) : cela remonterait la priorité de TOUTE la famille. Les rares cas de ce genre ont leur petite règle jumelle, juste en dessous. ========================================================================== */ @media (hover: hover) and (pointer: fine) { /* ========================================================================== 1. TEINTE — la famille principale : fond accentué, texte accentué ========================================================================== */ :is( .survol-teinte, .btn--ghost, .icon-btn, .st-pill, .set-back, .sort-control, .eval-add-col, .eval-info-btn, .ex-nav-item, .ex-search-scope__all, .exd-close, .exd-btn, .ac-stat--lien, .ck-page__btn, .cmp-iconbtn, .cel-nomzone, .drp__nav, .sv-edit, .td-add, .td-datebtn ):hover:not(:where(:disabled, [disabled], .ex-nav-item--active, .exd-btn--primary, .ck-page__btn--figee, .sv-edit--today, /* ⛔ Couleur de SENS : le favori allumé garde son or, fond, texte et bordure compris (son survol est plus bas, section 9 ; les deux pouces, eux, ne sont plus du tout dans cette famille). */ .exd-btn--fav.is-fav, /* ⚠️ Ces états gagnaient déjà contre le survol avant le regroupement : une case de Suivi qui porte une note reste sur son fond de note. */ .sv-edit.has-note)) { background: var(--so-accent-hover); color: var(--so-accent-deep); } /* Jumelles de la famille 1 : les membres écrits en deux morceaux. */ .ck-menu button:hover, .td-menu button:hover, .cel-barre .btn-icone:hover:not(:disabled), .exd-breadcrumb a:hover { background: var(--so-accent-hover); color: var(--so-accent-deep); } /* Le « + » de Suivi est bâti en !important, sa teinte doit l'être aussi. */ /* ⚠️ Ces deux-là sont écrits « .cmp-btn.ghost », donc DEUX classes : dans la liste ci-dessus ils auraient remonté la priorité de toute la famille. */ .cmp-btn.ghost:hover { background: var(--so-accent-hover); color: var(--so-accent-deep); } .cmp-btn.add-toggle:hover { background: var(--so-accent-hover); } .sv-bc-add:hover { background: var(--so-accent-hover) !important; color: var(--so-accent-deep) !important; } /* ⚠️ `--color-on-light-accent` n'est pas `--so-accent-deep` : garder le sien. */ .sv-subname:hover { background: var(--so-accent-hover); color: var(--color-on-light-accent, var(--so-accent-deep)); } /* Le texte à l'intérieur suit la teinte de son cadre. */ .sort-control:hover .sort-control__label, .sort-control:hover .sort-control__select, .sort-control:hover::after, .td-tache:hover .td-txt { color: var(--so-accent-deep); } /* ========================================================================== 2. TEINTE SANS TEXTE — même fond, mais la couleur du texte ne bouge pas (lignes, cellules et grandes zones, où l'accent sur le texte est de trop) ========================================================================== */ :is( .survol-teinte--fond, .survol, .set-row, .sheet-item, .subject-bar, .subject-item, .student-item, .student-item__prenom--editable, .assign-ligne, .assign-groupe, .toggle-row, .print-option__ligne, .eval-print-item, .eval-print-all, .eval-direct-select, .eval-kbd-banner__close, .cg-case, .login-cgu, .login-back, .compte-suppr-summary, .compte-suppr-summary, .mobile-ex-card, .binome-duree, .ex-bc-item, .ex-pill, .ex-pill--on, .ex-pill__action-btn, .ac-titre, .ac-open, .ac-flag, .ac-rac, .cmp-chip-flex, .sv-evo-zone--clic, .td-tache ):hover:not(:where(:disabled, [disabled], .ex-bc-item--active, .set-row--active, .binome-duree.is-active, .ex-pill__action-btn--fav.is-fav, /* ⚠️ Les tâches recopiées sur l'Accueil ne se teintent pas : cette carte ne teinte QUE ce qui est actif (voir le haut de accueil.css). */ .ac-urgent .td-tache)) { background: var(--so-accent-hover); } /* Jumelles de la famille 2. */ .cmp-cover-row label:hover, .cmp-editor:not([open]) > summary:hover, .modal__content .sheet-item:hover, .cal-canton select:hover, .drp__day:not(:empty):not(.drp__day--disabled):hover, button.org-plaque.org-plaque--picker:hover { background: var(--so-accent-hover); } /* Les membres qui ont aussi une bordure à réveiller. */ :is( .subject-item, .student-item, .assign-ligne, .assign-groupe, .eval-direct-select ):hover { border-color: var(--so-border-strong); } .modal__content .sheet-item:hover, .modal__content button.org-plaque.org-plaque--picker:hover, .cal-canton select:hover { border-color: var(--so-border-strong); } :is(.cmp-chip-flex, .cmp-iconbtn):hover { border-color: var(--cmp-accent); } .cmp-btn.add-toggle:hover { border-color: var(--cmp-accent); } /* La pilule « flexible » de Compta est déjà colorée par son cadre : il faut redire les deux à sa priorité, sinon son propre fond gagne. */ .cmp-chip.flex .cmp-chip-flex:hover { background: var(--so-accent-hover); border-color: var(--cmp-accent); } .binome-duree:hover:not(:where(.is-active)) { border-color: var(--so-accent); } .ex-pill:hover { border-color: color-mix(in srgb, var(--so-accent) 45%, transparent); } .exd-btn:not(:where(.exd-btn--primary, .exd-btn--danger, .exd-btn--fav.is-fav)):hover { border-color: var(--so-glass-border); } .ac-rac:hover { border-color: rgba(var(--so-accent-rgb, 255, 107, 53), 0.3); } .td-datebtn:hover { border-color: var(--so-accent, #FF6B35); } /* ========================================================================== 3. TEXTE — seule la couleur du texte change (liens, onglets, libellés) ⛔ Jamais de soulignage : ce qui se clique se teinte ou change de couleur. ========================================================================== */ :is( .survol-texte, .tab, .ex-nav-item--subcat, .ex-fav-filter, .cg-refus ):hover:not(:where(.tab--active, .ex-nav-item--active, .ex-fav-filter.is-on)) { color: var(--so-text); } :is( .survol-texte--accent, .login-link, .sv-note-preview, .td-txt ):hover:not(:where(.td-txt--figee)) { color: var(--so-accent-deep, var(--so-text)); } /* Trois membres de la même famille, mais chacun sur SA teinte de vert : ⚠️ `--sous-actif` et `--color-on-light-accent` ne sont pas `--so-accent-deep`. */ .sous-tab:hover { color: var(--sous-actif); } .ck-title:hover { color: var(--color-on-light-accent, var(--so-accent-deep)); } .eval-name-link:hover { color: var(--color-on-light-accent); } /* Le nom d'un exercice est déjà souligné : c'est le TRAIT qui prend l'accent. */ .ex-pill__name:hover { text-decoration-color: var(--so-accent); } /* ⚠️ « .set-legal a » contient un ÉLÉMENT : dans la liste il aurait alourdi toute la famille. */ .set-legal a:hover { color: var(--so-accent-deep, #C2410C); } :is(.survol-texte--doux, .ex-section-label, .sv-note-ghost):hover { color: var(--so-text-2); } .ac-titre:hover { color: var(--so-text-2, #57534E); } .td-txt--figee:hover { color: var(--so-text, #1C1917); } /* Les quelques éléments qui se contentent de devenir plus francs. */ :is(.survol-opacite, .exd-avis-link):hover { opacity: 1; } /* ⚠️ Ceux-là vont dans l'AUTRE sens : ils s'effacent un peu au survol. */ :is(.survol-opacite--douce, .sort-control__select, .eval-kbd-help):hover { opacity: 0.9; } /* ⚠️ Pas sur la page déjà ouverte : son filet doit rester à 100 %. */ .sous-tab:hover:not(:where(.is-active))::after { opacity: 0.35; } /* ========================================================================== 4. PILULE — les boutons pleins : ils brillent et se soulèvent ========================================================================== */ :is(.survol-pilule, .btn--primary):hover { opacity: 1; background-position: 90% 50%; box-shadow: 0 6px 22px -4px var(--so-glow), 0 0 34px -6px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; } /* ⚠️ Le bouton plein de la fiche d'exercice ne prend QUE le halo : ni opacité ni déplacement de dégradé, il n'en avait pas. */ .exd-btn--primary:hover { box-shadow: 0 6px 22px -4px var(--so-glow), 0 0 34px -6px var(--so-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; } .btn--primary:hover::before, .exd-btn--primary:hover::before { animation: so-shine 0.65s var(--so-ease); } :is(.survol-pilule--verre, .btn--glass):hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.85); box-shadow: 0 14px 36px -10px rgba(var(--so-accent-rgb), 0.35), var(--so-specular); } .bdg-btn:hover { transform: translateY(-3px) scale(1.04); } /* Le bouton Imprimer déplace seulement son dégradé : pas de halo. */ .btn-apercu--imprimer:hover { background-position: 90% 50%; } /* ========================================================================== 5. CARTE — les tuiles se soulèvent ; la variante « zoom » grossit ========================================================================== */ :is(.survol-carte, .login-role-card, .login-class-card, .login-eleve-card):hover { transform: translateY(-2px); } /* ⚠️ Les cartes d'exercice ne sont PAS ici : elles ont deux dessins très différents (verre côté enseignant, relief 3D côté élève) et chacun garde son survol dans sa propre feuille, sous la même protection tactile. */ .login-role-card:hover, .login-class-card:hover, .login-eleve-card:hover { background: rgba(255, 255, 255, 0.72); border-color: color-mix(in srgb, var(--so-accent) 30%, rgba(255, 255, 255, 0.8) 70%); box-shadow: 0 10px 26px -10px rgba(var(--so-accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .binome-modal__grid .login-eleve-card:hover { background: color-mix(in srgb, var(--bg-end, #C0392B) 8%, #fff); } .login-eleve-card--plus:hover { background: rgba(255, 255, 255, 0.5); } .login-de:hover { background: rgba(255, 255, 255, 0.72); } :is(.survol-zoom, .student-avatar-mini):hover { transform: scale(1.1); border-color: white; box-shadow: 0 4px 16px rgba(0,0,0,0.22); } .header-badges:hover .badge-item { transform: scale(1.08); transition: transform .15s ease; } /* ========================================================================== 6. FOND SOMBRE — sur le portail et la page élève, la teinte claire ne se voit pas : l'élément s'éclaircit en blanc voilé au lieu de se teinter. ========================================================================== */ :is(.survol-teinte--sombre, .btn-apercu--fermer):hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.34); } .student-page .btn--ghost:hover { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; } .student-page [data-ex-card]:hover { background: rgba(255, 255, 255, 0.26) !important; } .ck-toast button:hover { background: rgba(255,255,255,0.28); } button.org-plaque.org-plaque--picker:hover { border-color: rgba(255,255,255,0.35); } /* ========================================================================== 7. CASE À COCHER — pas de fond à teinter, seule la bordure se réveille ========================================================================== */ :is(.survol-case, .case, .td-box, .ck-box, .sv-pill--0):hover { border-color: #94a3b8; } :is(.case--on, .td-box--on, .ck-box--on):hover { border-color: #16a34a; } :is(.case--figee, .td-box--figee, .ck-box--figee):hover { border-color: #cbd5e1; } :is(.case--on.case--figee, .td-box--on.td-box--figee, .ck-box--on.ck-box--figee):hover { border-color: #22c55e; } /* ========================================================================== 8. TABLEAUX — la cellule, la ligne, et le titre en biais de la check-liste ========================================================================== */ .progress-table tbody tr:hover, .eval-table tbody tr:hover { background: color-mix(in srgb, var(--so-accent) 5%, transparent); } .eval-cell-link:hover { background: rgba(var(--color-accent-rgb, 255,107,53), 0.10); } /* ⚠️ `:has(… :hover)` et non `td:hover` : seule la pastille se clique, mais c'est toute la cellule qui doit s'allumer. */ #suivi-root .eval-table td:has(.sv-pill:hover), #sv-fiche .eval-table td:has(.sv-pill:hover) { background: var(--so-accent-hover); } #ck-root .ck-table td.ck-td:has(.ck-box:not([disabled])):hover { background: var(--so-accent-hover); } /* Le titre penché de la check-liste : un dégradé qui monte le long du biais. */ #ck-root .ck-table th.ck-th:has(button.ck-title:hover)::before { background: linear-gradient(to top, rgba(var(--so-accent-rgb, 255, 107, 53), 0.20) 0%, rgba(var(--so-accent-rgb, 255, 107, 53), 0.20) 55%, rgba(var(--so-accent-rgb, 255, 107, 53), 0) 100%); } /* Le tableau Notes se consulte, il ne se survole pas. */ .nte-tbl tbody tr:hover { background: none; } /* ========================================================================== 9. LES QUATRE VRAIES EXCEPTIONS ========================================================================== */ /* Rouge de suppression, pour les dix boutons qui détruisent quelque chose. */ .btn--danger:hover, .icon-btn--danger:hover, .ex-pill__action-btn--danger:hover, .exd-btn--danger:hover, .eval-del-col:hover, .cmp-btn.danger:hover, .ck-menu .ck-menu__danger:hover, .td-menu .td-menu__danger:hover, .exd-avis-item__del:hover, .sv-x:hover { background: var(--so-danger); color: #fff; border-color: var(--so-danger); box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--so-danger) 55%, transparent); } .cmp-chip .x:hover { color: var(--cmp-neg); } .sv-chip__x:hover { opacity: 1; background: rgba(0,0,0,0.15); } /* ⛔ Les deux pouces annoncent leur couleur AVANT le vote : un pouce qui va dire « non » ne doit pas s'allumer en vert. Ils sont donc hors de la teinte du thème, dans les deux sens : au survol la couleur du geste, puis une fois voté cette couleur en permanence, et un ton plus soutenu au survol. ⚠️ Ciblés par leur identifiant : le bouton non voté n'a pas de classe à lui (voir js/exercice-detail.js, la classe n'apparaît qu'une fois le vote posé). */ #exd-vote-like:hover { background: #ECFDF5; border-color: #86EFAC; color: #15803D; } #exd-vote-dislike:hover { background: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; } /* Déjà voté : le même vert, le même rouge, un ton plus soutenu. ⚠️ L'identifiant est répété ici : sans lui, la règle pèserait moins que les deux du dessus et le pouce voté pâlirait au survol. */ #exd-vote-like.exd-vote--like-on:hover { background: #D1FAE5; } #exd-vote-dislike.exd-vote--dislike-on:hover { background: #FEE2E2; } /* ⛔ COULEUR DE SENS : le favori ALLUMÉ garde son or au survol, un ton plus soutenu. Le faire virer au vert du thème serait laid et lui ferait perdre son sens. Deux classes : il passe devant la teinte des familles, c'est voulu. */ .ex-pill__action-btn--fav.is-fav:hover, .exd-btn--fav.is-fav:hover { background: #FFF1D2; } /* favori : or */ /* La case d'aujourd'hui, dans Suivi : elle reste verte. */ .sv-edit--today:hover { background: #bbf7d0; color: #15803d; } /* Les niveaux colorés : ils s'éclaircissent, avec un halo à l'accent. */ .sv-level:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px var(--so-accent-hover); } /* Le nuancier des Réglages : un halo, la couleur du pastille ne bouge pas. */ .gradient-colors input[type="color"]:hover { box-shadow: 0 0 0 3px var(--so-accent-hover); } /* Les boutons pleins de Compta s'éclaircissent plutôt que de se teinter. */ .cmp-btn.add:hover, .cmp-btn.save:hover { filter: brightness(1.05); } /* ========================================================================== 10. CE QUI NE RÉAGIT PAS — déjà allumé, ou pas cliquable (les autres cas sont traités par les `:not( … )` des familles ci-dessus) ========================================================================== */ .ex-nav-item--active:hover { opacity: 0.93; } .td-cal .drp__nav[disabled]:hover { background: none; } .ck-page__btn--figee:hover { background: none; } }