/* Mous — style repris de la maquette Stitch de DRP (voir docs/ux-designs/.../DESIGN.md) */
:root {
  --bg: #131313;
  --lowest: #0e0e0e;
  --low: #1c1b1b;
  --container: #201f1f;
  --line: #262626;
  --line-strong: #444748;
  --text: #e5e2e1;
  --text-2: #a3a3a3;
  --muted: #737373;
  --veil: rgba(13, 13, 13, 0.96);
  --m: 1.5rem;
  --syne: "Syne", "Arial Black", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}
@media (min-width: 1200px) { :root { --m: 4rem; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg); color: var(--text-2);
  font-family: var(--mono); font-size: .875rem; line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
main { flex: 1; }

.label { font-family: var(--mono); font-size: .6875rem; line-height: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.label-md { font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.muted { color: var(--muted); }
.display {
  font-family: var(--syne); font-weight: 800; text-transform: uppercase; color: var(--text);
  font-size: clamp(2.2rem, 9.5vw, 5.5rem); line-height: .95; letter-spacing: -.04em;
}
.headline {
  font-family: var(--syne); font-weight: 700; text-transform: uppercase; color: var(--text);
  font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; letter-spacing: -.03em;
}

/* En-tête */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--m); position: sticky; top: 0; z-index: 10;
  background: rgba(19,19,19,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.logo { font-family: var(--syne); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--text); }
.nav { display: flex; gap: 1.25rem; }
.nav a { color: var(--text-2); padding: .5rem 0; }
.nav a:hover, .nav a.actif { color: var(--text); }
.nav a.actif { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 420px) { .nav { gap: .9rem; } .nav a { font-size: .6875rem; } }

/* Emplacement photo vide (en attendant le choix de DRP) */
.vide { background: linear-gradient(180deg, var(--container), var(--low)); position: relative; }
.vide::after {
  content: "PHOTO COMING SOON"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--muted);
}

/* Accueil */
section.accueil { position: relative; height: 100svh; min-height: 480px; display: flex; flex-direction: column; }
.accueil .fond { position: absolute; inset: 0; }
.accueil .fond.vide::after { place-items: start center; padding-top: 30vh; }
.accueil .header { position: relative; background: transparent; backdrop-filter: none; }
.accueil .centre { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--m) 3.5rem; gap: 1.5rem; }
.accueil .display { font-size: clamp(3rem, 17vw, 11rem); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  background: var(--text); color: var(--lowest); border-radius: .25rem;
  padding: .85rem 1.25rem; min-height: 44px;
}
.btn:hover { background: #fff; }
.btn-2 { border: 1px solid var(--line-strong); color: var(--text-2); border-radius: .25rem; padding: .75rem 1rem; display: inline-flex; gap: .5rem; min-height: 44px; align-items: center; }
.btn-2:hover { border-color: var(--muted); color: var(--text); }

/* Index des séries */
.titre-page { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; padding: 1.5rem var(--m) 1rem; }
.titre-page h1 { font-family: var(--syne); font-weight: 700; font-size: 1.15rem; color: var(--text); text-transform: uppercase; letter-spacing: -.01em; }

.carte { display: block; margin: 0 var(--m) 4rem; }
.carte .image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.carte .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte:hover .image img { transform: scale(1.02); }
.carte .haut { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; justify-content: space-between; z-index: 1; }
.carte .haut span { background: var(--lowest); padding: .25rem .5rem; }
.carte .bas { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; z-index: 1; }
.carte .entrer { color: var(--text); white-space: nowrap; }
.rail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; background: var(--low); border-top: 1px solid var(--line); }

