/* Photobook Creator School : socle commun (polices et couleurs relevées sur www.creatorschool.fr, 18/10/2026).
   Lot 2 : la date passe en Geist 600, la graisse du bouton, pour une police de moins à l'ouverture. */
@font-face { font-family: Sequelsans; src: url(/_s/polices/SequelSans-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Sequelsans; src: url(/_s/polices/SequelSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url(/_s/polices/Geist-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url(/_s/polices/Geist-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url(/_s/polices/Geist-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Gloria; src: url(/_s/polices/GloriaHallelujah-subset.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --crimson: #e30040; --orange: #f34e27; --dark: #101010; --gray-dk: #424242; --gray: #c1c1c1;
  --antiflash: #f4f4f4; --light: #fcfcfc;
  --fond: var(--light); --texte: var(--dark); --texte-2: var(--gray-dk);
  --gouttiere: 6px; --h: 150px; --marge: 16px; --largeur: 1440px;
}
@media (min-width: 768px) { :root { --gouttiere: 10px; --h: 240px; --marge: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 16px/1.55 Geist, system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
h1 { font-family: Sequelsans, Geist, sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
main { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

/* Grille en rangées justifiées : chaque photo garde son ratio, aucun recadrage, aucune hauteur à deviner. */
.grille { display: flex; flex-wrap: wrap; gap: var(--gouttiere); margin: 0 0 56px; }
.grille::after { content: ""; flex-grow: 9999; }
.ph { flex-grow: var(--r); flex-basis: calc(var(--r) * var(--h)); display: block; background: var(--gray); cursor: zoom-in; }
.ph img { width: 100%; height: auto; aspect-ratio: var(--r); }
.ph img[data-src] { visibility: hidden; } /* vignette pas encore chargée : fond gris de la case */

/* Bouton de candidature : un seul par page. */
.cta {
  display: inline-block; max-width: 100%; padding: 14px 20px; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--crimson)); color: #fff; text-decoration: none;
  font: 600 15px/1.3 Geist, sans-serif; text-align: center;
}
.cta:hover { filter: brightness(1.06); }
.provisoire { display: inline-block; margin: 0 0 16px; padding: 2px 8px; border: 1px dashed currentColor; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.date { margin: 0 0 8px; font: 600 13px/1.4 Geist, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }

/* Pied de page légal. */
.pied { overflow-wrap: anywhere; max-width: 760px; margin: 0 auto; padding: 32px var(--marge) 48px; font-size: 12px; line-height: 1.6; color: var(--texte-2); }
.pied p { margin: 0 0 10px; }

/* Racine et 404. */
.neutre-boite { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 16px; }
.neutre-boite h1 { font-size: 28px; }

/* Visionneuse plein écran. */
.vis { position: fixed; inset: 0; z-index: 10; background: rgba(10, 10, 10, .96); display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.vis[hidden] { display: none; }
.vis-img { max-width: 100vw; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); width: auto; height: auto; object-fit: contain; user-select: none; }
.vis-btn { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 999px; width: 48px; height: 48px; font-size: 28px; line-height: 1; cursor: pointer; }
.vis-fermer { top: 12px; right: 12px; }
.vis-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.vis-suiv { right: 12px; top: 50%; transform: translateY(-50%); }
.vis-compte { position: absolute; top: 12px; left: 16px; margin: 0; color: #fff; font-size: 14px; line-height: 48px; }
.vis-dl { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; text-decoration: none; }
@media (max-width: 600px) { .vis-prec, .vis-suiv { top: auto; bottom: 10px; transform: none; } }
body.vis-ouverte { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }