/* =============================================================================
   RESONEO Shop - Design System (Prompt 2)
   Source unique de vérité : palette, typo, espacements, composants réutilisables.
   Tout le reste (storefront / narrator / inspector) consomme CES tokens.
   Pas de styles ad hoc dispersés : si un token manque, on l'ajoute ICI.
   ========================================================================== */

:root {
  /* --- Palette de marque -------------------------------------------------- */
  --rs-secondary: #223c52;          /* bleu RESONEO, ne change jamais (charte) */
  --rs-secondary-700: #1a2e3f;
  --rs-secondary-300: #5b7388;
  --rs-main: #0b795e;               /* dominante RESONEO, nuance AA avec blanc */
  --rs-main-light: #1ed9a4;
  --rs-main-600: #075f49;           /* survol sombre, nuance AA */
  --rs-main-100: #d6f3ec;           /* tint clair pour fonds doux */
  --rs-accent: #c94c16;             /* accent chaud AA avec texte blanc */
  --rs-accent-600: #a83b0e;         /* survol / ombre de l'accent */
  --rs-accent-100: #ffe7da;

  /* --- Neutres ------------------------------------------------------------ */
  --rs-ink: #16222e;                /* texte principal */
  --rs-ink-soft: #46586a;           /* texte secondaire */
  --rs-muted: #566d7f;              /* texte atténué AA sur surfaces claires */
  --rs-line: #e3e9ef;               /* bordures fines */
  --rs-bg: #f5f8fa;                 /* fond app (= --color-grey RESONEO) */
  --rs-desktop: #c2ccd6;            /* « bureau » derrière les 2 fenêtres simulées */
  --rs-surface: #ffffff;            /* cartes / surfaces */
  --rs-surface-2: #eef3f7;          /* surface secondaire */

  /* --- Statut de donnée (live / caché / mock / rag) ----------------------- */
  --rs-live: #0b713d;               /* vrai appel en direct, contraste AA */
  --rs-live-bg: #e4f6ec;
  --rs-cached: #7a5700;             /* snapshot daté, contraste AA */
  --rs-cached-bg: #fbf2dc;
  --rs-mock: #52697c;               /* donnée simulée, contraste AA */
  --rs-mock-bg: #eef1f4;
  --rs-rag: #6b53d6;                /* fondé sur doc interne */
  --rs-rag-bg: #ece8fb;

  /* --- Nouveauté d'une sous-étape (« ce bloc vient de changer ») ---------- */
  --rs-fresh: #f2b705;              /* jaune franc, lisible sur fond clair ET sombre */
  --rs-fresh-glow: rgba(242, 183, 5, 0.28);

  /* --- Maturité P / E / S ------------------------------------------------- */
  --rs-mat-p: #1f9d55;              /* Production */
  --rs-mat-e: #2563eb;              /* Expérimental constructible */
  --rs-mat-s: #9333ea;              /* Spéculatif utile */

  /* --- Inspecteur (skin dev sombre) -------------------------------------- */
  --rs-dev-bg: #0f1620;
  --rs-dev-bg-2: #16202c;
  --rs-dev-line: #243446;
  --rs-dev-ink: #d6e2ee;
  --rs-dev-ink-soft: #8aa0b5;
  --rs-dev-accent: #4fd1c5;
  --rs-dev-string: #9ece6a;
  --rs-dev-key: #7aa2f7;
  --rs-dev-num: #ff9e64;

  /* --- Typo --------------------------------------------------------------- */
  --rs-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --rs-fs-xs: 0.72rem;
  --rs-fs-sm: 0.82rem;
  --rs-fs-md: 0.94rem;
  --rs-fs-lg: 1.12rem;
  --rs-fs-xl: 1.5rem;
  --rs-fs-2xl: 2.1rem;

  /* --- Rayons / ombres / espacements ------------------------------------- */
  --rs-radius-sm: 6px;
  --rs-radius: 12px;
  --rs-radius-lg: 18px;
  --rs-radius-pill: 999px;
  --rs-shadow-sm: 0 1px 2px rgba(34, 60, 82, 0.08);
  --rs-shadow: 0 6px 20px rgba(34, 60, 82, 0.10);
  --rs-shadow-lg: 0 18px 50px rgba(34, 60, 82, 0.22);
  /* Ombres décalées RESONEO (look infographie) : pour cartes/boxes, sans bordure */
  --rs-shadow-card: 6px 6px 9px rgba(0, 0, 0, 0.10);
  --rs-shadow-card-deep: 10px 10px 20px rgba(0, 0, 0, 0.15);
  --rs-sp-1: 4px;
  --rs-sp-2: 8px;
  --rs-sp-3: 12px;
  --rs-sp-4: 16px;
  --rs-sp-5: 24px;
  --rs-sp-6: 32px;
  --rs-sp-7: 48px;

  /* --- Z-index (échelle unique) ------------------------------------------ */
  --rs-z-storefront: 1;
  --rs-z-inspector: 60;
  --rs-z-backdrop: 80;
  --rs-z-narrator: 90;
  --rs-z-tooltip: 120;

  /* --- Timings ------------------------------------------------------------ */
  --rs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rs-dur-fast: 140ms;
  --rs-dur: 240ms;
  --rs-dur-slow: 420ms;
}

