/* Axis is the existing title face. Body text deliberately keeps the native face
   visible in the PC/iPhone references; no missing Axis/Inter/Faune fallback. */
@font-face {
  font-family: "AxisCustom";
  src: url("../fonts/axis.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --system-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; }
header.site-header { max-width: 100%; box-sizing: border-box; }
.nav-wrap { flex-wrap: wrap; overflow: visible; }
.nav-wrap a { font-family: var(--system-font); white-space: nowrap; }
.card { min-width: 0; }
.grid > *, .actions { min-width: 0; }
.link span { min-width: 0; overflow-wrap: anywhere; }
.link .icon { flex-shrink: 0; }
/* Only reserve more space when wrapping makes the fixed navigation taller. */
body:not(.page-home):not(.page-reports) main { margin-top: max(80px, calc(var(--site-nav-height, 62px) + 16px)); }
body.page-contact main { margin-top: max(84px, calc(var(--site-nav-height, 62px) + 16px)); }
body.page-article main { margin-top: max(90px, calc(var(--site-nav-height, 62px) + 16px)); }
@media (min-width: 641px) {
  /* The reports' existing title is translated down by 35px. On wrapped rows,
     add just enough real space to put it 12px below the navigation. */
  .nav-wrapped .page-reports main { padding-top: calc(var(--site-nav-height, 88px) - 23px); }
}
@media (max-width: 640px) {
  body.page-blog main { margin-top: max(95px, calc(var(--site-nav-height, 62px) + 16px)); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card h3, .card p { overflow-wrap: anywhere; }
  /* The sand article's 96vw figure otherwise extends 2px past a 320px Firefox
     viewport with a classic scrollbar. Keep its centered composition. */
  .page-article .intro-figure { max-width: var(--page-width, 100vw); }
}
.mobile-posters { display: none; }
/* Keep posters after the projects on narrow windows and touch devices, including
   landscape phones/tablets. The wide desktop background composition stays intact. */
@media (max-width: 1100px), (pointer: coarse) {
  .page-reports { height: auto; min-height: 100vh; padding-bottom: 0; }
  .page-reports main { padding-top: max(82px, calc(var(--site-nav-height, 62px) + 16px)); }
  .page-reports h1, .page-reports .intro { transform: none; }
  .page-reports .intro { margin-bottom: .75rem; }
  .page-reports #cards { margin-top: 0; }
  .page-reports::before, .page-reports::after { display: none; }
  .page-reports .after-bg { margin-top: 1.5rem; }
  .mobile-posters {
    display: block; position: relative; width: var(--page-width, 100vw);
    left: 50%; transform: translateX(-50%); margin: 2rem 0;
  }
  .mobile-posters figure { position: relative; margin: 0; }
  .mobile-posters figure + figure { margin-top: 1rem; }
  .mobile-posters picture, .mobile-posters img { display: block; width: 100%; height: auto; }
  /* Same green stripe as the original, now anchored to poster pixels (y≈176/7068). */
  .mobile-posters.physique figure::before {
    content: ""; position: absolute; z-index: -1; top: 2.49%; left: 0;
    width: 30%; height: .66%; background: #0cff00;
  }
}
/* Browsers without image-set retain the original PNG backgrounds from each page. */
/* Set the images on the pseudo-elements themselves: these relative URLs then
   resolve against THIS stylesheet, on file://, localhost and hosted subfolders.
   Keep all original sizing/position variables in the HTML unchanged. */
@supports (background-image: image-set(url("images/poster-ml-haut.webp") type("image/webp"))) {
  body.page-ml::before {
    background-image: image-set(url("images/poster-ml-haut.webp") type("image/webp"), url("../fig2_2_1.png") type("image/png"));
  }
  body.page-ml::after {
    background-image: image-set(url("images/poster-ml-bas.webp") type("image/webp"), url("../fig2_2_2.png") type("image/png"));
  }
  body.page-physics::before {
    background-image: image-set(url("images/poster-physique.webp") type("image/webp"), url("../poster_final_bassqual2.png") type("image/png"));
  }
}
/* Progressive fallbacks for the existing native image viewers. */
#image-viewer { max-height: 98vh; max-height: 98dvh; }
@supports not (height: 1dvh) { .viewer-image { max-height: calc(98vh - 5rem); } }