/* ============================================================
   Triangelito — Page Projets : bandeaux de triangles défilants
   Un bandeau par pôle. Triangles alternés ▲▽ (mêmes proportions
   que le fond, plus grande échelle). Image centrée + tags sur
   l'arête horizontale. Défilement auto + glissable (projets.js).
   ============================================================ */

.projets-page { position: relative; z-index: 1; padding: 8px 0 0; }

.projets-titre {
  max-width: 880px; margin: 0 auto 2px; padding: 0 22px;
  font-family: var(--font-titre); font-size: 2rem;
}
.projets-titre .saison-label { opacity: .45; font-weight: 400; }

/* ----------------------------------------------------------
   Barre de filtres — une catégorie = un menu déroulant compact.
   Fermée, la barre tient sur une ligne ; le panneau de chips
   s'ouvre par-dessus (absolute) sans pousser la mise en page.
   ---------------------------------------------------------- */
.filtres {
  position: relative; z-index: 6;
  max-width: 880px; margin: 0 auto 10px; padding: 4px 22px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.filtre-cat { position: relative; }
.cat-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(21, 32, 43, .2);
  color: #15202b; font-family: var(--font-titre); font-weight: 700;
  font-size: .85rem; padding: 7px 14px; border-radius: 0; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.cat-toggle:hover { border-color: rgba(21, 32, 43, .45); }
.cat-tri {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 8px solid currentColor;          /* ▼ pointe vers le bas (fermé) */
  transition: transform .2s; transform-origin: center;
}
.filtre-cat.open .cat-toggle { background: #fff; border-color: rgba(21, 32, 43, .45); }
.filtre-cat.open .cat-tri { transform: rotate(180deg); }   /* ▲ ouvert */
.cat-count {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 0;
  background: #e0761c; color: #fff; font-size: .68rem; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.cat-count.show { display: inline-flex; }

.cat-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 7;
  display: none; flex-wrap: wrap; gap: 8px;
  width: max-content; max-width: 460px;
}
.filtre-cat.open .cat-panel { display: flex; }
.cat-panel--tags { max-width: 520px; }

/* Chip = bande de triangles tessellés (fond SVG répété en X) : le nombre
   de triangles s'adapte tout seul à la largeur du mot. Aucun arrondi. */
.fbtn {
  display: inline-flex; align-items: center; justify-content: center;
  color: #2a3540; font-family: var(--font-titre); font-weight: 700;
  font-size: .8rem; line-height: 1; padding: 10px 24px; height: 32.4px; box-sizing: border-box;
  border: 0; border-radius: 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' shape-rendering='crispEdges'%3E%3Crect width='20' height='18' fill='%23e7ebee'/%3E%3Cpolygon points='10,0 20,18 0,18' fill='%23ccd4da'/%3E%3C/svg%3E");
  background-size: 36px 100%; background-repeat: repeat-x; background-position: left center;
  /* parallélogramme penché /______/ : géométrie en entiers -> base du triangle = 36px
     (hauteur 32.4 × 20/18), biais = demi-base = 18px. Motif calé à gauche => début
     sur un triangle complet ; la largeur est forcée en JS à un multiple de 36px
     => fin aussi sur un triangle complet. */
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transition: color .18s;
}
.fbtn:hover { filter: brightness(.96); }
.fbtn.on {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' shape-rendering='crispEdges'%3E%3Crect width='20' height='18' fill='%2315202b'/%3E%3Cpolygon points='10,0 20,18 0,18' fill='%23e0761c'/%3E%3C/svg%3E");
}
.fbtn-reset {
  margin-top: 2px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' shape-rendering='crispEdges'%3E%3Crect width='20' height='18' fill='%238a3a1f'/%3E%3Cpolygon points='10,0 20,18 0,18' fill='%23c2531f'/%3E%3C/svg%3E");
}

.pole { margin: 36px 0 84px; }
.pole:last-of-type { margin-bottom: 0; }   /* dernier bandeau collé au footer */
/* L'inclinaison du dernier bandeau laisse un coin transparent : on remonte
   le footer (page Projets uniquement) en ne laissant que ~2px. */
.projets-page + .pied { margin-top: -26px; }
.pole-titre {
  max-width: 880px; margin: 0 auto 12px; padding: 0 22px;
  font-family: var(--font-titre); font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; gap: 11px;
}
.pole-tri {
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid #15202b;
}

/* Le bandeau : fenêtre qui masque le surplus ; la rangée défile dedans */
.bandeau {
  --S: 480px;            /* base du triangle (échelle) — ×2 */
  --H: 416px;            /* hauteur = base x racine(3)/2 */
  width: 116%;           /* déborde pour rester collé aux deux bords malgré l'inclinaison */
  margin-left: -8%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.bandeau.tilt-l { transform: rotate(-2deg); }
.bandeau.tilt-r { transform: rotate(2deg); }
.bandeau:active { cursor: grabbing; }
.bandeau-row { display: flex; width: max-content; will-change: transform; }

/* Un projet = un triangle */
.ptri {
  position: relative;
  width: var(--S); height: var(--H);
  flex: 0 0 var(--S);
  margin-left: calc(var(--S) * -0.5);   /* chevauchement -> tessellation */
  background-color: var(--pole, #9a6b3a);
  /* background-image posé en inline par renderTriangle (résolution d'URL correcte) */
  background-size: cover;
  background-position: center;          /* image centrée */
  text-decoration: none;
}
/* cadrage vers la partie LARGE du triangle pour que le sujet y tombe */
.ptri.up   { clip-path: polygon(50% 0, 100% 100%, 0 100%); background-position: center 72%; }   /* arête en bas */
.ptri.down { clip-path: polygon(0 0, 100% 0, 50% 100%); background-position: center 28%; }       /* arête en haut */

/* Voile teinté de la couleur dominante de l'image ; s'efface au survol. */
.ptri::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--tint, var(--pole, #9a6b3a));
  opacity: .94; transition: opacity .4s; pointer-events: none;   /* presque opaque au repos */
}
.ptri:hover::before { opacity: .1; }                              /* l'image se révèle au survol */

/* Tags + titre calés sur l'arête horizontale (bas si ▲, haut si ▽) */
.ptri-edge {
  position: absolute; left: 0; right: 0; z-index: 2;   /* au-dessus du voile teinté */
  padding: 0 13%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; pointer-events: none;
}
.ptri.up   .ptri-edge { bottom: 14px; }
.ptri.down .ptri-edge { top: 14px; flex-direction: column-reverse; } /* ▽ : tags au-dessus du nom */
.ptri-titre {
  font-family: var(--font-titre); font-weight: 700; font-size: .92rem; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.ptri-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.ptri-tags span {
  background: rgba(10, 16, 22, .5); color: #fff;
  font-family: var(--font-texte); font-size: .68rem;
  padding: 2px 8px; border-radius: 0;
}

/* ----------------------------------------------------------
   Voile d'extinction : un projet filtré "s'éteint" en noir
   depuis l'arête horizontale (base) vers la pointe.
   Le rectangle est rogné par le clip-path du triangle parent ;
   on le fait grandir avec scaleY depuis le côté de la base.
   ---------------------------------------------------------- */
.ptri-black {
  position: absolute; inset: 0; z-index: 5;
  background: #0a0e12; pointer-events: none;
  transform: scaleY(0);
  transition: transform .55s cubic-bezier(.7, 0, .3, 1);
}
.ptri.up   .ptri-black { transform-origin: bottom; }   /* base en bas  -> monte vers la pointe */
.ptri.down .ptri-black { transform-origin: top; }      /* base en haut -> descend vers la pointe */
.ptri.off  .ptri-black { transform: scaleY(1); }
.ptri.off  { pointer-events: none; }