/* Cartes suivantes : composition décalée sur ordinateur */
@media (min-width: 900px) {
  .carte.cote { display: grid; grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: center; }
  .carte.cote.inverse { grid-template-columns: 5fr 7fr; }
  .carte.cote.inverse .texte { order: -1; text-align: right; }
  .carte.cote .image { aspect-ratio: 4 / 3; }
  .carte.cote .texte { display: flex; flex-direction: column; gap: 1rem; }
  .carte.cote.inverse .texte .btn-2 { align-self: flex-end; }
}
.carte.cote .texte { padding-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.carte.cote .btn-2 { align-self: flex-start; }

/* Registre */
.registre { margin: 0 var(--m) 4rem; background: var(--low); border: 1px solid var(--line); padding: 1rem; }
.registre .entete { display: flex; gap: .75rem; padding: .25rem .25rem 1rem; }
.registre a { display: grid; grid-template-columns: 2rem 1fr auto 1.5rem; align-items: center; gap: .75rem; padding: 1rem .75rem; background: var(--lowest); border: 1px solid var(--line); margin-top: .5rem; transition: border-color .2s; }
.registre a:hover { border-color: var(--text-2); }
.registre .nom { font-family: var(--syne); font-weight: 700; font-size: 1.25rem; color: var(--text); text-transform: uppercase; letter-spacing: -.02em; }
.registre .fleche { color: var(--text); text-align: right; }

/* Page d'une série */
.barre-serie { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem var(--m); border-bottom: 1px solid var(--line); }
.barre-serie b { color: var(--text); }
.tete-serie { padding: 3rem var(--m) 2rem; display: flex; flex-direction: column; gap: 1rem; }
.tete-serie .display { font-size: clamp(1.8rem, 7vw, 5.5rem); } /* ELSEWHERE et LANDSCAPES tiennent sur téléphone */
.photos { display: flex; flex-direction: column; gap: 5rem; padding: 2rem var(--m) 4rem; align-items: center; }
.photo { width: 100%; max-width: 1100px; cursor: zoom-in; }
.photo.portrait { max-width: min(100%, 720px); }
.photo img { width: 100%; background: var(--low); opacity: 0; transition: opacity .5s ease; }
.photo img.charge { opacity: 1; }
.photo .num { display: flex; justify-content: space-between; margin-top: .6rem; }
@media (max-width: 767px) { .photos { gap: 3rem; padding-left: 0; padding-right: 0; } .photo .num { padding: 0 var(--m); } }

.suivante { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 4rem var(--m) 5rem; border-top: 1px solid var(--line); text-align: center; }
.suivante .headline:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }

/* À propos */
.apropos { padding: 4rem var(--m) 5rem; max-width: 46rem; display: flex; flex-direction: column; gap: 2.5rem; }
.citation { font-family: var(--syne); font-weight: 700; color: var(--text); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
.citation + .label { margin-top: -1.5rem; }
.apropos p.corps { color: var(--text-2); max-width: 65ch; }
.apropos p.corps + p.corps { margin-top: .5rem; }

/* Pied de page */
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: 2rem var(--m); border-top: 1px solid var(--line); }

/* Visionneuse */
.visionneuse { position: fixed; inset: 0; z-index: 50; background: var(--veil); display: none; touch-action: none; }
.visionneuse.ouverte { display: block; }
.visionneuse img { position: absolute; inset: 0; margin: auto; max-width: 100vw; max-height: 100svh; width: auto; height: auto; object-fit: contain; transition: transform .2s ease, opacity .2s ease; user-select: none; -webkit-user-drag: none; }
@media (min-width: 768px) { .visionneuse img { max-width: calc(100vw - 8rem); max-height: calc(100svh - 7rem); } }
.visionneuse .fermer, .visionneuse .prec, .visionneuse .suiv {
  position: absolute; background: none; border: 1px solid var(--line); color: var(--text); font: inherit;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: .25rem;
}
.visionneuse button:hover { border-color: var(--text-2); }
.visionneuse .fermer { top: 1rem; right: 1rem; }
.visionneuse .prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .visionneuse .prec, .visionneuse .suiv { display: none; } }
.visionneuse .compteur { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; }

.erreur { padding: 6rem var(--m); display: flex; flex-direction: column; gap: 1.5rem; }

