:root {
  --degrade-violet: linear-gradient(180deg, #4528FF, #D000FF);
  --degrade-rose: linear-gradient(180deg, #FF00B2, #FF8BDC);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'VT323', monospace;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  cursor: url("images/curseur1.png") 0 0, auto;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/fond_windows_dessin.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: -1;
}

/* --- ÉCRAN DE VERROUILLAGE --- */

.container_verrouillage {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  gap: 1.2rem;
}

#heure_verrouillage {
  font-size: clamp(7rem, 12vw, 9rem);
  font-weight: 600;
  letter-spacing: 4px;
  margin-bottom: 30px;
  color: #000;
}

.thelma_verrouillage {
  width: clamp(170px, 28vw, 200px);
  height: clamp(170px, 28vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 25px;
  transition: transform 0.5s ease;
  border: 3px solid #000;
}

.thelma_verrouillage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thelma_verrouillage:hover {
  transform: scale(1.05);
}

.utilisateur_verrouillage {
  font-size: clamp(1.7rem, 4vw, 2rem);
  margin-bottom: 25px;
  color: #000;
  background-color: #ffffff62;
  display: inline-block;
  padding: 2px 7px;
}

#bouton_verrouillage {
  display: inline-block;
  padding: 12px 40px;
  font-size: clamp(1.7rem, 3.3vw, 2rem);
  color: #fff;
  text-decoration: none;
  background: linear-gradient(0deg, #D000FF, #4528FF);
  border: 3px solid #000;
  transition: 0.15s ease;
  cursor: pointer;
  margin-bottom: 50px;
  border-radius: 4px;
}

#bouton_verrouillage:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 #000;
}

/* --- ÉCRAN DE CHARGEMENT --- */

.hidden {
  display: none !important;
}

.ecran_chargement {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: center;
  flex-direction: column;
  background: #000;
  color: #fd92ff;
  font-size: clamp(1.6rem, 7vw, 2.5rem);
  padding: 30px;
  z-index: 1000;
}

.barre_progression {
  width: 60%;
  max-width: 300px;
  min-width: 180px;
  height: 18px;
  border: 2px solid #fd92ff;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  margin: 10vh auto 0 auto;
}

.progression {
  height: 100%;
  width: 0%;
  background: #fd92ff;
  transition: width 0.2s;
}

.compteur {
  margin-top: 10px;
  font-size: clamp(2rem, 8vw, 3rem);
  transition: all 0.3s ease;
}

/* Grille et Positions */

.icones_accueil {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Force 5 lignes qui se partagent 100% de la hauteur disponible */
  grid-template-rows: repeat(5, 1fr); 
  gap: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Hauteur exacte sans scroll */
  height: calc(100vh - 43px); 
  /* Padding réduit pour gagner de la place */
  padding: 20px 15px; 
  box-sizing: border-box;
  overflow: hidden; /* Interdit le scroll */
}

.icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  justify-content: center;
}

.icone img {
  width: clamp(40px, 8vw, 70px);
  height: clamp(40px, 8vw, 70px);
  margin-bottom: 0.5rem;
  object-fit: contain;
}

.titre {
  background-color: #ffffff62;
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.9rem;
  line-height: 1.2;
  word-break: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  max-width: 160px;
  margin: 0 auto;
  text-align: center;
}

/* --- STYLES À PROPOS --- */

.icone-cercle img {
  border-radius: 50%;
  border: 2px solid #000;
  object-fit: cover;
}

.avatar-apropos {
    border-radius: 50%;
    max-width: 150px;
    display: block;
    margin: 0 auto;
    border: 3px solid #000;
}

.texte-apropos {
    padding: 0 10px;
    line-height: 1.5;
}

