/* =========================================================================
   reglages.css — sous-vue « Réglages » du Suivi (#/pipeline/reglages).
   Cette feuille est servie à tout le monde, comme les autres CSS : elle ne
   nomme AUCUN module à privilège — uniquement ses propres classes rg-*.
   Design : mêmes conventions liquid-glass que campagnes.css / liste.css
   (panneaux .glass, verre-dans-verre .glassin > .inner2, tokens
   --txt/--muted/--dim/--line/--accent/--warn/--ok).
   Chaque élément interactif porte une classe rg-* DÉDIÉE et unique (ancres du
   harnais de tests — leçon du 2026-08-12 : jamais de classe générique comme
   ancre). Interface volontairement ÉPURÉE : une phrase par idée, le détail en
   infobulle.

   18/08/2026 — refonte de la forme : plus de sections empilées, mais UNE barre
   de trois onglets (pastilles .fchip, définies par liste.css du bundle commun)
   et UN SEUL panneau visible. C'est ce qui supprime le « je dois descendre,
   c'est long » : un onglet ne montre que son propre réglage.
   19/08/2026 — le panneau ne défile PLUS dans sa propre boîte : son contenu
   coule dans la page (cf. `.rg-panneau` plus bas).
   ========================================================================= */

.rg-root{display:flex;flex-direction:column;gap:12px;max-width:960px;
  /* Réserve pour le dock flottant : sans elle, la dernière rangée de boutons
     passe derrière lui et devient en partie incliquable. */
  padding-bottom:160px}

/* ---------- Barre d'onglets ------------------------------------------------- */
/* 18/08/2026 — les onglets ne sont PLUS des pastilles encadrées (demande de
   Sylvain : « tu as mis à chaque fois ça dans un cadre pour chaque partie ;
   retire ces cadres, mets directement sur la page, c'est mieux »).

   Trois cadres arrondis côte à côte pour trois mots, c'est trois fois plus de
   dessin que d'information — et sur une page qui est elle-même une suite de
   panneaux encadrés, ça faisait un cadre dans un cadre. Ils redeviennent du
   TEXTE posé sur la page ; ce qui distingue l'onglet actif n'est plus une
   boîte mais un trait sous le mot, à l'accent — le repère le plus court qui
   soit, et celui qui ne dessine aucun contour.

   Les règles annulent explicitement `background`/`border`/`border-radius`
   héritées de `.fchip` (liste.css) : la classe est CONSERVÉE sur le bouton,
   parce qu'elle apporte aussi la mise en page, la taille de texte et les
   états de focus communs à toutes les barres de l'application. */
.rg-onglets{gap:22px;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:4px}
.rg-tab{position:relative;gap:8px;padding:8px 0 11px;
  background:none;border:0;border-radius:0;color:var(--muted)}
.rg-tab:hover{background:none;color:var(--txt)}
.rg-tab.on{background:none;color:var(--txt)}
/* Le trait de l'onglet actif. En ::after et non en `border-bottom` : il doit
   couvrir le filet de la barre (1 px de plus, posé 1 px plus bas), sinon les
   deux se superposent en un trait de deux tons. */
.rg-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:var(--accent)}
.rg-tab .ic{width:14px;height:14px}
.rg-tab-lbl{white-space:nowrap}
/* Le compteur est une donnée réelle (nombre d'adresses / signatures /
   colonnes renvoyé par le serveur), jamais un ornement. Il perd sa pastille en
   même temps que l'onglet perd son cadre — une bulle blanche à l'intérieur
   d'un onglet devenu plat serait le dernier cadre de la série. Reste un
   chiffre nu, en retrait : `--muted` au repos et non `--dim`, qui redevenait
   illisible au-dessus d'une photo (constaté à l'écran le 18/08/2026, « 0 » et
   « 13 » invisibles). */
.rg-tab-n{color:var(--muted);font-size:11.5px;font-weight:800;line-height:1.5;
  font-variant-numeric:tabular-nums}
.rg-tab.on .rg-tab-n{color:var(--txt)}
/* Point d'alerte : un blocage ne doit pas disparaître parce que son panneau
   est replié. L'infobulle de la pastille nomme ce qui bloque. */
