/* assets/css/tokens.css */
/* ==========================================================================
   Garmin.ma - Design tokens
   Direction artistique : graphite / noir / blanc, accent bleu.
   Esprit premium, sportif, technologique. Aucune dependance externe.
   ========================================================================== */

:root {
  /* ---- Echelle graphite ------------------------------------------------ */
  --gm-ink:          #07090B;  /* noir profond, fonds heros */
  --gm-graphite-900: #0E1216;
  --gm-graphite-800: #161C22;
  --gm-graphite-700: #212931;
  --gm-graphite-600: #323C46;
  --gm-graphite-500: #4B5763;
  --gm-graphite-400: #6B7885;
  --gm-graphite-300: #98A3AE;
  --gm-graphite-200: #C4CCD4;
  --gm-graphite-100: #E3E8ED;
  --gm-graphite-50:  #F3F6F8;
  --gm-white:        #FFFFFF;

  /* ---- Accent bleu ------------------------------------------------------
     Bleu communautaire, volontairement distinct du bleu institutionnel
     de la marque : l identite du site est editoriale, pas officielle.     */
  --gm-blue-700: #0B3FA8;
  --gm-blue-600: #1259D6;
  --gm-blue-500: #1C6FF0;  /* accent principal */
  --gm-blue-400: #4A8DF6;
  --gm-blue-200: #A8C8FB;
  --gm-blue-50:  #EDF3FE;

  /* ---- Tons d appoint ---------------------------------------------------
     Usage strictement fonctionnel (etats, data-viz), jamais decoratif.    */
  --gm-sand-500:  #C08A4A;  /* rappel Atlas / littoral, illustrations */
  --gm-green-500: #1F9D64;  /* verifie, disponible */
  --gm-amber-500: #C9840B;  /* non verifie, prudence */
  --gm-red-500:   #C5372C;  /* erreur, signalement */

  /* ---- Roles semantiques (mode clair) ----------------------------------- */
  --gm-bg:             var(--gm-white);
  --gm-bg-subtle:      var(--gm-graphite-50);
  --gm-bg-inset:       var(--gm-graphite-100);
  --gm-surface:        var(--gm-white);
  --gm-surface-raised: var(--gm-white);
  --gm-text:           var(--gm-graphite-900);
  --gm-text-muted:     var(--gm-graphite-500);
  --gm-text-faint:     var(--gm-graphite-400);
  --gm-text-invert:    var(--gm-white);
  --gm-border:         var(--gm-graphite-100);
  --gm-border-strong:  var(--gm-graphite-200);
  --gm-accent:         var(--gm-blue-500);
  --gm-accent-hover:   var(--gm-blue-600);
  --gm-accent-soft:    var(--gm-blue-50);
  --gm-focus:          var(--gm-blue-500);

  /* ---- Typographie ------------------------------------------------------
     Display : graisse affirmee, legerement condensee, pour les titres.
     Texte   : lecture longue, chiffres tabulaires pour les fiches.        */
  --gm-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gm-font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --gm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  /* Echelle fluide : min lisible mobile, max maitrise sur grand ecran */
  --gm-text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --gm-text-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --gm-text-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1.0625rem);
  --gm-text-lg:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --gm-text-xl:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --gm-text-2xl:  clamp(1.5rem, 1.32rem + 0.80vw, 2rem);
  --gm-text-3xl:  clamp(1.875rem, 1.55rem + 1.40vw, 2.75rem);
  --gm-text-4xl:  clamp(2.25rem, 1.70rem + 2.40vw, 3.75rem);
  --gm-text-5xl:  clamp(2.75rem, 1.85rem + 3.90vw, 5.25rem);

  --gm-leading-tight: 1.08;
  --gm-leading-snug:  1.28;
  --gm-leading-base:  1.65;
  --gm-leading-loose: 1.78;

  --gm-tracking-tight: -0.022em;
  --gm-tracking-snug:  -0.012em;
  --gm-tracking-wide:  0.06em;
  --gm-tracking-caps:  0.14em;  /* surtitres, labels */

  /* ---- Espacement : echelle 4px ---------------------------------------- */
  --gm-space-1: 0.25rem;
  --gm-space-2: 0.5rem;
  --gm-space-3: 0.75rem;
  --gm-space-4: 1rem;
  --gm-space-5: 1.5rem;
  --gm-space-6: 2rem;
  --gm-space-7: 2.5rem;
  --gm-space-8: 3rem;
  --gm-space-9: 4rem;
  --gm-space-10: 5rem;
  --gm-space-11: 6.5rem;
  --gm-space-12: 8rem;

  /* Respiration verticale des sections - genereuse (cf. DA) */
  --gm-section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);

  /* ---- Grille ----------------------------------------------------------- */
  --gm-max-width: 1280px;
  --gm-max-width-wide: 1560px;
  --gm-max-prose: 68ch;
  --gm-gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);

  /* ---- Rayons ----------------------------------------------------------- */
  --gm-radius-xs: 3px;
  --gm-radius-sm: 6px;
  --gm-radius-md: 10px;
  --gm-radius-lg: 16px;
  --gm-radius-xl: 24px;
  --gm-radius-pill: 999px;

  /* ---- Elevation --------------------------------------------------------
     Ombres froides, teintees graphite : jamais de noir pur diffus.        */
  --gm-shadow-xs: 0 1px 2px rgba(7, 9, 11, 0.05);
  --gm-shadow-sm: 0 1px 3px rgba(7, 9, 11, 0.07), 0 1px 2px rgba(7, 9, 11, 0.04);
  --gm-shadow-md: 0 4px 12px rgba(7, 9, 11, 0.08), 0 2px 4px rgba(7, 9, 11, 0.04);
  --gm-shadow-lg: 0 12px 32px rgba(7, 9, 11, 0.10), 0 4px 8px rgba(7, 9, 11, 0.04);
  --gm-shadow-xl: 0 24px 64px rgba(7, 9, 11, 0.14), 0 8px 16px rgba(7, 9, 11, 0.05);

  /* ---- Mouvement --------------------------------------------------------
     Courbes sobres. Aucune animation ne conditionne l acces au contenu.   */
  --gm-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --gm-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --gm-ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
  --gm-dur-fast:   140ms;
  --gm-dur-base:   240ms;
  --gm-dur-slow:   420ms;
  --gm-dur-reveal: 640ms;

  /* ---- Couches ---------------------------------------------------------- */
  --gm-z-base:    1;
  --gm-z-sticky:  100;
  --gm-z-header:  200;
  --gm-z-compare: 300;
  --gm-z-overlay: 400;
  --gm-z-modal:   500;
  --gm-z-toast:   600;
  --gm-z-skip:    700;

  --gm-header-h: 68px;
}

/* ---- Mode sombre -------------------------------------------------------
   Declare en roles uniquement : aucune couleur n a sa seule definition
   ici, l echelle de base reste la source de verite.                      */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gm-bg:             var(--gm-ink);
    --gm-bg-subtle:      var(--gm-graphite-900);
    --gm-bg-inset:       var(--gm-graphite-800);
    --gm-surface:        var(--gm-graphite-900);
    --gm-surface-raised: var(--gm-graphite-800);
    --gm-text:           var(--gm-graphite-50);
    --gm-text-muted:     var(--gm-graphite-300);
    --gm-text-faint:     var(--gm-graphite-400);
    --gm-text-invert:    var(--gm-ink);
    --gm-border:         var(--gm-graphite-700);
    --gm-border-strong:  var(--gm-graphite-600);
    --gm-accent:         var(--gm-blue-400);
    --gm-accent-hover:   var(--gm-blue-200);
    --gm-accent-soft:    rgba(28, 111, 240, 0.14);
    --gm-focus:          var(--gm-blue-400);

    --gm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --gm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --gm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --gm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --gm-bg:             var(--gm-ink);
  --gm-bg-subtle:      var(--gm-graphite-900);
  --gm-bg-inset:       var(--gm-graphite-800);
  --gm-surface:        var(--gm-graphite-900);
  --gm-surface-raised: var(--gm-graphite-800);
  --gm-text:           var(--gm-graphite-50);
  --gm-text-muted:     var(--gm-graphite-300);
  --gm-text-faint:     var(--gm-graphite-400);
  --gm-text-invert:    var(--gm-ink);
  --gm-border:         var(--gm-graphite-700);
  --gm-border-strong:  var(--gm-graphite-600);
  --gm-accent:         var(--gm-blue-400);
  --gm-accent-hover:   var(--gm-blue-200);
  --gm-accent-soft:    rgba(28, 111, 240, 0.14);
  --gm-focus:          var(--gm-blue-400);

  --gm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --gm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --gm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --gm-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
}

/* Zone toujours sombre (heros, footer) : roles forces, independants du theme */
.gm-on-dark {
  --gm-bg:             var(--gm-ink);
  --gm-bg-subtle:      var(--gm-graphite-900);
  --gm-surface:        var(--gm-graphite-800);
  --gm-surface-raised: var(--gm-graphite-700);
  --gm-text:           var(--gm-white);
  --gm-text-muted:     var(--gm-graphite-300);
  --gm-text-faint:     var(--gm-graphite-400);
  --gm-border:         rgba(255, 255, 255, 0.14);
  --gm-border-strong:  rgba(255, 255, 255, 0.26);
  --gm-accent:         var(--gm-blue-400);
  --gm-accent-hover:   var(--gm-blue-200);
  --gm-accent-soft:    rgba(28, 111, 240, 0.18);
  --gm-focus:          var(--gm-blue-400);
  color: var(--gm-text);
}

/* assets/css/base.css */
/* ==========================================================================
   Garmin.ma - Reset, typographie de base, accessibilite
   Cible : WCAG 2.2 AA. Focus visible partout, mouvement optionnel.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le header colle en haut : les ancres ne doivent pas passer dessous. */
  scroll-padding-top: calc(var(--gm-header-h) + var(--gm-space-4));
}

body {
  margin: 0;
  background: var(--gm-bg);
  color: var(--gm-text);
  font-family: var(--gm-font-text);
  font-size: var(--gm-text-base);
  line-height: var(--gm-leading-base);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Aucune page ne doit defiler horizontalement (cf. contrainte responsive) */
  overflow-x: clip;
}

/* ---- Titres ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--gm-font-display);
  font-weight: 700;
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-tight);
  text-wrap: balance;
  color: var(--gm-text);
}

h1 { font-size: var(--gm-text-4xl); }
h2 { font-size: var(--gm-text-3xl); }
h3 { font-size: var(--gm-text-2xl); letter-spacing: var(--gm-tracking-snug); }
h4 { font-size: var(--gm-text-xl); letter-spacing: var(--gm-tracking-snug); }
h5 { font-size: var(--gm-text-lg); letter-spacing: 0; }
h6 { font-size: var(--gm-text-base); letter-spacing: 0; }

p, ul, ol, dl, blockquote, figure, table, pre {
  margin: 0 0 var(--gm-space-4);
}
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Texte long : mesure limitee, veuves evitees */
.gm-prose > p,
.gm-prose > ul,
.gm-prose > ol {
  max-width: var(--gm-max-prose);
  text-wrap: pretty;
}

small { font-size: var(--gm-text-sm); }

strong, b { font-weight: 650; }

/* ---- Liens -------------------------------------------------------------- */

a {
  color: var(--gm-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--gm-dur-fast) var(--gm-ease-out);
}
a:hover { color: var(--gm-accent-hover); }

/* ---- Media -------------------------------------------------------------- */

img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video {
  height: auto;
  /* Evite le CLS quand les dimensions intrinseques manquent */
  background-color: var(--gm-bg-inset);
}
svg { fill: currentColor; }

/* ---- Formulaires -------------------------------------------------------- */

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { cursor: pointer; background: none; border: none; padding: 0; }
textarea { resize: vertical; }

/* Cibles tactiles confortables (WCAG 2.2 - 2.5.8 Target Size minimum) */
button, [role="button"], a.gm-btn, input[type="submit"], summary {
  min-height: 44px;
}
/* Les liens en pleine phrase gardent leur hauteur naturelle */
.gm-prose a, nav a { min-height: 0; }

/* ---- Tableaux ----------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 650; }

/* Les tableaux larges (fiches techniques, comparateur) defilent seuls */
.gm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Chiffres alignes dans les donnees techniques */
.gm-tabular { font-variant-numeric: tabular-nums; }

/* ---- Code --------------------------------------------------------------- */

code, kbd, samp, pre { font-family: var(--gm-font-mono); font-size: 0.92em; }
pre { overflow-x: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--gm-border);
  margin: var(--gm-space-7) 0;
}

/* ==========================================================================
   Accessibilite
   ========================================================================== */

/* Focus : anneau visible sur tous fonds, jamais supprime sans remplacement */
:focus-visible {
  outline: 2px solid var(--gm-focus);
  outline-offset: 3px;
  border-radius: var(--gm-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Masquage visuel sans perte pour les lecteurs d ecran */
.gm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d evitement : invisible jusqu au focus clavier */
.gm-skip-link {
  position: absolute;
  top: var(--gm-space-2);
  left: var(--gm-space-2);
  z-index: var(--gm-z-skip);
  padding: var(--gm-space-3) var(--gm-space-5);
  background: var(--gm-accent);
  color: var(--gm-white);
  font-weight: 600;
  border-radius: var(--gm-radius-sm);
  box-shadow: var(--gm-shadow-lg);
  transform: translateY(calc(-100% - var(--gm-space-4)));
  transition: transform var(--gm-dur-base) var(--gm-ease-out);
}
.gm-skip-link:focus { transform: translateY(0); color: var(--gm-white); }

/* ---- Mouvement reduit ---------------------------------------------------
   Le contenu reste integralement accessible : les reveals passent a
   l etat final, ils ne sont pas seulement ralentis.                       */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-gm-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .gm-parallax { transform: none !important; }
}

/* ---- Icones --------------------------------------------------------------
   Primitive, pas composant : une icone n'a ni couleur ni marge propre. Elle
   se dimensionne sur la taille du texte qui l'accompagne et en herite la
   couleur, donc elle suit le mode sombre et les etats de survol sans une
   seule regle de plus.

   flex-shrink: 0 parce que dans un .gm-cluster ou une puce de filtre, une
   icone ecrasee par un libelle long devient illisible avant lui.          */

.gm-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  color: inherit;
}

/* Un trait fixe de 1.8 sur une icone agrandie devient lourd ; a 1em il est
   juste. On l'allege quand l'icone grandit.                               */
.gm-icon--lg { width: 1.5em; height: 1.5em; stroke-width: 1.6; }
.gm-icon--xl { width: 2em; height: 2em; stroke-width: 1.4; }

/* ---- Contraste force (Windows) ------------------------------------------ */
@media (forced-colors: active) {
  .gm-btn { border: 1px solid ButtonText; }
  :focus-visible { outline: 2px solid Highlight; }

  /* En contraste force, une icone qui herite d'une couleur systeme peut
     disparaitre sur son propre fond : on la force sur la couleur du texte. */
  .gm-icon { color: CanvasText; }
}

/* ---- Impression --------------------------------------------------------- */
@media print {
  .gm-header, .gm-footer, .gm-compare-bar, .gm-skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* assets/css/layout.css */
/* ==========================================================================
   Garmin.ma - Mise en page : conteneurs, sections, grilles, motifs
   ========================================================================== */

/* ---- Conteneurs ---------------------------------------------------------
   La gouttiere est portee par le conteneur, jamais par body : les zones
   pleine largeur (heros, bandes sombres) restent affleurantes.            */

.gm-container {
  width: 100%;
  max-width: calc(var(--gm-max-width) + var(--gm-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}

.gm-container--wide {
  max-width: calc(var(--gm-max-width-wide) + var(--gm-gutter) * 2);
}

.gm-container--prose {
  max-width: calc(var(--gm-max-prose) + var(--gm-gutter) * 2);
}

/* ---- Sections ------------------------------------------------------------ */

.gm-section {
  padding-block: var(--gm-section-y);
}
.gm-section--tight { padding-block: calc(var(--gm-section-y) * 0.55); }
.gm-section--flush-top { padding-block-start: 0; }

.gm-section--subtle { background: var(--gm-bg-subtle); }
.gm-section--dark {
  background: var(--gm-ink);
  /* .gm-on-dark porte les roles ; cette classe ne fait que le fond */
}

/* Filet de separation discret entre deux sections de meme fond */
.gm-section--ruled { border-top: 1px solid var(--gm-border); }

/* ---- En-tete de section --------------------------------------------------
   Surtitre + titre + chapo. Hierarchie constante sur tout le site.       */

.gm-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-3);
  margin-bottom: var(--gm-space-7);
  max-width: 62ch;
}

.gm-section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gm-space-5);
  max-width: none;
}
.gm-section-head--split > .gm-section-head__text { max-width: 62ch; }

@media (max-width: 720px) {
  .gm-section-head--split {
    flex-direction: column;
    align-items: flex-start;
  }
}

.gm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-accent);
}
/* Trait court devant le surtitre : signature graphique du site */
.gm-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}

.gm-section-lead {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-text-muted);
  text-wrap: pretty;
}

/* ---- Grilles -------------------------------------------------------------
   Auto-fit : aucune media query necessaire, jamais de min-width
   superieure a l ecran.                                                   */

.gm-grid {
  display: grid;
  gap: var(--gm-space-5);
}

.gm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.gm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.gm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* Grille editoriale : un element mis en avant + le reste */
.gm-grid--feature {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
@media (min-width: 900px) {
  .gm-grid--feature > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---- Pile verticale generique ------------------------------------------- */
.gm-stack { display: flex; flex-direction: column; gap: var(--gm-space-4); }
.gm-stack--sm { gap: var(--gm-space-2); }
.gm-stack--lg { gap: var(--gm-space-6); }

.gm-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-3);
}

/* ==========================================================================
   Motif topographique
   Courbes de niveau en SVG inline (data URI) : aucun fichier a charger,
   aucune requete reseau. Discret par construction.
   ========================================================================== */

.gm-topo {
  position: relative;
  isolation: isolate;
}

.gm-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--gm-topo-opacity, 0.055);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.1'%3E%3Cpath d='M-40 300C60 250 120 180 220 190s160 90 260 60 140-90 200-70'/%3E%3Cpath d='M-40 340C70 288 130 220 230 232s158 88 258 58 138-88 198-66'/%3E%3Cpath d='M-40 382C80 326 140 262 240 276s156 86 256 56 136-86 196-62'/%3E%3Cpath d='M-40 426C90 366 150 306 250 322s154 84 254 54 134-84 194-58'/%3E%3Cpath d='M-40 472C100 408 160 352 260 370s152 82 252 52 132-82 192-54'/%3E%3Cpath d='M-40 138C50 104 108 52 208 62s150 74 250 48 142-72 202-54'/%3E%3Cpath d='M-40 182C58 142 116 92 216 104s148 72 248 46 140-70 200-52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
  background-repeat: repeat;
  /* Le motif s efface sur les bords : pas de coupure franche */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
}

/* Sur fond clair, les courbes doivent etre sombres */
.gm-topo--light::before {
  opacity: var(--gm-topo-opacity, 0.05);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23212931' stroke-width='1.1'%3E%3Cpath d='M-40 300C60 250 120 180 220 190s160 90 260 60 140-90 200-70'/%3E%3Cpath d='M-40 340C70 288 130 220 230 232s158 88 258 58 138-88 198-66'/%3E%3Cpath d='M-40 382C80 326 140 262 240 276s156 86 256 56 136-86 196-62'/%3E%3Cpath d='M-40 426C90 366 150 306 250 322s154 84 254 54 134-84 194-58'/%3E%3Cpath d='M-40 472C100 408 160 352 260 370s152 82 252 52 132-82 192-54'/%3E%3Cpath d='M-40 138C50 104 108 52 208 62s150 74 250 48 142-72 202-54'/%3E%3Cpath d='M-40 182C58 142 116 92 216 104s148 72 248 46 140-70 200-52'/%3E%3C/g%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  .gm-topo::before { display: none; }
}

/* ==========================================================================
   Reveal au defilement
   Etat initial discret ; JS ajoute [data-gm-reveal="in"].
   Sans JS, une regle de repli garantit la visibilite (cf. assets.php).
   ========================================================================== */

