/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — palette "ThibIS" nuit / glow
   Refonte 2026-09-06 : extension du thème nuit étoilée/glow (jusque-là
   réservé au hero de la page d'accueil) à l'ensemble du site, à la
   demande explicite de Pascal Thibodeau ("chaque page comme la page
   d'accueil"). Les codes visuels de rigueur (FAIT/HYPOTHÈSE, historique
   de révision, alertes de données non sourcées) restent inchangés dans
   leur fonction — seules leurs couleurs sont adaptées pour un contraste
   correct sur fond sombre (families rouge/ambre éclaircies, jamais de
   texte foncé sur fond foncé).
═══════════════════════════════════════════════════════════════ */
:root {
  --bg:       #0B0F2E;
  --bg2:      #10143A;
  --bg3:      #171B45;
  --navy:     #0F1E3D;
  --border:   rgba(255,255,255,.12);
  --border2:  rgba(255,255,255,.20);
  --chalk:    #F1F5F9;
  --chalk2:   #CBD5E1;
  --muted:    #94A3B8;

  /* Surface "carte" — overlay translucide, reste cohérent quelle que
     soit la section (bg/bg2/bg3) derrière elle. Remplace les fonds
     blancs francs de l'ancienne version claire. */
  --panel:    rgba(255,255,255,.045);

  /* Accent principal — cyan du bandeau nuit étoilé, calibré pour un bon
     contraste sur fond sombre (remplace le bleu institutionnel utilisé
     sur fond clair) */
  --acc:      #38BDF8;
  --acc2:     #7DD3FC;
  --acc3:     #93C5FD;
  --acc-rgb:  56,189,248;

  /* Ardoise / gris-bleu clairs — lisibles sur fond sombre */
  --chrome:   #94A3B8;
  --chrome2:  #CBD5E1;

  --green:    #4ADE80;
  --red:      #F87171;

  --ff-serif: 'Crimson Pro', Georgia, serif;
  --ff-sans:  'Inter', system-ui, sans-serif;
  --ff-mono:  'JetBrains Mono', 'Courier New', monospace;

  --max: 1140px;
  --r:   12px;
  --r2:  20px;

  /* hauteurs mesurées en JS pour un sticky robuste (fallback statique) */
  --topbar-h: 41px;
  --nav-h: 60px;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--chalk2);
  line-height: 1.7;
  overflow-x: hidden;
  /* Texture de fond globale : glow ambient + fine poussière d'étoiles,
     cohérente sur toutes les pages (pas seulement le hero). Les anneaux
     magnétiques et le logo-watermark restent une signature exclusive
     du hero (voir plus bas) pour ne pas surcharger les pages denses en
     données (tableaux, grilles de fiches). */
  background-image:
    radial-gradient(ellipse 1200px 800px at 15% -10%, rgba(var(--acc-rgb),.10) 0%, transparent 55%),
    radial-gradient(ellipse 900px 700px at 100% 10%, rgba(139,92,246,.08) 0%, transparent 50%),
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 92% 90%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 5% 85%, rgba(255,255,255,.4), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc2); text-decoration: underline; }

