/* ===========================================================================
   Réponses Bio, assistant de lecture
   Feuille de style autonome : aucune police distante, aucune image distante,
   aucun CDN. Tout est écrit à la main.

   Priorité absolue : la lisibilité pour un lectorat âgé.
     - corps de texte à 19 px (jamais moins de 18 px)
     - interlignage 1.7
     - contraste AA minimum partout, vérifié en clair et en sombre
     - cibles tactiles de 48 px
     - focus très visible, jamais supprimé
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Palette et variables
   Palette calée sur reponsesbio.com : blanc franc, bleu-gris de structure,
   vert naturel du site (#6DAB3C, assombri pour le contraste), orange d'accent
   (#FF9900, assombri pour le texte). Contraste AA vérifié en clair.
   --------------------------------------------------------------------------- */
:root {
  /* Clair uniquement : reponsesbio.com est un site clair. Un widget qui
     basculerait en sombre selon le navigateur du visiteur jurerait sur la page. */
  color-scheme: light;

  /* Fonds — blanc franc et teintes claires bleutées. */
  --rb-fond: #f4f7fa;
  --rb-fond-carte: #ffffff;
  --rb-fond-creux: #edf2f6;
  --rb-fond-vert: #eef6e6;
  --rb-fond-terre: #fff4e4;

  /* Encres — bleu-gris, plus douces qu'un noir franc. */
  --rb-encre: #29373f;
  --rb-encre-doux: #526771;
  --rb-encre-tres-doux: #7a8992;

  /* Accents — vert du site pour l'action, orange pour le second. */
  --rb-vert: #3f7a20;
  --rb-vert-fonce: #2f5e15;
  --rb-terre: #cf6a08;
  --rb-terre-fonce: #9c4e05;

  /* Éléments d'action : bouton vert, texte blanc (contraste AA). */
  --rb-action-fond: #3f7a20;
  --rb-action-fond-survol: #2f5e15;
  --rb-action-texte: #ffffff;

  /* Traits — bleu-gris clair. */
  --rb-bordure: #dbe3e9;
  --rb-bordure-forte: #b7c3cc;

  /* Focus : orange du site, très visible. */
  --rb-focus: #cf6a08;

  /* Rythme */
  --rb-rayon: 14px;
  --rb-rayon-petit: 9px;
  --rb-ombre: 0 1px 2px rgba(41, 55, 63, .06), 0 8px 26px rgba(41, 55, 63, .08);
  --rb-ombre-douce: 0 1px 3px rgba(41, 55, 63, .07);

  /* Polices système uniquement.
     Serif pour les titres : chaleur et lisibilité d'un texte imprimé.
     Sans serif pour le corps : plus net sur les écrans moyens. */
  --rb-titre: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", "Liberation Serif", serif;
  --rb-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

/* Bloc sombre CONSERVÉ mais DÉSACTIVÉ (la condition min-width n'est jamais
   vraie). Le widget reste clair pour coller au site. Pour réactiver
   l'adaptation au thème du visiteur, retirer « and (min-width: 100000px) ». */
@media (prefers-color-scheme: dark) and (min-width: 100000px) {
  :root {
    --rb-fond: #121820;
    --rb-fond-carte: #1a222c;
    --rb-fond-creux: #212b36;
    --rb-fond-vert: #1b2a1a;
    --rb-fond-terre: #2c2113;

    --rb-encre: #e7ecf1;
    --rb-encre-doux: #b9c6d0;
    --rb-encre-tres-doux: #93a2ad;

    --rb-vert: #8fd06a;
    --rb-vert-fonce: #a7dd86;
    --rb-terre: #f2a24a;
    --rb-terre-fonce: #f6b96f;

    --rb-action-fond: #8fd06a;
    --rb-action-fond-survol: #a7dd86;
    --rb-action-texte: #11170c;

    --rb-bordure: #2e3b47;
    --rb-bordure-forte: #46545f;

    --rb-focus: #f6b96f;

    --rb-ombre: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
    --rb-ombre-douce: 0 1px 3px rgba(0, 0, 0, .3);
  }
}

/* ---------------------------------------------------------------------------
   2. Bases
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   CLOISONNEMENT — à lire avant toute modification

   Cette feuille est collée dans des sites existants (WordPress, Elementor).
   Elle ne doit donc JAMAIS toucher un élément qui ne lui appartient pas.

   Les règles de base visaient à l'origine body, html, h1, p, a, img... ce qui
   convenait à une page autonome, mais repeignait la page hôte tout entière une
   fois le bloc intégré : fond, couleur, police et taille du texte, titres en
   Georgia, liens en vert. Les titres et paragraphes écrits par la rédaction,
   AVANT le bloc, changeaient d'apparence sans qu'on puisse s'y opposer.

   Tout est donc préfixé :
     .rb-assistant  le bloc intégré, et lui seul ;
     .rb-page       la page de démonstration autonome (web/index.html), qui
                    porte cette classe sur son body et retrouve ainsi la mise
                    en forme d'ensemble.
   Aucune règle ne doit être ajoutée ici sans l'un de ces deux préfixes.
   --------------------------------------------------------------------------- */

.rb-page,
.rb-page *,
.rb-page *::before,
.rb-page *::after,
.rb-assistant,
.rb-assistant *,
.rb-assistant *::before,
.rb-assistant *::after {
  box-sizing: border-box;
}

/* Plusieurs blocs sont masqués par l'attribut hidden alors qu'ils portent un
   display explicite : sans cette règle, hidden resterait sans effet. */
.rb-page [hidden],
.rb-assistant [hidden],
[hidden].rb-embed-note {
  display: none !important;
}

.rb-page {
  margin: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Mise en forme d'ensemble : la page autonome ET le bloc intégré. Sur un site
   hôte, elle s'arrête aux frontières du bloc. */
.rb-page,
.rb-assistant {
  background-color: var(--rb-fond);
  color: var(--rb-encre);
  font-family: var(--rb-texte);
  font-size: 19px;
  line-height: 1.7;
  /* Un lettrage très légèrement plus aéré se lit mieux à 70 ans. */
  letter-spacing: .003em;
}

/* Le bloc intégré ne pose pas de fond : il se fond dans la page qui l'accueille,
   ce sont ses cartes intérieures qui portent la couleur. */
.rb-assistant {
  background-color: transparent;
}

.rb-page h1, .rb-page h2, .rb-page h3,
.rb-assistant h1, .rb-assistant h2, .rb-assistant h3 {
  font-family: var(--rb-titre);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--rb-encre);
}

.rb-page p,
.rb-assistant p {
  margin: 0 0 1em;
}

.rb-page p:last-child,
.rb-assistant p:last-child {
  margin-bottom: 0;
}

.rb-page img,
.rb-assistant img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Une longue adresse ou un nom de plante ne doit jamais élargir la page. */
.rb-page :is(a, p, li, h1, h2, h3, td, th),
.rb-assistant :is(a, p, li, h1, h2, h3, td, th) {
  overflow-wrap: break-word;
  word-break: normal;
}

.rb-page a,
.rb-assistant a {
  color: var(--rb-vert);
  text-underline-offset: .18em;
  text-decoration-thickness: .09em;
}

.rb-page a:hover,
.rb-assistant a:hover {
  color: var(--rb-vert-fonce);
}

/* Focus : le même partout DANS le bloc, épais, jamais retiré. */
.rb-page :focus,
.rb-assistant :focus {
  outline: 3px solid var(--rb-focus);
  outline-offset: 3px;
}

.rb-page :focus:not(:focus-visible),
.rb-assistant :focus:not(:focus-visible) {
  outline: none;
}

.rb-page :focus-visible,
.rb-assistant :focus-visible {
  outline: 3px solid var(--rb-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   3. Structure générale
   --------------------------------------------------------------------------- */
.rb-large {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.rb-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rb-action-fond);
  color: var(--rb-action-texte);
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--rb-rayon-petit) 0;
  font-weight: 600;
  z-index: 20;
}

.rb-evitement:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   4. En-tête
   --------------------------------------------------------------------------- */
.rb-entete {
  background: linear-gradient(180deg, var(--rb-fond-vert), var(--rb-fond));
  border-bottom: 1px solid var(--rb-bordure);
  padding: 2.25rem 0 2rem;
}

.rb-entete-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.rb-logo {
  flex: none;
  width: 56px;
  height: 56px;
  color: var(--rb-vert);
}

.rb-entete h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: -.01em;
}

