/* =============================================================================
   RESONEO Shop - Skin storefront (grand public, clair, crédible)
   Niveau de lecture 1/3 : shopper. S'appuie sur les tokens du design-system.
   ========================================================================== */

/* --- Grille générale de l'app : topbar / chat / corps ----------------------- */
/* Métaphore « deux fenêtres » : la barre RESONEO coiffe un bureau (gris) sur
   lequel flottent DEUX fenêtres distinctes, l'agent IA (haut) et le site
   marchand (bas), chacune avec son propre chrome, sa propre ombre, ses coins
   arrondis. On comprend ainsi qu'on simule deux applications séparées. */
#app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
  background: var(--rs-desktop);
}

/* --- Barre globale (contrôles transversaux) -------------------------------- */
.app-topbar {
  display: flex; align-items: center; gap: var(--rs-sp-4);
  padding: 10px var(--rs-sp-5);
  background: var(--rs-secondary);
  color: #fff;
}
/* Le logo de marque est gris foncé + rouge sur fond transparent : il lui faut
   une pastille claire pour rester lisible sur la barre sombre. Même parti que le
   hero-logo du gabarit d'infographie RESONEO (fond blanc, rayon, respiration),
   plutôt qu'un filtre qui écraserait le rouge de la marque. */
.app-topbar__brand {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  background: #fff; border-radius: 10px;
}
.app-topbar__logo { height: 22px; width: auto; display: block; }
.app-topbar__spacer { flex: 1; }
.app-topbar .rs-segment { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.app-topbar .rs-segment__opt { color: rgba(255,255,255,0.78); }
.app-topbar .rs-segment__opt.is-active { background: #fff; color: var(--rs-secondary); }
.app-topbar__group { display: inline-flex; align-items: center; gap: 8px; }
/* Drapeaux du switch de langue : convention des infographies RESONEO (pastille
   ronde, langue inactive en retrait). Pas de bordure : un halo blanc marque la
   langue active, lisible sur la barre sombre. */
.lang-toggle { display: inline-flex; align-items: center; gap: 8px; }
.lang-flag {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  cursor: pointer; opacity: 0.55;
  transition: opacity var(--rs-dur-fast) var(--rs-ease),
              transform var(--rs-dur-fast) var(--rs-ease),
              box-shadow var(--rs-dur-fast) var(--rs-ease);
}
.lang-flag svg { width: 26px; height: 26px; border-radius: 50%; display: block; }
.lang-flag:hover { opacity: 0.9; transform: scale(1.06); }
.lang-flag.is-active { opacity: 1; box-shadow: 0 0 0 2px #fff; }
/* Lien de navigation de la barre globale (Méthodologie) : un VRAI <a> vers son
   ancre de route (#/methodo), donc ouvrable en nouvel onglet et copiable, et non
   un bouton. Même poids visuel que la pastille Outils, sans le cadre. */
.app-topbar__link {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: var(--rs-radius-pill);
  background: transparent; color: rgba(255, 255, 255, 0.86);
  font-family: inherit; font-size: var(--rs-fs-sm); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background var(--rs-dur-fast) var(--rs-ease), color var(--rs-dur-fast) var(--rs-ease);
}
.app-topbar__link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Route courante (classe posée par router.js:syncNav sur tout [data-route]). */
.app-topbar__link.is-active { background: #fff; color: var(--rs-secondary); }
.app-topbar__label { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); }
/* Boutons fantômes sur la barre sombre : texte/bordure clairs (sinon illisibles). */
.app-topbar .rs-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.28); background: transparent; }
.app-topbar .rs-btn--ghost:hover { background: rgba(255,255,255,0.10); }
.app-topbar .rs-btn--ghost[aria-pressed="true"] { background: #fff; color: var(--rs-secondary); border-color: #fff; }

/* --- Zone storefront = FENÊTRE « navigateur » ------------------------------- */
#storefront-zone {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  margin: 0 var(--rs-sp-4) var(--rs-sp-4);
  background: var(--rs-surface);
  border-radius: 14px;
  box-shadow: var(--rs-shadow-lg);
  overflow: hidden;
}

/* Chrome de fenêtre navigateur (pastilles + barre d'adresse) */
.browser-bar {
  display: flex; align-items: center; gap: var(--rs-sp-4);
  padding: 9px var(--rs-sp-4);
  background: var(--rs-surface-2);
  border-bottom: 1px solid var(--rs-line);
}
.browser-bar__url {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1; max-width: 420px;
  padding: 5px 14px;
  background: var(--rs-surface);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-xs); color: var(--rs-ink-soft);
  font-family: var(--rs-mono);
}
.browser-bar__lock { font-size: 0.85em; opacity: 0.7; }
.browser-bar__host { color: var(--rs-ink); }

/* En-tête marchand */
.shop-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--rs-sp-4);
  padding: var(--rs-sp-4) var(--rs-sp-5);
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-line);
}
.shop-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.shop-logo__img { height: 28px; width: auto; display: block; }

