/* ==========================================================================
   Gabian Pub — page Réalisations (portfolio.html)
   S'appuie sur les jetons de site.css (encre, ivoire, cuivre, Anton, Inter,
   Instrument Serif). Rien ici n'est chargé par les autres pages.
   ========================================================================== */

.pf-page{
  --pf-ease:cubic-bezier(.2,.8,.2,1);
  --pf-dur:.8s;
  /* Largeur d'une vidéo verticale : limitée par l'écran ET par la hauteur
     disponible, pour qu'une vidéo entière tienne toujours à l'écran. */
  --pf-w:min(340px, 27vw, calc((100svh - 190px) * 9 / 16));
  --pf-w-wide:min(780px, 62vw);
  /* Format 4:3 (Créatif) : taille contenue, jamais plus large que l'écran. */
  --pf-w-43:min(520px, 100%);
}

.pf-main{
  position:relative;
  overflow-x:clip;
  padding-bottom:clamp(40px,6vw,80px);
}
/* Halo cuivré d'ambiance, dans l'esprit du hero de l'accueil. */
.pf-main::before{
  content:"";position:absolute;inset:0 0 auto;height:min(1100px,140vh);pointer-events:none;
  background:
    radial-gradient(720px 480px at 50% 0%,rgba(255,122,60,.10),transparent 65%),
    radial-gradient(520px 420px at 12% 70%,rgba(247,241,230,.025),transparent 60%);
}

/* ---------- Collection ---------- */
.pf-collection{position:relative;padding-block:clamp(40px,6vw,80px) clamp(72px,10vw,140px)}

/* ---------- Bobine : les vidéos d'une collection ---------- */
.pf-reel{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(48px,4vw,64px) clamp(40px,8vw,140px);
}
/* Lueur derrière la bobine, qui s'intensifie quand une vidéo est écoutée. */
.pf-reel::before{
  content:"";position:absolute;left:50%;top:45%;width:min(900px,90vw);height:70%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,122,60,.10),transparent);
  opacity:.5;transition:opacity 1.2s var(--pf-ease);
}
.pf-reel.has-active::before{opacity:1}

.pf-item{margin:0;width:var(--pf-w);position:relative}
.pf-item[data-format="16:9"]{width:var(--pf-w-wide)}
.pf-item[data-format="4:3"]{width:var(--pf-w-43)}
/* Décalages verticaux subtils : une composition, pas une grille alignée.
   Chaque vidéo a aussi sa propre position de légende (--pf-cap-*). */
.pf-item:nth-child(3n+1){margin-top:clamp(0px,3vw,44px);--pf-cap-x:30%;--pf-cap-y:4px;--pf-cap-r:-6deg}
.pf-item:nth-child(3n+2){margin-top:0;--pf-cap-x:58%;--pf-cap-y:10px;--pf-cap-r:5deg}
.pf-item:nth-child(3n){margin-top:clamp(0px,5.5vw,80px);--pf-cap-x:22%;--pf-cap-y:0px;--pf-cap-r:-4deg}
.pf-item[data-format="16:9"]{margin-top:0}

.pf-frame{
  position:relative;
  aspect-ratio:9/16;
  border:1px solid var(--copper);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-2);
  isolation:isolate;
  transform:translateZ(0) scale(1);
  transform-origin:50% 50%;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
  transition:
    transform var(--pf-dur) var(--pf-ease),
    box-shadow var(--pf-dur) var(--pf-ease),
    opacity var(--pf-dur) var(--pf-ease),
    filter var(--pf-dur) var(--pf-ease);
  will-change:transform;
}
.pf-item[data-format="16:9"] .pf-frame{aspect-ratio:16/9}
.pf-item[data-format="4:3"] .pf-frame{aspect-ratio:4/3}
/* Format natif : on montre l'image entière, sans recadrage. */
.pf-item[data-format="4:3"] .pf-video{object-fit:contain}

.pf-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--ink-2);
}

/* Bouton transparent qui couvre la vidéo : toute la surface est cliquable,
   au clavier comme à la souris. */
.pf-toggle{position:absolute;inset:0;z-index:3;width:100%;height:100%;border-radius:inherit;cursor:pointer}
.pf-toggle:focus-visible{outline:2px solid var(--paper);outline-offset:-6px;border-radius:8px}

