/* =============================================================================
   BADGES.CSS  –  🏷️  Tech badges & thumbs
   Harmonisé le 2025‑07‑04
   -----------------------------------------------------------------------------
   CHANGEMENTS PRINCIPAUX
   • Variables doublons (--bg-light / --bg-dark) supprimées (déjà définies dans base.css).
   • Indentation / commentaires uniformisés avec le reste du projet.
   • Aucune classe renommée (compatibilité totale avec HTML existant).
   ---------------------------------------------------------------------------*/

/*───────────────────────
  0 · RESET LOCAL
───────────────────────*/
.project-section .row > .mb-4 { margin-bottom: .75rem !important; }
.project-section .project-card.big-block { margin-block: 0; }

/*───────────────────────
  1 · DESIGN TOKENS
───────────────────────*/
:root {
  --radius-sm: 8px;
  --radius-md: 10px;
  --shadow-base: 0 5px 15px rgb(0 0 0 / .15);
  --shadow-hov:  0 8px 24px rgb(0 0 0 / .15);
  --shadow-dark: 0 8px 24px rgb(255 255 255 / .10);

  /* Halo clair (cyan) */
  --halo-core: 0 0 0 2px rgb(0 168 255 / .35);
  --halo-main: 0 0 18px rgb(0 168 255 / .65);
}

html.dark {
  /* Halo sombre (violet) */
  --halo-core: 0 0 0 2px rgb(124 77 255 / .45);
  --halo-main: 0 0 20px rgb(124 77 255 / .80);
}

/*───────────────────────
  2 · ANIMATIONS
───────────────────────*/
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse  { 0%,100% { transform: scale(1);} 50% { transform: scale(1.08);} }

/*───────────────────────
  3 · COMPOSANT : BADGE LIST
───────────────────────*/
.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 6px;
  margin-bottom: 2rem;
}

.tech-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.05rem;
  font: 600 .9rem/1.4 var(--bs-body-font-family, sans-serif);
  letter-spacing: .2px;
  border-radius: 999px;
  background: rgb(255 255 255 / .15);
  color: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .10);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn .6s ease-out forwards;
  transition: transform .2s, background-color .2s, color .2s, box-shadow .2s;
}

.tech-badges .badge:is(:hover, :focus) {
  transform: scale(1.05);
  background: #e0e0e0;
  color: #000;
  box-shadow: 0 4px 8px rgb(0 0 0 / .15);
}

.tech-badges .badge:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

html.dark .tech-badges .badge { background: rgb(255 255 255 / .10); }
html.dark .tech-badges .badge:is(:hover, :focus) { background: #fff; color: #111; }

/* Cascade (1 badge / 0.2 s) – sans JS */
.tech-badges .badge:nth-child(n) { animation-delay: calc(.2s * (var(--n, 1) - 1)); }

/*───────────────────────
  4 · HELPERS COULEUR (placés APRÈS le générique)
───────────────────────*/
.tech-badges .badge.bg-python  { background: #4584b6 !important; }
.tech-badges .badge.bg-spacy   { background: #08a0e9 !important; }
.tech-badges .badge.bg-pandas  { background: #ffc107 !important; color: #111; }
.tech-badges .badge.bg-yaml    { background: #f2f2f2 !important; color: #111; }
.tech-badges .badge.bg-cli     { background: #444 !important; }
.tech-badges .badge.bg-django  { background: #092e20 !important; }
.tech-badges .badge.bg-cloud   { background: #5d5dff !important; }
.tech-badges .badge.bg-css     { background: #264de4 !important; }
.tech-badges .badge.bg-git     { background: #333 !important; }

.badge.glow { box-shadow: 0 0 10px rgb(0 170 255 / .50); }
.badge.anim { animation: pulse 2s infinite ease-in-out; }

/*───────────────────────
  5 · THUMBNAILS
───────────────────────*/
.project-thumb {
  width: 100%;
  height: auto;              /* frein anti “giga” screenshots */
  object-fit: cover;         /* remplit le cadre sans déformer l’image */
}

/*───────────────────────
  6 · CARDS / BUTTONS
───────────────────────*/
.card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-hov);
  z-index: 2;
}

html.dark .card:hover { box-shadow: var(--shadow-dark); }

/* 6.1 · Boutons égaux */
.btn-group-equal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: auto;
}

.btn-group-equal .btn-equal {
  flex: 1 1 calc(50% - .5rem);
  min-width: 120px;
  transition: transform .2s ease, filter .2s ease;
}

.btn-group-equal .btn-equal:is(:hover, :focus-visible) {
  transform: scale(1.03);
  filter: brightness(.9);
  outline: 2px dashed #00aaff;
  outline-offset: 3px;
}

/*───────────────────────
  7 · RESPONSIVE & GUTTERS
───────────────────────*/
.project-section .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

@media (max-width: 575.98px) {
  .tech-badges { gap: 12px 10px; }
  .project-section .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
}

/*───────────────────────
  8 · HOVER HALO – À placer tout en bas du fichier
───────────────────────*/
@media (hover: hover) {
  /* Vignette classique */
  .project-thumb:is(:hover, :focus-visible):not(.contain-img) {
    transform: scale(1.02) translateY(-2px);
    box-shadow: var(--halo-core), var(--halo-main), var(--shadow-hov);
  }

  /* Vignette .contain-img (logos, couvertures) */
  .project-thumb.contain-img:is(:hover, :focus-visible) {
    transform: scale(1.03) translateY(-3px);
    box-shadow: var(--halo-core), var(--halo-main), 0 10px 25px rgb(0 0 0 / .30);
  }
}

/* Dark‑mode : halo + ombre */
html.dark .project-thumb:is(:hover, :focus-visible) {
  box-shadow: var(--halo-core), var(--halo-main), 0 8px 24px rgb(0 0 0 / .40);
}


/* Icônes Lucide intégrées dans du texte */
.icon {
  width: 1em;
  height: 1em;
  stroke-width: 1.8;
  vertical-align: -.125em;   /* aligne avec la ligne de base */
}

.project-cta .btn-primary {
  background: #1976d2;
  color: #fff;
}
html.light .project-cta .btn-primary {
  background: #1976d2;
  color: #fff;
}

/* ------------------------------------------------------------
   Badges : position de départ (toujours)
------------------------------------------------------------- */
.tech-badges .badge{
  opacity: 0;
  transform: translateY(10px);
}

/* ------------------------------------------------------------
   Animation cascade
   (uniquement si l’utilisateur N’A PAS activé “Reduce Motion”)
------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* animation de base */
  .tech-badges .badge{
    animation: badgeFade .6s ease-out forwards;
  }

  /* délais enchaînés : 0 s, 0 - 0.2 - 0.4 … */
  .tech-badges .badge:nth-child(1){ animation-delay: 0s;   }
  .tech-badges .badge:nth-child(2){ animation-delay: .2s; }
  .tech-badges .badge:nth-child(3){ animation-delay: .4s; }
  .tech-badges .badge:nth-child(4){ animation-delay: .6s; }
  .tech-badges .badge:nth-child(5){ animation-delay: .8s; }
  .tech-badges .badge:nth-child(6){ animation-delay: 1s;  }
  .tech-badges .badge:nth-child(7){ animation-delay: 1.2s;}
  .tech-badges .badge:nth-child(8){ animation-delay: 1.4s;}
  .tech-badges .badge:nth-child(9){ animation-delay: 1.6s;}
  .tech-badges .badge:nth-child(10){animation-delay: 1.8s;}
}

/* keyframes */
@keyframes badgeFade{
  to{ opacity:1; transform:translateY(0); }
}