/* =====================================================================
   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, 404
     .card / .card-icon                    -> a-propos, contact
     .tag-pill / .link-btn / .project-shot
     .mini-project                         -> accueil, projets

   Les briques utilisées sur une seule page restent dans le CSS de cette
   page (ex. .skill-pill dans competences.css, .feature-list dans
   projets.css, .connect-item 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-jag);          /* éclat irrégulier façon menu P5 */
  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{
  position:relative;
  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);
}
/* Étoile rouge épinglée au coin, comme un autocollant */
.card::after{
  content:"";
  position:absolute;top:-16px;right:-14px;
  width:34px;height:34px;
  background:var(--red);
  clip-path:var(--star);
  transform:rotate(-14deg);
  pointer-events:none;
}
.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 h2,
.card h3{font-size:23px;margin-bottom:8px;letter-spacing:.03em;}
.card p{color:var(--text-muted);font-size:15px;}

/* =====================================================================
   PROJETS — briques partagées entre l'accueil (Projets sélectionnés)
   et projets.html
   ===================================================================== */

/* ---------- Pastilles de technologie ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.tag-pill{
  background:var(--red);
  border-radius:var(--radius-md);
  color:var(--text-primary);            /* 4.6:1 — AA */
  padding:7px 16px;
  font-family:var(--font-head);font-weight:700;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  clip-path:var(--cut-slant);
}

/* ---------- Boutons Voir le site / Code ---------- */
.link-row{display:flex;gap:16px;flex-wrap:wrap;}
.link-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;
  border-radius:var(--radius-md);
  font-family:var(--font-head);font-weight:700;
  font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  clip-path:var(--cut-jag);
  transition:transform .13s var(--ease-snap), background .13s var(--ease-snap), color .13s var(--ease-snap);
}
.link-btn::before{
  content:"";
  position:absolute;z-index:-1;
  top:-30%;bottom:-30%;left:0;width:30%;
  background:rgba(218,29,38,.7);
  transform:translateX(-260%) skewX(-22deg);
  transition:transform .34s var(--ease-hard);
}
.link-btn:hover::before{transform:translateX(560%) skewX(-22deg);}
.link-btn.code{background:var(--text-primary);color:var(--ink);}       /* 17:1 */
.link-btn.demo{background:var(--red);color:var(--text-primary);}       /* 4.6:1 — AA */
.link-btn.demo::before{background:rgba(247,244,236,.55);}
.link-btn:hover{transform:translate(-3px,-3px);}

/* ---------- Capture d'écran encadrée ----------
   Cadre 16/10, bord blanc cassé et ombre dure. Sans capture (classe
   .is-empty posée dans le HTML ou par script.js si l'image manque),
   le cadre devient une « carte titre » : aplat rouge, trame
   demi-teintes et nom du projet (data-label) en grand. */
.project-shot{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-mid);
  border:3px solid var(--border);
}
.project-shot img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;   /* on cadre le haut de la page capturee */
}
.project-shot.is-empty{
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:
    linear-gradient(135deg, transparent 0 62%, var(--ink) 62% 66%, transparent 66%),
    var(--red);
}
.project-shot.is-empty::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--halftone);
  background-size:var(--halftone-size);
  opacity:.8;
}
.project-shot.is-empty::after{
  content:attr(data-label);
  position:relative;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,4vw,52px);line-height:.9;
  text-transform:uppercase;text-align:center;
  color:var(--text-primary);
  text-shadow:5px 5px 0 var(--ink);
  transform:rotate(-4deg);
}

/* ---------- Carte projet compacte ---------- */
.mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:34px;
  margin-top:8px;
}
.mini-project{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--ink);
  border:3px solid var(--border);
  box-shadow:9px 9px 0 var(--red);
  transform:rotate(-.6deg);
  transition:transform .15s var(--ease-snap), box-shadow .15s var(--ease-snap);
}
.mini-grid .mini-project:nth-child(even){transform:rotate(.6deg);}
.mini-grid .mini-project:hover{
  transform:rotate(0) translate(-4px,-4px);
  box-shadow:13px 13px 0 var(--red);
}
/* Étoile blanche en coin : même autocollant que .card, en négatif */
.mini-project::after{
  content:"";
  position:absolute;top:-15px;left:-13px;z-index:3;
  width:30px;height:30px;
  background:var(--text-primary);
  clip-path:var(--star);
  transform:rotate(10deg);
  pointer-events:none;
}
/* La capture colle au cadre de la carte : on retire son propre bord */
.mini-project .project-shot{border-width:0 0 3px;}
.mini-project .project-shot.is-empty::after{font-size:clamp(28px,3vw,38px);}
.mini-body{
  display:flex;flex-direction:column;flex:1;
  padding:22px 22px 24px;
}
.mini-body h3{
  font-size:28px;margin-bottom:12px;
  transform:rotate(-1.5deg);transform-origin:left center;
}
.mini-body p{color:var(--text-muted);font-size:15px;margin-bottom:18px;}
.mini-body .tag-row{gap:8px;margin-bottom:22px;}
.mini-body .tag-pill{font-size:12px;padding:5px 13px;}
/* Liens poussés en bas : les cartes d'une même rangée restent alignées */
.mini-body .link-row{margin-top:auto;gap:12px;}
.mini-body .link-btn{padding:10px 20px;font-size:14px;}

@media (max-width: 860px){
  .mini-project,
  .mini-grid .mini-project:nth-child(even){transform:rotate(0);}
}