/* Charte Twinprod : bleu du logo, League Spartan (fonte du logo), fond sombre bleuté.
   Source : twinprod.com, `charte/` et `tailwind.config.ts`. */

@font-face {
  font-family: "League Spartan";
  src: url("/fonts/league-spartan.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand-50: #eff8ff;
  --brand-100: #d9edff;
  --brand-300: #8ac9ff;
  --brand-500: #2a9dff;
  --brand-700: #0b6fc4;
  --brand-900: #0a4c86;

  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #0e1116;
  --muted: #5b6676;
  --line: #e1e6ee;
  /* Le bleu du logo n'atteint pas le contraste AA sur blanc : le texte et les boutons
     prennent la nuance 700, le 500 reste aux accents. */
  --accent: var(--brand-700);
  --accent-strong: var(--brand-900);
  --accent-soft: var(--brand-50);
  --on-accent: #ffffff;
  --favorite: #e5484d;
  --error: #c2410c;
  --card-border: #ffffff;
  --stage: #0e1116;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(14 17 22 / 0.06), 0 1px 3px rgb(14 17 22 / 0.05);
  --shadow: 0 2px 6px rgb(14 17 22 / 0.07), 0 14px 34px rgb(14 17 22 / 0.11);
  --shadow-card: 0 1px 2px rgb(14 17 22 / 0.14), 0 6px 16px rgb(14 17 22 / 0.14);
  --font: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #161b22;
    --surface-2: #1d242e;
    --text: #e9eef5;
    --muted: #97a4b6;
    --line: #27303c;
    --accent: var(--brand-300);
    --accent-strong: var(--brand-100);
    --accent-soft: rgb(42 157 255 / 0.12);
    --on-accent: #0e1116;
    --favorite: #ff6b70;
    --error: #fb923c;
    --card-border: #242c37;
    --stage: #07090c;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 6px rgb(0 0 0 / 0.35), 0 14px 34px rgb(0 0 0 / 0.45);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.45);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px / 1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-strong);
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2,
h3 {
  margin: 0;
  line-height: 1.2;
}

.lead {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Intertitre en petites capitales, à la manière de twinprod.com. */
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* En-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand-logo {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
}

.brand-label {
  padding-left: 0.85rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Les deux « o » du logo sont des disques fendus : seule la fente tourne. Périodes premières
   entre elles et sens opposés, comme sur twinprod.com. */
@media (prefers-reduced-motion: no-preference) {
  .brand-logo .o {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: tourne 9s linear infinite;
  }

  .brand-logo .o-com {
    animation-duration: 11s;
    animation-direction: reverse;
  }
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

.session {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 40rem) {
  .session-email,
  .brand-label {
    display: none;
  }
}

main {
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 5rem;
  /* Les cartes ouvertes des piles et de l'éventail ne doivent pas faire défiler la page. */
  overflow-x: clip;
}

main.wide {
  max-width: 100rem;
  margin: 0 auto;
}

.panel {
  max-width: 72rem;
  margin: 0 auto;
}

.panel.narrow {
  max-width: 27rem;
  margin-top: clamp(1rem, 6vh, 4rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel.narrow h1 {
  font-size: 1.8rem;
}

.panel.narrow > p {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

/* Formulaires et boutons */

.stack {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

label {
  display: grid;
  gap: 0.4rem;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 400;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

input:focus,
textarea:focus {
  border-color: var(--brand-500);
  outline: none;
  box-shadow: 0 0 0 4px rgb(42 157 255 / 0.18);
}

input.code {
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}

.button:hover,
button:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.button:active,
button:active {
  transform: translateY(1px);
}

.button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button.ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

.button.ghost:hover {
  border-color: var(--text);
  color: var(--text);
}

.button.small {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

.button.favorite-on {
  background: var(--favorite);
  color: #fff;
}

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: underline;
}

button.link:hover {
  background: none;
  color: var(--error);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.error {
  margin: 0;
  color: var(--error);
}

.aside {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* Pastille de comptage */

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0.1em 0.55em 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: max(0.8rem, 0.42em);
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 0.3em;
}

/* Espaces (plusieurs clients) */

.spaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.spaces li {
  display: grid;
}

.space-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.space-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* Logo client, toujours sur blanc : il a été dessiné pour. */
.client-mark {
  display: grid;
  place-items: center;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.client-mark img {
  display: block;
  width: 8.5rem;
  height: auto;
}

.client-name {
  color: #0e1116;
  font-weight: 700;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 600;
}

.cta::after {
  content: "→";
  transition: transform 0.2s;
}

a:hover .cta::after {
  transform: translateX(4px);
}

/* Cartes de shooting : le logo du client au centre, les portraits en éventail derrière. */

.panel > .eyebrow {
  margin-top: 2.5rem;
}

.shootings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 1.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.shooting-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}

.shooting-card:hover {
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(-3px);
}

.fan {
  position: relative;
  display: block;
  overflow: hidden;
  /* Le logo se dimensionne sur la carte, pas sur l'écran. */
  container-type: inline-size;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(120% 90% at 50% 100%, var(--accent-soft), transparent 70%), var(--surface-2);
}

.fan-card {
  position: absolute;
  bottom: 27%;
  left: 50%;
  width: 19.5%;
  aspect-ratio: 2 / 3;
  margin-left: -9.75%;
  object-fit: cover;
  border: 3px solid var(--card-border);
  border-radius: 8px;
  background: var(--line);
  box-shadow: var(--shadow-card);
  /* Pivot commun loin sous les cartes : les sommets, où sont les visages, s'écartent comme
     une main de cartes, et chaque carte ne recouvre que le bord de sa voisine. */
  transform-origin: 50% 300%;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Rang dans l'éventail = ordre du balisage : impairs à gauche, pairs à droite, du centre vers
   les bords, tous les 10°, et chaque rang passe sous le précédent. Les huit premiers tiennent dans le cadre ; au-delà, les portraits
   débordent, pour montrer que la sélection n'est pas exclusive. */
.fan-1 {
  z-index: 19;
  transform: rotate(-5deg);
}
.fan-2 {
  z-index: 18;
  transform: rotate(5deg);
}
.fan-3 {
  z-index: 17;
  transform: rotate(-15deg);
}
.fan-4 {
  z-index: 16;
  transform: rotate(15deg);
}
.fan-5 {
  z-index: 15;
  transform: rotate(-25deg);
}
.fan-6 {
  z-index: 14;
  transform: rotate(25deg);
}
.fan-7 {
  z-index: 13;
  transform: rotate(-35deg);
}
.fan-8 {
  z-index: 12;
  transform: rotate(35deg);
}
.fan-9 {
  z-index: 11;
  transform: rotate(-45deg);
}
.fan-10 {
  z-index: 10;
  transform: rotate(45deg);
}
.fan-11 {
  z-index: 9;
  transform: rotate(-55deg);
}
.fan-12 {
  z-index: 8;
  transform: rotate(55deg);
}

.shooting-card:hover .fan-1 {
  transform: rotate(-5.6deg) translateY(-3%);
}
.shooting-card:hover .fan-2 {
  transform: rotate(5.6deg) translateY(-3%);
}
.shooting-card:hover .fan-3 {
  transform: rotate(-16.8deg) translateY(-3%);
}
.shooting-card:hover .fan-4 {
  transform: rotate(16.8deg) translateY(-3%);
}
.shooting-card:hover .fan-5 {
  transform: rotate(-28deg) translateY(-3%);
}
.shooting-card:hover .fan-6 {
  transform: rotate(28deg) translateY(-3%);
}
.shooting-card:hover .fan-7 {
  transform: rotate(-39.2deg) translateY(-3%);
}
.shooting-card:hover .fan-8 {
  transform: rotate(39.2deg) translateY(-3%);
}
.shooting-card:hover .fan-9 {
  transform: rotate(-50.4deg) translateY(-3%);
}
.shooting-card:hover .fan-10 {
  transform: rotate(50.4deg) translateY(-3%);
}
.shooting-card:hover .fan-11 {
  transform: rotate(-61.6deg) translateY(-3%);
}
.shooting-card:hover .fan-12 {
  transform: rotate(61.6deg) translateY(-3%);
}

/* Rangée des groupes, sous les portraits et en haut du cadre. Même pivot que les portraits, donc
   des arcs concentriques ; 15° d'écart pour des cartes deux fois plus larges. */
.fan-group {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 30%;
  aspect-ratio: 3 / 2;
  margin-left: -15%;
  object-fit: cover;
  border: 3px solid var(--card-border);
  border-radius: 8px;
  background: var(--line);
  box-shadow: var(--shadow-card);
  transform-origin: 50% 520%;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fan-group-1 {
  z-index: 7;
}
.fan-group-2 {
  z-index: 6;
  transform: rotate(-15deg);
}
.fan-group-3 {
  z-index: 5;
  transform: rotate(15deg);
}
.fan-group-4 {
  z-index: 4;
  transform: rotate(-30deg);
}
.fan-group-5 {
  z-index: 3;
  transform: rotate(30deg);
}
.fan-group-6 {
  z-index: 2;
  transform: rotate(-45deg);
}
.fan-group-7 {
  z-index: 1;
  transform: rotate(45deg);
}

.shooting-card:hover .fan-group-1 {
  transform: translateY(-3%);
}
.shooting-card:hover .fan-group-2 {
  transform: rotate(-16.8deg) translateY(-3%);
}
.shooting-card:hover .fan-group-3 {
  transform: rotate(16.8deg) translateY(-3%);
}
.shooting-card:hover .fan-group-4 {
  transform: rotate(-33.6deg) translateY(-3%);
}
.shooting-card:hover .fan-group-5 {
  transform: rotate(33.6deg) translateY(-3%);
}
.shooting-card:hover .fan-group-6 {
  transform: rotate(-50.4deg) translateY(-3%);
}
.shooting-card:hover .fan-group-7 {
  transform: rotate(50.4deg) translateY(-3%);
}

.fan .client-mark {
  position: absolute;
  bottom: 6%;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
}

.fan .client-mark {
  padding: min(0.9rem, 2.4cqi) min(1.1rem, 3cqi);
}

.fan .client-mark img {
  width: min(7.5rem, 22cqi);
}

.shooting-body {
  display: grid;
  gap: 0.25rem;
  padding: 1.15rem 1.4rem 1.35rem;
}

.shooting-title {
  font-size: 1.35rem;
  font-weight: 700;
}

.shooting-body .cta {
  margin-top: 0.6rem;
}

/* Page d'un shooting */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--accent);
}

.crumbs a + a::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: 2rem;
}

.page-head h1 {
  margin-top: 0.4rem;
}

.download-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1rem 1.1rem 1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.download-panel[hidden] {
  display: none;
}

.download-heading {
  font-size: 1.05rem;
  font-weight: 700;
}

.download-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.download-options.stacked {
  display: grid;
  margin-top: 0.75rem;
}

.download-option {
  flex: 1 1 13rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.65rem 1.1rem 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  font-weight: 400;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.download-option .icon {
  grid-row: span 2;
  color: var(--accent);
}

.download-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.download-option.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.download-option.primary .icon,
.download-option.primary .download-detail {
  color: inherit;
}

.download-option.primary:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.download-option:disabled {
  cursor: progress;
  opacity: 0.6;
}

.download-name {
  font-weight: 700;
}

.download-detail {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Mot du photographe : « dans la marge, » à la suite du texte. Replié (classe posée sur <html>
   par prefs.js ou photos.js), il ne reste qu'un bouton dans la barre d'outils. */

.note {
  position: relative;
  margin: 0 0 2rem;
  padding: 0.1rem 3rem 0 3.4rem;
}

.note blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.note blockquote p::before,
.note blockquote p::after {
  color: var(--accent);
  font-weight: 700;
}

.note blockquote p::before {
  content: "«";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3.25rem;
  line-height: 1;
}

.note blockquote p::after {
  content: "»";
  margin-left: 0.35rem;
  font-size: 2.4em;
  line-height: 0;
  vertical-align: -0.2em;
}

.note figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-weight: 600;
}

.note-fold {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.note-fold:hover {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}

.note-fold[hidden] {
  display: none;
}

.note-fold .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.note-unfold {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.note-unfold:hover {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent);
}

.note-reduite .note {
  display: none;
}

.note-reduite .note-unfold {
  display: grid;
}

.note figcaption::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--accent);
}

@media (max-width: 40rem) {
  .note {
    padding-left: 2.6rem;
  }

  .note blockquote p::before {
    font-size: 2.6rem;
  }
}

/* Filtres en contrôles segmentés */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 100%;
}

.toolbar-end {
  display: flex;
  gap: 0.5rem;
}

.toolbar .button {
  height: 2.75rem;
  padding-block: 0;
}

.button[hidden] {
  display: none;
}

.segments {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.segment {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem 0.35rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.segment:hover {
  color: var(--text);
}

.segment[aria-current] {
  background: var(--accent);
  color: var(--on-accent);
}

.segment-count {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.75;
}

.section {
  margin-top: 3rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.grid-title {
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
}

.grid-title a {
  color: var(--text);
  text-decoration: none;
}

.grid-title a:hover {
  color: var(--accent);
}

.empty {
  margin-top: 3rem;
  color: var(--muted);
  text-align: center;
}

/* Piles : un paquet de trois cartes déjà ouvert, qui s'écarte au survol. */

/* Quatre colonnes au plus. Une pile paysage en occupe deux, avec une carte calculée pour avoir
   la hauteur d'une pile portrait : les deux formats se partagent une ligne, et `dense` comble
   les trous en avançant une pile portrait si besoin. */
.piles {
  --pile-gap: 3rem;
  /* Largeur d'une carte portrait, en part de sa colonne. */
  --portrait-share: 0.66;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: start;
  gap: 4.5rem var(--pile-gap);
  margin: 0;
  padding: 1rem 1.5rem 0;
  list-style: none;
}

.piles .wide {
  grid-column: span 2;
}

@media (max-width: 64rem) {
  .piles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* La carte n'occupe qu'une partie de la colonne : les deux cartes de dessous ont la place de
   s'ouvrir sans chevaucher la pile voisine. */
.pile {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.pile:hover {
  color: var(--text);
}

.pile-cards {
  position: relative;
  display: block;
  width: calc(var(--portrait-share) * 100%);
  margin-bottom: 1.1rem;
  aspect-ratio: 2 / 3;
}

/* Hauteur d'une carte portrait (part × colonne × 3/2), en 3:2 sur deux colonnes moins l'écart. */
.pile.ratio-paysage .pile-cards {
  width: calc((100% - var(--pile-gap)) / 2 * var(--portrait-share) * 2.25);
  aspect-ratio: 3 / 2;
}

.pile-cards img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 4px solid var(--card-border);
  border-radius: 10px;
  background: var(--line);
  box-shadow: var(--shadow-card);
  transform-origin: 50% 90%;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pile-cards img:nth-child(1) {
  z-index: 3;
}

.pile-cards img:nth-child(2) {
  z-index: 2;
  transform: rotate(-11deg) translateX(-19%);
}

.pile-cards img:nth-child(3) {
  z-index: 1;
  transform: rotate(11deg) translateX(19%);
}

.pile:hover .pile-cards img:nth-child(1),
.pile:focus-visible .pile-cards img:nth-child(1) {
  transform: translateY(-4%) scale(1.02);
}

.pile:hover .pile-cards img:nth-child(2),
.pile:focus-visible .pile-cards img:nth-child(2) {
  transform: rotate(-18deg) translateX(-34%);
}

.pile:hover .pile-cards img:nth-child(3),
.pile:focus-visible .pile-cards img:nth-child(3) {
  transform: rotate(18deg) translateX(34%);
}

/* Une carte paysage est plus large : le même pourcentage l'écarterait sur la pile voisine. */
.pile.ratio-paysage .pile-cards img:nth-child(2) {
  transform: rotate(-7deg) translateX(-11%);
}

.pile.ratio-paysage .pile-cards img:nth-child(3) {
  transform: rotate(7deg) translateX(11%);
}

.pile.ratio-paysage:hover .pile-cards img:nth-child(2),
.pile.ratio-paysage:focus-visible .pile-cards img:nth-child(2) {
  transform: rotate(-12deg) translateX(-20%);
}

.pile.ratio-paysage:hover .pile-cards img:nth-child(3),
.pile.ratio-paysage:focus-visible .pile-cards img:nth-child(3) {
  transform: rotate(12deg) translateX(20%);
}

.pile-count {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  z-index: 4;
  height: 2.1rem;
  min-width: 2.1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  vertical-align: baseline;
  box-shadow: 0 0 0 3px var(--bg);
}

.pile-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Deux piles par ligne sur téléphone : une seule par écran ferait défiler sans fin. */
@media (max-width: 40rem) {
  .piles {
    --pile-gap: 1.25rem;
    --portrait-share: 0.74;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
    padding-inline: 0.75rem;
  }

  .pile-title {
    font-size: 0.95rem;
  }

  .pile-count {
    top: -0.55rem;
    right: -0.55rem;
    height: 1.75rem;
    min-width: 1.75rem;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pile-cards img,
  .fan-card,
  .fan-group {
    transition: none;
  }
}

/* Retours : sélection, favoris, commentaires */

.feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem 0.15rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.chip-icon .icon {
  width: 0.95em;
  height: 0.95em;
}

.chip-icon.selected {
  background: var(--accent-soft);
  color: var(--accent);
}

.chip-icon.favorite {
  color: var(--favorite);
}

.meta .chip-icon {
  margin-left: 0.6rem;
}

/* Grille justifiée : chaque photo croît en proportion de son format, si bien que toute la ligne
   garde la même hauteur et remplit la largeur sans rogner. Le format arrive par une classe
   `ar-k` (rapport largeur/hauteur arrondi à k/40, de 0,5 à 2,5), la CSP interdisant les styles
   en ligne. Les photos de la dernière ligne ne s'étirent pas grâce au pseudo-élément final. */

.photos {
  --row: clamp(9rem, 19vw, 17rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photos::after {
  content: "";
  flex-grow: 1000000;
}

.photos li {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
}

/* Généré : 40 = dénominateur commun des formats. */
.photos .ar-20 {
  flex-grow: 20;
  flex-basis: calc(var(--row) * 20 / 40);
  aspect-ratio: 20 / 40;
}
.photos .ar-21 {
  flex-grow: 21;
  flex-basis: calc(var(--row) * 21 / 40);
  aspect-ratio: 21 / 40;
}
.photos .ar-22 {
  flex-grow: 22;
  flex-basis: calc(var(--row) * 22 / 40);
  aspect-ratio: 22 / 40;
}
.photos .ar-23 {
  flex-grow: 23;
  flex-basis: calc(var(--row) * 23 / 40);
  aspect-ratio: 23 / 40;
}
.photos .ar-24 {
  flex-grow: 24;
  flex-basis: calc(var(--row) * 24 / 40);
  aspect-ratio: 24 / 40;
}
.photos .ar-25 {
  flex-grow: 25;
  flex-basis: calc(var(--row) * 25 / 40);
  aspect-ratio: 25 / 40;
}
.photos .ar-26 {
  flex-grow: 26;
  flex-basis: calc(var(--row) * 26 / 40);
  aspect-ratio: 26 / 40;
}
.photos .ar-27 {
  flex-grow: 27;
  flex-basis: calc(var(--row) * 27 / 40);
  aspect-ratio: 27 / 40;
}
.photos .ar-28 {
  flex-grow: 28;
  flex-basis: calc(var(--row) * 28 / 40);
  aspect-ratio: 28 / 40;
}
.photos .ar-29 {
  flex-grow: 29;
  flex-basis: calc(var(--row) * 29 / 40);
  aspect-ratio: 29 / 40;
}
.photos .ar-30 {
  flex-grow: 30;
  flex-basis: calc(var(--row) * 30 / 40);
  aspect-ratio: 30 / 40;
}
.photos .ar-31 {
  flex-grow: 31;
  flex-basis: calc(var(--row) * 31 / 40);
  aspect-ratio: 31 / 40;
}
.photos .ar-32 {
  flex-grow: 32;
  flex-basis: calc(var(--row) * 32 / 40);
  aspect-ratio: 32 / 40;
}
.photos .ar-33 {
  flex-grow: 33;
  flex-basis: calc(var(--row) * 33 / 40);
  aspect-ratio: 33 / 40;
}
.photos .ar-34 {
  flex-grow: 34;
  flex-basis: calc(var(--row) * 34 / 40);
  aspect-ratio: 34 / 40;
}
.photos .ar-35 {
  flex-grow: 35;
  flex-basis: calc(var(--row) * 35 / 40);
  aspect-ratio: 35 / 40;
}
.photos .ar-36 {
  flex-grow: 36;
  flex-basis: calc(var(--row) * 36 / 40);
  aspect-ratio: 36 / 40;
}
.photos .ar-37 {
  flex-grow: 37;
  flex-basis: calc(var(--row) * 37 / 40);
  aspect-ratio: 37 / 40;
}
.photos .ar-38 {
  flex-grow: 38;
  flex-basis: calc(var(--row) * 38 / 40);
  aspect-ratio: 38 / 40;
}
.photos .ar-39 {
  flex-grow: 39;
  flex-basis: calc(var(--row) * 39 / 40);
  aspect-ratio: 39 / 40;
}
.photos .ar-40 {
  flex-grow: 40;
  flex-basis: calc(var(--row) * 40 / 40);
  aspect-ratio: 40 / 40;
}
.photos .ar-41 {
  flex-grow: 41;
  flex-basis: calc(var(--row) * 41 / 40);
  aspect-ratio: 41 / 40;
}
.photos .ar-42 {
  flex-grow: 42;
  flex-basis: calc(var(--row) * 42 / 40);
  aspect-ratio: 42 / 40;
}
.photos .ar-43 {
  flex-grow: 43;
  flex-basis: calc(var(--row) * 43 / 40);
  aspect-ratio: 43 / 40;
}
.photos .ar-44 {
  flex-grow: 44;
  flex-basis: calc(var(--row) * 44 / 40);
  aspect-ratio: 44 / 40;
}
.photos .ar-45 {
  flex-grow: 45;
  flex-basis: calc(var(--row) * 45 / 40);
  aspect-ratio: 45 / 40;
}
.photos .ar-46 {
  flex-grow: 46;
  flex-basis: calc(var(--row) * 46 / 40);
  aspect-ratio: 46 / 40;
}
.photos .ar-47 {
  flex-grow: 47;
  flex-basis: calc(var(--row) * 47 / 40);
  aspect-ratio: 47 / 40;
}
.photos .ar-48 {
  flex-grow: 48;
  flex-basis: calc(var(--row) * 48 / 40);
  aspect-ratio: 48 / 40;
}
.photos .ar-49 {
  flex-grow: 49;
  flex-basis: calc(var(--row) * 49 / 40);
  aspect-ratio: 49 / 40;
}
.photos .ar-50 {
  flex-grow: 50;
  flex-basis: calc(var(--row) * 50 / 40);
  aspect-ratio: 50 / 40;
}
.photos .ar-51 {
  flex-grow: 51;
  flex-basis: calc(var(--row) * 51 / 40);
  aspect-ratio: 51 / 40;
}
.photos .ar-52 {
  flex-grow: 52;
  flex-basis: calc(var(--row) * 52 / 40);
  aspect-ratio: 52 / 40;
}
.photos .ar-53 {
  flex-grow: 53;
  flex-basis: calc(var(--row) * 53 / 40);
  aspect-ratio: 53 / 40;
}
.photos .ar-54 {
  flex-grow: 54;
  flex-basis: calc(var(--row) * 54 / 40);
  aspect-ratio: 54 / 40;
}
.photos .ar-55 {
  flex-grow: 55;
  flex-basis: calc(var(--row) * 55 / 40);
  aspect-ratio: 55 / 40;
}
.photos .ar-56 {
  flex-grow: 56;
  flex-basis: calc(var(--row) * 56 / 40);
  aspect-ratio: 56 / 40;
}
.photos .ar-57 {
  flex-grow: 57;
  flex-basis: calc(var(--row) * 57 / 40);
  aspect-ratio: 57 / 40;
}
.photos .ar-58 {
  flex-grow: 58;
  flex-basis: calc(var(--row) * 58 / 40);
  aspect-ratio: 58 / 40;
}
.photos .ar-59 {
  flex-grow: 59;
  flex-basis: calc(var(--row) * 59 / 40);
  aspect-ratio: 59 / 40;
}
.photos .ar-60 {
  flex-grow: 60;
  flex-basis: calc(var(--row) * 60 / 40);
  aspect-ratio: 60 / 40;
}
.photos .ar-61 {
  flex-grow: 61;
  flex-basis: calc(var(--row) * 61 / 40);
  aspect-ratio: 61 / 40;
}
.photos .ar-62 {
  flex-grow: 62;
  flex-basis: calc(var(--row) * 62 / 40);
  aspect-ratio: 62 / 40;
}
.photos .ar-63 {
  flex-grow: 63;
  flex-basis: calc(var(--row) * 63 / 40);
  aspect-ratio: 63 / 40;
}
.photos .ar-64 {
  flex-grow: 64;
  flex-basis: calc(var(--row) * 64 / 40);
  aspect-ratio: 64 / 40;
}
.photos .ar-65 {
  flex-grow: 65;
  flex-basis: calc(var(--row) * 65 / 40);
  aspect-ratio: 65 / 40;
}
.photos .ar-66 {
  flex-grow: 66;
  flex-basis: calc(var(--row) * 66 / 40);
  aspect-ratio: 66 / 40;
}
.photos .ar-67 {
  flex-grow: 67;
  flex-basis: calc(var(--row) * 67 / 40);
  aspect-ratio: 67 / 40;
}
.photos .ar-68 {
  flex-grow: 68;
  flex-basis: calc(var(--row) * 68 / 40);
  aspect-ratio: 68 / 40;
}
.photos .ar-69 {
  flex-grow: 69;
  flex-basis: calc(var(--row) * 69 / 40);
  aspect-ratio: 69 / 40;
}
.photos .ar-70 {
  flex-grow: 70;
  flex-basis: calc(var(--row) * 70 / 40);
  aspect-ratio: 70 / 40;
}
.photos .ar-71 {
  flex-grow: 71;
  flex-basis: calc(var(--row) * 71 / 40);
  aspect-ratio: 71 / 40;
}
.photos .ar-72 {
  flex-grow: 72;
  flex-basis: calc(var(--row) * 72 / 40);
  aspect-ratio: 72 / 40;
}
.photos .ar-73 {
  flex-grow: 73;
  flex-basis: calc(var(--row) * 73 / 40);
  aspect-ratio: 73 / 40;
}
.photos .ar-74 {
  flex-grow: 74;
  flex-basis: calc(var(--row) * 74 / 40);
  aspect-ratio: 74 / 40;
}
.photos .ar-75 {
  flex-grow: 75;
  flex-basis: calc(var(--row) * 75 / 40);
  aspect-ratio: 75 / 40;
}
.photos .ar-76 {
  flex-grow: 76;
  flex-basis: calc(var(--row) * 76 / 40);
  aspect-ratio: 76 / 40;
}
.photos .ar-77 {
  flex-grow: 77;
  flex-basis: calc(var(--row) * 77 / 40);
  aspect-ratio: 77 / 40;
}
.photos .ar-78 {
  flex-grow: 78;
  flex-basis: calc(var(--row) * 78 / 40);
  aspect-ratio: 78 / 40;
}
.photos .ar-79 {
  flex-grow: 79;
  flex-basis: calc(var(--row) * 79 / 40);
  aspect-ratio: 79 / 40;
}
.photos .ar-80 {
  flex-grow: 80;
  flex-basis: calc(var(--row) * 80 / 40);
  aspect-ratio: 80 / 40;
}
.photos .ar-81 {
  flex-grow: 81;
  flex-basis: calc(var(--row) * 81 / 40);
  aspect-ratio: 81 / 40;
}
.photos .ar-82 {
  flex-grow: 82;
  flex-basis: calc(var(--row) * 82 / 40);
  aspect-ratio: 82 / 40;
}
.photos .ar-83 {
  flex-grow: 83;
  flex-basis: calc(var(--row) * 83 / 40);
  aspect-ratio: 83 / 40;
}
.photos .ar-84 {
  flex-grow: 84;
  flex-basis: calc(var(--row) * 84 / 40);
  aspect-ratio: 84 / 40;
}
.photos .ar-85 {
  flex-grow: 85;
  flex-basis: calc(var(--row) * 85 / 40);
  aspect-ratio: 85 / 40;
}
.photos .ar-86 {
  flex-grow: 86;
  flex-basis: calc(var(--row) * 86 / 40);
  aspect-ratio: 86 / 40;
}
.photos .ar-87 {
  flex-grow: 87;
  flex-basis: calc(var(--row) * 87 / 40);
  aspect-ratio: 87 / 40;
}
.photos .ar-88 {
  flex-grow: 88;
  flex-basis: calc(var(--row) * 88 / 40);
  aspect-ratio: 88 / 40;
}
.photos .ar-89 {
  flex-grow: 89;
  flex-basis: calc(var(--row) * 89 / 40);
  aspect-ratio: 89 / 40;
}
.photos .ar-90 {
  flex-grow: 90;
  flex-basis: calc(var(--row) * 90 / 40);
  aspect-ratio: 90 / 40;
}
.photos .ar-91 {
  flex-grow: 91;
  flex-basis: calc(var(--row) * 91 / 40);
  aspect-ratio: 91 / 40;
}
.photos .ar-92 {
  flex-grow: 92;
  flex-basis: calc(var(--row) * 92 / 40);
  aspect-ratio: 92 / 40;
}
.photos .ar-93 {
  flex-grow: 93;
  flex-basis: calc(var(--row) * 93 / 40);
  aspect-ratio: 93 / 40;
}
.photos .ar-94 {
  flex-grow: 94;
  flex-basis: calc(var(--row) * 94 / 40);
  aspect-ratio: 94 / 40;
}
.photos .ar-95 {
  flex-grow: 95;
  flex-basis: calc(var(--row) * 95 / 40);
  aspect-ratio: 95 / 40;
}
.photos .ar-96 {
  flex-grow: 96;
  flex-basis: calc(var(--row) * 96 / 40);
  aspect-ratio: 96 / 40;
}
.photos .ar-97 {
  flex-grow: 97;
  flex-basis: calc(var(--row) * 97 / 40);
  aspect-ratio: 97 / 40;
}
.photos .ar-98 {
  flex-grow: 98;
  flex-basis: calc(var(--row) * 98 / 40);
  aspect-ratio: 98 / 40;
}
.photos .ar-99 {
  flex-grow: 99;
  flex-basis: calc(var(--row) * 99 / 40);
  aspect-ratio: 99 / 40;
}
.photos .ar-100 {
  flex-grow: 100;
  flex-basis: calc(var(--row) * 100 / 40);
  aspect-ratio: 100 / 40;
}

.photos a {
  display: block;
  height: 100%;
}

.photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background: var(--line);
  transition: filter 0.2s;
}

.photos a:hover img {
  filter: brightness(1.06);
}

.photos .feedback {
  position: absolute;
  inset: auto 0.55rem 0.55rem;
}

.photos .chip-icon,
.slideshow .chip-icon {
  background: rgb(14 17 22 / 0.62);
  color: #fff;
  backdrop-filter: blur(6px);
}

.photos .chip-icon.selected {
  background: var(--brand-500);
  color: #fff;
}

.photos .chip-icon.favorite,
.slideshow .chip-icon.favorite {
  color: #fff;
}

.photos .chip-icon.favorite.mine,
.slideshow .chip-icon.favorite.mine {
  background: var(--favorite);
}

/* Photo */

.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 64rem) {
  .viewer {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--stage);
}

.stage-photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - 17rem);
  border-radius: 6px;
}

.stage-nav,
.stage-fullscreen {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  backdrop-filter: blur(8px);
  opacity: 0.75;
  transition:
    opacity 0.2s,
    background-color 0.2s;
}

.stage-nav:hover,
.stage-fullscreen:hover {
  background: rgb(255 255 255 / 0.28);
  color: #fff;
  opacity: 1;
}

.stage-nav .icon,
.stage-fullscreen .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.stage-nav {
  top: 50%;
  margin-top: -1.45rem;
}

.stage-nav.previous {
  left: 0.9rem;
}

.stage-nav.next {
  right: 0.9rem;
}

.stage-fullscreen {
  top: 0.9rem;
  right: 0.9rem;
}

.stage-fullscreen[hidden] {
  display: none;
}

.stage-position {
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  padding: 0.3rem 0.75rem 0.2rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.stage:fullscreen {
  padding: 0;
  border-radius: 0;
  background: #000;
}

.stage:fullscreen .stage-photo {
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

.stage-nav[hidden] {
  display: none;
}

.stage:fullscreen .stage-fullscreen {
  display: none;
}

/* Diaporama : la page du shooting en plein écran, photo après photo. La barre de progression
   est la minuterie (voir photos.js), d'où sa durée : le temps passé sur chaque photo. */

.slideshow-open {
  overflow: hidden;
}

.slideshow {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
}

.slideshow[hidden] {
  display: none;
}

.slideshow:focus {
  outline: none;
}

.slideshow.idle {
  cursor: none;
}

.slideshow-photo {
  display: block;
  width: auto;
  max-width: 100vw;
  height: auto;
  max-height: 100dvh;
  opacity: 0;
}

.slideshow-photo.shown {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .slideshow-photo.shown {
    transition: opacity 0.45s;
  }
}

.slideshow-controls {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  gap: 0.5rem;
}

.slideshow-button {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  backdrop-filter: blur(8px);
}

.slideshow-button:hover {
  background: rgb(255 255 255 / 0.28);
  color: #fff;
}

.slideshow-button .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.slideshow-button [hidden] {
  display: none;
}

.slideshow .stage-nav,
.slideshow-controls {
  transition: opacity 0.3s;
}

/* Sans souris, rien ne ferait revenir les commandes : elles restent affichées. */
@media (hover: hover) {
  .slideshow.idle .stage-nav,
  .slideshow.idle .slideshow-controls {
    opacity: 0;
  }
}

.slideshow-info {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 3rem clamp(1rem, 3vw, 2rem) 1.2rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
}

.slideshow-caption {
  color: #fff;
  text-decoration: none;
}

.slideshow-caption:hover {
  color: #fff;
  text-decoration: underline;
}

.slideshow-caption span {
  margin-left: 0.6rem;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.9rem;
}

.slideshow .chip-icon[hidden] {
  display: none;
}

.slideshow-position {
  margin-left: auto;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.85rem;
  font-weight: 600;
}

.slideshow-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: left;
}

.slideshow-progress.run {
  animation: slideshow-progress 5s linear forwards;
}

.slideshow.paused .slideshow-progress {
  animation-play-state: paused;
}

@keyframes slideshow-progress {
  to {
    transform: scaleX(1);
  }
}

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.keys[hidden] {
  display: none;
}

/* Sans clavier physique, les raccourcis ne servent à rien. */
@media (hover: none) {
  .keys {
    display: none;
  }
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.15em 0.45em 0.05em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.viewer-side h1 {
  margin-top: 0.4rem;
  font-size: 1.7rem;
}

.viewer-side > .meta {
  margin-top: 0.3rem;
}

.viewer-side > .eyebrow:not(:first-child) {
  margin-top: 2.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0.75rem;
}

.comments {
  display: grid;
  gap: 0.75rem;
  margin: 0.9rem 0 1rem;
  padding: 0;
  list-style: none;
}

.comment {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.comment.from-twinprod {
  background: var(--accent-soft);
  box-shadow: none;
}

.comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.9rem;
}

.comment-head time {
  color: var(--muted);
  font-size: 0.8rem;
}

.comment-body {
  margin: 0.25rem 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.viewer-side .stack {
  margin-top: 0.9rem;
}

.viewer-side .stack .button {
  justify-self: start;
}