* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* place réservée au titre + 2 lignes de texte, pour que la 1re image tienne entière à l'écran */
  --head: 104px;
  --colw: min(100%, calc((100vh - 56px - var(--head)) * var(--rn)));
}
/* toujours en clair : fond blanc même si le téléphone ou le navigateur est en mode sombre */
html { color-scheme: only light; }
html, body { background: #fff; color: #111; overflow-anchor: none; }
body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
u { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-s { font-size: .85em; }
.t-l { font-size: 1.2em; }
.t-xl { font-size: 1.5em; }

/* Colonne gauche fixe */
.side {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 420px;
  padding: 28px 28px 40px;
  overflow-y: auto;
}
.name { display: block; margin-bottom: var(--name-gap, 12px); }
.name img { display: block; width: 100%; height: auto; }
.name span { font-weight: 400; font-size: 20px; text-transform: uppercase; }

.menu { display: flex; justify-content: center; gap: 22px; margin-bottom: 40px; }
.menu a { font-weight: var(--menu-weight, 400); }
.works { display: grid; grid-template-columns: max-content 16px; column-gap: var(--icon-gap, 14px); width: fit-content; }
.works a { font-weight: 300; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.works a:hover .ico, .works a.on .ico { opacity: 1; }
img.ico { object-fit: contain; }
.ico-m { display: inline-block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.menu a, .works a { padding: 1px 0; width: fit-content; }
.menu a:hover, .works a:hover span, .menu .on, .works .on span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* couleurs au survol et de l'élément sélectionné (réglées dans le backoffice) */
.menu a:hover, .works a:hover { color: var(--hover-color, inherit); }
.menu a.on, .works a.on { color: var(--active-color, inherit); }

/* Colonne droite : images défilantes, toutes à la même largeur */
.main { margin-left: 420px; padding: 28px 28px 28px 0; min-height: 100vh; }
.gallery { display: flex; flex-direction: column; gap: 28px; }
.shot {
  aspect-ratio: var(--ratio);
  width: var(--colw);
  background: #f3f3f3;
  position: relative;
}
.shot a, .shot img { display: block; width: 100%; height: 100%; }
.shot img { object-fit: cover; }
/* Portrait : même largeur que les paysages, image entière (on défile dessus) */
.shot.portrait { aspect-ratio: auto; }
.shot.portrait a, .shot.portrait img { height: auto; }

/* Deux images côte à côte : même hauteur, bords extérieurs alignés sur la colonne,
   hauteur limitée à l'écran pour voir les photos en entier ; l'écart du milieu s'ajuste */
.pair {
  display: flex; justify-content: space-between;
  width: var(--colw);
  --h: min(calc((var(--colw) - 14px) / var(--sum)), calc(100vh - 56px));
}
.pair figure { width: calc(var(--h) * var(--ar)); aspect-ratio: var(--ar); background: #f3f3f3; flex: none; }
.pair img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Défilement continu d'une œuvre à la suivante */
.work + .work { margin-top: 120px; }
.next-sentinel { height: 1px; }

/* Légendes : texte plus petit, collé sous l'image qui précède */
.legend {
  width: var(--colw);
  margin-top: -20px;
  font-size: 12px; line-height: 1.45;
}
.legend + .legend { margin-top: -24px; }
.legend a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* En-tête d'œuvre : titre, texte limité à 2 lignes et justifié, « … more » au bout */
.work-head { margin-bottom: 28px; width: var(--colw); }
.work-head h1 { font-weight: 400; font-size: 15px; margin-bottom: 10px; }
.intro { position: relative; }
.work-head .text { max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.text.clamp:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.more {
  position: absolute; right: 0; bottom: 0;
  font: inherit; color: inherit; border: 0; cursor: pointer;
  background: #fff; padding: 0 0 0 4px;
  box-shadow: -24px 0 16px -4px #fff;
}
.more-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.is-open .more { position: static; box-shadow: none; padding: 0; margin-top: 2px; display: block; }
.is-open .more-dots { display: none; }
.text { max-width: 720px; }
.text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Bouton de langue (FR / EN) */
.lang-switch {
  position: fixed; top: 24px; right: 28px; z-index: 30;
  font-size: 13px; font-weight: 400; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 3px; background: rgba(255,255,255,.88);
}
.lang-switch:hover { color: var(--hover-color, inherit); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* lu par Google et les lecteurs d'écran, invisible à l'écran */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sous-parties d'une œuvre dans le menu (avec alinéa) */
.works a.sub span { padding-left: 16px; font-size: .9em; }
/* picto de la sous-partie : décalable vers la gauche (réglage dans le backoffice) */
.works a.sub .ico { transform: translateX(var(--sub-ico-x, 0px)); }

/* Grille d'images d'une sous-partie : images entières, tailles libres */
.sub-title { font-weight: 400; font-size: 15px; margin-bottom: 18px; }
.sub-sep { opacity: .5; }
.mgrid { columns: 3 220px; column-gap: 14px; }
.mgrid figure { break-inside: avoid; margin: 0 0 12px; position: relative; }
.mgrid img { background: #f3f3f3; }
.mgrid img { display: block; width: 100%; height: auto; }
.mgrid { --gg: var(--g-gap, 26px); }
.mgrid.js { columns: auto; column-gap: var(--gg); padding-bottom: 20px; }
/* même espace à l'horizontale et à la verticale (réglable dans le backoffice) ;
   le numéro se loge dans l'espace sous l'image */
.mrow { display: flex; gap: var(--gg); margin-bottom: max(22px, var(--gg)); }
.mgrid .mrow figure { flex: none; margin: 0; }
/* ombre portée autour de chaque image */
.mgrid img { box-shadow: 1px 2px 9px rgba(0,0,0,var(--g-shadow, .7)); }
.gnum {
  position: absolute; left: 0; top: 100%; margin-top: 5px;
  font-family: 'Roboto', Helvetica, Arial, sans-serif; font-weight: 300;
  font-size: 10px; line-height: 1.2; color: #111; text-decoration: none; opacity: .75;
}
a.gnum:hover { text-decoration: underline; opacity: 1; }
.mgrid figure.hl img { outline: 2px solid var(--active-color, #111); outline-offset: 2px; }
/* liste des légendes (colonne de gauche sur ordinateur, sous la grille sur téléphone) */
.glegends { list-style: none; margin-top: 32px; font-size: 12px; line-height: 1.45; display: grid; gap: 6px; }
.glegends li { display: grid; grid-template-columns: 22px 1fr; gap: 2px; padding: 2px 4px; margin: 0 -4px; border-radius: 3px; transition: background .3s; }
.glegends li.hl { background: #f0f0f0; }
.gl-num { text-decoration: none; opacity: .7; }
.gl-num:hover { opacity: 1; text-decoration: underline; }
.glegends-bottom { display: none; }

/* Image en grand écran */
.gallery img, .mgrid img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 5000; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb-img { max-width: calc(100vw - 140px); max-height: calc(100vh - 80px); width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 4px 30px rgba(0,0,0,.25); }
.lb button { position: absolute; background: none; border: 0; font: inherit; font-weight: 300; color: #111; cursor: pointer; padding: 10px 16px; line-height: 1; opacity: .7; }
.lb button:hover { opacity: 1; }
.lb-x { top: 14px; right: 14px; font-size: 34px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 46px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-single .lb-prev, .lb-single .lb-next { display: none; }
.lb-n { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; opacity: .7; }
.lb-on, .lb-on body { overflow: hidden; }

/* Notes de bas de page */
.fnref { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 1px; }
.fnref a { text-decoration: none !important; padding: 0 1px; }
.fnref a:hover { text-decoration: underline !important; }
.footnotes {
  list-style: none; counter-reset: fn;
  margin-top: 22px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.25);
  font-size: 12px; line-height: 1.5; text-align: left; hyphens: manual;
}
.footnotes li { counter-increment: fn; position: relative; padding-left: 22px; margin-bottom: 4px; }
.footnotes li::before { content: counter(fn); position: absolute; left: 0; top: 0; }
.footnotes li:target { background: #f3f3f3; }
.fnback { text-decoration: none !important; margin-left: 4px; }
:target { scroll-margin-top: 80px; }

/* Barre du haut sur téléphone */
.mbar { display: none; }

/* Téléphone / tablette */
@media (max-width: 820px) {
  :root { --colw: 100%; }
  /* tailles de texte sur téléphone (réglables dans le backoffice, onglet Aperçu mobile) */
  body { font-size: calc(15px * var(--m-text, .85)); }
  .work-head h1 { font-size: calc(15px * var(--m-text, .85)); }
  .legend { font-size: calc(12px * var(--m-legend, .9)); }
  .mbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; z-index: 20;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    background: #fff;
  }
  .mbar-name img { display: block; height: 20px; width: auto; }
  .mbar-name { font-weight: 400; text-transform: uppercase; font-size: 13px; }
  .lang-switch { top: calc(14px + env(safe-area-inset-top, 0px)); right: 76px; background: none; font-size: 14px; }
  .mbar-menu { font: inherit; font-weight: 400; background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; }

  /* Le menu complet s'ouvre par-dessus la page */
  .side {
    display: none;
    position: fixed; top: calc(44px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; z-index: 19;
    width: auto; padding: 6px 16px 40px; background: #fff; overflow-y: auto;
  }
  .menu-open .side { display: block; }
  .menu-open { overflow: hidden; }
  .side .name { display: none; }
  .menu { margin-bottom: 28px; gap: 24px; width: var(--namew, auto); }
  .menu a, .works a { padding: 4px 0; font-size: 17px; }
  .works { grid-template-columns: max-content 18px; }
  .ico { width: 17px; height: 17px; }

  .main { margin-left: 0; padding: 4px 16px 24px; min-height: 0; }
  .gallery { gap: 16px; }
  .mgrid { columns: 2 140px; column-gap: 10px; }
  .mgrid figure { margin-bottom: 10px; }
  .mgrid { --gg: calc(var(--g-gap, 26px) * .6); }
  .glegends-bottom { display: grid; margin-top: 20px; }
  .glegends-side { display: none; }
  .lb-img { max-width: 100vw; max-height: calc(100vh - 110px); }
  .lb-prev, .lb-next { top: auto; bottom: 4px; transform: none; font-size: 40px; }
  .pair { --h: calc((100% - 8px) / var(--sum)); }
  .work + .work { margin-top: 64px; }
  .work-head { margin-bottom: 16px; }
  .legend { margin-top: -10px; }
  .legend + .legend { margin-top: -14px; }
}