/* =======================================================================
 *  LES RÉGLAGES
 * =======================================================================
 *
 *  Tout ce qui concerne le compte tenait dans un panneau latéral de quatre
 *  interrupteurs. Le reste — l'abonnement, les crédits, les factures, les
 *  moyens de paiement, l'équipe — vivait sur l'ancien tableau de bord, dans
 *  une autre direction artistique, avec une autre navigation. On passait donc
 *  d'un produit à un autre au milieu de son propre compte.
 *
 *  Un seul endroit, une colonne de rubriques à gauche, une page à droite.
 *  Même ciel, mêmes champs, mêmes boutons que le reste.
 * ======================================================================= */

body.reglages-corps { min-height: 100svh; }

.rg {
  position: relative; z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto; padding: 26px 0 70px;
}

/* ------------------------------- L'en-tête ------------------------------ */
.rg-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 22px;
}
.rg-retour {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.12));
  color: var(--ciel-texte, #eaf1f7); font-size: .86rem;
  transition: background .25s var(--elan), border-color .25s var(--elan);
}
.rg-retour:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.4));
}
.rg-tete h1 {
  font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; letter-spacing: -.035em;
  color: var(--ciel-texte, #eaf1f7);
}
.rg-qui {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--ciel-texte-doux, rgba(234,241,247,.7));
}
.rg-pastille {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .78rem;
  background: var(--ciel-accent, #6ee7ff); color: var(--ciel-encre, #05070c);
}

/* ------------------------------ La charpente ---------------------------- */
.rg-grille {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  align-items: start;
}

/*  LA COLONNE DES RUBRIQUES. Elle suit la lecture : sur une page de réglages,
 *  savoir où l'on est vaut autant que ce qu'on y lit. */
.rg-menu {
  position: sticky; top: 22px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; border-radius: var(--r-l, 22px);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.11));
  background: var(--ciel-verre, rgba(8,11,18,.62));
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
}
.rg-menu button {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px; border: 0; background: none;
  font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
  color: var(--ciel-texte-doux, rgba(234,241,247,.72));
  transition: background .22s var(--elan), color .22s var(--elan);
}
.rg-menu button svg { width: 16px; height: 16px; flex: none; }
.rg-menu button:hover { background: rgba(255,255,255,.06); color: var(--ciel-texte, #eaf1f7); }
.rg-menu button[aria-current="true"] {
  background: var(--ciel-accent-doux, rgba(110,231,255,.13));
  color: var(--ciel-accent, #6ee7ff); font-weight: 620;
}
.rg-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 8px 4px; }

/* -------------------------------- Les pages ----------------------------- */
.rg-page[hidden] { display: none; }
.rg-page > h2 {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 4px;
  color: var(--ciel-texte, #eaf1f7);
}
.rg-page > .rg-intro {
  font-size: .9rem; line-height: 1.55; margin-bottom: 20px;
  color: var(--ciel-texte-doux, rgba(234,241,247,.7));
}

.rg-carte {
  padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-l, 22px);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.11));
  background: var(--ciel-verre, rgba(8,11,18,.55));
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
}
.rg-carte + .rg-carte { margin-top: 16px; }
.rg-carte > h3 {
  font-size: .98rem; font-weight: 650; margin-bottom: 4px;
  color: var(--ciel-texte, #eaf1f7);
}
.rg-carte > p.aide {
  font-size: .85rem; line-height: 1.55; margin-bottom: 16px;
  color: var(--ciel-texte-doux, rgba(234,241,247,.66));
}
.rg-carte form { display: flex; flex-direction: column; gap: 14px; }
.rg-duo { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/*  LES CHIFFRES. Un solde, une consommation, un plafond : trois nombres qu'on
 *  vient chercher du regard, pas lire. */
.rg-chiffres {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.rg-chiffre {
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.1));
  background: rgba(255,255,255,.035);
}
.rg-chiffre .lgd {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ciel-texte-doux, rgba(234,241,247,.6));
}
.rg-chiffre .val {
  margin-top: 7px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ciel-texte, #eaf1f7);
}
.rg-chiffre .val.accent { color: var(--ciel-accent, #6ee7ff); }
.rg-chiffre .det { margin-top: 3px; font-size: .78rem; color: var(--ciel-texte-doux, rgba(234,241,247,.6)); }

.rg-jauge { margin-top: 12px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.rg-jauge i { display: block; height: 100%; border-radius: 99px; background: var(--ciel-accent, #6ee7ff); transition: width .6s var(--elan); }

/*  LES TABLEAUX. Un relevé de consommation se lit en colonnes ; sur un
 *  téléphone il défile seul, sans emporter la page. */
.rg-table { overflow-x: auto; margin-top: 4px; }
.rg-table table { width: 100%; border-collapse: collapse; min-width: 460px; }
.rg-table th, .rg-table td {
  text-align: left; padding: 10px 12px; font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--ciel-texte-doux, rgba(234,241,247,.74));
}
.rg-table th {
  font-weight: 620; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ciel-texte-doux, rgba(234,241,247,.58));
}
.rg-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.rg-table td b { color: var(--ciel-texte, #eaf1f7); font-weight: 620; }
.rg-vide { padding: 22px 4px; font-size: .87rem; color: var(--ciel-texte-doux, rgba(234,241,247,.6)); }

/*  LES LIGNES À INTERRUPTEUR, reprises de l'application. */
.rg-ligne {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rg-ligne:last-child { border-bottom: 0; }
.rg-ligne .txt { flex: 1; min-width: 0; }
.rg-ligne .txt b { display: block; font-size: .9rem; font-weight: 620; color: var(--ciel-texte, #eaf1f7); }
.rg-ligne .txt span { font-size: .82rem; line-height: 1.5; color: var(--ciel-texte-doux, rgba(234,241,247,.64)); }

/* ------------------------------- Les boutons ---------------------------- */
.rg-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 99px; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 620;
  background: var(--ciel-accent, #6ee7ff); color: var(--ciel-encre, #05070c);
  transition: transform .25s var(--elan), filter .25s var(--elan), opacity .2s;
}
.rg-b:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rg-b:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.rg-b.fantome {
  background: transparent; color: var(--ciel-texte, #eaf1f7);
  box-shadow: inset 0 0 0 1px var(--ciel-bord, rgba(255,255,255,.16));
}
.rg-b.fantome:hover { background: rgba(255,255,255,.07); }
.rg-b.danger { background: transparent; color: #ff9a9a; box-shadow: inset 0 0 0 1px rgba(255,122,122,.4); }
.rg-b.danger:hover { background: rgba(255,90,90,.12); }
.rg-b svg { width: 15px; height: 15px; }
.rg-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/*  Le compteur de caractères des consignes communes. `margin-right: auto` le
 *  pousse à gauche et laisse le bouton à droite, sans conteneur de plus. */
.rg-compteur {
  margin-right: auto; font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--ciel-texte-doux, rgba(234,241,247,.62));
}

/*  UNE ZONE DE TEXTE EST UN CHAMP COMME LES AUTRES.
 *
 *  `.champ-hote input` porte tout le cadre : le fond de verre, la bordure, le
 *  rayon, la lueur au focus. Un `<textarea>` placé dans le même habillage
 *  n'héritait de rien — ni du cadre, ni même de la police — et flottait nu
 *  sur la carte. On lui donne exactement le même traitement, plus ce qui lui
 *  est propre : une hauteur de départ et un redimensionnement vertical. */
.champ-hote textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--r-m, 16px);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.15));
  background: var(--ciel-verre, rgba(0,0,0,.24));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ciel-texte, #eef3f8);
  font: inherit; font-size: .95rem; line-height: 1.55;
  resize: vertical; min-height: 122px;
  transition: border-color .2s var(--elan), box-shadow .2s var(--elan);
}
.champ-hote textarea:focus {
  outline: 0;
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.55));
  box-shadow: 0 0 0 4px var(--ciel-accent-doux, rgba(110,231,255,.12));
}
.champ-hote textarea::placeholder { color: var(--ciel-texte-doux, rgba(238,243,248,.42)); }

/*  Dans une carte, le texte d'introduction doit respirer avant le champ :
 *  collés, l'intitulé du champ passait pour la fin du paragraphe. */
.rg-carte .rg-intro { margin-bottom: 16px; }

/* ======================================================================
 *  LA BARRE DE RECHARGEMENT
 * ======================================================================
 *
 *  Elle remplace un champ numérique où l'on pouvait taper 7, 3,50 ou
 *  99 999 — autant de montants que le serveur refusait APRÈS le clic. Une
 *  barre ne sort pas de ses bornes : ce qu'on peut demander est exactement
 *  ce qui sera accepté.
 * ====================================================================== */
.rg-curseur { display: flex; flex-direction: column; gap: 10px; }

.rg-montant {
  font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 680;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--ciel-accent, #6ee7ff); line-height: 1.05;
}

.rg-bornes {
  display: flex; justify-content: space-between;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--ciel-texte-doux, rgba(234,241,247,.5));
}

/* ----------------------------- Le rail --------------------------------- */
/*  `input[type=range]` ne colore pas sa partie gauche tout seul : le
 *  remplissage vient d'un dégradé qui s'arrête à `--part`, que le script met
 *  à jour à chaque mouvement. Une seule variable, pas de second élément à
 *  garder synchronisé. */
.rg-barre {
  --part: 0%;
  width: 100%; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer;
}
.rg-barre:focus { outline: none; }

.rg-barre::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(to right,
    var(--ciel-accent, #6ee7ff) 0 var(--part),
    rgba(255,255,255,.13) var(--part) 100%);
}
.rg-barre::-moz-range-track {
  height: 6px; border-radius: 99px; background: rgba(255,255,255,.13);
}
.rg-barre::-moz-range-progress {
  height: 6px; border-radius: 99px; background: var(--ciel-accent, #6ee7ff);
}

/* ---------------------------- La poignée -------------------------------- */
.rg-barre::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 99px; border: 0;
  background: var(--ciel-accent, #6ee7ff);
  box-shadow: 0 0 0 4px rgba(110,231,255,.16), 0 4px 12px -4px rgba(0,0,0,.8);
  transition: box-shadow .2s var(--elan), transform .12s var(--elan);
}
.rg-barre::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 99px; border: 0;
  background: var(--ciel-accent, #6ee7ff);
  box-shadow: 0 0 0 4px rgba(110,231,255,.16), 0 4px 12px -4px rgba(0,0,0,.8);
}
.rg-barre:hover::-webkit-slider-thumb,
.rg-barre:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(110,231,255,.22), 0 4px 12px -4px rgba(0,0,0,.8);
}
.rg-barre:active::-webkit-slider-thumb { transform: scale(.94); }

/* --------------------------- Les paliers -------------------------------- */
/*  La barre sert à explorer, ces boutons à décider vite : personne ne veut
 *  viser 250 € au pixel près. */
.rg-paliers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rg-paliers button {
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.13));
  background: none; color: var(--ciel-texte-doux, rgba(234,241,247,.72));
  font: inherit; font-size: .82rem; font-variant-numeric: tabular-nums;
  transition: background .2s var(--elan), color .2s var(--elan),
              border-color .2s var(--elan);
}
.rg-paliers button:hover {
  color: var(--ciel-texte, #eaf1f7);
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.35));
}
.rg-paliers button.actif {
  background: var(--ciel-accent-doux, rgba(110,231,255,.14));
  color: var(--ciel-accent, #6ee7ff);
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.42));
}

