/* ============================================================
   skills.css — Section 03 · Compétences
============================================================ */

.skills__header {
  padding-left:  var(--space-14);
  margin-bottom: var(--space-16);
}

.skills__intro {
  margin-top:  var(--space-6);
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   var(--text-xl);
  font-weight: 300;
  color:       var(--ink-mid);
  line-height: 1.75;
  max-width:   520px;
}

.skills__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            var(--space-20);
  padding-left:          var(--space-14);
}

.skills__col {
  display:        flex;
  flex-direction: column;
  gap:            2.75rem;
}

.skill {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.skill__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

.skill__icon-wrapper {
  flex-shrink:     0;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-full);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--ivory-card);
  transition:
    border-color 300ms ease,
    background   300ms ease;
}

.skill:hover .skill__icon-wrapper {
  border-color: var(--caramel-pale);
  background:   var(--caramel-pale);
}

/* Icônes SVG — taille unifiée, couleur neutre */
.skill__icon {
  width:       22px;
  height:      22px;
  flex-shrink: 0;
  display:     block;
  color:       var(--ink-base);
  transition:  color 300ms ease, transform 300ms ease;
}

.skill:hover .skill__icon {
  color:     var(--caramel);
  transform: scale(1.1);
}

/* Ajustements taille par icône */
.skill__icon--html,
.skill__icon--css  { width: 20px; height: 20px; }
.skill__icon--js   { width: 20px; height: 20px; border-radius: 3px; }
.skill__icon--react { width: 24px; height: 24px; }
.skill__icon--node  { width: 22px; height: 22px; }
.skill__icon--figma { width: 20px; height: 28px; }

.skill__name {
  flex:           1 1 0;
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ink-base);
}

.skill__percent {
  font-family: var(--font-display);
  font-size:   1.25rem;
  font-weight: 400;
  font-style:  italic;
  color:       var(--ink-mid);
  white-space: nowrap;
  min-width:   3rem;
  text-align:  right;
}

.skill__bar {
  width:         100%;
  height:        1px;
  background:    var(--border);
  border-radius: var(--radius-sm);
  position:      relative;
}

.skill__bar-fill {
  position:      absolute;
  top:           0;
  left:          0;
  height:        100%;
  width:         0;
  background:    var(--ink-deep);
  border-radius: var(--radius-sm);
  transition:    width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skill__bar-fill::after {
  content:          '';
  position:         absolute;
  right:            -3px;
  top:              50%;
  transform:        translateY(-50%);
  width:            6px;
  height:           6px;
  border-radius:    var(--radius-pill);
  background-color: var(--caramel);
  opacity:          0;
  transition:       opacity 300ms ease 600ms;
}

.skill__bar-fill.is-filled::after { opacity: 1; }


/* ── Responsive ── */

@media (max-width: 1024px) {
  .skills__header,
  .skills__grid   { padding-left: var(--space-10); }
  .skills__grid   { column-gap: var(--space-12); }
}

@media (max-width: 768px) {
  .skills__header,
  .skills__grid           { padding-left: 0; }
  .skills__grid           { grid-template-columns: 1fr; row-gap: var(--space-10); }
  .skills__col            { gap: 2rem; }
  .skills__header         { margin-bottom: var(--space-12); }
}


/* ── prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {
  .skill__bar-fill { transition: none; }
}