.rb-accroche {
  margin: .35rem 0 0;
  color: var(--rb-encre-doux);
  font-size: 1.06rem;
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   5. Bandeau d'avertissement permanent
   Discret (fond terre très pâle, aucun rouge criard) mais toujours lisible.
   --------------------------------------------------------------------------- */
.rb-avertissement {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 1.75rem auto 1.5rem;
  padding: .9rem 1.1rem;
  background-color: var(--rb-fond-terre);
  border: 1px solid var(--rb-bordure-forte);
  border-left: 5px solid var(--rb-terre);
  border-radius: var(--rb-rayon-petit);
  color: var(--rb-encre);
  font-size: 1rem;
  line-height: 1.6;
}

.rb-avertissement svg {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: .12rem;
  color: var(--rb-terre-fonce);
}

.rb-avertissement-corps {
  min-width: 0;
}

/* Bandeau du mode démonstration : volontairement voyant et rayé, pour qu'on
   ne puisse jamais le prendre pour un élément de la page réelle. */
.rb-demo-bandeau {
  max-width: var(--rb-largeur, 62rem);
  margin: 0 auto 1.2rem;
  padding: .8rem 1.1rem;
  background: repeating-linear-gradient(
    135deg, #fff4d6, #fff4d6 12px, #ffedbf 12px, #ffedbf 24px
  );
  border: 2px dashed #a9791d;
  border-radius: var(--rb-rayon-petit);
  color: #6b4a06;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.55;
}

.rb-avertissement-court {
  margin: 0;
  font-weight: 600;
}

.rb-avertissement-plus > summary {
  display: list-item;
  list-style: none;
  cursor: pointer;
  color: var(--rb-terre-fonce);
  font-size: .96rem;
  font-weight: 600;
}

.rb-avertissement-plus > summary::-webkit-details-marker { display: none; }
.rb-avertissement-plus > summary::marker { content: ''; }

.rb-avertissement-plus > summary .rb-plus-label {
  min-height: 44px;
  padding: .2rem 0;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.rb-avertissement-plus > summary .rb-plus-label::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: .1rem;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
  transition: transform .18s ease;
}

.rb-avertissement-plus[open] > summary .rb-plus-label::after {
  transform: rotate(180deg);
}

.rb-avertissement-plus > p {
  margin: 0 0 .2rem;
  font-size: .98rem;
}

/* ---------------------------------------------------------------------------
   6. La fenêtre de conversation : élément dominant de la page
   --------------------------------------------------------------------------- */
.rb-assistant {
  margin: 0 auto 3rem;
}

.rb-fenetre {
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon);
  box-shadow: var(--rb-ombre);
  overflow: hidden;
}

