/* =====================================================================
   CHEMIN : /carres_magiques/carres_magiques.css
   NOM    : carres_magiques.css
   RÔLE   : Styles du moteur SC@LPA — Carrés magiques 3×3.
   ===================================================================== */

:root {
            --ms-bg: #f6f7fb;
            --ms-card: #ffffff;
            --ms-text: #1f2937;
            --ms-muted: #6b7280;
            --ms-primary: #2563eb;
            --ms-primary-soft: #dbeafe;
            --ms-success: #15803d;
            --ms-success-soft: #dcfce7;
            --ms-danger: #b91c1c;
            --ms-danger-soft: #fee2e2;
            --ms-warning-soft: #fef3c7;
            --ms-border: #d1d5db;
            --ms-shadow: 0 18px 45px rgba(15, 23, 42, .10);
            --ms-radius: 22px;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: radial-gradient(circle at top left, #e0f2fe, transparent 35%), var(--ms-bg);
            color: var(--ms-text);
        }

        .ms-page {
            width: min(1180px, calc(100% - 28px));
            margin: 24px auto 48px;
        }

        .ms-hero {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 18px;
            align-items: stretch;
            margin-bottom: 22px;
            padding: 26px;
            border-radius: var(--ms-radius);
            background: linear-gradient(135deg, #eff6ff, #ffffff 58%, #f0fdf4);
            box-shadow: var(--ms-shadow);
            border: 1px solid rgba(37, 99, 235, .12);
        }

        .ms-eyebrow {
            margin: 0 0 8px;
            text-transform: uppercase;
            letter-spacing: .08em;
            font-size: .78rem;
            font-weight: 800;
            color: var(--ms-primary);
        }

        .ms-hero h1 {
            margin: 0 0 8px;
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1;
        }

        .ms-lead {
            margin: 0;
            max-width: 760px;
            font-size: 1.08rem;
            color: #374151;
        }

        .ms-timer-card {
            min-width: 210px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
            padding: 18px;
            border-radius: 18px;
            background: #111827;
            color: white;
            text-align: center;
        }

        .ms-timer-card span { color: #c7d2fe; font-weight: 700; }
        .ms-timer-card strong { font-size: 2rem; font-variant-numeric: tabular-nums; }

        .ms-layout {
            display: grid;
            grid-template-columns: minmax(280px, 380px) 1fr;
            gap: 22px;
            align-items: start;
        }

        .ms-card {
            background: var(--ms-card);
            border: 1px solid rgba(209, 213, 219, .75);
            border-radius: var(--ms-radius);
            box-shadow: var(--ms-shadow);
        }

        .ms-settings { padding: 22px; }

        .ms-settings h2,
        .ms-game h2 {
            margin: 0 0 14px;
            font-size: 1.25rem;
        }

        .ms-field { margin-bottom: 18px; }
        .ms-field:last-child { margin-bottom: 0; }

        .ms-field label {
            display: block;
            margin-bottom: 8px;
            font-weight: 800;
        }

        .ms-field small {
            display: block;
            margin-top: 6px;
            color: var(--ms-muted);
        }

        .ms-select,
        .ms-input {
            width: 100%;
            min-height: 44px;
            padding: 9px 12px;
            border: 1px solid var(--ms-border);
            border-radius: 14px;
            background: white;
            font: inherit;
        }

        .ms-range-row {
            display: grid;
            grid-template-columns: 1fr 52px;
            gap: 12px;
            align-items: center;
        }

        .ms-output {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 40px;
            border-radius: 999px;
            background: var(--ms-primary-soft);
            color: #1d4ed8;
            font-weight: 900;
        }

        .ms-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 22px;
        }

        .ms-btn {
            border: 0;
            border-radius: 999px;
            padding: 12px 18px;
            font: inherit;
            font-weight: 850;
            cursor: pointer;
            transition: transform .12s ease, filter .12s ease, opacity .12s ease;
        }

        .ms-btn:hover { transform: translateY(-1px); filter: brightness(.98); }
        .ms-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
        .ms-btn-primary { background: var(--ms-primary); color: white; }
        .ms-btn-success { background: var(--ms-success); color: white; }
        .ms-btn-soft { background: #e5e7eb; color: #111827; }

        .ms-game { padding: 22px; }

        .ms-status {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 18px;
        }

        .ms-stat {
            padding: 12px;
            border-radius: 16px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
        }

        .ms-stat span {
            display: block;
            color: var(--ms-muted);
            font-size: .82rem;
            font-weight: 750;
        }

        .ms-stat strong {
            display: block;
            margin-top: 4px;
            font-size: 1.2rem;
            font-variant-numeric: tabular-nums;
        }

        .ms-stat-score strong {
            color: var(--ms-primary);
        }

        .ms-board-zone {
            display: grid;
            grid-template-columns: auto minmax(230px, 1fr);
            gap: 22px;
            align-items: start;
        }

        .ms-board-wrap {
            padding: 14px;
            border-radius: 20px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
        }

        .ms-board {
            display: grid;
            gap: 8px;
        }

        .ms-cell {
            width: clamp(62px, 11vw, 88px);
            height: clamp(62px, 11vw, 88px);
            border-radius: 16px;
            border: 2px solid var(--ms-border);
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: clamp(1.25rem, 3vw, 2rem);
            font-weight: 900;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

        .ms-cell input {
            width: 100%;
            height: 100%;
            border: 0;
            outline: 0;
            border-radius: 14px;
            text-align: center;
            font: inherit;
            font-weight: 900;
            color: #111827;
            background: #fff7ed;
        }

        .ms-cell input:focus {
            box-shadow: inset 0 0 0 3px #fb923c;
        }

        .ms-cell.is-fixed {
            background: #eef2ff;
            border-color: #c7d2fe;
            color: #3730a3;
        }

        .ms-cell.is-good input {
            background: var(--ms-success-soft);
            box-shadow: inset 0 0 0 2px #22c55e;
        }

        .ms-cell.is-bad input {
            background: var(--ms-danger-soft);
            box-shadow: inset 0 0 0 2px #ef4444;
        }

        .ms-help {
            display: grid;
            gap: 12px;
        }

        .ms-message {
            padding: 14px 16px;
            border-radius: 16px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
        }

        .ms-message.success { background: var(--ms-success-soft); border-color: #86efac; color: #14532d; }
        .ms-message.danger { background: var(--ms-danger-soft); border-color: #fecaca; color: #7f1d1d; }
        .ms-message.warning { background: var(--ms-warning-soft); border-color: #fde68a; color: #78350f; }

        .ms-sums {
            display: grid;
            gap: 8px;
            color: #374151;
        }

        .ms-sums code {
            padding: 3px 8px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #111827;
            font-weight: 800;
        }

        .ms-note {
            padding: 12px 14px;
            border-radius: 16px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            color: #4b5563;
            font-size: .95rem;
        }

        .ms-hidden { display: none !important; }

        @media (max-width: 900px) {
            .ms-hero,
            .ms-layout,
            .ms-board-zone { grid-template-columns: 1fr; }
            .ms-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .ms-timer-card { min-width: auto; }
        }


/* =====================================================================
   Modes d’intégration
   ===================================================================== */
body.is-embed {
    background: #f8fafc;
}

body.is-embed .ms-page {
    width: 100%;
    margin: 0 auto;
    padding: 12px;
}

body.is-embed .ms-hero {
    box-shadow: none;
}

body.mode-evaluation .ms-settings {
    border-color: rgba(37, 99, 235, .28);
}

/* Champs texte numériques : évite le décalage horizontal des input[type=number]. */
.ms-cell input {
    text-align: center;
    font-variant-numeric: tabular-nums;
}


/* Évite les ascenseurs internes fantômes quand le moteur est embarqué. */
html.is-embed,
html.is-embed body {
    overflow: hidden;
}