/* ==========================================================================
   Licences, on every page of both builds (partials/licences.php, assets/js/licences.js, app/licences.php):
   the header's badge (desktop), the cards (About, the phone's home and footer), and the viewer: the scan on its paper
   over the night, beside it the drawing paper of the footer with the seal, the title, who issued it and the way to
   check it. The seal is the brand's green: the one sign that says "verified".
   ========================================================================== */
.lic-seal { width: 18px; height: 18px; flex: none; }

/* ---------- the header's badge (desktop) ---------- */
.hd-lic {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 32%, transparent); color: inherit;
  font: 700 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color .25s, box-shadow .25s;
}
.hd-lic .lic-seal { color: var(--green, #83CD20); width: 19px; height: 19px; }
.hd-lic:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 60%, transparent); background: color-mix(in oklab, currentColor 8%, transparent); }
.hd-lic:focus-visible { outline: 2px solid var(--green, #83CD20); outline-offset: 2px; }
@media (max-width: 1180px) { .hd-lic span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hd-lic { width: 40px; padding: 0; justify-content: center; } }

/* ---------- cards of the licences (About; the phone's home and footer) ---------- */
.lic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lic-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 20px; background: #FFFDF8; color: inherit; text-align: start; font: inherit; cursor: zoom-in; box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 20px 40px -28px rgb(11 26 51 / .5); transition: translate .35s cubic-bezier(.16, 1, .3, 1); }
.lic-card:hover { translate: 0 -3px; }
.lic-card:focus-visible { outline: 2px solid var(--green, #83CD20); outline-offset: 3px; }
.lic-card__pic { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgb(11 26 51 / .08); overflow: hidden; }
.lic-card__pic img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 16px -10px rgb(11 26 51 / .4); }
.lic-card b { font-size: 14.5px; line-height: 1.6; }
.lic-card small { color: #4A5468; font-size: 12.5px; line-height: 1.6; }

/* the phone's home: a strip right under the hero */
.m-lic { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 12px 14px; border: 0; border-radius: 20px; background: var(--m-paper, #F9FAF7); box-shadow: var(--m-shadow); color: var(--m-ink, #13201E); font: inherit; text-align: start; width: calc(100% - 32px); }
.m-lic .lic-seal { width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--m-night, #0F2A2B); color: var(--m-lime, #A4E02B); }
.m-lic > span:not(.m-lic__pics) { flex: 1; display: grid; gap: 2px; }
.m-lic b { font-size: 14px; }
.m-lic small { color: var(--m-mute, #5D6B67); font-size: 12px; }
.m-lic__pics { display: flex; flex: none; }
.m-lic__pics img { width: 44px; height: 32px; object-fit: cover; object-position: 50% 0; border-radius: 5px; background: #fff; box-shadow: 0 0 0 2px var(--m-paper, #F9FAF7); }
.m-lic__pics img + img { margin-inline-start: -14px; }
/* the phone's footer */
.m-foot__lic { margin-top: 18px; }
.m-foot__lic .lic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-foot__lic .lic-card { padding: 8px; border-radius: 16px; }
.m-foot__lic .lic-card b { font-size: 12.5px; }
.m-foot__lic .lic-card small { display: none; }

/* ---------- the viewer ---------- */
.lv {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(7 14 30 / .95); color: #EEF2F8; overflow: hidden;
}
.lv::backdrop { background: rgb(4 10 22 / .7); }
.lv[open] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; animation: lv-in .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes lv-in { from { opacity: 0; } }
.lv__stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 64px 76px; overflow: hidden; }
.lv__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; padding: 14px; border-radius: 6px; background: #fff; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .8); cursor: zoom-in; user-select: none; -webkit-user-drag: none; animation: lv-doc .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes lv-doc { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.lv.is-zoom .lv__stage { display: block; overflow: auto; padding: 40px; cursor: grab; overscroll-behavior: contain; }
.lv.is-zoom .lv__img { width: min(2400px, 230%); max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.lv__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 34px 28px 28px; overflow-y: auto; background: #F6F2E9; color: #0B1A33; }
.lv__k { display: flex; align-items: center; gap: 8px; margin: 0; color: #3A6A0F; font-size: 13px; font-weight: 800; }
.lv__seal { width: 24px; height: 24px; color: #4F8F12; }
.lv__t { margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.5; }
.lv__by { margin: 0; color: #4A5468; font-size: 14px; line-height: 1.8; }
.lv__n { margin: 0; color: #4A5468; font-size: 12.5px; font-weight: 700; }
.lv__n:empty { display: none; }
.lv__hint { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(11 26 51 / .05); color: #4A5468; font-size: 12.5px; line-height: 1.8; }
.lv__acts { display: grid; gap: 8px; margin-top: 6px; }
.lv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(11 26 51 / .2); color: #0B1A33; font-size: 14px; font-weight: 700; text-decoration: none; }
.lv-btn--go { background: #0B1A33; color: #fff; box-shadow: none; }
.lv-btn[hidden] { display: none; }
.lv__strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid rgb(11 26 51 / .1); list-style: none; }
.lv__strip button { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 4px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgb(11 26 51 / .1); cursor: pointer; opacity: .6; transition: opacity .2s, box-shadow .2s; }
.lv__strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #4F8F12; }
.lv__strip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lv__x, .lv__zoom, .lv__go { position: absolute; z-index: 2; display: grid; place-items: center; border: 0; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color .2s; }
.lv__x:hover, .lv__zoom:hover, .lv__go:hover { background: rgb(255 255 255 / .24); }
.lv__x { top: 16px; inset-inline-start: 16px; width: 46px; height: 46px; border-radius: 50%; }
.lv__x svg { width: 22px; height: 22px; }
.lv__zoom { bottom: 18px; inset-inline-start: 50%; translate: -50% 0; display: inline-flex; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font: 700 13px var(--font-body); }
html[dir="rtl"] .lv__zoom { inset-inline-start: auto; right: calc((100% - 380px) / 2); translate: 50% 0; }
html[dir="ltr"] .lv__zoom { left: calc((100% - 380px) / 2); }
.lv__zoom svg { width: 18px; height: 18px; }
.lv__go { top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; }
.lv__go svg { width: 24px; height: 24px; }
html[dir="ltr"] .lv__go svg { transform: scaleX(-1); }
.lv__go--prev { inset-inline-start: 14px; }
.lv__go--next { inset-inline-end: calc(380px + 14px); }
.lv__ctl { display: contents; }
.lv :focus-visible { outline: 2px solid #9AF21E; outline-offset: 2px; }

@media (max-width: 860px) {
  .lv[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  .lv__stage { grid-row: 1; padding: 62px 12px 8px; }
  /* the arrows and the zoom: a bar of their own between the scan and the sheet, never over either */
  .lv__ctl { grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px 12px; }
  .lv__ctl > button { position: static; margin: 0; translate: none; }
  .lv__go--prev { order: -1; }
  .lv__side { grid-row: 3; max-height: 44vh; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .lv__t { font-size: 18px; margin-top: 0; }
  .lv__hint { display: none; }
  .lv__acts { grid-template-columns: 1fr 1fr; }
  .lv__strip { display: flex; overflow-x: auto; padding-top: 10px; scrollbar-width: none; }
  .lv__strip li { flex: none; width: 84px; }
  .lv__go { width: 44px; height: 44px; }
  html[dir="rtl"] .lv__zoom, html[dir="ltr"] .lv__zoom { translate: none; }
  .lv.is-zoom .lv__img { width: 260%; }
}
@media (prefers-reduced-motion: reduce) {
  .lv[open], .lv__img { animation: none; }
}