/* ===== RESET BASIQUE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Centrer la calculatrice dans la page */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #222;
    font-family: Arial, sans-serif;
}

/* ===== GRILLE PRINCIPALE ===== */
#calc-grid {
    display: grid;
    /* 4 colonnes de 100px chacune */
    grid-template-columns: repeat(4, 100px);
    /* Ligne 1 : affichage (min 120px, s'agrandit si besoin)
       Lignes 2-6 : boutons de 100px */
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    gap: 1px;
    background-color: #333;
    border: 2px solid #333;
}

/* ===== ZONE D'AFFICHAGE ===== */
[data-output] {
    /* Prend les 4 colonnes → toute la largeur */
    grid-column: span 4;
    background-color: #111;
    color: white;
    font-size: 2rem;
    /* Aligner le texte en bas à droite comme une vraie calculatrice */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 15px;
    /* Si le nombre est trop long, il ne déborde pas */
    word-break: break-all;
}

/* ===== STYLE DES BOUTONS ===== */
button {
    font-size: 1.4rem;
    cursor: pointer;
    border: 1px solid #444;
    background-color: #555;
    color: white;
}

/* Effet au survol → feedback visuel */
button:hover {
    background-color: #666;
}

/* Effet au clic → le bouton "s'enfonce" */
button:active {
    background-color: #777;
}

/* ===== BOUTONS SPÉCIAUX ===== */

/* Boutons opérateurs (+, -, /, x) → couleur distincte */
[data-operation] {
    background-color: #f08c00;
    color: white;
}

[data-operation]:hover {
    background-color: #e67e00;
}

/* Bouton AC → légèrement différent pour le repérer vite */
[data-all-clear] {
    background-color: #c0392b;
    color: white;
}

[data-all-clear]:hover {
    background-color: #a93226;
}

/* Bouton = → couleur d'accent */
[data-equals] {
    background-color: #27ae60;
    color: white;
}

[data-equals]:hover {
    background-color: #229954;
}

/* ===== BOUTONS QUI PRENNENT 2 COLONNES (AC et =) ===== */
.span-two {
    grid-column: span 2;
}