/* ==========================================================================
   1. SPLASH SCREEN (ÉCRAN DE CHARGEMENT)
   ========================================================================== */

#loader-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000000; /* Fond noir opaque */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999; /* Reste au-dessus du contenu du site, sous les scanlines */
	animation: fadeOutLoader 5s ease forwards; /* Durée totale */
}

.loader-logo {
	color: #ffffff;
	font-family: Impact, sans-serif;
	font-size: 3.5em;
	letter-spacing: 6px;
	margin: 0;
	text-align: center;
}

/* Animation de disparition progressive du splash screen */
@keyframes fadeOutLoader {
	0% {
		opacity: 1;
		visibility: visible;
	}
	/* Reste à 100% visible pendant x% de la durée */
	20% {
		opacity: 1;
		visibility: visible;
	}
	/* S'efface complètement sur la fin de l'animation */
	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none; /* Permet de cliquer sur le site derrière */
	}
}

/* ==========================================================================
   2. EFFETS VISUEL CRT
   ========================================================================== */

/* Effet écran cathodique global (Scanlines) */
body::before {
	content: " ";
	display: block;
	position: fixed;
	top: 0; left: 0; bottom: 0; right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
	            linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
	z-index: 9999999; /* Se place par-dessus tout le site et le splash screen */
	background-size: 100% 5px, 12px 100%; /* Taille ajustée des pixels et lignes */
	pointer-events: none; /* Permet d'interagir avec le site à travers cette couche */
}

/* Léger scintillement de l'écran en arrière-plan */
@keyframes eka-flicker {
	0% { opacity: 0.96; }
	50% { opacity: 1; }
	100% { opacity: 0.96; }
}

body {
	animation: eka-flicker 0.3s infinite;
}

/* ==========================================================================
   3. EFFETS GLITCH
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLITCH AUTOMATIQUE DU LOGO D'ACCUEIL (3 COUCHES)
   -------------------------------------------------------------------------- */
.loader-logo {
	position: relative;
	display: inline-block;
}

/* Génération du contenu pour les 3 couches de glitch */
.loader-logo::before,
.loader-logo::after,
.loader-logo span::before {
	content: attr(data-text);
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: transparent;
}

/* [Couche 1] */
.loader-logo::before {
	left: +20px;
	top: -60px;
	text-shadow: -44px 0 #fb0000;
	clip-path: inset(20% 0 60% 0);
	animation: title-glitch-red 0.2s infinite linear alternate-reverse;
}

/* [Couche 2] */
.loader-logo span::before {
	left: +30px;
	top: -70px;
	text-shadow: +7px 0 #97fb00;
	clip-path: inset(60% 0 10% 0);
	animation: title-glitch-cyan 0.01s infinite linear alternate-reverse;
}

/* [Couche 3] */
.loader-logo::after {
	left: +40px;
	top: -80px;
	text-shadow: +7px 0 #3600fb;
	clip-path: inset(60% 0 10% 0);
	animation: title-glitch-cyan 0.02s infinite linear alternate-reverse;
}

/* trajectoires de découpe restent identiques */
@keyframes title-glitch-red {
	0%   { clip-path: inset(10% 0 70% 0); }
	20%  { clip-path: inset(30% 0 45% 0); }
	40%  { clip-path: inset(50% 0 20% 0); }
	60%  { clip-path: inset(15% 0 65% 0); }
	80%  { clip-path: inset(75% 0 5% 0); }
	100% { clip-path: inset(25% 0 55% 0); }
}

@keyframes title-glitch-cyan {
	0%   { clip-path: inset(65% 0 10% 0); }
	25%  { clip-path: inset(40% 0 35% 0); }
	50%  { clip-path: inset(15% 0 60% 0); }
	75%  { clip-path: inset(80% 0 5% 0); }
	100% { clip-path: inset(30% 0 45% 0); }
}


/* --------------------------------------------------------------------------
   A. GLITCH DU TITRE PRINCIPAL (Réglages actuels : Rouge/Cyan au survol + Noir permanent)
   -------------------------------------------------------------------------- */
.lienekasiliciumtitle {
	position: relative;
	display: inline-block;
}

