:root {
            --ldlc-dark: #001b3d;      /* Bleu nuit header */
            --ldlc-cyan: #00a1d9;      /* Bleu bouton cat gorie */
            --win-grey: #c0c0c0;       /* Gris Windows 95 */
            --win-blue: #363636;       /* Bleu barres de titre */
            --terminal-green: #33ff33; /* Vert Matrix */
            --terminal-bg: #000000;    /* Fond noir pur */
            --amber: #FFB000;          /* Orange/Ambre titre */
        }

        body {
            margin: 0;
            background-color: #fdf6e3;
            color: rgb(0, 0, 0);
            font-family: 'Segoe UI', Arial, sans-serif;
        }

    /* --- BARRE DE NAVIGATION (RUBAN) --- */
        /* Le conteneur principal */
        .nav-retro {
            display: flex;
            align-items: stretch;
            background-color: #2b2b2b; /* Un gris légèrement plus chaud et pro */
            height: 60px;
            border-bottom: 2px solid #1a1a1a;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Donne du relief par rapport au reste du site */
        }

        /* Bloc Logo à gauche */
        .logo-nav {
            display: flex;
            align-items: center;
            padding: 0 25px;
            background-color: rgba(0,0,0,0.2); /* Détache le logo du reste */
            font-family: 'VT323', monospace;
            font-size: 1.8rem;
            letter-spacing: 1px;
        }

        .logo-nav span {
            color: #FFB000; /* Ton orange AMBER */
            margin-left: 5px;
        }

        /* Chaque Item de navigation */
        .nav-item-retro {
            display: flex;
            align-items: center;
            padding: 0 20px;
            color: #e0e0e0;
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-right: 1px solid rgba(255,255,255,0.05); /* Séparateur plus subtil */
            transition: all 0.3s ease;
            cursor: pointer;
            background: transparent;
            border-top: none;
            border-bottom: none;
        }

        /* L'icône dans l'item */
        .nav-item-retro img {
            height: 24px;
            width: auto;
            margin-right: 12px;
            filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); /* Donne du volume à l'icône */
            image-rendering: pixelated; /* Garde le look net des icônes retro */
        }

        /* --- L'EFFET QUI CHANGE TOUT : LE HOVER --- */
        .nav-item-retro:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: #00a1d9; /* Ton bleu LDLC/Tech */
            box-shadow: inset 0 -3px 0 #00a1d9; /* Barre de soulignement interne */
        }

        .nav-item-retro:hover img {
            transform: scale(1.1); /* Petit zoom sur l'icône au survol */
            filter: drop-shadow(0 0 5px rgba(0, 161, 217, 0.5)); /* Lueur bleue derrière l'icône */
        }

        /* Bloc Logo à gauche */
        .logo-nav {
            display: flex;
            align-items: center;
            padding: 0 25px;
            background-color: rgba(0,0,0,0.2); /* Détache le logo du reste */
            font-family: 'VT323', monospace;
            font-size: 1.8rem;
            letter-spacing: 1px;
            color: #ffffff;
        }
        .logo-nav span {
            color: #FFB000; /* Ton orange AMBER */
            margin-left: 5px;
        }
        



    /* --- CONTENU PRINCIPAL --- */
        .detail-xl {
            background: var(--win-grey);
            border: 2px solid #fff;
            padding: 3px;
            
            /* --- AJOUTE CES LIGNES --- */
            display: flex;
            flex-direction: column; 
            height: 800px;    /* On définit une hauteur totale pour la fenêtre grise */
            overflow: hidden; /* On empêche la fenêtre grise de scroller elle-même */
        }

        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
        }

        .hero-card {
            background: var(--terminal-bg);
            border: 2px solid #fff;
            padding: 2px;
            margin-bottom: 30px;
        }

        .card-content { 
            background: black; 
            height: 700px; /* Ta hauteur XL */
            overflow-y: auto; /* L'ascenseur apparaît seulement ici si besoin */
            padding: 30px; 
            border: 3px inset #fff; 
            color: var(--amber); 
        }

        .card-header {
            background: #808080;
            color: white;
            padding: 5px 10px;
            font-weight: bold;
            
            /* --- AJOUTE CETTE LIGNE --- */
            flex-shrink: 0; /* Empêche la barre de titre de disparaître ou de bouger */
        }

        .home-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .logo-text {
            font-family: 'VT323', monospace;
            font-size: 2rem;
            margin: 0;
            color: white;
        }

        .logo-text span { color: #ff6600; }

        .home-nav {
            font-family: 'VT323', monospace;
            font-size: 1.2rem;
        }

        .home-nav a { color: var(--terminal-green); text-decoration: none; margin: 0 5px; }

        .welcome-title {
            font-family: 'VT323', monospace;
            color: var(--amber);
            text-align: center;
            font-size: 3rem;
            margin: 20px 0;
        }

        .terminal-container p {
            color: var(--amber);
            font-size: 1.1rem;
            line-height: 1.4;
        }

    /* --- GRID VID OS (WINDOWS 95 STYLE) --- */
        .home-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .video-card {
            background: var(--win-grey);
            border: 2px solid #fff;
            border-right-color: #444;
            border-bottom-color: #444;
            padding: 3px;
             /* Impose une hauteur fixe (ajuste cette valeur à ta guise) */
            overflow-y: auto; /* Ajoute une barre de défilement verticale si le texte déborde */
        /* ------------------------- */
        }

        .card-content { 
            background: black; 
            flex-grow: 1;      /* Elle prend tout l'espace restant sous le titre */
            overflow-y: auto;  /* L'ascenseur n'apparaît QUE ici */
            padding: 30px; 
            border: 3px inset #fff; 
            color: var(--amber); 
        }

        .video-body {
            background: black;
            border: 2px inset #fff;
            padding: 15px;
            color: var(--amber);
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            margin-bottom: 15px;
        }

        .video-container iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
        }

        .retro-btn {
            display: inline-block;
            background: var(--win-grey);
            border: 2px solid #fff;
            border-right-color: #000;
            border-bottom-color: #000;
            padding: 8px 15px;
            color: black;
            text-decoration: none;
            font-weight: bold;
            font-size: 13px;
            margin-top: 10px;
        }

        .retro-btn:active { border: 2px inset #fff; }

    /* --- TERMINAL --- */
        .window {
            background: var(--win-grey);
            border: 2px solid #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            margin-top: 30px;
        }

        .window-title {
            background: var(--win-blue);
            color: white;
            padding: 4px 10px;
            font-weight: bold;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
        }

        .window-body {
            background: #050505;
            color: var(--terminal-green);
            padding: 15px;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            border: 2px inset #fff;
        }

        .tag-retro { color: var(--amber); }
        .tag-tech { color: #00d4ff; }
        .tag-video { color: #ff4444; }
        .pulse { animation: blink 1s infinite; }
        @keyframes blink { 50% { opacity: 0; } }

        @media (max-width: 992px) {
            .home-grid { grid-template-columns: 1fr; }
            .header-top { padding: 0 10px; }
            .search-bar-container { margin: 0 10px; }
        }
	    .text-title-vert {
            font-family: 'VT323', monospace;
            color: var(--terminal-green);
            text-align: center;
            font-size: 2rem;
            margin: 20px 0;
        }

	    /* On cible l'image à l'intérieur du container */
	    .video-container img.img-retro-preview {
    		position: absolute;
    		top: 0;
    		left: 0;
   		    width: 100%;
    		height: 100%;
    
    	/* TRÈS IMPORTANT : object-fit évite que l'image soit écrasée */
    	/* 'cover' remplit le cadre, 'contain' montre l'image entière avec des bords noirs */
    	object-fit: cover; 
    
    	border: 1px solid #444; /* Un petit liseré pour rester dans le style */
	    }





    /* ==========================================================================
    /*CSS Section Home Youtube Video
    ========================================================================== */
        :root {
            --sidebar-bg: #333333;         /* Gris foncé du fond de la sidebar */
            --btn-border-blue: #00a1d9;    /* Bleu néon pour les bordures et le survol */
        }

        /* ==========================================================================
        CONTENEUR PRINCIPAL (Pour aligner le menu et le contenu)
        ========================================================================== */
        .youtube-page-wrapper {
            display: flex;
            min-height: calc(100vh - 60px); /* S'adapte sous la navbar de 60px */
        }

        /* ==========================================================================
        BANDEAU LATÉRAL GAUCHE (SIDEBAR)
        ========================================================================== */
        .youtube-sidebar {
            width: 260px;
            background-color: var(--sidebar-bg);
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            border-right: 3px solid #222222;
            
            /* Permet au menu de rester fixe à l'écran lors du défilement */
            position: sticky;
            top: 60px; 
            height: calc(100vh - 60px);
            box-sizing: border-box;
        }

        /* En-tête textuel discret en haut du menu */
        .sidebar-header-title {
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 25px;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #555555;
            padding-bottom: 8px;
        }

        /* Titre principal "CATEGORIES" */
        .sidebar-main-title {
            color: #ffffff;
            font-size: 1.4rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 25px;
            letter-spacing: 1px;
        }

        /* Conteneur de la liste de boutons */
        .sidebar-buttons-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        /* --- ÉTAT ACTIF (Quand on se trouve sur la page de la catégorie) --- */
        .yt-cat-btn.active {
            background-color: var(--btn-border-blue); /* Remplissage en bleu cyan */
            color: #ffffff;
            box-shadow: 0 0 15px rgba(0, 161, 217, 0.8); /* Lueur néon constante */
            border-color: #ffffff; /* Optionnel : passe la bordure en blanc pour faire ressortir le bouton */
            pointer-events: none; /* Optionnel : désactive le clic sur le bouton puisqu'on y est déjà */
        }

        /* ==========================================================================
        STYLE DES BOUTONS DE CATÉGORIES (yt-cat-btn)
        ========================================================================== */
        .yt-cat-btn {
            display: flex;
            align-items: center;
            background-color: #222222; /* Fond noir du bouton */
            border: 2px solid var(--btn-border-blue);
            border-radius: 8px;
            padding: 12px 15px;
            color: #ffffff;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 0 8px rgba(0, 161, 217, 0.3); /* Légère lueur bleue */
        }

        /* Icônes pixelisées de Windows 98 */
        .yt-cat-btn img {
            width: 26px;
            height: auto;
            margin-right: 15px;
            image-rendering: pixelated; /* Garde les icônes rétro bien nettes sans flou */
        }

        /* Texte à l'intérieur du bouton */
        .yt-cat-btn span {
            font-weight: bold;
            font-size: 1.05rem;
            letter-spacing: 0.5px;
        }

        /* --- EFFET AU SURVOL (HOVER) --- */
        .yt-cat-btn:hover {
            background-color: var(--btn-border-blue); /* Le bouton se remplit de bleu cyan */
            color: #ffffff;
            box-shadow: 0 0 15px rgba(0, 161, 217, 0.8); /* Amplification de la lueur */
            transform: translateX(5px); /* Léger décalage dynamique vers la droite */
        }

        /* ==========================================================================
        VARIABLES UTILISÉES PAR LA ZONE CENTRALE
        ========================================================================== */
        :root {
            --bg-cream: #fdf6e3;           /* Fond crème de la page */
            --win-blue: #000080;           /* Bleu foncé pour la barre de titre de la fenêtre */
            --terminal-green: #33ff33;     /* Vert Matrix pour le curseur clignotant */
        }

        /* ==========================================================================
        ZONE DE DROITE (CONTENU PRINCIPAL)
        ========================================================================== */
        .youtube-main-content {
            flex-grow: 1;                 /* Occupe tout l'espace restant à droite du menu */
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;          /* Centre les éléments horizontalement */
            background-color: var(--bg-cream);
        }

        /* --- LA BANNIÈRE YOUTUBE --- */
        .youtube-banner {
            width: 100%;
            max-width: 1000px;
            margin-bottom: 40px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .banner-img {
            width: 100%;
            height: auto;
            display: block;
            border: 2px solid #222222;
        }

        /* ==========================================================================
        FENÊTRE D'APPLICATION STYLE RÉTRO (welcome-app-window)
        ========================================================================== */
        .welcome-app-window {
            width: 100%;
            max-width: 700px; /* Aligne la taille sur ce que tu avais initialement */
            background: #ffffff;
            border: 3px solid var(--win-blue);
            box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
            align-self: flex-start; /* Force la fenêtre à se caler proprement à gauche sous la bannière */
        }

        /* Barre supérieure de la fenêtre (Barre de titre) */
        .app-window-header {
            background: var(--win-blue);
            color: #ffffff;
            padding: 6px 12px;
            display: flex;
            justify-content: space-between;         /* Titre à gauche, boutons à droite */
            align-items: center;
            font-weight: bold;
            font-size: 0.95rem;
        }

        /* Zone des contrôles (Réduire, Agrandir, Fermer) */
        .app-window-controls span {
            margin-left: 10px;
            cursor: pointer;
            font-family: monospace;
            font-weight: bold;
        }

        .close-btn {
            color: #ff4444;                         /* Le bouton X en rouge */
        }

        /* Intérieur du corps de la fenêtre */
        .app-window-body {
            padding: 30px;
            color: #000000;
            background: #ffffff;                    /* Fond blanc classique */
        }

        /* --- CONTENU DE LA FENÊTRE DE BIENVENUE --- */
        .welcome-heading {
            color: #ff6600;                         /* Ton orange vif pour le titre */
            font-size: 1.6rem;
            font-weight: bold;
            text-align: center;
            margin-top: 0;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .welcome-subheading {
            font-size: 1.25rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
            color: #333333;
        }

        .welcome-instructions {
            padding-left: 20px;
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 0;
        }

        .welcome-instructions li {
            list-style-type: square;                /* Puces carrées rétro */
            line-height: 1.6;
        }

        /* ==========================================================================
        STYLE COMPLÉMENTAIRE POUR LE TERMINAL COMMUNAUTAIRE
        ========================================================================== */
        .tag-video {
            color: #ff4444;                         /* Rouge pour le tag [YOUTUBE] */
            font-weight: bold;
        }

        /* Effet de clignotement du curseur (animation pulse) */
        .pulse {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }
    /* ==========================================================================
    GRILLE TYPE YOUTUBE
    ========================================================================== */
        .youtube-theme-title {
            color: #ffffff;
            background-color: #222222;
            padding: 10px 20px;
            font-size: 1.4rem;
            font-weight: bold;
            border-left: 5px solid var(--btn-border-blue);
            align-self: flex-start;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
        }

        /* ==========================================================================
        GRILLE DE VIDÉOS STYLE YOUTUBE
        ========================================================================== */
        .youtube-video-grid {
            display: grid;
            /* Crée automatiquement des colonnes d'au moins 300px qui remplissent l'espace */
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            width: 100%;
            max-width: 1200px; /* Largeur maximale de la grille complète */
        }

        /* ==========================================================================
        CARTE VIDÉO INDIVIDUELLE (yt-video-card)
        ========================================================================== */
        .yt-video-card {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border: 2px solid #333333;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .yt-video-card:hover {
            transform: translateY(-4px);
            box-shadow: 6px 6px 0px rgba(0, 161, 217, 0.4);
            border-color: var(--btn-border-blue);
        }

        /* Conteneur du lecteur / Lecteur vidéo intégré (Iframe) */
        .yt-video-launcher {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* Ratio 16:9 obligatoire pour YouTube */
            background-color: #000000;
        }

        .yt-video-launcher iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Métadonnées et textes sous la vidéo */
        .yt-video-info {
            padding: 15px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        /* Titre de la vidéo */
        .yt-video-title {
            font-size: 1.1rem;
            font-weight: bold;
            color: #111111;
            margin: 0 0 8px 0;
            line-height: 1.4;
            /* Coupe le texte avec des points de suspension si le titre fait plus de 2 lignes */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Description de la vidéo */
        .yt-video-description {
            font-size: 0.9rem;
            color: #555555;
            margin: 0;
            line-height: 1.5;
            /* Coupe le texte après 3 lignes pour garder des cartes harmonieuses */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }