/* 2. SECTION HÉROS (IMAGE DE FOND) */

.ark-hero {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('../images/ArkFond5.jpg'); 
    background-size: cover;
    margin: 0;
    background-attachment: fixed;
    padding-top: 200px;

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



 .ark-hero h3 {
    font-size: 1.6rem;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
    text-align: center;
    color: rgb(0, 255, 128);
   
    padding-bottom: 2px;
    text-align: center;
}
.ark-hero h4 {
    font-size: 0.9rem;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
    padding-bottom: 2px;
    color: rgb(0, 255, 128);
}   
     


	
.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: 5px;
  box-sizing: border-box;

  /* Alignement interne */
  display: flex;
  flex-direction: column;
  
  /* Gestion de la taille */
  height: 100%; 
  width: 100%;
  overflow: hidden; /* Empêche le texte de sortir de la box fixe */
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}


.box:hover { /* Effet de zoom de la box*/
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
    border-color: #00f3ff;
}


.conteneur {
  display: grid;
  /* 3 colonnes de largeur égale */
  grid-template-columns: repeat(4, 1fr); 
  /* Définit une hauteur de base pour chaque ligne (ajustable) */
  grid-auto-rows: 300px; 
  grid-gap: 20px;
  width: 95%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 80vh;
}

/* Une box standard (1x1) */
.une {
  grid-column: span 1;
  grid-row: span 1;
}

/* Une box deux fois plus haute (1x2) */
.deux {
  grid-column: span 50%;
  grid-row: span 2;
}
.trois {
  grid-column: span 1;
  grid-row: span 1;
}

.quatre {
  grid-column: span 1;
  grid-row: span 2;
}

.cinq {
  grid-column: span 1;
  grid-row: span 2;
}

/* Une box deux fois plus large (2x1) */
.six {
  grid-column: span 1;
  grid-row: span 1;
}
.sept {
  grid-column: span 1;
  grid-row: span 1;
}
.huit {
  grid-column: span 2;
  grid-row: span 1;
}
.neuf {
  grid-column: span 1;
  grid-row: span 1;
}

.scroll-content {
    flex-grow: 1;       /* Prend toute la place libre */
    overflow-y: auto;   /* Active le scroll vertical si nécessaire */
    margin: 10px 0;     /* Espace avec le titre et le bouton */
    padding-right: 5px; /* Petit espace pour ne pas coller à la barre de scroll */
}

/* PERSONNALISATION DE LA BARRE DE SCROLL (Optionnel mais plus joli) */
.scroll-content::-webkit-scrollbar {
    width: 5px;
}

.scroll-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.scroll-content::-webkit-scrollbar-thumb {
    background: #00d1ff; /* Couleur cyan comme ton thème */
    border-radius: 10px;
}

.scroll-content::-webkit-scrollbar-thumb:hover {
    background: #00f3ff;
}


.warning-text {  /* UPour mettre le texte en rouge ajouter ca <p class="warning-text"></p>au html */
    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;
}




/* Tablette : on passe à 2 colonnes si l'écran est trop petit */
@media (max-width: 900px) {
  .conteneur {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    grid-auto-rows: min-content; /* On laisse la hauteur s'adapter au texte */
  }
  
  .box {
    grid-column: span 1 !important; /* On force tout sur 1 colonne si besoin */
    grid-row: span 1 !important;
  }
}

@media (max-width: 600px) {
  .conteneur {
    grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
  }
}