/* La galerie : page, en-tête, états. La table est dans gallery-table.css, la liste et la visionneuse dans gallery-list.css. */

:root {
  --g-green: #3d6044;
  --g-deep: #2f4c36;
  --g-night: rgba(20, 38, 25, .84);       /* pastilles flottantes au-dessus de la table */
  --g-paper: #fbf8f3;
  --g-cream: #fbf0e6;
  --g-peach: #f6cbbd;
  --g-coral: #ca6f57;
  --g-ink: #2a2320;
  --g-ink-on-coral: #1b1514;               /* le corail seul ne porte pas du texte clair (3,1:1) ; ce brun profond, oui (5,1:1) */
  --g-caption: #4a3f39;
  --g-time: #7a645a;                       /* 5,2:1 sur le papier (l'ancien #a1887a n'atteignait que 3,2:1) */
  --g-hit: 48px;
}

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.gallery {
  margin: 0;
  background: var(--g-deep);
  color: var(--g-cream);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.gallery :focus-visible { outline: 3px solid var(--g-peach); outline-offset: 3px; border-radius: 12px; }

/* ---------- En-tête : sceau, bascule Table / Liste, appareil photo ---------- */
.g-head {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  /* trois colonnes (1fr · auto · 1fr) : le sélecteur est au centre de la PAGE, quelle que soit la largeur du sceau et du bouton */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
.g-head > * { pointer-events: auto; }
.g-head > :first-child { justify-self: start; }
.g-head > :last-child { justify-self: end; }

.g-seal { flex: none; width: 56px; height: 56px; display: block; border-radius: 50%; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.g-seal svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.g-seal__bg { fill: #e5cbbb; }
.g-seal__ring { transform-origin: 50% 50%; animation: g-seal-spin 40s linear infinite; }
.g-seal__ring text { font: 600 7px/1 var(--font); letter-spacing: .14em; fill: var(--g-ink); }
.g-seal__mono { font: 700 21px/1 var(--font); letter-spacing: -.02em; fill: var(--g-ink); }
@keyframes g-seal-spin { to { transform: rotate(360deg); } }
@media (hover: hover) { .g-seal:hover { transform: scale(1.06); } }

.g-seg { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--g-night); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.g-seg button {
  min-width: 72px; height: var(--g-hit); padding: 0 16px; border-radius: 99px;
  font: 600 15px/1 var(--font); color: var(--g-cream); cursor: pointer; transition: background .2s, color .2s;
}
.g-seg button[aria-pressed="true"] { background: var(--g-paper); color: var(--g-green); }
@media (hover: hover) { .g-seg button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .12); } }

.g-shoot {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-width: var(--g-hit); height: var(--g-hit); padding: 0 13px; border-radius: 99px;
  background: var(--g-peach); color: var(--g-ink); font: 600 15px/1 var(--font); text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.g-shoot__label { display: none; }
@media (min-width: 560px) { .g-shoot { padding: 0 18px 0 15px; } .g-shoot__label { display: inline; } }
@media (hover: hover) { .g-shoot:hover { transform: translateY(-2px); } }

/* ---------- États : chargement, table vide, erreur réseau ---------- */
.state { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 88px 20px 120px; pointer-events: none; }
.state[hidden], .state__card[hidden] { display: none; }
.state__card {
  width: min(100%, 360px); padding: 26px 24px 24px; border-radius: 6px; background: var(--g-paper); color: var(--g-ink); text-align: center;
  display: grid; gap: 10px; justify-items: center; pointer-events: auto; rotate: -1.2deg;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 24px 40px -14px rgba(0, 0, 0, .65);
}
.state__title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--g-green); }
.state__text { margin: 0; font-size: 1.05rem; color: var(--g-caption); }
.state__btn {
  margin-top: 8px; min-height: var(--g-hit); padding: 0 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; background: var(--g-coral); color: var(--g-ink-on-coral); font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
}
.state__card .state__btn:focus-visible { outline-color: var(--g-ink); }
#state-loading .state__title { font-size: 1.15rem; }
#state-loading::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(61, 96, 68, .25); border-top-color: var(--g-green); animation: g-spin .9s linear infinite; }
@keyframes g-spin { to { rotate: 360deg; } }

.state__noscript { position: fixed; z-index: 25; inset: 120px 20px auto; margin: 0; padding: 18px; border-radius: 6px; background: var(--g-paper); color: var(--g-ink); text-align: center; }

/* Le chargement ne cache pas la table ; table vide ou erreur : la liste et le zoom n'ont rien à montrer */
[data-state="empty"] .g-zoom, [data-state="empty"] .g-hint, [data-state="error"] .g-zoom, [data-state="error"] .g-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .g-seal__ring, #state-loading::after { animation: none; }
  .g-seal, .g-shoot, .g-seg button { transition: none; }
}