/* Le robot guide : coin de page, bulle, accueil, astuce, visite et chat.
 * Les couleurs suivent la charte par quelques variables :
 *   --rb-main (la couleur d'accent), --rb-ui-fond (les bulles), --rb-ui-encre (le texte),
 *   --rb-ui-doux (les messages du robot), --rb-ui-gris (les petites lignes). */
:root{--rb-ui-fond:#fff;--rb-ui-encre:#16151a;--rb-ui-doux:#f3f2f7;--rb-ui-gris:#6f6d7a;--rb-ui-moi:#efe9fe;--rb-z:55}
#robot-couches{font-size:15px;line-height:1.45;color:var(--rb-ui-encre)}
#robot-couches button{font:inherit}
.rb-lab{font-size:13px;color:var(--rb-ui-gris)}
.rb-petit{font-size:12px!important;color:var(--rb-ui-gris)!important}
.rb-cta{min-height:38px;padding:0 16px;border:none;border-radius:99px;background:var(--rb-main);color:#fff;font-weight:600;cursor:pointer}
.rb-pill{min-height:42px;padding:0 18px;border:none;border-radius:99px;background:var(--rb-ui-doux);color:var(--rb-ui-encre);cursor:pointer;width:100%}
.rb-lien{background:none;border:none;padding:4px 2px;color:var(--rb-main);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rb-chip{min-height:34px;padding:4px 13px;border-radius:99px;border:1px solid rgba(0,0,0,.1);background:var(--rb-ui-fond);color:var(--rb-ui-encre);font-size:13px;cursor:pointer;text-align:left}
.rb-ib{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:var(--rb-ui-fond);color:var(--rb-ui-encre);cursor:pointer;font-size:18px;line-height:1;padding:0}

/* Le coin : en bas à droite, au-dessus d'une barre d'onglets sur téléphone. */
.rb-coin{position:fixed;right:14px;bottom:88px;z-index:var(--rb-z);border:none;background:none;padding:0;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(40,20,90,.25))}
@media (min-width:900px){.rb-coin{bottom:24px;right:24px}}

/* L'astuce : une bulle qui sort du robot, une seule fois par écran. */
.rb-astuce{position:fixed;z-index:var(--rb-z);right:14px;bottom:150px;max-width:min(300px,calc(100vw - 28px));background:var(--rb-ui-fond);border-radius:18px 18px 4px 18px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:10px 8px 10px 14px;font-size:14px;display:flex;gap:6px;align-items:flex-start}
.rb-astuce.rb-entre{animation:rbApparait .35s ease-out}
@media (min-width:900px){.rb-astuce{bottom:90px;right:24px}}
@keyframes rbApparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* L'accueil du jour. */
.rb-scrim{position:fixed;inset:0;z-index:calc(var(--rb-z) + 3);background:rgba(17,17,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.rb-accueil{background:var(--rb-ui-fond);border-radius:28px;padding:24px;width:min(420px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;animation:rbApparait .35s ease-out}
.rb-accueil-titre{font-size:20px;font-weight:600}

/* La visite : un projecteur sur l'élément, le robot et sa bulle à côté. */
.rb-spot{position:fixed;z-index:calc(var(--rb-z) + 1);border-radius:14px;box-shadow:0 0 0 200vmax rgba(17,17,20,.55);border:2px solid #fff;pointer-events:none;transition:all .35s}
.rb-voile{position:fixed;inset:0;z-index:calc(var(--rb-z) + 1);background:rgba(17,17,20,.55)}
.rb-visite{position:fixed;z-index:calc(var(--rb-z) + 2);display:flex;gap:8px;align-items:flex-start;width:min(340px,calc(100vw - 20px));transition:left .35s,top .35s}
.rb-visite.rb-centre{left:50%;top:40%;transform:translate(-50%,-50%)}
.rb-bulle{background:var(--rb-ui-fond);border-radius:16px;padding:12px 14px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);flex:1;display:flex;flex-direction:column;gap:10px}
.rb-boutons{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Le chat : en bas sur téléphone, à droite sur ordinateur. */
.rb-chat{position:fixed;z-index:calc(var(--rb-z) + 2);left:12px;right:12px;bottom:84px;max-height:72vh;background:var(--rb-ui-fond);border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:16px;display:flex;flex-direction:column;gap:12px}
.rb-chat.rb-entre{animation:rbApparait .25s ease-out}
@media (min-width:900px){.rb-chat{left:auto;right:24px;bottom:96px;width:390px}}
.rb-tete{display:flex;align-items:center;gap:10px}
.rb-fil{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:120px}
.rb-moi{align-self:flex-end;background:var(--rb-ui-moi);border-radius:16px 16px 4px 16px;padding:9px 12px;font-size:14px;max-width:85%}
.rb-lui{align-self:flex-start;background:var(--rb-ui-doux);border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:14px;max-width:92%;display:flex;flex-direction:column;gap:8px}
.rb-choix{display:flex;flex-wrap:wrap;gap:6px}
.rb-ligne{display:flex;flex-direction:column;gap:2px;background:var(--rb-ui-fond);border-radius:12px;padding:10px 12px}
.rb-val{display:flex;justify-content:space-between;gap:12px}
.rb-form{display:flex;gap:8px}
.rb-form input{flex:1;min-width:0;height:44px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:var(--rb-ui-doux);padding:0 12px;font-size:16px;color:var(--rb-ui-encre)}
.rb-form .rb-cta{width:44px;padding:0}
@media (prefers-reduced-motion:reduce){.rb-entre,.rb-accueil{animation:none!important}.rb-spot,.rb-visite{transition:none}}