.rb-fenetre-entete {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.5rem;
  background-color: var(--rb-fond-vert);
  border-bottom: 1px solid var(--rb-bordure);
}

.rb-fenetre-entete svg {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--rb-vert);
}

.rb-fenetre-titre {
  font-size: 1.25rem;
}

.rb-corps {
  padding: 1.5rem;
}

/* --- Fil des échanges ---------------------------------------------------- */
.rb-fil:empty {
  display: none;
}

.rb-echange {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rb-bordure);
}

.rb-echange:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: .5rem;
}

/* L'en-tête de question est un bouton de repli plein cadre : on remet à zéro
   l'apparence native du bouton, on garde l'aspect « encadré vert » d'origine. */
.rb-question {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  background-color: var(--rb-fond-vert);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon-petit);
  padding: .9rem 1.15rem;
  margin-bottom: 1.35rem;
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--rb-encre);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rb-question:hover {
  background-color: var(--rb-fond-creux);
  border-color: var(--rb-bordure-forte);
}

.rb-question:focus-visible {
  outline: 3px solid var(--rb-focus);
  outline-offset: 2px;
}

.rb-question-corps {
  flex: 1 1 auto;
  min-width: 0;                 /* laisse le texte long revenir à la ligne */
}

.rb-question-etiquette {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rb-encre-doux);
  margin-bottom: .3rem;
}

.rb-question-texte {
  display: block;
  font-weight: 600;
}

.rb-question-chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--rb-encre-doux);
  transition: transform .18s ease;
}

/* Échange replié : la réponse disparaît, le chevron pointe vers la droite,
   et le bloc se resserre. */
