/* ============================================================
   PORTFOLIO — Sylvain Delouvée
   ============================================================ */

/* ── POLICES (auto-hébergées, voir assets/fonts/) ────────────
   Newsreader 400/500 + italique 400, Cormorant Garamond 300/400.
   Sous-ensembles latin + latin-ext (couvrent le français). Licence
   SIL Open Font License : voir assets/fonts/OFL-*.txt. */
@font-face {
  font-family: 'Newsreader';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/newsreader-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/newsreader-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:      oklch(97% 0.018 70);
  --surface: oklch(99% 0.008 70);
  --fg:      oklch(22% 0.02 50);
  --muted:   oklch(50% 0.018 50);
  --border:  oklch(90% 0.014 70);
  --accent:  oklch(64% 0.13 28);
  --sw:      200px;
  --gap:     22px;
  --font-d:  'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-b:  -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --r:       4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background:  var(--bg);
  color:       var(--fg);
  font-family: var(--font-b);
  font-size:   13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display:     flex;
  flex-direction: column;
  min-height:  100dvh;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  position:   fixed;
  top:        0; left: 0;
  width:      var(--sw);
  height:     100dvh;
  padding:    28px 22px 24px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display:    flex;
  flex-direction: column;
  z-index:    50;
  overflow-y: auto;
}

.s-brand {
  display:        flex;
  align-items:    center;
  gap:            9px;
  text-decoration: none;
  color:          var(--fg);
  margin-bottom:  3px;
}