[data-gm-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--gm-dur-reveal) var(--gm-ease-entry),
    transform var(--gm-dur-reveal) var(--gm-ease-entry);
  /* Ne pas promouvoir en couche de maniere permanente : cout memoire */
  will-change: opacity, transform;
}
[data-gm-reveal="in"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Decalage en cascade pour les listes d elements */
[data-gm-reveal][style*="--gm-delay"] { transition-delay: var(--gm-delay, 0ms); }

/* assets/css/components/brand.css */
/* ==========================================================================
   Garmin.ma - Bloc de marque
   --------------------------------------------------------------------------
   Composition typographique provisoire : aucun fichier de logo Garmin dont
   les conditions d usage soient verifiees n est disponible a ce jour.
   Ce bloc n est PAS un logo officiel et ne doit pas etre presente comme tel.

   Parti pris visuel : registre editorial, pas registre applicatif. Le bloc
   se lit comme le cartouche d un titre de presse — filet fin, capitales
   espacees, hierarchie par la graisse plutot que par des pastilles.

   Regles structurelles (non negociables) :
     1. Le mot-symbole n apparait JAMAIS seul : la mention communautaire fait
        partie du bloc, pas d une decoration optionnelle.
     2. "COMMUNAUTE MAROC" conserve une taille lisible a tous les breakpoints.
     3. La mention d independance est adjacente au bloc dans le header.

   Remplacement : si un fichier de marque autorise devient disponible, seul
   .gm-brand__mark change (voir inc/brand.php, garminma_brand_lockup()).
   ========================================================================== */

.gm-brand {
  --gm-brand-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--gm-brand-size) * 0.55);
  padding: calc(var(--gm-brand-size) * 0.18);
  margin: calc(var(--gm-brand-size) * -0.18);
  text-decoration: none;
  color: var(--gm-text);
  border-radius: var(--gm-radius-sm);
}
.gm-brand:hover { color: var(--gm-text); }

/* ---- Marque graphique ---------------------------------------------------
   Sommet et releve d altitude. Dessine en SVG inline : vectoriel, sans
   requete, teinte par currentColor.                                       */

.gm-brand__mark {
  flex: none;
  width: calc(var(--gm-brand-size) * 1.42);
  height: calc(var(--gm-brand-size) * 1.42);
  color: var(--gm-accent);
  transition: transform var(--gm-dur-slow) var(--gm-ease-out);
}
.gm-brand:hover .gm-brand__mark { transform: translateY(-2px) scale(1.03); }

/* ---- Composition typographique ------------------------------------------ */

.gm-brand__lockup {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gm-brand-size) * 0.14);
  line-height: 1;
}

.gm-brand__wordmark {
  font-family: var(--gm-font-display);
  font-size: var(--gm-brand-size);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 0.9;
  color: var(--gm-text);
  white-space: nowrap;
}

.gm-brand__tld {
  color: var(--gm-accent);
  font-weight: 700;
}

/* Mention communautaire : capitales espacees precedees d un filet, a la
   maniere d une sur-titraille de presse. Proportion minimale 36 % du
   mot-symbole, avec plancher en pixels. */
.gm-brand__community {
  display: flex;
  align-items: center;
  gap: calc(var(--gm-brand-size) * 0.3);
  font-family: var(--gm-font-display);
  font-size: max(0.625rem, calc(var(--gm-brand-size) * 0.36));
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-text-muted);
  white-space: nowrap;
}

.gm-brand__community::before {
  content: "";
  flex: none;
  width: calc(var(--gm-brand-size) * 0.5);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: width var(--gm-dur-slow) var(--gm-ease-out);
}
.gm-brand:hover .gm-brand__community::before { width: calc(var(--gm-brand-size) * 0.85); }

/* ---- Declinaisons de taille --------------------------------------------- */

.gm-brand--sm { --gm-brand-size: 1.1875rem; }
.gm-brand--lg { --gm-brand-size: 2.125rem; }
.gm-brand--xl { --gm-brand-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); }

@media (max-width: 420px) {
  .gm-brand { --gm-brand-size: 1.125rem; gap: var(--gm-space-2); }
  .gm-brand__community { letter-spacing: 0.16em; }
  .gm-brand__community::before { display: none; }
}

.gm-on-dark .gm-brand__wordmark { color: var(--gm-white); }
.gm-on-dark .gm-brand__community { color: var(--gm-graphite-400); }

/* ==========================================================================
   Mention d independance

   Exigence editoriale : comprehensible immediatement, jamais dissimulee.
   Traitement en "dateline" — filet vertical + capitales fines — plutot
   qu en pastille : la pastille est le signe visuel du gabarit generique,
   et elle fait lire l information comme un badge decoratif alors qu il
   s agit d une declaration.
   ========================================================================== */

.gm-independent {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-left: 0.7rem;
  font-family: var(--gm-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--gm-text-muted);
  border-left: 2px solid var(--gm-amber-500);
  background: none;
  border-radius: 0;
  white-space: nowrap;
}

/* Le point d appel disparait : le filet vertical porte deja le signal. */
.gm-independent__dot { display: none; }

.gm-on-dark .gm-independent {
  color: var(--gm-graphite-300);
  border-left-color: var(--gm-amber-500);
}

/* Variante compacte du header : forme courte affichee, phrase complete
   conservee dans le DOM et dans le libelle accessible. */
.gm-independent--compact { display: none; }
.gm-independent--compact .gm-independent__long { display: none; }

@media (min-width: 760px) {
  .gm-independent--compact { display: inline-flex; }
}

/* ---- Declaration deployee ------------------------------------------------
   Utilisee dans le heros et le pied de page, ou la place existe. */

.gm-independent--block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  white-space: normal;
  max-width: 34ch;
  text-wrap: pretty;
}

/* ==========================================================================
   Clause complete
   ========================================================================== */

.gm-disclaimer {
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-base);
  color: var(--gm-text-muted);
  max-width: 78ch;
  text-wrap: pretty;
}
.gm-disclaimer strong { color: var(--gm-text); font-weight: 650; }

/* ==========================================================================
   Filets editoriaux
   Signature graphique transversale : double filet fin, emprunte a la
   composition de presse. Utilise pour separer les grands blocs.
   ========================================================================== */

.gm-rule {
  border: 0;
  height: 3px;
  margin: 0;
  background:
    linear-gradient(var(--gm-text) 0 0) top / 100% 1px no-repeat,
    linear-gradient(var(--gm-border) 0 0) bottom / 100% 1px no-repeat;
  opacity: 0.85;
}

.gm-on-dark .gm-rule {
  background:
    linear-gradient(rgba(255, 255, 255, 0.5) 0 0) top / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.14) 0 0) bottom / 100% 1px no-repeat;
}

/* assets/css/components/button.css */
/* ==========================================================================
   Garmin.ma - Boutons et liens d action
   ========================================================================== */

.gm-btn {
  --gm-btn-bg: var(--gm-accent);
  --gm-btn-fg: var(--gm-white);
  --gm-btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-space-2);
  padding: 0.8125rem 1.5rem;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gm-btn-fg);
  background: var(--gm-btn-bg);
  border: 1px solid var(--gm-btn-bd);
  border-radius: var(--gm-radius-sm);
  transition:
    background-color var(--gm-dur-fast) var(--gm-ease-out),
    border-color var(--gm-dur-fast) var(--gm-ease-out),
    color var(--gm-dur-fast) var(--gm-ease-out),
    transform var(--gm-dur-fast) var(--gm-ease-out),
    box-shadow var(--gm-dur-base) var(--gm-ease-out);
}

.gm-btn:hover {
  color: var(--gm-btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--gm-shadow-md);
}
.gm-btn:active { transform: translateY(0); box-shadow: var(--gm-shadow-xs); }

.gm-btn[aria-disabled="true"],
.gm-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---- Variantes ----------------------------------------------------------- */

.gm-btn--primary:hover { --gm-btn-bg: var(--gm-accent-hover); }

.gm-btn--secondary {
  --gm-btn-bg: transparent;
  --gm-btn-fg: var(--gm-text);
  --gm-btn-bd: var(--gm-border-strong);
}
.gm-btn--secondary:hover {
  --gm-btn-bg: var(--gm-bg-subtle);
  --gm-btn-bd: var(--gm-text-faint);
}

.gm-btn--ghost {
  --gm-btn-bg: transparent;
  --gm-btn-fg: var(--gm-text);
  --gm-btn-bd: transparent;
}
.gm-btn--ghost:hover { --gm-btn-bg: var(--gm-bg-subtle); box-shadow: none; }

/* Sur fond sombre, la variante secondaire garde un contraste suffisant
   grace aux roles redefinis par .gm-on-dark (bordure a 26% de blanc). */
.gm-on-dark .gm-btn--secondary { --gm-btn-fg: var(--gm-white); }
.gm-on-dark .gm-btn--secondary:hover { --gm-btn-bg: rgba(255, 255, 255, 0.1); }

/* ---- Tailles -------------------------------------------------------------- */

.gm-btn--lg {
  padding: 1rem 1.875rem;
  font-size: var(--gm-text-base);
}

.gm-btn--sm {
  padding: 0.5rem 0.875rem;
  font-size: var(--gm-text-xs);
  min-height: 36px;
}

.gm-btn--block { width: 100%; }

/* ---- Icone --------------------------------------------------------------- */

.gm-btn__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--gm-dur-base) var(--gm-ease-out);
}
.gm-btn:hover .gm-btn__icon--forward { transform: translateX(3px); }

/* ==========================================================================
   Lien flechee - navigation editoriale discrete
   ========================================================================== */

.gm-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gm-accent);
  text-decoration: none;
}
.gm-link-arrow::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  transition: transform var(--gm-dur-base) var(--gm-ease-out);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gm-link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   Etiquettes de statut
   Vocabulaire editorial du projet : l etat d une donnee est toujours
   explicite, jamais devine par le lecteur.
   ========================================================================== */

.gm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  line-height: 1.35;
  border-radius: var(--gm-radius-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}

.gm-tag--verified {
  color: var(--gm-green-500);
  background: color-mix(in srgb, var(--gm-green-500) 10%, transparent);
  border-color: color-mix(in srgb, var(--gm-green-500) 28%, transparent);
}

.gm-tag--unverified {
  color: var(--gm-amber-500);
  background: color-mix(in srgb, var(--gm-amber-500) 10%, transparent);
  border-color: color-mix(in srgb, var(--gm-amber-500) 30%, transparent);
}

.gm-tag--neutral {
  color: var(--gm-text-muted);
  background: var(--gm-bg-subtle);
  border-color: var(--gm-border);
}

.gm-tag--accent {
  color: var(--gm-accent);
  background: var(--gm-accent-soft);
  border-color: color-mix(in srgb, var(--gm-accent) 26%, transparent);
}

/* assets/css/components/header.css */
/* ==========================================================================
   Garmin.ma - En-tete sticky, mega-menu, navigation mobile
   ========================================================================== */

.gm-header {
  position: sticky;
  top: 0;
  z-index: var(--gm-z-header);
  background: color-mix(in srgb, var(--gm-bg) 88%, transparent);
  border-bottom: 1px solid transparent;
  /* Flou leger et localise : lisibilite du header au defilement, pas un
     effet de verre generalise sur l interface. */
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition:
    border-color var(--gm-dur-base) var(--gm-ease-out),
    box-shadow var(--gm-dur-base) var(--gm-ease-out),
    background-color var(--gm-dur-base) var(--gm-ease-out);
}

@supports not (backdrop-filter: blur(1px)) {
  .gm-header { background: var(--gm-bg); }
}

/* Etat pose : le filet et l ombre n apparaissent qu apres defilement */
.gm-header[data-gm-stuck="true"] {
  border-bottom-color: var(--gm-border);
  box-shadow: var(--gm-shadow-sm);
}

.gm-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gm-space-4);
  min-height: var(--gm-header-h);
  padding-block: var(--gm-space-2);
}

/* Le bloc de marque ne se comprime jamais : c est l element identitaire.
   Ce sont la navigation et la recherche qui cedent de la place. */
.gm-header__brand {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  flex: none;
}

.gm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gm-space-2);
  margin-inline-start: auto;
  flex: none;
}

/* ==========================================================================
   Navigation de bureau
   ========================================================================== */

.gm-nav { display: none; }

@media (min-width: 1024px) {
  .gm-nav {
    display: block;
    margin-inline-start: var(--gm-space-4);
    /* min-width:0 autorise la compression ; sans lui, une barre chargee
       laisserait la navigation deborder sur les actions de droite. */
    min-width: 0;
  }
}

.gm-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gm-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Filet de securite : si un libelle de menu s allonge (traduction, ajout
     de rubrique), la liste se comprime au lieu de chevaucher la recherche. */
  min-width: 0;
  flex-wrap: nowrap;
}

.gm-nav__link { overflow: hidden; text-overflow: ellipsis; }

.gm-nav__item {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

.gm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 600;
  color: var(--gm-text);
  text-decoration: none;
  border-radius: var(--gm-radius-sm);
  transition:
    color var(--gm-dur-fast) var(--gm-ease-out),
    background-color var(--gm-dur-fast) var(--gm-ease-out);
}
.gm-nav__link:hover,
.gm-nav__item[data-gm-open="true"] > .gm-nav__link {
  color: var(--gm-accent);
  background: var(--gm-bg-subtle);
}

/* Page courante : soulignement plein, pas seulement une nuance de couleur
   (le repere ne doit pas reposer uniquement sur la teinte). */
.gm-nav__item--current > .gm-nav__link { color: var(--gm-accent); }
.gm-nav__item--current > .gm-nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* Chevron des entrees a sous-menu */
.gm-nav__caret {
  width: 0.7em;
  height: 0.7em;
  flex: none;
  opacity: 0.6;
  transition: transform var(--gm-dur-base) var(--gm-ease-out);
}
.gm-nav__item[data-gm-open="true"] .gm-nav__caret { transform: rotate(180deg); }

/* ==========================================================================
   Mega-menu (bureau uniquement)
   Ferme par defaut, ouvert au survol ou au clavier. Jamais indispensable :
   chaque entree de premier niveau reste un lien fonctionnel.
   ========================================================================== */

.gm-mega {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(46rem, calc(100vw - var(--gm-gutter) * 2));
  padding: var(--gm-space-5);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-xl);

  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition:
    opacity var(--gm-dur-base) var(--gm-ease-out),
    transform var(--gm-dur-base) var(--gm-ease-out),
    visibility 0s linear var(--gm-dur-base);
}

.gm-nav__item[data-gm-open="true"] > .gm-mega {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.gm-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-mega__heading {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
  margin-bottom: var(--gm-space-3);
}

.gm-mega__list { margin: 0; padding: 0; list-style: none; }

.gm-mega__link {
  display: block;
  padding: 0.5rem 0.625rem;
  margin-inline: -0.625rem;
  font-size: var(--gm-text-sm);
  font-weight: 500;
  color: var(--gm-text);
  text-decoration: none;
  border-radius: var(--gm-radius-sm);
  transition: background-color var(--gm-dur-fast) var(--gm-ease-out);
}
.gm-mega__link:hover { background: var(--gm-bg-subtle); color: var(--gm-accent); }

.gm-mega__desc {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--gm-font-text);
  font-size: var(--gm-text-xs);
  font-weight: 400;
  color: var(--gm-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Boutons d action du header
   ========================================================================== */

.gm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--gm-text);
  border: 1px solid transparent;
  border-radius: var(--gm-radius-sm);
  transition:
    background-color var(--gm-dur-fast) var(--gm-ease-out),
    border-color var(--gm-dur-fast) var(--gm-ease-out),
    color var(--gm-dur-fast) var(--gm-ease-out);
}
.gm-icon-btn:hover {
  background: var(--gm-bg-subtle);
  border-color: var(--gm-border);
  color: var(--gm-accent);
}
.gm-icon-btn svg { width: 20px; height: 20px; }

/* Recherche : forme de champ sur grand ecran, icone seule en dessous */
.gm-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-3);
  height: 40px;
  padding-inline: 0.75rem;
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm);
  min-height: 40px;
}
.gm-search-trigger:hover { border-color: var(--gm-border-strong); color: var(--gm-text); }
.gm-search-trigger__label { display: none; }
.gm-search-trigger__kbd {
  display: none;
  padding: 0.1rem 0.35rem;
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  color: var(--gm-text-faint);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-xs);
}

/* Le champ de recherche ne prend sa forme longue que lorsqu il reste
   reellement de la place, sinon il pousse le CTA hors de l ecran. */
@media (min-width: 1440px) {
  .gm-search-trigger { min-width: 11rem; }
  .gm-search-trigger__label { display: block; margin-inline-end: auto; }
  .gm-search-trigger__kbd { display: block; }
}

.gm-header__cta { display: none; }
@media (min-width: 1280px) { .gm-header__cta { display: inline-flex; } }

/* ==========================================================================
   Navigation mobile
   Panneau plein ecran sous le header. Ouvert/ferme par [aria-expanded].
   ========================================================================== */

.gm-nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .gm-nav-toggle { display: none; } }

/* Icone hamburger -> croix, dessinee en trois traits */
.gm-nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
  flex: none;
}
.gm-nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform var(--gm-dur-base) var(--gm-ease-inout),
    opacity var(--gm-dur-fast) linear;
}
.gm-nav-toggle__bars span:nth-child(1) { top: 0; }
.gm-nav-toggle__bars span:nth-child(2) { top: 6px; }
.gm-nav-toggle__bars span:nth-child(3) { top: 12px; }

.gm-nav-toggle[aria-expanded="true"] .gm-nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gm-nav-toggle[aria-expanded="true"] .gm-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.gm-nav-toggle[aria-expanded="true"] .gm-nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.gm-mobile-nav {
  position: fixed;
  inset: var(--gm-header-h) 0 0;
  z-index: var(--gm-z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gm-space-5) var(--gm-gutter) var(--gm-space-10);
  background: var(--gm-bg);
  border-top: 1px solid var(--gm-border);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--gm-dur-base) var(--gm-ease-out),
    transform var(--gm-dur-base) var(--gm-ease-out),
    visibility 0s linear var(--gm-dur-base);
}

.gm-mobile-nav[data-gm-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (min-width: 1024px) {
  .gm-mobile-nav { display: none; }
}

.gm-mobile-nav__list { margin: 0; padding: 0; list-style: none; }

.gm-mobile-nav__link {
  display: block;
  padding: var(--gm-space-4) 0;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-lg);
  font-weight: 700;
  color: var(--gm-text);
  text-decoration: none;
  border-bottom: 1px solid var(--gm-border);
}
.gm-mobile-nav__link:hover { color: var(--gm-accent); }

/* Sous-niveau : replie dans un <details>, sans JavaScript requis */
.gm-mobile-nav__group { border-bottom: 1px solid var(--gm-border); }
.gm-mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-space-3);
  padding: var(--gm-space-4) 0;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-lg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.gm-mobile-nav__summary::-webkit-details-marker { display: none; }
.gm-mobile-nav__summary .gm-nav__caret { width: 1em; height: 1em; opacity: 0.55; }
.gm-mobile-nav__group[open] .gm-mobile-nav__summary { color: var(--gm-accent); }
.gm-mobile-nav__group[open] .gm-nav__caret { transform: rotate(180deg); }

.gm-mobile-nav__sublist {
  margin: 0 0 var(--gm-space-3);
  padding: 0 0 0 var(--gm-space-4);
  list-style: none;
  border-left: 2px solid var(--gm-border);
}
.gm-mobile-nav__sublink {
  display: block;
  padding: var(--gm-space-3) 0;
  font-size: var(--gm-text-base);
  color: var(--gm-text-muted);
  text-decoration: none;
}
.gm-mobile-nav__sublink:hover { color: var(--gm-accent); }

.gm-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-3);
  margin-top: var(--gm-space-7);
}

/* Empeche le defilement de l arriere-plan quand le panneau est ouvert */
.gm-scroll-locked { overflow: hidden; }

/* assets/css/components/footer.css */
/* ==========================================================================
   Garmin.ma - Pied de page
   Porte la clause d independance complete : zone a fort trafic de lecture,
   jamais reduite a une ligne de mentions minuscules.
   ========================================================================== */

.gm-footer {
  position: relative;
  isolation: isolate;
  background: var(--gm-ink);
  padding-block: var(--gm-space-10) var(--gm-space-6);
  margin-top: var(--gm-section-y);
}

.gm-footer__top {
  display: grid;
  gap: var(--gm-space-8);
  padding-bottom: var(--gm-space-8);
  border-bottom: 1px solid var(--gm-border);
}

@media (min-width: 880px) {
  .gm-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: var(--gm-space-9);
  }
}

.gm-footer__identity {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-4);
  align-items: flex-start;
}

.gm-footer__signature {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-graphite-400);
}

/* ---- Colonnes de liens --------------------------------------------------- */

.gm-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--gm-space-6);
}

.gm-footer__heading {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-graphite-400);
  margin-bottom: var(--gm-space-3);
}

.gm-footer__list { margin: 0; padding: 0; list-style: none; }
.gm-footer__list li + li { margin-top: 0.4rem; }

.gm-footer__link {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: var(--gm-text-sm);
  color: var(--gm-graphite-200);
  text-decoration: none;
  transition: color var(--gm-dur-fast) var(--gm-ease-out);
}
.gm-footer__link:hover { color: var(--gm-white); text-decoration: underline; }

/* ---- Clause d independance ----------------------------------------------- */

.gm-footer__disclaimer {
  padding-block: var(--gm-space-6);
  border-bottom: 1px solid var(--gm-border);
}

