/* CSS Document */


/* === CONSTANTES GLOBALES === */
:root {
    /* Espacements */
    --global-margin: 4px;
    --global-padding: 4px;

    /* Largeurs */
    --max-width: 1200px;
	
	/* Couleur de fond des articles des chapitres */
    --color-background-chapitre: #241106;

    /* Couleurs de fond des titres des chapitres et de leur rond dans le sommaire */
    --color-chapitre-1: #493323;
    --color-chapitre-2: #682f10;
    --color-chapitre-3: #67391e;
    --color-chapitre-4: #554232;
    --color-chapitre-5: #773f16;
    --color-chapitre-6: #6f492e;
    --color-chapitre-7: #8c3512;
    --color-chapitre-8: #8e4518;
    --color-chapitre-9: #956217;
    --color-chapitre-10: #8d5028;
    --color-chapitre-11: #7d6042;

    /* Couleurs pour la page index */
    --color-index-1: #4c250f;
    --color-index-2: #651d06;

    /* Couleur de fond général du site */
    --color-background-general: #0c0401;

    /* Couleurs pour le texte et le survol */
    --color-text: #fdf4d7;
    --color-hover: #ffc53a;
}

/* === RESET ET BASES STYLISTIQUES === */
body {
    font-family: 'Josefin Slab', serif;
    margin: 0px auto 32px;
    max-width: var(--max-width);
    padding: var(--global-padding);
    background-color: var(--color-background-general);
    color: var(--color-text);
}

a {
    text-decoration: none;
    color: inherit; /* hérite de la couleur du texte de l'élément parent */
}

a:hover {
    color: var(--color-hover);
}

/* === STRUCTURE COMMUNE === */
.header, .menu, .chapter-intro, .chapter-content {
    display: flex; 
    justify-content: space-between; 
    gap: var(--global-margin); 
    align-items: stretch;
}

.header-title, .header-image, .menu-image, .menu-items, .chapter-title, .chapter-image, .chapter-sidebar {
    height: auto;
}

/* === STYLES D'IMAGE COMMUNS === */
.header-image, .menu-image, .chapter-image, .chapter-col-image {
    background-size: cover;
    background-position: center;
    transition: filter 0.3s ease;
}

.header-image:hover, .menu-image:hover, .chapter-image:hover, .chapter-col-image:hover {
    filter: brightness(1.6);
}

/* === HEADER === */
.header-title {
    flex-basis: 32%;
    background-color: var(--color-index-1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--global-padding);
}

.header-image {
    flex-basis: 68%;
    background-image: url('img/img_06.png');
}

/* === MENU === */
.menu {
    padding: var(--global-padding) 0;
    font-size: 20px;
    display: flex; 
    justify-content: space-between; 
    gap: var(--global-margin); /* Espacement entre les div */
}

.menu-image {
    flex-basis: 72%;
    background-image: url('img/img_05.png');
}

.menu-items {
    flex-basis: 28%;
    background-color: var(--color-index-2);
    display: flex;
    flex-direction: column;
    gap: var(--global-margin);
    font-weight: bold;
}

.menu-items ul {
    list-style: none;
    padding-left: 40px;
    margin: 0;
}

.menu-item {
    font-size: 1.2em;
    padding: 20px var(--global-padding);
    position: relative;
}

.menu-item:before {
    content: "";
    position: absolute;
    left: -66px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
	background-color: var(--color-chapitre-1);
    border: 4px solid var(--color-background-general);
    transition: filter 0.3s ease-in-out;
}

.menu-item:hover:before {
    filter: brightness(250%);
}

.menu-item:last-child {
    margin-bottom: 0;
}

/* === COULEURS DES TITRES DE CHAPITRES === */
#chapitre-1 .chapter-title { background-color: var(--color-chapitre-1); }
#chapitre-2 .chapter-title { background-color: var(--color-chapitre-2); }
#chapitre-3 .chapter-title { background-color: var(--color-chapitre-3); }
#chapitre-4 .chapter-title { background-color: var(--color-chapitre-4); }
#chapitre-5 .chapter-title { background-color: var(--color-chapitre-5); }
#chapitre-6 .chapter-title { background-color: var(--color-chapitre-6); }
#chapitre-7 .chapter-title { background-color: var(--color-chapitre-7); }
#chapitre-8 .chapter-title { background-color: var(--color-chapitre-8); }
#chapitre-9 .chapter-title { background-color: var(--color-chapitre-9); }
#chapitre-10 .chapter-title { background-color: var(--color-chapitre-10); }
#chapitre-11 .chapter-title { background-color: var(--color-chapitre-11); }

/* === COULEURS DES ITEMS DE MENU === */
.menu-item:nth-child(1)::before {
    background-color: var(--color-chapitre-1);
}

