/* ═══════════════════════════════════════════════════════════════ Quiz Ayiti — GRILLES DE MATIÈRES (uniformisation) Chargé en DERNIER dans le : uniformise les cartes de matières des pages QCM / Mode Examen / Simulation IA pour TOUTES les classes (9e, NS4, Concours). Objectif : 3 cartes par ligne sur PC, format compact et cohérent. ═══════════════════════════════════════════════════════════════ */ .subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 par ligne sur PC */ gap: 1rem; } .subject-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.15rem .85rem; /* plus compact */ min-height: 118px; background: #ffffff; border: 1.5px solid #e8ebf3; border-radius: 16px; cursor: pointer; text-align: center; font-family: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } .subject-btn:hover { border-color: #1b53f0; background: #f6f8ff; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 26, 51, .10); } .subject-btn.active { border-color: #1b53f0; background: #eef2fe; box-shadow: 0 0 0 4px rgba(27, 83, 240, .12); } .subject-btn .subject-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #eef2fe; color: #1b53f0; font-size: 1.5rem; transition: background .18s ease, color .18s ease; } .subject-btn .subject-icon .ico { width: 24px; height: 24px; } .subject-btn:hover .subject-icon, .subject-btn.active .subject-icon { background: #1b53f0; color: #fff; } .subject-btn .subject-name { font-weight: 700; font-size: .95rem; color: #0e1a33; line-height: 1.25; } .subject-btn .subject-hint { font-size: .72rem; color: #5a6478; line-height: 1.3; } /* ── Tablette ──────────────────────────────────────────────── */ @media (max-width: 900px) { .subject-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; } .subject-btn { min-height: 108px; padding: 1rem .7rem; } } /* ── Téléphone : 2 par ligne ───────────────────────────────── */ @media (max-width: 600px) { .subject-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .subject-btn { min-height: 100px; padding: .95rem .6rem; } .subject-btn .subject-icon { width: 42px; height: 42px; } .subject-btn .subject-name { font-size: .85rem; } } @media (max-width: 360px) { .subject-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; } } @media (prefers-reduced-motion: reduce) { .subject-btn { transition: none; } }