/* ===========================================================================
   Réponses Bio SHOP — habillage de l'assistant

   Surcouche, à charger APRÈS styles.css. Elle ne redéfinit que la palette, une
   échelle de tailles resserrée et quelques finitions : la structure, le
   comportement et l'accessibilité restent ceux de la feuille principale.

   Palette relevée sur reponsesbio.shop :
     #41aa00  vert vif      action, identité
     #99cc00  lime          rehauts
     #ff9900  orange        promotions
     #8ed1fc  bleu pastel   fonds doux
     #abb8c3  bleu gris     neutres

   ÉCHELLE. La feuille de base est dimensionnée pour le lectorat du magazine,
   plutôt âgé : cibles de 44 à 48 px, saisie à 1,1 rem. Sur la boutique, tout
   est ramené d'un cran — sans jamais passer sous 40 px de hauteur utile, en
   dessous de quoi un bouton devient difficile à viser au doigt.

   PARTI PRIS DE FINITION. Pas de gros aplats ni d'ombres appuyées : un bandeau
   clair souligné d'un filet dégradé, des bordures fines, des ombres à peine
   perceptibles. La couleur signe, elle n'écrase pas.
   =========================================================================== */

:root {
  /* --- Fonds : bleu pastel très clair, jamais gris ---------------------- */
  --rb-fond: #eff7fb;
  --rb-fond-carte: #ffffff;
  --rb-fond-creux: #f5fafd;
  --rb-fond-vert: #eef8e6;
  --rb-fond-terre: #fff5e6;

  /* --- Encres : gris bleuté ------------------------------------------- */
  --rb-encre: #263a46;
  --rb-encre-doux: #5a7382;
  --rb-encre-tres-doux: #8ba3b1;

  /* --- Marque ---------------------------------------------------------- */
  --rb-vert: #41aa00;
  /* 6 % plus sombre que le vert de marque : la pastille « Magazine »
     passait à 4,14 sur son fond vert pâle, sous le seuil de 4,5. */
  --rb-vert-fonce: #307f00;
  --rb-terre: #ef8f00;
  /* Idem pour la pastille « Encyclopédie » et le dépliant du bandeau :
     3,68 sur fond orange pâle. */
  --rb-terre-fonce: #a36100;

  --rb-action-fond: #41aa00;
  --rb-action-fond-survol: #338700;
  --rb-action-texte: #ffffff;

  --rb-bordure: #dfebf3;
  --rb-bordure-forte: #bcd5e5;
  --rb-focus: #ef8f00;

  /* Angles discrets, ombres à peine posées. */
  --rb-rayon: 12px;
  --rb-rayon-petit: 8px;
  --rb-ombre: 0 1px 2px rgba(38, 58, 70, .04), 0 6px 18px rgba(38, 58, 70, .06);
  --rb-ombre-douce: 0 1px 2px rgba(38, 58, 70, .05);

  --rbs-lime: #99cc00;
  --rbs-bleu-pastel: #8ed1fc;
}

/* La boutique est toujours en clair. */
:root { color-scheme: light; }

/* =========================================================================
   Largeur et centrage
   =========================================================================

   La feuille de base donne « margin: 0 auto » au bloc, mais AUCUNE largeur
   maximale. Or un centrage automatique ne produit rien tant que l'élément
   occupe déjà toute la largeur disponible : posé dans un conteneur pleine
   page, l'assistant s'étalait donc d'un bord à l'autre, et aucune structure
   ajoutée autour ne pouvait le retenir puisqu'il ne demandait jamais moins.

   On lui donne donc sa propre largeur de lecture. Pour l'ajuster, il suffit
   de redéfinir --rbs-largeur sur la page hôte, sans toucher à ce fichier :

     #rb-assistant { --rbs-largeur: 46rem; }
   ========================================================================= */

.rb-assistant {
  width: 100%;
  max-width: var(--rbs-largeur, 54rem);
  margin-left: auto;
  margin-right: auto;
}

/* La mention de prévention suit le même axe : elle appartient au bloc, elle
   ne doit pas être plus large que lui. */