/* =============================================================================
   Reset léger (pas de box-sizing:border-box, convention RESONEO)
   ========================================================================== */
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--rs-font);
  font-size: var(--rs-fs-md);
  color: var(--rs-ink);
  background: var(--rs-bg);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--rs-main-600); }

/* Accessibilité : focus visible homogène */
:focus-visible {
  outline: 3px solid var(--rs-main);
  outline-offset: 2px;
  border-radius: 4px;
}

.rs-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   Boutons
   ========================================================================== */
.rs-btn {
  display: inline-flex; align-items: center; gap: var(--rs-sp-2);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-surface-2);
  color: var(--rs-ink);
  font-size: var(--rs-fs-sm); font-weight: 600;
  transition: background var(--rs-dur-fast) var(--rs-ease),
              transform var(--rs-dur-fast) var(--rs-ease),
              box-shadow var(--rs-dur-fast) var(--rs-ease);
}
.rs-btn:hover { transform: translateY(-1px); box-shadow: var(--rs-shadow-sm); }
.rs-btn:active { transform: translateY(0); }
.rs-btn--primary { background: var(--rs-main); color: #fff; }
.rs-btn--primary:hover { background: var(--rs-main-600); }
.rs-btn--accent { background: var(--rs-accent); color: #fff; }
.rs-btn--accent:hover { background: var(--rs-accent-600); }
.rs-btn--ghost { background: transparent; border-color: var(--rs-line); }
.rs-btn--sm { padding: 5px 11px; font-size: var(--rs-fs-xs); }
.rs-btn--icon { padding: 8px; border-radius: var(--rs-radius-pill); justify-content: center; line-height: 1; gap: 0; }

/* =============================================================================
   Cartes
   ========================================================================== */
/* Convention RESONEO : pas de bordure sur les cartes/boxes, fond + rayon +
   ombre décalée seulement. */
.rs-card {
  background: var(--rs-surface);
  border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow-card);
  overflow: hidden;
}
.rs-card__body { padding: var(--rs-sp-4); }

/* =============================================================================
   Badges & chips
   ========================================================================== */
.rs-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-xs); font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.rs-badge--live   { color: var(--rs-live);   background: var(--rs-live-bg); }
.rs-badge--cached { color: var(--rs-cached); background: var(--rs-cached-bg); }
.rs-badge--mock   { color: var(--rs-mock);   background: var(--rs-mock-bg); }
.rs-badge--rag    { color: var(--rs-rag);    background: var(--rs-rag-bg); }

/* Pastille DÉMO (à côté du logo) */
.rs-demo-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--rs-accent);
  color: #fff;
  font-size: var(--rs-fs-xs); font-weight: 800; letter-spacing: 0.08em;
  border-radius: var(--rs-radius-sm);
  text-transform: uppercase;
}

/* Badges de maturité P / E / S */
.rs-maturity {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: var(--rs-fs-xs); font-weight: 800; color: #fff;
}
.rs-maturity--P { background: var(--rs-mat-p); }
.rs-maturity--E { background: var(--rs-mat-e); }
.rs-maturity--S { background: var(--rs-mat-s); }

/* Chips (filtres, facettes) */
.rs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-pill);
  background: var(--rs-surface);
  font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-ink-soft);
}
.rs-chip--active { background: var(--rs-main-100); color: var(--rs-main-600); border-color: var(--rs-main); }

