/* =====================================================================
   PAGE PROJETS — projets.html
   ---------------------------------------------------------------------
     .projects-list  : la pile de cartes projet
     .project-card   : l'aplat + le coin rouge + la trame demi-teintes
                       + le flash diagonal au survol
     .project-shot   : la capture d'ecran en arriere-plan + son voile
     .project-tag    : l'étiquette de statut en haut a droite
     .project-body   : le contenu (titre, description, tags, liens)
     .tag-pill       : les pastilles de technologie
     .link-btn       : les boutons Code / Demo

   ATTENTION : .project-card a besoin de overflow:hidden pour découper
   le flash diagonal (::before), qui est garé hors-cadre à gauche.
   ===================================================================== */

/* ---------- Projets ---------- */
.projects-list{display:flex;flex-direction:column;gap:48px;margin-top:8px;}
.project-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  min-height:400px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:3px solid var(--border);
  /* aplat + coin rouge à ARRET NET (hard stop), aucun dégradé doux */
  background:
    linear-gradient(135deg, var(--red) 0 96px, transparent 96px) top left no-repeat,
    var(--bg-mid);
  box-shadow:12px 12px 0 var(--red);
  transform:rotate(-.5deg);
  transition:transform .16s var(--ease-snap), box-shadow .16s var(--ease-snap);
}
.projects-list .project-card:nth-child(even){
  transform:rotate(.6deg);
  box-shadow:12px 12px 0 var(--text-primary);
}
.project-card:hover{
  transform:rotate(0) translate(-5px,-5px);
  box-shadow:18px 18px 0 var(--red);
}
/* ---------- Capture d'ecran en arriere-plan ----------
   EMPILEMENT de la carte, du fond vers le texte :
     aplat + coin rouge   (background de .project-card)
     .project-shot        z-index 0  <- la capture
     ::after trame        z-index 0, mais pseudo genere APRES les
                          enfants : il se peint donc par-dessus
     ::before flash       z-index 1
     .project-body        z-index 2
   La capture reste volontairement discrete (opacite basse + voile) :
   elle donne le ton du projet sans jamais disputer la lisibilite au
   titre et a la description, qui doivent conserver leur contraste AA.
   Si le fichier image manque, l'aplat rouge d'origine reste visible. */
.project-shot{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.project-shot img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;   /* on cadre le haut de la page capturee */
  opacity:.3;
  filter:grayscale(.4) contrast(1.08);
  transition:opacity .3s var(--ease-snap), filter .3s var(--ease-snap);
}
/* Au survol la capture se revele un peu : le projet "s'allume" */
.project-card:hover .project-shot img{opacity:.42;filter:grayscale(.1) contrast(1.05);}
/* Voile de lisibilite : opaque en bas (sous le texte), transparent en
   haut (ou l'on ne lit que l'etiquette de statut, qui a son propre fond) */
.project-shot::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,
    var(--ink) 0%,
    rgba(5,5,5,.92) 30%,
    rgba(5,5,5,.6) 62%,
    rgba(5,5,5,.3) 100%);
}

/* Trame demi-teintes par-dessus l'aplat (z-index 0, sous le contenu) */
.project-card::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background-image:var(--halftone);
  background-size:var(--halftone-size);
  opacity:.55;
  pointer-events:none;
}
/* Flash diagonal balayant la carte au survol (au-dessus de la trame,
   sous le texte qui est en z-index:2) */
.project-card::before{
  content:"";
  position:absolute;z-index:1;
  top:-40%;bottom:-40%;left:0;width:34%;
  background:rgba(218,29,38,.85);
  transform:translateX(-260%) skewX(-20deg);
  transition:transform .45s var(--ease-hard);
  pointer-events:none;
}
.project-card:hover::before{transform:translateX(420%) skewX(-20deg);}

.project-card .project-tag{
  position:absolute;top:22px;right:22px;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);
  border:3px solid var(--border);border-radius:0;
  padding:9px 16px;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);
  transform:rotate(2deg);
}
.project-card .project-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--red);}
.project-card .project-tag .sep{width:2px;height:16px;background:var(--border);}

.project-body{position:relative;z-index:2;padding:34px;}
.project-body h3{
  font-size:clamp(30px,4.2vw,46px);
  margin-bottom:6px;
  transform:rotate(-1.5deg);
  transform-origin:left center;
  text-shadow:5px 5px 0 var(--ink);
}
.project-body .rule{
  width:78px;height:10px;background:var(--red);
  margin:14px 0 18px;
  clip-path:var(--cut-slant);
}
.project-body p.desc{
  color:var(--text-secondary);
  font-size:17px;margin-bottom:20px;max-width:56ch;
}

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

.link-row{display:flex;gap:18px;flex-wrap:wrap;}
.link-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 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-slant);
  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);}
.link-btn.demo{background:var(--red);color:var(--text-primary);}
.link-btn:hover{opacity:1;transform:translate(-3px,-3px);}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .project-body{padding:24px;}
  /* Rotations neutralisées : sinon les cartes débordent latéralement */
  .project-card,
  .projects-list .project-card:nth-child(even){transform:rotate(0);}
}