/* utilities.css */

/* DISPLAY & FLEX */
.flex { display: flex; }
.column { flex-direction: column; }
.row { flex-direction: row; }
.center { justify-content: center; align-items: center; }
.space-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.marginCenterHorizon { margin: 0 auto; }

/* GRID */
.grid { display: grid; }
/* Meilleure gestion des colonnes pour éviter les cartes trop larges ou trop petites */
.tech-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem; }
.project-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.cert-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }

/* PADDING & MARGIN */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 3rem 1.5rem; } /* Plus d'espace vertical pour aérer les sections */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2.5rem; }

/* TEXT */
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-small { font-size: 0.875rem; color: #666; }
.text-lg { font-size: 1.75rem; line-height: 1.3; } /* Titres plus imposants */
.text-xl { font-size: 2.5rem; line-height: 1.2; }
.bold { font-weight: 700; }
.text-blue { color: #2c5de5; }
.text-dark { color: #1f2937; }

/* COLORS & BACKGROUND */
.bg-light { background-color: #f3f4f6; }
.bg-white { background-color: #ffffff; }

/* WIDTH */
.w-80 { width: 80%; max-width: 1200px; } /* Ajout d'un max-width pour les grands écrans */
.w-100 { width: 100%; }

/* EFFECTS */
/* Ombre plus douce et moderne */
.shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.rounded { border-radius: 1rem; }
.nodecoration { text-decoration: none; }

/* POSITION */
.sticky { position: sticky; z-index: 50; }
.top-0 { top: 0; }
.relative { position: relative; }

/* BUTTONS */
.btn-primary { 
    background-color: #2c5de5; 
    color: white; 
    padding: 0.6rem 1.2rem; 
    border: none; 
    border-radius: 0.5rem; 
    cursor: pointer; 
    transition: background-color 0.3s;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.btn-primary:hover { background-color: #1e40af; }

.btn-secondary { 
    background-color: #e5e7eb; 
    color: #374151;
    border: none; 
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    cursor: pointer; 
    font-weight: 500;
    transition: background-color 0.3s;
}
.btn-secondary:hover { background-color: #d1d5db; }

/* LINKS */
.link { text-decoration: none; color: #2c5de5; font-weight: 500; transition: color 0.2s; }
.link:hover { color: #1e40af; text-decoration: underline; }

/* FONT */
/* Utilisation de Poppins si chargé, sinon fallback propre */
.font-main { font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .flex { flex-direction: column; }
  /* Exception pour la navbar : on veut garder le layout horizontal si possible ou burger, 
     mais ici on force un espacement correct */
  header .flex { flex-direction: column; gap: 1rem; } 
  nav.flex { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .w-80 { width: 95%; }
  .text-xl { font-size: 2rem; }
}

/* IMAGE SIZING UTILS */
.img-cover { width: 100%; object-fit: cover; display: block; }