.shop-search { flex: 1; position: relative; max-width: 520px; }
.shop-search input {
  width: 100%; padding: 11px 16px 11px 40px;
  border: 1px solid var(--rs-line); border-radius: var(--rs-radius-pill);
  background: var(--rs-surface-2); font-size: var(--rs-fs-sm); color: var(--rs-ink);
}
.shop-search input:focus { background: var(--rs-surface); }
.shop-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--rs-muted); }

.shop-cart { position: relative; }
.shop-cart__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--rs-accent); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: var(--rs-radius-pill);
}
.shop-cart__count.is-bump { animation: cart-bump 0.4s var(--rs-ease); }
@keyframes cart-bump { 0%,100%{transform:scale(1)} 40%{transform:scale(1.4)} }

/* Navigation catégories (routing) */
.shop-nav {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  padding: 8px var(--rs-sp-5);
  background: var(--rs-surface); border-bottom: 1px solid var(--rs-line);
  overflow-x: auto;
}
.shop-nav a {
  padding: 6px 12px; border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-ink-soft);
  text-decoration: none; white-space: nowrap;
}
.shop-nav a:hover { background: var(--rs-surface-2); }
.shop-nav a.is-active { background: var(--rs-secondary); color: #fff; }

/* --- Conteneur de pages (routing client) ----------------------------------- */
#storefront {
  flex: 1; padding: var(--rs-sp-5); overflow-y: auto;
}
.page { animation: page-in var(--rs-dur) var(--rs-ease); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page__head { margin-bottom: var(--rs-sp-5); }
.page__title { font-size: var(--rs-fs-2xl); color: var(--rs-secondary); letter-spacing: -0.02em; }
.page__sub { color: var(--rs-ink-soft); margin-top: 4px; }

/* Grille produits */
.product-grid {
  display: grid; gap: var(--rs-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.product-card { display: flex; flex-direction: column; transition: transform var(--rs-dur-fast) var(--rs-ease), box-shadow var(--rs-dur-fast) var(--rs-ease); }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow-card-deep); }
.product-card__media { aspect-ratio: 1 / 1; background: var(--rs-surface-2); position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.product-card:hover .product-card__media img { transform: scale(1.04); transition: transform var(--rs-dur) var(--rs-ease); }
.product-card__body { padding: var(--rs-sp-3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card__brand { font-size: var(--rs-fs-xs); color: var(--rs-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.product-card__title { font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__price { margin-top: auto; font-weight: 800; color: var(--rs-secondary); font-size: var(--rs-fs-md); }
.product-card.is-highlighted { outline: 3px solid var(--rs-main); outline-offset: 2px; }

/* Placeholder visuel élégant (cf. catalogues mock, image="PLACEHOLDER") */
.media-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center; gap: 6px;
  background:
    repeating-linear-gradient(45deg, var(--rs-surface-2) 0 12px, #e7eef3 12px 24px);
  color: var(--rs-muted); text-align: center; padding: 12px;
}
.media-placeholder svg { opacity: 0.5; }
.media-placeholder span { font-size: var(--rs-fs-xs); font-weight: 600; }

/* Vitrine catégories (accueil) */
.category-grid {
  display: grid; gap: var(--rs-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.category-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--rs-sp-5); text-decoration: none;
  background: var(--rs-surface);
  border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-card);
  transition: transform var(--rs-dur-fast) var(--rs-ease), box-shadow var(--rs-dur-fast);
}
.category-tile:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow-card-deep); }
.category-tile__name { font-weight: 800; color: var(--rs-secondary); }
.category-tile__meta { font-size: var(--rs-fs-xs); color: var(--rs-muted); }

.other-sites { margin-top: var(--rs-sp-4); font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); }
.other-sites__label { font-weight: 600; }
.other-sites__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
}

/* Carte de contenu (render_card, détaillée au Prompt 5) */
.content-card {
  margin-top: var(--rs-sp-4);
  background: linear-gradient(180deg, #fff, var(--rs-main-100));
}

/* Placeholder de route (stub avant le Prompt 5) */
.route-stub {
  display: grid; place-items: center; gap: 8px;
  min-height: 40vh; text-align: center; color: var(--rs-ink-soft);
}
.route-stub code { font-family: var(--rs-mono); background: var(--rs-surface-2); padding: 3px 8px; border-radius: 6px; }

/* =============================================================================
   Zone Chat (haut, repliable) - skin grand public
   ========================================================================== */
/* FENÊTRE de l'agent : cadrage layout (le SKIN sombre ChatGPT est dans chat.css) */
#chat {
  /* Marge basse = espace visible entre la fenêtre agent et la fenêtre marchand */
  margin: var(--rs-sp-4) var(--rs-sp-4) var(--rs-sp-4);
  border-radius: 14px;
  box-shadow: var(--rs-shadow-lg);
  transition: max-height var(--rs-dur-slow) var(--rs-ease);
  /* Colonne flex : le fil prend l'espace flexible et défile EN INTERNE ; la
     barre et le champ de la bibliothèque restent toujours visibles (sinon le
     fil rempli pousse le champ hors de la fenêtre → cul-de-sac). */
  display: flex; flex-direction: column;
  max-height: 40vh; overflow: hidden;
}
#app.chat-collapsed #chat { max-height: 48px; }
.chat-bar {
  display: flex; align-items: center; gap: var(--rs-sp-3);
  padding: 9px var(--rs-sp-4); border-bottom: 1px solid var(--rs-line);
}

/* --- Pastilles de fenêtre (chrome macOS) partagées agent + navigateur ------- */
.win-dots { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.win-dots i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  background: #c9ced4;
}
.win-dots i:nth-child(1) { background: #ff5f57; }
.win-dots i:nth-child(2) { background: #febc2e; }
.win-dots i:nth-child(3) { background: #28c840; }
.chat-bar__title { font-weight: 700; font-size: var(--rs-fs-sm); color: var(--rs-secondary); }
.chat-bar__persona { font-size: var(--rs-fs-xs); color: var(--rs-muted); }
.chat-bar__spacer { flex: 1; }
/* flex:1 + min-height:0 → le fil occupe l'espace restant et défile en interne,
   sans repousser le champ de la bibliothèque hors de la fenêtre. */
.chat-log { flex: 1 1 auto; min-height: 0; padding: var(--rs-sp-4) var(--rs-sp-5); overflow-y: auto; }
/* Aucune conversation en cours : le fil se replie (boîte compacte, épurée) ;
   seuls la barre et le champ de la bibliothèque restent visibles. */
.chat-log:empty { padding: 0; flex: 0 0 auto; }
#app.chat-collapsed .chat-log { display: none; }
#prompt-library { flex: 0 0 auto; }

/* =============================================================================
   Responsive (3 breakpoints, convention RESONEO)
   ========================================================================== */
@media (max-width: 1024px) {
  #storefront { padding: var(--rs-sp-4); }
}
@media (max-width: 768px) {
  .app-topbar { flex-wrap: wrap; gap: var(--rs-sp-2) var(--rs-sp-3); padding: 8px var(--rs-sp-4); }
  .app-topbar__spacer { flex-basis: 100%; height: 0; }
  .app-topbar__label { display: none; }
  .shop-header { flex-wrap: wrap; gap: var(--rs-sp-2) var(--rs-sp-3); }
  .shop-search { order: 3; flex-basis: 100%; max-width: none; }
  #chat { max-height: 32vh; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
  .page__title { font-size: var(--rs-fs-xl); }
  .shop-logo__img { height: 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   PROMPT 5 - Storefront enrichi : pages, cartes de contenu, badges, overlay
   ========================================================================== */

/* --- Accueil : hero + vitrine catégories ----------------------------------- */
.shop-hero {
  display: flex; flex-direction: column; gap: var(--rs-sp-3);
  padding: var(--rs-sp-6) var(--rs-sp-5);
  margin-bottom: var(--rs-sp-5);
  border-radius: var(--rs-radius-lg);
  background: linear-gradient(135deg, var(--rs-secondary), var(--rs-main-600));
  color: #fff;
}
.shop-hero__title { font-size: var(--rs-fs-2xl); letter-spacing: -0.02em; line-height: 1.1; max-width: 22ch; }
/* Pitch grand public (sans jargon) : accroche principale, plus lisible que la
   sous-ligne technique qui mentionne « WebMCP ». */
.shop-hero__pitch { font-size: var(--rs-fs-lg); line-height: 1.45; color: #fff; max-width: 56ch; }
.shop-hero__sub { font-size: var(--rs-fs-sm); color: rgba(255,255,255,0.78); max-width: 52ch; }
.shop-hero__cta { align-self: flex-start; margin-top: var(--rs-sp-2); }
.section-title { font-size: var(--rs-fs-lg); color: var(--rs-secondary); margin-bottom: var(--rs-sp-3); }

.category-tile__strip { display: flex; gap: 4px; margin-bottom: 8px; }
.category-tile__thumb {
  width: 33%; aspect-ratio: 1/1; border-radius: var(--rs-radius-sm);
  overflow: hidden; background: var(--rs-surface-2);
}
.category-tile__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.category-tile__thumb .media-placeholder svg { width: 18px; height: 18px; }
.category-tile__thumb .media-placeholder span { display: none; }

/* --- Barre de résultats (tri + facettes) ----------------------------------- */
.results-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rs-sp-3);
  flex-wrap: wrap; margin-bottom: var(--rs-sp-4);
}
.results-toolbar__left { display: flex; align-items: center; gap: var(--rs-sp-3); flex-wrap: wrap; }
.results-count { font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); font-weight: 600; }
.facet-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.facet-chip { cursor: pointer; }
.facet-chip__x { font-weight: 800; opacity: 0.7; }
.facet-chip:hover .facet-chip__x { opacity: 1; }
.results-sort { display: inline-flex; align-items: center; gap: 8px; }
.results-sort__label { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rs-muted); }
.results-sort__select {
  font: inherit; font-size: var(--rs-fs-sm); font-weight: 600;
  padding: 6px 10px; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-pill);
  background: var(--rs-surface); color: var(--rs-ink);
}
.results-empty { color: var(--rs-muted); font-style: italic; padding: var(--rs-sp-5) 0; }

/* Apparition échelonnée des cartes produit (effet « les résultats apparaissent ») */
.product-grid .product-card { animation: card-in var(--rs-dur) var(--rs-ease) both; animation-delay: var(--stagger, 0ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Slot de badges sur carte produit */
.shop-badge-slot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; }
.product-card__add { align-self: stretch; justify-content: center; margin-top: 6px; }

/* --- Badge Nutri-Score lettre (A→E) ---------------------------------------- */
.nutri-letter {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--rs-radius-sm);
  font-weight: 800; color: #fff; font-size: var(--rs-fs-sm); line-height: 1;
}
.nutri-letter--A { background: #1e8f4e; }
.nutri-letter--B { background: #7ac043; color: #14321d; }
.nutri-letter--C { background: #f5c518; color: #4a3b00; }
.nutri-letter--D { background: #ef8a3c; }
.nutri-letter--E { background: #e02b2b; }

/* --- Badge générique posé sur fiche (apply_badge) -------------------------- */
.shop-badge-wrap { display: inline-flex; align-items: center; gap: 5px; }
.shop-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--rs-radius-pill);
  background: var(--rs-main-100); color: var(--rs-main-600);
  font-size: var(--rs-fs-xs); font-weight: 800;
}
.shop-badge--recall { background: var(--rs-accent-100); color: #b4380f; }
.shop-badge--pop { animation: badge-pop 0.45s var(--rs-ease); }
@keyframes badge-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* --- Fiche produit --------------------------------------------------------- */
.shop-back { display: inline-block; margin-bottom: var(--rs-sp-3); font-weight: 600; text-decoration: none; color: var(--rs-ink-soft); }
.shop-back:hover { color: var(--rs-main-600); }
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--rs-sp-6); align-items: start; }
.product-detail__media {
  aspect-ratio: 1/1; background: var(--rs-surface);
  border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-card);
  overflow: hidden; position: relative;
}
.product-detail__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--rs-sp-5); }
.product-detail__info { display: flex; flex-direction: column; gap: var(--rs-sp-3); }
.product-detail__brand { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rs-muted); }
.product-detail__title { font-size: var(--rs-fs-xl); color: var(--rs-secondary); letter-spacing: -0.01em; }
.product-detail__badges { gap: 8px; }
.product-detail__price { font-size: var(--rs-fs-2xl); font-weight: 800; color: var(--rs-secondary); }
.product-detail__stock { color: var(--rs-live); font-weight: 600; font-size: var(--rs-fs-sm); }
.product-detail__add { align-self: flex-start; }
.product-detail__spec-title { font-size: var(--rs-fs-md); color: var(--rs-secondary); margin-top: var(--rs-sp-3); }
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--rs-sp-4); font-size: var(--rs-fs-sm); }
.spec-list dt { color: var(--rs-muted); text-transform: capitalize; }
.spec-list dd { color: var(--rs-ink); font-weight: 600; }