/* Génération automatique pour toutes les couches */
.lienekasiliciumtitle::before,
.lienekasiliciumtitle::after,
.lienekasiliciumtitle span::before {
	content: attr(data-text);
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: transparent;
}

/*    COUCHE NOIRE (Permanente)*/

.lienekasiliciumtitle span::before {
	left: -2px;        /* Léger décalage horizontal permanent */
	top: 2px;         /* Léger décalage vertical permanent */
	text-shadow: 2px 0 #000000; /* Ombre noire */
	clip-path: inset(40% 0 40% 0);
	animation: title-glitch-cyan 0.03s infinite linear alternate-reverse; /* Plus lent pour l'effet ambiant */
}

/*  COUCHES ACTUELLES SURVOL */

/* Couche Rouge - Titre */
.lienekasiliciumtitle:hover::before {
	left: 6px; /* Décalage horizontal */
	top: 30px; /* Décalage veritcal */
	text-shadow: -44px 0 #ff0000;
	clip-path: inset(20% 0 60% 0);
	animation: title-glitch-red 0.15s infinite linear alternate-reverse;
}

/* Couche Cyane - Titre */
.lienekasiliciumtitle:hover::after {
	left: +76px; /* Décalage horizontal */
	top: 0px; /* Décalage veritcal */
	text-shadow: -2px 0 #00ffff;
	clip-path: inset(60% 0 10% 0);
	animation: title-glitch-cyan 0.02s infinite linear alternate-reverse;
}

/* Trajectoires de découpe uniques pour le Titre Principal */
@keyframes title-glitch-red {
	0%   { clip-path: inset(10% 0 70% 0); }
	20%  { clip-path: inset(30% 0 45% 0); }
	40%  { clip-path: inset(50% 0 20% 0); }
	60%  { clip-path: inset(15% 0 65% 0); }
	80%  { clip-path: inset(75% 0 5% 0); }
	100% { clip-path: inset(25% 0 55% 0); }
}

@keyframes title-glitch-cyan {
	0%   { clip-path: inset(65% 0 10% 0); }
	25%  { clip-path: inset(40% 0 35% 0); }
	50%  { clip-path: inset(15% 0 60% 0); }
	75%  { clip-path: inset(80% 0 5% 0); }
	100% { clip-path: inset(30% 0 45% 0); }
}

/* --------------------------------------------------------------------------
   B. GLITCH DES MENUS DE NAVIGATION
   -------------------------------------------------------------------------- */
.navsite > a {
	position: relative;
	display: inline-block;
}

.navsite > a:hover::before,
.navsite > a:hover::after {
	content: attr(data-text);
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: transparent;
	color: #ffffff; /* couleur du texte */
}

/* Couche Rouge - Menus */
.navsite > a:hover::before {
	left: 4px; /* Décalage horizontal */
	top: 0px; /* Décalage veritcal */
	text-shadow: -3px 0 #f6912b; /* Couleur de l'ombre glitchée */
	clip-path: inset(20% 0 60% 0);
	animation: nav-glitch-red 2.3s infinite linear alternate-reverse; /* Vitesse indépendante */
}

/* Couche Cyane - Menus */
.navsite > a:hover::after {
	left: -24px; /* Décalage horizontal */
	top: 0px; /* Décalage veritcal */
	text-shadow: -3px 0 #f62bc0; /* Couleur de l'ombre glitchée */
	clip-path: inset(60% 0 10% 0);
	animation: nav-glitch-cyan 0.1s infinite linear alternate-reverse; /* Vitesse indépendante */
}

/* Trajectoires de découpe uniques pour la Barre de Navigation */
@keyframes nav-glitch-red {
	0%   { clip-path: inset(15% 0 65% 0); }
	30%  { clip-path: inset(45% 0 30% 0); }
	60%  { clip-path: inset(10% 0 75% 0); }
	100% { clip-path: inset(55% 0 20% 0); }
}

@keyframes nav-glitch-cyan {
	0%   { clip-path: inset(70% 0 15% 0); }
	40%  { clip-path: inset(25% 0 50% 0); }
	80%  { clip-path: inset(60% 0 10% 0); }
	100% { clip-path: inset(35% 0 40% 0); }
}