.pos-1-1 { grid-column: 1; grid-row: 1; }
.pos-2-1 { grid-column: 2; grid-row: 1; }
.pos-5-1 { grid-column: 5; grid-row: 1; }
.pos-1-2 { grid-column: 1; grid-row: 2; }
.pos-2-2 { grid-column: 2; grid-row: 2; }
.pos-3-2 { grid-column: 3; grid-row: 2; }
.pos-1-3 { grid-column: 1; grid-row: 3; }
.pos-4-3 { grid-column: 4; grid-row: 3; }
.pos-5-3 { grid-column: 5; grid-row: 3; }
.pos-2-4 { grid-column: 2; grid-row: 4; }
.pos-5-4 { grid-column: 5; grid-row: 4; }
.pos-3-5 { grid-column: 3; grid-row: 5; }

/* Styles spécifiques Contacts */

.contacts-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  text-align: center;
}

.contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}

.contact-link:hover {
  transform: scale(1.05);
}

.contact-icon {
  width: 4rem;
  height: 4rem;
}

.contact-text {
  font-size: 1.125rem;
  font-weight: bold;
}

/* --- BARRE DES TÂCHES --- */

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 43px;
  background: linear-gradient(180deg, #7d76ff, #bd79ee);
  border-top: 2px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  z-index: 999;
}