/*  Le total reste à gauche, le bouton à droite : on lit ce qu'on va payer
 *  avant d'arriver sur ce qui déclenche le paiement. */
.rg-apayer {
  margin-right: auto; font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--ciel-texte-doux, rgba(234,241,247,.74));
}

/* ------------------------- Le choix d'un forfait ------------------------ */
.rg-plans { display: flex; flex-direction: column; gap: 10px; }

.rg-plan {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--r-m, 16px);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.11));
  background: rgba(255,255,255,.035);
}
.rg-plan .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 190px; }
.rg-plan .txt b { font-size: .95rem; letter-spacing: .01em; color: var(--ciel-texte, #eaf1f7); }
.rg-plan .txt span { font-size: .82rem; color: var(--ciel-texte-doux, rgba(234,241,247,.62)); }
.rg-plan .prix {
  font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ciel-texte, #eaf1f7); white-space: nowrap;
}

/*  Le forfait en cours se signale par l'accent, pas par une couleur à part :
 *  la charte n'en a qu'un, et en introduire un second pour un état ferait
 *  croire à une autre catégorie d'offre. */
.rg-plan.actuel {
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.38));
  background: var(--ciel-accent-doux, rgba(110,231,255,.09));
}
.rg-plan.actuel .prix { color: var(--ciel-accent, #6ee7ff); }

/* ------------------------------ Les messages ---------------------------- */
.rg-msg {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--r-m, 16px);
  font-size: .86rem; line-height: 1.5;
}
.rg-msg[hidden] { display: none; }
.rg-msg.ok {
  border: 1px solid var(--ciel-accent-trait, rgba(110,231,255,.34));
  background: var(--ciel-accent-doux, rgba(110,231,255,.1));
  color: var(--ciel-texte, #eaf1f7);
}
.rg-msg.ko {
  border: 1px solid rgba(255,122,122,.38); background: rgba(255,90,90,.1); color: #ffc0c0;
}

/*  LA ZONE DANGEREUSE. Elle est séparée, et elle le dit : on ne supprime pas
 *  son compte par inadvertance en cherchant un interrupteur voisin. */
.rg-danger { border-color: rgba(255,122,122,.28); }
.rg-danger > h3 { color: #ffb0b0; }

.rg-etiq {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 99px; font-size: .74rem; font-weight: 620;
  background: var(--ciel-accent-doux, rgba(110,231,255,.13));
  color: var(--ciel-accent, #6ee7ff);
}
.rg-etiq.calme { background: rgba(255,255,255,.07); color: var(--ciel-texte-doux, rgba(234,241,247,.72)); }

@media (max-width: 840px) {
  .rg-grille { grid-template-columns: 1fr; }
  /*  Une colonne de rubriques collée en haut d'un petit écran mange la moitié
   *  de la hauteur utile : elle redevient une barre qui défile. */
  .rg-menu {
    position: static; flex-direction: row; overflow-x: auto; gap: 6px;
    scrollbar-width: none;
  }
  .rg-menu::-webkit-scrollbar { display: none; }
  /*  La barre défile : son bord droit s'estompe pour le DIRE. Coupée net,
   *  la dernière rubrique ressemblait à un bouton cassé, pas à une suite. */
  .rg-menu {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    padding-right: 28px;
  }
  .rg-menu button { white-space: nowrap; }
  .rg-menu button span { display: none; }
  .rg-menu button svg { width: 15px; height: 15px; }
  .rg-menu button::after { content: attr(data-court); }
  .rg-menu hr { display: none; }
}

/*  LE MICROEURO EN GRAND, L'EURO EN PETIT.
 *
 *  Un relevé de requêtes affiche des montants de quelques centaines de
 *  microeuros. En euros à deux décimales, la colonne entière vaut « 0,00 € » —
 *  on ne distingue plus une requête gratuite d'une requête facturée, ni un
 *  compteur juste d'un compteur cassé. Le microeuro porte donc le chiffre, et
 *  l'euro passe dessous pour garder l'ordre de grandeur sous les yeux. */
.rg-dim { color: var(--rg-dim, rgba(238, 243, 248, .5)); }
.rg-mini { font-size: .72rem; }
.rg-table td.num .rg-mini { display: inline-block; margin-top: 1px; }

/* =======================================================================
 *  L'EXPLORATEUR DE LA MÉMOIRE
 * =======================================================================
 *  L'arbre des dossiers à gauche, le dossier ouvert à droite. Sur un
 *  téléphone, une colonne : les sous-dossiers deviennent des tuiles et le
 *  fil d'Ariane ramène en arrière — l'arbre, lui, se replie.
 * ======================================================================= */
.rg-mem { padding: 0; overflow: hidden; }
.rg-mem-barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.rg-mem-barre .rg-actions { margin-left: auto; }
.rg-mem-barre .rg-b { padding: 9px 15px; font-size: .82rem; }
.rg-mem-cherche {
  flex: 1 1 240px; display: flex; align-items: center; gap: 9px;
  padding: 0 14px; height: 40px; border-radius: 99px;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.14));
  background: rgba(255,255,255,.045);
  transition: border-color .2s var(--elan), background .2s var(--elan);
}
.rg-mem-cherche:focus-within {
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.5));
  background: rgba(255,255,255,.07);
}
.rg-mem-cherche svg { width: 16px; height: 16px; flex: none; color: var(--ciel-texte-doux, rgba(234,241,247,.6)); }
.rg-mem-cherche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: .9rem; color: var(--ciel-texte, #eaf1f7);
}
.rg-mem-cherche input::placeholder { color: var(--ciel-texte-doux, rgba(234,241,247,.45)); }

