/* ==========================================================================
   f4hin.fr — feuille de style principale
   Réécriture 2026-08. Thème clair/sombre automatique, zéro dépendance externe.
   ========================================================================== */

/* --- Jetons de design ---------------------------------------------------- */
:root {
  --bg:          #f4f6f8;
  --bg-grad:     radial-gradient(1200px 600px at 50% -200px, #e3ecf2 0%, transparent 70%);
  --surface:     #ffffff;
  --surface-2:   #eef1f5;
  --border:      #dbe0e6;
  --border-soft: #e8ecf1;
  --text:        #171c23;
  --text-2:      #5c6672;
  --text-3:      #8b95a1;
  --accent:      #0b7285;
  --accent-2:    #0c8599;
  --accent-bg:   #e3f4f7;
  --ok:          #2b8a3e;
  --warn:        #e8590c;
  --err:         #c92a2a;
  --shadow:      0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:   0 2px 4px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.10);
  --r:           14px;
  --r-sm:        8px;
  --maxw:        1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0d1117;
    --bg-grad:     radial-gradient(1200px 600px at 50% -200px, #16222b 0%, transparent 70%);
    --surface:     #161b22;
    --surface-2:   #1c232c;
    --border:      #2a313b;
    --border-soft: #21272f;
    --text:        #e6edf3;
    --text-2:      #9aa5b1;
    --text-3:      #6e7781;
    --accent:      #22b8cf;
    --accent-2:    #3bc9db;
    --accent-bg:   #12303a;
    --ok:          #51cf66;
    --warn:        #ff922b;
    --err:         #ff6b6b;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-lg:   0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
/* Aucun soulignement de lien sur ce site, y compris au survol : seule la
   couleur change. */
a:hover { color: var(--accent-2); text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -.02em; }

/* --- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* Conteneur élargi pour la section des dashboards. Les tables de modules ont
   huit colonnes dont une colonne « Liaison » qui reçoit de longues chaînes
   (master, statut des slots, dernière activité) : il leur faut nettement plus
   que les 1120px du conteneur standard pour que tout tienne sans se tasser. */
/* Largeur des tableaux FIXE, décidée par F4HIN : la table de modules doit
   mesurer 1570px.

   La valeur est portée par le conteneur, pas par la table : la table est en
   width:100% de la carte, et la carte en 100% du conteneur. L'écart mesuré
   entre le conteneur et la table est de 83px (2x20 padding du conteneur,
   2x20 padding du corps de carte, bordures) — d'où 1570 + 83 = 1653.

   Si un padding change, remesurer : `document.querySelector('.panel-mod
   .dtable').getBoundingClientRect().width` doit valoir 1570.

   `max-width: 100%` : sur une fenêtre plus étroite le bloc se réduit au lieu
   de faire défiler toute la page horizontalement. */
.wrap-wide { width: 1653px; max-width: 100%; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: 14px; }

/* --- En-tête ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 60px; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.brand .call { font-size: 19px; color: var(--text); }
.brand .sub  { font-size: 13px; color: var(--text-3); font-weight: 500; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 550; color: var(--text-2);
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.is-active { background: var(--accent-bg); color: var(--accent); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: 52px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(28px, 5vw, 42px); }
.hero p.lede {
  margin: 14px auto 0; max-width: 62ch;
  font-size: 17px; color: var(--text-2);
}
.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

/* --- Panorama ------------------------------------------------------------ */
.panorama {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); margin: 0 0 8px;
}
/* Bandeau 1,44x plus haut que le ratio naturel de la source.

   L'image de la webcam fait 1524x200, soit un ratio de 7.62. Deux
   agrandissements successifs de 1,2 demandés par F4HIN : 7.62 / 1.44 = 5.29.

   `object-fit: cover` agrandit l'image de 1,44 puis recadre les côtés. Le
   recadrage grandit avec la hauteur : environ 237px de chaque bord sur un
   rendu de 1080px de large, contre 108px au facteur 1,2. C'est le prix à payer
   pour gagner en hauteur sans étirer l'image verticalement — la source ne fait
   que 200px de haut, il n'y a aucune marge à récupérer. */
.panorama { aspect-ratio: 5.29; }
.panorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}
.panorama:hover img { transform: scale(1.02); }
.panorama figcaption {
  position: absolute; inset: auto 0 0 0; padding: 32px 18px 14px;
  background: linear-gradient(transparent, rgba(6,10,14,.85));
  color: #fff; font-size: 14px; font-weight: 550; text-align: center;
}

