/* ==========================================================================
   Thème clair de recordpy.fr — règles communes aux pages « graphiques »
   (indicateur thermique, nuits tropicales, sécheresse). Activé par la classe
   `theme-light` sur <html>, posée par theme_clair.js.

   Deux familles de règles :
   1. les classes du gabarit commun (fond, hero, footer, panneaux .rpi-*, .nt-*) ;
   2. les couleurs posées EN LIGNE dans le HTML (style="color:#b8b6ac"), qu'une
      classe ne peut pas surcharger : on les attrape par sélecteur d'attribut,
      valeur par valeur, avec !important. C'est brut mais sans risque : chaque
      règle ne touche qu'une teinte précise, remplacée par son équivalent clair.
   La barre de navigation reste sombre dans les deux modes.
   ========================================================================== */

/* ---- bouton de bascule (injecté par le script) ---- */
.theme-bascule { position: absolute; right: 18px; top: 74px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
                 background: rgba(30,30,36,0.7); border: 1px solid #3a3a44; border-radius: 999px; color: #b8b6ac;
                 font: 600 11.5px -apple-system, system-ui, sans-serif; padding: 6px 12px 6px 9px; cursor: pointer; }
.theme-bascule:hover { color: #f0ede6; border-color: #4c4b58; }
.theme-bascule .theme-ico { font-size: 13px; line-height: 1; }
#main-content { position: relative; }
html.embed-mode .theme-bascule { display: none !important; }
/* embed : bouton rond icône seule, en haut à droite, au-dessus de la carte */
html.embed-mode .theme-bascule.theme-embed, .theme-bascule.theme-embed { display: inline-flex !important; position: fixed; right: 10px; bottom: 74px; top: auto; left: auto; z-index: 1200; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(28,28,34,.78); color: #f0ede6; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
html.theme-light .theme-bascule.theme-embed { background: rgba(255,255,255,.9); color: #2b2b33; border-color: #cfcfd8; }
.theme-bascule.theme-embed .theme-lib { display: none; } .theme-bascule.theme-embed .theme-ico { font-size: 15px; }
@media (max-width: 640px) { .theme-bascule { top: 70px; right: 10px; padding: 5px 9px; } .theme-bascule .theme-lib { display: none; } }
.rnav-right .theme-bascule { position: static; margin-right: 10px; background: rgba(255,255,255,.04); }
@media (max-width: 640px) { .rnav-right .theme-bascule { margin-right: 8px; } }
html.theme-light .theme-bascule { background: #fff; border-color: #cfcfd8; color: #55555f; }
html.theme-light .rnav-right .theme-bascule { background: rgba(255,255,255,.12); border-color: #4c4b58; color: #e8e6df; }

/* ---- 1. gabarit commun ---- */
html.theme-light body { background: #f3f3f6; }
html.theme-light .hero-title { color: #1c1c22; }
html.theme-light .hero-subtitle { color: #4d4d57; }
html.theme-light footer { background: #e4e4ea !important; color: #55555f !important; }
html.theme-light footer a { color: #55555f !important; }
html.theme-light hr { border-top-color: #dcdce2 !important; }

/* pages « cartes » (radar, foudre, nuages, satellite, vigilance) : titre et chapeau */
html.theme-light .page-title { color: #1c1c22; }
html.theme-light .eum-lede { color: #4d4d57; }
html.theme-light .eum-lede b, html.theme-light .eum-lede strong { color: #1c1c22; }

/* panneaux « résumé » (accueil, nuits tropicales, sécheresse) */
html.theme-light .rpi-big { background: #fafafc; border-color: #e6e6ec; }
html.theme-light .rpi-summary { background: #fff; border-color: #dcdce2; }
html.theme-light .rpi-summary-head { background: #fafafc; border-bottom-color: #e6e6ec; }
html.theme-light .rpi-summary-date { color: #55555f; }
html.theme-light .rpi-summary-date b { color: #1c1c22; }
html.theme-light .rpi-big-label { color: #7a7a86; }
html.theme-light .rpi-big-val { color: #1c1c22; }
html.theme-light .rpi-big-val.hot, html.theme-light .rpi-big-label.hot { color: #c8551f; }
html.theme-light .rpi-big-val.cold, html.theme-light .rpi-big-label.cold { color: #2b6fb3; }
html.theme-light .rpi-big-sub, html.theme-light .rpi-headline { color: #55555f; }
html.theme-light .rpi-detail, html.theme-light .rpi-detail-body { color: #4d4d57; }
html.theme-light .rpi-detail-header { color: #1c1c22; }

/* dépliants d'aide et graphiques SVG du gabarit */
html.theme-light .nt-more summary { color: #2b6fb3; }
html.theme-light .nt-more { border-color: #dcdce2; }
html.theme-light .nt-more p, html.theme-light .nt-more span { color: #4d4d57; }
html.theme-light .nt-credit, html.theme-light .swi-credit, html.theme-light .itn-credit { color: #6c6c78; }
html.theme-light .nt-dl, html.theme-light .swi-dl { color: #2b6fb3; border-color: #cfcfd8; background: #fff; }
html.theme-light #stripes-svg, html.theme-light #bars-svg, html.theme-light #heatmap-svg { border-color: #dcdce2 !important; }
html.theme-light #bars-svg, html.theme-light #heatmap-svg { background: #fff !important; }

/* sélecteur de station (nuits tropicales) */
html.theme-light #station-input { background: #fff !important; color: #1c1c22 !important; border-color: #cfcfd8 !important; }
html.theme-light #station-suggest button, html.theme-light #station-suggest div { background: #fff !important; color: #1c1c22 !important; }

/* ---- 2. couleurs posées en ligne, teinte par teinte ---- */
html.theme-light [style*="color:#b8b6ac"] { color: #55555f !important; }
html.theme-light [style*="color:#d0cec8"] { color: #1c1c22 !important; }
html.theme-light [style*="color:#c9c7bd"] { color: #1c1c22 !important; }
html.theme-light [style*="color:#e8e8ee"] { color: #1c1c22 !important; }
html.theme-light [style*="color:#e3e8ee"] { color: #1c1c22 !important; }
html.theme-light [style*="color:#9fb8d6"] { color: #2b6fb3 !important; }
html.theme-light [style*="color:#7fb0e0"] { color: #2b6fb3 !important; }
html.theme-light [style*="color:#8fb8e6"] { color: #2b6fb3 !important; }
html.theme-light [style*="color:#d8785a"] { color: #c8551f !important; }
html.theme-light [style*="color:#6a6a76"] { color: #9a9aa8 !important; }
html.theme-light [style*="color:#8a8a8a"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#8a8a93"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#9a9a9a"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#9a9aa8"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#a9a7a0"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#7a7a86"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#9898a8"] { color: #55555f !important; }
html.theme-light [style*="border:1px solid #3a3a44"] { border-color: #cfcfd8 !important; }
html.theme-light [style*="border:1px solid #32323e"] { border-color: #dcdce2 !important; }
html.theme-light [style*="border-top:1px solid #32323e"] { border-top-color: #dcdce2 !important; }
html.theme-light [style*="border-top:1px solid #2f2f38"] { border-top-color: #dcdce2 !important; }
html.theme-light [style*="background:rgba(255,255,255,0.035)"] { background: #fff !important; }
html.theme-light [style*="background:rgba(30,30,36,0.62)"] { background: #fff !important; }
html.theme-light [style*="background:#23232e"] { background: #fff !important; }
html.theme-light [style*="background:#d0cec8"] { background: #2b2b33 !important; color: #fff !important; }
html.theme-light [style*="color:#12121a"] { color: #fff !important; }

/* mêmes teintes, mais sérialisées par le navigateur quand le JS les pose (el.style.color = …) */
html.theme-light [style*="color: rgb(184, 182, 172)"] { color: #55555f !important; }
html.theme-light [style*="color: rgb(18, 18, 26)"] { color: #fff !important; }
html.theme-light [style*="background: rgb(208, 206, 200)"] { background: #2b2b33 !important; }
html.theme-light [style*="background: rgba(30, 30, 36, 0.62)"] { background: #fff !important; }

/* ---- 3. variables du gabarit et fonds/textes posés en ligne sur les pages « records »
       (accueil, nuits tropicales, tableaux et réglages générés par le script) ---- */
html.theme-light { --text: #1c1c22; --text-muted: #6c6c78; --border: #dcdce2; }
html.theme-light .palp-toggle-track { background: #cfcfd8; }
html.theme-light .palp-toggle-thumb { background: #fff; }
html.theme-light .palp-select, html.theme-light .palp-radio-group { background: #fff; color: #1c1c22; border-color: #cfcfd8; }
html.theme-light .breve-card, html.theme-light .stat-card { background: #fff; border-color: #dcdce2; }
html.theme-light #classe-tooltip { background: #fff; border-color: #dcdce2; color: #1c1c22; }
html.theme-light table { color: #3a3a44; }

/* fonds sombres -> clairs */
html.theme-light [style*="background:#23232e"], html.theme-light [style*="background: #23232e"],
html.theme-light [style*="background:rgba(30,30,36,0.86)"], html.theme-light [style*="background:rgba(255,255,255,0.07)"],
html.theme-light [style*="background:rgba(255,255,255,0.03)"], html.theme-light [style*="background:rgba(255,255,255,.03)"] { background: #fff !important; }
html.theme-light [style*="background:#2a2a34"], html.theme-light [style*="background:#26262f"], html.theme-light [style*="background:#2e2e3a"],
html.theme-light [style*="background:#2c2c38"], html.theme-light [style*="background:#252530"] { background: #f4f4f7 !important; }
html.theme-light [style*="background:#1e1e24"], html.theme-light [style*="background:#1e1e28"], html.theme-light [style*="background:#19191a"],
html.theme-light [style*="background:#1b2430"] { background: #f3f3f6 !important; }
html.theme-light [style*="background:#3a3a48"], html.theme-light [style*="background:#4a4a5a"] { background: #e6e6ec !important; }
html.theme-light [style*="linear-gradient(transparent, #1e1e24)"] { background: linear-gradient(transparent, #f3f3f6) !important; }

/* textes clairs -> sombres */
html.theme-light [style*="color:#fff"], html.theme-light [style*="color:#ffffff"], html.theme-light [style*="color:#eee"],
html.theme-light [style*="color:#eeeef2"], html.theme-light [style*="color:#e0e0e6"], html.theme-light [style*="color:#e2e0d8"],
html.theme-light [style*="color:#f3eee3"], html.theme-light [style*="color:#ddd"], html.theme-light [style*="color:#ccc"],
html.theme-light [style*="color:#c8c8d2"], html.theme-light [style*="color:#c0c0c6"], html.theme-light [style*="color:#c0c0cc"],
html.theme-light [style*="color:#c2c0b6"], html.theme-light [style*="color:#c0beb8"] { color: #1c1c22 !important; }
html.theme-light [style*="color:#9898a8"], html.theme-light [style*="color:#7a7a9a"], html.theme-light [style*="color:#777"],
html.theme-light [style*="color:#6b6b7a"], html.theme-light [style*="color:#b0b0bc"], html.theme-light [style*="color:#b0aea8"],
html.theme-light [style*="color:#666"] { color: #6c6c78 !important; }
html.theme-light [style*="color:#7a7aaa"], html.theme-light [style*="color:#a0a0c8"], html.theme-light [style*="color:#a7cbec"],
html.theme-light [style*="color:#90CAF9"] { color: #2b6fb3 !important; }
html.theme-light [style*="color:#ffb347"], html.theme-light [style*="color:#e8c896"] { color: #b8701e !important; }
html.theme-light [style*="color:#ef95c2"] { color: #b03a7a !important; }

/* bordures */
html.theme-light [style*="border-bottom:1px solid #44445a"] { border-bottom-color: #e6e6ec !important; }
html.theme-light [style*="border:1px solid #6a6a88"], html.theme-light [style*="border:1px solid #3a3a48"],
html.theme-light [style*="border:1px solid #555"], html.theme-light [style*="border:1px solid #44445a"] { border-color: #dcdce2 !important; }

/* les boutons qui restent sombres une fois sélectionnés gardent leur texte clair */
html.theme-light [style*="background:#a0a0c8"] { color: #1a1a20 !important; }

/* réglages « pour aller plus loin » (classes .palp-*) */
html.theme-light .palp-toggle-label, html.theme-light .palp-title, html.theme-light .palp-select-label,
html.theme-light .palp-radio.on, html.theme-light .palp-chips-clear-all:hover { color: #1c1c22; }
html.theme-light .palp-group-header, html.theme-light .palp-toggle-sub, html.theme-light .palp-chevron,
html.theme-light .palp-chips-label, html.theme-light .palp-radio, html.theme-light .palp-reset,
html.theme-light .palp-chips-clear-all { color: #6c6c78; }
html.theme-light .palp-reset { border-color: #cfcfd8; }
html.theme-light .palp-chips-zone { background: #fff; border-color: #cfcfd8; }
html.theme-light .palp-info { background: #e6e6ec; color: #3a3a44; }
html.theme-light .filter-chip { background: #fff; color: #3a3a44; border-color: #cfcfd8; }
html.theme-light .legend, html.theme-light .legend-item { color: #3a3a44; }
html.theme-light .legend-overlay { background: rgba(255,255,255,.92); color: #3a3a44; border-color: #dcdce2; }

/* mêmes teintes en notation rgb(), telle que le navigateur la sérialise quand un
   script pose la couleur (el.style.background = '#2a2a34' devient
   « background: rgb(42, 42, 52) » dans l'attribut) */
html.theme-light [style*="background: rgb(35, 35, 46)"], html.theme-light [style*="background-color: rgb(35, 35, 46)"] { background: #fff !important; }
html.theme-light [style*="background: rgb(42, 42, 52)"], html.theme-light [style*="background-color: rgb(42, 42, 52)"],
html.theme-light [style*="background: rgb(38, 38, 47)"], html.theme-light [style*="background: rgb(37, 37, 48)"] { background: #f4f4f7 !important; }
html.theme-light [style*="background: rgb(30, 30, 36)"], html.theme-light [style*="background-color: rgb(30, 30, 36)"] { background: #f3f3f6 !important; }
html.theme-light [style*="background: rgb(58, 58, 72)"], html.theme-light [style*="background: rgb(74, 74, 90)"] { background: #e6e6ec !important; }
html.theme-light [style*="color: rgb(255, 255, 255)"], html.theme-light [style*="color: rgb(224, 224, 230)"],
html.theme-light [style*="color: rgb(192, 192, 198)"], html.theme-light [style*="color: rgb(238, 238, 242)"] { color: #1c1c22 !important; }
html.theme-light [style*="color: rgb(152, 152, 168)"], html.theme-light [style*="color: rgb(122, 122, 154)"],
html.theme-light [style*="color: rgb(119, 119, 119)"] { color: #6c6c78 !important; }
html.theme-light [style*="color: rgb(255, 179, 71)"] { color: #b8701e !important; }
html.theme-light [style*="color: rgb(160, 160, 200)"], html.theme-light [style*="color: rgb(122, 122, 170)"],
html.theme-light [style*="color: rgb(144, 202, 249)"] { color: #2b6fb3 !important; }
html.theme-light [style*="border: 1px solid rgb(58, 58, 72)"], html.theme-light [style*="border-color: rgb(58, 58, 72)"] { border-color: #dcdce2 !important; }

html.theme-light [style*="color:#e6e6ec"], html.theme-light [style*="color: rgb(230, 230, 236)"] { color: #1c1c22 !important; }
html.theme-light [style*="border:1px solid #3d3550"] { border-color: #d9cbe8 !important; }
html.theme-light [style*="background:rgba(176,125,224,0.10)"] { background: #f4eefb !important; }

/* ---- Mobile : le bas des cartes est centré, discret mais lisible (règle du 17/09) ----
   légende au-dessus, crédit en pastille dessous, tous deux centrés ; cartes des familles « sa- » (anomalies, ENS, EFI, rang,
   saison, Hovmöller, graphiques ECMWF), risques, mer et météo en France. */
@media (max-width: 700px) { .leaflet-tooltip { width: max-content; max-width: calc(100vw - 48px); box-sizing: border-box; white-space: normal !important; font-size: 11.5px; } }   /* info-bulles : jamais plus larges que l'écran (19/09) */
@media (max-width: 600px) {
  .sa-legende, .mer-legende { left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 30px !important; max-width: calc(100% - 16px); box-sizing: border-box; text-align: center; }
  .sa-legende .lib, .sa-legende .t, .mer-legende .t { text-align: center; }
  /* lisible même sur un semis de points : fond léger, barre un peu plus large, étiquettes plus petites (18/09) */
  .sa-legende { background: rgba(20,20,26,.55); padding: 4px 8px 5px; border-radius: 7px; } html.theme-light .sa-legende { background: rgba(255,255,255,.72); }
  .sa-legende .b { width: 270px !important; max-width: calc(100vw - 48px); } .sa-legende .t { font-size: 8px !important; }
  .sa-legende .b, .mer-legende .b { margin: 0 auto; }
  .sa-legende .cl { justify-content: center; flex-wrap: nowrap; } .sa-legende .cl i { width: 22px !important; } .sa-legende .cl span { width: 24px !important; font-size: 7px !important; letter-spacing: -.02em; white-space: nowrap; }
  /* légendes à pastilles rondes + libellé en toutes lettres (hiver, séries) : on garde des ronds et des libellés entiers, sur deux lignes si besoin (18/09) */
  .sa-legende .cl.pt { flex-wrap: wrap; gap: 4px 8px; } .sa-legende .cl.pt i { width: 11px !important; height: 11px; } .sa-legende .cl.pt span { width: auto !important; font-size: 9px !important; letter-spacing: 0; }
  .cp-credit-carte { display: none !important; }   /* météo en France : le crédit est déjà écrit sous la carte (17/09) */
  .sa-credit, .mer-credit { left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 6px !important; top: auto !important; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; text-align: center; font-size: 7.5px !important; letter-spacing: .02em; padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.5) !important; color: #fff !important; text-shadow: none !important; }
}

/* ---- Mobile : cartes d'observation (radar, foudre, nuages et pluie, image satellite) allégées (règle du 17/09) ----
   cartouche sur une ligne sans sous-titre, pas de logo ni de zoom +/−, outils réduits, modes juste sous le cartouche,
   légende centrée au-dessus de la barre d'animation, crédit court et discret. */
@media (max-width: 600px) {
  /* (24/09) une seule ligne ici aussi : « Jeudi 24 septembre à 18 h 50 (heure de Paris) » se coupait en deux et mangeait
     la carte. Le cartouche reste à gauche (les outils occupent le coin haut droit), coupé proprement s'il est trop long. */
  .eum-stamp { padding: 4px 8px !important; font-size: 10.5px !important; max-width: calc(100% - 64px); white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 !important; }
  .eum-stamp small { display: none !important; }
  .eum-logo, .leaflet-control-zoom, #eum-zin, #eum-zout { display: none !important; }   /* le pincement remplace + / − */
  .mapctl { top: 8px !important; right: 8px !important; gap: 4px !important; transform: scale(.85); transform-origin: top right; }
  /* les commandes (modes et barre d'animation) passent SOUS la carte : le cadre laisse déborder, et réserve la place dessous */
  .eum-stage { overflow: visible !important; margin-bottom: 92px !important; }
  .eum-stage .leaflet-container { border-radius: 0; }
  .rad-modes { top: 100% !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; margin-top: 8px; max-width: 100% !important; background: transparent !important; padding: 0 !important; gap: 3px !important; }
  .rad-leg, .pl-leg { left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 6px !important; top: auto !important; max-width: calc(100% - 16px); box-sizing: border-box; text-align: center; padding: 4px 8px !important; }   /* la légende toujours tout en bas (17/09) */
  .eum-ctrl { top: calc(100% + 48px) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; }
  .rad-cred { display: none !important; }                /* la source est déjà écrite sous la carte */
}

/* ---- Règle (17/09) : jamais de barre de défilement dans un encart Météo-Contact — le contenu tient dans l'iframe,
   ce qui dépasse est coupé. Toutes les pages posent html.embed / .embed-mode / .embed-light en mode encart. */
html.embed, html.embed body, html.embed-mode, html.embed-mode body, html.embed-light, html.embed-light body { overflow: hidden !important; }

/* ---- Graphiques dynamiques (règle du 19/09) : info-bulle des éléments SVG à <title>, et surbrillance ---- */
.gq-bulle { position: fixed; z-index: 10000; display: none; pointer-events: none; background: rgba(28,28,34,.96); color: #f3eee3; border-radius: 8px; padding: 7px 10px; font: 500 12px/1.4 -apple-system, system-ui, sans-serif; max-width: min(320px, calc(100vw - 24px)); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
html.theme-light .gq-bulle { background: rgba(255,255,255,.97); color: #1c1c22; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
svg .gq-on { filter: brightness(1.25); stroke: currentColor; stroke-width: 1.2; } [data-bulle].gq-on { outline: 2px solid var(--texte, #e6e2d8); outline-offset: -2px; filter: brightness(1.15); }

/* ---- Mobile : cartouche de titre et crédit des cartes (24/09, Anthony sur /previsions/anomalies et /observations/marees :
   « le rectangle titre n'est pas centré », « copyright volumineux ») ----
   Sur un téléphone, ces blocs étaient calés à gauche avec une largeur maximale qui les faisait finir pile sur le bord droit :
   10 px d'un côté, 0 de l'autre, donc l'œil voit un cadre décalé. Ils sont désormais CENTRÉS sur la carte (marges égales par
   construction) et le crédit repasse sur une seule ligne, discret. L'export garde la composition de la règle (cartouche à
   gauche, crédit en bas à droite) : les règles ci-dessous s'arrêtent au mode export. */
@media (max-width: 600px) {
  .cartouche, .ma-titre, .sa-titre, .so-titre, .obs-cartouche, .ar-cartouche, .mer-cartouche,
  .cp-titre, .ce-cart, .pp-cart, .sw-cart, .sm-cart {   /* .rq-titre exclu : la carte des risques place déjà ses boutons de vue à droite */
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    /* width:max-content est indispensable : avec left:50% seul, la largeur disponible n'est plus que la MOITIÉ droite
       de la carte, et le cartouche se réduisait à 174 px (cinq lignes de texte). */
    width: max-content !important; max-width: calc(100% - 16px) !important; box-sizing: border-box;
    /* (24/09, Anthony) UNE SEULE LIGNE : à deux ou trois lignes, le cartouche grignote la carte. Le sous-titre (run,
       moyennes) disparaît — il est déjà écrit dans la page — et un titre trop long est coupé proprement. */
    font-size: 9.5px !important; line-height: 1.35 !important; padding: 3px 7px !important; text-align: center;
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
  }
  .cartouche small, .ma-titre small, .sa-titre small, .so-titre small, .obs-cartouche small, .ar-cartouche small,
  .mer-cartouche small, .rq-titre small, .cp-titre small, .ce-cart small, .pp-cart small, .sw-cart small, .sm-cart small,
  .cartouche br, .ma-titre br, .sa-titre br, .obs-cartouche br, .ar-cartouche br, .mer-cartouche br,
  .sw-cart span, .sm-cart span, .pp-cart span, .ce-cart span { display: none !important; }   /* sous-titre en <span> sur les pages satellite/radar */
  .sw-cart b, .sm-cart b { font-size: 12px !important; }
  .export-mode .sw-cart span, .export-mode .sm-cart span, .export-mode .pp-cart span, .export-mode .ce-cart span { display: block !important; }
  .export-mode .sw-cart b, .export-mode .sm-cart b { font-size: 17px !important; }
  .credit-carte, .ma-credit, .sa-credit, .obs-credit, .ar-credit, .mer-credit, .rq-credit,
  .sech-credit, .cm-credit, .na-mapcredit, .cp-credit-carte {
    font-size: 7px !important; letter-spacing: 0 !important; padding: 2px 5px !important;
    max-width: calc(100% - 16px); box-sizing: border-box; line-height: 1.25 !important;
  }
  /* l'export reprend la composition normale : cartouche collé à gauche, crédit en bas à droite */
  .export-mode .cartouche, .export-mode .ma-titre, .export-mode .sa-titre, .export-mode .so-titre, .export-mode .obs-cartouche,
  .export-mode .ar-cartouche, .export-mode .mer-cartouche, .export-mode .cp-titre, .export-mode .ce-cart,
  .export-mode .pp-cart, .export-mode .sw-cart, .export-mode .sm-cart {
    left: 10px !important; transform: none !important; text-align: left; font-size: 12px !important;
    white-space: normal !important; overflow: visible; width: auto !important;
  }
  .export-mode .cartouche small, .export-mode .ma-titre small, .export-mode .sa-titre small, .export-mode .so-titre small,
  .export-mode .obs-cartouche small, .export-mode .ar-cartouche small, .export-mode .mer-cartouche small,
  .export-mode .rq-titre small, .export-mode .cp-titre small, .export-mode .ce-cart small, .export-mode .pp-cart small,
  .export-mode .sw-cart small, .export-mode .sm-cart small { display: block !important; }
  .export-mode .credit-carte, .export-mode .ma-credit, .export-mode .sa-credit, .export-mode .obs-credit, .export-mode .ar-credit,
  .export-mode .mer-credit, .export-mode .rq-credit, .export-mode .sech-credit, .export-mode .cm-credit,
  .export-mode .na-mapcredit, .export-mode .cp-credit-carte { font-size: 9.5px !important; letter-spacing: .04em !important; padding: 3px 7px !important; }
}

/* ---- Mobile : pastilles de favoris (stations et villes) — (24/09, Anthony : « favoris beaucoup trop gros pour mobile »,
   « idem pour observations des villes et prévisions villes ») ----
   Chaque favori (nom, département, altitude, valeur) prenait une ligne entière sur un téléphone. Même classe `.st-favoris`
   sur la page station et la page ville : la règle vaut pour les deux. */
@media (max-width: 600px) {
  .st-favoris { gap: 4px !important; margin-top: 8px !important; }
  .st-favoris a, .st-favoris button { font-size: 10.5px !important; padding: 3px 8px !important; min-height: 0 !important; }
  .st-favoris a { gap: 5px !important; padding-right: 9px !important; }
  .st-favoris a span { font-size: 9px !important; margin-top: 0 !important; }
  .st-favoris a .fv-val { font-size: 11.5px !important; }
}

/* ---- Crédit épinglé des encarts (24/09) ----
   Plusieurs encarts n'affichaient aucun crédit : le leur est le dernier élément du flux, et l'encart coupe à la hauteur de
   l'iframe. Les pages concernées ajoutent un `<div class="xx-credit-encart">` épinglé en bas, visible en mode encart seulement
   (fond clair par défaut, puisque les encarts Météo-Contact sont en `?embed=light`). Variante sombre si l'encart ne l'est pas. */
html.embed:not(.embed-light) [class$="-credit-encart"], html.embed-mode:not(.embed-light) [class$="-credit-encart"] {
  background: rgba(18,18,24,.85) !important; color: #b9b8b2 !important;
}

/* Encarts : crédit de carte réduit (24/09) — dans une iframe de 670 px, le crédit en bas à droite (9,5 px, majuscules
   espacées) mordait sur la légende en bas à gauche. */
html.embed .sa-credit, html.embed-mode .sa-credit, html.embed-light .sa-credit,
html.embed .ma-credit, html.embed-mode .ma-credit, html.embed .sech-credit, html.embed-mode .sech-credit {
  font-size: 8px !important; letter-spacing: 0 !important; padding: 2px 6px !important;
}