/* 2. SECTION HÉROS (IMAGE DE FOND) */
/* 2. SECTION HÉROS */
.ark-hero {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('../images/ArkFond7.jpeg'); 
     background-size:cover;
    margin:0;
    background-attachment: fixed;

    
    /* AJOUTS POUR L'ALIGNEMENT */
    display: flex;
    flex-wrap: wrap;       /* Permet de passer à la ligne (3 blocs dessus, 3 dessous) */
    justify-content: center; /* Centre les blocs horizontalement */
    gap: 20px;  
    padding: 20px;
    box-sizing: border-box;          /* Espace régulier entre les blocs */
    padding-top: 200px;
}



.box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 3px solid rgba(0, 255, 255, 0.3); 
    border-left: 4px solid #00d1ff;
    border-radius: 15px;
    color: #ffffff;
    padding: 20px;
    margin-bottom: 50px; /* Marge bas */
    margin-top: 20px;  /* Marge haut */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne le contenu en haut */
    position: relative;
    flex-grow: 1; /* Permet au texte de prendre l'espace restant */
    margin-bottom: 20px;
   /* FORCE 3 COLONNES : calc(33.33% - l'espace du gap) */
    flex: 0 0 calc(100% - 30px); 

    /* On fixe la hauteur pour l'uniformité */
    height: 100%; 
    
    /* Important pour que le padding ne fasse pas grossir la boîte */
    box-sizing: border-box; 
    
    overflow-y: auto;
    scroll-margin-top: 200px; /* Ajuste la valeur selon la hauteur de ton header */
}   

/* On s'assure que le texte du paragraphe ne colle pas au bouton */
.box p {
    flex-grow: 1; /* Permet au texte de prendre l'espace restant */
    margin-bottom: 20px;
}

.box::-webkit-scrollbar {
    width: 6px;
}

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

.box::-webkit-scrollbar-thumb {
    background: #00d1ff;
    border-radius: 10px;
}

.spacer-invisible {  /*Création de grand espaces vertical entre les box*/
    height: 1000px;  /* Ajuste cette valeur selon le "grand espace" voulu */
    width: 100%;    /* Elle prend toute la largeur pour bien séparer */
    background: transparent; /* Elle est invisible par défaut */
    border: none;            /* Aucune bordure */
    pointer-events: none;    /* Optionnel : on ne peut pas cliquer dessus */
}

    
        
.ark-hero p {
    font-size: 1.2rem;
    margin-top: 20px;
    text-align: justify;
}

.ark-hero p2 {
font-size: 1.4rem;
text-align: center;
color: rgb(0, 255, 128);
}

 #ligne {
  text-align: center;
  color: rgb(0, 255, 128);
 }
 .ark-hero h3 {
    font-size: 2.5rem;
    margin: 0 ;             /* centre la ligne */
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
    border-bottom: 4px solid var(--ark-cyan);
    padding-bottom: 10px;
     text-align: center;
}
.ark-hero h4 {
    font-size: 1.4rem;
    margin: 0 auto;             /* centre la ligne */
    text-transform: uppercase;
    /* --- CHANGEMENTS ICI --- */
    color: #2ecc71; /* Un beau vert "Ark" bien visible */
    text-shadow: 0 0 20px rgba(46, 204, 113, 0.8); /* Ombre portée verte */
    border-bottom: 4px solid #2ecc71; /* Bordure sous le texte en vert */
    /* ------------------------ */
    padding-bottom: 10px;
}

.ark-hero h5 {
    font-size: 1.2rem;
    margin: 0 0 0 1rem;         /* marge gauche uniquement */
    text-align: left;           /* aligne le texte à gauche */
    text-transform: uppercase;
    color: #d38d0c;
    text-shadow: 0 0 20px rgba(46, 204, 113, 0.8);
    position: relative;
    padding-bottom: 5px;
    border-bottom: 2px solid #2ecc71;
    width: fit-content;         /* la bordure suit la largeur du texte */
}





:root {
    --ark-green: #2ecc71;
}
   

/* Style du bouton Ark */
.ark-btn {
    display: block;
    margin-top: auto; /* Pousse le bouton vers le bas de la box */
    background: rgba(0, 209, 255, 0.2);
    color: #00d1ff;
    text-decoration: none;
    text-align: center;
    padding: 12px;
    border: 1px solid #00d1ff;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.ark-btn:hover {
    background: #00d1ff;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 209, 255, 0.6);
}


.warning-text {
    color: #ff4d4d; /* Un rouge vif mais lisible */
    font-weight: bold; /* Pour que le conseil ressorte bien */
    text-align: center;
    margin-top: 20px;
    font-style: italic;
}


.command-wrapper {
    background: #222;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ff4d4d;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

code {
    color: #fff;
    font-family: monospace;
}

.copy-btn {
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    transition: 0.2s;
}

.copy-btn:hover {
    background: #fff;
    color: #ff4d4d;
}

.texte-rouge {
    color: red; /* Définit la couleur du texte */
    font-weight: bold; /* Optionnel : met le mot en gras pour qu'il ressorte mieux */
}

/* Tablette : on passe à 2 colonnes si l'écran est trop petit */
@media (max-width: 1100px) {
    .box {
        flex: 0 0 calc(50% - 20px);
    }
}

/* Mobile : 1 seule colonne */
@media (max-width: 700px) {
    .box {
        flex: 0 0 100%;
    }
}

.image-container {
    text-align: center;      /* Centre l'image horizontalement */
    margin-top: 30px;        /* Interligne/Espace en haut */
    margin-bottom: 30px;     /* Interligne/Espace en bas */
}

.img-centree {
    max-width: 80%;          /* Empêche l'image d'être trop grande sur grand écran */
    height: auto;            /* Garde les proportions */
    border-radius: 8px;      /* Optionnel : pour des bords arrondis style Ark */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); /* Optionnel : une petite lueur cyan */
}

.btn-warning {
    background-color: #ffcc00;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
}

.btn-warning a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

.btn-warning:hover {
    background-color: #e6b800;
}