/* Styles de base */
html {
    scroll-behavior: smooth;
}

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

:root {
    --main-color: #2D1B36;
    /* Darker, sophisticated purple */
    --second-color: #F8D210;
    /* Vibrant modern yellow */
    --accent-color: #8C52FF;
    --bg-color: #F8F9FA;
    --surface-color: #ffffff;
    --text-color: #333333;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.profile-pic {
    margin-bottom: 30px;
    text-align: center;
}

.profile-pic img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--second-color);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* Section Hero */
.hero {
    min-height: 100vh;
    background: var(--main-color);
    background: linear-gradient(135deg, var(--main-color) 0%, #4a2b5e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    padding: 0 20px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-size: 4.5rem;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -1px;
}

.hero span {
    color: var(--second-color);
    /* Accent couleur */
}

.hero .tagline {
    font-size: 1.4rem;
    margin-bottom: 40px;
    color: #ffffff;
    font-weight: 300;
    opacity: 0.9;
}

.hero .btn {
    display: inline-block;
    background-color: var(--second-color);
    color: var(--main-color);
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
    0% {
        box-shadow: 0 0 0 0 rgba(248, 210, 16, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(248, 210, 16, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(248, 210, 16, 0);
    }
}

.hero .btn:hover {
    background-color: var(--accent-color);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
    animation: none;
    /* Arrête le pulse au survol */
}


/* Animation sur le texte du header */
.hero h1 {
    animation: slideIn 1.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Sections */
.section {
    padding: 80px 20px;
    scroll-margin-top: 60px;
    /* Offset for smooth scroll */
}

h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--main-color);
    position: relative;
    padding-bottom: 15px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--second-color);
    border-radius: 2px;
}

/* À propos */
.about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.lien_lycee {
    color: #f0e225;
}

.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

#bts-sio {
    margin-top: 30px;
    text-align: center;
}

.bts-intro {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    margin-top: 30px;
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sisl-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;
    background-color: var(--second-color);
    padding: 8px 25px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.options-container img {
    width: 100%;
    /* Adapts to flip-card size */
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* The flip card container */
.flip-card {
    background-color: transparent;
    width: 320px;
    height: 320px;
    perspective: 1000px;
}


/* Section Parcours */
#parcours {
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 60px;
}

#parcours::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #f4f4f9;
    z-index: -1;
}

#parcours h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--main-color);
}

.timeline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
}

.timeline-item {
    padding: 30px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    flex: 0 1 280px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: var(--surface-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

/* Ajout d'un fond semi-transparent pour améliorer la lisibilité du texte */
.timeline-content {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

.timeline-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: inline-block;
    color: var(--second-color);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.timeline-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--main-color);
}

.timeline-content p {
    font-size: 1rem;
    color: #666;
}

/* Style des flèches */
.timeline-arrow {
    font-size: 2rem;
    color: var(--main-color);
    position: relative;
    z-index: 1;
    animation: fadeIn 1s infinite alternate;
}

.timeline-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

@keyframes arrowSlide {

    0%,
    100% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }
}

.timeline-arrow {
    animation: arrowSlide 1.5s infinite;
}

/* Section Centres d'Intérêt */
#centres-interet {
    padding: 80px 20px;
    text-align: center;
    background-color: var(--bg-color);
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.interest-item {
    background-color: var(--surface-color);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interest-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

.interest-item .icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--second-color);
    transition: transform 0.3s ease;
}

.interest-item:hover .icon {
    transform: scale(1.15);
    color: var(--accent-color);
}

.interest-item h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.interest-item p {
    color: #666;
    font-size: 1.05rem;
    line-height: 1.5;
}



/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .timeline {
        flex-direction: column;
    }

    .timeline-arrow {
        transform: rotate(90deg);
        /* Flèche orientée vers le bas */
    }
}



/* Section Compétences */
#skills {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#skills h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.skills-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
}

.skills-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

.skills-table th,
.skills-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

.skills-table th {
    background-color: #f4f4f4;
    color: #333;
}

.skills-table td {
    background-color: #fff;
}

.skills-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.skills-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Carrousel Container */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Carrousel */
.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 10px;
}

/* Slides */
.carousel-slide {
    min-width: 220px;
    text-align: center;
    flex-shrink: 0;
    padding: 30px 20px;
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.carousel-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Icônes */
.carousel-slide i {
    font-size: 4rem;
    margin-bottom: 15px;
    color: var(--second-color);
    transition: transform 0.3s ease;
}

.carousel-slide:hover i {
    transform: scale(1.1);
    color: var(--accent-color);
}

/* Boutons de navigation */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Ajout de responsive */
@media (max-width: 768px) {
    .carousel-slide {
        min-width: 150px;
        padding: 10px;
    }

    .carousel-prev,
    .carousel-next {
        width: 30px;
        height: 30px;
    }
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: center;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

/*Section Outils*/


.skills-grid,
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
}

.skill-card,
.project-card {
    background: #ffffff;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.project-card:hover img {
    transform: scale(1.03);
}

.project-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--main-color);
}

.project-card p {
    margin-bottom: 25px;
    color: #555;
    flex-grow: 1;
    /* Pushes button to bottom */
}

.project-card .btn {
    background-color: var(--main-color);
    color: white;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.3s;
    align-self: center;
}