.gm-footer__disclaimer .gm-disclaimer { color: var(--gm-graphite-300); }
.gm-footer__disclaimer .gm-disclaimer strong { color: var(--gm-white); }

/* ---- Bas de page --------------------------------------------------------- */

.gm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-space-4);
  padding-top: var(--gm-space-6);
  font-size: var(--gm-text-xs);
  color: var(--gm-graphite-400);
}

.gm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2) var(--gm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gm-footer__legal a { color: var(--gm-graphite-300); text-decoration: none; }
.gm-footer__legal a:hover { color: var(--gm-white); text-decoration: underline; }

/* assets/css/components/hero.css */
/* ==========================================================================
   Garmin.ma - Heros d accueil et en-tetes de page
   ========================================================================== */

.gm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gm-ink);
  padding-block: clamp(3.5rem, 2rem + 7vw, 8rem) clamp(3rem, 1.8rem + 5.5vw, 6rem);
}

/* Couche de fond : photographie sportive plein cadre.
   Tant qu aucun visuel valide n est fourni, la couche reste absente et le
   heros repose sur le degrade graphite ci-dessous - jamais sur une image
   de remplacement presentee comme definitive. */
.gm-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.gm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gm-hero-focus, 50% 40%);
}

/* Voile de lisibilite : garantit le contraste du texte sur toute image.
   Degrade dirige pour preserver la profondeur du visuel a droite. */
.gm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg,
      rgba(7, 9, 11, 0.94) 0%,
      rgba(7, 9, 11, 0.86) 38%,
      rgba(7, 9, 11, 0.55) 68%,
      rgba(7, 9, 11, 0.38) 100%),
    radial-gradient(90% 70% at 18% 8%,
      rgba(28, 111, 240, 0.20) 0%,
      transparent 62%);
}

/* Sans image : le fond seul suffit et reste sobre */
.gm-hero:not(:has(.gm-hero__media)) .gm-hero__scrim {
  background:
    linear-gradient(160deg, var(--gm-graphite-900) 0%, var(--gm-ink) 62%),
    radial-gradient(85% 65% at 15% 5%, rgba(28, 111, 240, 0.22) 0%, transparent 60%);
}

.gm-hero__inner {
  position: relative;
  display: grid;
  gap: var(--gm-space-8);
  align-items: end;
}

/* La colonne laterale n existe que si le gabarit en fournit une : sans
   elle, le heros reste sur une seule colonne au lieu de laisser la moitie
   droite vide. */
@media (min-width: 1040px) {
  .gm-hero__inner:has(.gm-hero__aside) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--gm-space-9);
  }
}

/* La mesure est portee par les elements de texte, pas par le conteneur :
   le bandeau de reperes doit pouvoir s etendre sous le titre. */
.gm-hero__content { min-width: 0; }

.gm-hero__title {
  font-size: clamp(2.5rem, 1.75rem + 3.1vw, 4.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--gm-white);
  margin-block: var(--gm-space-5) var(--gm-space-5);
  max-width: 17ch;
  text-wrap: balance;
}

/* Deuxieme ligne du titre en accent : hierarchie sans changer de graisse */
.gm-hero__title em {
  font-style: normal;
  color: var(--gm-blue-400);
}

.gm-hero__lead {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-graphite-200);
  max-width: 46ch;
  text-wrap: pretty;
}

.gm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-space-3);
  margin-top: var(--gm-space-7);
}

@media (max-width: 460px) {
  .gm-hero__actions { flex-direction: column; align-items: stretch; }
  .gm-hero__actions .gm-btn { width: 100%; }
}

/* ---- Bandeau de reperes -------------------------------------------------
   Ce bandeau ne presente QUE des faits verifiables sur le site lui-meme
   (nombre d outils reellement livres, perimetre editorial). Aucune mesure
   d audience, aucun temoignage, aucun compteur de membres invente.       */

.gm-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gm-space-5);
  padding-top: var(--gm-space-6);
  margin-top: var(--gm-space-8);
  max-width: 60rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.gm-fact__value {
  display: block;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gm-white);
  font-variant-numeric: tabular-nums;
}

.gm-fact__label {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--gm-text-xs);
  line-height: 1.4;
  color: var(--gm-graphite-300);
  text-wrap: pretty;
}

/* ---- Carte laterale du heros -------------------------------------------- */

.gm-hero__aside {
  padding: var(--gm-space-6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--gm-radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   En-tete de page interieure
   ========================================================================== */

.gm-pagehead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) clamp(2rem, 1.4rem + 3vw, 3.5rem);
  background: var(--gm-bg-subtle);
  border-bottom: 1px solid var(--gm-border);
}

.gm-pagehead__title {
  font-size: var(--gm-text-4xl);
  margin-block: var(--gm-space-3) var(--gm-space-4);
  max-width: 22ch;
}

.gm-pagehead__lead {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---- Fil d Ariane -------------------------------------------------------- */

.gm-breadcrumb { font-size: var(--gm-text-sm); color: var(--gm-text-muted); }
.gm-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gm-breadcrumb__item { display: flex; align-items: center; gap: var(--gm-space-2); }
.gm-breadcrumb__item + .gm-breadcrumb__item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gm-text-faint);
  flex: none;
}
.gm-breadcrumb a { color: inherit; text-decoration: none; }
.gm-breadcrumb a:hover { color: var(--gm-accent); text-decoration: underline; }
.gm-breadcrumb [aria-current="page"] { color: var(--gm-text); font-weight: 600; }

/* assets/css/components/card.css */
/* ==========================================================================
   Garmin.ma - Cartes
   Trois familles distinctes, chacune avec sa propre hierarchie visuelle :
   editoriale (article), sport (entree par pratique), outil (utilitaire).
   Objectif explicite : eviter la repetition de cartes interchangeables.
   ========================================================================== */

.gm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  transition:
    border-color var(--gm-dur-base) var(--gm-ease-out),
    box-shadow var(--gm-dur-base) var(--gm-ease-out),
    transform var(--gm-dur-base) var(--gm-ease-out);
}

.gm-card:hover {
  border-color: var(--gm-border-strong);
  box-shadow: var(--gm-shadow-lg);
  transform: translateY(-3px);
}

/* Surface de clic etendue a toute la carte, sans imbriquer de liens :
   un seul lien reel, agrandi par pseudo-element. */
.gm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gm-card__link { text-decoration: none; color: inherit; }
.gm-card__link:hover { color: inherit; }

/* Les liens secondaires repassent au-dessus de la surface de clic */
.gm-card__meta a,
.gm-card__tags a { position: relative; z-index: 2; }

.gm-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gm-bg-inset);
  overflow: hidden;
}
.gm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gm-dur-slow) var(--gm-ease-out);
}
.gm-card:hover .gm-card__media img { transform: scale(1.035); }

.gm-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-3);
  padding: var(--gm-space-5);
  flex: 1;
}

.gm-card__title {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  letter-spacing: var(--gm-tracking-snug);
  text-wrap: balance;
}
.gm-card:hover .gm-card__title { color: var(--gm-accent); }

.gm-card__excerpt {
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-base);
  color: var(--gm-text-muted);
  text-wrap: pretty;
}

.gm-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2);
  margin-top: auto;
  padding-top: var(--gm-space-2);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-faint);
}
.gm-card__meta > * + *::before {
  content: "·";
  margin-inline-end: var(--gm-space-2);
  color: var(--gm-text-faint);
}

/* ---- Carte mise en avant (premier element d une grille feature) --------- */

.gm-card--feature .gm-card__media { aspect-ratio: 16 / 9; }
.gm-card--feature .gm-card__body { padding: var(--gm-space-6); gap: var(--gm-space-4); }
.gm-card--feature .gm-card__title { font-size: var(--gm-text-2xl); }
.gm-card--feature .gm-card__excerpt { font-size: var(--gm-text-base); }

/* ==========================================================================
   Entree par sport
   Format vertical, visuel dominant, libelle en surimpression.
   ========================================================================== */

.gm-sport {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  padding: var(--gm-space-5);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--gm-graphite-800);
  color: var(--gm-white);
  text-decoration: none;
  transition: transform var(--gm-dur-base) var(--gm-ease-out);
}
.gm-sport:hover { color: var(--gm-white); transform: translateY(-3px); }

.gm-sport__media { position: absolute; inset: 0; z-index: -2; }
.gm-sport__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gm-dur-slow) var(--gm-ease-out);
}
.gm-sport:hover .gm-sport__media img { transform: scale(1.06); }

.gm-sport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(7, 9, 11, 0.88) 0%,
    rgba(7, 9, 11, 0.45) 45%,
    rgba(7, 9, 11, 0.12) 100%);
  transition: opacity var(--gm-dur-base) var(--gm-ease-out);
}
.gm-sport:hover::before { opacity: 0.92; }

.gm-sport__label {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.gm-sport__count {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--gm-font-text);
  font-size: var(--gm-text-xs);
  font-weight: 400;
  color: var(--gm-graphite-300);
}

/* Trait d accent qui se deploie au survol */
.gm-sport__rule {
  position: absolute;
  left: var(--gm-space-5);
  bottom: 0;
  width: 2.25rem;
  height: 3px;
  background: var(--gm-blue-400);
  border-radius: 2px 2px 0 0;
  transition: width var(--gm-dur-base) var(--gm-ease-out);
}
.gm-sport:hover .gm-sport__rule { width: 4.5rem; }

/* ==========================================================================
   Carte outil
   Pas de visuel : l outil se decrit par sa fonction. Bordure accentuee a
   gauche pour la distinguer nettement des cartes editoriales.
   ========================================================================== */

.gm-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-3);
  padding: var(--gm-space-5) var(--gm-space-5) var(--gm-space-5) calc(var(--gm-space-5) + 3px);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-left: 3px solid var(--gm-accent);
  border-radius: var(--gm-radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--gm-dur-base) var(--gm-ease-out),
    transform var(--gm-dur-base) var(--gm-ease-out),
    border-color var(--gm-dur-base) var(--gm-ease-out);
}
.gm-tool:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--gm-shadow-md);
}

.gm-tool__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gm-space-3);
}

.gm-tool__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gm-accent);
}

.gm-tool__title {
  font-size: var(--gm-text-base);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-snug);
}
.gm-tool:hover .gm-tool__title { color: var(--gm-accent); }

.gm-tool__desc {
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-base);
  color: var(--gm-text-muted);
  text-wrap: pretty;
}

/* Un outil annonce mais pas encore livre est explicitement inactif :
   aucun bouton du site ne doit simuler une fonctionnalite. */
.gm-tool--planned {
  border-left-color: var(--gm-border-strong);
  background: var(--gm-bg-subtle);
  cursor: default;
}
.gm-tool--planned:hover { transform: none; box-shadow: none; }
.gm-tool--planned .gm-tool__icon { color: var(--gm-text-faint); }

/* ==========================================================================
   Etat vide
   Honnete par defaut : on annonce l absence de contenu, on ne la masque pas
   derriere des donnees de demonstration.
   ========================================================================== */

.gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gm-space-3);
  padding: var(--gm-space-9) var(--gm-space-5);
  text-align: center;
  background: var(--gm-bg-subtle);
  border: 1px dashed var(--gm-border-strong);
  border-radius: var(--gm-radius-lg);
}

.gm-empty__title { font-size: var(--gm-text-lg); }
.gm-empty__text {
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  max-width: 48ch;
  text-wrap: pretty;
}

/* assets/css/components/spec.css */
/* ==========================================================================
   Garmin.ma - Fiche d equipement
   La provenance de chaque donnee est visible sans interaction : c est la
   promesse editoriale du site, elle ne doit pas etre cachee dans une infobulle.
   ========================================================================== */

.gm-fiche {
  display: grid;
  gap: var(--gm-space-8);
  align-items: start;
}

@media (min-width: 1000px) {
  .gm-fiche {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--gm-space-9);
  }
}

.gm-fiche__aside { position: sticky; top: calc(var(--gm-header-h) + var(--gm-space-5)); }

/* ---- En-tete de fiche ---------------------------------------------------- */

.gm-fiche__variante {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-lg);
  font-weight: 600;
  color: var(--gm-text-muted);
  margin-top: var(--gm-space-2);
}

.gm-fiche__positionnement {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-text-muted);
  max-width: 62ch;
  margin-top: var(--gm-space-4);
  text-wrap: pretty;
}

/* ==========================================================================
   Verdict editorial
   Encadre distinct des tableaux techniques : le lecteur doit voir d un coup
   d oeil ou finissent les faits et ou commence le jugement.
   ========================================================================== */

.gm-verdict {
  display: grid;
  gap: var(--gm-space-6);
  padding: var(--gm-space-6);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
}

@media (min-width: 720px) {
  .gm-verdict { grid-template-columns: 1fr 1fr; }
}

.gm-verdict__title {
  display: flex;
  align-items: center;
  gap: var(--gm-space-2);
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-base);
  font-weight: 700;
  margin-bottom: var(--gm-space-3);
}

.gm-verdict__list { margin: 0; padding: 0; list-style: none; }

.gm-verdict__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--gm-space-2);
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-base);
  text-wrap: pretty;
}

.gm-verdict__list li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  font-weight: 700;
}

.gm-verdict__list--forts li::before { content: "+"; color: var(--gm-green-500); }
.gm-verdict__list--limites li::before { content: "−"; color: var(--gm-amber-500); }

/* Rappel permanent du statut editorial de ce bloc */
.gm-verdict__disclosure {
  grid-column: 1 / -1;
  padding-top: var(--gm-space-4);
  border-top: 1px solid var(--gm-border);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-muted);
}

/* ==========================================================================
   Tableaux de caracteristiques
   ========================================================================== */

.gm-specs { margin-top: var(--gm-space-8); }

.gm-specgroup { margin-bottom: var(--gm-space-7); }

.gm-specgroup__title {
  font-size: var(--gm-text-xl);
  padding-bottom: var(--gm-space-3);
  margin-bottom: var(--gm-space-4);
  border-bottom: 2px solid var(--gm-border-strong);
}

.gm-specgroup__intro {
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  margin-bottom: var(--gm-space-4);
  max-width: 68ch;
}

.gm-spectable { font-size: var(--gm-text-sm); }

.gm-spectable tr { border-bottom: 1px solid var(--gm-border); }
.gm-spectable tr:last-child { border-bottom: 0; }

.gm-spectable th {
  padding: var(--gm-space-3) var(--gm-space-4) var(--gm-space-3) 0;
  font-weight: 500;
  color: var(--gm-text-muted);
  vertical-align: top;
  width: 38%;
}

.gm-spectable td {
  padding: var(--gm-space-3) 0;
  vertical-align: top;
}

.gm-spec__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* Valeur absente : grisee et en graisse normale, pour ne pas se lire comme
   une donnee. */
.gm-spec__value--unknown {
  font-weight: 400;
  color: var(--gm-text-faint);
  font-style: italic;
}

.gm-spec__unit { font-weight: 400; color: var(--gm-text-muted); }

.gm-spec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2);
  margin-top: var(--gm-space-2);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-faint);
}

.gm-spec__source a { color: inherit; text-decoration: underline; }
.gm-spec__source a:hover { color: var(--gm-accent); }

/* ==========================================================================
   Prix releves
   ========================================================================== */

.gm-prices { margin-top: var(--gm-space-5); }

.gm-prices__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gm-space-2) var(--gm-space-4);
  padding: var(--gm-space-3) 0;
  border-bottom: 1px solid var(--gm-border);
}

.gm-prices__amount {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gm-prices__market { font-size: var(--gm-text-sm); color: var(--gm-text-muted); }

.gm-prices__meta {
  flex-basis: 100%;
  font-size: var(--gm-text-xs);
  color: var(--gm-text-faint);
}

/* Avertissement permanent : ni boutique, ni disponibilite locale garantie */
.gm-prices__notice {
  margin-top: var(--gm-space-4);
  padding: var(--gm-space-4);
  font-size: var(--gm-text-xs);
  line-height: var(--gm-leading-base);
  color: var(--gm-text-muted);
  background: var(--gm-bg-subtle);
  border-left: 3px solid var(--gm-amber-500);
  border-radius: var(--gm-radius-sm);
  text-wrap: pretty;
}

/* ==========================================================================
   Panneau lateral
   ========================================================================== */

.gm-fichebox {
  padding: var(--gm-space-5);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  margin-bottom: var(--gm-space-5);
}

.gm-fichebox__title {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
  margin-bottom: var(--gm-space-3);
}

.gm-fichebox__list { margin: 0; padding: 0; list-style: none; font-size: var(--gm-text-sm); }
.gm-fichebox__list li + li { margin-top: var(--gm-space-2); }
.gm-fichebox__list a { text-decoration: none; }
.gm-fichebox__list a:hover { text-decoration: underline; }

/* ---- Sources -------------------------------------------------------------- */

.gm-sources { margin-top: var(--gm-space-8); }

.gm-sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--gm-text-sm);
  counter-reset: gm-source;
}

.gm-sources__list li {
  position: relative;
  padding-left: 2rem;
  padding-block: var(--gm-space-2);
  counter-increment: gm-source;
  border-bottom: 1px solid var(--gm-border);
  text-wrap: pretty;
}

.gm-sources__list li::before {
  content: counter(gm-source);
  position: absolute;
  left: 0;
  top: var(--gm-space-2);
  font-family: var(--gm-font-mono);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-faint);
}

.gm-sources__date { color: var(--gm-text-faint); font-size: var(--gm-text-xs); }

/* ---- Bandeau de date de verification ------------------------------------- */

.gm-checked {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  padding: var(--gm-space-2) var(--gm-space-3);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-muted);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm);
}

/* ==========================================================================
   Filtres du catalogue
   ========================================================================== */

.gm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2);
  padding-bottom: var(--gm-space-5);
  margin-bottom: var(--gm-space-6);
  border-bottom: 1px solid var(--gm-border);
}

.gm-filters__label {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
  margin-right: var(--gm-space-2);
}

.gm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  padding: 0.4rem 0.75rem;
  font-size: var(--gm-text-sm);
  font-weight: 500;
  color: var(--gm-text);
  text-decoration: none;
  background: var(--gm-surface);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-pill);
  transition:
    background-color var(--gm-dur-fast) var(--gm-ease-out),
    border-color var(--gm-dur-fast) var(--gm-ease-out),
    color var(--gm-dur-fast) var(--gm-ease-out);
}
.gm-chip:hover { border-color: var(--gm-accent); color: var(--gm-accent); }

.gm-chip--active {
  color: var(--gm-white);
  background: var(--gm-accent);
  border-color: var(--gm-accent);
}
.gm-chip--active:hover { color: var(--gm-white); background: var(--gm-accent-hover); }

.gm-chip__remove { font-weight: 700; opacity: 0.8; }

/* ==========================================================================
   Illustrations d equipement
   Substitut original aux photographies produit, qui sont des oeuvres
   protegees. Remplacees des qu une image dont les droits sont etablis est
   attachee a la fiche.
   ========================================================================== */

.gm-illu {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.gm-card__media .gm-illu { aspect-ratio: 16 / 10; }

.gm-device-photo { width: 100%; height: 100%; object-fit: cover; }

/* Mention discrete, obligatoire : le lecteur doit savoir qu il ne regarde
   pas une photographie de l appareil. */
.gm-illu-note {
  margin-top: var(--gm-space-2);
  font-size: var(--gm-text-xs);
  color: var(--gm-text-faint);
  text-wrap: pretty;
}

/* assets/css/components/prose.css */
/* ==========================================================================
   Garmin.ma - Contenu redactionnel
   Mesure limitee, rythme vertical regulier, hierarchie lisible sans effort.
   ========================================================================== */

.gm-prose {
  font-size: var(--gm-text-base);
  line-height: var(--gm-leading-loose);
  color: var(--gm-text);
}

.gm-prose > * { max-width: var(--gm-max-prose); }

/* Les elements larges echappent a la mesure de lecture */
.gm-prose > figure,
.gm-prose > .gm-table-scroll,
.gm-prose > .wp-block-table,
.gm-prose > .wp-block-image.alignwide { max-width: none; }

/* ---- Titres --------------------------------------------------------------
   L espace au-dessus est plus grand que celui au-dessous : un titre
   appartient visuellement au texte qui le suit, pas a celui qui precede. */

.gm-prose h2 {
  font-size: var(--gm-text-2xl);
  margin-block: var(--gm-space-8) var(--gm-space-4);
  padding-bottom: var(--gm-space-3);
  border-bottom: 1px solid var(--gm-border);
}

.gm-prose h3 {
  font-size: var(--gm-text-xl);
  margin-block: var(--gm-space-7) var(--gm-space-3);
}

.gm-prose h4 {
  font-size: var(--gm-text-lg);
  margin-block: var(--gm-space-6) var(--gm-space-3);
}

.gm-prose > *:first-child { margin-top: 0; }

/* ---- Paragraphes et listes ------------------------------------------------ */

.gm-prose p { margin-block: 0 var(--gm-space-4); text-wrap: pretty; }

/* Chapo : premier paragraphe apres le titre principal */
.gm-prose > p:first-of-type {
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-text-muted);
}

