/* Enseignement référencé (voir componnents/ref_teaching.php) */

/* Cadre pointillé dessiné hors de la carte (outline + ombre) : l'alignement avec les autres cartes ne bouge pas */
.ref-frame {
  outline: 2px dashed #fe5f00; /* primary1 */
  outline-offset: 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.35);
}

.ref-title { column-gap: 4px; padding: 0 8px 12px; }

/* Flèche vers le bas (mobile : le N°04 est dessous), horizontale dès 2 colonnes (le N°04 est à droite) */
.ref-arrow { flex-shrink: 0; animation: ref-arrow-down 1s ease-in-out infinite; }
.ref-arrow-right { display: none; }
@keyframes ref-arrow-down { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes ref-arrow-right { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(5px); } }
@media (min-width: 640px) {
  .ref-arrow-down { display: none; }
  .ref-arrow-right { display: block; margin-right: -14px; animation-name: ref-arrow-right; }
}

/* Arrivée via #enseignement-N : le titre de la carte ciblée clignote jusqu'au lancement de sa vidéo (classe ref-seen, voir js/ref_teaching.js) */
[id^="enseignement-"]:target h3 { border-radius: 8px; animation: ref-target-blink 0.9s ease-in-out infinite; }
[id^="enseignement-"].ref-seen:target h3 { animation: none; background: none; box-shadow: none; }
@keyframes ref-target-blink {
  0%, 100% { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.85); }
  50% { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .ref-arrow { animation: none; }
  [id^="enseignement-"]:not(.ref-seen):target h3 { animation: none; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.75); }
}