/* =======================
   RESPONSIVE CSS
   ======================= */

/* TABLETTES (max-width: 768px) */
@media (max-width: 768px) {

  /* Réorganisation de la grille */
  main .bento-grid {
    display: flex;
    flex-direction: column; /* les blocs s'empilent */
    gap: 1rem;
    padding: 1.5rem 5%;
  }

  /* Réduction des boutons filtres */
  .filters {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .filters button {
    flex: 1 1 45%;
    font-size: 0.9rem;
  }

  /* Ajustement des titres */
  header h1 {
    font-size: 1.6rem;
  }
  header p {
    font-size: 0.9rem;
  }

  /* Expériences : réduire la taille du logo */
  .company-logo {
    width: 100px;
    height: 100px;
  }

  /* Projets */
  .projet {
    width: 100px;
  }
  .projet img {
    width: 60px;
    height: 60px;
  }

/* =======================
   RESPONSIVE - CERTIFICATS
   ======================= */

/* TABLETTES (max-width: 768px) */
@media (max-width: 768px) {
  .certificat-list {
    display: flex;
    flex-wrap: wrap;              /* les certificats passent sur plusieurs lignes */
    justify-content: center;      /* centrage horizontal */
    align-items: center;
    gap: 15px;                    /* espace entre chaque bloc */
  }

  .certificat {
    flex: 1 1 30%;                /* trois certificats par ligne environ */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .certificat img {
    width: 70px;
    height: 70px;
    object-fit: contain;
  }

  .certificat span {
    font-size: 0.9rem;
    margin-top: 5px;
  }

  /* Séparateurs --- moins espacés */
  .certificat-list p {
    display: none; /* on masque les tirets sur mobile/tablette */
  }
}

/* SMARTPHONES (max-width: 480px) */
@media (max-width: 480px) {
  .certificat-list {
    flex-direction: column;       /* un certificat par ligne */
    gap: 10px;
  }

  .certificat {
    flex: 1 1 100%;
  }

  .certificat img {
    width: 60px;
    height: 60px;
  }

  .certificat span {
    font-size: 0.85rem;
  }
}

  /* Réseaux sociaux */
  .network-icons {
    flex-wrap: wrap;
    justify-content: center;
  }
  .network-icon img {
    width: 60px;
    height: 60px;
  }

  /* Compétences et passions : mieux aligner */
  .competences-icons,
  .passions-icons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .competence-item,
  .passion {
    flex: 1 1 40%;
    justify-content: center;
  }
}

/* SMARTPHONES (max-width: 480px) */
@media (max-width: 480px) {

  /* Réduction du padding global */
  main .bento-grid {
    padding: 1rem 2%;
    gap: 0.8rem;
  }

  /* Header */
  header {
    padding: 1.5rem 0.5rem;
  }
  header h1 {
    font-size: 1.4rem;
  }
  header p {
    font-size: 0.8rem;
  }

  /* Filtres */
  .filters {
    flex-direction: column;
    align-items: center;
  }
  .filters button {
    width: 100%;
    font-size: 0.85rem;
  }

  /* Projets : afficher en colonne */
  .projets-list {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  .projet {
    width: 90%;
  }

  /* Expériences : affichage vertical */
  .slide {
    flex-direction: column;
    text-align: center;
  }
  .slide-content {
    padding: 0;
  }
  .company-logo {
    width: 80px;
    height: 80px;
    margin-top: 10px;
  }

  /* Certificats */
  .certificat img {
    width: 50px;
    height: 50px;
  }

  /* Réseaux sociaux */
  .network-icon img {
    width: 50px;
    height: 50px;
  }

  /* Compétences / Passions */
  .competences-icons,
  .passions-icons {
    flex-direction: column;
  }
  .competence-item,
  .passion {
    flex: 1 1 auto;
  }

  /* Contact et CV : ajustement */
  .bento-item.contact,
  .bento-item.cv-block {
    text-align: center;
  }
  .contact-normal h2,
  .cv-normal h2 {
    font-size: 1rem;
  }

  /* Modals et popups */
  .modal-content,
  .popup-content {
    width: 95%;
    padding: 1rem;
  }
  .popup-img {
    max-height: 200px;
  }
}