/* Boutique HIR — feuille de style de la page catalogue (index.html et fr/index.html).
   Extraite de index.html pour être partagée par les deux langues. */
  :root {
    --bg: #0a0e17;
    --panel: rgba(12, 18, 30, 0.4);
    --panel-solid: #0f1522;
    --text: #c8d6e5;
    --text-dim: #7c8ba1;
    --accent: #4fc3f7;
    --border: rgba(255, 255, 255, 0.05);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* en-tête */
  /* `padding-top` : 64px à l'origine, ramené à 28px depuis que `.site-bar`
     occupe le haut de page — son filet apporte déjà la respiration, garder
     64 doublait l'espace avant le titre (même ajustement que cts-shop). */
  header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 32px;
    text-align: center;
  }

  /* `header .brand` (le « HIR » seul au-dessus du titre) a été RETIRÉ le
     2026-09-08 : `.site-bar` affiche désormais « Series: CTS · HWF · HIR »
     juste au-dessus, il ferait doublon — même décision que cts-shop, qui a
     supprimé son `.brand` équivalent pour la même raison. */

  header h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    margin: 12px 0 8px;
    letter-spacing: -0.01em;
  }

  header p {
    color: var(--text-dim);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* bascule de devise — prix fixes par devise, pas de conversion en direct */
  .currency-toggle {
    display: inline-flex;
    gap: 6px;
    margin-top: 22px;
  }

  .currency-toggle button {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .currency-toggle button:hover { border-color: rgba(79, 195, 247, 0.4); }

  .currency-toggle button.selected {
    background: rgba(79, 195, 247, 0.12);
    border-color: rgba(79, 195, 247, 0.5);
    color: var(--accent);
  }

  /* ⚠️ Lancement EUR uniquement (2026-09-30, même règle que hwf-shop) : le
     checkout Stripe (stripe-checkout.php) n'encaisse qu'en EUR
     (`'currency' => 'eur'`, en dur) — le sélecteur ne menait donc à aucun
     paiement réel en USD. Masqué plutôt que retiré : `currency` reste 'EUR'
     par défaut côté JS, rien d'autre à toucher. Retirer cette règle le jour
     où l'USD est vraiment encaissable au paiement. */
  .currency-toggle { display: none; }

  /* Récap tarifaire + mention papier, sous le titre (2026-09-08) — repris de
     hwf-shop (`.price-summary`) pour la table, et de cts-shop
     (`.print-note`, même texte, même police : `body` est déjà en Space
     Grotesk des deux côtés, l'italique suffit à la distinguer du reste).
     `.price-summary-row` regroupe le tout et le centre COMME UN SEUL BLOC :
     `display: inline-flex` se comporte comme une boîte inline pour le
     `text-align: center` hérité de `header`, tout en mettant colonne de prix
     et mention côte à côte en interne. */
  .price-summary-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 18px;
    text-align: left;
  }

  /* Devise + table dans une même colonne : la devise doit rester au-dessus
     DE LA TABLE, pas centrée seule sur toute la largeur table+mention (ce
     qu'elle faisait quand `.currency-toggle` était un enfant direct de
     `.price-summary-row`, centré indépendamment par le `header` parent). */
  .price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .price-col .currency-toggle { margin-top: 0; }

  /* Léger encart (2026-09-08) — même traitement que le panneau
     `#size-prices` de cts-shop (`var(--panel)` + filet + coins arrondis),
     pour que la table se détache mieux du fond de page ; le VOCABULAIRE
     interne (head, lignes, montant en accent) reste celui de hwf-shop,
     inchangé. Un encart « léger », pas un vrai panneau opaque : `--panel`
     est semi-transparent, cohérent avec les cartes du catalogue en dessous. */
  .price-summary {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
  }

  .price-summary .head {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .price-summary .row {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding: 3px 0;
    color: var(--text);
  }

  .price-summary .row .amount { font-weight: 600; color: var(--accent); }

  /* Mention papier — texte repris de cts-shop : « une réserve, pas un
     argument de vente », elle se lit comme une note de bas de page plutôt
     que de concurrencer le récap tarifaire à sa gauche. `max-width` la fait
     tenir sur 2-3 lignes plutôt que filer sur une seule ligne très longue.
     ⚠️ `text-align: justify` (demande explicite du user, 2026-09-08) —
     cts-shop, lui, la ferre à droite (`text-align: right`) ; ne pas
     reharmoniser les deux sans redemander. */
  .print-note {
    flex: 0 1 240px;
    max-width: 240px;
    margin: 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    text-align: justify;
    color: var(--text-dim);
  }

  /* Sous ~560px, table + mention côte à côte n'ont plus la place : elles
     passent l'une sous l'autre, centrées comme le reste du header — même
     repli que cts-shop à son propre point de rupture. */
  @media (max-width: 560px) {
    .price-summary-row { flex-direction: column; align-items: center; }
    .price-col { align-items: center; }
    .price-summary { text-align: left; }
    .print-note { text-align: center; max-width: 320px; }
  }

  /* grille catalogue */
  .catalog {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 80px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
  }

  .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(12px);
  }

  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 195, 247, 0.3);
  }

  /* Vignette-slider comparatif avec/sans légendes (cadre carré 1/1, comme les
     affiches HIR elles-mêmes, contain + fond noir → aucun crop). Même
     mécanisme que l'ancien slider de la fiche produit (déplacé ici,
     2026-09-24) : deux <img> superposées + <input type=range> natif invisible
     étiré sur tout le cadre (drag souris/tactile gratuit, pas de recalcul de
     coordonnées) qui pilote la variable CSS `--pos`. NOUVEAU : cliquer (sans
     glisser) sur un côté ouvre la fiche produit avec CETTE version, statique,
     sans slider (`wireCompareClick` dans shop.js décide via la position du
     clic par rapport à `--pos` au moment du `pointerdown`). */
  .card .thumb-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    --pos: 50%;
  }

  .card .thumb-wrap .compare-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
  }

  /* Calque "sans légendes" au-dessus, rogné pour ne montrer que sa moitié
     droite (à partir du curseur) ; le calque "avec légendes" en dessous,
     plein cadre, reste visible par transparence à gauche du curseur. */
  .card .thumb-wrap .compare-after {
    clip-path: inset(0 0 0 var(--pos));
  }

  /* Curseur dynamique, pas figé en CSS : `wireCompareHover` (shop.js) bascule
     `range.style.cursor` entre `ew-resize` (près de la poignée) et `pointer`
     (ailleurs, où cliquer ouvre la fiche produit) selon la distance au
     curseur — `pointer` sert de valeur de repli tant qu'aucun `pointermove`
     n'a eu lieu. */
  .card .thumb-wrap .compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .card .thumb-wrap .compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(-1px);
    pointer-events: none;
  }

  .card .thumb-wrap .compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(10, 14, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
  }

  .card .thumb-wrap .compare-tag {
    position: absolute;
    bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 14, 23, 0.7);
    padding: 3px 7px;
    border-radius: 999px;
    pointer-events: none;
  }

  .card .thumb-wrap .compare-tag-before { left: 8px; }
  .card .thumb-wrap .compare-tag-after { right: 8px; }

  /* Infobulle "Choisir cette version" (`wireCompareHover`, shop.js) : suit le
     curseur, seulement affichée hors de la zone de la poignée. Position
     posée en `left`/`top` par JS (coordonnées relatives au cadre) ; le
     décalage vers le haut est purement du CSS (`transform`), pas recalculé
     à chaque frame. */
  .card .thumb-wrap .compare-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #fff;
    background: rgba(10, 14, 23, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
  }

  .card .thumb-wrap .compare-tooltip[hidden] {
    display: none;
  }

  .card-body {
    padding: 16px 18px 20px;
    cursor: pointer;
  }

  .card-body h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    margin: 0 0 4px;
    font-weight: 600;
  }

  .card-body .location {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .card-body .tagline {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
  }

  /* modal détail */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 16, 0.85);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    z-index: 100;
  }

  .modal-overlay.open { display: flex; }

  /* pop-up de zoom (crop plein format) */
  .lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 200;
    cursor: zoom-out;
  }

  .lightbox-overlay.open { display: flex; }

  .lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
  }

  .lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(12, 18, 30, 0.7);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* bornée à la fenêtre, défilement interne (un seul scroll, visible,
     contenu dans le cadre arrondi) — même traitement que .explained-modal */
  .modal {
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 920px;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* pop-up « HIR posters explained » / « vote » (iframe) : pages riches en
     contenu → la pop-up prend (presque) toute la hauteur de l'écran, marge
     fine, l'iframe remplit et défile en interne */
  .explained-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 16, 0.85);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 150;
  }

  .explained-overlay.open { display: flex; }

  .explained-modal {
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 920px;
    width: 100%;
    height: calc(100vh - 40px);
    overflow: hidden;
    position: relative;
  }

  .explained-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  .modal-close {
    position: sticky;
    top: 16px;
    float: right;
    margin: 16px 16px -40px 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(12, 18, 30, 0.7);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  /* réceptacle carré (1:1) comme les vignettes : toute la série HIR est
     exportée en carré (5906 × 5906). contain + fond noir plutôt que cover :
     aucun crop, l'affiche est montrée entière. Image statique (avec OU sans
     légendes selon le côté cliqué au catalogue, cf. `openModal(poster,
     variant)` dans shop.js) — le slider comparatif vit sur la vignette du
     catalogue (`.card .thumb-wrap.compare` plus bas), pas ici. */
  .modal-image {
    width: min(100%, 70vh);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: #000;
  }

  .modal-content {
    padding: 28px 32px 36px;
  }

  .modal-content .location {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .modal-content h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 28px;
    margin: 8px 0 16px;
  }

  .modal-content .description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
  }

  /* Mention de licence intégrale (ex. Tahiti : Copernicus/DLR/Airbus, USGS,
     NOAA) — hors du corps éditorial, même traitement que le bloc légal
     d'explained.html (mono, plus petit, plus sourd). `white-space: pre-line`
     rend le \n\n posé dans POSTERS comme un saut de paragraphe. */
  .modal-content .credits {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-dim);
    white-space: pre-line;
  }

  .detail-zoom {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
  }

  .detail-zoom img {
    flex: 0 0 auto;
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: block;
    cursor: zoom-in;
  }

  .detail-zoom .caption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 260px;
    line-height: 1.6;
  }

  .size-picker {
    margin-top: 28px;
  }

  .size-picker .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
  }

  .size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .size-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .size-pill:hover { border-color: rgba(79, 195, 247, 0.4); }

  .size-pill.selected {
    background: rgba(79, 195, 247, 0.12);
    border-color: rgba(79, 195, 247, 0.5);
    color: var(--accent);
  }

  .buy-row {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .buy-button {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 8px;
    background: var(--accent);
    color: #06121c;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
  }

  .buy-button.disabled {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
  }

  .buy-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: var(--text);
  }

  /* pied de page */
  footer {
    text-align: center;
    padding: 32px 24px 48px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }

  footer a { color: var(--accent); text-decoration: none; }
  /* Même taille que la description sous le titre (`header p`, 16px) — le
     reste du pied de page (bandeau studio) garde son petit corps.
     `footer > .sep` et pas `.sep` seul : ne doit viser QUE le point médian
     entre les deux liens, pas celui, plus petit, du bandeau studio
     (`.site-bar .sep`, imbriqué plus profond dans `.series`). */
  footer a.explained { display: inline-block; font-size: 16px; }
  footer > .sep { font-size: 16px; color: var(--text-dim); }

  /* Bandeau studio (haut ET bas de page, 2026-09-08) : logo NABIUH MAPS,
     séries sœurs (CTS/HWF/HIR) et sélecteur de langue. Même dispositif que
     `.site-bar` sur cts-shop, adapté : HIR a une VRAIE URL par langue (`/` et
     `/fr/`), donc son sélecteur est un LIEN statique, pas un bouton JS qui
     réécrit la page — pas de bascule à programmer ici. Deux exemplaires dans
     le DOM (un par page, cf. `index.html`/`fr/index.html`), classes
     seulement — pas d'id, comme cts-shop. Uniquement sur la page catalogue :
     `explained.html`/`vote.html` gardent leur pied de page simple (retour +
     langue), elles n'ont pas ce bandeau, exactement comme les pages
     secondaires de cts-shop. */
  .site-bar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
  }

  /* Seule différence entre les 2 exemplaires : le filet est sous celui du
     haut et au-dessus de celui du bas — les deux encadrent la page. */
  .site-bar--top { border-bottom: 1px solid var(--border); }
  .site-bar--bottom { border-top: 1px solid var(--border); margin-top: 24px; }

  .site-bar a { color: var(--accent); text-decoration: underline; }
  .site-bar a:hover { color: var(--text); }

  /* Sélecteur `.site-bar a.site-bar-logo-link` et pas `.site-bar-logo-link`
     seul : il faut battre `.site-bar a` en spécificité pour annuler son
     soulignement (c'est une image, pas du texte).
     ⚠️ `min-width: 0` : sans ça, Safari iPad affichait le logo à sa taille
     INTRINSÈQUE (1406 px), cassant tout le bandeau — pas sur iPhone (la media
     query < 720px bascule sur une autre grille, cf. plus bas, qui esquive le
     bug) ni sur Chrome desktop. Cause : une piste de grille `1fr` a par
     défaut `min-width: auto`, c'est-à-dire la taille MIN-CONTENT de son
     contenu — et certains WebKit calculent celle d'une image d'après ses
     pixels natifs plutôt que la taille fixée en CSS (`height: 26px` sur
     `.site-bar-logo`). `min-width: 0` annule ce plancher automatique. Piège
     classique de CSS Grid avec du contenu remplacé (img/svg/vidéo) — à
     reproduire sur tout futur `.site-bar` (cts-shop, hwf-shop) qui logerait
     une image dans une piste `fr`. */
  .site-bar a.site-bar-logo-link {
    justify-self: start;
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
  }

  /* `logo-white.png` (1406×261, fond transparent) — pas le
     « logo blanc fond noir.png » du crédit historique, qui demandait le hack
     `mix-blend-mode: screen` faute de transparence. Repris de `hwf-shop`, où
     il sert déjà. 26px de haut, comme cts-shop (ratio quasi identique,
     5,39:1 contre 5,4:1). */
  .site-bar-logo {
    height: 26px;
    width: auto;
    display: block;
  }

  /* Séries au centre, insécables : le groupe ne doit jamais se couper entre
     une série et son séparateur. */
  .site-bar .series {
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  /* Série courante : même traitement que la langue courante du sélecteur —
     en évidence et non cliquable, plutôt qu'un lien vers la page où on est. */
  .site-bar .current {
    color: var(--text);
    font-weight: 600;
  }

  .site-bar .sep { color: var(--border); }

  .site-bar .lang-switch { justify-self: end; }

  /* Sous ~720px les 3 zones ne tiennent plus sur une ligne : logo et langue
     restent en vis-à-vis, les séries passent dessous, toujours centrées —
     même repli que cts-shop. */
  @media (max-width: 720px) {
    .site-bar { grid-template-columns: auto auto; gap: 8px 12px; }
    .site-bar > .site-bar-logo-link { grid-area: 1 / 1; }
    .site-bar > .lang-switch { grid-area: 1 / 2; }
    .site-bar > .series { grid-area: 2 / 1 / 3 / 3; }
  }

  /* Sélecteur de langue — même dispositif que nabiuhmaps.com : une URL par
     langue, la langue courante en `aria-current` (pas un lien). Classe
     partagée par les deux exemplaires de `.site-bar` (haut/bas) : une seule
     règle plutôt que la copie `footer .lang` d'avant le bandeau studio. */
  .lang-switch {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--border);
    line-height: 1;
    white-space: nowrap;
  }

  .lang-switch a { color: var(--text-dim); text-decoration: none; margin: 0 6px; }
  .lang-switch a:hover { color: var(--accent); text-decoration: underline; }
  .lang-switch [aria-current] { color: var(--text); margin: 0 6px; }