/*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. */
    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;             /* Effet transparant pour les hologrammes. */
}

/* 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 pour la section réseaux sociaux*/
.social-section {
    position: absolute;
    bottom: 25px;                 /* Distance du bas de l'écran */
    left: 50%;
    transform: translateX(-50%);  /* Centrage parfait horizontal */
    z-index: 20;
    text-align: center;
    width: 90%;
    max-width: 900px;
}

/* Titre */
.social-title {
    position: static !important;  /* Annule les styles absolus de h4 */
    top: auto !important;
    left: auto !important;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}

/* Le petit rectangle cyan électrique */
.social-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 5px 22px;
    
    /* Style hologramme cyan */
    background-color: rgba(0, 15, 30, 0.75);
    border: 1px solid rgba(0, 255, 255, 0.55);
    border-radius: 12px;
    box-shadow: 
        0 0 18px rgba(0, 255, 255, 0.35),
        inset 0 0 12px rgba(0, 255, 255, 0.12);
}

/* Icônes */
.social-box a {
    display: inline-block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.social-box img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.4));
}

/* Effet hover */
.social-box a:hover {
    transform: scale(1.18) translateY(-3px);
}

.social-box a:hover img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9));
}

/*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;
    }
}

/* ========== Responsive pour la section sociale ========== */
@media (max-width: 1100px) {
    .social-section {
        bottom: 18px;
    }
    .social-box {
        gap: 12px;
        padding: 12px 18px;
    }
    .social-box img {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 768px) {
    .social-section {
        position: relative;       /* Passe en flux normal sur mobile */
        bottom: auto;
        left: auto;
        transform: none;
        margin: 40px auto 30px auto;
        width: 94%;
    }
    
    .social-box {
        gap: 11px;
        padding: 14px 16px;
    }
    
    .social-box img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .social-box img {
        width: 28px;
        height: 28px;
    }
    .social-box {
        gap: 9px;
        padding: 12px 14px;
    }
}