/* Voile très léger au repos, qui se lève au survol et à l'écoute. */
.pf-frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 55%,rgba(10,10,10,.55) 100%);
  transition:opacity var(--pf-dur) var(--pf-ease);
}

/* Indicateur de son */
.pf-sound{
  position:absolute;left:12px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 11px 7px 10px;border-radius:40px;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(247,241,230,.12);
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-80);
  transition:border-color .5s var(--pf-ease),color .5s var(--pf-ease);
}
.pf-bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.pf-bars i{
  display:block;width:2px;height:2px;border-radius:1px;background:currentColor;
  transform-origin:bottom;transition:height .4s var(--pf-ease);
}

/* Réglage du volume : n'apparaît que sur la vidéo écoutée, au-dessus du
   bouton qui couvre la vidéo (un clic dessus ne coupe donc pas la lecture). */
.pf-volume{
  position:absolute;right:12px;bottom:14px;z-index:4;
  display:flex;align-items:center;gap:8px;
  padding:5px 12px 5px 8px;border-radius:40px;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,122,60,.55);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s var(--pf-ease),transform .45s var(--pf-ease),visibility 0s linear .45s;
}
.pf-item.is-active .pf-volume{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s var(--pf-ease) .2s,transform .45s var(--pf-ease) .2s,visibility 0s;
}
.pf-mute{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:var(--paper);transition:color .2s;
}
.pf-mute:hover{color:var(--copper)}
.pf-mute:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.pf-mute .pf-cross{display:none}
.pf-item.is-silent .pf-mute .pf-wave{display:none}
.pf-item.is-silent .pf-mute .pf-cross{display:inline}

.pf-range{
  -webkit-appearance:none;appearance:none;
  width:76px;height:20px;margin:0;padding:0;background:transparent;cursor:pointer;
}
.pf-range:focus{outline:none}
.pf-range:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
.pf-range::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(to right,var(--copper) calc(var(--pf-v,.8) * 100%),rgba(247,241,230,.25) 0);
}
.pf-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-4.5px;border-radius:50%;border:0;
  background:var(--paper);box-shadow:0 0 0 3px rgba(255,122,60,.25);
  transition:transform .2s var(--pf-ease);
}
.pf-range:active::-webkit-slider-thumb{transform:scale(1.25)}
.pf-range::-moz-range-track{height:2px;border-radius:2px;background:rgba(247,241,230,.25)}
.pf-range::-moz-range-progress{height:2px;border-radius:2px;background:var(--copper)}
.pf-range::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;border:0;
  background:var(--paper);box-shadow:0 0 0 3px rgba(255,122,60,.25);
}

/* Barre de progression cuivrée au pied de la vidéo */
.pf-progress{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:rgba(247,241,230,.12)}
.pf-progress span{
  display:block;height:100%;background:var(--copper);
  transform:scaleX(var(--pf-p,0));transform-origin:left;
}

/* Fichier absent : un emplacement sobre plutôt qu'un lecteur cassé. */
.pf-missing{
  position:absolute;inset:0;z-index:2;display:none;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--grey-text);
  background:
    radial-gradient(closest-side,rgba(255,122,60,.08),transparent),
    var(--ink-2);
}
.pf-item.is-missing .pf-missing{display:grid}
.pf-item.is-missing .pf-sound,
.pf-item.is-missing .pf-progress,
.pf-item.is-missing .pf-toggle{display:none}

/* Légende : flèche dessinée (même tracé que .scroll-arrow de l'accueil,
   retournée pour pointer vers la vidéo, sans clignotement) + « Essentiel »
   en Instrument Serif italique (la police des titres éditoriaux du site). */
.pf-caption{
  display:flex;align-items:flex-end;gap:14px;
  margin-top:calc(10px + var(--pf-cap-y,0px));
  margin-left:var(--pf-cap-x,0);
  color:var(--paper);
  transition:opacity var(--pf-dur) var(--pf-ease),transform var(--pf-dur) var(--pf-ease);
}
.pf-caption-arrow{display:block;flex:none;transform:rotate(calc(180deg + var(--pf-cap-r,0deg)))}
.pf-caption-title{
  font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1;
  padding-bottom:3px;color:var(--paper);
}

