/* =========================================================
   CLASSMIRROR V45.1 — RESPONSIVE PC / TABLETTE / TÉLÉPHONE
   Correctif additif : ne remplace aucun template métier.
   ========================================================= */

:root {
    --cm-mobile-gap: 14px;
    --cm-touch-target: 44px;
    --cm-visual-viewport-height: 100dvh;
}

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

/* Les enfants de flex/grid peuvent sinon forcer un débordement horizontal. */
main,
main > *,
main section,
main article,
main form,
main fieldset,
main [class*="grid"],
main [class*="layout"],
main [class*="panel"],
main [class*="card"] {
    min-width: 0;
    box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
video,
canvas,
svg {
    height: auto;
}

iframe {
    width: 100%;
}

input,
select,
textarea,
button,
math-field {
    box-sizing: border-box;
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

textarea {
    width: 100%;
}

pre,
code,
kbd,
samp,
.cm-breakable,
[data-raw] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* MathLive / formules */
math-field,
[data-math-field],
.math-field,
.mathlive-field {
    min-width: 0 !important;
    max-width: 100% !important;
}

math-field[read-only],
[data-render-content] math-field {
    display: block;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

[data-render-content],
.history-rendered-content,
.result-rendered-content,
.question-content,
.student-question,
.student-answer {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Les tableaux restent lisibles : scroll horizontal local au lieu de casser la page. */
.cm-responsive-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
}

.cm-responsive-table > table {
    margin-inline: 0;
}

table {
    max-width: 100%;
}

/* Éditeurs, dialogues et modales : compatibles clavier virtuel mobile. */
dialog,
[role="dialog"],
.math-editor-overlay,
.math-editor-modal,
.math-editor-panel,
.modal,
.modal-content,
.dialog,
.dialog-content {
    max-width: 100%;
}

dialog[open],
[role="dialog"],
.math-editor-overlay,
.modal {
    max-height: var(--cm-visual-viewport-height);
}

.math-editor-modal,
.math-editor-panel,
.modal-content,
.dialog-content,
[role="dialog"] > :first-child {
    max-height: calc(var(--cm-visual-viewport-height) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Zones de commandes : clic tactile confortable sans agrandir toute la navigation. */
main button,
main .button,
main .cm-btn,
main input[type="button"],
main input[type="submit"] {
    min-height: var(--cm-touch-target);
}

main input,
main select,
main textarea {
    font-size: 16px;
}

/* Empêche Safari iOS de zoomer automatiquement les formulaires < 16px. */
@supports (-webkit-touch-callout: none) {
    main input,
    main select,
    main textarea {
        font-size: max(16px, 1em);
    }
}

/* TABLETTE */
@media (max-width: 900px) {
    main {
        width: 100%;
        max-width: 100%;
    }

    .classroom-grid,
    .classroom-layout,
    .students-grid,
    .student-grid,
    .result-grid,
    .history-grid,
    .dashboard-grid,
    .account-grid,
    .pricing-grid,
    .new-class-grid,
    .teacher-grid,
    .student-dashboard-grid,
    .owner-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .classroom-header,
    .result-header,
    .history-header,
    .dashboard-header,
    .account-header,
    .pricing-header,
    .new-class-header,
    .teacher-header,
    .student-header {
        max-width: 100%;
    }

    .classroom-actions,
    .result-actions,
    .history-actions,
    .dashboard-actions,
    .account-actions,
    .form-actions {
        flex-wrap: wrap;
    }

    .math-editor-modal,
    .math-editor-panel,
    .modal-content,
    .dialog-content {
        width: min(760px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* TÉLÉPHONE */
@media (max-width: 620px) {
    :root {
        --cm-mobile-gap: 12px;
    }

    main {
        padding-inline: max(
            0px,
            env(safe-area-inset-left)
        );
    }

    main section,
    main article {
        max-width: 100%;
    }

    h1 {
        overflow-wrap: anywhere;
    }

    .classroom-actions,
    .result-actions,
    .history-actions,
    .dashboard-actions,
    .account-actions,
    .form-actions,
    .pricing-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .classroom-actions > *,
    .result-actions > *,
    .history-actions > *,
    .dashboard-actions > *,
    .account-actions > *,
    .form-actions > *,
    .pricing-actions > * {
        width: 100%;
        max-width: 100%;
    }

    main form button[type="submit"],
    main form input[type="submit"],
    main .button-primary,
    main .cm-btn.primary {
        min-height: 46px;
    }

    .math-editor-overlay {
        align-items: flex-end !important;
        padding: 8px !important;
    }

    .math-editor-modal,
    .math-editor-panel,
    .modal-content,
    .dialog-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(var(--cm-visual-viewport-height) - 16px) !important;
        border-radius: 16px !important;
    }

    math-field,
    [data-math-field] {
        font-size: 1rem;
    }

    .cm-responsive-table {
        margin-inline: 0;
    }
}

/* Très petit téléphone */
@media (max-width: 390px) {
    main button,
    main .button,
    main .cm-btn,
    main input[type="button"],
    main input[type="submit"] {
        min-height: 44px;
    }

    .math-editor-modal,
    .math-editor-panel,
    .modal-content,
    .dialog-content {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }
}

/* Orientation paysage sur téléphone/tablette basse. */
@media (max-height: 520px) and (orientation: landscape) {
    .math-editor-overlay,
    .modal {
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .math-editor-modal,
    .math-editor-panel,
    .modal-content,
    .dialog-content {
        max-height: calc(var(--cm-visual-viewport-height) - 12px) !important;
    }
}

/* Debug facultatif : ?responsive_debug=1 */
.cm-responsive-overflow-debug {
    outline: 3px solid #d93025 !important;
    outline-offset: -3px !important;
}