:root {
    --bg:#0f1724;--card:#0b1220;--accent:#06b6d4;--muted:#1e293b;
    --success:#10b981;--danger:#ef4444;
}

.calcul-mental { 
    display:flex; 
    justify-content:center; 
    padding:20px;
}

.calcul-mental .wrap {
    width:100%; max-width:720px;
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.04));
    border-radius:14px; padding:28px;
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
    color:#1e293b;
    font-family:Inter,ui-sans-serif;
}

.calcul-mental .card {
    background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.00));
    padding:22px; border-radius:12px;
    display:grid; grid-template-columns:1fr 300px;
    gap:20px; align-items:center;
    width:100%;
}

.calcul-mental .problem { font-size:48px; font-weight:700; display:flex; gap:12px; align-items:center; }
.calcul-mental .sign { font-size:28px; color:var(--muted); }

/* largeur identique des deux boutons de démarrage */
.calcul-mental .start-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.calcul-mental .start-buttons button {
    flex: 1 1 280px;   /* largeur identique */
    max-width: 320px;  /* empêche qu'ils deviennent trop larges */
    font-size: 18px;
    padding: 12px 20px;
}

/* Texte sous l’opération — éviter les débordements */
.calcul-mental .help-text {
    margin-top:12px;
    color:var(--muted);
    font-size:16px;
    line-height:1.35;
    max-width:100%;
    word-wrap:break-word;
}

/* --- Correctif iPhone — empêcher le zoom forcé --- */
.calcul-mental input[type="number"],
.calcul-mental label {
    font-size:16px !important;
}

.calcul-mental input[type="number"] {
    padding:12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    background:transparent;
    color:inherit;
    width:100%;
    -moz-appearance:textfield;
}

/* Masquer les flèches */
.calcul-mental input[type=number]::-webkit-inner-spin-button,
.calcul-mental input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0;
}

/* Espace entre champ et boutons */
.calcul-mental .controls {
    display:flex;
    flex-direction:column;
    gap:12px;
}
.calcul-mental .controls .buttons {
    margin-top:16px;
}

/* Responsive mobile */
@media (max-width:720px){
    .calcul-mental .card {
        grid-template-columns:1fr;
    }
    .calcul-mental input[type="number"] {
        width:100%;
    }
    .calcul-mental .controls {
        width:100%;
    }
    .calcul-mental .help-text {
        font-size: 13px !important;
    }
    .calcul-mental label[for="answer"] {
        font-size: 13px !important;
    }
}