.s-brand-icon {
  flex-shrink: 0;
  opacity:     0.82;
  transition:  transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

.s-brand:hover .s-brand-icon,
.s-brand:focus-visible .s-brand-icon {
  transform: rotate(180deg) scale(1.1);
  opacity:   1;
}

.s-brand-name {
  font-family:    'Cormorant Garamond', Georgia, serif;
  font-size:      19px;
  font-weight:    300;
  line-height:    1.15;
  letter-spacing: 0.03em;
}

.s-role {
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  22px;
}

.s-sep {
  height:     1px;
  background: var(--border);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ── NAVIGATION ───────────────────────────────────────────── */
.s-nav {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
}

/* Lien simple */
.nav-item { display: block; }

.nav-link {
  display:        block;
  padding:        6px 0;
  font-family:    var(--font-b);
  font-size:      13px;
  color:          var(--muted);
  text-decoration: none;
  transition:     color 0.12s;
  cursor:         pointer;
}

.nav-item.active .nav-link,
.nav-link:hover  { color: var(--fg); }
.nav-item.active .nav-link { font-weight: 500; }

.nav-link:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Groupe avec sous-menu (lien + bouton de déploiement) */
.nav-group { list-style: none; }

.nav-group-title {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         6px;
}

.nav-group-link { flex: 1; }

.nav-group.open > .nav-group-title .nav-link { color: var(--fg); font-weight: 500; }

.nav-group-toggle {
  all:         unset;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       22px;
  height:      22px;
  font-size:   11px;
  color:       var(--border);
  transition:  transform 0.2s, color 0.12s;
}

.nav-group.open > .nav-group-title .nav-group-toggle {
  color:     var(--muted);
  transform: rotate(90deg);
}

.nav-group-toggle:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Sous-menu : hauteur animée à l'ouverture/fermeture (B3) plutôt qu'un
   display instantané, cohérent avec le reste de la sidebar déjà animée. */
.nav-sub-collapse {
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows 0.22s ease;
}

.nav-group.open .nav-sub-collapse { grid-template-rows: 1fr; }

.nav-sub {
  list-style:  none;
  margin:      2px 0 4px 0;
  padding:     0;
  display:     flex;
  flex-direction: column;
  gap:         0;
  overflow:    hidden;
  min-height:  0;
}

.nav-sub-link {
  display:        flex;
  align-items:    baseline;
  justify-content: space-between;
  padding:        4px 0 4px 10px;
  font-size:      12px;
  color:          var(--muted);
  text-decoration: none;
  transition:     color 0.12s;
  border-left:    1px solid var(--border);
}

.nav-sub-link:hover,
.nav-sub-link.active { color: var(--fg); }
.nav-sub-link.active { font-weight: 500; border-left-color: var(--accent); }

.nav-sub-link:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

.nav-count {
  font-size:           10px;
  color:               oklch(76% 0.012 72);
  font-weight:         400;
  font-variant-numeric: tabular-nums;
}

.nav-sub-empty {
  display:   block;
  padding:   4px 0 4px 10px;
  font-size: 11px;
  color:     oklch(75% 0.01 68);
  font-style: italic;
}

/* ── BOTTOM SIDEBAR ───────────────────────────────────────── */
.s-bottom {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding-top:    16px;
}

.s-instagram {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
  text-decoration: none;
  transition:     color 0.12s;
}

.s-instagram:hover        { color: var(--fg); }
.s-instagram:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

/* Petit espace visuel entre Contact et À propos, sans ligne de séparation. */
.s-about {
  margin-top:     14px;
  text-transform: none;
  font-size:      13px;
  letter-spacing: normal;
}

.s-admin-link {
  display:        flex;
  align-items:    center;
  gap:            5px;
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          oklch(76% 0.012 68);
  text-decoration: none;
  transition:     color 0.12s;
}

.s-admin-link:hover        { color: var(--muted); }
.s-admin-link:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

/* Bouton toggle mobile */
.sidebar-toggle { display: none; }

/* ── MAIN ─────────────────────────────────────────────────── */
.main {
  margin-left: var(--sw);
  flex:        1 0 auto;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  flex-shrink: 0;
  margin-left: var(--sw);
  padding:     18px 28px 22px;
  border-top:  1px solid var(--border);
}

.site-footer-text {
  font-family:    var(--font-b);
  font-size:      10.5px;
  letter-spacing: 0.03em;
  color:          var(--muted);
}

.site-footer-text a {
  color:           var(--fg);
  text-decoration: none;
}

.site-footer-text a:hover {
  color:                  var(--accent);
  text-decoration:        underline;
  text-underline-offset:  2px;
}
.site-footer-text a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.site-footer-sep { margin: 0 6px; color: var(--border); }

/* ── TEXTE D'ACCUEIL ──────────────────────────────────────── */
.welcome-text {
  padding:     32px 28px 0;
  font-family: Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, serif;
  font-size:   clamp(17px, 2.4vw, 23px);
  font-style:  italic;
  color:       var(--fg);
  line-height: 1.55;
  max-width:   640px;
}

.welcome-signature {
  padding:        10px 28px 0;
  font-family:    Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, serif;
  font-size:      clamp(14px, 1.6vw, 16px);
  font-style:     italic;
  letter-spacing: 0.04em;
  color:          var(--muted);
}

/* ── VITRINE ACCUEIL (1 grande photo + 2 petites) ────────────── */
.home-hero {
  display:     grid;
  grid-template-columns: 2fr 1fr;
  gap:         var(--gap);
  padding:     var(--gap);
  margin-top:  10px;
  align-items: start;
}

.home-hero-side {
  display:        flex;
  flex-direction: column;
  gap:            var(--gap);
}

.home-hero-small-row {
  display:        flex;
  flex-direction: column;
  gap:            var(--gap);
}

/* Photos statiques d'accueil (assets/img) : purement décoratives, sans
   légende ni effet de survol. */
.home-hero-photo {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: var(--ar, 4/3);
  object-fit:   cover;
}

.home-hero-signature {
  display:    block;
  width:      130px;
  height:     auto;
  margin-top: 2px;
}

.home-hero-text {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding-top:    12px;
  font-family:    var(--font-b);
  font-size:      13px;
  line-height:    1.5;
  color:          var(--muted);
}

/* ── PAGE HEADER (portfolio) ──────────────────────────────── */
.page-header {
  display:     flex;
  align-items: baseline;
  gap:         12px;
  padding:     28px 28px 0;
}

.page-title {
  font-family:    var(--font-d);
  font-size:      20px;
  font-weight:    500;
  letter-spacing: -0.01em;
  color:          var(--fg);
  animation:      title-reveal 0.45s ease both;
}

/* Reveal bref du titre au chargement (C1) — une seule fois, jamais répété. */
@keyframes title-reveal {
  from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

.page-count {
  font-size:  11px;
  color:      var(--muted);
}

.page-intro {
  font-family: var(--font-d);
  font-size:   14px;
  color:       var(--muted);
  line-height: 1.7;
  max-width:   480px;
}

/* Image + texte de présentation côte à côte (portfolio / séries) */
.page-intro-row {
  display:     flex;
  align-items: flex-start;
  gap:         28px;
  padding:     24px 28px 0;
}

.page-illustration {
  display:       block;
  flex:          0 0 220px;
  width:         220px;
  height:        auto;
  margin:        0;
  border-radius: var(--r);
}

@media (max-width: 680px) {
  .page-intro-row { flex-direction: column; }
  .page-illustration { flex-basis: auto; width: 100%; max-width: 220px; }
}

/* ── À PROPOS ─────────────────────────────────────────────── */
.about-page { padding-bottom: 8px; }

.about-figure {
  margin:  24px 28px 0;
  max-width: 600px;
}

.about-image {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--r);
}

.about-body {
  padding:   24px 28px 0;
  max-width: 560px;
}

.about-body p {
  font-family: var(--font-d);
  font-size:   15px;
  line-height: 1.75;
  color:       var(--fg);
  margin-bottom: 18px;
}

.about-signature-img {
  display:    block;
  width:      120px;
  height:     auto;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .about-figure, .about-body { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
  .about-signature-img { width: 100px; }
}

/* ── PUBLICATIONS (fanzines / tirages imprimés) ──────────────── */
.pub-entry + .pub-entry {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.pub-figure {
  margin:    24px 28px 0;
  max-width: 420px;
}

.pub-image {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--r);
}

.pub-body {
  padding:   24px 28px 0;
  max-width: 560px;
}

.pub-body p {
  font-family: var(--font-d);
  font-size:   15px;
  line-height: 1.75;
  color:       var(--fg);
  margin-bottom: 18px;
}

@media (max-width: 680px) {
  .pub-figure, .pub-body { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
}

/* ── PAGES LÉGALES (Mentions légales / Confidentialité) ──────── */
.legal-page { padding-bottom: 8px; }

.legal-body {
  padding:   24px 28px 8px;
  max-width: 640px;
  color:     var(--fg);
}

.legal-body h2 {
  font-family:    var(--font-d);
  font-size:      16px;
  font-weight:    500;
  letter-spacing: -0.005em;
  color:          var(--fg);
  margin-top:     32px;
  margin-bottom:  10px;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body p {
  font-size:   13px;
  line-height: 1.75;
  color:       var(--fg);
  margin-bottom: 12px;
}

.legal-body a {
  color:           var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body a:hover        { color: var(--accent); }
.legal-body a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.legal-updated {
  margin-top: 24px;
  color:      var(--muted);
  font-size:  12px;
}

@media (max-width: 680px) {
  .legal-body { padding: 20px 16px 8px; }
}

/* ── CARTES « POLAROÏD » (pages générales portfolio / séries) ──
   Chaque collection/série est présentée comme un polaroïd légèrement
   posé de travers ; au survol, la carte se redresse et se soulève. */
.frame-grid {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap:                   34px 26px;
  padding:               var(--gap) 28px 48px;
}

/* Reveal léger des cartes au scroll (B2) : appliqué au <li>, jamais à
   .frame-card, pour ne pas interférer avec son transform de hover. */
.frame-grid > li.reveal-pending {
  opacity:    0;
  transform:  translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.frame-grid > li.reveal-pending.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.frame-card {
  display:        block;
  text-decoration: none;
  background:     oklch(99% 0.006 70);
  padding:        10px 10px 0;
  border:         1px solid var(--border);
  box-shadow:     0 1px 3px oklch(0% 0 0 / 0.09);
  transform:      rotate(var(--tilt, 0deg));
  transition:     transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
  will-change:    transform;
}

.frame-grid li:nth-child(5n+1) .frame-card { --tilt: -1.6deg; }
.frame-grid li:nth-child(5n+2) .frame-card { --tilt:  1.1deg; }
.frame-grid li:nth-child(5n+3) .frame-card { --tilt: -0.5deg; }
.frame-grid li:nth-child(5n+4) .frame-card { --tilt:  1.8deg; }
.frame-grid li:nth-child(5n+5) .frame-card { --tilt: -1.1deg; }

.frame-card:hover,
.frame-card:focus-visible {
  transform:  rotate(0deg) translateY(-6px) scale(1.035);
  box-shadow: 0 16px 30px oklch(0% 0 0 / 0.2);
  z-index:    2;
  position:   relative;
  outline:    none;
}

/* L'ombre seule au survol est suffisante à la souris, mais trop discrète au
   clavier : le focus visible ajoute un contour net en plus. */
.frame-card:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}

.frame-photo {
  display:    block;
  width:      100%;
  aspect-ratio: 1 / 1;
  overflow:   hidden;
  background: oklch(88% 0.01 70);
}

.frame-photo img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     saturate(0.88);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}

.frame-card:hover .frame-photo img,
.frame-card:focus-visible .frame-photo img {
  transform: scale(1.06);
  filter:    saturate(1.05);
}

.frame-caption {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            3px;
  padding:        14px 4px 20px;
}

.frame-name {
  font-family:    var(--font-d);
  font-size:      13px;
  font-weight:    500;
  color:          var(--fg);
  letter-spacing: -0.01em;
}

.frame-count {
  font-family:    var(--font-b);
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ── GALERIE MASONRY ──────────────────────────────────────── */
.gallery {
  display:            grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows:     8px;
  grid-auto-flow:     row dense;
  gap:                var(--gap);
  padding:            var(--gap);
  margin-top:         var(--gap);
}

.photo-item {
  display:       block;
  position:      relative;
  overflow:      hidden;
  cursor:        pointer;
  border:        none;
  background:    none;
  padding:       0;
  width:         100%;
  align-self:    start;
}

.photo-item.landscape,
.photo-item.portrait {
  grid-column:  span var(--span, 1);
  width:        92%;
  justify-self: center;
}

.photo-item.portrait { width: 84%; }

/* Tuiles élargies explicitement depuis l'éditeur de grille de l'admin
   (width_units > 1) : occupent toute la largeur assignée (pas de marge centrée).
   La proportion réelle de la photo (portrait/paysage) est toujours respectée via
   --ar (hauteur_unités agrandit/recadre proportionnellement, jamais de déformation). */
.photo-item.sized {
  grid-column:  span var(--span, 1);
  width:        100%;
  justify-self: stretch;
}

.photo-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le fond clair/noir associé à une photo (réglé dans l'admin) ne s'applique
   plus à la tuile de la grille : il n'affecte que le fond de la page lorsque
   la photo est ouverte en plein écran (lightbox), cf. .lightbox.bg-dark. */
.photo-frame { position: relative; overflow: hidden; }

.photo-bg {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: var(--ar, 4/3);
  object-fit:   cover;
  background:   oklch(88% 0.01 70);
  transition:   transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.45s ease;
  filter:       saturate(0.88);
}

.photo-item:hover .photo-bg,
.photo-item:focus-visible .photo-bg {
  transform: scale(1.04);
  filter:    saturate(1.05);
}

.photo-over {
  position:  absolute;
  inset:     0;
  background: linear-gradient(
    to top,
    oklch(10% 0.01 50 / 0.72) 0%,
    oklch(10% 0.01 50 / 0.1)  45%,
    transparent 70%
  );
  opacity:   0;
  transition: opacity 0.28s ease;
  display:   flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:   16px 14px;
}

.photo-item:hover .photo-over,
.photo-item:focus-visible .photo-over { opacity: 1; }

.pt {
  font-family: var(--font-d);
  font-size:   13px;
  font-weight: 500;
  color:       oklch(97% 0.005 70);
  line-height: 1.25;
}

.pm {
  display:        flex;
  align-items:    center;
  gap:            4px;
  font-size:      9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          oklch(68% 0.006 70);
  margin-top:     3px;
}

.icon-pin { flex-shrink: 0; opacity: 0.7; }

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset:    0;
  z-index:  200;
  background: oklch(97% 0.014 70 / 0.97);
  display:    flex;
  align-items:     center;
  justify-content: center;
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.22s ease, background-color 0.22s ease;
}

.lightbox[hidden] { display: flex; }
.lightbox.open    { opacity: 1; pointer-events: all; }

/* Fond plein écran clair/noir : réglé par photo depuis l'admin (grille de
   collection), appliqué uniquement ici — jamais dans la grille elle-même. */
.lightbox.bg-dark {
  background: oklch(12% 0.01 50 / 0.98);
}
.lightbox.bg-dark .lb-title,
.lightbox.bg-dark .lb-collection { color: oklch(96% 0.006 70); }
.lightbox.bg-dark .lb-comment,
.lightbox.bg-dark .lb-loc        { color: oklch(72% 0.01 68); }
.lightbox.bg-dark .lb-close,
.lightbox.bg-dark .lb-nav        { color: oklch(96% 0.006 70); }
.lightbox.bg-dark .lb-nav        { background: oklch(20% 0.01 50 / 0.7); border-color: oklch(40% 0.01 50); }
.lightbox.bg-dark .lb-nav:hover  { background: oklch(26% 0.01 50 / 0.9); }

.lb-inner {
  position:   relative;
  width:      min(88vw, 1300px);
  max-height: 92vh;
  display:    flex;
  flex-direction: column;
  align-items: center;
}

.lb-collection {
  font-family:    var(--font-d);
  font-size:      13px;
  letter-spacing: 0.04em;
  color:          var(--muted);
  margin-bottom:  10px;
  text-align:     center;
}

.lb-photo {
  display:    block;
  width:      auto;
  height:     auto;
  max-width:  100%;
  max-height: 78vh;
  object-fit: contain;
  background: oklch(92% 0.008 70);
}

.lb-bar {
  margin-top: 12px;
  display:    flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap:  wrap;
  gap:        10px;
}

.lb-title {
  font-family:    var(--font-d);
  font-size:      15px;
  font-weight:    500;
  color:          var(--fg);
  letter-spacing: -0.01em;
  line-height:    1.2;
}

.lb-comment {
  font-size:   12px;
  color:       var(--muted);
  line-height: 1.5;
  margin-top:  4px;
}

.lb-loc {
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     4px;
}

/* Bouton tirage — plus petit et discret */
.lb-cta {
  all:       unset;
  cursor:    pointer;
  border:    1px solid var(--border);
  border-radius: var(--r);
  padding:   5px 11px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:     var(--muted);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.lb-cta:hover        { border-color: var(--accent); color: var(--accent); }
.lb-cta:focus-visible { outline: 2px solid var(--accent); }

.lb-close {
  all:       unset;
  cursor:    pointer;
  position:  absolute;
  top:  -34px; right: 0;
  font-size: 18px;
  color:     var(--muted);
  transition: color 0.12s;
  padding:   4px;
}

.lb-close:hover        { color: var(--fg); }
.lb-close:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

.lb-nav {
  all:       unset;
  cursor:    pointer;
  position:  absolute;
  top:       50%; transform: translateY(-50%);
  background: oklch(99% 0.008 70 / 0.7);
  border:    1px solid var(--border);
  border-radius: 50%;
  width:  36px; height: 36px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color:     var(--fg);
  transition: background 0.14s;
}

.lb-nav:hover        { background: oklch(99% 0.008 70 / 0.95); }
.lb-nav:focus-visible { outline: 2px solid var(--accent); }
.lb-prev { left:  -50px; }
.lb-next { right: -50px; }

/* ── DIAPORAMA (série, publication) ───────────────────────── */
.main-slideshow {
  display:         flex;
  flex-direction:  column;
}

.slideshow {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  min-height:      90dvh;
  padding:         32px 28px 40px;
}

.slide-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             14px;
  margin-bottom:   20px;
  width:           100%;
  max-width:       940px;
}

.slide-series-name {
  font-family:    var(--font-d);
  font-size:      21px;
  font-weight:    500;
  letter-spacing: -0.01em;
  color:          var(--fg);
}

.slide-counter {
  font-size:           10px;
  letter-spacing:      0.1em;
  text-transform:      uppercase;
  color:               var(--muted);
  font-variant-numeric: tabular-nums;
}

.slide-body {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  gap:             18px;
  width:           100%;
  max-width:       940px;
}

.slide-stage {
  position:   relative;
  flex:       1 1 auto;
  min-width:  0;
  max-width:  860px;
  text-align: center;
}

.slide-thumbs-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  flex:           0 0 62px;
}

.slide-thumbs {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  width:          100%;
  max-height:     72vh;
  overflow-y:     auto;
  padding:        2px;
}

.slide-next-arrow {
  all:           unset;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  width:         38px;
  height:        38px;
  border:        1px solid var(--border);
  border-radius: 50%;
  color:         var(--muted);
  transition:    transform 0.18s ease, opacity 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.slide-next-arrow:hover {
  transform:   translateX(4px);
  color:       var(--fg);
  border-color: var(--accent);
}

.slide-next-arrow:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
  transform:      translateX(4px);
}

.slide-thumb {
  all:           unset;
  cursor:        pointer;
  flex-shrink:   0;
  width:         62px;
  height:        62px;
  border-radius: var(--r);
  overflow:      hidden;
  opacity:       0.45;
  transition:    opacity 0.18s;
}

.slide-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.slide-thumb:hover        { opacity: 0.75; }
.slide-thumb.active       { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.slide-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.slide { display: none; }
.slide.active {
  display:  inline-block;
  position: relative;
  max-width: 100%;
}

.slide-img {
  display:    block;
  width:      auto;
  height:     auto;
  max-width:  100%;
  max-height: 72vh;
  opacity:    1;
  transition: opacity 0.18s ease;
}

/* Fondu-enchaîné entre deux photos (A1) : l'image sortante s'efface avant
   que la suivante ne prenne sa place, au lieu d'un changement instantané. */
.slide-img.is-fading { opacity: 0; }

.slide-loc {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            4px;
  margin-top:     10px;
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}

.slide-nav-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  max-width:       940px;
  margin-top:      16px;
  gap:             16px;
}

.slide-info {
  flex: 1;
  text-align: center;
}

.slide-title {
  font-family: var(--font-d);
  font-size:   15px;
  font-weight: 500;
  color:       var(--fg);
  line-height: 1.3;
}

.slide-caption {
  font-size:   12px;
  color:       var(--muted);
  line-height: 1.55;
  margin-top:  4px;
}

.slide-loc {
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     4px;
}

.slide-series-desc {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.65;
  margin-top:  6px;
  max-width:   560px;
}

.slide-actions {
  margin-top: 16px;
  text-align: center;
}

.slide-print-btn {
  padding: 5px 12px;
  font-size: 9px;
}

/* ── PANNEAU CONTACT ──────────────────────────────────────── */
.contact-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--sw);
  z-index:    80;
  background: var(--fg);
  overflow-y: auto;
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.contact-panel[hidden] { display: block; }
.contact-panel.open    { opacity: 1; pointer-events: all; }

.cp-inner {
  padding:   clamp(40px, 8vh, 72px) clamp(32px, 6vw, 80px);
  max-width: 580px;
}

.cp-close {
  all:       unset;
  cursor:    pointer;
  position:  absolute;
  top: 24px; right: 28px;
  font-size: 18px;
  color:     oklch(48% 0.01 55);
  transition: color 0.12s;
  padding:   4px;
}

.cp-close:hover        { color: oklch(85% 0.008 70); }
.cp-close:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

.cp-eye {
  font-size:      10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          oklch(46% 0.012 55);
  margin-bottom:  14px;
}

.cp-head {
  font-family:    var(--font-d);
  font-size:      clamp(24px, 3.5vw, 40px);
  font-weight:    500;
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          oklch(97% 0.018 70);
  margin-bottom:  10px;
}

.cp-sub {
  font-size:    13px;
  color:        oklch(60% 0.01 55);
  line-height:  1.65;
  max-width:    380px;
  margin-bottom: 32px;
}

.fg  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fgg { display: flex; flex-direction: column; gap: 5px; }
.fgg.full { grid-column: 1 / -1; }

.fl {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          oklch(48% 0.01 55);
}

.fi, .fsel, .fta {
  background:    oklch(28% 0.016 52);
  border:        1px solid oklch(35% 0.014 52);
  border-radius: var(--r);
  padding:       9px 11px;
  font-family:   var(--font-b);
  font-size:     13px;
  color:         oklch(92% 0.008 72);
  outline:       none;
  transition:    border-color 0.12s;
  width:         100%;
}

.fi::placeholder, .fta::placeholder { color: oklch(44% 0.01 55); }
.fi:focus, .fsel:focus, .fta:focus  { border-color: var(--accent); }

.fsel {
  appearance:          none;
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 11px center;
  padding-right:       28px;
}

.fsel option { background: oklch(22% 0.02 50); }
.fta { resize: vertical; min-height: 80px; }

.ffoot {
  grid-column: 1 / -1;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         10px;
  margin-top:  2px;
}

.fnote { font-size: 11px; color: oklch(46% 0.01 55); }

.fsub {
  background:    var(--accent);
  border:        none;
  border-radius: var(--r);
  padding:       10px 22px;
  font-family:   var(--font-b);
  font-size:     12px;
  font-weight:   500;
  letter-spacing: 0.04em;
  color:         oklch(98% 0.006 70);
  cursor:        pointer;
  transition:    opacity 0.15s;
}

.fsub:hover        { opacity: 0.84; }
.fsub:focus-visible { outline: 2px solid oklch(98% 0.006 70); outline-offset: 2px; }

/* ── PAGE CONTACT ─────────────────────────────────────────── */
.contact-page {
  padding-top: 8px;
}

.contact-layout {
  display:               grid;
  grid-template-columns: 45fr 55fr;
  align-items:           stretch;
  gap:                   clamp(28px, 4vw, 56px);
  padding:               clamp(24px, 4vw, 48px) clamp(24px, 5vw, 56px) clamp(40px, 6vw, 72px);
  max-width:             1180px;
}

.contact-form-col {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

.contact-title {
  font-family:    var(--font-d);
  font-size:      clamp(24px, 3.2vw, 34px);
  font-weight:    500;
  letter-spacing: -0.02em;
  color:          var(--fg);
  margin-bottom:  10px;
}

.contact-intro {
  color:         var(--muted);
  font-size:     13px;
  line-height:   1.65;
  max-width:     420px;
  margin-bottom: 28px;
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

.contact-field      { display: flex; flex-direction: column; gap: 6px; }
.contact-field-full { grid-column: 1 / -1; }

.contact-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}

.contact-input {
  background:    oklch(99% 0.006 70);
  border:        1px solid oklch(34% 0.035 48);
  border-radius: var(--r);
  padding:       11px 13px;
  font-family:   var(--font-b);
  font-size:     13px;
  color:         var(--fg);
  outline:       none;
  transition:    border-color 0.14s, box-shadow 0.14s;
  width:         100%;
}

.contact-input::placeholder { color: oklch(42% 0.02 50); }

.contact-input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px oklch(64% 0.13 28 / 0.16);
}

.contact-select {
  appearance:          none;
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23583b2c' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 13px center;
  padding-right:       32px;
}

.contact-textarea { resize: vertical; min-height: 130px; }

.contact-foot {
  grid-column: 1 / -1;
  margin-top:  22px;
}

.contact-submit {
  background:    var(--accent);
  border:        none;
  border-radius: var(--r);
  padding:       12px 32px;
  font-family:   var(--font-b);
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.04em;
  color:         oklch(98% 0.006 70);
  cursor:        pointer;
  transition:    opacity 0.15s;
}

.contact-submit:hover        { opacity: 0.86; }
.contact-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.contact-image-col {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-width:       0;
}

.contact-image {
  display:       block;
  width:         100%;
  max-width:     380px;
  height:        auto;
  object-fit:    contain;
  border-radius: var(--r);
}

.contact-caption {
  margin-top:  10px;
  font-family: var(--font-d);
  font-style:  italic;
  font-size:   13px;
  color:       var(--muted);
  text-align:  center;
}

@media (max-width: 680px) {
  .contact-layout    { grid-template-columns: 1fr; }
  .contact-grid      { grid-template-columns: 1fr; }
  .contact-image     { max-width: 240px; }
  .contact-image-col { order: 2; }
  .contact-form-col  { order: 1; }
}

/* ── FORMULAIRE : validation, piège à robots, statut d'envoi ─── */
.hp-field {
  position: absolute;
  width:    1px; height: 1px;
  overflow: hidden;
  clip:     rect(0 0 0 0);
  white-space: nowrap;
}

.contact-error {
  display:   block;
  min-height: 14px;
  font-size: 11px;
  color:     var(--danger, oklch(55% 0.18 25));
}

.contact-status {
  margin-top: 12px;
  font-size:  12.5px;
  color:      var(--muted);
}

.contact-status.is-ok    { color: oklch(45% 0.13 150); }
.contact-status.is-error { color: var(--danger, oklch(55% 0.18 25)); }

/* ── ÉTAT VIDE ────────────────────────────────────────────── */
.empty-state {
  display:     flex;
  align-items: center;
  justify-content: center;
  min-height:  60vh;
  color:       var(--muted);
  font-size:   13px;
}

/* ── MOBILE TOGGLE ────────────────────────────────────────── */
@media (max-width: 680px) {
  :root { --sw: 0px; }

  .sidebar {
    position:  fixed;
    width:     260px;
    height:    100dvh;
    top:       0; left: 0;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index:   100;
    padding-top: 56px;
  }

  .sidebar.is-open { transform: translateX(0); }

  .sidebar-toggle {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    position:        fixed;
    top:             14px; left: 16px;
    z-index:         110;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         6px;
    width:           32px;
  }

  .sidebar-toggle span {
    display:    block;
    width:      20px;
    height:     1.5px;
    background: var(--fg);
    transition: transform 0.22s, opacity 0.22s;
  }

  .sidebar-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .sidebar-toggle.is-open span:nth-child(2) { opacity: 0; }
  .sidebar-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Overlay sombre derrière la sidebar */
  .sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: oklch(10% 0.01 50 / 0.5);
    z-index:    90;
  }

  .sidebar-overlay.visible { display: block; }

  .main  { margin-left: 0; padding-top: 48px; }
  .site-footer { margin-left: 0; padding: 16px; }
  .welcome-text      { padding: 16px 16px 0; }
  .welcome-signature { padding: 8px 16px 0; }
  .page-header  { padding: 16px 16px 0; }
  .page-intro   { padding: 14px 16px 0; }
  .link-list    { padding: var(--gap) 16px 32px; }

  .gallery  { grid-template-columns: 1fr; }
  .gallery .photo-item            { grid-column: span 1; width: 100%; }

  .home-hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .home-hero-small-row { flex-direction: row; }
  .home-hero-small-row .home-hero-photo { flex: 1 1 0; min-width: 0; }
  .slideshow { padding: 16px 12px 32px; }

  .slide-body    { flex-direction: column; align-items: center; }
  .slide-thumbs-col {
    flex:  0 0 auto;
    width: 100%;
  }
  .slide-thumbs {
    flex-direction: row;
    width:          100%;
    max-height:     none;
    overflow-x:     auto;
    overflow-y:     hidden;
  }

  .lb-prev  { left:  4px; }
  .lb-next  { right: 4px; }
  .lb-inner { width: 94vw; }
  .fg       { grid-template-columns: 1fr; }
  .contact-panel { left: 0; }
}

@media (min-width: 681px) and (max-width: 1024px) {
  :root { --sw: 180px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .photo-item { grid-column: span min(var(--span, 1), 2); }
  .lb-prev { left:  4px; }
  .lb-next { right: 4px; }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery .photo-item { grid-column: span min(var(--span, 1), 3); }
}

@media (min-width: 1400px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Vitrine d'accueil réduite sur ordinateur (la photo principale et les
   petites rétrécissent ensemble, la grille conservant ses proportions). */
@media (min-width: 1025px) {
  .home-hero { max-width: 72.9%; }
  /* Les deux petites photos rétrécissent davantage : le texte remonte d'autant. */
  .home-hero-small-row { width: 85%; }
}

/* ── TRANSITIONS DE PAGE (C2) ────────────────────────────────
   Fondu léger natif entre deux pages (View Transitions API). Aucune
   bibliothèque : dégrade proprement (aucune transition) là où non supporté. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }

/* ── ACCESSIBILITÉ ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .photo-bg,
  .photo-over,
  .lightbox,
  .contact-panel,
  .sidebar,
  .s-brand-icon,
  .frame-card,
  .frame-photo img,
  .slide-img,
  .page-title,
  .nav-sub-collapse,
  .frame-grid > li { transition: none; animation: none; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}