générique plafonne à 900px et centre avec une marge, ce qui laisse .cahier-page sans hauteur exploitable (height:100% sur un ancêtre en hauteur "auto" s'effondre à 0) — d'où les blocs visuellement écrasés à rien tant que cette hauteur n'est pas fixée explicitement (calculée en JS ci-dessous, cf. planning_cahier.js). */ /* Double :has() pour battre en spécificité main:has(> .ctx-bar) de context_bar.css (max-width:1180px) — ce dernier est injecté en (via _context_bar_page.html), donc plus tard dans l'ordre du document que ce fichier chargé en : à spécificité égale (un seul :has() de chaque côté), c'est lui qui gagnerait sinon, quel que soit l'ordre des dans base.html. */ main:has(.cahier-page):has(.cahier-page) { max-width: none; width: 97%; margin: 0 auto; } .cahier-week-nav { order: 1; display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--text-muted); } .cahier-week-arrow { padding: 2px 10px; font-weight: 700; } .cahier-week-label { font-weight: 600; color: var(--text); min-width: 150px; text-align: center; } .cahier-week-today.is-disabled { visibility: hidden; pointer-events: none; } .cahier-page { height: var(--cahier-available-height, calc(100vh - 160px)); box-sizing: border-box; display: flex; flex-direction: column; padding: var(--space-4) var(--space-4) var(--space-3); overflow: hidden; } /* EDT à gauche, détail de la séance à droite (persistant, plus de modale) — cf. demande du 2026-08-23. */ .cahier-body-row { display: flex; gap: var(--space-3); flex: 1; min-height: 0; } .cahier-grid-wrap { flex: 1 1 auto; min-width: 0; display: flex; } .cahier-grid { display: grid; grid-template-columns: 56px repeat(6, 1fr); gap: var(--space-2); flex: 1; min-height: 0; } .cahier-col-header { background: var(--bg-elev); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-bottom: none; min-height: 44px; box-sizing: border-box; } .cahier-col.is-today .cahier-col-header { background: var(--ocre-bg); box-shadow: inset 0 0 0 1px var(--ocre); } .cahier-col-title { font-weight: 600; font-size: 0.85rem; color: var(--text); } .cahier-col-date { font-size: 0.72rem; color: var(--text-faint); } .cahier-hour-ruler, .cahier-col { display: flex; flex-direction: column; } .cahier-hour-body, .cahier-col-body { position: relative; flex: 1; min-height: 0; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--inset); } .cahier-hour-mark { position: absolute; left: 0; right: 4px; transform: translateY(-50%); font-size: 0.68rem; color: var(--text-faint); text-align: right; } .cahier-block { position: absolute; left: 2px; right: 2px; box-sizing: border-box; padding: 4px 6px; font-size: 0.76rem; line-height: 1.25; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 2px; overflow: hidden; cursor: pointer; } .cahier-block:hover { background: var(--surface-3); } .cahier-block.has-public { border-left-color: var(--success); } .cahier-block.is-selected { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface-3); } .cahier-block-title { font-weight: 600; color: var(--text); } .cahier-block-time { color: var(--text-muted); font-size: 0.7rem; } .cahier-block-flags { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; } /* Badges pleins (fond couleur + icône blanche), pas juste une icône colorée sur le fond du bloc — beaucoup plus flagrant au premier coup d'œil que des contours discrets, cf. demande du 2026-08-23. */ .cahier-flag-public, .cahier-flag-private { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4); flex-shrink: 0; } .cahier-flag-public svg, .cahier-flag-private svg { display: block; width: 17px; height: 17px; } .cahier-flag-public { background: var(--success); color: #fff; } /* Étoile pleine plutôt qu'un triangle d'alerte : "plus fort" visuellement (icône pleine vs. contour) sans connotation de danger/attention littérale — cf. demande du 2026-08-23. Ocre plutôt que rouge, pour la même raison. */ .cahier-flag-private { background: var(--ocre); color: #fff; } /* ---------- Panneau détail (persistant, à droite de l'EDT) ---------- */ .cahier-detail-panel { flex: 0 0 460px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .cahier-detail-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } .cahier-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-elev); } .cahier-detail-title { font-weight: 600; font-size: 0.92rem; color: var(--text); } .cahier-detail-subtitle { font-size: 0.76rem; color: var(--text-faint); } .cahier-detail-status { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; transition: color 0.2s; } .cahier-detail-status.saved { color: var(--success); } .cahier-detail-status.error { color: var(--danger); } .cahier-entry-tabs { display: flex; gap: var(--space-2); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); flex: 0 0 auto; } .cahier-entry-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-2); color: var(--text-muted); font-size: 0.85rem; cursor: pointer; } .cahier-entry-tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .cahier-entry-tab:disabled { opacity: 0.5; cursor: not-allowed; } .cahier-entry-pane { display: none; flex: 1; min-height: 0; } .cahier-entry-pane.is-active { display: flex; flex-direction: column; } /* Les deux sections (cahier / notes perso) se partagent l'espace vertical à parts égales, l'une au-dessus de l'autre — cf. demande : présentes en même temps, plus d'onglet séparé entre les deux. */ .cahier-detail-section { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--space-3) var(--space-4); } .cahier-detail-section + .cahier-detail-section { border-top: 1px solid var(--border-soft); } .cahier-detail-section-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-2); } .cahier-detail-section-label svg { width: 14px; height: 14px; flex-shrink: 0; } .cahier-detail-section-private .cahier-detail-section-label { color: var(--ocre); } .cahier-detail-section-hint { font-weight: 400; color: var(--text-faint); } .cahier-detail-section textarea { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; font-family: var(--font-body); font-size: 0.86rem; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); color: var(--text); } .cahier-detail-section-private textarea { border-color: var(--ocre); } .cahier-detail-section textarea:focus { outline: none; border-color: var(--accent); }