@charset "utf-8";
/* CSS Document */

/*## 1. Le fond : Un noir texturé et vivant (`#0c0c0e`)

Au lieu d'un noir pur (`#000000`) qui peut faire "vide" ou "triste", utilise un noir d'encre très profond, légèrement bleuté ou violacé, qui évoque la nuit avant l'aube. ```css*/

/*.nuit {
    background-color: #0c0c0e;
    color: #e2e8f0;*/ /* Un blanc cassé soyeux, pas agressif */
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}*/


/*### 2. Le CSS qui parle : Le "Fil d'Ariane" lumineux

Au lieu de mettre tes textes dans des boîtes et des cadres, on utilise **une seule ligne verticale lumineuse** (en *border-left* sur ton conteneur principal) qui traverse toute la page. C'est le fil conducteur, la ligne de vie qui montre qu'on avance et qu'on va s'en sortir.*/

/** Sur le **Monde 1**, cette ligne est fine, bleu électrique ou cyan artificiel.
* Dès que tu passes au **Monde 2**, la ligne change de couleur grâce à une classe CSS pour devenir ambrée ou verte sève, et elle s'épaissit légèrement comme pour s'enraciner. ```css*/

/* Le conteneur central brut, sans cadre */
/*.contenu {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    border-left: 2px solid #00f2fe; /* Ligne Monde 1 : Énergie froide */
/*}*/

/* La transition vers le Monde 2 (la ligne vire au chaud) */
/*.monde-2-zone {
    border-left: 3px solid #ff9f43; /* Ligne Monde 2 : Espoir, Terre rouge/ambre 
    padding-left: 20px;
    transition: border-color 0.8s ease;
}*/



/*### 3. Des titres qui respirent et qui s'élèvent

Pour éviter la monotonie, on joue à fond sur la dualité des tailles et le *letter-spacing* (l'espacement des lettres) pour donner un côté solennel et architectural. ```css*/
/*
h1, h2 {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
}

h3 {
    font-style: italic;
    font-weight: 300;
    color: #a0aec0; /* Un gris doux 
}*/



/*### 4. Le bouton du Hub : L'effet "Lueur d'Espoir"

Pour tes liens sur la page d'accueil (le Hub), pas de gros boutons carrés habituels. Juste du texte épuré, mais quand on passe la souris dessus (*hover*), il y a une onde de lumière qui se diffuse derrière, comme un soleil levant caché derrière l'éclipse. ```css
*/
/*.link-hub {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.4s ease;
}

.link-hub:hover {
    color: #ff9f43; /* Le signal du Monde 2 */
  /*  text-shadow: 0 0 10px rgba(255, 159, 67, 0.6);*/ /* La lueur qui parle */
/*}

```*/


/*5. Les citations (Le dialogue de l'Humaine et du Philosophe)

Pour ton Préambule et ton Épilogue, pour que le dialogue soit dynamique sans faire de tableaux ou de cadres, on décale le texte du Philosophe et on lui donne une lueur subtile. ```css*/


/*.dialogue-humaine {
    font-weight: bold;
    color: #ffffff;
    margin-top: 20px;
}

.dialogue-philosophe {
    margin-left: 30px;
    color: #cbd5e0;
    border-left: 1px dotted #ff9f43;
    padding-left: 15px;
}*/

/*//////////////////////////////////////*/

/* Un noir d'encre vivant, profond mais pas lourd */

