/* ==========================================================================
   ENDEVELOPMENT · chantier.css — the diary of a building site
   --------------------------------------------------------------------------
   "Le chantier" on mougins.html and "État actuel du projet" on
   villas-lauvas.html. Steps, the latest first. In a step the photographs and
   videos stand in rows of one height whatever their shape: every figure grows
   in proportion to its own width (--ar = width / height), and the invisible
   last item keeps a short last row from stretching. The markup comes from
   tools/chantier.py; a picture opens in the viewer below (chantier.js).
   Loaded after styles.css; needs its tokens only.
   ========================================================================== */
.cstages { display: grid; gap: clamp(40px, 7vh, 88px); margin: clamp(32px, 6vh, 72px) 0 0; padding: 0; list-style: none; }
.cstage__head { display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 24px); }
.cstage__date {
  font: 600 11px/1.4 var(--font-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-cendre);
  white-space: nowrap;
}
.cstage__title { font: 400 clamp(1.375rem, 2.2vw, 2rem)/1.1 var(--font-display); }
.cstage__rule { flex: 1 1 24px; align-self: center; height: 1px; background: currentColor; opacity: .2; }
.cstage__count { font: 300 .875rem/1.4 var(--font-body); color: var(--gris-cendre); white-space: nowrap; }
.cgrid {
  --row: clamp(200px, 23vw, 360px);          /* a wide photograph and three upright ones share a row */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(18px, 3vh, 30px);
}
.cgrid::after { content: ""; flex: 1000 1 0; }
.cshot {
  position: relative;
  flex: calc(var(--ar) * 100) 1 calc(var(--row) * var(--ar));
  aspect-ratio: var(--ar);
  margin: 0;
  overflow: clip;
  background: var(--gris-clair-40);
}
.cshot[hidden], .cstage[hidden] { display: none; }
.cshot a { position: relative; display: block; width: 100%; height: 100%; }
.cshot a:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.cshot img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
.cshot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(28, 29, 33, .74), transparent);
  color: var(--blanc);
  font: 600 10px/1.4 var(--font-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.cshot:hover .cshot__cap, .cshot:focus-within .cshot__cap { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cshot:hover img { scale: 1.04; }
}
@media (hover: none) {
  .cshot__cap { opacity: 1; }                 /* a finger cannot hover: the caption stays */
}

/* A video: its first second stands as a picture; while the tile is on screen the film itself runs over
   it without sound (chantier.js), and the badge says that it is a film and how long it is. */
.cshot__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}
.cshot a.is-playing .cshot__video { opacity: 1; }
.cshot__play {
  position: absolute;
  z-index: 1;                                /* over the running film */
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 7px 8px;
  border-radius: 999px;
  background: rgba(28, 29, 33, .62);
  color: var(--blanc);
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cshot__play svg { width: 12px; height: 12px; fill: currentColor; }

.cmore { margin-top: clamp(24px, 4vh, 48px); text-align: center; }
.cmore button { padding: 14px 0; border: 0; background: none; color: inherit; cursor: pointer; }
.cmore button:focus-visible { outline: 1px solid var(--bleu); outline-offset: 8px; }

/* ---------- the viewer ---------- */
.clight {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: clip;
  background: rgba(20, 21, 24, .97);
  color: var(--blanc);
}
.clight[open] { display: grid; place-items: center; animation: clight-in 320ms var(--ease-out) both; }
.clight::backdrop { background: rgba(20, 21, 24, .6); }
@keyframes clight-in { from { opacity: 0; } }
.clight__fig { display: grid; justify-items: center; gap: 14px; margin: 0; }
.clight__fig img, .clight__fig video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1680px);
  max-height: calc(100svh - 132px);
  object-fit: contain;
}
.clight__fig video { background: #000; }
.clight__fig img[hidden], .clight__fig video[hidden] { display: none; }
.clight__fig .is-swap { animation: clight-swap 360ms var(--ease-out) both; }
@keyframes clight-swap { from { opacity: 0; transform: scale(.985); } }
.clight__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 18px;
  min-height: 1.5em;
  padding-inline: 16px;
  font: 300 .9375rem/1.5 var(--font-body);
  text-align: center;
}
.clight__count { font: 600 11px/1 var(--font-ui); letter-spacing: .18em; opacity: .7; white-space: nowrap; }
.clight__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), scale 200ms var(--ease-out);
}
.clight__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.clight__btn--close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.clight__btn--prev { top: calc(50% - 24px); left: 16px; }
.clight__btn--next { top: calc(50% - 24px); right: 16px; }
.clight__btn:active { scale: .96; }
.clight__btn:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.clight[data-single] .clight__btn--prev, .clight[data-single] .clight__btn--next { display: none; }
@media (hover: hover) and (pointer: fine) {
  .clight__btn:hover { background: rgba(255, 255, 255, .18); }
}

/* ---------- narrow screens and reduced motion ---------- */
@media (max-width: 720px) {
  .cgrid { --row: 44vw; }
  .cstage__head { flex-wrap: wrap; row-gap: 6px; }
  .cstage__date { flex-basis: 100%; }
  .clight__fig img, .clight__fig video { max-height: calc(100svh - 196px); }
  .clight__btn--prev, .clight__btn--next { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
  .clight__btn--prev { left: calc(50% - 60px); }
  .clight__btn--next { right: calc(50% - 60px); }
  .clight__fig { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .cshot img { transition: none; }
  .cshot__video { transition: none; }
  .clight__fig .is-swap { animation-name: clight-in; }      /* a plain fade, no scale */
}