/* F4IOZ — the site's styles. SatMe-PC's palette (dark background, cyan
   accent, amber), Noto Sans served by the site (OFL), the rail on the left,
   cards with soft borders; a light theme on the same tokens. */

@font-face { font-family: 'Noto Sans'; src: url('../fonts/NotoSans-Regular.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans'; src: url('../fonts/NotoSans-Bold.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans'; src: url('../fonts/NotoSans-Italic.woff2') format('woff2'); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Sans Mono'; src: url('../fonts/NotoSansMono-Regular.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Mono'; src: url('../fonts/NotoSansMono-Bold.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; }
/* The flags drawn on the globes (Twemoji, CC BY 4.0, SatMe's). */
@font-face { font-family: Drapeaux; src: url('/api/police-drapeaux') format('woff2'); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; font-display: swap; }

:root {
  --bg: #0A0F14; --bg-2: #0F161D; --panel: #131C24; --panel-2: #1A2530;
  --border: #22303B; --border-strong: #2F4150;
  --text: #E8F0F7; --text-dim: #9AA7B4; --text-muted: #8091A3;
  --accent: #3FE0C8; --accent-soft: rgba(63, 224, 200, 0.12); --accent-hover: #7FEBDB;
  --green: #5BD68A; --warn: #FFB454; --red: #E5484D; --amber: var(--warn); --sat: #FFD166; --info: #6F8CFF;
  --well: #0D151C; --td-border: rgba(34,48,59,0.8); --input-glow: rgba(63,224,200,0.12);
  --radial-1: rgba(63,224,200,0.05);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.28);
  --shadow-pop: 0 14px 40px rgba(0,0,0,.55);
  --on-accent: #04201C;
  /* The home page's globe and sky dial (ciel-accueil.js reads them). */
  --g-ocean: #0A1F38; --g-ocean-2: #1A5684; --g-terre: #173F3A; --g-terre-2: #4F977A; --g-nuit: #02060D; --g-nuit-force: .88;
  --g-cote: rgba(150, 230, 215, .5); --g-grille: rgba(140, 180, 230, .13); --g-atmo: rgba(70, 160, 255, .38); --g-autres: rgba(205, 220, 240, .5);
  --g-empreinte: rgba(63, 224, 200, .14); --g-halo: rgba(4, 8, 16, .78);
  --m-ocean: #0B1622; --m-terre: #1C2C38; --m-cote: rgba(140, 180, 210, .35); --m-grille: rgba(140, 180, 220, .07); --cc-zenith: #12233A; --cc-horizon: #0A131D; --espace: #050A12;
  --rail-w: 228px; --top-h: 56px; --r-s: 6px; --r-m: 8px; --r-l: 12px;
  --anim: 140ms cubic-bezier(.2,.7,.3,1);
  --font-sans: 'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: 'Noto Sans Mono', ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F3F6F9; --bg-2: #E9EEF3; --panel: #FFFFFF; --panel-2: #EEF3F7;
  --border: #D5DEE6; --border-strong: #A9B8C6;
  --text: #0E1720; --text-dim: #33475A; --text-muted: #4D6072;
  --accent: #0A7C6D; --accent-soft: rgba(10, 124, 109, 0.10); --accent-hover: #075E53;
  --green: #137A3A; --warn: #8A5200; --red: #B42318; --sat: #8F6400; --info: #3451C8;
  --well: #F6F9FB; --td-border: rgba(213,222,230,0.9); --input-glow: rgba(10,124,109,0.10);
  --radial-1: rgba(10,124,109,0.05);
  --shadow: 0 1px 2px rgba(14,23,32,.06), 0 4px 14px rgba(14,23,32,.06);
  --shadow-pop: 0 14px 40px rgba(14,23,32,.18);
  --on-accent: #FFFFFF;
  --g-ocean: #7FB0D8; --g-ocean-2: #C4E0F4; --g-terre: #7FAE86; --g-terre-2: #CBE5B5; --g-nuit: #2E4260; --g-nuit-force: .5;
  --g-cote: rgba(20, 60, 70, .55); --g-grille: rgba(30, 60, 100, .16); --g-atmo: rgba(80, 150, 230, .32); --g-autres: rgba(30, 50, 80, .5);
  --g-empreinte: rgba(10, 124, 109, .16); --g-halo: rgba(255, 255, 255, .85);
  --m-ocean: #DCE8F2; --m-terre: #F7FAFC; --m-cote: rgba(40, 70, 100, .35); --m-grille: rgba(30, 60, 100, .08); --cc-zenith: #FFFFFF; --cc-horizon: #E3ECF4; --espace: #E8F0F7;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font: 15px/1.55 var(--font-sans); color: var(--text); background: var(--bg);
  background-image: radial-gradient(1200px 600px at 100% -10%, var(--radial-1), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
/* The night sky behind the pages (dark theme only): a few faint stars, fixed, drawn by CSS alone. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(220, 232, 255, .55) 50%, transparent 51%), radial-gradient(1px 1px at 140px 90px, rgba(220, 232, 255, .35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 260px 170px, rgba(220, 232, 255, .45) 50%, transparent 51%), radial-gradient(1px 1px at 330px 40px, rgba(220, 232, 255, .3) 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 260px, rgba(220, 232, 255, .4) 50%, transparent 51%), radial-gradient(1px 1px at 380px 300px, rgba(220, 232, 255, .3) 50%, transparent 51%);
  background-size: 410px 340px; }
:root[data-theme="light"] body::before { display: none; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-hover); text-decoration: underline; }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.dim { color: var(--text-muted); }
code { font-family: var(--font-mono); font-size: .92em; }

svg.ico { width: 20px; height: 20px; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn svg.ico { width: 18px; height: 18px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 8px 14px; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip-link:focus { top: 8px; text-decoration: none; color: var(--on-accent); }
#contenu:focus { outline: none; }

/* ───────────────────────────── the shell: rail */
body.has-rail { padding-left: var(--rail-w); }
.rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 900; width: var(--rail-w);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  background: var(--bg-2); border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail a, .rail button, .shell-top a, .shell-top button { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rail .rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 6px; color: var(--text); border-radius: var(--r-m); }
.rail .rail-brand:hover { background: var(--panel-2); text-decoration: none; }
.rail-brand .mark { flex: none; border-radius: 9px; }
.rail-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rail-call { font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.rail-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
.rail-clock { padding: 0 10px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
.rail-group { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-top: 1px solid var(--border); }
.rail-title { padding: 4px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-group a, .rail-group .rail-soon, .rail-foot a, .rail-foot button {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 30px; padding: 0 10px;
  border-radius: var(--r-s); color: var(--text-dim); font: 500 13.5px/1.2 var(--font-sans); white-space: nowrap;
  transition: background var(--anim), color var(--anim);
}
.rail-group .rail-soon { cursor: default; opacity: .55; }
.rail-soon .soon-tag { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.rail-group a:hover, .rail-foot a:hover, .rail-foot button:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.rail-group a.active { background: var(--accent-soft); color: var(--accent); }
.rail-group a.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
.rail a:focus-visible, .rail button:focus-visible, .shell-top a:focus-visible, .shell-top button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail .lbl { overflow: hidden; text-overflow: ellipsis; }
.rail-foot { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
/* The groups' frame: it takes the room left between the brand and the foot and scrolls inside when the window is short,
   so the language and the theme stay in sight. Its side margins let the active entry's mark (left: -8px) show. */
.rail-menu { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
@media (min-width: 1100px) {
  /* The foot on one row: the six languages, the theme's button as an icon (its name in its title). */
  .rail-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  .rail-foot .rail-encart { flex: 1 0 100%; }
  .rail-foot .rail-lang { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; padding: 0 0 0 4px; }
  .rail-foot .rail-lang a { padding: 0 4px; }
  .rail-foot button.theme-toggle { flex: none; width: 30px; min-height: 26px; padding: 0; justify-content: center; }
  .rail-foot .theme-toggle .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* A shorter window: a tighter rhythm, so the whole menu fits at 900 px; below 860 px the application's card makes way. */
@media (min-width: 720px) and (max-height: 999px) {
  .rail { gap: 1px; padding-top: 8px; padding-bottom: 6px; }
  .rail .rail-brand { padding-top: 2px; padding-bottom: 4px; }
  .rail-group { padding: 3px 0; gap: 0; }
  .rail-title { padding: 3px 10px 2px; }
  .rail-group a, .rail-group .rail-soon { min-height: 27px; }
}
@media (min-width: 720px) and (max-height: 859px) {
  .rail-foot .rail-encart { display: none; }
  .rail { padding-top: 6px; padding-bottom: 4px; }
  .rail-group { padding: 2px 0; }
  .rail-title { padding: 2px 10px 1px; }
  .rail-group a, .rail-group .rail-soon { min-height: 25px; }
}
.rail .theme-icon { width: 20px; flex: none; text-align: center; font-size: 15px; line-height: 1; }
/* The language switch (FR · EN · ES · DE · IT · PT), small, above the theme's button; a small menu in the phone's bar. */
.rail-lang { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 6px 4px; }
.rail-foot .rail-lang a, .shell-top .shell-lang a {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 22px; padding: 0 5px; gap: 0;
  border: 1px solid var(--border); border-radius: 999px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-muted);
}
.rail-foot .rail-lang a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rail-foot .rail-lang a:hover, .shell-top .shell-lang a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.shell-lang { position: relative; display: inline-flex; }
.shell-lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-dim); }
.shell-lang > summary::-webkit-details-marker { display: none; }
.shell-lang > summary::after { content: '▾'; font-size: 9px; opacity: .7; }
.shell-lang[open] > summary { color: var(--accent); border-color: var(--accent); }
.shell-lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  padding: 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.shell-top .shell-lang-menu a { justify-content: flex-start; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-s); font: 500 14px/1.2 var(--font-sans); letter-spacing: 0; }
.shell-top .shell-lang-menu a b { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-muted); min-width: 22px; }
.shell-top .shell-lang-menu a.on { color: var(--accent); background: var(--accent-soft); }
/* The same in the site's banner: after the clocks (beside them on a page, under them on the home page). */
.sb-lang { display: flex; gap: 3px; align-items: center; }
.sb-lang a { display: inline-flex; align-items: center; min-height: 20px; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-muted); }
.sb-lang a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.sb-lang a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.site-bandeau .sb-lang { align-self: center; padding-left: 12px; border-left: 1px solid var(--border); }
@media (max-width: 719px) { .sb-lang { display: none; } .shell-call { white-space: nowrap; } }
@media (max-width: 420px) { .shell-loc { display: none; } }

.rail-scrim { display: none; }
.shell-top { display: none; }

@media (max-width: 1099px) and (min-width: 720px) {
  :root { --rail-w: 60px; }
  .rail { padding: 8px 6px; }
  .rail-menu { margin: 0 -6px; padding: 0 6px; }
  .rail .rail-brand { justify-content: center; padding: 4px 0 8px; }
  .rail-brand .mark { width: 34px; height: 34px; }
  .rail-brand-txt, .rail-clock, .rail-title, .rail-soon .soon-tag { display: none; }
  .rail .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rail-group a, .rail-group .rail-soon, .rail-foot a, .rail-foot button { justify-content: center; padding: 0; min-height: 36px; }
  .rail-group a.active::before { left: -6px; }
  .rail-lang { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; padding: 2px 0 4px; gap: 3px; }
  .rail-foot .rail-lang a { padding: 0 3px; min-height: 19px; font-size: 9.5px; }
}
@media (max-width: 719px) {
  body.has-rail { padding-left: 0; }
  .shell-top {
    position: sticky; top: 0; z-index: 950; display: flex; align-items: center; gap: 10px;
    height: var(--top-h); padding: 0 8px 0 12px; background: var(--bg-2); border-bottom: 1px solid var(--border);
  }
  .shell-top .shell-brand { display: flex; align-items: center; gap: 9px; color: var(--text); min-width: 0; }
  .shell-brand .mark { flex: none; border-radius: 8px; }
  .shell-call { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
  .shell-loc { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
  .shell-clock { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
  .shell-top .shell-menu { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--border); color: var(--text); font: 600 13px var(--font-sans); }
  .rail { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .rail .rail-brand, .rail .rail-clock { display: none; }
  .rail-menu { flex: none; overflow: visible; margin: 0; padding: 0; }
  .js-nav .rail {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw);
    border-right: 1px solid var(--border); border-bottom: 0; box-shadow: var(--shadow-pop);
    transform: translateX(-105%); transition: transform 200ms cubic-bezier(.2,.7,.3,1); visibility: hidden; z-index: 1001;
  }
  .js-nav .rail .rail-brand { display: flex; }
  .js-nav.nav-open .rail { transform: none; visibility: visible; }
  .js-nav.nav-open .rail-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(5, 9, 13, .55); }
  .nav-open, .nav-open body { overflow: hidden; }
  .rail-group a, .rail-group .rail-soon, .rail-foot a, .rail-foot button { min-height: 40px; font-size: 15px; }
}
@media (max-width: 380px) { .shell-loc { display: none; } }
@media (prefers-reduced-motion: reduce) { .js-nav .rail { transition: none; } }

/* ───────────────────────────── pages */
.site-main { max-width: 1180px; margin: 0 auto; padding: 28px 28px 40px; min-height: 70vh; }
@media (max-width: 719px) { .site-main { padding: 18px 14px 32px; } }
.site-footer { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; margin-top: 40px; }
.site-footer .container { max-width: 1180px; margin: 0 auto; padding: 16px 28px; text-align: center; }
.site-footer a { color: var(--text-dim); }
.site-footer p { margin: 0; }

.page-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.page-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--text-dim); }
.page-head .flux a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.page-head .flux svg.ico { width: 16px; height: 16px; }

.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; min-width: 0; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
.card-title { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.card-title a { color: inherit; }
.card-title .ico { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.8; }
.card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.card-body { padding: 14px 16px; flex: 1; min-width: 0; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.card-foot a { font-weight: 600; }
.card-empty { margin: 0; color: var(--text-muted); font-size: 14px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); font: 600 12px var(--font-sans); color: var(--text-dim); white-space: nowrap; }
.pill.mini { height: 18px; padding: 0 7px; font-size: 10.5px; vertical-align: 1px; }
.pill.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.pill.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
a.pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: var(--r-m);
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 600 14px var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--anim), border-color var(--anim), color var(--anim); }
.btn:hover, .btn:focus { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.solid:hover, .btn.solid:focus { background: var(--accent-hover); color: var(--on-accent); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); color: var(--red); }

input, select, textarea { font: 14px var(--font-sans); color: var(--text); background: var(--well); border: 1px solid var(--border); border-radius: var(--r-s); padding: 7px 10px; min-height: 38px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--input-glow); }
input[type=checkbox] { min-height: 0; accent-color: var(--accent); }
label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }
form .card-body { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
form .card-body p { flex-basis: 100%; margin: 0; font-size: 12.5px; }
form.inline { display: inline; }
@media (max-width: 719px) {
  form .card-body label { width: 100%; }
  form .card-body label input, form .card-body label select { flex: 1; min-width: 0; }
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-dim); background: var(--bg); }
.tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tag-count { font-size: 10px; opacity: .8; color: var(--text-muted); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; }
.meta { color: var(--text-muted); font-size: 12.5px; margin: 0 0 6px; }
.meta time { font-family: var(--font-mono); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin: 22px 0 6px; color: var(--text-dim); font-size: 13px; }

