/* ============================================================
   KARAI — pages de série photo (chargé uniquement sur ces pages)
   ============================================================ */
/* ── NAV ── */
#mainNav {
  background: var(--sand);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  justify-content: flex-end;
  gap: 3rem;
}
#mainNav .nav-logo { color: var(--ink); margin-right: auto; }
#mainNav .nav-links a { color: var(--ink); }
#mainNav .nav-links a:hover { color: var(--gold); }
#mainNav.scrolled {
  background: var(--sand); color: var(--ink);
  border-bottom: 1px solid var(--border);
}
#mainNav.scrolled .nav-logo,
#mainNav.scrolled .nav-links a { color: var(--ink); }

/* ── LAYOUT ── */
body { overflow: hidden; background: var(--sand); }

.series-outer {
  position: fixed;
  top: 62px; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

.series-rail-outer {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

/* ── PANNEAU TEXTE ── */
.series-panel {
  width: 480px;
  flex-shrink: 0;
  height: 100%;
  background: var(--sand);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 4rem 3rem 4rem 3.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.series-panel::-webkit-scrollbar { display: none; }

.series-panel-scrollbar {
  position: fixed;
  top: 62px; left: 478px;
  width: 2px; bottom: 0;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  z-index: 20; pointer-events: none;
}
.series-panel-scrollbar-thumb {
  position: absolute;
  top: 0; left: 0; width: 100%;
  background: var(--gold); opacity: 0.6;
  border-radius: 1px; min-height: 24px;
}

.series-panel-label { display: block; margin-bottom: 2rem; }
.series-panel-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.8rem); font-weight: var(--w-serif); line-height: 1.05;
  margin-bottom: 0.4rem; color: var(--ink);
}
.series-panel-title em { color: var(--c-accent); }
.series-panel-location {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; font-weight: var(--w-serif);
  color: var(--warm-gray); margin-bottom: 2.5rem;
}
.series-panel-meta {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.series-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.series-meta-row span {
  font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--warm-gray);
}
.series-meta-row strong { font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.series-panel-desc p {
  font-size: 1rem; color: var(--warm-gray); line-height: 1.9; margin-bottom: 1rem; text-align: justify;
}
.series-panel-desc p:last-child { margin-bottom: 0; }

.series-counter {
  margin-top: auto; padding-top: 2rem;
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-gray);
}
.series-counter-num {
  font-size: 0.51rem; font-weight: 300; color: var(--ink); font-family: var(--font-serif); font-weight: var(--w-serif);
}

/* ── ZONE PHOTOS ── */
.series-photos {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2.5rem;
  padding: 2rem 3rem;
  background: var(--sand);
  flex-shrink: 0;
}

.series-slide {
  height: calc(100% - 2rem);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.series-slide--landscape { aspect-ratio: 3/2; }
.series-slide--portrait  { aspect-ratio: 2/3; }

.series-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.series-slide:hover img { transform: scale(1.03); }

.series-slide-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1.8rem 1.5rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg-dark) 65%, transparent) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.series-slide:hover .series-slide-caption { opacity: 1; }
.series-slide-caption span {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.5rem; color: var(--c-on-dark); line-height: 1.5; font-weight: var(--w-serif);
}
.series-slide-num {
  position: absolute; top: 1rem; right: 1.2rem;
  font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-on-dark) 40%, transparent);
}

/* ── SLIDE FINALE ── */
.series-slide--end {
  height: calc(100% - 2rem); width: 360px;
  background: var(--c-bg-dark);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 3rem; cursor: default; flex-shrink: 0;
}
.series-end-label {
  font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-on-dark) 40%, transparent); display: block; margin-bottom: 1.5rem;
}
.series-end-region {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-surtitle); display: block; margin-bottom: 0.6rem;
}
.series-end-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: var(--w-serif); line-height: 1.1;
  color: var(--white); margin-bottom: 2.5rem;
}
.series-end-btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  padding: 0.9rem 1.6rem; border: 1px solid color-mix(in srgb, var(--c-on-dark) 30%, transparent);
  transition: all 0.3s ease;
}
.series-end-btn:hover { background: var(--white); color: var(--ink); }
.series-end-btn::after { content: '→'; font-size: 0.9rem; }

/* ── SCROLLBAR DORÉE ── */
.series-scrollbar {
  position: fixed; bottom: 1.5rem;
  left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: color-mix(in srgb, var(--c-accent) 20%, transparent); z-index: 50;
}
.series-scrollbar-thumb {
  position: absolute; top: 0; left: 0;
  height: 100%; background: var(--gold);
}

/* ── LIGHTBOX ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, var(--c-bg-dark) 97%, transparent); backdrop-filter: blur(6px);
  flex-direction: column;
}
.lightbox.open { display: flex; }

/* Top bar: counter centred, close button pinned right */
.lightbox-topbar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem 2rem;
  position: relative;
}
.lightbox-counter {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--c-on-dark) 30%, transparent);
}
.lightbox-close {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--c-on-dark); transition: color 0.2s; padding: 0.5rem;
}
.lightbox-close:hover { color: var(--white); }

