/* =============================================================================
   photographes.css — le bandeau defilant des accompagnateurs
   =============================================================================
   Repris de la maquette figee : `style.css` l. 1305-1337, plus les trois blocs
   mobiles de `mobile.css` (l. 1036, 1300-1306, 810-811).

   ⚠️ LE TYPE S'APPELLE `photographes`, LES CLASSES `.photographers` ET `.pgr-*`.
   Le code nomme en francais, le balisage reprend la maquette a la lettre. Meme
   partage que `temoignages` / `.testimonials` et `recits_apercu` / `.blog`.

   ----------------------------------------------------------------------------
   COMMENT LA BOUCLE EST SANS COUTURE, parce que ca conditionne le balisage :
   chaque ligne contient DEUX COPIES identiques de son lot, et l'animation la
   translate de `-50%`. Arrivee au bout, la seconde copie est exactement la ou la
   premiere commencait — le raccord est invisible.
   ⚠️ DONC : retirer la duplication casse l'effet, et la vue DOIT rendre chaque lot
   deux fois. Ce n'est pas du balisage redondant.
   ----------------------------------------------------------------------------

   ⚠️ `prefers-reduced-motion` COUPE L'ANIMATION, et cette garde vient de la
   MAQUETTE — contrairement a celles de `scroll-reveal.js` et `trust.js`, que nous
   avons ajoutees. Un bandeau qui defile en permanence est exactement ce que cette
   preference existe pour eteindre. Ne pas la retirer.

   ⚠️ SUR MOBILE, LES ITEMS PASSENT DE TROIS LIGNES A DEUX — redistribution faite
   par `js/blocs/photographes.js`. Les tailles mobiles ci-dessous (portraits a
   24vw, noms a 7.6vw) sont ecrites POUR deux lignes : sans le JS, on obtient trois
   lignes de gros portraits, bien plus haut que prevu. Le CSS et le JS vont
   ensemble, ne pas porter l'un sans l'autre.
   ============================================================================= */

/* ---- PHOTOGRAPHES ---- */
.photographers{ background:var(--creme-2); overflow:hidden; }

/* ===== BANDEAUX DÉFILANTS (marquee) façon park.photos ===== */
.pgr-marquee{ display:flex; flex-direction:column; gap:clamp(14px,2vw,26px);
  margin-top:clamp(30px,4vw,52px); }
/* chaque ligne = une piste qui défile horizontalement, en boucle infinie */
.pgr-row{ display:flex; width:max-content; gap:clamp(28px,3vw,52px);
  will-change:transform; }
.pgr-row[data-dir="left"]{ animation:pgrScrollL 48s linear infinite; }
.pgr-row[data-dir="right"]{ animation:pgrScrollR 48s linear infinite; }
/* ARRÊT au survol de toute la zone (rollover) */
.pgr-marquee:hover .pgr-row{ animation-play-state:paused; }

/* la piste contient 2 copies identiques -> translation de -50% = boucle sans couture */
@keyframes pgrScrollL{ from{ transform:translateX(0); }     to{ transform:translateX(-50%); } }
@keyframes pgrScrollR{ from{ transform:translateX(-50%); }  to{ transform:translateX(0); } }

/* un item = vignette photo + nom côte à côte */
.pgr-item{ display:flex; align-items:center; gap:14px; flex:0 0 auto; cursor:pointer; color:inherit; text-decoration:none; }
.pgr-item__photo{ width:clamp(64px,5vw,86px); height:clamp(64px,5vw,86px); border-radius:20px;
  background:#241d12 center/cover no-repeat; flex:0 0 auto;
  filter:grayscale(.25); transition:filter .3s var(--ease), transform .3s var(--ease); }
.pgr-item__txt{ line-height:1.15; }
.pgr-item__name{ font-family:var(--serif, 'Instrument Serif', serif);
  font-size:clamp(26px,2.6vw,40px); color:var(--noir); white-space:nowrap; }
.pgr-item__spe{ font-size:12px; color:var(--noir-50); letter-spacing:.04em;
  text-transform:uppercase; margin-top:2px; }
/* survol d'un item : photo nette + léger zoom (le défilement est déjà figé) */
.pgr-item:hover .pgr-item__photo{ filter:grayscale(0); transform:scale(1.06); }

/* accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce){ .pgr-row{ animation:none; } }

@media (max-width:1024px){
  /* Le masque de bord evite que les items apparaissent et disparaissent net. Et la
     specialite remonte a 70% d'opacite : a 50% elle etait illisible sur le fond
     creme une fois melee aux items qui defilent. */
  .pgr-marquee{
    overflow:hidden;
    mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    gap:clamp(20px,5vw,32px); margin-top:clamp(22px,5vw,34px);
  }

  /* La 3e ligne est videe par le JS, qui pose `data-mob-rows` sur le conteneur.
     ⚠️ Sans cet attribut la regle ne mord pas — c'est voulu : si le JS ne tourne
     pas, les trois lignes restent peuplees et lisibles plutot que d'en perdre une. */
  .pgr-marquee[data-mob-rows] .pgr-row:nth-child(3){ display:none; }

  .pgr-row{ gap:clamp(22px,6vw,36px); }
  .pgr-item{ gap:16px; }
  .pgr-item__photo{ width:clamp(88px,24vw,112px); height:clamp(88px,24vw,112px); border-radius:26px; }
  .pgr-item__name{ font-size:clamp(28px,7.6vw,36px); }
  .pgr-item__spe{ font-size:13px; color:rgba(14,14,14,.7); font-weight:600; }
}