/* home */
.home-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 24px 26px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: var(--r-l);
  background: radial-gradient(500px 260px at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, color-mix(in srgb, var(--info) 10%, transparent), transparent 70%), var(--panel);
  box-shadow: var(--shadow); overflow: hidden; }
.home-hero .mark { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.home-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: .05em; }
.home-hero h1 small { display: block; margin-top: 6px; font-size: 15px; letter-spacing: .01em; font-weight: 500; color: var(--text-dim); }
.home-hero p { margin: 10px 0 0; max-width: 62ch; color: var(--text-dim); }
.home-hero .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.home-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
.hero-horloges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-left: 12px; border-left: 1px solid var(--border); }
.hh { display: flex; align-items: baseline; gap: 10px; }
.hh-l { font: 700 10.5px var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); }
.hh-v { font: 600 17px var(--font-mono); color: var(--text-dim); letter-spacing: .03em; min-width: 5.2ch; text-align: right; }
.hh.utc .hh-v { font-size: 26px; font-weight: 700; color: var(--accent); text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); min-width: 8ch; }
.home-hero h1 { background: linear-gradient(100deg, var(--text) 30%, color-mix(in srgb, var(--accent) 70%, var(--text)) 70%); -webkit-background-clip: text; background-clip: text; }
.home-hero h1 small { -webkit-text-fill-color: var(--text-dim); }
.home-hero h1 { -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .home-hero h1, .home-hero h1 small { -webkit-text-fill-color: currentColor; background: none; } }
@media (max-width: 719px) { .home-hero { grid-template-columns: auto 1fr; gap: 14px; padding: 18px; } .home-hero .hero-txt { grid-column: 1 / -1; grid-row: 2; }
  .home-hero .mark { width: 64px; height: 64px; border-radius: 15px; } .hero-horloges { grid-row: 1; grid-column: 2; justify-self: end; } }
.home-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); margin-bottom: 18px; }
.home-grid > .card { grid-column: span 12; margin: 0; }
@media (min-width: 900px) {
  .home-grid > .span-5 { grid-column: span 5; } .home-grid > .span-7 { grid-column: span 7; }
  .home-grid > .span-6 { grid-column: span 6; } .home-grid > .span-4 { grid-column: span 4; } .home-grid > .span-8 { grid-column: span 8; }
}
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--td-border); font-size: 13.5px; }
.rows li:last-child { border-bottom: 0; }
.rows .call { font-family: var(--font-mono); font-weight: 700; letter-spacing: .02em; }
.rows .dim { color: var(--text-muted); font-size: 12.5px; }
.num { font-family: var(--font-mono); color: var(--text-dim); white-space: nowrap; }
.sat { color: var(--sat); }
.now { color: var(--green); font-weight: 700; }
.el.high, .num.high { color: var(--green); } .el.low, .num.low { color: var(--amber); } .num.mid { color: var(--text); }
.qso-rows li { grid-template-columns: 5.6em minmax(0, 1fr) auto; grid-auto-flow: row; justify-content: stretch; }
.qso-rows .where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-rows li { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-auto-flow: row; justify-content: stretch; }
.pass-rows .name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-rows .el { min-width: 3.2em; text-align: right; }
@media (max-width: 420px) { .pass-rows .dur { display: none; } .pass-rows li { grid-template-columns: minmax(0, 1fr) auto auto; } }
.home-grid > .card { container-type: inline-size; }
@container (max-width: 340px) { .pass-rows .dur, .qso-rows .where .dim, .card-head .card-meta { display: none; } .pass-rows li { grid-template-columns: minmax(0, 1fr) auto auto; } }
.latest-article h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.latest-article h3 a { color: var(--text); }
.latest-article p { margin: 6px 0 0; color: var(--text-dim); }
.derniere-image { text-align: center; }
.derniere-image img { max-width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--border); }
.derniere-image p, .derniere-image figcaption { margin: 8px 0 0; color: var(--text-dim); font-size: 13.5px; }
/* « Dernières images »: one at a time, fading and sliding in (carrousel.js); without a script, the newest. */
.car-piste { position: relative; display: grid; }
.car-diapo { grid-area: 1 / 1; margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden;
  transform: translateX(14px); transition: opacity 700ms ease, transform 700ms ease, visibility 0s linear 700ms; }
.car-diapo.actif { opacity: 1; visibility: visible; transform: none; transition: opacity 700ms ease, transform 700ms ease, visibility 0s; }
.car-diapo.sortie { transform: translateX(-14px); }
.car-diapo figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.carrousel { position: relative; }
.carrousel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.car-btn { position: absolute; top: calc(50% - 30px); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--panel) 82%, transparent); color: var(--text); cursor: pointer; z-index: 2;
  opacity: .55; transition: opacity 160ms ease, background 160ms ease; }
.car-btn .ico { width: 18px; height: 18px; }
.carrousel:hover .car-btn, .carrousel:focus-within .car-btn, .car-btn:focus-visible { opacity: 1; }
.car-btn:hover { background: color-mix(in srgb, var(--accent) 25%, var(--panel)); }
.car-prec { left: 6px; } .car-suiv { right: 6px; }
.car-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 6px; }
.car-points button { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.car-points button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background 160ms ease, transform 160ms ease; }
.car-points button[aria-current="true"]::before { background: var(--accent); transform: scale(1.25); }
.car-points button:focus-visible { outline: 2px solid var(--accent); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .car-diapo, .car-diapo.actif { transition: none; transform: none; } .car-btn, .car-points button::before { transition: none; } }
@media (hover: none) { .car-btn { opacity: .85; } }
.satme-teaser { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.satme-teaser img { width: 96px; height: auto; border-radius: var(--r-m); border: 1px solid var(--border); }
.satme-teaser p { margin: 0 0 8px; color: var(--text-dim); }
.satme-teaser strong { color: var(--text); }
.tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tool-tiles a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel-2); color: var(--text); }
.tool-tiles a:hover, .tool-tiles a:focus { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.tool-tiles .ico { margin-top: 1px; stroke: var(--accent); }
.tool-tiles b { display: block; font-size: 13.5px; }
.tool-tiles span span { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; }

/* articles */
.article-list { list-style: none; padding: 0; display: grid; gap: 12px; margin: 18px 0; }
.article-item { margin: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--shadow); }
.article-item h2 { font-weight: 700; font-size: 19px; margin: 0 0 4px; }
.article-item h2 a { color: var(--text); }
.article-item h2 a:hover { color: var(--accent); text-decoration: none; }
.article-item p { color: var(--text-dim); margin: 4px 0; }
.article { max-width: 760px; margin: 0 auto; }
.article-head h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
.hero-image { display: block; max-width: 100%; height: auto; margin: 14px 0; border-radius: var(--r-l); border: 1px solid var(--border); }
.article-body { font-size: 16px; line-height: 1.7; }
.article-body h2 { font-size: 22px; margin-top: 1.8rem; } .article-body h3 { font-size: 18px; margin-top: 1.4rem; }
.article-body pre { background: var(--well); padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-m); overflow-x: auto; font-size: 13px; }
.article-body :not(pre) > code { background: var(--well); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; color: var(--accent); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-m); }
.article-body blockquote { margin: 14px 0; padding: 8px 14px; border-left: 3px solid var(--accent); color: var(--text-dim); background: var(--panel); border-radius: 0 var(--r-m) var(--r-m) 0; }
.article-body table { border-collapse: collapse; font-size: 13px; } .article-body th, .article-body td { border: 1px solid var(--border); padding: 6px 10px; }
.article-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }

/* galleries */
.sm-section-title { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.sm-section-title .ico { stroke: var(--accent); }
.vign-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.vign-grille.large { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vign-grille.large .vign img { object-fit: contain; }
.vign { margin: 0; }
.vign a { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border); background: var(--well); aspect-ratio: 4 / 3; }
.vign a:hover { border-color: var(--accent); }
.vign img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vign figcaption { display: flex; justify-content: space-between; gap: 6px; padding: 4px 2px 0; font-size: 12px; color: var(--text-dim); }
.vign figcaption span { font-family: var(--font-mono); color: var(--text-muted); font-size: 11px; }
.gal-groupe .card-body { padding-top: 12px; }
.rows.sources li { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-auto-flow: row; justify-content: stretch; }
.docs li { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-auto-flow: row; justify-content: stretch; }
.docs .ico { stroke: var(--accent); }
.docs a:has(.doc-affiche) { display: flex; align-items: center; gap: 10px; min-width: 0; }
.docs .doc-affiche { flex: none; width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); background: #000; }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.album { color: var(--text); margin: 0; }
.album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.album span span { display: block; font-size: 12.5px; color: var(--text-muted); }
.album:hover { border-color: var(--accent); text-decoration: none; }
.item-image { margin: 0 0 16px; text-align: center; }
.item-image img { max-width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--border); background: #000; }
.item-video { width: 100%; height: auto; max-height: 70vh; border-radius: var(--r-m); background: #000; }
.item-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 10px 0; font-size: 14px; }
.item-meta dt { color: var(--text-muted); font-weight: 600; } .item-meta dd { margin: 0; }
.item-meta .big { font-size: 22px; font-weight: 700; color: var(--text); }

/* tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--td-border); vertical-align: middle; }
th { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); background: var(--panel-2); white-space: nowrap; }
tbody tr:hover { background: var(--accent-soft); }
td.call { font-family: var(--font-mono); font-weight: 700; }
td.name { font-weight: 700; }
tr.encours td { background: color-mix(in srgb, var(--green) 9%, transparent); }
tr.cache td { opacity: .55; }
td.act { white-space: nowrap; }
td.act form + form { margin-left: 6px; }
table.admin .btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 719px) { td.pays, th.pays, th.lignes, td.lignes { display: none; } th, td { padding: 6px 7px; } }
table.tle code { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* passes */
.mini-ciel { display: block; }
.mini-ciel circle, .mini-ciel path { fill: none; stroke: var(--border-strong); stroke-width: .7; }
.mini-ciel polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mini-ciel circle.aos { fill: var(--accent); stroke: none; }
/* The QO-100 sun outage (the « Station » page): the season's days, the next one lit. */
.qo100-soleil { margin-top: 18px; }
.qo100-soleil p { margin: 0 0 8px; }
.qo100-soleil-jours { margin: 4px 0 10px; max-width: 640px; }
.qo100-soleil-jours li.prochain { color: var(--accent); font-weight: 600; }
td.ciel-c { padding: 2px 6px; }
@media (max-width: 560px) { .ciel-c { display: none; } }
.sats-l { flex: 1 1 320px; } .sats-l input { flex: 1; min-width: 0; }
@media (max-width: 480px) { form .card-body .sats-l { flex-wrap: wrap; } form .card-body .sats-l input { flex-basis: 100%; } }
.frise { padding: 10px 12px 8px; margin: 0 0 16px; }
.frise { overflow-x: auto; }
.frise svg { width: 100%; min-width: 640px; height: auto; display: block; }
.frise .h { stroke: var(--border); stroke-width: 1; }
.frise .ht { fill: var(--text-muted); font: 11px var(--font-mono); text-anchor: middle; }
.frise .nom { fill: var(--text-dim); font: 600 12px var(--font-sans); }
.frise rect { fill: var(--accent); }
.frise rect.haut { fill: var(--green); }
.frise rect.suivi { stroke: var(--amber); stroke-width: 2.5; }
tr.suivi td.name { box-shadow: inset 3px 0 0 var(--amber); }
.frise .maintenant { stroke: var(--amber); stroke-width: 2; }
.frise figcaption { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* sky */
.ciel-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 899px) { .ciel-grille { grid-template-columns: 1fr; } }
#ciel-svg { width: 100%; max-width: 560px; display: block; margin: 8px auto 0; }
#ciel-svg .g { fill: none; stroke: var(--border-strong); stroke-width: .6; }
#ciel-svg .c { fill: var(--text-muted); font: 8px var(--font-sans); text-anchor: middle; }
#ciel-svg .tr { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
#ciel-svg .s { fill: var(--text-dim); stroke: var(--bg); stroke-width: .8; }
#ciel-svg .s.fav { fill: var(--amber); }
#ciel-svg .n { fill: var(--text); font: 600 6.5px var(--font-sans); paint-order: stroke; stroke: var(--bg); stroke-width: 2px; }
.ciel-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
/* One screen on a desktop (« ecran »): the two cards take the height left, the sky drawn to it, the list scrolling inside its card. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.ciel-page .page-head p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  body.ciel-page .ciel-grille { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.ciel-page .ciel-grille > .card { min-height: 0; margin: 0; }
  body.ciel-page .ciel-grille > .card > .card-body { min-height: 0; overflow: auto; padding: 10px 14px; }
  body.ciel-page .ciel-grille > .card:first-child > .card-body { display: flex; flex-direction: column; overflow: hidden; }
  body.ciel-page #ciel-svg { flex: 1 1 0; min-height: 160px; height: auto; max-width: none; }
}
.sous { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

/* grid */
.grid-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }

