html { background:#010203; }

/* ===== POLICE LOCALE ===== */
@font-face{
  font-family: 'SairaStencil';
  src: url('FONTS/SairaStencilOne-Regular.ttf') format('truetype');
  font-display: swap;
}

/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BODY ===== */
body {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('IMAGES/FondEcran.png') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  position: relative;
}


/* ===== MAIN ===== */
.main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  max-height: 100%;
  overflow: hidden;
}

/* ===== TEXTES ===== */
.prenom,
.nom,
.year,
.clock,
#date {
  font-family: 'SairaStencil', sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  text-transform: uppercase;
  opacity: .85;
}

.prenom,
.nom {
  color: rgba(1,2,3,1);
  letter-spacing: 0.09em;
  text-shadow:
  -1px -1px 0 white,
  1px -1px 0 white,
  -1px  1px 0 white,
  1px  1px 0 white;
}

.prenom:hover {
  text-shadow:
  -1px -1px 0 cyan,
  1px -1px 0 cyan,
  -1px  1px 0 cyan,
  1px  1px 0 cyan;
}
.nom:hover {
  text-shadow:
  -1px -1px 0 magenta,
  1px -1px 0 magenta,
  -1px  1px 0 magenta,
  1px  1px 0 magenta;
}

.clock:hover,
#date:hover,
.year:hover {
  cursor: help;
}

.clock {
  color: rgba(1,2,3,1);
  letter-spacing: 0.09em;
  text-shadow:
  -1px -1px 0 red,
  1px -1px 0 red,
  -1px  1px 0 red,
  1px  1px 0 red;
}

#date {
letter-spacing: 0.09em;
text-shadow:
-1px -1px 0 green,
1px -1px 0 green,
-1px  1px 0 green,
1px  1px 0 green;
}

.year {
  color: rgba(1,2,3,1);
  letter-spacing: 0.09em;
  text-shadow:
  -1px -1px 0 blue,
  1px -1px 0 blue,
  -1px  1px 0 blue,
  1px  1px 0 blue;
}

.clock:hover {
  color: red;
  text-shadow:
  -1px -1px 0 white,
  1px -1px 0 white,
  -1px  1px 0 white,
  1px  1px 0 white;
}

#date:hover {
color: green;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px  1px 0 white,
1px  1px 0 white;
}

.year:hover {
  color: blue;
  text-shadow:
  -1px -1px 0 white,
  1px -1px 0 white,
  -1px  1px 0 white,
  1px  1px 0 white;
}

/* ===== SÉPARATEURS ===== */
.sepCours {
  width: clamp(60px, 15vw, 180px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #008FF0, transparent);
}
.sepCours:hover {
  background: linear-gradient(90deg, transparent, yellow, transparent);
}

.sepCCours {
  width: clamp(33px, 12vw, 80px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #008FF0, transparent);
}
.sepCCours:hover {
  background: linear-gradient(90deg, transparent, yellow, transparent);
}

.sepLong {
  width: clamp(80px, 33vw, 280px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #008FF0, transparent);
}
.sepLong:hover {
  background: linear-gradient(90deg, transparent, yellow, transparent);
}

.sepLLong {
  width: clamp(100px, 50vw, 380px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #008FF0, transparent);
}
.sepLLong:hover {
  background: linear-gradient(90deg, transparent, yellow, transparent);
}