/* Les 40 ans de Béni — design tokens & components
   Charte reprise du canevas de maquette (artefact "Les 40 ans de Béni") :
   fond crème, encre, accent or, Fraunces (titres, italique) + DM Sans (texte). */

:root {
  --bn-cream: #FAF7F1;
  --bn-cream-2: #EFE9DE;
  --bn-ink: #17191E;
  --bn-ink-soft: #5C5F66;
  --bn-muted: #9A917E;
  --bn-border: #E7E2D8;
  --bn-border-strong: #D8D2C5;
  --bn-gold: #F2C230;
  --bn-amber: #7A5C00;
  --bn-tile-1: #ECE6DA;
  --bn-tile-2: #E3DCCD;
  --bn-tile-3: #F4EBCB;
  --bn-tile-4: #F1E6C2;
  --bn-white: #FFFFFF;
  --bn-radius: 14px;
  --bn-radius-lg: 16px;
  --bn-shadow: 0 1px 2px rgba(23, 25, 30, 0.04), 0 12px 32px rgba(23, 25, 30, 0.06);
  --bn-font-display: 'Fraunces', Georgia, serif;
  --bn-font-body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bn-cream);
  color: var(--bn-ink);
  font-family: var(--bn-font-body);
}

a { color: var(--bn-amber); }
a:hover { color: var(--bn-ink); }

h1, h2 {
  font-family: var(--bn-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.bn-italic { font-style: italic; }

.bn-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Header / nav ---------- */

.bn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 80px;
  border-bottom: 1px solid var(--bn-border);
  background: var(--bn-white);
}

.bn-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bn-ink);
}

.bn-brand-badge {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bn-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.bn-brand-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bn-ink-soft);
}

.bn-brand-name {
  font-family: var(--bn-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.bn-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.bn-nav-link {
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  color: var(--bn-ink);
}

.bn-nav-link.is-active { background: var(--bn-tile-3); }

.bn-nav-lang {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--bn-border-strong);
  margin-left: 8px;
}

.bn-nav-lang a {
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--bn-ink-soft);
}

.bn-nav-lang a.is-active { background: var(--bn-ink); color: var(--bn-white); }

.bn-logout-form { margin: 0; }

.bn-logout-btn {
  margin-left: 4px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--bn-ink-soft);
  border: 1px solid var(--bn-border-strong);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

/* Hamburger button — hidden by default, shown only at/below the mobile breakpoint
   (see the @media (max-width: 900px) block below), where it toggles `.bn-nav`. */
.bn-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--bn-border-strong);
  background: var(--bn-white);
  cursor: pointer;
}

.bn-nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--bn-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bn-nav-toggle.is-open .bn-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bn-nav-toggle.is-open .bn-nav-toggle-bar:nth-child(2) { opacity: 0; }
.bn-nav-toggle.is-open .bn-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */

.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  font-family: inherit;
  border: 0;
  cursor: pointer;
}

.bn-btn-primary { background: var(--bn-ink); color: var(--bn-white); }
.bn-btn-secondary { background: var(--bn-white); color: var(--bn-ink); border: 1px solid var(--bn-border-strong); }
.bn-btn-gold { background: var(--bn-gold); color: var(--bn-ink); }

/* ---------- Hero (accueil) ---------- */

.bn-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  padding: 88px 80px 96px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.bn-hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bn-font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--bn-amber);
}

.bn-hero h1 { font-size: 64px; line-height: 1.05; }

.bn-hero-highlight {
  font-style: italic;
  background: linear-gradient(transparent 64%, var(--bn-gold) 64%, var(--bn-gold) 90%, transparent 90%);
  padding: 0 4px;
}

.bn-hero-lead { font-size: 19px; line-height: 1.65; color: var(--bn-ink-soft); }

.bn-hero-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

.bn-hero-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 420px;
}

.bn-tile {
  border-radius: var(--bn-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bn-muted);
  font-size: 14px;
  overflow: hidden;
}

.bn-tile img { width: 100%; height: 100%; object-fit: cover; }
.bn-tile.span-2 { grid-row: span 2; }

/* ---------- Sections / cards ---------- */

.bn-section { padding: 0 80px 96px; display: flex; flex-direction: column; gap: 32px; }

