:root {

  --L_text: #191715;
  --L_text_1: #45403a;
  --L_text_2: #534d46;
  --L_text_3: #aea69e;
  --L_background: #e7eaee;
  --L_background_1: #d2d8df;
  --L_background_2: #b4beca;
  --L_primary: #8ea0f1;
  --L_primary_1: #bbc6f7;
  --L_primary_2: #3354e6;
  --L_primary_3: #1c41e3;
  --L_primary_4: #142d9f;
  --L_secondary: #10afcb;
  --L_secondary_1: #b8f0f9;
  --L_secondary_2: #5adbf2;
  --L_secondary_3: #0a6676;
  --L_secondary_4: #063d47;
  --L_accent: #c70fb5;
  --L_accent_1: #fab8f3;
  --L_accent_2: #f359e3;
  --L_accent_3: #a60c97;
  --L_accent_4: #77096c;
  --D_text: #eae8e6;
  --D_text_1: #c5bfba;
  --D_text_2: #aea69e;
  --D_text_3: #6f665d;
  --D_background: #111418;
  --D_background_1: #20252d;
  --D_background_2: #2a323c;
  --D_background_3: #4a5768;
  --D_background_4: #798aa0;
  --D_primary: #0e2071;
  --D_primary_1: #1634b6;
  --D_primary_2: #193acc;
  --D_primary_3: #4967e9;
  --D_primary_4: #8ea0f1;
  --D_secondary_1: #08515e;
  --D_secondary_2: #0d8ea5;
  --D_secondary: #34d3ef;
  --D_secondary_3: #5adbf2;
  --D_secondary_4: #b8f0f9;
  --D_accent_1: #5f0756;
  --D_accent_2: #a60c97;
  --D_accent: #f038de;
  --D_accent_3: #f471e7;
  --D_accent_4: #f688eb;
}

body {
  background-color: var(--L_background);
  color: var(--text-color-light);
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../image/mtn_gif.gif') no-repeat center center/cover;
  filter: blur(10px);
  /* Applique le flou uniquement sur l'image */
  z-index: -1;
  /* Place l'image en arrière-plan */
}


/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style pour l'en-tête de la page */
header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

header h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--L_text_3);
  filter: blur(0px);
}

header p {
  font-size: 1.2rem;
  color: var(--L_text_2);
}

.container {
  position: relative;
  display: flex;
  align-items: center;
}

/* Image ronde avec transition */
.image-ronde {
  width: 15%;
  height: 30%;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  opacity: 0;
  left: 10%;
  transform: translateX(50%);
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

.image-ronde img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}

.image-ronde:hover {
  width: 16%;
  height: 35%;
  left: 15%;

}

.profile {
  display: flex;
  align-items: center;
  gap: 15%;
  margin-top: 10%;
}

.nomP {
  display: flex;
  text-align: left;
  align-items: baseline;
}

.nom {
  font-size: 3.5rem;
  font-weight: bold;
  color: var(--L_text);
}

.prenom {
  font-size: 3rem;
  color: var(--L_text);
}

/* div timeline */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 50px auto;
  padding-left: 40px;
}

/* timeline */
.line {
  position: absolute;
  top: 0;
  left: 0%;
  width: 4px;
  height: 100%;
  background: var(--L_primary_4);
  padding: 0.5px;
  box-shadow: 0 5px 20px 0.5px var(--L_primary_2);
  transform: translateX(0);
  transition: height 0.3s ease-out;
}

.section-title {
  text-align: center;
  margin: 60px auto 30px;
  font-size: 2rem;
  color: var(--L_primary_3);
}

/* box  */
.block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.6s ease-out;
  margin: 50px 0;
  margin-left: 60px;
}

.block.right {
  justify-content: flex-end;
  transform: translateX(100px);
  /* Posi bloc hors vue =>droite */
}

/*puce */
.block .marker {
  width: 20px;
  height: 20px;
  background: var(--L_primary_4);
  box-shadow: 0 5px 20px 0.5px var(--L_primary_3);
  border-radius: 50%;
  position: absolute;
  left: -14%;
  transform: translateX(-50%);
  z-index: 10;
}

/* box txt */
.block .text {
  background: var(--L_background_1);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px var(--L_background_2);
  width: 100%;
  z-index: 5;
  text-align: left;
  padding-top: 10px;
}

.block .text h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.5rem;
  color: var(--L_text);
}

.block .text h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: var(--L_text_2);
}

.block .text p {
  font-size: 1rem;
  padding: 5px;
  color: var(--L_text);
}

.block .text ul {
  padding-left: 5px;
  margin-top: 10px;
  margin-bottom: 0;
}

.timehd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.timehd .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.timehd .logo img {
  max-width: 120px;
  margin-top: 5px;
  height: auto;
}

.block .text .timehd h4 {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: var(--L_text_2);
  flex: 1;
}

.timehd .date {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--L_text_3);
  white-space: nowrap;
}

.ansc {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s ease-out;
}