.rg-mem-corps { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); min-height: 420px; }

/* --- l'arbre --- */
.rg-mem-arbre {
  padding: 12px 8px 16px; border-right: 1px solid rgba(255,255,255,.08);
  overflow-y: auto; max-height: 70vh;
}
.rg-mem-rang {
  display: flex; align-items: center;
  padding-left: calc(var(--niveau, 0) * 14px);
}
.rg-mem-plier {
  flex: none; width: 22px; height: 26px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--ciel-texte-doux, rgba(234,241,247,.5));
}
.rg-mem-plier.vide { cursor: default; }
.rg-mem-plier svg { width: 13px; height: 13px; transition: transform .2s var(--elan); }
.rg-mem-plier[aria-expanded="true"] svg { transform: rotate(90deg); }
.rg-mem-plier:hover:not(.vide) { background: rgba(255,255,255,.07); color: var(--ciel-texte, #eaf1f7); }
.rg-mem-noeud {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; text-align: left;
  color: var(--ciel-texte-doux, rgba(234,241,247,.8));
  transition: background .18s var(--elan), color .18s var(--elan);
}
.rg-mem-noeud svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.rg-mem-noeud .nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-mem-noeud .nb {
  flex: none; font-size: .72rem; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.07);
  color: var(--ciel-texte-doux, rgba(234,241,247,.6));
}
.rg-mem-noeud:hover { background: rgba(255,255,255,.06); color: var(--ciel-texte, #eaf1f7); }
.rg-mem-noeud.actif {
  background: var(--ciel-accent-doux, rgba(110,231,255,.14));
  color: var(--ciel-accent, #6ee7ff); font-weight: 620;
}
.rg-mem-noeud.actif .nb { background: rgba(255,255,255,.1); color: inherit; }
.rg-mem-noeud.racine { margin: 0 0 6px 22px; width: calc(100% - 22px); font-weight: 620; }
.rg-mem-aide { padding: 10px 12px; font-size: .8rem; line-height: 1.5; color: var(--ciel-texte-doux, rgba(234,241,247,.55)); }

/* --- le dossier ouvert --- */
.rg-mem-vue { padding: 16px 20px 22px; min-width: 0; }
.rg-mem-ariane {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  font-size: .8rem; margin-bottom: 12px; color: var(--ciel-texte-doux, rgba(234,241,247,.6));
}
.rg-mem-ariane button {
  border: 0; background: none; padding: 3px 6px; border-radius: 7px; cursor: pointer;
  font: inherit; color: var(--ciel-accent, #6ee7ff);
}
.rg-mem-ariane button:hover { background: rgba(255,255,255,.07); }
.rg-mem-ariane i { font-style: normal; opacity: .5; }
.rg-mem-ariane span[aria-current] { color: var(--ciel-texte, #eaf1f7); font-weight: 600; padding: 3px 2px; }

.rg-mem-tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.rg-mem-tete h3 {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 680; letter-spacing: -.02em; color: var(--ciel-texte, #eaf1f7);
}
.rg-mem-tete h3 svg { width: 20px; height: 20px; flex: none; color: var(--ciel-accent, #6ee7ff); }
.rg-mem-gestes { display: flex; gap: 4px; flex-wrap: wrap; }
.rg-mem-geste {
  border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: 9px;
  font: inherit; font-size: .78rem; font-weight: 560; color: var(--ciel-texte-doux, rgba(234,241,247,.72));
  transition: background .18s var(--elan), color .18s var(--elan);
}
.rg-mem-geste:hover { background: rgba(255,255,255,.07); color: var(--ciel-texte, #eaf1f7); }
.rg-mem-geste.danger:hover { background: rgba(255,90,90,.12); color: #ffb0b0; }

.rg-mem-tuiles {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.rg-mem-tuile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 13px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.1));
  background: rgba(255,255,255,.04); font: inherit;
  transition: background .2s var(--elan), border-color .2s var(--elan), transform .2s var(--elan);
}
.rg-mem-tuile svg { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--ciel-accent, #6ee7ff); }
.rg-mem-tuile .nom {
  font-size: .88rem; font-weight: 620; color: var(--ciel-texte, #eaf1f7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-mem-tuile .nb { font-size: .74rem; color: var(--ciel-texte-doux, rgba(234,241,247,.55)); }
.rg-mem-tuile:hover {
  background: rgba(255,255,255,.07); transform: translateY(-1px);
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.35));
}

.rg-mem-souvenirs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rg-mem-souvenir {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 13px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.028);
  transition: border-color .2s var(--elan), background .2s var(--elan);
}
.rg-mem-souvenir:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
.rg-mem-souvenir .txt { flex: 1 1 260px; min-width: 0; }
.rg-mem-souvenir .txt b { display: block; font-size: .9rem; font-weight: 640; color: var(--ciel-texte, #eaf1f7); }
.rg-mem-souvenir .txt > span {
  display: block; margin-top: 3px; font-size: .85rem; line-height: 1.55;
  color: var(--ciel-texte-doux, rgba(234,241,247,.72)); overflow-wrap: anywhere;
}
.rg-mem-lieu {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px;
  border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-size: .74rem;
  background: rgba(255,255,255,.06); color: var(--ciel-texte-doux, rgba(234,241,247,.7));
}
.rg-mem-lieu svg { width: 12px; height: 12px; }
.rg-mem-lieu:hover { color: var(--ciel-accent, #6ee7ff); background: rgba(255,255,255,.09); }
.rg-mem-souvenir .rg-mem-gestes { opacity: .55; transition: opacity .2s var(--elan); }
.rg-mem-souvenir:hover .rg-mem-gestes, .rg-mem-souvenir:focus-within .rg-mem-gestes { opacity: 1; }
@media (hover: none) { .rg-mem-souvenir .rg-mem-gestes { opacity: 1; } }
.rg-mem .rg-msg { margin: 0 18px 16px; }

@media (max-width: 840px) {
  .rg-mem-corps { grid-template-columns: 1fr; min-height: 0; }
  /*  Sur téléphone, l'arbre se replie : les tuiles et le fil d'Ariane
   *  suffisent à naviguer, et l'écran reste à ce qu'on lit. */
  .rg-mem-arbre { display: none; }
  .rg-mem-vue { padding: 14px 14px 18px; }
  .rg-mem-barre { padding: 14px; }
  .rg-mem-barre .rg-actions { margin-left: 0; width: 100%; }
  .rg-mem-barre .rg-b { flex: 1; }
  .rg-mem-tuiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* --- la couleur d'une famille de dossiers (voir teinteDe) --- */
.rg-mem-noeud[style*="--teinte"] svg { color: hsl(var(--teinte) 78% 68%); opacity: .95; }
.rg-mem-noeud.actif[style*="--teinte"] {
  background: hsl(var(--teinte) 70% 60% / .14);
  color: hsl(var(--teinte) 85% 76%);
}
.rg-mem-tete h3[style*="--teinte"] svg { color: hsl(var(--teinte) 78% 68%); }
.rg-mem-tuile[style*="--teinte"] {
  background: linear-gradient(145deg, hsl(var(--teinte) 70% 60% / .12), rgba(255,255,255,.03) 70%);
  border-color: hsl(var(--teinte) 70% 65% / .22);
}
.rg-mem-tuile[style*="--teinte"] svg { color: hsl(var(--teinte) 80% 70%); }
.rg-mem-tuile[style*="--teinte"]:hover { border-color: hsl(var(--teinte) 75% 70% / .5); }
.rg-mem-lieu[style*="--teinte"] { background: hsl(var(--teinte) 70% 60% / .12); color: hsl(var(--teinte) 60% 82%); }
.rg-mem-lieu[style*="--teinte"] svg { color: hsl(var(--teinte) 80% 70%); }

.rg-mem-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rg-mem-pied .rg-mem-lieu { margin-top: 0; }
.rg-mem-quand { font-size: .72rem; color: var(--ciel-texte-doux, rgba(234,241,247,.45)); }
.rg-mem-pied:empty { display: none; }

/* --- la mémoire vide montre à quoi elle ressemblera --- */
.rg-mem-vide { display: grid; gap: 16px; max-width: 560px; margin: 6px 0 4px; }
.rg-mem-exemple {
  display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.025);
}
.rg-mem-exemple span {
  display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600;
  color: var(--ciel-texte, #eaf1f7); opacity: .82;
}
.rg-mem-exemple span.sous { margin-left: 26px; font-weight: 500; opacity: .7; }
.rg-mem-exemple svg { width: 16px; height: 16px; color: hsl(var(--teinte) 78% 68%); }
.rg-mem-vide p { font-size: .86rem; line-height: 1.6; color: var(--ciel-texte-doux, rgba(234,241,247,.7)); }
/*  Le compte des souvenirs : une étiquette de section, pas une phrase. */
.rg-mem-vue .rg-compte {
  margin: 4px 0 10px; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ciel-texte-doux, rgba(234,241,247,.55));
}