.bn-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.bn-section-head p { margin: 4px 0 0; font-size: 17px; color: var(--bn-ink-soft); }

.bn-link-more { font-weight: 700; text-decoration: none; padding: 12px 0; white-space: nowrap; }

.bn-card {
  background: var(--bn-white);
  border: 1px solid var(--bn-border);
  box-shadow: var(--bn-shadow);
  border-radius: var(--bn-radius);
}

/* ---------- Chasse aux canards (compteur Accueil) ---------- */

.bn-duck-card { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.bn-duck-card h2 { font-size: 24px; }
.bn-duck-card p { margin: 6px 0 0; color: var(--bn-ink-soft); }

.bn-duck-heading { display: flex; align-items: flex-start; gap: 16px; }
.bn-duck-icon { width: 40px; height: 40px; flex-shrink: 0; fill: var(--bn-gold); }
.bn-duck-icon .bn-duck-eye { fill: var(--bn-ink); }

.bn-duck-count-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bn-duck-count { font-family: var(--bn-font-display); font-size: 40px; font-weight: 500; line-height: 1; }
.bn-duck-goal { font-size: 17px; color: var(--bn-ink-soft); margin-right: auto; }

.bn-duck-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--bn-cream-2);
  overflow: hidden;
}
.bn-duck-progress-bar {
  height: 100%;
  background: var(--bn-gold);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.bn-album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.bn-album-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--bn-ink);
  padding: 12px 12px 20px;
}

.bn-album-cover {
  height: 220px;
  border-radius: var(--bn-radius);
  background: var(--bn-tile-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bn-muted);
  overflow: hidden;
}

.bn-album-cover img { width: 100%; height: 100%; object-fit: cover; }

.bn-album-card-body { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; }
.bn-album-card-title { font-family: var(--bn-font-display); font-weight: 500; font-size: 22px; }
.bn-album-card-meta { font-size: 14px; color: var(--bn-ink-soft); }