/* --- Panier ---------------------------------------------------------------- */
.cart-empty { color: var(--rs-muted); font-style: italic; margin-bottom: var(--rs-sp-4); }
.cart-list { display: flex; flex-direction: column; gap: var(--rs-sp-3); margin-bottom: var(--rs-sp-4); }
.cart-row { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: var(--rs-sp-4); align-items: center; padding: var(--rs-sp-3); }
.cart-row__media { width: 64px; height: 64px; border-radius: var(--rs-radius-sm); overflow: hidden; background: var(--rs-surface-2); }
.cart-row__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-row__title { font-weight: 600; font-size: var(--rs-fs-sm); }
.cart-row__brand { font-size: var(--rs-fs-xs); color: var(--rs-muted); }
.cart-row__qty { display: inline-flex; align-items: center; gap: 8px; }
.cart-row__qtyval { font-weight: 800; min-width: 18px; text-align: center; }
.cart-row__price { font-weight: 800; color: var(--rs-secondary); }
.cart-row__remove { border: none; background: transparent; color: var(--rs-muted); font-size: var(--rs-fs-md); padding: 4px; }
.cart-row__remove:hover { color: var(--rs-accent); }
.cart-foot { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--rs-sp-4); padding-top: var(--rs-sp-3); border-top: 2px solid var(--rs-line); }
.cart-foot__label { font-size: var(--rs-fs-md); color: var(--rs-ink-soft); }
.cart-foot__total { font-size: var(--rs-fs-xl); font-weight: 800; color: var(--rs-secondary); }

