/*
 * Ce fichier sert à définir le style de base du site.
 * On y retrouve la définition du thème graphique :
 *     + Police d'écriture.
 *     + Couleurs principales et secondaires.
 *     + Header.
 *     + Footer.
 *     + Éléments de base.
 * Tout autre éléments est définit dans des fichiers plus spécifiques.
 */

/* ===== Variables & Thème ===== */

@media not print {
    /* Thème sombre par défaut */
    :root {
        color-scheme: dark light;
	/* Thème principal */
        --bg-color: #212121;
        --text-color: #f0f0f0;
	/* Mise en évidence */
        --bg-color-alt: #121212;
        --text-color-alt: #007bff;
	/* Éléments secondaires */
        --bg-color-sec: #121212;
        --text-color-sec: #666;
	/* Header et Footer */
        --bg-color-header: #181a1b;
        --text-color-header: #a0a0a0;
        --bg-color-footer: var(--bg-color-header);
        --text-color-footer: var(--text-color-header);
    }

    /* Si thème light sélectionné par l'utilisateur. */
    @media (prefers-color-scheme: light) {
        :root {
            --bg-color: #ffffff;
            --text-color: #121212;
            --bg-color-alt: #ffffff;
            --text-color-alt: #121212;
            --bg-color-header: #f0f0f0;
            --text-color-header: #121212;
        }
    }
}

/* Écraser les couleurs du thème pour être plus économe en encre. */
@media print {
    :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --bg-color-alt: var(--bg-color);
        --text-color-alt: var(--text-color);
        --bg-color-header: none;
        --text-color-header: none;
        --bg-color-footer: var(--bg-color);
        --text-color-footer: var(--text-color);
    }
}

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}

/* ===== Titres ===== */

h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: white;
}
h2 {
    color: var(--text-color-alt);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* ===== Liens ===== */

.term:hover, a:hover {
    color: var(--text-color-alt);
}

/* ===== Style ===== */

.highlight {
    color: var(--text-color-alt);
}

/* ===== Header ===== */

@media not print {
    header {
        color: var(--text-color-header);
        background-color: var(--bg-color-header);
        padding: 1rem 2rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
/*
    .header-left {
        font-weight: bold;
        color: var(--text-color-alt);
        font-size: 1.1rem;
    }

    header .index {
        visibility: hidden;
    }
*/

    .header-right {
        display: flex;
        justify-content: end;
        align-items: center;
    }

    header .header-right a {
        color: var(--text-color-header);
        margin-left: 1.5rem;
        font-weight: 500;
        transition: color 0.3s;
    }

    header .header-right a:hover {
        color: var(--text-color-alt);
    }

    .header-right a.active {
        color: var(--text-color-alt);
	text-decoration: none;
        border-bottom: 2px solid var(--text-color-alt);
        padding-bottom: 0.2rem;
    }
}

@media print {
    header {
        visibility: collapse;
    }
}

/* ===== Main ===== */

main {
    padding: 0 3% 0 3%;
    margin: 2em 0 2em 0;
}

/* ===== Footer ===== */

footer {
    background-color: var(--bg-color-footer);
    color: var(--text-color-footer);
    padding: 2rem;
}

footer .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

.footer-contact, .footer-cv, .footer-copyright {
    min-width: 200px;
}

.footer-copyright {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--text-color);
    margin-top: 1rem;
}

/* ===== Éléments interactifs ===== */

.term {
    cursor: help;
    border-bottom: 3px dotted var(--text-color-alt);
    transition: color 0.2s;
    position: relative;
}

.def {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--text-color-header);
    color: var(--bg-color-header);
    padding: 0.5rem;
    border-radius: 4px;
    width: 200px;
    z-index: 10;
    font-size: 0.9rem;
    line-height: 1.4;
}
.term:hover .def, .def:hover {
    display: block;
}


/* ===== Responsive ===== */

@media (max-width: 768px) {
    .header-right {
        margin-top: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
}