/* ================================
   Teaching page (scoped styles)
   ================================ */

/* Variables locales à la page teaching (héritent aux enfants) */
.teaching-page{
  --radius: 16px;
  --shadow: 0 6px 18px rgba(0,0,0,.12);
  --border: 1px solid color-mix(in oklab, #0a0a0a 10%, transparent);
  --text: #0f172a;
  --muted: #475569;
  --bg: #ffffff;         /* fond des cards */
  --accent: #2563eb;     /* valeur par défaut si non surchargée par carte */
}

/* Titre de page */
.teaching-page .page-title{
  text-align:center; margin: 24px 0 8px;
}
.teaching-page .page-title h1{ margin:0; }

/* Sections / blocs de cours */
.teaching-page .course-block{
  margin: 24px auto 40px;
  max-width: 1100px;
  padding: 0 16px;
}

/* Remplace les anciens h2 inline-border */
.teaching-page .course-heading{
  border: 1px solid #888;          /* contraste OK sur body lightgrey */
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 12px;
  background: #fff;                /* lisible sur fond gris */
  color: #333;
}

/* Grille des cards (responsive) */
.teaching-page .grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
}

/* ================================
   Card
   ================================ */
.teaching-page .course-card{
  /* possibilité de surcharger --accent au niveau de l'élément */
  background:var(--bg);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.teaching-page .course-card:where(:hover, :focus-within){
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.teaching-page .course-thumb{
  position:relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(1200px 500px at -20% -30%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 28%, #000) 0%, #000 100%);
  display:block;
}
.teaching-page .course-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.92; mix-blend:multiply;
}
.teaching-page .badge{
  position:absolute; left:12px; bottom:12px;
  padding:6px 10px; font-size:.78rem; font-weight:600; letter-spacing:.2px;
  background: color-mix(in oklab, var(--accent) 92%, #fff 8%);
  color:white; border-radius:999px; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.teaching-page .course-body{
  padding:16px 16px 12px;
  display:flex; flex-direction:column; gap:10px;
  color: var(--text);
}
.teaching-page .title{
  margin:0; font-size:1.05rem; line-height:1.25; font-weight:750;
}
.teaching-page .subtitle{
  margin:0; font-size:.92rem; color:var(--muted);
}
.teaching-page .summary{
  margin:.25rem 0 0;
  font-size:.95rem;
  color: color-mix(in oklab, var(--text) 82%, #000 18%);
}

.teaching-page .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.teaching-page .chip{
  font-size:.78rem; padding:4px 10px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent) 40%, #94a3b8);
  color: color-mix(in oklab, var(--accent) 84%, #0b0f14);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.teaching-page .actions{
  display:flex; gap:10px; padding:12px 16px 16px; margin-top:auto;
}
.teaching-page .btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:10px 14px; border-radius:12px; font-weight:650;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.teaching-page .btn.primary{
  background: var(--accent); color:white;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 40%, transparent);
}
.teaching-page .btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid color-mix(in oklab, var(--accent) 30%, #94a3b8);
}
.teaching-page .btn:where(:hover,:focus-visible){ transform: translateY(-1px); }
.teaching-page .btn:active{ transform: translateY(0); opacity:.9; }

/* Focus visible (accessibilité) */
.teaching-page .course-card :where(a,button):focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 70%, #fff);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .teaching-page .course-card,
  .teaching-page .btn{ transition:none; }
}