/* ===========================================================================
   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
   --------------------------------------------------------------------------- */
*,
*::before,
*::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. */
[hidden] {
  display: none !important;
}

html {
  /* Aucun défilement horizontal, quelle que soit la largeur. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--rb-fond);
  color: var(--rb-encre);
  font-family: var(--rb-texte);
  font-size: 19px;
  line-height: 1.7;
  overflow-x: hidden;
  /* Un lettrage très légèrement plus aéré se lit mieux à 70 ans. */
  letter-spacing: .003em;
}

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

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

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

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

:focus:not(:focus-visible) {
  outline: none;
}

: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;
  }
}

/* --- 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;
}

/* --- 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;
}

/* 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) {
  body {
    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) {
  *,
  *::before,
  *::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;
  }
}