/* ---------- Interactions ---------- */
@media (hover:hover) and (pointer:fine){
  .pf-item:not(.is-active) .pf-frame:hover{transform:translateZ(0) scale(1.015)}
  .pf-frame:hover::after{opacity:.6}
}

/* Vidéo écoutée : légère montée en taille, halo cuivré, son affiché. */
.pf-item.is-active{z-index:2}
.pf-item.is-active .pf-frame{
  transform:translateZ(0) scale(1.08);
  box-shadow:
    0 0 0 1px rgba(255,122,60,.35),
    0 40px 90px -30px rgba(255,122,60,.32),
    0 30px 60px -30px rgba(0,0,0,.9);
}
.pf-item.is-active .pf-frame::after{opacity:0}
.pf-item.is-active .pf-caption{transform:translateY(clamp(10px,2.2vw,22px))}
.pf-item.is-active .pf-sound{border-color:rgba(255,122,60,.55);color:var(--paper)}
.pf-item.is-active .pf-bars i{background:var(--copper);animation:pf-eq 1s ease-in-out infinite}
.pf-item.is-active .pf-bars i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}
.pf-item.is-active .pf-bars i:nth-child(3){animation-delay:-.6s;animation-duration:1.15s}
.pf-item.is-active .pf-bars i:nth-child(4){animation-delay:-.15s;animation-duration:.9s}
@keyframes pf-eq{0%,100%{height:3px}50%{height:10px}}

/* Créatif (4:3) : agrandissement un peu plus marqué sur ordinateur (~14 %),
   au lieu des 8 % communs — sans toucher aux vidéos Essentiel (9:16), qui
   gardent leur scale(1.08). Sur mobile (<=720px), l'agrandissement discret
   defini plus bas (scale 1.04) reste en vigueur, pour eviter tout debordement
   ou defilement horizontal. Specificite plus forte que la regle commune, donc
   prioritaire a format egal. */
@media (min-width:721px){
  .pf-item[data-format="4:3"].is-active .pf-frame{transform:translateZ(0) scale(1.14)}
}

/* Les autres vidéos s'effacent un peu, sans disparaître. */
.pf-reel.has-active .pf-item:not(.is-active) .pf-frame{
  transform:translateZ(0) scale(.96);
  opacity:.5;
  filter:saturate(.55);
}
.pf-reel.has-active .pf-item:not(.is-active) .pf-caption{opacity:.4}

/* ---------- Contrôles de lecture (data-controls) : pause + navigation ----------
   Au-dessus du bouton qui couvre la vidéo ; visibles seulement pendant
   l'écoute, comme le réglage du volume. */
.pf-controls{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
  display:flex;align-items:center;gap:10px;
  padding:6px 14px 6px 8px;border-radius:40px;
  background:rgba(10,10,10,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,122,60,.55);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s var(--pf-ease),transform .45s var(--pf-ease),visibility 0s linear .45s;
}
.pf-item.is-active .pf-controls{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s var(--pf-ease) .2s,transform .45s var(--pf-ease) .2s,visibility 0s;
}
.pf-playpause{
  display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
  color:var(--paper);transition:color .2s;
}
.pf-playpause:hover{color:var(--copper)}
.pf-playpause:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.pf-playpause .pf-icon-play{display:none}
.pf-item.is-paused .pf-playpause .pf-icon-play{display:inline}
.pf-item.is-paused .pf-playpause .pf-icon-pause{display:none}
.pf-time{
  flex:none;font-size:.62rem;font-weight:600;letter-spacing:.08em;color:var(--paper-80);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pf-seek{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;
  height:24px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;
}
.pf-seek:focus{outline:none}
.pf-seek:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
.pf-seek::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--copper) calc(var(--pf-s,0) * 100%),rgba(247,241,230,.25) 0);
}
.pf-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4.5px;border-radius:50%;border:0;
  background:var(--paper);box-shadow:0 0 0 3px rgba(255,122,60,.25);
  transition:transform .2s var(--pf-ease);
}
.pf-seek:active::-webkit-slider-thumb{transform:scale(1.25)}
.pf-seek::-moz-range-track{height:3px;border-radius:2px;background:rgba(247,241,230,.25)}
.pf-seek::-moz-range-progress{height:3px;border-radius:2px;background:var(--copper)}
.pf-seek::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;border:0;
  background:var(--paper);box-shadow:0 0 0 3px rgba(255,122,60,.25);
}
/* Volume intégré à la barre : mêmes commandes, sans pastille séparée. */
.pf-item .pf-controls .pf-volume{
  position:static;flex:none;padding:0;gap:6px;border:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:1;visibility:visible;transform:none;transition:none;
}
.pf-controls .pf-range{width:64px}
/* Avec les contrôles, la barre de progression fine et l'indicateur de son
   laissent la place (la barre de navigation fait déjà office de progression). */
