/* beta.css — Ce qui entoure le produit : la pastille d'usage, la boîte à idées,
   le bandeau cookies.

   Trois éléments présents sur TOUTES les pages, donc trois éléments qui doivent
   se faire oublier. D'où : pas de couleur (la charte est en noir et blanc, les
   couleurs sont réservées aux verdicts), pas d'ombre portée marquée, et une
   taille de texte plus petite que le contenu. Ils passent devant seulement au
   moment où ils ont quelque chose à dire — la pastille change de ton au dernier
   tiers du quota, pas avant.

   Les tokens de theme.css sont repris avec une valeur de repli : ce fichier est
   chargé sur des pages publiques qui n'ont pas forcément le thème complet. */

/* ══════════ La pastille et la boîte à idées (bas à gauche) ══════════ */

.mr-aide {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
}

.mr-quota {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .68rem;
    letter-spacing: .01em;
    color: var(--mr-text-muted, #777);
    background: var(--mr-surface-card, #fff);
    border: 1px solid var(--mr-border, #e5e5e5);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.mr-quota.est-bas {
    color: var(--mr-text, #111);
    border-color: var(--mr-text, #111);
}

.mr-quota.est-fini {
    color: #fff;
    background: #111;
    border-color: #111;
}

.mr-aide-bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: .78rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--mr-text, #111);
    background: var(--mr-surface-card, #fff);
    border: 1px solid var(--mr-border, #e5e5e5);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.mr-aide-bouton:hover {
    border-color: var(--mr-text, #111);
    background: var(--mr-surface-hover, #f5f5f5);
}

.mr-aide-panneau {
    width: min(340px, calc(100vw - 32px));
    background: var(--mr-surface-card, #fff);
    border: 1px solid var(--mr-text, #111);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .13);
}

.mr-aide-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid var(--mr-border, #e5e5e5);
}

.mr-aide-onglets {
    display: flex;
    gap: 4px;
}

.mr-aide-onglets button {
    padding: 5px 11px;
    font-size: .74rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--mr-text-muted, #777);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}

.mr-aide-onglets button.est-actif {
    color: var(--mr-text, #111);
    border-color: var(--mr-border, #e5e5e5);
    background: var(--mr-surface-hover, #f5f5f5);
}

.mr-aide-fermer {
    background: none;
    border: none;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--mr-text-muted, #777);
    cursor: pointer;
    padding: 2px 6px;
}

.mr-aide-corps {
    padding: 12px;
}

.mr-aide-question {
    margin: 0 0 9px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mr-text, #111);
}

.mr-aide-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 11px;
}

.mr-aide-puce {
    padding: 5px 9px;
    font-size: .7rem;
    font-family: inherit;
    color: var(--mr-text-muted, #777);
    background: var(--mr-surface-sunken, #fafafa);
    border: 1px solid var(--mr-border, #e5e5e5);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}

.mr-aide-puce.est-actif {
    color: #fff;
    background: #111;
    border-color: #111;
}

.mr-aide-texte {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--mr-text, #111);
    background: var(--mr-surface-sunken, #fafafa);
    border: 1px solid var(--mr-border, #e5e5e5);
    border-radius: 7px;
    resize: vertical;
}

.mr-aide-texte:focus {
    outline: none;
    border-color: var(--mr-text, #111);
}

.mr-aide-envoyer {
    margin-top: 9px;
    width: 100%;
    padding: 9px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mr-btn-text, #fff);
    background: var(--mr-btn-bg, #111);
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.mr-aide-envoyer:disabled {
    opacity: .55;
    cursor: default;
}

.mr-aide-merci {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--mr-text-muted, #777);
}

/* Sur mobile, le libellé de la pastille d'aide disparaît : l'icône suffit et
   la place manque. (Le bandeau cookies, qui partageait cette requête média,
   vit maintenant dans `cookies.css` — il voyage avec la mesure.) */
@media (max-width: 700px) {
    .mr-aide-bouton span { display: none; }
}

/* La rangee du bas : le bouton d'aide, et ce que d'autres ecrans posent a cote.
   `.mr-aide` est une colonne, donc sans cette rangee tout ajout se retrouverait
   SOUS le bouton au lieu d'etre a sa droite. */
.mr-aide-rangee {
    display: flex;
    align-items: center;
    gap: 6px;
}