/* Middle row: arrows + image, fills remaining space */
.lightbox-middle {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; /* let flex shrink below content size */
  gap: 0;
}
.lightbox-prev, .lightbox-next {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: color-mix(in srgb, var(--c-on-dark) 35%, transparent); transition: color 0.2s;
  padding: 1rem 1.5rem; align-self: stretch;
  display: flex; align-items: center;
}
.lightbox-prev:hover, .lightbox-next:hover { color: var(--white); }
.lightbox-inner {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block; transition: opacity 0.25s;
}
.lightbox-img.loading { opacity: 0; }

/* Bottom: caption + hint */
.lightbox-bottom {
  flex-shrink: 0;
  height: 4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 2rem; text-align: center;
}
.lightbox-caption {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.1rem; color: color-mix(in srgb, var(--c-on-dark) 45%, transparent);
  max-width: 70ch; font-weight: var(--w-serif);
}


/* ── MOBILE ── */
@media (max-width: 768px) {
  body { overflow: auto; }
  .series-outer { position: static; margin-top: 56px; overflow: visible; }
  .series-rail-outer { flex-direction: column; height: auto; transform: none !important; }
  .series-panel { width: 100%; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--border); padding: 3rem 2rem; }
  .series-panel-scrollbar { display: none; }
  .series-photos { flex-direction: row; height: 70vw; overflow-x: auto; overflow-y: hidden; padding: 1.5rem; gap: 1.2rem; scrollbar-width: none; }
  .series-photos::-webkit-scrollbar { display: none; }
  .series-slide { height: 100%; }
  .series-slide--end { width: 220px; height: 100%; padding: 2rem; }
  .series-scrollbar { display: none; }
  /* menu : même comportement que le reste du site (liens masqués et bouton « Menu » jusqu'à 600 px, voir style.css) */
}

/* Lien actif du menu sur les pages de série */
#mainNav .nav-links a.is-active,
#mainNav.scrolled .nav-links a.is-active { color: var(--gold); }

/* ════ V13 : fond beige clair et typographie du site ════ */
body.series-page, .series-panel, .series-photos { background: var(--c-bg); }
#mainNav, #mainNav.scrolled { background: var(--c-bg); border-bottom: 1px solid var(--border); }

.series-panel-label { margin-bottom: 1.6rem; }
.series-panel-title { font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1.1; color: var(--c-title); }
.series-panel-location {
  font-family: var(--font-sans); font-style: normal; font-weight: 400;
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--c-text); opacity: 0.7; margin-top: 0.8rem;
}
.series-meta-row span { font-size: 0.65rem; letter-spacing: 0.22em; color: var(--c-text); opacity: 0.7; }
.series-meta-row strong { font-family: var(--font-sans); font-weight: 400; font-size: 0.92rem; color: var(--c-text); }
.series-panel-desc p { font-family: var(--font-sans); font-weight: 400; font-size: 0.95rem; line-height: 1.85; color: var(--c-text); text-align: left; }
.series-slide-num { font-family: var(--font-sans); font-size: 0.6rem; }
.series-slide { border-radius: var(--h-r, 14px); }

/* slide finale : carte arrondie, bouton en pilule */
.series-slide--end { border-radius: var(--h-r, 14px); }
.series-end-label, .series-end-next { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; }
.series-end-next { color: color-mix(in srgb, var(--c-on-dark) 60%, transparent); display: block; margin-bottom: 1.4rem; }
.series-end-label { margin-bottom: 0.6rem; }
.series-end-title { color: var(--c-on-dark); }
.series-end-btn { border-radius: 999px; font-family: var(--font-sans); padding: 0.95rem 1.8rem; }
.series-end-btn:hover { background: var(--c-on-dark); color: var(--c-title); }

/* titre de la photo au survol */
.series-slide-caption { padding: 4rem 1.8rem 1.6rem; }
.series-slide-caption span { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.35; font-style: normal; color: var(--c-on-dark); }

/* Auteur de la série (« by: » dans la fiche), sous le pays */
.series-panel-location:has(+ .series-panel-by) { margin-bottom: 0.5rem; }
.series-panel-by { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-serif);
  font-size: 0.85rem; letter-spacing: 0; text-transform: none;   /* serif italique, à hauteur visuelle du pays (en majuscules) */
  color: var(--c-title); margin-bottom: 2.5rem; }

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : pages des séries
   Ordre : titre et infos (Year, Photographs, Subject), puis les photos, puis le texte explicatif.
   Le panneau texte « s'efface » pour que ses éléments se rangent avec les photos.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .series-panel { display: contents; }
  .series-panel > * { margin-left: 1.5rem; margin-right: 1.5rem; }
  .series-panel-label { display: block; padding-top: 2.5rem; }
  .series-panel-meta { margin-bottom: .5rem; }
  .series-photos { order: 1; }
  .series-panel-desc { order: 2; margin-top: 0; padding: 2.2rem 0 3rem; border-top: 1px solid var(--border); }
}

