/* =====================================================================
   PAGE COMPETENCES — competences.html
   ---------------------------------------------------------------------
     .skills-heading            : le titre de chacun des deux groupes
     .skills-grid / .skill-pill : la grille de technologies. Pastilles en
       parallélogramme, alternance blanc cassé / écarlate via :nth-child.
       .is-learning marque les technos en cours d'apprentissage.
     .stats-grid / .stat-card   : les trois chiffres clés, aplats clairs
       aux coins coupés en diagonale.
   ===================================================================== */

/* ---------- Compétences ---------- */
/* Intertitre de groupe : reprend la barre rouge en biais des sections,
   en plus petit, pour rester sous le .section-title sans le concurrencer */
.skills-heading{
  display:flex;align-items:center;gap:14px;
  font-size:26px;letter-spacing:.04em;
  margin:38px 0 20px;
}
.skills-heading::after{
  content:"";
  flex:1 1 auto;height:7px;
  background:var(--red);
  clip-path:var(--cut-slant);
}
.skills-heading:first-of-type{margin-top:14px;}

.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
/* Pastilles en parallélogramme : alternance blanc cassé / écarlate.
   Aucune bordure (elle serait rognée par le clip-path) — la lisibilité
   vient du contraste de l'aplat lui-même. */
.skill-pill{
  height:98px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:900;
  font-size:22px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--radius-lg);
  clip-path:var(--cut-slant);
  background:var(--text-primary);color:var(--ink);      /* 17:1 */
  transition:transform .13s var(--ease-snap), background .13s var(--ease-snap), color .13s var(--ease-snap);
}
.skill-pill:nth-child(even){background:var(--red);color:var(--text-primary);}
.skill-pill:hover{
  background:var(--red);color:var(--text-primary);
  transform:translateY(-6px) rotate(-2deg);
}
.skill-pill:nth-child(even):hover{background:var(--text-primary);color:var(--ink);}

/* En cours d'apprentissage : contour seul au lieu d'un aplat plein.
   La distinction se lit au premier coup d'oeil, sans avoir a relire
   l'intertitre. Bordure et texte en blanc casse : 17:1 sur le noir. */
.skill-pill.is-learning,
.skill-pill.is-learning:nth-child(even){
  background:transparent;
  color:var(--text-primary);
  /* le clip-path rognerait une bordure : on la simule en inset */
  box-shadow:inset 0 0 0 3px var(--text-primary);
}
.skill-pill.is-learning:hover,
.skill-pill.is-learning:nth-child(even):hover{
  background:var(--red);
  color:var(--text-primary);
  box-shadow:inset 0 0 0 3px var(--red);
}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.stat-card{
  background:var(--text-primary);
  border:none;border-radius:var(--radius-lg);
  padding:30px 16px;text-align:center;
  clip-path:var(--cut-corners);       /* coins coupés en diagonale */
  transform:rotate(-.8deg);
  transition:transform .15s var(--ease-snap);
}
.stats-grid .stat-card:nth-child(even){transform:rotate(1deg);}
.stat-card:hover{transform:rotate(0) translateY(-5px);}
.stat-card .num{
  font-family:var(--font-head);font-weight:900;
  font-size:42px;color:var(--red);       /* gros caractères : 4.6:1 sur blanc cassé */
  display:block;margin-bottom:6px;
  text-transform:uppercase;line-height:1;
}
.stat-card .label{
  color:var(--ink);font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  /* 4 colonnes -> 2 : les pastilles restent lisibles */
  .skills-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 860px){
  .stats-grid{grid-template-columns:1fr;}
  .stat-card,
  .stats-grid .stat-card:nth-child(even){transform:rotate(0);}
}