/* --- EN-TÊTE SPÉCIFIQUE ANNEXES --- */
.annexes-header {
    max-width: 1136px;
    margin: 60px auto 100px; /* Marge en bas augmentée pour aérer avant le contenu */
    padding: 0 72px;
    
    /* On utilise Flexbox pour gérer la disposition */
    display: flex;
    flex-direction: column; /* Les éléments l'un sous l'autre */
    align-items: flex-start;   /* Centre le titre principal horizontalement */
    position: relative;
}

.header-title-img {
    display: block;
    width: 50%;         /* Ajuste cette valeur pour grossir/réduire le titre */
    max-width: 700px;   /* Limite maximale pour les grands écrans */
    height: auto;
}

.header-subtitle-img {
    display: block;
    width: 35%;
    max-width: 400px;
    height: auto;
    
    align-self: flex-end; 
    
    margin-top: -25px;
    margin-right: 10%;
    
    /* C'EST ICI QUE TU MODIFIES L'AXE */
    transform: rotate(0deg); /* Essaie -2deg, -3deg ou -5deg selon l'effet voulu */
}

.subtitle {
    font-family: "forma-djr-deck", sans-serif;
    font-size: 1.2em;
    color: #1e00ff;
}

/* --- ETUDES DE CAS --- */
.case-study {
    margin-bottom: 120px;
    scroll-margin-top: 150px; /* Pour que le lien du sommaire ne cache pas le titre */
}

.study-title {
    font-family: "forma-djr-micro", sans-serif;
    font-weight: 800;
    font-size: 1.8em;
    line-height: 1.2;
    margin-bottom: 32px;
    color: #2a2a2a;
}

.highlight-yellow {
    background-color: #fee500;
    padding: 2px 8px;
    box-shadow: 3px 3px 0px #000;
    border: 1px solid #000;
    display: inline-block;
    transform: rotate(-1deg);
    margin-bottom: 10px;
    font-size: 0.8em;
}

.divider {
    height: 1px;
    background-color: #eee;
    width: 50%;
    margin: 60px 0;
}

/* --- GALERIE MINIATURES (SIDEBAR) --- */
.gallery-group {
    margin-bottom: 80px;
}

.gallery-label {
    font-family: "forma-djr-micro", sans-serif;
    font-weight: 800;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #1e00ff;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.thumb-container {
    margin-bottom: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thumb-container:hover {
    transform: translateX(5px);
}

.gallery-thumb {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    display: block;
    transition: border-color 0.2s;
}

.thumb-container:hover .gallery-thumb {
    border-color: #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.thumb-caption {
    font-family: "forma-djr-micro", sans-serif;
    font-size: 0.75em;
    color: #666;
    display: block;
    margin-top: 4px;
}

/* Grille pour les petites images (Blossom / Friends) */
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gallery-thumb.mini {
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
}

.gallery-thumb.mini:hover {
    opacity: 0.8;
    border: 1px solid #000;
}

/* --- LIGHTBOX (STYLE CADRE POP-UP) --- */

.lightbox {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fond arrière-plan un peu transparent pour voir qu'on est au dessus de la page */
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(2px);
}

.lightbox-content {
    /* Positionnement : Centré parfaitement au milieu */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Taille Moyenne ("Le Cadre") */
    width: 90%;          /* S'adapte sur mobile */
    max-width: 900px;    /* Ne dépasse pas cette largeur sur ordi */
    max-height: 90vh;    /* Ne dépasse pas la hauteur de l'écran */
    
    /* Style du Cadre */
    background-color: #ffffff;
    border: 2px solid #000;          /* Bordure noire */
    box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.15);  /* Ombre portée noire pour l'effet "pop" */
    
    /* Espacement interne */
    padding: 40px; 
    
    /* Organisation flexible du contenu */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* L'image principale */
#lightbox-img {
    width: auto;
    height: auto;
    max-height: 55vh; /* On limite la hauteur pour laisser de la place au texte/strip */
    max-width: 100%;
    object-fit: contain;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

/* Textes (Titre et légende) */
.lightbox-info {
    text-align: center;
    margin-bottom: 20px;
    color: #2a2a2a;
    width: 100%;
}

#lightbox-title {
    font-family: "forma-djr-micro", sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    margin-bottom: 4px;
}