.pf-item[data-controls] .pf-progress{display:none}
.pf-item[data-controls].is-active .pf-sound{opacity:0;visibility:hidden}

/* ---------- Créatif : de l'air autour de la vidéo, légende à droite ---------- */
.pf-collection--creatif{padding-block:clamp(56px,8vw,120px) clamp(48px,6vw,88px)}
.pf-reel .pf-item[data-format="4:3"]{margin-top:0;--pf-cap-x:58%;--pf-cap-y:8px;--pf-cap-r:5deg}

/* ---------- Fin de page ---------- */
.pf-outro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  border-top:1px solid var(--line);
  padding-block:clamp(72px,9vw,128px) clamp(40px,5vw,72px);
}
.pf-outro h2{font-size:clamp(2.2rem,5vw,4.2rem);line-height:.98}
.pf-outro-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 30px;margin-top:36px}

/* Lien actif de la navigation */
.nav-links a[aria-current="page"]{color:var(--paper)}
.nav-links a[aria-current="page"]::after{right:0}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .pf-page{--pf-w:min(80vw, 380px, calc((100svh - 150px) * 9 / 16));--pf-w-wide:100%}
  .pf-reel{flex-direction:column;align-items:center;gap:64px}
  .pf-item:nth-child(n),
  .pf-reel .pf-item[data-format="4:3"]{margin-top:0;--pf-cap-x:0;--pf-cap-y:0px;--pf-cap-r:0deg}
  .pf-page{--pf-w-43:min(100%, 520px)}
  .pf-collection--creatif{padding-top:clamp(24px,8vw,56px)}
  .pf-controls{left:8px;right:8px;bottom:8px;gap:8px;padding:4px 12px 4px 6px}
  .pf-seek{height:32px}
  .pf-controls .pf-range{width:56px}
  .pf-controls .pf-time{letter-spacing:.02em}
  /* Place pour le réglage du volume : l'indicateur ne garde que ses barres. */
  .pf-item.is-active .pf-sound-label{display:none}
  .pf-range{width:88px}
  .pf-item.is-active .pf-frame{transform:translateZ(0) scale(1.04)}
  .pf-item.is-active .pf-caption{transform:translateY(10px)}
  .pf-reel.has-active .pf-item:not(.is-active) .pf-frame{transform:translateZ(0) scale(.98)}
}

@media (prefers-reduced-motion:reduce){
  .pf-item.is-active .pf-bars i{animation:none;height:8px}
}

/* ---------- Vue PC (écrans d'ordinateur) : 3 vidéos visibles sans défilement ---------- */
@media (min-width: 1025px){
  .pf-page{
    --pf-w:min(265px, 20vw, calc((100svh - 215px) * 9 / 16));
  }
  .pf-collection{
    padding-block:clamp(16px, 2.5vh, 32px) clamp(24px, 3vh, 40px);
  }
  .pf-collection--creatif{padding-block:clamp(72px, 12vh, 140px) clamp(48px, 7vh, 80px)}
  .pf-reel{
    flex-wrap:nowrap;
    gap:clamp(24px, 2.5vw, 44px);
  }
  .pf-item:nth-child(3n+1){margin-top:clamp(0px,2.4vh,26px)}
  .pf-item:nth-child(3n+2){margin-top:0}
  .pf-item:nth-child(3n){margin-top:clamp(0px,4.4vh,48px)}
}