/* ==========================================================================
   ABOUT.CSS — Phaneon Portfolio
   Contient : section "À propos" sur fond sombre, valeurs clés,
              liste de compétences/outils, photo avec badge flottant
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION À PROPOS — FOND SOMBRE + GRILLE 2 COLONNES
   Contraste avec les sections blanches/lavande pour marquer une rupture.
   -------------------------------------------------------------------------- */
#about {
  background: var(--c-dark); /* Fond très sombre (#0d0d12) */
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
}

/* --------------------------------------------------------------------------
   2. COLONNE GAUCHE — TEXTE
   Les couleurs sont surécrites pour fonctionner sur fond sombre.
   -------------------------------------------------------------------------- */
.about-left .section-tag {
  color: var(--c-accent2); /* Violet plus clair sur fond sombre */
}
.about-left h2 {
  color: #fff;
}
.about-left .section-intro {
  color: rgba(255, 255, 255, 0.5); /* Texte secondaire semi-transparent */
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   3. VALEURS CLÉS (liste des engagements)
   Chaque valeur est une ligne avec une icône et un texte.
   -------------------------------------------------------------------------- */
.about-values {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  background: rgba(255, 255, 255, 0.04); /* Fond très légèrement visible */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.value-icon {
  font-size: 1.2rem;
}

.value-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   4. LISTE DES COMPÉTENCES / OUTILS
   Pilules de tags sur fond sombre avec hover violet
   -------------------------------------------------------------------------- */
.skills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.skill-tag {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  transition: 0.2s;
  cursor: default;
}
.skill-tag:hover {
  background: rgba(91, 91, 214, 0.25);
  border-color: var(--c-accent2);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. COLONNE DROITE — PHOTO
   -------------------------------------------------------------------------- */
.about-photo-wrap {
  position: relative; /* Nécessaire pour positionner le badge flottant */
}

/* Cadre de la photo avec dégradé bleu-violet en placeholder */
.about-photo {
  width: 100%;
  aspect-ratio: 3 / 4; /* Format portrait légèrement différent du hero */
  border-radius: var(--radius);
  background: linear-gradient(135deg, #2a2a5a, #4a4a8a);
  position: relative;
  overflow: hidden;
}

/* Placeholder centré (à supprimer quand une vraie photo est ajoutée) */
.about-photo-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. BADGE FLOTTANT "+60 Projets réalisés"
   Carte blanche positionnée en bas à droite de la photo,
   qui déborde légèrement pour créer de la profondeur.
   -------------------------------------------------------------------------- */
.about-card-float {
  position: absolute;
  bottom: 1.5rem;
  right: -1.5rem; /* Déborde à droite */
  background: var(--c-bg);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.about-card-float strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-text);
  letter-spacing: -1px;
}
.about-card-float span {
  font-size: 0.78rem;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #about {
    grid-template-columns: 1fr; /* Empilé verticalement */
  }
  /* La photo est masquée sur mobile pour alléger la mise en page */
  .about-right {
    display: none;
  }
}