/* ════════════════════════════════════════════════
   kryptonite-galleries — mise en page
   Composants repris de « PAULO JANEIRO WEBSITE/styles.css » (référence entre parenthèses) et
   adaptés à la galerie : header sticky (.site-header :35-55), page-hero (.page-hero-label/-title
   :514-531), concept-card (.concept-card-title/-cta :280-316), modal (.modal-box… :961-1031),
   footer-bar (:447-488), agenda-empty (:771-775), top-notification (:1034-1056).
   ════════════════════════════════════════════════ */

/* ─── EN-TÊTE (toujours collant) ──────────────── */
/* Mesures propres à la galerie, relevées sur Pixieset : header 78 px (74 px mobile), marges de
   grille 20 px (4 px mobile). Les tokens du site (header 130 px, marge 80 px) restent réservés
   aux pages légales et au pied de page. */
:root {
  --kg-header-h: 78px;
  --kg-tabbar-h: 48px;  /* hauteur réelle mesurée (44 px de cible tactile + filet) */
  --kg-side: 24px;
  --kg-gutter: 20px;
}
@media (max-width: 768px) {
  :root { --kg-header-h: 74px; --kg-side: 16px; --kg-gutter: 4px; }
}

.kg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--kg-header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--kg-side);
}

.kg-header-titles { min-width: 0; }

.kg-header-title {
  font-family: var(--f-disp);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg-header-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.kg-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  transition: opacity var(--dur-fast);
}
.kg-icon-btn:hover { opacity: 0.6; }
.kg-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kg-icon-btn[aria-pressed="true"] svg { fill: currentColor; }

.kg-fav-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--f-disp);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kg-fav-count[hidden] { display: none; }

/* Seconde barre collante (Photos · Vidéos · ♡ Mes favoris), à TOUTES les largeurs : c'est le
   seul moyen de passer des photos aux vidéos. Centrée sur ordinateur, pleine largeur sur mobile. */
.kg-tabbar {
  position: sticky;
  top: var(--kg-header-h);
  z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.kg-tabbar-list { display: flex; justify-content: center; }
.kg-tabbar-list > li { flex: 0 0 auto; }
.kg-tab {
  display: block;
  width: 100%;
  min-height: var(--kg-tabbar-h);
  text-align: center;
  padding: 14px 20px;
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.kg-tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }

@media (max-width: 768px) {
  .kg-header-subtitle { display: none; }
  .kg-tabbar-list > li { flex: 1; }
  .kg-tab { padding: 14px 8px; }
}

/* ─── COUVERTURE ──────────────────────────────── */
.kg-cover {
  position: relative;
  height: 100svh;
  min-height: 420px;
  max-height: 960px;
  overflow: hidden;
  background: var(--fg);
}
.kg-cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kg-cover--empty .kg-cover-media { display: none; }

.kg-cover::before,
.kg-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.kg-cover::before { top: 0; height: 35%; background: linear-gradient(var(--scrim-soft), transparent); }
.kg-cover::after { bottom: 0; height: 45%; background: linear-gradient(transparent, var(--scrim-strong)); }

.kg-cover-frame {
  position: absolute;
  inset: 20px;
  border: 1px solid var(--frame-line);
  pointer-events: none;
}
@media (max-width: 768px) { .kg-cover-frame { inset: 10px; } }

.kg-cover-label {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #fff;
}

.kg-cover-bottom {
  position: absolute;
  left: var(--content-pad);
  right: var(--content-pad);
  bottom: 48px;
  text-align: center;
}

.kg-cover-title {
  font-family: var(--f-disp);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  color: #fff;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kg-cover-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  min-height: 44px;
  padding: 0 8px;
  font-family: var(--f-disp);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}
.kg-cover-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-normal) var(--expo); }
.kg-cover-cta:hover svg { transform: translateY(4px); }

/* ─── GRILLE MASONRY ──────────────────────────── */
/* Marges latérales portées par le conteneur : le calcul masonry lit clientWidth de .kg-grid, qui
   inclurait un padding posé sur la grille elle-même (les tuiles déborderaient dessus). */
#kg-grid-wrap { padding: var(--tile-gap) var(--kg-gutter) 30px; }
.kg-grid {
  column-count: 2;
  column-gap: var(--tile-gap-mobile);
  scroll-margin-top: calc(var(--kg-header-h) + var(--kg-tabbar-h));
}
@media (min-width: 800px) { .kg-grid { column-count: 3; column-gap: var(--tile-gap); } }
@media (min-width: 1000px) { .kg-grid { column-count: 4; } }
@media (min-width: 1500px) { .kg-grid { column-count: 5; } }

.kg-tile {
  break-inside: avoid;
  margin-bottom: var(--tile-gap);
  width: 100%;
}

/* Une fois positionnées en JS (masonry.js), les tuiles quittent le flux des colonnes CSS :
   c'est la seule bascule visuelle entre le repli sans JS et le rendu masonry par transform. */
.kg-grid[data-kg-positioned] { column-count: unset; position: relative; }
.kg-grid[data-kg-positioned] > .kg-tile {
  break-inside: auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  will-change: transform;
}

