/* ==========================================================
   Tech-Piano - Correction Mobile (Version 2026)
   ========================================================== */

/* --- 1. SUPPRESSION TABLE DES MATIÈRES (DROITE) --- */
.md-sidebar--secondary {
    display: none !important;
}

/* Ajustement largeur contenu desktop */
@media screen and (min-width: 76.25em) {
    .md-content {
        max-width: 900px;
        margin: 0 auto;
    }
    .md-content__inner {
        margin: 0 auto;
    }
}

/* --- 2. STYLE GÉNÉRAL --- */
.md-header,
.md-tabs {
    box-shadow: none;
}

.md-typeset h1 {
    font-weight: 500;
}

.md-typeset img {
    display: block;
    margin: 2rem auto;
    max-width: 100%;
}

/* --- 3. SMARTPHONE : LA SOLUTION (Variables + Rem corrigés) --- */
@media only screen and (max-width: 76.25em) {
    
    /* A. On force la variable interne du thème à une petite valeur */
    /* Avant c'était 0.8rem, maintenant avec la base à 20px, il faut 0.4rem ou 0.45rem */
    :root {
        --md-typeset-font-size: 0.42rem !important; /* Équivalent à ~13-14px */
    }

    /* B. On applique la taille directement sur le conteneur pour être sûr */
    .md-typeset {
        font-size: 0.8rem !important; /* Valeur absolue relative au nouveau standard */
        line-height: 1.5;
    }

    /* C. Marges latérales réduites (presque zéro) */
    .md-content__inner {
        padding-left: 0.4rem !important;  /* Très peu de marge */
        padding-right: 0.4rem !important;
    }

    /* D. Grille principale collée aux bords */
    .md-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* E. Force les paragraphes et listes à respecter la règle */
    .md-typeset p, 
    .md-typeset li, 
    .md-typeset h2, 
    .md-typeset h3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }
}   

/* ===========================
   Couleurs personnalisées
   =========================== */

.rouge {
    color: #d32f2f;
}

.bleu {
    color: #1976d2;
}

.vert {
    color: #388e3c;
}

.orange {
    color: #f57c00;
}