/* ================================
   CALCULATRICE – STABILISÉE
   ================================ */

.calculator-card {
    max-width: 420px;
    margin: 10px auto;
    padding: 16px 18px;
    border-radius: 10px;
    background: radial-gradient(circle at top left, #27173b 0%, #0b0b11 45%, #030306 100%);
    border: 1px solid rgba(190, 120, 255, 0.45);
}

/* Titre */
.calculator-card h2 {
    margin: 0;
    text-align: center;
    color: #f2d3ff;
}

/* Écran */
.calc-display {
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;
    font-size: 1.6em;
    text-align: right;
    border-radius: 8px;
    border: 1px solid rgba(120,180,255,0.5);
    background: #02040c;
    color: #c8e9ff;
    font-family: Consolas, monospace;
    box-sizing: border-box;
}

/* ================================
   GRILLE 4 COLONNES
   ================================ */

.calc-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

/* ================================
   Boutons généraux
   ================================ */

.calc-buttons .btn {
    padding: 12px 0 !important;
    border-radius: 8px;
    border: 1px solid rgba(90,90,120,0.9);
    background: linear-gradient(180deg, #292949 0%, #161623 65%, #0d0d15 100%);
    color: #ffffff;
    font-size: 1.2em;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 0 6px rgba(60, 60, 100, 0.9),
        inset 0 0 4px rgba(20,20,40,0.8);
}

.calc-buttons .btn:active {
    transform: scale(0.94);
}

/* ================================
   SEULEMENT certains boutons
   ================================ */

.calc-buttons .btn.operator {
    background: radial-gradient(circle at top, #5a3811 0%, #2b1906 60%, #110801 100%);
    border-color: #ffbb55;
}

.calc-buttons .btn.clear {
    background: radial-gradient(circle at top, #661414 0%, #360909 55%, #180000 100%);
    border-color: #ff6666;
}

.calc-buttons .btn.equal {
    grid-column: span 4 !important;
    background: radial-gradient(circle at top, #0a6b37 0%, #024025 60%, #00180c 100%);
    border-color: #00e676;
    font-weight: bold;
}

/* Correction du bouton "." */
.calc-buttons .btn.dot {
    font-weight: bold;
    padding-top: 14px !important;
}