.kg-tile a {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f0f0f0;
}
.kg-tile img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--expo); }
.kg-tile a:hover img, .kg-tile a:focus-visible img { transform: scale(1.03); }

.kg-tile-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 700;
}
.kg-tile-badge svg { width: 10px; height: 10px; fill: currentColor; }

.kg-tile-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) {
  .kg-tile a:hover .kg-tile-actions { opacity: 1; transform: none; }
}
.kg-tile a:focus-within .kg-tile-actions { opacity: 1; transform: none; }

.kg-tile-action {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg);
}
.kg-tile-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.kg-tile-action[aria-pressed="true"] svg { fill: currentColor; }

/* ─── ÉTATS ────────────────────────────────────── */
.kg-empty, .kg-processing-note {
  padding: 60px var(--content-pad);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.kg-cover--fallback { background: var(--fg); }
.kg-cover--fallback .kg-cover-title { color: #fff; }

/* ─── LIGHTBOX (<dialog> natif) ────────────────── */
.kg-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--bg);
  color: var(--fg);
}
.kg-lightbox::backdrop { background: var(--bg); }
.kg-lightbox[open] { display: flex; flex-direction: column; }

.kg-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
}
.kg-lightbox-bar-group { display: flex; gap: 4px; }

.kg-lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}
.kg-lightbox-stage img,
.kg-lightbox-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kg-lightbox-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.kg-lightbox-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kg-lightbox-nav:hover { color: var(--fg); }
.kg-lightbox-nav--prev { left: 0; }
.kg-lightbox-nav--next { right: 0; }
.kg-lightbox-nav[hidden] { visibility: hidden; }

.kg-lightbox-caption {
  padding: 12px var(--content-pad) 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.kg-lightbox-error {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.kg-lightbox-error button { text-decoration: underline; }

/* ─── MODALES (téléchargement, généraliste) ──────
   Aspect « .modal-box » (styles.css:966-975), sans flou, élargi au-delà de 320px : classes
   partagées avec _download_modal.html (builder « downloads », voir NOTES-public.md). */
.kg-modal {
  border: 1px solid var(--fg);
  padding: 40px;
  width: 90%;
  max-width: 420px;
  margin: auto;
  background: var(--bg);
  color: var(--fg);
}
.kg-modal::backdrop { background: rgba(255, 255, 255, 0.92); }

.kg-modal-title {
  font-family: var(--f-disp);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.kg-field {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--fg);
  background: transparent;
  font-size: 16px;
  text-align: center;
  margin-bottom: 16px;
  outline: none;
  font-family: var(--f-body);
}
.kg-field-error {
  margin: -8px 0 16px;
  font-size: 12px;
  color: #b71c1c;
  text-align: center;
}

.kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 24px;
  border: 1.5px solid var(--fg);
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
  transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.kg-btn:hover { background: var(--fg); color: #fff; }

.kg-btn-primary {
  width: 100%;
  background: var(--fg);
  color: #fff;
}
.kg-btn-primary:hover { opacity: 0.8; background: var(--fg); }
.kg-btn-primary[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Libellé du champ e-mail (micro-label du site, .form-label) et notice RGPD de la modale */
.kg-field-label {
  display: block;
  margin: 18px 0 6px;
  font-family: var(--f-disp);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
}
.kg-notice { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.kg-notice a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.kg-modal-close {
  display: block;
  margin-top: 16px;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kg-modal-close:hover { color: var(--fg); }

.kg-choice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  font-size: 14px;
}
.kg-choice-row[disabled] { color: var(--muted); cursor: not-allowed; }
.kg-choice-weight { font-size: 12px; color: var(--muted); }

/* ─── TOAST ────────────────────────────────────── */
.kg-toast {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9600;
  background: var(--fg);
  color: #fff;
  padding: 14px 28px;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  max-width: 90vw;
  transition: top var(--dur-slow) var(--expo);
}
.kg-toast.is-visible { top: 20px; }

/* ─── PIED DE PAGE ─────────────────────────────── */
.footer-bar { border-top: 1px solid var(--fg); padding: 20px var(--content-pad); background: var(--bg); }
.footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-wordmark { font-family: var(--f-disp); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 12px; }
.footer-links a:hover { text-decoration: underline; }

/* ─── PAGES AUTONOMES (mot de passe, confidentialité) ──── */
.kg-standalone { min-height: 100%; display: flex; flex-direction: column; }
.kg-card-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px var(--content-pad); }
.kg-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--fg);
  padding: 40px;
}
.kg-card-text { text-align: center; font-size: 14px; color: var(--muted); }
.kg-card-text--spaced { margin-top: 20px; }

.kg-card-label {
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px;
}
.kg-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px var(--content-pad) 100px;
}
.kg-legal h1 { font-family: var(--f-disp); font-size: 28px; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; }
.kg-legal h2 { font-family: var(--f-disp); font-size: 16px; font-weight: 700; margin: 28px 0 8px; }
.kg-legal p { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 4px; }
.kg-legal a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .kg-tile img { transition: none; }
  .kg-toast { transition: top 1ms linear; }
}