/* --- Méthodologie ---------------------------------------------------------- */
.methodo-intro { max-width: 64ch; margin-bottom: var(--rs-sp-5); }
.methodo-glossary { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--rs-sp-3) var(--rs-sp-5); max-width: 760px; }
.methodo-glossary dt { font-weight: 800; color: var(--rs-secondary); }
.methodo-glossary dd { color: var(--rs-ink-soft); }

/* =============================================================================
   Cartes de contenu (render_card) : chrome commun + templates
   ========================================================================== */
.content-card { margin: 0 0 var(--rs-sp-4); box-shadow: var(--rs-shadow-card-deep); }
.content-card--enter { opacity: 0; transform: translateY(-8px); }
.content-card { transition: opacity var(--rs-dur) var(--rs-ease), transform var(--rs-dur) var(--rs-ease); }
.content-card__head {
  display: flex; align-items: center; gap: 8px;
  padding: var(--rs-sp-3) var(--rs-sp-4);
  background: linear-gradient(180deg, var(--rs-main-100), #fff);
  border-bottom: 1px solid var(--rs-line);
}
.content-card__title { font-size: var(--rs-fs-md); color: var(--rs-secondary); }
.content-card__spacer { flex: 1; }
.content-card__close { border: none; background: transparent; color: var(--rs-muted); font-size: var(--rs-fs-md); padding: 2px 6px; border-radius: var(--rs-radius-sm); }
.content-card__close:hover { color: var(--rs-ink); background: var(--rs-surface-2); }
.content-card__body { padding: var(--rs-sp-4); }
.content-card__link { display: inline-block; margin-top: var(--rs-sp-3); font-weight: 600; }

/* Template nutriscore_comparison */
.nutri-compare { display: flex; align-items: center; justify-content: center; gap: var(--rs-sp-5); }
.nutri-compare__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nutri-compare__col .nutri-letter { width: 44px; height: 44px; font-size: var(--rs-fs-lg); border-radius: var(--rs-radius); }
.nutri-compare__label { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rs-muted); }
.nutri-compare__arrow { font-size: var(--rs-fs-xl); color: var(--rs-main); font-weight: 800; }
.nutri-suggested {
  display: grid; grid-template-columns: auto 56px 1fr auto; align-items: center; gap: var(--rs-sp-3);
  margin-top: var(--rs-sp-4); padding: var(--rs-sp-3); text-decoration: none;
  background: var(--rs-surface-2); border-radius: var(--rs-radius); color: var(--rs-ink);
}
.nutri-suggested:hover { background: var(--rs-main-100); }
.nutri-suggested__label { font-size: var(--rs-fs-xs); font-weight: 700; color: var(--rs-main-600); text-transform: uppercase; letter-spacing: 0.03em; }
.nutri-suggested__media { width: 56px; height: 56px; border-radius: var(--rs-radius-sm); overflow: hidden; background: #fff; }
.nutri-suggested__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.nutri-suggested__title { font-weight: 600; font-size: var(--rs-fs-sm); }
.nutri-suggested__price { font-weight: 800; color: var(--rs-secondary); }

/* Template repairability (jauge) */
.gauge { height: 14px; border-radius: var(--rs-radius-pill); background: var(--rs-surface-2); overflow: hidden; }
.gauge__fill { height: 100%; border-radius: var(--rs-radius-pill); transition: width var(--rs-dur-slow) var(--rs-ease); }
.gauge__fill[data-level="good"] { background: var(--rs-live); }
.gauge__fill[data-level="mid"]  { background: #f5c518; }
.gauge__fill[data-level="low"]  { background: var(--rs-accent); }
.gauge__value { margin-bottom: 8px; }
.gauge__value strong { font-size: var(--rs-fs-xl); color: var(--rs-secondary); }
.gauge__max { color: var(--rs-muted); font-size: var(--rs-fs-sm); margin-left: 4px; }

/* Template guide */
.guide-steps { margin: 0; padding-left: var(--rs-sp-5); display: flex; flex-direction: column; gap: 8px; }
.guide-steps__title { display: block; }

/* Template comparison_table */
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--rs-fs-sm); }
.compare-table th, .compare-table td { padding: 8px 10px; border-bottom: 1px solid var(--rs-line); text-align: left; }
.compare-table thead th { color: var(--rs-secondary); font-weight: 800; }
.compare-table tbody th { color: var(--rs-ink-soft); font-weight: 600; text-transform: capitalize; }