/* Téléphone : carte 1 plus haute, lien « Entrer » sous le titre */
@media (max-width: 767px) {
  .carte .image { aspect-ratio: 4 / 5; }
  .carte .bas { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Une photo tient toujours entière dans l'écran */
.photo img { width: auto; max-width: 100%; max-height: 88svh; margin: 0 auto; }
.photo, .photo.portrait { max-width: 1100px; }

/* Grand écran : l'index ne s'étire plus sur toute la largeur (DRP 15/11 : « réduis la grande carte »),
   pour que les couvertures (exports 2048 px) restent nettes */
@media (min-width: 1300px) {
  .titre-page, .carte, .registre { width: calc(100% - 2 * var(--m)); max-width: 1560px; margin-left: auto; margin-right: auto; }
  .titre-page { padding-left: 0; padding-right: 0; }
}

/* Accueil : la photo ne prend pas tout l'écran, la page descend un peu vers le pied (comme papesan, DRP 15/11) */
/* Accueil comme papesan : barre noire en haut, photo en bandeau (pas toute la page), puis le bas de page (DRP 15/11) */
section.accueil { height: 72svh; min-height: 420px; }
@media (max-width: 767px) { section.accueil { height: 74svh; } }
.accueil .centre { padding-bottom: 2.5rem; }
.accueil .display { font-size: clamp(3rem, 14vw, 9rem); }
.sous-accueil { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: baseline; padding: 3rem var(--m) 3.5rem; border-top: 1px solid var(--line); }
.sous-accueil .liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.sous-accueil .liens a { font-family: var(--syne); font-weight: 700; font-size: clamp(1.25rem, 4vw, 2rem); color: var(--text); text-transform: uppercase; letter-spacing: -.02em; }
.sous-accueil .liens a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Menu : barre à droite (burger) qui déroule un grand menu (DRP 15/11) */
.burger { position: relative; z-index: 61; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; padding: 10px; }
.burger span { display: block; height: 2px; width: 24px; background: var(--text); transition: transform .25s ease, opacity .2s ease; }
.burger span:nth-child(2) { width: 16px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu[hidden] { display: none; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--veil); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; justify-content: space-between; padding: 6rem var(--m) 2.5rem; animation: deroule .3s ease; overflow-y: auto; }
@keyframes deroule { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.menu-series { display: flex; flex-direction: column; gap: .25rem; }
.menu-series a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--syne); font-weight: 800; text-transform: uppercase; color: var(--text);
  font-size: clamp(1.6rem, 6vw, 6rem); line-height: 1; letter-spacing: -.04em; padding: .25rem 0; border-bottom: 1px solid var(--line); }
.menu-series a:hover { color: #fff; padding-left: .5rem; transition: padding .2s ease; }
.menu-bas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding-top: 2rem; }
.menu-bas a { color: var(--text-2); min-height: 44px; display: inline-flex; align-items: center; }
.menu-bas a:hover { color: var(--text); }
body.menu-ouvert { overflow: hidden; }
body.menu-ouvert .header { z-index: 70; position: relative; }
body.menu-ouvert .header:not(.accueil .header) { position: sticky; }

/* Accueil : la photo descend jusqu'au bas de page, sans vide entre les deux (DRP 15/11 : « trop haut, j'aimerais que l'image descende un peu + ») */
body.accueil main { display: flex; flex-direction: column; }
body.accueil section.accueil { flex: 1; height: auto; min-height: 420px; }

/* TEST vue horizontale des séries (DRP 15/11) : une seule photo à la fois, centrée (« on voit la photo d'après, c'est chelou ») */
.vues { display: flex; gap: .25rem; }
.vues button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); background: none; border: 1px solid transparent; border-radius: .25rem; padding: .35rem .5rem; cursor: pointer; min-height: 32px; }
.vues button[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong); }
body.horizontal .tete-serie { padding: .75rem var(--m) .25rem; flex-direction: row; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
body.horizontal .tete-serie .display { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
body.horizontal .photos {
  position: relative; flex-direction: row; align-items: stretch; gap: 0; padding: 0; overflow-x: auto; overflow-y: hidden;
  height: calc(100svh - 17.5rem); min-height: 300px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
body.horizontal .photos::-webkit-scrollbar { display: none; }
body.horizontal .photo, body.horizontal .photo.portrait {
  flex: 0 0 100%; width: 100%; max-width: none; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  scroll-snap-align: center; scroll-snap-stop: always; padding: 0 var(--m);
}
body.horizontal .photo img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 2rem); margin: 0 auto; }
body.horizontal .photo .num { width: auto; justify-content: center; padding: 0; }
.fleches { display: none; }
body.horizontal .fleches { display: flex; justify-content: space-between; align-items: center; padding: .5rem var(--m) 0; }
.fleches button { font: inherit; color: var(--text); background: none; border: 1px solid var(--line); border-radius: .25rem; width: 44px; height: 44px; cursor: pointer; }
.fleches button:hover { border-color: var(--text-2); }
.fleches button:disabled { opacity: .3; cursor: default; }
@media (max-width: 767px) { body.horizontal .photos { height: calc(100svh - 19rem); } body.horizontal .photo { padding: 0; } }

/* Protection légère des photos : pas de glisser, pas de sélection, pas de « Enregistrer l'image » à l'appui long sur iPhone */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Mise en page « magazine » (maquette Stitch, DRP 15/11 : « en magazine j'aime bien l'idée ») — vue verticale seulement.
   La place de chaque photo est calculée par le générateur (plan_magazine) : --c/--r ordinateur, --cm/--rm téléphone.
   Les photos ne sont jamais recadrées. */
body:not(.horizontal) .photos.magazine {
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .75rem; row-gap: 2rem;
  align-items: start; padding: 1rem var(--m) 5rem;
}
body:not(.horizontal) .magazine .photo { grid-column: var(--cm); grid-row: var(--rm); max-width: none; width: 100%; }
body:not(.horizontal) .magazine .photo img { width: 100%; height: auto; max-height: none; }
body:not(.horizontal) .magazine .photo .num { padding: 0; }
body:not(.horizontal) .magazine .m-droite { width: 82%; justify-self: end; }
body:not(.horizontal) .magazine .m-gauche { width: 82%; justify-self: start; }
@media (min-width: 768px) {
  body:not(.horizontal) .photos.magazine {
    grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); row-gap: clamp(3rem, 5vw, 5rem);
    max-width: 1440px; margin: 0 auto; padding: 2rem var(--m) 5rem;
  }
  body:not(.horizontal) .magazine .photo { grid-column: var(--c); grid-row: var(--r); width: 100%; justify-self: stretch; }
  body:not(.horizontal) .magazine .m-plein { justify-self: center; width: auto; }
  body:not(.horizontal) .magazine .m-plein img { width: auto; max-width: 100%; max-height: 78svh; }
  body:not(.horizontal) .magazine .m-bas { align-self: end; }
  body:not(.horizontal) .magazine .m-releve { padding-bottom: 1.5rem; }
  body:not(.horizontal) .magazine .m-descend { margin-top: clamp(2rem, 5vw, 4.5rem); }
}
/* Pas de cadre blanc quand on clique une photo à la souris ; il reste pour le clavier */
.photo:focus:not(:focus-visible) { outline: none; }
/* Rangées de 2 ou 3 photos : même hauteur exacte (DRP 15/11 : « faut tout aligner »).
   Chaque photo prend toute la rangée, puis sa largeur et son décalage sont calculés d'après son format. */