.rb-embed-note {
  max-width: var(--rbs-largeur, 54rem);
}

/* =========================================================================
   Priorité sur le thème de la boutique
   =========================================================================

   Un thème WordPress impose ses couleurs et ses polices à tout ce qu'il
   contient, avec des règles souvent plus prioritaires que les nôtres : le
   texte de l'assistant reprenait donc les couleurs du site, et non les
   siennes.

   On rétablit l'autorité en préfixant par #rb-assistant, un identifiant, dont
   la priorité l'emporte sur les règles de thème écrites en classes. Le bloc
   pose sa couleur et sa police, ses éléments en héritent, puis les couleurs
   propres à chaque composant sont réaffirmées au même niveau — sinon elles
   seraient à leur tour écrasées par la règle générale ci-dessous.
   ========================================================================= */

#rb-assistant {
  color: var(--rb-encre);
  font-family: var(--rb-texte);
}

#rb-assistant p,
#rb-assistant h2,
#rb-assistant h3,
#rb-assistant li,
#rb-assistant span,
#rb-assistant label,
#rb-assistant summary,
#rb-assistant button,
#rb-assistant textarea {
  color: inherit;
  font-family: inherit;
}

/* Textes secondaires. */
#rb-assistant .rb-vide-intro,
#rb-assistant .rb-saisie-etiquette,
#rb-assistant .rb-saisie-pied,
#rb-assistant .rb-saisie-pied span,
#rb-assistant .rb-question-etiquette,
#rb-assistant .rb-bloc-titre,
#rb-assistant .rb-produit-note,
#rb-assistant .rb-club-texte,
#rb-assistant .rb-rappel,
#rb-assistant .rb-statut {
  color: var(--rb-encre-doux);
}

/* Éléments qui portent leur propre couleur : elle doit survivre. */
#rb-assistant .rb-bloc-titre svg,
#rb-assistant .rb-fenetre-entete svg,
#rb-assistant .rb-num {
  color: var(--rb-vert);
}

#rb-assistant .rb-envoyer,
#rb-assistant .rb-envoyer span {
  color: var(--rb-action-texte);
}

#rb-assistant .rb-produit-prix {
  color: var(--rb-vert-fonce);
}

#rb-assistant .rb-produit-promo {
  color: #ffffff;
}

#rb-assistant .rb-citation {
  color: #1f6b96;
}

#rb-assistant .rb-citation:hover,
#rb-assistant .rb-citation:focus-visible {
  color: #ffffff;
}

#rb-assistant .rb-origine {
  color: var(--rb-vert-fonce);
}

#rb-assistant .rb-origine-encyclopedie {
  color: var(--rb-terre-fonce);
}

#rb-assistant .rb-club-lien {
  color: var(--rb-vert-fonce);
}

#rb-assistant .rb-suggestion:hover,
#rb-assistant .rb-suggestion:focus-visible {
  color: var(--rb-vert-fonce);
}

#rb-assistant .rb-question:hover .rb-question-texte {
  color: var(--rb-encre);
}

/* La mention de prévention vit HORS du bloc : elle ne peut pas s'appuyer sur
   l'identifiant. La classe doublée lui donne la priorité nécessaire, sans
   recourir à !important. */
.rb-embed-note.rb-embed-note {
  color: var(--rb-encre-doux);
  font-family: var(--rb-texte);
}

/* =========================================================================
   La fenêtre
   ========================================================================= */

.rb-fenetre {
  border-color: var(--rb-bordure);
  overflow: hidden;
}

/* Bandeau CLAIR souligné d'un filet dégradé, plutôt qu'un gros aplat de
   couleur : la signature reste lisible, l'ensemble s'allège. */
.rb-fenetre-entete {
  position: relative;
  padding: .78rem 1.15rem;
  gap: .55rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--rb-fond-creux) 100%);
  border-bottom: 0;
}

.rb-fenetre-entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rb-vert) 0%, var(--rbs-lime) 45%, var(--rbs-bleu-pastel) 100%);
}

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

