/*
 * Site public : thème sombre exclusif (rendus 3D et infographies), polices auto-hébergées.
 * Les couleurs sont des jetons : leurs contrastes sont vérifiés par test/site-contraste.test.js.
 * Aucune animation hors `prefers-reduced-motion: no-preference`.
 */
@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs (zinc de Tailwind, accent ambre) */
  --fond: #09090b;
  --surface: #18181b;
  --texte: #e4e4e7;
  --texte-doux: #a1a1aa;
  --accent: #fbbf24;
  --accent-clair: #fcd34d;
  --accent-sur-accent: #09090b;
  --bord-ui: #71717a;
  --lueur: 251 191 36;

  /* Typographie */
  --police-titre: 'Space Grotesk Variable', 'Segoe UI', system-ui, sans-serif;
  --police-texte: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Mise en page */
  --largeur: 76rem;
  --gouttiere: clamp(1rem, 4vw, 2rem);
  --ecart: clamp(0.75rem, 2vw, 1.25rem);
  --rayon: 0.75rem;
  --ligne: 15rem;
}

body {
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
}

main {
  max-width: var(--largeur);
  padding: 2.5rem var(--gouttiere) 4rem;
}

h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.35rem;
}

/* Un lien se reconnaît à autre chose que sa couleur */
a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* En-tête */
.site-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.5rem var(--gouttiere) 0;
}

.site-nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-nom a {
  color: var(--texte);
  text-decoration: none;
}

.site-nom a:hover {
  color: var(--accent);
}

.site-entete ul,
.filtres ul,
.voisins ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-entete nav a {
  color: var(--texte-doux);
}

.site-entete nav a:hover {
  color: var(--texte);
}

/* Filtres par catégorie */
.filtres {
  margin: 0 0 2rem;
}

.filtres ul {
  gap: 0.5rem;
}

.filtres a {
  display: inline-block;
  padding: 0.35rem 1rem;
  border: 1px solid var(--bord-ui);
  border-radius: 999px;
  color: var(--texte);
  text-decoration: none;
}

.filtres a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filtres a[aria-current='page'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-sur-accent);
  font-weight: 600;
}

/* Grille asymétrique (Bento) : 1 colonne, puis 2, puis 4 ; les tailles viennent du back office */
.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ecart);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 36rem) {
  .grille {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: var(--ligne);
  }

  .carte-wide,
  .carte-large {
    grid-column: span 2;
  }

  .carte-tall,
  .carte-large {
    grid-row: span 2;
  }
}

@media (min-width: 64rem) {
  .grille {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Comblage des trous : seulement quand le HTML est déjà écrit dans l'ordre visuel (voir src/site/bento.js),
     sinon l'ordre de tabulation ne suivrait plus ce que l'on voit. */
  .grille-compacte {
    grid-auto-flow: dense;
  }
}

.carte {
  min-height: 0;
  /* Bordure transparente : invisible ici, mais rendue en mode contraste forcé (où les ombres disparaissent) */
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: 0 0 0 1px #27272a;
}

.carte a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
}

.carte-visuel {
  display: grid;
  flex: 1;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: #27272a;
}

@media (min-width: 36rem) {
  .carte-visuel {
    aspect-ratio: auto;
  }
}

.carte img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blur-up sans JavaScript : l'aperçu flou (24 px, intégré à la page) est sous l'image réelle, dans la même cellule ;
   il reste visible tant que l'image, chargée plus tard, n'est pas arrivée. Décoratif : alt vide, masqué aux lecteurs d'écran. */
.lqip {
  filter: blur(10px);
}

/* Le titre est sur fond plein sous l'image : son contraste ne dépend jamais du rendu affiché */
.carte-titre {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Survol et focus : lueur ; l'agrandissement n'existe que pour qui accepte les animations */
.carte:focus-within {
  box-shadow: 0 0 0 1px rgb(var(--lueur) / 0.6), 0 12px 40px -10px rgb(var(--lueur) / 0.35);
}

@media (hover: hover) {
  .carte:hover {
    box-shadow: 0 0 0 1px rgb(var(--lueur) / 0.6), 0 12px 40px -10px rgb(var(--lueur) / 0.35);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .carte {
    transition: box-shadow 0.3s ease;
  }

  .carte img {
    transition: transform 0.4s ease;
  }

  .carte:hover img,
  .carte:focus-within img {
    transform: scale(1.05);
  }
}

/* Transitions de pages natives (navigation entre pages du même site) : fondu discret, ignoré par les navigateurs
   qui ne le gèrent pas et jamais actif si le visiteur a demandé de réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.25s;
  }
}

/* Page d'une œuvre */
article {
  max-width: 56rem;
}

article p,
.texte p,
.texte li {
  max-width: 65ch;
}

.meta {
  margin: -0.75rem 0 1.5rem;
  color: var(--texte-doux);
}

.oeuvre-visuel {
  display: grid;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--surface);
}

.oeuvre-visuel > img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
}

.oeuvre-visuel > .oeuvre-image {
  height: auto;
}

.oeuvre-visuel > .lqip {
  height: 100%;
  object-fit: cover;
}

.texte {
  max-width: 45rem;
}

.texte blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--texte-doux);
}

.texte code,
.texte pre {
  border-radius: 0.375rem;
  background: var(--surface);
  font-size: 0.95em;
}

.texte code {
  padding: 0.1em 0.35em;
}

.texte pre {
  padding: 1rem;
  overflow-x: auto;
}

.voisins {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #27272a;
}

.bouton-contact {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-sur-accent);
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

.bouton-contact:hover {
  background: var(--accent-clair);
}

.site-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere) 2.5rem;
  color: var(--texte-doux);
}

.site-pied p {
  margin: 0;
}

.site-pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-pied a {
  color: var(--texte-doux);
}

.site-pied a:hover {
  color: var(--texte);
}

/* Mode contraste forcé (Windows) : les couleurs et les ombres sont remplacées par celles du système ;
   l'état courant et le survol ne doivent pas reposer sur elles. */
@media (forced-colors: active) {
  .filtres a[aria-current='page'] {
    border-width: 3px;
    text-decoration: underline;
  }

  .carte:hover,
  .carte:focus-within {
    outline: 3px solid Highlight;
  }

  .bouton-contact {
    border: 2px solid ButtonText;
  }
}

/* Bandeau de l'aperçu du back office (jamais présent sur le site publié) */
.bandeau-apercu {
  padding: 0.5rem var(--gouttiere);
  background: var(--accent);
  color: var(--accent-sur-accent);
  font-weight: 600;
}

.bandeau-apercu a {
  color: inherit;
}