/* =================================================================
         * 1. VARIABLES ET STYLES GLOBAUX   
         * ================================================================= */
        :root {
            --color-primary: #CCCCFF; 
            --color-secondary: #333; 
            --color-link: #020E4C;
            --color-visited-link: #213CCC;
            --color-content-bg: rgba(0, 0, 0, 0.6);  /* couleur fond container 1 */
            --color-dark-bg: rgba(0, 0, 0, 0.6);           /* couleur bandeaux */
            --color-blue-bg: rgba(128, 128, 158, 0.8);     /* couleur container 2 */	
            --font-main: Arial, Helvetica, sans-serif;
            --font-impact: 'Impact', 'Arial Black', sans-serif; 
            --max-width: 1200px;

        }

        /* Styles de base pour le corps */
        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: var(--font-main);
            line-height: 1.2;
			font-size: 20px;                  /* taille du texte */							
        }

        /* Page Liens  */
        a { color: var(--color-link); text-decoration: none;  transition: color 0.3s; }
        a:visited { color: var(--color-visited-link); }
        a:hover { color: orange; text-decoration: underline; } 


        h1 {
            font-family: var(--font-impact);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            color: var(--color-primary);
        }
		
        h2, h3 {
            font-family: 'Arial Black';
            color: var(--color-primary);

        }		
		
        
        /* Bouton générique */
        .button {
            display: inline-block;		
            background-color: var(--color-primary);
            color: black !important;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: 15px;
            font-weight: bold;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .button:hover { background-color: #9999FF; text-decoration: none; }
        
        /* =================================================================
         * 2. CONTENEUR PRINCIPAL (page-wrapper) et SECTIONS
         * ================================================================= */

        .page-wrapper {
            max-width: var(--max-width);
            margin: 0 auto; 
            padding: 0 20px;
        }

        /* Conteneur principal pour toutes les sections */
        .section {
            padding-top: 20px; 
            padding-bottom: 50px;
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;			
            min-height: 10vh; 
            position: relative;
			
        }
        
        /* Définition des fonds spécifiques à chaque section */
        .section-home { background-image: url('images/icare2.webp'); color: #87CEEB; }
        .section-imagination { background-image: url('images/icare13.webp'); color: #87CEEB; }			
        .section-animation { background-image: url('images/icare14.webp'); color: #87CEEB; }
        .section-creation { background-image: url('images/icare12.webp'); color: #87CEEB; }	
        .section-atelier { background-image: url('images/icare8.webp'); color: #87CEEB; }
        .section-presse { background-image: url('images/icare7.jwebp'); color: #87CEEB; }
        .section-liens { background-image: url('images/icare6.webp'); color: #87CEEB; }
		.section-apropos { background-image: url('images/icare14.webp'); color: #87CEEB; }
        .section-recyclage { background-image: url('images/icare17.webp'); color: #87CEEBC; }
        .section-newcv { background-image: url('images/icare11.webp'); color: #87CEEB; }
        .section-cielvolant { background-image: url('images/icare21.webp'); color: #87CEEB; }
        
        .header-title h1 { 
		    font-size: clamp(2.5rem, 6vw, 4rem); 
		    margin-bottom: 20px; 
		}

        /* Conteneurs de contenu (Boîtes claires) */
        .main-column, .links-column, .content-box {
            padding: 20px;
            background-color: var(--color-content-bg);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            min-height: 300px; 
        }

        /* Adapte les boîtes pour les fonds sombres */
        .section-animation .main-column, 
        .section-recyclage .main-column, 
        .section-cielvolant .main-column,
        .section-newcv .main-column {
            background-color: rgba(0, 0, 0, 0.45);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
		
		.section-apropos .main-column {
			/* Utilisation d'un fond bleu plus opaque pour se détacher du fond d'image */
			background-color: rgba(0, 0, 0, 0.5); 
			border: 1px solid rgba(255, 255, 255, 0.5);
			min-height: auto; /* Supprime le min-height pour s'adapter au contenu */
		}		
				
		
        /* Structure Flexbox pour la Création et le Recyclage */
        .layout-container {
            display: flex;
            flex-wrap: wrap; 
            gap: 40px; 
            padding-bottom: 30px;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 0px;
        }
        
        .main-column { flex: 1 1 730px; }
        .links-column { flex: 1 1 300px; }

        /* =================================================================
         * 3. CODAGE DU MENU FIXE (Burger)
         * ================================================================= */
        #menuToggle {
            display: block;
            position: fixed;
            top: 30px;
            right: 30px;
            z-index: 100; 
            user-select: none;
        }
        #menuToggle a { color: var(--color-primary); font-size: 1.2rem; font-family: var(--font-impact); }
        #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; }
        #menuToggle span { 
            display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: white; border-radius: 3px; z-index: 1; 
            transform-origin: 4px 0px; 
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; 
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
        }
        #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(0px, -2px); background: white; }
        #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
        #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(-1px, 2px); }
        #menu {
            position: absolute;
            width: 200px;
            margin: -100px 0 0 -150px;
            padding: 50px;
            padding-top: 125px;
            background: var(--color-dark-bg);
            list-style-type: none;
            transform-origin: 0% 0%;
            transform: translate(100%, 0);
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            border-radius: 10px;
        }
        #menu li { padding: 10px 0; font-size: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
        #menuToggle input:checked ~ ul { transform: none; }
        
        /* =================================================================
         * 4. STYLES DU MENU ICARE (ACCUEIL)
         * ================================================================= */

        .icare-title {
            text-align: center;
            color: white;
            text-shadow: 3px 3px 6px black;
            font-size: clamp(2.5rem, 6vw, 4rem);
            margin-bottom: 15px;
        }
        
        /* Conteneur principal du menu ICARE pour le centrage */
        .icare-menu-container {
            display: flex;
            justify-content: left; 
            width: 100%;
            margin-top: 10px; 
        }

        .icare-menu {
            display: flex;
            flex-direction: column; 
            align-items: flex-start; 
            list-style: none;
            padding: 30px;
            margin: 0;
            width: 100%; 
            max-width: 250px; 
            margin-left: 40px; 
        }
        
        /* Menu Item - Conteneur principal */
        .icare-item {
            position: relative; 
            background-color: rgba(204, 204, 255, 0.9);  /* couleur lignes */
            padding: 8px 10px; 
            margin-bottom: 20px;                         /* espace entre lignes */
            border-radius: 5px;
            width: calc(100% - 20px); 
            box-sizing: border-box; 
            transition: background-color 0.3s;
            text-align: left;
        }
    
        /* Style des icônes I, C, A, R, E */
        .icare-icon {
            position: absolute; /* Positionnement absolu pour le sortir du flux */
            top: 50%;
            left: 0; 
            transform: translate(-100%, -50%); 
            height: 40px; 
            width: 40px;
            z-index: 10; 
        }

        /* Style du lien (le texte) */
        .icare-item a {
            font-family: var(--font-impact);
            font-size: clamp(1rem, 3.5vw, 1.5rem);
            color: var(--color-secondary);
            text-shadow: none; 
            display: block;
            text-transform: uppercase;
            text-decoration: none;
            padding-left: 5px; 
        }

        .icare-item:hover {
            background-color: #9999FF; 
        }

        /* --- Image/Display Area --- */
        .image-display {
            display: none; 
        }
		
        /* --- DESKTOP/TABLET LAYOUT (Media Query) --- */
        @media (min-width: 768px) {
            .icare-title {
                margin-top: 50px; 
            }

            .icare-menu-container {
                margin-top: 30px;
                flex-direction: row; 
                justify-content: space-around; 
            }

            .icare-menu {
                width: auto; 
                max-width: none;
                flex-direction: column;
                align-items: flex-start;
                margin-right: 50px; 
                margin-left: 40px; 
            }

            .icare-item {
                width: 300px; 
                padding: 8px 20px; 
            }
            
            /* Ajustement de la position de l'icône pour le desktop */
            .icare-icon {
                /* Décalage supplémentaire pour un effet plus prononcé si nécessaire */
                transform: translate(-120%, -50%); 
                height: 50px; 
                width: 50px;
            }

            .image-display {
                display: block; 
                flex-grow: 1;
                margin-top: 0;
                text-align: right;
            }
            #nomimage1 {
                max-width: 5; 
                height: auto;
            }

			/* --- Footer/Social Links --- */
			.footer-links {
				display: flex;
				justify-content: center; 
				align-items: center;
				padding: 20px 0;
				width: 90%;
				max-width: var(--max-width);
				margin-top: 40px;
				margin-left: auto;
				margin-right: auto;
			}
			.footer-links a { margin: 0 10px; }
			.footer-links img {
				height: 50px;
				width: auto;
				border: none;
				transition: transform 0.3s;
			}
			
			.footer-links {
                justify-content: flex-end; 
            }
        }

        /* =================================================================
         * 4. STYLES SPÉCIFIQUES AUX SECTIONS
         * ================================================================= */
		
        /* --- Galerie Responsive (Grid) --- */
		/* --- Galerie Responsive AMÉLIORÉE (Grid) --- */
		.gallery-grid {
			display: grid;
			/* Adapte la colonne à 220px minimum pour un meilleur équilibre visuel */
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
			gap: 20px; /* Augmentation de l'espacement */
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.gallery-grid li {
			position: relative; /* Point d'ancrage pour l'overlay */
			overflow: hidden; /* Important pour masquer l'overflow de l'image au hover */
			border-radius: 10px; /* Coins arrondis pour un look plus moderne */
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Ombre légère pour détacher de l'arrière-plan */
			transition: transform 0.3s ease;
		}

		.gallery-grid li:hover { 
			transform: translateY(-5px); /* Léger soulèvement au survol */
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
		}

		/* Style de l'image */
		.gallery-grid img {
			width: 100%;
			height: 100%; /* Hauteur fixe pour que toutes les vignettes soient uniformes */
			display: block;
			object-fit: cover; /* Assure que l'image couvre la zone sans déformation */
			border: none; /* Suppression de la bordure pour un look plus épuré */
			transition: transform 0.4s ease;
		}

		/* --- Limiter la hauteur des vignettes d'affiches UNIQUEMENT sur la page Événements --- */
		#ateliers .gallery-grid li img {
			/* Limite la hauteur maximale de l'image (l'affiche) à 160 pixels */
			max-height: 160px; 
			
			/* Maintient les proportions de l'image 
			height: auto; 
			width: auto;   */
			
			/* Centre l'image s'il y a de l'espace autour */
			margin: 0 auto;
		}

		/* --- Limiter la hauteur des vignettes d'affiches UNIQUEMENT sur la page Événements --- */
		#presse .gallery-grid li img {
			/* Limite la hauteur maximale de l'image (l'affiche) à 160 pixels */
			max-height: 160px; 
			
			/* Maintient les proportions de l'image 
			height: auto; 
			width: auto;   */
			
			/* Centre l'image s'il y a de l'espace autour */
			margin: 0 auto;
		}

		.gallery-grid li:hover img {
			transform: scale(1.05); /* Zoom subtil de l'image au survol */
		}

		/* --- Overlay pour l'effet de survol --- */
		.gallery-grid li a::after {
			content: attr(alt); /* Affiche le texte alternatif/titre */
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* Gradient sombre pour améliorer la lisibilité du texte */
			background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
			color: white;
			padding: 10px;
			box-sizing: border-box;
			text-align: center;
			display: flex; /* Utilisation de flexbox pour centrer le contenu */
			justify-content: center;
			align-items: flex-end; /* Positionne le texte en bas */
			font-family: var(--font-impact);
			font-size: 1.2rem;
			opacity: 0; /* Caché par défaut */
			transition: opacity 0.4s ease;
		}

		.gallery-grid li a::after {
		/*	content: "Agrandir";  Texte affiché au survol */
		    content: attr(data-content);
			opacity: 1; /* Apparition de l'overlay au survol */
		}
		
		.gallery-grid li:hover a::after {
			opacity: 1; /* Rendre visible au survol */
		}

		/* Suppression des styles inutiles */
		.article-caption { display: none; }


        /* --- Vidéos (Responsive 16:9) --- */
        .video-container {
            display: flex;
            flex-wrap: wrap; 
            gap: 20px;
            justify-content: center;
            width: 100%;
            margin-top: 30px;
        }
        .video-wrapper {
            flex: 1 1 300px; 
            max-width: 450px;
        }
		
        /* NOUVELLE RÈGLE pour Imagination: forcer le wrapper à être plus large */
        .section-imagination .video-wrapper {
            flex: 1 1 100%; /* Permet de prendre toute la largeur disponible dans le main-column */
            max-width: 100%; /* S'assure qu'il n'y a pas de limite de 450px pour cette section */
        }		
		
        .video-responsive-container {
            position: relative;
            padding-bottom: 56.25%; /* Ratio 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: black;
            border: 2px solid var(--color-primary);
        }
        .video-responsive-container iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%; border: 0;
        }
        
        /* --- Styles des Liens (Menu latéral/Partenaires) --- */
        .link-item {
            display: flex; 
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(215, 215, 255, 0.7);
            border-radius: 5px;
			border: 1px solid rgba(255, 255, 255, 0.1);
            transition: background-color 0.3s;

        }
        .link-item:hover { background-color: rgba(0, 0, 0, 0.1); }
        .link-item img { margin-right: 20px; max-width: 30px; height: auto; }
        .links-column h2 { color: var(--color-primary); 
			border-bottom: 2px solid var(--color-primary); 
			padding-bottom: 5px; margin-bottom: 20px; }
		
		/* Suppression des puces dans la liste de liens */
        .link-list {
            list-style: none; /* Supprime les puces */
            padding-left: 0; /* Annule le décalage par défaut des listes */
        }
 
		 .section-text {
            color: #FFFFCC;
            text-align: left;
            font-size: 1.2em;
            margin-bottom: 25px;
        }
 
        /* --- Slogan Fabrication --- */
        .fabrication-slogan {
            text-align: center;
            margin-top: 20px;
        }
        .fabrication-slogan strong {
            font-size: clamp(3rem, 10vw, 4rem); 
            color: var(--color-link);
            font-family: var(--font-impact);
            font-weight: bold;
            line-height: 1;
            display: block;
            text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8), -2px -2px 0 rgba(0, 0, 0, 0.5); 
        }

        /* --- Accueil (Cartes) --- */
        .card-grid-full {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 0;
            list-style: none;
        }

        .card-item {
            background-color: var(--color-blue-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: center;
        }

        .card-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
        }
        
        .card-item img { 
		    width: 100%; 
			height: 150px; 
			object-fit: cover; 
			display: block; 
		}
		
        .card-content { 
		    padding: 20px 10px; 
		}

        .card-content h3 {
            font-family: var(--font-impact);
            color: var(--color-secondary);
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 15px;
        }

        /* Petite correction pour les liens dans les boîtes de fond noir */
        .section-liens .link-item a { color: white; } 

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .page-wrapper { padding: 0 10px; }
            .section { min-height: auto; } /* Moins insistant sur le 100vh sur mobile */
            .header-title h1 { margin-bottom: 15px; }
            .main-column, .links-column { min-height: auto; }
        }

        /* Style spécifique pour le pied de page de la section Création  */
        .creation-footer {
            background-color: var(--color-dark-bg); 
            color: white; 
            padding: 20px; 
            border-radius: 10px; 
            margin-top: 20px; 
            text-align: center;
            width: 100%; /* S'assure qu'il prend toute la largeur de son conteneur parent */
            box-sizing: border-box;
        }

        /* =================================================================
         * 5. STYLES DE LA MODALE (Pop-up pour les images)
         * ================================================================= */
        .modal {
            display: none; /* Masqué par défaut */
            position: fixed;
            z-index: 200; /* Assurez-vous qu'il est au-dessus de tout */
            padding-top: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 90%;
            max-width: 900px;
            max-height: 90vh; /* Limite la hauteur de l'image */
            object-fit: contain; /* Assure que l'image est entièrement visible */
        }

        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        .close-button {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .close-button:hover,
        .close-button:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* Animation Zoom */
        @keyframes zoom {
            from {transform:scale(0)} 
            to {transform:scale(1)}
        }
        .modal-content {
            animation-name: zoom;
            animation-duration: 0.6s;
        }

		/* ICONE FACEBOOK */
        .menu-icon-facebook {
            width: 20px; /* Taille de l'icône */
            height: 20px;
            margin-right: 10px; /* Espace entre l'icône et le texte */
            vertical-align: middle; /* Alignement vertical avec le texte */
        }
	

document.addEventListener('DOMContentLoaded', () => {
    // Sélectionne tous les liens dans la galerie
    const galleryItems = document.querySelectorAll('.gallery-grid li');

    galleryItems.forEach(item => {
        // Au survol (mouseover)
        item.addEventListener('mouseover', () => {
            const title = item.getAttribute('data-title');
            const link = item.querySelector('a');
            
            // Ajoute l'attribut data-content au lien <a> avec le nom de la vignette
            link.setAttribute('data-content', title);
        });

        // À la fin du survol (mouseout)
        item.addEventListener('mouseout', () => {
            const link = item.querySelector('a');
            
            // Supprime l'attribut data-content
            link.removeAttribute('data-content');
        });
    });
});