/* ============================================================
   STYLE DU SITE — Antonin Aïder-Coeuru
   Pour changer la typo, les couleurs ou les tailles :
   modifie seulement les valeurs ci-dessous (:root).
   ============================================================ */

@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/hanken-grotesk-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/hanken-grotesk-latin-500-italic.woff2') format('woff2'); }

:root {
  --police: 'Hanken Grotesk', Helvetica, Arial, sans-serif;  /* LA TYPO */
  --texte: #111111;        /* couleur du texte */
  --gris: #777168;         /* texte secondaire */
  --fond: #ffffff;         /* fond des pages */
  --taille: 14px;          /* taille du texte (ordinateur) */
  --vignette: 165px;       /* hauteur des vignettes dans l'Index (ordinateur) */
  --marge: 18px;           /* marge des bords */
}

* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font-family: var(--police); font-size: var(--taille); line-height: 1.3; -webkit-font-smoothing: antialiased; }
a { color: var(--texte); text-decoration: none; }
a:hover { color: var(--gris); }
em { font-style: italic; }
.gris { color: var(--gris); }
img { display: block; }

/* ---------- En-tête (nom + menu) ---------- */
.entete { display: flex; justify-content: space-between; align-items: baseline; padding: 16px var(--marge); position: relative; z-index: 2; }
.menu { display: flex; gap: 4px; }
.menu .actif { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Accueil ---------- */
.accueil { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.accueil .entete { position: absolute; top: 0; left: 0; right: 0; }
.accueil-photo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 120px; min-height: 0; }
.accueil-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.legende { position: absolute; right: var(--marge); bottom: 18px; text-align: right; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Index ---------- */
.series { padding: 48px var(--marge) 80px; display: flex; flex-direction: column; gap: 64px; }
.serie-titre { display: flex; gap: 24px; margin-bottom: 14px; }
.serie-titre .num { width: 40px; color: var(--gris); }
.ligne { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
.ligne button { flex: none; padding: 0; border: 0; background: transparent; cursor: zoom-in; height: var(--vignette); }
.ligne img { height: var(--vignette); width: auto; }
.ligne.carre button { width: var(--vignette); background: #eeeeee; }
.ligne.carre img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Information ---------- */
.info { width: 460px; max-width: 100%; padding: 48px var(--marge) 80px; display: flex; flex-direction: column; gap: 36px; line-height: 1.35; }
.info p { margin: 0; }
.tableau { display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 4px; }
.tableau .rubrique { grid-column: span 2; color: var(--gris); padding-bottom: 6px; letter-spacing: 0.04em; }
/* Copyright toujours collé en bas de la page */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.pied { margin-top: auto; padding: 0 var(--marge) 18px; color: var(--gris); font-size: 12px; }

/* ---------- Photo agrandie (lightbox) ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.visionneuse.ouverte { display: flex; }
.visionneuse .fond { position: absolute; inset: 0; border: 0; background: transparent; cursor: zoom-out; padding: 0; }
.visionneuse img { position: relative; max-width: min(1100px, 80vw); max-height: 76vh; width: auto; height: auto; pointer-events: none; }
.visionneuse .fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--texte); }
.visionneuse .prec { left: 40px; }
.visionneuse .suiv { right: 40px; }
.visionneuse .fermer { position: absolute; top: 12px; right: 12px; height: 32px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--texte); cursor: pointer; }
.visionneuse .titre { position: absolute; left: 16px; bottom: 16px; font-size: 13px; }
.visionneuse .compteur { position: absolute; right: 16px; bottom: 16px; font-size: 13px; color: var(--gris); }

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  :root { --taille: 13px; --marge: 16px; }
  .entete { padding: 14px var(--marge); }
  .accueil-photo { padding: 60px var(--marge); }
  .legende { bottom: 16px; }
  .series { padding-top: 32px; gap: 40px; }
  .serie-titre { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; margin-bottom: 10px; }
  .serie-titre .num { width: auto; }
  .serie-titre .meta { grid-column: span 2; }
  .ligne { gap: 8px; overflow: hidden; }
  .ligne button, .ligne img { height: 96px; }
  .ligne.livre button, .ligne.livre img { height: 86px; }
  .ligne.carre button { width: calc((100% - 16px) / 3); height: auto; aspect-ratio: 1 / 1; }
  .ligne.carre img { height: 100%; }
  .ligne .cache { display: none; }
  .tableau { grid-template-columns: 92px minmax(0, 1fr); row-gap: 6px; }
  .info { gap: 32px; padding-top: 40px; }
  .visionneuse img { max-width: calc(100vw - 32px); max-height: 70vh; }
  .visionneuse .fleche { display: none; }
}