/* Boutique MSR — feuille de style de la page catalogue (index.html et fr/index.html).
   Portée de hir-shop, mais à DOMINANTE BLANCHE (demande de l'utilisateur,
   2026-10-18) : les affiches MSR sont des montagnes enneigées, claires — le
   fond sombre de HWF/HIR les aurait découpées en blocs lumineux. Toutes les
   couleurs passent par les variables ci-dessous ; les teintes en rgba() qui
   restent dans le fichier dérivent de --ink (20,30,45) ou --accent (31,95,168). */
  :root {
    --bg: #ffffff;
    --panel: #f4f6f8;          /* encarts légers (prix, crédits, cartes) */
    --panel-solid: #ffffff;    /* fiche produit, pop-ups */
    --text: #1b2430;           /* 15,6:1 sur blanc */
    --text-dim: #5d6876;       /* 5,6:1 sur blanc — reste AA en petit corps */
    --accent: #1f5fa8;         /* bleu piste, 6,3:1 sur blanc */
    --border: rgba(20, 30, 45, 0.10);
    --shadow: 0 1px 2px rgba(20, 30, 45, 0.04), 0 8px 24px rgba(20, 30, 45, 0.06);
  }

  * { 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 sigle seul au-dessus du titre) a été RETIRÉ le
     2026-09-08 : `.site-bar` affiche désormais « Series: CTS · HWF · HIR · MSR »
     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(20, 30, 45, 0.03);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .currency-toggle button:hover { border-color: rgba(31, 95, 168, 0.4); }

  .currency-toggle button.selected {
    background: rgba(31, 95, 168, 0.12);
    border-color: rgba(31, 95, 168, 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; }
    /* `flex: none` : en colonne, le `flex-basis: 240px` de la règle de base
       devient une HAUTEUR (240 px de vide sous 4 lignes). Défaut hérité de
       hir-shop, qui l'a toujours. */
    .print-note { flex: none; text-align: center; max-width: 320px; }
  }

  /* grille catalogue */
  .catalog {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 80px;
    display: grid;
    /* Colonnes plafonnées et centrées : avec une seule affiche (lancement),
       `auto-fill … 1fr` la collait à gauche, seule sur une ligne vide. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    justify-content: center;
    gap: 24px;
  }

  /* Cartes blanches posées sur blanc : c'est l'OMBRE qui les détache, pas un
     fond plus sombre — un encart gris sous une affiche enneigée la salirait. */
  .card {
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }

  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 95, 168, 0.3);
    box-shadow: 0 2px 4px rgba(20, 30, 45, 0.05), 0 16px 36px rgba(20, 30, 45, 0.10);
  }

  /* Vignette carrée (toute la série est en 5906², comme HIR). Pas de slider
     avec/sans légendes ici : MSR n'a qu'un export par langue. */
  .card .thumb-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--panel);
  }

  .card .thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .card:hover .thumb-wrap img { transform: scale(1.02); }

  .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(20, 28, 38, 0.45);
    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(255, 255, 255, 0.97);
    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;
    box-shadow: 0 12px 40px rgba(20, 30, 45, 0.18);
  }

  .lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    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);
    box-shadow: 0 24px 64px rgba(20, 30, 45, 0.18);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* pop-up « 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(20, 28, 38, 0.45);
    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(255, 255, 255, 0.92);
    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 MSR est
     exportée en carré (5906 × 5906). contain plutôt que cover : aucun crop,
     l'affiche est montrée entière. */
  .modal-image {
    width: min(100%, 70vh);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: var(--panel);
  }

  .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(20, 30, 45, 0.03);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .size-pill:hover { border-color: rgba(31, 95, 168, 0.4); }

  .size-pill.selected {
    background: rgba(31, 95, 168, 0.12);
    border-color: rgba(31, 95, 168, 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: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
  }

  .buy-button.disabled {
    background: rgba(20, 30, 45, 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/MSR) et sélecteur de langue. Même dispositif que
     `.site-bar` sur cts-shop, adapté : MSR 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 :
     `vote.html` garde son 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-dark.png` (1120×180, NOIR sur fond transparent) — le
     `logo-white.png` de HWF/HIR disparaîtrait sur le fond blanc. Réduit
     depuis `NABIUH MAPS logo/nabiuh-maps-noir.png` (kit de marque). Son
     cadrage est plus large que celui de logo-white (6,2:1 contre 5,4:1) :
     22px de haut donnent la même largeur visuelle (~137 px) que les 26px
     des autres boutiques. */
  .site-bar-logo {
    height: 22px;
    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; }

  /* Crédits et licences de la série (obligation de licence, cf. index.html).
     Se lit comme une note : petit corps mono, gris, sous le catalogue. */
  .credits-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 24px;
    color: var(--text-dim);
  }

  .credits-section h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }

  .credits-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.6;
  }

  .credits-section li + li { margin-top: 4px; }
  .credits-section strong { color: var(--text); font-weight: 600; }
  .credits-section a { color: var(--accent); }