/* ==========================================================================
   STUDIO RANEEM — PAGE RÉALISATIONS
   Chargée uniquement sur /realisations/. ~4 Ko.

   Parti pris : la page doit se tenir seule, sans reprendre le canvas de
   l'accueil (11 Ko de JS). Tout le mouvement vient d'ici — bandeau cinétique,
   halos en rotation lente, filtres à indicateur glissant, grille animée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — fond composé
   Deux halos décalés qui tournent très lentement. À 90 s et 130 s par tour,
   on ne voit jamais le mouvement : on perçoit seulement que le fond n'est pas
   mort. C'est exactement l'effet recherché.
   -------------------------------------------------------------------------- */

.sr-rea-hero { position: relative; overflow: clip; }

.sr-rea-hero__bg {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
}
.sr-rea-hero__bg i {
  position: absolute; border-radius: 50%; display: block;
  filter: blur(80px); opacity: .55;
  animation: sr-derive 90s linear infinite;
}
.sr-rea-hero__bg i:first-child {
  width: 46vw; height: 46vw; left: 4%; top: 6%;
  background: radial-gradient(circle, var(--sr-teal-a22), transparent 68%);
}
.sr-rea-hero__bg i:last-child {
  width: 38vw; height: 38vw; right: 6%; bottom: 2%;
  background: radial-gradient(circle, rgba(41,182,186,.13), transparent 68%);
  animation-duration: 130s; animation-direction: reverse;
}
@keyframes sr-derive {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(6%,-4%,0) rotate(180deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}

/* Grille de repères, très discrète : elle donne de la profondeur au fond sans
   qu'on l'identifie comme une grille. */
.sr-rea-hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--sr-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sr-line) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
}

.sr-rea-hero > .et_pb_row { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   BANDEAU CINÉTIQUE
   Deux rangées en sens contraire. La vitesse est pilotée en JS par la
   vélocité du scroll : à l'arrêt ça glisse, quand on défile vite ça file.
   -------------------------------------------------------------------------- */

.sr-kin {
  position: relative; z-index: 2;
  margin-top: clamp(40px, 6vw, 84px);
  border-top: 1px solid var(--sr-line);
  border-bottom: 1px solid var(--sr-line);
  padding: clamp(14px, 2vw, 22px) 0;
  display: grid; gap: clamp(8px, 1.2vw, 16px);
  user-select: none;
}
.sr-kin__row { display: flex; overflow: hidden; }
.sr-kin__group {
  display: flex; align-items: center; flex: none; gap: clamp(18px, 2.4vw, 34px);
  padding-right: clamp(18px, 2.4vw, 34px);
  transform: translate3d(var(--sr-kin-x, 0), 0, 0);
  will-change: transform;
}
.sr-kin__group span {
  font-family: var(--sr-font-display); font-weight: 600;
  font-size: clamp(22px, 3.4vw, 46px); line-height: 1;
  letter-spacing: -.01em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--sr-line-strong);
  transition: color .5s var(--sr-ease-expo), -webkit-text-stroke-color .5s;
}
/* Une rangée pleine, une rangée en contour : c'est ce contraste qui fait
   lire les deux comme un seul objet graphique. */
.sr-kin__row--a .sr-kin__group span { color: var(--sr-text); -webkit-text-stroke-width: 0; }
.sr-kin__row--b .sr-kin__group span:hover { color: var(--sr-teal-glow); -webkit-text-stroke-color: var(--sr-teal-glow); }

.sr-kin__group i {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--sr-teal); opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .sr-rea-hero__bg i { animation: none; }
  .sr-kin__group { transform: none !important; }
  .sr-kin__row { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   BARRE DE FILTRES
   L'indicateur est un seul élément qu'on déplace et redimensionne : une
   transition de transform, jamais de left/width. Le compteur est en
   aria-live pour que le changement soit annoncé aux lecteurs d'écran.
   -------------------------------------------------------------------------- */

.sr-gal__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.sr-gal__filtres {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px;
}
/* L'indicateur glissant, injecté par le JS. */
.sr-gal__filtres::before {
  content: ''; position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--sr-ind-w, 0); height: var(--sr-ind-h, 0);
  transform: translate3d(var(--sr-ind-x, 0), var(--sr-ind-y, 0), 0);
  background: rgba(28,126,128,.18);
  border: 1px solid var(--sr-teal-glow);
  border-radius: var(--sr-radius);
  transition: transform .5s var(--sr-ease-expo), width .5s var(--sr-ease-expo),
              height .5s var(--sr-ease-expo), opacity .3s;
  opacity: 0; pointer-events: none;
}
.sr-gal__filtres.is-prete::before { opacity: 1; }

