/* ============================================================
   SCORE AO — L'ESPACE CONNECTÉ, REFONTE VISUELLE DU 12/10/2026
   Chargée EN DERNIER par app.html. Les couleurs du bloc <style>
   d'app.html ont été repeintes par `migrer-app-v2.mjs` (même table que
   le site) ; cette feuille ajoute l'identité de la maquette :
   la barre encre, la marque radar, les titres Archivo, les étiquettes
   en Spline Sans Mono, les boutons cuivre et l'écran de connexion.

   Un outil de travail n'est pas une page d'accueil : fond crème clair
   pour lire longtemps, encre réservée à la barre et à la connexion,
   aucun mouvement perpétuel hors la marque (et coupé en mouvement réduit).
============================================================ */

:root{
  --a2-ink:#0e0c0b; --a2-ink-2:#141110; --a2-copper:#c88a5e; --a2-copper-hi:#e3b48c;
  --a2-light:#ece9e3; --a2-light-dim:#8c847b; --a2-hair:rgba(236,233,227,.14);
  --a2-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --a2-mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ── Typographie ───────────────────────────────────────────────────── */
body{font-family:var(--a2-sans);font-feature-settings:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:var(--a2-sans);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:26px;font-weight:800;letter-spacing:-.022em}
h2{font-size:20px;font-weight:750}
h3{font-size:17px;font-weight:700}
h4{font-size:15.5px;font-weight:650}
::selection{background:var(--a2-copper);color:#1a120c}

/* ── La marque ─────────────────────────────────────────────────────── */
.mark{display:inline-grid;place-items:center;position:relative;overflow:hidden;border-radius:50%;border:1.5px solid var(--a2-copper);flex:none;vertical-align:middle}
.mark::before{content:"";width:22%;height:22%;border-radius:50%;background:var(--a2-copper);position:relative;z-index:1}
.mark::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(227,180,140,.55),transparent 28%);animation:a2spin 3.2s linear infinite}
.mark-app{width:28px;height:28px}
.mark-login{width:52px;height:52px;border-width:2px}
#logo-header{display:grid;place-items:center}

/* ── La barre ──────────────────────────────────────────────────────── */
header{background:var(--a2-ink);border-bottom:1px solid var(--a2-hair)}

.brand b.nom{font-family:var(--a2-sans);font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--a2-light);line-height:1.1}
.brand b.nom span{color:var(--a2-copper)}
.brand small{font-family:var(--a2-mono);font-size:9.5px;letter-spacing:.18em;color:var(--a2-light-dim);margin-top:2px}
header .sortie{background:transparent;color:var(--a2-light);border:1px solid var(--a2-hair);border-radius:9px}
header .sortie:hover{background:rgba(236,233,227,.06);border-color:var(--a2-copper)}
.pipe{border-top:1px solid var(--a2-hair)}
.pipe button{font-family:var(--a2-sans);color:var(--a2-light-dim)}
.pipe button:hover{color:var(--a2-light);background:rgba(236,233,227,.04)}
.pipe button.on{color:var(--a2-light);border-bottom-color:var(--a2-copper)}
.pipe .num{font-family:var(--a2-mono);font-weight:500}
.pipe button.on .num,.pipe .cpt.or{background:var(--a2-copper);color:#1a120c}
.pipe .fleche{font-family:var(--a2-sans);font-size:15px}

/* ── Boutons ───────────────────────────────────────────────────────── */
button{border-radius:9px}
.btn-or{background:var(--a2-copper);color:#1a120c;position:relative;overflow:hidden}
.btn-or:hover:not(:disabled){background:var(--a2-copper);filter:brightness(1.07)}
.btn-primary{background:#1b1613;color:var(--a2-light)}
.btn-primary:hover:not(:disabled){background:#2a221d}

/* ── Étiquettes, pastilles, compteurs : la voix « mono » de la maquette ─ */
.etape-num,.pas-n,.pas-l-num,.pas-etape-dit{font-family:var(--a2-mono)}
.etape-lien{font-family:var(--a2-sans)}
.etape-lien.on{background:var(--a2-copper);border-color:var(--a2-copper);color:#1a120c;box-shadow:0 1px 8px rgba(200,138,94,.35)}
.etape-lien.on .etape-num{background:#1a120c;color:var(--a2-copper)}
.etape-lien.on .fiche-mini{color:rgba(26,18,12,.72)}
.kpi .n,.kpi b,.kpi strong{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Les compteurs du pilotage : chiffre en Archivo plein, libellé en mono.
   Archivo est plus large qu'Outfit : sur téléphone, « CONSULTATIONS »
   sortait de sa case. Le libellé passe à la ligne et resserre son espacement. */
.pil-c .n{font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pil-c .l{font-family:var(--a2-mono);font-size:10.5px;letter-spacing:.12em}
@media(max-width:520px){.pil-c{min-width:0;flex:1 1 0;padding:12px 10px}.pil-c .l{font-family:var(--a2-sans);text-transform:none;letter-spacing:0;font-size:12px;line-height:1.25}}

/* ── Connexion ─────────────────────────────────────────────────────────
   Le thème sombre de la connexion (bulles qui montent, voile qui dérive)
   est gardé : il a été demandé, et repeint en encre et cuivre il est déjà
   celui de la maquette. On n'y ajoute que les anneaux du radar et la marque. */
#login{background:
    repeating-radial-gradient(circle at 78% 40%,transparent 0 70px,rgba(236,233,227,.04) 70px 71px),
    radial-gradient(80vw 60vw at 50% -20%,rgba(200,138,94,.16),transparent 62%),
    radial-gradient(60vw 50vw at 12% 100%,rgba(120,80,52,.26),transparent 65%),
    var(--a2-ink)}
#login .login-card{border-radius:18px}
#logo-login{display:grid;place-items:center}
#login .login-card h1.nom-login{font-family:var(--a2-sans);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--a2-light)}
#login .login-card h1.nom-login span{color:var(--a2-copper)}

/* Le bouton « Installer en application » (install.js, commun à tous les
   outils de La Bulle) se pose en haut à droite, en style écrit dans
   l'élément : il recouvrait « Quitter ». Ici seulement, il descend au-dessus
   du bouton « Guide », en cuivre. Le script commun n'est pas touché. */
#btn-install-bulle{top:auto!important;bottom:132px!important;right:16px!important;
  border-color:var(--a2-copper)!important;background:rgba(200,138,94,.16)!important}

@keyframes a2spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mark::after{animation:none}}