:root {
    /* Palette */
    --primary-color: #002B5B;
    --secondary-color: #00B4D8;
    --accent-green: #4ADE80;
    --white: #FFFFFF;
    --color-bg: #E5E7EB;
    --text-color: #1F2937;
    
    /* Matières */
    --maths-color: #BFDBFE;
    --francais-color: #FECACA;
    --histoire-color: #FDE68A;

    /* Style */
    --font-family: 'Rubik', sans-serif;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --container-width: 1400px;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: var(--font-family); }

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

a { 
    text-decoration: none; 
    color: inherit; 
    transition: var(--transition); }
ul { 
    list-style: none; 
}
.avatar{
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;

}
/* --- Header --- */
header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1rem 2rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
}

header .logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: white;
    z-index: 1001;
}

header .logo img { height: 45px; }
header .logo span { font-size: 1.5rem; font-weight: 600; }

.header-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

header nav ul { 
    display: flex; 
    list-style: none;
    gap: 2rem; 
}

header nav a { 
    color: var(--white); 
    font-weight: 500; 
    text-decoration: none;
    transition: var(--transition);
}

header form.search-form { 
    position: relative; 
    display: flex; 
    align-items: center; 
}

header form.search-form input {
    border-radius: 50px;
    border: 2px solid transparent;
    outline: none;
    transition: var(--transition);
    background: white;
}

header form.search-form button {
    background-color: #5d636fc9;
    border: none;
    cursor: pointer;
    font-size: 0;
    mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.5C13 7.93438 12.5344 9.25938 11.75 10.3344L15.7063 14.2937C16.0969 14.6844 16.0969 15.3188 15.7063 15.7094C15.3156 16.1 14.6812 16.1 14.2906 15.7094L10.3344 11.75C9.25938 12.5375 7.93438 13 6.5 13C2.90937 13 0 10.0906 0 6.5C0 2.90937 2.90937 0 6.5 0C10.0906 0 13 2.90937 13 6.5ZM6.5 11C7.09095 11 7.67611 10.8836 8.22208 10.6575C8.76804 10.4313 9.26412 10.0998 9.68198 9.68198C10.0998 9.26412 10.4313 8.76804 10.6575 8.22208C10.8836 7.67611 11 7.09095 11 6.5C11 5.90905 10.8836 5.32389 10.6575 4.77792C10.4313 4.23196 10.0998 3.73588 9.68198 3.31802C9.26412 2.90016 8.76804 2.56869 8.22208 2.34254C7.67611 2.1164 7.09095 2 6.5 2C5.90905 2 5.32389 2.1164 4.77792 2.34254C4.23196 2.56869 3.73588 2.90016 3.31802 3.31802C2.90016 3.73588 2.56869 4.23196 2.34254 4.77792C2.1164 5.32389 2 5.90905 2 6.5C2 7.09095 2.1164 7.67611 2.34254 8.22208C2.56869 8.76804 2.90016 9.26412 3.31802 9.68198C3.73588 10.0998 4.23196 10.4313 4.77792 10.6575C5.32389 10.8836 5.90905 11 6.5 11Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
}

.auth-buttons a, .header-actions > a {
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

@media (min-width: 1101px) {
    .mobile-toggle { display: none; }
    .header-content { margin-left: 3rem; }
    header nav { margin-right: auto; }
    
    header nav a { 
        position: relative;
    }

    header nav a:hover { color: var(--secondary-color); }
    header nav a::after {
        content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
        background-color: var(--secondary-color); transition: var(--transition);
    }
    header nav a:hover::after { width: 100%; }

    header form.search-form input { padding: 0.6rem 2.5rem 0.6rem 1.2rem; width: 250px; }
    header form.search-form input:focus { box-shadow: 0 0 0 2px var(--secondary-color); width: 300px; }
    header form.search-form button { position: absolute; right: 10px; width: 20px; height: 20px; }

    .header-actions { display: flex; align-items: center; gap: 1.5rem; }
    .auth-buttons { display: flex; gap: 1rem; }
    .auth-buttons a {
        padding: 0.6rem 1.5rem; border-radius: 50px; font-size: 0.95rem;
        color: white; border: 1px solid rgba(255,255,255,0.3);
    }
    .auth-buttons a:last-child { background-color: var(--secondary-color); border-color: var(--secondary-color); }
    .avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; }
    .mobile-only-text { display: none; }
}