.rb-echange--replie .rb-reponse {
  display: none;
}

.rb-echange--replie .rb-question {
  margin-bottom: 0;
}

.rb-echange--replie .rb-question-chevron {
  transform: rotate(-90deg);
}

.rb-echange--replie {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .rb-question-chevron {
    transition: none;
  }
}

/* --- Vérification de sécurité (Cloudflare Turnstile) ---------------------
   Presque toujours invisible : le contrôle se fait sans rien demander au
   visiteur. Turnstile insère malgré tout un cadre technique, si bien qu'on ne
   peut pas se fier à la présence d'un contenu pour savoir s'il y a quelque
   chose à voir : c'est le script qui pose la classe ci-dessous, à l'instant
   précis où Cloudflare annonce qu'il va solliciter le visiteur. */
.rb-turnstile {
  line-height: 0;
}

.rb-turnstile-visible {
  line-height: inherit;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  background-color: var(--rb-fond-terre);
  border: 1px solid var(--rb-bordure-forte);
  border-left: 5px solid var(--rb-terre);
  border-radius: var(--rb-rayon-petit);
}

.rb-turnstile-visible::before {
  content: "Une vérification rapide avant l'envoi, pour bloquer les robots. Votre question est conservée.";
  display: block;
  margin-bottom: .6rem;
  color: var(--rb-encre);
  font-size: .92rem;
  line-height: 1.45;
}

/* --- Barre d'actions : Recommencer --------------------------------------- */
.rb-barre {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.1rem;
}

.rb-recommencer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure-forte);
  border-radius: 999px;
  color: var(--rb-encre-doux);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rb-recommencer:hover {
  background-color: var(--rb-fond-creux);
  border-color: var(--rb-encre-tres-doux);
  color: var(--rb-encre);
}

.rb-recommencer:focus-visible {
  outline: 3px solid var(--rb-focus);
  outline-offset: 2px;
}

.rb-recommencer svg {
  width: 18px;
  height: 18px;
}

.rb-reponse {
  font-size: 1.06rem;
}

.rb-reponse-texte p {
  margin-bottom: 1.1em;
}

.rb-reponse-texte ul {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.rb-reponse-texte li {
  margin-bottom: .55em;
}

/* Citation [1] cliquable vers l'article correspondant. */
.rb-citation {
  display: inline-block;
  min-width: 1.9em;
  padding: 0 .28em;
  margin: 0 .1em;
  background-color: var(--rb-fond-vert);
  border: 1px solid var(--rb-bordure-forte);
  border-radius: 5px;
  color: var(--rb-vert-fonce);
  font-size: .92em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
}

.rb-citation:hover,
.rb-citation:focus-visible {
  background-color: var(--rb-action-fond);
  border-color: var(--rb-action-fond);
  color: var(--rb-action-texte);
}

/* --- Indicateur d'attente ------------------------------------------------ */
.rb-attente {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--rb-encre-doux);
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

.rb-points {
  display: inline-flex;
  gap: .32rem;
}

.rb-points span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--rb-vert);
  animation: rb-respire 1.25s ease-in-out infinite;
}

.rb-points span:nth-child(2) { animation-delay: .18s; }
.rb-points span:nth-child(3) { animation-delay: .36s; }

@keyframes rb-respire {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-3px); }
}

/* --- Message de repli (hors ligne, limite atteinte, erreur) -------------- */
.rb-alerte {
  padding: 1rem 1.15rem;
  border-radius: var(--rb-rayon-petit);
  border: 1px solid var(--rb-bordure-forte);
  border-left: 5px solid var(--rb-terre);
  background-color: var(--rb-fond-terre);
  color: var(--rb-encre);
  font-size: 1.02rem;
}

