/* --- Styles pour la Page Hub des Projets --- */

.projects-header { text-align: center; margin: 4rem 0; }
.projects-header h1 { font-family: var(--font-title); font-size: 3rem; color: var(--primary-color); }

/* --- Styles de la Timeline --- */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}
/* La ligne centrale de la timeline */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #2a2a2a;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 1rem 2.5rem;
    position: relative;
    width: 50%;
}
/* Le point sur la ligne centrale */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--dark-bg);
    border: 4px solid var(--primary-color);
    top: 30px;
    border-radius: 50%;
    z-index: 1;
}

/* Positionne les items à gauche et à droite */
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }

/* Inverse la flèche pour les items de droite */
.timeline-item:nth-child(even)::after { left: -10px; }

/* Style du contenu d'un item de la timeline - CORRIGÉ */
.timeline-content {
    padding: 1.5rem;
    background-color: var(--light-bg);
    border-radius: 8px;
    position: relative;
    border: 1px solid #2a2a2a;

    /* On transforme la carte en colonne flexible */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne tout à gauche */
    gap: 0.75rem; /* Ajoute un espace vertical constant entre chaque élément */
}
/* Ajout pour fixer la taille des images de projet dans la timeline */
.timeline-content img {
    width: 100%;             /* L'image prend toute la largeur de sa carte parente */
    height: 200px;           /* Hauteur fixe (vous pouvez ajuster cette valeur) */
    object-fit: cover;       /* Essentiel: Redimensionne pour remplir l'espace sans déformer l'image */
    border-radius: 5px;      /* Bonus: coins légèrement arrondis pour un meilleur style */
    margin-bottom: 0.5rem;   /* Ajoute un petit espace entre l'image et le titre en dessous */
}
.timeline-content h2 { font-size: 1.5rem; margin: 0.5rem 0; color: white; }
.timeline-date { font-family: var(--font-tech, monospace); color: var(--primary-color); }

/* --- Styles pour les statuts de projet (Terminé, En cours...) --- */

/* Style de base pour TOUS les statuts */
.timeline-status {
    font-family: var(--font-tech, monospace);
    font-size: 0.9rem;      /* Légèrement agrandi pour une meilleure lisibilité */
    font-weight: bold;      /* Texte en gras */
    padding: 0.5rem 1rem;   /* Plus d'espacement pour un effet "bouton" */
    border-radius: 8px;     /* Bords arrondis comme sur votre image */
    color: var(--dark-bg);  /* Texte foncé pour bien contraster avec le fond coloré */
    display: inline-block;  /* S'assure que le padding est bien appliqué */
}

/* Statut "Terminé" en VERT (comme sur votre image) */
.timeline-status.completed {
    background-color: var(--fpv-green); /* Le vert vif de votre thème */
}

/* Statut "En Cours" en ORANGE (votre demande) */
.timeline-status.in-progress {
    background-color: #FF8C00; /* Un orange bien visible (DarkOrange) */
}