.bn-guestbook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.bn-quote {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bn-quote p { margin: 0; font-family: var(--bn-font-display); font-style: italic; font-size: 21px; line-height: 1.25; white-space: pre-line; overflow-wrap: anywhere; }
.bn-quote-author { font-size: 14px; color: var(--bn-ink-soft); }

.bn-quote-cta {
  border: 1.5px dashed var(--bn-border-strong);
  background: transparent;
  border-radius: var(--bn-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bn-amber);
  font-weight: 700;
}

/* ---------- Footer ---------- */

.bn-footer {
  margin-top: auto;
  padding: 36px 80px;
  border-top: 1px solid var(--bn-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--bn-ink-soft);
  background: var(--bn-white);
}

/* ---------- Login ---------- */

.bn-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* ---------- Doodles décoratifs (oiseau du logo, en fond) ---------- */

.bn-doodle {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  fill: none;
  stroke: var(--bn-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.06;
}

.bn-doodle circle { fill: var(--bn-ink); stroke: none; }

.bn-doodle-hero-1 { top: -32px; right: 24px; width: 220px; height: auto; transform: rotate(-8deg); }
.bn-doodle-hero-2 { bottom: -18px; left: 4%; width: 130px; height: auto; transform: rotate(10deg) scaleX(-1); opacity: 0.045; }
.bn-doodle-login-1 { top: 10%; right: 6%; width: 260px; height: auto; transform: rotate(-6deg); }

.bn-login-form {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bn-field { display: flex; flex-direction: column; gap: 8px; }
.bn-field label { font-weight: 500; font-size: 15px; }

.bn-input, .bn-textarea {
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--bn-border-strong);
  border-radius: 10px;
  background: var(--bn-cream);
  font-size: 16px;
  font-family: inherit;
  color: var(--bn-ink);
}

.bn-input { height: 50px; }
.bn-textarea { padding: 14px 16px; resize: vertical; }
.bn-login .bn-input { height: 52px; background: var(--bn-white); font-size: 17px; }

.bn-error { color: #B3261E; font-size: 15px; margin: 0; }

/* ---------- Albums page ---------- */

.bn-chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

.bn-chip {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--bn-border-strong);
  background: var(--bn-white);
  color: var(--bn-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.bn-chip.is-active { border-color: var(--bn-ink); background: var(--bn-ink); color: var(--bn-white); font-weight: 700; }

.bn-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.bn-photo {
  height: 190px;
  border: 0;
  border-radius: var(--bn-radius);
  background: var(--bn-tile-1);
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  display: block;
  width: 100%;
  position: relative;
}

.bn-photo img, .bn-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.bn-photo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bn-white);
  background: rgba(23, 25, 30, 0.25);
  pointer-events: none;
}

/* Compteurs coeur/commentaires en pastille, coin bas-droit de chaque vignette — n'apparaît que
   si la photo a au moins une interaction (voir AlbumModel.LikeCounts/CommentCounts). */
.bn-photo-stats {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.bn-photo-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(23, 25, 30, 0.55);
  color: var(--bn-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.bn-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(23, 25, 30, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.bn-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* En plein écran natif, le navigateur peint déjà un fond noir derrière (::backdrop) : un fond
   plein ici évite tout effet de superposition avec la teinte semi-transparente habituelle. */
.bn-lightbox:fullscreen {
  background: var(--bn-ink);
}

.bn-lightbox-top {
  width: 100%;
  max-width: 1040px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--bn-cream);
}

.bn-lightbox-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 230, 0.4);
  background: transparent;
  color: var(--bn-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Lecture automatique / plein écran : contrairement au coeur (qui ne change que la couleur de
   son icône), ce sont des interrupteurs de mode — un fond plein les rend reconnaissables au
   premier coup d'oeil comme "activé", sans avoir à distinguer l'icône play/pause ou
   agrandir/réduire elle-même. aria-pressed est déjà la source de vérité posée par site.js. */
.bn-lightbox-toggle-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bn-lightbox-toggle-btn[aria-pressed="true"] {
  background: var(--bn-gold);
  border-color: var(--bn-gold);
  color: var(--bn-ink);
}

/* Sélecteur de vitesse de la lecture automatique — même hauteur/pilule que les boutons coeur/
   commentaires, mais du texte plutôt qu'une icône seule donc largeur auto. */
.bn-lightbox-speed-select {
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(246, 239, 230, 0.4);
  background: transparent;
  color: var(--bn-cream);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Le fond de la liste déroulante native n'hérite pas de `background:transparent` du <select> —
   sans fond explicite ici, un thème système sombre affiche ce texte foncé sur un fond natif noir
   (illisible). Fond clair + texte foncé garantit la lisibilité quel que soit le thème du système. */
.bn-lightbox-speed-select option { background: var(--bn-cream); color: var(--bn-ink); }

.bn-lightbox-body { position: relative; width: 100%; max-width: 1040px; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 20px; }

.bn-lightbox-nav {
  position: relative;
  z-index: 2;                 /* au-dessus du canard de chargement (.bn-lightbox-loading) */
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--bn-cream);
  color: var(--bn-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* `.bn-lightbox-image` is a pure DOM hook for site.js (the `.is-switching` crossfade target) —
   `display: contents` removes its own box entirely, so the img/video below become direct flex
   items of `.bn-lightbox-body`. That's what makes the frame hug each photo's actual size: as a
   plain flex item (default flex-grow/shrink:0/1, align-self:auto → the row's align-items:center)
   its box is its own natural/max-content size, not stretched to fill the row — a portrait photo
   no longer sits inside a wide box with empty color bars on the sides, nor a landscape photo
   inside a tall box with bars above/below. `.bn-lightbox-body`'s definite width (max 1040px) and
   height (flex-grow resolved against the fixed-height `.bn-lightbox` column) is what the
   max-width/max-height percentages below resolve against, so a huge photo still never overflows
   the viewport, and `object-fit: contain` keeps the aspect ratio — nothing ever gets cropped. */
.bn-lightbox-image {
  display: contents;
}

.bn-lightbox-image img,
.bn-lightbox-image video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: var(--bn-tile-1);
  transition: opacity 0.32s ease;
}

.bn-lightbox-image video { display: none; }

/* Chargement d'une photo (les originaux font 4 à 7 Mo) : le même canard sur fond blanc que les miniatures
   (.bn-loading, section « Miniatures »), posé sur la zone de la photo. site.js pose .is-loading sur la visionneuse
   avant de changer `src` et le retire à l'événement `load` ; pendant ce temps la photo précédente est masquée
   (sans cela elle réapparaîtrait après le fondu, le temps que la suivante arrive). .is-error : canard grisé,
   comme une miniature en échec. Aucun canard pour une vidéo : son aperçu s'affiche déjà. */
.bn-loading.bn-lightbox-loading {   /* 2 classes : `.bn-loading` (plus bas dans la feuille) ne doit pas l'écraser */
  display: none;
  inset: 0 76px;              /* entre les deux boutons précédent/suivant (56 px + 20 px d'écart) */
  z-index: 1;
  border-radius: 16px;
  --bn-duck-size: 96px;
  font-size: 15px;
}
.bn-lightbox.is-loading .bn-lightbox-loading { display: flex; }
/* Pendant le chargement la photo (invisible, de taille encore inconnue) sort du flux : les boutons précédent/suivant
   se placent alors aux bords de la zone, de part et d'autre du canard, au lieu de flotter là où la photo précédente
   les avait laissés (sous le panneau blanc). Ils reviennent contre la photo dès qu'elle est chargée. */
.bn-lightbox.is-loading .bn-lightbox-body { justify-content: space-between; }
.bn-lightbox.is-loading .bn-lightbox-image img { position: absolute; opacity: 0; pointer-events: none; }
.bn-lightbox.is-error .bn-lightbox-loading::before { animation: none; opacity: 0.35; }
.bn-lightbox.is-error .bn-lightbox-loading .bn-loading-text { visibility: hidden; }

/* Glissement au doigt (site.js) : les mouvements horizontaux sont pour nous, le navigateur garde le défilement
   vertical et le pincement ; et rien ne « déborde » sur la page de l'album derrière la visionneuse. */
.bn-lightbox { overscroll-behavior: contain; }
.bn-lightbox-body { touch-action: pan-y pinch-zoom; }

/* Crossfade while stepping prev/next: site.js toggles `.is-switching` off the current media
   right before swapping `src`, then removes it once the new photo is in place. Pure opacity —
   pas de zoom/scale : un simple fondu enchaîné, plus discret qu'un mouvement. */
.bn-lightbox-image.is-switching img,
.bn-lightbox-image.is-switching video {
  opacity: 0;
}

@keyframes bn-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Runs once whenever `.is-open` is added (opening the lightbox), not on every prev/next step.
   Targets img/video directly, not `.bn-lightbox-image` (display: contents, no box of its own to
   animate). */
.bn-lightbox.is-open .bn-lightbox-image img,
.bn-lightbox.is-open .bn-lightbox-image video { animation: bn-lightbox-in 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .bn-lightbox,
  .bn-lightbox-image img,
  .bn-lightbox-image video {
    transition: none;
  }
  .bn-lightbox.is-open .bn-lightbox-image img,
  .bn-lightbox.is-open .bn-lightbox-image video { animation: none; }
}

/* ---------- Guestbook ---------- */

.bn-livreor-grid { padding: 72px 80px 80px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.bn-livreor-form { grid-column: span 1; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.bn-livreor-form .bn-textarea { width: 100%; }
.bn-livreor-list { grid-column: span 2; display: flex; flex-direction: column; gap: 20px; }
.bn-livreor-list-head { display: flex; justify-content: space-between; align-items: baseline; }
.bn-livreor-list-head h2 { font-size: 30px; }
.bn-livreor-messages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.bn-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-amber); }

/* ---------- Dark band (utility) ---------- */

.bn-band-dark { background: var(--bn-ink); color: var(--bn-cream); border-radius: var(--bn-radius); }
.bn-band-dark .bn-eyebrow { color: var(--bn-gold); }
.bn-band-dark p { color: #C9C6BE; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .bn-header { padding: 14px 20px; position: relative; }
  .bn-brand-name { font-size: 24px; }
  .bn-nav-toggle { display: inline-flex; }
  .bn-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 20px 20px;
    background: var(--bn-white);
    border-bottom: 1px solid var(--bn-border);
    box-shadow: var(--bn-shadow);
    z-index: 40;
  }
  .bn-nav.is-open { display: flex; }
  .bn-nav-lang { margin: 8px 0 0; }
  .bn-logout-form { margin-top: 4px; }
  .bn-logout-btn { width: 100%; }
  .bn-hero { grid-template-columns: 1fr; }
  /* minmax(0, ...) et non 1fr : sinon la colonne s'élargit jusqu'à la largeur naturelle du champ de saisie ou
     d'un mot très long, et la page défile horizontalement. Le padding 80px du bureau est réduit comme les autres. */
  .bn-livreor-grid { grid-template-columns: minmax(0, 1fr); padding: 32px 20px 48px; gap: 32px; }
  .bn-livreor-form { padding: 24px 20px; }
  .bn-hero { padding: 32px 20px; gap: 24px; }
  .bn-hero h1 { font-size: 38px; }
  .bn-section { padding: 0 20px 48px; }
  .bn-album-grid, .bn-guestbook-grid, .bn-photo-grid, .bn-livreor-messages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-livreor-form, .bn-livreor-list { grid-column: span 1; }
  .bn-footer { padding: 24px 20px; flex-direction: column; }
  .bn-doodle { display: none; }
  .bn-lightbox { padding: 16px; gap: 14px; }
  /* Sur téléphone les boutons précédent/suivant se posent SUR la photo, à ses bords, au lieu de la flanquer :
     en ligne, la photo (max-width 100 %) prenait toute la largeur et les repoussait hors de l'écran. */
  .bn-lightbox-body { gap: 0; }
  .bn-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(246, 239, 230, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  #bn-lightbox-prev { left: 8px; }
  #bn-lightbox-next { right: 8px; }
  .bn-loading.bn-lightbox-loading { inset: 0; }
}

@media (max-width: 560px) {
  .bn-album-grid, .bn-guestbook-grid, .bn-photo-grid, .bn-livreor-messages { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lightbox: likes & comments (ajout — n'altère aucune règle .bn-lightbox* ci-dessus) ---------- */

.bn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icônes coeur/commentaires : mêmes ronds que close/download, mais élargis en pastille pour
   porter aussi le compteur — nouvelle classe ajoutée en plus de .bn-lightbox-icon-btn, pas de
   modification de cette dernière. */
.bn-lightbox-like-btn,
.bn-lightbox-comments-btn {
  width: auto;
  min-width: 48px;
  padding: 0 16px;
  border-radius: 999px;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.bn-lightbox-like-btn:disabled,
.bn-lightbox-comment-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.bn-lightbox-like-btn svg { transition: transform 0.18s ease; }
.bn-lightbox-like-btn.is-liked svg { fill: var(--bn-gold); stroke: var(--bn-gold); }

@keyframes bn-lightbox-like-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.bn-lightbox-like-btn.is-pulsing svg { animation: bn-lightbox-like-pulse 0.36s ease; }

@media (prefers-reduced-motion: reduce) {
  .bn-lightbox-like-btn svg { transition: none; }
  .bn-lightbox-like-btn.is-pulsing svg { animation: none; }
}

/* Laisse les boutons de la barre du haut passer à la ligne plutôt que déborder quand coeur +
   commentaires s'ajoutent à télécharger/fermer sur un très petit écran ; la légende tronque au
   besoin pour leur laisser la place. */
.bn-lightbox-top { flex-wrap: wrap; row-gap: 8px; }
#bn-lightbox-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-right: 12px; }

/* Panneau de commentaires : masqué par défaut, affiché en pied de visionneuse quand on bascule
   .is-comments-open sur #bn-lightbox (bouton bn-lightbox-comments-toggle, voir site.js). Comme
   .bn-lightbox-body a déjà `flex:1 1 auto; min-height:0`, ce panneau prend sa place dans la
   colonne flex du lightbox et réduit d'autant l'espace laissé à l'image — sans toucher aux
   règles existantes de .bn-lightbox-body/.bn-lightbox-image. */
.bn-lightbox-comments {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1040px;
  max-height: 280px;
  flex-shrink: 0;
  background: var(--bn-cream);
  color: var(--bn-ink);
  border-radius: var(--bn-radius);
  padding: 16px 20px 18px;
}

.bn-lightbox.is-comments-open .bn-lightbox-comments { display: flex; }

.bn-lightbox-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.bn-lightbox-comment { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.4; }
.bn-lightbox-comment-author { font-weight: 700; }
.bn-lightbox-comment-message { color: var(--bn-ink-soft); white-space: pre-line; }
.bn-lightbox-comment-time { flex-basis: 100%; font-size: 12px; color: var(--bn-muted); }
.bn-lightbox-comments-empty { margin: 0; color: var(--bn-ink-soft); font-size: 14px; }

.bn-lightbox-comment-form {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bn-border);
}

.bn-lightbox-comment-form-row { display: flex; gap: 10px; align-items: flex-end; }
.bn-lightbox-comment-form-row .bn-textarea { flex: 1 1 auto; min-height: 44px; }
.bn-lightbox-comment-form-row .bn-btn { min-height: 44px; flex-shrink: 0; }
.bn-lightbox-comment-form .bn-error { font-size: 13px; }

@media (max-width: 900px) {
  .bn-lightbox-comments { max-height: 42vh; padding: 14px 16px 16px; }
  .bn-lightbox-comment-form-row { flex-wrap: wrap; }
  .bn-lightbox-comment-form-row .bn-btn { width: 100%; }
}

/* ---------- Miniatures : placeholder "canard en plastique" pendant le chargement ---------- */

/* Chaque emplacement de miniature (.bn-photo, .bn-tile, .bn-album-cover) porte .bn-thumb-slot.
   Le placeholder (.bn-loading : fond blanc, canard, message) est DERRIÈRE l'<img> ; l'image, opaque,
   le recouvre dès qu'elle est peinte. site.js ajoute .is-loaded (le placeholder disparaît et son
   animation s'arrête) ou .is-error. Sans JavaScript il reste simplement caché derrière l'image. */
.bn-thumb-slot { position: relative; overflow: hidden; }
.bn-thumb-slot > img { position: relative; z-index: 1; }

.bn-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  --bn-duck-size: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: var(--bn-white);
  color: var(--bn-ink-soft);
  font-family: var(--bn-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.bn-loading::before {
  content: '';
  display: block;
  width: var(--bn-duck-size);
  height: var(--bn-duck-size);
  background: url('/img/duck-loading.svg') center / contain no-repeat;
  animation: bn-duck-bob 1.8s ease-in-out infinite;
}

.bn-tile .bn-loading, .bn-album-cover .bn-loading { --bn-duck-size: 84px; font-size: 14px; }

@keyframes bn-duck-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

.bn-thumb-slot.is-loaded > .bn-loading { display: none; }
/* Image en échec : on cache l'icône "image cassée" du navigateur pour laisser voir le canard grisé. */
.bn-thumb-slot.is-error > img { visibility: hidden; }
.bn-thumb-slot.is-error > .bn-loading::before { animation: none; opacity: 0.35; }
.bn-thumb-slot.is-error > .bn-loading > .bn-loading-text { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bn-loading::before { animation: none; }
}

/* Pastille "vidéo" : la grille ne charge plus les vidéos (une requête chacune, et le début d'un MP4 ne
   suffit pas toujours à obtenir une image) ; elles ne se chargent qu'à l'ouverture dans la visionneuse. */
.bn-video-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2C2F37, var(--bn-ink));
  color: var(--bn-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bn-video-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aperçu d'une vidéo (image extraite par ffmpeg) : badge lecture centré, visible une fois l'image chargée. Si
   l'aperçu échoue (.is-error), la pastille "vidéo" — cachée sinon — prend sa place. */
.bn-photo-play { background: none; z-index: 2; }
.bn-photo-play svg {
  width: 52px;
  height: 52px;
  padding: 14px;
  border-radius: 50%;
  background: rgba(23, 25, 30, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.bn-photo-video:not(.is-loaded) > .bn-photo-play { display: none; }
.bn-video-tile--fallback { display: none; }
.bn-thumb-slot.is-error > .bn-video-tile--fallback { display: flex; }
.bn-photo-video.is-error > .bn-loading, .bn-photo-video.is-error > .bn-photo-play { display: none; }

/* Compteurs coeur/commentaires : au-dessus de l'image (qui a un z-index depuis .bn-thumb-slot). */
.bn-photo-stats { z-index: 2; }