/*
============================================================
style_wu.css - Spécifique à wu_1.html
style_cyber.css - Contient la base commune : polices, variables de thème, barre de navigation,
bouton clair/sombre et animations).
============================================================
*/

#wu_title {
    font-size: 3.5em;
    text-align: center;
}

.paragraph_title {
    text-align: center;
}

/* Menus déroulants (details/summary natifs HTML) */
.wu_details {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 1.5rem;
    border: 1px solid var(--text-color);
    border-radius: 4px;
}

.wu_details summary {
    cursor: pointer;
    font-size: 1.5em;
    padding: 1.5rem 0;
}

.wu_details summary:hover {
    text-decoration: underline;
}

/* Séparateur entre l'en-tête cliquable et le contenu ouvert */
.wu_details[open] summary {
    border-bottom: 1px solid var(--text-color);
    margin-bottom: 1.5rem;
}

/* Contenu du write-up */
.wu_details .wu_content {
    padding-bottom: 1.5rem;
}

/* Images */
.wu_content img {
    display: block;
    width: 100%;
    max-width: 35rem;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 4px;
}

/* Citation (énoncé d'un challenge) */
.wu_content blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1.5rem;
    border-left: 3px solid var(--text-color);
    opacity: 0.85;
}

/* Code */
/* Code en ligne (commandes, noms de fichiers, etc.) */
.wu_content code {
    background-color: rgba(128, 128, 128, 0.25);
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

/* Blocs de code longs (Scripts Python, données extraites, etc.) */
.wu_code {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 0.9em;
    padding: 1rem;
    margin: 1.5rem 0;
}