/* =============================================================================
   Halo / spotlight (réutilisé par narrator pour les coachmarks)
   ========================================================================== */
.rs-halo {
  box-shadow: 0 0 0 4px rgba(16, 163, 127, 0.25), 0 0 0 9999px rgba(0,0,0,0);
  border-radius: var(--rs-radius);
  animation: rs-halo-pulse 1.6s var(--rs-ease) infinite;
}
@keyframes rs-halo-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,163,127,0.30); }
  50%      { box-shadow: 0 0 0 9px rgba(16,163,127,0.12); }
}

/* =============================================================================
   Pastille d'aide pédagogique (i) : composant transversal `infoTip`
   API JS : infoTip(key) → bouton + infobulle riche (contenu via i18n tips.*).
   Anti-fouillis : une seule infobulle ouverte à la fois (géré en JS).
   ========================================================================== */
.rs-infotip { display: inline-flex; position: relative; vertical-align: middle; }
.rs-infotip__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: var(--rs-main); color: #fff;
  font-size: 11px; font-weight: 800; font-style: normal;
  line-height: 1;
  box-shadow: var(--rs-shadow-sm);
  transition: transform var(--rs-dur-fast) var(--rs-ease), background var(--rs-dur-fast);
}
.rs-infotip__btn:hover { transform: scale(1.12); background: var(--rs-main-600); }
.rs-infotip--on-dark .rs-infotip__btn { background: var(--rs-dev-accent); color: var(--rs-dev-bg); }

/* Popover en position FIXE (viewport) : jamais rogné par un parent overflow:hidden
   (#chat, inspecteur, topbar…). La position exacte est calculée en JS à l'ouverture
   (infoTip → positionPop), avec repli dans le viewport. */
.rs-infotip__pop {
  position: fixed;
  z-index: var(--rs-z-tooltip);
  top: 0; left: 0;
  transform: translateY(-4px);
  width: min(300px, 92vw);
  background: var(--rs-surface);
  color: var(--rs-ink);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow-lg);
  padding: var(--rs-sp-4);
  text-align: left;
  font-weight: 400; font-size: var(--rs-fs-sm); line-height: 1.45;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--rs-dur) var(--rs-ease), transform var(--rs-dur) var(--rs-ease), visibility var(--rs-dur);
}
.rs-infotip.is-open .rs-infotip__pop,
.rs-infotip__pop.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
/* Skin dev (inspecteur) : le popover est porté dans <body>, on le cible donc par
   classe et non par ancêtre #inspector. */
.rs-infotip__pop--on-dark { background: var(--rs-dev-bg-2); color: var(--rs-dev-ink); border-color: var(--rs-dev-line); }

.rs-infotip__title { font-weight: 800; font-size: var(--rs-fs-sm); margin-bottom: 6px; color: var(--rs-secondary); }
.rs-infotip__row { margin-top: 6px; }
.rs-infotip__row b { display: block; font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rs-muted); }
.rs-infotip__what  b { color: var(--rs-main-600); }
.rs-infotip__why   b { color: var(--rs-secondary-300); }
.rs-infotip__limit b { color: var(--rs-accent); }

/* =============================================================================
   Switch segmenté générique (modes de vue, langue)
   ========================================================================== */
.rs-segment {
  display: inline-flex; align-items: center;
  background: var(--rs-surface-2);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-pill);
  padding: 3px;
  gap: 2px;
}
.rs-segment__opt {
  border: none; background: transparent;
  padding: 5px 12px; border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-xs); font-weight: 700; color: var(--rs-ink-soft);
  transition: background var(--rs-dur-fast) var(--rs-ease), color var(--rs-dur-fast);
}
.rs-segment__opt[aria-pressed="true"],
.rs-segment__opt.is-active { background: var(--rs-surface); color: var(--rs-secondary); box-shadow: var(--rs-shadow-sm); }

/* =============================================================================
   Utilitaires de mise en scène (anti-fouillis : atténuer le hors-focus)
   ========================================================================== */
.rs-dimmed { filter: saturate(0.7) brightness(0.97); opacity: 0.55; transition: opacity var(--rs-dur) var(--rs-ease); }
.rs-elevate { position: relative; z-index: var(--rs-z-backdrop) ; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}