/* =====================================================================
   Ines El Faez — image producer
   Reproduction statique du site Cargo. Valeurs relevées sur Cargo.
   ===================================================================== */

/* ---------- Taille de base -------------------------------------------
   Sur Cargo, 1rem = 1,44 % de la hauteur de la fenêtre (vérifié à 698,
   754 et 775 px de haut). Toutes les tailles du site sont en rem : le
   site garde donc les mêmes proportions quelle que soit la hauteur.
   Mobile : valeur PROVISOIRE, à comparer avec Cargo sur téléphone.   */
html {
  font-size: 1.44vh;
  --header-h: 7.44rem;   /* 2.3 + 2 lignes de 1.32 + 2.5 */
  --footer-h: 5.32rem;   /* 1.7 + 1 ligne de 1.32 + 2.3 */
  --pad: 2.3rem;
  --screen-h: 100vh;
}
@supports (height: 100dvh) { html { --screen-h: 100dvh; } }
@media (max-width: 700px) {
  html { font-size: calc(2.4vw * 1.1); }   /* PROVISOIRE */
}

/* ---------- Police ----------------------------------------------------
   Diatype Variable (Dinamo) est payante : ajouter ici le @font-face
   une fois la licence web achetée. En attendant : Inter / Helvetica. */
:root {
  --font: "Diatype Variable", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: rgba(0, 0, 0, .85);
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 386;
  line-height: 1.2;
  letter-spacing: .032em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:active { opacity: .7; }
img, video { display: block; max-width: 100%; height: auto; }
b { font-weight: 700; }

.caption { font-size: .8rem; font-weight: 450; line-height: 1.2; letter-spacing: 0; }
.caption a { text-decoration: underline; }

.align-right  { text-align: right; }
.align-center { text-align: center; }

/* ---------- Grille 12 colonnes (équivalent des <column-set> Cargo) --- */
.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter, 1rem);
  align-items: start;
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }

/* ---------- En-tête et pied de page fixes ---------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 398;
  padding: var(--pad) var(--pad) 2.5rem;
  color: #000;
}
.subtitle { color: #8f8f8f; }   /* un peu plus foncé que sur Cargo (≈ #c4c4c4) */

/* En-tête et pied : texte plus dense. Le noir est déjà pur (#000) ; on désactive
   l'affinage des polices de macOS et on épaissit très légèrement le trait. */
.site-header, .site-footer {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  -webkit-text-stroke: .02em currentColor;
}
.site-header .subtitle { -webkit-text-stroke: 0; }

.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 397;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 1.7rem var(--pad) var(--pad);
  color: #000;
}
/* Pied de page : même police, taille et graisse que l'en-tête */
.site-footer .caption { font-size: 1.1rem; font-weight: 386; line-height: 1.2; letter-spacing: .032em; }

/* Le contenu commence sous l'en-tête et s'arrête au-dessus du pied */
main { padding-top: var(--header-h); padding-bottom: var(--footer-h); }
.page-content { padding: var(--pad); }

/* Hauteur disponible entre en-tête et pied, marges comprises */
:root { --avail-h: calc(var(--screen-h) - var(--header-h) - var(--footer-h) - 2 * var(--pad)); }

/* ---------- Accueil : diaporama -------------------------------------- */
.page-home .page-content {
  min-height: calc(var(--screen-h) - var(--header-h) - var(--footer-h));
  display: flex; align-items: center; justify-content: center;
}
.slideshow {
  position: relative; display: block;
  width: 100%; height: var(--avail-h);
}
.slideshow:active { opacity: 1; }
.slide {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  visibility: hidden;
}
.slide.is-active { visibility: visible; }
.js .slideshow:not(.is-ready) .slide:first-child { visibility: visible; }
html:not(.js) .slide:first-child { visibility: visible; }