.rb-fenetre-titre {
  color: var(--rb-encre);
  font-size: 1.06rem;
  letter-spacing: -.005em;
}

.rb-corps {
  padding: 1.15rem;
}

@media (max-width: 30rem) {
  .rb-corps { padding: .9rem; }
  .rb-fenetre-entete { padding: .7rem .9rem; }
}

/* =========================================================================
   Saisie et actions
   ========================================================================= */

/* Étiquette traitée en micro-titre : plus petite, mais plus affirmée. */
.rb-saisie-etiquette {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rb-encre-doux);
  margin-bottom: .4rem;
}

.rb-champ {
  min-height: 66px;
  padding: .65rem .8rem;
  font-size: 1rem;
  line-height: 1.5;
  border-color: var(--rb-bordure-forte);
}

/* Bouton d'envoi : à plat, sans relief appuyé. */
.rb-envoyer {
  min-height: 42px;
  padding: .55rem 1.05rem;
  font-size: .95rem;
  box-shadow: none;
}

.rb-envoyer svg {
  width: 19px;
  height: 19px;
}

.rb-saisie-pied {
  font-size: .8rem;
}

/* Suggestions : pastilles fines, bleu pastel, survol vert. */
.rb-suggestion {
  min-height: 40px;
  padding: .42rem .85rem;
  font-size: .9rem;
  font-weight: 600;
  background-color: #f2f9fd;
  border-color: #d3e7f5;
  color: var(--rb-encre);
}

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

.rb-vide h3 {
  font-size: 1.02rem;
}

.rb-vide-intro {
  font-size: .9rem;
}

.rb-plus summary {
  font-size: .88rem;
}

/* Barre « Recommencer » : discrète, elle ne rivalise pas avec l'envoi. */
.rb-recommencer {
  padding: .38rem .75rem;
  font-size: .84rem;
}

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

/* =========================================================================
   Fil des échanges
   ========================================================================= */

/* Une question tient en une ou deux lignes : son encadré reste fin. */
.rb-question {
  padding: .55rem .8rem;
  margin-bottom: .9rem;
  border-radius: 8px;
  font-size: .98rem;
  background-color: #f5fbf0;
  border-color: #dcefcb;
  border-left: 3px solid var(--rbs-lime);
}

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

.rb-question-etiquette {
  font-size: .69rem;
  letter-spacing: .1em;
  margin-bottom: .1rem;
}

.rb-question-chevron {
  width: 18px;
  height: 18px;
}

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

.rb-reponse-texte {
  font-size: 1rem;
  line-height: 1.65;
}

/* Citations : compactes, teintées de bleu. */
.rb-citation {
  min-width: 1.7em;
  font-size: .85em;
  background-color: #ecf6fd;
  border-color: #c2e0f6;
  color: #1f6b96;
}

.rb-citation:hover,
.rb-citation:focus-visible {
  background-color: var(--rb-vert);
  border-color: var(--rb-vert);
  color: #ffffff;
}

/* Titres de bloc : plus petits, en capitales fines. */
.rb-bloc-titre {
  gap: .45rem;
  margin-bottom: .6rem;
  font-family: var(--rb-texte);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rb-encre-doux);
}

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

/* Sources : lignes fines, origine en pastille discrète. */
.rb-article-lien {
  min-height: 40px;
  padding: .5rem .75rem;
  font-size: .94rem;
  background-color: var(--rb-fond-creux);
}

.rb-origine {
  padding: .02rem .4rem;
  font-size: .69rem;
  letter-spacing: .04em;
  background-color: #eef7e5;
  border-color: #d3e8bd;
  color: var(--rb-vert-fonce);
}

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

/* =========================================================================
   Produits — compacts, deux par ligne sur mobile

   La feuille de base impose 14 rem minimum par carte : sur un téléphone, cela
   n'en laisse tenir qu'UNE par ligne, et la liste devient une colonne à faire
   défiler. On force donc deux colonnes, et on laisse la grille s'élargir
   au-delà.
   ========================================================================= */

.rb-produits {
  gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .rb-produits {
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
  }
}