/* =============================================================================
   Overlay explicatif plein cadre (show_overlay)
   ========================================================================== */
.shop-overlay {
  position: absolute; inset: 0; z-index: var(--rs-z-backdrop);
  display: grid; place-items: center; padding: var(--rs-sp-5);
  background: rgba(15, 22, 32, 0.55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--rs-dur) var(--rs-ease);
}
.shop-overlay.is-open { opacity: 1; }
.shop-overlay__box {
  max-width: 520px; text-align: center;
  background: var(--rs-surface); border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-lg); padding: var(--rs-sp-6);
  display: flex; flex-direction: column; gap: var(--rs-sp-3);
  transform: translateY(8px); transition: transform var(--rs-dur) var(--rs-ease);
}
.shop-overlay.is-open .shop-overlay__box { transform: none; }
.shop-overlay__title { font-size: var(--rs-fs-xl); color: var(--rs-secondary); }
.shop-overlay__text { color: var(--rs-ink-soft); }
.shop-overlay__close { align-self: center; margin-top: var(--rs-sp-2); }

/* =============================================================================
   Toasts (confirmation human-in-the-loop : ajout panier)
   ========================================================================== */
#shop-toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: var(--rs-z-tooltip); display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.shop-toast {
  background: var(--rs-secondary); color: #fff;
  padding: 10px 18px; border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-sm); font-weight: 600; box-shadow: var(--rs-shadow-lg);
  opacity: 0; transform: translateY(12px); transition: opacity var(--rs-dur) var(--rs-ease), transform var(--rs-dur) var(--rs-ease);
}
.shop-toast.is-in { opacity: 1; transform: none; }

