/*Section pour l'arrière-plan de la page*/
body {
    position: relative; 
    background-image: url('../Img/Background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Engravers MT';
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Empêche les barres de défilement globales */
}

/*Section pour le titre de la page*/
h1 {
    color: #00ffff; /* Cyan électrique */
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    margin-top: clamp(10px, 2vh, 25px);
    text-shadow: 0 0 100px rgba(0, 255, 255, 0.7); /* Lueur du texte */
}

/*Section pour l'ordi-web*/
h2 {
    position: absolute;
    top: 47%;      
    left: 12%; 
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    margin-bottom: 10px;
    color: #00ffff; /* Cyan électrique */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
}

.ordi-web {
  position: absolute;
  top: 55%;      
  left: 3%;     
  width: 35%;    
  height: 35%;   
  
  /* Gestion du texte*/
  font-family: 'Courier New', Monaco, monospace;
  font-size: clamp(12px, 1.1vw, 15px);          
  color: #00ffff;            /* Cyan électrique*/
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
  padding: 10px;             
  
  /* Effet de vitre holographique teintée avec fond bleu nuit.*/
  background-color: rgba(0, 15, 30, 0.6); 
  border: 1px solid rgba(0, 255, 255, 0.4); 
  
  /* Lueur néon ajustée en Cyan */
  box-shadow: 
    0 0 15px rgba(0, 255, 255, 0.4),  
    inset 0 0 10px rgba(0, 255, 255, 0.2); 
}

 /* Section pour l'ordi-logiciels */
h3 {
    position: absolute;
    top: 5%;      
    left: 40%; 
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    margin-bottom: 10px;
    color: #00ffff; /* Cyan électrique */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
}

.ordi-logiciels {
  position: absolute;
  top: 11%;        
  left: 30%;       
  width: 35%;    
  height: 35%;     
  
  /* Gestion du texte*/
  font-family: 'Courier New', Monaco, monospace;
  font-size: clamp(12px, 1.1vw, 15px);           
  color: #00ffff;            /* Cyan électrique*/
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
  padding: 10px;             
  
  /* Effet de vitre holographique teintée avec fond bleu nuit.*/
  background-color: rgba(0, 15, 30, 0.6); 
  border: 1px solid rgba(0, 255, 255, 0.4); 
  
  /* Lueur néon ajustée en Cyan */
  box-shadow: 
    0 0 15px rgba(0, 255, 255, 0.4),  
    inset 0 0 10px rgba(0, 255, 255, 0.2);  
}

/* Section pour l'ordi-systemes */
h4 {
    position: absolute;
    top: 47%;      
    left: 70%; 
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    margin-bottom: 10px;
    color: #00ffff; /* Cyan électrique */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
}

.ordi-systemes {
  position: absolute;
  top: 55%;        
  left: 60%;       
  width: 35%;    
  height: 35%;    
  
  /* Gestion du texte*/
  font-family: 'Courier New', Monaco, monospace;
  font-size: clamp(12px, 1.1vw, 15px);          
  color: #00ffff;            /* Cyan électrique*/
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); /* Lueur du texte */
  padding: 10px;             
   
  /* Effet de vitre holographique teintée avec fond bleu nuit.*/
  background-color: rgba(0, 15, 30, 0.6); 
  border: 1px solid rgba(0, 255, 255, 0.4); 
  
  /* Lueur néon ajustée en Cyan */
  box-shadow: 
    0 0 15px rgba(0, 255, 255, 0.4),  
    inset 0 0 10px rgba(0, 255, 255, 0.2); 
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 255, 255, 0.2); 
    color: #00ffff; 
    width: clamp(28px, 2.5vw, 36px);
    height: clamp(28px, 2.5vw, 36px);
    font-size: clamp(14px, 1.5vw, 20px);          
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
    z-index: 10;           
    transition: 0.3s; 
    
    /* Centrage des symboles < et > à l'intérieur du cercle. */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rapproche les flèches tout près des bords intérieurs de chaque hologramme */
.prev-btn { left: -40px; }
.next-btn { right: -40px; }

.prev-btn:hover, .next-btn:hover {
    background: #00ffff; 
    color: #000; 
}

/* Section pour le dérouleur de texte à l'intérieur des écrans */
.contenu-ecran {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto; /* Paramètre pour rendre le texte déroulant. */
  box-sizing: border-box;
}

/* Cette classe sera ajoutée ou retirée par JavaScript */
.projet-masque {
    display: none !important;
}

/* Effet de curseur clignotant à la fin du texte en cours d'écriture */
.contenu-ecran p:last-of-type::after {
    content: " █"; /* Paramètre pour afficher la barre. */
    animation: clignotementCurseur 0.8s infinite;
}

@keyframes clignotementCurseur {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/*Section pour les images des projets*/
.img-projet {
    display: block;            /* Force l'image à aller à la ligne */
    max-width: 90%;            /* S'adapte à la largeur de l'hologramme sans déborder */
    height: auto;              /* Conserve les proportions d'origine de la capture */
    margin: 15px auto 0 auto;  /* Centre l'image horizontalement et l'écarte du texte */
    
    /* Habillage "Écran spatial" */
    border: 1px solid rgba(0, 255, 255, 0.5); /* Fine bordure cyan comme l'ordinateur */
    border-radius: 4px;        
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); /* Légère lueur autour de la capture */
    opacity: 0.85;             /* Légère transparence pour accentuer l'effet hologramme */
}

