/* ===================== */
/* Général / Body        */
/* ===================== */
body {

    margin: 0;
    padding: 0;
    background: linear-gradient(#9ddcfa, #4eb0ff); /* Dégradé de bleus clairs */
    font-family: 'Kosugi Maru', sans-serif;
    color: #09184a; /* Bleu foncé pour le texte principal */
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===================== */
/* Titres                */
/* ===================== */
h1 {
    font-family: 'Mochiy Pop One', sans-serif;
    color: #00418b; /* Bleu plus soutenu pour les titres */
    font-size: 2.5rem;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

h1, h2, h3, button {
    font-family: 'Mochiy Pop One', sans-serif;
}

p, li, span, body {
    font-family: 'Kosugi Maru', sans-serif;
}

/* ===================== */
/* Header                */
/* ===================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(182, 226, 253, 0.55);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 65, 139, 0.1);
    position: relative;
    z-index: 99;
    flex-wrap: wrap;
}

/* Logo */
header .logo img {
    height: 100px; /* Default desktop size */
}
/* Logo animé vivant */
header .logo a img {
    height: 140px; /* Default desktop size, this is more specific */
    width: auto;
    margin-right: 150px; /* Space on desktop */
    display: block;
    animation: idleOrbit 4s ease-in-out infinite, idleColor 5s ease-in-out infinite;
    transition: transform 0.5s ease, filter 0.3s ease;
    will-change: transform, filter;
}

/* Survol épique */
header .logo a:hover img {
    animation: hoverBurst 0.8s cubic-bezier(0.2, 1.8, 0.4, 0.9) forwards;
    filter: drop-shadow(0 0 12px rgba(0, 157, 255, 0.43)) drop-shadow(0 0 25px rgba(78, 152, 205, 0.51));
}

@keyframes idleOrbit {
    0%   { transform: rotate(0deg) translateX(0px) scale(1); }
    25%  { transform: rotate(1deg) translateX(1px) translateY(1px) scale(1.01); }
    50%  { transform: rotate(-1deg) translateX(-1px) translateY(-1px) scale(0.99); }
    75%  { transform: rotate(0.5deg) translateX(1px) translateY(0px) scale(1.02); }
    100% { transform: rotate(0deg) translateX(0px) scale(1); }
}

/* Variation douce de couleur (hue-rotate) */
@keyframes idleColor {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(15deg); }
    100% { filter: hue-rotate(0deg); }
}

/* 🚀 Hover animation — burst + bounce + glow */
@keyframes hoverBurst {
    0%   { transform: scale(1) rotate(0deg) translateY(0); }
    20%  { transform: scale(1.3) rotate(5deg) translateY(-10px); }
    40%  { transform: scale(0.95) rotate(-3deg) translateY(5px); }
    60%  { transform: scale(1.15) rotate(2deg) translateY(-3px); }
    80%  { transform: scale(1.05) rotate(0deg) translateY(2px); }
    100% { transform: scale(1.1) rotate(1deg) translateY(0); }
}


/* Navigation */
header nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

header nav ul li {
    font-family: 'Kosugi Maru', sans-serif;
}

header nav ul li a {
    text-decoration: none;
    color: #00418b;
    font-size: 1.2rem;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

header nav ul li a:hover {
    color: #6495ed;
    transform: scale(1.1);
}

/* Ligne sous le lien au survol */
header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #6495ed;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

header nav ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


/* Responsive mobile */
@media (max-width: 768px) {
    header {
        /* Change header to column layout for mobile */
        flex-direction: column;
        justify-content: center; /* Center items horizontally in column */
        align-items: center; /* Center items horizontally in column */
        padding: 15px 20px; /* Adjust padding */
    }

    header .logo a img {
        /* Adjust logo size for mobile, keep it visible */
        height: 80px; /* Slightly larger than in option 1, as it's prominent */
        margin-right: 0; /* Remove right margin as it's now centered */
        margin-bottom: 15px; /* Add some space below the logo */
        display: block; /* Ensure it's displayed */
        /* You might still want to disable complex animations for mobile */
        animation: none;
    }

    /* Adjust navigation styles for mobile, now below the logo */
    header nav {
        width: 100%; /* Ensure navigation takes full width */
    }

    header nav ul {
        flex-direction: column; /* Stack navigation items vertically */
        gap: 10px; /* Reduce gap between stacked items */
        align-items: center; /* Center navigation items horizontally */
        width: 100%; /* Make the navigation take full width */
        padding: 0; /* Remove extra padding */
    }

    header nav ul li a {
        font-size: 1rem; /* Slightly smaller font size for mobile */
    }
}




/* ===================== */
/* Grid des projets      */
/* ===================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 0 40px 60px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
}

.projects-grid.centered {
    justify-content: center;
    grid-auto-flow: row;
}

/* ===================== */
/* Cartes projet         */
/* ===================== */
.project-card {
    background: rgb(182, 226, 253); /* Bleu très clair transparent */
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 65, 139, 0.1); /* Ombre bleue légère */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    text-align: center;
    padding: 20px;
    max-width: 400px;

}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 65, 139, 0.15); /* Ombre bleue plus marquée au survol */
}

