/* ============================================================
   ARTICLE.CSS — Page article (session photo / journal)
   ============================================================ */

/* Échelle globale des pages article : tout ici est dimensionné en rem,
   donc ce ré-ancrage de la taille de police racine grossit uniformément
   textes, espacements et blocs photo — uniquement sur les pages article,
   sans toucher le reste du site. Les breakpoints responsive restent en px
   (indépendants de cette échelle), donc le comportement mobile ne change pas. */
html:has(.a-hero) {
  font-size: 19px;
}

/* ─── Hero ───────────────────────────────────────────────── */
.a-hero {
  position: relative;
  height: 90vh;
  min-height: 500px;
  overflow: hidden;
}

.a-hero__bg {
  position: absolute;
  inset: 0;
}

.a-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: none;
}

.a-hero__img.loaded { transform: scale(1); }
.a-hero__img { cursor: zoom-in; }
.a-hero__overlay,
.a-hero__content { pointer-events: none; }
.a-hero__content a { pointer-events: auto; }

.a-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.0)  40%,
    rgba(0,0,0,0.6)  78%,
    rgba(0,0,0,0.88) 100%
  );
}

.a-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 2.5rem 2.5rem;
  max-width: 820px;
}

.a-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2rem;
  transition: color 0.2s;
}

.a-hero__back:hover { color: rgba(255,255,255,0.9); }

.a-hero__back svg { width: 12px; height: 12px; }

.a-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.a-hero__date {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}

.a-hero__dot {
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.a-hero__location {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
}

.a-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ─── Corps texte — colonne centrée ─────────────────────── */
.a-body {
  max-width: var(--col);    /* 720px */
  margin: 0 auto;
  padding: 4rem 2.5rem 3rem;
}

/* Infos EXIF / matériel */
.a-exif {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

.a-exif__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a-exif__label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.a-exif__value {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink-2);
}

/* Texte courant */
.a-prose {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
}

/* Première lettre */
.a-prose:first-of-type::first-letter {
  font-size: 4.2em;
  font-weight: 300;
  line-height: 0.75;
  float: left;
  margin-right: 0.06em;
  margin-top: 0.08em;
  color: var(--ink);
}

/* Citation */
.a-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  margin: 2.5rem 0;
}

/* Fiche technique inline */
.a-specs {
  background: var(--bg-2);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
}

.a-specs__label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1.25rem;
}

.a-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.5rem;
}

.a-spec { display: flex; flex-direction: column; gap: 2px; }

.a-spec__label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.a-spec__value {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--ink);
}

/* Séparateur de section */
.a-divider {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ─── Photos dans l'article ──────────────────────────────── */

/* Pleine fenêtre — casse la colonne jusqu'aux bords du viewport */
.a-photo-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 3.5rem;
  margin-bottom: 0;
  position: relative;
}

.a-photo-full img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  filter: saturate(0.9);
  transition: filter 0.5s;
}

.a-photo-full img:hover { filter: saturate(1.02); }

.a-photo-caption {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--ink-4);
  margin-top: 0.6rem;
  font-style: italic;
}

/* Duo asymétrique — pleine fenêtre */
.a-photo-duo {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 32.5rem;
  gap: 3px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 3rem;
  margin-bottom: 0;
}

.a-photo-duo__item {
  overflow: hidden;
  background: var(--bg-3);
}

.a-photo-duo__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
  filter: saturate(0.85);
}

.a-photo-duo__item:hover img {
  transform: scale(1.025);
  filter: saturate(1.05);
}

.a-photo-duo > .a-photo-caption {
  grid-column: 1 / -1;
}

/* Duo portrait — deux verticales côte à côte, format d'origine */
.a-photo-duo--portrait {
  width: auto;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.a-photo-duo--portrait .a-photo-duo__item {
  overflow: hidden;
}

.a-photo-duo--portrait .a-photo-duo__item img {
  height: auto;
}

/* Ouverture éditoriale - une verticale dominante et deux contrepoints */
.a-photo-opening {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: 1.35fr 0.65fr auto;
  gap: 4px;
  width: calc(100% + 10rem);
  height: 43.125rem;
  margin: 3.5rem -5rem 0;
}

.a-photo-opening__main,
.a-photo-opening__upper,
.a-photo-opening__lower {
  overflow: hidden;
  background: var(--bg-3);
}

.a-photo-opening__main { grid-row: 1 / 3; }
.a-photo-opening__upper { grid-column: 2; grid-row: 1; }
.a-photo-opening__lower { grid-column: 2; grid-row: 2; }

/* Variante avec la photo de gauche élargie vers l'extérieur gauche
   (utilisée seulement là où on veut appuyer davantage sur l'image
   principale, sans toucher la mise en page par défaut des autres articles). */
.a-photo-opening--wide-left {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  width: calc(100% + 14rem);
  margin-left: -9rem;
  margin-right: -5rem;
}

.a-photo-opening img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.88);
  cursor: zoom-in;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}

.a-photo-opening__main img { object-position: center 48%; }
.a-photo-opening__upper img { object-position: center 42%; }
.a-photo-opening__lower img { object-position: center 62%; }
.a-photo-opening div:hover img { transform: scale(1.025); filter: saturate(1.03); }
.a-photo-opening > .a-photo-caption { grid-column: 1 / -1; align-self: start; }

@media (max-width: 860px) {
  .a-photo-duo--portrait { margin-inline: -1.25rem; }
}

