/* portfolio.css - realisations.html
 *
 * Chargé après noir-argent.css, blanc-kaki.css et kaki-commun.css :
 * la page est en direction kaki, contenu en scope clair. Tous les
 * tokens sémantiques (--text, --border, --bg-alt) sont déjà résolus
 * par le scope. Aucune valeur de couleur en dur ici.
 *
 * Typographie : la page n'a aucune fantaisie propre. Les tailles, les
 * graisses, les interlignes et les espacements de lettres sont ceux
 * de l'accueil, repris à l'identique de main.css :
 *   .pf-panel h3   = .section-header h2
 *   .pf-story h4   = .ms-title
 *   .pf-story p    = .ms-desc
 *   .pf-meta span  = .ms-label
 */

.pf-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ══ La piste ══════════════════════════════════════════════════
   À partir de 900px les trois captures tiennent ensemble dans le
   conteneur de 1160px, centrées, sans qu'il faille rien faire
   glisser pour toutes les voir. En dessous de 900px une seule carte
   à la fois occupe l'écran, en plein bord : le média query plus bas
   reprend alors l'ancien calage (padding = moitié de la place
   restante, carte au centre exact au scroll-snap).
   La piste reste glissable à tous les formats : geste tactile natif,
   glisser-déposer à la souris (portfolio.js) et flèches. */
.pf-rail {
  --pf-card-w: min(28vw, 335px);
  /* Positionné : les cartes prennent la piste pour offsetParent,
     c'est sur cette base que le script calcule le recentrage. */
  position: relative;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.5rem var(--px) clamp(2rem, 4vw, 2.75rem);
  justify-content: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  cursor: grab;
  /* La pagination et le geste tiennent lieu de barre de défilement. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-rail::-webkit-scrollbar { display: none; }
.pf-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.pf-card {
  flex: 0 0 var(--pf-card-w);
  scroll-snap-align: center;
  display: block;
}
.pf-card:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }

/* Le cadre est la seule chose stylisée : angles vifs, filet fin. La
   capture reste entière et non recadrée, le rapport du conteneur
   étant exactement celui des fichiers (1400 x 875). */
.pf-frame {
  display: block;
  aspect-ratio: 1400 / 875;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: opacity 0.24s var(--ease-noir), border-color 0.24s var(--ease-noir);
}
.pf-frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover .pf-frame { border-color: var(--border-med); }
  .pf-card:hover .pf-frame img { transform: scale(1.04); }
}

/* Légende sous le cadre, jamais posée par-dessus la capture. */
.pf-card-name {
  display: block;
  margin-top: 0.95rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.pf-card-name { transition: color 0.24s var(--ease-noir); }

/* En mode carrousel, les captures gardent toutes leurs couleurs : seul
   un filet plus clair signale laquelle est mise en avant, la légende
   passant en gris de texte pour les autres. */
.pf.has-carousel .pf-card[aria-selected="true"] .pf-frame {
  border-color: var(--text-light);
}
.pf.has-carousel .pf-card:not([aria-selected="true"]) .pf-card-name {
  color: var(--text-muted);
}

/* ══ Commandes ═════════════════════════════════════════════════
   Pause à gauche, pagination au centre, tout afficher à droite.
   Les colonnes extrêmes sont à 1fr pour que les points restent
   centrés sur l'écran, pas sur la place qui reste. */
.pf-controls {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.pf-play {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-med);
  border-radius: 999px;
  color: var(--text);
  transition: background 0.2s var(--ease-noir), border-color 0.2s var(--ease-noir),
              transform 0.14s var(--ease-noir);
}
.pf-play:hover { background: var(--khaki-bg); border-color: var(--text); }
.pf-play:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pf-play:active { transform: scale(0.94); }
/* Une seule des deux icônes est montrée : celle de l'action à venir. */
.pf-play .pf-icon-play { display: none; }
.pf-play[data-paused="true"] .pf-icon-pause { display: none; }
.pf-play[data-paused="true"] .pf-icon-play { display: block; }

/* Flèches + points regroupés : un seul bloc centré dans la colonne
   du milieu, pour que les points restent sur l'axe de l'écran. */
.pf-nav-group {
  justify-self: center;
  display: flex; align-items: center; gap: 0.5rem;
}

.pf-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-med);
  border-radius: 999px;
  color: var(--text);
  transition: background 0.2s var(--ease-noir), border-color 0.2s var(--ease-noir),
              transform 0.14s var(--ease-noir);
}
.pf-arrow:hover { background: var(--khaki-bg); border-color: var(--text); }
.pf-arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pf-arrow:active { transform: scale(0.92); }

.pf-dots {
  display: flex; align-items: center; gap: 0.25rem;
}
/* Le point visible fait 6px, la cible en fait 44 de haut. */
.pf-dot {
  position: relative;
  width: 30px; height: 44px;
  background: none;
}
.pf-dot::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-light);
  transition: width 0.2s var(--ease-noir), background 0.2s var(--ease-noir);
}
.pf-dot:hover::before { background: var(--text); }
.pf-dot[aria-current="true"]::before { width: 26px; background: var(--text); }
.pf-dot:focus-visible { outline: 2px solid var(--text); outline-offset: -6px; border-radius: 999px; }

