/**********************************************************************************************************************************************************************/
/* Partie sidebar */


/* # Sidebar search */
.sidebar-search {
    padding: 10px;
    border-bottom: 1px solid #fff;
}

#search-input {
    width: 100%;
    background: rgb(30, 38, 54);
    box-sizing: border-box;
    color:white;
    margin-bottom: 10px;
    padding: 0.7rem;
    padding-left: 1.2rem;
    cursor: pointer;
    border: 0px solid #187dc6;
    border-radius: 25px;
}

#search-count {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 15px;
}

/* gros conteneur */
.projets-container {
    display: flex;
    height: calc(100vh - 70px);
    /* -140 si footer en +  (70 par header/footer)*/
    overflow: auto;
}

/* mettre dedans */
.sidebar {
    width: 20%;
    height: calc(100vh-70px);
    /* Ancien (1) Vs Nouveau (2) */
    /* background-color: #1e1f1f; */
    background: rgb(4, 0, 23);
    color: white;
    padding: 20px;
    overflow-y: auto;
}

/* enleve le margin top du h3 */
.sidebar h3 {
    margin-top: 0;
}

/* CSS pour chaque projet */
.project-item {
    cursor: pointer;
    padding: 1rem;
    border-bottom: 1px solid #ffffff33;
    border-radius: 5px;
}

/* si au dessus */
.project-item:hover {
    /* background-color: #041624; */
    background: rgb(75, 74, 79);
    transition: background 0.3s ease;
}

/* si actif */
.project-item.active-project {
    /* background-color: #123860; */
    background: rgb(58, 63, 74);
    font-weight: bold;
    outline: 1;

    border-left: 3px solid #e7e7e7;
    border-radius: 3px;
}

.project-header {
    display: flex;
    justify-content: space-between;
}

/* tag du projet (techno) */
.project-technos {
    font-size: 0.9rem;
    color: #a0d8ff;
}

/* enleve le margin top du h2, pour   */
/* faire - d'espace au dessus du bloc */
.project-details h2 {
    margin-top: 0;
}

/* style pour la date */
.project-date {
    font-size: 1em;
    color: #bbb;
    text-align: right;
}


/**********************************************************************************************************************************************************************/
/* Ajout des styles pour les boutons */
/* cliquables dans le texte des      */
/* détails du projet                 */

.json_a {
    color: white;
    text-decoration: none;
    border-top: 1px solid rgb(4, 0, 23);
    border-bottom: 1px solid rgb(4, 0, 23);
    padding: 2px 4px;
    border-radius: 5px;
}

.json_a:hover {
    background-color: rgb(14, 40, 70);
}

/**********************************************************************************************************************************************************************/
/* Partie section / grid / project-details


/* Gros bloc derriere */
.project-details {
    background: transparent;
    /* background:red; */
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.project-details .no-selection {
    color: white;
    text-align: center;
    vertical-align: bottom;
}

/* Utilisation de la grille et les */
/* différents colonnes expliquées  */
.details-grid {
    /* background: red; */
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "name  desc desc"
        "date  desc desc"
        "team  desc desc"
        "gal   gal tech";
    gap: 0.7em;
}

/*  cartes  */
.card {
    background: #1f2636;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
}

/* titre pour description */
/* de chaque élément      */
.section-title {
    display: block;
    font-size: 12px;
    letter-spacing: .02em;
    color: #a7b0bf;
    margin-bottom: 6px;
}

/* Mettre chaque classe en zone        */
/* grid area pour mettre l'emplacement */
.name-card {
    grid-area: name;
}

.date-card {
    grid-area: date;
}

.team-card {
    grid-area: team;
}

.desc-card {
    grid-area: desc;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.gallery-card {
    grid-area: gal;
}

.tech-card {
    grid-area: tech;
}


/* Style pour les 3 infos      */
/* en haut à droite du détails */
.info-card .info-value {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    background: #222b3d;
    padding: 10px 12px;
    border-radius: 8px;
}

/* Element: Description */
.desc-card .desc-text {
    flex: 1;
    background: #222b3d;
    padding: 12px 14px;
    border-radius: 8px;
    line-height: 1.55;
    overflow: auto;
}

/* Element: Galerie */
.gallery-card .gallery-container {
    background: #222b3d;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.gallery-image {
    width: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 6px;
    outline: 1px solid rgb(0, 0, 0);
    box-shadow: 1px 1px 10px black;
    ;
}

/* Barre de navig en bas          */
/* (precedant, compteur, suivant) */
.gallery-controls--bar {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.gallery-btn {
    background: #0f2b55;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.gallery-btn:hover {
    background: #12386c;
}

.gallery-counter {
    justify-self: center;
    font-size: 14px;
    color: #cbd4e1;
}

/* style du texte en cas d'absence d'images */
.no-images-message {
    color: #888;
    font-style: italic;
    margin-top: 10px;
}

/* élément: grille de technos */
/* 3 technos par ligne        */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: calc(3 * 120px + 2 * 12px);
    min-height: calc(2 * 120px + 2 * 12px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* scrollbar amélioré pour les technos  */
/* le vieux truc blanc gris c'est moche */
.tech-grid::-webkit-scrollbar,
.desc-text::-webkit-scrollbar {
    background: #222b3d;
    border-radius: 8px;
    width: 5px;
}

.tech-grid::-webkit-scrollbar-thumb,
.desc-text::-webkit-scrollbar-thumb {
    background: #3a4152;
    border-radius: 8px;
}

.tech-grid::-webkit-scrollbar-thumb:hover,
.desc-text::-webkit-scrollbar-thumb:hover {
    background: #4e5a6e;
}

/* Style pour chaque case */
/* de techno, avec image  */
.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tech-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgb(34, 43, 61);
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
}

.tech-thumb img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.tech-thumb:hover {
    background: rgb(40, 49, 67);
}

.tech-name {
    font-size: 12px;
    color: #a7b0bf;
}