/* ============================================
   RESET & BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* Wrapper pour le formulaire profil enseignant sur pages QDL */
.profile-container-wrapper {
    width: 100%;
    display: block;
}

/* Header avec bandeau*/
.header {
    background-image: url('../img/bandeau.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 1.5rem clamp(24px, 4vw, 72px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 90px;
}

/* Titre du header */
.header h1 {
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 3vw, 2.5rem);
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    color: white;
}

/* Cacher les iframes de debugkit et autres outils de développement */
iframe[src*="debug_kit/toolbar"],
body > iframe[src*="localhost:8765"] {
    display: none !important;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ============================================
     TYPOGRAPHY
     ============================================ */

h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

h2.section-title {
    font-size: 20px;
    margin-bottom: 20px;
}

/* ============================================
     BOOKS - Styles communs
     ============================================ */

.book {
    text-align: left;
    position: relative;
}

.book-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
}

.book-image__buttons {
    display: flex;
    gap: 5px;
    flex-direction: column;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(130%);
    width: 80%;
    transition: transform 0.3s ease-in-out;
}

.book-image__buttons button {
    margin-bottom: 0;
}

.book-image:hover .book-image__buttons {
    transform: translateX(-50%) translateY(0);
}

.book img:not(button img) {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 8px;
    max-width: 9vw;
}

.book-image img {
    margin-bottom: 0;
}

.book h3,
.book h4 {
    font-size: large;
    font-weight: 600;
    margin-bottom: 5px;
}

.book h4 {
    text-align: center;
}

.book p {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

/* ============================================
     GRILLES DE LIVRES - Variations
     ============================================ */
.cycle {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.books {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
}

.books.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================
     BADGES
     ============================================ */

div.difficult {
    text-align: center;
    margin: 1vh auto;
}

.badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge.facile {
    background: #d8f2d4;
    border: 1px solid #39bb30;
    color: #39bb30;
}

.badge.moyen {
    background: #fbe6d2;
    border: 1px solid #f9830f;
    color: #f9830f;
}

.badge.difficile {
    background: #f5d8df;
    border: 1px solid #f75a7c;
    color: #f75a7c;
}

.badge.termine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 80%;
    background: #c8e6c9;
    color: #2e7d32;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.badge.termine span {
    display: flex;
}

.badge.termine svg {
    width: 15px;
    height: 15px;
}

div.buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div.buttons a,
div.buttons input,
div.buttons button {
    margin: 1vh auto;
}

div.forgottenpassword {
    text-align: center;
}

/* ============================================
     SIDEBAR
     ============================================ */

.sidebar {
    width: 15%;
    min-width: 200px;
    background: #f5f5f5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: black;
    height: 100vh;
    min-height: 100vh;
}

.sidebar button {
    width: 100%;
}

.logo {
    display: flex;
}

.logo a {
    margin: auto;
    text-align: center;
}

.logo img {
    width: 70%;
    height: auto;
}

.profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.menu {
    list-style: none;
    flex: 1;
}

img.onlybook {
    cursor: pointer;
}

.menu a {
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu a img,
.mobile-nav-item img {
    filter: grayscale(100%);
}

.menu a.active {
    background: white;
}

a.active img {
    filter: grayscale(0%);
}

.menu a:hover:not(.active) {
    background: #e0e0e0;
}

.menu a:hover img {
    filter: grayscale(0%);
}

/* ============================================
     BUTTONS
     ============================================ */

button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

button img {
    width: 16px;
    height: 16px;
}

button#advices,
button#noted {
    border:1px solid #03a9f4;
}

.sidebar .btn-red {
    background: #ff5c8d;
    color: white;
    border: 1px solid #ff5c8d;
}

.btn-blue-read {
    display: flex;
    flex-direction: column;
    background: #00000033;
    border: none;
    color: white;
}

.btn-white {
    background: white;
    color: #03a9f4;
    border: 1px solid white;
    display: flex;
    gap: 5px;
}

.btn-white img {
    width: 16px;
    height: 16px;
}

.button.btn-blue {
    background-color: #4D96B6;
    border-color: #4D96B6;
}

/* ============================================
     MAIN CONTENT
     ============================================ */

.main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.main > .content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 30px;
    width: 100%;
    margin: 0;
}

/* ============================================
     ADVICE / CONSEIL (utilisé dans index et historique)
     ============================================ */

.conseil-group {
    margin-bottom: 40px;
}

.conseil-group h2 {
    font-size: 18px;
    margin: 2rem 0;
}


.conseil-box {
    background: #ffd966;
    padding: 30px;
    border-radius: 8px 8px 30px 8px;
    position: relative;
    overflow: hidden;
    font-size: larger;
}

.conseil-box img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.mobile-nav,
.mobile-actions {
    display: none;
}


/* ============================================
     RESPONSIVE - MOBILE
     ============================================ */

@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .main {
        width: 100%;
        height: auto;
        min-height: auto;
        overflow-y: auto;
    }

    .header {
        background-size: cover;
        max-height: 100px;
        height: auto !important;
        padding: 0.5rem 0.6rem 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 80px;
    }

    .header h1 {
        font-size: 1.8rem;
        line-height: 1.2;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        max-width: 100%;
    }


    main.main:has(#teacher-profile-page.profile-container-wrapper) > .header {
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
    }

    .main > .content {
        flex: initial;
        min-height: auto;
        overflow-y: auto;
        width: 100%;
        padding: 20px;
        display: block;
    }

    .books {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 20px;
        margin-bottom: 30px;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scroll-padding: 0;
    }

    .books::-webkit-scrollbar {
        height: 8px;
    }

    .books::-webkit-scrollbar-track {
        background: rgba(47, 190, 29, 0.1);
        border-radius: 10px;
    }

    .books::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #2fbe1d, #26a017);
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .books::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, #26a017, #1e7e13);
        transform: scaleY(1.2);
    }

    /* Firefox scrollbar */
    .books {
        scrollbar-width: thin;
        scrollbar-color: #2fbe1d rgba(47, 190, 29, 0.1);
    }

    .book {
        min-width: calc(50% - 7.5px);
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .book img:not(button img) {
        width: 100%;
        aspect-ratio: 2/3;
    }

    .book-image__buttons {
        transform: translateX(-50%) translateY(-10%);
    }

    .book h4 {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .book p {
        font-size: 10px;
        margin-bottom: 5px;
    }

    .conseil-box {
        min-height: 120px;
        padding: 20px;
    }

    .conseil-box img {
        width: 30px;
        height: 30px;
    }

    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        z-index: 1000;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: #666;
        font-size: 10px;
    }

    .mobile-nav-item.active {
        color: #ff5c8d;
    }

    .mobile-nav-item img {
        width: 20px;
        height: 20px;
    }

    .main {
        padding-bottom: 80px;
    }
}