/* Liste de programmes (colles-cards-page, plus bas — incluse dans l'onglet Colles de /devoirs/, cf. colles/_programs_panel.html) + éditeur d'un programme (context_bar.css + layout deux colonnes liste/PDF, cf. colles-editor-layout plus bas), propre à colles/detail.html. */ /* Couleur d'identité des pages "Programme de colles" (fil d'Ariane, cartes, éditeur, PDF...) : bleu dédié --kind-programme-colle (tokens.css), PAS --kind-colle/teal — ce dernier reste réservé au badge de CONTENU "Colle" (.sh-kind-colle, exercices/feuilles de type colle, cf. sheet_card.css) et à l'onglet "Colles" notées de /devoirs/ (kind=colle_notee, devoirs.css), deux choses distinctes de CE fichier qui ne gère que ColleProgram (refonte 2026-08-27 : teal libéré pour les colles notées, ce module devient bleu). Posé sur :root (pas .colles-ctx-bar) : colles.css n'est chargé QUE sur les pages Colles, et .colles-ctx-bar/.colles-page sont deux boîtes SIBLINGS (pas l'une dans l'autre, cf. _context_bar_page.html) — une variable posée sur l'une ne serait pas visible dans l'autre. */ :root { --colles-accent: var(--kind-programme-colle); --colles-accent-dim: var(--kind-programme-colle-bg); } .colles-ctx-bar { --ctx-max-width: 99vw; /* La zone PDF doit toucher la barre (demande explicite) : context_bar.css pose 6px de margin-bottom par défaut (générique), annulé ici. Le height:calc(100vh - 51px) de .colles-page (plus bas) tenait compte de ces 6px : ajusté en conséquence. */ margin-bottom: 0; } .colles-ctx-bar .ctx-breadcrumb-current { color: var(--colles-accent); } /* Le Σ du logo, l'onglet "Colles" actif et son trait sont pilotés par --page-accent posé sur (nav.css) : `body.colles-ctx-active` vaut déjà var(--kind-programme-colle) (bleu, cf. --colles-accent plus haut), donc les recolorer ici serait redondant. Surtout, ce fichier N'EST PAS chargé que sur /colles/ : devoirs.html inclut colles/_programs_panel.html, qui pose le . Sur /devoirs/?kind=colle le porte devoirs-ctx-active, et l'onglet Colles y est is-active (base.html) — des règles nav ici donnaient donc un Σ + onglet teal à côté d'un fil d'Ariane couleur Devoirs. Règle du site : une seule déclaration d'accent par page, --page-accent sur . Ne rien remettre ici. Reste local ce qui n'a pas d'équivalent générique : le bouton d'action "+ Nouveau programme" (.button-outline de theme.css, recoloré plutôt que d'ajouter une variante par page). */ .colles-ctx-bar .button-outline { color: var(--colles-accent); border-color: var(--colles-accent); } .colles-ctx-bar .button-outline:hover { background: var(--colles-accent-dim); } /* Onglet Colles de /devoirs/ (body.colles-ctx-active, cf. base.html) : --accent de tout le conteneur #doc-devoirs-root passe en teal, comme sur /colles// — sinon boutons/focus/bordures de carte y restaient orange (devoirs.css), seuls le Σ/l'onglet/le fil d'Ariane suivaient déjà --page-accent. */ body.colles-ctx-active #doc-devoirs-root, body.colles-ctx-active:has(#doc-devoirs-root) .doc-page-sidebar, body.colles-ctx-active:has(#doc-devoirs-root) .doc-header { --accent: var(--colles-accent); --accent-strong: color-mix(in srgb, var(--colles-accent) 82%, black); --accent-soft: color-mix(in srgb, var(--colles-accent) 14%, transparent); --accent-dim: color-mix(in srgb, var(--colles-accent) 8%, transparent); --shadow-glow: 0 4px 20px color-mix(in srgb, var(--colles-accent) 22%, transparent); } /* .colles-btn a été repliée sur `class="button button-secondary"` — la taille compacte du jeu générique (28px, contre 27px ici), cf. theme.css. Le fond passe de --surface à --surface-3 : le bouton se détache du panneau au lieu de s'y fondre. Ne pas redessiner un bouton ici. */ .colles-page { max-width: 99vw; margin: 0 auto; padding: 0; /* Plein-hauteur sous la context bar : le PDF doit toucher la barre et aller jusqu'en bas, sans scroll de page — seul .colles-editor-panel scrolle, cf. plus bas. --doc-topbar-h (posée par _context_bar_page.html, mesure réelle de .colles-ctx-bar + l'espace sous elle) plutôt qu'un 45px figé : depuis que .ctx-bar est position:fixed (context_bar.css), #app-body exclut déjà cette hauteur de sa PROPRE boîte (nav.css) — un 45px qui ne matche pas exactement cette mesure fait déborder .colles-page de quelques px sous #app-body et fait réapparaître la scrollbar globale (constaté : #app-body mesurait 6px de moins que ce calc). */ height: calc(100vh - var(--nav-height) - var(--doc-topbar-h, 45px)); overflow: hidden; } .colles-empty { color: var(--text-muted); font-size: 0.9rem; } /* Page "liste de programmes" (onglet Colles de /devoirs/, seul point d'entrée) : simple colonne de cartes devoirs-card (cf. _programs_panel.html), même principe de largeur/centrage qu'une page de contenu classique — plus le layout deux colonnes + hauteur figée qu'imposait l'ancien panneau PDF (celui-ci reste utilisé par l'éditeur, cf. .colles-page/.colles-pdf-panel plus bas, propres à colles/detail.html). */ .colles-cards-page { max-width: 900px; margin: 0 auto; /* Pas de padding-top : le titre (h2.devoirs-section-title) doit s'aligner sur celui des pages DM/DS (rendu directement dans .doc-page-main, sans wrapper) — un padding ici le décale de 20px plus bas qu'eux (constaté 2026-08-26). */ padding: 0 0 var(--space-6); } /* Couleur d'identité teal sur la carte "Programme de colles", même principe que .devoirs-card-dm/-ds (devoirs.css) — border-left permanent + icônes meta/chapitres/chevron recolorées, pour rester visuellement distinct des cartes DM/DS quand ces cartes cohabitent (onglet Colles vs DM/DS). */ .devoirs-card.devoirs-card-colle { border-left-color: var(--colles-accent); } .devoirs-card-colle .devoirs-card-meta svg, .devoirs-card-colle .devoirs-card-chapters svg { color: var(--colles-accent); } .devoirs-card-colle .devoirs-card-chevron:hover { color: var(--colles-accent); } /* Cartes "colle notée" (_sessions_panel.html, onglet Colles) : teal --kind-colle plutôt que --colles-accent (bleu, réservé aux programmes de colle) — même principe que .devoirs-card-colle ci-dessus, cf. demande 2026-08-27. */ .devoirs-card.devoirs-card-colle-notee { border-left-color: var(--kind-colle); } .devoirs-card-colle-notee .devoirs-card-meta svg, .devoirs-card-colle-notee .devoirs-card-chapters svg { color: var(--kind-colle); } .devoirs-card-colle-notee .devoirs-card-chevron:hover { color: var(--kind-colle); } /* Essai de mise en page pour la toute première carte "colle notée" (la plus récente, cf. _sessions_panel.html demande 2026-08-27) : la zone noms/notes devient une grille à 3 colonnes (1 par élève d'un groupe) avec un texte bien plus grand que les pastilles .devoirs-card-chapter-pill habituelles, plutôt qu'une liste compacte — juste cette zone, pas toute la carte. */ .devoirs-card-names-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: 4px; } .devoirs-card-names-featured-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; background: var(--kind-colle-bg); text-align: center; } .devoirs-card-names-featured-name { font-size: 1.05rem; font-weight: 600; color: var(--text); } .devoirs-card-names-featured-note { font-size: 1.6rem; font-weight: 700; color: var(--kind-colle); } /* En-tête de la liste des colles notées : titre + sélecteur d'année scolaire (cf. _sessions_panel.html) sur une même ligne. */ .colles-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .colles-sessions-head .devoirs-section-title { margin: 0; } .colles-sessions-filters { display: flex; align-items: center; gap: var(--space-2); } .colles-year-select-form select { font: inherit; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); } /* Colonne chevron à droite : structure identique à .devoirs-card-side (devoirs.css) mais sous un AUTRE nom — devoirs.js ouvre un panneau info (.exo-info-btn) quand on clique dans .devoirs-card-side, panneau qui n'existe pas pour les colles (pas de fiche à cocher/décocher depuis cette liste). Sous ce nom, le clic tombe dans la branche "else" générique de devoirs.js et navigue normalement vers data-href, comme le reste de la carte — pas de zone morte sur le chevron. */ .colle-card-side { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 16px 0; border-right: 1px solid var(--border-soft); } .colles-pdf-panel { position: relative; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); background: var(--surface); overflow: hidden; } .colles-pdf-panel .colles-empty { display: flex; align-items: center; justify-content: center; height: 100%; } /* Éditeur (colles-editor-layout) : le panneau PDF occupe toute la hauteur disponible sous la context bar (cf. .colles-page height: 100vh - 51px), contrairement à celui de l'index (colles-layout) resté en 70vh fixe. */ .colles-editor-layout .colles-pdf-panel, .colles-editor-layout .colles-pdf-panel .colles-empty { height: 100%; } /* Casse le max-width:1180px générique posé par context_bar.css (main:has(> .ctx-bar)) — l'éditeur de programme a besoin de bien plus de largeur pour son panneau PDF (paysage, cf. .colles-editor-layout plus bas) ; changement local à colles/detail.html (main:has(.colles-editor-layout)), ne touche aucune autre page utilisant _context_bar_page.html. */ main:has(.colles-editor-layout) { max-width: 85vw; padding: 0 12px; } /* ---- Éditeur de programme (colles/detail.html) ---- */ /* Panneau PDF plus large ici que sur les autres pages (sheet_detail.html etc.) : le PDF du programme de colle est en mode paysage (colle_pdf.py), il lui faut plus de largeur qu'un PDF portrait classique — colonne de gauche réduite en conséquence, changement local à colles-editor-layout. */ .colles-editor-layout { display: grid; grid-template-columns: minmax(340px, 400px) 1fr; gap: var(--space-4); align-items: stretch; height: 100%; } /* Le panneau lui-même ne scrolle plus : Semaine/Ajouter un chapitre restent fixes en haut, seul #colle-chapters (plus bas) scrolle sous eux — sans ça toute la colonne (en-tête compris) défilait avec la liste des chapitres. */ .colles-editor-panel { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-height: 0; overflow: hidden; padding: var(--space-4) 0 var(--space-6) 0; } .colles-editor-header { display: flex; gap: var(--space-3); align-items: flex-end; } .colles-editor-field { display: flex; flex-direction: column; gap: 6px; flex: none; } .colles-editor-field-grow { flex: 1; } .colles-editor-field label { font-size: 0.78rem; color: var(--text-muted); } /* Boîte encadrée avec icône, cf. maquette (crayon sur Numéro, calendrier sur Semaine) — un seul wrapper générique plutôt qu'un style par champ. */ .colles-editor-input-wrap { position: relative; display: flex; align-items: center; } .colles-editor-field input, .colles-editor-field select { width: 100%; padding: 9px 34px 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); background: var(--surface-2); color: var(--text); font-size: 0.92rem; appearance: none; } .colles-editor-field select { padding-left: 34px; padding-right: 30px; } .colles-editor-field input[type="number"] { width: 130px; } .colles-editor-field input:focus, .colles-editor-field select:focus { outline: none; border-color: var(--colles-accent); } .colles-editor-input-icon { position: absolute; right: 11px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; } .colles-editor-input-icon-lead { right: auto; left: 11px; } .colles-editor-savestate { height: 1em; margin: 0; font-size: 0.78rem; color: var(--success, #4a9d6e); } .colles-editor-savestate.is-error { color: var(--danger, #e5675f); } /* "+ Ajouter un chapitre", cf. maquette : une seule rangée pleine largeur plutôt que select + bouton visuellement séparés — le