/* Thème « 3 Colors Mobile » (theme/color-mobile) : pensé pour le téléphone, en extérieur.
   Très lisible (une seule police, grande, bien espacée, contraste fort), gros boutons, peu de texte, blocs pleine largeur, aucune illustration.
   Tout est limité à ce thème : les autres univers ne changent pas. Sur grand écran, seules la police et les marges changent. */
:root[data-pack="color-mobile"] { --font-size: 18px; --lh: 1.62; --radius: 14px; }
:root[data-pack="color-mobile"] body { letter-spacing: .01em; word-spacing: .05em; -webkit-font-smoothing: antialiased; }
/* une seule police : les titres aussi (pas de police décorative), sans contour ni ombre */
:root[data-pack="color-mobile"] :is(h1, h2, h3, h4, .nm-t, .item-title) { font-family: inherit !important; font-weight: 800 !important; letter-spacing: 0 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; line-height: 1.25; }
:root[data-pack="color-mobile"] h1 { font-size: 1.6rem; }
:root[data-pack="color-mobile"] h2 { font-size: 1.3rem; }
:root[data-pack="color-mobile"] h3 { font-size: 1.12rem; }
:root[data-pack="color-mobile"] main :is(p, li) > a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
:root[data-pack="color-mobile"] :is(button, .btn) { font-weight: 800; }

@media (max-width: 760px) {
  /* blocs pleine largeur, bien séparés, contour net (lisible au soleil) */
  :root[data-pack="color-mobile"] .card { border-width: 2px !important; border-radius: 14px !important; padding: 1rem !important; box-shadow: none !important; margin-block: .8rem; }
  :root[data-pack="color-mobile"] .card .card { border-width: 1.5px !important; padding: .8rem !important; }
  :root[data-pack="color-mobile"] .stack { gap: .8rem; }
  /* gros boutons faciles à toucher */
  :root[data-pack="color-mobile"] :is(button, .btn, a.btn, summary):not(.ub-x):not(.uh-sw):not(.link):not(.rail-btn):not(.mic):not([class*="mascotte"]) { min-height: 48px; }
  :root[data-pack="color-mobile"] :is(button, .btn, a.btn):not(.link):not(.uh-sw):not(.mic) { font-size: 1.02rem; padding: .6rem 1rem; border-radius: 12px; }
  :root[data-pack="color-mobile"] .card > .row > :is(button.primary, a.btn.primary, a.primary) { flex: 1 1 100%; justify-content: center; text-align: center; }
  :root[data-pack="color-mobile"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) { font-size: 1rem; min-height: 48px; border-width: 2px; }
  :root[data-pack="color-mobile"] input:is([type="checkbox"], [type="radio"]) { width: 1.4rem; height: 1.4rem; }
  :root[data-pack="color-mobile"] label.check { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
  /* peu de texte : les explications secondaires disparaissent, l'introduction tient en deux lignes */
  :root[data-pack="color-mobile"] main :is(p.small.muted:not([role]), .rv-why, .rv-guide, .sum-full) { display: none !important; }
  :root[data-pack="color-mobile"] main .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* aucune illustration */
  :root[data-pack="color-mobile"] :is(.blurb-icon, .blurb-fig, .banner-char, .bloque-ico, .rv-thumb, main .thumb) { display: none !important; }
  :root[data-pack="color-mobile"] .page-foot.has-mobile::before { background-image: none !important; }
  /* les pastilles flottantes ne recouvrent plus les titres ni le menu */
  :root[data-pack="color-mobile"] .spark-counter { top: 13px !important; left: auto !important; right: 6.9rem !important; }
  :root[data-pack="color-mobile"] .ei-btns { top: auto !important; bottom: .7rem !important; left: .7rem !important; right: auto !important; }
  :root[data-pack="color-mobile"] .mascotte-widget { transform: scale(.72); transform-origin: 100% 100%; }
  :root[data-pack="color-mobile"] .bloque-fab { display: none !important; } /* le bouton du cours reste, la bulle flottante en double disparaît */
}
@media (prefers-reduced-motion: no-preference) { :root[data-pack="color-mobile"] { scroll-behavior: smooth; } }