.project-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .project-card {
        max-width: 100%;
    }
}

/* ________________________________ SCROLL TOP ________________________________________________ */
#scrollToTopBtn {

    display: none; /* Cacher initialement */

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 99;

    border: none;

    outline: none;

    background-color: #6495EDFF;

    color: papayawhip;

    cursor: pointer;

    padding: 0.7rem;

    border-radius: 5px;

    font-size: 1.2rem;

    transition: background-color 0.3s ease;

}


#scrollToTopBtn:hover {

    background-color: #5C6BC0;

}

/* ===================== */
/* Infos dans la carte   */
/* ===================== */
.project-info h3 {
    font-family: 'Mochiy Pop One', sans-serif;
    margin: 0 0 10px;
    font-size: 1.3rem;
    color: #00418b; /* Titre en bleu soutenu */
}

.project-info button {
    background-color: #6495ed; /* Bouton en bleu vif */
    color: #f0f8ff; /* Blanc cassé pour le texte du bouton */
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.project-info button:hover {
    background-color: #4169e1; /* Bleu royal au survol du bouton */
}

/* ===================== */
/* Détail de projet      */
/* ===================== */
.project-detail {
    max-width: 800px;
    width: 90%;
    margin: 60px auto;
    background-color: rgb(182, 226, 253); /* Bleu très clair transparent */
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 65, 139, 0.1); /* Ombre bleue légère */
}

.project-detail h1 {
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 2rem;
    color: #00418b; /* Titre en bleu soutenu */
    margin-bottom: 20px;
}

.project-detail img {
    width: 40%;
    display: block;
    margin: 20px auto;
    border-radius: 12px;
}

.project-detail p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #09184a; /* Texte en bleu foncé */
}

.project-detail h4 {
    margin-top: 24px;
    font-size: 1.2rem;
    color: #4169e1; /* Sous-titre en bleu royal */
}

.tag {
    display: inline-block;
    background: rgba(0, 107, 228, 0.52);
    color: #000000;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.project-detail a {
    display: block;
    margin-top: 20px;
    text-align: center;
    padding: 10px 16px;
    background-color: #6495ed; /* Lien en bleu vif */
    color: #f0f8ff; /* Texte du lien en blanc cassé */
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project-detail a:hover {
    background-color: #4169e1; /* Bleu royal au survol du lien */
}

/* ===================== */
/* Lien retour           */
/* ===================== */
a[href*="projets.php"] {
    margin-top: 40px;
    display: inline-block;
    font-size: 1rem;
    text-decoration: none;
    color: #00418b; /* Texte du lien retour en bleu soutenu */
    padding: 6px 12px;
    background: rgb(182, 226, 253); /* Fond bleu très clair transparent */
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

a[href*="projets.php"]:hover {
    background-color: #b6e2fd; /* Fond bleu clair au survol */
}

/* ===================== */
/* Responsive            */
/* ===================== */
@media (max-width: 600px) {
    h1 {
        font-size: 1.8rem;
        margin-top: 40px;
    }

    .projects-grid {
        padding: 0 20px 40px;
    }

    .project-detail {
        padding: 20px;
    }
}


/* ________________________________ SCROLL TOP ________________________________________________ */


#scrollToTopBtn {

    display: none; /* Cacher initialement */

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 99;

    border: none;

    outline: none;

    background-color: #6495EDFF; /* Bleu vif pour le bouton */

    color: #f0f8ff; /* Blanc cassé pour le texte */

    cursor: pointer;

    padding: 0.7rem;

    border-radius: 5px;

    font-size: 1.2rem;

    transition: background-color 0.3s ease;

}


#scrollToTopBtn:hover {

    background-color: #4169E1; /* Bleu royal au survol */

}

/* ________________________________ Footer ________________________________________________ */
.site-footer {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    color: #163385;
    text-align: center;
    padding: 2rem 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    text-decoration: none;
}

.site-footer.visible {
    opacity: 1;
    transform: translateY(0);
    text-decoration: none;
}

.footer-socials a {
    color: #163385;
    margin: 0 0.8rem;
    font-size: 1.5rem;
    transition: color 0.4s ease, font-size 0.4s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    color: #000000;
}