/* Accessibilité clavier : focus visible cohérent sur tout élément interactif */
a:focus-visible,
button:focus-visible,
.topbar-btn:focus-visible,
.nav-links a:focus-visible,
.hamburger:focus-visible,
.doi-row:focus-visible,
.back-top:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement (skip to content) — visible seulement au clavier */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--acc); color: #0B0F2E;
  padding: 10px 18px; border-radius: 0 0 var(--r) 0;
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 600;
  z-index: 999;
}
.skip-link:focus {
  left: 0; top: 0;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — bandeau institutionnel navy, déjà sombre avant la
   refonte ; conservé strictement inchangé, se fond désormais
   naturellement avec le reste du site
═══════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 9px 24px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 200;
}
.topbar-pill {
  background: var(--acc2);
  color: #0B0F2E; font-family: var(--ff-mono);
  font-size: .7rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.topbar-text { font-size: .82rem; color: #B9C6DC; }
.topbar-text strong { color: #fff; }
.topbar-btn {
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  padding: 4px 14px; border-radius: 20px; font-size: .78rem;
  transition: all .2s; white-space: nowrap;
}
.topbar-btn:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   NAV — verre sombre, cohérent avec le topbar navy juste au-dessus
═══════════════════════════════════════════════════════════════ */
.nav {
  background: rgba(11,15,46,.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: var(--topbar-h); z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.nav-brand {
  font-family: var(--ff-serif);
  font-size: 1.4rem; font-weight: 700;
  color: var(--chalk); letter-spacing: .2px;
  padding: 14px 0; display: flex; align-items: center; gap: 12px;
}
.nav-logo {
  width: 40px; height: 40px; border-radius: 50%;
  display: block; object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 0 1px var(--border2), 0 2px 10px rgba(0,0,0,.4);
  transition: box-shadow .25s, transform .25s;
}
.nav-brand:hover .nav-logo {
  box-shadow: 0 0 0 1px var(--acc2), 0 2px 14px rgba(var(--acc-rgb),.4);
  transform: rotate(8deg);
}
.nav-links { display:flex; gap:2px; }
.nav-links a {
  color: var(--muted); font-size: .87rem; font-weight: 600;
  padding: 18px 16px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.nav-links a:hover { color: var(--chalk); border-bottom-color: var(--acc3); text-decoration: none; }
.nav-links a[aria-current="true"] {
  color: var(--acc); border-bottom-color: var(--acc);
}
.nav-orcid {
  font-family: var(--ff-mono); font-size: .68rem; color: var(--muted);
  padding: 14px 0 14px 14px; border-left: 1px solid var(--border);
  flex-shrink: 0; white-space: nowrap;
}
.nav-orcid a { font-size: .68rem; }

/* Lien "Compte" — ajouté le 6 sept. 2026. Distinct visuellement des
   liens nav-links standards (pilule pleine plutôt que soulignement)
   pour signaler qu'il s'agit d'une action de compte, pas d'une page
   de contenu comme les autres. */
.nav-account { flex-shrink: 0; padding-left: 14px; }
.nav-account-link {
  display: inline-block; font-size: .8rem; font-weight: 700;
  color: var(--chalk); background: rgba(255,255,255,.06);
  border: 1px solid var(--border2); border-radius: 20px;
  padding: 7px 16px; transition: all .2s; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-account-link:hover {
  background: rgba(var(--acc-rgb),.16); border-color: var(--acc);
  color: var(--acc2); text-decoration: none;
}
.nav-account-link[aria-current="true"] {
  background: var(--acc); border-color: var(--acc); color: #0B0F2E;
}

/* Bouton hamburger (masqué en desktop) */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: transparent; border: none;
  cursor: pointer; padding: 8px;
}
.hamburger span {
  display: block; width: 100%; height: 2px; background: var(--chalk2);
  transition: transform .25s, opacity .25s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   HERO — vitrine du thème nuit étoilée/glow, désormais partagé par
   tout le site. Les anneaux magnétiques, le logo-watermark et les
   étoiles plus denses restent une signature visuelle propre à cette
   page (pas dupliqués ailleurs pour ne pas nuire à la lisibilité des
   tableaux/grilles de données sur les autres pages).
═══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 92vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(56,189,248,.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 20% 75%, rgba(139,92,246,.14) 0%, transparent 60%),
    linear-gradient(160deg, #0B0F2E 0%, #171235 45%, #1C0F33 100%);
}

.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
/* Étoiles statiques (pas d'animation en boucle — cohérent avec
   prefers-reduced-motion et avec le reste du site) */
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 42% 32%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 58% 78%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 68% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 55%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 8% 85%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 88% 88%, rgba(255,255,255,.35), transparent);
  background-repeat: no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 560px; height: 560px; border-radius: 50%;
  background-image: url('/static/logo-coin-256.png');
  background-size: contain; background-repeat: no-repeat;
  opacity: .16;
  filter: drop-shadow(0 0 60px rgba(56,189,248,.45));
}
/* Anneaux "magnétiques" à glow, statiques (sans animation infinie) —
   remplacent visuellement les arcs de l'image de référence, en CSS/SVG
   pur donc accessibles et redimensionnables (pas de texte cuit dans une image). */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: 0 0 24px rgba(56,189,248,.18), inset 0 0 24px rgba(56,189,248,.10);
  right: 4%; top: 50%; transform: translateY(-50%);
}
.ring:nth-child(1) { width:260px; height:260px; border-color: rgba(56,189,248,.55); box-shadow: 0 0 30px rgba(56,189,248,.3), inset 0 0 20px rgba(56,189,248,.15); }
.ring:nth-child(2) { width:420px; height:420px; }
.ring:nth-child(3) { width:600px; height:600px; }
.ring:nth-child(4) { width:760px; height:760px; border-color: rgba(139,92,246,.22); box-shadow: 0 0 30px rgba(139,92,246,.12); display: block; }
.ring:nth-child(5) { display: none; }

.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: center;
}
.hero-tag {
  font-family: var(--ff-mono); font-size: .72rem; color: #7DD3FC;
  letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.hero-tag::before {
  content: ''; display: block; width: 28px; height: 1px; background: #7DD3FC;
}
.hero-h1 {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 500; line-height: 1.12;
  color: #F1F5F9; margin-bottom: 24px;
  letter-spacing: -.3px;
  text-shadow: 0 0 40px rgba(56,189,248,.25);
}
.hero-h1 em {
  font-style: normal; font-weight: 700;
  color: #7DD3FC;
}
.hero-p {
  font-size: 1.05rem; color: #CBD5E1; line-height: 1.8;
  max-width: 520px; margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-gold {
  background: #38BDF8;
  color: #0B0F2E; font-weight: 700; font-size: .92rem;
  padding: 14px 28px; border-radius: var(--r);
  transition: background .2s, transform .2s, box-shadow .2s; border: none; cursor: pointer;
  display: inline-block;
  box-shadow: 0 6px 24px rgba(56,189,248,.4);
}
.btn-gold:hover { background: #7DD3FC; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(56,189,248,.5); text-decoration: none; }
.btn-gold:disabled {
  background: var(--bg3); color: var(--muted); box-shadow: none;
  cursor: not-allowed; opacity: .6;
}
.btn-gold:disabled:hover { background: var(--bg3); transform: none; box-shadow: none; }
.btn-ghost {
  border: 1.5px solid rgba(203,213,225,.35); color: #F1F5F9;
  font-size: .92rem; padding: 13px 27px; border-radius: var(--r);
  transition: all .2s; display: inline-block;
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover { border-color: #7DD3FC; color: #7DD3FC; background: rgba(56,189,248,.08); transform: translateY(-2px); text-decoration: none; }

/* Stats card — carte "verre" sombre cohérente avec le hero nuit étoilé */
.stats-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r2);
  padding: 36px; position: relative; overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08) inset;
}
.stats-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #38BDF8, #8B5CF6);
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; position: relative; z-index: 1; }
.stat-num {
  font-family: var(--ff-mono); font-size: 2.1rem; font-weight: 700;
  color: #7DD3FC; display: block;
  counter-reset: n;
}
.stat-lbl { font-size: .78rem; color: #94A3B8; text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
.stat-divider { grid-column: 1/-1; height: 1px; background: rgba(255,255,255,.12); }
.stat-wide .stat-num { font-size: 1.5rem; }
.stat-wide .stat-lbl { font-size: .75rem; color: #94A3B8; }

/* ═══════════════════════════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════════════════════════ */
.sec { padding: 96px 40px; position: relative; }
.sec-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.sec-tag {
  font-family: var(--ff-mono); font-size: .72rem; color: var(--acc);
  letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.sec-tag::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--acc);
}
.sec-h2 {
  font-family: var(--ff-serif);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600; color: var(--chalk); line-height: 1.2; margin-bottom: 16px;
}
.sec-p { color: var(--chalk2); font-size: 1rem; line-height: 1.8; max-width: 620px; }
.rule { height: 1px; background: var(--border); max-width: var(--max); margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   MÉTHODE
═══════════════════════════════════════════════════════════════ */
.sec-methode { background: var(--bg2); }

.formula-block {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-left: 4px solid var(--acc);
  border-radius: var(--r); padding: 28px 32px; margin: 36px 0;
  font-family: var(--ff-mono); font-size: 1.05rem; color: var(--chalk);
  position: relative;
  overflow-x: auto;
}
.formula-block::after {
  content: 'v6.1';
  position: absolute; top: 12px; right: 16px;
  font-size: .68rem; color: var(--muted); letter-spacing: 1px;
}
.formula-block .w { color: var(--acc); font-weight: 700; }
.formula-block .d { color: #7DD3FC; font-weight: 600; }

.dims { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px; }
.dim {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: var(--r); padding: 22px 18px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.dim:hover {
  border-color: var(--acc3);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -16px rgba(var(--acc-rgb),.25);
}
.dim-l {
  font-family: var(--ff-mono); font-size: 2.3rem; font-weight: 700;
  color: var(--acc); margin-bottom: 10px; line-height: 1;
}
.dim-n { font-weight: 700; color: var(--chalk); font-size: .9rem; margin-bottom: 8px; }
.dim-items { font-size: .8rem; color: var(--muted); line-height: 1.8; }
.dim-w {
  display: inline-block; margin-top: 14px;
  font-family: var(--ff-mono); font-size: .72rem;
  background: rgba(var(--acc-rgb),.12); color: var(--acc);
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(var(--acc-rgb),.3);
}

/* Seuils */
.seuils-wrap { margin-top: 48px; }
.seuil-bar { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.seuil-bar:last-child { border-bottom: none; }
.seuil-class { font-family: var(--ff-mono); font-size: .8rem; font-weight: 700; width: 90px; flex-shrink: 0; }
.seuil-track { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.seuil-fill { height: 100%; border-radius: 4px; transition: width .8s ease; }
.seuil-score { font-family: var(--ff-mono); font-size: .8rem; color: var(--muted); width: 100px; flex-shrink: 0; }
.seuil-mult { font-size: .8rem; color: var(--muted); width: 50px; flex-shrink: 0; text-align: right; }

/* ─────────────────────────────────────────────────────────
   SIMULATEUR THIBSCORE — calcul en direct de la formule v6.1,
   exécuté côté client (voir app.js). Ajouté 2026-09-05.
───────────────────────────────────────────────────────── */
.simulateur {
  background: var(--panel); border: 1px solid var(--border2); border-radius: var(--r2);
  padding: 32px; box-shadow: 0 14px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.sim-dim { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.sim-dim-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sim-dim-h > span:nth-child(2) { font-weight: 700; color: var(--chalk); font-size: .92rem; }
.sim-dim-l { font-size: 1.5rem; margin-bottom: 0; }
.sim-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; margin-bottom: 4px; }
.sim-row label { font-size: .8rem; color: var(--chalk2); }
.sim-row output { font-family: var(--ff-mono); font-weight: 700; color: var(--acc); font-size: .85rem; min-width: 40px; text-align: right; }
.sim-slider {
  width: 100%; height: 6px; border-radius: 3px; background: var(--border2);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--acc); border: 2px solid #0B0F2E; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer;
}
.sim-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--acc); border: 2px solid #0B0F2E; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer;
}
.sim-slider:disabled { opacity: .4; cursor: not-allowed; }
.sim-slider:disabled::-webkit-slider-thumb { background: var(--muted); cursor: not-allowed; }
.sim-lock-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border2); }
.sim-lock-row:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.sim-lock-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--acc); width: 16px; height: 16px; }
.sim-lock-row label { font-size: .76rem; color: var(--chalk2); line-height: 1.5; }

.sim-result {
  margin-top: 32px; background: var(--navy); border-radius: var(--r2);
  padding: 28px; text-align: center; color: #fff;
}
.sim-result-num { font-family: var(--ff-mono); font-size: 3rem; font-weight: 700; color: #fff; }
.sim-result-den { font-size: 1.3rem; color: #8FA5C7; margin-left: 4px; }
.sim-result-cls { font-family: var(--ff-mono); font-size: .95rem; font-weight: 700; letter-spacing: 1.5px; margin-top: 6px; }
.sim-result-detail { font-family: var(--ff-mono); font-size: .78rem; color: #8FA5C7; margin-top: 10px; }
.sim-result-warn { font-size: .78rem; color: #FCA5A5; margin-top: 12px; font-weight: 600; min-height: 1em; }

/* Métadonnées du cas évalué (nom / date) */
.sim-case { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 4px; }
.sim-case-row { display: flex; flex-direction: column; gap: 6px; }
.sim-case-row label { font-size: .8rem; font-weight: 700; color: var(--chalk); }

/* Champs texte : nom de cas, date, et justification de source par indicateur */
.sim-text, .sim-src {
  width: 100%; font-family: var(--ff-sans); font-size: .82rem; color: var(--chalk);
  background: rgba(255,255,255,.06); border: 1px solid var(--border2); border-radius: 8px;
  padding: 9px 12px; margin-top: 6px; box-sizing: border-box;
}
.sim-text:focus, .sim-src:focus { outline: 2px solid var(--acc3); outline-offset: 1px; border-color: var(--acc); }
.sim-src { margin-bottom: 2px; font-family: var(--ff-mono); font-size: .74rem; }
.sim-src::placeholder { color: var(--muted); }
.sim-src:disabled { background: var(--bg3); color: var(--muted); cursor: not-allowed; }
/* Source manquante alors que le curseur a été déplacé (>0) : signalé visuellement, pas seulement en JS */
.sim-src.sim-src-missing { border-color: #F87171; background: rgba(220,38,38,.10); }

/* Export de la fiche */
.sim-export-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.sim-export-btn {
  font-family: var(--ff-sans); font-size: .82rem; font-weight: 700; color: #0B0F2E;
  background: var(--acc); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
.sim-export-btn:hover { background: var(--acc2); }
.sim-export-status { font-size: .78rem; color: var(--muted); font-family: var(--ff-mono); }
.sim-export-status.is-error { color: #F87171; font-weight: 700; }
.sim-export-status.is-ok { color: #4ADE80; font-weight: 700; }

/* Bloc "pré-remplissage assisté par IA" — upload PDF, ajouté 2026-09-05.
   Visuellement distinct (teinte ambrée sombre) pour signaler qu'il
   s'agit d'une zone de PROPOSITIONS à vérifier, pas de données déjà
   validées. Recoloré 2026-09-06 pour le thème nuit (était un fond pâle
   pensé pour thème clair). */
.sim-ia-upload {
  background: rgba(217,119,6,.10); border: 1px solid rgba(251,191,36,.35); border-radius: var(--r);
  padding: 20px; margin-bottom: 24px;
}
.sim-submit-box {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px; margin-top: 24px; margin-bottom: 0;
}
.sim-ia-h { font-weight: 700; color: var(--chalk); font-size: .95rem; margin-bottom: 8px; }
.sim-ia-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim-ia-row input[type="file"] { font-size: .8rem; max-width: 260px; color: var(--chalk2); }
.sim-ia-status { font-size: .78rem; color: var(--muted); font-family: var(--ff-mono); }
.sim-ia-status.is-error { color: #FCA5A5; font-weight: 600; }
.sim-ia-status.is-busy { color: var(--acc); font-weight: 600; }
.sim-ia-status.is-ok { color: #86EFAC; font-weight: 600; }
.sim-ia-result { margin-top: 16px; }
.sim-ia-quotes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sim-ia-quote {
  background: rgba(255,255,255,.06); border: 1px solid var(--border2); border-radius: 8px;
  padding: 10px 14px; font-size: .78rem;
}
.sim-ia-quote-var { font-family: var(--ff-mono); font-weight: 700; color: var(--acc); margin-right: 6px; }
.sim-ia-quote-val { font-family: var(--ff-mono); font-weight: 700; color: var(--chalk); }
.sim-ia-quote-text { color: var(--chalk2); font-style: italic; margin-top: 4px; display: block; }
.sim-ia-quote-empty { color: var(--muted); font-style: italic; }
.sim-submit-box textarea.sim-text { resize: vertical; font-family: var(--ff-sans); }

@media (max-width: 700px) {
  .sim-grid { grid-template-columns: 1fr; }
  .sim-case { grid-template-columns: 1fr; }
  .sim-ia-row input[type="file"] { max-width: 100%; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   CORPUS
═══════════════════════════════════════════════════════════════ */
.sec-corpus { background: var(--bg); }

.score-chart { margin: 48px 0 56px; }
.score-row {
  display: grid; grid-template-columns: 200px 1fr 100px;
  gap: 16px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.score-row:last-child { border-bottom: none; }
.score-site { font-size: .87rem; color: var(--chalk); font-weight: 500; }
.score-site small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
.score-bar-wrap { background: var(--bg3); border-radius: 5px; height: 9px; overflow: hidden; }
.score-bar-fill {
  height: 100%; border-radius: 5px;
  animation: grow-bar 1.2s ease both;
}
@keyframes grow-bar { from { width: 0 !important; } }
.score-val { font-family: var(--ff-mono); font-size: .9rem; font-weight: 700; text-align: right; }
.cls-except  { color: #4ADE80; } .bar-except  { background: linear-gradient(90deg, #4ADE80, #16A34A); }
.cls-signif { color: #60A5FA; } .bar-signif { background: linear-gradient(90deg, #7DD3FC, #3B82F6); }
.cls-notable { color: var(--acc); } .bar-notable { background: linear-gradient(90deg, var(--acc3), var(--acc)); }
.cls-surveil  { color: #CBD5E1; } .bar-surveil  { background: linear-gradient(90deg, #E2E8F0, #94A3B8); }
.cls-prov { color: #FBBF24; } .bar-prov { background: linear-gradient(90deg, #FDE68A, #FBBF24); }

/* Site cards grid — cartes "verre" sombres, cohérentes avec le hero */
.sites-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 48px; }
.site-card {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: var(--r2); padding: 26px;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.site-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1);
}
.site-card.ref:hover  { border-color: #4ADE80; }
.site-card.surp:hover { border-color: #60A5FA; }
.site-card.ajus:hover { border-color: var(--acc); }
.site-card.std:hover  { border-color: #CBD5E1; }
.site-card.prov:hover { border-color: #FBBF24; }
.card-top { height: 4px; position: absolute; top: 0; left: 0; right: 0; }
.ref  .card-top { background: linear-gradient(90deg, #4ADE80, #16A34A); }
.surp .card-top { background: linear-gradient(90deg, #7DD3FC, #3B82F6); }
.ajus .card-top { background: linear-gradient(90deg, var(--acc3), var(--acc)); }
.std  .card-top { background: linear-gradient(90deg, #E2E8F0, #94A3B8); }
.prov .card-top { background: linear-gradient(90deg, #FDE68A, #FBBF24); }

.card-score { font-family: var(--ff-mono); font-size: 2.3rem; font-weight: 700; color: var(--chalk); margin-top: 4px; }
.ref  .card-score { color: #4ADE80; }
.surp .card-score { color: #60A5FA; }
.ajus .card-score { color: var(--acc); }
.card-name { font-weight: 700; font-size: .97rem; color: var(--chalk); margin: 8px 0 2px; }
.card-year { font-size: .76rem; color: var(--muted); margin-bottom: 12px; }
.card-source { font-size: .82rem; color: var(--chalk2); line-height: 1.6; }
.card-em {
  margin-top: 14px; font-family: var(--ff-mono); font-size: .7rem;
  background: rgba(var(--acc-rgb),.12); color: var(--acc);
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  border: 1px solid rgba(var(--acc-rgb),.3);
}

/* Badge "candidat" / "provisoire" — site non mesuré sur le terrain par ThibIS,
   distinct du statut de score (ref/surp/ajus/std). Voir README pour la
   distinction méthodologique candidat (aucune visite) vs provisoire (visité
   mais donnée manquante/incertaine). */
.site-card.candidat, .site-card.provisoire {
  border-style: dashed;
}
.candidat-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--ff-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .04em;
  background: rgba(var(--acc-rgb),.12); color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb),.35);
  padding: 3px 8px; border-radius: 20px;
  z-index: 2;
}
.candidat-badge.prov-badge {
  background: rgba(148,163,184,.14); color: #CBD5E1;
  border-color: rgba(148,163,184,.35);
}

/* ═══════════════════════════════════════════════════════════════
   TERRAIN
═══════════════════════════════════════════════════════════════ */
.sec-terrain { background: var(--bg2); }
.terrain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.session-card {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.session-head {
  background: var(--bg3); border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}
.session-date {
  font-family: var(--ff-mono); font-size: .72rem; color: var(--acc);
  text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 6px;
}
.session-title { font-weight: 700; color: var(--chalk); font-size: .98rem; }
.session-team { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.session-body { padding: 20px 24px; }

/* Tableaux : wrapper scrollable pour éviter tout débordement horizontal sur mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 480px; }
.mt th { color: var(--muted); text-align: left; padding: 6px 8px; font-size: .72rem; font-weight: 600; border-bottom: 1px solid var(--border); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.mt td { padding: 8px 8px; border-bottom: 1px solid var(--border); color: var(--chalk2); }
.mt td.hi { color: var(--acc); font-family: var(--ff-mono); font-weight: 700; }
.mt tr:last-child td { border-bottom: none; }
.mt tr.hi-row td {
  background: rgba(var(--acc-rgb),.08);
  color: var(--acc); font-family: var(--ff-mono);
  padding-top: 10px; padding-bottom: 10px;
  border-top: 1px solid rgba(var(--acc-rgb),.2);
  border-bottom: 1px solid rgba(var(--acc-rgb),.2);
}

.delta {
  background: rgba(var(--acc-rgb),.08);
  border: 1px solid rgba(var(--acc-rgb),.3);
  border-radius: var(--r); padding: 18px 20px; margin-top: 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.delta-n { font-family: var(--ff-mono); font-size: 1.8rem; font-weight: 700; color: var(--acc); flex-shrink: 0; }
.delta-l { font-size: .82rem; color: var(--chalk2); line-height: 1.6; }
.warn-box {
  background: rgba(220,38,38,.14); border: 1px solid rgba(248,113,113,.4);
  border-radius: var(--r); padding: 12px 16px; margin-top: 12px;
  font-size: .78rem; color: #FCA5A5; line-height: 1.6;
}

/* Données affichées mais NON confirmées par le document de référence —
   à traiter/corriger avant toute mise en ligne (voir README). Ne jamais
   masquer silencieusement : la donnée reste visible, mais signalée.
   Recoloré 2026-09-06 pour le thème nuit : rouge éclairci sur fond
   rouge sombre translucide, le contraste doit rester net, pas décoratif. */
.unsourced-row { background: rgba(220,38,38,.14) !important; }
.unsourced-row td, .unsourced-row .anom-d, .unsourced-row .anom-s { opacity: .92; }
.gap-tag {
  display: inline-block; font-family: var(--ff-mono); font-size: .64rem; font-weight: 700;
  color: #FCA5A5; background: rgba(220,38,38,.18); border: 1px solid rgba(248,113,113,.4);
  padding: 1px 5px; border-radius: 4px; margin-left: 4px; letter-spacing: .03em;
}
.gap-note {
  background: rgba(220,38,38,.14); border: 1px solid rgba(248,113,113,.4);
  border-radius: var(--r); padding: 12px 16px; margin-top: 10px;
  font-size: .76rem; color: #FCA5A5; line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
   PUBLICATIONS
═══════════════════════════════════════════════════════════════ */
.sec-pub { background: var(--bg); }
.dois { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; }
.doi-row {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: var(--r); padding: 18px 22px;
  display: grid; grid-template-columns: 130px 1fr 36px;
  gap: 20px; align-items: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.doi-row:hover { border-color: var(--acc3); box-shadow: 0 12px 28px -16px rgba(var(--acc-rgb),.35); transform: translateX(4px); }
.doi-id { font-family: var(--ff-mono); font-size: .72rem; color: var(--muted); background: var(--bg3); padding: 5px 10px; border-radius: 4px; text-align: center; line-height: 1.4; }
.doi-t { font-weight: 700; color: var(--chalk); font-size: .92rem; margin-bottom: 4px; }
.doi-m { font-size: .8rem; color: var(--muted); }
.doi-arr { color: var(--acc); font-size: 1.2rem; }
.doi-hyp { font-size: .74rem; color: #FBBF24; font-family: var(--ff-mono); margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════════════ */
.sec-contact { background: var(--bg2); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 48px; }
.cblock-h { font-family: var(--ff-serif); font-size: 1.4rem; color: var(--chalk); margin-bottom: 24px; font-weight: 700; }
.citem { margin-bottom: 16px; }
.citem strong { display: block; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.citem span, .citem a { color: var(--chalk2); font-size: .92rem; }
.orcid-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(166,206,57,.16); border: 1px solid rgba(166,206,57,.4);
  padding: 6px 14px; border-radius: 20px;
  font-family: var(--ff-mono); font-size: .8rem; color: #A6CE39;
  margin-top: 6px;
}
.cite-code {
  background: var(--bg3); border: 1px solid var(--border);
  border-left: 4px solid var(--acc);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 20px; margin-top: 24px;
  font-family: var(--ff-mono); font-size: .78rem;
  color: var(--chalk2); line-height: 1.8;
  position: relative;
}
.copy-btn {
  position: absolute; top: 10px; right: 10px;
  background: rgba(var(--acc-rgb),.12); color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb),.35); border-radius: 4px;
  font-family: var(--ff-mono); font-size: .67rem;
  padding: 4px 8px; cursor: pointer; transition: background .2s;
}
.copy-btn:hover { background: rgba(var(--acc-rgb),.25); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — bandeau navy conservé (même logique que le topbar :
   ancrage institutionnel visible en clôture de page), déjà cohérent
   avec le thème nuit avant même la refonte
═══════════════════════════════════════════════════════════════ */
footer {
  background: var(--navy); border-top: 1px solid rgba(255,255,255,.08);
  padding: 36px 40px; text-align: center;
}
.footer-logo {
  width: 40px; height: 40px; border-radius: 50%;
  display: block; margin: 0 auto 14px; object-fit: contain;
  background: #fff;
}
footer p { color: #9AAAC6; font-size: .82rem; line-height: 1.8; }
footer strong { color: #E1E8F2; }
.footer-dois { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.footer-doi { font-family: var(--ff-mono); font-size: .72rem; color: #7488A8; transition: color .2s; }
.footer-doi:hover { color: #fff; text-decoration: underline; }
.footer-orcid { margin-top: 10px; font-family: var(--ff-mono); font-size: .74rem; color: #7488A8; }
.footer-orcid a { color: #A6CE39; }

/* Bouton retour en haut */
.back-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 150;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--acc);
  color: #0B0F2E; border: none; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(var(--acc-rgb),.45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-top:hover { background: var(--acc2); box-shadow: 0 10px 28px rgba(var(--acc-rgb),.55); }

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-bg .ring:nth-child(n+3) { display: none; }
  .dims { grid-template-columns: 1fr 1fr; }
  .sites-grid { grid-template-columns: 1fr 1fr; }
  .terrain-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 160px 1fr 80px; }
  .nav-orcid { display: none; }
}
@media (max-width: 600px) {
  .sec { padding: 64px 20px; }
  .nav { padding: 0 20px; }

  /* Menu mobile : remplace la disparition pure des liens par un panneau déroulant accessible */
  .hamburger { display: flex; flex-shrink: 0; }
  /* "Thibodeau Innovation Systems" (29 car.) déborde sur 2 lignes en dessous de 600px
     avec le font-size desktop (1.4rem/22.4px) : mesuré via DOM à 390px -> spanHeight
     73.94px = 2x line-height (36.96px), navHeight passe de 69px à 102.9px et le
     bouton hamburger est compressé à ~32-37px (sous 40px).
     Fix en deux temps, vérifié par mesure DOM (script Playwright, pas visuel) :
     1) réduction du font-size à 1rem : règle le cas 600-360px, mais RÉ-CASSE à
        320px (iPhone SE, petits Android) -> brandWidth mesuré = 240px = exactement
        l'espace dispo (nav 320px - padding 40px - hamburger 40px), donc re-wrap.
     2) truncation par ellipsis sur le conteneur flexible : garantit 1 ligne à
        TOUTE largeur, quel que soit le nom affiché, sans dépendre d'un seuil
        de police calé sur ce texte précis. Ce fix reste valide dans la refonte
        nuit/glow : structure/logique inchangées, seules les couleurs le sont. */
  .nav-brand { font-size: 1rem; gap: 8px; min-width: 0; flex: 1 1 auto; }
  .nav-brand span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .nav-logo { flex-shrink: 0; }
  .nav-links {
    position: fixed;
    top: calc(var(--topbar-h) + var(--nav-h));
    left: 0; right: 0;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    background: #10143A; /* opaque garanti — pas de rgba/blur : évite tout effet de transparence résiduelle selon le moteur de rendu (même logique qu'avant, valeur simplement recolorée pour le thème nuit) */
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    transition: max-height .3s ease;
    gap: 0;
    z-index: 99;
  }
  .nav-links.open { max-height: 70vh; overflow-y: auto; }
  .nav-links a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }

  .hero { padding: 80px 20px 60px; }
  .dims { grid-template-columns: 1fr; }
  .sites-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr auto; }
  .score-site small { display: none; }
  .score-bar-wrap { display: none; }
  .doi-row { grid-template-columns: 100px 1fr 28px; gap: 12px; }
  footer { padding: 28px 20px; }
  .back-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
}

/* ============================================
   HISTORIQUE DE CORRECTIONS — repliable
   Ajouté le 20 août 2026 : les corrections restent tracées et
   consultables, mais n'occupent plus le corps du texte principal.
   Le résultat final s'affiche directement ; l'historique est
   optionnel (clic sur le résumé pour dérouler).
   Recoloré le 6 sept. 2026 pour le thème nuit/glow, logique inchangée.
   ============================================ */
details.revision-log {
  margin-top: 10px;
  font-size: .76rem;
  color: var(--muted);
}
details.revision-log summary {
  cursor: pointer;
  color: var(--acc);
  font-weight: 700;
  list-style: none;
}
details.revision-log summary::-webkit-details-marker { display: none; }
details.revision-log summary::before {
  content: "▸ ";
  display: inline-block;
}
details.revision-log[open] summary::before {
  content: "▾ ";
}
details.revision-log p {
  margin: 6px 0 0 0;
  line-height: 1.65;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

/* ============================================
   BULLES INFORMATIVES (info-btn) — Ajouté le 6 sept. 2026 à la
   demande de Pascal Thibodeau, pour expliquer les curseurs g/k/s/c
   et le bloc "Soumettre ce cas". Petit bouton "ⓘ" accolé au libellé ;
   le texte d'aide (attribut data-tip) apparaît au survol/focus
   (desktop) et au clic (mobile/tactile, via app.js qui bascule la
   classe .tip-open — CSS :hover seul est peu fiable au toucher).
   Contenu neutre/factuel, repris de la table des dimensions déjà
   publiée sur /methode — aucune nouvelle affirmation introduite.
   ============================================ */
.sim-label-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border2);
  color: var(--acc3); font-size: .68rem; font-weight: 700;
  line-height: 1; cursor: pointer; padding: 0; position: relative;
  flex-shrink: 0;
}
.info-btn:hover, .info-btn:focus-visible, .info-btn.tip-open {
  background: rgba(var(--acc-rgb), .18); border-color: var(--acc);
  color: var(--acc2);
}
.info-btn::after {
  content: attr(data-tip);
  position: absolute; z-index: 30;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 260px; max-width: 74vw;
  background: var(--bg3); color: var(--chalk2);
  border: 1px solid var(--border2); border-radius: 10px;
  padding: 10px 12px; font-size: .74rem; font-weight: 400;
  line-height: 1.55; text-align: left; text-transform: none;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.info-btn:hover::after, .info-btn:focus-visible::after, .info-btn.tip-open::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Sur très petit écran, éviter que la bulle dépasse à gauche du viewport */
@media (max-width: 480px) {
  .info-btn::after { left: 0; transform: translateX(0) translateY(4px); }
  .info-btn:hover::after, .info-btn:focus-visible::after, .info-btn.tip-open::after {
    transform: translateX(0) translateY(0);
  }
}
.sim-ia-h .info-btn { margin-left: 8px; vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════
   COMPTE — connexion Google (Firebase) + dépôt de dossiers PDF.
   Ajouté le 6 sept. 2026. Réutilise les tokens de couleur/rayon
   existants (--bg3, --border2, --r, --r2) pour rester cohérent avec
   le reste du thème nuit/glow ; pas de nouvelle palette introduite.
═══════════════════════════════════════════════════════════════ */
.sec-compte { background: var(--bg2); }

.compte-box {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 28px 32px; margin-top: 8px;
}
.compte-profile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compte-name { font-family: var(--ff-serif); font-size: 1.15rem; }

/* Formulaire de dépôt / liste — réutilise .sim-case-row, .sim-text,
   .btn-gold, .btn-ghost, .cblock-h, .sec-p, .sim-export-status déjà
   définis plus haut (simulateur ThibScore) pour une cohérence visuelle
   totale entre le formulaire de dépôt et le formulaire de soumission
   de cas. Seuls les conteneurs et la liste des dossiers sont propres
   à cette section. */
.dossier-upload-box { border-top: 1px solid var(--border); padding-top: 28px; }
.dossier-list-box { border-top: 1px solid var(--border); padding-top: 24px; }

.dossier-list { display: flex; flex-direction: column; gap: 12px; }
.dossier-item {
  background: var(--panel); border: 1px solid var(--border2);
  border-radius: var(--r); padding: 16px 18px;
}
.dossier-item-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.dossier-item-title { font-weight: 700; color: var(--chalk); font-size: .95rem; }
.dossier-item-status {
  font-family: var(--ff-mono); font-size: .7rem; color: var(--acc3);
  background: rgba(var(--acc-rgb),.12); border: 1px solid rgba(var(--acc-rgb),.3);
  border-radius: 20px; padding: 2px 10px; white-space: nowrap; flex-shrink: 0;
}
.dossier-item-desc { color: var(--chalk2); font-size: .85rem; margin-top: 6px; line-height: 1.6; }
.dossier-item-meta {
  font-family: var(--ff-mono); font-size: .72rem; color: var(--muted);
  margin-top: 10px;
}

@media (max-width: 700px) {
  .compte-box { padding: 22px 20px; }
  .compte-profile { flex-direction: column; align-items: flex-start; }
  .compte-profile #logout-btn { margin-left: 0 !important; width: 100%; }
}
@media (max-width: 600px) {
  .nav-account-link { max-width: 90px; padding: 6px 10px; font-size: .74rem; }
}