.gm-prose ul,
.gm-prose ol {
  margin-block: 0 var(--gm-space-5);
  padding-left: var(--gm-space-5);
}

.gm-prose li { margin-bottom: var(--gm-space-2); text-wrap: pretty; }
.gm-prose li::marker { color: var(--gm-accent); }

.gm-prose li > ul,
.gm-prose li > ol { margin-top: var(--gm-space-2); }

/* ---- Liens ---------------------------------------------------------------- */

.gm-prose a {
  color: var(--gm-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.gm-prose a:hover { text-decoration-thickness: 2px; }

/* ---- Citations ------------------------------------------------------------ */

.gm-prose blockquote {
  margin-block: var(--gm-space-6);
  padding: var(--gm-space-2) 0 var(--gm-space-2) var(--gm-space-5);
  border-left: 3px solid var(--gm-accent);
  color: var(--gm-text-muted);
}
.gm-prose blockquote p:last-child { margin-bottom: 0; }

/* ---- Tableaux ------------------------------------------------------------- */

.gm-prose table { font-size: var(--gm-text-sm); margin-block: var(--gm-space-6); }
.gm-prose th, .gm-prose td {
  padding: var(--gm-space-3);
  border-bottom: 1px solid var(--gm-border);
  text-align: left;
}
.gm-prose thead th {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-text-muted);
  border-bottom-color: var(--gm-border-strong);
}

/* ---- Media ---------------------------------------------------------------- */

.gm-prose figure { margin-block: var(--gm-space-6); }
.gm-prose img { border-radius: var(--gm-radius-md); }

.gm-prose figcaption {
  margin-top: var(--gm-space-3);
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
}

.gm-prose code {
  padding: 0.12em 0.35em;
  font-size: 0.9em;
  background: var(--gm-bg-inset);
  border-radius: var(--gm-radius-xs);
}

.gm-prose pre {
  padding: var(--gm-space-5);
  margin-block: var(--gm-space-6);
  background: var(--gm-graphite-900);
  color: var(--gm-graphite-50);
  border-radius: var(--gm-radius-md);
}
.gm-prose pre code { background: none; padding: 0; }

.gm-prose hr {
  margin-block: var(--gm-space-8);
  border-top: 1px solid var(--gm-border);
}

/* ==========================================================================
   Pied d article : auteur, dates, transparence editoriale
   ========================================================================== */

.gm-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-2) var(--gm-space-4);
  padding-block: var(--gm-space-4);
  margin-top: var(--gm-space-5);
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  border-block: 1px solid var(--gm-border);
}

.gm-byline__author { font-weight: 650; color: var(--gm-text); }

.gm-article-footer {
  margin-top: var(--gm-space-9);
  padding-top: var(--gm-space-6);
  border-top: 1px solid var(--gm-border);
}

/* ---- Sommaire ------------------------------------------------------------- */

.gm-toc {
  padding: var(--gm-space-5);
  margin-block: var(--gm-space-6);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
}

.gm-toc__title {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
  margin-bottom: var(--gm-space-3);
}

.gm-toc ol { margin: 0; padding-left: var(--gm-space-5); font-size: var(--gm-text-sm); }
.gm-toc li { margin-bottom: var(--gm-space-2); }
.gm-toc a { color: var(--gm-text); text-decoration: none; }
.gm-toc a:hover { color: var(--gm-accent); text-decoration: underline; }

/* assets/css/components/compare.css */
/* ==========================================================================
   Garmin.ma - Comparateur
   ========================================================================== */

.gm-compare-picker {
  padding: var(--gm-space-6);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
}

.gm-compare-picker fieldset { border: 0; margin: 0; padding: 0; }

.gm-compare-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gm-space-4);
}

/* ==========================================================================
   Resume des differences decisives
   ========================================================================== */

.gm-compare-summary {
  margin-top: var(--gm-space-8);
  padding: var(--gm-space-6);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-left: 3px solid var(--gm-accent);
  border-radius: var(--gm-radius-lg);
}

.gm-compare-summary__list { margin: var(--gm-space-4) 0 0; padding: 0; list-style: none; }

.gm-compare-summary__list li {
  display: grid;
  gap: var(--gm-space-1);
  padding-block: var(--gm-space-3);
  border-bottom: 1px solid var(--gm-border);
}
.gm-compare-summary__list li:last-child { border-bottom: 0; }

.gm-compare-summary__list strong {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
}

.gm-compare-summary__list span {
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.gm-compare-summary__note {
  margin-top: var(--gm-space-5);
  padding-top: var(--gm-space-4);
  border-top: 1px solid var(--gm-border);
  font-size: var(--gm-text-sm);
  color: var(--gm-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Tableau comparatif
   ========================================================================== */

.gm-compare-scroll {
  margin-top: var(--gm-space-7);
  overflow: auto;
  max-height: 80vh;
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  -webkit-overflow-scrolling: touch;
}

.gm-compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gm-text-sm);
}

/* En-tetes persistants : le nom du modele et la caracteristique restent
   visibles pendant le defilement, sinon un tableau long devient illisible. */
.gm-compare thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--gm-space-4);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 700;
  background: var(--gm-surface);
  border-bottom: 2px solid var(--gm-border-strong);
}

.gm-compare thead th a { color: var(--gm-text); text-decoration: none; }
.gm-compare thead th a:hover { color: var(--gm-accent); text-decoration: underline; }

.gm-compare__rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 32%;
  min-width: 11rem;
  padding: var(--gm-space-3) var(--gm-space-4);
  text-align: left;
  font-weight: 500;
  color: var(--gm-text-muted);
  background: var(--gm-surface);
  border-right: 1px solid var(--gm-border);
}

/* Le coin haut-gauche doit passer au-dessus des deux axes colles */
.gm-compare thead .gm-compare__rowhead { z-index: 4; }

.gm-compare td {
  padding: var(--gm-space-3) var(--gm-space-4);
  border-bottom: 1px solid var(--gm-border);
  vertical-align: top;
}

.gm-compare tbody th { border-bottom: 1px solid var(--gm-border); }

/* ---- Bandeau de groupe ---------------------------------------------------- */

.gm-compare__group th {
  position: sticky;
  left: 0;
  padding: var(--gm-space-3) var(--gm-space-4);
  text-align: left;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
  background: var(--gm-bg-subtle);
  border-block: 1px solid var(--gm-border);
}

/* ---- Lignes qui different -------------------------------------------------
   Signalees par un liseré ET par un fond : jamais par la couleur seule. */

.gm-compare tr[data-differs="true"] .gm-compare__rowhead {
  color: var(--gm-text);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--gm-accent);
}

.gm-compare tr[data-differs="true"] td { background: var(--gm-accent-soft); }

.gm-compare__incomplete {
  display: inline-block;
  margin-left: var(--gm-space-2);
  padding: 0.1rem 0.4rem;
  font-family: var(--gm-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-amber-500);
  background: color-mix(in srgb, var(--gm-amber-500) 12%, transparent);
  border-radius: var(--gm-radius-xs);
}

.gm-compare td .gm-tag { margin-top: var(--gm-space-2); }

/* ==========================================================================
   Barre de selection flottante
   ========================================================================== */

.gm-comparebar {
  position: fixed;
  left: 50%;
  bottom: var(--gm-space-4);
  z-index: var(--gm-z-compare);
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gm-space-3);
  width: min(58rem, calc(100vw - var(--gm-gutter) * 2));
  padding: var(--gm-space-3) var(--gm-space-4);
  /* Ne masque pas la zone sous la barre sur les iPhone */
  padding-bottom: calc(var(--gm-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--gm-surface);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-xl);

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity var(--gm-dur-base) var(--gm-ease-out),
    transform var(--gm-dur-base) var(--gm-ease-out),
    visibility 0s linear var(--gm-dur-base);
}

.gm-comparebar[data-gm-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.gm-comparebar__count {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-sm);
  font-weight: 700;
}

.gm-comparebar__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-space-2);
  margin-inline-end: auto;
  min-width: 0;
}

.gm-comparebar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  font-size: var(--gm-text-xs);
  background: var(--gm-bg-subtle);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-pill);
}

.gm-comparebar__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 14px;
  line-height: 1;
  color: var(--gm-text-muted);
  border-radius: 50%;
}
.gm-comparebar__remove:hover { color: var(--gm-red-500); background: var(--gm-bg-inset); }

@media (max-width: 560px) {
  .gm-comparebar { flex-direction: column; align-items: stretch; }
  .gm-comparebar .gm-btn { width: 100%; }
}

/* assets/css/components/assistant.css */
/* ==========================================================================
   Assistant de choix

   Ecrit en meme temps que le gabarit, et uniquement pour les classes qu il
   emet reellement. Le composant .gm-comparebar, dont 76 lignes stylent des
   classes que plus aucun gabarit ne produit, sert ici de contre-exemple.

   Trois roles de couleur, et un choix a expliquer : un ecart n est pas une
   erreur. Un modele qui ne correspond pas a la demande est un bon appareil
   qui ne convient pas a ce besoin — il est donc rendu en gris sobre et
   jamais en rouge. Le rouge dirait au lecteur qu il regarde un defaut.
   ========================================================================== */

/* ---- Le questionnaire ---------------------------------------------------- */

/* Le questionnaire se lit comme un texte, pas comme un tableau de bord : on
   le borne a une largeur de lecture confortable plutot que de l etaler sur
   toute la page. Les resultats, eux, restent pleine largeur. */
.gm-assist {
  max-width: 72ch;
  margin: 0 0 var(--gm-space-8);
}

/* ---- Le contrat --------------------------------------------------------- */

.gm-assist__contrat {
  padding: var(--gm-space-5);
  margin-bottom: var(--gm-space-7);
  border: 1px solid var(--gm-border);
  border-left: 3px solid var(--gm-accent);
  border-radius: var(--gm-radius-md);
  background: var(--gm-bg-subtle);
}

.gm-assist__contrat-title {
  margin: 0 0 var(--gm-space-3);
  font-size: var(--gm-text-base);
  letter-spacing: var(--gm-tracking-snug);
}

.gm-assist__contrat ul {
  margin: 0;
  padding-left: var(--gm-space-5);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-base);
}

.gm-assist__contrat li + li { margin-top: var(--gm-space-2); }

/* ---- Questions ---------------------------------------------------------- */

/* Un fieldset apporte la semantique de groupe au lecteur d ecran ; son
   habillage par defaut, lui, n a aucun interet ici. */
.gm-assist__question {
  padding: 0;
  margin: 0 0 var(--gm-space-7);
  border: 0;
}

.gm-assist__legend {
  padding: 0;
  margin-bottom: var(--gm-space-4);
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-lg);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-snug);
}

.gm-assist__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gm-space-3);
}

/* L input reste dans le flux et focusable : display:none le retirerait de
   l ordre de tabulation et le rendrait inatteignable au clavier. */
.gm-assist__choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.gm-assist__choice {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--gm-space-3) var(--gm-space-4);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-md);
  background: var(--gm-surface);
  color: var(--gm-text);
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-snug);
  cursor: pointer;
  transition: border-color var(--gm-dur-fast) var(--gm-ease-out),
              background var(--gm-dur-fast) var(--gm-ease-out);
}

.gm-assist__choice:hover { border-color: var(--gm-accent); }

/* L etat coche se lit a deux signes, pas seulement a la couleur : un fond
   inverse ET une coche. */
.gm-assist__choice-input:checked + .gm-assist__choice {
  border-color: var(--gm-accent);
  background: var(--gm-accent);
  color: var(--gm-text-invert);
  font-weight: 600;
}

.gm-assist__choice-input:checked + .gm-assist__choice::before {
  content: "\2713";
  margin-right: var(--gm-space-2);
  font-weight: 700;
}

.gm-assist__choice-input:focus-visible + .gm-assist__choice {
  outline: 2px solid var(--gm-focus);
  outline-offset: 3px;
}

.gm-assist__why {
  margin: var(--gm-space-3) 0 0;
  color: var(--gm-text-faint);
  font-size: var(--gm-text-xs);
  line-height: var(--gm-leading-base);
  text-wrap: pretty;
}

.gm-assist__date { display: block; margin-top: var(--gm-space-1); }

.gm-assist__hint,
.gm-assist__coverage {
  margin: 0 0 var(--gm-space-6);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
  text-wrap: pretty;
}

.gm-assist__coverage { font-variant-numeric: tabular-nums; }

/* ---- Resultats ---------------------------------------------------------- */

.gm-assist__results {
  padding-top: var(--gm-space-8);
  margin-top: var(--gm-space-8);
  border-top: 1px solid var(--gm-border);
}

/* L invariant : la somme des trois groupes vaut toujours le vivier de
   depart, et le lecteur doit pouvoir le verifier de l oeil. */
.gm-assist__invariant {
  padding: var(--gm-space-4);
  margin-bottom: var(--gm-space-7);
  border-radius: var(--gm-radius-md);
  background: var(--gm-bg-inset);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
  font-variant-numeric: tabular-nums;
}

.gm-assist__group { margin-bottom: var(--gm-space-8); }

.gm-assist__group-title {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  margin: 0 0 var(--gm-space-3);
  font-size: var(--gm-text-lg);
}

.gm-assist__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0 var(--gm-space-2);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-bg-inset);
  font-size: var(--gm-text-sm);
  font-variant-numeric: tabular-nums;
}

.gm-assist__group--oui .gm-assist__count {
  background: color-mix(in srgb, var(--gm-green-500) 16%, transparent);
  color: var(--gm-green-500);
}

.gm-assist__group--indecis .gm-assist__count {
  background: color-mix(in srgb, var(--gm-amber-500) 16%, transparent);
  color: var(--gm-amber-500);
}

.gm-assist__group-lead,
.gm-assist__empty {
  margin: 0 0 var(--gm-space-4);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
  text-wrap: pretty;
}

.gm-assist__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--gm-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.gm-assist__card {
  padding: var(--gm-space-5);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-surface);
}

.gm-assist__card-title {
  margin: 0 0 var(--gm-space-4);
  font-size: var(--gm-text-base);
}

.gm-assist__card-title a { text-decoration: none; }
.gm-assist__card-title a:hover { text-decoration: underline; }

/* ---- Etat, critere par critere ------------------------------------------ */

.gm-assist__etats {
  padding: 0;
  margin: 0;
  list-style: none;
}

.gm-assist__etat {
  padding: var(--gm-space-3) 0;
  border-top: 1px solid var(--gm-border);
  font-size: var(--gm-text-sm);
}

.gm-assist__etat:first-child { border-top: 0; padding-top: 0; }

/* La pastille est doublee d un signe : un lecteur daltonien ne doit pas
   dependre de la teinte pour lire l etat. */
.gm-assist__etat-critere {
  display: block;
  font-weight: 600;
}

.gm-assist__etat-critere::before {
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
}

.gm-assist__etat--oui .gm-assist__etat-critere { color: var(--gm-green-500); }
.gm-assist__etat--oui .gm-assist__etat-critere::before { content: "\2713"; }

.gm-assist__etat--non .gm-assist__etat-critere { color: var(--gm-text-muted); }
.gm-assist__etat--non .gm-assist__etat-critere::before { content: "\2715"; }

.gm-assist__etat--indecis .gm-assist__etat-critere { color: var(--gm-amber-500); }
.gm-assist__etat--indecis .gm-assist__etat-critere::before { content: "?"; }

.gm-assist__motif,
.gm-assist__releve {
  display: block;
  margin-top: var(--gm-space-1);
  margin-left: 1.2em;
  color: var(--gm-text-muted);
  font-size: var(--gm-text-xs);
  line-height: var(--gm-leading-base);
  text-wrap: pretty;
}

.gm-assist__releve { font-variant-numeric: tabular-nums; }

/* La note est citee mot pour mot : elle vient de la source, pas de nous. */
.gm-assist__note {
  display: block;
  margin: var(--gm-space-2) 0 0 1.2em;
  padding-left: var(--gm-space-3);
  border-left: 2px solid var(--gm-border-strong);
  color: var(--gm-text-faint);
  font-size: var(--gm-text-xs);
  font-style: italic;
}

/* ---- Notes de lecture : la voix de la redaction, separee du moteur ------- */

.gm-assist__lecture {
  padding-left: var(--gm-space-4);
  margin-top: var(--gm-space-5);
  border-left: 3px solid var(--gm-sand-500);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
}

.gm-assist__lecture-title {
  margin: 0 0 var(--gm-space-2);
  color: var(--gm-text);
  font-size: var(--gm-text-xs);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
}

.gm-assist__lecture p { margin: 0 0 var(--gm-space-2); text-wrap: pretty; }
.gm-assist__lecture ul { margin: 0; padding-left: var(--gm-space-5); }

/* ---- Suite du parcours --------------------------------------------------- */

.gm-assist__next {
  padding: var(--gm-space-5);
  margin-top: var(--gm-space-7);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
  background: var(--gm-bg-subtle);
}

.gm-assist__next-lead {
  margin: 0 0 var(--gm-space-4);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
  text-wrap: pretty;
}

/* ---- Bilan des criteres -------------------------------------------------- */

.gm-assist__bilan {
  padding-top: var(--gm-space-8);
  margin-top: var(--gm-space-8);
  border-top: 1px solid var(--gm-border);
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
}

.gm-assist__table {
  width: 100%;
  margin-top: var(--gm-space-4);
  border-collapse: collapse;
}

.gm-assist__table th,
.gm-assist__table td {
  padding: var(--gm-space-3);
  border-bottom: 1px solid var(--gm-border);
  text-align: left;
  vertical-align: top;
}

.gm-assist__table thead th {
  color: var(--gm-text-faint);
  font-size: var(--gm-text-xs);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
}

.gm-assist__table tbody th { font-weight: 500; color: var(--gm-text); }

/* ---- Contraste force ----------------------------------------------------
   Les fonds en color-mix et les bordures teintees disparaissent dans les
   modes a contraste force de Windows : on retombe sur une bordure que le
   systeme sait dessiner. */

@media (forced-colors: active) {
  .gm-assist__choice,
  .gm-assist__card,
  .gm-assist__count {
    border: 1px solid CanvasText;
  }

  .gm-assist__choice-input:checked + .gm-assist__choice {
    border-width: 3px;
  }
}

/* assets/css/components/polish.css */
/* ==========================================================================
   Garmin.ma - Finitions : animations, profondeur, forum bbPress.
   Tout mouvement est coupe par prefers-reduced-motion (voir base.css).
   ========================================================================== */

/* ---- Barre de progression de lecture ------------------------------------ */
.gm-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: calc(var(--gm-z-header) + 1);
  background: linear-gradient(90deg, var(--gm-blue-500), var(--gm-blue-200));
  transform-origin: 0 50%;
  transform: scaleX(var(--gm-scroll, 0));
  pointer-events: none;
}

/* ---- Hero : aurore animee + grille de points ---------------------------- */
.gm-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(28, 111, 240, 0.35), transparent 70%);
  filter: blur(40px);
  animation: gm-aurora 14s var(--gm-ease-inout) infinite alternate;
  pointer-events: none;
}
.gm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  pointer-events: none;
}
@keyframes gm-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
  to   { transform: translate3d(-8%, 10%, 0) scale(1.18); opacity: 1; }
}

.gm-hero__title { animation: gm-rise 0.9s var(--gm-ease-entry) both; }
.gm-hero__lead  { animation: gm-rise 0.9s 0.12s var(--gm-ease-entry) both; }
.gm-hero__actions { animation: gm-rise 0.9s 0.24s var(--gm-ease-entry) both; }
.gm-hero__facts { animation: gm-rise 0.9s 0.36s var(--gm-ease-entry) both; }
@keyframes gm-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.gm-hero__title em {
  background: linear-gradient(100deg, var(--gm-blue-400), #8fd0ff 45%, var(--gm-blue-400));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gm-shine 6s linear infinite;
}
@keyframes gm-shine { to { background-position: -200% 0; } }

/* ---- Boutons : reflet au survol ----------------------------------------- */
.gm-btn--primary { position: relative; overflow: hidden; }
.gm-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--gm-ease-out);
  pointer-events: none;
}
.gm-btn--primary:hover::after { transform: translateX(120%); }

/* ---- Cartes : inclinaison 3D legere pilotee par polish.js --------------- */
.gm-card, .gm-tool, .gm-sport {
  transform-style: preserve-3d;
  will-change: transform;
}
.gm-card[data-gm-tilt], .gm-tool[data-gm-tilt] {
  transform: perspective(900px) rotateX(var(--gm-rx, 0deg)) rotateY(var(--gm-ry, 0deg)) translateY(-3px);
}
.gm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--gm-mx, 50%) var(--gm-my, 0%), rgba(28, 111, 240, 0.10), transparent 45%);
  opacity: 0;
  transition: opacity var(--gm-dur-base) var(--gm-ease-out);
  pointer-events: none;
}
.gm-card:hover::before { opacity: 1; }