.interview{ border-color: #e74c3c; }

.dialogues{ border-color: #9b59b6; }

. interdit{ border-color: #f39c12; }

.fragment{ border-color: #e74c3c; }

 .terrain{ border-color: #f0fff4; }

.Introduction{
	background-color: #FF9;}

.nebulo-echo {
  font-style: italic;
  color: #7f8c8d;
  text-align: right;
  margin-top: 1em;
}

.nuit {
    background-color: #0b0b0d;
    color: #e4e4e7;
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 4vw; /* Espacement fluide proportionnel à l'écran */
    line-height: 1.6;
}

body {
    background-color: #0b0b0d;
    color: #e4e4e7;
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 0; /* On remet à zéro ici */
    line-height: 1.6;
}


    /*line-height: 1.6;*/

/* Le titre principal : immense, aéré, qui impose le sérieux du sujet */
.principal {
    font-size: 50px); /* Responsive pur, s'adapte à TOUS les écrans */
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffffff;
    margin-bottom: 5vh;
}

.container, .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.cognacnebula {
  background: linear-gradient(90deg, #8e44ad, #f39c12, #3498db);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: nebuloPulse 4s infinite ease-in-out;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}


/*///////style/////*/
.boite{
	margin-bottom: 3em;
  padding: 1.5em;
  }
  


html {
  scroll-behavior: smooth;
}

.mot-cle-titre {
  font-family: 'Georgia', serif;
  font-size: 1.5em;
  color: #4b4b7e;
  margin-bottom: 0.5em;
}

.element_txt {
	font-size: 20px;
	color:#000;
	background-color: #999;
	border-radius: 10px;
	box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
	padding: 50px;
	max-width:inherit;
}

.element_txt2 {
	font-size: 20px;
	color:#000;
	background-color: #CCC;
	border-radius: 10px;
	box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
	padding: 50px;
	max-width:inherit;
}

.txt {
	padding-left:10px;
	padding-right:10px;
	background-color: #99C;
}

.locuteur{
	font-size: 20px;
	font-weight: bold;
	color: #000;
	padding-left:10px;
	padding-right:10px;
	background: linear-gradient(90deg, #8e44ad, #f39c12, #3498db);
	background-color: #939;
	border-radius: 10px;
}

.txt2{
	padding-left:10px;
	padding-right:10px;
	background-color: #99F;
}

.txt3{
	padding-left:10px;
	padding-right:10px;
	background-color: #999;
}

.element_footer {
    border-top: 3px #36AE7C dotted;
	padding-bottom:20px;}
	
.element {
    border-top: 3px #EB5353 dotted;
    border-right: 3px #F9D923 double;
    border-bottom: 3px #36AE7C dashed;
    border-left: 3px #187498 solid;
}

.img-responsive{
	max-width: 100%;
  height: 0 auto;
  display: block;
  }

.video-embed-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;               /* ratio 16:9 standard */
  /* Si ta vidéo est exactement 752 × 416 → calcule le ratio précis : */
  /* padding-top: 55.32%;          /* 416 / 752 = 0.5532 → 55.32% */ 
  overflow: hidden;
  background: #000;                   /* fond noir pendant chargement */
  border-radius: 0.5rem;              /* optionnel : suit le style card */
}

.video-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;                  /* cover = remplit, rogne si besoin */
  /* ou object-fit: contain;          si tu préfères voir toute l'image + bandes noires */
  display: block;
}

.hero-slide {
  min-height: 100vh;
  overflow: hidden;
}

.dialogue-humaine {
    font-weight: bold;
    color: #ffffff;
    margin-top: 20px;
}

.dialogue-grok {
    font-weight: bold;
    color: #ffffff;
    margin-top: 20px;
}

.dialogue-philosophe {
    margin-left: 30px;
    color: #cbd5e0;
    border-left: 1px dotted #ff9f43;
    padding-left: 15px;
}

.dialogue-eclaireur {
    margin-left: 30px;
    color: #cbd5e0;
    border-left: 1px dotted #ff9f43;
    padding-left: 15px;
}


.bloc-container {
    width: 100%;
    margin-bottom: 8vh;
    padding: 4vh 4vw; /* 4vh en haut/bas, et on récupère tes 4vw à gauche/droite ! */
    color: #FFF;
}

/* Les liens "Accéder à la page" : finis les petits machins bleus collés */
.link-access {
    display: inline-block;
    margin-left: 15px;
    color: #00f2fe; /* Énergie du Monde 1 */
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

/* L'onde d'espoir au survol : le lien s'illumine et s'ouvre */
.link-access:hover {
    color: #ff9f43; /* Mutation vers le chaud du Monde 2 */
    letter-spacing: 0.12em; /* Le texte s'étire légèrement, il respire */
    text-shadow: 0 0 8px rgba(255, 159, 67, 0.5);
}

.covBlack{
	background-color:#000;
	padding-bottom:20px;
	}

.covBlack2{
	border:solid #000 2px;
	}
	
covBlack3{
	border:solid #2D2D2D 2px;
	}
	
.VidExp{
	background-color:#000;
	border:solid #0F0F0F 2px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	}
	
	video {
    width: 100%;
    height: auto;
	border:solid #000 2px;
}

.espace{ padding-bottom: 20px;}