/* === cssResponsive — Mobile First ===
 * Ajustements spécifiques non couverts dans les composants.
 * Approche Mobile First : min-width uniquement.
 */

/* ── Tablette ≥ 560px ── */
@media(min-width:560px){
    .espace-grille { grid-template-columns: repeat(2, 1fr) }
}

/* ── Tablette large ≥ 768px ── */
@media(min-width:768px){
    .espace-grille    { grid-template-columns: repeat(3, 1fr) }
    .admin-grille     { grid-template-columns: 2fr 1fr }
}

/* ── FIX N) Mon espace — dashboard-grille en 1 colonne mobile, 2 desktop ── */
.dashboard-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media(min-width:900px){
    .dashboard-grille { grid-template-columns: 1fr 1fr }
}

/* ── Desktop ≥ 1024px ── */
@media(min-width:1024px){
    .lecon-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start }
}

/* ── FIX K) Quiz mobile — éviter le flash de couleur ── */
/* On empêche toute transition sur les boutons quiz pendant l'affichage */
.quiz-choix-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* État initial propre — pas de couleur résiduelle */
.quiz-choix-btn:not(.correct):not(.incorrect) {
    background: var(--bg) !important;
    border-color: var(--bordure) !important;
    color: var(--texte) !important;
}

/* ── Accessibilité & préférences système ── */
@media(prefers-reduced-motion: reduce){
    *,*::before,*::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Impression ── */
@media print {
    .site-header,.site-footer,.btn,.nav-toggle { display: none }
    body { background: white; color: black; font-size: 12pt }
    .card { border: 1px solid #ccc; box-shadow: none }
}