@media (min-width: 768px) {
  body:not(.horizontal) .photos.magazine { --gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  body:not(.horizontal) .magazine .m-rang {
    justify-self: start; align-self: start;
    /* --a = largeur des photos de la rangée, limitée pour qu'elle ne dépasse pas 80 % de la hauteur d'écran ; rangée centrée */
    --a: min(100% - var(--n) * var(--gap), var(--cap, 80svh) * var(--s));
    width: calc(var(--a) * var(--f));
    margin-left: calc((100% - var(--a) - var(--n) * var(--gap)) / 2 + var(--a) * var(--o) + var(--k) * var(--gap));
  }
}

/* LANDSCAPES « magazine plus grand » (DRP 15/11 : test 2 choisi) : jamais 3 par rangée, photos plus hautes */
@media (min-width: 768px) {
  body:not(.horizontal) .photos.magazine.grand { --cap: 90svh; max-width: 1600px; }
  body:not(.horizontal) .magazine.grand .m-plein img { max-height: 90svh; }
  body:not(.horizontal) .magazine.grand .m-centre { justify-self: center; width: auto; }
  body:not(.horizontal) .magazine.grand .m-centre img { width: auto; max-width: 100%; max-height: 90svh; }
}

/* Bloc « pellicule » (DRP 15/11 : « La pellicule ») : la page se bloque, les photos défilent de côté (pellicule.js) */
.pellicule { width: 100%; position: relative; grid-column: 1 / -1; }
body:not(.horizontal) .magazine .pellicule { grid-row: var(--rm); }
@media (min-width: 768px) { body:not(.horizontal) .magazine .pellicule { grid-row: var(--r); } }
.pellicule .cadre { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-top: 4rem; }
.pellicule .titre-pell { margin: 0; }
.pellicule .titre-pell span { opacity: .6; }
.pellicule .piste { display: flex; gap: clamp(1rem, 3vw, 3rem); width: max-content; will-change: transform; }
body:not(.horizontal) .pellicule .photo, body:not(.horizontal) .pellicule .photo.portrait { flex: 0 0 auto; width: auto; max-width: none; margin: 0; grid-column: auto; grid-row: auto; }
body:not(.horizontal) .pellicule .photo img { height: min(70svh, 58vw); width: auto; max-width: none; max-height: none; margin: 0; }
/* mouvement réduit : bande qu'on fait glisser, pas de blocage */
.pellicule.libre { height: auto !important; }
.pellicule.libre .cadre { position: static; height: auto; overflow-x: auto; padding: 2rem 0; }
/* vue horizontale : le bloc s'efface, ses photos rejoignent les autres (une par écran) */
body.horizontal .pellicule, body.horizontal .pellicule .cadre, body.horizontal .pellicule .piste { display: contents; }
body.horizontal .pellicule .titre-pell { display: none; }
body.horizontal .pellicule .photo img { height: auto; max-height: calc(100% - 2rem); max-width: 100%; }
/* TEST « fondu » (DRP 15/11 : « test le fondu ») : les photos du bloc sont empilées, chacune apparaît par-dessus la précédente */
body:not(.horizontal) .pellicule.fondu .piste { position: relative; width: 100%; height: calc(min(70svh, 58vw) + 2rem); }
body:not(.horizontal) .pellicule.fondu .photo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; }
body:not(.horizontal) .pellicule.fondu .photo:first-child { opacity: 1; }
body:not(.horizontal) .pellicule.fondu .photo img { height: min(70svh, 58vw); max-width: 100%; object-fit: contain; }
.pellicule.fondu.libre .photo { position: static; opacity: 1 !important; }
body.horizontal .pellicule.fondu .photo { opacity: 1 !important; }