/* Fiche produit : image sur fond doux, zoom au survol */
.gm-card__media {
  background:
    radial-gradient(80% 80% at 50% 30%, var(--gm-bg-subtle), var(--gm-bg-inset));
}
.gm-device-photo { object-fit: contain; padding: var(--gm-space-4); }
.gm-card:hover .gm-device-photo { transform: scale(1.06); }

/* Etiquette de gamme sur les cartes */
.gm-card__badge {
  position: absolute;
  top: var(--gm-space-3);
  left: var(--gm-space-3);
  z-index: 2;
  padding: 0.2rem 0.6rem;
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gm-white);
  background: rgba(7, 9, 11, 0.72);
  backdrop-filter: blur(6px);
  border-radius: var(--gm-radius-pill);
}

/* ---- Compteurs animes ---------------------------------------------------- */
[data-gm-count] { font-variant-numeric: tabular-nums; }

/* ---- Bande de chiffres cles --------------------------------------------- */
.gm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--gm-space-5);
}
.gm-stat {
  padding: var(--gm-space-5);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  text-align: left;
}
.gm-stat__value {
  display: block;
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-4xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gm-accent);
}
.gm-stat__label { display: block; margin-top: var(--gm-space-2); font-size: var(--gm-text-sm); color: var(--gm-text-muted); }

/* ---- Marquee de gammes --------------------------------------------------- */
.gm-marquee {
  overflow: hidden;
  border-block: 1px solid var(--gm-border);
  background: var(--gm-bg-subtle);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gm-marquee__track {
  display: flex;
  gap: var(--gm-space-8);
  width: max-content;
  padding-block: var(--gm-space-4);
  animation: gm-marquee 38s linear infinite;
}
.gm-marquee:hover .gm-marquee__track { animation-play-state: paused; }
.gm-marquee__item {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gm-text-faint);
  white-space: nowrap;
  text-decoration: none;
}
.gm-marquee__item:hover { color: var(--gm-accent); }
@keyframes gm-marquee { to { transform: translateX(-50%); } }

/* ---- Barre de recherche catalogue --------------------------------------- */
.gm-catalog-search {
  display: flex;
  gap: var(--gm-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--gm-space-5);
}
.gm-catalog-search input {
  flex: 1 1 18rem;
  height: 46px;
  padding-inline: var(--gm-space-4);
  background: var(--gm-surface);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-md);
}
.gm-catalog-search input:focus-visible { border-color: var(--gm-accent); }
.gm-card[hidden] { display: none; }
.gm-catalog-count { font-size: var(--gm-text-sm); color: var(--gm-text-muted); margin-bottom: var(--gm-space-4); }

/* ---- Bouton retour en haut ---------------------------------------------- */
.gm-totop {
  position: fixed;
  right: var(--gm-space-5);
  bottom: var(--gm-space-5);
  z-index: var(--gm-z-sticky);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--gm-white);
  background: var(--gm-accent);
  border-radius: 50%;
  box-shadow: var(--gm-shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--gm-dur-base), transform var(--gm-dur-base) var(--gm-ease-out), background var(--gm-dur-fast);
}
.gm-totop[data-gm-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.gm-totop:hover { background: var(--gm-accent-hover); }

/* ==========================================================================
   Forum bbPress
   ========================================================================== */
#bbpress-forums {
  --bb-gap: var(--gm-space-4);
  font-size: var(--gm-text-base);
  color: var(--gm-text);
}
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums div.bbp-the-content-wrapper {
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  overflow: hidden;
  background: var(--gm-surface);
  margin-bottom: var(--gm-space-6);
}
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
  background: var(--gm-bg-subtle);
  border: 0;
  padding: var(--gm-space-3) var(--gm-space-5);
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-xs);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-caps);
  text-transform: uppercase;
  color: var(--gm-text-faint);
}
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
  padding: var(--gm-space-4) var(--gm-space-5);
  border-top: 1px solid var(--gm-border);
  transition: background var(--gm-dur-fast);
}
#bbpress-forums li.bbp-body ul.forum:hover,
#bbpress-forums li.bbp-body ul.topic:hover { background: var(--gm-bg-subtle); }
#bbpress-forums a.bbp-forum-title,
#bbpress-forums a.bbp-topic-permalink {
  font-family: var(--gm-font-display);
  font-weight: 700;
  font-size: var(--gm-text-lg);
  text-decoration: none;
  color: var(--gm-text);
}
#bbpress-forums a.bbp-forum-title:hover,
#bbpress-forums a.bbp-topic-permalink:hover { color: var(--gm-accent); }
#bbpress-forums .bbp-forum-content, #bbpress-forums .bbp-topic-meta { color: var(--gm-text-muted); font-size: var(--gm-text-sm); }
#bbpress-forums div.bbp-reply-author img.avatar,
#bbpress-forums div.bbp-topic-author img.avatar { border-radius: 50%; }
#bbpress-forums div.reply, #bbpress-forums div.topic { border-top: 1px solid var(--gm-border); }
#bbpress-forums div.bbp-reply-content, #bbpress-forums div.bbp-topic-content { padding: var(--gm-space-4) var(--gm-space-5); }
#bbpress-forums fieldset.bbp-form {
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  padding: var(--gm-space-5);
  background: var(--gm-surface);
}
#bbpress-forums fieldset.bbp-form legend { font-family: var(--gm-font-display); font-weight: 700; padding-inline: var(--gm-space-2); }
#bbpress-forums input[type="text"],
#bbpress-forums input[type="password"],
#bbpress-forums input[type="email"],
#bbpress-forums select,
#bbpress-forums textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--gm-bg);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-md);
}
#bbpress-forums input:focus-visible,
#bbpress-forums textarea:focus-visible { border-color: var(--gm-accent); }
#bbpress-forums button.button,
#bbpress-forums .bbp-submit-wrapper button,
.bbp-login-form button,
.bbp-login-form input[type="submit"] {
  padding: 0.7rem 1.4rem;
  font-weight: 650;
  color: var(--gm-white);
  background: var(--gm-accent);
  border-radius: var(--gm-radius-md);
  transition: background var(--gm-dur-fast), transform var(--gm-dur-fast);
}
#bbpress-forums button.button:hover,
.bbp-submit-wrapper button:hover { background: var(--gm-accent-hover); transform: translateY(-1px); }
#bbpress-forums div.bbp-breadcrumb { font-size: var(--gm-text-sm); margin-bottom: var(--gm-space-4); }
#bbpress-forums .bbp-template-notice,
#bbpress-forums div.bbp-template-notice {
  border: 1px solid var(--gm-border);
  border-left: 3px solid var(--gm-accent);
  background: var(--gm-accent-soft);
  border-radius: var(--gm-radius-sm);
  padding: var(--gm-space-3) var(--gm-space-4);
  margin-bottom: var(--gm-space-4);
}
#bbpress-forums .bbp-template-notice.error { border-left-color: var(--gm-red-500); }
#bbpress-forums span.bbp-admin-links a { font-size: var(--gm-text-xs); }
.gm-forum-hero-actions { display: flex; gap: var(--gm-space-3); flex-wrap: wrap; margin-top: var(--gm-space-5); }

/* ---- Pages outils : champs plus vivants --------------------------------- */
.gm-input:focus-visible, .gm-select:focus-visible {
  box-shadow: 0 0 0 4px var(--gm-accent-soft);
}
.gm-result { transition: transform var(--gm-dur-base) var(--gm-ease-out), box-shadow var(--gm-dur-base); }
.gm-result:hover { transform: translateY(-2px); box-shadow: var(--gm-shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .gm-hero::before, .gm-marquee__track, .gm-hero__title em { animation: none !important; }
  .gm-hero__title, .gm-hero__lead, .gm-hero__actions, .gm-hero__facts { animation: none !important; }
  .gm-card[data-gm-tilt], .gm-tool[data-gm-tilt] { transform: none !important; }
}

/* ---- Fiche produit simplifiée & moderne --------------------------------- */
.gm-product-hero {
  display: grid;
  gap: var(--gm-space-7);
  align-items: start;
  margin-bottom: var(--gm-space-8);
}
@media (min-width: 900px) {
  .gm-product-hero {
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: var(--gm-space-9);
  }
}
.gm-product-gallery {
  position: sticky;
  top: calc(var(--gm-header-h) + var(--gm-space-5));
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-xl);
  padding: var(--gm-space-6);
  text-align: center;
  box-shadow: var(--gm-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.gm-product-gallery img {
  max-width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  transition: transform 0.4s var(--gm-ease-out);
}
.gm-product-gallery:hover img {
  transform: scale(1.04);
}
.gm-product-summary {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-4);
}
.gm-quick-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--gm-space-3);
  margin-block: var(--gm-space-3);
}
.gm-quick-spec {
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
  padding: var(--gm-space-3) var(--gm-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gm-quick-spec__label {
  font-size: var(--gm-text-xs);
  color: var(--gm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.gm-quick-spec__value {
  font-family: var(--gm-font-display);
  font-size: var(--gm-text-base);
  font-weight: 700;
  color: var(--gm-text);
}
.gm-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gm-space-3);
  margin-top: var(--gm-space-2);
}
.gm-specgroup__details {
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
  padding: var(--gm-space-4);
  margin-top: var(--gm-space-6);
}
.gm-specgroup__details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gm-text-muted);
  font-size: var(--gm-text-sm);
}


