/* ════════════════════════════════════════════════════════════
   Palette & fondations
   ════════════════════════════════════════════════════════════ */
:root {
  --ivory: #f7f4ee;
  --ivory-2: #fffdf9;
  --ink: #23291f;
  --ink-soft: #55604f;
  --ink-faint: #8a9384;
  --sage: #7b8a6f;
  --sage-deep: #56624c;
  --sage-wash: #eef1e9;
  --gold: #bda06a;
  --gold-soft: #e6d9bd;
  --line: #e3ded2;
  --white: #fff;
  --shadow-sm: 0 1px 2px rgba(35, 41, 31, .05), 0 4px 14px rgba(35, 41, 31, .05);
  --shadow-md: 0 2px 6px rgba(35, 41, 31, .06), 0 18px 40px rgba(35, 41, 31, .09);
  --radius: 18px;
  --radius-sm: 12px;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur nos `display:` de classe
   (sinon .gate, .lightbox et .cam restent affichés en permanence). */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  /* voile organique très léger en fond */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(189, 160, 106, .10), transparent 60%),
    radial-gradient(50rem 36rem at 100% 8%, rgba(123, 138, 111, .12), transparent 62%);
}

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--gold-soft); }

/* ════════════════════════════════════════════════════════════
   Boutons
   ════════════════════════════════════════════════════════════ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  appearance: none;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 999px;
  padding: .78rem 1.5rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), opacity .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-primary {
  --btn-bg: linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  --btn-fg: #fff;
  box-shadow: 0 6px 18px rgba(86, 98, 76, .28);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(86, 98, 76, .34); }

.btn-ghost {
  --btn-fg: var(--ink-soft);
  border-color: var(--line);
  background: rgba(255, 255, 255, .75);
}
.btn-ghost:hover { background: #fff; border-color: var(--sage); color: var(--ink); }

.btn-block { width: 100%; }
.btn-tiny { padding: .45rem 1rem; font-size: .82rem; }
.danger { color: #a4483c; border-color: #e8d1cd; }
.danger:hover { background: #fdf3f1; border-color: #cf8b80; color: #8f3a2f; }

.linkish {
  background: none; border: 0; padding: 0;
  color: var(--sage-deep); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--gold-soft);
}
.linkish:hover { text-decoration-color: var(--gold); }

/* ════════════════════════════════════════════════════════════
   Écran de code
   ════════════════════════════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: #1d2420;
}
.gate-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(40rem 30rem at 20% 0%, rgba(189, 160, 106, .22), transparent 60%),
    radial-gradient(38rem 30rem at 90% 100%, rgba(123, 138, 111, .3), transparent 60%),
    linear-gradient(180deg, #222a24, #171d19);
}
.gate-veil::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .25;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}

.gate-card {
  position: relative;
  width: min(430px, 100%);
  background: rgba(255, 253, 249, .96);
  border: 1px solid rgba(230, 217, 189, .6);
  border-radius: 26px;
  padding: 2.6rem 2rem 2.1rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: rise .7s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }

.gate-eyebrow, .eyebrow {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.gate-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  line-height: 1.1;
  margin: .7rem 0 .2rem;
}
.gate-sub { color: var(--ink-soft); font-size: .92rem; margin: .4rem auto 1.6rem; max-width: 30ch; }

.code-inputs { display: flex; gap: .6rem; justify-content: center; }
.code-inputs input {
  width: 3.4rem; height: 4rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.code-inputs input:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(123, 138, 111, .16);
  transform: translateY(-2px);
}
.code-inputs input.filled { border-color: var(--gold); background: #fffdf6; }

.gate-admin { display: block; text-align: left; }
.gate-admin > span {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.gate-admin input {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
}
.gate-admin input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(123, 138, 111, .16); }
.gate-switch { margin: .9rem 0 0; font-size: .8rem; }

.gate-error { min-height: 1.4rem; margin: .9rem 0 .3rem; color: #a4483c; font-size: .88rem; }
.gate.shake .gate-card { animation: shake .45s; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ════════════════════════════════════════════════════════════
   Hero
   ════════════════════════════════════════════════════════════ */
