/**
 * Styles CSS communs pour le contenu pédagogique
 * Utilisé sur toutes les pages du site SNT & Techno
 */

/* ========================================
   POLICES ADAPTÉES POUR LA LECTURE
   ======================================== */

/* Police pour l'écran : sans-serif moderne et lisible */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text, #111);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Police pour les titres : légèrement plus serrée */
h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Blocs de code */
.code-block { 
    background: var(--code-bg, #f5f5f5); 
    border: 1px solid #999; 
    padding: 8px 10px; 
    font-family: "Courier New", monospace; 
    font-size: 0.92rem; 
    white-space: pre-wrap; 
    word-break: break-word; 
    margin: 10px 0;
}

/* Lignes de questions */
.question-line { 
    display: flex; 
    align-items: baseline; 
    gap: 6px; 
    margin: 6px 0; 
}

.question-num { 
    border: 1px solid #999; 
    padding: 1px 6px; 
    font-weight: 700; 
    font-size: 0.95rem; 
    background: #f9f9f9; 
}

.dots { 
    flex: 1; 
    border-bottom: 1px dotted var(--line, #c7c7c7); 
    height: 1.1em; 
}

.dots.long { 
    min-width: 60%; 
}

/* Encadrés informatifs */
.info-box { 
    background: var(--box-bg, #eef2ff); 
    border-left: 4px solid var(--box-border, #0b2f8f); 
    padding: 15px; 
    margin: 15px 0; 
    border-radius: 0 4px 4px 0; 
}

.info-box h3 { 
    margin-top: 0; 
    color: var(--box-border, #0b2f8f); 
    font-size: 1.1rem; 
}

/* Analogies */
.analogy { 
    background: #fff8e1; 
    border-left: 4px solid #ffb300; 
    padding: 15px; 
    margin: 15px 0; 
    font-style: italic; 
}

.analogy strong { 
    color: #d35400; 
    font-style: normal; 
}

/* Zones à compléter */
.trou {
    border-bottom: 2px dotted #0b2f8f;
    display: inline-block;
    min-width: 80px;
    height: 1.2em;
    vertical-align: bottom;
    margin: 0 2px;
    color: transparent; 
    user-select: none;
}

/* Tables */
.table-3col { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 3mm 0; 
}

.table-3col th, 
.table-3col td { 
    border: 1px solid #aaa; 
    padding: 4px 6px; 
    font-size: 0.95rem; 
}

.table-3col th { 
    text-align: center; 
    font-weight: 700; 
}

/* Grilles */
.two-col { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 6mm; 
    align-items: start; 
}

@media (max-width: 600px) { 
    .two-col { 
        grid-template-columns: 1fr; 
    } 
}

.col { 
    width: 100%; 
}

/* Détails interactifs */
details { 
    background: #f9f9f9; 
    padding: 10px; 
    border-radius: 4px; 
    border: 1px solid #ddd; 
    margin: 10px 0; 
    cursor: pointer; 
}

summary { 
    font-weight: bold; 
    color: var(--blue, #0b2f8f); 
    outline: none; 
}

details[open] summary { 
    border-bottom: 1px solid #ddd; 
    margin-bottom: 10px; 
    padding-bottom: 5px; 
}

/* Pages */
.page { 
    page-break-after: always; 
}

.page:last-child { 
    page-break-after: auto; 
}