.rb-produit-lien {
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon-petit);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.rb-produit-lien:hover,
.rb-produit-lien:focus-visible {
  border-color: var(--rb-vert);
  box-shadow: 0 3px 12px rgba(65, 170, 0, .12);
}

/* Vignette plus basse : c'est elle qui donnait leur hauteur aux cartes. */
.rb-produit-image {
  aspect-ratio: 16 / 10;
  background-color: #f7fbfe;
}

.rb-produit-corps {
  gap: .2rem;
  padding: .55rem .65rem .65rem;
}

.rb-produit-nom {
  font-size: .89rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--rb-encre);
}

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

.rb-produit-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
  margin-top: .3rem;
  font-size: .96rem;
  font-weight: 700;
  color: var(--rb-vert-fonce);
}

.rb-produit-promo {
  padding: .04rem .35rem;
  background-color: var(--rb-terre);
  border-color: var(--rb-terre);
  border-radius: 4px;
  color: #ffffff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .rb-produit-corps { padding: .7rem .8rem .8rem; }
  .rb-produit-nom { font-size: .95rem; }
  .rb-produit-prix { font-size: 1.03rem; }
}

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

/* =========================================================================
   Invitation au Club et mentions
   ========================================================================= */

.rb-club {
  gap: .6rem;
  padding: .7rem .85rem;
  margin-bottom: .9rem;
  border-left-width: 3px;
}

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

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

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

.rb-club-fermer {
  width: 26px;
  height: 26px;
  font-size: 1.1rem;
}

.rb-rappel,
.rb-embed-note {
  font-size: .82rem;
  background-color: #f7fbfd;
  border-color: var(--rb-bordure);
  color: var(--rb-encre-doux);
}

/* =========================================================================
   VARIANTE COMPACTE — page d'accueil

   Ajouter rb-compact sur #rb-assistant. Même identité, moins de hauteur : une
   page d'accueil invite à cliquer, elle n'occupe pas tout l'écran.
   ========================================================================= */

.rb-compact .rb-corps {
  padding: 1rem;
}

.rb-compact .rb-vide h3 {
  font-size: .98rem;
  margin-bottom: .15rem;
}

.rb-compact .rb-vide-intro {
  font-size: .87rem;
  margin-bottom: .6rem;
}

/* Au-delà de trois exemples, la page d'accueil s'alourdit. */
.rb-compact .rb-vide > .rb-suggestions > li:nth-child(n + 4) {
  display: none;
}

.rb-compact .rb-plus {
  display: none;
}

.rb-compact .rb-champ {
  min-height: 56px;
}

/* La mise en garde accompagne TOUTES les implantations, y compris compacte :
   une mention de prévention ne se supprime pas parce que le bloc est court. */
.rb-compact + .rb-embed-note {
  margin-top: .6rem;
  font-size: .76rem;
  line-height: 1.5;
}

/* =========================================================================
   CHARTE — arrêtée sur maquette, août 2026

   Elle remplace les aplats teintés par du blanc et introduit un bleu d'action.
   Le raisonnement, pour qui reprendra ce fichier :

     - LES FONDS. Les teintes vertes et bleutées qui portaient les panneaux
       disparaissent ; la bordure fine suffit à séparer. Les creux vraiment
       neutres (--rb-fond-creux) restent : ils ne colorent pas, ils creusent.
     - DEUX COULEURS, DEUX RÔLES. Le vert reste l'action principale — envoyer —
       et la signature de la marque. Le bleu prend les actions secondaires et
       les suggestions. Sans cette séparation, tout se disputait le même vert.
     - LES ANGLES. La pastille pleine (999px) laisse place à 12 px : à hauteur
       égale un bouton paraît moins massif, sans perdre un pixel de cible.
     - LES CIBLES NE BOUGENT PAS. 44 px pour un bouton, 40 pour une suggestion.
       C'est le seuil sous lequel un doigt manque sa cible, et le lectorat est
       âgé : l'allègement est visuel, jamais dimensionnel.

   La priorité par #rb-assistant est reprise là où une règle antérieure de ce
   fichier l'utilise déjà — sinon la couleur d'origine l'emporterait.
   ========================================================================= */