/* errors, login */
.erreur { max-width: 640px; margin: 40px auto; text-align: center; }
.erreur-code { font: 700 64px/1 var(--font-mono); color: var(--accent); margin: 8px 0; }
.erreur .actions { justify-content: center; }
.login-box { max-width: 420px; margin: 40px auto; }
.login-box form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.login-box label { flex-direction: column; align-items: stretch; }
.erreur-ligne { color: var(--red); font-weight: 600; }

/* SatMe page */
.sm-hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 26px; margin-bottom: 20px;
  border: 1px solid var(--border); border-radius: var(--r-l); background: radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--panel); box-shadow: var(--shadow); }
.sm-hero img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.sm-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }
.sm-hero .tagline { margin: 8px 0 0; font-size: 16px; color: var(--text-dim); max-width: 60ch; }
.sm-hero .actions { margin-top: 16px; }
@media (max-width: 719px) { .sm-hero { grid-template-columns: 1fr; padding: 18px; gap: 14px; } .sm-hero img { width: 80px; height: 80px; border-radius: 19px; } }
.sm-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sm-trio .card { margin: 0; }
.sm-trio h2 { margin: 0 0 4px; font-size: 17px; } .sm-trio p { margin: 0; color: var(--text-dim); font-size: 14px; }
.sm-essayer { color: var(--text-dim); }
.sm-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.sm-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.shot { margin: 0; }
.shot a { display: block; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border); background: var(--well); }
.shot a:hover { border-color: var(--accent); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 8px 2px 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.shot figcaption b { color: var(--text); }
.sm-diagram { padding: 12px; }
.sm-diagram img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: #fff; }
.sm-note { margin-top: 22px; font-size: 12.5px; color: var(--text-muted); }

/* SatMe's tabs on the site: the whole width */
.site-main.site-appli { max-width: none; padding: 0; min-height: 0; }
.appli-tete { margin: 0; padding: 14px 20px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.appli-tete h1 { font-size: 22px; margin: 0; }
.appli-tete p { flex: 1 1 380px; margin: 0; font-size: 13.5px; }
.site-moi input { width: 7.5em; text-transform: uppercase; font-family: var(--font-mono); }
.appli-credits { margin: 6px 20px 14px; font-size: 12px; color: var(--text-muted); }

/* live: the auto-pilot's banner, the « En direct » block (direct.js) */
.bandeau-direct { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 16px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--r-l); background: linear-gradient(90deg, var(--accent-soft), transparent 80%), var(--panel); font-size: 13.5px; color: var(--text); }
.bandeau-direct .bd-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--text); }
.bandeau-direct a.bd-item:hover { text-decoration: none; color: var(--accent); }
.bandeau-direct b { font-weight: 700; }
.bandeau-direct .bd-compte { font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
.bandeau-direct .bd-led { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 4px; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: bd-pulse 1.6s infinite; }
@keyframes bd-pulse { 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .bandeau-direct .bd-led { animation: none; } }
/* The block: the pictures on the left at about their own size (640 px at most, never enlarged but a small SSTV
   picture), the station's panels beside them (direct-panneaux.js); one under the other on a narrow block. */
.direct-bloc { container: direct / inline-size; }
.direct-corps { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.direct-corps > [hidden] { display: none !important; }
.direct-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.direct-media > [hidden] { display: none !important; }
@container direct (min-width: 600px) {
  .direct-corps.avec-panneaux.avec-media { grid-template-columns: minmax(0, min(640px, 56%)) minmax(0, 1fr); }
}
@container direct (min-width: 600px) and (max-width: 700px) {
  .direct-corps.avec-panneaux.avec-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container direct (min-width: 600px) {
  .direct-corps:not(.avec-panneaux) .direct-media { max-width: 640px; width: 100%; justify-self: center; }
}
.direct-bloc .card-meta.vivant { color: var(--red); font-weight: 700; }
/* The home page's block: a one-line strip while nothing is live (the other cards take the room), medium, or large. */
.direct-bande { display: none; }
.direct-bloc[data-taille="compact"] > .card-head, .direct-bloc[data-taille="compact"] > .direct-corps { display: none !important; }
.direct-bloc[data-taille="compact"] > .direct-bande { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; padding: 8px 14px; font-size: 14px; color: var(--text-dim); }
.direct-bande b { color: var(--text); }
.direct-bande .bd-led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.direct-bande-page { margin-left: auto; font-size: 13px; }
/* The change of size, morphed by the browser (View Transitions) where it can, never when less motion is asked. */
.home-grid.vt > #direct { view-transition-name: c-direct; }
.home-grid.vt > [aria-labelledby="h-ciel"] { view-transition-name: c-ciel; }
.home-grid.vt > [aria-labelledby="h-passes"] { view-transition-name: c-passes; }
.home-grid.vt > [aria-labelledby="h-qso"] { view-transition-name: c-qso; }
.home-grid.vt > [aria-labelledby="h-image"] { view-transition-name: c-image; }
.home-grid.vt > [aria-labelledby="h-article"] { view-transition-name: c-article; }
.home-grid.vt > [aria-labelledby="h-tools"] { view-transition-name: c-outils; }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.direct-spectre, .direct-datv { margin: 0; min-width: 0; }
.direct-spectre canvas { display: block; width: 100%; image-rendering: pixelated; background: #040814; }
.direct-spectre .direct-echelle { height: 46px; background: transparent; image-rendering: auto; }
.direct-spectre .direct-trace { height: 80px; border-radius: var(--r-s) var(--r-s) 0 0; }
.direct-spectre .direct-chute { height: 110px; border-radius: 0 0 var(--r-s) var(--r-s); }
.direct-bloc.grand .direct-trace { height: 110px; } .direct-bloc.grand .direct-chute { height: 170px; }
.direct-spectre figcaption, .direct-datv figcaption { margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.datv-cadre { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* direct.js gives each picture its own width (×1.5 for a small SSTV one) and ratio: never larger than that, smaller to fit. */
.datv-cadre img, .sstv-cadre img { display: block; width: 640px; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: var(--r-s); }
.datv-cadre img.agrandie, .sstv-cadre img.agrandie { image-rendering: pixelated; }
.direct-datv.hors img { filter: grayscale(1) brightness(.55); }
/* The DATV station watched: its callsign to its QRZ page, its flag (the flags' font), its record's words. */
.datv-station { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.datv-station .datv-call { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.datv-station .datv-drapeau { font-family: Drapeaux, var(--font-sans); }
.datv-video { display: block; width: 100%; max-width: 960px; max-height: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-s); }
.datv-video::cue { font: 600 clamp(11px, 2.3vw, 18px)/1.3 var(--font-sans); color: #fff; background: rgba(0,0,0,.72); }
.datv-complet { position: absolute; bottom: 8px; left: 8px; right: 8px; padding: 4px 9px; border-radius: var(--r-s); background: rgba(10,15,20,.82); color: var(--warn); font-size: 12px; }
.datv-st { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 6%; margin: 0; text-align: center; pointer-events: none; }
.datv-plein { position: absolute; z-index: 3; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-s); background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 34px; cursor: pointer; opacity: .75; }
.datv-plein:hover, .datv-plein:focus-visible { opacity: 1; }
.datv-cadre.plein { background: #000; width: 100%; height: 100%; }
.datv-cadre.plein .datv-video { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.datv-st.dessous { position: static; margin: 4px auto 0; min-height: calc(2 * 1.45 * var(--st-px, 15px)); }
.datv-st-reglages:not([hidden]) { display: contents; }
.datv-st-reglages input { vertical-align: -2px; margin: 0 2px 0 0; }
.datv-st span { display: inline; padding: 1px 8px; background: rgba(0,0,0,.72); color: #fff; font: 600 var(--st-px, 15px)/1.45 var(--font-sans); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* QO-100's wide band under the DATV picture (direct.js): the ground station's spectrum, the station's reception in violet. */
.datv-large { position: relative; margin-top: 6px; }
.datv-large canvas { display: block; width: 100%; height: 110px; background: #040814; border-radius: var(--r-s); cursor: crosshair; }
.direct-bloc.grand .datv-large canvas { height: 140px; }
.large-bulle { position: absolute; z-index: 2; top: 6px; max-width: min(280px, 100%); padding: 4px 8px; border-radius: var(--r-s); background: rgba(8,14,22,.92); color: #E8F0F7; font: 12px/1.4 var(--font-sans); white-space: pre-line; pointer-events: none; box-shadow: 0 0 0 1px rgba(154,167,180,.3); }
.large-legende { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; margin: 4px 0 0; font-size: 12px; color: var(--text-dim); }
.large-legende .cle i { display: inline-block; width: 14px; height: 8px; margin-right: 5px; vertical-align: 0; border-radius: 2px; }
.large-legende .cle.sol i { background: rgba(63,224,200,.45); box-shadow: inset 0 1px 0 #3FE0C8; }
.large-legende .cle.moi i { background: rgba(192,132,252,.4); box-shadow: inset 0 0 0 1px #C084FC; }
.datv-choix { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.datv-choix select { font: inherit; padding: 2px 6px; }
.spectre-debit { display: inline-flex; gap: 2px; margin-left: 10px; vertical-align: middle; }
.spectre-debit button { font: 600 11px var(--font-sans); padding: 2px 8px; border: 1px solid var(--line, rgba(154,167,180,.35)); background: transparent; color: var(--text-dim); border-radius: 999px; cursor: pointer; }
.spectre-debit button[aria-pressed="true"] { background: rgba(63,224,200,.18); color: var(--text); border-color: rgba(63,224,200,.6); }
.datv-hors { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(10,15,20,.8); color: var(--warn); font: 700 11px var(--font-sans); letter-spacing: .6px; text-transform: uppercase; }
/* SatMe-PC's auto scan over the picture: the signal and the countdown, a banner on each switch (full screen too). */
.datv-ba { position: absolute; z-index: 2; top: 8px; left: 8px; max-width: calc(100% - 60px); padding: 2px 10px; border-radius: 999px; background: rgba(10,15,20,.78); color: #fff; font: 600 12px/1.5 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 0 0 1px rgba(63,224,200,.5); }
.datv-ba b { font-variant-numeric: tabular-nums; color: #3FE0C8; }
.datv-ba .datv-ba-p { color: #cfdbe6; font-weight: 500; }
.datv-ba-bascule { position: absolute; z-index: 3; left: 50%; top: 14%; max-width: 86%; transform: translateX(-50%); padding: 8px 18px; border-radius: var(--r-s); background: rgba(8,14,22,.88); color: #fff; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px #3FE0C8, 0 6px 24px rgba(0,0,0,.45); animation: datv-ba-entre .45s ease-out, datv-ba-sort .6s ease-in 3.4s forwards; }
.datv-ba-bascule b { display: block; font: 700 17px/1.3 var(--font-sans); }
.datv-ba-bascule span { display: block; margin-top: 2px; font-size: 12px; color: #cfdbe6; }
.datv-cadre.plein .datv-ba { font-size: 15px; }
.datv-cadre.plein .datv-ba-bascule b { font-size: 26px; }
@keyframes datv-ba-entre { from { opacity: 0; transform: translate(-50%, -14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes datv-ba-sort { to { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-width: 600px) { .datv-ba-bascule { padding: 5px 12px; } .datv-ba-bascule b { font-size: 14px; } .datv-ba-bascule span { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .datv-ba-bascule { animation: none; } }
.direct-batc { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.direct-batc p { grid-column: 1 / -1; margin: 0; }
.batc-carte { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel-2); color: var(--text); }
.batc-carte:hover { border-color: var(--accent); text-decoration: none; color: var(--text); }
.batc-carte .ico { width: 20px; height: 20px; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.batc-carte span { display: flex; flex-direction: column; } .batc-carte span span { color: var(--text-muted); font-size: 13px; }
.petit { font-size: 12.5px; }

/* The station's panels (direct-panneaux.js): the satellite (globe, card), the antennas (sky dial), the receiving chain.
   One column beside the pictures; two, then three as the room grows. */
.direct-panneaux { container: panneaux / inline-size; min-width: 0; min-height: 0; }
.dp-grille { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.dp { --globe: 112px; --cadran: 100px; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel-2); font-size: 12.5px; line-height: 1.45; }
.dp p { margin: 0; }
.dp .mono { font-family: var(--font-mono); font-size: 12px; }
.dp-t { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 700 10.5px/1.3 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.dp-sat { display: grid; grid-template-columns: var(--globe) minmax(0, 1fr); gap: 11px; align-items: start; }
.dp-globe { position: relative; width: var(--globe); aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden;
  background: radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--info) 16%, transparent), transparent 70%), var(--espace); }
.dp-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dp-nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 15px; line-height: 1.3; }
.dp-nom b { font-size: 16px; letter-spacing: .02em; } .dp-nom .dim { font: 11.5px var(--font-mono); }
.dp-etat { margin: 2px 0 3px !important; color: var(--text-dim); }
.dp-etat b { color: var(--accent); font-weight: 700; }
.dp-mesures { color: var(--text); }
.dp-orbite { font-size: 11.5px; }
.dp-emetteurs { list-style: none; margin: 5px 0 0; padding: 4px 0 0; border-top: 1px solid var(--border); display: grid; gap: 1px; font-size: 11.5px; color: var(--text-dim); }
.dp-emetteurs li { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.dp-emetteurs li.choisi { color: var(--text); } .dp-emetteurs li.choisi .dp-em-nom { font-weight: 700; color: var(--accent); }
.dp-emetteurs li .mono { font-size: 11px; }
.dp-mode { display: inline-block; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border-strong); font: 600 10.5px/1.5 var(--font-sans); letter-spacing: .3px; color: var(--text-dim); text-transform: none; }
.dp-antennes { display: grid; grid-template-columns: var(--cadran) minmax(0, 1fr); gap: 11px; align-items: center; }
.dp-cadran { display: block; width: var(--cadran); height: auto; overflow: visible; }
.dp-cadran .dpc-fond { fill: var(--cc-horizon); }
.dp-cadran .dpc-h { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.dp-cadran .dpc-g { fill: none; stroke: var(--border-strong); stroke-width: .6; stroke-dasharray: 2 3; }
.dp-cadran .dpc-t { stroke: var(--text-muted); stroke-width: .8; }
.dp-cadran .dpc-c { fill: var(--text-dim); font: 700 8.5px var(--font-sans); text-anchor: middle; dominant-baseline: middle; }
.dp-cadran .dpc-e { fill: var(--text-muted); font: 6.5px var(--font-mono); }
.dp-cadran .dpc-centre { fill: var(--text-muted); }
.dp-cadran .dpc-sat circle { fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.dp-cadran .dpc-cible { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2.5 2; }
.dp-cadran .dpc-rotor line { stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; }
.dp-cadran .dpc-rotor circle { fill: var(--amber); stroke: var(--panel-2); stroke-width: 1; }
.dp-cadran .dpc-rotor.eteint line, .dp-cadran .dpc-rotor.eteint circle { stroke: var(--text-muted); fill: var(--text-muted); }
.dp-cadran .dpc-rotor.hors circle { fill: var(--red); }
.dp-cadran .dpc-parabole line { stroke: var(--info); stroke-width: 1.4; stroke-dasharray: 3 2; }
.dp-cadran .dpc-parabole path { fill: var(--info); stroke: var(--info); stroke-width: 1.2; }
.dp-ant { display: grid; gap: 2px; min-width: 0; }
.dp-ant-l { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.dp-ant-l b { font-size: 13px; }
.dp-ant-v { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 13px !important; }
.dp-ant-v b { color: var(--amber); font-weight: 700; } .dp-ant-v b.bleu { color: var(--info); }
.dp-ant-c { font-size: 11.5px !important; }
.dp-badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 0 8px; border-radius: 999px; font: 700 10.5px/1.6 var(--font-sans); letter-spacing: .3px;
  border: 1px solid var(--border-strong); color: var(--text-dim); }
.dp-badge.vert { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.dp-badge.ambre { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.dp-badge.rouge { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.dp-badge.ambre.vif { animation: dp-clignote 1.4s ease-in-out infinite; }
@keyframes dp-clignote { 50% { background: color-mix(in srgb, var(--amber) 24%, transparent); } }
.dp-chaine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dp-chaine li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--text-dim); }
.dp-chaine li b { color: var(--text); font-weight: 700; min-width: 3.4em; margin-right: 4px; }
.dp-chaine li.off { color: var(--text-muted); } .dp-chaine li.off b { color: var(--text-dim); }
.dp-t .dp-tx { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; font: 600 10.5px/1.6 var(--font-sans);
  letter-spacing: .2px; text-transform: none; color: var(--text-muted); white-space: nowrap; }
.dp-t .dp-tx .dp-led { margin: 0; }
.dp-t .dp-tx.emet { color: #fff; background: var(--red); font-weight: 700; }
.dp-t .dp-tx.emet .dp-led { background: #fff; }
.dp-led { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); opacity: .6; vertical-align: 0; margin-right: 5px; }
.dp-chaine li .dp-led { margin-right: 0; }
.dp-led.on { background: var(--green); opacity: 1; box-shadow: 0 0 5px color-mix(in srgb, var(--green) 70%, transparent); }
.dp-led.rouge { background: var(--red); opacity: 1; }
.dp-led.vif { animation: bd-pulse 1.6s infinite; }
.dp-led.on.vif { box-shadow: 0 0 0 0 rgba(91,214,138,.6); animation: none; }
/* Narrow (beside the home page's pictures): the card short — the transmitter in use and one more. */
@container panneaux (max-width: 469px) {
  .dp { --globe: 96px; --cadran: 86px; padding: 7px 9px; }
  .dp-grille { gap: 8px; }
  .dp-orbite { display: none; }
  .dp-emetteurs li:nth-child(n+2) { display: none; }
  .dp-emetteurs li, .dp-chaine li { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dp-chaine li b { margin-left: 2px; }
  .dp-t .dp-tx:not(.emet) { font-size: 0; gap: 0; padding: 0; }
  .dp-ant-l { flex-wrap: nowrap; white-space: nowrap; }
}
/* Narrow and short (a small screen's home page): the card's figures only. */
@container panneaux (max-width: 469px) and (max-height: 330px) {
  .dp { --globe: 80px; --cadran: 74px; padding: 6px 8px; }
  .dp-emetteurs { display: none; }
  .dp-grille { gap: 6px; }
  .dp { font-size: 12px; line-height: 1.4; }
  .dp-ant.avec-parabole .dp-r { display: none; }
}
@container panneaux (min-width: 470px) {
  .dp-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .dp-sat { grid-row: span 2; --globe: 128px; }
}
/* Tall as well (the live page): the globe on top of the card. */
@container panneaux (min-width: 470px) and (min-height: 430px) {
  .dp-sat { grid-template-columns: minmax(0, 1fr); --globe: 190px; }
  .dp-globe { justify-self: center; }
  .dp-antennes { --cadran: 132px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dp-ant-l, .dp-ant-v { justify-content: center; }
}
/* Wide but short (the home page's medium block on a small screen): the three side by side, the card's figures only. */
@container panneaux (min-width: 470px) and (max-height: 300px) {
  .dp-grille { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; }
  .dp-t .dp-tx:not(.emet) { font-size: 0; gap: 0; padding: 0; }
  .dp { padding: 7px 9px; }
  .dp-sat { grid-row: auto; --globe: 92px; }
  .dp-antennes { --cadran: 78px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; }
  .dp-ant-l, .dp-ant-v { justify-content: center; }
  .dp-ant-c, .dp-orbite { display: none; }
  .dp-emetteurs li:nth-child(n+2) { display: none; }
  .dp-emetteurs li, .dp-chaine li { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container panneaux (min-width: 900px) {
  .dp-grille { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .dp-sat { grid-row: auto; grid-template-columns: var(--globe) minmax(0, 1fr); --globe: 170px; }
  .dp-antennes { --cadran: 130px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: start; }
  .dp-ant-l, .dp-ant-v { justify-content: center; }
  .dp { font-size: 13.5px; }
}
/* The live page with no picture: the panels large. */
@container panneaux (min-width: 900px) and (min-height: 480px) {
  .dp-grille { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .dp-sat { --globe: 300px; }
  .dp-antennes { --cadran: 230px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dp-ant-l, .dp-ant-v { justify-content: center; }
  .dp { font-size: 14.5px; padding: 14px 16px; }
  .dp-nom b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dp-badge.ambre.vif, .dp-led.vif { animation: none; } }

/* admin › paramètres */
form.parametres .card-body { display: block; }
form.parametres .card-body > p.dim:first-child { margin: 0 0 10px; font-size: 13px; }
.parametres table.params input:not([type=checkbox]) { min-height: 32px; padding: 4px 8px; width: 100%; min-width: 9em; }
.parametres table.params input.court { width: 5.5em; min-width: 0; }
.parametres table.params input[type=checkbox] { width: 18px; height: 18px; }
.parametres .choix { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 4px 0 10px; }
.parametres label.large { display: flex; flex-direction: column; align-items: stretch; margin-top: 6px; }
.params-actions { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 2; }
.ok-ligne { color: var(--green); font-weight: 600; }
.taglist .tag[aria-current] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .parametres table.params input:not([type=checkbox]) { min-width: 6.5em; } .parametres table.params input.court { width: 4.2em; } }
.parametres .choix input.court { width: 5.5em; min-height: 32px; padding: 4px 8px; }

/* the SSTV pass in the live block (the auto-pilot's), and the banner's badge */
.bandeau-direct .bd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--red) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); color: var(--text); font-weight: 700; font-size: 12.5px; }
.bandeau-direct .bd-badge:hover { text-decoration: none; border-color: var(--red); color: var(--text); }
.bandeau-direct .bd-badge .bd-led { margin-right: 0; }
.direct-sstv { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sstv-cadre { position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.sstv-cadre img { width: 480px; }
.sstv-cadre img[hidden] + .sstv-attente { padding: 40px 0; }
.sstv-attente { color: var(--text-muted); font-size: 13px; }
.sstv-info p { margin: 0 0 4px; }
.sstv-titre { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.sstv-titre .bd-led { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: bd-pulse 1.6s infinite; flex: none; }
.sstv-compte { font: 700 18px var(--font-mono); color: var(--accent); }
.sstv-mesures { color: var(--text-dim); font-size: 14px; }
.outils-bande .tuile-satme { display: none; }

/* One screen on a desktop (« ecran »: the home page, the live page): the grid fills the window, each card scrolls
   inside itself, the canvases follow the height; a phone or a short window scrolls as usual. */
@media (min-width: 1100px) and (min-height: 640px) {
  /* The visible viewport (dvh: whatever the browser's bars, bookmarks, zoom or taskbar leave), 100vh where dvh is unknown. */
  body.ecran { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.ecran .site-main { flex: 1; min-height: 0; width: 100%; max-width: 1720px; padding: 14px 24px 12px; display: flex; flex-direction: column; }
  body.ecran .site-footer { margin-top: 0; } body.ecran .site-footer .container { padding: 6px 24px; }
  body.ecran .bandeau-direct { margin-bottom: 10px; padding: 6px 12px; }
  body.ecran .page-head { margin-bottom: 10px; padding-bottom: 8px; } body.ecran .page-head h1 { font-size: 22px; margin-bottom: 2px; }
  body.ecran .home-hero { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 10px 18px; margin-bottom: 12px; }
  body.ecran .home-hero .mark { width: 52px; height: 52px; border-radius: 12px; }
  body.ecran .home-hero h1 { font-size: 26px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  body.ecran .home-hero h1 small { display: inline; margin: 0; font-size: 14px; }
  body.ecran .home-hero p { margin-top: 2px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
  body.ecran .home-hero .pills { display: none; }
  body.ecran .home-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.ecran .hh.utc .hh-v { font-size: 22px; } body.ecran .hh-v { font-size: 14px; } body.ecran .hero-horloges { gap: 2px; }
  body.ecran .home-grid { flex: 1; min-height: 0; margin: 0; gap: 12px; grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
  body.ecran .home-grid > .card { grid-column: var(--gc, span 12); grid-row: var(--gr, auto); min-height: 0; }
  /* The last pictures and the last article on the bottom row: that row taller, the passes and contacts above a little shorter. */
  body.ecran .home-grid[data-rangs="bas"] { grid-template-rows: minmax(0, .86fr) minmax(0, .86fr) minmax(0, 1.28fr) auto; }
  /* The live block medium (the sky taller) or a strip (its own first row, the others as without it). */
  body.ecran .home-grid[data-taille="moyen"] { grid-template-rows: repeat(6, minmax(0, 1fr)) auto; }
  body.ecran .home-grid[data-taille="moyen"] > .card { grid-column: var(--gc-m, var(--gc, span 12)); grid-row: var(--gr-m, var(--gr, auto)); }
  body.ecran .home-grid[data-taille="compact"] { grid-template-rows: auto repeat(3, minmax(0, 1fr)) auto; }
  body.ecran .home-grid[data-taille="compact"] > .card { grid-column: var(--gc-c, var(--gc, span 12)); grid-row: var(--gr-c, var(--gr, auto)); }
  body.ecran .direct-bloc[data-taille="compact"] > .direct-bande { padding: 6px 14px; }
  body.ecran .home-grid > .card > .card-body { min-height: 0; overflow: auto; padding: 10px 14px; }
  body.ecran .card-title { flex: 1 1 auto; min-width: 5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  body.ecran .card-head .card-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.ecran .card-title .ico { vertical-align: -3px; margin-right: 6px; }
  body.ecran .card-head { padding: 8px 14px 7px; } body.ecran .card-foot { padding: 7px 14px; }
  body.ecran .home-grid > .carte-satme { display: none; }
  body.ecran .outils-bande .card-head { display: none; }
  body.ecran .outils-bande .card-body { padding: 8px; overflow: hidden; }
  body.ecran .outils-bande .tool-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  body.ecran .outils-bande .tool-tiles a { padding: 7px 10px; align-items: center; }
  body.ecran .outils-bande .tool-tiles span span { display: none; }
  body.ecran .outils-bande .tuile-satme { display: flex; }
  body.ecran .derniere-image { display: flex; flex-direction: column; overflow: hidden !important; }
  body.ecran .derniere-image a { flex: 1; min-height: 0; display: flex; justify-content: center; }
  body.ecran .derniere-image img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  body.ecran .derniere-image p, body.ecran .derniere-image figcaption { margin-top: 6px; }
  body.ecran .derniere-image .car-piste { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  body.ecran .car-diapo { height: 100%; }
  body.ecran .car-diapo a { flex: 1; min-height: 0; display: flex; justify-content: center; max-width: 100%; }
  body.ecran .carrousel .car-points { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; margin: 0; padding: 1px 6px; border-radius: 999px; z-index: 2;
    background: color-mix(in srgb, var(--panel) 75%, transparent); flex-wrap: nowrap; }
  body.ecran .carrousel .car-btn { top: calc(50% - 30px); }
  body.ecran .latest-article h3 { font-size: 16px; }
  /* The live block: its drawings take the height left. */
  body.ecran .direct-bloc > .card-body { display: grid; overflow: hidden; }
  body.ecran .direct-corps { min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.ecran .direct-corps > [hidden] { display: none !important; }
  body.ecran .direct-media { height: 100%; }
  body.ecran .direct-media > * { flex: 1 1 0; }
  body.ecran .direct-media > .direct-batc, body.ecran .direct-media > .card-empty { flex: 0 0 auto; }
  body.ecran .direct-panneaux { overflow: hidden auto; scrollbar-width: thin; container-type: size; height: 100%; }
  body.ecran .direct-spectre { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.ecran .direct-media figcaption, body.ecran .datv-station { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
  /* The spectrum's caption: the rate chooser kept in sight, the legend cut short before it. */
  body.ecran .direct-spectre figcaption { display: flex; align-items: center; gap: 6px; text-overflow: clip; }
  body.ecran .direct-spectre figcaption [data-spectre-legende] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.ecran .direct-spectre figcaption .spectre-debit { flex: none; margin-left: auto; }
  body.ecran .direct-spectre .direct-trace { flex: 2 1 0; height: auto; min-height: 40px; }
  body.ecran .direct-spectre .direct-chute { flex: 3 1 0; height: auto; min-height: 40px; }
  body.ecran .direct-datv { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.ecran .datv-cadre { flex: 1 1 auto; min-height: 0; }
  body.ecran .direct-sstv { min-height: 0; }
  body.ecran .sstv-cadre { flex: 1 1 auto; min-height: 0; }
  body.ecran .direct-batc { align-content: start; }
}

/* ───────────────────────────── « Au-dessus de JN18FS » (ciel-accueil.js): the globe, the sky dial, the next AOS */
.carte-ciel { container-type: inline-size; container-name: ciel; }
.carte-ciel > .card-body.ciel-corps { padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(210px, 1fr); min-height: 0; }
.ciel-globe { position: relative; min-height: 300px; overflow: hidden; border-right: 1px solid var(--border);
  background: radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--info) 14%, transparent), transparent 60%), var(--espace); }
.ciel-globe::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 82% 12%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 68% 78%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 24% 84%, #dfe8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 52%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 58%, #e8f0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 94%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 34%, #fff 50%, transparent 51%);
  animation: ciel-scintille 7s ease-in-out infinite alternate; }
:root[data-theme="light"] .ciel-globe::before { opacity: 0; }
@keyframes ciel-scintille { from { opacity: .45; } to { opacity: .85; } }
.ciel-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; opacity: 0; transition: opacity 600ms ease; }
.ciel-globe canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ciel-globe canvas.tire { cursor: grabbing; }
.js-nav .ciel-globe canvas { opacity: 1; }
.ciel-globe-att { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: var(--text-muted); }
.ciel-cote { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; min-width: 0; min-height: 0; }
.ciel-aos { display: grid; gap: 1px; }
.ciel-aos-l { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1.2 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.ciel-aos-l .bd-led { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: bd-pulse 1.6s infinite; }
.ciel-aos-nom { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ciel-aos-compte small { font: 600 12px var(--font-sans); color: var(--text-dim); margin-right: 6px; text-shadow: none; letter-spacing: 0; }
.ciel-aos-compte { font: 700 26px/1.1 var(--font-mono); white-space: nowrap; color: var(--accent); letter-spacing: .02em; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.ciel-aos-det { font: 12px/1.4 var(--font-mono); color: var(--text-dim); }
.ciel-cadran { display: block; width: 100%; flex: 1 1 auto; min-height: 120px; max-height: 440px; margin: auto; overflow: visible; }
.ciel-cadran .cc-z { stop-color: var(--cc-zenith); } .ciel-cadran .cc-hz { stop-color: var(--cc-horizon); }
.ciel-cadran .cc-h { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.ciel-cadran .cc-g { fill: none; stroke: var(--border-strong); stroke-width: .6; stroke-dasharray: 2 3; opacity: .8; }
.ciel-cadran .cc-t { stroke: var(--text-muted); stroke-width: .8; opacity: .6; }
.ciel-cadran .cc-c { fill: var(--text-dim); font: 700 11px var(--font-sans); text-anchor: middle; dominant-baseline: middle; }
.ciel-cadran .cc-e { fill: var(--text-muted); font: 8px var(--font-mono); }
.ciel-cadran .cc-trace { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linecap: round; opacity: .85; }
.ciel-cadran .cc-trace.encours { stroke: var(--accent); stroke-dasharray: none; opacity: .9; }
.ciel-cadran .cc-aos { fill: var(--amber); }
.ciel-cadran .cc-sat circle { fill: var(--accent); stroke: var(--bg); stroke-width: 1; filter: drop-shadow(0 0 3px var(--accent)); }
.ciel-cadran .cc-sat.lui circle { fill: var(--amber); filter: drop-shadow(0 0 4px var(--amber)); }
.ciel-cadran .cc-sat text { fill: var(--text); font: 700 10.5px var(--font-sans); paint-order: stroke; stroke: var(--cc-horizon); stroke-width: 3px; stroke-linejoin: round; }
.ciel-cadran .cc-soleil circle { fill: #FFD166; stroke: #FFB454; stroke-width: 1.5; filter: drop-shadow(0 0 4px #FFB454); }
.ciel-cadran .cc-lune circle { fill: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.ciel-cadran .cc-lune path { fill: #E8EEF6; }
.ciel-astres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-muted); }
.ciel-astres li { display: inline-flex; align-items: center; gap: 6px; }
.ciel-astres b { color: var(--text-dim); font-family: var(--font-mono); font-weight: 600; }
.ciel-astres .ast { width: 9px; height: 9px; border-radius: 50%; background: #FFD166; box-shadow: 0 0 6px #FFB454; }
.ciel-astres .lune .ast { background: #DDE5EF; box-shadow: none; }
.ciel-astres .sfi .ast { background: none; border: 2px solid #FFB454; width: 9px; height: 9px; box-shadow: 0 0 6px #FFB454; }
@media (prefers-reduced-motion: reduce) { .ciel-globe::before, .ciel-aos-l .bd-led { animation: none; } .ciel-globe canvas { transition: none; } }
/* Narrow: the globe on top, the dial and the countdown below it. */
@container ciel (max-width: 470px) {
  .carte-ciel > .card-body.ciel-corps { grid-template-columns: minmax(0, 1fr); }
  .ciel-globe { border-right: 0; border-bottom: 1px solid var(--border); min-height: 0; aspect-ratio: 1 / .92; }
  .ciel-cote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .ciel-cote .ciel-astres { grid-column: 1 / -1; }
}
html:not(.js-nav) .ciel-globe { display: none; }
html:not(.js-nav) .carte-ciel > .card-body.ciel-corps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran .carte-ciel { container-type: size; }
  body.ecran .home-grid > .carte-ciel > .card-body { overflow: hidden; padding: 0; }
  body.ecran .ciel-globe { min-height: 0; }
}
/* Short (beside the live block): no globe, the dial beside the countdown. */
@container ciel (max-height: 300px) {
  .carte-ciel > .card-body.ciel-corps { grid-template-columns: minmax(0, 1fr); }
  .ciel-globe { display: none; }
  .ciel-cote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 8px 14px; height: 100%; }
  .ciel-cote .ciel-cadran { grid-row: 1; grid-column: 1; height: 100%; width: auto; aspect-ratio: 1; min-height: 0; max-height: 100%; }
  .ciel-cote .ciel-aos { grid-column: 2; }
  .ciel-cote .ciel-astres { grid-column: 3; flex-direction: column; gap: 6px; }
  .ciel-aos-compte { font-size: 22px; }
}
@container ciel (max-height: 300px) and (max-width: 520px) { .ciel-cote .ciel-astres { display: none; } }

/* ───────────────────────────── the logbook in figures, on a map (carte-qso.js), the station's QSL-like card */
.carnet-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
.chiffre { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.chiffre::after { content: ''; position: absolute; inset: auto -20% -60% auto; width: 80%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events: none; }
.chiffre b { font: 700 28px/1.1 var(--font-mono); color: var(--text); letter-spacing: .01em; }
.chiffre span { font: 700 10.5px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.chiffre small { font: 12px var(--font-mono); color: var(--accent); }
.carte-qso-corps { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0; padding: 0; }
.carte-qso-cadre { position: relative; height: clamp(280px, 46vw, 460px); border-right: 1px solid var(--border); }
.carte-qso-cadre canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.carte-qso-cadre canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.carte-bulle { position: absolute; z-index: 2; padding: 7px 10px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); font-size: 12.5px; line-height: 1.45; pointer-events: none; max-width: 260px; }
.par-sat { padding: 10px 14px; min-width: 0; }
.par-sat .sous { margin-top: 2px; }
.par-sat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.par-sat a { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 4px; border-radius: var(--r-s); color: var(--text); font-size: 13px; }
.par-sat a:hover { background: var(--accent-soft); text-decoration: none; }
.ps-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sat); }
.ps-b { height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; }
.ps-b i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }
.carte-legende { font-size: 12.5px; color: var(--text-dim); gap: 6px 18px; }
.carte-legende span { display: inline-flex; align-items: center; gap: 6px; }
.carte-legende .pt { width: 9px; height: 9px; border-radius: 50%; } .carte-legende .pt.sat { background: var(--accent); } .carte-legende .pt.ter { background: var(--info); }
html:not(.js-nav) .carte-qso-cadre { display: none; }
@media (max-width: 719px) { .carte-qso-corps { grid-template-columns: 1fr; } .carte-qso-cadre { border-right: 0; border-bottom: 1px solid var(--border); height: 300px; } .chiffre b { font-size: 23px; } }
.carte-qsl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 26px; align-items: center; margin: 26px 0 6px; padding: 20px 24px; position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--accent) 4%, transparent) 14px 15px),
    radial-gradient(600px 220px at 100% 0%, color-mix(in srgb, var(--info) 16%, transparent), transparent 70%), var(--panel); box-shadow: var(--shadow); }
.carte-qsl::before { content: 'QSL'; position: absolute; right: 18px; bottom: -22px; font: 800 120px/1 var(--font-sans); letter-spacing: .05em; color: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; }
.qsl-gauche { display: grid; justify-items: center; text-align: center; gap: 2px; padding-right: 22px; border-right: 1px dashed var(--border-strong); }
.qsl-gauche .mark { border-radius: 14px; }
.qsl-call { margin: 6px 0 0; font: 800 30px/1 var(--font-sans); letter-spacing: .08em; }
.qsl-nom { margin: 0; color: var(--text-dim); font-size: 13px; }
.qsl-champs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.qsl-champs dt { font: 700 10.5px/2 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.qsl-champs dd { margin: 0; }
.qsl-merci { grid-column: 2; margin: 4px 0 0; font-style: italic; color: var(--text-dim); }
@media (max-width: 560px) { .carte-qsl { grid-template-columns: 1fr; } .qsl-gauche { border-right: 0; border-bottom: 1px dashed var(--border-strong); padding: 0 0 12px; } .qsl-merci { grid-column: 1; } }

/* ───────────────────────────── the SSTV wall, the viewer (galerie.js) */
.sm-section-title .titre-lien { margin-left: auto; text-transform: none; letter-spacing: 0; }
.mur-filtres { margin: 0 0 18px; }
/* SSTV · SSDV on one wall: the tabs; an SSDV picture's mark, its packet gauge and bar */
.mur-genres { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); }
.mur-genres a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; font: 700 13px var(--font-sans); color: var(--text-dim); }
.mur-genres a:hover { color: var(--text); text-decoration: none; }
.mur-genres a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.mur-genres a[aria-current="page"] .tag-count { color: inherit; opacity: .8; }
.ssdv-marque { position: absolute; left: 6px; bottom: 8px; padding: 0 6px; border-radius: 999px; background: rgba(10,15,20,.78); color: #E8F0F7; font: 700 10px/16px var(--font-mono); letter-spacing: .5px; pointer-events: none; }
.ssdv-jauge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(10,15,20,.7); pointer-events: none; }
.ssdv-jauge > span { display: block; height: 100%; background: var(--amber); }
.ssdv-barre { display: block; height: 10px; margin: 2px 0 10px; border-radius: 999px; background: var(--well); border: 1px solid var(--border); overflow: hidden; }
.ssdv-barre > span { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.ssdv-barre.complete > span { background: var(--green); }
.ssdv-ok { color: var(--green); font-weight: 600; }
.vign.ssdv figcaption { flex-wrap: wrap; white-space: nowrap; }
.ssdv-image figcaption { margin: 6px 2px 0; font-size: 13px; }
.mur { display: flex; flex-wrap: wrap; gap: 14px; }
.mur-passage { position: relative; flex: 1 1 calc(var(--n, 1) * 178px + 26px); max-width: 100%; padding: 12px 13px 13px; border: 1px solid var(--border); border-radius: var(--r-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60px), var(--panel); box-shadow: var(--shadow); }
.mur-passage::before { content: ''; position: absolute; left: 13px; right: 13px; top: -1px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .7; }
.mur-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 10px; }
.mur-tete .mur-heure { flex-basis: 100%; }
.mur-tete .mur-sat { margin-left: auto; }
.mur-jour { font-weight: 700; color: var(--text); }
.mur-sat { font: 700 12px var(--font-sans); padding: 1px 9px; border-radius: 999px; color: var(--sat); border: 1px solid color-mix(in srgb, var(--sat) 40%, transparent); background: color-mix(in srgb, var(--sat) 10%, transparent); }
.mur-sat:hover { text-decoration: none; border-color: var(--sat); color: var(--sat); }
.mur-tete .num { font-size: 12.5px; color: var(--text-muted); }
.mur-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.mur-grille .vign a { aspect-ratio: 320 / 256; }
.vign a { position: relative; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.vign a:hover, .vign a:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.vign.recente a { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); animation: recente 2.8s ease-in-out infinite alternate; }
.vign.recente a::after { content: 'Dernière'; position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 10.5px var(--font-sans); letter-spacing: .4px; text-transform: uppercase; }
@keyframes recente { from { box-shadow: 0 0 0 1px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); } to { box-shadow: 0 0 0 1px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vign a { transition: none; } .vign.recente a { animation: none; } .vign a:hover { transform: none; } }
@media (max-width: 560px) { .mur-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .mur-passage { flex-basis: 100%; } }
.vi-ouverte, .vi-ouverte body { overflow: hidden; }
/* A popup window over the page (the page dimmed behind it), not the whole screen; nearly full on a phone. */
dialog.visionneuse { width: min(1100px, 92vw); height: min(820px, 88vh); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #0B1016; color: #E8F0F7; box-shadow: 0 30px 90px rgba(0, 0, 0, .65); }
dialog.visionneuse::backdrop { background: rgba(3, 6, 10, .62); backdrop-filter: blur(3px); }
dialog.visionneuse.vi-pdf { width: min(1200px, 94vw); height: 92vh; }
@media (max-width: 560px) { dialog.visionneuse { width: 96vw; height: 90vh; border-radius: 10px; } }
.vi-scene { position: absolute; inset: 0 0 64px; display: flex; align-items: center; justify-content: center; padding: 18px 70px; }
.vi-img { width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .6)); }
.vi-img[hidden], .vi-video[hidden] { display: none; }
.vi-pdf .vi-scene { padding: 14px 18px; }
.vi-cadre { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
@media (max-width: 560px) { .vi-pdf .vi-scene { inset: 0 0 96px; padding: 6px; } }
.vi-video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.vi-att { position: absolute; bottom: 12px; font-size: 12px; color: #9AA7B4; }
.vi-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #E8F0F7; transition: background 140ms ease; }
.vi-btn:hover { background: rgba(63, 224, 200, .2); }
.vi-btn:focus-visible { outline: 2px solid #3FE0C8; outline-offset: 2px; }
.vi-btn .ico { width: 22px; height: 22px; }
.vi-prec, .vi-suiv { position: absolute; top: calc(50% - 55px); }
.vi-prec { left: 14px; } .vi-suiv { right: 14px; }
.vi-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 22px; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 15, 20, .85); }
.vi-legende { margin: 0; flex: 1; min-width: 0; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.vi-compte { color: #9AA7B4; font-size: 13px; }
.vi-fiche { color: #3FE0C8; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 560px) { .vi-scene { padding: 10px 8px; inset: 0 0 96px; } .vi-prec, .vi-suiv { top: auto; bottom: 108px; } .vi-barre { height: 96px; flex-wrap: wrap; align-content: center; gap: 4px 12px; } .vi-legende { flex-basis: 100%; white-space: normal; } }
/* The home page's last picture: it glows a little. */
.derniere-image a img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }

/* the site's banner on every page (Gabarit.bandeauSite): one line under the home page's, the owner's word in its slot */
.site-bandeau { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-l);
  background: linear-gradient(100deg, var(--accent-soft), transparent 55%), var(--panel); }
.site-bandeau .mark { width: 34px; height: 34px; border-radius: 9px; flex: none; display: block; }
.sb-marque { display: flex; flex: none; }
.sb-txt { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
.sb-call { font-weight: 700; font-size: 19px; letter-spacing: .05em; color: var(--text); }
.sb-call:hover { text-decoration: none; color: var(--accent); }
.sb-sous { color: var(--text-dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.sb-annonce { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--text); font-size: 13.5px; font-weight: 600; }
.sb-annonce[hidden] { display: none; }
.site-bandeau .sb-annonce { flex: 1 1 0; }
.sb-annonce-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-bandeau .hh + .hh { padding-left: 12px; border-left: 1px solid var(--border); }
.site-bandeau .hero-horloges { margin-left: auto; flex-direction: row; align-items: baseline; gap: 14px; padding-left: 14px; flex: none; }
.site-bandeau .hh.utc .hh-v { font-size: 18px; } .site-bandeau .hh-v { font-size: 14px; }
.site-bandeau.appli { margin: 10px 16px; }
.home-hero .sb-annonce { display: inline-flex; margin-top: 10px; max-width: 100%; color: var(--text); }
.home-hero .sb-annonce[hidden] { display: none; }
@media (max-width: 719px) {
  .site-bandeau { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; margin-bottom: 14px; }
  .site-bandeau .hero-horloges { display: none; }
  .site-bandeau .sb-annonce { flex-basis: 100%; border-radius: var(--r-m); }
  .sb-annonce-txt { white-space: normal; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran .site-bandeau { margin-bottom: 10px; padding: 5px 12px; }
  body.ecran .home-hero .sb-annonce { margin-top: 3px; padding: 1px 10px; }
  body.ecran .hero-txt:has(.sb-annonce:not([hidden])) .hero-desc { display: none; }
}
.page-head + .carte-qsl { margin: 0 0 18px; }

/* SSTV series: the auto-pilot's mark, a planche's page (VuesSstv) */
.robot { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); white-space: nowrap; }
.robot-nom { color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
.vign { position: relative; }
.vign > .robot { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 999px; background: rgba(10,15,20,.78); font-size: 12px; pointer-events: none; }
.vign-fiche { margin: 2px 2px 0; font-size: 12px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; }
.mur-tete .robot { flex-basis: 100%; font-size: 12.5px; min-width: 0; }
.pill.robot-pill { height: auto; min-height: 24px; color: var(--text); }
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.pf-haut { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; margin-bottom: 22px; }
@media (max-width: 899px) { .pf-haut { grid-template-columns: minmax(0, 1fr); } }
.pf-image { margin: 0; }
.pf-image a { display: block; }
.pf-image img { display: block; width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--border); background: #000; }
.pf-resume .card-body { padding-top: 12px; }
.pf-compte { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.pf-compte b { font: 700 38px/1 var(--font-sans); color: var(--accent); }
.pf-compte span { color: var(--text-dim); font-size: 15px; }
.pf-puces { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0 0 8px; padding: 0; }
.pf-puces li { min-width: 28px; height: 26px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-s);
  font: 700 12.5px var(--font-mono); border: 1px solid var(--border); }
.pf-puces li.recue { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--accent); }
.pf-puces li.manque { color: var(--text-muted); border-style: dashed; background: transparent; }
.pf-manque { margin: 0 0 6px; color: var(--warn); font-weight: 600; font-size: 14px; }
.pf-complete { margin: 0 0 6px; color: var(--green); font-weight: 600; font-size: 14px; }
.pf-resume .item-meta { font-size: 13.5px; }
.pf-resume .actions { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-diapos .vign figcaption { flex-direction: column; gap: 0; color: var(--text); font-weight: 600; }
.vign.absente .vign-vide { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-m);
  border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 12px; }
.vign.absente .vign-vide b { font: 700 26px var(--font-mono); color: var(--text-dim); }
table.pf-passages td, table.pf-passages th { white-space: nowrap; }
table.pf-passages a .ico, .pf-pilote .ico { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.pf-pilote { margin: 22px 0 12px; }
.pf-pilote p { margin: 0 0 8px; }
.pf-prochain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mur-pilote { margin: 0 0 16px; }
.mur-pilote .card-body { padding: 10px 16px; }
.mur-campagnes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.mur-pilote .pf-prochain { margin: 6px 0 0; font-size: 14px; }

/* Pictures of the content (articles, pages, albums): figures, galleries, all opened by the viewer (galerie.js). */
a[data-plein] { cursor: zoom-in; }
.hero-lien { display: block; }
.fig-contenu { margin: 1.4rem 0; }
.fig-contenu a { display: block; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--border); background: var(--well); }
.fig-contenu a:hover { border-color: var(--accent); }
.fig-contenu img { display: block; width: 100%; height: auto; border-radius: 0; }
.fig-video video { display: block; width: 100%; height: auto; max-height: min(640px, 80vh); background: #000; border-radius: var(--r-m); border: 1px solid var(--border); }
/* A video in a gallery: its poster and a ▶ badge; in a sentence, a link with a ▶ before it. */
.vign-video a { position: relative; }
.vign-sans-affiche { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--well), var(--panel)); }
.badge-lecture { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(3, 6, 10, .62);
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); transition: transform 160ms ease, background 160ms ease; pointer-events: none; }
.badge-lecture::after { content: ''; position: absolute; left: 18px; top: 13px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.vign-video a:hover .badge-lecture, .vign-video a:focus-visible .badge-lecture { transform: scale(1.08); background: color-mix(in srgb, var(--accent) 70%, rgba(3, 6, 10, .6)); }
.lien-video::before { content: '▶\00a0'; font-size: .85em; }
@media (prefers-reduced-motion: reduce) { .badge-lecture { transition: none; } }
.fig-contenu figcaption { padding: 6px 2px 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.galerie-contenu { margin: 1.2rem 0 1.6rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.galerie-contenu .vign img { border-radius: 0; height: 100%; object-fit: contain; }
.galerie-contenu .vign figcaption { display: block; font-size: 12.5px; line-height: 1.4; padding-top: 6px; }
.derniere-image a[data-plein], .item-image a[data-plein] { display: block; }

/* The station's page: wider, its title's lead under it. */
.article.page-station { max-width: 1040px; }
.page-station .chapo { margin: 0; color: var(--text-dim); font-size: 16.5px; }
.en-francais { margin: 2px 0 6px; font-size: 12.5px; color: var(--text-muted); font-style: italic; }
h2 .en-francais { font-size: 12px; font-weight: 400; }
.page-station .article-body > h2 { display: flex; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.page-station .article-body > h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); flex: none; }
.page-station .article-body > ul { padding-left: 1.2rem; }
.page-station .article-body > ul li::marker { color: var(--accent); }
.page-station .fig-contenu:first-child { margin-top: .4rem; }
.page-station .article-body > .fig-contenu:first-child img { max-height: min(600px, 72vh); object-fit: cover; }
@media (max-width: 560px) { .galerie-contenu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .galerie-contenu .vign figcaption { font-size: 11.5px; } }

/* The station's chain as SatMe-PC describes it (pages/VueMontage.kt): pieces as blocks, cables as arrows with their
   band; a row on a wide card, a column when the card is narrow (a phone, a tablet beside the rail). */
.montage { margin-top: 30px; }
.montage > h2 { display: flex; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.montage > h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); flex: none; }
.montage-chapo { margin: 0 0 14px; font-size: 14px; }
.montage-maj { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.montage-bloc .card-meta { white-space: normal; text-align: right; }
.montage-bloc .card-body { container-type: inline-size; overflow-x: auto; }
.mt-foret { display: flex; flex-direction: column; gap: 18px; }
.mt-arbre { display: flex; align-items: center; min-width: 0; }
.mt-suite { display: flex; flex-direction: column; gap: 14px; }
.mt-suite.mt-plusieurs { border-left: 2px solid var(--border-strong); border-radius: 2px; }
.mt-branche { display: flex; align-items: center; }
.mt-fleche { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 82px; padding: 0 6px 0 0; }
.mt-trait { order: 1; position: relative; width: 100%; height: 2px; background: var(--accent); border-radius: 1px; }
.mt-trait::after { content: ''; position: absolute; right: -2px; top: -4px; border-left: 8px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.mt-bande { order: 0; margin-bottom: 4px; font: 600 11.5px/1.2 var(--font-mono); color: var(--accent); white-space: nowrap; }
.mt-cable { order: 2; margin-top: 4px; font-size: 10.5px; line-height: 1.2; color: var(--text-muted); text-align: center; }
.montage-tx .mt-trait { background: var(--amber); }
.montage-tx .mt-trait::after { border-left-color: var(--amber); }
.montage-tx .mt-bande { color: var(--amber); }
.mt-piece { display: flex; align-items: flex-start; gap: 10px; flex: none; width: 176px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow); }
.mt-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.mt-ico .ico { width: 20px; height: 20px; }
.montage-tx .mt-ico { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); }
.mt-txt { display: flex; flex-direction: column; min-width: 0; }
.mt-genre { font: 700 9.5px/1.3 var(--font-sans); letter-spacing: .9px; text-transform: uppercase; color: var(--text-muted); }
.mt-nom { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.mt-traits { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; }
@container (max-width: 760px) {
  .mt-arbre, .mt-branche { flex-direction: column; align-items: stretch; }
  .mt-piece { width: auto; max-width: 440px; }
  .mt-suite { gap: 0; }
  .mt-suite.mt-plusieurs { margin-left: 14px; padding-left: 10px; border-left-style: dashed; gap: 6px; }
  .mt-fleche { flex-direction: row; justify-content: flex-start; gap: 10px; width: auto; min-height: 42px; padding: 0 0 0 16px; }
  .mt-trait { order: 0; width: 2px; height: 34px; flex: none; }
  .mt-trait::after { right: auto; top: auto; left: -4px; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; }
  .montage-tx .mt-trait::after { border-left-color: transparent; border-top-color: var(--amber); }
  .mt-bande { order: 1; margin: 0; }
  .mt-cable { order: 2; margin: 0; text-align: left; }
}
.montage-carac { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; margin: 4px 0 8px; }
.montage-carac > div { padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-m); min-width: 0; }
.montage-carac dt { font: 700 10.5px/1.3 var(--font-sans); letter-spacing: .9px; text-transform: uppercase; color: var(--text-muted); }
.montage-carac dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.montage-note { margin: 4px 0 0; font-size: 12.5px; }
.montage-autres { margin-top: 14px; }
.montage-autres > summary { cursor: pointer; margin-bottom: 12px; font-weight: 600; color: var(--text-dim); }

/* ───────────────────────────── the French flag beside the callsign (vue/Drapeau.kt), always */
.drapeau-fr { display: inline-block; flex: none; vertical-align: .06em; margin-left: .38em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
:root[data-theme="light"] .drapeau-fr { box-shadow: 0 0 0 1px rgba(14, 23, 32, .2); }
.sb-txt .drapeau-fr { align-self: center; margin-left: -5px; }
.home-hero h1 .drapeau-fr { vertical-align: .38em; margin-left: .32em; }
.rail-call .drapeau-fr { vertical-align: .14em; margin-left: .4em; }
.shell-call .drapeau-fr { vertical-align: .12em; }
@media (forced-colors: active) { .drapeau-fr { forced-color-adjust: none; } }

/* ───────────────────────────── the next portable outing under the banner (activations/ModuleActivations.kt, js/compte-sortie.js) */
.annonce-sortie { display: flex; align-items: center; gap: 10px 14px; margin: -6px 0 16px; padding: 7px 14px; border-radius: var(--r-l);
  border: 1px solid color-mix(in srgb, var(--sat) 40%, var(--border)); background: color-mix(in srgb, var(--sat) 9%, var(--panel)); font-size: 14px; }
.annonce-sortie .as-ico { display: flex; color: var(--sat); flex: none; }
.annonce-sortie .as-ico .ico { width: 20px; height: 20px; }
.annonce-sortie .as-txt { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.annonce-sortie .as-quand { color: var(--text-dim); }
.as-compte { font-family: var(--font-mono); font-weight: 700; color: var(--sat); white-space: nowrap; }
.as-compte.en-cours { color: var(--green); }
.annonce-sortie .as-lien { flex: none; font-weight: 600; white-space: nowrap; }
body.ecran .annonce-sortie { margin: -4px 0 10px; padding: 4px 12px; }
@media (max-width: 719px) { .annonce-sortie { flex-wrap: wrap; } }
@media (max-width: 719px) { .annonce-sortie .as-ico { display: none; } }

/* The home page's line « FT8 en direct : 12 stations » (the page « FT8/FT4 », while slots come in). */
.ft8-accueil { margin: 0 0 12px; font-size: 13.5px; }
.ft8-accueil a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.ft8-accueil a:hover { border-color: var(--border-strong); }
.ft8-point { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
/* A YouTube video in the viewer (galerie.js): its thumbnail (the site's own) and ▶ until the visitor asks, then youtube-nocookie.com's player, 16:9. */
.vi-yt { position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100%; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.vi-yt[hidden] { display: none; }
.vi-yt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.vi-yt-lance { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; color: #fff; font: 700 15px var(--font-sans); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.vi-yt-rond { position: relative; width: 84px; height: 84px; border-radius: 50%; background: rgba(3, 6, 10, .55); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); transition: transform 160ms ease, background 160ms ease; }
.vi-yt-rond::after { content: ''; position: absolute; left: 32px; top: 24px; border-style: solid; border-width: 17px 0 17px 27px; border-color: transparent transparent transparent #fff; }
.vi-yt-lance:hover .vi-yt-rond, .vi-yt-lance:focus-visible .vi-yt-rond { transform: scale(1.07); background: rgba(63, 224, 200, .55); }
.vi-yt-lance:focus-visible { outline: 3px solid #3FE0C8; outline-offset: -3px; }
.vi-yt-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.4; color: #C9D4DE; background: linear-gradient(transparent, rgba(3, 6, 10, .88) 45%); }
.vi-yt-note label { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #E8F0F7; white-space: nowrap; cursor: pointer; }
.vi-yt-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vi-yt.joue .vi-yt-img, .vi-yt.joue .vi-yt-lance, .vi-yt.joue .vi-yt-note { display: none; }
@media (max-width: 560px) { .vi-yt { width: 100%; } .vi-yt-rond { width: 64px; height: 64px; } .vi-yt-rond::after { left: 24px; top: 18px; border-width: 13px 0 13px 21px; } .vi-yt-note { font-size: 11.5px; padding: 8px 10px; } }
@media (prefers-reduced-motion: reduce) { .vi-yt-rond { transition: none; } }
/* A YouTube video in an article (![titre](youtube:ID)): its thumbnail, 16:9, a ▶ and the word YouTube. */
.fig-youtube a, .vign-youtube a { position: relative; display: block; aspect-ratio: 16 / 9; }
.fig-youtube a img, .vign-youtube a img { width: 100%; height: 100%; object-fit: cover; }
.fig-youtube .badge-lecture { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.fig-youtube .badge-lecture::after { left: 25px; top: 19px; border-width: 13px 0 13px 21px; }
.fig-youtube a:hover .badge-lecture, .fig-youtube a:focus-visible .badge-lecture { transform: scale(1.08); background: color-mix(in srgb, var(--accent) 70%, rgba(3, 6, 10, .6)); }
.yt-marque { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(3, 6, 10, .72); color: #fff; font: 700 11px var(--font-sans); letter-spacing: .3px; pointer-events: none; }

/* ───────────────────────────── encarts: the owner's applications (TM Activation…), « Admin › Encarts » */
/* The rail's card, above the language and the theme: the screenshot's top, the label, the name, one key point. */
.rail-encart { margin: 0 0 6px; }
.rail-foot .rail-encart a.re-lien { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-height: 0; padding: 0; white-space: normal;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel); overflow: hidden; color: var(--text-dim); }
.rail-foot .rail-encart a.re-lien:hover { border-color: var(--accent); background: var(--panel-2); }
.rail-foot .rail-encart a.re-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.re-image { display: block; height: 64px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--well); }
.re-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .92; transition: opacity var(--anim); }
.re-lien:hover .re-image img { opacity: 1; }
.re-icone { display: none; }
.re-txt { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px 7px; min-width: 0; line-height: 1.25; }
.re-etiquette { font: 700 9.5px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.re-titre { font: 700 13px/1.25 var(--font-sans); color: var(--text); }
.re-accroche { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below 1000 px of height the menu needs the room: one line, the label's icon and the name (the label in its title). */
@media (min-width: 720px) and (max-height: 999px) {
  .rail-encart { margin-bottom: 2px; }
  .rail-foot .rail-encart a.re-lien { flex-direction: row; align-items: center; gap: 7px; padding: 0 9px; min-height: 24px; }
  .re-image, .re-accroche, .re-etiquette { display: none; }
  .re-icone { display: inline-flex; color: var(--amber); }
  .re-icone .ico { width: 15px; height: 15px; }
  .re-txt { padding: 0; }
  .re-titre { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* The rail of icons: the encart an icon too. */
@media (max-width: 1099px) and (min-width: 720px) {
  .re-image, .re-txt { display: none; }
  .re-icone { display: flex; justify-content: center; align-items: center; min-height: 36px; color: var(--amber); }
  .rail-foot .rail-encart a.re-lien { border-color: transparent; background: none; }
}

/* The cards: the « Applications » page, the SatMe page, the home page on a phone. */
.encarts-liste { display: grid; gap: 16px; margin-bottom: 16px; }
.encart { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l);
  box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 16px; }
.encart:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.encart-image { display: block; min-height: 220px; max-height: 340px; background: var(--well); border-right: 1px solid var(--border); overflow: hidden; }
.encart-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 300ms cubic-bezier(.2,.7,.3,1); }
.encart-image:hover img { transform: scale(1.02); }
.encart-corps { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; min-width: 0; }
.encart-corps > * { margin: 0; }
.encart:not(:has(.encart-image)) { grid-template-columns: minmax(0, 1fr); }
.encart-etiquette { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 9px 2px 7px; border-radius: 999px;
  font: 700 10.5px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); background: color-mix(in srgb, var(--amber) 9%, transparent); }
.encart-etiquette .ico { width: 13px; height: 13px; }
.encart-titre { font-size: 22px; line-height: 1.2; color: var(--text); }
.encart-texte { color: var(--text-dim); font-size: 14.5px; max-width: 62ch; }
.encart-points { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.encart-points li { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); }
.encart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto !important; padding-top: 4px; }
.encart-licence { font: 600 11.5px var(--font-mono); color: var(--text-muted); padding: 2px 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-s); }
@media (max-width: 899px) {
  .encart { grid-template-columns: minmax(0, 1fr); }
  .encart-image { border-right: 0; border-bottom: 1px solid var(--border); min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
  .encart-corps { padding: 14px 16px 16px; }
  .encart-titre { font-size: 19px; }
}
/* The home page: a card on a phone (or a short window), a tile in the tools' strip on one screen. */
.carte-encart > .card-body { padding: 0; }
.carte-encart .encart { border: 0; border-radius: 0; box-shadow: none; }
.outils-bande .tuile-encart { display: none; }
.tool-tiles a.tuile-encart { position: relative; border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); }
.tool-tiles a.tuile-encart:hover, .tool-tiles a.tuile-encart:focus { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--panel-2)); }
.tuile-encart .te-image { flex: none; width: 40px; height: 28px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--border); }
.tuile-encart .ico { stroke: var(--amber) !important; }
.tuile-encart .te-etiquette { position: absolute; top: -7px; right: 6px; padding: 0 6px; border-radius: 999px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border));
  font: 700 8.5px/14px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran .home-grid > .carte-encart { display: none; }
  body.ecran .outils-bande .tuile-encart { display: flex; grid-column: span 2; }
  /* Below 1700 px the tools need their room: the encart's picture alone (its name in its title). */
  @media (max-width: 1699px) {
    body.ecran .outils-bande .tuile-encart { grid-column: auto; justify-content: center; padding: 7px 8px; }
    body.ecran .outils-bande .tuile-encart > span, body.ecran .outils-bande .tuile-encart .te-etiquette { display: none; }
    body.ecran .outils-bande .tool-tiles[style] { grid-auto-columns: auto; grid-template-columns: repeat(var(--n-outils, 9), minmax(0, 1fr)) auto; }
    body.ecran .outils-bande .tool-tiles[style] a { padding: 7px 7px; gap: 7px; }
  }
  body.ecran .outils-bande .card-body { padding-top: 10px; overflow: visible; }
  body.ecran .outils-bande { overflow: visible; }
  /* Each tile as wide as its name needs (« Überflüge », « Umlaufbahnen » longer than « TLE »), the row shared out from there;
     a window too narrow still: the name on two lines, broken by the page's language, rather than cut. */
  body.ecran .outils-bande .tool-tiles { display: flex; gap: 6px; }
  body.ecran .outils-bande .tool-tiles a { flex: 1 1 auto; min-width: 0; }
  body.ecran .outils-bande .tool-tiles a.tuile-encart { flex: 0 0 auto; }
  body.ecran .outils-bande b { font-size: 13px; line-height: 1.15; white-space: normal; hyphens: auto; -webkit-hyphens: auto;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  body.ecran .outils-bande .tool-tiles a > span { min-width: 0; }
}
/* The editor's preview. */
.encart-champs-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.encart-apercu-rail { max-width: 212px; margin: 0 0 16px; }
.encart-apercu-rail .rail-encart a.re-lien { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel); overflow: hidden; color: var(--text-dim); text-decoration: none; }
.encart-apercu-img { vertical-align: middle; border-radius: 4px; border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .encart-image img, .re-image img { transition: none; } .encart-image:hover img { transform: none; } }
/* A country's flag (Twemoji, CC BY 4.0): one sprite image, sized and placed by the page (Drapeau.pays). */
.dr-pays { display: inline-block; vertical-align: -2px; margin-right: 6px; border-radius: 2px; background-image: url(/static/img/drapeaux/drapeaux.png);
  background-repeat: no-repeat; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }

/* The home page's notice of a new SatMe release (pages/PagesDocSatme.kt, js/annonce-satme.js): the outing's look, in the accent. */
.annonce-satme { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.annonce-satme .as-ico { color: var(--accent); }
.annonce-satme .annonce-fermer { flex: none; width: 28px; height: 28px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim);
  font: 400 20px/1 var(--font-sans); cursor: pointer; }
.annonce-satme .annonce-fermer:hover, .annonce-satme .annonce-fermer:focus-visible { background: var(--panel-2); color: var(--text); }
.annonce-satme[hidden], .annonce-satme .annonce-fermer[hidden] { display: none; }

/* A new version of the site while a page was open (site.js): offered when the page is busy. */
.maj-site { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 10px 14px; border: 1px solid var(--accent); border-radius: var(--r-m); background: var(--panel); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 14px; }

/* A picture retouched by SatMe-PC (denoised by AI, colours corrected): said on its thumbnail. */
.badge-retouche { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(3, 6, 10, .7); color: #fff; font: 700 11px/1.5 var(--font-sans); letter-spacing: .03em; pointer-events: none; }
.badge-retouche.ia { background: #F2A61A; color: #1a1200; }

/* ---- What is live in a few words, its viewers (the live block's head) ---- */
.direct-bloc > .card-head { flex-wrap: wrap; }
.direct-resume { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; flex: 0 1 auto; font: 600 14px/1.3 var(--font-sans); color: var(--text); }
.direct-resume[hidden] { display: none; }
.direct-resume > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-live { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff;
  font: 800 10.5px/1.6 var(--font-sans); letter-spacing: .8px; }
.direct-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: bd-pulse 1.6s infinite; }
.direct-resume.bientot .direct-live { background: var(--amber); color: #111; } .direct-resume.bientot .direct-live::before { background: #111; animation: none; }
.direct-spect { flex: none; font: 500 12px var(--font-sans); color: var(--text-dim); }
.direct-spect::before { content: '👁 '; }
@media (prefers-reduced-motion: reduce) { .direct-live::before { animation: none; } }

/* ---- The setup in use (the live page) ---- */
.direct-montage { flex: none; border-top: 1px solid var(--border); padding: 8px 14px 10px; display: grid; gap: 6px; max-height: 34vh; overflow: auto; }
.direct-montage[hidden] { display: none; }
.dm-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dm-tete .dp-t { margin: 0; }
.dm-version { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.dm-version b { color: var(--text); }
.dm-dessin { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 26px; }
.dm-voie { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; overflow-x: auto; }
.dm-sens { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 10px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.dm-svg { display: block; flex: none; max-width: none; height: auto; overflow: visible; }
.dm-b rect { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 1; }
.dm-b.on rect, .dm-b.attente rect { stroke: color-mix(in srgb, var(--green) 70%, transparent); }
.dm-b.attente rect { stroke: var(--amber); stroke-dasharray: 4 3; }
.dm-b.tx rect { stroke: var(--red); fill: color-mix(in srgb, var(--red) 9%, var(--panel-2)); }
.dm-b.off { opacity: .55; }
.dm-led { fill: var(--text-muted); }
.dm-b.on .dm-led { fill: var(--green); } .dm-b.attente .dm-led { fill: var(--amber); } .dm-b.tx .dm-led { fill: var(--red); }
.dm-g { font: 700 8.5px var(--font-sans); letter-spacing: .7px; fill: var(--text-muted); }
.dm-n { font: 700 12.5px var(--font-sans); fill: var(--text); }
.dm-e { font: 10.5px var(--font-mono); fill: var(--text-dim); }
.dm-lien { fill: none; stroke: var(--border-strong); stroke-width: 1.6; }
.dm-lien.on { stroke: var(--green); } .dm-lien.tx { stroke: var(--red); }
.dm-bande { font: 9.5px var(--font-mono); fill: var(--text-dim); }
.dm-annexe { margin: 0; align-self: center; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.dm-annexe b { color: var(--text); }
@media (min-width: 1100px) and (min-height: 640px) { body.ecran .direct-montage { max-height: 210px; } }

/* ---- « ● EN DIRECT » in the other pages' banner, the floating live window ---- */
.sb-direct { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; text-decoration: none; max-width: 46ch;
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--text); font-size: 13px; }
.sb-direct[hidden] { display: none; }
.sb-direct b { color: var(--red); letter-spacing: .6px; font-size: 11.5px; }
.sb-direct .bd-led { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: bd-pulse 1.6s infinite; flex: none; }
.sb-direct-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-direct:hover { border-color: var(--red); }
@media (max-width: 719px) { .sb-direct { order: 5; } .sb-direct-txt { max-width: 22ch; } }
.mini-direct { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(300px, calc(100vw - 32px)); border: 1px solid var(--border-strong); border-radius: var(--r-l);
  background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.45); overflow: hidden; }
.mini-direct[hidden] { display: none; }
.md-lien { display: block; color: var(--text); text-decoration: none; }
.md-lien img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.md-txt { display: flex; align-items: center; gap: 8px; padding: 7px 34px 8px 10px; font: 600 13px var(--font-sans); }
.md-fermer { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
.md-fermer:focus-visible { outline: 2px solid var(--accent); }
@media (prefers-reduced-motion: reduce) { .sb-direct .bd-led { animation: none; } }

/* ---- The setup's versions (/direct/montage) ---- */
.mv-liste { display: grid; gap: 12px; }
.mv-version { margin: 0; }
.mv-version.courante { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mv-badge { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 11px/1.7 var(--font-sans); vertical-align: 2px; }
.mv-changements { margin: 0 0 6px; padding-left: 20px; }
.mv-pieces { columns: 2 260px; margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.confidentialite ul li { margin-bottom: 6px; }
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran-liste .site-main > .page-head { flex: none; }
  body.ecran-liste .mv-liste { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; align-content: start; }
}
.direct-bloc .card-meta.sous-resume { display: none; }
/* The visitor's language offered (site.js): a small banner at the bottom, its own language's words. */
.langue-proposee { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: var(--r-s);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 13.5px; }
.langue-proposee .btn { white-space: nowrap; }
@media (max-width: 520px) { .langue-proposee { flex-wrap: wrap; justify-content: center; text-align: center; } }
/* One screen for the pages of lists and cards (« ecran ecran-flex », vue/Ecran.kt): the head stays in sight, the frame
   « ecran-reste » takes what the window leaves and scrolls inside itself, a table's head pinned on top of it; should the
   fixed parts outgrow a short window, the main column scrolls rather than hiding anything. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran-flex .site-main { overflow-y: auto; }
  body.ecran-flex .site-main > * { flex-shrink: 0; }
  body.ecran-flex .site-main > .ecran-reste { flex: 1 1 0; min-height: 180px; overflow: auto; overscroll-behavior: contain; padding-right: 4px; margin-bottom: 0; }
  body.ecran-flex .page-head p { margin-bottom: 0; }
  body.ecran-flex .ecran-reste > :last-child { margin-bottom: 0; }
  body.ecran-flex .ecran-reste thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  body.ecran-flex .site-main > .ecran-reste.table-wrap, body.ecran-flex .ecran-reste .table-wrap.ecran-reste { padding-right: 0; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran-flex .ecran-reste > .table-wrap { overflow: visible; margin-bottom: 0; }
}
/* The logbook on one screen: the station's card, the figures and the map on the left (the map at the height left);
   the filters, the QSOs scrolling under their pinned head and the pages on the right. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.lb-page .lb-ecran { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
  body.lb-page .lb-gauche { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
  body.lb-page .lb-gauche > * { flex-shrink: 0; }
  body.lb-page .lb-gauche > .carte-qsl { margin: 0 0 10px; padding: 12px 18px; gap: 6px 18px; }
  body.lb-page .lb-gauche > .carnet-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
  body.lb-page .lb-gauche .chiffre { padding: 8px 10px; } body.lb-page .lb-gauche .chiffre b { font-size: 21px; }
  body.lb-page .lb-gauche > .carte-qso { flex: 1 0 auto; min-height: 260px; margin: 0; display: flex; flex-direction: column; }
  body.lb-page .carte-qso > .card-body { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 170px; }
  body.lb-page .carte-qso-cadre { height: auto; min-height: 220px; }
  body.lb-page .par-sat { overflow-y: auto; }
  body.lb-page .lb-droite { min-height: 0; display: flex; flex-direction: column; }
  body.lb-page .lb-droite > * { flex-shrink: 0; }
  body.lb-page .lb-droite > .filtres { margin: 0 0 10px; }
  body.lb-page .lb-droite > .table-wrap { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; }
  body.lb-page .lb-droite thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  body.lb-page .lb-droite > .pager { margin: 8px 0 0; }
  body.lb-page .lb-droite table.log { font-size: 13px; }
}
/* A picture's page on one screen: the picture at the height left on the left, what it is on the right. */
@media (min-width: 1100px) and (min-height: 640px) {
  body.item-page .site-main > .item { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 24px; align-content: start; }
  body.item-page .item > .page-head { grid-column: 1 / -1; }
  body.item-page .item > :not(.page-head) { grid-column: 2; }
  body.item-page .item > .item-image { grid-column: 1; grid-row: 2 / 4; margin: 0; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
  body.item-page .item-image img, body.item-page .item-image video, body.item-page .item > .item-video { max-height: calc(100dvh - 230px); width: auto; max-width: 100%; object-fit: contain; }
  body.item-page .item > .item-video { grid-column: 1; grid-row: 2 / 4; }
  body.item-page .item > .item-meta { margin-top: 0; align-self: start; }
}