/* Habillage de family-coach par-dessus Pico.css */

main.container { max-width: 1100px; padding-top: 0.5rem; }
.muted { color: var(--pico-muted-color); }
.done { color: var(--pico-muted-color); }
pre.body { white-space: pre-wrap; font-family: inherit; background: none; padding: 0; margin: 0; overflow-wrap: anywhere; }
td, li, p { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
article header h2, article header h3 { margin-bottom: 0; }

/* En-tête et onglets */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--pico-background-color); border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 0.75rem; }
.topbar nav { padding: 0.25rem 0; flex-wrap: wrap; }
.topbar nav ul { flex-wrap: wrap; margin: 0; }
.topbar nav ul li { padding: 0.25rem 0.4rem; }
.topbar form { margin: 0; }
.topbar button { padding: 0.25rem 0.7rem; font-size: 0.85rem; margin: 0; width: auto; }
.topbar .brand { font-weight: 700; text-decoration: none; color: inherit; }
.topbar a[aria-current="page"] { font-weight: 700; }
.tabs { display: flex; gap: 0.25rem; overflow-x: auto; white-space: nowrap; margin: 0 0 1rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.tabs a { padding: 0.4rem 0.7rem; border-radius: var(--pico-border-radius); text-decoration: none; color: var(--pico-muted-color); }
.tabs a:hover { background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }
.tabs a[aria-current="page"] { color: var(--pico-primary); box-shadow: inset 0 -3px 0 var(--pico-primary); font-weight: 600; }

/* Matières et badges */
.subject { display: inline-flex; align-items: center; gap: 0.4rem; }
.subject::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--c); flex: none; }
.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge.grade { color: #fff; background: #6c757d; }
.badge.grade.good { background: #2e9e5b; }
.badge.grade.ok { background: #3b7dd8; }
.badge.grade.low { background: #e08a2e; }
.badge.grade.na { background: #9aa0a6; }
.badge.test { background: #fde7d3; color: #9a4a00; }
.badge.cancelled { background: #f1f1f1; color: #666; }
.cancelled { text-decoration: line-through; opacity: 0.6; }
.test { font-weight: 600; }

/* Accueil */
.child-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tile { display: block; text-decoration: none; color: inherit; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 1rem; }
.tile:hover { border-color: var(--pico-primary); }
.tile.warn { border-color: #e08a2e; background: #fff6ec; }
.tile.good { border-color: #2e9e5b; background: #eefaf2; }
.tabs .count { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: #e08a2e; color: #fff; font-size: 0.75em; text-align: center; line-height: 1.6; }
.tile .value { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.tile .label { color: var(--pico-muted-color); font-size: 0.85rem; }
.lessons td:first-child { white-space: nowrap; width: 7rem; }
.lessons td, .compact td { padding: 0.35rem 0.5rem; }

/* Planning en grille : une ligne CSS = 5 minutes */
.grid-scroll { overflow-x: auto; margin-bottom: 1rem; }
.grid-week { display: grid; grid-auto-rows: 5px; gap: 0 4px; min-width: 40rem; }
.grid-week .day-head { grid-row: 1; text-align: center; font-weight: 600; align-self: end; padding-bottom: 0.3rem; }
.grid-week .day-head.today { color: var(--pico-primary); }
.grid-week .hour { grid-column: 1; font-size: 0.75rem; color: var(--pico-muted-color); text-align: right; padding-right: 0.3rem; margin-top: -0.5em; }
.grid-week .rule { grid-column: 2 / -1; border-top: 1px solid var(--pico-muted-border-color); }
.grid-week .col { background: transparent; }
.grid-week .col.today { background: color-mix(in srgb, var(--pico-primary) 6%, transparent); }
.grid-week .now { border-top: 2px solid #d9534f; z-index: 30; pointer-events: none; }
.grid-week .now::before { content: ""; position: absolute; margin-top: -5px; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #d9534f; }
.grid-week .now { position: relative; }
.grid-week .lesson { background: color-mix(in srgb, var(--c) 18%, white); border-left: 4px solid var(--c); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.8rem; line-height: 1.25; overflow: hidden; z-index: 1; }
.grid-week .lesson strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-week .lesson.cancelled { text-decoration: none; opacity: 0.55; background: repeating-linear-gradient(45deg, #eee 0 6px, #f8f8f8 6px 12px); }
.grid-week .lesson.cancelled strong { text-decoration: line-through; }
.grid-week .lesson { position: relative; cursor: default; }
.grid-week .lesson:hover, .grid-week .lesson:focus-within { overflow: visible; z-index: 20; outline: none; }
.mark { display: inline-block; font-weight: 700; margin-left: 0.2rem; }
.mark.todo { color: #d9822b; }
.mark.done { color: #2e9e5b; }
.mark.test { color: #c0392b; }
.mark.warn { font-size: 0.9em; }
.done .body { text-decoration: line-through; text-decoration-color: #bbb; }
.pop { display: none; position: absolute; top: 100%; left: 0; width: 20rem; max-width: 80vw; background: #fff; color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); border-left: 4px solid var(--c); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); padding: 0.6rem 0.8rem; font-size: 0.85rem; text-decoration: none; }
.pop .text { white-space: pre-line; }
.pop p { margin: 0.4rem 0 0; }
.pop ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.lesson:hover .pop, .lesson:focus-within .pop { display: block; }
.pop.up { top: auto; bottom: 100%; }
.pop.left { left: auto; right: 0; }

/* Petits écrans */
@media (max-width: 768px) {
  h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }
  .topbar nav ul li { padding: 0.15rem 0.3rem; }
  .topbar .brand { font-size: 0.95rem; }
  .topbar .brand .text { display: none; }
  .topbar button { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
  main.container table { display: block; max-width: 100%; overflow-x: auto; }
  main.container table tbody { display: table; width: 100%; }
  main.container table thead { display: table; width: 100%; }
  .tile { padding: 0.5rem 0.75rem; }
  .tile .value { font-size: 1.5rem; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .grid-week { min-width: 36rem; }
  .grid-week .lesson { font-size: 0.72rem; padding: 0.1rem 0.3rem; }
  .badge { font-size: 0.75em; padding: 0.05rem 0.45rem; }
  article { padding: 0.9rem; }
}