/* figures.css — taille des figures générées (figures.js, quadrillages, graphiques)
 * Emplacement : /styles/outils/figures.css
 * À charger sur les pages automatismes, quiz, exercices, évaluations, cours.
 *
 * ▶ POUR CHANGER LA TAILLE : modifier les deux variables ci-dessous.
 *   --fig-largeur        : figures géométriques (triangles, Thalès, pavé…)
 *   --fig-largeur-grande : quadrillages, graphiques, diagrammes
 * (Sans cette feuille, la largeur est fixée par Figures.config.largeur dans figures.js : 260 px.)
 *
 * Les règles sont en !important : les feuilles du moteur d'automatismes imposent une largeur
 * de 100 % aux images des questions, ce qui annulait le réglage (constaté le 03/10/2026).
 */
:root {
    --fig-largeur: 260px;
    --fig-largeur-grande: 340px;
}

/* Figure seule (rédactions, exercices, cours) */
svg.msm-fig {
    width: var(--fig-largeur) !important;
    max-width: 100% !important;
    height: auto !important;
}
svg.msm-fig.msm-fig-large {
    width: var(--fig-largeur-grande) !important;
}

/* Conteneur des figures dans les automatismes / quiz : il borne aussi la largeur,
   même si une autre feuille force le SVG à 100 % de son parent. */
.auto-fig {
    display: block;
    width: var(--fig-largeur) !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    text-align: center;
}
.auto-fig:has(svg.msm-fig-large) {
    width: var(--fig-largeur-grande) !important;
}
.auto-fig svg {
    width: 100% !important;
    height: auto !important;
}
.auto-fig-note {
    font-size: 12px;
    color: #64748b;
}

/* Petits écrans : figures un peu plus petites */
@media (max-width: 480px) {
    :root {
        --fig-largeur: 210px;
        --fig-largeur-grande: 300px;
    }
}

/* Fenêtre « Animation » de repli de la page de cours (si avatar.js est absent) */
.cours-anim-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.cours-anim-overlay[hidden] { display: none; }
.cours-anim-boite { position: relative; width: min(760px, 100%); max-height: 92vh; overflow: auto; padding: 20px 16px 16px; border-radius: 12px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.cours-anim-fermer { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #475569; }
.cours-anim-iframe { display: block; width: 100%; height: 70vh; border: 0; }