.footer-socials a:hover {
    font-size: 200%;
}

.kofi-icon {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.kofi-icon:hover {
    transform: scale(1.5);
    filter: brightness(1.2);
}

.footer-text {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
}


/* ===================== */
/* Filtres améliorés (V2) */
/* ===================== */
.filters {
    margin: 30px auto 60px; /* Ajout de margin-bottom pour l'espace avec les cartes */
    padding: 25px; /* Un peu plus de padding intérieur */
    display: flex;
    gap: 25px; /* Un peu plus d'espace entre les éléments */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: rgba(182, 226, 253, 0.6); /* Légèrement plus transparent */
    backdrop-filter: blur(12px);
    border-radius: 20px; /* Bords un peu plus arrondis */
    box-shadow: 0 6px 12px rgba(0, 65, 139, 0.15); /* Ombre un peu plus présente */
    border: 1px solid rgba(0, 65, 139, 0.05); /* Fine bordure subtile */
}

.filters label {
    font-weight: bold;
    color: #00418b;
    font-size: 1.1rem;
    margin-right: 10px; /* Un peu d'espace à droite du label */
}

.filters select {
    padding: 12px 20px; /* Plus de padding pour un aspect plus "bouton" */
    font-size: 1rem;
    border: 2px solid #b6e2fd; /* Bordure un peu plus épaisse */
    border-radius: 25px; /* Bords plus arrondis pour un style "pill" */
    background-color: #f0f8ff;
    color: #09184a;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2300418b" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 90%; /* Ajustement de la position de la flèche */
    background-position-y: 50%;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.filters select:hover {
    border-color: #6495ed;
    background-color: #e0f7fa; /* Fond légèrement bleuté au survol */
    color: #00418b;
}

.filters select:focus {
    outline: none;
    border-color: #4169e1;
    box-shadow: 0 0 8px rgba(65, 105, 225, 0.4); /* Ombre au focus un peu plus douce */
}

.filters select option {
    background-color: #f0f8ff;
    color: #09184a;
    padding: 8px 15px;
}

.filters select option:hover {
    background-color: #b6e2fd;
}

/* ________________________________________ Caroussel _______________________________________ */


.carousel {
    position: relative;
    max-width: 200px;
    margin: auto;
    overflow: hidden;
}

.carousel-item {
    display: none;
    text-align: center;
}

.carousel-item img {
    max-width: 320px; /* Or 300px, or the size that matches your desired look */
    width: 100%; /* So it scales responsively */
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 12px;
}

.carousel-item.active {
    display: block;
}

.carousel button.prev,
.carousel button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #6495ED;
    color: papayawhip;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.carousel button.prev {
    left: 0;
}

.carousel button.next {
    right: 0;
}

/* ________________________________________ Close up _______________________________________ */


.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 114, 193, 0.51);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
}

.lightbox.hidden {
    display: none;
}

.lightbox img.lightbox-image {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    transition: opacity 0.3s;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 36px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}


/* ________________________________________ Soyons accessible pour tous !!! _______________________________________ */
.accessibility-box {
    position: fixed;
!important;
    top: 80px;
!important;
    left: 20px;
!important;
    z-index: 100;
!important;
}


.accessibility-toggle {
    background-color: #87CEEBFF;
!important;
    border: 1px solid #6495EDFF;
!important;
    color: #004a97;
!important;
    padding: 0.5rem;
!important;
    border-radius: 5px;
!important;
    cursor: pointer;
!important;
    display: flex;
!important;
    align-items: center;
!important;
    justify-content: center;
!important;
    margin-top: 80px;
!important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
!important;

}


.accessibility-toggle:hover {
    background-color: #6495EDFF;
!important;
    color: #004a97;
!important;

}


.accessibility-options {
    background-color: #fff8f2;
!important;
    border: 1px solid papayawhip;
!important;
    border-radius: 5px;
!important;
    padding: 1rem;
!important;
    margin-top: 0.5rem;
!important;
    box-shadow: 0 2px 5px;
!important;

}


.accessibility-options label {
    display: block;
!important;
    margin-bottom: 0.3rem;
!important;
    font-size: 0.9rem;
!important;
    color: #00336c;
!important;

}


.accessibility-options input[type="range"],
.accessibility-options input[type="color"] {
    width: 100%;
!important;
    margin-bottom: 0.8rem;
!important;
    -webkit-appearance: none;
!important;
    appearance: none;
!important;
    background-color: #B6E2FDFF;
!important;
    height: 0.5rem;
!important;
    border-radius: 0.25rem;
!important;
    cursor: pointer;
!important;
}