.app { position: relative; z-index: 1; animation: fade .6s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }

.hero {
  text-align: center;
  padding: clamp(2.6rem, 8vw, 4.6rem) 1.25rem 1.6rem;
  position: relative;
}
.hero-inner { max-width: 720px; margin: 0 auto; }
.hero-names {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  line-height: 1.02;
  margin: .5rem 0 .6rem;
  letter-spacing: -.01em;
}
.hero-names .amp { display: block; font-style: italic; color: var(--gold); font-size: .5em; margin: .12em 0; }
.hero-meta { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.hero-meta .dot { color: var(--gold); margin: 0 .5rem; }

.countdown { display: flex; gap: .55rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
.cd-unit {
  min-width: 4.4rem;
  padding: .7rem .55rem .55rem;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.cd-num { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--sage-deep); }
.cd-lab { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-top: .35rem; }
.cd-done { font-family: var(--serif); font-size: 1.4rem; color: var(--sage-deep); }

/* ════════════════════════════════════════════════════════════
   Onglets
   ════════════════════════════════════════════════════════════ */
.tabs {
  position: sticky;
  top: .7rem;
  z-index: 20;
  display: flex;
  gap: .2rem;
  width: max-content;
  max-width: calc(100% - 1.6rem);
  margin: 1.4rem auto 0;
  padding: .32rem;
  background: rgba(255, 253, 249, .82);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px) saturate(1.4);
}
.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .45rem;
  border: 0; background: none;
  padding: .62rem 1.1rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.tab-ico { font-size: 1rem; }
.tab.is-active { color: var(--white); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab-marker {
  position: absolute; top: .32rem; left: 0; height: calc(100% - .64rem);
  background: linear-gradient(160deg, var(--sage), var(--sage-deep));
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(86, 98, 76, .3);
  transition: transform .38s var(--ease), width .38s var(--ease);
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════
   Contenu
   ════════════════════════════════════════════════════════════ */
.content { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }

.panel { display: none; }
.panel.is-active { display: block; animation: panelIn .45s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 2.4rem;
}

.section-title {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.55rem;
  margin: 2.8rem 0 1.3rem;
  color: var(--ink);
}
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.section-title:first-child { margin-top: 0; }

.card {
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Timeline ── */
.timeline { list-style: none; margin: 0; padding: 0 0 0 .25rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 1.35rem; top: .8rem; bottom: .8rem;
  width: 1px; background: linear-gradient(180deg, transparent, var(--gold-soft) 12%, var(--gold-soft) 88%, transparent);
}
.tl-item { position: relative; padding: 0 0 1.5rem 3.5rem; }
.tl-dot {
  position: absolute; left: 0; top: .1rem;
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.tl-time {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.tl-title { font-family: var(--serif); font-size: 1.35rem; margin: .1rem 0 .15rem; }
.tl-place { font-size: .82rem; color: var(--ink-faint); margin: 0 0 .35rem; }
.tl-detail { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* ── Cartes info ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.info-card {
  padding: 1.3rem 1.3rem 1.4rem;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.info-ico { font-size: 1.5rem; }
.info-card h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: .5rem 0 .35rem; }
.info-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ── Lieu ── */
.place { padding: 1.6rem; text-align: center; }
.place h3 { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 .2rem; }
.place p { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .95rem; }

/* ── Contacts ── */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.contact {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem;
  background: var(--ivory-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s var(--ease);
}
.contact:hover { border-color: var(--sage); transform: translateY(-2px); }
.contact-av {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sage-wash); color: var(--sage-deep);
  font-family: var(--serif); font-size: 1.1rem;
}
.contact strong { display: block; font-weight: 600; font-size: .95rem; }
.contact span { font-size: .8rem; color: var(--ink-faint); }
.contact em { display: block; font-style: normal; font-size: .85rem; color: var(--sage-deep); }

/* ════════════════════════════════════════════════════════════
   Plan de table
   ════════════════════════════════════════════════════════════ */
.search { position: relative; max-width: 480px; margin: 0 auto 1rem; }
.search-ico { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .95rem; }
.search input {
  width: 100%;
  padding: .95rem 2.6rem .95rem 2.8rem;
  font: inherit; font-size: .98rem;
  color: var(--ink);
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(123, 138, 111, .14); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%;
  background: var(--sage-wash); color: var(--sage-deep); font-size: 1.1rem; line-height: 1;
}

.search-result { min-height: 2.2rem; text-align: center; margin-bottom: 1.4rem; font-size: .95rem; }
.search-result .hit { color: var(--sage-deep); }
.search-result .hit b { font-weight: 600; }
.search-result .miss { color: var(--ink-faint); }

.stage {
  display: grid; place-items: center;
  height: 3.4rem; margin: 0 auto 1.4rem; max-width: 380px;
  border: 1px dashed var(--gold-soft); border-radius: 999px;
  background: repeating-linear-gradient(45deg, rgba(189,160,106,.05) 0 8px, transparent 8px 16px);
  color: var(--gold); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
}

.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.table-card {
  position: relative;
  padding: 1.35rem 1.35rem 1.5rem;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.table-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.table-card.accent { border-color: var(--gold-soft); background: linear-gradient(180deg, #fffdf5, var(--ivory-2)); }
.table-card.hit { border-color: var(--sage); box-shadow: 0 0 0 4px rgba(123, 138, 111, .16), var(--shadow-md); }
.table-card.dim { opacity: .38; filter: saturate(.5); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(123,138,111,.16), var(--shadow-md); } 50% { box-shadow: 0 0 0 12px rgba(123,138,111,0), var(--shadow-md); } }
.table-card.hit { animation: pulse 1.6s var(--ease) 2; }

.table-num {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: var(--sage-wash); color: var(--sage-deep);
  font-family: var(--serif); font-size: 1.15rem;
  margin-bottom: .55rem;
}
.table-card.accent .table-num { background: var(--gold-soft); color: #7a6231; }
.table-card h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .1rem; }
.table-loc { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .8rem; }
.guests { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line); }
.guests li { padding: .22rem 0; font-size: .92rem; color: var(--ink-soft); }
.guests li mark { background: var(--gold-soft); color: var(--ink); padding: .1rem .3rem; border-radius: 5px; font-weight: 600; }
.table-count { position: absolute; top: 1.35rem; right: 1.35rem; font-size: .72rem; color: var(--ink-faint); }

/* ════════════════════════════════════════════════════════════
   Photos
   ════════════════════════════════════════════════════════════ */
.shoot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.btn-shoot { font-size: 1.05rem; padding: 1rem 2.2rem; }
.btn-shoot span { margin-right: .3rem; }
.shoot-alt { margin: -.15rem 0 .15rem; font-size: .84rem; color: var(--ink-faint); }
.shoot-more { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.shoot-more span { margin-right: .25rem; }
.shoot-who { font-size: .82rem; color: var(--ink-faint); margin: .3rem 0 0; }

.upload-bar {
  position: relative; overflow: hidden;
  max-width: 420px; margin: 1.3rem auto 0;
  height: 2.2rem; border-radius: 999px;
  background: var(--sage-wash);
  display: grid; place-items: center;
  font-size: .78rem; color: var(--sage-deep);
}
.upload-bar span { position: relative; z-index: 1; }
.upload-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, rgba(123,138,111,.35), rgba(123,138,111,.55));
  transition: width .2s linear;
}

.toast { min-height: 1.3rem; text-align: center; font-size: .88rem; margin: .8rem 0 0; color: var(--sage-deep); }
.toast.error { color: #a4483c; }

.gallery-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: -.5rem 0 1.1rem;
}
.gallery-tools.is-selecting {
  padding: .5rem .5rem .5rem .9rem;
  background: var(--sage-wash);
  border-radius: 999px;
}
.select-count { flex: 1; font-size: .84rem; color: var(--sage-deep); font-weight: 500; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.shot {
  position: relative;
  aspect-ratio: 1;
  border: 0; padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sage-wash);
  box-shadow: var(--shadow-sm);
  animation: pop .45s var(--ease) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.shot img, .shot video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
  background: var(--sage-wash);
}
.shot:hover img, .shot:hover video { transform: scale(1.06); }
/* Pastille de lecture sur les vignettes vidéo */
.shot .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 25, 20, .45); backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255, 255, 255, .75);
  color: #fff; font-size: .85rem; line-height: 1;
  padding-left: .15rem; /* recentre le triangle */
  pointer-events: none;
  transition: transform .25s var(--ease), background .25s;
}
.shot:hover .play { transform: translate(-50%, -50%) scale(1.1); background: rgba(20, 25, 20, .6); }
.gallery.selecting .shot .play { opacity: .35; }
.shot .cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .6rem .5rem;
  background: linear-gradient(180deg, transparent, rgba(20, 25, 20, .72));
  color: #fff; font-size: .74rem; text-align: left;
  opacity: 0; transition: opacity .25s;
}
.shot:hover .cap, .shot:focus-visible .cap { opacity: 1; }
/* Mode sélection */
.gallery.selecting .shot { cursor: pointer; }
.gallery.selecting .shot img, .gallery.selecting .shot video { transform: scale(.94); border-radius: 14px; }
.shot .tick {
  position: absolute; top: .45rem; left: .45rem;
  width: 1.5rem; height: 1.5rem;
  display: none; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(20, 25, 20, .35);
  color: #fff; font-size: .8rem; line-height: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.gallery.selecting .shot .tick { display: grid; }
.shot.selected { box-shadow: 0 0 0 3px var(--sage-deep); }
.shot.selected .tick { background: var(--sage-deep); border-color: #fff; }
.shot.selected img, .shot.selected video { transform: scale(.88); }

.shot.mine::after {
  content: "★"; position: absolute; top: .45rem; right: .55rem;
  color: var(--gold); font-size: .8rem; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.empty { text-align: center; color: var(--ink-faint); padding: 2.5rem 1rem; font-family: var(--serif); font-size: 1.15rem; }

/* ── Caméra intégrée ── */
.cam {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: #0e120e;
  animation: fade .25s var(--ease);
}
.cam-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.cam-stage video, .cam-stage img {
  width: 100%; height: 100%; object-fit: contain;
  background: #0e120e;
}
.cam-stage video.mirrored { transform: scaleX(-1); }
.cam-hint {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  margin: 0; padding: .45rem 1.1rem;
  background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .85);
  border-radius: 999px; font-size: .8rem; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.cam-hint.error { background: rgba(164, 72, 60, .85); color: #fff; }

.cam-bar {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem;
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  background: #0e120e;
}
.cam-side {
  width: 3rem; height: 3rem; flex: none;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 1.15rem; line-height: 1;
  transition: background .2s;
}
.cam-side:hover { background: rgba(255, 255, 255, .24); }
.cam-shutter {
  width: 4.6rem; height: 4.6rem; flex: none; padding: 0;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 50%; background: transparent;
  display: grid; place-items: center;
  transition: transform .15s var(--ease);
}
.cam-shutter span {
  display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #fff; transition: transform .15s var(--ease), background .15s;
}
.cam-shutter:active span { transform: scale(.86); background: var(--gold-soft); }
.cam-shutter:disabled { opacity: .4; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem; padding: 1rem;
  background: rgba(18, 22, 18, .93);
  backdrop-filter: blur(8px);
  animation: fade .25s var(--ease);
}
.lb-figure { grid-column: 2; margin: 0; text-align: center; max-height: 84vh; }
.lb-figure img, .lb-figure video {
  max-height: 78vh; max-width: 100%; margin: 0 auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  object-fit: contain;
}
.lb-figure video { display: block; width: auto; background: #000; }
/* Chromium compose parfois une vidéo en noir sous un `backdrop-filter`.
   Le voile est déjà opaque à 93 % : on ne perd rien à le retirer. */
.lightbox.has-video { backdrop-filter: none; background: rgba(12, 15, 12, .97); }
.lb-figure figcaption { color: rgba(255, 255, 255, .7); font-size: .85rem; margin-top: .8rem; }
.lb-nav {
  border: 0; background: rgba(255, 255, 255, .08); color: #fff;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.7rem; line-height: 1;
  transition: background .2s;
}
.lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.5rem; line-height: 1;
}
.lb-actions {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  display: flex; gap: .5rem;
}
.lb-actions .btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.lb-actions .btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.lb-actions .danger { color: #ffb3a7; border-color: rgba(255,179,167,.35); }

/* ════════════════════════════════════════════════════════════
   Panneau d'administration
   ════════════════════════════════════════════════════════════ */
.adm-section {
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1rem;
}
.adm-section > h3 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  margin: 0 0 .3rem;
}
.adm-section > .adm-note { margin: 0 0 1.1rem; font-size: .84rem; color: var(--ink-faint); }

.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.adm-field { display: block; }
.adm-field > span {
  display: block; margin-bottom: .3rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.adm-field.wide { grid-column: 1 / -1; }
.adm-input {
  width: 100%;
  padding: .62rem .8rem;
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
textarea.adm-input { resize: vertical; min-height: 3.4rem; line-height: 1.5; }
.adm-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(123, 138, 111, .14); }

.adm-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); }
.adm-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--sage-deep); }

.adm-row {
  position: relative;
  padding: 1rem 1rem .9rem;
  margin-bottom: .7rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.adm-row-head {
  display: flex; align-items: center; gap: .3rem;
  margin-bottom: .7rem;
}
.adm-row-title { flex: 1; font-size: .8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.adm-icon-btn {
  width: 1.85rem; height: 1.85rem; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink-soft);
  font-size: .82rem; line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}
.adm-icon-btn:hover { border-color: var(--sage); color: var(--ink); }
.adm-icon-btn.rm:hover { border-color: #cf8b80; color: #a4483c; background: #fdf3f1; }
.adm-icon-btn:disabled { opacity: .3; pointer-events: none; }

.adm-add { margin-top: .2rem; }

.save-bar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: .6rem;
  max-width: 900px; margin: 0 auto;
  padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));
  background: rgba(255, 253, 249, .93);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  animation: rise .3s var(--ease) both;
}
.save-msg { flex: 1; font-size: .84rem; color: var(--ink-soft); }
.save-msg.ok { color: var(--sage-deep); }
.save-msg.error { color: #a4483c; }

/* ════════════════════════════════════════════════════════════
   Pied de page
   ════════════════════════════════════════════════════════════ */
.footer {
  text-align: center;
  padding: 2.2rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.footer p { margin: 0; }
.footer p:first-child { font-family: var(--serif); font-size: 1.3rem; color: var(--sage-deep); }
.footer-small { font-size: .78rem; color: var(--ink-faint); margin-top: .5rem !important; }

/* ════════════════════════════════════════════════════════════
   Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .tabs { width: calc(100% - 1.6rem); justify-content: space-between; }
  .tab { flex: 1; justify-content: center; padding: .62rem .4rem; font-size: .82rem; }
  .tab-ico { font-size: 1.05rem; }
  .tab span:not(.tab-ico) { display: none; }
  .tab.is-active span:not(.tab-ico) { display: inline; }
  .content { padding-top: 1.6rem; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .code-inputs input { width: 3rem; height: 3.6rem; font-size: 1.7rem; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-figure { grid-column: 1; }
  .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .lb-prev { left: .6rem; } .lb-next { right: .6rem; }
}


/* ════════════════════════════════════════════════════════════
   Ajouts — confort, dialogues, hors-ligne
   ════════════════════════════════════════════════════════════ */

/* Un seul verrou de défilement pour la caméra, la visionneuse et les
   dialogues : les fermer l'un après l'autre ne libère plus la page trop tôt. */
body.no-scroll { overflow: hidden; }

.noscript {
  margin: 0; padding: 1rem 1.25rem; text-align: center;
  background: #fdf3f1; color: #8f3a2f; font-size: .9rem;
}

.net-banner {
  position: sticky; top: 0; z-index: 40;
  margin: 0; padding: .55rem 1rem calc(.55rem + env(safe-area-inset-top));
  background: #55604f; color: #fff;
  font-size: .82rem; text-align: center;
}

/* L'écran de code s'efface au lieu de disparaître d'un coup. */
.gate.leaving { opacity: 0; transition: opacity .42s var(--ease); }
.gate-title .amp { display: block; font-style: italic; color: var(--gold); font-size: .5em; margin: .1em 0; }

/* ── Dialogues maison (remplacent prompt/confirm) ── */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(18, 22, 18, .55);
  backdrop-filter: blur(4px);
  animation: fade .18s var(--ease);
}
.modal.closing { opacity: 0; transition: opacity .16s var(--ease); }
.modal-card {
  width: min(26rem, 100%);
  padding: 1.5rem 1.4rem 1.2rem;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  animation: rise .3s var(--ease) both;
}
.modal-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 0 0 .35rem; }
.modal-text { margin: 0 0 1rem; font-size: .9rem; color: var(--ink-soft); }
.modal-input {
  width: 100%; margin-bottom: 1rem;
  padding: .7rem .85rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.modal-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(123, 138, 111, .16); }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ── Le lieu ── */
.place-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ── « Ma table », épinglée en haut du plan ── */
.mine-card {
  position: relative;
  max-width: 480px; margin: 0 auto 1.4rem;
  padding: 1.2rem 1.3rem 1.1rem;
  text-align: center;
  background: linear-gradient(180deg, #fffdf5, var(--ivory-2));
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mine-eyebrow {
  margin: 0; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.mine-name { font-family: var(--serif); font-size: 1.5rem; margin: .3rem 0 .1rem; }
.mine-table { margin: 0 0 .9rem; font-size: .95rem; color: var(--ink-soft); }
.mine-actions { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; }

/* Un nom d'invité se touche pour dire « c'est moi ». */
.guest-name {
  display: block; width: 100%;
  border: 0; background: none; padding: 0;
  font: inherit; text-align: left; color: inherit;
  border-radius: 6px;
}
.guest-name:hover { color: var(--ink); }
.guest-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.search-result .claim { margin-left: .5rem; vertical-align: middle; }

/* ── Qui publie ── */
.shoot-who {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: .4rem 0 0; font-size: .82rem; color: var(--ink-faint);
}
.who-input {
  width: 9.5rem;
  padding: .34rem .7rem;
  font: inherit; font-size: .85rem; color: var(--ink);
  background: var(--ivory-2);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s, box-shadow .2s, width .2s var(--ease);
}
.who-input:focus { outline: none; width: 11.5rem; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(123, 138, 111, .14); }
.who-input::placeholder { color: var(--ink-faint); }

/* ── Filtre « les miens » ── */
.chip.is-on {
  background: linear-gradient(160deg, var(--sage), var(--sage-deep));
  border-color: transparent; color: #fff;
}
.chip.is-on:hover { color: #fff; background: linear-gradient(160deg, var(--sage), var(--sage-deep)); }

/* ── Mur ── */
.shot .cap { display: block; }
/* Le fond palpite doucement tant que la vignette n'est pas arrivée. */
.shot { background: var(--sage-wash); }
.shot img, .shot video { animation: shotIn .35s var(--ease) both; }
@keyframes shotIn { from { opacity: 0; } }

.gallery-more {
  min-height: 2.6rem;
  display: grid; place-items: center;
  font-size: .82rem; color: var(--ink-faint);
}

.lb-nav:disabled { opacity: .2; pointer-events: none; }
.lb-actions .btn { border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: #fff; }
.lb-actions .btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── Confort mobile ── */
@media (max-width: 640px) {
  .shoot-who { flex-wrap: wrap; justify-content: center; }
  .gallery-tools { justify-content: center; }
  .footer { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  .mine-card { margin-bottom: 1.1rem; }
  /* Le survol n'existe pas au doigt : la légende reste lisible. */
  .shot .cap { opacity: 1; background: linear-gradient(180deg, transparent, rgba(20, 25, 20, .8)); }
}

/* Les zones tactiles ne descendent jamais sous 44 px. */
@media (pointer: coarse) {
  .btn-tiny { padding: .6rem 1rem; }
  .search-clear { width: 2.4rem; height: 2.4rem; }
  .adm-icon-btn { width: 2.3rem; height: 2.3rem; }
  .guests li { padding: .4rem 0; }
}


/* `.contact span` (0,1,1) l'emportait sur `.contact-av` (0,1,0) : l'initiale
   du contact héritait du gris pâle destiné au rôle, au lieu du vert sauge. */
.contact .contact-av { color: var(--sage-deep); }

/* ════════════════════════════════════════════════════════════
   Légendes
   ════════════════════════════════════════════════════════════ */
.caption-input {
  width: min(26rem, 100%);
  margin-top: .2rem;
  padding: .5rem 1rem;
  font: inherit; font-size: .88rem; color: var(--ink);
  text-align: center;
  background: var(--ivory-2);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s, box-shadow .2s;
}
.caption-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(123, 138, 111, .14); }
.caption-input::placeholder { color: var(--ink-faint); }

.cam-bar-col { flex-direction: column; gap: .8rem; }
.cam-review-actions { display: flex; gap: .8rem; justify-content: center; }
.cam-caption {
  width: min(26rem, 100%);
  padding: .6rem 1rem;
  font: inherit; font-size: .9rem;
  color: #fff; text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
}
.cam-caption::placeholder { color: rgba(255, 255, 255, .5); }
.cam-caption:focus { outline: none; border-color: rgba(255, 255, 255, .55); }

/* La légende prime sur l'auteur : c'est elle qu'on a envie de lire. */
.shot .cap { display: flex; flex-direction: column; gap: .1rem; }
.cap-text {
  font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cap-meta { opacity: .8; font-size: .68rem; }

.lb-caption {
  display: block;
  font-family: var(--serif); font-size: 1.15rem; line-height: 1.4;
  color: #fff; margin-bottom: .25rem;
  max-width: 46ch; margin-inline: auto;
}
.lb-meta { display: block; }

/* ════════════════════════════════════════════════════════════
   Modération douce
   ════════════════════════════════════════════════════════════ */
.shot.masked img, .shot.masked video { opacity: .38; filter: grayscale(.6); }
.shot.binned img, .shot.binned video { opacity: .5; filter: grayscale(.85); }
.masked-tag {
  position: absolute; top: .45rem; left: 50%; transform: translateX(-50%);
  padding: .12rem .5rem;
  background: rgba(20, 25, 20, .75); color: #fff;
  border-radius: 999px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   Maintenance (onglet Admin)
   ════════════════════════════════════════════════════════════ */
.adm-maint { display: flex; flex-direction: column; gap: .2rem; }
.maint-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}
.maint-row:first-child { border-top: 0; }
.maint-text { flex: 1; min-width: 0; }
.maint-text strong { display: block; font-size: .95rem; }
.maint-row .adm-note { margin: .15rem 0 0; }
.maint-actions { display: flex; flex-direction: column; gap: .35rem; flex: none; }
.adm-note.ok { color: var(--sage-deep); }
.adm-note.error { color: #a4483c; }

/* ════════════════════════════════════════════════════════════
   Diaporama
   ════════════════════════════════════════════════════════════ */
.show {
  position: fixed; inset: 0; z-index: 90;
  background: #070907;
  overflow: hidden;
  animation: fade .4s var(--ease);
}
.show-stage { position: absolute; inset: 0; cursor: pointer; }
.show-stage img, .show-stage video {
  width: 100%; height: 100%; object-fit: contain;
  background: #070907;
}
/* Un très lent travelling avant : une photo fixe projetée dix secondes
   paraît morte, celle-ci respire. */
.show-stage img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }

.show-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 26%, transparent 46%);
}

.show-badge {
  position: absolute; top: 2rem; left: 50%; transform: translateX(-50%);
  margin: 0; padding: .5rem 1.4rem;
  background: rgba(189, 160, 106, .92); color: #1d2420;
  border-radius: 999px; font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: rise .5s var(--ease) both;
}

.show-cap {
  position: absolute; left: 0; right: 0; bottom: 2.4rem;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  text-align: center; pointer-events: none;
}
.show-caption {
  margin: 0 0 .4rem;
  font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.25;
  color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .8);
}
.show-author {
  margin: 0;
  font-size: clamp(.8rem, 1.4vw, 1rem); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(230, 217, 189, .92); text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
}

.show-bar {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  display: flex; gap: .5rem;
  opacity: .3; transition: opacity .3s var(--ease);
}
.show:hover .show-bar, .show-bar:focus-within { opacity: 1; }
.show-btn {
  width: 2.8rem; height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 1rem; line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .15s var(--ease);
}
.show-btn:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }

.show-progress {
  position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
@keyframes showbar { from { width: 0; } to { width: 100%; } }

@media (max-width: 640px) {
  .show-bar { opacity: 1; right: 50%; transform: translateX(50%); }
  .show-cap { bottom: 5rem; }
}

/* ════════════════════════════════════════════════════════════
   Thème sombre

   La palette vit dans des variables : l'essentiel du travail est de les
   redéfinir. Suivent les quelques règles qui avaient une couleur en dur —
   fonds translucides blancs, dégradés crème, rouges d'alerte trop sombres.
   Le thème clair est celui par défaut : le sombre ne s'applique QUE si
   l'invité l'a demandé lui-même par le bouton du pied de page.
   ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --ivory: #151a14;
  --ivory-2: #1d231c;
  --ink: #e9e7de;
  --ink-soft: #b4b9ad;
  --ink-faint: #838b7d;
  --sage: #7f9471;
  --sage-deep: #a2b891;
  --sage-wash: #242b23;
  --gold: #cfb27a;
  --gold-soft: #4d442e;
  --line: #2e352d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, .11); }
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .chip.is-on,
:root[data-theme="dark"] .chip.is-on:hover {
  --btn-bg: linear-gradient(160deg, #63775a, #4a5a41);
  background: linear-gradient(160deg, #63775a, #4a5a41);
}
:root[data-theme="dark"] .tab-marker { background: linear-gradient(160deg, #63775a, #4a5a41); }
:root[data-theme="dark"] .tabs { background: rgba(29, 35, 28, .86); }
:root[data-theme="dark"] .cd-unit { background: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .save-bar { background: rgba(21, 26, 20, .94); }
:root[data-theme="dark"] .table-card.accent,
:root[data-theme="dark"] .mine-card { background: linear-gradient(180deg, #262218, var(--ivory-2)); }
:root[data-theme="dark"] .table-card.accent .table-num { background: var(--gold-soft); color: var(--gold); }
:root[data-theme="dark"] .adm-input,
:root[data-theme="dark"] .adm-icon-btn,
:root[data-theme="dark"] .modal-input { background: #10140f; }
:root[data-theme="dark"] .danger { color: #e79184; border-color: rgba(231, 145, 132, .32); }
:root[data-theme="dark"] .danger:hover { background: rgba(231, 145, 132, .12); border-color: #e79184; color: #f3b0a5; }
:root[data-theme="dark"] .adm-icon-btn.rm:hover { background: rgba(231, 145, 132, .12); border-color: #e79184; color: #e79184; }
:root[data-theme="dark"] .gate-error,
:root[data-theme="dark"] .toast.error,
:root[data-theme="dark"] .save-msg.error,
:root[data-theme="dark"] .adm-note.error { color: #e79184; }
:root[data-theme="dark"] .noscript { background: rgba(231, 145, 132, .12); color: #e79184; }
:root[data-theme="dark"] ::selection { background: var(--gold-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}