/* ==========================================================================
   4. DESIGN STRUCTUREL
   ========================================================================== */

/* Corps global de la page */
body {
	font-family: sans-serif;
	font-size: 1.2em;
	color: #ffffff;
	background: #0b0c10; /* une couleur clair augmente le flicker CRT */
	line-height: 1.6;
	margin: 0;
}

/* Typographie des titres */
h1 {
	font-size: 2em;
	font-family: sans-serif;
}

h2 {
	font-size: 1.5em;
	font-family: sans-serif;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.1em;
}

/* Structure des paragraphes */
p {
	max-width: 80%;
	padding: 2%;
}

/* Bannière de l'en-tête */
#banniere {
	display: block;
	position: relative;
}

.ekasiliciumbanner {
	width: 100%;
}

.imageban {
	width: 100%;
}

#ekasiliciumtitle {
	position: absolute;
	font-size: 6em;
	font-family: Impact, sans-serif;
	padding: 2%;
	top: 0;
}
	
/* Zone de contenu principale */
.wrapper {
	display: flex;
}

/* Menu supérieur de navigation principale */
.navsite {
	font-size: 2em; /* Elle double la taille du texte à l'intérieur du menu par rapport à la taille normale. */
	font-family: Impact, sans-serif;
	color: #ffffff; /*couleur du texte par défaut, le text est re-coloré dans la section suivante .navsite > a */
	background: #1f1d1a; /*couleur de fond de la barre de navigation*/
	padding: 1%; /*ajoute un espace interne autour du texte à l'intérieur de la barre*/
	display: flex;
	justify-content: space-around; /*Répartir les onglets de manière homogène sur toute la largeur de l'écran, en calculant automatiquement des espaces égaux entre chacun d'eux.*/
}

/* Liens spécifiques situés dans le menu supérieur (navsite) */
.navsite > a {
	color: #ffffff;
}

/* Liens hypertextes généraux */
a, p a, ul a, figcaption a {
	color: #000000;            /* Couleur */
	text-decoration: none;     /* Supprime le soulignement */
	display: inline-flex;      /* flex */
	transition: color 8s ease; /* Transition au survol */
}

/* État au survol de la souris sur les liens */
a:hover, p a:hover, ul a:hover, figcaption a:hover {
	color: #cccccc;            /* Éclaircissement gris clair progressif au survol */
}

/* Article et fond central de la page */
.main {
	padding: 3%; /* Marge interne de la zone centrale */
	flex-grow: 1;  
	background: #0e0f1f; /* Couleur du fond de l'article */
}

/* Pied de page */
.footer {
	color: #ffffff;
	background: #0d0d06; /* Couleur de fond du footer */
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   5. CENTRAGE MULTIMÉDIA (SEMANTIQUE HARMONISÉE)
   ========================================================================== */

/* Conteneur de la figure centrée (Remplacement de l'ancienne balise <center>) */
.bloc-image-centre {
	display: block;
	margin: 30px auto; /* 30px d'espace vertical, centré horizontalement */
	text-align: center; /* Aligne la légende au milieu automatiquement */
	max-width: 100%;
}

.imagefigure {
	display: block;
	margin: 0 auto 10px auto; /* Centre l'image et ajoute 10px avant la légende */
	max-width: 100%; /* Rendu fluide adapté aux smartphones */
	height: auto;
}

figcaption {
	font-family: sans-serif;
	color: #ffffff;
	font-style: italic;
	font-size: 0.9em;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (AFFICHAGE MOBILE)
   ========================================================================== */

@media all and (max-width: 1020px) {
	body {
		display: flex;
		flex-direction: column;
		font-size: 1.5em;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		font-size: 1em;
		width: 100%;
	}

	/* Bascule le menu supérieur en affichage vertical empilé */
	.navsite {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#ekasiliciumtitle {
		position: absolute;
		font-size: 3em;
		font-family: Impact, sans-serif;
		padding: 2%;
	}

	#titrepage {
		font-size: 2em;
	}

	p {
		font-size: 1.3em;
		padding: 3%;
		max-width: 95%;
	}
}