.rg-tab-alerte{width:7px;height:7px;border-radius:50%;background:var(--danger,#ff453a);
  box-shadow:0 0 8px color-mix(in srgb, var(--danger,#ff453a) 60%, transparent)}

/* ---------- Section (le panneau de l'onglet en cours) ---------------------- */
.rg-sec{padding:20px 22px;display:flex;flex-direction:column;min-height:0}
.rg-sec-head{margin-bottom:14px;flex:none}
.rg-sec-titre{margin:0;font-size:17px;font-weight:760;letter-spacing:-.01em}
.rg-sec-sous{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
/* PLUS DE CONTENEUR DÉFILANT (19/08/2026, demande de Sylvain : « je ne veux
   pas cet encadré, que ce soit directement sur la page »).

   Avant : le panneau était borné en hauteur (`max-height` en dvh) et défilait
   dans sa propre boîte. C'était une réponse à un vrai problème — restaurer une
   position de lecture après reconstruction — mais au prix d'une seconde barre
   de défilement à l'intérieur de la page, et d'un cadre visible autour de
   chaque réglage.

   Maintenant : le contenu coule dans la page, qui défile seule. Ce qui
   remplace la borne de hauteur :
     · le rembourrage bas du shell dégage le dock flottant (`.rg-root`) — c'est
       ce que faisaient les 145 px retranchés de l'ancien calcul ;
     · la position de lecture est reprise sur la FENÊTRE, avec un rattrapage au
       frame suivant, côté script, pour absorber un document qui raccourcit. */
.rg-panneau{min-width:0}
.rg-panneau:focus{outline:none}
.rg-sec-corps{display:flex;flex-direction:column;gap:12px}

.rg-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:82ch}
.rg-mono{font-family:ui-monospace,monospace;font-size:12px;color:var(--txt)}

/* Rappel de règle (secret jamais saisi ici / signature incomplète) */
.rg-secret{display:flex;gap:9px;align-items:flex-start;margin:0;padding:10px 13px;
  border-radius:12px;border-left:3px solid var(--line);
  background:rgba(255,255,255,.05);font-size:12.5px;line-height:1.55;color:var(--muted)}
.rg-secret .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--dim)}
.rg-sig-regle{border-left-color:var(--warn)}
.rg-sig-regle .ic{color:var(--warn)}

/* ---------- Listes et lignes ----------------------------------------------- */
.rg-liste{display:flex;flex-direction:column;gap:10px}
.rg-vide{display:flex;gap:9px;align-items:flex-start;margin:0;padding:14px 16px;
  border-radius:12px;background:rgba(255,255,255,.05);
  font-size:13px;color:var(--muted);line-height:1.55;flex-direction:column}
.rg-vide .ic{width:16px;height:16px;flex:none;color:var(--dim)}

.rg-row{display:flex;flex-direction:column;gap:7px;padding:13px 15px;
  border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.rg-row-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rg-row-nom{font-size:14.5px;font-weight:720}
.rg-row-meta{margin:0;font-size:12.5px;color:var(--muted)}
.rg-row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.rg-row-actions .btn{padding:7px 13px;font-size:12.5px;color:var(--txt)}

/* ---------- Puces d'état ---------------------------------------------------- */
.rg-chip{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.09);color:var(--muted);white-space:nowrap}
.rg-chip-defaut{background:color-mix(in srgb, var(--accent) 24%, transparent);
  color:var(--txt)}
.rg-chip-regle{background:color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--txt)}
.rg-chip-defaut-pale{color:var(--dim)}
.rg-chip-off{color:var(--dim)}
.rg-chip-ko{background:rgba(255,69,58,.18);color:#ff8d7a}
.rg-chip-garde{background:rgba(255,159,10,.16);color:var(--warn)}

/* ---------- Lignes d'état (utilisable / bloquant) --------------------------- */
.rg-etat{display:flex;gap:8px;align-items:flex-start;margin:0;
  font-size:12.5px;line-height:1.55}
.rg-etat .ic{width:15px;height:15px;flex:none;margin-top:2px}
.rg-etat-ok{color:var(--muted)}
.rg-etat-ok .ic{color:var(--ok)}
.rg-etat-ko{color:#ffb4a6}
.rg-etat-ko .ic{color:var(--danger)}
.rg-etat-off{color:var(--dim)}
.rg-etat-off .ic{color:var(--dim)}
.rg-vars{font-family:ui-monospace,monospace;font-size:12px;color:var(--txt)}

/* ---------- Formulaires ------------------------------------------------------ */
.rg-form .inner2{display:flex;flex-direction:column;gap:13px}
.rg-form-h{margin:0;font-size:14px;font-weight:740}
.rg-grid{display:grid;gap:13px 16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rg-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.rg-lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.rg-aide{font-size:11.5px;color:var(--dim);line-height:1.5}
.rg-inp,.rg-txt,.rg-sel{width:100%;padding:9px 12px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--txt);
  font:inherit;font-size:13px}
.rg-txt{resize:vertical;font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.55}
.rg-sel option{background:var(--panel-solid,#12141a);color:var(--txt)}
.rg-inp::placeholder,.rg-txt::placeholder{color:var(--dim);opacity:1}
.rg-chkline{display:flex;gap:18px;flex-wrap:wrap}
.rg-chkwrap{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px}
.rg-chk{width:15px;height:15px;accent-color:var(--accent)}
.rg-form-bar{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.rg-form-bar .btn{color:var(--txt)}
.rg-form-bar .b1{color:#fff}
.rg-err{margin:0;font-size:12.5px;font-weight:640;color:#ff8d7a;line-height:1.55;
  display:flex;gap:8px;align-items:flex-start}
.rg-err .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--danger)}
.rg-exp-add,.rg-sig-add{align-self:flex-start;color:var(--txt)}
.rg-exp-add .ic,.rg-sig-add .ic{width:15px;height:15px}

/* ---------- Aperçu d'une signature ------------------------------------------ */
.rg-sig-apercu{display:flex;flex-direction:column;gap:2px;padding:10px 13px;
  border-radius:11px;background:rgba(0,0,0,.22);font-size:12.5px;line-height:1.55}
.rg-sig-l{color:var(--txt)}
.rg-sig-manque{font-family:ui-monospace,monospace;color:var(--warn)}
.rg-sig-bloc{margin-top:5px;color:var(--muted);white-space:pre-wrap}
.rg-sig-live{display:flex;flex-direction:column;gap:5px}

/* ---------- Bandeau du modèle local ----------------------------------------- */
.rg-llm{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;
  border-radius:12px;border:1px solid var(--line);font-size:12.5px;line-height:1.55}
.rg-llm .ic{width:16px;height:16px;flex:none;margin-top:2px}
.rg-llm-ok{background:rgba(48,209,88,.10);border-color:rgba(48,209,88,.34)}
.rg-llm-ok .ic{color:var(--ok)}
.rg-llm-ko{background:rgba(255,159,10,.10);border-color:rgba(255,159,10,.34)}
.rg-llm-ko .ic{color:var(--warn)}
.rg-llm-inconnu .ic{color:var(--dim)}
.rg-llm-refresh{margin-left:auto;flex:none;padding:6px 12px;font-size:12px;color:var(--txt)}

/* ---------- Colonnes du pipeline --------------------------------------------- */
.rg-col-groupe{margin:8px 0 0;font-size:11px;font-weight:760;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.rg-col-row{border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);overflow:hidden}
.rg-col-ouverte{border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  background:rgba(255,255,255,.07)}
.rg-col-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:12px 15px;
  background:none;border:none;color:var(--txt);font:inherit;text-align:left;
  cursor:pointer;transition:background .16s}
.rg-col-toggle:hover{background:rgba(255,255,255,.05)}
.rg-col-nom{font-size:14px;font-weight:720;flex:none}
.rg-col-resume{flex:1;min-width:0;font-size:12px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-col-chev{width:16px;height:16px;flex:none;color:var(--dim);transition:transform .18s}
.rg-col-ouverte .rg-col-chev{transform:rotate(180deg)}
.rg-col-body{display:flex;flex-direction:column;gap:13px;padding:0 15px 15px}

/* Ce qui s'applique réellement, avec sa source */
.rg-effectif{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:4px 14px;
  margin:0;padding:11px 13px;border-radius:11px;background:rgba(0,0,0,.20);
  font-size:12.5px;line-height:1.5}
.rg-eff-k{color:var(--dim);font-weight:700}
.rg-eff-v{margin:0;color:var(--txt)}
.rg-eff-src{color:var(--dim)}

/* ---------- Aperçu d'un message ---------------------------------------------- */
.rg-ap{display:flex;flex-direction:column;gap:10px;padding:13px 15px;
  border-radius:12px;border:1px dashed var(--line)}
.rg-ap-note{max-width:none}
.rg-ap-grid{align-items:end}
.rg-col-apercu{align-self:flex-start;color:#fff}
.rg-ap-out:empty{display:none}
.rg-ap-out{display:flex;flex-direction:column;gap:9px}
.rg-ap-llm{display:flex;gap:8px;align-items:flex-start;margin:0;
  font-size:12.5px;line-height:1.55}
.rg-ap-llm .ic{width:15px;height:15px;flex:none;margin-top:2px}
.rg-ap-llm-on{color:var(--txt)}
.rg-ap-llm-on .ic{color:var(--ok)}
.rg-ap-llm-off{color:var(--muted)}
.rg-ap-llm-off .ic{color:var(--dim)}
.rg-ap-meta{margin:0;font-size:12px;color:var(--dim);line-height:1.5}
.rg-ap-objet{display:flex;flex-direction:column;gap:3px;margin:0}
.rg-ap-objet-txt{font-size:13.5px;font-weight:680}
.rg-ap-corps{margin:0;white-space:pre-wrap;font-family:ui-monospace,monospace;
  font-size:12px;line-height:1.6;background:rgba(0,0,0,.26);border-radius:12px;
  padding:14px;overflow-x:auto;max-height:420px;overflow-y:auto}
.rg-ap-warn{display:flex;gap:8px;align-items:flex-start;margin:0;
  font-size:12.5px;color:var(--warn);line-height:1.55}
.rg-ap-warn .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--warn)}
.rg-ap-refuse{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 12px;
  border-radius:11px;background:rgba(255,69,58,.14);color:#ffb4a6;
  font-size:12.5px;font-weight:640;line-height:1.55}
.rg-ap-refuse .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--danger)}

@media (max-width:760px){
  .rg-grid{grid-template-columns:1fr}
  .rg-col-resume{display:none}
  .rg-effectif{grid-template-columns:1fr}
  /* Écran étroit : la barre d'onglets défile horizontalement plutôt que de
     passer sur deux lignes — trois onglets doivent rester une seule rangée,
     sinon on retrouve la hauteur qu'on vient d'économiser. `padding-bottom` à
     0 : le moindre rembourrage écarterait le filet de la barre du trait de
     l'onglet actif, qui est posé sur le bas du BOUTON. */
  .rg-onglets{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:18px;padding-bottom:0}
  .rg-tab{flex:none}
  .rg-tab-n{display:none}
}

/* ---------- Apparition d'un panneau ----------------------------------------
   Une transition très courte : elle dit « le contenu a changé » sans faire
   attendre. Neutralisée en mouvement réduit, comme tout le reste. */
@keyframes rg-panneau-apparait{from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}}
.rg-sec{animation:rg-panneau-apparait .18s ease-out both}

@media (prefers-reduced-motion: reduce){
  .rg-sec{animation:none}
  .rg-col-toggle{transition:none}
  .rg-col-chev{transition:none}
  .rg-tab{transition:none}
}

/* ---------- Comptes d'envoi et de lecture (17/08/2026) ---------------------
   Un bloc par jeu d'identifiants. La grille passe à une colonne sous 760 px :
   un champ de mot de passe à moitié visible est un champ qu'on remplit mal. */
.rg-cred-row{display:flex;flex-direction:column;gap:9px}
.rg-cred-form{display:flex;flex-direction:column;gap:10px}
.rg-cred-grille{display:grid;gap:12px 16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rg-cred-bar{display:flex;justify-content:flex-end}
@media (max-width:760px){
  .rg-cred-grille{grid-template-columns:1fr}
}

/* ---------- ADRESSES D'ENVOI — refonte du 17/08/2026 -----------------------
   Une carte par adresse : état lisible, compteur du jour, actions, diagnostic,
   et le formulaire qui s'ouvre DEDANS. L'ancien bloc « Comptes d'envoi et de
   lecture » a disparu — ses styles .rg-cred-* survivent parce que le
   formulaire fusionné réutilise les mêmes champs. */
.rg-adr-row{display:flex;flex-direction:column;gap:9px}
.rg-adr-mail{font-size:13px}
.rg-adr-etat{display:flex;flex-direction:column;gap:5px}
/* Une adresse configurée mais dont la lecture manque n'est PAS en faute :
   ton neutre, jamais le rouge d'une erreur. */
.rg-etat-off{color:var(--dim)}
.rg-etat-off .ic{color:var(--dim)}
.rg-adr-compteur{display:flex;align-items:center;gap:7px;margin:0;
  font-size:12.5px;font-weight:650;color:var(--muted)}
.rg-adr-compteur .ic{width:14px;height:14px;color:var(--accent-ink)}

/* Diagnostic : trois tons — réussi, à corriger, simplement absent. */
.rg-adr-diag{display:flex;flex-direction:column;gap:6px}
.rg-adr-diag:empty{display:none}
.rg-diag{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 12px;
  border-radius:11px;font-size:12.5px;line-height:1.55}
.rg-diag .ic{width:15px;height:15px;flex:none;margin-top:2px}
.rg-diag-quoi{font-weight:730}
.rg-diag-ok{background:color-mix(in srgb, var(--ok) 13%, transparent);color:var(--txt)}
.rg-diag-ok .ic{color:var(--ok)}
.rg-diag-ko{background:rgba(255,69,58,.14);color:#ffb4a6}
.rg-diag-ko .ic{color:var(--danger)}
.rg-diag-neutre{background:rgba(255,255,255,.06);color:var(--muted)}
.rg-diag-neutre .ic{color:var(--dim)}
.rg-diag-encours{background:rgba(255,255,255,.06);color:var(--muted)}

/* Le bouton d'aide sous un verdict d'échec : il ouvre le formulaire, où vit
   le guide — l'échec offre le chemin, pas seulement la cause. */
.rg-diag-aide{align-self:flex-start}

/* Bandeau « fournisseur reconnu » : il apprend quelque chose, il ne prévient
   de rien — ton informatif, pas d'alerte. */
.rg-adr-devine{margin:0 0 4px}

/* ---------- Guide « quel mot de passe mettre ici ? » (21/08/2026) ---------- */
/* Sous les champs du formulaire d'adresse : étapes numérotées adaptées au
   fournisseur déduit de l'adresse ou du serveur saisi. C'est le mode d'emploi
   À L'ÉCRAN — jamais un renvoi vers une doc externe, sauf le lien direct vers
   la page du fournisseur où créer le mot de passe d'application. */
.rg-guide{margin:2px 0 0;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.rg-guide-titre{margin:0 0 7px;font-weight:730;font-size:13px;color:var(--txt)}
.rg-guide-attention{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;
  font-size:12.5px;line-height:1.55;color:#ffcf9e}
.rg-guide-attention .ic{width:15px;height:15px;flex:none;margin-top:2px;
  color:var(--warn)}
.rg-guide-etapes{margin:0 0 9px;padding-left:20px;display:flex;
  flex-direction:column;gap:5px}
.rg-guide-etapes li{font-size:12.5px;line-height:1.6;color:var(--muted)}
.rg-guide-lien{text-decoration:none;display:inline-block;margin:0 0 4px}
.rg-guide-note{margin:5px 0 0;font-size:11.5px;line-height:1.55;color:var(--dim)}

/* Réglages avancés : repliés par défaut. Ce qui a une réponse connue d'avance
   n'a pas à occuper l'écran de quelqu'un qui veut juste envoyer un e-mail. */
.rg-avance{border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);padding:0}
.rg-avance-tete{cursor:pointer;padding:11px 14px;font-size:12.5px;font-weight:680;
  color:var(--muted);list-style:none;border-radius:12px}
.rg-avance-tete::-webkit-details-marker{display:none}
.rg-avance-tete::before{content:"▸ ";color:var(--dim)}
.rg-avance[open] > .rg-avance-tete::before{content:"▾ "}
.rg-avance-tete:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.rg-avance > .rg-grid{padding:4px 14px 14px}

/* ---------- Éditeur de signature mise en forme (17/08/2026, point 13) -------
   Un `contenteditable` doit RESSEMBLER à un champ de saisie, sinon personne ne
   comprend qu'on peut y écrire. Mêmes bordure, fond et focus que les autres
   champs de l'écran. */
.rg-sig-zone-riche{display:flex;flex-direction:column;gap:0;margin:2px 0 4px}
.rg-sig-zone-riche.hidden{display:none}
.rg-sig-barre{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;
  border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;
  background:rgba(255,255,255,.05)}
.rg-sig-outil{min-width:34px;justify-content:center;font-size:14px;line-height:1}
.rg-sig-editeur{min-height:110px;padding:12px 14px;
  border:1px solid var(--line);border-radius:0 0 12px 12px;
  background:var(--glass);color:var(--txt);
  font-size:13.5px;line-height:1.6;overflow:auto;max-height:320px}
.rg-sig-editeur:focus{outline:2px solid var(--accent-ink);outline-offset:-2px}
.rg-sig-editeur p{margin:0 0 6px}
.rg-sig-editeur ul{margin:0 0 6px;padding-left:20px}
.rg-sig-editeur a{color:var(--accent-ink)}
/* Une image de signature ne doit pas déborder du champ : un logo de 800 px
   collé tel quel rendrait l'éditeur illisible. */
.rg-sig-editeur img{max-width:220px;max-height:110px;vertical-align:middle}

/* Aperçu de la version mise en forme : fond CLAIR, parce que c'est sur fond
   clair que le destinataire la lira. Afficher une signature noire sur notre
   thème sombre donnerait une idée fausse du résultat. */
.rg-sig-apercu-html{margin-top:6px;padding:12px 14px;border-radius:12px;
  background:#ffffff;color:#1a1a1a;font-size:13.5px;line-height:1.55;
  border:1px solid rgba(0,0,0,.14);max-width:640px;overflow:auto}
.rg-sig-apercu-html a{color:#0a58ca}
.rg-sig-apercu-html img{max-width:220px;max-height:110px}
.rg-sig-apercu-html p{margin:0 0 6px}

/* L'avertissement de délivrabilité : informatif, pas alarmant — c'est un
   arbitrage assumé par Sylvain, pas une erreur à corriger. */
.rg-sig-avert{display:block;margin:2px 0 6px;max-width:78ch}

/* =========================================================================
   ONGLET « NOTIFICATIONS » (20/08/2026 — points 2, 4 et 7c de Sylvain)
   Réglages LOCAUX au navigateur : ce qui s'illumine à l'écran, ce qui entre
   dans le relevé, et la forme des compteurs. Aucun appel serveur ici.
   ========================================================================= */
.rg-notifs{display:flex;flex-direction:column;gap:16px}
.rg-notifs-intro{margin:0;max-width:78ch;font-size:13px;line-height:1.65}
.rg-notifs-local{margin:-8px 0 0;max-width:78ch;font-size:12px;line-height:1.6}

/* ---- Le catalogue, groupé par catégorie (= le code couleur) -------------- */
.rg-notif-groupe{display:flex;flex-direction:column;gap:5px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(11,14,22,.34)}
.rg-notif-groupe-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:4px}
.rg-notif-groupe-t{margin:0;font-size:13.5px;font-weight:740}
.rg-notif-groupe-sous{font-size:11.5px;line-height:1.5}
/* La pastille de catégorie est une `.nbadge` VIDE : même objet que les
   compteurs, donc elle suit le style choisi sans une règle en double. */
.rg-notif-pastille{width:var(--nb-h);padding:0;flex:none}

.rg-notif-l{display:grid;gap:6px 14px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto auto;
  padding:7px 0;border-top:1px solid
  color-mix(in srgb, var(--line) 55%, transparent)}
.rg-notif-groupe .rg-notif-l:first-of-type{border-top:0}
.rg-notif-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rg-notif-nom{font-size:12.5px;font-weight:680}
.rg-notif-ou{font-size:11px;line-height:1.45}
.rg-notif-choix{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:11.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.rg-notif-case{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

.rg-notifs-bar{display:flex;gap:9px;flex-wrap:wrap}

@media (max-width:720px){
  /* Sous 720 px les deux cases passent SOUS le libellé plutôt que de le
     comprimer : un intitulé de notification tronqué ne se règle pas. */
  .rg-notif-l{grid-template-columns:minmax(0,1fr);gap:4px}
  .rg-notif-choix{justify-content:flex-start}
}