/* ---------- Grille de projets (maçonnerie) --------------------------- */
.page-grid .page-content { padding: 3.3rem 5.4rem 5.4rem; }
.masonry { --cols: 3; --col-gap: 14.8rem; --row-gap: 14rem; }
.masonry.is-ready { display: flex; align-items: flex-start; gap: var(--col-gap); }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--row-gap); }
/* sans JavaScript : colonnes CSS simples */
.masonry:not(.is-ready) { columns: var(--cols); column-gap: var(--col-gap); }
.masonry:not(.is-ready) > .tile { break-inside: avoid; margin-bottom: var(--row-gap); }
.tile { display: block; transition: transform .35s ease; transform-origin: center; }
.tile:hover { transform: scale(.94); }
.tile img { width: 100%; }

@media (max-width: 700px) {
  .masonry { --cols: 2; --col-gap: 5.2rem; --row-gap: 5.2rem; }
}

/* ---------- Information ---------------------------------------------- */
.portrait {
  display: inline-block;
  height: calc(var(--avail-h) * .421);   /* « 42.1 % de la hauteur » sur Cargo */
  width: auto; max-width: 100%;
  vertical-align: top;
}
.grey-1, .grey-2 { color: #8f8f8f; }   /* même gris que « image producer + » */
.grey-2 { display: block; line-height: 1.45; }   /* bio : interligne un peu plus aéré */

/* Bloc photo + coordonnées, centré dans sa colonne ; texte calé à droite de la photo */
.info-card { width: fit-content; max-width: 100%; margin: 0 auto; text-align: right; }
.info-card .portrait { display: block; }
.info-card p { margin: 2.64rem 0 0; white-space: nowrap; }   /* = 2 lignes vides, comme avant */

@media (max-width: 700px) {
  .stack-mobile { grid-template-columns: minmax(0, 1fr); }
  .stack-mobile > * { grid-column: 1 / -1; }
}

/* ---------- Pages projets -------------------------------------------- */
.page-project main { min-height: var(--screen-h); }
.page-project .page-content { padding: 3.8rem; }
.cols--project { --gutter: 1.8rem; }

.project-text {               /* colonne de texte qui reste centrée à l'écran */
  position: sticky; top: 0; z-index: 10;
  height: calc(100vh - 1px);
  display: flex; align-items: center; justify-content: center;
}
.project-text > div { width: 100%; }
.project-title { font-size: 1.23em; }   /* aligné à droite, pile sur la fin des crédits */
.credits {
  font-size: 1.1rem; font-weight: 300; line-height: 1.65;
  color: rgba(157, 155, 155, .85);
}
.stack { display: flex; flex-direction: column; gap: 2.4rem; }
.stack .media img, .stack .media video { width: 100%; }

.mobile-only { display: none; }
@media (max-width: 700px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block; }
  .project-text-mobile { text-align: center; margin-bottom: 3rem; }
  .project-text-mobile .project-title { font-size: 1.07em; }
  .project-text-mobile .credits { font-size: .86em; font-weight: inherit; }
  .mobile-only .stack { gap: 2.5rem; }
}

/* ---------- Images cliquables + visionneuse plein écran -------------- */
.zoomable { cursor: zoom-in; }

.quickview {
  position: fixed; inset: 0; z-index: 1000;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem;
}
.quickview[hidden] { display: none; }
.quickview img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; cursor: pointer;
}
.qv-btn {
  position: absolute; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(87, 87, 87, .35);
  display: flex; align-items: center; justify-content: center;
}
.qv-btn svg { width: 14px; height: 14px; stroke: rgba(255, 255, 255, .9); stroke-width: 1.5; fill: none; }
.qv-btn:active { opacity: .7; }
.qv-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.qv-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.qv-close { right: 20px; top: 20px; }
body.qv-open { overflow: hidden; }

/* ---------- Apparition des images au défilement ---------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1000ms cubic-bezier(.45, .05, .33, 1),
              transform 1000ms cubic-bezier(.45, .05, .33, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .js .reveal { transform: none; }          /* mobile : simple fondu */
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tile { transition: none; }
}