.taskbar-english {
  background: linear-gradient(180deg, #ffe9f7 0%, #faa2da 100%);
  padding: 2px 18px;
  border: 2px solid #000;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
}

.taskbar-english:hover {
  background: linear-gradient(180deg, #faa2da 0%, #ffe9f7 100%);
}

.taskbar-time {
  font-size: 1.5rem;
  font-weight: 600;
}

/* --- NOTIFICATIONS & CLOCHE --- */

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(180deg, #ffe9f7 0%, #f4b7de 100%);
  color: #000;
  padding: 15px 20px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.3rem;
  box-shadow: 4px 4px 0 #000;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.4s ease;
  z-index: 2000;
  cursor: pointer;
}

.notification.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.notification:hover {
  background: linear-gradient(180deg, #f4b7de 0%, #ffe9f7 100%);
}

#notifBellContainer {
  cursor: pointer;
  transition: transform 0.2s ease;
}

#notifBellContainer.show {
  display: flex !important;
  animation: bounce 0.5s ease;
}

#notifBell {
  width: clamp(40px, 8vw, 70px);
  height: auto;
  margin-bottom: 0.5rem;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* --- FENÊTRES POPUP --- */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.popup-window {
  width: min(750px, 90vw);
  max-height: 80vh;
  background: #ffe9f7;
  border: 3px solid #000;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-header {
  background: var(--degrade-violet);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 3px solid #000;
  color: #fff;
}

.popup-close {
  background: var(--degrade-rose);
  color: #000;
  border: 2px solid #000;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
}

.popup-body {
  padding: 18px 20px;
  color: #000;
  font-size: 1.15rem;
  overflow-y: auto;
  flex-grow: 1;
}

.popup-body::-webkit-scrollbar { 
  width: 15px; 
}
.popup-body::-webkit-scrollbar-track { 
  background: #ffd3ec; 
  border: 2px solid #000; 
}
.popup-body::-webkit-scrollbar-thumb { 
  background: #FF8BDC; 
  border: 2px solid #000; 
}
.popup-body::-webkit-scrollbar-thumb:hover { 
  background: #FF00B2; 
}

.illustration {
  max-width: 25vw;
  min-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
  border: 3px solid #000;
  border-radius: 4px;
}

.titre_illustration {
  font-weight: 800;
  font-size: 1.2rem;
}

.logo_lien {
  display: block;
  margin: 0 auto;
  width: 7%;
}

.popup-footer {
  padding: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 2px solid #000;
  background: #ffe9f7;
}

.popup-footer button {
  background: #fff;
  border: 2px solid #000;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 1.2rem;
}

.popup-footer button:hover {
  background: #ffe0f3;
}

.nom-apropos {
    text-align: center;
    font-size: 1.8rem;
    margin-top: 10px;
}

/* --- STYLES DES TÉMOIGNAGES --- */

.temoignages-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.temoignage-item {
  padding-left: 15px;
  background-color: rgba(255, 255, 255, 0.308);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 0 4px 4px 0;
}

.temoignage-item.violet {
  border-left: 3px solid #D000FF;
}

.temoignage-item.rose {
  border-left: 3px solid #FF00B2;
}

.temoignage-texte {
  font-style: italic;
  line-height: 1.4;
}

.temoignage-auteur {
  font-weight: bold;
  margin-top: 5px;
  display: block;
}

/* --- RESPONSIVE GÉNÉRAL (768px) --- */

@media (max-width: 768px) {
  .icones_accueil {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    overflow-y: auto;
    height: calc(100vh - 65px);
    gap: 10px;
    padding: 10px;
  }

  .icone {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .icone img { width: 45px; height: 45px; }
  .titre_illustration { font-size: 1rem; }
  .logo_lien { width: 45px; }
  
  .thelma_verrouillage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .taskbar {
    height: 60px;
    padding: 0 10px;
    gap: 5px;
  }

  .taskbar-english {
    font-size: clamp(0.7rem, 3vw, 1rem);
    padding: 4px 8px;
    white-space: nowrap;
    min-width: fit-content;
  }

  .taskbar-time {
    font-size: 1.1rem;
    white-space: nowrap;
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .icones_accueil {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE ÉTROIT (600px) --- */

@media (max-width: 600px) {
  .icone[style*="grid-column: 5"] {
    grid-column: 3 !important;
  }
}

/* --- ÉCRANS MINUSCULES (350px) --- */

@media (max-width: 350px) {
  .icones_accueil { gap: 4vw; }
  .icone img { width: clamp(35px, 18vw, 60px); height: clamp(35px, 18vw, 60px); }
  
  .taskbar { padding: 0 5px; }
  .taskbar-english { font-size: 0.75rem; padding: 2px 5px; }

  .cliquez-info {
  font-size: 0.75rem; 
  margin-left: 15px;
}
}

/* --- CARROUSEL --- */
.carousel-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.carousel-slides {
  position: relative;
  width: 100%;
  height: 200px; /* Ajustez la hauteur selon vos besoins */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carousel-img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  object-fit: contain;
  border: #000 3px solid;
  border-radius: 4px;
}

.carousel-img.active {
  opacity: 1;
  position: relative;
}

.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #FF8BDC;
  border: 2px solid #000;
  font-size: 1.5rem;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 4px;
}

.carousel-prev:hover, .carousel-next:hover {
  background: #FF00B2;
}

.carousel-prev { left: 10%; }
.carousel-next { right: 10%; }

/* --- AJUSTEMENT CARROUSEL MOBILE --- */

@media (max-width: 768px) {
  .carousel-container {
    /* On ajoute de l'espace en bas pour accueillir les boutons */
    padding-bottom: 50px; 
    flex-direction: column;
  }

  .carousel-prev, .carousel-next {
    /* On annule le centrage vertical */
    top: auto;
    bottom: 10px;
    transform: none;
  }

  .carousel-prev {
    /* Positionne la flèche gauche en bas à gauche */
    left: 20%; 
  }

  .carousel-next {
    /* Positionne la flèche droite en bas à droite */
    right: 20%; 
  }
}

/* --- SECTION PASSIONS & COMPÉTENCES (À PROPOS) --- */

.separateur-apropos {
  margin: 25px 0;
  border: 0;
  border-top: 2px solid #000;
}

.competences-apropos {
  margin-bottom: 25px;
}

.competences-apropos p {
  margin-bottom: 13px;
  font-size: 1.15rem;
  padding: 0 10px;
}

.passions-titre {
  margin-bottom: 25px;
  font-size: 1.2rem;
  padding: 0 10px;
}

.passions-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 10px;
}

.passion-item {
  background-color: #ffd3ec;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.passion-item:hover {
  background-color: #f8b6db;
}

.passion-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 1.15rem;
}

.passion-summary::-webkit-details-marker {
  display: none;
}
.cliquez-info {
  font-size: 0.85rem; 
  font-weight: normal;
  color: #000;
}

.passion-texte {
  margin-top: 12px;
  font-style: normal;
  color: #000;
  font-size: 1.15rem;
  border-top: 1.5px solid #000;
  padding-top: 20px;
}

details:not([open]) .passion-texte {
  display: none;
}