.accessibility-options input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
!important;
    appearance: none;
!important;
    width: 1rem;
!important;
    height: 1rem;
!important;
    background-color: #6495EDFF;
!important;
    border-radius: 50%;
!important;
    cursor: pointer;
!important;
}


.accessibility-options input[type="range"]::-moz-range-thumb {
    width: 1rem;
!important;
    height: 1rem;
!important;
    background-color: #6495EDFF;
!important;
    border: none;
!important;
    border-radius: 50%;
!important;
    cursor: pointer;
!important;
}


.accessibility-options input[type="color"] {

    height: 2rem;
!important;

}


.visually-hidden {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

    clip: rect(1px, 1px, 1px, 1px) !important;

    white-space: nowrap !important;

    border: 0 !important;

    padding: 0 !important;

}


#reset-accessibility {
    background-color: #9deaff;
!important;
    color: #00336c;
!important;
    font-weight: bold;
!important;
    border: none;
!important;
    padding: 12px 30px;
!important;
    border-radius: 25px;
!important;
    cursor: pointer;
!important;
}


/* ===================== */
/* Arbre    */
/* ===================== */

/*#arbreGauche {*/
/*    background-image: url("../uploads/Abre.svg"); !* Assure-toi du bon chemin *!*/
/*    background-size: contain; !* Pour que l'arbre entier soit visible sans répétition *!*/
/*    background-repeat: no-repeat;*/
/*    width: 200px; !* Ajuste la largeur selon la taille de ton arbre *!*/
/*    height: 300px; !* Ajuste la hauteur *!*/
/*    position: absolute;*/
/*    left: 20px; !* Position depuis le bord gauche *!*/
/*    bottom: 50px; !* Position depuis le bas - ajuste selon ton layout *!*/
/*    z-index: 1; !* Pour qu'il soit au-dessus du fond particles *!*/
/*    animation: legerBougerHorizontalGauche 3s infinite alternate;*/

/*    animation-name: legerBougerHorizontalGauche, legerRotationVerticalGauche;*/
/*    animation-duration: 3s, 4s; !* Durées pour chaque animation *!*/
/*    animation-iteration-count: infinite;*/
/*    animation-direction: alternate, alternate;*/
/*}*/

/*#arbreDroit {*/
/*    background-image: url("../uploads/Abre.svg"); !* Assure-toi du bon chemin *!*/
/*    background-size: 100% 100%;*/
/*    background-repeat: no-repeat;*/
/*    width: 250px; !* Ajuste la largeur *!*/
/*    height: 980px; !* Ajuste la hauteur *!*/
/*    position: absolute;*/
/*    right: 30px; !* Position depuis le bord droit *!*/
/*    bottom: 30px; !* Position depuis le bas *!*/
/*    z-index: 1;*/
/*    animation: legerBougerHorizontalDroit 3.5s infinite alternate;*/

/*    animation-duration: 3.5s, 4.5s; !* Durées légèrement différentes *!*/
/*    animation-iteration-count: infinite;*/
/*    animation-direction: alternate, alternate;*/
/*}*/

/*@keyframes legerBougerHorizontalGauche {*/
/*    0% {*/
/*        transform: translateX(0);*/
/*    }*/
/*    50% {*/
/*        transform: translateX(-5px);*/
/*    }*/
/*    !* Bouge légèrement vers la gauche *!*/
/*    100% {*/
/*        transform: translateX(0);*/
/*    }*/
/*}*/

/*@keyframes legerBougerHorizontalDroit {*/
/*    0% {*/
/*        transform: translateX(0);*/
/*    }*/
/*    50% {*/
/*        transform: translateX(5px);*/
/*    }*/
/*    !* Bouge légèrement vers la droite *!*/
/*    100% {*/
/*        transform: translateX(0);*/
/*    }*/
/*}*/

/*@keyframes legerRotationVerticalGauche {*/
/*    0% {*/
/*        transform: rotateY(0deg);*/
/*    }*/
/*    50% {*/
/*        transform: rotateY(-1deg);*/
/*    }*/
/*    !* Penche légèrement *!*/
/*    100% {*/
/*        transform: rotateY(0deg);*/
/*    }*/
/*}*/

/*@keyframes legerRotationVerticalDroit {*/
/*    0% {*/
/*        transform: rotateY(0deg);*/
/*    }*/
/*    50% {*/
/*        transform: rotateY(1.5deg);*/
/*    }*/
/*    !* Penche légèrement dans l'autre sens *!*/
/*    100% {*/
/*        transform: rotateY(0deg);*/
/*    }*/
/*}*/