/* =====================================================================
   PAGE COMPETENCES — competences.html
   ---------------------------------------------------------------------
     .skills-groups / .skill-group : les groupes (Frontend, Backend…),
       deux colonnes sur grand écran
     .skills-heading            : le titre de chaque groupe
     .skills-list / .skill-pill : les technologies. Pastilles en
       parallélogramme, alternance blanc cassé / écarlate via :nth-child.
     .skills-used               : la ligne « Mis en pratique » du groupe
   ===================================================================== */

.skills-groups{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 48px;
  margin-top:20px;
}
/* Le frontend, groupe le plus fourni, prend toute la largeur */
.skill-group:first-child{grid-column:1 / -1;}

/* 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:24px 0 18px;
}
.skills-heading::after{
  content:"";
  flex:1 1 auto;height:7px;
  background:var(--red);
  clip-path:var(--cut-slant);
}

.skills-list{display:flex;flex-wrap:wrap;gap:12px;}
/* 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{
  display:inline-flex;align-items:center;
  min-height:48px;
  padding:8px 26px;
  font-family:var(--font-head);font-weight:900;
  font-size:19px;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);}   /* 4.6:1 */
.skill-pill:hover{
  background:var(--red);color:var(--text-primary);
  transform:translateY(-4px) rotate(-2deg);
}
.skill-pill:nth-child(even):hover{background:var(--text-primary);color:var(--ink);}

.skills-used{
  margin-top:16px;
  font-size:15px;
  color:var(--text-muted);
  max-width:70ch;
}
.skills-used span{
  display:inline-block;
  margin-right:10px;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-primary);
  border-bottom:3px solid var(--red);   /* petit texte : pas de rouge sur noir (4:1) */
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .skills-groups{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  .skill-pill{font-size:17px;min-height:42px;padding:6px 20px;}
}