:root {
  --rb-fond: #ffffff;
  /* 4,44 sur blanc : deux pour cent plus sombre suffisent à passer 4,5,
     et l'écart ne se voit pas. Le contraste étant symétrique, cela vaut
     aussi pour le blanc posé DESSUS, sur les boutons pleins. */
  --rbs-bleu-action: #2e79be;
  --rbs-bleu-action-fonce: #24628f;
}

/* --- Panneaux : le blanc partout, la bordure porte la séparation --------- */

.rb-question,
.rb-club,
.rb-install {
  background-color: var(--rb-fond-carte);
}

/* La question gardait un liseré vert pâle qui doublait le filet de gauche.
   Attention : « border-color » couvre les QUATRE côtés — sans la ligne
   suivante, il effacerait aussi le filet lime, qui est la seule marque
   restante distinguant une question d'une réponse. */
.rb-question {
  border-color: var(--rb-bordure);
  border-left-color: var(--rbs-lime);
}

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

/* --- Le bleu d'action : suggestions et actions secondaires --------------- */

.rb-suggestion {
  background-color: var(--rb-fond-carte);
  border-color: var(--rbs-bleu-action);
  border-radius: 12px;
}

#rb-assistant .rb-suggestion {
  color: var(--rbs-bleu-action);
}

.rb-suggestion:hover,
.rb-suggestion:focus-visible {
  background-color: var(--rbs-bleu-action);
  border-color: var(--rbs-bleu-action);
}

#rb-assistant .rb-suggestion:hover,
#rb-assistant .rb-suggestion:focus-visible {
  color: #ffffff;
}

/* L'icône du bandeau passe au bleu : elle annonce, elle n'agit pas. */
#rb-assistant .rb-fenetre-entete svg {
  color: var(--rbs-bleu-action);
}

/* --- Angles : 12 px là où la pastille était pleine ----------------------- */

.rb-envoyer,
.rb-recommencer,
.rb-citation,
.rb-origine {
  border-radius: 12px;
}

/* --- Le bouton d'envoi : même cible, texte un cran plus lisible ---------- */

.rb-envoyer {
  min-height: 44px;
  font-size: 1rem;
}

/* --- Le filet sous le bandeau : uni, plutôt que dégradé ------------------ */

.rb-fenetre-entete::after {
  background: var(--rb-vert);
}

/* --- Suggestions : deux par ligne sur téléphone --------------------------

   En pleine largeur, chaque exemple occupait sa propre ligne : quatre
   suggestions faisaient près de 190 px empilés au-dessus du champ de saisie,
   soit un quart de l'écran avant même d'avoir écrit un mot.

   Deux colonnes ramènent l'ensemble sous 120 px sans retirer un seul exemple.
   Un libellé long y tient sur deux lignes plutôt que de déborder — c'est le
   même parti que celui déjà retenu pour les vignettes de produits. */

@media (max-width: 30rem) {
  .rb-suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  /* Les cases de la grille sont les <li> ; le bouton doit remplir la sienne,
     faute de quoi il se recroqueville sur son texte et la grille se voit. */
  .rb-suggestions > li {
    display: flex;
  }

  .rb-suggestion {
    width: 100%;
    justify-content: center;
    padding: .42rem .6rem;
    text-align: center;
    line-height: 1.3;
  }
}

/* --- Défense contre le thème de la boutique ------------------------------

   Un thème WordPress habille TOUS les boutons de la page : hauteur fixe,
   texte insécable, majuscules forcées, interlignage serré. Ses règles étant
   souvent plus prioritaires que les nôtres, elles s'appliquaient aussi aux
   nôtres — et un libellé long débordait alors de sa pastille au lieu de
   passer à la ligne.

   On ne peut pas gagner ce bras de fer avec des classes seules : on reprend
   la main par l'identifiant #rb-assistant, et surtout on RÉAFFIRME les
   propriétés que le thème pose, plutôt que d'espérer qu'il ne les pose pas.
   Ajouter une feuille supplémentaire n'y changerait rien : ce n'est pas un
   problème de fichier, c'est un problème de priorité. */