/* Photos protégées : pas d'appui long « Enregistrer dans Photos », pas de glisser-déposer, pas de sélection */
.series-slide img, .lightbox-img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Indication « Swipe to browse · Tap a photo to enlarge » : téléphone uniquement, juste au-dessus des photos */
.series-hint { display: none; }
@media (max-width: 600px) {
  /* le texte passe à la ligne au niveau du point si l'écran est trop étroit, rien n'est coupé */
  .series-hint { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; row-gap: .2rem; margin-top: 1.4rem; margin-bottom: 0; font-size: .6rem; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--c-surtitle); white-space: nowrap; }
  .series-hint svg { flex: none; margin-right: .1rem; }
}

/* Agrandissement sur téléphone : la photo occupe toute la largeur,
   les flèches (plus petites) passent sous la photo, côte à côte */
@media (max-width: 600px) {
  .lightbox-topbar { padding: .9rem 1rem; }
  .lightbox-close { right: .6rem; }
  .lightbox-middle { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox-inner { grid-column: 1 / -1; grid-row: 1; height: 100%; min-height: 0; }
  .lightbox-prev, .lightbox-next { grid-row: 2; align-self: center; padding: .9rem 1.6rem; color: color-mix(in srgb, var(--c-on-dark) 55%, transparent); }
  .lightbox-prev { grid-column: 1; justify-self: end; }
  .lightbox-next { grid-column: 2; justify-self: start; }
  .lightbox-prev svg, .lightbox-next svg { width: 18px; height: 18px; }
  .lightbox-bottom { height: auto; padding: 0 1.5rem calc(1rem + env(safe-area-inset-bottom)); }
  .lightbox-caption { font-size: .95rem; }
  .lightbox-caption:empty { display: none; }
}

/* Série précédente / suivante : téléphone uniquement, tout en bas de la page */
.series-pager { display: none; }
@media (max-width: 600px) { .series-pager { display: grid; } }
.series-pager { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.series-pager__link { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--c-title); min-width: 0; }
.series-pager__link--next { justify-content: flex-end; text-align: right; }
.series-pager__link svg { flex: none; width: 2.4rem; height: 2.4rem; padding: .6rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-surtitle) 55%, transparent); color: var(--c-surtitle); transition: background .3s, color .3s; }
.series-pager__link:hover svg { background: var(--c-surtitle); color: var(--c-bg); }
.series-pager__link span { display: flex; flex-direction: column; min-width: 0; }
.series-pager__link small { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text); opacity: .7; margin-bottom: .25rem; }
.series-pager__link strong { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.05rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .series-pager { order: 3; margin-top: 0; margin-bottom: 3rem; padding-top: 1.8rem; }
  .series-panel-desc { padding-bottom: 2.2rem; }
  /* tuile de fin : plus large, contenu centré verticalement, textes à l'échelle du téléphone */
  .series-slide--end { width: 72vw; max-width: 300px; padding: 1.6rem 1.4rem; justify-content: center; }
  .series-end-next { margin-bottom: .9rem; font-size: .56rem; letter-spacing: .18em; }
  .series-end-region { font-size: .56rem; margin-bottom: .4rem; }
  .series-end-title { font-size: 1.45rem; margin-bottom: 1.4rem; }
  .series-end-btn { padding: .75rem 1.2rem; font-size: .58rem; gap: .6rem; }
}

/* Pied de page des séries : téléphone uniquement (sur ordinateur, la page est un défilement horizontal plein écran) */
@media (min-width: 601px) { body.series-page .exp-page-footer { display: none; } }

@media (max-width: 600px) {
  /* Previous / Next series : les deux surtitres sur une ligne et à la même hauteur, flèches alignées en haut */
  .series-pager__link { align-items: flex-start; }
  .series-pager__link svg { margin-top: .1rem; }
  .series-pager__link small { white-space: nowrap; font-size: .52rem; letter-spacing: .14em; }
}

/* ── RETOUR À LA PAGE PHOTOGRAPHY (08/11) : petit bouton centré en bas,
      affiché dès que le défilement latéral commence, puis toujours visible ── */
.series-back {
  position: fixed; left: 50%; bottom: 2.6rem; z-index: 60;
  transform: translate(-50%, 10px);
  font-family: var(--font-sans); font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-title); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em;
  background: var(--c-bg); padding: .6rem 1.1rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.series-back.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .4s ease, transform .4s ease, visibility 0s; }
.series-back:hover { color: var(--gold); }
@media (max-width: 768px) {
  .series-back { bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
}
/* ordinateur : le bouton se place dans la bande beige sous les photos, juste au-dessus de la barre dorée */
@media (min-width: 769px) {
  .series-back { bottom: 1.05rem; padding: .2rem .4rem; background: transparent; box-shadow: none; border-radius: 0; }
  .series-scrollbar { bottom: .55rem; }
}
/* bouton retour (08/11, révision) : à droite, un peu plus petit */
.series-back { left: auto; right: clamp(1.2rem, 3vw, 3rem); transform: translateY(10px); font-size: .6rem; letter-spacing: .18em; }
.series-back.is-on { transform: none; }
@media (max-width: 768px) { .series-back { right: 1rem; padding: .5rem .9rem; } }
/* téléphone : pas de bouton « Back to photography » (08/11) */
@media (max-width: 768px) { .series-back { display: none !important; } }