.rb-alerte a {
  color: var(--rb-terre-fonce);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   7. État vide et suggestions
   --------------------------------------------------------------------------- */
.rb-vide h3 {
  font-size: 1.18rem;
  margin-bottom: .3rem;
}

.rb-vide-intro {
  color: var(--rb-encre-doux);
  font-size: 1.02rem;
  margin-bottom: 1.2rem;
}

/*
  Les exemples s'écoulent en ligne et reviennent à la ligne d'eux mêmes, au
  lieu d'occuper chacun toute la largeur. C'est ce qui rend le bloc compact.
  La cible tactile reste à 44 px de haut : on gagne de la place en resserrant
  la mise en page, jamais en rapetissant ce sur quoi il faut cliquer.
*/
.rb-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.rb-suggestion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .95rem;
  text-align: left;
  background-color: var(--rb-fond-carte);
  border: 1.5px solid var(--rb-bordure-forte);
  border-radius: 999px;
  color: var(--rb-encre);
  font-family: inherit;
  font-size: .99rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.rb-suggestion:hover {
  background-color: var(--rb-fond-vert);
  border-color: var(--rb-vert);
}

/* ---- Dépliant « Voir d'autres exemples » ---------------------------------
   <details> natif : accessible au clavier et aux lecteurs d'écran sans une
   ligne de JavaScript, et l'état ouvert survit à l'impression de la page. */
.rb-plus {
  margin-top: .9rem;
}

/*
  ATTENTION : ne pas donner de display flex au <summary>.

  Un <summary> dont le display n'est plus « list-item » perd sa sémantique de
  dépliant dans l'arbre d'accessibilité : il est exposé comme un conteneur
  quelconque et n'est plus annoncé comme repliable aux lecteurs d'écran. La
  mise en page est donc portée par .rb-plus-label, à l'intérieur.
*/
.rb-plus > summary {
  display: list-item;
  list-style: none;
  cursor: pointer;
  color: var(--rb-vert-fonce);
  font-size: 1rem;
  font-weight: 600;
  user-select: none;
}

/* Retire le triangle natif : on fournit notre propre chevron, orientable. */
.rb-plus > summary::-webkit-details-marker { display: none; }
.rb-plus > summary::marker { content: ''; }

.rb-plus-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem .2rem;
}

.rb-plus > summary:hover .rb-plus-label {
  text-decoration: underline;
  text-underline-offset: .22em;
}

.rb-plus-label svg {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform .18s ease;
}

.rb-plus[open] .rb-plus-label svg {
  transform: rotate(180deg);
}

.rb-plus[open] > summary {
  margin-bottom: .7rem;
}

/* ---------------------------------------------------------------------------
   8. Blocs « Nos articles » et « Produits liés »
   --------------------------------------------------------------------------- */
.rb-bloc {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 2px solid var(--rb-fond-vert);
}

.rb-bloc-titre {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.1rem;
  margin-bottom: .9rem;
}

.rb-bloc-titre svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--rb-vert);
}

.rb-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.rb-article-lien {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  min-height: 48px;
  padding: .7rem .9rem;
  background-color: var(--rb-fond-creux);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon-petit);
  color: var(--rb-encre);
  font-size: 1.02rem;
  text-decoration: none;
}

.rb-article-lien:hover,
.rb-article-lien:focus-visible {
  background-color: var(--rb-fond-vert);
  border-color: var(--rb-vert);
}

.rb-article-lien .rb-num {
  flex: none;
  font-weight: 700;
  color: var(--rb-vert);
}

a.rb-article-lien .rb-titre-article {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Titre + origine : l'origine passe sous le titre plutôt que de l'allonger. */
.rb-source-corps {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}

/* Origine du contenu : discrète, jamais soulignée même dans un lien. */
.rb-origine {
  align-self: flex-start;
  padding: .04rem .45rem;
  background-color: var(--rb-fond-vert);
  border: 1px solid var(--rb-bordure);
  border-radius: 999px;
  color: var(--rb-encre-doux);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
}

.rb-origine-encyclopedie {
  background-color: var(--rb-fond-terre);
  border-color: var(--rb-terre);
  color: var(--rb-terre-fonce);
}

/* --- Cartes produit ------------------------------------------------------ */
.rb-produits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.rb-produit {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon-petit);
  overflow: hidden;
  box-shadow: var(--rb-ombre-douce);
}

.rb-produit-lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--rb-encre);
  text-decoration: none;
}

.rb-produit-lien:hover .rb-produit-nom,
.rb-produit-lien:focus-visible .rb-produit-nom {
  text-decoration: underline;
}

.rb-produit-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  background-color: var(--rb-fond-creux);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rb-produit-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rb-produit-image svg {
  width: 46px;
  height: 46px;
  color: var(--rb-encre-tres-doux);
}

