/* =====================================================================
   PAGE PROJETS — projets.html
   ---------------------------------------------------------------------
     .projects-list  : la pile de cartes des projets principaux
     .project-card   : l'aplat + le coin rouge + la trame demi-teintes
                       + le flash diagonal au survol ; grille capture | texte
     .project-tag    : numéro, statut et type du projet
     .project-body   : le contenu (titre, accroche, besoin, fonctionnalités,
                       technologies, liens)
     .feature-list   : les fonctionnalités, puces en biais

   Viennent de components.css : .project-shot (capture ou carte titre),
   .tag-pill, .link-btn et .mini-project (section « Premiers projets »).

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

/* ---------- Projets principaux ---------- */
.projects-list{display:flex;flex-direction:column;gap:56px;margin-top:8px;}
.project-card{
  position:relative;
  overflow:hidden;
  scroll-margin-top:32px;           /* ancres #house-of-orga… depuis l'accueil */
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:36px;
  align-items:start;
  padding:34px;
  border:3px solid var(--border);
  border-radius:var(--radius-lg);
  /* 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);
}
/* Une carte sur deux : capture à droite, pour casser la répétition */
.projects-list .project-card:nth-child(even) .project-shot{order:2;}
.project-card:hover{
  transform:rotate(0) translate(-5px,-5px);
  box-shadow:18px 18px 0 var(--red);
}

/* 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 contenu 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);}

/* Capture : posée en collage, légèrement pivotée, ombre dure noire */
.project-card .project-shot{
  z-index:2;
  margin-top:14px;
  box-shadow:9px 9px 0 var(--ink);
  transform:rotate(-1.5deg);
}
.projects-list .project-card:nth-child(even) .project-shot{transform:rotate(1.5deg);}

.project-body{position:relative;z-index:2;min-width:0;}

.project-tag{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-bottom:18px;
  background:var(--ink);
  border:3px solid var(--border);
  padding:7px 14px;
  font-family:var(--font-head);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);
  transform:rotate(1.5deg);
}
.project-tag .num{
  background:var(--red);color:var(--text-primary);   /* 4.6:1 — AA */
  padding:0 7px;font-weight:900;font-size:16px;
}
.project-tag .sep{width:2px;height:14px;background:var(--border);}

.project-body h2{
  font-size:clamp(32px,4vw,48px);
  margin-bottom:4px;
  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 16px;
  clip-path:var(--cut-slant);
}
.project-body p.desc{
  color:var(--text-primary);
  font-size:18px;line-height:1.5;
  margin-bottom:14px;max-width:56ch;
}
/* Le besoin : bulle de dialogue P5 — boîte noire à bord blanc,
   légèrement pivotée, avec une étiquette « nom du personnage » rouge
   qui chevauche le bord supérieur. */
.project-body .need{
  position:relative;
  margin:26px 0 20px;
  padding:20px 18px 12px;
  background:var(--ink);
  border:3px solid var(--text-primary);
  box-shadow:6px 6px 0 var(--red);
  color:var(--text-secondary);
  font-size:16px;
  transform:rotate(-.8deg);
}
.project-body .need span{
  position:absolute;top:-15px;left:14px;
  padding:3px 12px 2px;
  background:var(--red);color:var(--text-primary);       /* 4.6:1 — AA */
  font-family:var(--font-head);font-weight:700;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  clip-path:var(--cut-jag);
  transform:rotate(-3deg);
}

/* Fonctionnalités : puces en parallélogramme rouge */
.feature-list{
  display:flex;flex-direction:column;gap:7px;
  margin-bottom:22px;
  font-size:15px;line-height:1.5;
  color:var(--text-secondary);
}
.feature-list li{position:relative;padding-left:22px;}
.feature-list li::before{
  content:"";
  position:absolute;left:0;top:.48em;
  width:11px;height:7px;
  background:var(--red);
  clip-path:var(--cut-slant);
}

.project-card .tag-row{gap:8px;margin-bottom:22px;}
.project-card .tag-pill{font-size:13px;padding:6px 14px;}

/* Précision sur une démo partielle : discrète mais lisible (7.4:1) */
.project-note{
  margin:-8px 0 18px;
  font-size:14px;font-style:italic;
  color:var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  /* La capture passe au-dessus du texte */
  .project-card{grid-template-columns:1fr;gap:26px;}
  .projects-list .project-card:nth-child(even) .project-shot{order:0;}
  .project-card .project-shot{margin-top:28px;max-width:640px;}
}
@media (max-width: 860px){
  .project-card{padding:22px;}
  /* Rotations neutralisées : sinon les cartes débordent latéralement */
  .project-card,
  .projects-list .project-card:nth-child(even),
  .project-card .project-shot,
  .projects-list .project-card:nth-child(even) .project-shot{transform:rotate(0);}
  .project-card .project-shot{box-shadow:6px 6px 0 var(--ink);}
}