.menu-item:nth-child(2)::before {
    background-color: var(--color-chapitre-2);
}

.menu-item:nth-child(3)::before {
    background-color: var(--color-chapitre-3);
}

.menu-item:nth-child(4)::before {
    background-color: var(--color-chapitre-4);
}

.menu-item:nth-child(5)::before {
    background-color: var(--color-chapitre-5);
}

.menu-item:nth-child(6)::before {
    background-color: var(--color-chapitre-6);
}

.menu-item:nth-child(7)::before {
    background-color: var(--color-chapitre-7);
}

.menu-item:nth-child(8)::before {
    background-color: var(--color-chapitre-8);
}

.menu-item:nth-child(9)::before {
    background-color: var(--color-chapitre-9);
}

.menu-item:nth-child(10)::before {
    background-color: var(--color-chapitre-10);
}

.menu-item:nth-child(11)::before {
    background-color: var(--color-chapitre-11);
}

/* === CHAPITRES === */
.chapter-title {
    flex-basis: 58%;
    height: 128px;
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: bold;
    padding: var(--global-padding);
    color: var(--color-text);
    font-size: 32px;
    padding-left: 16px;
}

.chapter-title h2 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
}

.chapter-image {
	flex-basis: 42%; /* pour remplir le reste de l'espace */
	height: auto; /* adapté à la hauteur du contenu */
    background-size: cover;
    background-position: center;
	transition: filter 0.3s ease; /* Transition pour un changement en douceur */
	
}

.chapter-sidebar {
    background-size: cover;
    background-position: center;
	
}

.chapter-intro, .chapter-content {
    display: flex; 
    justify-content: space-between; 
    gap: var(--global-margin); 
    align-items: stretch;
	padding-bottom: var(--global-padding);
}

.chapter-col-text {
    background-color: var(--color-background-chapitre);
	flex-basis: 90%; /* mise à jour de la largeur à 10% */
	text-align: justify;
    padding: var(--global-padding);
	padding-left: 16px; /* décale le texte de 16 pixels vers la droite */
	padding-right: 16px;
}

.chapter-col-image {
	flex-basis: 10%; /* mise à jour de la largeur à 10% */
    height: auto; /* adapté à la hauteur du contenu */
    background-size: cover;
    background-position: center;
	transition: filter 0.3s ease; /* Transition pour un changement en douceur */
}

.back-to-index {
    color: var(--color-text);
    text-decoration: none;
}

.back-to-index:hover {
    color: var(--color-hover);
}

/* === FOOTER === */
footer {
    position: sticky;
    bottom: 0;
    background-color: var(--color-background-general);
    border-top: 1px solid var(--color-chapitre-5);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px;
    padding-right: 44px;
    z-index: 1000;
    font-weight: bold;
}

/* === TABLETTES === */
@media (max-width: 768px) {
    body {
        padding: var(--global-padding);
    }

    /* Empiler les layouts en colonne */
    .header, .menu, .chapter-intro, .chapter-content {
        flex-direction: column;
    }

    .header-title, .header-image, .menu-image, .menu-items, .chapter-title, .chapter-image, .chapter-sidebar {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Header : donner une hauteur à l'image */
    .header-image {
        min-height: 200px;
    }

    /* Menu : cacher l'image, garder la liste propre */
    .menu-image {
        min-height: 200px;
    }

    .menu-items {
        padding: 16px 0;
    }

    .menu-items ul {
        padding-left: 0;
    }

    .menu-item {
        padding: 12px 16px;
        text-align: center;
    }

    .menu-item:before {
        display: none;
    }

    /* Chapitres : titres adaptés */
    .chapter-title {
        height: auto;
        min-height: 80px;
        font-size: 24px;
        padding: 16px;
        justify-content: center;
    }

    .chapter-image {
        min-height: 150px;
    }

    /* Contenu : cacher la bande image latérale, texte en pleine largeur */
    .chapter-col-image {
        display: none;
    }

    .chapter-col-text {
        flex-basis: 100%;
        padding: 16px;
    }

    /* Footer */
    footer {
        padding-right: 16px;
        justify-content: center;
    }
}

/* === SMARTPHONES === */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .header-title h1 {
        font-size: 20px;
    }

    .header-image {
        min-height: 150px;
    }

    .menu-image {
        min-height: 120px;
    }

    .menu-item {
        font-size: 1em;
        padding: 10px 12px;
    }

    .chapter-title {
        font-size: 20px;
        min-height: 60px;
    }

    .chapter-image {
        min-height: 120px;
    }

    .chapter-col-text {
        padding: 12px;
    }

    footer {
        font-size: 12px;
        gap: 4px;
    }
}