/* ============================================================
   ROARY — photographie
   Deux objets seulement : le seuil et la galerie.

   Principe arrêté : aucun contour. Pas de filet, pas d'ombre, pas
   de coin arrondi, pas de survol qui soulève. L'image touche la
   page directement. Tout se joue donc sur la proportion et sur le
   blanc autour, jamais sur l'habillage.
   ============================================================ */

/* ---------- Le seuil ----------
   Pleine largeur, bord à bord, aucun texte dessus. La proportion
   est volontairement très allongée : à cette hauteur, on ne
   s'arrête pas devant l'image, on la traverse. C'est un passage
   entre deux sujets, pas une illustration.

   Le bandeau sort de la carte empilée : il ne prend ni sa marge
   intérieure ni son fond. */
.ph-seuil{display:block; width:100%; overflow:hidden; background:var(--cuir, #2C1B11);}
.ph-seuil img{
  display:block; width:100%;
  height:clamp(240px, 46vh, 460px);
  object-fit:cover;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.ph-seuil.vu img{opacity:1; transform:scale(1);}
@media(max-width:640px){ .ph-seuil img{height:clamp(220px, 38vh, 320px);} }

/* ---------- Le ruban ----------
   Une bande d'images qui glisse en continu, de droite à gauche.
   Elle dit en trois secondes ce qu'un paragraphe met dix lignes à
   dire : gestes de métier, façades, lieux, matières — l'étendue du
   terrain de Roary.

   Trois partis pris. Hauteur commune, largeurs libres : tout ramener
   au même format en ferait une frise mécanique. Défilement lent —
   soixante secondes pour un tour — parce qu'une bande rapide devient
   une publicité. Et arrêt au survol, pour que celui qui veut
   regarder puisse le faire.

   La piste contient deux fois la même série : quand la première
   moitié a fini de passer, la seconde est exactement à sa place et
   la boucle est invisible. */
/* Le ruban est lui-même une carte de l'empilement : il en reçoit le coin
   arrondi, l'ombre portée et le voile qui l'assombrit quand la carte
   suivante monte par-dessus. Sans cela, la chaîne se rompait à cet
   endroit et « L'outil ROARY » ne glissait plus sur rien. */
.ph-ruban{width:100%; overflow:hidden; background:var(--blanc, #F4F5F0); display:block;}
.ph-ruban.stack-card{border-radius:26px 26px 0 0;}
.ph-ruban .piste{position:relative; z-index:1;}
.ph-ruban .piste{
  display:flex; width:max-content; gap:6px;
  animation:roary-defile 60s linear infinite;
}
.ph-ruban img{
  display:block; height:clamp(190px, 27vh, 300px); width:auto;
  object-fit:cover; flex-shrink:0;
}
@keyframes roary-defile{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(hover:hover){ .ph-ruban:hover .piste{animation-play-state:paused;} }

/* Deux rubans qui glissent dans le même sens sur un même site donnent
   l'impression d'un seul élément recyclé. Le second part de la gauche. */
.ph-ruban.inverse .piste{animation-name:roary-defile-inverse; animation-duration:66s;}
@keyframes roary-defile-inverse{ from{transform:translateX(-50%);} to{transform:translateX(0);} }

/* Deux voiles latéraux : la bande sort et entre par un fondu au lieu
   d'être tranchée net par le bord de l'écran. */
.ph-ruban{position:relative;}
.ph-ruban::before, .ph-ruban::after{
  content:''; position:absolute; top:0; bottom:0; width:9vw; z-index:2; pointer-events:none;
}
.ph-ruban::before{left:0;  background:linear-gradient(90deg, var(--blanc, #F4F5F0), transparent);}
.ph-ruban::after {right:0; background:linear-gradient(270deg, var(--blanc, #F4F5F0), transparent);}
/* Sur fond blanc pur, les voiles empruntent cette couleur-là. */
.ph-ruban.sur-blanc{background:var(--white, #FDFCFA);}
.ph-ruban.sur-blanc::before{background:linear-gradient(90deg, var(--white, #FDFCFA), transparent);}
.ph-ruban.sur-blanc::after {background:linear-gradient(270deg, var(--white, #FDFCFA), transparent);}

@media(max-width:640px){ .ph-ruban::before, .ph-ruban::after{width:14vw;} }

/* ---------- La galerie ----------
   Un mur d'images. Format unique et gouttière serrée : c'est la
   régularité qui fait tenir un mur — dès qu'on alterne les
   hauteurs, on retombe sur une planche contact. */
.ph-galerie{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:100%; margin-top:34px;}
.ph-galerie .g{overflow:hidden; background:var(--cuir, #2C1B11); aspect-ratio:3/4;}
.ph-galerie .g img{
  display:block; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  transition:opacity 1s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}
.ph-galerie.vu .g img{opacity:1; transform:scale(1);}
@media(hover:hover){
  .ph-galerie .g:hover img{transform:scale(1.06); transition:transform .9s cubic-bezier(.16,1,.3,1);}
}
@media(max-width:760px){ .ph-galerie{grid-template-columns:repeat(2,1fr); gap:3px;} }

/* La galerie occupe toute la largeur de la carte, sans se laisser
   ramener au gabarit de texte. */
.card-inner > .ph-galerie{max-width:none;}

@media (prefers-reduced-motion:reduce){
  .ph-seuil img, .ph-galerie .g img{opacity:1; transform:none; transition:none;}
  /* Le ruban s'arrête et devient une bande qu'on fait glisser au doigt. */
  .ph-ruban .piste{animation:none;}
  .ph-ruban{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}