@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

:root {
    --fpv-blue: #00e5ff;
    --fpv-green: #00ff6a;
    --dark-bg: #0a0a0c;
    --card-bg: rgba(20, 25, 40, 0.6);
    --border-color: rgba(0, 229, 255, 0.2);
    --font-tech: 'Source Code Pro', monospace;
}

body {
    background-color: var(--dark-bg);
    color: #ccc;
}

/* --- Section Hero avec Vidéo --- */
.fpv-hero {
    position: relative;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(10, 10, 12, 0.4) 0%, rgba(10, 10, 12, 0.9) 100%);
    /* Effet scanlines (lignes d'écran) */
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 50%, transparent 50%);
    background-size: 100% 4px;
    z-index: -1;
}

.fpv-hero h1 {
    font-family: var(--font-title);
    font-size: 3rem;
    color: white;
    position: relative;
    text-shadow: 0 0 15px var(--fpv-blue);
}

/* Effet Glitch sur le H1 */
.fpv-hero h1:hover::before, .fpv-hero h1:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
    overflow: hidden;
}
.fpv-hero h1:hover::before {
    left: 2px;
    text-shadow: -2px 0 var(--fpv-blue);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.fpv-hero h1:hover::after {
    left: -2px;
    text-shadow: -2px 0 var(--fpv-green), 2px 2px var(--fpv-blue);
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 { 0% { clip-path: inset(40% 0 40% 0); } 100% { clip-path: inset(20% 0 55% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(70% 0 10% 0); } 100% { clip-path: inset(85% 0 5% 0); } }

.fpv-hero p {
    font-family: var(--font-tech);
    color: var(--fpv-blue);
    font-size: 1.2rem;
}

/* --- Contenu Principal --- */
.fpv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.briefing-section h2 {
    font-family: var(--font-tech);
    color: white;
    font-size: 1.5rem;
}

.terminal-green {
    color: var(--fpv-green);
}

.mission-text {
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 1rem;
    border-left: 3px solid var(--fpv-green);
    padding-left: 1rem;
}

/* --- Grille des Tutoriels --- */
.tuto-grid {
    margin-top: 4rem;
}

.module-title {
    font-family: var(--font-tech);
    color: var(--fpv-green);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 255, 106, 0.2);
    padding-bottom: 0.5rem;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.tuto-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: 8px;
    text-decoration: none;
    color: #ccc;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
    opacity: 0; /* Pour l'animation JS */
    transform: translateY(30px); /* Pour l'animation JS */
}

.tuto-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--fpv-blue);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.card-header {
    font-family: var(--font-tech);
    color: var(--fpv-blue);
    margin-bottom: 1rem;
}

.tuto-card .card-icon {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
}

.tuto-card h4 {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: white;
    margin-bottom: 0.5rem;
}

.tuto-card .card-cta {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--font-tech);
    color: var(--fpv-blue);
    transition: letter-spacing 0.3s ease;
}

.tuto-card:hover .card-cta {
    letter-spacing: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .fpv-hero h1 { font-size: 2.2rem; }
    .fpv-hero p { font-size: 1rem; }
}

/* --- Styles pour les pages de tutoriel individuelles --- */

.tuto-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    color: #ccc;
}