/* --- Sections ------------------------------------------------------------ */
.section { padding: 40px 0; }
.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: clamp(21px, 3vw, 27px); }
.section-head p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }

/* --- Carte relais -------------------------------------------------------- */
.repeater {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 26px;
}
.repeater-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.repeater-head .call {
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  letter-spacing: .02em; color: var(--text);
}
.repeater-head .loc { color: var(--text-2); font-size: 14px; }
/* Coordonnées GPS : même ligne que la ville, en retrait visuel pour ne pas
   concurrencer l'indicatif. Chiffres tabulaires pour un alignement stable
   d'une carte à l'autre. */
/* Les coordonnées sont un lien vers Google Maps, mais doivent rester
   discrètes : couleur du texte secondaire, soulignement au survol seulement. */
.repeater-head .coords {
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}
.repeater-head a.coords:hover {
  color: var(--accent);
  text-decoration: none;
}
.repeater-head .spacer { margin-left: auto; }
.repeater-body { padding: 20px; }

/* Puces d'information */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px; font-weight: 550; color: var(--text-2);
  white-space: nowrap;
}
.chip.host { background: var(--accent-bg); border-color: transparent; color: var(--accent); }

/* --- Zone de données ----------------------------------------------------- */
.dash { overflow-x: auto; }
.dash-loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 40px 20px; color: var(--text-2); font-size: 14.5px;
}
.spinner {
  width: 20px; height: 20px; flex: none;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  html { scroll-behavior: auto; }
  .panorama img { transition: none; }
}
.dash-error {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--err) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 30%, transparent);
  color: var(--err); font-size: 14.5px; font-weight: 550;
}

/* --- Grille de liens / tuiles -------------------------------------------- */
.tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
  color: var(--text); font-weight: 600; font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:hover {
  text-decoration: none; color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg); border-color: var(--accent);
}
.tile .ico { font-size: 19px; color: var(--accent); flex: none; }
.tile .tile-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-3); }

/* --- Prose (pages de texte) ---------------------------------------------- */
/* Pas de limite de largeur : F4HIN veut ces pages aussi larges que la page
   des dashboards. La lisibilité d'un paragraphe s'en ressent sur un très grand
   écran, c'est un choix assumé. */
.prose { max-width: none; }
.prose h2 {
  font-size: 23px; margin: 42px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 15px; color: var(--text); }
.prose ul { margin: 0 0 15px; padding-left: 22px; color: var(--text); }
.prose li { margin-bottom: 7px; }
.prose strong { font-weight: 650; }
.callout {
  padding: 16px 20px; margin: 0 0 26px;
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 15px;
}
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: flex; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 15px;
}
.timeline li:last-child { border-bottom: 0; }
.timeline .when {
  flex: none; width: 78px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent);
  padding-top: 2px;
}