/* En vue dépliée il n'y a plus rien à faire défiler : la pause et la
   pagination disparaissent, seul le bouton de repli reste. */
.pf:not(.has-carousel) .pf-play,
.pf:not(.has-carousel) .pf-nav-group { display: none; }

.pf-all {
  justify-self: end;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.25rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-light);
  transition: color 0.2s var(--ease-noir);
}
.pf-all:hover { color: var(--text); }
.pf-all:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ══ Dossiers ══════════════════════════════════════════════════
   Fermé par défaut (portfolio.js pose [hidden] au chargement) : sans
   sélection, il n'y a rien à cet endroit, pas un bloc vide. Un clic
   sur une capture ouvre son dossier seul ; naviguer ailleurs (flèches,
   points, glisser) le referme. Sans JavaScript, les trois dossiers
   restent visibles à la suite : le contenu reste entièrement lisible. */
.pf-dossiers {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--px) 0;
  /* Choisir un projet fait descendre son dossier à l'écran (portfolio.js) :
     la marge de défilement le cale sous la nav fixe, jamais sous elle. */
  scroll-margin-top: 6rem;
}
.pf-dossiers:not([hidden]) .pf-panel { animation: pf-panel-in 0.34s var(--ease-noir); }
@keyframes pf-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Identité et faits à gauche, récit à droite. La colonne de gauche
   porte des données, pas du remplissage : c'est ce qui justifie de
   la séparer du texte. */
.pf-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* En vue dépliée, un filet sépare les dossiers. */
.pf-panel + .pf-panel {
  border-top: 1px solid var(--border);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pf-panel h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.pf-baseline {
  font-size: 1rem; line-height: 1.75; color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.pf-meta { display: grid; gap: 0.9rem; }
.pf-meta li {
  display: grid; gap: 0.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.pf-meta span {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-light);
}
.pf-meta strong {
  font-size: 0.875rem; font-weight: 600; color: var(--text);
}
.pf-status--wip { color: var(--text-muted); }

.pf-story { max-width: 62ch; }
.pf-story section + section { margin-top: 1.75rem; }
.pf-story h4 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); margin-bottom: 0.45rem;
}
.pf-story p {
  font-size: 0.875rem; line-height: 1.75; color: var(--text-muted);
}

/* Le lien vers le site ouvre le récit, au-dessus du texte : c'est la
   première chose qu'on cherche une fois le dossier ouvert (demande de
   Tom, 2026-09-24). */
.pf-visit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2rem;
  min-height: 44px; padding: 0.7rem 1.6rem;
  border: 1px solid var(--border-med);
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text);
  transition: background 0.2s var(--ease-noir), border-color 0.2s var(--ease-noir);
}
.pf-visit:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.pf-visit:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pf-visit:active { transform: scale(0.98); }

/* ══ Appel final ═══════════════════════════════════════════════ */
.pf-cta {
  border-top: 1px solid var(--border);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
}
.pf-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 0.85rem;
}
.pf-cta p {
  font-size: 1rem; line-height: 1.75; color: var(--text-muted);
  max-width: 46ch; margin: 0 auto 2rem;
}

/* ══ Adaptations ═══════════════════════════════════════════════
   En dessous de 900px, les trois captures ne tiennent plus côte à
   côte : on repasse au calage plein bord d'une seule carte à la fois,
   centrée au scroll-snap, glissable au doigt. */
@media (max-width: 899px) {
  .pf-panel { grid-template-columns: 1fr; gap: 2rem; }
  .pf-rail {
    --pf-card-w: min(82vw, 520px);
    max-width: none;
    margin: 0;
    padding: 0.5rem calc(50% - var(--pf-card-w) / 2) clamp(2rem, 4vw, 2.75rem);
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }
}
@media (max-width: 599px) {
  /* Trois colonnes ne tiennent plus : la pause et le lien encadrent
     le groupe de navigation sur une ligne, sans les décentrer. Les
     flèches cèdent leur place au doigt, seul geste vraiment naturel
     ici : elles reviennent à partir de 600px. */
  /* Les colonnes extrêmes sont à 1fr : sur 375px le lien n'a que
     118px, il faut resserrer pour qu'il tienne sur une ligne. */
  .pf-controls { gap: 0.5rem; }
  .pf-arrow { display: none; }
  .pf-all { font-size: 0.62rem; letter-spacing: 0.1em; }
  .pf-card-name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-frame,
  .pf-frame img,
  .pf-card-name,
  .pf-dot::before { transition: none; }
  .pf-card:hover .pf-frame img { transform: none; }
  .pf-dossiers:not([hidden]) .pf-panel { animation: none; }
}

/* ══ Direction kaki ════════════════════════════════════════════
   L'appel final passe en aplat kaki foncé (blanc-kaki.css) : le filet
   du haut ne sépare plus rien. La piste reprend de l'air sous le
   bas arrondi de l'ouverture. */
.theme-kaki .pf { padding-top: clamp(2.5rem, 5vw, 4rem); }
.theme-kaki .pf-cta { border-top: 0; }