.ansc.visible {
  opacity: 1;
  transform: translateX(0);
}

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15%;
  margin-top: 10%;
}
.login-button {
  padding: 12px 24px;
  background-color: var(--L_primary_2);
  color: white;
  text-decoration: none;
  border: 2px solid var(--L_primary_2);
  border-radius: 8px;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-button:hover {
  background-color: var(--L_primary_4);
  transform: scale(0.98);
}


/*th dark*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--D_background);
    color: var(--D_text);
  }

  header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../image/gif2.gif') no-repeat center center/cover;
    filter: blur(10px);
    z-index: -1;
  }

  header h1 {
    color: var(--D_text);
  }

  header p {
    color: var(--D_text_1);
  }

  .nom {
    color: var(--D_text);
  }

  .prenom {
    color: var(--D_text_1);
  }

  .line {
    background: var(--D_primary_3);
    box-shadow: 0 5px 20px 0.5px var(--D_primary_2);
  }

  .block .marker {
    background: var(--D_primary_3);
    box-shadow: 0 5px 20px 0.5px var(--D_primary_2);
  }

  .block .text {
    background: var(--D_background_2);
    box-shadow: 0 5px 15px var(--D_background_3);
  }

  .block .text h3 {
    color: var(--D_text);
  }

  .block .text p {
    color: var(--D_text);
  }

  .section-title {
    color: var(--D_primary_3);
  }

  .block .text .timehd h4 {
    color: var(--D_text_2);
  }

  .timehd .date {
    color: var(--D_text_2);
  }
}


@media screen and (max-width: 768px) {
  .line {
    display: none;
  }

  .marker {
    display: none;
  }

  .image-ronde {
    min-width: 15%;
  }

  /* empilement block */
  .block {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    transform: translateX(0);
  }

  .block.right {
    justify-content: center;
    transform: translateX(0);
    /* même chose */
  }

  /* La puce (marker) est centrée au-dessus du bloc */
  .block .marker {
    position: static;
    margin-bottom: 10px;
    transform: none;
  }

  .block .text {
    width: 90%;
    text-align: center;
  }

  .nom {
    font-size: 1.5rem;
  }

  .prenom {
    font-size: 1rem;
  }

  .block .text ul {
    list-style-position: inside;
    padding-left: 0;
    text-align: left;
    margin: 0 auto;
    display: table;
  }
}

/*Élément	Couleur suggérée	Variable CSS
Titre	Couleur principale	--color-primary
Texte normal	Couleur texte	--color-text
Bordures	Couleur secondaire ou gris	--color-secondary
Boutons / liens	Couleur accent	--color-accent
Fond	Fond clair ou --color-bg	--color-bg
*/

/*
@import url('https://fonts.googleapis.com/css?family=BioRhyme:700|BioRhyme:400');

body {
  font-family: 'BioRhyme';
  font-weight: 400;
}

h1, h2, h3, h4, h5 {
  font-family: 'BioRhyme';
  font-weight: 700;
}

html {font-size: 100%;} /* 16px *

h1 {font-size: 4.210rem; /* 67.36px *}

h2 {font-size: 3.158rem; /* 50.56px *}

h3 {font-size: 2.369rem; /* 37.92px *}

h4 {font-size: 1.777rem; /* 28.48px *}

h5 {font-size: 1.333rem; /* 21.28px *}

small {font-size: 0.750rem; /* 12px *}

@import url('https://fonts.googleapis.com/css?family=Fustat:700|Fustat:400');

body {
  font-family: 'Fustat';
  font-weight: 400;
}

h1, h2, h3, h4, h5 {
  font-family: 'Fustat';
  font-weight: 700;
}

html {font-size: 100%;} /* 16px *

h1 {font-size: 4.210rem; /* 67.36px *}

h2 {font-size: 3.158rem; /* 50.56px *}

h3 {font-size: 2.369rem; /* 37.92px *}

h4 {font-size: 1.777rem; /* 28.48px *}

h5 {font-size: 1.333rem; /* 21.28px *}

small {font-size: 0.750rem; /* 12px *}
*

https://www.realtimecolors.com/?colors=eae8e6-111418-0e2071-34d3ef-f038de&fonts=BioRhyme-Fustat#toolbar
DE BASE
dark
--text: #eae8e6;
--background: #111418;
--primary: #0e2071;
--secondary: #34d3ef;
--accent: #f038de;

--text: rgb(234, 232, 230);
--background: rgb(17, 20, 24);
--primary: rgb(14, 32, 113);
--secondary: rgb(52, 211, 239);
--accent: rgb(240, 56, 222);

light
--text: rgb(25, 23, 21);
--background: rgb(231, 234, 238);
--primary: rgb(142, 160, 241);
--secondary: rgb(16, 175, 203);
--accent: rgb(199, 15, 181);

--text: #191715;
--background: #e7eaee;
--primary: #8ea0f1;
--secondary: #10afcb;
--accent: #c70fb5;

Autre theme
https://www.realtimecolors.com/?colors=e0ddf6-09071a-a292e3-8d2439-d37b54&fonts=Fustat-Fustat

--text: #e0ddf6;
--background: #09071a;
--primary: #a292e3;
--secondary: #8d2439;
--accent: #d37b54;

*/