/*  auron.css — LA BULLE AURON ET SON INFO-BULLE (26/09/2026)
 *  Le portrait est un petit disque à côté du nom d'un module ; l'explication
 *  s'affiche au survol, au focus clavier, ou d'un toucher sur téléphone.
 *  L'info-bulle est UN SEUL élément, fixé au document par auron-bulle.js :
 *  posée dans le menu latéral (qui défile et rogne), elle serait coupée. */
.auron-bulle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 7px; vertical-align: middle;
  border-radius: 50%; cursor: help; flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .12s ease;
}
/*  LE POINT D'INTERROGATION — 27/09/2026. À la place du portrait : un petit
 *  disque violet avec « ? », le signe universel de l'aide. Le portrait
 *  d'Auron reste dans l'info-bulle (voir .auron-tip-nom). */
.auron-bulle .auron-q, .auron-bulle img {
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.18); color: var(--accent-lisible); border: 1px solid rgba(var(--accent-rgb), 0.55); opacity: .85;
  font-size: 12px; font-weight: 800; line-height: 1; font-family: inherit; user-select: none;
}
.auron-bulle:hover, .auron-bulle:focus-visible, .auron-bulle.est-ouverte,
a:hover > .auron-bulle, a:focus-visible > .auron-bulle { transform: scale(1.12); }
.auron-bulle:hover .auron-q, .auron-bulle:focus-visible .auron-q, .auron-bulle.est-ouverte .auron-q,
a:hover > .auron-bulle .auron-q, a:focus-visible > .auron-bulle .auron-q,
.auron-bulle:hover img, .auron-bulle:focus-visible img, .auron-bulle.est-ouverte img,
a:hover > .auron-bulle img, a:focus-visible > .auron-bulle img { opacity: 1; background: rgba(var(--accent-rgb), 0.32); color: #fff; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28); }
.auron-bulle:focus-visible { outline: none; }
/* Dans le menu latéral : la bulle se colle à droite du nom. */
.sidebar-nav a { display: flex; align-items: center; }
.sidebar-nav a > .auron-bulle { margin-left: auto; }
/* Dans un titre de section (h2/h3 des pages de module) : à côté du texte. */
h2 > .auron-bulle-section, h3 > .auron-bulle-section { margin-left: 10px; vertical-align: -3px; }
h2 > .auron-bulle-section img, h3 > .auron-bulle-section img,
h2 > .auron-bulle-section .auron-q, h3 > .auron-bulle-section .auron-q { width: 20px; height: 20px; font-size: 13px; }
/* Sur une carte de module : en haut à droite, discrète. */
.module-card > .auron-bulle { position: absolute; top: 10px; right: 10px; margin: 0; }

.auron-tip {
  position: fixed; z-index: 2000; max-width: 280px; width: max-content;
  padding: 10px 12px 11px; border-radius: 12px;
  background: #171a26; color: #e6e8ef;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
  font-size: 0.82rem; line-height: 1.45; font-weight: 400; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  pointer-events: none;
}
.auron-tip.est-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.auron-tip-nom {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #b79cff;
}
/*  LE PORTRAIT SEUL — 12/10/2026. « Supprime le cercle et le fond noir » :
 *  plus de disque ni de liseré, le personnage (image transparente) avec une
 *  ombre qui suit ses contours. Même règle que la bulle d'assistance. */
.auron-tip-nom img { width: 18px; height: 18px; object-fit: contain; }
.auron-tip-txt { color: #e6e8ef; }
.auron-tip::before {
  content: ''; position: absolute; width: 10px; height: 10px;
  background: #171a26; border-left: 1px solid rgba(var(--accent-rgb), 0.5); border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
  transform: rotate(45deg);
}
.auron-tip.cote-droit::before { left: -6px; top: 16px; }
.auron-tip.cote-gauche::before { right: -6px; top: 16px; transform: rotate(225deg); }
.auron-tip.cote-bas::before { top: -6px; left: 16px; transform: rotate(135deg); }
.auron-tip.cote-haut::before { bottom: -6px; left: 16px; transform: rotate(-45deg); }

/* L'encart en tête d'une page de module : visible, pas seulement au survol —
   on est venu régler ce module, autant dire tout de suite à quoi il sert. */
.auron-encart {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(109, 61, 240, 0.05));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.auron-encart img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.auron-encart-txt { font-size: 0.9rem; line-height: 1.5; }
.auron-encart-txt strong { color: #b79cff; }
.auron-encart-txt small { display: block; color: var(--text-muted, #9aa3b8); font-size: 0.75rem; margin-top: 2px; }
/*  « Auron me montre » dans l'encart — 22/10/2026 : à droite, même violet que les
 *  boutons des cartes de /features ; passe sous le texte sur un écran étroit. */
.auron-encart { flex-wrap: wrap; }
.auron-encart-txt { flex: 1 1 240px; }
.auron-encart-btn {
  display: inline-flex; align-items: center; gap: 7px; align-self: center; margin-left: auto;
  padding: 7px 12px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  color: var(--accent-lisible); border: 1px solid rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.10);
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.auron-encart-btn:hover, .auron-encart-btn:focus-visible { background: rgba(var(--accent-rgb), 0.22); border-color: rgba(var(--accent-rgb), 0.8); color: #e9e2ff; }
.auron-encart-btn img { width: 18px; height: 18px; object-fit: contain; }
@media (max-width: 480px) { .auron-encart-btn { margin-left: 0; width: 100%; justify-content: center; } }
@media (max-width: 480px) { .auron-tip { max-width: calc(100vw - 24px); } }

/* ======================================================================
 *  DISCRÈTES : LES BULLES SE MONTRENT AU SURVOL — 27/09/2026
 * ======================================================================
 *  « Sincèrement, tu en penses quoi de tous ces points d'interrogation ? »
 *  Trente à l'écran, c'est du bruit. Dans le menu et sur les cartes, la bulle
 *  n'apparaît qu'au survol de SA ligne ou de SA carte (ou au focus clavier).
 *  Celles des titres de section restent visibles : là, l'aide vaut d'être vue.
 *  Sur écran tactile (pas de survol) : le bouton « ? Aide » du menu les
 *  affiche toutes (html.auron-aide-visible).
 */
.sidebar-nav a > .auron-bulle, .module-card > .auron-bulle { opacity: 0; transition: opacity .15s ease, transform .12s ease; }
.sidebar-nav a:hover > .auron-bulle, .sidebar-nav a:focus-visible > .auron-bulle, .sidebar-nav a:focus-within > .auron-bulle,
.module-card:hover > .auron-bulle, .module-card:focus-within > .auron-bulle,
.auron-bulle:focus-visible, .auron-bulle.est-ouverte,
html.auron-aide-visible .auron-bulle { opacity: 1; }
.auron-aide-bascule {
  display: none; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px;
  padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08); color: inherit; font: inherit; font-size: .88rem; cursor: pointer;
}
.auron-aide-bascule[aria-pressed="true"] { background: rgba(var(--accent-rgb), 0.22); }
@media (hover: none) {
  .auron-aide-bascule { display: flex; }
}

/*  MÊME RÈGLE DANS LES PAGES DE RÉGLAGE — 27/09/2026 : les « ? » des titres
 *  de section (« Ta formule », « Activation »…) n'apparaissent que quand la
 *  souris est sur le bloc qui les contient. Le bouton « ? Aide » (tactile)
 *  les montre tous. */
.auron-bulle-section { opacity: 0; transition: opacity .15s ease, transform .12s ease; }
:hover > h2 > .auron-bulle-section, :hover > h3 > .auron-bulle-section,
h2:hover > .auron-bulle-section, h3:hover > .auron-bulle-section,
:focus-within > h2 > .auron-bulle-section, :focus-within > h3 > .auron-bulle-section,
.auron-bulle-section:focus-visible, .auron-bulle-section.est-ouverte,
html.auron-aide-visible .auron-bulle-section { opacity: 1; }