#rb-assistant .rb-suggestion,
#rb-assistant .rb-envoyer,
#rb-assistant .rb-recommencer,
#rb-assistant .rb-club-lien,
#rb-assistant .rb-article-lien,
#rb-assistant .rb-produit-lien {
  height: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
}

#rb-assistant .rb-suggestion,
#rb-assistant .rb-recommencer {
  line-height: 1.3;
}

/* Le thème donne parfois une largeur minimale aux boutons : dans une grille
   de deux colonnes, elle force la case à s'élargir et le texte sort du cadre. */
#rb-assistant .rb-suggestion {
  min-width: 0;
}


/* =========================================================================
   « Emportez l'assistant » — bandeau des pages du site

   Il vit HORS de #rb-assistant, comme la mention légale : il appartient à la
   page, pas au widget. D'où les sélecteurs doublés, qui lui donnent assez de
   priorité face au thème sans recourir à !important.

   LE CODE DISPARAÎT SUR TÉLÉPHONE. Photographier un code affiché sur l'écran
   que l'on tient dans la main n'a aucun sens : là, c'est le lien qui prend
   toute la place, et la marche à suivre juste au-dessus.
   ========================================================================= */

.rb-emporter.rb-emporter {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: var(--rbs-largeur, 54rem);
  margin: 1.4rem auto 0;
  padding: .95rem 1.1rem;
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure);
  border-left: 3px solid var(--rb-terre);
  border-radius: var(--rb-rayon-petit);
  color: var(--rb-encre);
  font-family: var(--rb-texte);
  font-size: 1rem;
  line-height: 1.6;
}

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

.rb-emporter.rb-emporter p { margin: 0 0 .4rem; }

.rb-emporter-titre.rb-emporter-titre {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--rb-encre);
}

.rb-emporter-pas.rb-emporter-pas {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--rb-encre-doux);
}

.rb-emporter-lien.rb-emporter-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .2rem;
  padding: .5rem 1.1rem;
  background-color: var(--rbs-bleu-action);
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.rb-emporter-lien.rb-emporter-lien:hover,
.rb-emporter-lien.rb-emporter-lien:focus-visible {
  background-color: var(--rbs-bleu-action-fonce);
  color: #ffffff;
}

.rb-emporter-qr.rb-emporter-qr {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid var(--rb-bordure);
  border-radius: var(--rb-rayon-petit);
}

@media (max-width: 34rem) {
  .rb-emporter-qr.rb-emporter-qr { display: none; }
  .rb-emporter.rb-emporter { gap: 0; }
}

/* =========================================================================
   « Pour aller plus loin » — les ouvrages

   Volontairement plus sobre que les vignettes de produits : ce bloc n'est pas
   une étagère, c'est un renvoi de lecture. Une ligne par ouvrage, le chapitre
   concerné en dessous — c'est lui qui donne sa valeur à la recommandation, et
   c'est tout ce que le lecteur verra du livre.
   ========================================================================= */

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

.rb-livre-lien {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-height: 44px;
  padding: .6rem .8rem;
  background-color: var(--rb-fond-carte);
  border: 1px solid var(--rb-bordure);
  border-left: 3px solid var(--rbs-bleu-action);
  border-radius: var(--rb-rayon-petit);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.rb-livre-lien:hover,
.rb-livre-lien:focus-visible {
  border-color: var(--rbs-bleu-action);
  box-shadow: 0 3px 12px rgba(46, 121, 190, .12);
}

#rb-assistant .rb-livre-titre {
  font-family: var(--rb-titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rb-encre);
}

#rb-assistant .rb-livre-auteur {
  font-size: .84rem;
  color: var(--rb-encre-doux);
}

/* La phrase qui justifie. Sans elle, on ne saurait pas POURQUOI ce livre. */
#rb-assistant .rb-livre-chapitre {
  margin-top: .22rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--rbs-bleu-action-fonce);
}

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