/* =============================================================================
   PROJECTS.CSS – 🚀 Portfolio / Projets
   Optimisé & fusionné le 2025-07-09
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   0 · VARIABLES GLOBALES
   ------------------------------------------------------------------------ */
:root {
  --primary-text: #222;
  --secondary-text: #666;
  --accent: #4f8cff;
  --project-card-dark: #191a23;
  --project-card-light: #fff;
  --project-fig-overlay-dark: rgba(0,0,0,0.38);
  --project-fig-overlay-light: rgba(250,250,255,0.7);
  --badge-bg-default: #25264a;
  --badge-color-default: #fff;
  --badge-bg-light-default: #e8eafc;
  --badge-color-light-default: #223;
}

html.dark {
  --primary-text: #fff;
  --secondary-text: #bbb;
}

/* ---------------------------------------------------------------------------
   1 · BADGES TECHNIQUES (par techno)
   ------------------------------------------------------------------------ */
.project-tags .badge-python    { --badge-bg: #3776ab; --badge-color: #fff; --badge-bg-light: #e3f0fa; --badge-color-light: #3776ab; }
.project-tags .badge-js        { --badge-bg: #ffd600; --badge-color: #222; --badge-bg-light: #fff9c4; --badge-color-light: #222; }
.project-tags .badge-html      { --badge-bg: #2196f3; --badge-color: #fff; --badge-bg-light: #e3f2fd; --badge-color-light: #1976d2; }
.project-tags .badge-css3      { --badge-bg: #00bcd4; --badge-color: #fff; --badge-bg-light: #e0f7fa; --badge-color-light: #00bcd4; }
.project-tags .badge-docker    { --badge-bg: #222; --badge-color: #fff; --badge-bg-light: #f5f5f5; --badge-color-light: #222; }
.project-tags .badge-xcode     { --badge-bg: #fff; --badge-color: #222; --badge-bg-light: #fff; --badge-color-light: #222; border: 1px solid #222; }
.project-tags .badge-pandas    { --badge-bg: #e5e7fa; --badge-color: #222; --badge-bg-light: #f7f8fd; --badge-color-light: #222; }
.project-tags .badge-spacy     { --badge-bg: #6c63ff; --badge-color: #fff; --badge-bg-light: #ede7f6; --badge-color-light: #6c63ff; }
.project-tags .badge-yaml      { --badge-bg: #f5e9b2; --badge-color: #222; --badge-bg-light: #fffde7; --badge-color-light: #222; }
.project-tags .badge-cli       { --badge-bg: #e0e0e0; --badge-color: #222; --badge-bg-light: #f5f5f5; --badge-color-light: #222; }
.project-tags .badge-udemy     { --badge-bg: #a435f0; --badge-color: #fff; --badge-bg-light: #f3e6fc; --badge-color-light: #a435f0; }
.project-tags .badge-openclassrooms { --badge-bg: #0b76ef; --badge-color: #fff; --badge-bg-light: #e6f3fd; --badge-color-light: #0b76ef; }
.project-tags .badge-coursera  { --badge-bg: #2a73cc; --badge-color: #fff; --badge-bg-light: #eaf1fb; --badge-color-light: #2a73cc; }

.project-tags .badge {
  background: white;
  color: black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.project-tags .tech-icon-svg {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
}

.project-tags .badge:hover {
  transform: scale(1.05);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/* ---------------------------------------------------------------------------
   2 · GRILLE GLOBALE DES CARTES
   ------------------------------------------------------------------------ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-block: 2.5rem 3rem;
}

/* ---------------------------------------------------------------------------
   3 · CARTE PROJET
   ------------------------------------------------------------------------ */
.project-card {
  border-radius: 24px;
  box-shadow: 0 8px 32px rgb(40 40 80 / .13);
  background: var(--project-card-dark);
  transition: box-shadow .3s, transform .2s;
  margin: 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.project-card:is(:hover, :focus-within) {
  box-shadow: 0 16px 48px rgb(24 24 44 / .22);
  transform: translateY(-6px) scale(1.025);
}
html.light .project-card {
  background: var(--project-card-light);
  color: var(--primary-text);
}

/* ---------------------------------------------------------------------------
   4 · IMAGE / FIGURE
   ------------------------------------------------------------------------ */
.project-figure {
  margin: 0;
  overflow: hidden;
  background: #26273c;
  border-radius: 20px 20px 0 0;
  position: relative;
}
.project-image {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  filter: brightness(.95) contrast(1.04);
  transition: filter .25s, transform .3s;
  display: block;
}
.project-card:hover .project-image,
.project-image:focus-visible {
  filter: brightness(1.08) contrast(1.09) saturate(1.1);
  transform: scale(1.03);
}
.project-figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .3em 1em;
  background: var(--project-fig-overlay-dark);
  color: #fff;
  font: 500 1rem/1.2 Inter, sans-serif;
  border-radius: 0 0 16px 16px;
  pointer-events: none;
}
html.light .project-figure         { background: #e5e7fb; }
html.light .project-figcaption     { background: var(--project-fig-overlay-light); color: #223; }

/* ---------------------------------------------------------------------------
   5 · CORPS DE CARTE
   ------------------------------------------------------------------------ */
.project-body {
  flex: 1 1 auto;
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.project-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.7em;
  color: var(--primary-text);
  letter-spacing: -0.5px;
}
.project-desc {
  color: var(--secondary-text);
  font-size: 1.05rem;
  margin-bottom: 1.2em;
  line-height: 1.6;
}
html.dark .project-title { color: #fff; }
html.dark .project-desc  { color: #bbb; }

/* ---------------------------------------------------------------------------
   6 · BADGES TECHNO (réutilise .badge de badges.css)
   ------------------------------------------------------------------------ */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
  margin-bottom: 1.2em;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   7 · PROGRESS BAR (barre centrale dans progress.css)
   ------------------------------------------------------------------------ */
.project-progress {
  margin-bottom: 1.2em;
}

/* ---------------------------------------------------------------------------
   8 · CTA BOUTONS (boutons dans les cartes)
   ------------------------------------------------------------------------ */
.project-cta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  margin-top: 2em;
}
/* Style commun */
.project-cta .btn {
  box-shadow: 0 1px 6px rgb(44 44 68 / .06);
  font-size: 1rem;
  padding: .6em 1.4em;
  border-radius: 12px;
  font-weight: 600;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
  border: none;
}
.project-cta .btn:not(.btn-accent):not(.btn-danger):not(.btn-primary):not(.btn-outline):not(.btn-udemy):not(.btn-warning):not(.btn-disabled):not(.btn-success):not(.btn-info):not(.btn-secondary) {
  background: #fff;
  color: #222;
  border: 1px solid #e0e0e0;
}
.project-cta .btn-primary    { background: #1976d2; color: #fff; }
.project-cta .btn-danger     { background: #e53935; color: #fff; }
.project-cta .btn-accent     { background: var(--accent); color: #fff; }
.project-cta .btn-success    { background: #2e7d32; color: #fff; }
.project-cta .btn-warning    { background: #ff9800; color: #222; }
.project-cta .btn-info       { background: #00acc1; color: #fff; }
.project-cta .btn-secondary  { background: #6c757d; color: #fff; }
.project-cta .btn-outline    { background: transparent; color: #1976d2; border: 1.5px solid #1976d2; }
.project-cta .btn-udemy,
.project-cta .btn-light[href*="udemy"] {
  background: #a435f0 !important;
  color: #fff !important;
  border: none !important;
}
html.light .project-cta .btn-udemy,
html.light .project-cta .btn-light[href*="udemy"] {
  background: #f3e6fc !important;
  color: #a435f0 !important;
}

/* Hover états */
.project-cta .btn:hover,
.project-cta .btn:focus-visible {
  box-shadow: 0 4px 16px rgb(44 44 68 / .13);
  transform: translateY(-2px) scale(1.03);
}
.project-cta .btn-primary:hover,
.project-cta .btn-primary:focus-visible { background: #1357a6; }
.project-cta .btn-danger:hover,
.project-cta .btn-danger:focus-visible   { background: #b71c1c; }
.project-cta .btn-accent:hover,
.project-cta .btn-accent:focus-visible   { background: #3d70d6; }
.project-cta .btn-success:hover,
.project-cta .btn-success:focus-visible  { background: #27642a; }
.project-cta .btn-warning:hover,
.project-cta .btn-warning:focus-visible  { background: #ffac33; }
.project-cta .btn-info:hover,
.project-cta .btn-info:focus-visible     { background: #008b9c; }
.project-cta .btn-secondary:hover,
.project-cta .btn-secondary:focus-visible { background: #565e64; }
.project-cta .btn-outline:hover,
.project-cta .btn-outline:focus-visible {
  background: #1976d2;
  color: #fff;
}

/* Disabled */
.project-cta .btn[disabled],
.project-cta .btn.btn-disabled {
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
  background: #eee;
  color: #888;
  border: 1px solid #eee;
}

/* Mode dark pour boutons */
html.dark .project-cta .btn { background: #23243a; color: #fff; border: 1px solid #23243a; }
html.dark .project-cta .btn-primary   { background: #1976d2; }
html.dark .project-cta .btn-danger    { background: #e53935; }
html.dark .project-cta .btn-accent    { background: var(--accent); }
html.dark .project-cta .btn-success   { background: #32914e; }
html.dark .project-cta .btn-warning   { background: #ffa726; color: #23243a; }
html.dark .project-cta .btn-info      { background: #13b9d8; }
html.dark .project-cta .btn-secondary { background: #888fa5; }
html.dark .project-cta .btn-outline {
  background: transparent;
  color: #8ab6d6;
  border: 1.5px solid #8ab6d6;
}

/* ---------------------------------------------------------------------------
   9 · FILTRES PAR TECHNO (boutons de tri, style badge/pastel/dark)
   ------------------------------------------------------------------------ */
.filter-btn {
  display: inline-block;
  min-width: 64px;
  padding: 0.4em 1.1em;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(44,44,68,0.08);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
  margin-bottom: 0.2em;
  margin-right: 0.1em;
  outline: none;
  vertical-align: middle;
}
/* Light mode palette */
html.light .filter-btn[data-filter="python"]  { background: #e3f0fa; color: #3776ab; }
html.light .filter-btn[data-filter="gcp"]     { background: #e8eafc; color: #4f8cff; }
html.light .filter-btn[data-filter="aws"]     { background: #fff9c4; color: #b08900; }
html.light .filter-btn[data-filter="docker"]  { background: #f5f5f5; color: #23243a; }
html.light .filter-btn[data-filter="django"]  { background: #d5ede2; color: #092e20; }
html.light .filter-btn[data-filter="html"]    { background: #e3f2fd; color: #2196f3; }
html.light .filter-btn[data-filter="css"]     { background: #e0f7fa; color: #00bcd4; }
html.light .filter-btn.active {
  background-color: #dcd6f7;
  border: 2px solid #2563eb;
  color: #2563eb;
  box-shadow: 0 0 6px 1px rgba(37, 99, 235, 0.7);
}
html.light .filter-btn:hover:not(.active) {
  background-color: #c8caff;
  border-color: #2563eb;
  color: #1e40af;
  box-shadow: 0 0 6px 1px rgba(37, 99, 235, 0.5);
}
/* Dark mode palette */
html.dark .filter-btn[data-filter="python"]  { background: #3776ab; color: #fff; }
html.dark .filter-btn[data-filter="gcp"]     { background: #345bb3; color: #fff; }
html.dark .filter-btn[data-filter="aws"]     { background: #ffd600; color: #222; }
html.dark .filter-btn[data-filter="docker"]  { background: #222f3e; color: #fff; }
html.dark .filter-btn[data-filter="django"]  { background: #143228; color: #fff; }
html.dark .filter-btn[data-filter="html"]    { background: #457dc6; color: #fff; }
html.dark .filter-btn[data-filter="css"]     { background: #1b99aa; color: #fff; }
html.dark .filter-btn.active {
  background-color: #5b4baf;
  color: #e0d7ff;
  border: 2px solid #7c3aed;
  box-shadow: 0 0 8px 1px rgba(124, 58, 237, 0.7);
}
html.dark .filter-btn:hover:not(.active) {
  background-color: #4f3fb0;
  border-color: #7c3aed;
  color: #d8d4ff;
  box-shadow: 0 0 6px 1px rgba(124, 58, 237, 0.6);
}

/* ────────────────────────────────────────────────────────────────────────────
   Responsive – Filtres déroulants (mobile)
   ──────────────────────────────────────────────────────────────────────────── */
/* Desktop : on affiche les boutons, on cache le select */
.btn-filter {
  display: flex;
  gap: 0.7em;
  flex-wrap: wrap;
}
.dropdown-filter {
  display: none;
}

/* Mobile ≤ 600px : on cache les boutons, on affiche le select */
@media (max-width: 600px) {
  .btn-filter {
    display: none;
  }
 .dropdown-filter {
    display: flex;            /* flexbox centré */
    justify-content: center;  /* centrer horizontalement */
    width: 100%;
    margin: 1em 0;
  }

  .dropdown-filter select {
    font-size: 1rem;
    padding: 0.4em 1.2em;
    border-radius: 9999px;
    border: 1px solid #ccc;
    font-weight: 600;
    outline: none;
    background-color: #e6e9f0;
    color: #1f2937;
    transition: border-color 0.2s;
    /* Optionnel, fixe une largeur max pour que ce soit joli */
    max-width: 300px;
    width: 100%;
  }
  html.dark .dropdown-filter select {
    background-color: #23243a;
    color: #fff;
    border-color: #444;
  }
}

/* ---------------------------------------------------------------------------
   10 · ACCESSIBILITÉ & DIVERS
   ------------------------------------------------------------------------ */
.project-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.projects-filter {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-start;
  padding-left: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  background: none;
  border: none;
  box-shadow: none;
}

.projects-filter strong {
  margin-right: 0.8rem;
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Responsive Grille */
@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
}
@media (max-width: 700px) {
  .projects-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .project-card   { min-width: 0; margin: 1rem 0; }
  .project-image  { height: 140px; }
  .project-body   { padding: 1em 1em .6em; }
  .project-title  { font-size: 1.2rem; }
}