.bracer-board {
    background-image: url('../img/bg_projects.jpg');
    /* 100% de largeur, hauteur automatique pour garder le ratio */
    background-size: 100% auto; 
    background-attachment: scroll; /* On le fait défiler avec les projets */
    background-repeat: repeat-y;   /* Il se répète vers le bas si tu as bcp de projets */
    background-position: top center;
    min-height: 100vh;
    padding: 30px;
    border: 12px solid #3d2616; /* Le cadre en bois */
}

/* On centre le titre et la grille dans la zone de contenu */
.projects-container {
    flex: 1; /* Prend l'espace à gauche du right_panel */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-title {
    font-family: 'Averia Serif Libre', serif;
    color: #fde08d;
    font-size: 2.2rem;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.projects-grid {
    display: grid;
    /* On force 2 colonnes par défaut sur PC */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    width: 100%;
}

.post-it {
    background-image: url('../img/quest.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 25px;
    position: relative;
    filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
    /* État de base : un peu incliné */
    transform: rotate(-1deg) translateY(0);
    
    /* Transition fluide pour que ça ne saccade pas */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease;
    
    cursor: pointer;
    text-align: center;
    z-index: 1;
}

.post-it:nth-child(even) {
    transform: rotate(1.5deg) translateY(0);
}

/* L'ANIMATION AU SURVOL */
.post-it:hover {
    /* On le remet bien droit et on le monte de 10px */
    transform: rotate(0deg) translateY(-10px) scale(1.02);
    
    /* On accentue l'ombre pour accentuer l'effet de levage */
    filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
    
    /* On s'assure qu'il passe au-dessus des autres s'ils se chevauchent */
    z-index: 10;
}

.pin {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #ff4d4d, #800000);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.statut-valeur {
    display: inline-block;  /* Le rectangle colle au texte */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    border: 2px solid #2c1a0b;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    /* ON VIRE LE MARGIN-LEFT : c'est le flex-end du parent qui bosse */
}

/* Couleur Orange pour "En cours" */
.en-cours {
    color: #d48402; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

/* Couleur Verte pour "Terminé" */
.termine {
    color: #27ae60;
}

/* Optionnel : On peut aussi styliser le <p> pour qu'il soit plus propre */
.post-it-content {
    display: flex;
    flex-direction: column; /* Les éléments s'empilent verticalement */
    align-items: flex-end;  /* Aligne tout à droite proprement */
    padding-right: 20px;    /* Marge de sécurité avec le bord du papier */
}
.project-post-it-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.project-post-it-link:hover {
    transform: scale(1.05) rotate(1deg);
    z-index: 10;
}

.project-card {
    /* 1. ON FORCE LE CALCUL CORRECT DES BORDURES */
    box-sizing: border-box; 
    
    /* 2. ON VIRE LE MARGIN-LEFT FIXE (le coupable) */
    margin: 40px auto; 
    
    /* 3. LARGEUR ADAPTATIVE */
    width: 90%; /* Prend 90% de l'espace dispo */
    max-width: 800px; /* Mais ne dépasse jamais 800px */
    
    /* 4. ON REPASSE EN BLOCK OU FLEX (pas inline-flex) */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu interne (titre, bouton) */
    
    /* 5. ON VIRE LE FLOAT OU AUTRE POSITIONNEMENT BIZARRE */
    position: relative;
    left: 0;
    float: none;
}

.detail-title {
    color: #fde08d;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 20px;
    text-align: center;
    filter: drop-shadow(0px 1.5px 3px #504e49);
}


/* --- INFOS --- */
.project-specs-grid {
    color: #000000;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 30px;
}

.status-text.termine { color: #27ae60; font-weight: bold; }
.status-text.en-cours { color: #f39c12; font-weight: bold; }

.btn-modern-dl {
    position: relative; /* Pour l'effet Shine */
    overflow: hidden;    /* Pour le masque de découpe */
    
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    
    /* COULEURS TEXTE : Gris très foncé pour le contraste sur fond clair */
    color: #2c3e50 !important;
    
    /* COULEURS FOND : Dégradé Jaune Crème -> Or Clair */
    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%) !important;
    background-size: 200% auto;
    
    border: none !important;
    border-radius: 12px;
    
    /* OMBRE CHAUDE : Reprend la teinte Or clair */
    box-shadow: 0 10px 15px -3px rgba(253, 230, 138, 0.4), 
                0 4px 6px -4px rgba(253, 230, 138, 0.4);
    
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La barre de brillance */
.btn-modern-dl::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    
    /* Dégradé Transparent -> Jaune Très Clair -> Transparent */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg); /* Inclinaison plus douce */
    transition: none;
}

/* Animation au survol */
.btn-modern-dl:hover::after {
    left: 150%; /* Traverse tout le bouton jusqu'à droite */
    transition: all 0.6s ease;
}

.btn-modern-dl:hover {
    background-position: right center !important; 
    
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(253, 230, 138, 0.5);
    filter: brightness(1.03);
}

.back-link-container { margin-top: 20px; }
.back-link { color: #000000; text-decoration: none; font-size: 0.9rem; }
.back-link:hover { text-decoration: underline; }


.gallery-section {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}

.gallery-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.gallery-viewport {
    overflow: hidden; /* Cache le surplus */
    width: 100%;
    scroll-behavior: smooth;
}

.gallery-track {
    display: flex;
    gap: 15px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item img {
    height: 220px;
    border: 2px solid #fde08d;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.gallery-item img:hover {
    transform: scale(1.02);
    filter: brightness(1.2);
}

/* BOUTONS DE NAVIGATION */
.nav-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #fde08d;
    color: #fde08d;
    font-size: 1.5rem;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    transition: all 0.2s;
    text-shadow: 1px 1px 2px #000;
}

.nav-btn:hover {
    background: #fde08d;
    color: #000;
    box-shadow: 0 0 10px #fde08d;
}

.nav-btn:active {
    transform: scale(0.9);
}

/* --- MODE CINÉMA (LIGHTBOX) --- */
/* --- MODE CINÉMA (LIGHTBOX DYNAMIQUE) --- */

.cinema-overlay.active {
    display: flex;
    opacity: 1;
}

.cinema-image {
    /* Supprime toute transition de transform pour tester si c'est ça qui bloque */
    transition: transform 0.2s ease-out !important; 
    
    /* Indispensable pour que le clic passe à travers ou soit capté */
    pointer-events: auto; 
    
    /* Empêche le navigateur de faire n'importe quoi avec l'image */
    
    user-select: none;
    -webkit-user-drag: none;
    
    /* Assure-toi qu'elle n'est pas trop petite */
    display: block;
    margin: auto;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    transition: width 0.3s ease; /* Transition sur la largeur, pas le transform */
    
    touch-action: auto;
}

.cinema-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    
    /* Indispensable pour le scroll horizontal et vertical */
    overflow: auto; 
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
    
    /* Centrage de base */
    justify-content: center;
    align-items: center;
}

.cinema-overlay.active {
    display: flex; /* Flex par défaut pour le centrage */
}
.cinema-image {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    transition: width 0.3s ease, transform 0.3s ease;
    cursor: zoom-in;
}

.cinema-image.is-zoomed {
    max-width: none !important;
    max-height: none !important;
    width: 250vw !important; /* L'image devient énorme */
    height: auto !important;
    margin: 0; /* On vire le margin auto pour laisser l'image déborder à droite */
    cursor: zoom-out;
}
.cinema-overlay.zoomed-mode {
    display: block !important; /* On casse le flex pour permettre le scroll naturel */
}
/* --- BOUTONS DE NAVIGATION CINÉMA --- */
.cinema-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #fde08d;
    color: #fde08d;
    font-size: 2rem;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 10000; /* Au-dessus de l'image */
    border-radius: 5px;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s;
    opacity: 0; /* Invisibles par défaut */
}

/* Zones de détection invisibles sur les côtés de l'image pour le survol */
.cinema-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; /* Légèrement plus large que l'image pour détecter */
    height: 95%; /* Légèrement plus haute que l'image */
    pointer-events: none; /* Ne bloque pas le clic sur l'image */
    z-index: 9998; /* Juste en-dessous des boutons */
}

/* --- APPARITION AU SURVOL DE L'IMAGE --- */
/* C'est ici que la magie opère : quand l'image est survolée, on affiche les boutons */
.cinema-image:hover ~ .cinema-btn {
    opacity: 1;
}

/* Pour que les boutons restent visibles si on les survole aussi */
.cinema-btn:hover {
    opacity: 1 !important; /* Force la visibilité */
    background: #fde08d;
    color: #000;
    box-shadow: 0 0 15px #fde08d;
    pointer-events: auto;
}

/* Positionnement spécifique */
.cinema-btn.prev {
    left: 20px; /* Espace avec le bord gauche */
}

.cinema-btn.next {
    right: 20px; /* Espace avec le bord droit */
}

.cinema-btn:active {
    transform: translateY(-50%) scale(0.9);
}

/* Petite aide textuelle */
.cinema-close-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fde08d;
    font-size: 0.9rem;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 2px #000;
    opacity: 0.7;
    pointer-events: none; /* Ne bloque pas le clic de fermeture */
}
.cinema-overlay:has(.cinema-image:hover) .cinema-btn {
    opacity: 1;
    pointer-events: auto; /* On réactive le clic quand ils sont visibles */
}

.cinema-image-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    /* La librairie va appliquer scale() et translate() sur ce conteneur */
}