/**
 * Trois Chemins — Styles de base
 * Charte graphique inspirée du wabi-sabi japonais
 * 
 * Les variables CSS sont définies dynamiquement via PHP.
 * Ce fichier contient les styles de base complémentaires.
 */

/* ========================================
   RESET MINIMAL
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* ========================================
   IMAGES ET MÉDIAS
   ======================================== */

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 1.5em 0;
}

figcaption {
    font-size: 0.9em;
    color: var(--tc-stone, #6b6b6b);
    font-style: italic;
    margin-top: 0.5em;
}

/* ========================================
   SÉPARATEURS
   ======================================== */

hr {
    border: none;
    border-top: 1px solid var(--tc-stone, #6b6b6b);
    margin: 2em 0;
    opacity: 0.3;
}

/* ========================================
   LISTES
   ======================================== */

ul, ol {
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.3em;
}

/* ========================================
   TABLEAUX
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

th, td {
    padding: 0.75em;
    text-align: left;
    border-bottom: 1px solid var(--tc-stone, #6b6b6b);
}

th {
    background-color: var(--tc-ink, #1a1a1a);
    color: var(--tc-paper, #f5f2eb);
    font-weight: 600;
}

tr:hover {
    background-color: rgba(45, 74, 62, 0.05);
}

/* ========================================
   MISE EN PAGE (Espacement MA - 間)
   ======================================== */

.entry-content > *,
.post-content > *,
article > * {
    margin-bottom: 1.5em;
}

.entry-content > *:last-child,
.post-content > *:last-child {
    margin-bottom: 0;
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

:focus {
    outline: 2px solid var(--tc-forest, #2d4a3e);
    outline-offset: 2px;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* ========================================
   SÉLECTION DE TEXTE
   ======================================== */

::selection {
    background-color: var(--tc-gold, #c9a962);
    color: var(--tc-ink, #1a1a1a);
}

::-moz-selection {
    background-color: var(--tc-gold, #c9a962);
    color: var(--tc-ink, #1a1a1a);
}

/* ========================================
   IMPRESSION
   ======================================== */

@media print {
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .no-print {
        display: none !important;
    }
}