@media (max-width: 700px) {
  .a-photo-duo--portrait {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    width: auto;
    margin-inline: 0;
  }
  .a-photo-duo--portrait .a-photo-duo__item { aspect-ratio: 2/3; }
}

/* Trio asymétrique : 1 grande + 2 petites à droite */
.a-photo-trio {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  margin: 2.5rem -4rem;
  aspect-ratio: 21/9;
}

.a-photo-trio__item {
  overflow: hidden;
  background: var(--bg-3);
}

.a-photo-trio__item:first-child { grid-row: 1 / 3; }

.a-photo-trio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
  filter: saturate(0.88);
}

.a-photo-trio__item:hover img {
  transform: scale(1.025);
  filter: saturate(1);
}

/* Portrait — pleine largeur de la colonne, format naturel */
.a-photo-portrait {
  margin: 3rem -2.5rem;
  max-width: none;
}

.a-photo-portrait img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  filter: saturate(0.88);
  transition: filter 0.45s;
}

.a-photo-portrait img:hover { filter: saturate(1.02); }

/* ─── Navigation entre articles ─────────────────────────── */
.a-nav {
  max-width: var(--col);
  margin: 0 auto;
  padding: 2.5rem 2.5rem 4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.a-nav__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color 0.2s;
}

.a-nav__back:hover { color: var(--ink); }

.a-nav__next { text-align: right; }

.a-nav__next-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.4rem;
}

.a-nav__next-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  transition: color 0.2s;
}

.a-nav__next-title:hover { color: var(--ink-3); }

/* ─── Lightbox ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-in-out);
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 0.5s var(--ease-out);
  box-shadow: 0 8px 48px rgba(0,0,0,0.12);
}

.lightbox.open .lightbox__img { transform: scale(1); }

.lightbox__close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--ink-3);
  transition: color 0.2s;
}

.lightbox__close:hover { color: var(--ink); }

.lightbox__caption {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-4);
  white-space: nowrap;
}

/* ─── Archiviste IA ──────────────────────────────────────── */
.a-archiviste {
  max-width: var(--col);
  margin: 3rem auto 0;
  padding: 0 2.5rem;
}

.a-archiviste__inner {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 2rem 2rem 2.25rem;
}

.a-archiviste__label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.5rem;
}

.a-archiviste__title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.a-archiviste__subtitle {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

.a-archiviste__form {
  display: flex;
  gap: 0.5rem;
}

.a-archiviste__input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}

.a-archiviste__input::placeholder { color: var(--ink-4); }
.a-archiviste__input:focus { border-color: var(--ink-3); }

.a-archiviste__btn {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.a-archiviste__btn:hover { background: var(--ink-2); }

.a-archiviste__btn:disabled {
  background: var(--ink-4);
  cursor: not-allowed;
}

/* Zone de réponse */
.a-archiviste__response {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: none;
}

.a-archiviste__response.visible { display: block; }

.a-archiviste__response-label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.75rem;
}

.a-archiviste__response-text {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-2);
}

/* État chargement */
.a-archiviste__spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--ink-4);
}

.a-archiviste__spinner::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-top-color: var(--ink-3);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* État erreur */
.a-archiviste__error {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--ink-3);
  font-style: italic;
}

.a-archiviste__disclaimer {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  color: var(--ink-4);
  font-style: italic;
  margin-top: 1rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .a-archiviste { padding: 0 1.25rem; }
  .a-archiviste__form { flex-direction: column; }
  .a-archiviste__btn { width: 100%; }
}

/* ─── Footer ─────────────────────────────────────────────── */
.a-footer {
  padding: 1.75rem 2.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.a-footer__logo {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
}

.a-footer__copy {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: var(--ink-4);
}

.a-footer__link {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.2s;
}

.a-footer__link:hover { color: var(--ink); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .a-photo-trio  { margin-inline: -1.25rem; }
  .a-photo-portrait { margin-inline: -1.25rem; }
  .a-photo-opening { width: auto; margin-inline: -1.25rem; }
}

@media (max-width: 700px) {
  .a-body { padding: 2.5rem 1.25rem 2rem; }
  .a-hero__content { padding: 2.5rem 1.25rem 2rem; }
  .a-nav  { padding: 2rem 1.25rem 3rem; }
  .a-footer { padding: 1.5rem 1.25rem; }

  .a-photo-full  { margin-inline: 0; }
  .a-photo-trio  {
    margin-inline: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .a-photo-trio__item:first-child { grid-row: auto; }
  .a-photo-trio__item img { aspect-ratio: 16/9; height: auto; }

  .a-photo-full  { margin-inline: 0; width: 100%; }
  .a-photo-portrait { margin-inline: 0; }
  .a-photo-opening {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 430px 230px auto;
    width: 100%;
    height: auto;
    margin-inline: 0;
  }
  .a-photo-duo {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    margin-inline: 0;
  }
  .a-photo-duo__item { aspect-ratio: 4/3; }
  .a-photo-duo__item img { height: 100%; }

  .a-specs__grid { grid-template-columns: 1fr; }

  .a-prose:first-of-type::first-letter { font-size: 3em; }
}

.a-footer__links { display: flex; gap: 1.75rem; flex-wrap: wrap; }

/* Liens de fin de récit : retour aux séries + planche complète de la série */
.a-nav__group { display: flex; flex-direction: column; gap: 0.9rem; }