/* Statut "Concept" en GRIS (reste inchangé mais stylé de la même façon) */
.timeline-status.concept {
    background-color: #888;
}
.cta-button.disabled { background-color: #555; cursor: not-allowed; }

/* Responsive Timeline */
@media (max-width: 800px) {
    .timeline::after { left: 20px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 0; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-item::after { left: 10px; }
}

/* --- Styles pour la Page de Détail de Projet --- */
.project-detail-header {
    height: 50vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.header-overlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.project-detail-header h1 { font-size: 3.5rem; color: white; }
.project-detail-header p { font-size: 1.5rem; color: #ccc; }
.project-detail-header .timeline-status { margin-top: 1rem; }

.project-content { max-width: 900px; margin: 0 auto; padding: 2rem; }
.spec-table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 0.8rem; text-align: left; border-bottom: 1px solid #2a2a2a; }
.spec-table th { color: var(--primary-color); width: 30%; }

/* --- NOUVEAUX STYLES POUR LA PAGE DE DÉTAIL --- */

/* Style pour l'en-tête de mission */
.project-detail-header .project-codename {
    font-family: var(--font-tech, monospace);
    color: var(--fpv-green);
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}

/* --- Styles pour le Visualiseur 360° --- */
#viewer-360 {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    background-color: #0a0a0c;
    border-radius: 8px;
    cursor: grab;
    user-select: none; /* Empêche la sélection de l'image */
}
#viewer-360 img {
    width: 100%;
    height: auto;
    pointer-events: none; /* Empêche l'image de "capter" les clics */
}
.viewer-instruction {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-family: var(--font-tech, monospace);
    pointer-events: none;
    transition: opacity 0.5s;
}

/* --- Styles pour l'Architecture Système --- */
.architecture-diagram { text-align: center; }
.arch-row { display: flex; justify-content: space-around; margin: 1rem 0; }
.arch-node { background: var(--dark-bg); padding: 1rem; border-radius: 5px; border: 1px solid #333; flex-basis: 30%; }
.arch-node i { font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem; display: block; }
.arch-node.main-node i { color: var(--fpv-green); }
.arch-connectors { display: flex; justify-content: space-around; }
.connector { width: 2px; height: 30px; background: #333; }

/* --- Styles pour le Journal de Mission --- */
.mission-log {
    border-left: 3px solid var(--primary-color);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}
.log-date {
    font-family: var(--font-tech, monospace);
    color: #888;
    display: block;
    margin-bottom: 0.25rem;
}

/* --- NOUVEAUX STYLES POUR LES DÉTAILS DE PROJET --- */

/* --- Section Objectifs de Mission --- */
.mission-objectives {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.objective-card {
    background: var(--dark-bg);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #2a2a2a;
}
.objective-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.objective-card h4 {
    font-family: var(--font-title);
    color: white;
    margin-bottom: 0.5rem;
}

/* --- Note d'Ingénieur (variante du pilot-tip) --- */
.engineer-note {
    background-color: rgba(0, 170, 255, 0.05);
    border-left-color: var(--primary-color);
}
.engineer-note .fa-tools {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* --- Titre du tableau de specs --- */
.spec-table-title {
    font-family: var(--font-tech, monospace);
    font-size: 1.2rem;
    color: var(--fpv-green);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* --- Journal de Mission Amélioré --- */
.mission-log {
    border-left: 3px solid #555;
    padding: 0.5rem 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}
/* Point sur la timeline du log */
.mission-log::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 15px;
    width: 12px;
    height: 12px;
    background: #555;
    border-radius: 50%;
}
.mission-log.success { border-left-color: var(--fpv-green); }
.mission-log.success::before { background-color: var(--fpv-green); }

.mission-log.fail { border-left-color: #ff3232; }
.mission-log.fail::before { background-color: #ff3232; }

.log-status-success { color: var(--fpv-green); font-weight: bold; }
.log-status-fail { color: #ff3232; font-weight: bold; }

/* --- NOUVEAUX STYLES POUR LA PAGE DÉTAIL FPV RACER --- */

/* --- Éclaté Technique Interactif --- */
.component-explorer {
    position: relative;
    max-width: 700px;
    margin: 2rem auto;
}
.component-explorer img {
    width: 100%;
    border-radius: 8px;
}

.hotspot {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Centre le hotspot sur ses coordonnées */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hotspot span {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 30px;
}
.hotspot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse 2s infinite;
    opacity: 0.5;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}

#component-info-box {
    display: none;
    position: fixed; /* Se positionne par rapport à la fenêtre */
    background: var(--dark-bg);
    border: 1px solid var(--primary-color);
    padding: 1rem;
    border-radius: 5px;
    z-index: 100;
    max-width: 250px;
    pointer-events: none; /* L'infobulle ne peut pas être survolée */
}
#component-info-box h4 {
    color: var(--primary-color);
    font-family: var(--font-title);
    margin: 0 0 0.5rem 0;
}

/* --- Tableau de Bord des Performances --- */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.metric-card {
    background: var(--light-bg);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}
.metric-card i {
    font-size: 2.5rem;
    color: var(--fpv-green);
    margin-bottom: 1rem;
}
.metric-card .metric-value {
    display: block;
    font-family: var(--font-title);
    font-size: 2rem;
    color: white;
}
.metric-card .metric-label {
    font-size: 0.9rem;
    color: #ccc;
}

/* --- Galerie Média du Projet --- */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.3s;
}
.gallery-thumb:hover img {
    opacity: 0.8;
}

/* Style de la lightbox (déjà présent dans gallery-page.css mais on le remet ici pour être sûr) */
#lightbox { z-index: 2000; /*...etc...*/ }

/* --- NOUVEAUX STYLES POUR LA PAGE DÉTAIL DE DRONE --- */

.drone-layout {
    display: grid;
    /* On dit à la 2ème colonne de prendre 1.2 fois la place de la 1ère */
    grid-template-columns: 1fr 1.2fr; 
    gap: 2rem;
    align-items: start; /* Aligne le haut des deux colonnes */
}

@media (max-width: 900px) {
    .drone-layout { grid-template-columns: 1fr; }
}

.radar-chart-container {
    padding: 1rem;
    background: var(--dark-bg);
    border-radius: 8px;
    position: relative; /* Contexte de positionnement pour le canvas */
    height: 400px;      /* On définit une hauteur fixe pour le conteneur */
}

.pilot-notes {
    background-color: rgba(0, 170, 255, 0.05);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}
.pilot-notes::before {
    content: '"';
    font-family: var(--font-title);
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.2;
    float: left;
    margin-right: 0.5rem;
    line-height: 1;
}

.component-list {
    list-style: none;
    padding: 0;
}
.component-list li {
    background: var(--dark-bg);
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.component-list i {
    color: var(--primary-color);
    margin-right: 1rem;
}
.component-list strong {
    color: #ccc;
    margin-right: 0.5rem;
}

/* --- Style pour le message d'erreur de la page détail --- */
#loading-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Espace entre le texte et le bouton */
    color: #ccc;
}

#loading-error h2 {
    font-family: var(--font-title);
    color: #ff3232; /* Couleur rouge pour l'erreur */
}

/* ================================================= */
/* == STYLE POUR LES BLOCS DE CONTENU (MANQUANT)  == */
/* ================================================= */

.tuto-section {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    /* On met directement la bonne marge pour espacer les blocs */
    margin-bottom: 3rem; 
}

.tuto-section h2 {
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: white;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.tuto-section h2 .icon-header {
    margin-right: 0.75rem;
    color: var(--primary-color);
}

.kb-article-header { text-align: center; margin-bottom: 1rem; }
.kb-article-header .back-to-hub { display: inline-block; color: var(--primary-color); text-decoration: none; margin-bottom: 1rem; margin-top: 2rem; }