/* assets/css/immersive.css */
/* Shared layouts inherited from Expedition; all colors resolve to the active Studio tokens. */
:root{--gm-radius-lg:18px;--gm-max-width-wide:1440px;--gm-section-y:clamp(3.5rem,6vw,6.5rem)}
html{scroll-behavior:smooth;scroll-padding-top:100px}body.gm-immersive{background:var(--gm-bg);color:var(--gm-text);overflow-x:clip}body{margin:0}.gm-immersive *{box-sizing:border-box}.gm-immersive ::selection{background:var(--gm-accent);color:var(--gm-text)}.gm-immersive :focus-visible{outline:2px solid var(--gm-focus);outline-offset:5px}.gm-immersive [hidden]{display:none!important}.gm-immersive a{text-underline-offset:5px}.gm-immersive h1,.gm-immersive h2,.gm-immersive h3{letter-spacing:-.045em}.gm-immersive button,.gm-immersive input,.gm-immersive select{font:inherit}.gm-container--wide{max-width:1440px}.gm-topline{min-height:35px;padding:7px max(var(--gm-gutter),calc((100vw - 1360px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--gm-border);background:var(--gm-bg-subtle);color:var(--gm-text-muted);font-size:10px;letter-spacing:.055em}.gm-topline a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}.gm-topline svg{width:13px;height:13px}.gm-header{background:var(--gm-bg)!important;border-bottom:1px solid var(--gm-border)!important}.gm-header__inner{min-height:84px;gap:24px;justify-content:space-between}.gm-header__brand{flex-shrink:1;min-width:0}.gm-brand__icon{color:var(--gm-accent)}.gm-brand__wordmark{white-space:nowrap}.gm-header__brand .gm-brand{max-width:195px}.gm-header__brand .gm-brand__mark{max-width:34px}.gm-header__brand svg{max-width:190px}.gm-desktop-nav{display:flex;gap:clamp(16px,2vw,32px);align-items:center}.gm-desktop-nav a{font-size:12px;font-weight:550;color:var(--gm-text-muted);text-decoration:none;transition:color .2s}.gm-desktop-nav a:hover{color:var(--gm-accent)}.gm-header__actions{margin:0;gap:15px}.gm-btn{border-radius:7px;min-height:48px;padding:13px 22px;gap:14px;font-weight:650;font-size:13px;box-shadow:none}.gm-btn svg,.gm-text-link svg{width:18px;height:18px}.gm-btn--primary,.gm-btn--primary:visited{color:var(--gm-white)!important;background:var(--gm-accent)!important;border-color:var(--gm-accent)!important}.gm-btn--primary:hover{background:var(--gm-accent-hover)!important;border-color:var(--gm-accent)!important;transform:translateY(-2px);box-shadow:0 7px 24px color-mix(in srgb,var(--gm-accent) 12.5%,transparent)}.gm-btn--secondary{background:transparent;border-color:var(--gm-border-strong);color:var(--gm-text)}.gm-header__cta{min-height:40px;padding:10px 14px;font-size:11px}.gm-search-box summary,.gm-mobile-menu summary{display:grid;place-items:center;list-style:none;width:42px;height:42px;border:1px solid var(--gm-border);border-radius:7px;cursor:pointer;color:var(--gm-text)}.gm-search-box summary::-webkit-details-marker,.gm-mobile-menu summary::-webkit-details-marker{display:none}.gm-search-box summary svg{width:18px;height:18px}.gm-search-box[open] summary,.gm-mobile-menu[open] summary{background:var(--gm-accent-soft);color:var(--gm-accent)}.gm-search-box form{position:absolute;right:var(--gm-gutter);top:calc(100% + 10px);width:min(470px,calc(100vw - 32px));padding:24px;border:1px solid var(--gm-border);background:var(--gm-surface);border-radius:12px;box-shadow:0 18px 60px #0008}.gm-search-box label{display:block;font-size:13px;margin-bottom:12px}.gm-search-box form div{display:flex;gap:8px}.gm-search-box input{min-width:0;width:100%;background:var(--gm-bg);border:1px solid var(--gm-border-strong);border-radius:6px;padding:10px;color:var(--gm-text)}.gm-search-box button{padding:10px;min-height:44px}.gm-mobile-menu{display:none}.gm-mobile-menu nav{position:absolute;inset:100% 0 auto;padding:16px var(--gm-gutter) 24px;background:var(--gm-surface);border-bottom:1px solid var(--gm-border-strong);max-height:calc(100dvh - 90px);overflow:auto}.gm-mobile-menu nav a{display:flex;justify-content:space-between;gap:16px;align-items:center;text-decoration:none;color:var(--gm-text);padding:13px 8px;border-bottom:1px solid var(--gm-border);font-size:15px}.gm-mobile-menu nav svg{width:16px;height:16px}.gm-mobile-menu nav p{margin:20px 8px 0;color:var(--gm-text-muted);font-size:11px}
.gm-kicker{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.13em;font-weight:600;color:var(--gm-accent);margin:0 0 24px;text-transform:uppercase;line-height:1.6}.gm-kicker>span:first-child:empty{width:6px;height:6px;background:var(--gm-accent);border-radius:50%;box-shadow:0 0 15px color-mix(in srgb,var(--gm-accent) 46.7%,transparent);flex:none}.gm-expedition{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 75% 40%,var(--gm-bg-subtle) 0,transparent 50%),var(--gm-bg)}.gm-expedition-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--gm-accent) 4.7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--gm-accent) 4.7%,transparent) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent,#000)}.gm-expedition__inner{display:grid;grid-template-columns:1.08fr 1fr;min-height:640px;align-items:center;gap:32px;padding-block:60px}.gm-expedition h1{font-size:clamp(46px,5.2vw,76px);line-height:1.025;font-weight:600;margin:0 0 28px;letter-spacing:-.06em}.gm-expedition h1 em{font-style:normal;color:var(--gm-accent)}.gm-expedition__lead{max-width:400px;font-size:14px;color:var(--gm-text-muted);line-height:1.8;margin-bottom:30px}.gm-expedition__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.gm-text-link{display:inline-flex;align-items:center;gap:16px;color:var(--gm-text);text-decoration:none;font-size:12px;font-weight:600}.gm-text-link:hover{color:var(--gm-accent)}.gm-expedition__foot{display:flex;gap:24px;color:var(--gm-text-muted);font-size:10px;margin-top:40px}.gm-expedition__foot span{display:inline-flex;gap:7px;align-items:center}.gm-expedition__foot svg{width:14px;height:14px;color:var(--gm-accent)}.gm-scene{position:relative;min-height:510px;perspective:1100px;isolation:isolate;display:grid;place-items:center}.gm-scene:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--gm-bg-inset);box-shadow:0 0 130px color-mix(in srgb,var(--gm-accent) 8.2%,transparent);z-index:-1}.gm-scene__product{position:relative;width:360px;height:390px;display:grid;place-items:center;transform-style:preserve-3d;transform:rotate(-12deg) rotateY(-12deg);transition:transform .45s ease;mix-blend-mode:multiply;z-index:1}.gm-scene__product img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(15px 24px 13px #0004)}.gm-scene__orbit{position:absolute;width:470px;height:470px;border:1px solid color-mix(in srgb,var(--gm-border) 20.8%,transparent);border-radius:50%;transform:rotateX(55deg) rotateZ(-35deg);pointer-events:none}.gm-scene__orbit--two{width:510px;height:510px;transform:rotateX(35deg) rotateY(30deg) rotateZ(35deg);border-style:dashed;opacity:.5}.gm-scene__coordinates{position:absolute;top:0;right:5px;font:9px/1.8 var(--gm-font-mono);color:var(--gm-text-muted);letter-spacing:.1em}.gm-scene__badge{position:absolute;left:0;bottom:118px;z-index:2;display:flex;gap:12px;align-items:center;background:var(--gm-surface);border:1px solid var(--gm-border-strong);padding:15px 18px;backdrop-filter:blur(12px);border-radius:10px;box-shadow:0 12px 30px #0003}.gm-scene__badge>svg{width:30px;height:30px;color:var(--gm-accent)}.gm-scene small{display:block;font-size:8px;letter-spacing:.1em;color:var(--gm-text-muted);margin-bottom:5px}.gm-scene__badge strong{font-size:12px;font-weight:550}.gm-scene__caption{position:absolute;bottom:0;left:32px;right:16px;display:flex;justify-content:space-between;align-items:center;color:white;text-decoration:none;border-top:1px solid var(--gm-border-strong);padding-top:17px}.gm-scene__caption strong{font-size:20px;letter-spacing:-.035em}.gm-scene__caption strong span{font-size:10px;letter-spacing:0;font-weight:400;margin-left:10px;color:var(--gm-text-muted)}.gm-circle-arrow{display:grid;place-items:center;border-radius:50%;width:40px;height:40px;border:1px solid var(--gm-border-strong);color:var(--gm-accent);font-size:20px}.gm-hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--gm-border);padding-block:20px;font-size:9px;letter-spacing:.12em;color:var(--gm-text-muted)}.gm-hero-bottom a{display:inline-flex;gap:16px;align-items:center;text-decoration:none;color:var(--gm-text-muted)}.gm-hero-bottom svg{width:14px;height:14px;transform:rotate(90deg)}.gm-proof-strip{background:var(--gm-bg-subtle);border-block:1px solid var(--gm-border)}.gm-proof-strip>.gm-container{display:flex;gap:24px;justify-content:space-between;align-items:center;padding-block:24px}.gm-proof-strip span{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--gm-text-muted)}.gm-proof-strip strong{font-size:20px;color:var(--gm-text);font-weight:500}.gm-proof-strip svg{width:22px;height:22px;color:var(--gm-accent)}
.gm-editorial-head{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:36px}.gm-editorial-head .gm-kicker{margin-bottom:12px}.gm-editorial-head h2{font-size:clamp(28px,3vw,42px);font-weight:550;line-height:1.15;margin:0}.gm-editorial-head>p{font-size:12px;color:var(--gm-text-muted);margin:0;line-height:1.8}.gm-sport-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.gm-sport-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-height:194px;padding:20px;border:1px solid var(--gm-border);background:linear-gradient(145deg,var(--gm-bg-subtle),var(--gm-surface));border-radius:10px;color:var(--gm-text);text-decoration:none;transition:transform .25s,border-color .25s,background .25s;overflow:hidden}.gm-sport-tile__number{font:9px var(--gm-font-mono);color:var(--gm-text-muted)}.gm-sport-tile>svg{width:34px;height:34px;color:var(--gm-accent);stroke-width:1.3}.gm-sport-tile strong{font-size:14px;font-weight:500;letter-spacing:-.02em}.gm-sport-tile__arrow{position:absolute;right:18px;bottom:20px;font-size:17px;color:var(--gm-text-muted)}.gm-sport-tile:hover{border-color:var(--gm-accent);transform:translateY(-5px);background:var(--gm-bg-subtle)}.gm-featured{padding-top:0}.gm-grid--3{gap:22px}.gm-card{background:var(--gm-surface);border:1px solid var(--gm-border);border-radius:12px;box-shadow:none;overflow:hidden}.gm-card__media{position:relative;aspect-ratio:1.16;background:radial-gradient(ellipse,var(--gm-bg-inset),var(--gm-bg-inset));overflow:hidden;display:grid;place-items:center}.gm-card__media img.gm-device-photo{width:76%;height:88%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 15px 8px #0002)}.gm-card:hover .gm-card__media img{transform:translateY(-6px) rotate(-5deg) scale(1.06)}.gm-card__body{padding:24px}.gm-card__title{font-size:19px;font-weight:550;line-height:1.3;letter-spacing:-.035em}.gm-card__link{color:var(--gm-text)}.gm-card__excerpt{font-size:12px;color:var(--gm-text-muted);line-height:1.7;margin-block:10px 18px}.gm-card__meta{border-top:1px solid var(--gm-border);padding-top:17px;display:flex;justify-content:space-between;color:var(--gm-text-muted);font-size:10px}.gm-card__meta svg{width:16px;height:16px;color:var(--gm-accent)}.gm-product-family{position:absolute;top:18px;left:18px;z-index:1;border:1px solid var(--gm-border-strong);padding:5px 9px;border-radius:4px;color:var(--gm-text);background:var(--gm-surface);font-size:8px;text-transform:uppercase;letter-spacing:.1em}.gm-image-source{font-size:10px;color:var(--gm-text-muted);margin-top:20px}.gm-choice-section{padding-block:24px 60px}.gm-choice-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;border-radius:16px;border:1px solid var(--gm-border);background:radial-gradient(ellipse at 20% 50%,var(--gm-bg-subtle),var(--gm-surface) 65%);padding:65px}.gm-choice-panel h2{font-size:clamp(34px,4vw,54px);font-weight:500;line-height:1.06;margin:0 0 22px}.gm-choice-panel p:not(.gm-kicker){font-size:13px;color:var(--gm-text-muted);line-height:1.8;max-width:420px;margin-bottom:28px}.gm-choice-panel .gm-text-link{margin:22px 0 0;display:flex}.gm-choice-graphic{position:relative;display:grid;place-items:center;min-height:320px;perspective:600px}.gm-choice-graphic>svg{width:170px;height:170px;color:var(--gm-accent);stroke-width:.65;transform:rotate(-20deg);filter:drop-shadow(0 0 30px color-mix(in srgb,var(--gm-accent) 13.3%,transparent))}.gm-choice-ring{position:absolute;width:310px;height:310px;border:1px solid color-mix(in srgb,var(--gm-border) 26.7%,transparent);border-radius:50%;box-shadow:0 0 0 28px color-mix(in srgb,var(--gm-accent) 3.1%,transparent),0 0 0 56px color-mix(in srgb,var(--gm-accent) 2.0%,transparent);transform:rotateX(30deg)}.gm-choice-dot{position:absolute;left:20%;top:20%;width:8px;height:8px;border-radius:50%;background:var(--gm-accent);box-shadow:0 0 20px color-mix(in srgb,var(--gm-accent) 33.3%,transparent)}.gm-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gm-immersive-tool{display:block;border:1px solid var(--gm-border);background:var(--gm-surface);padding:30px;border-radius:12px;text-decoration:none;color:var(--gm-text)}.gm-immersive-tool .gm-tool__icon{width:30px;height:30px;color:var(--gm-accent);margin-bottom:28px;stroke-width:1.4}.gm-immersive-tool h3{font-size:17px;font-weight:550;margin:0 0 12px;line-height:1.4}.gm-immersive-tool p{font-size:12px;line-height:1.8;color:var(--gm-text-muted);margin-bottom:25px}.gm-immersive-tool>span{font-size:10px;color:var(--gm-accent)}.gm-guides-section{border-top:1px solid var(--gm-border);background:var(--gm-surface)}.gm-guide-card{border-top:1px solid var(--gm-border-strong);padding:25px 0 8px}.gm-guide-card .gm-kicker{justify-content:space-between;color:var(--gm-text-muted);font-size:8px}.gm-guide-card .gm-kicker svg{width:17px;height:17px}.gm-guide-card h3{font-size:22px;line-height:1.3;font-weight:500;margin-bottom:18px;max-width:300px}.gm-guide-card h3 a{color:var(--gm-text);text-decoration:none}.gm-guide-card p{font-size:12px;color:var(--gm-text-muted);line-height:1.8;margin-bottom:28px}.gm-community-banner{text-align:center;padding:90px 20px;background:radial-gradient(ellipse at 50% 100%,var(--gm-bg-subtle),var(--gm-bg) 65%);border-block:1px solid var(--gm-border)}.gm-community-banner .gm-kicker{justify-content:center}.gm-community-banner h2{font-size:clamp(36px,4.8vw,64px);line-height:1.08;font-weight:500;margin:0 0 24px}.gm-community-banner p:not(.gm-kicker){font-size:13px;line-height:1.8;color:var(--gm-text-muted);margin-bottom:30px}.gm-footer{background:var(--gm-bg);color:var(--gm-text-muted);border-top:none}.gm-footer__heading{color:var(--gm-text)}.gm-footer__link,.gm-footer__legal a{color:var(--gm-text-muted)}.gm-footer__signature{font-size:10px}.gm-footer__disclaimer,.gm-footer__bottom{border-color:var(--gm-border)}
/* Neutralize the legacy image placeholder behind real product photography. */
.gm-device-photo{background:transparent!important;padding:0!important}
.gm-scene__product{mix-blend-mode:normal;background:var(--gm-bg-inset);border-radius:50%}
.gm-scene__product img{border-radius:50%;mix-blend-mode:multiply;width:94%;height:94%}
.gm-scene__badge>svg,.gm-expedition__foot svg,.gm-proof-strip svg{fill:none!important}
.gm-product-gallery{position:relative;top:auto}
@media(min-width:1100px){.gm-product-gallery{position:sticky;top:115px}}
/* Product detail, filters and all existing tools share the same system. */
.gm-pagehead{background:radial-gradient(ellipse at 90% 20%,var(--gm-bg-subtle),transparent 60%),var(--gm-bg-subtle);border-bottom:1px solid var(--gm-border)}.gm-pagehead__title{font-size:clamp(34px,4vw,58px);font-weight:550;letter-spacing:-.05em;max-width:100%}.gm-pagehead__lead{max-width:750px;color:var(--gm-text-muted);font-size:14px;line-height:1.8}.gm-breadcrumb{color:var(--gm-text-muted);font-size:11px}.gm-breadcrumb a{color:var(--gm-text-muted)}.gm-eyebrow{color:var(--gm-accent)}.gm-chip{border-radius:6px;font-size:12px;min-height:42px;padding:10px 16px}.gm-chip--active{background:var(--gm-accent)!important;color:var(--gm-white)!important;border-color:var(--gm-accent)!important}.gm-filters{gap:8px;flex-wrap:wrap}.gm-catalog-search{gap:15px;margin-block:28px}.gm-catalog-search input{border:1px solid var(--gm-border-strong);background:var(--gm-surface);border-radius:7px;min-height:48px;color:var(--gm-text);padding:13px 16px;font-size:13px}.gm-catalog-count{font-size:11px;color:var(--gm-text-muted);margin-bottom:24px}.gm-product-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:60px}.gm-product-gallery{position:relative;background:radial-gradient(ellipse,var(--gm-bg-inset),var(--gm-bg-inset));border-radius:14px;min-height:440px;border:1px solid var(--gm-border-strong);display:grid;place-items:center;padding:30px;overflow:clip;perspective:1100px}.gm-product-gallery img{width:100%;height:390px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(-8deg);transition:transform .45s ease;filter:drop-shadow(15px 20px 10px #0003)}.gm-product-gallery:hover img{transform:rotate(-8deg) scale(1.04)}.gm-gallery-controls{position:absolute;inset:auto 18px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.gm-gallery-controls span{font-size:9px;letter-spacing:.04em;color:var(--gm-text)}.gm-gallery-controls button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gm-border-strong);border-radius:6px;padding:9px 12px;background:var(--gm-surface);color:var(--gm-text);font-size:11px;cursor:pointer}.gm-gallery-controls svg{width:16px;height:16px}.gm-product-summary h1{font-size:clamp(32px,3vw,46px)!important;line-height:1.1}.gm-quick-specs{gap:12px}.gm-quick-spec{background:var(--gm-bg-subtle);border:1px solid var(--gm-border);border-radius:8px;padding:16px}.gm-quick-spec__label{display:flex;align-items:center;gap:8px;color:var(--gm-text-muted);font-size:10px}.gm-quick-spec__label svg{width:16px;height:16px;color:var(--gm-accent)}.gm-quick-spec__value{color:var(--gm-text);font-size:19px;margin-top:8px}.gm-verdict{border:1px solid var(--gm-border);border-radius:10px;padding:20px;background:var(--gm-surface)}.gm-verdict__title{font-size:12px}.gm-verdict__list{font-size:12px;line-height:1.8}.gm-product-actions{display:flex;flex-wrap:wrap;gap:10px}.gm-product-actions a{font-size:12px}.gm-specgroup{scroll-margin-top:120px}.gm-specs table th,.gm-specs table td{line-height:1.6}.gm-product-anchor-nav{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0;padding-block:18px;border-block:1px solid var(--gm-border)}.gm-product-anchor-nav a{padding:8px 14px;background:var(--gm-bg-subtle);border:1px solid var(--gm-border-strong);border-radius:6px;text-decoration:none;color:var(--gm-text-muted);font-size:11px}.gm-fichebox{background:var(--gm-surface);border-color:var(--gm-border)}.gm-specgroup__details{border-color:var(--gm-border);padding:20px;border-radius:8px;background:var(--gm-surface);margin-top:25px}.gm-specgroup__details summary{font-size:12px;line-height:1.8;cursor:pointer}.gm-dialog{width:min(850px,calc(100vw - 32px));max-height:92dvh;background:var(--gm-bg-inset);color:var(--gm-text);border:1px solid var(--gm-border-strong);border-radius:15px;padding:25px}.gm-dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}.gm-dialog__close{display:block;margin-left:auto;padding:9px 16px;background:var(--gm-accent);color:var(--gm-white);border:0;border-radius:5px;cursor:pointer;font-size:12px}.gm-dialog img{display:block;max-width:100%;height:min(65dvh,650px);object-fit:contain;margin:auto;mix-blend-mode:multiply}.gm-dialog p{text-align:center;font-size:12px;margin-top:14px}.gm-select,.gm-input,textarea,input[type=number],input[type=text],input[type=email],input[type=file]{background:var(--gm-surface);color:var(--gm-text);border-color:var(--gm-border-strong);border-radius:6px}.gm-compare-table{background:var(--gm-surface)}.gm-compare-table th{background:var(--gm-bg-subtle)}.gm-tag{border-color:var(--gm-border-strong)}.gm-prose{color:var(--gm-text)}.gm-prose a{color:var(--gm-accent)}.gm-prose h2,.gm-prose h3{color:var(--gm-text)}.gm-totop{background:var(--gm-accent);color:var(--gm-white);border-color:var(--gm-accent)}.gm-progress{background:var(--gm-accent)}.gm-no-js [data-gm-reveal]{opacity:1;transform:none}.gm-card[hidden]{display:none!important}
@media(min-width:1100px){.gm-expedition__copy{padding-bottom:15px}.gm-product-gallery{position:sticky;top:115px}}
@media(max-width:1099px){.gm-desktop-nav{gap:14px}.gm-desktop-nav a{font-size:11px}.gm-header__cta{display:none}.gm-header__inner{min-height:74px}.gm-scene{min-height:470px}.gm-scene:before{width:320px;height:320px}.gm-scene__product{width:300px;height:350px}.gm-scene__orbit{width:380px;height:380px}.gm-scene__orbit--two{width:420px;height:420px}.gm-scene__badge{left:-20px;bottom:100px}.gm-sport-tiles{grid-template-columns:repeat(3,1fr)}.gm-sport-tile{min-height:170px}.gm-choice-panel{padding:40px;gap:40px}.gm-product-hero{gap:30px}.gm-product-gallery{min-height:400px}.gm-product-gallery img{height:340px}}
@media(max-width:767px){.gm-topline{font-size:8px;min-height:30px}.gm-topline>span{display:none}.gm-topline>a{margin:auto}.gm-header__inner{min-height:70px}.gm-header__brand .gm-brand{max-width:175px}.gm-desktop-nav{display:none}.gm-mobile-menu{display:block}.gm-header__actions{gap:8px}.gm-search-box summary,.gm-mobile-menu summary{width:40px;height:40px}.gm-header__brand svg{max-width:170px}.gm-expedition__inner{grid-template-columns:1fr;min-height:0;padding-top:44px;padding-bottom:28px;gap:26px}.gm-expedition h1{font-size:clamp(42px,10vw,65px);line-height:1.02;margin-bottom:24px}.gm-expedition .gm-kicker{font-size:8px;letter-spacing:.08em;margin-bottom:24px}.gm-expedition__lead{font-size:13px;max-width:380px;margin-bottom:25px}.gm-expedition__actions{gap:20px}.gm-expedition__actions .gm-btn{padding:13px 17px;font-size:12px}.gm-expedition__actions .gm-text-link{font-size:11px}.gm-expedition__foot{margin-top:27px;font-size:9px;gap:20px}.gm-scene{min-height:430px;max-width:500px;width:100%;margin:auto}.gm-scene:before{width:300px;height:300px}.gm-scene__product{width:290px;height:320px}.gm-scene__orbit{width:330px;height:330px}.gm-scene__orbit--two{width:360px;height:360px}.gm-scene__badge{left:0;bottom:100px;padding:12px;gap:8px}.gm-scene__badge strong{font-size:10px}.gm-scene__badge small{font-size:7px}.gm-scene__badge>svg{width:24px;height:24px}.gm-scene__coordinates{font-size:7px;top:5px}.gm-scene__caption{left:0;right:0;bottom:4px}.gm-scene__caption strong{font-size:18px}.gm-scene__caption strong span{font-size:9px}.gm-hero-bottom{font-size:7px;padding-block:18px}.gm-hero-bottom>span:first-child{display:none}.gm-proof-strip>.gm-container{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding-block:22px}.gm-proof-strip span{font-size:9px;gap:7px}.gm-proof-strip strong{font-size:19px}.gm-proof-strip svg{width:18px;height:18px;flex:none}.gm-editorial-head{align-items:start;gap:20px;flex-direction:column;margin-bottom:25px}.gm-editorial-head h2{font-size:30px}.gm-editorial-head .gm-kicker{font-size:8px}.gm-editorial-head>p{display:none}.gm-sport-tiles{grid-template-columns:repeat(2,1fr);gap:10px}.gm-sport-tile{min-height:160px;padding:18px;gap:22px}.gm-sport-tile strong{font-size:14px}.gm-grid--3{grid-template-columns:1fr;gap:20px}.gm-card__media{aspect-ratio:1.25}.gm-card__media img.gm-device-photo{height:230px;width:78%}.gm-card__body{padding:22px}.gm-choice-section{padding-block:0 30px}.gm-choice-panel{grid-template-columns:1fr;padding:28px;gap:22px}.gm-choice-graphic{min-height:210px}.gm-choice-ring{width:190px;height:190px}.gm-choice-graphic>svg{width:120px;height:120px}.gm-choice-panel h2{font-size:36px}.gm-choice-panel .gm-kicker{font-size:8px}.gm-tools-grid{grid-template-columns:1fr;gap:12px}.gm-immersive-tool{padding:25px}.gm-immersive-tool .gm-tool__icon{margin-bottom:20px}.gm-immersive-tool p{margin-bottom:16px}.gm-guide-card h3{max-width:none}.gm-community-banner{padding:65px 10px}.gm-community-banner h2{font-size:36px}.gm-community-banner .gm-kicker{font-size:8px}.gm-community-banner p:not(.gm-kicker){font-size:12px}.gm-pagehead__title{font-size:36px}.gm-pagehead__lead{font-size:12px}.gm-product-hero{grid-template-columns:1fr;gap:30px}.gm-product-gallery{min-height:380px;padding:24px}.gm-product-gallery img{height:320px}.gm-product-summary h1{font-size:34px!important}.gm-quick-specs{grid-template-columns:repeat(2,1fr)}.gm-product-anchor-nav{margin-block:25px}.gm-catalog-search{flex-direction:column;align-items:stretch}.gm-catalog-search input{width:100%;font-size:12px}.gm-filters__label{width:100%}.gm-chip{padding:9px 12px;font-size:11px}.gm-specs .gm-grid--2{grid-template-columns:1fr}.gm-specs table th,.gm-specs table td{font-size:11px!important}.gm-compare-picker__grid{grid-template-columns:1fr 1fr}.gm-footer__top{gap:40px}.gm-footer__nav{gap:30px}.gm-footer__disclaimer{font-size:10px}}
@media(prefers-reduced-motion:no-preference){.gm-scene__product{animation:gm-drift 7s ease-in-out infinite}.gm-choice-dot{animation:gm-dot 6s ease-in-out infinite}.gm-expedition__copy{animation:gm-enter .8s ease-out both}.gm-scene{animation:gm-enter 1s ease-out both}.gm-sport-tile,.gm-guide-card{transition:transform .3s,border-color .3s}.gm-sport-tile:hover,.gm-guide-card:hover{transform:translateY(-4px)}@keyframes gm-drift{0%,100%{translate:0 -6px}50%{translate:0 7px}}@keyframes gm-dot{50%{translate:80px 80px;opacity:.4}}@keyframes gm-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gm-immersive *, .gm-immersive *::before,.gm-immersive *::after{animation:none!important;transition:none!important}.gm-scene__product{transform:rotate(-8deg)}.gm-card:hover .gm-card__media img{transform:none}}

.gm-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.gm-card-specs span{border:1px solid var(--gm-border-strong);background:var(--gm-bg-subtle);color:var(--gm-text-muted);padding:4px 7px;border-radius:4px;font-size:9px;line-height:1.5}.gm-card-compare{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;color:var(--gm-accent);text-decoration:none}.gm-card-compare svg{width:14px;height:14px}.gm-js .gm-tool-form{display:block}.gm-js .gm-tool-nojs{display:none}.gm-form-grid{background:var(--gm-surface)!important;border:1px solid var(--gm-border)!important}.gm-tool-form{margin-block:24px}.gm-results{gap:15px}.gm-result{background:var(--gm-bg-subtle)!important}.gm-tools-privacy{background:var(--gm-bg-subtle)!important}.gm-field__error:empty::before{content:none}.gm-quick-spec__value{overflow-wrap:anywhere}.gm-quick-spec:nth-child(5) .gm-quick-spec__value{font-size:14px;line-height:1.6}.gm-search-box summary,.gm-mobile-menu summary{min-width:42px}.gm-immersive input,.gm-immersive select{max-width:100%}.gm-form-grid .gm-field{min-width:0}.gm-pagehead .gm-container{min-width:0}.gm-hero-bottom>span:last-child{font-size:8px;letter-spacing:.06em}@media(max-width:767px){.gm-hero-bottom>span:last-child{display:none}.gm-form-grid{grid-template-columns:1fr}.gm-results{grid-template-columns:1fr 1fr}.gm-tool-form .gm-form-actions{align-items:stretch}.gm-tool-form .gm-form-actions .gm-btn{width:100%}.gm-product-gallery{position:relative;top:auto}}
.gm-assist-method{border:1px solid var(--gm-border);background:var(--gm-surface);border-radius:8px;padding:16px 20px;margin-bottom:28px;color:var(--gm-text-muted)}.gm-assist-method summary{cursor:pointer;font-size:12px;font-weight:600}.gm-assist-method--small{padding:10px 14px;margin-top:15px;margin-bottom:0}.gm-assist-method .gm-assist__why{margin:12px 0 0}.gm-assist-photo{height:180px;background:var(--gm-bg-inset);border-radius:8px;display:grid;place-items:center;margin-bottom:18px}.gm-assist-photo img{height:160px;width:90%;object-fit:contain;mix-blend-mode:multiply}.gm-assist__card{background:var(--gm-surface);border-color:var(--gm-border)}.gm-assist__choice{background:var(--gm-surface);border-color:var(--gm-border-strong);min-height:48px}.gm-assist__choice-input:checked+.gm-assist__choice{background:var(--gm-accent);color:var(--gm-white);border-color:var(--gm-accent)}.gm-assist__question{margin-bottom:30px}.gm-assist__choices{max-width:850px}
.gm-footer__identity{min-width:0;max-width:100%}.gm-footer .gm-independent{white-space:normal;max-width:100%;font-size:9px}.gm-footer__signature{overflow-wrap:anywhere}.gm-footer__top{grid-template-columns:minmax(0,1fr)}@media(min-width:880px){.gm-footer__top{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr)}}.gm-search-box button{flex:none}.gm-assist__choice-input:focus-visible+.gm-assist__choice{outline:2px solid var(--gm-focus);outline-offset:4px}

/* assets/css/ergonomics.css */
/* Expedition 2.1 — readable content, predictable controls, compact product overview. */
/* Color roles are defined by Studio; this layer only refines ergonomics. */
.gm-immersive :where(a,button,input,select,textarea,summary):focus-visible {outline:3px solid var(--gm-focus);outline-offset:4px;
}
.gm-desktop-nav {gap:clamp(16px,2vw,30px); }
.gm-desktop-nav a {font-size:14px;min-height:44px;display:inline-flex;align-items:center; }
.gm-desktop-nav a[aria-current],.gm-mobile-menu a[aria-current] {color:var(--gm-accent);text-decoration:underline;text-underline-offset:6px; }
.gm-topline {font-size:11px; }
.gm-kicker {font-size:11px;line-height:1.6; }
.gm-expedition__lead,.gm-pagehead__lead {font-size:16px;line-height:1.75; }
.gm-expedition__lead {max-width:44ch; }
.gm-expedition__actions .gm-btn,.gm-expedition__actions .gm-text-link,.gm-text-link {font-size:14px; }
.gm-btn,.gm-chip,.gm-gallery-controls button,.gm-dialog__close {min-height:44px; }
.gm-search-box summary,.gm-mobile-menu summary {min-width:44px;min-height:44px; }
.gm-proof-strip span {font-size:12px;line-height:1.5; }
.gm-card__excerpt,.gm-tool p,.gm-immersive-tool p,.gm-guide-card p {font-size:15px;line-height:1.7; }
.gm-card__meta,.gm-card-compare,.gm-image-source {font-size:12px; }
.gm-card-specs span {font-size:12px;padding:5px 8px; }
.gm-card__title {line-height:1.3; }
.gm-card-compare {min-height:44px; }
.gm-catalog-count {font-size:14px;min-height:1.5em; }
.gm-catalog-search input {min-height:48px;font-size:16px;width:min(100%,580px); }
.gm-catalog-search {flex-wrap:wrap; }
.gm-catalog-empty {padding:28px;border:1px solid var(--gm-border-strong);border-radius:12px;background:var(--gm-surface); }
.gm-catalog-empty p {margin-block:0 16px; }
.gm-no-js .gm-catalog-search {display:none; }
.gm-breadcrumb {font-size:13px;line-height:1.6; }
.gm-breadcrumb__list {flex-wrap:wrap;row-gap:6px; }
.gm-breadcrumb a {display:inline-block;padding-block:6px; }
.single-gm_equipement .gm-pagehead {padding-block:18px!important; }
.gm-product-hero {gap:clamp(24px,3vw,48px); }
.gm-product-summary {min-width:0; }
.gm-product-summary h1 {font-size:clamp(30px,2.7vw,42px)!important;line-height:1.15; }
.gm-quick-specs {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.gm-quick-spec {min-width:0;padding:16px; }
.gm-quick-spec__label {font-size:11px;line-height:1.5;gap:7px; }
.gm-quick-spec__label svg {flex:none; }
.gm-quick-spec__value {font-size:20px;line-height:1.45;overflow-wrap:break-word; }
.gm-quick-spec:nth-child(n+4) .gm-quick-spec__value {font-size:15px;line-height:1.6; }
.gm-verdict__list {font-size:14px;line-height:1.75; }
.gm-verdict__title {font-size:14px; }
.gm-product-actions a {font-size:14px; }
.gm-gallery-controls span {font-size:11px; }
.gm-product-anchor-nav a {font-size:14px;min-height:44px;display:inline-flex;align-items:center; }
#gm-specifications,#gm-alternatives,#gm-sources {scroll-margin-top:120px; }
.gm-specs table th,.gm-specs table td {font-size:14px!important;line-height:1.7;overflow-wrap:anywhere; }
.gm-specs table th {width:43%!important; }
.gm-specs table td {width:57%!important; }
.gm-specgroup__details summary {font-size:14px; }
.gm-specgroup__details[open] {border-color:var(--gm-accent); }
.gm-specgroup__details > div {font-size:14px!important;line-height:1.7; }
.gm-prose {font-size:17px;line-height:1.85; }
.gm-form-grid label,.gm-field label {font-size:14px; }
.gm-form-grid input,.gm-form-grid select,.gm-input,.gm-select {min-height:48px;font-size:16px; }
.gm-result {min-width:0; }
.gm-compare-picker__grid {gap:16px; }
.gm-compare-scroll {max-width:100%; }
.gm-footer__nav a {display:inline-block;min-height:38px;padding-block:8px;font-size:13px; }
.gm-footer__disclaimer {font-size:12px;line-height:1.8; }
.gm-mobile-menu nav {max-height:calc(100dvh - 118px);overflow-y:auto;overscroll-behavior:contain; }
.gm-totop {width:44px;height:44px; }
@media(min-width:768px) and (max-width:1099px) {
 .gm-header__inner {gap:16px; }
 .gm-desktop-nav {gap:12px; }
 .gm-desktop-nav a {font-size:12px; }
 .gm-quick-specs {grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
 .gm-topline {font-size:10px; }
 .gm-expedition .gm-kicker,.gm-editorial-head .gm-kicker,.gm-choice-panel .gm-kicker,.gm-community-banner .gm-kicker {font-size:10px; }
 .gm-expedition__lead,.gm-pagehead__lead {font-size:16px; }
 .gm-expedition__inner {padding-top:32px; }
 .gm-expedition__actions {gap:12px;align-items:stretch; }
 .gm-expedition__actions .gm-btn {font-size:14px; }
 .gm-expedition__actions .gm-text-link {min-height:44px;display:inline-flex;align-items:center;font-size:14px; }
 .gm-expedition__foot {font-size:11px; }
 .gm-proof-strip span {font-size:11px; }
 .gm-sport-tile {min-height:138px; }
 .gm-sport-tile strong {font-size:16px; }
 .gm-choice-panel h2,.gm-community-banner h2 {font-size:32px; }
 .gm-community-banner p:not(.gm-kicker) {font-size:15px; }
 .gm-product-hero {gap:22px; }
 .gm-product-summary {display:contents; }
 .gm-product-intro {order:-1; }
 .gm-product-intro h1 {font-size:30px!important; }
 .gm-product-gallery {min-height:300px;padding:20px 20px 52px; }
 .gm-product-gallery img {height:260px; }
 .gm-gallery-controls {inset:auto 14px 12px; }
 .gm-quick-specs {grid-template-columns:repeat(2,minmax(0,1fr)); }
 .gm-quick-spec {padding:14px; }
 .gm-quick-spec__value {font-size:19px; }
 .gm-product-actions .gm-btn {flex:1 1 180px;justify-content:center; }
 .gm-product-anchor-nav {gap:8px; }
 .gm-product-anchor-nav a {padding:8px 10px;font-size:13px; }
 .gm-verdict {margin-top:0!important; }
 .gm-specs table th,.gm-specs table td {font-size:13px!important;padding:12px 8px!important; }
 .gm-compare-picker__grid {grid-template-columns:1fr; }
 .gm-chip {font-size:13px;padding:10px 13px; }
 .gm-catalog-search input {font-size:16px; }
 .gm-footer__nav {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px; }
 .gm-prose {font-size:16px; }
 input[type=search],input[type=text],input[type=email],input[type=number],select,textarea {font-size:16px!important; }
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto!important; }
 .gm-card[data-gm-tilt] {transform:none!important; }
}

/* assets/css/studio.css */
/* Studio 3.1: photographic opening, generous editorial rhythm, clear product information. */
:root,body.gm-immersive{color-scheme:light;--gm-bg:#fff;--gm-bg-subtle:#f5f6f8;--gm-bg-inset:#eef0f3;--gm-surface:#fff;--gm-surface-raised:#f5f6f8;--gm-text:#181b22;--gm-text-muted:#626773;--gm-text-faint:#68707c;--gm-border:#e1e4e9;--gm-border-strong:#b4bbc7;--gm-accent:#244be7;--gm-accent-hover:#1837b7;--gm-accent-soft:#eef1ff;--gm-focus:#244be7;--gm-blue-400:#244be7;--gm-blue-500:#244be7;--gm-blue-600:#1837b7;--gm-blue-50:#eef1ff;--gm-green-500:#147144;--gm-radius-lg:24px}
html{scroll-padding-top:130px}.gm-immersive ::selection{background:#d9e2ff;color:#14225d}.gm-immersive :where(a,button,input,select,textarea,summary):focus-visible,.gm-immersive :focus-visible{outline-color:#244be7}.gm-main{padding-top:120px}.home .gm-main{padding-top:0}.gm-topo:before,.gm-topo:after{background-image:none}.gm-header{position:fixed;inset:26px 0 auto;margin:auto;width:min(1190px,calc(100% - 64px));background:#ffffffed!important;border:1px solid #e4e7ee!important;border-radius:100px;box-shadow:0 8px 35px #111d3612;backdrop-filter:blur(20px);z-index:100}.gm-header__inner{min-height:76px;padding:10px 18px 10px 27px;gap:22px}.gm-header__brand .gm-brand{max-width:180px}.gm-brand__icon,.gm-brand__tld{color:#244be7}.gm-desktop-nav{gap:22px}.gm-desktop-nav a{color:#30343e;font-size:13px}.gm-desktop-nav a:hover,.gm-desktop-nav a[aria-current],.gm-mobile-menu a[aria-current]{color:#244be7}.gm-header__actions{gap:10px}.gm-btn{border-radius:100px;font-size:14px;min-height:48px;padding:14px 23px;letter-spacing:-.01em}.gm-btn:after{display:none}.gm-btn--primary,.gm-btn--primary:visited{background:#244be7!important;border-color:#244be7!important;color:#fff!important}.gm-btn--primary:hover{background:#1837b7!important;border-color:#1837b7!important;box-shadow:none;transform:translateY(-2px)}.gm-btn--secondary{background:#fff;color:#242b38;border-color:#c5cbd6}.gm-header__cta{font-size:12px;min-height:44px;padding:11px 18px}.gm-search-box summary,.gm-mobile-menu summary{border:0;border-radius:50%;color:#202633;background:#f0f2f6}.gm-search-box[open] summary,.gm-mobile-menu[open] summary{background:#e7ecff;color:#244be7}.gm-search-box form,.gm-mobile-menu nav{background:#fff;border:1px solid #e1e4e9;color:#181b22;box-shadow:0 18px 45px #14213d1c;border-radius:24px;top:calc(100% + 12px)}.gm-search-box input{background:#f8f9fb;border-color:#bcc3cf;color:#181b22;border-radius:10px}.gm-mobile-menu nav a{color:#202633;border-color:#e5e8ee}.gm-mobile-menu nav p{color:#626773}.gm-kicker,.gm-eyebrow{color:#244be7}.gm-text-link{color:#202633}.gm-text-link:hover{color:#244be7}.gm-progress{background:#244be7}.gm-totop{background:#244be7;border-color:#244be7;color:#fff}
/* Homepage */
.gm-studio-width{width:min(1120px,calc(100% - 64px));margin-inline:auto}.gm-studio-eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;line-height:1.7;margin:0 0 25px}.gm-studio-hero{position:relative;isolation:isolate;margin:16px 16px 0;border-radius:32px;overflow:hidden;min-height:760px;height:calc(100svh - 32px);max-height:1040px;color:white;background:#172433;display:grid;place-items:center;padding:145px 24px 120px;text-align:center}.gm-studio-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:-2}.gm-studio-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08162926 0%,#07192a55 42%,#07152616 65%,#071526a3 100%)}.gm-studio-hero__copy{max-width:1000px}.gm-studio-hero__copy .gm-studio-eyebrow{color:#fff;margin-bottom:24px}.gm-studio-hero h1{font-size:clamp(64px,7.8vw,112px);font-weight:600;letter-spacing:-.065em;line-height:1.02;margin:0 0 28px;color:#fff;text-wrap:balance}.gm-studio-hero h1 span{white-space:nowrap}.gm-studio-hero__copy>p:not(.gm-studio-eyebrow){font-size:19px;line-height:1.6;margin:0 0 32px;color:#fff}.gm-studio-actions{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}.gm-studio-white,.gm-studio-white:visited{background:white;color:#202733;border-color:white}.gm-studio-white:hover{background:#e9eeff;color:#173bc2;border-color:#e9eeff;transform:translateY(-2px)}.gm-studio-hero-link{color:#fff;font-size:14px;text-decoration:none;padding:14px 0;border-bottom:1px solid #ffffff70}.gm-studio-hero-link:hover{color:#fff;border-color:#fff}.gm-studio-hero__bottom{position:absolute;bottom:35px;left:44px;right:44px;display:flex;align-items:end;justify-content:space-between;text-align:left;font-size:10px;letter-spacing:.12em;line-height:1.7}.gm-studio-hero__bottom>span:last-child{text-align:right}.gm-studio-hero__bottom>a{display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;text-decoration:none}.gm-studio-hero__bottom>a span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;font-size:20px;transition:transform .3s}.gm-studio-hero__bottom>a:hover span{transform:translateY(5px)}.gm-studio-intro{text-align:center;padding-block:120px 90px}.gm-studio-intro h2{font-size:clamp(42px,5.3vw,74px);font-weight:550;line-height:1.07;letter-spacing:-.055em;margin:0 0 30px}.gm-studio-intro h2 span{color:#737b89}.gm-studio-intro>p:last-child{font-size:18px;line-height:1.65;color:#626773;margin:0}.gm-studio-story{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e4e7ed;border-radius:30px;overflow:clip;box-shadow:0 10px 35px #18243b0a;margin-bottom:28px;min-height:540px}.gm-studio-story__copy{padding:54px 48px;align-self:center}.gm-studio-story__copy .gm-studio-eyebrow{font-size:10px;color:#626773;margin-bottom:24px}.gm-studio-story h2{font-size:clamp(34px,3.5vw,49px);font-weight:550;line-height:1.08;letter-spacing:-.05em;margin:0 0 25px}.gm-studio-story__copy>p:not(.gm-studio-eyebrow){max-width:360px;font-size:16px;line-height:1.7;color:#626773;margin-bottom:16px}.gm-studio-story__copy>.gm-btn{margin-top:16px}.gm-studio-story__visual{position:relative;isolation:isolate;min-width:0;min-height:500px;display:grid;place-items:center;overflow:hidden}.gm-studio-story__visual--blue{background:#dae5f7}.gm-studio-story__visual--sand{background:#e9e5dc}.gm-studio-story__visual--ink{background:#17243b;color:white}.gm-studio-device{width:85%;height:420px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(-10deg);transition:transform .7s cubic-bezier(.2,.6,.2,1);position:relative}.gm-studio-story:hover .gm-studio-story__visual--blue .gm-studio-device{transform:rotate(-5deg) translateY(-8px)}.gm-studio-giant{position:absolute;inset:50px 0 auto;text-align:center;font-size:180px;font-weight:650;letter-spacing:-.08em;line-height:1;color:#b1c7e6;z-index:-1}.gm-studio-photo-label{position:absolute;bottom:28px;left:32px;color:#3a4a62;font-size:10px;letter-spacing:.09em;line-height:1.7}.gm-studio-duo{display:grid;grid-template-columns:1fr 1fr;padding:20px 15px 50px;gap:0;width:100%}.gm-studio-duo>div{min-width:0;text-align:center}.gm-studio-duo .gm-studio-device{height:270px;width:100%;transform:rotate(-10deg)}.gm-studio-duo>div+div{transform:translateY(35px)}.gm-studio-duo>div+div img{transform:rotate(10deg)}.gm-studio-duo span{font-size:12px;color:#454a53;display:block;margin-top:20px}.gm-studio-pace{width:100%;padding:45px}.gm-studio-pace .gm-studio-eyebrow{color:#c8d8f6}.gm-studio-pace__number{display:flex;align-items:baseline;gap:9px;margin-block:30px 35px}.gm-studio-pace__number output{font-size:100px;line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.gm-studio-pace__number>span{font-size:20px;color:#bdcbe3}.gm-studio-pace label{font-size:14px;display:block;color:#e2e9f7;margin-bottom:12px}.gm-studio-pace input[type=range]{display:block;width:100%;accent-color:#a4bdff;height:32px;cursor:pointer;background:transparent}.gm-studio-pace__scale{display:flex;justify-content:space-between;font-size:11px;color:#bac9e3}.gm-studio-pace__result{display:flex;justify-content:space-between;gap:14px;border-block:1px solid #50617d;padding:20px 0;margin:30px 0 22px;font-size:16px;font-variant-numeric:tabular-nums}.gm-studio-pace>a{font-size:13px;color:#e6edff;text-underline-offset:5px}.gm-studio-section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:36px}.gm-studio-section-head h2{font-size:clamp(36px,4.1vw,58px);line-height:1.09;letter-spacing:-.05em;font-weight:550;margin:0}.gm-studio-section-head .gm-studio-eyebrow{color:#626773;margin-bottom:18px}.gm-studio-section-head>p{font-size:15px;line-height:1.7;color:#626773;margin:0}.gm-studio-catalog{padding-block:120px 90px}.gm-studio-sports{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}.gm-studio-sports a{display:inline-flex;min-height:44px;align-items:center;padding:10px 19px;border:1px solid #d9dfe9;border-radius:100px;color:#343c4c;text-decoration:none;font-size:13px;transition:background .2s,border-color .2s}.gm-studio-sports a:hover{background:#edf2ff;border-color:#244be7;color:#244be7}.gm-studio-journal{background:#f4f5f7;padding-block:90px}.gm-studio-reading article{display:grid;grid-template-columns:55px 1fr 55px;gap:30px;align-items:center;padding-block:32px;border-top:1px solid #d8dde5}.gm-studio-reading article:last-child{border-bottom:1px solid #d8dde5}.gm-studio-reading__index{align-self:start;padding-top:6px;font-size:14px;color:#777f8d}.gm-studio-reading h3{font-size:25px;font-weight:550;line-height:1.3;margin:0 0 10px;max-width:780px}.gm-studio-reading h3 a{color:#202633;text-decoration:none}.gm-studio-reading h3 a:hover{color:#244be7}.gm-studio-reading p{font-size:15px;line-height:1.7;color:#626773;margin:0;max-width:750px}.gm-studio-reading__arrow{display:grid;place-items:center;border:1px solid #c5ccd9;border-radius:50%;width:52px;height:52px;text-decoration:none;color:#202633;font-size:24px}.gm-studio-reading__arrow:hover{background:#244be7;color:#fff;border-color:#244be7}.gm-studio-tools{padding-block:110px}.gm-studio-tool-list{display:grid;grid-template-columns:1fr 1fr;column-gap:60px}.gm-studio-tool-list a{display:flex;gap:20px;align-items:center;min-height:94px;border-bottom:1px solid #e1e4e9;text-decoration:none;color:#202633;font-size:17px}.gm-studio-tool-list a>svg{width:26px;height:26px;flex:none;color:#244be7}.gm-studio-tool-list a>span:last-child{margin-left:auto;font-size:22px;transition:transform .3s}.gm-studio-tool-list a:hover{color:#244be7}.gm-studio-tool-list a:hover>span:last-child{transform:translate(3px,-3px)}.gm-studio-community{position:relative;isolation:isolate;overflow:hidden;margin:0 16px 16px;border-radius:30px;min-height:570px;display:grid;place-items:center;text-align:center;padding:80px 24px;color:#fff;background:linear-gradient(#102137a6,#10213799),url('../images/atlas-editorial.webp') center 65%/cover}.gm-studio-community h2{color:#fff;font-size:clamp(44px,5.4vw,76px);line-height:1.05;letter-spacing:-.055em;font-weight:550;margin:0 0 25px}.gm-studio-community p:not(.gm-studio-eyebrow){font-size:17px;line-height:1.7;margin:0 0 30px}.gm-studio-community__note{position:absolute;bottom:18px;right:26px;font-size:8px;letter-spacing:.08em;color:#e0e5ec}
/* Shared components and inner pages. */
.gm-card__media img.gm-device-photo,.gm-product-gallery img{filter:none;background:transparent}
.gm-studio-device{background:transparent}
.gm-studio-duo{mix-blend-mode:multiply}
.gm-card{background:#fff;border-color:#e1e4e9;border-radius:24px;box-shadow:none}.gm-card[data-gm-tilt]{transform:none!important;will-change:auto}.gm-card:before,.gm-card:after{display:none}.gm-card__media{background:#f1f3f6}.gm-card__link,.gm-card__title a{color:#202633}.gm-card__excerpt,.gm-card__meta,.gm-image-source{color:#626773}.gm-card__meta{border-color:#e1e4e9}.gm-card__meta svg,.gm-card-compare{color:#244be7}.gm-product-family{color:#4b576a;border-color:#d3d9e3;background:#ffffffc9;border-radius:100px;font-size:9px;padding:6px 11px}.gm-card-specs span{background:#f5f6f8;border-color:#e1e4e9;color:#4e586a}.gm-pagehead{background:#f5f6f8;border-color:#e1e4e9}.gm-pagehead__lead,.gm-breadcrumb,.gm-breadcrumb a,.gm-catalog-count{color:#626773}.gm-chip{border-radius:100px}.gm-chip--active{background:#244be7!important;border-color:#244be7!important;color:white!important}.gm-catalog-search input,.gm-select,.gm-input,.gm-immersive textarea,.gm-immersive input[type=number],.gm-immersive input[type=text],.gm-immersive input[type=email]{background:#fff;border:1px solid #b4bbc7;color:#202633;border-radius:10px}.gm-catalog-empty{background:#f5f6f8;border-color:#dce1e9}.gm-product-gallery{background:#f1f3f6;border-color:#e1e4e9;border-radius:28px}.gm-gallery-controls span{color:#626773}.gm-gallery-controls button{background:#fff;color:#303a4a;border-color:#c3cbd8;border-radius:100px}.gm-quick-spec,.gm-verdict,.gm-fichebox,.gm-specgroup__details{background:#f7f8fa;border-color:#e1e4e9;border-radius:16px}.gm-quick-spec__label{color:#626773}.gm-quick-spec__label svg{color:#244be7}.gm-quick-spec__value{color:#202633}.gm-product-anchor-nav{border-color:#e1e4e9}.gm-product-anchor-nav a{color:#303a4a;background:#f5f6f8;border-color:#e1e4e9;border-radius:100px}.gm-prose h2,.gm-prose h3{color:#202633}.gm-dialog{background:#f4f5f7;color:#202633;border-color:#d1d7e0;border-radius:24px}.gm-dialog__close{background:#244be7;color:#fff;border-radius:100px}.gm-form-grid{background:#f7f8fa!important;border-color:#dce1e9!important}.gm-result,.gm-tools-privacy{background:#eef2fc!important;color:#303a4a}.gm-assist-method,.gm-assist__card,.gm-assist__choice{background:#f7f8fa;color:#303a4a;border-color:#d8dfe9}.gm-assist__choice-input:checked+.gm-assist__choice{background:#244be7;color:#fff;border-color:#244be7}.gm-assist__choice-input:focus-visible+.gm-assist__choice{outline-color:#244be7}.gm-assist-photo{background:#eef0f4}.gm-footer.gm-on-dark{color-scheme:dark;background:#172033;color:#c8d0e0;--gm-bg:#172033;--gm-bg-subtle:#202b40;--gm-surface:#202b40;--gm-text:#fff;--gm-text-muted:#c8d0e0;--gm-text-faint:#aebbd1;--gm-border:#3b4962;--gm-accent:#a7bfff;--gm-blue-400:#a7bfff}.gm-footer__heading{color:#fff}.gm-footer__link,.gm-footer__legal a{color:#c8d0e0}.gm-footer__disclaimer,.gm-footer__bottom{border-color:#3b4962}.gm-footer .gm-brand__icon,.gm-footer .gm-brand__tld{color:#a7bfff}.gm-footer a:hover{color:#fff}
@media(min-width:1000px) and (min-height:800px){.gm-studio-story{position:sticky;top:132px}.gm-studio-story:nth-child(2){top:150px}.gm-studio-story:nth-child(3){top:168px}}
@media(max-width:1199px){.gm-header__inner{gap:16px}.gm-desktop-nav{gap:18px}.gm-studio-story__copy{padding:40px 34px}.gm-studio-pace{padding:32px}.gm-studio-pace__number output{font-size:86px}}
@media(max-width:767px){.gm-main{padding-top:104px}.gm-header{top:16px;width:calc(100% - 32px)}.gm-header__inner{padding:10px 12px 10px 18px;min-height:66px;gap:10px}.gm-header__brand .gm-brand{max-width:155px}.gm-header__brand svg{max-width:150px}.gm-studio-width{width:calc(100% - 40px)}.gm-studio-hero{margin:8px 8px 0;border-radius:25px;height:calc(100svh - 16px);min-height:720px;max-height:900px;padding:150px 16px 135px}.gm-studio-landscape{object-position:67% center}.gm-studio-hero h1{font-size:clamp(42px,11.2vw,76px);letter-spacing:-.055em;margin-bottom:24px}.gm-studio-hero__copy .gm-studio-eyebrow{font-size:9px;letter-spacing:.08em;max-width:260px;margin:0 auto 24px}.gm-studio-hero__copy>p:not(.gm-studio-eyebrow){font-size:16px;max-width:270px;margin:0 auto 28px}.gm-studio-actions{flex-direction:column;gap:12px}.gm-studio-hero-link{font-size:13px}.gm-studio-hero__bottom{bottom:25px;left:22px;right:22px;font-size:8px}.gm-studio-hero__bottom>span{max-width:90px}.gm-studio-hero__bottom>a{font-size:8px;gap:10px}.gm-studio-intro{padding-block:80px 55px}.gm-studio-intro h2{font-size:42px}.gm-studio-eyebrow{font-size:10px}.gm-studio-intro>p:last-child{font-size:16px}.gm-studio-story{grid-template-columns:1fr;border-radius:24px;min-height:0;margin-bottom:24px;position:relative;top:auto}.gm-studio-story__copy{padding:34px 28px}.gm-studio-story h2{font-size:35px}.gm-studio-story__copy .gm-studio-eyebrow{font-size:9px;margin-bottom:20px}.gm-studio-story__copy>p:not(.gm-studio-eyebrow){font-size:15px}.gm-studio-story__visual{min-height:340px}.gm-studio-device{height:310px;width:80%;margin-bottom:45px}.gm-studio-giant{font-size:150px;top:30px}.gm-studio-photo-label{font-size:9px;left:25px;bottom:22px}.gm-studio-duo{padding:0 10px 75px}.gm-studio-duo .gm-studio-device{height:220px;margin:0}.gm-studio-duo span{font-size:11px;margin-top:0}.gm-studio-pace{padding:35px 27px}.gm-studio-pace__number output{font-size:86px}.gm-studio-pace__result{font-size:14px}.gm-studio-catalog{padding-block:65px}.gm-studio-section-head{align-items:start;flex-direction:column;gap:24px;margin-bottom:28px}.gm-studio-section-head h2{font-size:38px}.gm-studio-section-head .gm-studio-eyebrow{font-size:9px}.gm-studio-section-head .gm-text-link{font-size:14px}.gm-studio-sports{gap:8px;margin-bottom:28px}.gm-studio-sports a{font-size:12px;padding:9px 15px}.gm-studio-journal{padding-block:65px}.gm-studio-reading article{grid-template-columns:25px 1fr;gap:15px;padding-block:26px}.gm-studio-reading h3{font-size:22px}.gm-studio-reading p{font-size:14px}.gm-studio-reading__index{font-size:12px}.gm-studio-reading__arrow{display:none}.gm-studio-tools{padding-block:65px}.gm-studio-tool-list{grid-template-columns:1fr}.gm-studio-tool-list a{font-size:15px;min-height:80px;gap:15px}.gm-studio-community{margin:0 8px 8px;border-radius:24px;min-height:520px;padding-inline:22px;background-position:65% center}.gm-studio-community h2{font-size:48px}.gm-studio-community p:not(.gm-studio-eyebrow){font-size:15px}.gm-studio-community__note{font-size:7px;right:20px}.gm-product-gallery{border-radius:24px}}
@media(max-width:360px){.gm-header__brand .gm-brand{max-width:130px}.gm-header__brand svg{max-width:130px}.gm-header__inner{padding-inline:12px}.gm-header__actions{gap:4px}.gm-studio-hero h1{font-size:39px}.gm-studio-story__copy{padding:30px 23px}.gm-studio-pace{padding-inline:23px}.gm-studio-pace__number output{font-size:76px}}
@media(max-width:360px){.gm-header__brand .gm-brand{max-width:145px;gap:6px}.gm-header__brand .gm-brand__mark{width:22px;height:22px}.gm-header__brand .gm-brand__community{font-size:9px;letter-spacing:.07em}.gm-studio-hero h1{font-size:37px}}
@media(prefers-reduced-motion:reduce){.gm-studio-story{position:relative;top:auto}.gm-studio-device,.gm-studio-hero__bottom>a span,.gm-studio-tool-list a>span:last-child{transition:none!important;transform:none!important}.gm-studio-story:hover .gm-studio-device{transform:none!important}}

/* assets/css/identity.css */
/* Original community identity and navigation. Vector assets remain sharp at every size. */
.gm-icon{fill:none}
.gm-brand__official{display:flex;flex-direction:column;align-items:center;gap:10px;width:158px}.gm-garmin-wordmark{display:block;width:100%;height:auto;aspect-ratio:786/113;fill:currentColor;background:transparent}.gm-brand__official .gm-brand__community{font:500 9px/1.2 var(--gm-font-body);letter-spacing:.18em;white-space:nowrap;color:var(--gm-text-muted)}.gm-footer .gm-brand__official{width:230px;gap:16px}.gm-footer .gm-brand__official .gm-brand__community{font-size:12px;color:#c8d0e0}
.gm-tool-privacy{border-left-color:var(--gm-accent)}.gm-tool-privacy svg{color:var(--gm-accent)}
.gm-brand{gap:10px}.gm-brand__mark{width:44px;height:44px;color:var(--gm-accent)}
.gm-brand__wordmark{font-weight:750;letter-spacing:-.055em;line-height:1.05}.gm-brand__tld{font-weight:650}.gm-brand__lockup{gap:5px}.gm-brand__community{font-size:9px;letter-spacing:.11em;line-height:1.2}.gm-brand__community:before{display:none}
.gm-header__brand .gm-brand{max-width:none;--gm-brand-size:26px;padding:0;margin:0;gap:9px}.gm-header__brand .gm-brand__mark{max-width:none;width:38px;height:38px}.gm-header__brand{flex-shrink:0}.gm-header__brand .gm-brand__community{font-size:8px;letter-spacing:.12em}
.gm-footer .gm-brand__mark{width:58px;height:58px}.gm-footer .gm-brand__community{font-size:10px}.gm-brand:hover .gm-brand__mark{transform:rotate(-7deg)}
.gm-desktop-nav{gap:14px}.gm-desktop-nav a{gap:7px;position:relative;white-space:nowrap;font-size:13px;transition:color .2s}.gm-nav-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;transition:transform .25s cubic-bezier(.2,.7,.2,1),color .2s}.gm-desktop-nav a:after{content:"";position:absolute;left:27px;right:0;bottom:5px;height:2px;border-radius:2px;background:var(--gm-accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}.gm-desktop-nav a:hover:after,.gm-desktop-nav a:focus-visible:after,.gm-desktop-nav a[aria-current]:after{transform:scaleX(1)}.gm-desktop-nav a[aria-current]{text-decoration:none}.gm-desktop-nav a:hover .gm-nav-icon,.gm-desktop-nav a:focus-visible .gm-nav-icon{transform:translateY(-2px);color:var(--gm-accent)}
.gm-mobile-menu nav a{justify-content:start;gap:15px;transition:background .2s,color .2s;border-radius:10px}.gm-mobile-menu nav a>.gm-nav-icon{width:22px;height:22px;color:var(--gm-accent)}.gm-mobile-menu nav a>.gm-nav-arrow{margin-left:auto;width:17px;height:17px;transition:transform .25s}.gm-mobile-menu nav a:hover,.gm-mobile-menu nav a:focus-visible{background:var(--gm-accent-soft);color:var(--gm-accent)}.gm-mobile-menu nav a:hover>.gm-nav-arrow{transform:translateX(4px)}
.gm-mobile-menu[open] nav,.gm-search-box[open] form{animation:gm-menu-enter .23s cubic-bezier(.2,.7,.2,1) both;transform-origin:top center}.gm-mobile-menu[open] nav a{animation:gm-menu-item .25s ease-out both}.gm-mobile-menu[open] nav a:nth-child(2){animation-delay:25ms}.gm-mobile-menu[open] nav a:nth-child(3){animation-delay:50ms}.gm-mobile-menu[open] nav a:nth-child(4){animation-delay:75ms}.gm-mobile-menu[open] nav a:nth-child(n+5){animation-delay:100ms}
.gm-mobile-menu summary svg{transition:transform .25s}.gm-mobile-menu[open] summary svg{transform:rotate(90deg)}
@keyframes gm-menu-enter{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}@keyframes gm-menu-item{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(min-width:1100px) and (max-width:1279px){.gm-header__inner{gap:18px}.gm-desktop-nav{gap:13px}.gm-header__cta{display:none}}
@media(min-width:768px) and (max-width:1099px){.gm-header__inner{gap:14px;padding-inline:20px}.gm-desktop-nav{gap:12px}.gm-desktop-nav a{font-size:12px;gap:5px}.gm-nav-icon{width:18px;height:18px}.gm-header__brand .gm-brand{--gm-brand-size:23px}.gm-header__brand .gm-brand__mark{width:32px;height:32px}}
@media(min-width:768px) and (max-width:919px){.gm-desktop-nav{display:none}.gm-mobile-menu{display:block}.gm-header__cta{display:inline-flex}}
@media(max-width:767px){.gm-header__brand .gm-brand{--gm-brand-size:24px;gap:7px}.gm-header__brand .gm-brand__mark{width:34px;height:34px}.gm-header__brand .gm-brand__community{font-size:7.5px;letter-spacing:.08em}.gm-header__brand .gm-brand__lockup{gap:4px}}
@media(max-width:360px){.gm-header__brand .gm-brand{--gm-brand-size:21px;gap:5px}.gm-header__brand .gm-brand__mark{width:29px;height:29px}.gm-header__brand .gm-brand__community{font-size:7px;letter-spacing:.06em}.gm-header__inner{gap:7px}.gm-header__actions{gap:3px}}
.gm-header__brand .gm-brand__official .gm-brand__community{font-size:9px;letter-spacing:.14em}.gm-header__brand .gm-brand__official{width:158px}@media(max-width:767px){.gm-header__brand .gm-brand__official{width:145px;gap:9px}}@media(max-width:360px){.gm-header__brand .gm-brand__official{width:126px;gap:8px}.gm-header__brand .gm-brand__official .gm-brand__community{font-size:8px;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.gm-mobile-menu[open] nav,.gm-mobile-menu[open] nav a,.gm-search-box[open] form{animation:none}.gm-nav-icon,.gm-desktop-nav a:after,.gm-nav-arrow,.gm-mobile-menu summary svg{transition:none!important;transform:none!important}.gm-brand:hover .gm-brand__mark{transform:none}}

/* assets/css/footer-compact.css */
/* Compact navigation: four aligned desktop columns; native disclosures on mobile. */
.gm-footer__nav .gm-footer__link{display:flex;min-height:32px;padding-block:5px;font-size:13px}
@media(min-width:768px){.gm-footer .gm-footer-group>summary{min-height:28px;margin-bottom:8px}}
@media(max-width:767px){.gm-footer__nav .gm-footer__link{min-height:44px;padding-block:8px;font-size:14px}}
.gm-footer{margin-top:48px;padding-block:36px 22px}.home .gm-footer{margin-top:0}
.gm-footer>.gm-container{max-width:1280px;padding-inline:32px}.gm-footer__top{grid-template-columns:180px minmax(0,1fr);gap:44px;padding-bottom:24px;border-bottom:0}.gm-footer__identity{gap:18px}.gm-footer .gm-brand__official{width:160px;gap:10px}.gm-footer .gm-brand__official .gm-brand__community{font-size:9px}.gm-footer__identity-note{margin:0;font-size:12px;line-height:1.7;color:#c8d0e0}
.gm-footer__nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.gm-footer-group{min-width:0}.gm-footer-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;min-height:32px;margin-bottom:12px}.gm-footer-group>summary::-webkit-details-marker,.gm-footer__disclaimer>summary::-webkit-details-marker{display:none}.gm-footer__heading{font-size:11px;letter-spacing:.07em;margin:0;color:#fff}.gm-footer-group>summary>span{font-size:17px;font-weight:400;color:#aab9d2;line-height:1;transition:transform .2s}.gm-footer-group[open]>summary>span{transform:rotate(45deg)}.gm-footer__list li+li{margin-top:0}.gm-footer__link{display:flex;align-items:center;min-height:36px;padding:6px 0;font-size:13px;line-height:1.4;color:#c8d0e0}.gm-footer__link:hover{color:#fff}
.gm-footer__disclaimer{padding:0;border-block:1px solid #3b4962}.gm-footer__disclaimer>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:46px;cursor:pointer;font-size:12px;color:#c8d0e0}.gm-footer__disclaimer>summary>span{font-size:18px;transition:transform .2s}.gm-footer__disclaimer[open]>summary>span{transform:rotate(45deg)}.gm-footer__disclaimer .gm-disclaimer{max-width:none;font-size:12px;line-height:1.7;color:#b5c2d7;margin:0;padding:2px 0 18px}
.gm-footer__bottom{padding-top:16px;gap:12px 24px;color:#b5c2d7;font-size:11px}.gm-footer__bottom p{margin:0;font-size:11px;line-height:1.6}.gm-footer__legal{gap:6px 20px}.gm-footer__legal a{display:inline-flex;align-items:center;min-height:32px;font-size:11px;color:#c8d0e0}.gm-footer summary:focus-visible{outline-color:#a7bfff;border-radius:4px}
@media(min-width:768px) and (max-width:1099px){.gm-footer__top{grid-template-columns:150px minmax(0,1fr);gap:26px}.gm-footer .gm-brand__official{width:145px}.gm-footer__nav{gap:18px}.gm-footer>.gm-container{padding-inline:24px}.gm-footer__link{font-size:12px}}
@media(max-width:767px){.gm-footer{padding-block:28px 18px;margin-top:36px}.gm-footer>.gm-container{padding-inline:22px}.gm-footer__top{grid-template-columns:1fr;gap:22px;padding-bottom:0}.gm-footer__identity{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px}.gm-footer .gm-brand__official{width:139px;gap:9px}.gm-footer .gm-brand__official .gm-brand__community{font-size:8px}.gm-footer__identity-note{font-size:11px;max-width:150px}.gm-footer__nav{grid-template-columns:1fr;gap:0}.gm-footer-group{border-top:1px solid #3b4962}.gm-footer-group>summary{min-height:48px;margin:0}.gm-footer__heading{font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:600}.gm-footer-group .gm-footer__list{padding:0 0 12px}.gm-footer__link{font-size:14px;min-height:44px}.gm-footer__disclaimer>summary{font-size:11px;min-height:46px}.gm-footer__bottom{display:block;padding-top:14px}.gm-footer__legal{display:flex;gap:0 18px;margin-top:8px}.gm-footer__legal a{min-height:44px;font-size:11px}.gm-footer__bottom p{font-size:10px}.gm-footer__disclaimer .gm-disclaimer{font-size:12px}}
@media(max-width:360px){.gm-footer>.gm-container{padding-inline:18px}.gm-footer__identity{gap:12px}.gm-footer .gm-brand__official{width:122px}.gm-footer__identity-note{font-size:10px}.gm-footer .gm-brand__official .gm-brand__community{font-size:7px}}
@media(prefers-reduced-motion:reduce){.gm-footer-group>summary>span,.gm-footer__disclaimer>summary>span{transition:none}}

/* assets/css/editorial.css */
/* Editorial photography stays readable, stable and distinct from product renders. */
.gm-card--editorial .gm-card__media{aspect-ratio:16/9;padding:0;overflow:hidden}
.gm-card--editorial .gm-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none;mix-blend-mode:normal;border-radius:0}
.gm-card--editorial:hover .gm-card__media img{transform:scale(1.025)}
.gm-article-photo{margin:28px 0 36px}
.gm-article-layout .gm-section{padding-top:32px}
.gm-article-layout .gm-byline{margin-top:0}
.gm-article-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.gm-article-photo figcaption{margin-top:10px;font-size:12px;line-height:1.6;color:var(--gm-text-muted)}
.gm-studio-reading article{grid-template-columns:180px 1fr 52px;gap:28px}
.gm-studio-reading__photo{display:block;overflow:hidden;border-radius:12px;aspect-ratio:16/9}
.gm-studio-reading__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gm-studio-reading article:hover .gm-studio-reading__photo img{transform:scale(1.025)}
@media(max-width:767px){.gm-studio-reading article{grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}.gm-studio-reading h3{font-size:19px}.gm-studio-reading p{font-size:13px}.gm-studio-reading__photo{margin-top:4px;aspect-ratio:1/1}.gm-article-photo{margin-block:24px}.gm-article-photo img{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.gm-card--editorial:hover .gm-card__media img,.gm-studio-reading article:hover .gm-studio-reading__photo img{transform:none}.gm-studio-reading__photo img{transition:none}}
@media(max-width:767px){.gm-article-layout .gm-pagehead{padding-block:24px 28px}.gm-article-layout .gm-breadcrumb__item:last-child{display:none}.gm-article-layout .gm-section{padding-top:24px}.gm-article-layout .gm-pagehead__title{font-size:30px}.gm-article-layout .gm-pagehead__lead{font-size:15px;line-height:1.6}}