.sr-gal__filtres button {
  position: relative; z-index: 1; cursor: pointer;
  font-family: var(--sr-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 17px; background: transparent;
  color: var(--sr-text-2); border: 1px solid var(--sr-line-mid);
  border-radius: var(--sr-radius);
  transition: color var(--sr-d-fast), border-color var(--sr-d-fast);
}
.sr-gal__filtres button:hover { color: var(--sr-text); transition-duration: var(--sr-d-snap); }
.sr-gal__filtres button.is-on { color: var(--sr-text); border-color: transparent; }
.sr-gal__filtres button:focus-visible { outline: 2px solid var(--sr-teal-glow); outline-offset: 3px; }
.sr-gal__filtres button i {
  font-style: normal; margin-left: 7px; font-size: 9.5px;
  color: var(--sr-text-3-aa); vertical-align: super;
}
.sr-gal__filtres button.is-on i { color: var(--sr-teal-glow); }

.sr-gal__compte {
  margin: 0; font-family: var(--sr-font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sr-text-3-aa);
}
.sr-gal__compte b {
  font-family: var(--sr-font-display); font-weight: 600; font-size: 22px;
  color: var(--sr-text); margin-right: 8px; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   GRILLE
   Une vraie grille CSS, pas des colonnes : le FLIP a besoin de positions
   prévisibles, et `columns` refait couler les éléments d'une colonne à
   l'autre à chaque filtrage — impossible à animer proprement.
   -------------------------------------------------------------------------- */

.sr-gal__grille {
  display: grid; gap: clamp(14px, 1.8vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-items: start;
}
.sr-gal__item { position: relative; }
.sr-gal__item.est-cache { display: none; }

.sr-gal__n {
  position: absolute; left: -2px; top: -14px; z-index: 3;
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--sr-text-3-aa); pointer-events: none;
  transition: color var(--sr-d-fast);
}
.sr-gal__item:hover .sr-gal__n { color: var(--sr-teal-glow); }

/* La vignette occupe toute la largeur de sa cellule. .sr-reel garde ses
   effets (scan, REC, timecode) définis dans sections.css. */
.sr-gal__item .sr-reel { display: block; width: 100%; margin: 0; break-inside: auto; }

/* Entrée décalée après un filtrage. Le délai est posé en JS sur chaque
   élément visible ; ici on ne décrit que le mouvement. */
@keyframes sr-gal-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.sr-gal__item.entre { animation: sr-gal-in .62s var(--sr-ease-expo) both; animation-delay: var(--sr-gd, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .sr-gal__item.entre { animation: none; }
  .sr-gal__filtres::before { transition: none; }
}

/* --------------------------------------------------------------------------
   TUILE D'APPEL
   Dernière case de la grille, jamais filtrée. Elle referme la série sur une
   proposition au lieu d'un bord vide, et son intitulé suit la catégorie
   active : « Bientôt votre clip musical ici ».
   Le trait est en pointillés pour qu'on la lise d'emblée comme une place à
   prendre, et non comme un projet dont l'image n'aurait pas chargé.
   -------------------------------------------------------------------------- */

.sr-gal__item--appel a {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 14px; height: 100%; min-height: 240px; padding: clamp(24px, 3vw, 38px);
  text-align: center; text-decoration: none;
  border: 1px dashed var(--sr-line-strong); border-radius: var(--sr-radius);
  background: linear-gradient(160deg, rgba(28,126,128,.05), transparent 60%);
  transition: border-color var(--sr-d-fast), background var(--sr-d-fast),
              transform .5s var(--sr-ease-expo);
}
.sr-gal__item--appel a:hover {
  border-color: var(--sr-teal-glow);
  background: linear-gradient(160deg, rgba(28,126,128,.14), transparent 62%);
  transform: translateY(-4px);
  transition-duration: var(--sr-d-snap);
}
.sr-gal__item--appel a:focus-visible { outline: 2px solid var(--sr-teal-glow); outline-offset: 4px; }

/* La croix est dessinée en CSS : Divi remplit les ::before/::after de son
   icônographie, on passe donc par des dégradés plutôt que par `content`. */
.sr-gal__item--appel .sr-appel__plus {
  width: 34px; height: 34px; flex: none; position: relative;
  background:
    linear-gradient(var(--sr-teal-glow), var(--sr-teal-glow)) center/2px 100% no-repeat,
    linear-gradient(var(--sr-teal-glow), var(--sr-teal-glow)) center/100% 2px no-repeat;
  opacity: .8; transition: transform .55s var(--sr-ease-expo), opacity var(--sr-d-fast);
}
.sr-gal__item--appel a:hover .sr-appel__plus { transform: rotate(90deg); opacity: 1; }

.sr-gal__item--appel .sr-appel__t {
  font-family: var(--sr-font-display); font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25;
  color: var(--sr-text-2); max-width: 18ch;
}
.sr-gal__item--appel .sr-appel__t b { color: var(--sr-text); font-weight: 500; }

.sr-gal__item--appel .sr-appel__c {
  font-family: var(--sr-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sr-teal-glow);
}

@media (prefers-reduced-motion: reduce) {
  .sr-gal__item--appel a:hover { transform: none; }
  .sr-gal__item--appel a:hover .sr-appel__plus { transform: none; }
}