.project-card .btn:hover {
    background-color: var(--accent-color);
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 400px;
    height: 400px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Style the back side */
.flip-card-back {
    background-color: var(--main-color);
    color: white;
    transform: rotateY(180deg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.flip-card-back h1 {
    font-size: 1.8rem;
    color: var(--second-color);
    margin-bottom: 15px;
}

.flip-card-back p {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Style pour la section Veille */
#veille {
    padding: 80px 20px;
    background-color: var(--bg-color);
    text-align: center;
}

#veille .section-description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Barre de filtres Veille */
.veille-filters-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    background: var(--surface-color);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.search-container {
    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 15px;
    width: 100%;
    max-width: 400px;
    transition: border-color 0.3s ease;
}

.search-container:focus-within {
    border-color: var(--main-color);
}

.search-container i {
    font-size: 1.2rem;
    color: #888;
    margin-right: 10px;
}

.search-container input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-color);
}

.search-container input::placeholder {
    color: #999;
}

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

.sort-container label {
    font-weight: 600;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.sort-container select,
.sort-container .date-picker {
    padding: 8px 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-color);
    background-color: var(--surface-color);
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
}

.sort-container select:focus,
.sort-container .date-picker:focus {
    border-color: var(--main-color);
}

.sort-label-icon {
    margin-left: 15px !important;
}

.veille-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cartes pour chaque sujet */
.veille-card {
    background: var(--surface-color);
    border: none;
    border-radius: 16px;
    padding: 30px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.veille-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.card-content-top {
    margin-bottom: 20px;
}

.veille-card h3 {
    font-size: 1.4rem;
    color: var(--main-color);
    margin-bottom: 15px;
    line-height: 1.3;
}

.veille-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.veille-card h3 a:hover {
    color: var(--accent-color);
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    /* Permet à la date de passer à la ligne sur de très petits écrans */
    gap: 15px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    /* Prend l'espace disponible mais peut rétrécir */
}

.tag {
    background-color: var(--second-color);
    color: var(--main-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.date {
    font-size: 0.9rem;
    color: #888;
    font-weight: 500;
    white-space: nowrap;
    margin-top: 4px;
    flex-shrink: 0;
    /* Empêche la date de rétrécir */
}

.veille-card p.analyse-ia {
    font-size: 1rem;
    color: #555;
    margin-bottom: 25px;
    flex-grow: 1;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--main-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
    align-self: flex-start;
}

.read-more:hover {
    color: var(--accent-color);
}


/* Section Contact */
#contact {
    padding: 80px 20px;
    background-color: var(--bg-color);
    text-align: center;
}

#contact h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;
}

#contact .section-description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#confirmation-message {
    margin-top: 20px;
    color: #28a745;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Conteneur du formulaire */
.contact-container {
    display: flex;
    justify-content: center;
}

.contact-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Champs de formulaire */
.contact-form .form-group {
    margin-bottom: 20px;
    position: relative;
}

.contact-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease-in-out;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--main-color);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.contact-form button,
.section .btn {
    background-color: var(--main-color);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.contact-form button:hover,
.section .btn:hover {
    background-color: var(--second-color);
    color: var(--main-color);
}

/* Footer */
.footer {
    background-color: var(--main-color);
    color: white;
    text-align: center;
    padding: 40px 20px;
    position: relative;
    width: 100%;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-content p {
    font-size: 1rem;
    opacity: 0.9;
}

.footer-socials {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.footer-socials a {
    color: var(--second-color);
    text-decoration: none;
    font-size: 2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-socials a:hover {
    color: #ffffff;
    transform: translateY(-5px);
}

.onenote-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.onenote-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.onenote-button:hover {
    background-color: var(--second-color);
    color: var(--main-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Style de la barre latérale */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    /* Largeur de la barre */
    height: 100%;
    /* Hauteur égale à l'écran */
    background-color: #61157c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    /* Toujours au-dessus des autres éléments */
}

/* Navigation dans la barre */
.sidebar nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar nav ul li {
    margin: 15px 0;
    /* Espacement entre les liens */
}

/* Liens dans la barre */
.sidebar nav ul li a {
    text-decoration: none;
    color: #fff;
    /* Couleur du texte */
    font-size: 1.2rem;
    font-weight: bold;
    transition: color 0.3s, transform 0.3s;
}

/* Effet au survol */
.sidebar nav ul li a:hover {
    color: var(--second-color);
    /* Couleur de survol */
    transform: scale(1.1);
    /* Agrandir légèrement */
}

/* Adaptation du contenu principal pour laisser la place à la barre */
body {
    margin-left: 220px;
    /* Décale le contenu principal */
    transition: margin-left 0.3s ease;
}

/* Menu Burger Button pour mobile */
.menu-btn {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1002;
    background-color: var(--main-color);
    color: var(--second-color);
    width: 45px;
    height: 45px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: background-color 0.3s;
}

.menu-btn:hover {
    background-color: var(--accent-color);
}

/* Responsive : cacher la barre latérale sur les petits écrans */
@media screen and (max-width: 768px) {
    .menu-btn {
        display: flex;
        /* Affiche le bouton sur mobile */
    }

    .sidebar {
        transform: translateX(-100%);
        /* Masquer hors écran */
        width: 250px;
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }

    .sidebar.active {
        transform: translateX(0);
        /* Afficher */
    }

    body {
        margin-left: 0;
        /* Pas de marge sur mobile */
    }
}

/* Pagination Veille */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.page-btn {
    background-color: var(--surface-color);
    color: var(--main-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(:disabled) {
    background-color: var(--main-color);
    color: white;
    border-color: var(--main-color);
}

.page-btn.active {
    background-color: var(--second-color);
    color: var(--main-color);
    border-color: var(--second-color);
    font-weight: 700;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f9f9f9;
}