/* =====================================================================
   COMPONENTS — Briques réutilisées sur plusieurs pages
   ---------------------------------------------------------------------
   Une règle n'a sa place ici QUE si elle sert sur au moins deux pages.
     .btn / .btn-primary / .btn-secondary  -> accueil, a-propos, contact
     .card / .card-icon                    -> a-propos, contact

   Les briques utilisées sur une seule page restent dans le CSS de cette
   page (ex. .skill-pill dans competences.css, .link-btn dans
   projets.css, .quote-card dans contact.css).

   A charger APRES layout.css et AVANT le CSS de la page.
   ===================================================================== */

/* ---------- Boutons : parallélogrammes + flash diagonal ---------- */
.btn-row{display:flex;gap:20px;flex-wrap:wrap;}
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 34px;
  border:none;border-radius:var(--radius-md);
  font-family:var(--font-head);font-weight:700;
  font-size:17px;letter-spacing:.07em;text-transform:uppercase;
  cursor:pointer;
  clip-path:var(--cut-slant);        /* découpe diagonale, pas d'arrondi */
  transition:transform .13s var(--ease-snap), background .13s var(--ease-snap), color .13s var(--ease-snap);
}
/* Balayage clair oblique traversant le bouton au survol */
.btn::before{
  content:"";
  position:absolute;z-index:-1;
  top:-30%;bottom:-30%;left:0;width:30%;
  background:rgba(247,244,236,.75);
  transform:translateX(-260%) skewX(-22deg);
  transition:transform .34s var(--ease-hard);
}
.btn:hover::before{transform:translateX(560%) skewX(-22deg);}
.btn:hover{transform:translate(-3px,-3px);}
.btn:active{transform:translate(1px,1px);}
.btn-primary{background:var(--red);color:var(--text-primary);}      /* 4.6:1 — AA */
.btn-primary:hover{background:var(--red-deep);}
.btn-secondary{background:var(--text-primary);color:var(--ink);}    /* aplat inversé, 17:1 */
.btn-secondary:hover{background:var(--red);color:var(--text-primary);}

/* ---------- Cartes (a-propos + contact) ---------- */
/* Cartes : angles vifs + ombre dure décalée + légère rotation alternée.
   (Pas de clip-path ici : il rognerait l'ombre — cf. décision n°7) */
.card{
  background:var(--ink);
  border:3px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:9px 9px 0 var(--red);
  padding:24px;
  transform:rotate(-1deg);
  transition:transform .15s var(--ease-snap), box-shadow .15s var(--ease-snap);
}
.card:hover{
  transform:rotate(0) translate(-4px,-4px);
  box-shadow:14px 14px 0 var(--red);
}
.card .card-inner{display:flex;gap:16px;align-items:flex-start;}
.card-icon{
  width:50px;height:50px;flex-shrink:0;
  background:var(--red);border-radius:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-primary);          /* icône claire sur aplat rouge */
  transform:rotate(-3deg);
}
.card h3{font-size:23px;margin-bottom:8px;letter-spacing:.03em;}
.card p{color:var(--text-muted);font-size:15px;}