@media (max-width: 1100px) {
    header { padding: 0.8rem 1.2rem; height: 64px; }
    header.menu-open { box-shadow: none; }
    header .logo img { height: 35px; }
    header .logo span { font-size: 1.2rem; }

    .mobile-toggle {
        display: flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, 0.15); border: none; padding: 10px;
        border-radius: 10px; cursor: pointer; z-index: 1001; color: white;
    }
    .mobile-toggle .icon-close { display: none; }
    .mobile-toggle.active .icon-hamburger { display: none; }
    .mobile-toggle.active .icon-close { display: block; }

    .header-content {
        position: fixed; top: 64px; left: 0; right: 0; background: var(--primary-color);
        padding: 2rem 1.5rem;
        flex-direction: column; 
        gap: 2rem;
        transform: translateY(-110%);
        opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999; box-shadow: 0 15px 30px rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.1);
    }
    .header-content.active { transform: translateY(0); opacity: 1; visibility: visible; }

    header nav { width: 100%; }
    header nav ul { flex-direction: column; gap: 0.8rem; }

    header nav a, .auth-buttons a, .header-actions > a,
    header nav a:visited, .auth-buttons a:visited, .header-actions > a:visited { 
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px !important; 
        background: rgba(255,255,255,0.06); 
        border-radius: 12px !important; 
        font-size: 1.05rem !important;
        font-weight: 500;
        border: 1px solid rgba(255,255,255,0.1);
        color: white !important;
        gap: 1rem;
        transition: all 0.2s ease;
    }

    header nav a::after {
        content: none;
    }
    
    header nav a:active, .auth-buttons a:active, .header-actions > a:active { 
        background: rgba(255,255,255,0.15); 
    }

    header form.search-form { order: -1; width: 100%; }
    header form.search-form input { 
        width: 100% !important; padding: 14px 18px !important; border-radius: 15px; 
    }
    header form.search-form input:focus { border-color: var(--secondary-color); }
    header form.search-form button { display: none; } 

    .header-actions { 
        display: flex;
        flex-direction: column; 
        align-items: stretch; 
        width: 100%; 
        border-top: 1px solid rgba(255,255,255,0.1); 
        padding-top: 1.5rem; 
        gap: 0.8rem;
    }
    .auth-buttons { 
        display: flex;
        flex-direction: column; 
        gap: 0.8rem; 
    }

    .profile-link, .auth-buttons a:last-child { 
        background-color: var(--secondary-color) !important; 
        border: none !important;
    }

    .mobile-only-text { display: inline; font-weight: 600; }
    .avatar { border: 2px solid white; width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
}

@media (max-width: 400px) {
    header .logo span { display: none; }
}

/* --- Footer --- */
footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 3.5rem 1.5rem 1.5rem;
    margin-top: auto;
}

@media (max-width: 768px) {
    footer {
        text-align: center;
    }
    
    footer nav[aria-label="Réseaux sociaux"] {
        justify-content: center;
    }
    
    footer address ul {
        padding: 0;
    }
}

footer > section:first-of-type {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 2rem;
    max-width: var(--container-width); 
    margin: 0 auto 2rem;
}

footer h3 { 
    color: var(--secondary-color); 
    margin-bottom: 1rem; 
    font-size: 1.1rem; 
}

footer p, footer li, footer a {
    color: var(--color-bg); 
    font-size: 0.9rem; 
    margin-bottom: 0.6rem;
}

footer a:hover { 
    color: var(--secondary-color); 
    padding-left: 5px; 
}
footer nav[aria-label="Réseaux sociaux"] { 
    display: flex; 
    gap: 1rem; 
}

footer nav[aria-label="Réseaux sociaux"] a {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 40px; 
    height: 40px; 
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%; 
    margin-bottom: 0;
    transition: var(--transition);
}

footer nav[aria-label="Réseaux sociaux"] a:hover { 
    background-color: var(--secondary-color); 
    color: var(--white); 
    transform: translateY(-3px); 
    padding-left: 0;
}


footer > section:last-of-type {
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 2rem;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    max-width: var(--container-width); 
    margin: 0 auto; 
    gap: 1rem; 
    text-align: center;
}

footer > section:last-of-type nav { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}

footer > section:last-of-type span { 
    color: rgba(255,255,255,0.3); 
}


/*#region authentication*/

.authentication > p, .authentication h1,.authentication h2{
    text-align: center;
}

.authentication form > p{
    color: red;
}
.authentication form{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}


.authentication form .email-wrapper{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.authentication form input{
    height: 2rem;
    padding: .5rem 1.5rem;
    border-radius: 8px;
}

.authentication form .avatar{
    width: 2rem;
}

/* 
.authentication form input{
    background: url('/assets/icon.png') no-repeat 5px center, var(--white);
} */

.authentication form input:read-only{
    opacity: 40%;
}
.authentication button{
    color: var(--white);
    background-color: var(--primary-color);
    border-radius: 8px;
    height: 2rem;
}

.email-wrapper input{
    width: 100%;
}
.email-wrapper a{
    display: inline-flex;
    background-color: var(--secondary-color);
    color: var(--text-color);
    text-align: center;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    height: 2rem;
}

/*#endregion authentication*/
.back-to-top {
    --btt-size: 40px;
    --btt-offset: 30px;

    position: fixed;
    bottom: var(--btt-offset);
    left: var(--btt-offset);
    width: var(--btt-size);
    height: var(--btt-size);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    cursor: pointer;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: 
        opacity 0.3s, 
        visibility 0.3s, 
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s;
}

.back-to-top.show {
    opacity: 0.9;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    opacity: 1;
    background-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}
.matiere-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: 50px;
    color: var(--primary-color) !important;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 10;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.matiere-badge:hover {
    color: var(--primary-color) !important;
}