/* Personnalisation de la barre de défilement pour les écrans spatiaux. */
.contenu-ecran::-webkit-scrollbar {
    width: 6px; /* Augmente ou diminue pour l'épaisseur de la barre. */
}

.contenu-ecran::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); 
}

.contenu-ecran::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.4); 
    border-radius: 10px;
}

.contenu-ecran::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.8); 
}

/*Parametre pour le hyperlien.*/
a {
    color: #00ffff;            /* Cyan électrique*/
}

/*Code compatibilité mobile, pc et laptop*/
h1 {
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    margin-top: clamp(8px, 1.5vh, 18px);
}

h2, h3, h4 {
    font-size: clamp(0.95rem, 1.4vw, 1.25rem);
}

.ordi-web,
.ordi-logiciels,
.ordi-systemes {
    font-size: clamp(11.5px, 0.95vw, 13.5px);
}

.prev-btn, .next-btn {
    width: clamp(26px, 2vw, 32px);
    height: clamp(26px, 2vw, 32px);
    font-size: clamp(14px, 1.3vw, 17px);
}

/* ========== PC large (≥ 1800px) ========== */
@media (min-width: 1800px) {
    .ordi-web      { top: 56%; left: 4%;  width: 30%; height: 32%; }
    .ordi-logiciels{ top: 13%; left: 32%; width: 30%; height: 32%; }
    .ordi-systemes { top: 56%; left: 63%; width: 30%; height: 32%; }

    /* Titres recentrés */
    h2 { top: 49%; left: 14%; }   
    h3 { top: 7%;  left: 42%; }   
    h4 { top: 49%; left: 73%; }   
}

/* ========== Laptops larges (1400 – 1799px) ========== */
@media (max-width: 1799px) and (min-width: 1400px) {
    .ordi-web {
        top: 55%;
        left: 3.5%;
        width: 31%;
        height: 33%;
    }
    .ordi-logiciels {
        top: 12%;
        left: 31.5%;
        width: 31%;
        height: 33%;
    }
    .ordi-systemes {
        top: 55%;
        left: 62%;
        width: 31%;
        height: 33%;
    }

    /* Titres pour la section de mon laptop. */
    h2 { top: 48%; left: 7%; }
    h3 { top: 5%; left: 33%; }
    h4 { top: 46%; left: 65%; }

    .prev-btn { left: -34px; }
    .next-btn { right: -34px; }
}

/* ========== Laptops classiques (1100 – 1399px) ========== */
@media (max-width: 1399px) and (min-width: 1000px) {
    h1 { font-size: 1.9rem; }

    .ordi-web {
        top: 54%;
        left: 3%;
        width: 32%;
        height: 34%;
    }
    .ordi-logiciels {
        top: 11.5%;
        left: 31%;
        width: 32%;
        height: 34%;
    }
    .ordi-systemes {
        top: 54%;
        left: 61%;
        width: 32%;
        height: 34%;
    }

    /* Titres recentrés */
    h2 { top: 47%; left: 13%;  font-size: 1.15em; }
    h3 { top: 6%;  left: 40.5%; font-size: 1.15em; }
    h4 { top: 47%; left: 71%;  font-size: 1.15em; }

    .prev-btn { left: -32px; }
    .next-btn { right: -32px; }
}

/* ========== Petits laptops (800 – 999px) ========== */
@media (max-width: 999px) and (min-width: 769px) {
    h1 { font-size: 1.7rem; }

    .ordi-web {
        top: 53%;
        left: 2.5%;
        width: 34%;
        height: 35%;
    }
    .ordi-logiciels {
        top: 11%;
        left: 30%;
        width: 34%;
        height: 35%;
    }
    .ordi-systemes {
        top: 53%;
        left: 60%;
        width: 34%;
        height: 35%;
    }

    /* Titres recentrés */
    h2 { top: 46%; left: 12.5%; font-size: 1.1em; }
    h3 { top: 5.5%; left: 39.5%; font-size: 1.1em; }
    h4 { top: 46%; left: 69.5%; font-size: 1.1em; }

    .prev-btn { left: -30px; }
    .next-btn { right: -30px; }
}

/* ========== Tablette / Mobile (≤ 768px) ========== */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
        background-attachment: scroll;
    }

    h1 {
        font-size: clamp(1.35rem, 5vw, 1.8rem);
        margin: 12px 10px;
        text-align: center;
        line-height: 1.25;
    }

    h2, h3, h4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block;
        text-align: center;
        margin: 22px 0 8px 0;
        font-size: 1.15rem;
    }

    .ordi-web,
    .ordi-logiciels,
    .ordi-systemes {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 92%;
        height: 340px;
        margin: 0 auto 28px auto;
        font-size: 13.5px;
    }

    .prev-btn, .next-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .prev-btn { left: -15px; }
    .next-btn { right: -15px; }

    .img-projet {
        max-width: 88%;
        margin-top: 10px;
    }
}

/* Très petits téléphones */
@media (max-width: 420px) {
    .ordi-web,
    .ordi-logiciels,
    .ordi-systemes {
        height: 300px;
        font-size: 12.5px;
    }
}