.tuto-header {
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.tuto-header h1 {
    font-family: var(--font-title);
    font-size: 2.8rem;
    color: white;
}

.tuto-header .subtitle {
    font-family: var(--font-tech);
    font-size: 1.1rem;
    color: var(--fpv-blue);
    margin-top: 0.5rem;
}

.tuto-section {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    border: 1px solid #2a2a2a;
}

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

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

.tuto-section p {
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.tuto-image {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.tuto-section h4 {
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--fpv-green);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.tuto-section ul {
    list-style: none;
    padding-left: 1.5rem;
}

.tuto-section ul li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    position: relative;
}

.tuto-section ul li::before {
    content: '»';
    color: var(--fpv-blue);
    position: absolute;
    left: -1.5rem;
    font-weight: bold;
}

.pilot-tip {
    background-color: rgba(0, 229, 255, 0.05);
    border-left: 4px solid var(--fpv-blue);
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pilot-tip .fa-lightbulb {
    font-size: 1.5rem;
    color: var(--fpv-blue);
}

.checklist-section {
    background-color: rgba(0, 255, 106, 0.05);
    border: 1px solid rgba(0, 255, 106, 0.2);
}

.checklist li {
    font-size: 1.1rem !important;
    padding-left: 0.5rem;
}

.checklist li::before {
    content: '' !important; /* On retire la puce '»' */
}

.checklist li .fa-check-circle {
    color: var(--fpv-green);
    margin-right: 0.75rem;
}

.tuto-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}

.nav-button {
    font-family: var(--font-tech);
    color: white;
    background-color: var(--light-bg);
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.nav-button:hover {
    background-color: var(--fpv-blue);
    color: var(--dark-bg);
    border-color: var(--fpv-blue);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
}

.nav-button .fas {
    margin: 0 0.5rem;
}

/* --- Styles pour le glossaire interactif --- */

.interactive-glossary {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    min-height: 400px;
}

.terms-list {
    flex: 0 0 200px; /* Ne grandit pas, ne rétrécit pas, base de 200px */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.term {
    font-family: var(--font-tech);
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.term:hover {
    background-color: var(--fpv-blue);
    color: var(--dark-bg);
}

.term.active {
    background-color: var(--fpv-green);
    border-color: var(--fpv-green);
    color: var(--dark-bg);
    font-weight: bold;
}

.definitions-list {
    flex-grow: 1;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 1.5rem;
    border: 1px solid #2a2a2a;
}

.definition {
    display: none; /* Caché par défaut, géré par JS */
    animation: fadeIn 0.5s ease-in-out;
}

.definition h4 {
    color: var(--fpv-green);
    margin-bottom: 0.75rem !important; /* Force la priorité sur le style h4 de base */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Style pour le fond animé --- */
.animated-bg {
    position: relative;
    overflow: hidden; /* Important pour contenir l'animation */
    z-index: 1;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 106, 0.05) 25%, 
        rgba(0, 255, 106, 0.0) 50%,
        rgba(0, 255, 106, 0.05) 75%,
        transparent 100%);
    z-index: -1;
    animation: wave-scroll 10s linear infinite;
}

@keyframes wave-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* Responsive pour le glossaire */
@media (max-width: 768px) {
    .interactive-glossary {
        flex-direction: column;
    }
    .terms-list {
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: auto; /* Annule la largeur fixe */
    }
    .term {
        flex-grow: 1;
        text-align: center;
    }
}

/* --- Styles pour la grille de comparaison des simulateurs --- */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.sim-card {
    background: rgba(0,0,0,0.2);
    padding: 1.5rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
}

.sim-card img {
    max-height: 80px;
    margin-bottom: 1rem;
}

.sim-card h3 {
    font-family: var(--font-title);
    color: white;
    margin-bottom: 0.5rem;
}

/* --- Styles pour le plan d'entraînement interactif --- */
.training-program {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.training-exercise {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: rgba(0,0,0,0.2);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 5px solid #444;
    cursor: pointer;
    transition: all 0.3s ease;
}

.training-exercise:hover {
    border-left-color: var(--fpv-blue);
}

.training-exercise.completed {
    background-color: rgba(0, 255, 106, 0.08);
    border-left-color: var(--fpv-green);
}

.training-exercise .checkbox {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 2px solid #555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.training-exercise .checkbox .fa-check {
    color: white;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.training-exercise.completed .checkbox {
    background-color: var(--fpv-green);
    border-color: var(--fpv-green);
}

.training-exercise.completed .checkbox .fa-check {
    opacity: 1;
    transform: scale(1);
}

.exercise-content h4 {
    font-family: var(--font-tech);
    color: white;
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}
.exercise-content p {
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.training-exercise.completed .exercise-content h4 {
    text-decoration: line-through;
    color: #888;
}

/* --- Styles pour la checklist pré-vol interactive --- */
.preflight-checklist {
    margin-top: 2rem;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.checklist-item {
    border-bottom: 1px solid #2a2a2a;
}
.checklist-item:last-child {
    border-bottom: none;
}

.checklist-header {
    font-family: var(--font-tech);
    background-color: rgba(0,0,0,0.2);
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.checklist-header:hover {
    background-color: var(--light-bg);
}

.checklist-header .phase {
    background-color: var(--fpv-blue);
    color: var(--dark-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-right: 1rem;
}

.checklist-header::after {
    content: '\f067'; /* Icone '+' de Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    transition: transform 0.3s ease;
}

.checklist-item.active .checklist-header::after {
    transform: rotate(135deg); /* Transforme le '+' en 'x' */
}

.checklist-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease;
    padding: 0 1.5rem;
    list-style: none !important;
}

.checklist-item.active .checklist-details {
    max-height: 500px; /* Doit être assez grand pour contenir le contenu */
    padding: 1.5rem;
}

.checklist-details li {
    position: relative;
    padding-left: 0;
}
.checklist-details li::before {
    content: '' !important; /* Retire les puces de base */
}
.checklist-details .fa-square {
    margin-right: 0.75rem;
    color: #555;
}

/* --- Styles pour le bloc d'avertissement de sécurité --- */
.safety-warning {
    background-color: rgba(255, 50, 50, 0.1);
    border-left: 4px solid #ff3232;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.safety-warning .fa-exclamation-triangle {
    font-size: 1.5rem;
    color: #ff3232;
}

/* --- Styles pour la liste numérotée --- */
.tuto-section ol {
    list-style: none;
    counter-reset: steps-counter;
    padding-left: 2.5rem;
}
.tuto-section ol li {
    counter-increment: steps-counter;
    margin-bottom: 1rem;
    position: relative;
}
.tuto-section ol li::before {
    content: counter(steps-counter);
    background: var(--fpv-blue);
    color: var(--dark-bg);
    font-family: var(--font-tech);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -3rem;
    top: -0.2rem;
}

/* --- Styles pour les tâches cochées de la checklist --- */

.checklist-details li {
    cursor: pointer; /* Indique que la ligne est cliquable */
    transition: color 0.3s ease;
}

.checklist-details li.completed {
    color: #888; /* Grise le texte */
    text-decoration: line-through; /* Barre le texte */
}

.checklist-details li .fa-check-square {
    color: var(--fpv-green); /* Met la coche en vert */
}

/* --- Styles pour l'analyseur de manœuvre --- */
.maneuver-analysis {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-top: 2rem;
}

.maneuver-visual {
    flex: 1;
}

.tuto-gif {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stick-visualizer-container {
    flex: 1;
    background-color: rgba(0,0,0,0.2);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
}
.stick-visualizer-container h4 {
    text-align: center;
    font-family: var(--font-tech);
    color: var(--fpv-green);
    margin: 0 0 1.5rem 0;
}
.stick-visualizer-container .instruction {
    font-family: var(--font-tech);
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}

.stick-visualizer {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.stick {
    width: 120px;
    height: 120px;
    background-color: rgba(10, 10, 12, 0.5);
    border-radius: 50%;
    border: 2px solid #333;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stick-label {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: var(--font-tech);
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    /* Empêche les libellés de gêner les clics */
    pointer-events: none; 
}

.stick-label span {
    position: absolute;
    transform-origin: center center;
}

/* --- Stick de Gauche (Throttle / Yaw) --- */

/* YAW (horizontal, en bas) */
.left-stick .stick-label span:nth-child(1) {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* THROTTLE (vertical, à gauche) */
.left-stick .stick-label span:nth-child(2) {
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    /* Fait pivoter le texte pour qu'il soit vertical */
    writing-mode: vertical-rl; 
}


/* --- Stick de Droite (Pitch / Roll) --- */

/* PITCH (vertical, à gauche) */
.right-stick .stick-label span:nth-child(1) {
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
}

/* ROLL (horizontal, en bas) */
.right-stick .stick-label span:nth-child(2) {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.stick-input {
    width: 40px;
    height: 40px;
    background-color: var(--fpv-blue);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--fpv-blue);
    position: absolute;
    transition: transform 0.2s ease-out;
}

/* Classes de position pour les sticks */
.stick-input.roll-right { transform: translateX(35px); }
.stick-input.pitch-back { transform: translateY(35px); }
.stick-input.throttle-up { transform: translateY(-35px); }
.stick-input.throttle-catch { transform: translateY(-25px) scale(1.1); background-color: var(--fpv-green); box-shadow: 0 0 15px var(--fpv-green); }


.maneuver-breakdown {
    margin-top: 2rem;
}
.maneuver-breakdown h4 {
    color: var(--fpv-green);
    margin-bottom: 1rem;
}
.maneuver-breakdown ol li {
    background-color: rgba(0,0,0,0.1);
    padding: 1rem;
    border-left: 3px solid #444;
    transition: all 0.2s ease;
    cursor: default;
}
.maneuver-breakdown ol li:hover {
    background-color: rgba(0,0,0,0.3);
    border-left-color: var(--fpv-green);
}

/* Responsive */
@media (max-width: 768px) {
    .maneuver-analysis {
        flex-direction: column;
    }
}



/* --- Styles pour le visualiseur de trajectoire du SPLIT-S --- */

.splits-visualizer .drone-path-icon {
    /* On utilise la nouvelle trajectoire SVG */
    offset-path: path('M 50 50 C 150 50, 250 250, 400 300 C 550 350, 700 350, 750 350');
    /* On utilise une nouvelle animation de rotation */
    animation: follow-splits-path 6s ease-in-out infinite;
}

.splits-visualizer .path-object-splits {
    position: absolute;
    top: 25%; /* L'obstacle est en haut cette fois */
    left: 40%;
    transform: translateX(-50%);
    color: var(--fpv-red, #ff3232); /* On peut définir une couleur rouge pour les obstacles */
    font-size: 6rem;
    opacity: 0.5;
}

@keyframes follow-splits-path {
    0%   { offset-distance: 0%;   transform: rotate(0deg); }
    15%  { transform: rotate(180deg); } /* Le roll se fait rapidement au début */
    60%  { transform: rotate(180deg); } /* Reste sur le dos pendant la plongée */
    100% { offset-distance: 100%; transform: rotate(360deg); } /* Se redresse à la fin */
}

/* --- Nouvelles classes pour les sticks du SPLIT-S --- */
/* (certaines sont réutilisées) */
.stick-input.roll-180 { transform: translateX(35px); }
.stick-input.pitch-pull { transform: translateY(35px); }

/* --- Styles pour l'Entraîneur de Réflexes --- */

.reflex-trainer {
    background: var(--dark-bg);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.trainer-display {
    width: 100%;
    text-align: center;
}

#trainer-screen {
    font-family: var(--font-tech);
    font-size: 2.5rem;
    font-weight: bold;
    padding: 2rem;
    border-radius: 5px;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    border: 2px solid #333;
}

/* États de l'écran */
.screen-standby { background-color: #1a1a1a; color: #555; }
.screen-go { background-color: var(--fpv-green); color: var(--dark-bg); border-color: var(--fpv-green); box-shadow: 0 0 30px var(--fpv-green); }
.screen-success { background-color: var(--fpv-blue); color: var(--dark-bg); border-color: var(--fpv-blue); }
.screen-fail { background-color: #ff3232; color: white; border-color: #ff3232; }


#trainer-results {
    font-family: var(--font-tech);
    color: #ccc;
    font-size: 1.2rem;
}

.trainer-controls {
    display: flex;
    gap: 2rem;
}

.control-btn {
    width: 120px;
    height: 120px;
    background-color: var(--light-bg);
    border: 2px solid #444;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.control-btn:hover {
    border-color: var(--fpv-blue);
    transform: translateY(-5px);
}

.control-btn.activated {
    border-color: var(--fpv-green);
    background-color: rgba(0, 255, 106, 0.1);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 106, 0.3);
}

/* --- Style pour les boutons du trainer lorsqu'ils sont désactivés --- */
.control-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none; /* La ligne magique qui les rend non cliquables */
}

.control-btn i {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.75rem;
}

.control-btn span {
    font-family: var(--font-tech);
    color: white;
    font-size: 1rem;
}

#start-trainer-btn {
    font-family: var(--font-tech);
    margin-top: 1rem;
}
/* ============================================= */
/* ==   STYLES RESPONSIVE POUR TUTO SPLIT-S   == */
/* ============================================= */

@media (max-width: 768px) {

    /* On force les modules d'analyse à s'empiler verticalement */
    .maneuver-analysis {
        flex-direction: column;
    }

    /* On s'assure que le visualiseur de stick prend toute la largeur */
    .stick-visualizer-container {
        width: 100%;
        max-width: 350px; /* On limite un peu pour ne pas être énorme */
        margin: 0 auto;   /* On le centre */
    }

    /* On ajuste le trainer de réflexes pour les petits écrans */
    .reflex-trainer {
        padding: 1.5rem;
    }

    #trainer-screen {
        font-size: 1.8rem;
        padding: 1.5rem;
    }

    .trainer-controls {
        gap: 1rem; /* On réduit l'espace entre les boutons */
    }

    .control-btn {
        width: 100px;
        height: 100px;
    }

    .control-btn i {
        font-size: 2rem;
    }
}

/* ========================================================== */
/* == STYLES ADDITIONNELS POUR LA PAGE "TRANSMISSION VIDÉO" == */
/* ========================================================== */

/* --- Module Interactif Générique --- */
.interactive-module {
    background: var(--dark-bg);
    border: 1px solid #333;
    border-radius: 8px;
    margin-top: 2rem;
    overflow: hidden;
}

.module-header {
    font-family: var(--font-tech);
    background: #2a2a2a;
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-align: center;
    letter-spacing: 1px;
}

.simulator-display {
    position: relative;
    padding: 1rem;
    text-align: center;
}

.simulator-controls {
    background: var(--light-bg);
    padding: 1rem;
    text-align: center;
}

/* --- Simulateur de FOV --- */
.fov-simulator .simulator-display {
    aspect-ratio: 16 / 9;
    padding: 0; /* Pas de padding pour que l'image colle aux bords */
}

.fov-simulator img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.fov-simulator .fov-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* On utilise un clip-path en cercle pour simuler le "tunnel" de l'objectif */
    clip-path: circle(75% at center);
    background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.9) 100%);
    transition: clip-path 0.2s ease-out;
}

.fov-simulator label {
    font-family: var(--font-tech);
    color: #ccc;
}

#fov-value {
    color: var(--fpv-green);
    font-weight: bold;
}

/* Style custom pour les sliders */
.styled-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 5px;
    background: #333;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    margin-top: 0.5rem;
}
.styled-slider:hover {
    opacity: 1;
}
.styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid var(--dark-bg);
}
.styled-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid var(--dark-bg);
}


/* --- Simulateur de Puissance/Portée --- */
.power-range-simulator .simulator-display {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.power-range-simulator .drone-icon {
    font-size: 2rem;
    color: var(--fpv-green);
    z-index: 2;
    text-shadow: 0 0 10px var(--fpv-green);
}
.power-range-simulator .range-circle {
    position: absolute;
    border: 2px dashed rgba(0, 170, 255, 0.5);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s;
}
.power-range-simulator .range-circle.visible {
    transform: scale(1);
    opacity: 1;
}

#range-1 { width: 100px; height: 100px; }
#range-2 { width: 160px; height: 160px; transition-delay: 0.1s; }
#range-3 { width: 220px; height: 220px; transition-delay: 0.2s; }
#range-4 { width: 280px; height: 280px; transition-delay: 0.3s; }

.power-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.power-buttons .sim-btn {
    font-family: var(--font-tech);
    border: 1px solid #444; background: var(--dark-bg); color: #ccc; 
    padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; transition: all 0.2s;
}
.power-buttons .sim-btn:hover { background: #333; color: white; }
.power-buttons .sim-btn.active {
    background: var(--fpv-green); color: var(--dark-bg);
    border-color: var(--fpv-green); font-weight: bold;
}

/* --- Liste générique de tuto --- */
.tuto-list {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1rem;
}
.tuto-list li {
    position: relative;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.tuto-list li::before {
    content: '\f105'; /* fa-chevron-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
    position: absolute;
    left: -1.5rem;
}

/* --- Vitrine des Marques --- */
.brand-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    padding: 1rem;
    background: var(--dark-bg);
    border-radius: 8px;
}
.brand-showcase img {
    height: 40px;
    max-width: 150px;
    filter: grayscale(80%) brightness(0.8);
    transition: all 0.3s ease;
    cursor: help;
}
.brand-showcase img:hover {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.1);
}

/* ========================================================== */
/* ==      STYLES POUR LA PAGE DÉTAIL "COMMANDE RADIO"     == */
/* ========================================================== */

/* --- Visualiseur de Liaison de Données --- */
.data-link-visualizer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}
.device-node {
    text-align: center;
    font-family: var(--font-tech);
}
.device-node i {
    font-size: 3rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}
.link-path {
    flex-grow: 1;
    margin: 0 1rem;
    text-align: center;
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: #888;
}
.command-link { border-top: 2px dashed var(--fpv-green); }
.telemetry-link { border-bottom: 2px dashed var(--fpv-blue); }

.data-packet {
    width: 10px;
    height: 10px;
    background-color: var(--fpv-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--fpv-green);
    position: absolute;
    top: -6px; /* Ajustement pour être sur la ligne */
}
.telemetry-link .data-packet {
    background-color: var(--fpv-blue);
    box-shadow: 0 0 8px var(--fpv-blue);
    top: auto;
    bottom: -6px;
    animation: move-right-to-left 3s linear infinite;
}
.command-link .data-packet {
    animation: move-left-to-right 3s linear infinite;
}

@keyframes move-left-to-right {
    from { left: 0; }
    to { left: 100%; }
}
@keyframes move-right-to-left {
    from { left: 100%; }
    to { left: 0; }
}


/* --- Sélecteur de Mode de Pilotage --- */
.mode-selector {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
}
.radio-view {
    position: relative;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #333;
    width: 45%;
}
.radio-header {
    text-align: center;
    font-family: var(--font-tech);
    color: var(--fpv-green);
    margin-bottom: 1rem;
}
.radio-view img {
    width: 100%;
    opacity: 0.8;
}
.stick-info {
    position: absolute;
    font-family: var(--font-tech);
    color: white;
    font-size: 0.9rem;
    line-height: 1.5;
    background: rgba(0, 170, 255, 0.2);
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}


/* --- Comparateur de Gimbals --- */
.gimbal-anim-container {
    height: 60px;
    background: var(--dark-bg);
    border-radius: 5px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #333;
}
/* Animation potentiomètre */
.potentiometer-anim {
    width: 80%;
    height: 10px;
    background: #555;
    position: relative;
}
.potentiometer-anim .wiper {
    width: 5px;
    height: 20px;
    background: var(--primary-color);
    position: absolute;
    top: -5px;
    animation: swipe 2s ease-in-out infinite alternate;
}
@keyframes swipe {
    from { left: 0; }
    to { left: 95%; }
}
/* Animation effet hall */
.hall-effect-anim {
    width: 80%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.hall-effect-anim .magnet {
    width: 15px;
    height: 25px;
    background: linear-gradient(to bottom, #ff5f56, #56aaff);
    animation: hover-near 2s ease-in-out infinite alternate;
}
.hall-effect-anim .sensor {
    width: 10px;
    height: 10px;
    background: #888;
    transition: all 0.2s;
}
@keyframes hover-near {
    from { transform: translateY(-10px); }
    to { transform: translateY(10px); }
}
.hall-effect-anim:hover .sensor {
    background: var(--fpv-green);
    box-shadow: 0 0 10px var(--fpv-green);
}

/* --- Terminal de Protocoles --- */
.protocol-terminal {
    display: flex;
    background: var(--dark-bg);
    border: 1px solid #333;
    border-radius: 8px;
    min-height: 300px;
    margin-top: 2rem;
    font-family: var(--font-tech);
}
.protocol-list {
    flex-basis: 200px;
    border-right: 1px solid #333;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.protocol-item {
    padding: 0.8rem;
    background: var(--light-bg);
    cursor: pointer;
    transition: all 0.2s;
}
.protocol-item:hover {
    background: #3a3a3a;
}
.protocol-item.active {
    background: var(--fpv-green);
    color: var(--dark-bg);
    font-weight: bold;
}
.protocol-display {
    flex-grow: 1;
    padding: 1.5rem;
}
.protocol-display h3 {
    color: var(--fpv-green);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.proto-specs {
    display: flex;
    gap: 2rem;
    color: #ccc;
    margin-bottom: 1rem;
}
.protocol-display p {
    color: #aaa;
    line-height: 1.6;
    min-height: 50px;
}
.proto-stats { margin-top: 2rem; }
.stat-bar { margin-bottom: 1rem; }
.stat-bar label {
    display: block;
    margin-bottom: 0.3rem;
    color: #888;
    font-size: 0.8rem;
}
.bar-bg {
    width: 100%;
    height: 10px;
    background: #1e1e1e;
    border-radius: 5px;
    border: 1px solid #333;
}
.bar-value {
    height: 100%;
    background: var(--primary-color);
    border-radius: 5px;
    transition: width 0.5s ease-out;
}
.bar-value.latency {
    background: var(--fpv-green);
}

/* --- Animation Module Bay --- */
.module-bay-anim {
    position: relative;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.radio-back-img {
    position: relative;
    height: 100%;
}
.module-img {
    position: absolute;
    top: -10%;
    height: 80%;
    animation: slide-in-module 4s ease-in-out infinite;
}
@keyframes slide-in-module {
    0%, 20% {
        transform: translateX(150px);
        opacity: 0;
    }
    40%, 80% {
        transform: translateX(-19px);
        opacity: 1;
    }
    100% {
        transform: translateX(150px);
        opacity: 0;
    }
}