/* ==================================== */
/* CLASSES UTILITAIRES                */
/* ==================================== */

/* Polices */
.text-terminal { 
    font-family: 'Fira Code', monospace; 
  }
  .text-retro { 
    font-family: 'VT323', monospace; 
  }
  
  /* Couleurs */
  .title-green { 
    color: #00ff00a9; 
  }
  .txt-green { 
    color: #00ff0082; 
  }
  .txt-grey { 
    color: #0cff45d4; 
  }

  .txt-tech { 
    color: #6063ff; 
  }

  .txt-lightgrey { 
    color: #11df11cb; 
  }
  
  /* ==================================== */
  /* Corps de la page                    */
  /* ==================================== */
  
  body {
    background: #1e1e1e;
    color: #00ff00;
  }
  
  /* ==================================== */
  /* GRILLE DES PROJETS                  */
  /* ==================================== */
  
  .projects-grid {
    background-color: #1f1c13c7;
    height: 100%;
    padding: 3%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding-bottom: 6rem;
    perspective: 100px; 
    perspective-origin: center;
    z-index: 100;
  }
  
  /* ==================================== */
  /* CARTES DE PROJETS DYNAMIQUES        */
  /* ==================================== */
  
/* Taille & style global de la carte */
.project-card {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden;  
    border: 1px solid rgba(49, 197, 12, 0.459);
    border-radius: 8px;
    background: rgba(30, 165, 12, 0.123);
    transform-style: preserve-3d;  
    transition: transform 0.4s ease;
    backdrop-filter: blur(6px);
  }
  
  /* Image en haut */
  .image-container {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    transition: transform 0.4s ease;
  }
  .project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Corps principal (titre, excerpt) */
  .card-body {
    position: absolute;
    top: 200px;  /* sous l'image */
    left: 0; right: 0;
    height: 100px; 
    padding: 1rem;
    box-sizing: border-box;
    transition: transform 0.4s ease;
  }

  .project-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding: 1rem 2rem 0.2rem 0.8rem; 
  }

  .project-h3 {
    font-size: 0.8rem;
    margin: 0.5rem;
  }

  .project-excerpt {
    font-size: 0.9rem;
    opacity: 1;
    transition: opacity 0.4s ease;
    padding: 1rem 2rem 0.2rem 0.8rem;
  }
  
  .project-meta {
    position: absolute;
    bottom: 0;
    border-top: solid 2px #61b42d6c;
    left: 0; right: 0;
    height: 240px;        
    transform: translateY(200px);  
    transition: transform 0.4s ease;
    z-index: 10;
    background: #1d3110;
    backdrop-filter: blur(6px);
    padding: 0.6rem;
    box-sizing: border-box;
  }

  .progress-container {
    margin-top: 0;
  }
  
  /* Au survol de .project-meta (ou de ses enfants), elle remonte pour couvrir l'excerpt */
  .project-meta:hover,
  .project-meta:hover .technologies,
  .project-meta:hover .project-date,
  .project-meta:hover .progress-container {
    transform: translateY(0);
  }
  
  .project-meta:hover ~ .card-body {
    transform: translateY(-200px);
  }
  .project-meta:hover ~ .image-container {
    transform: translateY(-200px);
  }
  

  .project-card:hover .image-container {
    transform: translateY(-200px);
  }
  .project-card:hover .card-body {
    transform: translateY(-200px);
  }
  
  /* Extrait : visible par défaut, recouvert par .project-meta quand elle remonte */
  .project-excerpt {
    transition: opacity 0.4s ease;
  }
  
  /* Option : diminuer l'opacité de l'excerpt quand on survole la meta */
  .project-meta:hover ~ .card-body .project-excerpt {
    opacity: 0.2;
  }

  .cat-card {
    background-color: #00ff0046;
    padding: 0.15em;
    border-radius: 0.2em;
  }

  .tech-card {
    background-color: #0a64ff6f;
    padding: 0.15em;
    border-radius: 0.2em;
  }
  
  /* ==================================== */
  /*  Effets supplémentaires  néon  */
  /* ==================================== */
  
 
  @keyframes neon-flicker {
    0%, 1%, 2%, 3%, 4%, 7%, 10%, 12%, 15%, 17%, 22%, 25%, 28%, 30%, 35%, 38%, 40%, 45%, 50%, 53%, 58%, 60%, 63%, 65%, 70%, 75%, 78%, 80%, 82%, 85%, 88%, 90%, 92%, 95%, 97%, 100% {
      box-shadow: 0 0 3px rgba(12, 145, 12, 0.2),
                  0 0 10px rgba(12, 145, 12, 0.3),
                  0 0 15px rgba(12, 145, 12, 0.2),
                  0 0 20px rgba(12, 145, 12, 0.1);
    }
    5%, 6%, 8%, 13%, 16%, 18%, 20%, 23%, 27%, 30%, 33%, 37%, 40%, 42%, 45%, 47%, 50%, 55%, 60%, 65%, 68%, 72%, 75%, 80%, 83%, 87%, 90%, 93%, 97% {
      box-shadow: 0 0 6px rgba(12, 145, 12, 0.4),
                  0 0 15px rgba(255, 19, 243, 0.262),
                  0 0 25px rgba(12, 145, 12, 0.4),
                  0 0 35px rgba(12, 145, 12, 0.2);
    }
  }
  
  .project-card:hover {
    animation: neon-flicker 5s infinite alternate;
    filter: brightness(1.1);
  }