#lightbox-caption {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* --- Navigation (Flèches) --- */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    /* On les place sur les bords du cadre */
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1.5px solid #000;
    border-radius: 50%;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    user-select: none;
    transform: translateY(-50%);
    z-index: 10;
}

.prev { left: -20px; } /* Déborde légèrement à gauche */
.next { right: -20px; } /* Déborde légèrement à droite */

.prev:hover, .next:hover {
    background-color: #2a2a2a;
    color: white;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

/* --- Bouton Fermer (Croix) --- */
.close-lightbox {
    position: absolute;
    top: 3px;
    right: 20px;
    color: #000;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 20;
}

.close-lightbox:hover {
    color: #ff009d;
}

/* --- Bandeau miniatures (Intégré au cadre) --- */
.lightbox-strip {
    /* Plus besoin de position absolute, il suit le flux */
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.strip-thumb {
    height: 40px;
    width: 40px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #ddd;
    transition: all 0.2s;
}

.strip-thumb.active, .strip-thumb:hover {
    opacity: 1;
    border: 1.5px solid #000;
    transform: scale(1.1);
}


/* --- STYLE INTERVIEWS --- */

.intro-interview {
    font-style: italic;
    color: #666;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    line-height: 1.6;
}

.interview-block {
    margin-bottom: 60px; /* Espace aéré */
}

/* NOUVEAU : LE STICKER VERT (Pour les titres interviews) */
.highlight-green {
    background-color: #1e00ff; /* Le Vert demandé */
    color: #ffffff;            /* Texte en BLANC pour le contraste */
    padding: 2px 8px;
    box-shadow: 3px 3px 0px #000;
    border: 1px solid #000;
    display: inline-block;
    transform: rotate(-1deg);
    margin-bottom: 10px;
    font-size: 0.8em;
}

/* QUESTIONS : Sticker Blanc & Noir (Comme demandé) */
.question {
    font-family: "forma-djr-micro", sans-serif;
    font-weight: 800;
    font-size: 1.2em; /* Un tout petit peu plus grand pour l'impact */
    line-height: 1.3;
    
    color: #1e00ff;   /* Bleu électrique pour bien séparer de la réponse */
    
    /* On supprime tout le "lourd" (Cadres, ombres, fond) */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    
    /* On garde la dynamique */
    display: inline-block;
    transform: rotate(-1deg);
    
    margin-bottom: 12px;
}

/* RÉPONSES : Simple (Barre jaune retirée) */
.answer {
    font-family: "forma-djr-deck", sans-serif;
    font-size: 1em;
    color: #2a2a2a;
    line-height: 1.6;
    
    /* Plus de bordure, plus de padding spécial */
    margin-left: 4px;
}

.header-title-small {
    width: 45% !important; /* Force la taille réduite */
}


.note-sidebar a {
    /* Couleurs */
    color: #1e00ff !important;      /* Bleu électrique */
    text-decoration: underline;     /* Souligné pour qu'on sache que c'est un lien */
    
    /* On annule le style "bouton" global */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    
    transition: color 0.2s ease;
}

.note-sidebar a:hover {
    /* Changement de couleur au survol */
    color: #ff009d !important;      /* Rose */
    
    /* On s'assure que le style bouton ne revient pas au survol */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: underline;
}

/* --- CORRECTION POUR LE LIEN REPRENDRE LA LECTURE --- */
/* On utilise un sélecteur plus "fort" (spécifique) pour écraser le bleu */
.note-sidebar a.resume-link {
    display: block;              
    margin-top: 10px;            
    
    font-family: "Inter", sans-serif;
    font-size: 0.7em;            
    text-transform: uppercase;   
    letter-spacing: 0.5px;
    
    color: #aeaeae !important;   /* Gris clair forcé */
    text-decoration: none;
    
    /* On retire le style bouton par défaut */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    
    transition: all 0.2s ease;
}

.note-sidebar a.resume-link:hover {
    color: #1e00ff !important;   /* Bleu au survol */
    transform: translateY(-2px); 
}