/*
 * Mise en page propre à chaque page du site public (design/pages/*.md).
 */

/* ── Accueil : Hero ────────────────────────────────────── */

/*
 * Hero sans carte (2026-11-09) : le texte est posé directement sur le fond de pixels.
 * Texte uniquement : aucune image, aucune carte annexe.
 */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding: var(--space-24) var(--space-2) var(--space-8); /* côtés alignés sur les titres de section */
}

/* Sans carte, la pastille de statut garde un fond surface pour se détacher des pixels. */
.hero .pill {
  background: var(--color-surface);
}

.hero__title {
  max-width: 1000px;
}

/* Pixels de la 404 (assets/js/error-pixels.js) : derrière le texte, sans capter la souris. */
.error-page__pixels {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ligne de séparation, puis sous-titre à gauche et boutons à droite. */
.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .hero {
    gap: var(--space-6);
    padding: var(--space-12) 0 var(--space-6);
  }

  .hero__bottom {
    padding-top: var(--space-6);
  }
}

/* ── Pages internes : en-tête, filtres, grille ─────────── */

/* Page dont le premier bloc est une carte (Contact, 404) : même écart sous le header que le hero. */
.page-top {
  margin-top: var(--space-4);
}

.page-stack {
  --stack-gap: var(--space-8);
}

.grid > li {
  display: flex;
  flex-direction: column;
}

.grid > li > * {
  flex: 1;
}

/* ── À propos : présentation ───────────────────────────── */

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.about-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Récit de présentation : paragraphes espacés, largeur de lecture confortable. */
.about-intro__story {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 65ch;
}

/*
 * Photo : rayon xl, ratio 4:5 ; bloc soft tant qu'elle n'est pas fournie. Reste visible pendant la lecture,
 * collée sous le header fixe. Sa largeur est limitée pour que toute sa hauteur (4:5) tienne entre le header
 * et le bas de l'écran.
 */
.about-intro__photo {
  --photo-top: calc(var(--header-height) + var(--space-6));
  position: sticky;
  top: var(--photo-top);
  align-self: start;
  justify-self: center;
  width: min(100%, (100vh - var(--photo-top) - var(--space-6)) * 4 / 5);
  width: min(100%, (100dvh - var(--photo-top) - var(--space-6)) * 4 / 5);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-soft);
}

.about-intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .about-intro__photo {
    position: static;
    width: 100%; /* empilée : pleine largeur, plus de limite de hauteur */
    order: -1; /* photo en premier en mobile */
  }
}

/* ── Projet : étude de cas ─────────────────────────────── */

.project-page {
  --stack-gap: var(--space-8);
  padding-top: var(--space-10);
}

.project-page__back {
  align-self: flex-start;
}

.project-page__back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.project-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.project-page__summary {
  max-width: 720px;
}

/* Visuel principal pleine largeur, rayon 2xl ; sans capture : bloc inv de 560 px. */
.project-page__visual {
  display: grid;
  place-items: center;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-inv);
  color: var(--color-inv-muted);
}

.project-page__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-page__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}

.project-page__gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.project-page__next {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.preview-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: inset 4px 0 0 var(--color-accent);
}

@media (max-width: 767px) {
  .project-page {
    padding-top: var(--space-6);
  }

  .project-page__visual {
    min-height: 240px;
  }

  .project-page__gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Accueil : section Lab IA (carte inv) ──────────────── */

.lab-section {
  display: flex;
  flex-direction: column;
  padding: var(--space-12);
  border-radius: var(--radius-2xl);
  background: var(--color-inv);
  color: var(--color-inv-ink);
}

.lab-section .section-header {
  margin-left: 0;
}

@media (max-width: 767px) {
  .lab-section {
    padding: var(--space-6);
  }
}

/* ── Article du Lab ────────────────────────────────────── */

.article-page {
  --stack-gap: var(--space-10);
  padding-top: var(--space-10);
}

.article-page__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.article-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-page__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Corps de l'article : body-l, intertitres heading-2, code sur fond inv, citation sur fond soft (pas de bordure gauche). */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.prose h2 {
  margin-top: var(--space-4);
  font-family: var(--type-heading-2-font);
  font-size: var(--type-heading-2-size);
  font-weight: var(--type-heading-2-weight);
  line-height: var(--type-heading-2-line);
  letter-spacing: var(--type-heading-2-tracking);
}

.prose h3 {
  font-family: var(--type-heading-3-font);
  font-size: var(--type-heading-3-size);
  font-weight: var(--type-heading-3-weight);
  line-height: var(--type-heading-3-line);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-6);
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-inv);
  color: var(--color-inv-ink);
  font-family: var(--type-code-font);
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
}

.prose :not(pre) > code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--color-soft);
  font-family: var(--type-code-font);
  font-size: 0.9em;
}

.prose blockquote {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-soft);
}

.prose img {
  border-radius: var(--radius-lg);
}

/* ── Mentions légales ──────────────────────────────────── */

.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.legal__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Le titre suit la colonne de lecture : pas de retrait latéral du PageHeader. */
.page-header.reading {
  width: 100%;
  padding-inline: 0;
}

@media (max-width: 767px) {
  .legal {
    padding: var(--space-6);
  }
}

/* ── Page d'erreur (404) ───────────────────────────────── */

.error-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  text-align: center;
}

.error-page__code {
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.error-page__debug {
  width: 100%;
  max-height: 400px;
  overflow: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-inv);
  color: var(--color-inv-ink);
  text-align: left;
  white-space: pre-wrap;
}

/* ── Stack : 4 colonnes, 2 sur tablette, 1 en mobile ───── */

.grid--stack {
  --cols: 4;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .grid--stack {
    --cols: 2;
  }
}