.rb-produit-corps {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem .95rem 1rem;
  flex: 1 1 auto;
}

.rb-produit-nom {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}

.rb-produit-prix {
  font-family: var(--rb-titre);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--rb-vert);
  margin-top: auto;
}

.rb-produit-promo {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .45rem;
  border-radius: 5px;
  background-color: var(--rb-fond-terre);
  border: 1px solid var(--rb-terre);
  color: var(--rb-terre-fonce);
  font-family: var(--rb-texte);
  font-size: .8rem;
  font-weight: 700;
  vertical-align: middle;
}

.rb-produit-note {
  font-size: .92rem;
  color: var(--rb-encre-doux);
}

/* ---------------------------------------------------------------------------
   8 bis. Messages de l'interface (événement SSE « notice »)

   Ces messages sont posés PAR L'INTERFACE, jamais par le modèle. Ils occupent
   leur propre conteneur, au-dessus du corps de réponse, et sont encadrés :
   à aucun moment le visiteur ne doit les confondre avec le texte rédigé.
   --------------------------------------------------------------------------- */
.rb-notices {
  display: grid;
  gap: .8rem;
  margin-bottom: 1.35rem;
}

.rb-notice {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border-radius: var(--rb-rayon-petit);
}

.rb-notice svg {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: .15rem;
}

.rb-notice-corps {
  min-width: 0;
}

.rb-notice-titre {
  margin: 0 0 .15rem;
  font-family: var(--rb-titre);
  font-weight: 700;
  font-size: 1.02rem;
}

.rb-notice-texte {
  margin: 0;
}

/* Niveau « info » : présent et lisible, mais sobre. */
.rb-notice-info {
  background-color: var(--rb-fond-vert);
  border: 1px solid var(--rb-bordure-forte);
  border-left: 5px solid var(--rb-vert);
  color: var(--rb-encre);
  font-size: 1.02rem;
}

.rb-notice-info svg {
  color: var(--rb-vert);
}

/* --- Rappel médical sous chaque réponse ---------------------------------- */
.rb-rappel {
  margin-top: 1.4rem;
  padding: .7rem .9rem;
  border-left: 4px solid var(--rb-bordure-forte);
  background-color: var(--rb-fond-creux);
  border-radius: 0 var(--rb-rayon-petit) var(--rb-rayon-petit) 0;
  color: var(--rb-encre-doux);
  font-size: .95rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   9. Retour du visiteur
   --------------------------------------------------------------------------- */
.rb-retour {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rb-bordure);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem 1rem;
}

.rb-retour-question {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}