/* =============================================================================
   Animation du moteur de recherche interne (run_search / recherche manuelle)
   ========================================================================== */
.shop-search.is-searching input { box-shadow: 0 0 0 3px var(--rs-main-100); border-color: var(--rs-main); }
.shop-search.is-searching .shop-search__icon { animation: search-spin 0.9s var(--rs-ease); color: var(--rs-main); }
@keyframes search-spin { 0% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(360deg); } }

/* --- Responsive : fiche produit & panier ----------------------------------- */
@media (max-width: 768px) {
  .product-detail { grid-template-columns: 1fr; gap: var(--rs-sp-4); }
  .cart-row { grid-template-columns: 52px 1fr auto; row-gap: 8px; }
  .cart-row__media { width: 52px; height: 52px; }
  .cart-row__qty { grid-column: 2 / 4; justify-self: start; }
  .nutri-suggested { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* =============================================================================
   Carte rag_answer : réponse RAG sourcée (Prompt 10B)
   ========================================================================== */
.content-card[data-template="rag_answer"] .content-card__head { background: var(--rs-rag-bg); }
.content-card[data-template="rag_answer"] .content-card__title { color: var(--rs-rag); }
.rag-answer__text p { margin: 0 0 var(--rs-sp-2); color: var(--rs-ink); line-height: 1.5; }
.rag-answer__text p:first-child { font-weight: 600; }
.rag-answer__disclaimer {
  display: flex; gap: var(--rs-sp-2); align-items: flex-start;
  margin: var(--rs-sp-3) 0; padding: var(--rs-sp-3);
  border-radius: var(--rs-radius-sm);
  background: var(--rs-cached-bg); color: var(--rs-ink); font-size: var(--rs-fs-sm);
}
.rag-answer__disclaimer-icon { flex: none; }
.rag-answer__src-title {
  margin-top: var(--rs-sp-3); font-size: var(--rs-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--rs-rag);
}
.rag-answer__sources { list-style: none; margin: var(--rs-sp-2) 0 0; padding: 0; display: grid; gap: 6px; }
.rag-answer__source {
  display: flex; align-items: center; gap: var(--rs-sp-3);
  padding: 6px var(--rs-sp-3); border-radius: var(--rs-radius-sm);
  background: var(--rs-rag-bg);
}
.rag-answer__source-link { flex: 1; font-weight: 600; font-size: var(--rs-fs-sm); color: var(--rs-rag); text-decoration: none; }
.rag-answer__source-link:hover { text-decoration: underline; }
.rag-answer__score {
  flex: none; font-family: var(--rs-mono); font-size: var(--rs-fs-xs);
  color: var(--rs-rag); background: var(--rs-rag-bg);
  border-radius: var(--rs-radius-pill); padding: 1px 8px;
}
.rag-answer__note { margin-top: var(--rs-sp-3); font-size: var(--rs-fs-xs); color: var(--rs-muted); }

/* =============================================================================
   Cartes pharmacie (openFDA, live) & électroménager (snapshot, caché) - Prompt 11
   ========================================================================== */
/* Briques communes */
.card-note { margin: var(--rs-sp-2) 0 0; font-size: var(--rs-fs-xs); color: var(--rs-muted); font-style: italic; }
.card-source { margin: var(--rs-sp-3) 0 0; font-size: var(--rs-fs-xs); color: var(--rs-ink-soft); }
.card-source__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.card-source__link { color: var(--rs-secondary); font-weight: 600; }
.drug-meta { margin: 0 0 var(--rs-sp-3); font-weight: 600; color: var(--rs-secondary); }

/* Pharmacie : skin live (teal), contraste avec le RAG (violet) */
.content-card[data-template="drug_interactions"] .content-card__head,
.content-card[data-template="active_ingredient"] .content-card__head { background: var(--rs-live-bg); }
.content-card[data-template="drug_interactions"] .content-card__title,
.content-card[data-template="active_ingredient"] .content-card__title { color: var(--rs-live); }

.drug-interactions__text {
  max-height: 280px; overflow: auto; padding: var(--rs-sp-3);
  border-radius: var(--rs-radius-sm);
  background: var(--rs-surface-2); font-size: var(--rs-fs-sm); line-height: 1.55;
}
.drug-interactions__text p { margin: 0 0 var(--rs-sp-2); }
.drug-interactions__text p:last-child { margin-bottom: 0; }
.kw-hit { background: #fff3bf; color: #5a4500; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.drug-kw {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--rs-sp-3);
  padding: 4px 12px; border-radius: var(--rs-radius-pill); font-size: var(--rs-fs-sm); font-weight: 600;
}
.drug-kw.is-found { background: var(--rs-live-bg); color: var(--rs-live); }
.drug-kw.is-none { background: var(--rs-mock-bg); color: var(--rs-ink-soft); }

/* Statut de rappel */
.recall-banner {
  display: flex; align-items: center; gap: var(--rs-sp-2);
  padding: var(--rs-sp-3); border-radius: var(--rs-radius-sm); font-weight: 700;
  margin-bottom: var(--rs-sp-3);
}
.recall-banner.is-recalled { background: var(--rs-accent-100); color: #b4380f; }
.recall-banner.is-clear { background: var(--rs-live-bg); color: var(--rs-live); }
.recall-banner__icon { font-size: var(--rs-fs-lg); }

/* Pièces détachées : scénario phare (gros horizon) */
.content-card[data-template="spare_parts"] .content-card__head { background: var(--rs-cached-bg); }
.content-card[data-template="spare_parts"] .content-card__title { color: var(--rs-cached); }
.spare-horizon {
  display: flex; align-items: baseline; gap: var(--rs-sp-2);
  padding: var(--rs-sp-3); margin-bottom: var(--rs-sp-3);
  background: var(--rs-cached-bg); border-radius: var(--rs-radius);
}
.spare-horizon__num { font-size: var(--rs-fs-2xl); color: var(--rs-cached); line-height: 1; }
.spare-horizon__unit { font-size: var(--rs-fs-md); color: var(--rs-ink-soft); font-weight: 600; }
.spare-parts__title { font-size: var(--rs-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rs-ink-soft); margin-bottom: var(--rs-sp-2); }
.spare-parts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spare-parts__item { display: flex; justify-content: space-between; gap: var(--rs-sp-3); padding: 6px var(--rs-sp-3); background: var(--rs-surface-2); border-radius: var(--rs-radius-sm); }
.spare-parts__name { color: var(--rs-ink); }
.spare-parts__price { font-weight: 700; color: var(--rs-secondary); white-space: nowrap; }

/* Étiquette énergie */
.content-card[data-template="energy_label"] .content-card__head { background: var(--rs-cached-bg); }
.content-card[data-template="energy_label"] .content-card__title { color: var(--rs-cached); }
.energy-row { display: flex; gap: var(--rs-sp-4); align-items: center; flex-wrap: wrap; }
.energy-specs { flex: 1; min-width: 180px; }
.energy-class {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--rs-radius); color: #fff; font-size: var(--rs-fs-xl); font-weight: 800;
}
.energy-class--A { background: #1e8f4e; }
.energy-class--B { background: #58b947; color: #14321d; }
.energy-class--C { background: #b6d533; color: #3a4400; }
.energy-class--D { background: #f5c518; color: #4a3b00; }
.energy-class--E { background: #f0922b; }
.energy-class--F { background: #e85d2a; }
.energy-class--G { background: #e02b2b; }

/* =============================================================================
   Verticales J→P : carte générique vertical_info (Prompt 14)
   ========================================================================== */
.vinfo-headline { font-weight: 700; color: var(--rs-secondary); margin: 4px 0 8px; }
.vinfo-status { margin-bottom: 10px; }
.vinfo-sublist__title {
  margin-top: 10px; font-size: var(--rs-fs-xs); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--rs-ink-soft, #6b7280);
}
.vinfo-sublist { list-style: none; margin: 4px 0 0; padding: 0; }
.vinfo-sublist__item {
  display: flex; justify-content: space-between; gap: var(--rs-sp-4);
  padding: 5px 0; border-bottom: 1px dashed var(--rs-line);
}
.vinfo-sublist__item:last-child { border-bottom: 0; }
.vinfo-sublist__name { color: var(--rs-ink); }
.vinfo-sublist__extra { color: var(--rs-secondary); font-weight: 600; text-align: right; }
.vinfo-datachip-wrap { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.vinfo-datachip {
  display: inline-block; padding: 2px 9px; border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.vinfo-datachip--mock { background: #fde8c4; color: #7a4a00; }
.vinfo-datachip--cached { background: #e6e1f6; color: #4b2e83; }
.vinfo-datachip--live { background: #d6f0dd; color: #1e6b3a; }
.vinfo-datachip--internal { background: #dbeafe; color: #1e477e; }
.vinfo-datachip--rag { background: #e0f0f1; color: #155e63; }

/* =============================================================================
   Page Méthodologie : hub de formation + encarts d'avertissement (Prompt 14)
   ========================================================================== */
.methodo-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.methodo-demo .shop-demo-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--rs-radius-pill);
  background: var(--rs-main); color: #fff; font-weight: 800; font-size: var(--rs-fs-xs); letter-spacing: 0.06em;
}
.methodo-date { font-size: var(--rs-fs-xs); color: var(--rs-ink-soft); font-weight: 600; }
/* Page méthodo fusionnée : deux moitiés ancrées (#methodo-human / #methodo-agent). */
.methodo-block { scroll-margin-top: 88px; padding-top: var(--rs-sp-2); }
.methodo-block + .methodo-block { margin-top: var(--rs-sp-6); border-top: 1px solid var(--rs-line); padding-top: var(--rs-sp-5); }
.methodo-block__title {
  margin: 0 0 var(--rs-sp-3); font-size: var(--rs-fs-xl); color: var(--rs-ink);
  display: flex; align-items: center; gap: 10px;
}
.methodo-agent__embed { margin-top: var(--rs-sp-2); }
.methodo-agent__embed #fetcher-view, .methodo-agent__embed .fetch-view { padding: 0; }
.methodo-section-title {
  margin: 26px 0 12px; font-size: var(--rs-fs-lg); color: var(--rs-secondary);
  border-bottom: 2px solid var(--rs-line); padding-bottom: 6px;
}
.methodo-encarts { display: grid; gap: var(--rs-sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.methodo-encart { padding: var(--rs-sp-5); }
.methodo-encart__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.methodo-encart__icon { color: var(--rs-accent, #f0922b); font-size: 1.1em; }
.methodo-encart__title { margin: 0; font-size: var(--rs-fs-md); color: var(--rs-secondary); }
.methodo-encart__body p { margin: 0 0 8px; font-size: var(--rs-fs-sm); line-height: 1.5; color: var(--rs-ink); }
.methodo-encart__body p:last-child { margin-bottom: 0; }
.methodo-glossary dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rs-secondary); margin-top: 10px; }
.methodo-glossary dd { margin: 2px 0 0; color: var(--rs-ink); font-size: var(--rs-fs-sm); }

/* -- Bloc d'introduction « e-commerce de demain » --------------------------- */
.methodo-hero { padding: var(--rs-sp-5) var(--rs-sp-5) var(--rs-sp-4); margin: var(--rs-sp-2) 0 var(--rs-sp-6); }
.methodo-hero__title { margin: 0 0 var(--rs-sp-3); font-size: var(--rs-fs-xl); color: var(--rs-secondary); }
.methodo-hero__body p { margin: 0 0 10px; font-size: var(--rs-fs-md); line-height: 1.6; color: var(--rs-ink); max-width: 72ch; }
.methodo-hero__body p:last-child { margin-bottom: 0; }

/* -- Trois profils ----------------------------------------------------------- */
.methodo-profiles { display: grid; gap: var(--rs-sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.methodo-profile { padding: var(--rs-sp-5); }
.methodo-profile__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--rs-sp-3); }
.methodo-profile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: var(--rs-radius-pill);
  background: var(--rs-main-100); font-size: 1.15rem;
}
.methodo-profile__title { margin: 0; font-size: var(--rs-fs-md); color: var(--rs-secondary); }
.methodo-profile__body p { margin: 0 0 8px; font-size: var(--rs-fs-sm); line-height: 1.55; color: var(--rs-ink-soft); }
.methodo-profile__body p:last-child { margin-bottom: 0; }

/* -- Bibliothèque complète des prompts, par catégorie ----------------------- */
.methodo-prompts__lead { margin: 0 0 var(--rs-sp-4); font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); max-width: 72ch; }
.methodo-prompts__empty { font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); }
.methodo-promptgrid { display: grid; gap: var(--rs-sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.methodo-promptcat { padding: var(--rs-sp-4) var(--rs-sp-4) var(--rs-sp-2); }
.methodo-promptcat__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--rs-sp-2); padding-bottom: var(--rs-sp-2);
  border-bottom: 1px solid var(--rs-line);
}
.methodo-promptcat__title { margin: 0; font-size: var(--rs-fs-md); color: var(--rs-secondary); }
.methodo-promptcat__kind {
  margin-left: auto; padding: 2px 9px; border-radius: var(--rs-radius-pill);
  font-size: var(--rs-fs-xs); font-weight: 700; letter-spacing: 0.04em;
  background: var(--rs-surface-2); color: var(--rs-ink-soft);
}
.methodo-promptcat__kind--verticale { background: var(--rs-main-100); color: var(--rs-main-600); }
.methodo-promptlist { list-style: none; margin: 0; padding: 0; }
.methodo-prompt {
  display: flex; align-items: center; gap: var(--rs-sp-3);
  padding: 10px 0; border-bottom: 1px solid var(--rs-line);
}
.methodo-prompt:last-child { border-bottom: 0; }
.methodo-prompt__label { flex: 1; min-width: 0; font-size: var(--rs-fs-sm); color: var(--rs-ink); line-height: 1.4; }
.methodo-prompt__try { flex: none; }
.methodo-prompt__try::before { content: "▸"; font-weight: 700; }