/* --- Figures (synoptiques) ----------------------------------------------- */
.figure {
  margin: 0 0 30px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
.figure > figcaption {
  padding: 13px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 650; font-size: 15.5px;
}
.figure .figure-body { padding: 18px; background: #fff; text-align: center; }
.figure .figure-body img { display: inline-block; width: 100%; height: auto; }
.figure .figure-body img + img { margin-top: 16px; }

/* --- Journal / HF -------------------------------------------------------- */
#hrdlog, #hrdlog-oa { max-width: 900px; margin: 0 auto; }
#hrdlog-oa:not(:empty) { margin-bottom: 16px; }

/* --- Badges (certifications, affiliations) -------------------------------- */
/* Les logos arrivent avec des fonds imposés (blanc pour eQSL et le REF, noir
   pour LoTW, transparent pour QRZ) et des proportions sans rapport : 220x219,
   473x375, 267x185, 368x582. Chacun est donc posé sur une tuile blanche de
   hauteur fixe, ce qui les aligne optiquement et évite, en thème sombre, des
   rectangles clairs posés à même le fond. */
.badges {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
}
.badges li {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}
.badges img { display: block; width: auto; height: 144px; max-width: 100%; }

@media (max-width: 560px) {
  .badges { gap: 12px; }
  .badges li { padding: 5px 6px; }
  .badges img { height: 102px; }
}

/* --- Pied de page -------------------------------------------------------- */
.site-footer {
  margin-top: 30px; padding: 34px 0;
  border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 13.5px;
}
.site-footer .wrap {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--text-2); }

/* --- Utilitaires --------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.host-line {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; color: var(--text-3); font-size: 13px;
}
.host-line img { height: 24px; width: auto; opacity: .85; }

@media (max-width: 640px) {
  .hero { padding: 34px 0 26px; }
  .section { padding: 28px 0; }
  .repeater-body, .repeater-head { padding: 14px; }
  .site-header .wrap { min-height: 54px; }
  .nav a { padding: 6px 9px; font-size: 13px; }
}


/* ==========================================================================
   Tables de données
   Rendues par nous à partir de l'API : plus de largeurs en pixels imposées
   par le balisage des contrôleurs, la table occupe toute la largeur utile.
   ========================================================================== */
.dtable {
  width: 100%;
  /* Largeurs imposées par le <colgroup> généré côté page, pas déduites du
     contenu : les colonnes gardent la même géométrie d'un relais à l'autre et
     d'un rafraîchissement au suivant, au lieu de sauter selon la longueur du
     texte de liaison. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.dtable caption {
  text-align: left;
  font-weight: 650;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 0 10px;
}
.dtable th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dtable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover td { background: var(--surface-2); }
.dtable .num { text-align: right; white-space: nowrap; }
.dtable .mod { font-weight: 600; white-space: nowrap; }
/* En largeur fixe, le texte long doit se replier au lieu de déborder. */
.dtable .wide { white-space: normal; overflow-wrap: anywhere; }
.dtable .mod, .dtable .mod * { overflow-wrap: anywhere; }
.dtable .muted { color: var(--text-3); }

/* État d'un module : une icône, verte ou rouge, sans texte. */
.state-ico { font-size: 15px; line-height: 1; }
.state-ico.up   { color: var(--ok); }
.state-ico.down { color: var(--err); }
.state-ico.unk  { color: var(--text-3); }

/* Colonne « Liaison / info » : texte en couleur normale — en gris il se
   confondait avec le fond des barres de titre. Seul l'état dégradé est rouge,
   comme le faisait l'ancien dashboard avec ses <font color="red">. */
.dtable td.wide { color: var(--text); }
.lnk-ico { color: var(--text-3); }
.lnk-ico.down { color: var(--err); }
.lnk-down { color: var(--err); font-weight: 600; }

/* Grille de mesures */
.statgrid {
  display: grid; gap: 10px; margin: 0 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.stat {
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.stat dt {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
  margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat dd {
  margin: 0; font-size: 17px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.stat dd .u { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.stat.is-ok dd    { color: var(--ok); }
.stat.is-alert dd { color: var(--err); }

.subhead {
  font-size: 12px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  margin: 22px 0 10px;
}
.subhead:first-child { margin-top: 0; }

.trend { font-size: 12px; color: var(--text-3); margin-left: 3px; }

.alert-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; margin: 0 0 16px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--err) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 32%, transparent);
  color: var(--err); font-size: 14px; font-weight: 600;
}


@media (max-width: 720px) {
  .dtable { font-size: 13px; }
  .dtable th, .dtable td { padding: 8px 8px; }
}


/* ==========================================================================
   Panneaux titrés

   Reprend la structure de l'ancien dashboard, qui était la bonne : une table
   par sujet, chacune coiffée de sa propre barre de titre (l'ancien
   « th.thup »). Une table unique avec une colonne « Module » à la place des
   titres rend l'information beaucoup moins lisible.
   ========================================================================== */
/* Rangée de panneaux de mesures, centrée.

   Historique de cette règle, pour ne pas refaire les allers-retours :
     - flex-wrap avec un conteneur de 1280px : la somme des largeurs minimales
       des cinq panneaux faisait 1297px, le dernier passait à la ligne ;
     - grille `repeat(auto-fill, minmax(228px, 1fr))` : sur un écran large
       (2298px utiles) elle créait 9 pistes pour 5 panneaux, laissant plus de
       1000px de vide à droite.

   Le conteneur étant désormais large (88vw), les panneaux tiennent sans peine
   sur une rangée : on les dimensionne sur leur contenu et on centre la rangée.
   `flex-wrap` reste actif comme filet sur un écran étroit, et les rangées
   suivantes sont centrées elles aussi. */
.panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
  align-items: flex-start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.panel-head {
  margin: 0;
  padding: 4px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.35;
}
/* Les panneaux grandissent pour remplir la rangée, de façon à s'aligner sur
   la largeur des tables de modules en dessous : à 232px fixes ils laissaient
   671px de vide de chaque côté sur un écran de 3072px, un îlot étroit au-dessus
   d'une table de 2517px.

   Base de 232px comme plancher, plafond à 520px pour qu'un relais n'ayant
   qu'un ou deux panneaux ne les voie pas étirés démesurément. La rangée reste
   centrée (justify-content sur .panels), ce qui ne se voit que lorsque le
   plafond est atteint. */
.panel-sm { flex: 1 1 232px; min-width: 232px; max-width: 520px; }
/* Panneau d'un module radio : occupe toute la largeur de la carte.

   Une largeur totale en pixels (1260px auparavant) laissait un vide à droite
   dès que le conteneur s'élargissait. Les colonnes sont donc exprimées en
   pourcentages dans le <colgroup> (MOD_COLS dans index.php) : avec
   table-layout: fixed, leurs proportions restent constantes quelle que soit
   la largeur d'écran et quel que soit le contenu — la table est « fixe » au
   sens géométrique, tout en remplissant la place disponible. */
.panel-mod {
  width: 100%;
  margin: 0 0 12px;
}

/* Table libellé / valeur */
.kvtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.kvtable th {
  text-align: left;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  padding: 7px 11px;
  /* Le libellé se replie : en nowrap, dans une colonne de grille étroite, il
     poussait la valeur hors du panneau où « overflow: hidden » la coupait. */
  white-space: normal;
  line-height: 1.3;
  border-bottom: 1px solid var(--border-soft);
}
.kvtable td {
  text-align: right;
  font-weight: 650;
  padding: 7px 11px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.kvtable tr:last-child th, .kvtable tr:last-child td { border-bottom: 0; }
.kvtable td .u { font-size: 11.5px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.kvtable td.ok    { color: var(--ok); }
.kvtable td.alert { color: var(--err); }

/* Dans un panneau de module, la table n'a plus de bordure haute : la barre de
   titre joue ce rôle. */
.panel .dtable { border-top: 0; }
.panel .dtable th { border-bottom: 1px solid var(--border-soft); }
.panel .dtable tbody tr:hover td { background: transparent; }


/* ==========================================================================
   Galerie photo

   Remplace le balisage et les styles de Single File PHP Gallery, qui ne
   partageaient rien avec le reste du site.
   ========================================================================== */

.album-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.album-call {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.album-lieu  { color: var(--text-2); font-size: 14px; }
.album-count { margin-left: auto; color: var(--text-3); font-size: 13px; white-space: nowrap; }

/* Grille fluide : les tuiles se répartissent, la dernière rangée ne s'étire
   pas. auto-fill et non auto-fit, pour qu'un album d'une seule photo ne la
   voie pas occuper toute la largeur. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.shot {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.shot:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

/* Rapport fixe : les tuiles gardent la même hauteur quelles que soient les
   proportions des vignettes EXIF, qui varient d'un appareil à l'autre. */
.shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

.shot-legend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
}
.shot-poids {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .album-count { margin-left: 0; }
}