.rb-retour-boutons {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.rb-retour-bouton {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  min-width: 96px;
  justify-content: center;
  padding: .6rem 1.2rem;
  background-color: var(--rb-fond-carte);
  border: 1.5px solid var(--rb-bordure-forte);
  border-radius: 999px;
  color: var(--rb-encre);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.rb-retour-bouton:hover:not([disabled]) {
  background-color: var(--rb-fond-vert);
  border-color: var(--rb-vert);
}

.rb-retour-bouton svg {
  width: 19px;
  height: 19px;
  color: var(--rb-vert);
}

.rb-retour-bouton[disabled] {
  opacity: .55;
  cursor: default;
}

.rb-retour-bouton[aria-pressed="true"] {
  background-color: var(--rb-action-fond);
  border-color: var(--rb-action-fond);
  color: var(--rb-action-texte);
  opacity: 1;
}

.rb-retour-bouton[aria-pressed="true"] svg {
  color: var(--rb-action-texte);
}

.rb-retour-merci {
  color: var(--rb-encre-doux);
  font-size: 1rem;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   10. Zone de saisie
   --------------------------------------------------------------------------- */
.rb-saisie {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background-color: var(--rb-fond-creux);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon);
}

.rb-saisie-etiquette {
  display: block;
  font-size: 1.06rem;
  font-weight: 600;
  margin-bottom: .55rem;
}

/*
  flex-end, et surtout pas stretch : avec stretch, le bouton s'étirait sur
  toute la hauteur du champ de saisie (plus de 110 px), ce qui en faisait un
  gros bloc vert massif. Aligné en bas, il garde sa hauteur naturelle et se
  pose au niveau de la dernière ligne écrite.
*/
.rb-saisie-rangee {
  display: flex;
  gap: .8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rb-champ {
  flex: 1 1 20rem;
  min-width: 0;
  min-height: 88px;
  padding: .85rem 1rem;
  background-color: var(--rb-fond-carte);
  border: 2px solid var(--rb-bordure-forte);
  border-radius: var(--rb-rayon-petit);
  color: var(--rb-encre);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.55;
  resize: vertical;
}

.rb-champ::placeholder {
  color: var(--rb-encre-tres-doux);
  opacity: 1;
}

.rb-champ:focus {
  border-color: var(--rb-vert);
}

/*
  Bouton d'envoi : volontairement moins massif qu'auparavant (il faisait 11 rem
  de large, 56 px de haut et une graisse 700, ce qui écrasait la zone de
  saisie). Forme arrondie identique aux pastilles d'exemples, pour que les deux
  éléments cliquables de l'état vide appartiennent à la même famille visuelle.
  La cible reste à 48 px de haut, bien au-dessus du minimum tactile.
*/
.rb-envoyer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  min-width: 8.5rem;
  padding: .7rem 1.35rem;
  background-color: var(--rb-action-fond);
  border: 1.5px solid var(--rb-action-fond);
  border-radius: 999px;
  color: var(--rb-action-texte);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.rb-envoyer:hover:not([disabled]) {
  background-color: var(--rb-action-fond-survol);
  border-color: var(--rb-action-fond-survol);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}

.rb-envoyer:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: none;
}

.rb-envoyer[disabled] {
  opacity: .55;
  cursor: progress;
}

.rb-envoyer svg {
  width: 19px;
  height: 19px;
  transition: transform .16s ease;
}

/* La flèche avance légèrement au survol : le geste d'envoi devient lisible. */
.rb-envoyer:hover:not([disabled]) svg {
  transform: translateX(2px);
}

.rb-saisie-pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  color: var(--rb-encre-doux);
  font-size: .95rem;
}

.rb-compteur {
  font-variant-numeric: tabular-nums;
}

.rb-statut {
  margin: .9rem 0 0;
  min-height: 1.7rem;
  color: var(--rb-encre-doux);
  font-size: 1rem;
}

.rb-statut:empty {
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   11. Pied de page
   --------------------------------------------------------------------------- */
.rb-pied {
  background-color: var(--rb-fond-vert);
  border-top: 1px solid var(--rb-bordure);
  padding: 2.75rem 0 2.25rem;
  margin-top: 1rem;
}

.rb-pied-colonnes {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.rb-pied h2 {
  font-size: 1.12rem;
  margin-bottom: .75rem;
}

.rb-pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-pied li + li {
  margin-top: .2rem;
}

.rb-pied a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 0;
  color: var(--rb-encre);
  font-size: 1.02rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.rb-pied a:hover {
  color: var(--rb-vert-fonce);
}

.rb-pied p {
  color: var(--rb-encre-doux);
  font-size: 1rem;
}

.rb-pied-bas {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rb-bordure-forte);
  color: var(--rb-encre-doux);
  font-size: .95rem;
}

/* --- Invitation au Club ---------------------------------------------------
   Posée au-dessus de la zone de saisie à partir de la troisième réponse, et
   seulement si la page fournit data-club-url (voir web/widget.js).

   Volontairement sobre : ni couleur d'alerte, ni gros bouton. Elle s'adresse à
   quelqu'un qui a déjà obtenu trois réponses, elle n'a donc pas à s'imposer.
   Toutes les couleurs viennent des variables de palette : l'encart se recolore
   tout seul selon l'habillage (magazine ou boutique). */
.rb-club {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  background-color: var(--rb-fond-vert);
  border: 1px solid var(--rb-bordure);
  border-left: 4px solid var(--rb-vert);
  border-radius: var(--rb-rayon-petit);
}

.rb-club-corps {
  flex: 1 1 auto;
  min-width: 0;
}

.rb-club-titre {
  margin: 0 0 .2rem;
  color: var(--rb-encre);
  font-size: .98rem;
  font-weight: 700;
}

.rb-club-texte {
  margin: 0 0 .5rem;
  color: var(--rb-encre-doux);
  font-size: .9rem;
  line-height: 1.5;
}

.rb-club-lien {
  display: inline-block;
  color: var(--rb-vert-fonce);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.rb-club-lien:hover,
.rb-club-lien:focus-visible {
  color: var(--rb-terre-fonce);
}

/* Fermeture : une croix, assez grande pour être visée au doigt.
   30 px n'y suffisaient pas — c'est en dessous du seuil de 44 px en deçà
   duquel un doigt manque sa cible, et davantage encore passé un certain âge.
   Une invitation qu'on n'arrive pas à fermer devient une gêne. */
.rb-club-fermer {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -.4rem -.5rem -.4rem 0;   /* la cible grandit sans écarter la boîte */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--rb-encre-tres-doux);
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.rb-club-fermer:hover,
.rb-club-fermer:focus-visible {
  background-color: var(--rb-fond-carte);
  color: var(--rb-encre);
}

/* Sur un téléphone, cette invitation se place juste au-dessus du champ de
   saisie : chaque ligne qu'elle occupe est prise sur la zone où le lecteur
   écrit et relit. On la resserre — sans la rendre illisible pour autant, le
   corps du texte restant au-dessus de 13 px. */
@media (max-width: 30rem) {
  .rb-club {
    gap: .4rem;
    margin-bottom: .85rem;
    padding: .7rem .75rem;
  }

  .rb-club-titre { font-size: .92rem; }

  .rb-club-texte {
    margin-bottom: .4rem;
    font-size: .85rem;
    line-height: 1.45;
  }

  .rb-club-lien { font-size: .88rem; }
}

/* Rappel discret en fin de bloc intégré (WordPress) : l'avertissement complet,
   présent en permanence mais léger, loin du geste de saisie. */
.rb-embed-note {
  max-width: 62rem;
  margin: 1.5rem auto 0;
  padding: 0 .4rem;
  color: var(--rb-encre-tres-doux);
  font-size: .9rem;
  line-height: 1.55;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   12. Adaptation aux petits écrans
   --------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  /* CETTE RÈGLE NE DOIT JAMAIS VISER « body » SEUL.
     Elle a été écrite pour nos pages autonomes, où le corps de texte se règle
     à la source. Mais cette feuille est aussi chargée par WordPress : sans les
     classes ci-dessous, elle imposait 18 px au body du SITE, et tout ce qui y
     est dimensionné en relatif — interlignages compris — était recalculé.
     Invisible depuis un ordinateur, puisque la règle ne s'applique qu'en
     dessous de 640 px. */
  body.rb-page,
  body.rb-app {
    font-size: 18px;
  }

  .rb-large {
    padding: 0 1rem;
  }

  .rb-corps,
  .rb-saisie {
    padding: 1.1rem;
  }

  .rb-fenetre-entete {
    padding: 1rem 1.1rem;
  }

  /* Sur téléphone, le bouton d'envoi prend toute la largeur : impossible à manquer. */
  .rb-envoyer {
    width: 100%;
    min-width: 0;
  }

  .rb-retour {
    flex-direction: column;
    align-items: flex-start;
  }

  .rb-retour-bouton {
    flex: 1 1 auto;
  }
}

/* Grands écrans : la fenêtre de conversation respire sans jamais s'étaler. */
@media (min-width: 64rem) {
  .rb-corps {
    padding: 2rem 2.25rem;
  }

  .rb-saisie {
    padding: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
   13. Mouvement réduit
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Même prudence : l'étoile seule coupait les animations de la page hôte,
     y compris celles qui ne viennent pas de nous. On se limite à nos surfaces
     — nos seuls éléments animés y vivent de toute façon. */
  .rb-page *,
  .rb-page *::before,
  .rb-page *::after,
  .rb-app *,
  .rb-app *::before,
  .rb-app *::after,
  .rb-assistant *,
  .rb-assistant *::before,
  .rb-assistant *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Les points d'attente restent visibles, simplement immobiles. */
  .rb-points span {
    opacity: .75;
  }
}

/* ---------------------------------------------------------------------------
   14. Contraste renforcé
   --------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --rb-encre-doux: var(--rb-encre);
    --rb-bordure: var(--rb-bordure-forte);
  }

  .rb-fenetre,
  .rb-produit,
  .rb-article-lien,
  .rb-suggestion,
  .rb-notice-info {
    border-width: 2px;
  }
}