/* === Balises principaux === */
body {
    background: linear-gradient(to bottom right, #AAAAAA, #666666);
    background-attachment: fixed;

    color: black;
    line-height: 1.4;
    font-size: 1.25rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

main {
    margin-inline: 2% auto;
    padding-inline: 10rem;
}

/* Footer */
footer {
  text-align: center;
  font-size: 1rem;
}

footer p:nth-of-type(2) {
    font-size: 0.7rem;
}

footer p:nth-of-type(3) {
    font-size: 0.6rem;
}
/* ======================================== */

/* === Balises === */
h1 {
    color:#550000;
    text-align: center;
}

hr {
    border: 1px solid #000000;
}

/* lien */
main a {
    text-decoration: none;
    color: #000055;
    transition: color 0.3s;
}

main a:hover {
    text-decoration: underline;
    color: #ffffff;
}

.lien-nothing a {
    text-decoration: none;
    color: black;
}

.bouton{
    text-align: center;
}

.bouton a{
    border: 2px solid #000000;
    background-color: #AAAAAA;

    padding: 1rem;

    text-align: center;
}

.bouton a:hover{
    border: 2px solid #000000;
    background-color: #ffffff;

    color: #000000;
}
/* ======================================== */

/* === Classes === */
.para {
    margin-block: 2rem;
    padding-inline: 1rem;

    border: 5px solid #000000;
}

.texte {
    margin-inline: 10rem;
    padding: 2rem;

    border: 2px solid #000000;
    background-color: #AAAAAA;

    font-style: italic;
    font-size: large;
    text-align: center;
}
/* ======================================== */

/* === Centre de données === */

/* Barre de recherche */
.search-bar-container {
    margin-block: 1.5rem;
}

#search-input {
    width: 100%;

    padding: 0.6rem 1rem;

    font-size: 1rem;
    color: #000000;

    border: 2px solid #000000;
    background-color: #AAAAAA;

    box-sizing: border-box;
}

#search-input:focus {
    outline: none;
    background-color: #c0c0c0;
}

/* Tags */
.tag {
    display: inline-block;

    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;

    background-color: #220000;
    color: #ffffff;

    cursor: pointer;
    transition: background-color 0.2s;
}

.tag:hover {
    background-color: #440000;
}

/* Liste de documents */
.liste-documents {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 1rem;
}

/* Carte document */
.carte-document {
    padding: 0.8rem 1rem;

    border: 5px solid #000000;
    background-color: #AAAAAA;

    cursor: pointer;
    transition: background-color 0.2s;
}

.carte-document:hover {
    background-color: #c0c0c0;
}

.carte-titre {
    font-size: 1.1rem;
    font-weight: bold;
    color: #550000;
    margin-bottom: 0.3rem;
}

.carte-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.carte-apercu {
    font-size: 0.9rem;
    color: #222222;
    font-style: italic;
}

/* Vue lecture — étend .texte */
.texte.document-lecture {
    font-style: normal;
    margin: 0%;
    text-align: left;
}

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

.lecture-tags {
    margin-bottom: 1rem;
}

/* Bouton retour */
.btn-retour {
    display: inline-block;
    margin-bottom: 1.2rem;
    padding: 0.4rem 1rem;
    background-color: #220000;
    color: #ffffff;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-retour:hover {
    background-color: #440000;
}
/* ======================================== */

/* === Barre de navigation === */
header {
    list-style-type: none; /* Pour éviter d'avoir des puces */
    flex-wrap: wrap; /* Adaptation */

    display: flex;
    top: 0;
    position: sticky;

    background-color: #0b0b0b;
}

header li a {
    display: block;

    color: white;
    text-decoration: none;

    padding: 14px 16px;
}

header li a:hover:not(.active) {
    background-color: #1b1b1b; /* Couleur quand la souris passe dessus */
}

header li a.active {
    background-color: #440000; /* Couleur de celle active */
}

/* Menu déroulant */
.bloc_base {
    color: white;
    font-family: 'Marcellus', serif;

    padding: 14px 16px;
    border: none;

    cursor: pointer; /* Curseur en forme de main */
}

.bloc-interne {
    background-color: #0b0b0b;

    display: none; /* Caché par défaut */
    position: absolute; 

    min-width: 200px;
}

.bloc-interne a {
    color: white; 
    text-decoration: none;

    display: block;   /* Affichage en bloc pour prendre toute la largeur */
}

.bloc:hover .bloc-interne {
    display: block; /* Affiche le menu au survol */
}

.bloc:hover .bloc_base {
    background-color: #1b1b1b;
}
/* ============================================= */