/* ========================================================================= HexaMathica — feuille de style de base (Phase 0) Palette « ardoise » (slate) + une couleur d'accent par bloc. ========================================================================= */ /* ------------------------------------------------------------------------- Polices de l'interface — AUTO-HÉBERGÉES (comme OpenDyslexic plus bas). Elles arrivaient de fonts.googleapis.com : deux requêtes bloquantes vers un tiers, souvent filtrées par le proxy d'un collège (l'interface retombait alors sur une police système), et transmettant au passage l'adresse IP d'élèves mineurs. Les fichiers sont désormais dans assets/fonts/. Ce sont des polices VARIABLES : un seul fichier couvre toute la plage de graisses, d'où le « font-weight: 400 700 » plutôt qu'une déclaration par graisse. Google servait d'ailleurs le MÊME fichier pour les quatre graisses d'Inter — quatre téléchargements pour un seul contenu. Les deux sous-ensembles latin / latin-ext suffisent au français ; les blocs cyrillique, grec et vietnamien ne sont pas repris. Le navigateur ne charge « -ext » que s'il rencontre un caractère de sa plage (unicode-range) : une page ordinaire ne télécharge donc que 71 Ko de polices. Déclarations placées en TÊTE de fichier volontairement : le chargement des polices démarre dès l'analyse des premières lignes, pas après 1900 règles. ------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-var-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-var.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-var-ext.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --bg: var(--slate-100); --card: #ffffff; --text: var(--slate-800); --muted: var(--slate-500); --border: var(--slate-200); --primary: #4f46e5; --primary-d: #4338ca; /* Accents par bloc */ --acc-doc-1: #f59e0b; --acc-doc-2: #d97706; --acc-cours-1: #10b981; --acc-cours-2: #059669; --acc-cahier-1: #8b5cf6; --acc-cahier-2: #7c3aed; --acc-estrade-1: #06b6d4; --acc-estrade-2: #0891b2; --acc-flash-1: #facc15; --acc-flash-2: #eab308; --acc-ggb-1: #34d399; --acc-ggb-2: #0d9488; --acc-alea-1: #a78bfa; --acc-alea-2: #7c3aed; --radius: 14px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 20px rgba(15,23,42,.06); --maxw: 960px; --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--bg); line-height: 1.5; } h1, h2, h3, .brand__name, .home__title, .hexmenu text { font-family: var(--font-display); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Barre supérieure --------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--slate-900); color: #fff; transition: margin-top .28s ease, opacity .22s ease; } .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; } .brand:hover { text-decoration: none; } .brand__name { font-size: 1.15rem; letter-spacing: .2px; font-weight: 500; } .brand__name strong { font-weight: 800; } .logo { display: block; } /* Téléphone : le nom du site quitte les BANDEAUX, faute de place — le reste de la barre (séance, réseau, profil, Déconnexion côté prof ; cloche, prénom, Quitter côté élève) déborde sinon de l'écran. Le texte n'est pas supprimé mais rendu invisible à l'œil seul : le logo étant `aria-hidden`, il est le seul à nommer le lien pour un lecteur d'écran. Deux conditions : écran étroit (portrait) OU écran bas (téléphone couché) — la seconde évite que le nom revienne sur les pages passées en paysage imposé. La page de connexion (.auth-brand) garde le sien : c'est un titre, pas un bandeau. */ @media (max-width: 620px), (max-height: 500px) and (orientation: landscape) { .topbar .brand__name, .public-topbar .brand__name, .eleve-top__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } } .topbar__right { display: flex; align-items: center; gap: 14px; } .topbar__user { color: var(--slate-300); font-size: .92rem; } .inline-form { margin: 0; } /* ---- Conteneur / pied --------------------------------------------------- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 56px; } /* Pages-outils à deux volets (bodyClass « is-wide », posé par le contrôleur) : la colonne de lecture de 960 px convient à du contenu, pas à un éditeur flanqué de son aperçu — l'un et l'autre s'y retrouvaient à l'étroit. Aucune page de contenu ne doit la prendre : c'est une largeur d'ATELIER, pas de lecture. */ body.is-wide .container { max-width: 1320px; } .footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 24px 16px 40px; } /* ---- Boutons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--primary); color: #fff; } .btn--primary:hover { background: var(--primary-d); color: #fff; } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn--ghost:hover { background: rgba(255,255,255,.12); } .btn--block { width: 100%; } /* ---- Alertes ------------------------------------------------------------ */ .alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; font-size: .94rem; border: 1px solid; } .alert--error { background: #fef2f2; color: #991b1b; border-color: #fecaca; } .alert--success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } /* ---- Accueil / nid d'abeille ------------------------------------------- */ .home { position: relative; padding-top: 12px; } .home::before { content: ''; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 600px; height: 600px; max-width: 96vw; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(99,102,241,.14), rgba(99,102,241,0) 66%); } .home > * { position: relative; z-index: 1; } .home__head { text-align: center; margin-bottom: 30px; } .home__title { font-size: 2.3rem; font-weight: 700; margin: 0 0 8px; color: var(--slate-900); letter-spacing: -.5px; } .home__subtitle { margin: 0; color: var(--muted); font-size: 1.02rem; } .honeycomb { display: grid; grid-template-columns: repeat(2, minmax(180px, 230px)); justify-content: center; column-gap: 26px; row-gap: 22px; margin: 28px auto 8px; padding-bottom: 56px; /* place pour le décalage des hexagones de droite */ } .hex { --hex-w: 230px; position: relative; width: var(--hex-w); height: calc(var(--hex-w) * 1.1547); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); color: #fff; transform: translateY(0); transition: transform .16s ease, filter .16s ease; filter: drop-shadow(0 6px 10px rgba(15,23,42,.18)); } .honeycomb .hex:nth-child(2n) { transform: translateY(48px); } .hex:hover { filter: drop-shadow(0 14px 20px rgba(15,23,42,.30)); text-decoration: none; } .hex:nth-child(odd):hover { transform: translateY(-4px); } .hex:nth-child(2n):hover { transform: translateY(44px); } .hex--doc { background: linear-gradient(150deg, var(--acc-doc-1), var(--acc-doc-2)); } .hex--cours { background: linear-gradient(150deg, var(--acc-cours-1), var(--acc-cours-2)); } .hex--cahier { background: linear-gradient(150deg, var(--acc-cahier-1), var(--acc-cahier-2)); } .hex--estrade { background: linear-gradient(150deg, var(--acc-estrade-1), var(--acc-estrade-2)); } .hex__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 26px; gap: 6px; } .hex__icon { width: 38px; height: 38px; opacity: .95; } .hex__title { font-size: 1.12rem; font-weight: 800; } .hex__role { font-size: .8rem; opacity: .92; max-width: 16ch; } .hex__badge { margin-top: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22); } .home__note { text-align: center; color: var(--muted); font-size: .9rem; max-width: 56ch; margin: 18px auto 0; } /* Menu d'accueil : hexagone régulier divisé en 6 triangles équilatéraux */ .hexmenu { display: block; width: 100%; max-width: 480px; margin: 6px auto 6px; filter: drop-shadow(0 18px 38px rgba(15,23,42,.22)); } .hexmenu .wedge { cursor: pointer; transform-box: view-box; transform-origin: 220px 220px; transition: transform .2s ease; } .hexmenu .wedge path { stroke: #fff; stroke-width: 4; stroke-linejoin: round; transition: filter .2s ease; } .hexmenu .wedge:hover { transform: scale(1.02); } .hexmenu .wedge:hover path, .hexmenu .wedge:focus-visible path { filter: brightness(1.1); } .hexmenu .wedge--soon { opacity: .92; } /* Part ÉTEINTE par l'enseignant (cahier de texte neutralisé, migration 075) : elle garde sa place dans l'hexagone mais se voit inactive — gris délavé, texte en retrait, aucune réaction au survol. « À venir » (wedge--soon) reste, lui, à sa couleur : il annonce quelque chose qui arrive ; celle-ci annonce quelque chose qui ne sert pas. */ .hexmenu .wedge--off { cursor: default; } .hexmenu .wedge--off path { fill: var(--slate-300, #cbd5e1); } .hexmenu .wedge--off text { fill: var(--slate-500, #64748b); } .hexmenu .wedge--off:hover { transform: none; } .hexmenu .wedge--off:hover path { filter: none; } .hexmenu .wedge:focus { outline: none; } .hexmenu .wedge:focus-visible path { filter: brightness(1.1); stroke-width: 6; } .hexmenu text { fill: #fff; font-weight: 600; font-size: 19px; letter-spacing: .3px; } .hexmenu a { text-decoration: none; -webkit-tap-highlight-color: transparent; } /* Parts dépliantes (« Jeux », « Gestion ») : liste qui sort le long de l'arête de la part (survol ou clic, cf. app.js). Le cadre du SVG (viewBox 440×440, ratio 1:1) sert de repère : les pastilles sont placées en % de ce cadre, à ~17 unités en dehors de l'arête, dont elles suivent la pente (chaque ligne descend de 37 unités et recule de 20,5 → 8,41 % et 4,66 % de 440). « Jeux » longe l'arête haut-gauche vers la gauche, « Gestion » l'arête bas-droite vers la droite : deux jeux de coordonnées, une seule mécanique. */ .hexmenu-wrap { position: relative; width: 100%; max-width: 480px; margin: 6px auto; } .hexmenu-wrap .hexmenu { margin: 0; } /* La part allumée est celle dont la liste est sortie : l'état vit sur le déclencheur (aria-expanded), sinon les DEUX parts dépliantes s'allumeraient ensemble. */ .hexmenu .wedge--menu[aria-expanded="true"] path { filter: brightness(1.1); } /* Les pastilles « Jeux » sortent vers la GAUCHE, donc par-dessus la colonne du pense-bête (.todo, dès 1024 px) : il faut que le menu ouvert passe devant. « .home > * » enferme le menu dans un contexte d'empilement, c'est donc lui qu'on remonte. */ .hexmenu-wrap.is-open { z-index: 41; } .hexfly { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; /* Couleur de la part + sens de sortie (les pastilles arrivent depuis l'hexagone). */ --fly: #db2777; --fly-fonce: #be185d; --fly-ombre: rgba(219,39,119,.34); --fly-in: 24px; --fly-dx: -4px; /* Position de la PREMIÈRE pastille et pas entre deux pastilles, le long de l'arête. Le pas est une variable, et non un nombre écrit en dur, parce que le nombre d'entrées change : partials/hexmenu_fly.php le recalcule pour que la DERNIÈRE pastille tombe toujours au bout de l'arête, quel qu'en soit le nombre. Avant cela, une cinquième entrée sortait du cadre — le module Python n'aurait pas pu entrer dans « Jeux & Exercices » sans déborder. */ --fly-y0: 14.3%; --fly-x0: 79.8%; --fly-py: 8.41%; --fly-px: 4.66%; } .hexfly--gestion { --fly: #7c3aed; --fly-fonce: #6d28d9; --fly-ombre: rgba(124,58,237,.34); --fly-in: -24px; --fly-dx: 4px; --fly-y0: 54.6%; --fly-x0: 97.8%; } .hexfly__item { position: absolute; width: 44%; opacity: 0; visibility: hidden; transform: translate(var(--fly-in), -50%) scale(.96); transition: opacity .2s ease, transform .26s cubic-bezier(.22,.9,.3,1.2), visibility .26s; } .hexfly--jeux .hexfly__item { top: calc(var(--fly-y0) + var(--i) * var(--fly-py)); right: calc(var(--fly-x0) + var(--i) * var(--fly-px)); } .hexfly--gestion .hexfly__item { top: calc(var(--fly-y0) + var(--i) * var(--fly-py)); left: calc(var(--fly-x0) - var(--i) * var(--fly-px)); } .hexfly.is-open .hexfly__item { opacity: 1; visibility: visible; transform: translate(0, -50%) scale(1); transition-delay: calc(var(--i) * 60ms); /* les pastilles sortent l'une après l'autre */ } .hexfly__btn { pointer-events: auto; display: block; text-align: center; white-space: nowrap; padding: 9px 18px; border-radius: 11px; background: var(--fly); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; box-shadow: 0 8px 20px var(--fly-ombre); transition: background .15s ease, transform .15s ease; } a.hexfly__btn:hover { background: var(--fly-fonce); transform: translateX(var(--fly-dx)); } a.hexfly__btn:focus-visible { background: var(--fly-fonce); outline: none; box-shadow: 0 0 0 3px var(--fly-ombre), 0 8px 20px var(--fly-ombre); } .hexfly__item--ghost .hexfly__btn { background: rgba(219,39,119,.62); letter-spacing: .22em; cursor: default; } /* Écran étroit : pas la place pour la diagonale (les pastilles débordent de 181 px à gauche du cadre de 480 px) → la liste se pose sous l'hexagone. */ @media (max-width: 900px) { .hexfly { position: static; display: none; flex-direction: column; align-items: center; gap: 9px; max-width: 300px; margin: 2px auto 8px; } .hexfly.is-open { display: flex; } .hexfly__item, .hexfly--jeux .hexfly__item, .hexfly--gestion .hexfly__item { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; } .hexfly.is-open .hexfly__item { transform: none; animation: hexfly-in .24s ease both; animation-delay: calc(var(--i) * 55ms); } } @keyframes hexfly-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* Part « Documents » (accueil élève) : son arête est le HAUT, HORIZONTAL, de l'hexagone. Les deux pastilles s'y posent côte à côte, de part et d'autre de l'axe, et montent depuis l'hexagone — le chemin de la souris reste dans la part, sans traverser « Jeux & Exercices » (qui, survolée, refermerait la liste). Largeur libre : la première porte le nom du professeur. Écran étroit : rien de propre, la file générique sous l'hexagone s'applique. */ .hexfly--docs { --fly: #d97706; --fly-fonce: #b45309; --fly-ombre: rgba(217,119,6,.34); --fly-dx: 0px; } @media (min-width: 901px) { .hexfly--docs .hexfly__item { top: 4.2%; width: auto; max-width: 64%; transform: translate(0, calc(-50% + 16px)) scale(.96); } .hexfly--docs .hexfly__item:nth-child(1) { right: calc(50% + 5px); } .hexfly--docs .hexfly__item:nth-child(2) { left: calc(50% + 5px); } .hexfly--docs.is-open .hexfly__item { transform: translate(0, -50%) scale(1); } .hexfly--docs .hexfly__btn { overflow: hidden; text-overflow: ellipsis; } } /* ---- TO DO LIST (pense-bête personnel, accueil enseignant) -------------- */ .todo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 340px; margin: 0 auto 22px; overflow: hidden; font-size: .92rem; } /* Écran large : la colonne de gauche (.home__rail — ressources de la séance en cours, puis le pense-bête) se cale dans la gouttière GAUCHE, hors du flux — la recherche et le menu hexagonal gardent ainsi le centre de la page, exactement comme si elle n'était pas là. Le seuil se calcule sur le contenu VISIBLE, pas sur le cadre : le plus large est la barre de recherche (520 px), centrée. La colonne occupe 20→300 px ; pour qu'elle ne la touche pas il faut (largeur − 520) / 2 > 300, soit environ 1 150 px. On prend 1 200 px, ce qui laisse 40 px de respiration. En dessous, elle reprend sa place au-dessus du menu, centrée et pleine largeur. */ .home__rail { margin-bottom: 22px; } @media (min-width: 1200px) { .home__rail { position: fixed; left: 20px; top: 78px; width: 280px; margin: 0; z-index: 40; /* Filet de sécurité : deux panneaux pleins ne débordent pas de l'écran. Chacun borne d'abord SA propre liste (voir .sres__list et .todo__body), pour que la barre de défilement de la colonne reste l'exception. */ max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; } .home__rail .sres, .home__rail .todo { width: 100%; max-width: none; margin: 0 0 12px; } .home__rail > :last-child { margin-bottom: 0; } } .todo__head { display: flex; align-items: center; border-bottom: 1px solid var(--border); } .todo__toggle { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; background: none; border: 0; cursor: pointer; color: var(--slate-800); font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; padding: 12px 8px; } .todo__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--primary); transition: transform .2s ease; } .todo.is-collapsed .todo__caret { transform: rotate(-90deg); } .todo__bell { flex: none; background: none; border: 0; cursor: pointer; color: var(--slate-400); padding: 8px; margin-right: 4px; border-radius: 8px; display: inline-flex; } .todo__bell svg { width: 18px; height: 18px; } .todo__bell:hover { background: var(--slate-100); color: var(--slate-600); } .todo__bell.is-on { color: var(--primary); } .todo__bell.is-denied { color: #dc2626; } .todo__bell.is-unsupported { display: none; } .todo__body { padding: 10px 10px 12px; max-height: min(62vh, 520px); overflow: auto; } .todo.is-collapsed .todo__body { display: none; } .todo__list { margin: 0; padding: 0 0 0 24px; list-style: decimal; } .todo__list li::marker { color: var(--slate-400); font-size: .82em; font-weight: 700; } .todo-item { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 0; } .todo-item.is-dragging { opacity: .55; } .todo-item__grip { flex: none; cursor: grab; touch-action: none; background: none; border: 0; color: var(--slate-300); padding: 0 1px; font-size: .9rem; line-height: 1; } .todo-item__grip:active { cursor: grabbing; } .todo-item__check { flex: none; width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; } .todo-item__text { flex: 1; min-width: 0; outline: none; border-radius: 5px; padding: 2px 4px; word-break: break-word; } .todo-item__text:focus { background: var(--slate-100); box-shadow: 0 0 0 1px var(--slate-200) inset; } .todo-item.is-done .todo-item__text { text-decoration: line-through; color: var(--muted); } .todo-item__tools { flex: none; display: inline-flex; align-items: center; gap: 1px; } .todo-item__pin, .todo-item__del { background: none; border: 0; cursor: pointer; color: var(--slate-300); padding: 2px 3px; font-size: .95rem; line-height: 1; border-radius: 5px; } .todo-item__pin:hover { background: var(--slate-100); color: #d97706; } .todo-item__pin.is-on { color: #f59e0b; } .todo-item.is-pinned { background: linear-gradient(90deg, rgba(245,158,11,.10), transparent 60%); border-radius: 6px; } .todo-item__del:hover { background: #fef2f2; color: #dc2626; } /* Échéance compacte : icône calendrier au repos, date lisible dès qu'elle est posée. La largeur de la ligne est FIGÉE, et c'est l'essentiel : dans la colonne de gauche (280 px), une ligne ne dispose que de 234 px, dont 98 px déjà pris par ⚑, l'échéance et ×. Ouvrir le champ DANS la ligne — ce que faisait le survol — ne laissait qu'une trentaine de pixels au libellé, qui tombait à un caractère par ligne et faisait enfler la ligne jusqu'à un demi-écran de haut. Le survol ne révèle donc plus que le cadre du champ ; c'est le focus, geste délibéré, qui l'ouvre, et il le fait sur SA PROPRE bande sous la tâche, où il prend toute la largeur du panneau sans rien retirer au libellé. La largeur est portée par le LABEL, pas par le champ : elle reste réservée quand le champ s'en détache pour s'ouvrir, sinon ⚑ et × glisseraient à chaque clic. */ .todo-item__date { flex: none; display: inline-flex; align-items: center; width: 20px; } .todo-item__date.is-set { width: 64px; } .todo-item__date input[type=date] { font: inherit; font-size: .74rem; color: transparent; background: none; border: 1px solid transparent; border-radius: 6px; padding: 1px; width: 100%; cursor: pointer; color-scheme: light; transition: border-color .12s ease, color .12s ease; } .todo-item__date input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; } .todo-item__date.is-set input { color: var(--muted); } .todo-item__date.is-today input { color: #d97706; font-weight: 700; } .todo-item__date.is-late input { color: #dc2626; font-weight: 700; } .todo-item:hover .todo-item__date input { border-color: var(--border); } .todo-item:hover .todo-item__date:not(.is-set) input { color: var(--muted); } .todo-item__date input:focus { position: absolute; left: 2px; right: 2px; bottom: 3px; z-index: 2; width: auto; padding: 2px 6px; color: var(--text); font-weight: 400; border-color: var(--primary); background: var(--card); } /* La bande n'existe que pendant la saisie — la réserver en permanence coûterait 27 px par tâche. Sans :has(), le champ ouvert déborde simplement d'un cran sur la tâche suivante. */ .todo-item:has(.todo-item__date input:focus) { padding-bottom: 27px; } .todo__add { padding-left: 24px; margin-top: 6px; } .todo__add-line { display: block; min-height: 1.5em; outline: none; padding: 4px 6px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text); word-break: break-word; } .todo__add-line:focus { border-style: solid; border-color: var(--primary); background: var(--slate-50); } .todo__add-line:empty::before { content: attr(data-placeholder); color: var(--slate-400); } /* ---- Ressources de la séance en cours (accueil, colonne de gauche) ------ Tant qu'une séance tourne, ce qui a été préparé pour elle reste à un clic : une puce hexagonale à la couleur du type d'hexagone, le titre juste après. Le panneau reprend le cadre de la TO DO LIST — même carte, même graisse — et se pose juste au-dessus d'elle. */ .sres { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 340px; margin: 0 auto 14px; overflow: hidden; font-size: .92rem; } .sres__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px 10px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #fff, var(--slate-50)); } .sres__id { min-width: 0; } .sres__title { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; color: var(--slate-800); margin: 0; } .sres__meta { margin: 1px 0 0; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Même point rouge « ça tourne » que le bandeau de séance, même battement (sbar-pulse). */ .sres__rec { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: sbar-pulse 2s infinite; } .sres__list { list-style: none; margin: 0; padding: 6px; max-height: 38vh; overflow: auto; } .sres__item { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 10px; color: var(--slate-700); transition: background .12s ease, color .12s ease; } .sres__item:hover { background: var(--slate-50); color: var(--slate-900); text-decoration: none; } .sres__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Puce hexagonale : la silhouette des hexagones de « Mes documents » (arêtes plates en haut et en bas), réduite à la taille d'une ligne de liste. La couleur vient de --h1/--h2, posés plus bas par type ; le repli ardoise garantit qu'un type non prévu ici reste visible plutôt que transparent. */ .sres__hex { flex: none; width: 30px; height: 26px; display: grid; place-items: center; color: #fff; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: linear-gradient(150deg, var(--h1, var(--slate-400)), var(--h2, var(--slate-500))); transition: transform .14s ease; } .sres__item:hover .sres__hex { transform: scale(1.09); } .sres__hex svg { width: 15px; height: 15px; } .sres__lbl { flex: 1; min-width: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Chevron dessiné au trait, révélé au survol : il annonce l'ouverture sans peser au repos. */ .sres__item::after { content: ''; flex: none; width: 6px; height: 6px; margin-right: 3px; border-right: 2px solid var(--slate-400); border-top: 2px solid var(--slate-400); opacity: 0; transform: translateX(-3px) rotate(45deg); transition: opacity .14s ease, transform .14s ease; } .sres__item:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); } /* Figure à construire : le lien principal ouvre la figure, un second mène aux travaux des élèves. */ .sres__li--travaux { display: flex; align-items: center; gap: 2px; } .sres__li--travaux .sres__item { flex: 1; min-width: 0; } .sres__travaux { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--slate-500); } .sres__travaux:hover { background: var(--slate-100); color: var(--primary); } .sres__travaux svg { width: 17px; height: 17px; } .sres__more { display: block; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--slate-50); color: var(--slate-500); font-size: .8rem; font-weight: 600; } .sres__more::after { content: ' →'; } .sres__more:hover { background: var(--slate-100); color: var(--primary); text-decoration: none; } /* Deux panneaux dans la gouttière : le pense-bête cède de la hauteur à la séance, qui n'est là que le temps du cours. */ .sres + .todo .todo__body { max-height: min(34vh, 300px); } /* Couleur de la puce par type d'hexagone — celles de « Mes documents » (.hm-hex--*). Deux types y sont dessinés par un aperçu et n'ont pas de dégradé plein à reprendre : « arbre » et « poses » héritent ici de la teinte de leur fond pastel, en soutenu. */ .sres__hex[data-t="lecon"] { --h1: var(--acc-cours-1); --h2: var(--acc-cours-2); } .sres__hex[data-t="fichier"] { --h1: #60a5fa; --h2: #2563eb; } .sres__hex[data-t="videofile"] { --h1: #64748b; --h2: #0f172a; } .sres__hex[data-t="audiofile"] { --h1: #34d399; --h2: #047857; } .sres__hex[data-t="lien"] { --h1: var(--acc-cours-1); --h2: var(--acc-cours-2); } .sres__hex[data-t="youtube"] { --h1: #f87171; --h2: #dc2626; } .sres__hex[data-t="note"] { --h1: var(--acc-doc-1); --h2: var(--acc-doc-2); } .sres__hex[data-t="flash"] { --h1: var(--acc-flash-1); --h2: var(--acc-flash-2); } .sres__hex[data-t="geogebra"] { --h1: var(--acc-ggb-1); --h2: var(--acc-ggb-2); } .sres__hex[data-t="mathalea"] { --h1: var(--acc-alea-1); --h2: var(--acc-alea-2); } .sres__hex[data-t="mathsmentales"] { --h1: #93c5fd; --h2: #1e40af; } .sres__hex[data-t="scratch"] { --h1: #fbbf24; --h2: #d97706; } .sres__hex[data-t="html"] { --h1: #38bdf8; --h2: #0284c7; } .sres__hex[data-t="barres"] { --h1: #f472b6; --h2: #db2777; } .sres__hex[data-t="arbre"] { --h1: #a3e635; --h2: #4d7c0f; } .sres__hex[data-t="fonction"] { --h1: #38bdf8; --h2: #0369a1; } .sres__hex[data-t="carte"] { --h1: #fb7185; --h2: #9f1239; } .sres__hex[data-t="dessin"] { --h1: #e879f9; --h2: #a21caf; } .sres__hex[data-t="proba"] { --h1: #fcd34d; --h2: #b45309; } .sres__hex[data-t="exercice"] { --h1: #34d399; --h2: #047857; } .sres__hex[data-t="poses"] { --h1: #fdba74; --h2: #ea580c; } .sres__hex[data-t="ecran"] { --h1: var(--acc-estrade-1); --h2: var(--acc-estrade-2); } /* ---- Carte placeholder (espace élève) ---------------------------------- */ .placeholder-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; max-width: 560px; margin: 0 auto; text-align: center; } .placeholder-card h2 { margin-top: 0; } /* ---- Pages d'authentification ------------------------------------------ */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #1e293b, var(--slate-900)); } .auth-shell { width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; margin-bottom: 18px; } .auth-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 26px; } .auth-title { margin: 0 0 4px; font-size: 1.35rem; color: var(--slate-900); } .auth-lead { margin: 0 0 20px; color: var(--muted); font-size: .92rem; } .auth-alt { margin: 18px 0 0; text-align: center; font-size: .9rem; color: var(--muted); } /* ---- Page d'accueil publique (avant connexion) ------------------------- */ .landing-body { display: flex; flex-direction: column; min-height: 100vh; color: #e2e8f0; background: radial-gradient(1200px 700px at 78% -8%, rgba(79,70,229,.30), transparent 60%), radial-gradient(1000px 600px at 6% 8%, rgba(8,145,178,.22), transparent 55%), linear-gradient(160deg, #0b1220, var(--slate-900) 55%, #0b1220); } .landing-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; position: relative; z-index: 2; } .landing-topbar .brand__name { font-weight: 500; } .landing-teacher { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--slate-300); border: 1px solid rgba(148,163,184,.28); background: rgba(15,23,42,.35); transition: color .15s, border-color .15s, background .15s; } .landing-teacher:hover { text-decoration: none; color: #fff; border-color: rgba(148,163,184,.55); background: rgba(148,163,184,.14); } .landing-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 24px 36px; } .landing { position: relative; width: 100%; max-width: 1060px; } .landing-deco { position: absolute; inset: -80px -40px auto -40px; height: 600px; width: calc(100% + 80px); opacity: .8; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(70% 70% at 50% 35%, #000, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 35%, #000, transparent 80%); } .landing-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .landing-intro { max-width: 560px; } .landing-eyebrow { display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a5b4fc; padding: 5px 12px; border-radius: 999px; background: rgba(99,102,241,.16); border: 1px solid rgba(99,102,241,.32); } .landing-headline { font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.06; margin: 18px 0 14px; color: #fff; letter-spacing: -.02em; } .landing-headline span { background: linear-gradient(120deg, #38bdf8, #818cf8 55%, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-sub { color: #cbd5e1; font-size: 1.05rem; margin: 0 0 26px; max-width: 48ch; } .landing-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .lf { display: flex; align-items: flex-start; gap: 14px; } .lf__hex { flex: 0 0 auto; width: 46px; height: 52px; display: grid; place-items: center; color: #fff; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); box-shadow: 0 6px 16px rgba(15,23,42,.45); } .lf__hex svg { width: 22px; height: 22px; } .lf--cours .lf__hex { background: linear-gradient(150deg, var(--acc-cours-1), var(--acc-cours-2)); } .lf--docs .lf__hex { background: linear-gradient(150deg, var(--acc-doc-1), var(--acc-doc-2)); } .lf--cahier .lf__hex { background: linear-gradient(150deg, var(--acc-cahier-1), var(--acc-cahier-2)); } .lf--memo .lf__hex { background: linear-gradient(150deg, #f472b6, #db2777); } .lf__body { display: flex; flex-direction: column; gap: 2px; } .lf__title { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.02rem; } .lf__desc { color: #94a3b8; font-size: .9rem; line-height: 1.45; } /* Cadre de connexion élève */ .landing-login { display: flex; justify-content: center; } .login-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 20px; padding: 26px 26px 22px; color: var(--text); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 24px 60px rgba(2,6,23,.55), 0 2px 8px rgba(2,6,23,.4); } .login-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .login-card__hex { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; background: linear-gradient(150deg, #6366f1, #4338ca); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .login-card__hex .logo { width: 24px; height: 27px; } .login-card__title { margin: 0; font-size: 1.25rem; color: var(--slate-900); } .login-card__lead { margin: 2px 0 0; font-size: .86rem; color: var(--muted); } .login-card__hint { margin: 16px 0 0; font-size: .82rem; color: var(--muted); text-align: center; } @media (max-width: 860px) { .landing-grid { grid-template-columns: 1fr; gap: 30px; } .landing-intro { max-width: none; text-align: center; margin: 0 auto; } .landing-sub { margin-left: auto; margin-right: auto; } .lf { text-align: left; } .landing-features { max-width: 480px; margin: 0 auto; } .landing-deco { display: none; } } @media (max-width: 480px) { .landing-topbar { padding: 14px 16px; } .landing-teacher span { display: inline; } .login-card { padding: 22px 18px 18px; } } .landing-footer { text-align: center; color: var(--slate-500); font-size: .82rem; padding: 18px; position: relative; z-index: 1; } /* ---- Formulaires -------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: .85rem; font-weight: 600; color: var(--slate-700); } .field__input { width: 100%; padding: 11px 12px; font: inherit; color: var(--text); color-scheme: light; border: 1px solid var(--slate-300); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; } .field__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.18); } .field__input--pin { letter-spacing: .5em; text-align: center; font-size: 1.1rem; } .field__input:disabled { background: var(--slate-100); color: var(--slate-500); cursor: not-allowed; } .form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* ---- Avatar (photo de profil ronde, ou initiales) ----------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; flex: none; background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: 600; line-height: 1; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar--sm { width: 30px; height: 30px; font-size: .78rem; } .avatar--lg { width: 96px; height: 96px; font-size: 2rem; box-shadow: var(--shadow); } /* ---- Profil enseignant -------------------------------------------------- */ .profil { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .profil__title { margin: 0; } .profil-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 24px; } .profil-card .card__title { margin: 0 0 16px; font-size: 1.05rem; color: var(--slate-800); } .avatar-edit { display: flex; align-items: center; gap: 22px; } .avatar-edit__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .avatar-edit__hint { margin: 2px 0 0; font-size: .82rem; color: var(--muted); } .avatar-edit .btn { cursor: pointer; } .btn--ghost-dark { background: transparent; color: var(--slate-700); border-color: var(--slate-300); } .btn--ghost-dark:hover { background: var(--slate-100); } /* Lien profil dans la barre supérieure */ .topbar__profil { display: inline-flex; align-items: center; gap: 9px; color: #fff; } .topbar__profil:hover { text-decoration: none; } .topbar__profil:hover .topbar__user { color: #fff; } /* Règles de robustesse du mot de passe */ .pw-rules { list-style: none; margin: -8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; color: var(--muted); } .pw-rules li { position: relative; padding-left: 18px; } .pw-rules li::before { content: '○'; position: absolute; left: 0; color: var(--slate-400); } .pw-rules li.is-ok { color: #15803d; } .pw-rules li.is-ok::before { content: '✓'; color: #15803d; } /* ---- Pages d'erreur ----------------------------------------------------- */ .error-card { text-align: center; max-width: 420px; } .error-code { font-size: 3rem; font-weight: 800; color: var(--slate-300); margin: 0; } .error-card h1 { margin: 4px 0 10px; } .error-card p { color: var(--muted); margin-bottom: 20px; } /* ---- Toast (modules à venir) ------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--slate-900); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.35); font-size: .92rem; z-index: 50; opacity: 0; transition: opacity .2s, transform .2s; } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Responsive : le nid d'abeille devient une pile de cartes ----------- */ @media (max-width: 600px) { .honeycomb { grid-template-columns: 1fr; padding-bottom: 0; } .hex, .honeycomb .hex:nth-child(2n) { width: 100%; height: auto; min-height: 132px; clip-path: none; border-radius: var(--radius); transform: none; } .hex:hover, .hex:nth-child(odd):hover, .hex:nth-child(2n):hover { transform: none; } .hex__inner { position: static; padding: 22px; } } /* ========================================================================= Bloc « Mes documents » ========================================================================= */ .btn--light { background: var(--slate-100); color: var(--slate-800); border-color: var(--slate-200); } .btn--light:hover { background: var(--slate-200); } .btn--ghost-dark { background: transparent; color: var(--slate-600); border-color: var(--slate-300); } .btn--ghost-dark:hover { background: var(--slate-100); } .btn--xs { padding: 4px 10px; font-size: .82rem; } .linklike { background: none; border: 0; color: var(--primary); cursor: pointer; font: inherit; padding: 0; } .linklike:hover { text-decoration: underline; } .docs__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .breadcrumb { font-size: .95rem; color: var(--muted); } .breadcrumb a { color: var(--slate-700); } .breadcrumb__sep { margin: 0 6px; color: var(--slate-400); } .docs__actions { display: flex; gap: 10px; align-items: center; } .menu { position: relative; } .menu__list { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 20; min-width: 200px; } .menu__list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; } .menu__list button:hover { background: var(--slate-100); } .docs__filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .docs__filters .field__input { width: auto; min-width: 140px; } .docs__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .tagchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: .85rem; } .tagchip:hover { text-decoration: none; background: var(--slate-200); } .tagchip.is-on { background: var(--primary); color: #fff; } .tagchip__nb { font-size: .72rem; opacity: .7; } .docs__hint { color: var(--muted); font-size: .88rem; margin: 4px 0 10px; } .docs__empty { color: var(--muted); text-align: center; padding: 40px 0; } /* Section vide : hexagone « + » invitant au premier ajout */ .hm-empty { position: absolute; left: 0; top: 0; width: 230px; height: 200px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; } .hm-empty__svg { position: absolute; inset: 0; width: 100%; height: 100%; } .hm-empty__svg polygon { fill: var(--slate-50); stroke: var(--slate-300); stroke-width: 3; stroke-dasharray: 7 8; stroke-linejoin: round; transition: fill .14s ease, stroke .14s ease; } .hm-empty:hover .hm-empty__svg polygon { fill: #eef2ff; stroke: var(--primary); } .hm-empty__plus { position: relative; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--slate-400); transition: color .14s ease; } .hm-empty:hover .hm-empty__plus { color: var(--primary); } /* Glisser-déposer un fichier : hexagones vides aux emplacements libres */ .docs.is-fdrag .hm-empty { display: none; } /* remplacé par les fantômes ci-dessous */ .hm-ghost { position: absolute; width: 230px; height: 200px; display: grid; place-items: center; z-index: 6; } .hm-ghost__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hm-ghost__svg polygon { fill: var(--slate-50); stroke: var(--slate-300); stroke-width: 3; stroke-dasharray: 7 8; stroke-linejoin: round; transition: fill .14s ease, stroke .14s ease; } .hm-ghost__plus { position: relative; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--slate-400); pointer-events: none; transition: color .14s ease; } .hm-ghost.is-lit { z-index: 7; } .hm-ghost.is-lit .hm-ghost__svg polygon { fill: #eef2ff; stroke: var(--primary); stroke-dasharray: none; } .hm-ghost.is-lit .hm-ghost__plus { color: var(--primary); } /* Canvas + tuiles : pavage hexagonal régulier emboîté (rapport H/W = 2/√3) */ .hm-canvas { position: relative; margin: 0 auto; } .hm-tile { position: absolute; width: 230px; height: 200px; } .hm-hex { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; color: #fff; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* pas de scale : on veut désormais un écart de 1 mm entre hexagones (cf. STEP_X/STEP_Y dans documents.js) */ display: grid; place-items: center; overflow: hidden; transition: filter .12s ease; } .hm-tile:hover { z-index: 5; } .hm-tile:hover .hm-hex { filter: brightness(1.07); } .hm-tile.is-dragging { z-index: 200; } /* au-dessus du tiroir (100) pour déposer sur l'arborescence */ .hm-tile.is-dragging .hm-hex { filter: brightness(1.1) drop-shadow(0 10px 16px rgba(15,23,42,.4)); } .hm-hex__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 14px; text-align: center; } .hm-hex__in svg { width: 28px; height: 28px; } .hm-hex__title { font-size: .74rem; font-weight: 700; line-height: 1.12; max-width: 92px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hm-hex__badges { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; } .hm-hex__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hm-hex__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 9px; font-size: .7rem; font-weight: 700; line-height: 1.1; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Outils au survol d'une tuile : pastille flottante, icônes au trait (jamais d'emojis — rendu identique d'un poste à l'autre). Elle entre en fondu + léger glissement plutôt que d'apparaître d'un coup, et « visibility » la retire du parcours clavier au repos. */ .hm-tile__tools { position: absolute; top: 9px; left: 50%; z-index: 6; display: flex; gap: 1px; padding: 3px; background: rgba(255,255,255,.96); border: 1px solid rgba(15,23,42,.07); border-radius: 999px; box-shadow: 0 6px 18px rgba(15,23,42,.22), 0 1px 3px rgba(15,23,42,.14); opacity: 0; visibility: hidden; transform: translate(-50%, -5px); transition: opacity .14s ease, transform .16s cubic-bezier(.2,.8,.3,1), visibility .16s; } .hm-tile:hover .hm-tile__tools { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .hm-tile__tools button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--slate-500); cursor: pointer; display: grid; place-items: center; transition: background .12s ease, color .12s ease, transform .12s ease; } .hm-tile__tools button svg { width: 15px; height: 15px; display: block; } .hm-tile__tools button:hover { background: var(--slate-100); color: var(--slate-900); transform: translateY(-1px); } .hm-tile__tools button:active { transform: scale(.92); } .hm-tile__tools button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Teinte propre à chaque famille d'action : l'intention se lit avant même l'icône. */ .hm-tile__tools button[data-action="edit"]:hover, .hm-tile__tools button[data-action="rename"]:hover, .hm-tile__tools button[data-action="dup"]:hover { background: #e0e7ff; color: var(--primary-d); } .hm-tile__tools button[data-action="share"]:hover, .hm-tile__tools button[data-action="ggb-dl"]:hover, .hm-tile__tools button[data-action="scratch-dl"]:hover, .hm-tile__tools button[data-action="html-dl"]:hover { background: #dbeafe; color: #1d4ed8; } .hm-tile__tools button[data-action="eleve"]:hover { background: #d1fae5; color: #047857; } .hm-tile__tools button[data-action="trash"]:hover { background: #fee2e2; color: #b91c1c; } .hm-hex--folder { background: linear-gradient(150deg, #818cf8, #4f46e5); } .hm-hex--fichier { background: linear-gradient(150deg, #60a5fa, #2563eb); } .hm-hex--lien { background: linear-gradient(150deg, var(--acc-cours-1), var(--acc-cours-2)); } .hm-hex--youtube { background: linear-gradient(150deg, #f87171, #dc2626); } .hm-hex--note { background: linear-gradient(150deg, var(--acc-doc-1), var(--acc-doc-2)); } .hm-hex--flash { background: linear-gradient(150deg, var(--acc-flash-1), var(--acc-flash-2)); } /* Questions flash (sans vignette) : pas d'icône, titre plus grand (il est le contenu). */ .hm-hex--flash .hm-hex__ic { display: none; } .hm-hex--flash .hm-hex__name { font-size: 1.02rem; -webkit-line-clamp: 4; } .hm-hex--geogebra { background: linear-gradient(150deg, var(--acc-ggb-1), var(--acc-ggb-2)); } .hm-hex--geogebra .hm-hex__ic svg { width: 46%; height: 46%; } /* Figure GeoGebra / PDF : pas d'icône (le titre passe par-dessus l'aperçu). Le style du titre — centré, noir, surlignage blanc — vient de la règle de base commune. */ .hm-tile[data-type="geogebra"] .hm-hex__ic { display: none; } .hm-tile[data-type="geogebra"] .hm-hex__name { font-size: .96rem; -webkit-line-clamp: 4; } .hm-tile[data-pdf-doc] .hm-hex__ic { display: none; } .hm-tile[data-pdf-doc] .hm-hex__name { font-size: .96rem; -webkit-line-clamp: 4; } /* Fichier vidéo : hexagone graphite façon salle obscure, remplacé par l'affiche du film dès qu'elle est capturée (media.js). La pastille de lecture reste dans les deux cas — c'est elle qui dit « ça se regarde » ; elle est placée au-dessus du titre pour ne pas le gêner. */ .hm-hex--videofile { background: linear-gradient(155deg, #64748b, #0f172a); } .hm-hex--audiofile { background: linear-gradient(155deg, #34d399, #047857); } .hm-tile[data-video-doc] .hm-hex__ic { display: none; } .hm-hex__play { position: absolute; top: 27%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(15,23,42,.55); border: 2px solid rgba(255,255,255,.92); display: grid; place-items: center; pointer-events: none; z-index: 1; transition: background .12s ease, transform .12s ease; } .hm-hex__play::after { content: ""; margin-left: 3px; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .hm-tile:hover .hm-hex__play { background: rgba(15,23,42,.78); transform: translate(-50%, -50%) scale(1.08); } /* Mathaléa : logo MathALÉA (auto-hébergé) en visuel par défaut sur fond violet, titre en bandeau bas comme les tuiles à aperçu ; une vignette posée remplace le tout (la classe devient hm-hex--img). */ .hm-hex--mathalea { background: url('../img/mathalea-logo.svg') center 40% / 46% auto no-repeat, linear-gradient(150deg, var(--acc-alea-1), var(--acc-alea-2)); } .hm-hex--mathalea .hm-hex__ic { display: none; } /* Programme Scratch (sans vignette) : logo « chat Scratch » (auto-hébergé) sur fond clair — le chat est orange, il lui faut un fond clair pour ressortir. Une vignette d'aperçu enregistrée le remplace (la classe devient hm-hex--img). */ .hm-hex--scratch { background: url('../img/scratch-logo.png') center 44% / 58% auto no-repeat, linear-gradient(160deg, #ffffff, #ffe4c4); } .hm-hex--scratch .hm-hex__ic { display: none; } /* Page HTML (sans vignette) : dégradé bleu ciel + icône « code ». */ /* Maths mentales : diaporama d'automatismes (mathsmentales.net) — bleu roi du compte à rebours du site, icône « écran + chrono ». */ .hm-hex--mathsmentales { background: linear-gradient(150deg, #93c5fd, #1e40af); } .hm-hex--mathsmentales .hm-hex__ic svg { width: 46%; height: 46%; } .hm-hex--html { background: linear-gradient(150deg, #38bdf8, #0284c7); } .hm-hex--html .hm-hex__ic svg { width: 46%; height: 46%; } .hm-hex--barres { background: linear-gradient(150deg, #f472b6, #db2777); } .hm-hex--barres .hm-hex__ic svg { width: 46%; height: 46%; } /* Schéma en barres : miniature du schéma dessinée en fond d'hexagone (barres-core.js depuis le JSON embarqué dans la tuile). Fond rose très clair pour rester lisible. */ .hm-hex--barresbg { background: linear-gradient(150deg, #fdf2f8, #fbcfe8); } .hm-hex--barresbg .hm-hex__ic { display: none; } .hm-hex__barres { position: absolute; inset: 14% 15%; display: grid; place-items: center; pointer-events: none; } .hm-hex__barres svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } .hm-hex--barresbg .hm-hex__name { font-size: .84rem; -webkit-line-clamp: 3; } /* Aperçu de la page rendu en fond de l'hexagone (html-embed.js pose l'iframe bac à sable). Non interactif : le clic traverse jusqu'à l'hexagone (ouverture de la visionneuse). Les dimensions de l'iframe sont posées en ligne — ici on ne gère que le calque et les couches. */ .hm-hex__htmlbg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #fff; z-index: 0; } .hm-hex--htmlbg .hm-hex__ic { display: none; } .hm-hex--htmlbg .hm-hex__name, .hm-hex--htmlbg .hm-hex__pub, .hm-hex--htmlbg .hm-hex__eleve { z-index: 1; } .hm-hex__badges .badge { font-size: .6rem; padding: 1px 5px; } .badge { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--slate-700); color: #fff; } .badge--soft { background: var(--slate-200); color: var(--slate-700); } .badge--pub { background: #047857; } .tagdot { font-size: .72rem; color: var(--primary); } /* Le pavage est calculé en JS (positions absolues), identique sur tous les écrans. */ /* ========================================================================= Modales ========================================================================= */ body.modal-open { overflow: hidden; } .modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow: auto; z-index: 100; } .modal[hidden] { display: none; } .modal__box { background: #fff; border-radius: 16px; padding: 22px 24px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(15,23,42,.4); } .modal__box--sm { max-width: 440px; } .modal__box--flash { max-width: 820px; } .modal__head { display: flex; align-items: center; justify-content: space-between; } .modal__title { margin: 0 0 16px; font-size: 1.2rem; } .modal__head .modal__title { margin-bottom: 0; } .modal__x { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); } .modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .modal__foot[hidden] { display: none; } /* le display:flex ci-dessus l'emporterait sinon sur [hidden] */ .modal__error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; padding: 8px 12px; border-radius: 8px; font-size: .9rem; } .field__hint { font-size: .8rem; color: var(--muted); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid2 .field { margin: 14px 0 0; } /* Un champ masqué (attribut hidden) doit se replier malgré .field { display:flex }. */ .field[hidden] { display: none; } .editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .editor__bar { display: flex; align-items: center; justify-content: space-between; } .editor__src { font-family: var(--font-mono, ui-monospace, monospace); resize: vertical; } .editor__preview { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 140px; max-height: 320px; overflow: auto; background: var(--slate-50); } /* ==== Clavier mathématique partagé (js/mathpad.js, présentation type iDroo) ==== Barre de palettes dépliantes + champ MathLive (la formule se dessine pendant la frappe) + zone « Code LaTeX ». La superposition .mp-ov est volontairement distincte de .modal : elle passe au-dessus des modales ouvertes (doc-modal, seance-modal…). */ .mp-ov { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow: auto; z-index: 400; } .modal__box--mathpad { max-width: 760px; } .mp-kbd { position: relative; margin-bottom: 12px; } .mp-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06); } .mp-tab { min-width: 38px; height: 36px; padding: 0 7px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: .98rem; color: #52708f; font-family: Georgia, 'Times New Roman', serif; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; transition: background .12s ease, color .12s ease; } .mp-tab:hover { background: var(--slate-100); } .mp-tab.is-on { background: #52708f; color: #fff; } .mp-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(var(--mp-cols, 8), minmax(44px, 1fr)); gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.2); max-height: 320px; overflow: auto; } .mp-panel[hidden] { display: none; } .mp-key { min-height: 40px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1.1; color: #52708f; font-family: Georgia, 'Times New Roman', serif; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; } .mp-key:hover { background: #eef2ff; color: var(--primary); } .mp-key:active { transform: translateY(1px); } .mp-key sup, .mp-key sub { font-size: .62em; } /* Petite case pointillée des étiquettes (argument à compléter, comme iDroo). */ .mp-key i, .mp-tab i { display: inline-block; width: .55em; height: .55em; margin: 0 1px; border: 1px dashed #94a3b8; border-radius: 2px; font-style: normal; } /* Étiquette empilée (fraction, bornes, accent au-dessus/en-dessous). */ .mp-st { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap: 1px; } .mp-st small { font-size: .62em; line-height: .9; } .mp-st b { display: block; width: .9em; height: 1px; background: currentColor; } .mp-field-wrap { margin-bottom: 8px; } .mathpad__field { display: block; width: 100%; font-size: 1.5rem; padding: 12px 14px; border: 1px solid var(--slate-300); border-radius: 12px; background: #fff; } .mathpad__field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.18); } /* Boutons internes de MathLive (clavier virtuel ⌨ et menu ☰) : superflus, le clavier iDroo suffit. */ .mathpad__field::part(virtual-keyboard-toggle), .mathpad__field::part(menu-toggle) { display: none; } /* Aperçu MathJax du mode « code seul » (MathLive indisponible). */ .mp-preview { min-height: 64px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--slate-300); border-radius: 12px; background: #fff; font-size: 1.25rem; padding: 10px; } .mp-preview__empty { color: var(--slate-400); font-size: .9rem; } .mp-code-wrap { margin-bottom: 8px; } .mp-code { display: block; width: 100%; resize: vertical; padding: 8px 10px; border: 1px solid var(--slate-300); border-radius: 10px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .92rem; } .mp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mp-bar .mathpad__hint { margin: 0; } .mp-code-btn.is-on { background: var(--slate-200); } .mathpad__hint { margin: 10px 0 0; font-size: .82rem; color: var(--muted); } .mathpad__hint code { background: var(--slate-100); border-radius: 5px; padding: 1px 5px; font-size: .92em; } .switch { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; } .copyrow { display: flex; gap: 8px; } .copyrow .field__input { flex: 1; } /* ==== Recherche YouTube de l'hexagone « Vidéo » (js/youtube.js) ==== Barre de recherche + grille de vignettes cliquables + aperçu du lecteur. La liste est bornée en hauteur pour que le bas de la modale (métadonnées, Enregistrer) reste atteignable sans faire défiler toute la page. */ .yt-bar { display: flex; gap: 8px; } .yt-bar .field__input { flex: 1 1 auto; min-width: 0; } .yt-bar .btn { flex: 0 0 auto; } #dm-yt-status.is-error { color: #b91c1c; } .yt-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 340px; overflow: auto; padding: 4px 2px; margin-top: 4px; } .yt-results[hidden] { display: none; } .yt-card { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; } .yt-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(15,23,42,.14); transform: translateY(-1px); } .yt-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .yt-card__th { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--slate-200); } .yt-card__th img { width: 100%; height: 100%; object-fit: cover; display: block; } .yt-card__dur { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(15,23,42,.82); color: #fff; font-size: .7rem; font-weight: 700; } .yt-card__info { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; min-width: 0; } .yt-card__t { font-size: .82rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .yt-card__s { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yt-pick { margin-top: 8px; } .yt-pick[hidden] { display: none; } .yt-pick__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; } .yt-pick__t { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yt-pick__bar .linklike { flex: 0 0 auto; font-size: .82rem; } .viewer-body { margin-top: 8px; } .viewer-tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .embed { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; } .embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed video { background: #000; object-fit: contain; } .embed--pdf { padding-top: 0; height: 70vh; } .embed--pdf iframe { position: static; height: 100%; } /* Visionneuse PDF : modale étendue quasi plein écran pour une lecture maximale. La boîte remplit la hauteur (header figé en haut) et l'iframe occupe l'espace restant. */ .modal--pdf { padding: 12px; } .modal__box--pdf { max-width: 1600px; width: 97vw; padding: 12px 16px; height: calc(100vh - 24px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; } .modal__box--pdf .viewer-body { margin-top: 6px; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; } .modal__box--pdf .embed--pdf { flex: 1 1 auto; min-height: 480px; height: auto; border-radius: 6px; } /* Lecteur d'un fichier audio/vidéo de la bibliothèque (js/media.js). La scène noire prend toute la hauteur disponible — une vidéo projetée à la classe ne doit pas être une vignette au milieu d'une page blanche — et la barre du bas réunit la fiche technique du fichier, la vitesse de lecture (revoir une démonstration au ralenti) et le téléchargement. */ .modal__box--video { max-width: 1400px; width: 96vw; padding: 12px 16px 14px; height: calc(100vh - 24px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; } .modal__box--video .viewer-body { margin-top: 8px; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; } .vplayer { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } /* Hors visionneuse, la scène épouse l'image (pas de bandes noires autour d'une vidéo verticale au milieu d'une page claire) ; dans la visionneuse, elle remplit la boîte. */ .vplayer__stage { display: grid; place-items: center; background: #000; border-radius: 10px; overflow: hidden; width: fit-content; max-width: 100%; margin: 0 auto; } /* Hors visionneuse (page élève, partage par lien, bloc de leçon), l'image est bornée à l'écran : une vidéo filmée à la verticale ferait sinon défiler la page sur trois hauteurs. */ .vplayer__media { display: block; max-width: 100%; max-height: min(76vh, 760px); } /* Dans la visionneuse, la boîte a une hauteur définie : la scène prend tout le reste. La borne de l'image est exprimée en unités d'écran et NON en pourcentage : dans cette chaîne flex → grid, un « max-height: 100% » est résolu contre une hauteur encore indéfinie, donc ignoré — une vidéo verticale débordait alors de la scène. Les 170 px retranchés couvrent le cadre de la modale (marges, titre, barre du lecteur). */ .modal__box--video .vplayer__stage { flex: 1 1 auto; min-height: 240px; width: auto; } .modal__box--video .vplayer__media { max-height: calc(100vh - 170px); } .vplayer__stage--err { background: var(--slate-100); min-height: 0; padding: 28px 24px; } .vplayer__err { margin: 0; max-width: 52ch; text-align: center; color: var(--slate-700); font-size: .92rem; line-height: 1.55; } .vplayer__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vplayer__meta { color: var(--muted); font-size: .82rem; margin-right: auto; } .vplayer__speed { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--slate-100); } .vplayer__speed[hidden] { display: none; } .vplayer__sp { border: 0; background: none; cursor: pointer; padding: 3px 9px; border-radius: 6px; font-size: .76rem; font-weight: 600; color: var(--slate-700); font-family: inherit; } .vplayer__sp:hover { background: rgba(255,255,255,.75); } .vplayer__sp.is-on { background: #fff; color: var(--primary); box-shadow: var(--shadow); } /* Piste audio : rien à regarder, la barre de contrôle du navigateur se suffit. La scène repasse en bloc — dans une grille aux pistes automatiques, la largeur de 100 % de la barre de contrôle se résoudrait à zéro (pourcentage contre une piste indéfinie). */ .vplayer--audio { flex: 0 0 auto; gap: 8px; } /* margin remis à zéro : une marge « auto » sur l'axe transverse empêche l'étirement dans un conteneur flex, et la barre de contrôle retomberait à une largeur nulle. */ .vplayer--audio .vplayer__stage { display: block; background: none; border-radius: 0; min-height: 0; width: auto; margin: 0; } .vplayer--audio .vplayer__media { width: 100%; } .etq-actions { display: flex; align-items: center; gap: 12px; } /* ---- « Déroulé de la journée » (PDF de /aujourdhui, js/journee-pdf.js) ---------------- .jpdf-* : la modale d'aperçu. .jpdf / .jpdf__* : la feuille composée HORS ÉCRAN puis photographiée bloc par bloc — elle n'apparaît jamais telle quelle à l'écran. Sa largeur est posée par le JS (182 mm, largeur utile de l'A4) ; les tailles en px sont donc des tailles d'impression (1 px = 0,26 mm, 12 px ≈ 9 pt). Couleurs en dur : la feuille est blanche quel que soit le thème de l'écran. */ .jpdf-actions { display: flex; align-items: center; gap: 10px; } .jpdf-statut { margin: 18px 4px; color: var(--muted); font-size: .95rem; } .jpdf-statut[hidden] { display: none; } .jpdf-statut.is-error { color: #b91c1c; } .jpdf { color: #0f172a; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; } .jpdf__bloc { padding: 0 2px 2px; } .jpdf__tete { padding-bottom: 6px; } .jpdf__surtitre { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } .jpdf__titre { margin: 2px 0 0; font-size: 24px; line-height: 1.2; font-weight: 700; } .jpdf__sous { margin: 2px 0 12px; color: #475569; } .jpdf__vide { color: #64748b; font-style: italic; } .jpdf__sommaire { width: 100%; border-collapse: collapse; font-size: 12px; } .jpdf__sommaire th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 600; padding: 4px 8px; border-bottom: 1.5px solid #0f172a; } .jpdf__sommaire td { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: top; } .jpdf__nowrap { white-space: nowrap; } .jpdf__pastille { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px; } .jpdf__grp { color: #475569; font-size: 11.5px; } .jpdf__nature { display: inline-block; padding: 0 6px; border: 1px solid #94a3b8; border-radius: 4px; font-size: 10.5px; color: #334155; } .jpdf__etat { font-size: 10.5px; font-weight: 600; color: #1d4ed8; } .jpdf__etat--faite { color: #15803d; } .jpdf__etat--vide { color: #94a3b8; font-weight: 500; font-style: italic; } .jpdf__muet { color: #94a3b8; } .jpdf__seance { border: 1px solid #cbd5e1; border-left: 5px solid var(--jp-cl, #cbd5e1); border-radius: 6px; padding: 0 14px 10px; } .jpdf__band { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 -14px; padding: 7px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; border-radius: 0 6px 0 0; } .jpdf__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 11px; font-weight: 700; } .jpdf__heure { font-weight: 700; font-variant-numeric: tabular-nums; } .jpdf__salle { color: #475569; font-size: 11.5px; } .jpdf__band-fin { margin-left: auto; } .jpdf__t { margin: 10px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; } .jpdf__st { color: #475569; margin-top: 1px; } .jpdf__sec { margin-top: 10px; } .jpdf__h3 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; font-weight: 700; } .jpdf__prose { line-height: 1.55; } .jpdf__prose > :first-child { margin-top: 0; } .jpdf__prose > :last-child { margin-bottom: 0; } .jpdf__list { margin: 0; padding-left: 20px; } .jpdf__list li { margin: 2px 0; } .jpdf__tag { display: inline-block; padding: 0 5px; border-radius: 3px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 600; vertical-align: 1px; } /* Lignes pour écrire à la main là où rien n'est saisi. */ .jpdf__notes { margin-top: 6px; } .jpdf__notes span { display: block; height: 22px; border-bottom: 1px dotted #94a3b8; } .share__img { max-width: 100%; border-radius: 10px; } .share__url { color: var(--muted); font-size: .85rem; word-break: break-all; } .share__filesize { color: var(--muted); font-size: .85rem; } /* ========================================================================= Contenu rendu (Markdown + LaTeX) ========================================================================= */ .prose { line-height: 1.65; } .prose h1, .prose h2, .prose h3 { line-height: 1.25; margin: 1em 0 .4em; } .prose p { margin: .6em 0; } .prose ul, .prose ol { padding-left: 1.4em; margin: .6em 0; } .prose ul { list-style: disc outside; } .prose ol { list-style: decimal outside; } .prose li { margin: .2em 0; } .prose code { background: var(--slate-100); padding: 1px 5px; border-radius: 5px; font-size: .92em; } .prose pre { background: var(--slate-900); color: #e2e8f0; padding: 12px; border-radius: 10px; overflow: auto; } .prose pre code { background: none; color: inherit; } .prose blockquote { border-left: 3px solid var(--slate-300); margin: .6em 0; padding-left: 12px; color: var(--slate-600); } .prose img { max-width: 100%; } .prose a { color: var(--primary, #4f46e5); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .prose a:hover { text-decoration: none; } .prose--desc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--slate-600); } /* Tableaux insérés PARMI le texte (bouton ▦ de la barre de mise en forme, cf. js/rte.js). Le sélecteur porte sur « table » et non sur une classe : un tableau inséré au bouton, écrit en Markdown (| a | b |) ou collé depuis un tableur a ainsi exactement le même rendu — et, .lc-rte étant lui-même .prose, la saisie est identique au rendu final (leçon, espace élève, impression, PDF). À ne pas confondre avec le bloc « Tableau » autonome (.lc-table). */ /* Centré, comme les images insérées dans un bloc de texte. */ .prose table { border-collapse: collapse; margin: .8em auto; max-width: 100%; } .prose th, .prose td { border: 1px solid var(--slate-400, #94a3b8); padding: 6px 10px; vertical-align: top; text-align: left; } .prose th { background: var(--slate-100); font-weight: 600; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .prose table p { margin: .25em 0; } .prose table p:first-child { margin-top: 0; } .prose table p:last-child { margin-bottom: 0; } /* Une ligne ne se coupe pas entre deux pages / deux colonnes. */ .prose tr, .prose thead { break-inside: avoid; page-break-inside: avoid; } @media (max-width: 620px) { /* Tableau plus large que l'écran : il défile seul, sans pousser la page. */ .prose table { display: block; overflow-x: auto; } /* Sauf en vue impression : la capture PDF (js/cours-pdf.js) reprend les styles de la page, et une zone défilante y serait rognée au lieu d'être mise à l'échelle. */ .lc-print .prose table { display: table; } /* Sauf, aussi, s'il porte des flèches de liaison : leur tracé est calculé depuis la position mesurée des cellules, qu'un défilement horizontal ferait mentir dès le premier geste (js/tableau-core.js). */ .prose .lc-tablo table { display: table; } } /* Surlignage de l'éditeur riche : execCommand('hiliteColor') pose un fond en style INLINE (). Les navigateurs n'impriment pas les fonds par défaut → le surlignage disparaissait à l'impression. On force l'impression sur les seuls éléments porteurs d'un fond inline, c'est-à-dire exactement ce que l'utilisateur a surligné : les fonds décoratifs de la feuille de styles (blocs de code, encadrés, tableaux) gardent le comportement par défaut, l'encre n'est pas gaspillée. La propriété est héritée : le texte imbriqué dans le surlignage suit. est ajouté pour le cas d'un contenu collé depuis un traitement de texte : son fond jaune vient du navigateur, sans style inline, donc le sélecteur d'attribut ne l'attrape pas. */ .prose [style*="background"], .prose mark, .lc-rte [style*="background"], .lc-rte mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Affichage d'une note : grande police pour la vidéoprojection + curseur de zoom */ .modal__box--note { max-width: 920px; } .note-zoom { position: sticky; top: -2px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: -4px 0 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 6px rgba(15,23,42,.05); } .note-zoom__slider { flex: 1; accent-color: var(--primary); cursor: pointer; height: 22px; } .note-zoom__a { color: var(--muted); font-weight: 700; line-height: 1; } .note-zoom__a--sm { font-size: .82rem; } .note-zoom__a--lg { font-size: 1.35rem; } .note-zoom__val { min-width: 3.4em; text-align: right; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; } .prose--note { line-height: 1.6; } .prose--note p { margin: .65em 0; } .prose--note h1, .prose--note h2, .prose--note h3 { line-height: 1.25; } /* ========================================================================= Page publique de partage ========================================================================= */ .public-body { background: var(--bg); } .public-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--slate-900); color: #fff; } .public-tag { font-size: .82rem; color: var(--slate-300); } .public-main { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; } .share__head { margin-bottom: 18px; } .share__title { margin: 0 0 8px; } .share__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @media (max-width: 760px) { .grid2, .editor { grid-template-columns: 1fr; } .editor__preview { min-height: 90px; } } /* ========================================================================= Bloc « Le Cours » ========================================================================= */ /* Classeur (index) */ .lc-index__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .lc-niveaux { display: flex; gap: 6px; flex-wrap: wrap; } .lc-niveau { padding: 6px 14px; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-weight: 600; font-size: .9rem; } .lc-niveau:hover { text-decoration: none; background: var(--slate-200); } .lc-niveau.is-on { background: var(--acc-cours-2); color: #fff; } .lc-index__actions { display: flex; gap: 10px; } .lc-seq { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; background: #fff; overflow: hidden; } /* Chapitre visible par les élèves : liseré vert. */ .lc-seq.is-visible { border-color: #16a34a; box-shadow: inset 0 0 0 2px #16a34a; } .lc-seq.is-visible .lc-seq__head { background: #f0fdf4; border-bottom-color: #bbf7d0; } /* Œil de visibilité élève. */ .lc-eye { border: 0; background: transparent; cursor: pointer; padding: 2px 4px; font-size: 1.05rem; line-height: 1; border-radius: 6px; filter: grayscale(1); opacity: .55; transition: opacity .12s, filter .12s, background .12s; } .lc-eye:hover { background: var(--slate-100); opacity: .85; } .lc-eye.is-on { filter: none; opacity: 1; } .lc-seq__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--slate-50); border-bottom: 1px solid var(--border); } /* Menus dépliants : flèche de repli + masquage de la liste quand replié. */ .lc-fold { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--slate-600); font-size: .8rem; line-height: 1; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, background .12s; } .lc-fold:hover { background: var(--slate-200); } .lc-seq:not(.is-collapsed) .lc-fold { transform: rotate(90deg); } .lc-seq.is-collapsed .lc-lecons { display: none; } .lc-seq.is-collapsed .lc-seq__head { border-bottom: 0; } .lc-seq__title { margin: 0; font-size: 1.05rem; } .lc-seq__title--muted { color: var(--muted); font-weight: 600; } .lc-seq__tools { display: flex; gap: 12px; font-size: .85rem; } .lc-seq__empty { color: var(--muted); padding: 14px 16px; margin: 0; font-size: .9rem; } .lc-lecons { list-style: none; margin: 0; padding: 0; } .lc-lecon { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--slate-100); flex-wrap: wrap; cursor: pointer; transition: background .12s; } .lc-lecon:last-child { border-bottom: 0; } .lc-lecon:hover { background: #f8fafc; } /* Leçon masquée aux élèves : titre grisé (l'œil 🚫 signale l'état, les contrôles restent nets). */ .lc-lecon.is-hidden .lc-lecon__title, .lc-lecon.is-hidden .lc-lecon__info { opacity: .5; } .lc-lecon__title { font-weight: 600; cursor: pointer; } .lc-lecon:hover .lc-lecon__title:not(.is-editing) { text-decoration: underline; text-underline-offset: 3px; } .lc-lecon__edit { flex: 0 0 auto; text-decoration: none; font-size: .95rem; line-height: 1; opacity: .65; transition: opacity .12s, transform .12s; } .lc-lecon__edit:hover { opacity: 1; transform: scale(1.15); } .lc-lecon__info { color: var(--muted); font-size: .82rem; } .lc-lecon__tools { margin-left: auto; display: flex; gap: 12px; font-size: .85rem; } .lc-empty { color: var(--muted); text-align: center; padding: 30px 0; } /* Croix rouge de suppression (devant le titre) */ .lc-del { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #ef4444; font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .lc-del:hover { background: #fee2e2; color: #dc2626; } /* Titres éditables en place */ .lc-seq__titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .lc-seq__title[data-act], .lc-lecon__title[data-act] { cursor: text; border-radius: 4px; } .lc-seq__title[data-act]:hover, .lc-lecon__title[data-act]:hover { text-decoration: underline dotted; text-underline-offset: 3px; } .lc-seq__title.is-editing, .lc-lecon__title.is-editing { cursor: text; text-decoration: none; background: #fff; outline: 2px solid var(--primary); outline-offset: 2px; padding: 0 2px; } .lc-lecon__title { color: var(--text); } /* Glisser-déposer (réordonner chapitres / déplacer leçons) */ .lc-drag { flex: 0 0 auto; width: 20px; height: 22px; padding: 0; border: 0; background: transparent; color: #94a3b8; cursor: grab; font-size: 1rem; line-height: 1; touch-action: none; display: inline-flex; align-items: center; justify-content: center; } .lc-drag:hover { color: var(--slate-600); } .lc-drag:active { cursor: grabbing; } .lc-seq.is-dragging, .lc-lecon.is-dragging { box-sizing: border-box; opacity: .97; background: #fff; box-shadow: 0 14px 30px rgba(15,23,42,.18); } .lc-drop-ph { list-style: none; border: 2px dashed var(--primary); border-radius: 8px; background: rgba(79,70,229,.06); margin: 4px 0; box-sizing: border-box; } body.lc-dragging { user-select: none; cursor: grabbing; } /* Leçon (affichage écran) */ /* Consultation ET édition d'une leçon : le cours DÉBORDE du gabarit de .container (960px) dès que la fenêtre offre la place — tableaux, figures GeoGebra et repères ont besoin de largeur, et l'édition doit montrer le bloc à la largeur où il sera lu. Marges négatives inférieures à l'espace libre de part et d'autre : rien ne déborde horizontalement, et le calcul ne dépend pas de vw (donc pas de l'ascenseur). Même technique que .eleve-page--lecon pour la lecture élève. Les modales (.modal, en position fixe) et le menu « Dupliquer » (absolu) ne sont pas concernés. */ @media (min-width: 1280px) { .lc-show, .lc-edit { margin-inline: -120px; } /* ≈ 1160px de contenu */ } .lc-show__bar, .lc-edit__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .lc-show__title { margin: 6px 0 4px; } .lc-show__meta { margin: 0; color: var(--muted); font-size: .9rem; } .lc-show__actions, .lc-edit__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Menu « Dupliquer » : niveaux (accordéon) ▸ chapitres cibles. */ .lc-dup__panel { max-height: min(70vh, 460px); overflow-y: auto; min-width: 250px; padding: 8px; } .lc-dup__hint { margin: 2px 6px 8px; font-size: 12px; font-weight: 600; color: var(--slate-500); } .lc-dup__panel .lc-dup__nivbtn { display: flex; align-items: center; gap: 6px; font-weight: 600; } .lc-dup__caret { display: inline-block; font-size: 11px; color: var(--slate-500); transition: transform .15s ease; } .lc-dup__niv.is-open > .lc-dup__nivbtn .lc-dup__caret { transform: rotate(90deg); } .lc-dup__chaps { display: none; margin-bottom: 4px; } .lc-dup__niv.is-open > .lc-dup__chaps { display: block; } .lc-dup__panel .lc-dup__chap { padding-left: 32px; font-size: 14px; color: var(--slate-700); } .lc-dup__panel .lc-dup__chap--none { font-style: italic; color: var(--slate-500); } .lc-doc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; } .lc-block { margin: 0 0 18px; } .lc-block:last-child { margin-bottom: 0; } /* Encadrés mathématiques */ .encadre { border-left: 4px solid; border-radius: 0 10px 10px 0; padding: 12px 16px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Bloc atteint depuis la recherche élève (#sec-id) : marge d'arrivée + halo. */ .encadre { scroll-margin-top: 90px; } .encadre:target { box-shadow: 0 0 0 3px rgba(79,70,229,.30); } .encadre__head { font-weight: 800; margin-bottom: 6px; font-size: .9rem; text-transform: uppercase; letter-spacing: .3px; } .encadre__body { } /* Chaque type ne pose que TROIS VARIABLES, jamais les propriétés elles-mêmes : c'est ce qui permet à l'enseignant de refaire le code couleur depuis /gestion#encadres — la page se contente alors de redéfinir ces variables (views/partials/encadre_couleurs.php). La palette d'origine vit ici ET dans lc_encadre_palette() (core/helpers.php), qui sert au réglage et à l'estrade : garder les deux en phase. */ /* --enc-texte : couleur de police du CORPS. Une encre sombre teintée du type, pour que le code couleur se lise jusque dans le texte sans qu'un paragraphe entier soit en couleur vive. Elle est posée sur .encadre : les liens, le code et les formules de .prose gardent leurs propres règles, l'héritage ne touche que le texte courant. */ .encadre { border-color: var(--enc-bord, var(--slate-400)); background: var(--enc-fond, transparent); color: var(--enc-texte, inherit); } .encadre__head { color: var(--enc-titre, inherit); } .encadre--definition { --enc-bord: #2563eb; --enc-fond: #eff6ff; --enc-titre: #1d4ed8; --enc-texte: #1e3a8a; } .encadre--propriete { --enc-bord: #059669; --enc-fond: #ecfdf5; --enc-titre: #047857; --enc-texte: #064e3b; } .encadre--theoreme { --enc-bord: #7c3aed; --enc-fond: #f5f3ff; --enc-titre: #6d28d9; --enc-texte: #4c1d95; } .encadre--methode { --enc-bord: #d97706; --enc-fond: #fffbeb; --enc-titre: #b45309; --enc-texte: #78350f; } .encadre--remarque { --enc-bord: #64748b; --enc-fond: #f1f5f9; --enc-titre: #475569; --enc-texte: #1e293b; } .encadre--exemple { --enc-bord: #db2777; --enc-fond: #fdf2f8; --enc-titre: #be185d; --enc-texte: #831843; } .encadre--rappel { --enc-bord: #0891b2; --enc-fond: #ecfeff; --enc-titre: #0e7490; --enc-texte: #164e63; } .lc-res__img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; } .lc-res__empty { color: var(--muted); font-style: italic; } /* ===== Bloc « séparation » : barre horizontale fine, 3 styles + couleur ========== Balisage unifié (helper lc_separator) : + 3 . Les ne servent qu'à l'ornement (masqués pour les autres styles) : balisage constant → l'aperçu de l'éditeur bascule de style sans reconstruire le DOM. La couleur passe par --sep-color (défaut thème, surchargé en ligne par le choix). */ .lc-sep-block { padding: 6px 0; } .lc-sep { --sep-color: var(--slate-400); display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lc-sep__wing, .lc-sep__gem { display: none; } /* Style 1 — trait fin net (bouts arrondis, léger fondu aux extrémités pour la finesse) */ .lc-sep--line { height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--sep-color) 5%, var(--sep-color) 95%, transparent); } /* Style 2 — pointillés ronds réguliers */ .lc-sep--dots { height: 6px; background: radial-gradient(circle closest-side, var(--sep-color) 92%, transparent) center / 18px 6px repeat-x; } /* Style 3 — ornement central : losange encadré de deux ailes en fondu */ .lc-sep--ornament { gap: 14px; } .lc-sep--ornament .lc-sep__wing { display: block; flex: 1 1 0; max-width: 40%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--sep-color)); } .lc-sep--ornament .lc-sep__wing:last-child { background: linear-gradient(90deg, var(--sep-color), transparent); } .lc-sep--ornament .lc-sep__gem { display: block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; background: var(--sep-color); transform: rotate(45deg); } /* ---- Éditeur du bloc séparation : cartes de style + couleur + aperçu ---- */ .lc-sep-edit { display: flex; flex-direction: column; gap: 16px; } .lc-sep-styles { display: flex; gap: 10px; flex-wrap: wrap; } .lc-sep-opt { flex: 1 1 130px; margin: 0; cursor: pointer; } .lc-sep-opt input { position: absolute; width: 0; height: 0; opacity: 0; } .lc-sep-opt__card { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 16px 12px 11px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; transition: border-color .12s, box-shadow .12s, background .12s; } .lc-sep-opt:hover .lc-sep-opt__card { border-color: var(--slate-300); } .lc-sep-opt input:checked + .lc-sep-opt__card { border-color: var(--acc-cours-2); background: #f0fdf9; box-shadow: 0 0 0 3px rgba(16,185,129,.14); } .lc-sep-opt input:focus-visible + .lc-sep-opt__card { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.28); } .lc-sep-opt__demo { display: flex; align-items: center; width: 100%; height: 12px; } .lc-sep-opt__name { font-size: .82rem; font-weight: 600; color: var(--slate-600); } .lc-sep-opt input:checked + .lc-sep-opt__card .lc-sep-opt__name { color: var(--acc-cours-2); } .lc-sep-color { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .lc-sep-color__lbl { font-size: .9rem; font-weight: 600; color: var(--slate-700); } .lc-sep-colorpick { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--slate-300); border-radius: 8px; background: #fff; cursor: pointer; } .lc-sep-colorpick::-webkit-color-swatch-wrapper { padding: 0; } .lc-sep-colorpick::-webkit-color-swatch { border: 0; border-radius: 5px; } .lc-sep-colorpick::-moz-color-swatch { border: 0; border-radius: 5px; } .lc-sep-swatches { display: flex; gap: 7px; } .lc-sep-swatch { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(15,23,42,.15); border-radius: 50%; cursor: pointer; transition: transform .1s; } .lc-sep-swatch:hover { transform: scale(1.12); } .lc-sep-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .lc-sep-live { padding: 16px 14px; border: 1px dashed var(--slate-300); border-radius: 10px; background: var(--slate-50); } /* Éditeur de leçon */ .lc-meta { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .lc-meta__titre { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; } .lc-meta__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .lc-meta__row .field__input { width: auto; } .lc-meta__annee { max-width: 150px; } .lc-saved { color: #047857; font-size: .85rem; font-weight: 600; } /* ========================================================================== Ajout de blocs dans l'éditeur de leçon : zones d'insertion + catalogue ========================================================================== Une ZONE (.lc-ins) précède chaque bloc. Au repos elle n'est qu'une gouttière de 12 px, invisible ; au survol (ou au focus clavier) elle s'ouvre à 46 px — les deux blocs s'écartent — et découvre un filet et un « + ». Deux points à ne pas défaire : — la zone est le SEUL élément qui grandit ; on ne touche pas aux marges des cartes, sinon l'écartement se joue à deux endroits et sautille ; — :focus-within autant que :hover, faute de quoi l'insertion au milieu d'une leçon serait hors d'atteinte au clavier (le « + » est un vrai bouton, donc tabulable, mais il resterait transparent). ========================================================================== */ .lc-ins { position: relative; height: 12px; display: flex; align-items: center; justify-content: center; transition: height .18s cubic-bezier(.22, .9, .3, 1); } /* Le filet : dégradé vers les bords, pour ne pas trancher la colonne au couteau. */ .lc-ins::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; opacity: 0; transform: scaleX(.55); background: linear-gradient(90deg, transparent, var(--acc-cours-1) 14%, var(--acc-cours-1) 86%, transparent); transition: opacity .18s ease, transform .22s cubic-bezier(.22, .9, .3, 1); } .lc-ins__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--acc-cours-2); border-radius: 50%; background: #fff; color: var(--acc-cours-2); cursor: pointer; opacity: 0; transform: scale(.55); box-shadow: 0 2px 10px rgba(15, 23, 42, .16); transition: opacity .16s ease, transform .2s cubic-bezier(.22, .9, .3, 1), background .12s ease, color .12s ease; } .lc-ins__btn svg { width: 16px; height: 16px; } .lc-ins__btn:hover { background: var(--acc-cours-2); color: #fff; } .lc-ins__btn:focus-visible { outline: 2px solid var(--acc-cours-2); outline-offset: 3px; } .lc-ins:hover, .lc-ins:focus-within, .lc-ins.is-open { height: 46px; } .lc-ins:hover::before, .lc-ins:focus-within::before, .lc-ins.is-open::before { opacity: 1; transform: none; } .lc-ins:hover .lc-ins__btn, .lc-ins:focus-within .lc-ins__btn, .lc-ins.is-open .lc-ins__btn { opacity: 1; transform: none; } /* Pendant un glisser-déposer, les rangs sont faux et l'épaisseur des zones fausserait les milieux calculés par onSort : elles disparaissent le temps du tri. */ .lc-sections.is-sorting .lc-ins { display: none; } /* Barre collante : le point d'ajout toujours visible (fin de leçon). */ .lc-addbar { position: sticky; bottom: 0; z-index: 5; margin: 14px 0 0; padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(255, 255, 255, .96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(15, 23, 42, .06); } .lc-addbar__btn { display: inline-flex; align-items: center; gap: 8px; } .lc-addbar__btn svg { width: 17px; height: 17px; } .lc-addbar__hint { color: var(--muted); font-size: .84rem; } /* ---- Catalogue de blocs (panneau unique, ancré au « + » cliqué) ---------- */ /* Quatre colonnes plutôt que trois : les dix-sept types tiennent alors en six rangées, soit un panneau qui s'ouvre entier sur un écran ordinaire. Il défile au besoin — sur un portable bas de plafond — mais ce n'est plus le cas courant. */ .lc-bm { position: absolute; z-index: 60; width: 420px; max-height: min(72vh, 660px); overflow-y: auto; padding: 12px 14px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08); animation: lc-bm-in .14s ease-out; } @keyframes lc-bm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lc-bm__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--slate-800); } .lc-bm__grp { margin: 12px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--slate-400); } .lc-bm__grp:first-of-type { margin-top: 2px; } .lc-bm__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* --bm : la couleur du type, portée en style inline par le catalogue. Les sept encadrés reprennent celle de leur rendu (.encadre--*), ce qui les rend reconnaissables sans lire. */ .lc-bm__it { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; min-height: 74px; border: 1px solid var(--border); border-radius: 11px; background: #fff; cursor: pointer; font: inherit; text-align: center; color: var(--slate-700); transition: border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease; } .lc-bm__it:hover { border-color: var(--bm); background: color-mix(in srgb, var(--bm) 7%, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, .09); } .lc-bm__it:focus-visible { outline: 2px solid var(--bm); outline-offset: 2px; } .lc-bm__ic { display: inline-flex; color: var(--bm); } .lc-bm__ic svg { width: 22px; height: 22px; } .lc-bm__lbl { font-size: .74rem; line-height: 1.25; } @media (max-width: 520px) { .lc-bm { width: min(94vw, 420px); } .lc-bm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lc-addbar__hint { display: none; } } .lc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; } .lc-card.is-drag { opacity: .6; outline: 2px dashed var(--acc-cours-2); } .lc-card.is-hidden { opacity: .55; } .lc-card__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--slate-100); background: var(--slate-50); border-radius: var(--radius) var(--radius) 0 0; } .lc-card__drag { cursor: grab; color: var(--slate-400); touch-action: none; user-select: none; } .lc-card__type { font-weight: 700; font-size: .82rem; color: var(--slate-600); text-transform: uppercase; letter-spacing: .3px; } /* Boutons visibilité / duplication / suppression, placés devant le type du bloc. */ .lc-card__vis { border: 0; background: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; font-size: .95rem; line-height: 1; } .lc-card__vis:hover { background: var(--slate-200); } .lc-card__dup { border: 0; background: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; font-size: 1rem; line-height: 1; color: var(--slate-500); } .lc-card__dup:hover { background: var(--slate-200); color: var(--primary); } .lc-card__body { padding: 12px; } /* Repli / dépliage des blocs */ .lc-card__collapse { border: 0; background: none; cursor: pointer; padding: 2px 4px; font-size: .85rem; line-height: 1; color: var(--slate-600); border-radius: 6px; transition: transform .15s ease; } .lc-card__collapse:hover { background: var(--slate-200); } .lc-card.is-collapsed .lc-card__collapse { transform: rotate(-90deg); } .lc-card.is-collapsed .lc-card__bar { border-bottom: 0; border-radius: var(--radius); } .lc-card.is-collapsed .lc-card__body { display: none; } /* Bloc ciblé depuis la consultation (crayon) : surlignage temporaire. */ .lc-card.is-flash { animation: lc-flash 1.6s ease; } @keyframes lc-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: 0 0 0 3px transparent; } } /* Consultation d'une leçon : contrôles enseignant par bloc (colonne à gauche). */ .lc-sec { display: flex; align-items: flex-start; gap: 10px; } .lc-sec > .lc-block { flex: 1 1 auto; min-width: 0; } .lc-sec.is-hidden { opacity: .5; } .lc-sec__tools { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; } .lc-sec__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; font-size: .9rem; line-height: 1; color: var(--slate-600); text-decoration: none; transition: background .12s, color .12s, border-color .12s; } .lc-sec__btn:hover { background: var(--slate-100); } .lc-sec__btn--del { color: #ef4444; } .lc-sec__btn--del:hover { background: #fee2e2; border-color: #fecaca; color: #dc2626; } /* Impression rapide d'un bloc (planche de QR codes, de vignettes ou de bandes à découper). */ .lc-sec__btn--imp:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; } .lc-sec__ico { width: 15px; height: 15px; display: block; } .lc-sec__btn.is-busy { pointer-events: none; opacity: .5; } /* Clone hors écran capturé par cours-qr.js pour les vignettes d'image. Sur une étiquette à coller, la légende n'est plus qu'un repère : elle descend d'un cran sous sa taille d'écran, pour laisser la figure occuper la vignette. Ne concerne QUE ce clone. */ .lc-vignette .lc-figure__cap { font-size: .62rem; margin-top: 2px; } /* Clone hors écran des bandes « texte / encadré ». L'encadré perd son fond pastel : tiré à 30 exemplaires il ne ferait que boire de l'encre, et sa barre de couleur suffit à le reconnaître. Le fond doit être posé sur .encadre lui-même — html-to-image recopie le style CALCULÉ de l'élément capturé, une règle sur le seul parent ne le suivrait pas. */ .lc-planche .encadre { background: #fff; } /* ⚠️ Le clone est MESURÉ, puis html-to-image le rejoue dans un foreignObject à cette taille exacte. Un bloc de texte n'a ni rembourrage ni bordure : les marges de son premier et de son dernier paragraphe s'échappent alors par fusion, la hauteur mesurée les ignore, le foreignObject les rétablit — et la dernière ligne sort du cadre, coupée en deux. On les retire (flow-root contient au passage celles des structures imbriquées) : la mesure redevient exacte, et la bande à découper n'en est que plus serrée. */ .lc-planche > * { display: flow-root; } .lc-planche > * > :first-child { margin-top: 0; } .lc-planche > * > :last-child { margin-bottom: 0; } /* Bouton « Ajouter une ressource » : cible de dépôt de fichier (ajout rapide). */ #rp-add-res { transition: box-shadow .12s ease, transform .12s ease; } #rp-add-res.is-dropping { transform: scale(1.04); outline: 2px dashed #fff; outline-offset: 3px; box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); } .lc-sections__head { display: flex; align-items: center; margin-bottom: 10px; } .lc-expand-all { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; color: var(--slate-700); cursor: pointer; user-select: none; } .lc-expand-all input { width: 16px; height: 16px; cursor: pointer; } .lc-row { display: flex; gap: 10px; margin-bottom: 10px; } .lc-row .lc-soustype { width: auto; } .lc-row .lc-titre { flex: 1; } .lc-contenu { font-family: var(--font-mono, ui-monospace, monospace); resize: vertical; } .lc-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .lc-preview { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--slate-50); } .lc-respick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .lc-respick[hidden] { display: none; } /* le display:flex ci-dessus l'emporterait sinon sur [hidden] */ .lc-respick__label { color: var(--slate-700); } .lc-layout { width: auto; } .lc-legende { margin-top: 8px; font-style: italic; } /* Rendu : figure image (simple / texte à gauche / à droite) + légende */ .lc-figure { margin: 0; } .lc-figure__img { margin: 0; } .lc-figure__img img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; } .lc-figure__cap { margin: 4px 0 0; font-style: italic; font-size: .85rem; color: var(--muted); text-align: center; } /* Images insérées dans les blocs de texte / encadrés (et dans l'éditeur, pour un rendu identique) : centrées. */ .lc-block.prose img, .lc-block .prose img, .lc-rte img { display: block; margin: 8px auto; } .lc-figure--left, .lc-figure--right { display: flex; gap: 16px; align-items: flex-start; } .lc-figure--left .lc-figure__img, .lc-figure--right .lc-figure__img { flex: 0 0 42%; max-width: 42%; } .lc-figure--left { flex-direction: row-reverse; } .lc-figure__text { flex: 1; } /* Deux images côte à côte : colonnes de largeur égale, quelles que soient les proportions des images (min-width:0 empêche une image large de pousser sa voisine hors de la page). Elles se calent en haut, chacune avec sa légende ; le texte d'accompagnement éventuel passe à la ligne en pleine largeur, sous le couple (flex-basis 100%). */ .lc-figure--duo { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .lc-figure--duo .lc-figure__img { flex: 1 1 0; min-width: 0; } .lc-figure--duo .lc-figure__text { flex: 1 0 100%; } /* Texte au-dessus / en dessous : le DOM place toujours la figure AVANT son texte (l'ordre de lecture reste le même pour un lecteur d'écran), c'est column-reverse qui remonte le texte. */ .lc-figure--top, .lc-figure--bottom { display: flex; flex-direction: column; gap: 10px; } .lc-figure--top { flex-direction: column-reverse; } /* Un dessin est CARRÉ : à pleine largeur il mangerait la page. On le borne, et on le centre quand il est seul (les mises en page latérales, elles, le calent déjà dans leur colonne). */ .lc-figure--simple .dessin-view, .lc-figure--top .dessin-view, .lc-figure--bottom .dessin-view { max-width: 460px; margin-inline: auto; } /* Rendu : tableau */ .lc-table { border-collapse: collapse; width: 100%; } /* Conteneur du tableau : c'est lui qui porte, en padding, la place réservée aux flèches (js/tableau-core.js) — les arcs vivent donc dans le flux du bloc et ne peuvent jamais déborder sur le bloc précédent. Le padding est écrit en ligne par la mise en page. Il enveloppe aussi bien le tableau du bloc « Tableau » qu'un tableau posé au fil du texte (js/rte.js), qui porte alors son modèle dans data-fleches. */ .lc-tablo { position: relative; } .lc-table td { border: 2px solid #000; padding: 8px 10px; vertical-align: top; } .lc-table td .prose { margin: 0; } .lc-table__img { max-width: 160px; max-height: 140px; display: block; margin: 0 auto; } /* Éditeur de tableau */ .lc-table-edit { margin-bottom: 8px; } .lc-table-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } /* Fusion / scission : outils qui portent sur la cellule SÉLECTIONNÉE, d'où le séparateur, l'indice affiché tant qu'aucune cellule n'est choisie et l'état désactivé des boutons. */ .lc-table-tools__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); } .lc-table-tools__hint { color: var(--muted); font-size: .78rem; font-style: italic; } .lc-table-tools .btn[disabled] { opacity: .45; cursor: not-allowed; } .lc-table-ed td.is-active { outline: 2px solid var(--primary); outline-offset: -2px; } /* Barre de mise en forme partagée du tableau (pilote la cellule focalisée). */ .lc-table-fmt { margin-bottom: 8px; } .lc-table-fmt .lc-fmt { margin-bottom: 0; } .lc-table-wrap { overflow-x: auto; } .lc-table-ed { border-collapse: collapse; width: 100%; } .lc-table-ed td { border: 2px solid #000; padding: 4px; vertical-align: top; min-width: 120px; } .lc-cell { position: relative; } /* Éditeur enrichi de cellule (contenteditable) : plus compact que .lc-rte, sans bordure (la cellule a la sienne). */ .lc-cell .lc-cell__ed { min-height: 1.8em; border: 0; border-radius: 4px; padding: 4px 6px; background: none; } .lc-cell .lc-cell__ed:focus { box-shadow: none; outline: 1px solid var(--primary); } .lc-cell__tools { display: flex; gap: 4px; margin-top: 4px; } .lc-cell__tools button { border: 0; background: var(--slate-100); cursor: pointer; border-radius: 5px; padding: 2px 7px; font-size: .85rem; } .lc-cell__tools button:hover { background: var(--slate-200); } .lc-cell--img { display: flex; align-items: flex-start; gap: 4px; } .lc-cell--img img { max-width: 130px; max-height: 110px; border-radius: 6px; } .lc-cell--ggb { display: flex; align-items: flex-start; gap: 4px; } .lc-cell__ggb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .8rem; color: var(--slate-600); text-align: center; } .lc-cell__ggb-ic { font-size: 1.5rem; } .lc-cell__ggb-img { max-width: 150px; max-height: 120px; border-radius: 6px; display: block; } .lc-cell__rm { border: 0; background: var(--slate-100); cursor: pointer; border-radius: 5px; padding: 1px 6px; } /* ---------------------------------------------------------------------------- Flèches de liaison d'un tableau (js/tableau-core.js) — bloc « Tableau » comme tableau posé au fil du texte (bouton « ↷ Flèche » de la barre, js/rte.js). Une bande par côté utilisé, posée dans le padding réservé par la mise en page. L'ASPECT (position, boîte de la bulle, couleurs) est écrit EN LIGNE par le moteur, pas ici : l'estrade projette le bloc dans un rastérisé que cette feuille de style n'atteint pas. Ne subsiste ici que l'écran — impression couleur, édition, sélection. ---------------------------------------------------------------------------- */ .tbf-arc, .tbf-tip, .tbf-bub { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tbf-bub__c { margin: 0; } .tbf-bub__c > :first-child { margin-top: 0; } .tbf-bub__c > :last-child { margin-bottom: 0; } .tbf-bub__c p { margin: 0; } /* Édition : la bulle se saisit sur place, la barre de mise en forme du tableau la pilote comme une cellule (cf. cours.js → _activeCellEd). */ .tbf-bub--ed { pointer-events: auto; min-width: 42px; cursor: text; } .tbf-bub--ed .tbf-bub__c { min-height: 1.2em; outline: none; } .tbf-bub--ed .tbf-bub__c:empty::before { content: attr(data-placeholder); color: var(--muted); } .tbf-bub--ed.is-sel { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } .tbf-band .tbf-hit { pointer-events: stroke; cursor: pointer; } .tbf-arc.is-sel { stroke-width: 3.4; } /* Panneau de réglage de la flèche sélectionnée */ .tbf-insp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 8px 10px; background: var(--slate-100); border: 1px solid var(--border); border-radius: var(--radius); } .tbf-insp[hidden] { display: none; } .tbf-insp__t { font-weight: 700; font-size: .85rem; } .tbf-insp__f { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--slate-600); } .tbf-insp__f select { font: inherit; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .tbf-insp__sw { display: inline-flex; gap: 3px; } .tbf-sw { width: 18px; height: 18px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; padding: 0; } .tbf-sw.is-on { border-color: var(--slate-800, #1e293b); } .tbf-insp__del { margin-left: auto; } /* QR code (impression des vidéos ; ressource de type lien externe) */ .lc-qr-block { display: flex; align-items: center; gap: 14px; } .lc-qr { width: 132px; height: 132px; flex: 0 0 auto; } .lc-qr svg { width: 100%; height: 100%; } .lc-qr__cap { margin: 0; font-size: .9rem; } .lc-qr__url { color: var(--muted); font-size: .8rem; word-break: break-all; } /* Bloc ressource « lien » : QR cliquable, centré, titre + URL sous le code. */ /* Le titre se lit À DROITE du QR : le code reste carré et compact à gauche, le libellé occupe la largeur restante au lieu de forcer un bloc étroit et centré. */ .lc-qr-block--link { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; text-decoration: none; color: inherit; } .lc-qr-block--link .lc-qr__cap { flex: 1 1 auto; min-width: 0; font-weight: 600; } /* Exception : dans une case de carte mentale, la boîte est trop étroite pour deux colonnes — le libellé repasse sous le code. */ .cmt-node__qr.lc-qr-block--link { flex-direction: column; justify-content: center; gap: 8px; text-align: center; } .cmt-node__qr.lc-qr-block--link .lc-qr__cap { flex: 0 0 auto; } .lc-qr-block--link:hover .lc-qr__url, .lc-qr-block--link:focus-visible .lc-qr__url { text-decoration: underline; } /* Dupliquer un bloc : choix de la leçon d'arrivée dans l'arborescence du Cours. Les enveloppes Niveau / Chapitre réutilisent les styles .evpick-* du sélecteur de leçons ; seules les lignes « leçon » sont propres à cette modale. */ #secdup-modal .modal__box--secdup { max-width: min(720px, 96vw); } .sd-hint { color: var(--slate-600); font-size: .9rem; margin: 0 0 10px; } .sd-row { display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); text-align: left; margin: 3px 0 3px 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; } .sd-row:hover, .sd-row:focus-visible { background: var(--slate-100); border-color: var(--primary); } .sd-row__t { flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--slate-800); overflow-wrap: anywhere; } .sd-row__ctx { flex: 0 0 auto; color: var(--muted); font-size: .78rem; } .sd-row__cur { flex: 0 0 auto; background: var(--slate-100); color: var(--slate-600); border-radius: 999px; padding: 2px 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } /* Sélecteur de ressource : arborescence dépliante de « Mes documents » (dossiers repliables, titres complets, catégorie visible, aperçu à l'œil). */ #respick-modal .modal__box--respick { max-width: min(1040px, 96vw); } .rp-list { margin: 12px 0 0; padding: 2px; max-height: 66vh; overflow: auto; } .rp-empty { color: var(--muted); padding: 22px 6px; text-align: center; } .rp-tree { display: flex; flex-direction: column; gap: 1px; } /* En-tête de section-séparateur */ .rp-sec__h { color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px 8px 4px; } .rp-tree > .rp-sec__h:first-child { padding-top: 2px; } /* Icône de catégorie (SVG en filet, façon « Mes documents ») */ .rp-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--slate-500); } .rp-ic--folder { color: var(--primary); } .rp-ic--geogebra, .rp-ic--mathalea { color: #7c3aed; } .rp-ic--youtube { color: #dc2626; } /* Dossier dépliant */ .rp-folder { display: flex; flex-direction: column; } .rp-fold { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--slate-700); padding: 9px 10px; border-radius: 9px; } .rp-fold:hover { background: var(--slate-100); } .rp-caret { flex: 0 0 auto; width: .8em; color: var(--muted); font-size: .8rem; transition: transform .12s; } .rp-fold.is-open .rp-caret { transform: rotate(90deg); } .rp-fold__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .rp-fold__count { flex: 0 0 auto; font-size: .72rem; color: var(--muted); background: var(--slate-100); border-radius: 999px; padding: 1px 9px; } .rp-children { display: flex; flex-direction: column; gap: 1px; } .rp-children[hidden] { display: none; } /* le display:flex ci-dessus l'emporterait sinon sur [hidden] */ /* Document (feuille) : icône + titre complet + catégorie + œil (aperçu) */ .rp-item { display: flex; align-items: stretch; gap: 2px; border-radius: 9px; } .rp-item:hover { background: var(--slate-100); } .rp-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; padding: 9px 6px 9px 10px; border-radius: 9px; } .rp-item__t { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } .rp-item__cat { flex: 0 0 auto; font-size: .7rem; color: var(--slate-600); background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .rp-eye { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; margin-right: 6px; border: 0; background: none; color: var(--slate-400); cursor: pointer; border-radius: 8px; transition: background .12s, color .12s; } .rp-eye__ic { width: 20px; height: 20px; } .rp-eye:hover { background: var(--slate-200); color: var(--primary); } /* Pied du sélecteur : destination de la ressource à créer (à gauche), bouton d'ajout (à droite). */ .rp-foot { align-items: center; flex-wrap: wrap; } .rp-dest { margin-right: auto; display: flex; align-items: center; gap: 9px; min-width: 0; } .rp-dest__lbl { flex: 0 0 auto; font-size: .85rem; font-weight: 600; color: var(--slate-700); } .rp-dest .field__input { width: auto; max-width: min(360px, 52vw); padding: 8px 10px; font-size: .88rem; } /* Visionneuse d'aperçu générique (note / vidéo / lien / fichier) */ #rp-view .modal__box--rpview { max-width: min(900px, 96vw); } .rpv-body { margin-top: 12px; } .rpv-body .prose { margin: 0; } .rp-view__msg { color: var(--muted); padding: 24px 6px; text-align: center; } /* Barre de mise en forme du texte (éditeur de leçon) */ .lc-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; } .lc-fmt button[data-fmt] { min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--slate-200); background: #fff; border-radius: 6px; cursor: pointer; font-size: .95rem; line-height: 1; color: var(--slate-700); } .lc-fmt button[data-fmt]:hover { background: var(--slate-100); } .lc-fmt .lc-fmt__sel { height: 30px; padding: 0 6px; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; font-size: .82rem; color: var(--slate-700); } .lc-fmt .lc-fmt__color { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; cursor: pointer; } .lc-fmt__sep { width: 1px; height: 20px; background: var(--slate-200); margin: 0 4px; } /* Éditeur de texte enrichi (WYSIWYG) — barre, popovers, zone éditable, source */ .lc-fmt button { min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--slate-200); background: #fff; border-radius: 6px; cursor: pointer; font-size: .95rem; line-height: 1; color: var(--slate-700); } .lc-fmt button:hover { background: var(--slate-100); } .lc-fmt__pw { position: relative; display: inline-flex; } .lc-fmt__pw > button { display: inline-flex; align-items: center; gap: 2px; } .lc-fmt__pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.18); padding: 8px; } .lc-fmt__pop[hidden] { display: none; } .lc-fmt__swatches { display: grid; grid-template-columns: repeat(6, 22px); gap: 6px; } .lc-swatch { width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 5px; border: 1px solid var(--slate-300); cursor: pointer; } .lc-swatch:hover { transform: scale(1.12); } .lc-swatch--none { background: #fff; color: var(--slate-400); font-size: .8rem; display: grid; place-items: center; height: 22px; } .lc-fmt__chars { display: grid; grid-template-columns: repeat(6, 30px); gap: 4px; } .lc-char { width: 30px; min-width: 0; height: 30px; padding: 0; border: 1px solid var(--slate-200); background: #fff; border-radius: 6px; cursor: pointer; font-size: 1.05rem; } .lc-char:hover { background: var(--slate-100); } .lc-fmt__opt { display: block; width: 100%; min-width: 130px; height: auto; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .lc-fmt__opt:hover { background: var(--slate-100); } .lc-ink { font-weight: 700; border-bottom: 3px solid #dc2626; line-height: 1; } .lc-rte { min-height: 92px; border: 1px solid var(--slate-200); border-radius: 8px; padding: 10px 12px; background: #fff; outline: none; line-height: 1.55; } .lc-rte:focus { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .lc-rte:empty::before { content: attr(data-placeholder); color: var(--slate-400); pointer-events: none; } .lc-rte p:first-child { margin-top: 0; } .lc-rte p:last-child { margin-bottom: 0; } .lc-math { display: inline-block; } .lc-math[data-display="1"] { display: block; text-align: center; margin: 6px 0; } .lc-src { margin-top: 8px; font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, 'Courier New', monospace; font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; } .lc-srcbtn { margin-left: auto; } .lc-srcbtn.is-on { background: var(--slate-200); } /* Popover « lien » de la barre WYSIWYG : saisie d'URL + actions. Ouverture vers la gauche (right:0) car le contrôle est en fin de barre et le popover est large. */ .lc-fmt__pop--link { left: auto; right: 0; width: 244px; padding: 10px; } .lc-fmt .lc-link__url { width: 100%; height: 32px; min-width: 0; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; font-size: .85rem; color: var(--slate-700); } .lc-fmt .lc-link__url:focus { outline: none; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .lc-link__row { display: flex; gap: 6px; margin-top: 8px; } .lc-fmt .lc-link__apply, .lc-fmt .lc-link__remove { height: 30px; min-width: 0; padding: 0 12px; border-radius: 6px; font-size: .82rem; cursor: pointer; } .lc-fmt .lc-link__apply, .lc-fmt .lc-link__apply:hover { background: var(--primary, #4f46e5); border: 1px solid var(--primary, #4f46e5); color: #fff; } .lc-fmt .lc-link__apply:hover { filter: brightness(1.06); } .lc-fmt .lc-link__remove, .lc-fmt .lc-link__remove:hover { background: #fff; border: 1px solid var(--slate-200); color: var(--slate-600); } .lc-fmt .lc-link__remove:hover { background: var(--slate-100); } /* Insertion d'un tableau : quadrillage survolé pour choisir lignes × colonnes. */ .lc-tbl__grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; } .lc-fmt .lc-tbl__cell { width: 18px; height: 18px; min-width: 0; padding: 0; border: 1px solid var(--slate-300); border-radius: 3px; background: #fff; } .lc-fmt .lc-tbl__cell.is-on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); } .lc-tbl__size { margin-top: 8px; font-size: .78rem; color: var(--muted); text-align: center; } .lc-tbl__opt { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--slate-700); cursor: pointer; } .lc-tbl__opt input { accent-color: var(--primary, #4f46e5); cursor: pointer; } /* Rangée d'outils du tableau : sur sa propre ligne (flex-basis 100 %), montrée seulement quand le curseur est dans une cellule (cf. js/rte.js → syncTblBar). */ .lc-tblbar { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--slate-200); } .lc-tblbar[hidden] { display: none; } .lc-tblbar__lbl { font-size: .78rem; color: var(--muted); } .lc-fmt .lc-tblbar button { height: 26px; min-width: 26px; font-size: .82rem; } .lc-fmt .lc-tblbar__del { margin-left: auto; } .lc-fmt .lc-tblbar__del:hover { background: #fee2e2; border-color: #fca5a5; } /* Réglages de la flèche sélectionnée (.tbf-insp, posé là par js/tableau-core.js). Hors de la rangée « tableau » : celle-ci se referme dès que le curseur passe d'une cellule à une bulle, alors que le panneau doit rester ouvert pendant qu'on saisit le « × 3 ». */ .lc-fmt__insp { flex: 0 0 100%; } .lc-fmt__insp:empty { display: none; } .lc-fmt__insp .tbf-insp { margin-top: 6px; } /* ========================================================================= Illustrations posées AU FIL DU TEXTE d'un bloc (bouton 🖼) — js/rte.js L'image porte sa mise en page en style INLINE (largeur en % du bloc, flottement) : elle s'affiche donc juste partout, y compris là où cette feuille n'entre pas — image rastérisée de l'estrade, capture du PDF. Les règles ci-dessous ne font que l'habiller à l'écran et la signaler comme objet dans l'éditeur. ========================================================================= */ .lc-imgdoc { border-radius: 8px; } /* Une illustration ne se coupe jamais entre deux pages (impression) ni deux colonnes. */ .prose .lc-imgdoc, .lc-rte .lc-imgdoc { break-inside: avoid; page-break-inside: avoid; } /* Bloc portant une illustration FLOTTANTE : il doit la contenir, sinon elle déborde sur le bloc suivant dès que le texte est plus court qu'elle. Le contexte de formatage n'est posé que là où il y a un flottant (classe ajoutée au rendu par HM.fixDocImages) : appliqué à tous les blocs, il supprimerait la fusion des marges et espacerait toute la leçon. */ .lc-hasfloat { display: flow-root; } /* Dans l'éditeur : objet atomique — survol et sélection le disent, et le clic ouvre les réglages dans la barre de mise en forme. flow-root sans condition ici : la zone de saisie a déjà une bordure et un rembourrage, la fusion des marges n'y joue donc aucun rôle. */ .lc-rte { display: flow-root; } .lc-rte .lc-imgdoc { cursor: pointer; box-shadow: 0 0 0 1px transparent; transition: box-shadow .12s ease; } .lc-rte .lc-imgdoc:hover { box-shadow: 0 0 0 2px rgba(79,70,229,.45); } .lc-rte .lc-imgdoc.is-sel { box-shadow: 0 0 0 2px var(--primary, #4f46e5); } /* Réglages de l'image sélectionnée : rangée pleine largeur de la barre de mise en forme, au même endroit que ceux d'une flèche de tableau (.tbf-insp). */ .lc-imgi { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--slate-200); } .lc-imgi[hidden] { display: none; } .lc-imgi__t { font-weight: 700; font-size: .85rem; } .lc-imgi__g { display: inline-flex; gap: 3px; } .lc-fmt .lc-imgi button { height: 26px; min-width: 26px; font-size: .82rem; } .lc-fmt .lc-imgi button.is-on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } .lc-fmt .lc-imgi__del { margin-left: auto; } .lc-fmt .lc-imgi__del:hover { background: #fee2e2; border-color: #fca5a5; } /* Écran étroit : une illustration à 25 % d'une colonne de téléphone n'est plus lisible, et le texte qui l'habille tombe à deux mots par ligne. On la remet dans le fil, sans flottement — le !important est le seul moyen de passer devant le style inline, qui est justement ce qui fait tenir la mise en page partout ailleurs. */ @media (max-width: 560px) { .prose .lc-imgdoc { float: none !important; width: auto !important; max-width: 100% !important; margin: 10px auto !important; } } /* Menu d'insertion d'un schéma (bouton ⚖) : chaque entrée montre le dessin qu'elle produit. */ .lc-fmt__pop[data-popid="sch"] { padding: 6px; } .lc-sch__menu { display: flex; flex-direction: column; gap: 2px; } .lc-fmt .lc-sch__opt { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-width: 320px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; } .lc-fmt .lc-sch__opt:hover { background: var(--slate-100); } .lc-sch__vue { flex: 0 0 92px; display: flex; align-items: center; justify-content: center; min-height: 46px; line-height: 0; } .lc-sch__vue svg { max-width: 100%; height: auto; } .lc-sch__txt { display: flex; flex-direction: column; gap: 1px; } .lc-sch__txt b { font-size: .9rem; color: var(--slate-800); } .lc-sch__txt i { font-style: normal; font-size: .76rem; color: var(--muted); } /* ========================================================================= Schémas insérés PARMI le texte (chaîne d'opérations, balance) — js/schema-core.js Le schéma est un SVG autonome posé dans le HTML du bloc : il n'a besoin d'AUCUNE de ces règles pour s'afficher juste (leçon, élève, impression, PDF, estrade). Elles ne font que le poser dans la ligne de texte et le signaler comme objet dans l'éditeur. ========================================================================= */ .lc-schema { display: inline-block; vertical-align: middle; line-height: 0; max-width: 100%; } .lc-schema svg { max-width: 100%; height: auto; vertical-align: middle; } /* Un schéma ne se coupe jamais entre deux pages / deux colonnes (écran et PDF). */ .prose .lc-schema, .lc-rte .lc-schema { break-inside: avoid; page-break-inside: avoid; } /* Dans l'éditeur : objet atomique — survol et sélection le disent. */ .lc-rte .lc-schema { border-radius: 10px; box-shadow: 0 0 0 1px transparent; cursor: pointer; transition: box-shadow .12s ease; } .lc-rte .lc-schema:hover { box-shadow: 0 0 0 2px var(--primary, #4f46e5); } /* ---- Éditeur de schéma (modale, js/schema-core.js) ---- Superposition distincte de .modal, comme le clavier mathématique : elle doit passer au-dessus des modales déjà ouvertes (note de document, séance du cahier de texte). */ .sch-ov { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto; z-index: 400; } .modal__box--schema { max-width: 900px; } .sch-live { display: flex; align-items: center; justify-content: center; min-height: 130px; margin: 14px 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--slate-50); overflow: auto; } .sch-live svg { max-width: 100%; height: auto; } .sch-form { display: block; } /* Chaîne : la bande de réglages reprend l'ordre du schéma — valeur, flèche, valeur… */ .sch-strip { display: flex; align-items: stretch; gap: 8px; padding-bottom: 6px; overflow-x: auto; } .sch-col { flex: 0 0 auto; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .sch-col--node { width: 144px; } .sch-col--step { width: 158px; background: var(--slate-50); } .sch-col__t { margin-bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sch-f { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; } /* Une flèche = sa rangée de réglages + son nuancier juste en dessous. */ .sch-arrow + .sch-arrow { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--slate-200); } .sch-arrow.is-off { opacity: .5; } .sch-in { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--slate-200); border-radius: 6px; font: inherit; font-size: .88rem; background: #fff; color: var(--slate-800); } .sch-in:focus { outline: none; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .sch-in:disabled { background: var(--slate-100); color: var(--muted); } .sch-in--wide { width: 100%; box-sizing: border-box; } .sch-in--op { flex: 1 1 40px; } .sch-rd, .sch-dir, .sch-on { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; cursor: pointer; font-size: .9rem; line-height: 1; color: var(--slate-600); } .sch-rd:hover, .sch-dir:hover, .sch-on:hover { background: var(--slate-100); } .sch-rd.is-on, .sch-on.is-on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } .sch-dir:disabled { background: var(--slate-100); color: var(--slate-300); cursor: default; } /* Nuancier : une couleur = un rôle (l'aller en bleu, le retour en vert, par exemple). Sur UNE seule rangée : la bande de réglages doit rester aussi lisible que le schéma. */ .sch-sw { display: flex; gap: 2px; margin-top: 5px; } .sch-sw__b { flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 2px solid; border-radius: 50%; cursor: pointer; } .sch-sw__b.is-on { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--slate-700); } .sch-side .sch-sw__b { width: 20px; height: 20px; } .sch-side .sch-sw { gap: 5px; margin-top: 8px; } .sch-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* Balance : les deux plateaux, puis l'état de l'aiguille. */ .sch-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sch-side { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .sch-side__lbl { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 600; color: var(--slate-700); } .sch-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: .8rem; font-weight: 600; color: var(--slate-700); } .sch-e, .sch-z { height: 30px; padding: 0 12px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; cursor: pointer; font-size: .84rem; color: var(--slate-700); } .sch-e:hover, .sch-z:hover { background: var(--slate-100); } .sch-e.is-on, .sch-z.is-on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } .sch-chars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .sch-char { width: 30px; height: 30px; padding: 0; border: 1px solid var(--slate-200); border-radius: 6px; background: #fff; cursor: pointer; font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; color: var(--slate-700); } .sch-char:hover { background: var(--slate-100); } .sch-hint { margin-left: 6px; font-size: .76rem; color: var(--muted); } .sch-hint code { background: var(--slate-100); padding: 1px 5px; border-radius: 5px; } .sch-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--slate-700); } .modal__box--schema .sch-del { margin-right: auto; color: #b91c1c; } /* Calculs avec priorités : les signes de l'aperçu se cliquent */ .sch-live rect[data-l] { cursor: pointer; outline: none; } .sch-live rect[data-l]:hover, .sch-live rect[data-l]:focus { fill: rgba(79,70,229,.16); } .sch-pr__aide { margin: 0 0 10px; font-size: .84rem; color: var(--slate-700); } .sch-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .sch-pr__ch { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--slate-700); } .sch-pr__ch .sch-in { width: 76px; flex: 0 0 auto; } .sch-pr__ch--calc { flex: 1 1 260px; } .sch-pr__ch--calc .sch-in { flex: 1 1 auto; width: auto; } .sch-pr__ch .sch-sw { margin-top: 0; gap: 5px; } .sch-pr__ch .sch-sw__b { width: 20px; height: 20px; } .sch-pr__res { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; } .sch-pr__res:empty { display: none; } .sch-pr__l { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--slate-700); } .sch-pr__l .sch-in { width: 84px; flex: 0 0 auto; } .sch-pr__msg { margin: 8px 0 0; font-size: .82rem; color: #b45309; } .sch-pr__msg:empty { display: none; } @media (max-width: 620px) { .sch-bal { grid-template-columns: 1fr; } } /* ========================================================================= Opérations posées — js/poses-core.js L'opération elle-même est un SVG AUTONOME (couleurs, retenues, traits : tout est en attributs de présentation) : rien ici ne la concerne, et c'est ce qui lui permet de s'afficher à l'identique en leçon, chez l'élève, à l'impression, dans le PDF, sur l'estrade et sur une page de partage. Cette section n'habille que l'ÉDITEUR, la visionneuse, le jeton posé au fil du texte et l'aperçu d'hexagone. ========================================================================= */ /* ---- Jeton posé au fil du texte (bloc de texte, encadré…) — même contrat que .lc-schema */ .lc-posee { display: inline-block; vertical-align: middle; line-height: 0; max-width: 100%; } .lc-posee svg { max-width: 100%; height: auto; vertical-align: middle; } /* Une opération ne se coupe jamais entre deux pages / deux colonnes (écran et PDF). */ .prose .lc-posee, .lc-rte .lc-posee { break-inside: avoid; page-break-inside: avoid; } /* Dans l'éditeur : objet atomique — survol et sélection le disent. */ .lc-rte .lc-posee { border-radius: 10px; box-shadow: 0 0 0 1px transparent; cursor: pointer; transition: box-shadow .12s ease; } .lc-rte .lc-posee:hover { box-shadow: 0 0 0 2px var(--primary, #4f46e5); } /* ---- Éditeur : superposition propre, comme celle des schémas (elle doit passer au-dessus d'une modale déjà ouverte). */ .pos-ov { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto; z-index: 400; } .modal__box--poses { max-width: 960px; width: 96vw; } .pos-host, .pos-ed { display: block; } /* Choix du type d'opération, et segments de réglage */ .pos-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--slate-50); } .pos-seg--type { display: flex; width: 100%; margin: 12px 0; } .pos-seg__b { flex: 1; padding: 7px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; } .pos-seg__b:hover { background: #fff; color: var(--text); } .pos-seg__b.is-on { background: var(--slate-800); color: #fff; } /* Les nombres de l'opération */ .pos-nb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } .pos-nb__row { display: flex; align-items: center; gap: 8px; } .pos-nb__lbl { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pos-nb__in { width: 9.5rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); text-align: right; font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; letter-spacing: .06em; } .pos-nb__in:focus { outline: none; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); } .pos-nb__in--court { width: 3.4rem; } .pos-nb__u { margin-right: 6px; font-size: .8rem; color: var(--muted); } /* Icônes discrètes : ⊕ ajouter un terme, ✕ le retirer, ✎ reprendre la saisie. */ .pos-ic { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: .9rem; line-height: 1; color: var(--muted); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .pos-ic:hover { background: var(--slate-100); color: var(--text); } .pos-ic--del:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; } .pos-ic--add { font-size: .84rem; font-weight: 600; color: var(--primary, #4f46e5); } .pos-ic--add:hover { background: rgba(79, 70, 229, .09); color: var(--primary, #4f46e5); } .pos-note { margin: 10px 0 0; max-width: 68ch; font-size: .76rem; color: var(--muted); } /* Aperçu : ce que l'on voit est exactement ce qui sera posé. */ .pos-vue { display: flex; align-items: center; justify-content: center; min-height: 190px; margin-top: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: auto; } .pos-vue svg { max-width: 100%; height: auto; } .pos-hit { cursor: pointer; } .pos-avert { margin: 8px 0 0; padding: 7px 11px; border-radius: 9px; background: #fef3c7; color: #92400e; font-size: .82rem; } /* Barres de réglage : chiffre choisi, puis options de l'opération. */ .pos-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--slate-50); } .pos-bar--cell { min-height: 48px; } .pos-grp { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .pos-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pos-btn { padding: 6px 11px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font: inherit; font-size: .82rem; color: var(--text); cursor: pointer; } .pos-btn:hover { background: var(--slate-100); } .pos-btn.is-on { background: var(--slate-800); border-color: var(--slate-800); color: #fff; } .pos-btn--danger:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; } .pos-couls { display: flex; align-items: center; gap: 5px; } .pos-sw { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(15, 23, 42, .18); border-radius: 50%; cursor: pointer; transition: transform .12s ease; } .pos-sw:hover { transform: scale(1.15); } .pos-sw.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--slate-800); } .pos-hint { font-size: .82rem; color: var(--muted); } .pos-msg { margin: 0; padding: 14px; font-size: .9rem; color: var(--muted); text-align: center; } .modal__box--poses .pos-del { margin-right: auto; color: #b91c1c; } /* Visionneuse */ .poses-view { display: flex; justify-content: center; padding: 12px; overflow: auto; } .poses-view svg { max-width: 100%; height: auto; } /* Aperçu dessiné dans la tuile (cf. Core\Modules : budget d'octets du type). */ .hm-hex--posesbg { background: linear-gradient(150deg, #fff7ed, #fed7aa); } .hm-hex--posesbg .hm-hex__ic { display: none; } .hm-hex__poses { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .hm-hex__poses svg { width: 70%; height: 70%; } .hm-hex--posesbg .hm-hex__name { font-size: .84rem; -webkit-line-clamp: 3; } @media (max-width: 620px) { .pos-seg--type { flex-wrap: wrap; } .pos-seg--type .pos-seg__b { flex: 1 0 30%; } .pos-nb__in { width: 7.5rem; } } /* Export / impression */ .lc-print__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .lc-print__head { margin-bottom: 18px; border-bottom: 2px solid var(--slate-800); padding-bottom: 10px; } .lc-print__head h1 { margin: 0 0 4px; } .lc-print__meta { margin: 0; color: var(--muted); } /* Impression d'une leçon : case « inclure le titre » devant le titre (écran seulement). */ .lc-print__head--check { display: flex; align-items: center; gap: 12px; } .lc-print__head--check h1 { margin: 0; } .lc-print__titlecheck input { width: 17px; height: 17px; cursor: pointer; display: block; } /* Titre exclu de l'impression : grisé à l'écran pour le signaler. */ .lc-print__head.lc-title-off h1 { opacity: .35; } .lc-doc--print { border: 0; padding: 0; } /* Vue impression du Cours : page en A4 PORTRAIT, calée sur sa largeur utile (210mm − 2×12mm = 186mm) à l'écran ET à l'impression. Cette égalité écran / papier est ce qui permet aux figures GeoGebra — dimensionnées en px au moment du rendu écran (geogebra.js → inject) — de remplir la largeur de la page imprimée ; elle interdit du même coup d'élargir la feuille à l'écran seul, ce serait mentir sur le résultat imprimé. Portrait : classement des feuilles dans le classeur élève, au prix d'une ligne plus courte (186mm au lieu des 277 du paysage essayé fin juillet). Les trois sorties de la page sont alignées sur cette géométrie — impression navigateur (@page ci-dessous) et les deux boutons PDF (cours-pdf.js → PAGE_W/PAGE_H + orientation). 186mm ≈ 703px : la feuille tient dans les 720px utiles de .public-main (760px moins son padding), inutile d'élargir le gabarit sur cette page. */ .lc-print { width: 186mm; max-width: 100%; margin: 0 auto; } /* Seules les figures GeoGebra « côte à côte » passent en pleine largeur (applet dessus, texte dessous) : l'applet est dimensionnée en px au rendu écran et resterait cantonnée à une colonne étroite (~42%). Une figure image, elle, garde sa mise en page côte à côte — un se met à l'échelle de sa colonne, et la feuille doit refléter la leçon. */ .lc-print .lc-figure--ggb.lc-figure--left, .lc-print .lc-figure--ggb.lc-figure--right { display: block; } .lc-print .lc-figure--ggb .lc-figure__img { flex: none; max-width: 100%; } .lc-print .lc-figure--ggb .lc-figure__text { margin-top: 10px; } /* Les blocs réduits à un QR code (vidéo, MathALÉA, PDF joint) ont longtemps porté `break-before: avoid`, pour qu'un QR ne tombe pas seul en haut d'une page, détaché de ce qu'il illustre. RETIRÉ le 2026-08-07 : dans Chrome, un `avoid` n'est pas une préférence mais une contrainte, et surtout il se CHAÎNE — deux QR consécutifs se soudent l'un à l'autre puis au bloc qui les précède, et c'est le groupe entier que la mise en page déplace. Mesuré sur le cahier de 3e (leçon « A) Développer et réduire »), en millimètres : REMARQUE 42,9 + QR vidéo 39,7 + QR MathALÉA 34,9 = 117,5 pour 116,7 disponibles en bas de page. La chaîne rate de 0,8 mm — et ces 0,8 mm coûtaient 117 mm de blanc, soit 43 % de la page, la REMARQUE et ses deux QR filant ensemble à la page suivante. Sur le cahier d'un niveau entier, où les leçons s'enchaînent, le défaut se répète à chaque leçon. Arbitrage de Sylvain (2026-08-07) : un QR seul en haut d'une page est préférable à une demi-page blanche. Les blocs restent insécables (`break-inside: avoid`, @media print) : un QR n'est donc jamais coupé en deux, il peut seulement commencer une page. */ /* Écran étroit : la page « papier » (277mm) est rabotée par max-width:100% et deux colonnes n'y tiennent plus → visuel dessus, texte dessous. Écran seulement : à l'impression la largeur est toujours celle de l'A4. */ @media screen and (max-width: 640px) { .lc-print .lc-figure--left, .lc-print .lc-figure--right, .lc-print .lc-figure--duo { display: block; } .lc-print .lc-figure--left .lc-figure__img, .lc-print .lc-figure--right .lc-figure__img { flex: none; max-width: 100%; } /* Deux images empilées : le même écart qu'entre les deux colonnes, en vertical. */ .lc-print .lc-figure--duo .lc-figure__img + .lc-figure__img { margin-top: 16px; } .lc-print .lc-figure--left .lc-figure__text, .lc-print .lc-figure--right .lc-figure__text, .lc-print .lc-figure--duo .lc-figure__text { margin-top: 10px; } } /* ========================================================================= « Cahier de cours » — impression de tout un niveau (/cours/niveau/{id}/print) Même feuille A4 portrait que l'impression d'une leçon (.lc-print, 186mm de large) : page de garde, une page de titre par chapitre, puis une page par leçon, enchaînées par des sauts de page forcés. Hauteur utile d'une page = 297 − 2×12 = 273mm. Les pages « pleines » sont bornées un peu en deçà (262mm) : à la hauteur exacte, le moindre arrondi déborde et ajoute une page blanche derrière chaque couverture de chapitre. ========================================================================= */ .lc-cahier__count { font-size: .88rem; color: var(--muted); } /* Décompte de préparation (figures GeoGebra dessinées une par une) : vide = invisible. */ .lc-cahier__status { font-size: .88rem; color: var(--muted); } .lc-cahier__status:empty { display: none; } .lc-cahier__status.is-pret { color: var(--acc-cours-2); font-weight: 600; } [data-cahier-print][disabled] { opacity: .55; cursor: progress; } .lc-cahier__hint { flex-basis: 100%; margin: 0; font-size: .88rem; color: var(--muted); } /* Mise en garde sur la destination d'impression : à lire avant de cliquer, donc pas en gris de note. */ .lc-cahier__warn { margin-top: 8px; padding: 8px 12px; border-left: 4px solid var(--acc-doc-1); background: #fffbeb; border-radius: 0 8px 8px 0; color: var(--slate-700); } /* Fond blanc comme .lc-doc : à l'écran, couverture et pages de chapitre se lisent comme du papier posé sur l'ardoise du gabarit. */ .cah-page { min-height: 262mm; display: flex; flex-direction: column; background: #fff; } /* ---- Sauts de page, selon la mise en page ---- Les quatre réglages sont portés par des classes de la RACINE .lc-cahier, jamais par le balisage : la barre d'outils de l'aperçu peut ainsi les basculer à la volée, sans recharger — donc sans redessiner une par une les dizaines de figures GeoGebra du niveau. Un saut devant chaque chapitre et chaque leçon (la page de garde ouvre le document, elle n'en a pas besoin), puis trois exceptions : - .lc-cahier--suite : les leçons s'enchaînent, plus de saut devant elles ; - .lc-cahier--reduit : le titre tient dans un bandeau, la 1re leçon reprend dessous — sans quoi le bandeau resterait seul sur sa page et l'option ne servirait à rien ; - .lc-cahier--recto : reliure recto-verso, les ouvertures tombent sur une page de droite. Le saut APRÈS une page de titre pleine est explicite : sa hauteur (262mm) laisse sinon assez de place pour y attirer le titre de la leçon suivante. */ .cah-chap, .cah-lecon { break-before: page; page-break-before: always; } .cah-chap { break-after: page; page-break-after: always; } .lc-cahier--suite .cah-lecon { break-before: auto; page-break-before: auto; } .lc-cahier--reduit .cah-chap { break-after: auto; page-break-after: auto; } .lc-cahier--reduit .cah-chap + .cah-lecon { break-before: auto; page-break-before: auto; } .lc-cahier--recto .cah-chap, .lc-cahier--recto .cah-somm { break-before: right; page-break-before: right; } /* Deux leçons qui se suivent : de l'air et un filet, sinon on ne voit pas où l'une finit et où l'autre commence. Le filet est posé en BAS de celle qui se termine, et non en haut de celle qui commence : quand la coupure de page tombe entre les deux, il reste ainsi au pied de la page précédente au lieu de flotter seul en haut de la nouvelle (vu sur le cahier de 3e du 07/08). Rayon annulé : .lc-doc arrondit ses coins, ce qui recourbait les deux extrémités du trait vers le bas. */ .lc-cahier--suite .cah-lecon:has(+ .cah-lecon) { padding-bottom: 8mm; border-bottom: 1px solid var(--slate-300); border-radius: 0; } .lc-cahier--suite .cah-lecon + .cah-lecon { margin-top: 10mm; } .lc-cahier--suite .cah-lecon > .lc-print__head { break-after: avoid; page-break-after: avoid; } /* Page de garde : bloc de titre centré, nom du professeur en pied de page. */ .cah-cover { justify-content: space-between; text-align: center; } .cah-cover__body { margin: auto 0; } .cah-cover__hex { display: block; margin: 0 auto 12mm; } .cah-cover__title { margin: 0; font-size: 3.2rem; line-height: 1.1; letter-spacing: -.02em; } .cah-cover__niveau { margin: 12mm 0 0; font-family: var(--font-display); font-size: 2rem; font-weight: 600; } .cah-cover__annee { margin: 4mm 0 0; color: var(--muted); font-size: 1.05rem; } .cah-cover__prof { margin: 0; font-size: 1.25rem; font-weight: 600; } /* Page de titre d'un chapitre : rien d'autre sur la page, centré, en grand. */ .cah-chap { justify-content: center; text-align: center; } .cah-chap__title { margin: 0; font-size: 2.6rem; line-height: 1.2; } /* Variante « titre réduit » : la page de titre se resserre en un cadre de 10 cm de haut en tête de page. Hauteur minimale et non fixe — un titre à rallonge doit pouvoir pousser le cadre plutôt que déborder dessous. Le cadre est nécessaire : sans lui, un titre nu se confondrait avec celui de la leçon qui le suit immédiatement. */ .lc-cahier--reduit .cah-chap { min-height: 100mm; margin-bottom: 8mm; padding: 6mm 10mm; border: 2px solid var(--slate-700); border-radius: 12px; } .lc-cahier--reduit .cah-chap__title { font-size: 2.1rem; } /* Sommaire : toujours présent dans le document, révélé par la classe de racine — la case à cocher de la barre d'outils l'affiche donc sans recharger la page. */ /* Le saut de page est porté par .cah-somm seul, et non par la règle de révélation : à deux classes, celle-ci ferait jeu égal avec .lc-cahier--recto .cah-somm et, déclarée après, lui volerait le « break-before: right » du mode recto-verso. */ .cah-somm { display: none; break-before: page; page-break-before: always; } .lc-cahier--sommaire .cah-somm { display: flex; justify-content: flex-start; } /* Tout est dimensionné en em : cours-cahier.js n'a plus qu'à poser une taille de police sur .cah-somm pour resserrer l'ensemble d'un bloc quand un niveau très fourni déborderait de la page. Des rem ou des mm ne suivraient pas et casseraient l'équilibre en se resserrant. */ .cah-somm__head { margin-bottom: 1.6em; padding-bottom: .7em; border-bottom: 2px solid var(--slate-800); text-align: center; } .cah-somm__title { margin: 0; font-size: 2em; line-height: 1.15; letter-spacing: -.01em; } .cah-somm__sub { margin: .45em 0 0; color: var(--muted); font-size: .82em; } /* Deux colonnes : un niveau ordinaire (une douzaine de chapitres, une quarantaine de leçons) tient alors sur une page sans rien resserrer. Un chapitre ne se coupe jamais en deux. */ .cah-somm__cols { columns: 2; column-gap: 11mm; } .cah-somm__chap { break-inside: avoid; margin: 0 0 1.1em; } .cah-somm__chaptitle { margin: 0 0 .4em; padding-bottom: .22em; border-bottom: 1px solid var(--slate-300); font-family: var(--font-display); font-size: .98em; font-weight: 600; line-height: 1.3; } .cah-somm__lecons { margin: 0; padding: 0; list-style: none; font-size: .86em; color: var(--slate-700); } /* Retrait négatif : un titre de leçon trop long se replie sous lui-même, aligné sur le texte et non sur la marge — deux colonnes étroites en produisent forcément. */ .cah-somm__lecons li { margin: .22em 0; padding-left: 1.1em; text-indent: -1.1em; line-height: 1.35; } @media screen { /* Le document est un rouleau continu à l'écran : un filet matérialise chaque saut de page, sinon on ne sait plus où l'on en est. Le retrait n'est posé que sur les leçons — sur une page de chapitre il décalerait le titre, qui est centré dans la hauteur de la boîte. */ .cah-chap, .cah-lecon { border-top: 1px dashed var(--slate-300); margin-top: 12mm; } .cah-lecon { padding-top: 12mm; } /* Là où les leçons s'enchaînent, plus de saut de page devant elles : le filet pointillé annoncerait une coupure qui n'existe pas. Même chose pour la 1re leçon d'un chapitre réduit, qui reste sur la page du bandeau. */ .lc-cahier--suite .cah-lecon + .cah-lecon { border-top: 0; padding-top: 0; } .lc-cahier--reduit .cah-chap + .cah-lecon { border-top: 0; margin-top: 6mm; padding-top: 0; } } /* ---- Réglages de mise en page : modale du classeur et barre d'outils de l'aperçu ---- */ .cah-opt { margin: 0 0 14px; padding: 0; border: 0; } .cah-opt__legend { padding: 0; font-size: .85rem; font-weight: 600; color: var(--slate-700); } .cah-opt__choice { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; cursor: pointer; } .cah-opt__choice input { margin-top: 3px; } .cah-opt__choice small { display: block; color: var(--muted); font-size: .82rem; } .cah-opt__fixe { margin: 0; color: var(--muted); font-size: .82rem; } /* Liste des chapitres à imprimer : bornée en hauteur, un niveau peut en compter quinze. */ .cah-opt__chaps { max-height: 168px; overflow-y: auto; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; } .cah-opt__chaps label { display: flex; gap: 8px; align-items: center; padding: 3px 0; cursor: pointer; font-size: .92rem; } .cah-opt__chaps label.is-all { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-weight: 600; } /* Barre d'outils de l'aperçu : les mêmes réglages, appliqués sans recharger. */ .lc-cahier__opts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; font-size: .9rem; } .lc-cahier__opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } @media print { @page { size: A4 portrait; margin: 12mm; } /* Annule le html,body{height:100%} global : en impression il fige le corps à exactement une page ; la moindre marge qui s'en échappe (ex. titre décoché → en-tête display:none → marge haute du 1er paragraphe qui remonte jusqu'au body, les conteneurs .lc-doc--print/.lc-print/.public-main étant sans padding) fait alors déborder d'un poil et ajoute une 2e page blanche. */ html, body { height: auto; } .public-topbar, .footer, .no-print { display: none !important; } body { background: #fff; } .public-main { max-width: none; padding: 0; } .lc-print { width: auto; } .lc-block { break-inside: avoid; } } /* ========================================================================= Version à compléter (cours à trous) — page d'impression du Cours ========================================================================= */ /* Police OpenDyslexic (auto-hébergée) : lisibilité pour les élèves dyslexiques. */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } .lc-trous-hint { flex-basis: 100%; margin: 0; font-size: .88rem; color: var(--muted); } /* display:inline-flex de .btn écrase l'attribut [hidden] : on le rétablit explicitement. */ [data-trous-clear][hidden], .lc-trous-hint[hidden] { display: none; } /* Témoin d'enregistrement automatique (vide = invisible, pas de trou dans la barre). */ .lc-trous-status { font-size: .88rem; color: var(--muted); } .lc-trous-status:empty { display: none; } /* Mode actif : tout le document passe en OpenDyslexic (sauf les formules MathJax, qui gardent leur police mathématique) ; interlignage élargi pour l'écriture manuscrite. */ .lc-print.is-trous .lc-doc { font-family: 'OpenDyslexic', var(--font-sans, sans-serif); user-select: none; } .lc-print.is-trous .lc-doc h1, .lc-print.is-trous .lc-doc h2, .lc-print.is-trous .lc-doc h3 { font-family: 'OpenDyslexic', var(--font-display, sans-serif); } .lc-print.is-trous .prose { line-height: 2; } /* Mots et formules cliquables (affordance écran uniquement). */ .lc-print.is-trous .trou-w { cursor: pointer; border-radius: 3px; } .lc-print.is-trous .trou-w:hover { outline: 2px solid #93c5fd; } .lc-print.is-trous mjx-container { cursor: pointer; } .lc-print.is-trous mjx-container:hover { outline: 2px solid #93c5fd; border-radius: 3px; } /* Tous les rendus « trou » sont conditionnés au mode actif (.is-trous) : le bouton « Version originale » retire la classe et le document redevient intact à l'écran comme à l'impression, sans perdre les masquages mémorisés dans le DOM. */ /* Mot masqué → cadre vide élargi (l'écriture manuscrite prend plus de place que l'imprimé). */ .lc-print.is-trous .trou-w.is-trou { display: inline-block; color: transparent; background: #fff; border: 1.5px solid #0f172a; border-radius: 5px; padding: .05em .7em; min-width: 3em; margin: 1px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lc-print.is-trous .trou-w.is-trou * { color: transparent; } /* Mots masqués adjacents : fusionnés en un seul cadre (le cadre passe sur la série, les mots à l'intérieur perdent le leur). word-spacing élargi → place pour écrire. */ .lc-print.is-trous .trou-run { display: inline-block; color: transparent; background: #fff; border: 1.5px solid #0f172a; border-radius: 5px; padding: .05em .7em; margin: 1px 0; word-spacing: .5em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lc-print.is-trous .trou-run .trou-w.is-trou { display: inline; border: 0; background: none; padding: 0; margin: 0; min-width: 0; } /* Formule masquée → cadre vide encore plus grand (inline-block : min-width/height sans effet sur un élément inline). Formule en display : cadre centré à sa taille. */ .lc-print.is-trous mjx-container.is-trou { display: inline-block; border: 1.5px solid #0f172a; border-radius: 5px; background: #fff; padding: .2em 1em !important; min-width: 4em; min-height: 1.6em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lc-print.is-trous mjx-container[display="true"].is-trou { display: block; width: fit-content; margin-left: auto; margin-right: auto; } .lc-print.is-trous mjx-container.is-trou > * { visibility: hidden; } /* Zones d'image masquées : rectangles blancs à liseré noir, tracés à la souris (% de l'image). */ .trou-imgbox { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; } .lc-print.is-trous .trou-imgbox { cursor: crosshair; touch-action: none; } .lc-print.is-trous .trou-imgbox img { -webkit-user-drag: none; } .lc-print.is-trous .trou-rect { position: absolute; background: #fff; border: 1.5px solid #0f172a; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lc-print.is-trous .trou-rect:hover { border-color: #dc2626; cursor: pointer; } /* ========================================================================= Mes documents — tuiles à fond image, nom en bandeau, +, corbeille, dépôt ========================================================================= */ .hm-hex { background-size: cover; background-position: center; background-color: var(--slate-200); } /* Contenu de la tuile */ .hm-hex__ic { position: absolute; inset: 0; display: grid; place-items: center; } .hm-hex__ic svg { width: 50px; height: 50px; } /* Titre : centré au milieu de l'hexagone, noir sur SURLIGNAGE BLANC (contour net + halo doux) → lisible sur n'importe quel fond (couleur, image, aperçu). Uniforme pour tous les types. */ .hm-hex__name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 22px; font-size: .88rem; font-weight: 700; line-height: 1.18; text-align: center; color: #0f172a; paint-order: stroke fill; -webkit-text-stroke: 3px #fff; text-shadow: 0 0 3px #fff, 0 0 7px rgba(255, 255, 255, .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; z-index: 1; } .hm-hex__pub { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px rgba(255,255,255,.7); } /* Pastille « visible par les élèves » : masquée par défaut, affichée quand le partage est actif. Même œil que l'outil correspondant, sur un jeton clair qui tient sur tous les fonds. Placée EN BAS À DROITE, à l'intérieur du polygone : posée en haut à droite, elle tombait hors du clip-path de l'hexagone (donc invisible) et passait sous la barre d'outils. */ .hm-hex__eleve { position: absolute; bottom: 14px; right: 52px; z-index: 2; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.94); color: #15803d; box-shadow: 0 1px 4px rgba(15,23,42,.35); } .hm-hex__eleve svg { width: 13px; height: 13px; display: block; } .hm-tile[data-eleve="1"] .hm-hex__eleve { display: grid; } /* Pastille « À construire » : figure GeoGebra dont les élèves reçoivent les outils (migration 077). Centrée, assez haut pour ne pas croiser l'œil du partage élève ni les silhouettes du dossier partagé (bas de la tuile) ; verte, « Enregistrée », quand l'élève y a déposé son travail. */ .hm-hex__outils { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; background: rgba(255,255,255,.95); color: #b45309; box-shadow: 0 1px 4px rgba(15,23,42,.3); pointer-events: none; } .hm-hex__outils.is-fait { background: #059669; color: #fff; } /* Partage élève actif : l'outil reste allumé même sans survol du bouton. */ .hm-tile[data-eleve="1"] .hm-tile__tools button[data-action="eleve"] { background: #d1fae5; color: #047857; } /* Hexagones partagés avec les élèves : liseré vert (hexagone vert placé derrière, contenu réduit) */ .hm-tile[data-eleve="1"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #16a34a; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .hm-tile[data-eleve="1"] .hm-hex { position: relative; z-index: 1; transform: scale(.955); } /* Dossiers & Notes : pas d'icône, le titre occupe l'hexagone (style commun via la base). */ .hm-tile[data-kind="dossier"] .hm-hex__ic { display: none; } .hm-tile[data-kind="dossier"] .hm-hex__name { font-size: .95rem; } .hm-hex--note .hm-hex__ic { display: none; } .hm-hex--note .hm-hex__name { font-size: 1rem; -webkit-line-clamp: 4; } /* Tuile « + » d'ajout */ .hm-hex--add { background: var(--slate-100); } .hm-tile--add:hover .hm-hex--add { background: var(--slate-200); } .hm-hex__plus { font-size: 3.2rem; font-weight: 300; color: var(--slate-400); line-height: 1; } /* Cible de dépôt (survol pendant le glisser) */ .hm-tile.is-drop { z-index: 8; } .hm-tile.is-drop .hm-hex { transform: scale(1.14); filter: brightness(1.12) saturate(1.25); } /* Corbeille fixe */ .hm-trash { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; z-index: 40; transition: transform .12s ease; } .hm-trash:hover { transform: translateY(-2px); } .hm-trash__hex { width: 84px; height: 73px; color: #fff; display: grid; place-items: center; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: linear-gradient(150deg, #64748b, #475569); filter: drop-shadow(0 5px 9px rgba(15,23,42,.25)); } .hm-trash__hex svg { width: 30px; height: 30px; } .hm-trash__label { font-size: .72rem; color: var(--slate-600); font-weight: 600; } .hm-trash.is-drop { transform: scale(1.12); } .hm-trash.is-drop .hm-trash__hex { background: linear-gradient(150deg, #ef4444, #dc2626); } /* Panier : presse-papier de déplacement (translucide, fixé en bas) */ .docs-panier { position: fixed; left: 0; right: 120px; bottom: 0; z-index: 35; display: none; align-items: center; gap: 12px; padding: 10px 16px; min-height: 116px; background: rgba(15,23,42,.14); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-top: 2px solid rgba(15,23,42,.18); box-shadow: 0 -6px 18px rgba(15,23,42,.12); } .docs-panier.is-active, .docs-panier.is-revealed { display: flex; } .docs-panier.is-drop { background: rgba(37,99,235,.18); border-top-color: var(--primary); } .docs-panier__label { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--slate-700); } .docs-panier__items { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; flex: 1 1 auto; } .hm-mini { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; user-select: none; touch-action: none; } .hm-mini__hex { width: 88px; height: 76px; display: grid; place-items: center; color: #fff; background-size: cover; background-position: center; background-color: var(--slate-200); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .hm-mini__ic svg { width: 34px; height: 34px; } .hm-mini__name { max-width: 88px; font-size: .68rem; line-height: 1.1; text-align: center; color: #0f172a; paint-order: stroke fill; -webkit-text-stroke: 2px #fff; text-shadow: 0 0 2px #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-mini.is-dragging { position: fixed; z-index: 210; pointer-events: none; opacity: .96; cursor: grabbing; } .hm-mini.is-dragging .hm-mini__hex { filter: brightness(1.08) drop-shadow(0 10px 16px rgba(15,23,42,.4)); } /* Bande de détection au ras du bas : révèle le panier pendant un glisser */ .docs-panier-zone { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; z-index: 34; pointer-events: none; } .docs-panier-zone.is-drop { background: linear-gradient(180deg, rgba(250,204,21,0), rgba(250,204,21,.55)); } /* Marge basse pour ne pas masquer la dernière rangée quand le panier est actif */ .docs.has-panier { padding-bottom: 150px; } /* Modale catégorie : ruche d'hexagones — 5 par rangée, rangées intercalées de 4. Le nid d'abeille naît du flux : chaque hexagone fait 1/5 de la ruche, les rangées s'emboîtent par marge basse négative, et la 1re tuile d'une rangée décalée (cycle 9 = 5 + 4) est poussée d'un demi-hexagone — une rangée décalée mesure alors 4,5 hexagones, soit moins que la ruche : elle se referme d'elle-même après 4 tuiles. Robuste à la suppression de tuiles (l'éditeur de cours en retire 4, cf. cours.js) : le motif se recalcule sur les éléments restants, et une rangée incomplète reste une rangée valable. */ .modal__box--cat { max-width: 580px; } .cat-head { text-align: center; margin-bottom: 16px; } .cat-sub { margin: 4px 0 0; color: var(--muted); font-size: .85rem; } .cat-hive { --s: 104px; width: calc(var(--s) * 5); margin: 0 auto; display: flex; flex-wrap: wrap; padding: 4px 0 12px; } .cat-hex { position: relative; width: var(--s); height: calc(var(--s) * 1.1547); margin: 0 0 calc(var(--s) * -0.2887); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; padding: 0 12px; cursor: pointer; font: inherit; color: #fff; background: linear-gradient(160deg, var(--cat1), var(--cat2)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); /* fin liseré clair entre alvéoles */ transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } .cat-hex:nth-child(9n+6) { margin-left: calc(var(--s) / 2); } .cat-hex:hover, .cat-hex:focus-visible { outline: none; z-index: 1; transform: translateY(-3px) scale(1.045); filter: saturate(1.12) brightness(1.06); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9); } /* anneau intérieur épousant l'hexagone */ .cat-hex:active { transform: translateY(-1px); } .cat-hex__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .cat-hex__ic svg { width: 18px; height: 18px; } .cat-hex__lbl { font-size: .72rem; font-weight: 700; letter-spacing: .015em; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(15, 23, 42, .25); } .modal__foot--center { justify-content: center; } /* Écran étroit : cinq alvéoles de front deviendraient illisibles (les libellés du type « Arbre proba. » n'y tiennent plus). On revient donc à la ruche de 3, motif 3-2-3-2 (cycle 5 = 3 + 2) — l'ancien décalage est neutralisé avant de reposer le nouveau. */ @media (max-width: 620px) { .cat-hive { --s: 28vw; width: calc(var(--s) * 3); } .cat-hex:nth-child(9n+6) { margin-left: 0; } .cat-hex:nth-child(5n+4) { margin-left: calc(var(--s) / 2); } } @media (prefers-reduced-motion: reduce) { .cat-hex { transition: none; } .cat-hex:hover, .cat-hex:focus-visible { transform: none; } } /* Modale corbeille */ .trash-bar { margin-bottom: 8px; } .trash-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; } .trash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--slate-100); } .trash-item__t { overflow: hidden; text-overflow: ellipsis; } .trash-item__tools { display: flex; gap: 12px; font-size: .85rem; white-space: nowrap; } .linklike--danger { color: #dc2626; } .trash-empty { color: var(--muted); padding: 16px; text-align: center; } /* ========================================================================= Le Cahier de texte ========================================================================= */ .cdt__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .cdt__actions { display: flex; gap: 8px; flex-wrap: wrap; } .cdt__week { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .cdt__range { font-weight: 600; } /* Grille semaine : une rangée par jour, chaque jour aligné avec ses devoirs (colonne droite). */ .cdt__grid { display: flex; flex-direction: column; gap: 12px; } .cdt-row { display: flex; gap: 18px; align-items: flex-start; } .cdt-row__main { flex: 1; min-width: 0; } .cdt-row__side { width: 290px; flex-shrink: 0; } .cdt-row__main .cdt-day { margin-bottom: 0; } .cdt-row__side .cdt-travaux-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 12px; } .cdt-side__rest { margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--muted); } .cdt-row--rest .cdt-row__main { display: none; } .cdt__travaux-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .cdt__travaux-head h3 { margin: 0; font-size: 1rem; } .cdt-day { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; padding: 10px 12px; } .cdt-day__head { margin: 0 0 8px; font-size: 1rem; } .cdt-day__head span { color: var(--muted); font-weight: 400; font-size: .85rem; } .cdt-day__add { border: 1px dashed var(--slate-300); background: none; color: var(--muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: .82rem; margin-top: 4px; } .cdt-day__add:hover { background: var(--slate-50); } .cdt-slot { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; margin-bottom: 6px; border: 1px solid var(--slate-200); } .cdt-slot:hover { border-color: var(--slate-400); } .cdt-slot.is-empty { border-style: dashed; color: var(--muted); } .cdt-slot.is-done { background: #ecfdf5; border-color: #a7f3d0; } .cdt-slot.is-planned { background: var(--slate-50); } .cdt-slot__time { font-weight: 700; font-size: .82rem; color: var(--slate-600); min-width: 92px; } .cdt-slot__body { flex: 1; min-width: 0; } .cdt-slot__lecon { font-weight: 600; } .cdt-slot__meta { display: flex; gap: 5px; margin-top: 2px; flex-wrap: wrap; } .cdt-slot__empty { color: var(--muted); font-size: .9rem; } .cdt-slot__share { flex: 0 0 auto; border: 1px solid var(--slate-300); background: #fff; color: var(--slate-600); border-radius: 7px; padding: 3px 8px; font: inherit; font-size: .74rem; cursor: pointer; white-space: nowrap; } .cdt-slot__share:hover { border-color: var(--slate-400); background: var(--slate-50); } .cdt-slot__share.is-copied { background: #ecfdf5; border-color: #a7f3d0; color: #047857; } /* Page publique de consultation d'une séance (vue élève, type PRONOTE). */ .seance-pub__copybar { display: flex; justify-content: flex-end; margin-bottom: 10px; } .seance-pub__head { padding-bottom: 14px; border-bottom: 2px solid var(--slate-200); } .seance-pub__date { color: var(--muted); font-weight: 600; margin: 0 0 2px; } .seance-pub__h { margin-left: 8px; font-weight: 400; } .seance-pub__sec { margin-top: 24px; } .seance-pub__h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .76rem; color: var(--slate-500); margin: 0 0 10px; } .seance-pub__travaux { margin: 0; padding-left: 20px; } .seance-pub__travaux li { margin: 3px 0; } .seance-pub__rien { color: var(--muted); } /* Ressources épinglées : des TUILES, pas une liste à puces. Elles s'ouvrent vraiment (le jeton de la séance sert aussi les fichiers), donc elles doivent se cliquer comme des boutons. La puce hexagonale et son jeu de couleurs viennent de la pile de ressources de l'accueil enseignant (.sres__hex) : un type d'hexagone garde partout la même teinte. */ .seance-pub__res { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .seance-pub__res-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 9px 10px; gap: 11px; } a.seance-pub__res-item:hover { border-color: var(--primary); background: var(--slate-50); text-decoration: none; } a.seance-pub__res-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Sans lien (une leçon du Cours n'a pas de page publique) : lisible, mais pas cliquable. */ span.seance-pub__res-item { color: var(--muted); background: var(--slate-50); cursor: default; } span.seance-pub__res-item::after { content: none; } .seance-pub__res-item .sres__lbl { display: block; -webkit-line-clamp: none; } .seance-pub__res-titre { display: block; font-weight: 600; color: var(--slate-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span.seance-pub__res-item .seance-pub__res-titre { color: var(--slate-600); } .seance-pub__res-type { display: block; font-size: .76rem; color: var(--muted); } /* Fil d'Ariane d'une ressource ouverte depuis une séance partagée. */ .share__back { display: inline-block; margin-bottom: 14px; color: var(--muted); font-size: .88rem; font-weight: 600; text-decoration: none; } .share__back:hover { color: var(--primary); } /* Photos prises au téléphone pendant la séance : mêmes vignettes que côté enseignant (.sphoto), en lecture seule. */ .seance-pub__photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .seance-pub__photo { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--slate-50, #f8fafc); } .seance-pub__photo > a { display: block; aspect-ratio: 4 / 3; } .seance-pub__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .seance-pub__photo figcaption { font-size: .76rem; color: var(--muted); padding: 4px 6px; text-align: center; } .badge--todo { background: #2563eb; } .badge--collect { background: #d97706; } .badge--late { background: #dc2626; } .badge--ok { background: #047857; } .cdt-travaux-list { list-style: none; margin: 0; padding: 0; } .cdt-travail { border-bottom: 1px solid var(--slate-100); padding: 9px 0; } .cdt-travail.is-done { opacity: .55; } .cdt-travail__top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .cdt-travail__date { font-size: .8rem; color: var(--muted); } .cdt-travail__desc { font-size: .92rem; } .cdt-travail__tools { display: flex; gap: 10px; font-size: .8rem; margin-top: 4px; } .cdt-empty { color: var(--muted); padding: 10px 0; } /* Modale séance */ .se-context { color: var(--muted); margin: 0 0 12px; } .se-pick { margin-top: 6px; } /* Modale séance « façon builder d'évaluation » (voir /evaluation) : boîte élargie sur fond clair, en-tête carte proéminent, deux colonnes déroulé | ressources. Réutilise les classes .evbuild__* pour un rendu identique à la page évaluation. */ .modal__box--seance { max-width: 920px; background: var(--bg); } .se-card { margin-bottom: 16px; } .se-card .se-context { margin: 0 0 4px; } .se-card .evbuild__titre { font-size: 1.2rem; } .se-card .evbuild__meta { align-items: flex-end; } .se-card .evbuild__meta .field--inline { flex: 1 1 260px; } /* Bloc « séance supplémentaire » (date, classe, nature, horaire) : il ne s'ouvre QUE pour une séance hors emploi du temps — le ✎ d'un créneau tient tout cela de lui et n'a rien à demander. La règle [hidden] est INDISPENSABLE : le display:grid de .grid2 l'emporterait sinon sur l'attribut, et les quatre champs resteraient affichés (même piège que .se-cols juste dessous). */ .se-supp[hidden] { display: none; } /* Les deux heures (début, fin) partagent une seule case de la grille, sous un seul intitulé. */ .se-supp__h { display: flex; gap: 6px; } .se-supp__h .field__input { min-width: 0; } /* Partie 2 : déroulé pleine largeur. */ .se-deroule { margin-bottom: 18px; } .se-deroule .dash__h2 { margin-bottom: 8px; } /* Partie 3 : ressources — à gauche celles de la séance, à droite le sélecteur (comme /evaluation). */ .se-cols { grid-template-columns: 1fr 1.3fr; gap: 16px; } .se-cols[hidden] { display: none; } /* prime sur .evbuild__cols { display: grid } */ .se-cols .dash__h2 { margin-bottom: 6px; } .se-res-hint { margin: 2px 0 6px; } @media (max-width: 900px) { .se-cols { grid-template-columns: 1fr; } } /* Pile des ressources (hexagones resserrés pour la modale, cible du glisser-déposer) + arbre défilant. */ .se-stack { min-height: 150px; padding: 4px 0; } .se-stack .rv-item { width: 168px; height: 146px; } .se-doc-tree { max-height: 340px; overflow-y: auto; padding-right: 2px; } /* Classes & élèves */ .cls-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .cls-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .cls-card__title { margin: 0 0 8px; font-size: 1.1rem; } .cls-card__sub { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; margin-top: 2px; } .cls-card__tools { display: flex; align-items: center; gap: 12px; font-size: .85rem; flex-wrap: wrap; justify-content: flex-end; } .cls-card__export { white-space: nowrap; } /* Tableau élèves : sélection (étiquettes) · identité (crayon + croix suppr. + prénom) · une colonne par groupe. */ .eleve-grid-wrap { overflow-x: auto; margin: 10px 0 2px; } .eleve-grid { border-collapse: collapse; width: 100%; font-size: .9rem; } .eleve-grid th, .eleve-grid td { padding: 6px 8px; border-bottom: 1px solid var(--slate-100); text-align: left; vertical-align: middle; } .eleve-grid thead th { font-size: .78rem; color: var(--slate-600); font-weight: 600; border-bottom: 2px solid var(--slate-200); } .eleve-grid__pick { width: 1%; text-align: center; white-space: nowrap; } .eleve-grid__pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); vertical-align: middle; } .eleve-grid__nom { min-width: 150px; } .eleve-grid__empty { color: var(--muted); font-style: italic; } .eleve__ident { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .eleve__nom { font-weight: 600; } .eleve__email { color: var(--muted); font-size: .82rem; } /* Dernière connexion, juste après le prénom : renseignement de fond (le prénom reste ce qu'on lit en premier), la pastille ambre signalant un compte jamais utilisé. */ .eleve__vu { color: var(--muted); font-size: .76rem; white-space: nowrap; background: var(--slate-100, #f1f5f9); border-radius: 6px; padding: 1px 6px; } .eleve__vu--jamais { color: #b45309; background: #fef3c7; } .eleve__del { border: 0; background: none; padding: 0; cursor: pointer; color: #dc2626; font-size: 1rem; line-height: 1; } .eleve__del:hover { color: #b91c1c; } .eleve-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); } /* En-tête d'une colonne de groupe : nom + outils (renommer / supprimer). */ .eleve-grid__grp { text-align: center; white-space: nowrap; } .eleve-grid__grp-nom { display: block; } .eleve-grid__grp-tools { display: inline-flex; gap: 6px; justify-content: center; font-size: .78rem; margin-top: 2px; } .eleve-grid__cell { text-align: center; width: 1%; } /* Colonne « Code PIN » : le code est haché en base, donc illisible ; la colonne ne montre que ce qui est passé par l'onglet ouvert, masqué par des astérisques jusqu'à ce que l'œil de l'en-tête l'ouvre (cf. js/cahier.js). */ .eleve-grid__pin { width: 1%; white-space: nowrap; } .pin-cell { display: inline-flex; align-items: center; gap: 4px; } .pin-cell.is-busy { opacity: .5; pointer-events: none; } .pin-val { border: 1px dashed transparent; background: none; padding: 2px 6px; border-radius: 6px; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; letter-spacing: .14em; color: var(--slate-700); } .pin-val:hover { border-color: var(--slate-300); background: var(--slate-50); } .pin-val.is-vide { color: var(--muted); letter-spacing: .1em; } .pin-input { width: 8ch; padding: 2px 6px; border: 1px solid var(--primary); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; letter-spacing: .14em; } .pin-roll, .pin-eye { border: 0; background: none; padding: 2px; cursor: pointer; font-size: .95rem; line-height: 1; opacity: .6; } .pin-roll:hover, .pin-eye:hover, .pin-eye[aria-pressed="true"] { opacity: 1; } /* Bascule d'appartenance : croix rouge (hors du groupe) ↔ coche verte (dans le groupe). */ .grp-toggle { border: 0; background: none; padding: 4px 6px; cursor: pointer; line-height: 1; font-size: 1.05rem; border-radius: 6px; } .grp-toggle:hover { background: var(--slate-100); } .grp-toggle:disabled { opacity: .5; cursor: default; } .grp-toggle__yes { display: none; color: #16a34a; font-weight: 700; } .grp-toggle__no { display: inline; color: #dc2626; } .grp-toggle.is-in .grp-toggle__yes { display: inline; } .grp-toggle.is-in .grp-toggle__no { display: none; } /* Semaine type */ .sem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .sem-jour { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .sem-jour h3 { margin: 0 0 8px; font-size: .95rem; } .sem-creneau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--slate-100); font-size: .9rem; } .sem-creneau__tools { display: flex; gap: 8px; } /* Export */ .export-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .exp-seance { margin-bottom: 16px; break-inside: avoid; } .exp-seance__date { font-size: 1.05rem; margin: 0 0 4px; border-bottom: 1px solid var(--slate-200); padding-bottom: 3px; } .exp-seance__h { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: 6px; } .exp-seance__lecon { margin: 4px 0; } .exp-travaux-title { margin-top: 22px; border-top: 2px solid var(--slate-800); padding-top: 8px; } .exp-travaux { line-height: 1.7; } @media (max-width: 760px) { .cdt-row { flex-direction: column; } .cdt-row__side { width: 100%; } .cdt-row--rest .cdt-row__main { display: none; } } /* ========================================================================= L'Estrade (tableau blanc) ========================================================================= */ .est { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 12px; } .est-tool { width: 38px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; border-radius: 9px; cursor: pointer; font-size: 1.05rem; padding: 0; /* appui long = raccourci de l'outil (surligneur) : pas de loupe/callout tactile ni de sélection */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } .est-tool:hover { background: var(--slate-100); } .est-tool:disabled { opacity: .35; cursor: default; } .est-tool:disabled:hover { background: none; } .est-tool.is-on { background: var(--slate-900); color: #fff; border-color: var(--slate-900); } .est-sep { width: 1px; height: 26px; background: var(--border); margin: 0 3px; } .est-sep--h { width: 100%; height: 1px; margin: 3px 0; } #est-color { width: 36px; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; background: #fff; cursor: pointer; } /* La pastille d'un est un pseudo-élément propre à chaque moteur : sans ces règles, Firefox la peint bord à bord et le cadre blanc arrondi disparaît. */ #est-color::-webkit-color-swatch-wrapper, .est-ink--custom::-webkit-color-swatch-wrapper { padding: 0; } #est-color::-webkit-color-swatch, .est-ink--custom::-webkit-color-swatch { border: 0; border-radius: 6px; } #est-color::-moz-color-swatch, .est-ink--custom::-moz-color-swatch { border: 0; border-radius: 6px; } #est-width { width: 100%; accent-color: var(--primary, #4f46e5); } /* --- Jeu d'icônes unifié de l'Estrade (sprite views/estrade/_icons.php) --- Contour = currentColor (suit la couleur du bouton, blanc quand .is-on) ; aplat = --est-ico-accent (lavande), transmise dans le shadow-tree du . */ .est-ico { width: 22px; height: 22px; display: inline-block; vertical-align: -0.16em; flex: none; pointer-events: none; overflow: visible; --est-ico-accent: #cbc6f7; } .est-ico--lg { width: 26px; height: 26px; } .est-ico--sm { width: 18px; height: 18px; } /* Sur fond foncé (bouton actif ou tête de dock sombre), l'aplat s'éclaircit. */ .est-tool.is-on .est-ico, .est-theme.is-on .est-ico, .est-grid-opt.is-on .est-ico { --est-ico-accent: rgba(255,255,255,.5); } /* Icônes accolées à un libellé (items de menu, boutons texte). */ .est-menu__item .est-ico { margin-right: 9px; vertical-align: -0.22em; } .est-tool--cap .est-ico { width: 20px; height: 20px; } .est-stage { position: relative; height: calc(100vh - 130px); min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); touch-action: none; transition: height .28s ease; } #est-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; } /* Indicateur de position du pointeur : anneau haute-visibilité dessiné par la page (donc visible même quand le pilote d'une palette graphique masque le curseur du stylet). Suit le pointeur sur le tableau ; son diamètre reflète l'épaisseur du trait pour le crayon/surligneur. Piloté par estrade.js (#est-cursor). Double liseré (blanc + noir translucide) autour de l'anneau coloré → lisible sur tout fond. */ #est-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; display: none; will-change: transform; } #est-cursor.is-on { display: block; } #est-cursor > i { position: absolute; left: 0; top: 0; box-sizing: border-box; width: var(--c-size, 18px); height: var(--c-size, 18px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--c-color, #4f46e5); box-shadow: 0 0 0 1.5px rgba(255,255,255,.95), 0 0 0 3.5px rgba(0,0,0,.22), inset 0 0 0 1.5px rgba(255,255,255,.9); } #est-cursor > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--c-color, #4f46e5); box-shadow: 0 0 0 1px rgba(255,255,255,.9); } /* --- Onglet d'escamotage du bandeau supérieur ----------------------------- Poignée fixée au centre, accrochée sous le bandeau. Un clic replie le bandeau (il glisse vers le haut) et le tableau grandit d'autant. La hauteur réelle du bandeau est mesurée en JS (--topbar-h) ; 58px sert de repli avant exécution. */ .est-barbtn { position: fixed; top: var(--topbar-h, 58px); left: 50%; transform: translateX(-50%); z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 20px; padding: 0; border: 0; border-radius: 0 0 11px 11px; background: var(--slate-900); color: #fff; cursor: pointer; box-shadow: 0 5px 12px rgba(15, 23, 42, .28); transition: top .28s ease, height .16s ease, background .16s ease, box-shadow .16s ease; } .est-barbtn:hover { height: 24px; background: var(--slate-700, #334155); box-shadow: 0 7px 16px rgba(15, 23, 42, .32); } .est-barbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .est-barbtn__chev { width: 20px; height: 20px; --est-ico-accent: rgba(255, 255, 255, .55); transition: transform .28s ease; } .est-barbtn__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; } /* État « bandeau masqué » : le bandeau glisse hors champ, l'onglet remonte, le chevron se retourne. */ body.est-nobar .topbar { margin-top: calc(-1 * var(--topbar-h, 58px)); opacity: 0; pointer-events: none; } body.est-nobar .est-barbtn { top: 0; } body.est-nobar .est-barbtn__chev { transform: rotate(180deg); } /* Le tableau récupère exactement la hauteur libérée (le bas reste en place, le haut monte). */ body.est-nobar .est-stage { height: calc(100vh - 130px + var(--topbar-h, 58px)); } /* Restauration de l'état au chargement : on coupe les transitions le temps d'appliquer l'état. */ body.est-noanim .topbar, body.est-noanim .est-stage, body.est-noanim .est-barbtn, body.est-noanim .est-barbtn__chev { transition: none !important; } .est-textinput { position: absolute; font: 24px system-ui, sans-serif; line-height: 1.3; border: 1px dashed var(--primary); background: rgba(255,255,255,.9); padding: 2px 4px; min-width: 60px; max-width: 82vw; max-height: 72vh; z-index: 5; resize: none; overflow: auto; white-space: pre; } /* --- Post-it : édition superposée (même papier que l'objet dessiné sur le canvas) --- */ /* z-index > docks (9) : pendant la saisie, l'éditeur doit passer au-dessus des barres d'outils. */ .est-noteedit { position: absolute; z-index: 10; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(15,23,42,.28); outline: 1.5px dashed rgba(15,23,42,.35); } .est-noteedit[hidden] { display: none; } /* sinon display:flex écrase l'attribut [hidden] */ /* padding posé en ligne par openNoteEdit (NOTE_PAD × zoom) pour coller au rendu canvas */ .est-noteedit textarea { flex: 1; width: 100%; border: 0; background: transparent; resize: none; outline: none; box-sizing: border-box; font-family: 'Segoe Print', 'Comic Sans MS', system-ui, sans-serif; line-height: 1.4; color: #1f2937; } .est-noteedit__bar { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 5px; } .est-noteedit__bar button { display: inline-flex; align-items: center; justify-content: center; height: 27px; min-width: 30px; padding: 0 7px; border: 1px solid rgba(15,23,42,.22); background: rgba(255,255,255,.82); border-radius: 7px; cursor: pointer; font: 700 .78rem system-ui, sans-serif; color: var(--slate-700, #334155); } .est-noteedit__bar button:hover { background: #fff; } .est-noteedit__bar .est-ico { width: 17px; height: 17px; } .est-trash { position: absolute; right: 18px; bottom: 18px; width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #64748b; background: rgba(241,245,249,.78); border: 1.5px dashed #cbd5e1; z-index: 6; pointer-events: none; transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease; } .est-trash.is-hot { background: #fee2e2; border-color: #ef4444; border-style: solid; color: #dc2626; transform: scale(1.18); } .est:fullscreen .est-trash { right: 26px; bottom: 26px; } /* --- Docks déplaçables (gauche : outils de base / droite : thèmes) --- */ .est-dock { position: absolute; top: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 28px rgba(15,23,42,.16); z-index: 9; user-select: none; } .est-dock--left { left: 12px; width: 92px; } .est-dock--right { right: 12px; width: 188px; } .est-dock__head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: grab; touch-action: none; border-bottom: 1px solid var(--slate-100); color: var(--muted); } .est-dock__head:active { cursor: grabbing; } .est-dock__grip { font-size: .85rem; letter-spacing: -1px; } .est-dock__label { flex: 1; font-size: .78rem; font-weight: 700; color: var(--slate-700, #334155); } .est-dock__btn { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0 2px; } .est-dock__body { padding: 6px; max-height: calc(100vh - 200px); overflow-y: auto; } .est-dock--left .est-dock__body { max-height: none; overflow: visible; } .est-dock.is-collapsed .est-dock__body { display: none; } .est-tools--v { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .est-tools--v .est-tool { width: 100%; height: auto; aspect-ratio: 1; font-size: 1.05rem; border-radius: 10px; } .est-tools--v .est-sep--h { grid-column: 1 / -1; margin: 2px 0; } /* --- Bouton à sous-menu (Polygone) : petit triangle noir pointant à droite + flyout horizontal --- */ .est-flywrap { position: relative; } .est-flywrap > .est-tool { width: 100%; } .est-tool--haschild::after { content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 4px solid currentColor; opacity: .8; pointer-events: none; } .est-flyout { position: absolute; top: -1px; left: calc(100% + 9px); z-index: 12; display: flex; align-items: center; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.22); } .est-flyout[hidden] { display: none; } /* petite pointe reliant le flyout au bouton */ .est-flyout::before { content: ""; position: absolute; left: -6px; top: 15px; width: 11px; height: 11px; background: #fff; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); } .est-tools--v .est-flyout .est-tool { width: 36px; height: 36px; aspect-ratio: auto; flex: none; border-radius: 9px; } .est-flyout .est-sep { height: 24px; } /* --- Outils à encre (crayon, surligneur, texte) : pastille de couleur sous l'icône + palette dépliée par appui long sur le bouton --- */ .est-tool--ink { position: relative; } .est-tool--ink .est-ico { transform: translateY(-2px); } .est-tool--ink::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 4px; border-radius: 3px; background: var(--ink-dot, #1e293b); box-shadow: inset 0 0 0 1px rgba(15,23,42,.22); pointer-events: none; } /* Sur bouton actif (fond ardoise), un liseré clair détache la pastille sombre. */ .est-tool--ink.is-on::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); } .est-flyout--inks { gap: 5px; } .est-ink { width: 28px; height: 28px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--ink, #ffe14d); cursor: pointer; transition: transform .12s; } .est-ink:hover { transform: scale(1.12); } .est-ink.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--slate-900); } .est-ink--custom { border-radius: 8px; padding: 2px; background: #fff; } .est-flyout__n { width: 48px; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; font: inherit; text-align: center; } .est-dock__settings { margin-top: 6px; } .est-dock__settings #est-color { height: 28px; } .est-dock__settings { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: center; } /* --- Gomme : elle est ROSE, et rien d'autre ne l'est dans l'interface. On la retrouve du coin de l'œil, sans lire les icônes, au milieu d'un cours. Voisine du tracé libre : on efface là où l'on vient d'écrire. ⚠️ Ce bloc doit rester APRÈS `.est-tool.is-on` : à spécificité égale, c'est l'ordre d'écriture qui tranche. --- */ .est-tool--eraser { color: #db2777; --est-ico-accent: #fbcfe8; } .est-tool--eraser:hover { background: #fdf2f8; border-color: #f9a8d4; } .est-tool--eraser.is-on { background: #db2777; border-color: #be185d; color: #fff; } .est-tool--eraser.is-on .est-ico { --est-ico-accent: rgba(255,255,255,.55); } /* --- Menu contextuel d'un objet (clic droit ou appui long sur le tableau) --------------- Posé en `fixed` : le stage rogne ce qui déborde, un menu ouvert près du bord bas y serait coupé. estrade.js le remplit et le place (cf. ctxOuvrir). */ .est-ctx { position: fixed; z-index: 60; min-width: 216px; max-width: 280px; padding: 6px; max-height: calc(100vh - 20px); overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 20px 46px rgba(15,23,42,.26); display: flex; flex-direction: column; gap: 1px; user-select: none; -webkit-user-select: none; } .est-ctx[hidden] { display: none; } .est-ctx__head { padding: 5px 10px 7px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } /* 40 px de haut : la cible d'un stylet de TBI, pas celle d'une souris. */ .est-ctx__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 11px; border: 0; border-radius: 9px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .est-ctx__item:hover { background: var(--slate-100); } .est-ctx__item.is-on { background: #eef2ff; color: #4338ca; font-weight: 600; } .est-ctx__item--danger { color: #dc2626; } .est-ctx__item--danger:hover { background: #fee2e2; } .est-ctx__item--danger .est-ico { --est-ico-accent: #fecaca; } .est-ctx__pad { width: 22px; flex: none; } .est-ctx__sep { height: 1px; margin: 4px 7px; background: var(--border); } .est-ctx__inks { display: flex; gap: 6px; padding: 4px 11px 9px; } /* --- Tableau de l'Estrade (js/estrade-tableau.js, js/estrade-clavier.js) ---------------- Le tableau lui-même est dessiné sur le canevas. Ici : la barre d'outils posée au-dessus du tableau choisi, l'éditeur de case, le clavier tactile et le choix de la taille. Cibles de 40 px au moins : c'est le stylet d'un TBI qui les vise. */ .est-tbar { position: absolute; z-index: 11; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: calc(100% - 16px); padding: 5px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px -10px rgba(15,23,42,.30), 0 2px 6px rgba(15,23,42,.07); user-select: none; -webkit-user-select: none; touch-action: manipulation; } .est-tbar[hidden] { display: none; } .est-tbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: #334155; cursor: pointer; font: 600 .86rem/1 inherit; white-space: nowrap; } .est-tbar__btn:hover { background: var(--slate-100); } .est-tbar__btn.is-on { background: #eef2ff; color: #4338ca; } .est-tbar__btn.is-on .est-ico { --est-ico-accent: #c7d2fe; } .est-tbar__btn--danger { color: #dc2626; } .est-tbar__btn--danger:hover { background: #fee2e2; } .est-tbar__btn--danger .est-ico { --est-ico-accent: #fecaca; } .est-tbar__btn--lbl { padding: 0 12px 0 10px; } .est-tbar__a { font-weight: 700; font-size: .92rem; } .est-tbar__a--lg { font-size: 1.15rem; } .est-tbar__pm { font-size: .8rem; margin-left: 1px; } .est-tbar__sep { width: 1px; height: 24px; margin: 0 4px; background: var(--border); flex: none; } .est-tbar__sws { display: flex; align-items: center; gap: 3px; padding: 0 3px; } .est-tbar__sw { width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--sw, #fff); box-shadow: inset 0 0 0 1px rgba(15,23,42,.16); transition: transform .1s; } .est-tbar__sw:hover { transform: scale(1.08); } .est-tbar__sw.is-on { box-shadow: inset 0 0 0 1px rgba(15,23,42,.16), 0 0 0 2px #fff, 0 0 0 4px #4f46e5; } .est-tbar__sw--none { background: linear-gradient(135deg, transparent 46%, #ef4444 46%, #ef4444 54%, transparent 54%), #fff; } .est-tbar__sw--ink { box-shadow: none; } .est-tbar__sw--ink.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw); } .est-tbar__hint { padding: 0 10px 0 6px; font-size: .8rem; font-weight: 600; color: #4338ca; white-space: nowrap; } /* barre de style du trait (segment, demi-droite, droite) : en haut du tableau blanc, même habillage que la barre du tableau (.est-tbar) */ .est-sbar { z-index: 12; flex-wrap: nowrap; } .est-sbar__lib { padding: 0 6px 0 9px; font: 700 .72rem/1 inherit; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .est-sbar__wrap { position: relative; display: inline-flex; } .est-sbar__dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,23,42,.2); } .est-sbar__pop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 10px 12px 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px -10px rgba(15,23,42,.35); } .est-sbar__pop::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .est-sbar__pop[hidden] { display: none; } .est-sbar__poph { display: block; margin: 0 2px 9px; font: 700 .7rem/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .est-sbar__sws { display: grid; grid-template-columns: repeat(6, 30px); gap: 7px; } .est-sbar__custom { width: 30px; height: 30px; border-radius: 50%; } .est-sbar__mks { display: flex; gap: 6px; } .est-sbar__mk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 58px; height: 58px; padding: 0; border: 1px solid transparent; border-radius: 11px; background: none; color: #334155; cursor: pointer; } .est-sbar__mk:hover { background: var(--slate-100); } .est-sbar__mk.is-on { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; } .est-sbar__mk small { font: 600 .7rem/1 inherit; } .est-sbar__ep { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 8px; color: #334155; cursor: pointer; } .est-sbar__ep input[type=range] { width: 110px; accent-color: #4f46e5; cursor: pointer; } .est-sbar__ep output { min-width: 30px; height: 28px; display: inline-grid; place-items: center; padding: 0 4px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font: 700 .85rem/1 inherit; color: #0f172a; } .est-sbar [hidden] { display: none !important; } /* éditeur posé exactement sur la case (mêmes police, corps et marges que le rendu du canevas) */ .est-tced { position: absolute; z-index: 11; display: flex; align-items: center; box-sizing: border-box; background: #fff; border-radius: 3px; cursor: text; box-shadow: 0 0 0 2.5px #4f46e5, 0 16px 36px -12px rgba(15,23,42,.45); } .est-tced__in { flex: 1; min-width: 0; box-sizing: border-box; outline: none; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.3; color: #0f172a; caret-color: #4f46e5; font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; } .est-tced .tbm { display: inline-block; padding: 0 .06em; border-radius: 4px; cursor: pointer; } .est-tced .tbm:hover { background: rgba(79,70,229,.12); } .est-tced .tbm--brut { font: .7em ui-monospace, Consolas, monospace; color: #64748b; } .est-tced__kb { position: absolute; right: -15px; bottom: -15px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #4f46e5; color: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(79,70,229,.4); } .est-tced__kb[hidden] { display: none; } /* clavier tactile : déplaçable par sa poignée, touches de 52 px au plus */ .est-tkb { --k: clamp(36px, 4.4vw, 52px); --g: 6px; position: absolute; z-index: 14; box-sizing: border-box; padding: 4px 10px 10px; background: rgba(248,250,252,.97); border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 26px 60px -18px rgba(15,23,42,.50), 0 4px 12px rgba(15,23,42,.08); user-select: none; -webkit-user-select: none; touch-action: none; } .est-tkb[hidden] { display: none; } .tkb-head { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; margin: 0 -4px 4px; cursor: grab; } .tkb-head:active { cursor: grabbing; } .tkb-grip { width: 44px; height: 5px; border-radius: 3px; background: #cbd5e1; } .tkb-x { position: absolute; right: 0; top: -1px; width: 34px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: #64748b; cursor: pointer; } .tkb-x:hover { background: #e2e8f0; } .tkb-svg { width: 22px; height: 22px; flex: none; } .tkb-x .tkb-svg { width: 20px; height: 20px; } .tkb-keys { display: flex; flex-direction: column; gap: var(--g); } .tkb-row { display: flex; gap: var(--g); } .tkb-key { width: calc(var(--k) * var(--w, 1) + (var(--w, 1) - 1) * var(--g)); height: var(--k); flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 11px; background: #fff; color: #0f172a; cursor: pointer; font: 500 1.22rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 1px 0 rgba(15,23,42,.16), inset 0 0 0 1px #e2e8f0; transition: transform .06s, background .1s; } .tkb-key:hover { background: #f8fafc; } .tkb-key.is-down { transform: translateY(1px) scale(.97); background: #e0e7ff; } .tkb-key small { font-size: .7em; margin-left: 1px; } .tkb-fx { font: italic 600 1.2rem/1 Georgia, "Times New Roman", serif; } .tkb-fx i { font-size: .82em; margin-left: 1px; } .tkb-key--op { background: #eef2ff; color: #4338ca; font-weight: 600; } .tkb-key--mx { background: #f5f3ff; color: #5b21b6; } .tkb-key--act, .tkb-key--mode { background: #e2e8f0; color: #334155; font-size: .92rem; font-weight: 600; } .tkb-key--mode.is-on { background: #c7d2fe; color: #3730a3; } .tkb-key--ok { background: #4f46e5; color: #fff; font-size: .95rem; font-weight: 700; box-shadow: 0 6px 14px -4px rgba(79,70,229,.6); } .tkb-key--ok:hover { background: #4338ca; } .tkb-space { display: block; width: 55%; height: 7px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; opacity: .55; } .tkb-kfrac { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .tkb-kfrac i, .tkb-kpow i, .tkb-ksqrt i { display: block; width: 12px; height: 10px; border: 1.5px dashed currentColor; border-radius: 2px; } .tkb-kfrac b { display: block; width: 18px; height: 2px; background: currentColor; } .tkb-kpow { display: inline-flex; align-items: flex-end; } .tkb-kpow i { width: 13px; height: 14px; } .tkb-kpow sup i { width: 8px; height: 8px; margin: 0 0 12px 2px; } .tkb-ksqrt { display: inline-flex; align-items: center; font-size: 1.15rem; } .tkb-ksqrt i { width: 14px; height: 13px; border-top-style: solid; margin-left: 1px; } /* compositeur : fraction, puissance, racine écrites dans le clavier lui-même */ .tkb-comp { display: flex; align-items: center; gap: 14px; padding: 6px 4px 12px; margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; } .tkb-comp[hidden] { display: none; } .tkb-comp__lib { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .tkb-slot { width: 92px; height: 40px; box-sizing: border-box; padding: 0 6px; border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a; text-align: center; font: 500 1.25rem/1 system-ui, sans-serif; outline: none; } .tkb-slot.is-on, .tkb-slot:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.18); } .tkb-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; } .tkb-frac__bar { width: 104px; height: 2.5px; border-radius: 2px; background: #0f172a; } .tkb-pow { display: inline-flex; align-items: flex-start; padding-top: 12px; } .tkb-slot--sup { width: 64px; height: 32px; margin: -14px 0 0 4px; font-size: 1rem; } .tkb-sqrt { display: inline-flex; align-items: center; } .tkb-sqrt__sign { font-size: 2.1rem; line-height: 1; color: #0f172a; margin-right: 1px; } .tkb-sqrt .tkb-slot { border-top: 2.5px solid #0f172a; border-radius: 0 0 9px 9px; } .tkb-comp__acts { display: flex; gap: 6px; margin-left: auto; } .tkb-comp__btn { height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #334155; font: 600 .9rem/1 inherit; cursor: pointer; } .tkb-comp__btn--ok { background: #4f46e5; border-color: #4f46e5; color: #fff; } .est-tkb.is-comp .tkb-key--mx { opacity: .45; } /* choix de la taille d'un nouveau tableau (bouton du thème Calculs) */ .est-tpick { position: fixed; z-index: 61; width: 300px; box-sizing: border-box; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 46px rgba(15,23,42,.26); user-select: none; -webkit-user-select: none; } .est-tpick[hidden] { display: none; } .est-tpick__head { display: flex; align-items: center; justify-content: space-between; } .est-tpick__t { font-weight: 700; color: #0f172a; } .est-tpick__dim { padding: 3px 10px; border-radius: 999px; background: #eef2ff; color: #4338ca; font: 700 .9rem/1.3 inherit; } .est-tpick__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 12px 0 8px; touch-action: none; } .est-tpick__c { aspect-ratio: 1; padding: 0; border: 1px solid #e2e8f0; border-radius: 5px; background: #f8fafc; cursor: pointer; } .est-tpick__c.is-on { background: #c7d2fe; border-color: #818cf8; } .est-tpick__hint { margin: 0 0 12px; font-size: .78rem; color: var(--muted); } .est-tpick__mods { display: grid; gap: 6px; } .est-tpick__mod { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #1e293b; font: 600 .88rem/1.2 inherit; cursor: pointer; } .est-tpick__mod:hover { background: var(--slate-100); } .est-tpick__mod small { font-weight: 600; color: var(--muted); } /* Les quatre categories du dock droit (Calculs, Geometrie, Objets, Outils) sont en vert pastel : elles ne sont pas des outils mais des RAYONS, et se distinguent d'un coup d'oeil des boutons blancs qu'elles ouvrent en dessous. */ .est-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .est-theme { aspect-ratio: 1; border: 1px solid #a7e8bd; background: #dcfce7; border-radius: 9px; cursor: pointer; font-size: 1.05rem; color: #14532d; --est-ico-accent: #86efac; } .est-theme:hover { background: #bbf7d0; border-color: #6ee7a4; } .est-theme.is-on { background: #16a34a; color: #fff; border-color: #15803d; } .est-theme-tools { margin-top: 8px; min-height: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .est-theme-tools[hidden] { display: none; } /* Thème « Outils » : #theme-tools reste vide (les boutons vivent dans #outils-tools). Sans ceci, sa min-height réserve une bande vide de 56 px sous la rangée des thèmes. */ .est-theme-tools:empty { display: none; } .est-theme-tools .est-tool { width: 100%; height: auto; aspect-ratio: 1; font-size: 1.15rem; border-radius: 10px; } .est-theme-tools .field__input { grid-column: 1 / -1; } .est-theme-tools__soon { color: var(--muted); font-size: .82rem; margin: 4px 0; } /* --- Préparation d'un écran de séance (migration 078) ---------------------- /estrade?ecran=ID : on ne travaille pas sur un tableau mais sur UN écran. Le bandeau flotte en haut du tableau, entre les deux docks : titre, état d'enregistrement, et le bouton qui ramène à la préparation de la séance. */ .est-ecranbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 320px); padding: 7px 10px 7px 13px; background: #fff; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 28px rgba(15,23,42,.16); } .est-ecranbar__ic { flex: none; color: var(--acc-estrade-2); } .est-ecranbar__champ { display: block; } .est-ecranbar__champ .field__input { width: 220px; height: 32px; padding: 2px 10px; font-weight: 700; } .est-ecranbar__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .est-ecranbar__ctx { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .est-ecranbar__etat { font-size: .76rem; font-weight: 700; color: var(--slate-500); white-space: nowrap; } .est-ecranbar__etat.is-ok { color: #047857; } .est-ecranbar__etat.is-ko { color: #b91c1c; } @media (max-width: 1100px) { .est-ecranbar { max-width: calc(100% - 24px); flex-wrap: wrap; border-radius: 16px; } .est-ecranbar__ctx { display: none; } .est-ecranbar__champ .field__input { width: 150px; } } /* Bouton « Écrans de la séance » de la barre du bas : le nombre d'écrans en pastille, orange tant que certains ne sont pas encore au tableau. */ /* ⚠️ `.est-tool` pose un display: inline-flex, qui l'emporte sur l'attribut [hidden] — sans cette ligne, le bouton « Écrans » reste visible même sans écran à charger. */ .est-tool[hidden], .est-sep[hidden] { display: none; } .est-tool--ecrans { position: relative; } .est-tool__badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--acc-estrade-2); color: #fff; font-size: .64rem; font-weight: 800; line-height: 1; } .est-tool--ecrans.is-attente .est-tool__badge { background: #ea580c; } /* Planche des écrans : mêmes cartes que le trieur de pages ; celles qui ne sont pas encore au tableau se distinguent par un liseré pointillé. */ .ecr-card { cursor: pointer; } .ecr-card.is-absent { border-style: dashed; } .ecr-card.is-absent .pgs-card__n { background: var(--slate-400); } /* --- Barre du bas (menu, pages, zoom, grille, timers, calc) --- */ .est-bottombar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 28px rgba(15,23,42,.16); } .est-grp { display: inline-flex; align-items: center; gap: 2px; } .est-ind { min-width: 46px; text-align: center; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; } .est-ind--btn { width: auto; padding: 0 8px; } .est-menu-wrap { position: relative; } .est-menu { position: absolute; bottom: calc(100% + 8px); left: 0; width: 230px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.22); padding: 8px; z-index: 12; } .est-menu__field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .est-menu__item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; padding: 8px 10px; border-radius: 8px; } .est-menu__item:hover { background: var(--slate-100); } .est-menu__item--danger { color: #b91c1c; } .est-layer-menu { left: 50%; transform: translateX(-50%); width: auto; min-width: 200px; white-space: nowrap; } .est-panel { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 280px; max-height: calc(100% - 88px); overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(15,23,42,.22); z-index: 11; } .est-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 700; } .est-panel__x { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); } .est-panel__body { padding: 12px; } .est-panel--calc { width: 300px; left: auto; right: 16px; top: 12px; transform: scale(.85); transform-origin: top right; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; } .est-panel--calc .est-panel__head { cursor: grab; touch-action: none; user-select: none; } .est-panel--calc .est-panel__head:active { cursor: grabbing; } /* Sélecteur de modèle d'émulateur (CASIO / NumWorks) en tête du panneau Calculatrice */ .calc-switch { display: flex; gap: 6px; padding: 10px 12px; } .calc-switch__btn { flex: 1; padding: 6px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--slate-50, #f8fafc); cursor: pointer; font: inherit; font-weight: 700; font-size: .82rem; line-height: 1.2; color: var(--slate-700, #334155); text-align: center; } .calc-switch__btn small { display: block; font-weight: 600; font-size: .66rem; color: var(--muted); } .calc-switch__btn.is-on { background: #15324a; border-color: #15324a; color: #eaf3ef; } .calc-switch__btn.is-on small { color: #b9d3e6; } /* Vue NumWorks : simulateur officiel embarqué (iframe WASM) */ .est-panel--calc.is-numworks { width: auto; } .calc-numworks { padding: 4px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; } .calc-numworks[hidden] { display: none; } /* sinon display:flex écrase l'attribut [hidden] */ .calc-numworks__frame { position: relative; width: 368px; height: 720px; border-radius: 6px; overflow: hidden; background: #eef1f4; } .calc-numworks__frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; } .calc-numworks__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center; color: var(--muted); font-size: .85rem; } .calc-numworks .casio__emu { align-self: stretch; margin-top: 0; } /* ===================== Panneau « Bloc de cours » (thème Objets) ===================== */ .est-coursblocs { position: absolute; top: 0; right: 0; bottom: 0; width: 33.333%; min-width: 300px; display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(15,23,42,.16); z-index: 18; } .est-coursblocs[hidden] { display: none; } /* sinon display:flex écrase l'attribut [hidden] */ .est-cb__head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--slate-50); } .est-cb__back { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--slate-100); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--slate-700, #334155); } .est-cb__back:hover { background: var(--slate-200); } .est-cb__back[hidden] { display: none; } .est-cb__title { flex: 1; min-width: 0; font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .est-cb__x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); } .est-cb__body { flex: 1; overflow-y: auto; padding: 12px; } .est-cb__hint { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; background: var(--slate-50); } .est-cb__hint[hidden] { display: none; } .est-cb__loading, .est-cb__empty { color: var(--muted); text-align: center; padding: 24px 0; font-size: .9rem; } /* Niveaux */ .est-cb__niveaux { display: grid; gap: 10px; } .est-cb__niveau { display: block; width: 100%; text-align: left; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.02rem; transition: background .12s, border-color .12s; } .est-cb__niveau:hover { background: #ecfeff; border-color: var(--acc-cours-2, #06b6d4); } /* Chapitres (accordéon, repliés par défaut) */ .est-cb__chap { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; } .est-cb__chaphead { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: var(--slate-50); cursor: pointer; font: inherit; font-weight: 600; } .est-cb__chaphead:hover { background: var(--slate-100); } .est-cb__chevron { color: var(--muted); font-size: .8rem; transition: transform .15s; } .est-cb__chap:not(.is-collapsed) .est-cb__chevron { transform: rotate(90deg); } .est-cb__chaptitle { flex: 1; min-width: 0; } .est-cb__count { color: var(--muted); font-size: .74rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; } .est-cb__chap.is-collapsed .est-cb__lecons { display: none; } .est-cb__lecons { list-style: none; margin: 0; padding: 0; } .est-cb__lecons li { border-top: 1px solid var(--slate-100); } .est-cb__lecon { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; padding: 9px 12px 9px 28px; } .est-cb__lecon:hover { background: #f8fafc; } .est-cb__lecon > span:first-child { flex: 1; min-width: 0; } .est-cb__lcnb { color: var(--muted); font-size: .76rem; white-space: nowrap; } .est-cb__noleson { color: var(--muted); font-size: .82rem; padding: 8px 12px 8px 28px; } /* Blocs de la leçon (cliquer / glisser pour déposer sur le tableau) */ .est-cb__blocks { display: flex; flex-direction: column; gap: 10px; } .est-cb__block { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 10px 30px 10px 12px; background: #fff; cursor: grab; touch-action: none; transition: border-color .12s, box-shadow .12s; } .est-cb__block:hover { border-color: var(--acc-cours-2, #06b6d4); box-shadow: 0 4px 14px rgba(15,23,42,.10); } .est-cb__block:active { cursor: grabbing; } .est-cb__prev { font-size: .9rem; max-height: 230px; overflow: hidden; pointer-events: none; } .est-cb__prev img { max-width: 100%; height: auto; border-radius: 6px; } .est-cb__prev table { border-collapse: collapse; } .est-cb__ggb { color: var(--muted); font-weight: 600; } .est-cb__grab { position: absolute; top: 8px; right: 8px; color: #cbd5e1; font-size: .9rem; } .est-cb__ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(8px, 8px); background: var(--slate-900, #0f172a); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: .82rem; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 22px rgba(15,23,42,.3); } /* ===================== Fenêtre Webcam (thème Objets) — flottante, déplaçable, redimensionnable ===================== */ .est-webcam { position: absolute; top: 80px; left: calc(50% - 210px); width: 420px; height: 320px; min-width: 220px; min-height: 160px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(15,23,42,.28); z-index: 20; overflow: hidden; } .est-webcam[hidden] { display: none; } .est-webcam__head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 700; cursor: grab; touch-action: none; user-select: none; } .est-webcam__head:active { cursor: grabbing; } .est-webcam__title { flex: 0 0 auto; } .est-webcam__pick { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .8rem; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .est-webcam__x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); line-height: 1; padding: 2px 4px; } .est-webcam__view { flex: 1 1 auto; min-height: 0; background: #000; } .est-webcam__view video { width: 100%; height: 100%; object-fit: contain; display: block; } .est-webcam__shot { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(15,23,42,.35); cursor: pointer; font-size: 1.25rem; line-height: 1; } .est-webcam__shot:hover { background: #fff; } .est-webcam__resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 64%, transparent 64%, transparent 78%, var(--border) 78%); } /* ===================== Barre de capture d'écran (flottante) ===================== */ /* Posée où l'enseignant veut et gardée sous la main pendant tout le cours : la source est épinglée une fois, les captures suivantes tiennent en un clic. Cibles larges (44 px) — au TBI, tout se prend au doigt. */ /* 262 px : la largeur juste nécessaire pour que « Documents » tienne en entier dans son segment — en dessous, le mot est rogné et la destination devient illisible. */ .est-capbar { position: absolute; top: 92px; right: 96px; width: 262px; z-index: 21; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(15,23,42,.28); overflow: hidden; } .est-capbar[hidden] { display: none; } .est-capbar__head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 700; cursor: grab; touch-action: none; user-select: none; } .est-capbar__head:active { cursor: grabbing; } .est-capbar__grip { color: var(--muted); line-height: 1; } .est-capbar__title { flex: 1 1 auto; } .est-capbar__x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 4px; } .est-capbar__x .est-ico { width: 16px; height: 16px; } /* Ligne « source » : ce qui est épinglé, et de quoi en changer sans quitter la barre. */ .est-capbar__src { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: .78rem; background: var(--slate-100); border-bottom: 1px solid var(--border); } .est-capbar__src .est-ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--muted); } .est-capbar__src.is-live .est-ico { color: #16a34a; } .est-capbar__srclab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-600); } .est-capbar__src.is-live .est-capbar__srclab { color: var(--slate-900, #0f172a); font-weight: 600; } .est-capbar__link { flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--primary, #4f46e5); text-decoration: underline; } /* Les quatre modes, en grille : icône au-dessus du mot. */ .est-capbar__modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 9px; } .est-capbar__mode { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: .66rem; line-height: 1.1; color: var(--slate-600); } .est-capbar__mode .est-ico { width: 21px; height: 21px; } .est-capbar__mode:hover:not(:disabled) { background: var(--slate-100); } .est-capbar__mode:disabled { opacity: .38; cursor: default; } .est-capbar__mode.is-busy { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 2px rgba(99,102,241,.2); } .est-capbar__row { display: flex; align-items: center; gap: 8px; padding: 0 9px 9px; font-size: .74rem; } .est-capbar__lab { flex: 0 0 34px; color: var(--muted); } .est-capbar__seg { flex: 1 1 auto; display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .est-capbar__segbtn { flex: 1 1 0; min-width: 0; padding: 5px 2px; border: 0; border-left: 1px solid var(--border); background: #fff; cursor: pointer; font: inherit; font-size: .72rem; color: var(--slate-600); } .est-capbar__segbtn:first-child { border-left: 0; } .est-capbar__segbtn:hover { background: var(--slate-100); } .est-capbar__segbtn.is-on { background: var(--slate-900, #0f172a); color: #fff; font-weight: 600; } .est-capbar__tip { margin: 0; padding: 7px 9px; border-top: 1px solid var(--border); background: var(--slate-100); font-size: .68rem; line-height: 1.35; color: var(--muted); } .est-capbar__tip kbd { font: inherit; font-weight: 700; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 0 3px; color: var(--slate-600); } .est-capbar__ext { display: block; width: 100%; padding: 8px 9px; border: 0; border-top: 1px solid var(--border); background: #fff; cursor: pointer; font: inherit; font-size: .72rem; text-align: center; color: var(--primary, #4f46e5); } .est-capbar__ext:hover { background: var(--slate-100); } /* Une extension appairée est signalée : sinon rien ne dirait que les images arrivent toutes seules. */ .est-capbar__ext.is-live { color: #16a34a; font-weight: 600; } /* ===================== Minuteurs (disques) & chronomètres (pastilles) flottants ===================== */ /* Menu déroulant de durées, ouvert vers le haut depuis le bouton ⏱ de la barre du bas */ .est-timer-menu { position: absolute; bottom: calc(100% + 8px); right: 0; width: 196px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .22); padding: 10px; z-index: 12; } .est-timer-menu__presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .est-timer-menu__preset { padding: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-weight: 600; } .est-timer-menu__preset:hover { background: var(--slate-100); } .est-timer-menu__custom { display: flex; gap: 6px; margin-top: 8px; } .est-timer-menu__custom .field__input { width: auto; flex: 1; min-width: 0; } .est-timer-menu__go { padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-weight: 600; } .est-timer-menu__go:hover { background: var(--slate-100); } .est-grid-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 238px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .22); padding: 10px; z-index: 12; } .est-grid-menu__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .est-grid-opt { padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; line-height: 0; } .est-grid-opt svg { width: 100%; height: auto; display: block; border-radius: 4px; } .est-grid-opt:hover { background: var(--slate-100); } .est-grid-opt.is-on { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, .25); } .est-grid-menu__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--slate-600); } .est-grid-menu__row input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary, #4f46e5); } .est-grid-menu__snap { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--slate-600); cursor: pointer; } /* Minuteur : disque coloré flottant dont l'anneau se vide */ .ec-disk { position: absolute; width: 116px; height: 116px; z-index: 8; user-select: none; touch-action: none; cursor: grab; } .ec-disk:active { cursor: grabbing; } .ec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ec-track { fill: #fff; stroke: #e5e7eb; stroke-width: 8; } .ec-prog { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .4s linear; } .ec-disk .ec-time { position: absolute; top: 44%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-weight: 800; font-size: 22px; color: var(--slate-900); font-variant-numeric: tabular-nums; pointer-events: none; } .ec-disk.is-done .ec-prog { stroke: #ef4444; } .ec-disk.is-done { animation: ec-flash .9s ease-in-out 3; } @keyframes ec-flash { 50% { filter: drop-shadow(0 0 9px #ef4444); } } /* Chronomètre : pastille numérique colorée flottante */ .ec-badge { position: absolute; z-index: 8; min-width: 96px; padding: 8px 12px 6px; text-align: center; background: #fff; border: 2px solid var(--c); border-radius: 14px; box-shadow: 0 4px 14px rgba(15, 23, 42, .14); user-select: none; touch-action: none; cursor: grab; } .ec-badge:active { cursor: grabbing; } .ec-badge .ec-time { font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; } /* Contrôles communs (play/pause, reset, fermer) */ .ec-ctrls { display: flex; justify-content: center; gap: 6px; } .ec-disk .ec-ctrls { position: absolute; bottom: 18px; left: 0; right: 0; } .ec-badge .ec-ctrls { margin-top: 4px; } .ec-b { width: 26px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; font-size: 12px; line-height: 1; } .ec-b:hover { background: var(--slate-100); } .ec-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; z-index: 2; border: 1px solid var(--border); border-radius: 50%; background: #fff; cursor: pointer; font-size: 11px; line-height: 1; } .ec-x:hover { background: #fee2e2; } .calc-field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; } .calc-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; font-size: .88rem; } .calc-radios__lbl { font-weight: 700; color: var(--muted); width: 100%; font-size: .78rem; } .calc-radios label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .calc-manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .calc-manual--eq { grid-template-columns: repeat(4, 1fr); } #panel-op .btn, #panel-3d .btn { width: 100%; } .ggb-overlay { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; } .ggb-overlay[hidden] { display: none; } .ggb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); } .ggb-bar__t { font-family: var(--font-display, inherit); font-weight: 700; } .ggb-bar__actions { display: flex; align-items: center; gap: 8px; } .ggb-bar__hint { margin-left: auto; color: var(--primary); font-size: .82rem; font-weight: 600; white-space: nowrap; } .ggb-bar__hint[hidden] { display: none; } .est-tool--ggb svg { display: block; pointer-events: none; } .est-tool--icon svg { display: block; pointer-events: none; } .ggb-frame { flex: 1; min-height: 0; } /* Calculatrice façon CASIO fx-92+ Spéciale Collège (Classwiz, coloris menthe) */ .casio { background: linear-gradient(168deg, #c4e6d8 0%, #a3d6c4 55%, #95cdba 100%); padding: 11px 12px 12px; } .casio__brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; color: #15324a; } .casio__logo { font-weight: 800; letter-spacing: 1.5px; font-size: .98rem; } .casio__name { font-size: .68rem; color: #2b4a5e; } .casio__name em { font-style: normal; font-weight: 700; } .casio__screen { position: relative; background: #c3ccb9; border: 2px solid #2b3b34; border-radius: 4px; padding: 8px 10px; margin-bottom: 9px; box-shadow: inset 0 1px 5px rgba(0,0,0,.28); } /* Saisie : volontairement grande pour la projection en classe */ .casio__expr { color: #22302a; font-size: 1.55rem; line-height: 1.45; min-height: 2em; text-align: left; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); } .casio__res { color: #14201a; font-size: 2rem; font-weight: 700; font-family: var(--font-mono, ui-monospace, monospace); line-height: 1.15; min-height: 1.5em; display: flex; align-items: center; justify-content: flex-end; text-align: right; overflow-x: auto; } /* Curseur clignotant + éléments de saisie 2D */ .casio__expr .cx { display: inline; } .casio__expr .ca { white-space: pre; } .casio__expr .cc { display: inline-block; width: 2px; height: 1.05em; margin: 0 -1px; background: #14201a; vertical-align: -0.15em; animation: casio-cc 1s steps(1) infinite; } @keyframes casio-cc { 50% { opacity: 0; } } .casio__expr .cph { display: inline-block; min-width: .62em; height: 1em; border: 1px dashed rgba(34,48,42,.55); border-radius: 2px; vertical-align: -0.08em; } /* Fraction empilée (saisie et résultat) */ .cf { display: inline-flex; flex-direction: column; align-items: center; text-align: center; vertical-align: middle; margin: 0 3px; } .cf__n { display: block; padding: 0 5px 2px; border-bottom: 2px solid currentColor; } .cf__d { display: block; padding: 2px 5px 0; } .cfw { display: inline-flex; align-items: center; gap: 1px; } .casio__res .cf { font-size: .82em; } /* Bouton vers l'émulateur officiel CASIO (nouvel onglet) */ .casio__emu { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; padding: 8px 12px; border-radius: 9px; background: #15324a; color: #eaf3ef; font-weight: 700; font-size: .82rem; text-decoration: none; box-shadow: 0 2px 0 rgba(20,45,33,.35); } .casio__emu:hover { background: #1d4664; } .casio__emu:active { transform: translateY(2px); box-shadow: none; } /* Bandeau de navigation décoratif */ .casio__deco { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 9px; } .cd { font-size: .58rem; font-weight: 700; color: #15324a; background: #eaf3ef; border: 1px solid #7fae9e; border-radius: 11px; padding: 3px 8px; text-align: center; } .cd--sc { padding: 2px 7px; } .casio__dpad { position: relative; width: 62px; height: 62px; justify-self: center; border-radius: 50%; background: #e7f1ec; border: 1px solid #7fae9e; } .dp { position: absolute; font-size: .5rem; color: #15324a; padding: 3px; line-height: 1; border: 0; background: transparent; cursor: pointer; border-radius: 4px; } .dp:hover { color: #2f6df0; } .dp:active { transform-origin: center; } .dp--u { top: 2px; left: 50%; transform: translateX(-50%); } .dp--d { bottom: 2px; left: 50%; transform: translateX(-50%); } .dp--l { left: 4px; top: 50%; transform: translateY(-50%); } .dp--r { right: 4px; top: 50%; transform: translateY(-50%); } .dp--ok { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 24px; height: 24px; font-size: .52rem; font-weight: 800; background: #fff; border: 1px solid #7fae9e; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dp--ok:hover { border-color: #2f6df0; color: #2f6df0; } /* Icône « fraction » sur les touches */ .ck__frac { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: .7; font-size: .7em; } .ck__frac span:first-child { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; } .casio__scroll { display: flex; flex-direction: column; gap: 4px; } /* Pavé */ .casio__pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .ck { position: relative; border: 0; border-radius: 9px; padding: 10px 0 8px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; background: #fff; color: #1a2520; box-shadow: 0 2px 0 rgba(20,45,33,.28); } .ck:hover { filter: brightness(.97); } .ck:active { transform: translateY(2px); box-shadow: none; } .ck--fn { background: #d7e3dd; color: #15324a; font-size: .82rem; font-weight: 600; } .ck--sci { font-size: .8rem; } .ck--op { color: #15324a; } .ck--del, .ck--ac { font-size: .78rem; font-weight: 800; } .ck--ac { color: #c0392b; } .ck--eq { background: #2f9e7e; color: #fff; } .ck--2nd { background: #2f6df0; color: #fff; font-size: .78rem; } .ck--2nd.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f6df0; } .ck__hi { position: absolute; top: 3px; left: 0; right: 0; font-size: .5rem; line-height: 1; color: #2f6df0; font-weight: 700; } .casio__pad.is-2nd .ck__hi { color: #1746c0; } .mini { border-bottom: 1px solid var(--slate-100); padding-bottom: 12px; margin-bottom: 12px; } .mini:last-child { border-bottom: 0; margin-bottom: 0; } .mini h4 { margin: 0 0 8px; font-size: .9rem; } .mini-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mt-display { font-size: 2.2rem; font-weight: 800; text-align: center; margin-top: 8px; font-variant-numeric: tabular-nums; } .mini-result { font-weight: 700; } .mini-groups { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .mini-group { background: var(--slate-100); border-radius: 8px; padding: 5px 10px; font-size: .88rem; } /* Panneau Mini-outils : un bouton par jeu */ .mini-games { display: flex; flex-direction: column; gap: 8px; } .mini-game { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--ink, #0f172a); text-align: left; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .mini-game:hover { transform: translateY(-1px); border-color: var(--brand, #6366f1); box-shadow: 0 6px 16px rgba(99, 102, 241, .18); } .mini-game:active { transform: translateY(0); } .mini-game__ico { font-size: 1.3rem; line-height: 1; } .mini-class { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-100); } .mini-class h4 { margin: 0 0 8px; font-size: .9rem; } .mini-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .9rem; color: var(--muted); } .mini-size input { width: 64px; } /* ===================== Mini-jeux plein écran (dé 3D, pièce, roue, groupes) ===================== */ .est-game { position: absolute; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(circle at 50% 38%, rgba(30, 41, 59, .88), rgba(2, 6, 23, .96)); animation: game-in .25s ease; cursor: pointer; } .est-game[hidden] { display: none; } .est-game.is-out { animation: game-out .45s ease forwards; } .est-game__scene[hidden] { display: none; } @keyframes game-in { from { opacity: 0; } to { opacity: 1; } } @keyframes game-out { to { opacity: 0; } } .est-game__stage { perspective: 1000px; width: 360px; height: 360px; display: flex; align-items: center; justify-content: center; } .est-game__stage[hidden] { display: none; } .est-game__scene { display: flex; align-items: center; justify-content: center; } .est-game__result { min-height: .2em; color: #fff; font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(3rem, 11vw, 8rem); line-height: 1; text-align: center; letter-spacing: .01em; text-shadow: 0 6px 36px rgba(0, 0, 0, .55); opacity: 0; transform: scale(.5); } .est-game__result.is-show { animation: result-pop .55s cubic-bezier(.2, 1.5, .4, 1) forwards; } @keyframes result-pop { to { opacity: 1; transform: scale(1); } } .est-game__hint { color: rgba(255, 255, 255, .45); font-size: .85rem; letter-spacing: .04em; } /* Roue : relances après un tirage. Elle reste alors affichée jusqu'à « Fermer » (ou Échap) : le fond ne ferme plus rien (`is-sticky`) et l'indice « Cliquez pour fermer » s'efface. */ .est-game.is-sticky { cursor: default; gap: 20px; overflow-y: auto; justify-content: center; justify-content: safe center; } .est-game.is-sticky .est-game__hint { display: none; } /* Place réservée (les boutons ne sautent pas à l'arrivée du prénom), taille bornée par la hauteur. */ .est-game.is-sticky .est-game__result { min-height: 1em; font-size: clamp(2.4rem, min(11vw, 12vh), 8rem); } .est-game__ctrls { display: flex; flex-direction: column; align-items: center; gap: 10px; } .est-game__ctrls[hidden] { display: none; } .est-game__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: ctrls-in .35s ease both; } @keyframes ctrls-in { from { opacity: 0; transform: translateY(8px); } } .est-game__pool { color: rgba(203, 213, 225, .72); font-size: .95rem; font-weight: 600; text-align: center; } .est-game__link { padding: 0; border: 0; background: none; color: #a5b4fc; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .est-game__link:hover { color: #c7d2fe; } /* Dé 3D */ .dice3d { position: relative; width: 150px; height: 150px; transform-style: preserve-3d; transition: transform 2.4s cubic-bezier(.16, .7, .2, 1); } .dice3d__face { position: absolute; width: 150px; height: 150px; box-sizing: border-box; background: linear-gradient(135deg, #ffffff, #dbe2ea); border: 2px solid #cbd5e1; border-radius: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 18px; box-shadow: inset 0 0 18px rgba(148, 163, 184, .5); } .dice3d__pip { width: 27px; height: 27px; border-radius: 50%; align-self: center; justify-self: center; background: radial-gradient(circle at 35% 32%, #475569, #0f172a); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35); } .dice3d__face--1 { transform: translateZ(75px); } .dice3d__face--6 { transform: rotateY(180deg) translateZ(75px); } .dice3d__face--2 { transform: rotateX(90deg) translateZ(75px); } .dice3d__face--5 { transform: rotateX(-90deg) translateZ(75px); } .dice3d__face--3 { transform: rotateY(90deg) translateZ(75px); } .dice3d__face--4 { transform: rotateY(-90deg) translateZ(75px); } /* Pièce qui tourne et retombe */ .coin3d { position: relative; width: 180px; height: 180px; transform-style: preserve-3d; } .coin3d.is-toss { animation: coin-toss 2.2s cubic-bezier(.33, 0, .3, 1); } @keyframes coin-toss { 0% { transform: translateY(20px); } 40% { transform: translateY(-210px); } 100% { transform: translateY(0); } } .coin3d__spin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.2, .72, .2, 1); } .coin3d__side { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-display, inherit); font-weight: 800; font-size: 2.4rem; color: #7c2d12; text-transform: uppercase; letter-spacing: .04em; border: 9px solid; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); } .coin3d__side--face { background: radial-gradient(circle at 35% 28%, #fef3c7, #f59e0b 70%); border-color: #b45309; } .coin3d__side--pile { background: radial-gradient(circle at 35% 28%, #fde68a, #d97706 70%); border-color: #92400e; transform: rotateX(180deg); } /* Roue de tirage au sort */ .est-game__scene--wheel { width: 360px; height: 360px; } .wheel { position: relative; width: 350px; height: 350px; } .wheel__pointer { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 32px solid #ef4444; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); } .wheel__svg { width: 100%; height: 100%; transform: rotate(0deg); transition: transform 4.2s cubic-bezier(.1, .72, .12, 1); filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .55)); border-radius: 50%; box-shadow: 0 0 0 9px #fff, 0 0 0 12px #0f172a; } .wheel__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } /* ============ Panneau PERSISTANT des tirages de classe (groupes, tournoi) ============ Le dé, la pièce et la roue s'effacent tout seuls ; les groupes et le tournoi, eux, restent affichés jusqu'au bouton « Fermer » — on travaille dessus pendant toute la séance. */ .est-game.is-panel { gap: 0; padding: 14px; } .est-game.is-panel .est-game__hint, .est-game.is-panel .est-game__result { display: none; } .est-gp { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; flex-direction: column; cursor: default; background: linear-gradient(165deg, rgba(41, 54, 78, .97), rgba(11, 17, 32, .98)); border: 1px solid rgba(148, 163, 184, .22); border-radius: 22px; overflow: hidden; box-shadow: 0 34px 90px rgba(0, 0, 0, .55); animation: gp-in .3s cubic-bezier(.2, .9, .3, 1); } .est-gp[hidden] { display: none; } @keyframes gp-in { from { opacity: 0; transform: translateY(16px) scale(.99); } } .est-gp__head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(148, 163, 184, .16); background: rgba(255, 255, 255, .04); } .est-gp__ico { width: 28px; height: 28px; color: #e2e8f0; --est-ico-accent: #818cf8; } .est-gp__title { flex: none; font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.45rem; color: #fff; } /* Sur une fenêtre étroite, le rappel de classe se tronque plutôt que de pousser les boutons. */ .est-gp__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(203, 213, 225, .72); font-size: .95rem; font-weight: 600; } .est-gp__flag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px; border-radius: 999px; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #442c05; font-weight: 800; font-size: 1.08rem; box-shadow: 0 8px 22px rgba(245, 158, 11, .45); animation: gp-flag .55s cubic-bezier(.2, 1.6, .4, 1); } .est-gp__flag[hidden] { display: none; } .est-gp__flag .est-ico { width: 21px; height: 21px; --est-ico-accent: rgba(255, 255, 255, .7); } @keyframes gp-flag { from { opacity: 0; transform: scale(.55); } } .est-gp__acts { flex: none; margin-left: auto; display: flex; gap: 10px; } .est-gp__btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(148, 163, 184, .34); background: rgba(255, 255, 255, .06); color: #e2e8f0; font-family: inherit; font-weight: 700; font-size: .98rem; white-space: nowrap; transition: background .15s, border-color .15s, transform .12s; } .est-gp__btn[hidden] { display: none; } .est-gp__btn .est-ico { margin-right: 8px; width: 19px; height: 19px; } .est-gp__btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(148, 163, 184, .6); } .est-gp__btn:active { transform: translateY(1px); } .est-gp__btn--x { border-color: rgba(248, 113, 113, .45); color: #fecaca; } .est-gp__btn--x:hover { background: rgba(248, 113, 113, .22); border-color: rgba(248, 113, 113, .8); } .est-gp__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; position: relative; } /* Centrage qui ne rogne pas : la ligne flex fait la hauteur du contenu quand il déborde. */ .est-gp__in { min-height: 100%; display: flex; align-items: center; justify-content: center; } /* Pluie de confettis du sacre (couche éphémère, retirée après l'animation) */ .est-gp__conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; } .est-gp__conf i { position: absolute; top: -18px; width: 9px; height: 15px; border-radius: 2px; animation: gp-conf 2.8s cubic-bezier(.35, .55, .5, 1) forwards; } @keyframes gp-conf { to { transform: translateY(110vh) rotate(760deg); opacity: .12; } } /* Jeu « Former des groupes » : urne qui mélange puis cartes de groupes */ .groups-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; } .groups-title { color: #fff; font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); text-shadow: 0 4px 24px rgba(0, 0, 0, .5); } /* Urne */ .groups-urn { position: relative; width: 230px; height: 210px; transform-origin: 50% 88%; animation: urn-shake .5s ease-in-out infinite; } @keyframes urn-shake { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } .groups-urn__rim { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; width: 200px; height: 30px; border-radius: 50%; background: linear-gradient(#fbbf24, #b45309); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); } .groups-urn__body { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 180px; height: 190px; overflow: hidden; background: linear-gradient(135deg, #fcd34d, #d97706 70%); border: 4px solid #b45309; border-radius: 28px 28px 90px 90px / 20px 20px 130px 130px; box-shadow: inset 0 -14px 24px rgba(0, 0, 0, .25), 0 16px 34px rgba(0, 0, 0, .45); } .groups-chip { position: absolute; padding: 3px 8px; background: #fff; border-radius: 14px; font-size: .72rem; font-weight: 700; color: #0f172a; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); animation: chip-bounce .55s ease-in-out infinite alternate; } @keyframes chip-bounce { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -78%); } } /* Cartes de groupes (couleur du groupe portée par --gc) */ .groups-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; } .group-card { width: 200px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); animation: card-pop .5s both; } @keyframes card-pop { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } } .group-card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--gc, #60a5fa); color: #0b1120; font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.08rem; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); } .group-card__h b { display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(15, 23, 42, .2); font-size: .82rem; } .group-card__l { margin: 0; padding: 5px 0 7px; list-style: none; } .group-card__l li { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-weight: 700; font-size: 1.02rem; color: #1e293b; } .group-card__l li + li { border-top: 1px solid rgba(148, 163, 184, .22); } .group-card__k { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(148, 163, 184, .22); color: #475569; font-size: .74rem; font-weight: 800; } /* ===================== Tournoi : grille à élimination directe ===================== Positions calculées en JS (px) puis mise à l'échelle d'un bloc pour tenir dans le panneau : .est-brk-wrap porte la taille APRÈS échelle (donc le défilement), .est-brk l'échelle elle-même. */ .est-brk-wrap { position: relative; margin: auto; flex: none; } .est-brk { position: absolute; top: 0; left: 0; transform-origin: 0 0; } .est-brk__links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; } .est-brk__col { position: absolute; text-align: center; font-family: var(--font-display, inherit); font-weight: 800; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(199, 210, 254, .7); } .est-brk__m { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 13px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .2); } .est-brk.is-enter .est-brk__m { animation: brk-in .45s both cubic-bezier(.2, .9, .3, 1); } @keyframes brk-in { from { opacity: 0; transform: translateY(12px) scale(.93); } } .est-brk__m.is-pop { animation: brk-pop .45s cubic-bezier(.2, 1.5, .4, 1); } @keyframes brk-pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } } /* Match jouable : c'est là qu'on attend un clic. */ .est-brk__m.is-live { background: rgba(99, 102, 241, .18); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .8), 0 0 0 4px rgba(99, 102, 241, .13); animation: brk-live 1.9s ease-in-out infinite; } @keyframes brk-live { 50% { box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .9), 0 0 0 9px rgba(99, 102, 241, .05); } } .est-brk__m.is-final { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .55), 0 0 0 5px rgba(251, 191, 36, .1); background: rgba(251, 191, 36, .1); } .est-brk__s { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .92); color: #0f172a; font-family: inherit; font-weight: 700; font-size: 1.02rem; text-align: left; cursor: pointer; transition: background .15s, color .15s, transform .12s, box-shadow .15s; } .est-brk__nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .est-brk__m.is-live .est-brk__s:hover { background: #fff; transform: translateX(2px); box-shadow: 0 0 0 2px #818cf8, 0 6px 16px rgba(0, 0, 0, .3); } .est-brk__s.is-win { background: linear-gradient(135deg, #6ee7b7, #10b981); color: #052e1b; box-shadow: 0 6px 16px rgba(16, 185, 129, .3); } .est-brk__s.is-out { background: rgba(255, 255, 255, .11); color: rgba(226, 232, 240, .55); text-decoration: line-through; } .est-brk__s.is-bye, .est-brk__s.is-wait { background: rgba(255, 255, 255, .055); cursor: default; color: rgba(148, 163, 184, .7); font-weight: 600; font-style: italic; font-size: .92rem; } .est-brk__m.is-champ .est-brk__s.is-win { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #422006; box-shadow: 0 8px 22px rgba(245, 158, 11, .45); } .est-brk__s .est-ico { width: 18px; height: 18px; flex: none; --est-ico-accent: rgba(255, 255, 255, .6); } .est-open-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; } .est-open-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .est-open-card img { width: 100%; height: 100px; object-fit: cover; display: block; background: #fff; } .est-open-noimg { height: 100px; display: grid; place-items: center; color: var(--slate-300); font-size: 2rem; background: var(--slate-50); } .est-open-card__t { padding: 6px 8px; font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .est-open-card__tools { padding: 0 8px 8px; display: flex; justify-content: space-between; font-size: .82rem; } /* « Gérer les tableaux » : liste groupée par mois/année (menus dépliants) */ .est-mng { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .est-mng-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .est-mng-grouphead { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: var(--slate-50); cursor: pointer; font: inherit; font-weight: 700; } .est-mng-grouphead:hover { background: var(--slate-100); } .est-mng-chevron { color: var(--muted); font-size: .8rem; transition: transform .15s; } .est-mng-group:not(.is-collapsed) .est-mng-chevron { transform: rotate(90deg); } .est-mng-grouptitle { flex: 1; min-width: 0; } .est-mng-count { color: var(--muted); font-size: .76rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; } .est-mng-group.is-collapsed .est-mng-items { display: none; } .est-mng-items { display: flex; flex-direction: column; } .est-mng-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--slate-100); } .est-mng-thumb { width: 56px; height: 38px; object-fit: cover; border-radius: 6px; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .est-mng-thumb--none { display: grid; place-items: center; color: var(--slate-300); } .est-mng-title { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .est-mng-tools { display: flex; gap: 4px; flex: 0 0 auto; } .est-mng-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; } .est-mng-btn:hover { background: var(--slate-100); } .est-mng-btn--danger:hover { background: #fee2e2; border-color: #fecaca; } .est-mng-btn:disabled { opacity: .5; cursor: default; } /* --- Capture d'une zone du tableau → hexagone image dans « Mes documents » --- */ .est-tool--cap { width: auto; padding: 0 9px; gap: 1px; font-size: .95rem; } .est-tool__cap-arrow { color: var(--muted); font-weight: 700; } .est-capsel { position: absolute; inset: 0; z-index: 40; cursor: crosshair; background: rgba(15,23,42,.08); touch-action: none; } .est-capsel[hidden] { display: none; } .est-capsel__rect { position: absolute; border: 2px dashed #2563eb; background: rgba(37,99,235,.10); box-shadow: 0 0 0 9999px rgba(15,23,42,.18); pointer-events: none; } .est-capsel__rect[hidden] { display: none; } .est-capsel__hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.86); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .84rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15,23,42,.3); } .est-capsel__hint kbd { background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 6px; font: inherit; font-size: .78rem; } .capdoc__preview { display: block; width: 100%; max-height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin: 4px 0 12px; } .capdoc__preview[hidden] { display: none; } .capdoc__lead { margin: 0 0 12px; font-size: .9rem; color: var(--muted); } .capdoc__tree { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; } .capdoc__loading { color: var(--muted); text-align: center; padding: 18px 0; font-size: .9rem; margin: 0; } .capdoc-root, .capdoc-name { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; padding: 8px 10px; border-radius: 8px; } .capdoc-root { font-weight: 600; margin-bottom: 4px; } .capdoc-root:hover, .capdoc-name:hover { background: var(--slate-100); } .capdoc-row { display: flex; align-items: center; gap: 2px; } .capdoc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .capdoc-tog { flex: 0 0 auto; width: 26px; height: 30px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .9rem; } .capdoc-tog--leaf { cursor: default; color: var(--slate-300); } .capdoc-chevron { display: inline-block; transition: transform .15s; } .capdoc-node:not(.is-collapsed) > .capdoc-row .capdoc-chevron { transform: rotate(90deg); } .capdoc-node.is-collapsed > .capdoc-children { display: none; } .capdoc-children { margin-left: 16px; border-left: 1px solid var(--slate-100); padding-left: 4px; } .capdoc-name:disabled, .capdoc-root:disabled { opacity: .5; cursor: default; } /* ---- Appairage de l'extension de navigateur ---- */ .capext__lead { margin: 0 0 12px; font-size: .9rem; color: var(--slate-600); } .capext__steps { margin: 0 0 14px; padding-left: 20px; font-size: .86rem; color: var(--muted); } .capext__steps li { margin: 3px 0; } /* Grille plutot que flex : les trois elements gardent leur place quoi qu'il arrive. En flex, le compte a rebours s'etirait et poussait le bouton a la ligne. */ .capext__codebox { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--slate-100); } /* Le code est lu à voix haute ou recopié sur un autre poste : chiffres larges et espacés. nowrap est indispensable — l'espace des milliers offre sinon un point de coupure, et le code s'affiche sur deux lignes dès que le voisinage se resserre. */ .capext__code { white-space: nowrap; font: 700 1.6rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .22em; color: var(--slate-900, #0f172a); } .capext__timer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); } .capext__codebox .btn { white-space: nowrap; } .capext__h3 { margin: 18px 0 8px; font-size: .92rem; } .capext__devices { border: 1px solid var(--border); border-radius: 10px; padding: 4px; } .capext__empty { margin: 0; padding: 10px; font-size: .85rem; color: var(--muted); text-align: center; } .capext__dev { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: .86rem; } .capext__dev + .capext__dev { border-top: 1px solid var(--slate-100); } .capext__devname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .capext__devseen { flex: 0 0 auto; font-size: .74rem; color: var(--muted); } .capext__revoke { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem; color: var(--danger, #dc2626); text-decoration: underline; } /* Menu « déplacer vers une page » : s'ouvre vers le haut depuis l'indicateur i/N pendant un glisser */ .est-grp--pages { position: relative; } .est-page-menu { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 2px; min-width: 130px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.24); z-index: 14; } .est-page-menu[hidden] { display: none; } .est-page-menu__item { border: 0; background: none; font: inherit; text-align: left; cursor: default; padding: 8px 12px; border-radius: 8px; white-space: nowrap; } .est-page-menu__item.is-hot { background: var(--primary, #4f46e5); color: #fff; } .est-page-menu__item.is-cur { color: var(--muted); } /* ========================================================================= Trieur de pages (clic sur l'indicateur « i/N » de la barre du bas) Planche-contact : réordonner par glisser-déposer, insérer une page entre deux vignettes, dupliquer, supprimer. Les vignettes sont produites par le moteur (js/estrade.js) : ce sont de vraies images du tableau. ========================================================================= */ /* L'indicateur devient un bouton : il doit s'annoncer cliquable sans grossir la barre. */ .est-ind--pg { height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: inherit; font: inherit; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; } .est-ind--pg:hover { background: var(--slate-100); border-color: var(--border); } .modal__box--pgs { max-width: 1180px; width: min(96vw, 1180px); padding: 18px 20px 16px; display: flex; flex-direction: column; max-height: 90vh; } .modal__box--pgs .modal__head { gap: 12px; } .modal__box--pgs .modal__title { flex: 0 0 auto; } .pgs__count { margin-right: auto; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--slate-100); border: 1px solid var(--border); border-radius: 999px; padding: 2px 11px; } .pgs__lead { margin: 10px 0 6px; font-size: .86rem; color: var(--muted); } .pgs__plus { display: inline-grid; place-items: center; width: 17px; height: 17px; vertical-align: -.2em; border-radius: 50%; background: var(--primary); color: #fff; font-size: .74rem; font-weight: 700; line-height: 1; } /* Rangée de vignettes : [fente][page][fente][page]…[fente]. Les fentes servent à la fois de bouton « insérer ici » et de repère de dépose pendant un glisser. */ /* Fond propre à la planche : les vignettes blanches s'y détachent, et l'espace libre à droite de la dernière page se lit comme un plan de travail, pas comme un trou. */ .pgs__grid { display: flex; flex-wrap: wrap; align-items: stretch; overflow: auto; min-height: 0; margin-top: 4px; padding: 2px 10px 10px; background: var(--slate-50); border: 1px solid var(--border); border-radius: 12px; } .pgs__foot { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); justify-content: space-between; } .pgs__foot .est-ico { margin-right: 8px; vertical-align: -.22em; } .pgs-slot { position: relative; flex: 0 0 auto; width: 30px; margin: 9px 0; display: grid; place-items: center; } .pgs-slot::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--primary); opacity: 0; transform: scaleY(.6); transition: opacity .13s, transform .13s; } .pgs-slot.is-drop::before { opacity: 1; transform: none; } .pgs-slot__b { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--slate-300); background: #fff; color: var(--slate-400); cursor: pointer; font-size: .92rem; font-weight: 700; line-height: 1; opacity: .38; transition: opacity .14s, background .14s, color .14s, border-color .14s, transform .14s; } .pgs-slot:hover .pgs-slot__b { opacity: 1; } .pgs-slot__b:hover, .pgs-slot__b:focus-visible { background: var(--primary); border-color: var(--primary); border-style: solid; color: #fff; opacity: 1; transform: scale(1.16); } .pgs__grid.is-sorting .pgs-slot__b { opacity: 0; pointer-events: none; } .pgs-card { position: relative; flex: 0 0 auto; width: 214px; margin: 9px 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.06); transition: box-shadow .16s, border-color .16s, transform .16s; } .pgs-card:hover { border-color: var(--slate-300); transform: translateY(-2px); box-shadow: 0 2px 6px rgba(15,23,42,.09), 0 12px 26px rgba(15,23,42,.13); } .pgs-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .pgs-card.is-current { border-color: var(--acc-estrade-2); box-shadow: 0 0 0 2px var(--acc-estrade-1), 0 8px 22px rgba(6,182,212,.22); } .pgs-card.is-dragging { opacity: .3; filter: grayscale(1); transform: none; } .pgs-card__vue { position: relative; aspect-ratio: var(--pgs-ar, 16 / 9); background: #fff; border-bottom: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; } .pgs-card__img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; } .pgs-card__vide { position: absolute; font-size: .8rem; color: var(--slate-300); font-weight: 600; letter-spacing: .02em; } .pgs-card__tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; } .pgs-tool { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--slate-600); box-shadow: 0 2px 6px rgba(15,23,42,.14); } .pgs-tool:hover { background: #fff; border-color: var(--slate-300); color: var(--slate-900); } .pgs-tool--danger:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; } .pgs-tool:disabled { opacity: .35; cursor: default; box-shadow: none; } .pgs-tool:disabled:hover { background: rgba(255,255,255,.94); border-color: var(--border); color: var(--slate-600); } .pgs-tool .est-ico { width: 17px; height: 17px; } /* À la souris, les outils ne se montrent qu'au survol ; au doigt et au stylet (TBI), il n'y a pas de survol : ils restent visibles en permanence. */ @media (hover: hover) and (pointer: fine) { .pgs-card__tools { opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; } /* :focus-visible et non :focus-within — la carte de la page courante reçoit le focus à l'ouverture, ses outils ne doivent pas s'afficher seuls pour autant. */ .pgs-card:hover .pgs-card__tools, .pgs-card:focus-visible .pgs-card__tools, .pgs-card__tools:focus-within { opacity: 1; transform: none; } } .pgs-card__bar { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--slate-50); } .pgs-card__n { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--slate-900); color: #fff; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; } .pgs-card.is-current .pgs-card__n { background: var(--acc-estrade-2); } .pgs-card__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 600; color: var(--muted); } .pgs-card.is-current .pgs-card__lbl { color: var(--acc-estrade-2); } /* Confirmation de suppression : posée SUR la vignette, plutôt qu'une boîte système — en projection plein écran, une boîte de dialogue du navigateur passe mal. */ .pgs-card__ask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; text-align: center; background: rgba(15,23,42,.93); color: #fff; } .pgs-card__ask[hidden] { display: none; } .pgs-card__ask p { margin: 0; font-size: .84rem; font-weight: 600; } .pgs-card__ask div { display: flex; gap: 8px; } .pgs-ask-btn { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; } .pgs-ask-btn:hover { background: rgba(255,255,255,.24); } .pgs-ask-btn--yes { background: #ef4444; border-color: #ef4444; } .pgs-ask-btn--yes:hover { background: #dc2626; } /* Vignette portée par le pointeur pendant le glisser (hors flux, jamais cliquable). */ .pgs-ghost { position: fixed; left: 0; top: 0; z-index: 200; margin: 0; pointer-events: none; cursor: grabbing; opacity: .96; box-shadow: 0 20px 44px rgba(15,23,42,.38); transition: none; } .pgs-ghost .pgs-card__tools, .pgs-ghost .pgs-card__ask { display: none; } @media (max-width: 620px) { .pgs-card { width: 150px; } .pgs-slot { width: 22px; } } .est:fullscreen { background: #fff; padding: 0; width: 100vw; max-width: none; margin: 0; } .est:fullscreen .est-stage { height: 100vh; border: 0; border-radius: 0; } /* ========================================================================= Phase 5 — Aujourd'hui, séance pivot, palette Ctrl+K ========================================================================= */ /* Titre, interrupteur « visible par mes élèves », date. L'interrupteur est sur la même ligne que le titre et la date passe dessous : la grille tient les trois sans que le libellé de l'interrupteur ne se fasse écraser par un titre long. */ .dash__head { margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; } .dash__title { margin: 0; } .dash__date { margin: 2px 0 0; color: var(--muted); text-transform: capitalize; grid-column: 1 / -1; } /* ==== Interrupteur à glisser (une case à cocher déguisée) ==== Le balisage reste : navigation au clavier, lecteurs d'écran et état coché viennent du navigateur, le JavaScript ne fait que porter le changement au serveur. */ .sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; } .sw__box { position: absolute; opacity: 0; width: 0; height: 0; } .sw__piste { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--slate-300, #cbd5e1); transition: background .18s ease; } .sw__pouce { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); transition: transform .18s ease; } .sw__box:checked + .sw__piste { background: var(--primary, #4f46e5); } .sw__box:checked + .sw__piste .sw__pouce { transform: translateX(18px); } .sw__box:focus-visible + .sw__piste { outline: 2px solid var(--primary); outline-offset: 2px; } .sw__box:disabled + .sw__piste { opacity: .55; } .sw:has(.sw__box:disabled) { cursor: progress; } .sw__txt { font-size: .88rem; color: var(--muted); } /* Éteint, le libellé le dit en toutes lettres : le gris d'un interrupteur seul se lit mal sur une page qui en compte peu. */ .sw--cdt .sw__box:not(:checked) ~ .sw__txt { color: #b45309; } .sw--cdt .sw__box:not(:checked) ~ .sw__txt::after { content: ' — cahier masqué'; } @media (prefers-reduced-motion: reduce) { .sw__piste, .sw__pouce { transition: none; } } .dash__layout { display: flex; gap: 18px; align-items: flex-start; } .dash__main { flex: 1; min-width: 0; } .dash__side { width: 280px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .dash__h2 { font-size: 1.05rem; margin: 0 0 12px; } /* Navigation par jour de « Mes séances » : les flèches rejouent la liste pour un autre jour (?jour=), le reste de la page ne bouge pas. Le libellé garde une largeur fixe pour que les flèches ne sautent pas d'un jour à l'autre. */ .dash__daynav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .dash__daynav .dash__h2 { margin: 0; } .dash__daynav-tools { display: flex; align-items: center; gap: 6px; } .dash__dayl { font-weight: 700; color: var(--slate-600); min-width: 10.5em; text-align: center; } .dash-slot__action { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .dash-slot { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-left: 6px solid var(--cl, var(--border)); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .dash-slot.is-done { background: #ecfdf5; border-color: #a7f3d0; } .dash-slot__time { text-align: center; font-weight: 800; color: var(--slate-700); min-width: 54px; line-height: 1.1; } .dash-slot__time span { font-weight: 500; color: var(--muted); font-size: .8rem; } .dash-slot__body { flex: 1; min-width: 0; } .dash-slot__classe { font-weight: 700; } .dash-slot__lecon { color: var(--slate-600); margin-top: 2px; } .dash-slot__meta { display: flex; gap: 5px; margin-top: 4px; } .dash-improv { margin-top: 8px; } .dash-ramasse { list-style: none; margin: 0; padding: 0; } .dash-ramasse li { border-bottom: 1px solid var(--slate-100); padding: 9px 0; } .dash-ramasse__top { display: flex; align-items: center; gap: 8px; } .dash-ramasse__cl { font-size: .8rem; color: var(--muted); } .dash-ramasse__desc { font-size: .92rem; margin-top: 3px; } .dash-ramasse__date { font-size: .8rem; color: var(--muted); } /* ---- Page « Gestion » (emploi du temps, classes & élèves) ---- */ /* Pleine largeur sur ordinateur (break-out du .container, comme Mes documents). */ .gestion { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 24px 48px; } .gestion__title { font-size: 1.4rem; margin: 0; } .gestion__bloc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; } .gestion__h2 { font-size: 1.05rem; margin: 0; } .gestion__hint { font-weight: 400; font-size: .82rem; color: var(--muted); } /* Barre de la semaine type : les deux boutons (grille horaire, + créneau) restent groupés à droite du titre, que .cdt__bar écarterait sinon l'un de l'autre. */ .sem-bar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Éditeur de la grille horaire : une ligne = une sonnerie (début → fin). */ .hrm-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; } .hrm-row { display: flex; align-items: center; gap: 8px; } .hrm-row .field__input { flex: 1 1 0; min-width: 0; } .hrm-sep { color: var(--muted); font-weight: 700; } .hrm-vide { color: var(--muted); font-size: .88rem; margin: 10px 0; } .hrm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .gestion .sem-creneau { position: relative; align-items: flex-start; border-left: 5px solid var(--cl, var(--border)); padding-left: 8px; margin-bottom: 4px; border-bottom: 0; background: var(--slate-50, #f8fafc); border-radius: 0 8px 8px 0; padding-top: 5px; padding-bottom: 5px; padding-right: 6px; } .gestion .sem-creneau.has-salle { padding-bottom: 22px; } .sem-creneau__main { min-width: 0; } .sem-creneau__cl { font-weight: 700; font-size: .85rem; } .sem-creneau__h { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; } .sem-salle { position: absolute; right: 5px; bottom: 4px; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.4; padding: 1px 8px; border-radius: 999px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Case double : semaine A à gauche, semaine B à droite. */ .sem-duo { display: flex; gap: 4px; } .sem-duo .sem-creneau--half { flex: 1; min-width: 0; } .sem-duo .sem-creneau--half .sem-creneau__tools { flex-direction: column; gap: 2px; align-items: flex-end; } .sem-ab { display: inline-block; font-size: .68rem; font-weight: 800; background: var(--slate-800, #1e293b); color: #fff; border-radius: 5px; padding: 1px 6px; vertical-align: 1px; } .edt__ab { display: inline-block; font-style: normal; font-size: .78rem; font-weight: 800; background: var(--slate-800, #1e293b); color: #fff; border-radius: 6px; padding: 2px 8px; margin-left: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .btn-edit { text-decoration: none; } .cls-card__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Étiquette « groupe » là où le cahier de texte affiche la classe. */ .sem-creneau__grp { display: inline-block; font-size: .7rem; font-weight: 700; background: var(--slate-200, #e2e8f0); color: var(--slate-700, #334155); border-radius: 5px; padding: 0 5px; margin-left: 2px; } .dash-slot__grp { font-weight: 600; } .edt-case__grp { font-size: .72rem; font-weight: 700; color: var(--slate-700, #334155); } .exp-seance__grp { font-weight: 600; color: var(--muted); font-size: .85rem; margin-left: 6px; } .dash__side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .dash__side-head .dash__h2 { margin: 0; } /* Gestion — adaptation téléphone : jours empilés, cartes compactes. Le break-out 100vw est annulé (le .container est déjà pleine largeur sur mobile, et 100vw + barre de défilement créerait un débordement horizontal). */ @media (max-width: 640px) { .gestion { width: auto; max-width: none; margin-left: 0; padding: 0 0 40px; } .gestion__bloc { padding: 12px; } .gestion .sem-grid { grid-template-columns: 1fr; } .gestion .eleve__email { flex-basis: 100%; order: 3; } .gestion .cls-card__head { flex-direction: column; } .gestion .cls-card__tools { flex-wrap: wrap; justify-content: flex-start; } } /* ---- Code couleur des classes (page Gestion) ---- */ .cls-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15,23,42,.18); margin-right: 8px; } .cls-palette { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .cls-swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid rgba(15,23,42,.12); cursor: pointer; padding: 0; } .cls-swatch.is-active { border-color: var(--slate-800, #1e293b); box-shadow: inset 0 0 0 2px #fff; } .cls-swatch--none { background: #fff; border-style: dashed; color: var(--muted); font-size: .95rem; line-height: 1; } .cls-palette input[type="color"] { width: 34px; height: 28px; padding: 1px 2px; border: 2px solid rgba(15,23,42,.12); border-radius: 8px; background: #fff; cursor: pointer; } .cls-palette input[type="color"].is-active { border-color: var(--slate-800, #1e293b); } /* ---- Emploi du temps de la semaine (façon feuille papier) ---- */ .edt { margin-top: 26px; margin-bottom: 26px; } .edt__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } /* Bascule de présentation, en haut à droite du tableau (Planning ↔ EDT). */ .edt__vues { display: inline-flex; margin-left: auto; gap: 2px; padding: 2px; background: var(--slate-100, #f1f5f9); border: 1px solid var(--border); border-radius: 999px; } .edt__vue { border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 700; color: var(--muted); padding: 4px 14px; border-radius: 999px; cursor: pointer; } .edt__vue:hover { color: var(--slate-900, #0f172a); } .edt__vue.is-active { background: #fff; color: var(--slate-900, #0f172a); box-shadow: 0 1px 3px rgba(15,23,42,.16); } /* Les deux présentations sont rendues dans la page ; la classe portée par #edt décide laquelle s'affiche — à l'écran comme sur la feuille, l'autre étant en display:none. */ .edt .edt__vue-edt { display: none; } .edt.is-vue-edt .edt__vue-planning { display: none; } .edt.is-vue-edt .edt__vue-edt { display: table; } .edt__sheet { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; overflow-x: auto; } .edt__titre { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; font-style: italic; font-size: .95rem; } .edt-case__date[data-seance] { cursor: pointer; } .edt-case__date.is-copied { outline: 2px solid #059669; } .edt__grid { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; } /* Sélecteurs d'enfants directs, partout où la grille se décrit : le déroulé d'une séance est du HTML rendu, il peut contenir un TABLEAU — sans le « > », la bordure noire, le padding nul et la hauteur de 88 px des cases retomberaient sur ses cellules à lui. */ .edt__grid > tbody > tr > th, .edt__grid > tbody > tr > td { border: 1.5px solid var(--slate-800, #1e293b); padding: 0; vertical-align: top; height: 88px; } .edt__classe { width: 34px; background: var(--cl, #e2e8f0); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .edt__classe span { writing-mode: vertical-rl; transform: rotate(180deg); display: block; margin: auto; font-weight: 800; font-size: .82rem; padding: 6px 2px; white-space: nowrap; } .edt__classe--extra { background: #f1f5f9; } .edt__classe--extra span { font-weight: 600; color: var(--slate-600); } .edt-case { display: block; width: 100%; height: 100%; text-align: center; } /* En-tête d'une case : la date en pastille à gauche, l'horaire à droite, sur UNE seule ligne. Tout ce qui suit accueille le déroulé de la séance quand il est saisi (prévu ou fait) — et reste blanc sinon, pour qu'on l'écrive à la main sur la feuille imprimée. */ /* Corps mesurés sur la case IMPRIMÉE (5,4 cm, soit 193 px utiles) : à .62/.56 rem, une date sans salle tient toujours sur une ligne, la plus longue comprise. flex-wrap : avec une salle en plus (« mercredi 2 septembre » + « 08:00 – 09:00 · S103 ») la ligne déborde ; l'horaire passe alors dessous plutôt que de rogner la date — rien n'est perdu. Le calage du déroulé mesure cet en-tête, il suit tout seul. */ .edt-case__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 3px 3px 0; } .edt-case__date { flex: 0 1 auto; min-width: 0; font-size: .62rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Horaire (nom de la classe pour les suppléments) : au bout de la ligne d'en-tête, menu et insécable — il ne doit jamais pousser la pastille de date sur une deuxième ligne. */ .edt-case__heure { flex: 0 0 auto; margin-left: auto; font-size: .56rem; font-weight: 600; color: var(--slate-700); white-space: nowrap; } .edt-case__lecon { display: block; font-size: .68rem; font-weight: 700; color: var(--slate-900); margin: 2px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .edt-case__lecon:hover { text-decoration: underline; } /* Déroulé de la séance : il occupe le reste de la case, rendu comme sur la page de la séance (mêmes règles .prose) mais ramené à l'échelle du timbre-poste. TOUT y est exprimé en em : js/aujourdhui.js ne règle que la taille de base, et titres, listes, images et formules suivent. La taille et le plafond de hauteur sont posés en style INLINE par le script, calculés pour la case du PAPIER — la seule qui soit tenue de tenir. Les valeurs ci-dessous ne servent que s'il n'a pas tourné. */ .edt-case__deroule { font-size: 7px; line-height: 1.2; text-align: left; color: var(--slate-700); padding: 1px 5px 0; overflow: hidden; overflow-wrap: anywhere; } .edt-case__deroule > :first-child { margin-top: 0; } .edt-case__deroule > :last-child { margin-bottom: 0; } .edt-case__deroule p, .edt-case__deroule ul, .edt-case__deroule ol, .edt-case__deroule blockquote { margin: .25em 0; } .edt-case__deroule h1, .edt-case__deroule h2, .edt-case__deroule h3, .edt-case__deroule h4, .edt-case__deroule h5, .edt-case__deroule h6 { font-size: 1.05em; font-weight: 700; line-height: 1.2; margin: .35em 0 .1em; } .edt-case__deroule ul, .edt-case__deroule ol { padding-left: 1.1em; } .edt-case__deroule li { margin: 0; } .edt-case__deroule blockquote { padding-left: .5em; border-left-width: 2px; } .edt-case__deroule pre { padding: .3em; border-radius: .3em; } .edt-case__deroule code { padding: 0 .2em; border-radius: .2em; } .edt-case__deroule table { margin: .3em 0; } .edt-case__deroule th, .edt-case__deroule td { padding: .1em .3em; } /* Une illustration ne suit pas la taille du texte : on la borne en em pour qu'elle rétrécisse elle aussi quand le tâtonnement descend. */ .edt-case__deroule img, .edt-case__deroule svg { max-width: 100%; max-height: 7em; height: auto; } /* Déroulé PRÉVU (séance pas encore faite) : même place et même échelle que le compte rendu — rien de la géométrie de la case ne change, le calage papier de js/aujourdhui.js non plus — mais en italique et en encre plus claire, pour lire d'un coup d'œil ce qui est prévu et ce qui a été fait. Déclaré APRÈS le bloc ci-dessus : à spécificité égale, c'est sa couleur qui l'emporte, et les paragraphes du déroulé en héritent. */ .edt-case__deroule--prevu { color: var(--slate-500, #64748b); font-style: italic; } .edt-case--today { outline: 3px solid #0ea5e9; outline-offset: -3px; } .edt-case--done .edt-case__heure::after { content: " ✓"; color: #059669; } .edt-case--add { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .85rem; } .edt-case--add:hover { background: #f8fafc; } .edt-case { position: relative; } .edt-case__edit { position: absolute; right: 3px; bottom: 2px; background: none; border: 0; cursor: pointer; font-size: .9rem; line-height: 1; padding: 3px 5px; opacity: .3; border-radius: 6px; } .edt-case__edit:hover { opacity: 1; background: var(--slate-100, #f1f5f9); } /* Poignee de COPIE (⧉) : on traine une seance sur une autre case pour l'y recopier (js/cahier.js). Jumelle du ✎, a l'autre coin. touch-action: none est indispensable — sans elle, le doigt fait defiler la page au lieu d'entrainer la seance. */ .edt-case__copy { position: absolute; left: 3px; bottom: 2px; background: none; border: 0; cursor: grab; font-size: .82rem; line-height: 1; padding: 3px 5px; opacity: .3; border-radius: 6px; touch-action: none; } .edt-case__copy:hover { opacity: 1; background: var(--slate-100, #f1f5f9); } /* Pendant le geste : toutes les cases qui peuvent recevoir la copie s'eclairent (la source, rendue deux fois — Planning et EDT —, en est exclue), et celle qu'on survole s'allume franchement. Deux classes de plus que .edt-case--today : c'est bien le marquage du glisser qui l'emporte le temps du geste. */ .edt.is-copie .edt-case:not(.is-copie-src) { outline: 2px dashed var(--slate-400, #94a3b8); outline-offset: -2px; } .edt.is-copie .edt-case.is-copie-cible { outline: 3px solid #059669; outline-offset: -3px; background: #ecfdf5; } .edt-ghost { position: fixed; z-index: 90; transform: translate(-50%, -140%); pointer-events: none; max-width: 260px; padding: 5px 11px; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 20px rgba(79,70,229,.4); } /* Bandeau de la seance MISE DE COTE par un clic sur ⧉. Il est posé sur le et non dans la grille : c'est justement l'etat qui doit rester visible pendant qu'on change de semaine (les fleches ◀ ▶ rechargent la page) et pendant qu'on fait defiler. */ .edt-copiebar { position: fixed; z-index: 80; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(92vw, 620px); padding: 9px 10px 9px 15px; border-radius: 999px; background: var(--slate-800, #1e293b); color: #fff; font-size: .84rem; font-weight: 600; box-shadow: 0 10px 26px rgba(15,23,42,.35); } .edt-copiebar__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edt-copiebar__btn { flex: 0 0 auto; padding: 4px 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: .8rem; } .edt-copiebar__btn:hover { background: rgba(255,255,255,.3); } /* ---- Vue « EDT » : jours en colonnes × horaires en lignes ---------------------- Vraie feuille d'emploi du temps : les séances qui commencent à la même heure sont sur la même ligne, d'un jour à l'autre. Même squelette de tableau que la vue « Planning » (.edt__grid) et exactement les mêmes cases — d'où si peu de règles ici : ne restent que l'en-tête des jours, la colonne des horaires et la case vide. */ .edt-sem > thead > tr > th { border: 1.5px solid var(--slate-800, #1e293b); padding: 2px 4px; } .edt-sem__tete { font-size: .74rem; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .edt-sem__tete.is-today { outline: 3px solid #0ea5e9; outline-offset: -3px; } /* Colonne des horaires — pendant de .edt__classe (les classes) dans la vue Planning ; sa largeur est reprise par js/aujourdhui.js pour calculer la case du papier. */ .edt__heure { width: 54px; background: #f1f5f9; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .edt__heure span { display: block; padding: 4px 2px; font-size: .68rem; font-weight: 800; color: var(--slate-700, #334155); } .edt__heure--extra span { font-size: .6rem; font-weight: 600; color: var(--slate-600); } /* Deux séances sur le même créneau (classe dédoublée, remplacement) : la case ne peut plus prendre toute la hauteur de la cellule, elles se la partagent. */ .edt-sem .edt__cell:has(.edt-case + .edt-case) .edt-case { height: auto; } .edt-sem .edt-case + .edt-case { border-top: 1px dashed var(--slate-300, #cbd5e1); } /* Case vide : le « + » ne se montre qu'au survol (ou au clavier), mais le bouton occupe toute la cellule — c'est elle, entière, qui est cliquable. */ .edt-sem__vide { display: block; width: 100%; height: 100%; min-height: 40px; border: 0; background: none; cursor: pointer; font: 300 1.5rem/1 inherit; color: var(--muted); opacity: 0; transition: opacity .12s; } .edt-sem__vide:hover, .edt-sem__vide:focus-visible { opacity: 1; background: var(--slate-50, #f8fafc); } /* ---- Créneaux libres : les heures de la grille horaire où l'enseignant n'a rien de la semaine. Elles sont rendues dans le tableau puis REPLIÉES ; la bascule « Créneaux libres » pose .is-libres sur #edt et les déplie — à l'écran comme sur la feuille imprimée, sans recharger la page. La colonne des horaires les distingue en italique clair : ce sont des heures où il ne se passe rien, elles ne doivent pas peser autant que les autres. */ .edt:not(.is-libres) .edt-sem__libre { display: none; } .edt-sem__libre > .edt__heure { background: #f8fafc; } .edt-sem__libre > .edt__heure span { font-weight: 600; font-style: italic; color: var(--muted); } /* Bascule « Créneaux libres » : propre à la vue EDT (en Planning les lignes sont des classes, la notion n'a pas de sens) — d'où le repli hors de cette vue. */ .edt__libres { display: none; border: 1px solid var(--border); background: #fff; font: inherit; font-size: .82rem; font-weight: 700; color: var(--muted); padding: 4px 12px; border-radius: 999px; cursor: pointer; } .edt.is-vue-edt .edt__libres { display: inline-block; } .edt__libres:hover:not(:disabled) { color: var(--slate-900, #0f172a); } .edt__libres[aria-pressed="true"] { background: var(--slate-800, #1e293b); border-color: var(--slate-800, #1e293b); color: #fff; } .edt__libres:disabled { opacity: .45; cursor: not-allowed; } /* ---- Créneaux d'une autre matière que le cours (migrations 066 et 067) --------- Vie de classe, Devoirs faits… : ces créneaux tiennent leur place dans l'emploi du temps et dans « Ma semaine », mais ne figurent pas au cahier de texte de la classe. Une teinte propre les distingue partout où ils apparaissent — semaine type, séances du jour, les deux vues de la semaine — et l'impression la garde (« Ma semaine » sort en couleur). UNE variable par nature (.nature--), et un seul jeu de règles qui la consomme : ajouter une nature au catalogue App\Models\Creneau::NATURES ne demande ici que la paire de couleurs. --nat-cl teinte la pastille et le sous-titre, --nat-bg le fond de la case. Déclarées ICI, après .gestion .sem-creneau et .edt-case : à spécificité égale, c'est la dernière règle écrite qui l'emporte. */ .nature--vie_classe { --nat-cl: #7C3AED; --nat-bg: #faf5ff; } /* violet */ .nature--devoirs_faits { --nat-cl: #0E7490; --nat-bg: #ecfeff; } /* cyan */ .nature-chip { display: inline-block; font-size: .68rem; font-weight: 800; color: #fff; background: var(--nat-cl, #7C3AED); border-radius: 5px; padding: 0 6px; vertical-align: 1px; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .gestion .sem-creneau.is-hors-cahier { background: var(--nat-bg, #f8fafc); } .edt-case.is-hors-cahier { background: var(--nat-bg, transparent); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .edt-case.is-hors-cahier .edt-case__grp { color: var(--nat-cl, inherit); } /* Impression de la page « Aujourd'hui » (la seule à contenir .edt) : règles statiques — aucune classe posée en JS — pour être fiables quel que soit le navigateur et le chemin d'impression (bouton, Ctrl+P, menu). */ @media print { body:has(.edt) .topbar, body:has(.edt) .footer, body:has(.edt) .dash__head, body:has(.edt) .dash__layout, body:has(.edt) .modal { display: none !important; } body:has(.edt), body:has(.edt) .container { max-width: none; width: auto; padding: 0; margin: 0; height: auto; } body:has(.edt) .edt { margin: 0; } body:has(.edt) .edt__sheet { border: 0; border-radius: 0; padding: 0; overflow: visible; width: 100%; } body:has(.edt) .edt__titre { margin: 0 0 3mm; font-size: 11pt; } /* Largeur : jamais plus que la zone imprimable (le min-width écran est annulé). Hauteur : la grille remplit exactement la page (100vh = page moins marges), les hauteurs de lignes se répartissent → toujours une seule page. */ /* --edt-grille : hauteur de la grille sur la feuille (la page moins le titre). Nommée ici parce que la vue s'en sert pour donner à chaque ligne exactement sa part, et js/aujourdhui.js pour calculer la case papier — trois calculs, une seule valeur. */ body:has(.edt) .edt { --edt-grille: calc(100vh - 13mm); } body:has(.edt) .edt__grid { min-width: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: fixed; height: var(--edt-grille); } body:has(.edt) .edt__grid > tbody > tr > th, body:has(.edt) .edt__grid > tbody > tr > td { height: auto; overflow: hidden; } body:has(.edt) .edt-case--today { outline: none; } body:has(.edt) .edt-case--add { visibility: hidden; } body:has(.edt) .edt-sem__tete.is-today { outline: none; } /* Vue « EDT » : mêmes règles de grille que le Planning (elle est aussi un .edt__grid), plus sa ligne de jours en tête — dont la hauteur est déclarée avec les autres mesures de la feuille dans le