/* ============================================================
   IAGotchi — thème « refonte » (crème / pixel, chaud)
   Reproduit le template Claude Design.
   ============================================================ */
:root {
  --bg: #f2e7d1;            /* fond page (crème chaud) */
  --bg-grad-1: #f6edd9;
  --header: rgba(251, 243, 226, .82);
  --card: #fffaf0;          /* cartes (blanc crème) */
  --card-2: #f8efdc;        /* cartes secondaires / pistes */
  --ink: #2e271f;           /* texte principal (brun foncé) */
  --ink-2: #3a322a;
  --muted: #7c6c5a;         /* texte secondaire */
  --muted-2: #9a8a72;
  --line: #e6d6b4;          /* bordures */
  --line-2: #ecdcbd;

  --orange: #c2693c;  --orange-sh: #9c5230;   /* primaire */
  --green:  #5b8c3e;  --green-sh:  #47702f;   /* civ slot 0 / valider */
  --pink:   #e58fb0;  --pink-sh:   #c56f90;   /* civ slot 1 */
  --slot2:  #49b3d3;  --slot2-sh:  #3a8faa;   /* civ slot 2 (bleu lagon) */
  --slot3:  #e0a23c;  --slot3-sh:  #b87d24;   /* civ slot 3 (ambre) */
  --amber:  #e0a23c;
  --blue:   #49b3d3;
  --purple: #b07fd0;
  --red:    #d9534f;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 8px 22px rgba(80, 60, 30, .10);

  --pixel: 'Pixelify Sans', ui-monospace, monospace;
  --title: 'Bricolage Grotesque', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-grad-1), var(--bg)) fixed, var(--bg);
  color: var(--ink); font-family: var(--ui); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--title); margin: 0 0 .4em; color: var(--ink); font-weight: 800; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }

/* --- Topbar (3 zones : gauche / crédits centrés / droite) --- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.2rem; background: var(--header); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tb-left { display: flex; align-items: center; gap: .9rem; }
.tb-center { justify-self: center; }
.tb-right { display: flex; align-items: center; gap: .4rem; }
.tb-spacer { flex: 1; }
/* Menu « Mon profil » */
.profile-menu { position: relative; }
.profile-dropdown { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .4rem;
  box-shadow: 0 16px 40px rgba(40,28,12,.22); display: flex; flex-direction: column; gap: .1rem; z-index: 50; }
.profile-dropdown a, .profile-dropdown button { display: block; width: 100%; text-align: left;
  padding: .5rem .65rem; border-radius: 9px; border: none; background: none; color: var(--ink);
  font: inherit; font-size: .9rem; cursor: pointer; }
.profile-dropdown a:hover, .profile-dropdown button:hover { background: rgba(58,50,42,.07); }
.profile-dropdown .profile-head { padding: .4rem .65rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; font-size: .9rem; }
.profile-dropdown form { margin: 0; border-top: 1px solid var(--line); margin-top: .2rem; padding-top: .2rem; }
.credits-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .9rem;
  padding: .35rem .8rem; border-radius: 999px; color: #8a5a1e;
  background: #fbeccb; border: 1px solid #ecd6a8; box-shadow: 0 2px 0 0 #ecd6a8;
}
@media (max-width: 1100px) { .topbar { grid-template-columns: 1fr auto; } .tb-center { display: none; } }
.brand { font-family: var(--pixel); font-size: 1.55rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: .45rem; letter-spacing: .01em; }
.brand .logo-ico { font-size: 1.2rem; line-height: 1; }
.brand .dot { color: var(--orange); }
nav { display: flex; gap: .4rem; align-items: center; }
.navtabs { display: flex; gap: .2rem; align-items: center; }

/* --- Boutons (effet rétro : ombre pleine décalée) --- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-family: var(--ui);
  padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: .86rem; font-weight: 800;
  box-shadow: 0 2px 0 0 var(--line); transition: transform .04s, filter .15s;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 0; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #fff5ea; box-shadow: 0 2px 0 0 var(--orange-sh); }
.btn-green   { background: var(--green); border-color: var(--green); color: #f3f9ec; box-shadow: 0 2px 0 0 var(--green-sh); }
.btn-pink    { background: var(--pink); border-color: var(--pink); color: #3a2030; box-shadow: 0 2px 0 0 var(--pink-sh); }
/* Boutons par slot de civ (0..3) — utilisés quand N peut dépasser 2. */
.btn-slot0   { background: var(--green); border-color: var(--green); color: #f3f9ec; box-shadow: 0 2px 0 0 var(--green-sh); }
.btn-slot1   { background: var(--pink); border-color: var(--pink); color: #3a2030; box-shadow: 0 2px 0 0 var(--pink-sh); }
.btn-slot2   { background: var(--slot2); border-color: var(--slot2); color: #07303c; box-shadow: 0 2px 0 0 var(--slot2-sh); }
.btn-slot3   { background: var(--slot3); border-color: var(--slot3); color: #3a2a07; box-shadow: 0 2px 0 0 var(--slot3-sh); }
.btn-danger  { background: #e7cdbf; border-color: #d8b6a3; color: #7a3b28; box-shadow: 0 2px 0 0 #c79784; }
.btn-ghost   { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost:hover { background: rgba(58,50,42,.06); }
.btn-sm { padding: .32rem .6rem; font-size: .8rem; }
.btn-block { width: 100%; justify-content: center; }

.container { max-width: 1320px; margin: 0 auto; padding: 1.4rem; }

/* --- Onglets / pills --- */
.pill { display: inline-flex; gap: .2rem; padding: 3px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.pill .seg { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; border: none; background: transparent; font-family: var(--ui); }
.pill .seg.on { background: var(--ink-2); color: var(--bg); }

.tabs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tab {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-family: var(--ui);
  padding: .42rem .8rem; border-radius: 10px; border: none; background: transparent;
  color: var(--muted-2); font-weight: 700; font-size: .85rem;
}
.tab:hover { background: rgba(58,50,42,.06); color: var(--ink); }
.tab-on, .tab.tab-on { background: var(--ink-2); color: var(--bg); }

/* --- Cartes --- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.grid { display: grid; gap: 1rem; }
.page-title { font-family: var(--title); font-size: 2.1rem; font-weight: 800; margin: 0; }
.page-sub { color: var(--muted); margin: .2rem 0 1.2rem; }

/* --- Badges (pilules) --- */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 99px;
  font-size: .72rem; font-weight: 800; background: #f2e8d2; color: var(--muted); border: 1px solid var(--line-2); }
.badge.alive, .badge.running { background: #e7f3df; color: #4e7a35; border-color: #cfe6bf; }
.badge.dead { background: #f6dcd6; color: #b1483c; border-color: #ecc4ba; }
.badge.finished { background: #efe6d2; color: var(--muted); }
.badge.paused { background: #f7ead0; color: #9a7426; border-color: #ecd6a8; }
.badge.city { background: #f6e9cf; color: #a9772a; border-color: #ecd6a8; }
.badge.country { background: #e7f1de; color: #58843a; border-color: #d0e6bd; }
.badge.island { background: #e3f2f8; color: #2e7d97; border-color: #c5e6f0; }
.badge.mountain { background: #ece7df; color: #6b5d4a; border-color: #ddd2c2; }

/* --- Chips --- */
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* --- Jauges (ressources / besoins) --- */
.bar { margin-bottom: .55rem; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; }
.bar-head .k { color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.bar-val { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.bar-track { height: 9px; background: #eaddc2; border-radius: 99px; overflow: hidden; margin-top: 3px; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }

/* --- Modèle chip (A vs B) --- */
.model-chip { display: flex; align-items: center; gap: .5rem; background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: .5rem .7rem; }
.model-chip .ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); }
.model-chip .nm { font-size: .8rem; font-weight: 700; }
.vs { font-family: var(--pixel); color: var(--muted-2); font-size: 1rem; padding: 0 .2rem; }

/* --- Progress / tick --- */
.tickline { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin: .7rem 0 .25rem; }
.tickval { font-family: var(--mono); color: var(--ink); font-weight: 700; }
.progress { height: 9px; background: #eaddc2; border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--green), #7bb255); transition: width .5s; }

/* --- Bannières --- */
.banner { padding: .7rem .9rem; border-radius: 12px; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--card); }
.banner.warn { background: #faeccf; border-color: #ecd6a8; color: #8a6a26; }
.banner.over { background: #e7f3df; border-color: #cfe6bf; color: #4e7a35; }

/* ============================================================
   ACCUEIL — « Mes terrariums »
   ============================================================ */
.terra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
.terra-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.terra-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.terra-name { font-family: var(--title); font-weight: 800; font-size: 1.25rem; }
.terra-models { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.terra-actions { display: flex; gap: .5rem; margin-top: .9rem; }
.terra-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .7rem; }

/* ============================================================
   PARIS — panneau sur le hub (parties publiques)
   ============================================================ */
.bet-panel { margin-bottom: 1rem; }
.bet-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.bet-head h2 { margin: 0; font-size: 1.3rem; }
.bet-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.odds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 760px) { .odds-grid { grid-template-columns: 1fr; } }
.odds-name, .odds-model { overflow-wrap: anywhere; }
.odds-card { border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 14px; padding: .9rem 1rem; background: var(--card-2); }
.odds-card.slot-1 { border-top-color: var(--pink); }
.odds-card.slot-2 { border-top-color: var(--slot2); }
.odds-card.slot-3 { border-top-color: var(--slot3); }
.odds-card.winner { box-shadow: 0 0 0 2px var(--green); }
.odds-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.odds-name { font-family: var(--title); font-weight: 800; font-size: 1.1rem; }
.tier-badge { font-size: .7rem; font-weight: 800; padding: .15rem .5rem; border-radius: 99px; border: 1px solid var(--line-2); }
.tier-favori { background: #e7f3df; color: #4e7a35; }
.tier-équilibré { background: #eef0f5; color: #5b6473; }
.tier-outsider { background: #f7ead0; color: #9a7426; }
.tier-grosoutsider { background: #f6dcd6; color: #b1483c; }
.odds-model { font-size: .82rem; color: var(--muted); margin: .35rem 0 .6rem; }
.odds-model .stars { color: var(--amber); letter-spacing: .05em; margin-left: .25rem; }
.odds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .7rem; }
.odds-stats > div { display: flex; flex-direction: column; }
.odds-v { font-family: var(--title); font-weight: 800; font-size: 1.15rem; }
.odds-k { font-size: .72rem; color: var(--muted); }
.bet-form, .bet-closed { grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding-top: .9rem; }
.bet-form-row { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.bet-closed { color: var(--muted); font-weight: 600; }
.my-bets { margin-top: 1rem; border-top: 1px solid var(--line-2); padding-top: .7rem; }
.my-bet { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .9rem; border-bottom: 1px solid var(--line-2); }
.my-bet:last-child { border-bottom: none; }
.my-bet .mb-civ { font-weight: 800; min-width: 130px; }
.my-bet .mb-amt { color: var(--muted); flex: 1; }

/* ============================================================
   LE DUEL — hub (2 cartes civ)
   ============================================================ */
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; }
/* 3-4 civilisations : grille de cartes (2×2 à 4, 2+1 à 3), sans bloc « A vs B ». */
.duel.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .duel, .duel.multi { grid-template-columns: 1fr; } }
.civ-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden;
  box-shadow: var(--shadow); background: var(--card); border-top: 4px solid var(--green); }
.civ-card.slot-1 { border-top-color: var(--pink); }
.civ-card.slot-2 { border-top-color: var(--slot2); }
.civ-card.slot-3 { border-top-color: var(--slot3); }
.civ-card h2 { font-size: 1.4rem; }
/* Bannière d'en-tête colorée (façon standalone) */
.civ-banner { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line-2); }
.civ-banner.slot-0 { background: #e9f1fb; }
.civ-banner.slot-1 { background: #fbe9f1; }
.civ-banner.slot-2 { background: #e3f2f8; }
.civ-banner.slot-3 { background: #f9eccd; }
.cb-ico { width: 54px; height: 54px; flex: none; border-radius: 14px; background: #fff; border: 1px solid var(--line-2);
  display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 2px 6px rgba(40,28,12,.08); }
.cb-main { flex: 1; min-width: 0; }
.cb-title { font-family: var(--title); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; line-height: 1.15; }
.cb-sub { font-size: .84rem; color: var(--muted); margin-top: .15rem; overflow-wrap: anywhere; }
.cb-sub strong { color: var(--ink-2); }
.cb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; margin-top: .45rem; font-size: .8rem; color: var(--ink-2); }
.cb-meta span:not(:first-child)::before { content: "·"; margin-right: .55rem; color: var(--muted-2); }
.cb-moral { flex: none; text-align: center; min-width: 52px; }
.cb-moral .emo { font-size: 2rem; line-height: 1; }
.cb-moral .pct { font-family: var(--pixel); font-size: 1.45rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.cb-moral .lbl { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; color: var(--muted-2); }
.civ-body { padding: 1rem 1.2rem 1.2rem; }
@media (max-width: 520px) { .civ-banner { flex-wrap: wrap; } .cb-moral { margin-left: auto; } }
.duel-mid { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: 2.5rem; }
.duel-mid .vsbig { font-family: var(--pixel); font-size: 1.6rem; color: var(--muted-2); }
.cmp { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-align: center; }

.statline { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 .8rem; }
.statline .big { font-family: var(--title); font-size: 1.6rem; font-weight: 800; }

/* ============================================================
   MONDE LIVE — carte (full) + sidebar
   ============================================================ */
.world-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; margin-bottom: .9rem; box-shadow: var(--shadow); }
.world-bar-left { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--title); font-weight: 800; }
.world-bar .spacer { flex: 1; }
.world-bar-right { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* === Vue carte PLEIN ÉCRAN : header (menu) conservé, le RESTE en overlay === */
body.world-fs { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.world-fs main.container { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; }
/* Fond « lisière » (vert mousse) — jamais de noir si la carte ne remplit pas tout
   le canvas. Le renderer peint le même dégradé dans le canvas. */
.world-stage { position: relative; flex: 1; min-height: 0; width: 100%;
  background: linear-gradient(#2a3a22, #1d2917); overflow: hidden; }
.world-stage canvas.world { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: pointer; }
/* Les conteneurs overlay laissent passer le pan/zoom de la carte ; seuls leurs
   enfants concrets (barre, panneau, boutons) captent les clics. */
.map-overlay { position: absolute; z-index: 6; pointer-events: none; }
.map-overlay > * { pointer-events: auto; }

/* Barre d'action flottante (BAS de la carte) + repli total */
.map-actionbar { left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.world-bar.overlay-bar { position: static; z-index: 6; width: 100%; margin: 0;
  background: rgba(255,250,240,.94); backdrop-filter: blur(6px); box-shadow: 0 -4px 18px rgba(40,28,12,.32); }
.bar-collapse { margin-left: .2rem; }
.bar-reveal { border: 1px solid var(--line); background: rgba(255,250,240,.94); color: var(--ink);
  font-weight: 800; font-size: .82rem; padding: .3rem .8rem; border-radius: 10px; cursor: pointer;
  box-shadow: 0 -3px 12px rgba(40,28,12,.25); }
.bar-reveal:hover { background: #fff; }
/* Bannière mode dégradé (overlay haut-centre, pour ne masquer ni le panneau ni la barre) */
.map-degraded { top: 64px; left: 50%; transform: translateX(-50%); max-width: min(70%, 600px); margin: 0; z-index: 6; }

/* Panneau latéral repliable (overlay droite) — borné AU-DESSUS de la barre du bas */
.map-panel { top: 64px; right: 10px; width: 344px; max-width: calc(100% - 20px);
  max-height: calc(100% - 150px); display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.map-panel .panel-toggle { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,250,240,.95); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(40,28,12,.25); display: grid; place-items: center; }
.map-panel .panel-toggle:hover { background: #fff; }
.map-panel .panel-body { width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;
  gap: 1rem; padding: 2px; }

/* Indice (overlay bas-gauche, au-dessus de la barre, FERMABLE) + zoom (bas-droite) */
.canvas-hint { position: absolute; left: 12px; bottom: 62px; z-index: 6; display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: #fff; background: rgba(46,39,31,.72); padding: .25rem .35rem .25rem .6rem;
  border-radius: 8px; pointer-events: none; max-width: calc(100% - 80px); }
.canvas-hint .hint-close { pointer-events: auto; cursor: pointer; border: none; background: rgba(255,255,255,.18);
  color: #fff; width: 18px; height: 18px; border-radius: 5px; font-size: .72rem; line-height: 1; display: grid; place-items: center; }
.canvas-hint .hint-close:hover { background: rgba(255,255,255,.34); }
.zoom-controls { position: absolute; bottom: 62px; right: 12px; display: flex; flex-direction: column; gap: .3rem; z-index: 6; }
.zoom-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,250,240,.92); color: var(--ink); font-size: 1.1rem; font-weight: 800; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 6px rgba(40,28,12,.25); display: grid; place-items: center; }
.zoom-btn:hover { background: #fff; filter: brightness(1.02); }
.zoom-btn:active { transform: translateY(1px); }
.world-stats { display: flex; align-items: center; gap: 1rem; }
.world-stats .pop { font-family: var(--title); font-size: 1.5rem; font-weight: 800; }
.world-stats .morale { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.spark { width: 100%; height: 42px; display: block; }

.roles-list, .actions-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.events { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.event { display: flex; gap: .55rem; padding: .4rem .1rem; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.event:last-child { border-bottom: none; }
.event .tk { font-family: var(--mono); color: var(--muted-2); font-size: .76rem; min-width: 40px; }
.event.sev-major { color: #9a7426; }
.event.sev-critical { color: var(--red); font-weight: 700; }
.event.sev-warning { color: #2f7fa0; }
.event.mine { background: rgba(91,140,62,.10); border-radius: 7px; }
/* Carnet des paris : 1 ligne par parieur (mise cumulée) + détails repliables */
.bettor { padding: .4rem .15rem; border-bottom: 1px solid var(--line-2); }
.bettor:last-child { border-bottom: none; }
.bettor.mine { background: rgba(91,140,62,.10); border-radius: 8px; padding-inline: .4rem; }
.bettor-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bettor-name { font-size: .9rem; }
.bettor-total { font-family: var(--mono); font-weight: 800; color: var(--ink); }
.bettor-n { font-size: .76rem; }
.bettor-toggle { margin-left: auto; }
.bettor-detail { margin: .35rem 0 .1rem .4rem; padding-left: .6rem; border-left: 2px solid var(--line); }
.bettor-detail .event { border-bottom: 1px dashed var(--line-2); }
.bettor-detail .event:last-child { border-bottom: none; }

/* --- Stats pills (panneaux) --- */
.world-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem 1rem; margin-bottom: .4rem; }
.stat-pill { display: flex; align-items: baseline; gap: .35rem; }
.stat-pill .v { font-family: var(--title); font-size: 1.2rem; font-weight: 800; }
.stat-pill .k { font-size: .74rem; color: var(--muted); }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-row { margin-bottom: 1rem; }
.field-label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .9rem; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line);
  background: #fffdf8; color: var(--ink); font-size: .95rem; font-family: var(--ui);
}
input:focus, select:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.field-error { color: var(--red); font-size: .82rem; margin-top: .25rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin: 0 0 1rem; }
legend { padding: 0 .4rem; font-weight: 800; color: var(--muted); font-family: var(--title); }
.hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }

/* --- Toggle iOS --- */
.toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { width: 46px; height: 26px; background: #d8c6a4; border-radius: 999px; position: relative; transition: background .2s; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-track { background: var(--green); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-weight: 700; }

/* ============================================================
   MODALS / POPUPS — dimensionnées (un seul scroll vertical)
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(46,39,31,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem;
  width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 20px 50px rgba(40,28,12,.35); position: relative; }
.guide-modal-box { max-width: 900px; }
.modal-question { font-size: 1.05rem; margin-bottom: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; }

/* --- Fiche agent --- */
.agent-card { position: relative; }
/* Bouton de fermeture : À L'INTÉRIEUR de la card (insets POSITIFS) + z-index, sinon il
   est rogné par le bord arrondi / l'overflow du .modal-box. Sticky → reste visible même
   quand le contenu de la modal défile. */
.agent-close { position: sticky; float: right; top: 0; z-index: 5; width: 30px; height: 30px; border-radius: 9px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 1rem;
  line-height: 1; margin: -.3rem -.3rem .2rem .4rem; }
.agent-close:hover { filter: brightness(1.05); }
.agent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Récap & courbes --- */
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1000px) { .recap-grid { grid-template-columns: 1fr; } }
.winner { box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.chart { margin-bottom: .8rem; }
.chart .lbl { font-size: .8rem; color: var(--muted); }
svg.spark { width: 100%; display: block; }

/* --- Mode d'emploi : espacement --- */
.guide-stack > * { margin-bottom: 1rem; }
.guide-stack > *:last-child { margin-bottom: 0; }
.guide-stack h3 { margin-top: 0; }

/* --- Tables (liste compacte si besoin) --- */
table.games { width: 100%; border-collapse: collapse; }
table.games th, table.games td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.games th { color: var(--muted); font-size: .82rem; font-weight: 700; }
.tabs.subtabs { gap: .3rem; } .tabs.subtabs .tab { font-size: .85rem; padding: .28rem .6rem; }

.game-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.game-head h1 { margin: 0; }
.hub-emoji { font-size: 2.4rem; }
.worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1000px) { .worlds { grid-template-columns: 1fr; } }

/* ============================================================
   MISSION CONTROL (mode sombre via body.mc) + en-tête duel pixel
   ============================================================ */
body.mc {
  --bg: #181410; --bg-grad-1: #221a12; --header: rgba(24,18,12,.86);
  --card: #241c15; --card-2: #2e2419; --ink: #f0e6d4; --ink-2: #fff8ec;
  --muted: #b9a98f; --muted-2: #8a7d6a; --line: #3a322a; --line-2: #463b2f;
  --shadow: 0 10px 26px rgba(0,0,0,.45);
}
body.mc .bar-track, body.mc .progress, body.mc .h2h-bar { background: #3a322a; }
body.mc .toggle-track { background: #463b2f; }
body.mc .btn { box-shadow: 0 2px 0 0 #0d0a07; }

.mc-scores { display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.mc-clock { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 1rem; }
.mc-civgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; align-items: end; }
.mc-score .mc-cname { font-family: var(--title); font-weight: 800; font-size: 1.35rem; }
.moral-pixel { font-family: var(--pixel); font-size: 4.2rem; line-height: 1; margin: .25rem 0 .1rem; font-weight: 600; }
.mc-vs .vsbig { font-family: var(--pixel); font-size: 2rem; color: var(--muted-2); }
@media (max-width: 760px) { .moral-pixel { font-size: 3rem; } }

.mc-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
@media (max-width: 620px) { .mc-models { grid-template-columns: 1fr; } }
/* Ressources : une rangée par ressource, une barre par civilisation. */
.mc-resrow { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.mc-reslbl { font-size: .85rem; color: var(--muted); }
.mc-resbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
.mc-resbar { display: flex; align-items: center; gap: .4rem; }
.mc-resbar-track { flex: 1; height: 9px; border-radius: 99px; overflow: hidden; background: #3a322a; }
.mc-resbar-track > div { height: 100%; border-radius: 99px; }
.mc-resbar-val { font-size: .78rem; min-width: 30px; text-align: right; color: var(--muted); }
@media (max-width: 640px) { .mc-resrow { grid-template-columns: 1fr; } }

/* Casier des délits (modal) — qui a commis quel délit, par civilisation. */
.crime-civs { display: flex; flex-direction: column; gap: .9rem; max-height: 65vh; overflow-y: auto; }
.crime-civ { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; border-left: 4px solid var(--green); background: var(--card-2); }
.crime-civ.slot-1 { border-left-color: var(--pink); }
.crime-civ.slot-2 { border-left-color: var(--slot2); }
.crime-civ.slot-3 { border-left-color: var(--slot3); }
.crime-civ-head { display: flex; align-items: center; gap: .5rem; }
.crime-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; max-height: 30vh; overflow-y: auto; }
.crime-row { display: grid; grid-template-columns: 44px auto 1fr; align-items: center; gap: .5rem; font-size: .84rem; }
.crime-badge { font-size: .72rem; font-weight: 800; padding: .12rem .5rem; border-radius: 99px; white-space: nowrap;
  background: #f6dcd6; color: #b1483c; border: 1px solid #ecc4ba; }
.crime-badge.crime-murder { background: #efe0ea; color: #7a2d5a; border-color: #ddc4d3; }
.crime-text { color: var(--ink-2); }
/* auto-fit : 4 stats en ligne sur une carte large (2 civs), 2×2 sur une carte étroite
   (3-4 civs) — chaque cellule ≥120px contient « POPULATION »/« DÉLITS » sans déborder. */
.mc-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.mc-stat { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .45rem .55rem; min-width: 0; }
.mc-stat .v { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.mc-persona { margin-top: .7rem; font-size: .85rem; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .5rem .7rem; }

.h2h { display: grid; grid-template-columns: 42px 1fr 160px 1fr 42px; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.h2h-val { font-family: var(--mono); font-weight: 700; font-size: .85rem; }
.h2h-lbl { text-align: center; font-size: .82rem; color: var(--muted); }
.h2h-bar { height: 9px; border-radius: 99px; overflow: hidden; }
.h2h-bar > div { height: 100%; border-radius: 99px; }
.h2h-bar.left { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .h2h { grid-template-columns: 34px 1fr 34px; } .h2h .h2h-bar, .h2h .h2h-lbl { display: none; } }

/* ============================================================
   CRÉDITS — packs + usages + FAQ
   ============================================================ */
.credit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .credit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .credit-grid { grid-template-columns: 1fr; } }
.credit-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.1rem 1.1rem; box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: .35rem; }
.credit-card.popular { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
.pop-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--orange); color: #fff5ea; font-size: .7rem; font-weight: 800; padding: .15rem .6rem; border-radius: 99px; }
.credit-emoji { font-size: 2rem; }
.credit-name { font-family: var(--title); font-weight: 800; font-size: 1.1rem; }
.credit-amt { font-family: var(--title); font-weight: 800; font-size: 1.7rem; }
.credit-amt span { font-size: .8rem; color: var(--muted); font-weight: 700; }
.credit-bonus { display: inline-block; align-self: center; background: #e7f3df; color: #4e7a35; border: 1px solid #cfe6bf;
  font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99px; }
.credit-price { font-family: var(--mono); font-weight: 700; color: var(--ink); margin: .3rem 0 .6rem; }
.credit-uses { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .6rem; }
@media (max-width: 760px) { .credit-uses { grid-template-columns: 1fr; } }
.use { display: flex; gap: .7rem; align-items: flex-start; }
.use-ic { font-size: 1.4rem; line-height: 1; }
.use p { margin: .15rem 0 0; font-size: .86rem; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer;
  background: none; border: none; padding: .85rem .2rem; font-family: var(--ui); font-weight: 700; font-size: .95rem; color: var(--ink); text-align: left; }
.faq-a { padding: 0 .2rem .85rem; color: var(--muted); font-size: .9rem; }

/* ============================================================
   LANDING — vitrine publique
   ============================================================ */
.lp-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.6rem; background: var(--header); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-nav { display: flex; gap: .3rem; align-items: center; }
.lp-nav a.tab { color: var(--muted); }
.lp-actions { display: flex; gap: .6rem; align-items: center; }
.lp-wrap { max-width: 1180px; margin: 0 auto; padding: 1.6rem; }
.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; padding: 2.4rem 0 1.5rem; }
@media (max-width: 900px) { .lp-hero { grid-template-columns: 1fr; } }
.lp-eyebrow { display: inline-block; background: #fbeccb; color: #8a5a1e; border: 1px solid #ecd6a8;
  font-size: .76rem; font-weight: 800; padding: .25rem .7rem; border-radius: 99px; margin-bottom: 1rem; }
.lp-hero h1 { font-family: var(--title); font-size: 3.1rem; line-height: 1.05; margin: 0 0 1rem; }
.lp-hero h1 .accent { color: var(--orange); }
@media (max-width: 560px) { .lp-hero h1 { font-size: 2.2rem; } }
.lp-hero .lead { font-size: 1.1rem; color: var(--muted); max-width: 30em; margin: 0 0 1.5rem; }
.lp-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn-lg { padding: .7rem 1.3rem; font-size: 1rem; }
.lp-preview { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; box-shadow: var(--shadow); }
.lp-preview .scene { aspect-ratio: 16/10; border-radius: 12px; background:
  repeating-linear-gradient(45deg, #cfe6bf 0 14px, #c6e0b4 14px 28px); position: relative; overflow: hidden; }
.lp-preview .scene .tick { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(46,39,31,.78); color: #fff;
  font-family: var(--mono); font-size: .72rem; padding: .2rem .55rem; border-radius: 8px; }
/* Habitants qui déambulent dans la mini-carte (l'encadré entoure et SUIT le personnage) */
.lp-agent { position: absolute; left: 50%; top: 60%; width: 58px; height: 80px;
  transform: translate(-50%, -50%) scaleX(var(--flip, 1));
  transition: left 2.2s ease-in-out, top 2.2s ease-in-out;
  display: grid; place-items: end center; padding-bottom: 4px; }
.lp-agent img { width: 46px; image-rendering: pixelated; animation: lp-bob 2.4s ease-in-out infinite; will-change: transform; }
.lp-agent.boxed { border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.14); }
.lp-agent.b-blue { border-color: rgba(91,141,239,.85); box-shadow: 0 0 12px rgba(91,141,239,.25); }
.lp-agent.b-orange { border-color: rgba(224,162,60,.9); box-shadow: 0 0 12px rgba(224,162,60,.25); }
/* encadré ROUGE de sélection (comme en jeu, action « clic sur un habitant ») */
.lp-agent.b-red { border-color: #ff3333; box-shadow: 0 0 12px rgba(255,51,51,.3); }
/* pastille « live » verte pulsante du tick (cohérente avec le tick-indicator en jeu) */
.lp-preview .tick .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  display: inline-block; margin-right: 5px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(91,140,62,.6); animation: tickpulse 1.6s infinite; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .lp-agent { transition: none; } .lp-agent img { animation: none; } }

.lp-section { padding: 2.6rem 0; }
.lp-section.dark { background: #181410; color: #f0e6d4; border-radius: var(--radius); padding: 2.6rem 1.6rem; }
.lp-section.dark h2, .lp-section.dark h3, .lp-section.dark h4, .lp-section.dark .lp-kicker { color: #fff8ec; }
.lp-kicker { text-align: center; font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .4rem; }
.lp-h2 { text-align: center; font-family: var(--title); font-size: 2rem; font-weight: 800; margin: 0 0 1.6rem; }
.lp-h2 .accent { color: var(--orange); }
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; box-shadow: var(--shadow); }
.lp-section.dark .lp-card { background: #241c15; border-color: #3a322a; }
.lp-card .ic { font-size: 1.6rem; }
.lp-card h3 { margin: .5rem 0 .35rem; }
.lp-card p { color: var(--muted); margin: 0; font-size: .9rem; }
.lp-section.dark .lp-card p { color: #b9a98f; }
.lp-step .num { font-family: var(--pixel); font-size: 2rem; color: var(--green); }
.lp-step:nth-child(2) .num { color: var(--orange); }
.lp-step:nth-child(3) .num { color: var(--pink-sh); }
.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 760px) { .lp-duo { grid-template-columns: 1fr; } }
.lp-duo .panel { border-radius: 14px; padding: 1.3rem; border: 1px solid var(--line); }
.lp-duo .local { background: #eaf4e0; border-color: #cfe6bf; }
.lp-duo .cloud { background: #181410; color: #f0e6d4; border-color: #3a322a; }
.lp-duo h3 { margin: 0 0 .6rem; }
.lp-duo .cloud h3 { color: #fff8ec; }      /* titre clair sur la carte cloud sombre */
.lp-duo ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.lp-duo li { padding: .25rem 0; }
.lp-duo li::before { content: "✓ "; color: var(--green); font-weight: 800; }
.lp-duo .cloud li::before { color: #7bb255; }
.lp-finalcta { position: relative; overflow: hidden; background: var(--orange); color: #fff5ea; border-radius: var(--radius); padding: 2.6rem 1.6rem; text-align: center; margin: 2rem 0; }
.lp-finalcta h2 { color: #fff5ea; font-size: 1.9rem; margin: 0 0 1rem; }
.lp-ghost { background: transparent; color: #fff5ea; border-color: rgba(255,245,234,.6); box-shadow: none; }
.lp-ghost:hover { background: rgba(255,255,255,.12); }
.lp-cta-av { position: absolute; bottom: 14px; height: 96px; width: auto; opacity: .96; }
.lp-cta-av.left { left: 26px; } .lp-cta-av.right { right: 26px; transform: scaleX(-1); }
@media (max-width: 720px) { .lp-cta-av { display: none; } }
.lp-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted); padding: 1.6rem .2rem 2.4rem; font-size: .85rem; border-top: 1px solid var(--line); margin-top: 1.2rem; }
.lp-foot-left { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.lp-foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 1rem; margin-bottom: .7rem; box-shadow: var(--shadow); }
.lp-faq-item > summary { cursor: pointer; list-style: none; padding: .95rem .2rem; font-family: var(--title); font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary::after { content: "+"; color: var(--orange); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.lp-faq-item[open] > summary::after { content: "\2212"; }
.lp-faq-item > p { margin: 0 0 1rem; color: var(--muted); line-height: 1.55; }
.lp-foot-links a { color: var(--muted); font-weight: 700; }
.lp-foot-links a:hover { color: var(--orange); }

/* Héro : ligne d'atouts + pied de la carte d'aperçu (modèle + moral) */
.lp-perks { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; color: var(--muted); font-size: .86rem; font-weight: 600; }
.lp-perks .sep { opacity: .5; }
.lp-prev-foot { display: flex; gap: .6rem; margin-top: .6rem; }
.lp-prev-model, .lp-prev-moral { display: flex; align-items: center; gap: .55rem; background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 12px; padding: .5rem .7rem; }
.lp-prev-model { flex: 1; min-width: 0; }
.lp-prev-model .ico, .lp-prev-moral .emo { font-size: 1.5rem; line-height: 1; }
.lp-prev-model .k, .lp-prev-moral .k { font-size: .7rem; color: var(--muted); }
.lp-prev-model .nm { font-weight: 700; font-size: .9rem; }
.lp-prev-moral .v { font-family: var(--title); font-weight: 800; font-size: 1.15rem; }

/* Bandeau modèles (chips) */
.lp-models { text-align: center; padding: .4rem 0 1.4rem; }
.lp-models-sub { color: var(--muted); font-size: .9rem; margin: 0 0 .9rem; }
.lp-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.lp-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .4rem .7rem; font-family: var(--mono); font-weight: 700; font-size: .82rem; box-shadow: 0 2px 0 0 var(--line); }
.lp-chip .dot { font-size: 1rem; }
.lp-chip .tag { font-size: .64rem; padding: .06rem .36rem; border-radius: 6px; text-transform: uppercase; font-weight: 800; }
.lp-chip .tag.local { background: #e7f3df; color: #4e7a35; }
.lp-chip .tag.cloud { background: #e3eefb; color: #3f6fb0; }

/* Comparatif graphique (section sombre) */
.lp-lead-c { text-align: center; max-width: 46em; margin: 0 auto 1.6rem; color: #c5b89f; }
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 760px) { .lp-compare { grid-template-columns: 1fr; } }
.cmp-card { background: #241c15; border: 1px solid #3a322a; border-radius: 14px; padding: 1rem; }
.cmp-head { display: flex; align-items: center; gap: .6rem; }
.cmp-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.cmp-id { flex: 1; min-width: 0; }
.cmp-model { font-family: var(--mono); font-weight: 700; }
.cmp-sub { font-size: .74rem; color: #b9a98f; }
.cmp-moral { text-align: right; }
.cmp-moral .v { font-family: var(--pixel); font-size: 1.9rem; color: #fff8ec; line-height: 1; }
.cmp-moral .k { font-size: .6rem; color: #8a7d6a; letter-spacing: .12em; text-transform: uppercase; }
.cmp-spark { width: 100%; height: 60px; display: block; margin: .6rem 0; }
.cmp-desc { font-size: .84rem; color: #cbbfa9; background: #2e2419; border: 1px solid #3a322a; border-radius: 10px; padding: .5rem .7rem; margin: 0; }
.cmp-stats { grid-column: 1 / -1; border-top: 1px solid #3a322a; padding-top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.cmp-row { display: grid; grid-template-columns: 44px 1fr 152px 1fr 44px; align-items: center; gap: .5rem; }
.cmp-v { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: #f0e6d4; }
.cmp-v.a { text-align: right; }
.cmp-lbl { text-align: center; font-size: .8rem; color: #b9a98f; white-space: nowrap; }
.cmp-bar { height: 8px; background: #3a322a; border-radius: 99px; overflow: hidden; }
.cmp-bar.left { display: flex; justify-content: flex-end; }
.cmp-bar i { display: block; height: 100%; border-radius: 99px; }
@media (max-width: 620px) { .cmp-row { grid-template-columns: 40px 1fr 40px; } .cmp-row .cmp-bar { display: none; } }

/* ============================================================
   LOGIN — split-screen (illustration + formulaire)
   ============================================================ */
.login-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
@media (max-width: 820px) { .login-split { grid-template-columns: 1fr; } .login-art { display: none; } }
.login-art {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem; gap: 1.2rem;
  background: radial-gradient(120% 120% at 30% 10%, #f6edd9, #e9f0dc 60%, #dfead0);
  overflow: hidden;
}
.login-circle {
  width: 300px; height: 300px; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fbf3e2, #efe4cb);
  box-shadow: 0 16px 40px rgba(90,70,30,.18), inset 0 0 0 6px rgba(255,255,255,.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.login-circle .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(#6fae4a, #5b9a3c); }
.login-circle .egg { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 2.6rem; }
.login-circle .crew { position: absolute; bottom: 28px; display: flex; gap: 8px; align-items: flex-end; }
.login-circle .crew img { width: 34px; image-rendering: pixelated; }
.login-circle .tree { position: absolute; bottom: 52px; right: 70px; font-size: 1.4rem; }
.login-art .art-title { font-family: var(--title); font-size: 1.6rem; font-weight: 800; margin: 0; }
.login-art .art-sub { color: var(--muted); max-width: 320px; text-align: center; margin: 0; }
.login-art .decor { position: absolute; font-size: 1.4rem; opacity: .85; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); }
.login-card { width: 100%; max-width: 370px; }
.login-step { font-family: var(--mono); font-size: .72rem; color: var(--muted-2); display: flex; align-items: center; gap: .4rem; }
.login-step .barseg { width: 26px; height: 4px; border-radius: 9px; background: var(--line); }
.login-step .barseg.on { background: var(--orange); }
.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .6; }
.input-icon input { padding-left: 32px; }
.demo-hint { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .5rem .7rem; font-size: .82rem; color: var(--muted); margin-top: .7rem; }
.auth-stats { display: flex; gap: 1.6rem; margin-top: 1.4rem; }
.auth-stats > div { display: flex; flex-direction: column; align-items: center; }
.auth-stats .v { font-family: var(--title); font-weight: 800; font-size: 1.3rem; color: var(--orange); }
.auth-stats .k { font-size: .72rem; color: var(--muted); }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--orange); font-weight: 700; font-size: .8rem; cursor: pointer; font-family: var(--ui); }

/* ============================================================
   NOUVELLE PARTIE — assistant + CHOIX DES FONDATEURS
   ============================================================ */
[x-cloak] { display: none !important; }
.px { image-rendering: pixelated; }

.founders-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.step-dots { display: flex; align-items: center; gap: .35rem; padding-top: .4rem; }
.step-dots .dot { width: 22px; height: 5px; border-radius: 9px; background: var(--line); transition: background .2s; }
.step-dots .dot.on { background: var(--orange); }
.step-dots .step-label { font-family: var(--mono); font-size: .74rem; color: var(--muted-2); margin-left: .5rem; }

.founders-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .founders-layout { grid-template-columns: 1fr; } }

/* Carte d'aperçu (gauche) */
.preview-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); position: sticky; top: 90px; }
.preview-avatar { position: relative; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 14px; height: 200px; display: grid; place-items: center; margin: .5rem 0 .9rem; overflow: hidden; }
.preview-avatar .badge { position: absolute; top: 10px; left: 10px; }
.preview-avatar img { height: 150px; width: auto; }
.preview-name { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-family: var(--title); font-size: 1.5rem; font-weight: 800; }
.preview-bio { color: var(--muted); margin: .5rem 0 .8rem; font-size: .92rem; }
.preview-empty { padding: 1.4rem 0; }
.preview-count { font-family: var(--mono); font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-2); padding-top: .7rem; }
.role-badge { display: inline-flex; align-items: center; padding: .14rem .55rem; border-radius: 99px; color: #fff; font-family: var(--ui); font-size: .72rem; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.18); }

/* Filtres + grille */
.filter-pills { display: flex; gap: .5rem; margin-bottom: 1rem; }
.fpill { font-family: var(--ui); font-weight: 800; font-size: .86rem; padding: .45rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; box-shadow: 0 2px 0 0 var(--line); }
.fpill:hover { filter: brightness(1.02); }
.fpill.on { background: var(--ink-2); color: var(--bg); border-color: var(--ink-2); box-shadow: 0 2px 0 0 #00000022; }

.founders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .8rem; }
.char-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: .8rem .5rem .7rem;
  cursor: pointer; font-family: var(--ui); transition: transform .05s, box-shadow .15s, background .15s; box-shadow: var(--shadow); }
.char-cell:hover { transform: translateY(-2px); }
.char-cell img { height: 76px; width: auto; }
.char-cell .char-name { font-weight: 800; color: var(--ink); font-size: .95rem; margin-top: .15rem; }
.char-cell.on { background: #eaf4e0; border-color: var(--green); }
.char-cell.dimmed { opacity: .5; }
.char-cell .check { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.2); }

/* Choix du dirigeant (président) — carte d'aperçu + grille (mêmes bases que fondateurs) */
.sub-head { font-family: var(--title); font-weight: 800; font-size: 1.1rem; margin: .2rem 0 .9rem; }
.sub-head .muted { font-family: var(--ui); font-weight: 600; font-size: .85rem; }
.pres-layout { margin-bottom: .6rem; }
.founders-grid.pres-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pres-card { padding-top: .9rem; }
.pres-card.on { background: #f3eef8; border-color: var(--purple); }
.pres-card .check { background: var(--purple); }
.char-cell .pres-portrait { height: 92px; }
.preview-avatar .pres-portrait { height: 170px; }
.stat-bars { margin-top: 1rem; }
.stat-bars .bar { margin-bottom: .7rem; }
/* Pastille dirigeant en jeu (mini portrait = tête détourée) */
.pres-tag { display: inline-flex; align-items: center; gap: .35rem; }
.pres-mini { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; object-position: 50% 14%;
  border: 1px solid var(--line-2); background: var(--card-2); }

/* Barre de navigation de l'assistant */
.wizard-nav { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 .4rem; }
.wizard-nav .spacer { flex: 1; }
.wizard-hint { font-size: .85rem; }

/* ============================================================
   RESPONSIVE MOBILE — header hamburger + ajustements
   ============================================================ */
.nav-burger { display: none; }
.tb-seg-mobile { display: none; }
img, svg, canvas { max-width: 100%; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto auto; gap: .5rem; padding: .5rem .8rem; position: relative; }
  .brand { font-size: 1.25rem; }
  .tb-seg-desktop { display: none; }
  .tb-center { display: flex; }                 /* re-montre le solde de crédits sur mobile */
  .credits-badge { font-size: .78rem; padding: .3rem .55rem; }
  .nav-burger { display: inline-grid; place-items: center; width: 40px; height: 38px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.25rem; cursor: pointer;
    box-shadow: 0 2px 0 0 var(--line); }
  .nav-burger:active { transform: translateY(1px); }
  /* la nav devient un menu déroulant plein-largeur sous l'en-tête */
  .tb-right { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: .5rem; padding: .8rem 1rem 1.1rem; background: var(--card);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); z-index: 40;
    max-height: calc(100vh - 58px); overflow-y: auto; }
  .tb-right.open { display: flex; }
  .tb-right .navtabs { flex-direction: column; align-items: stretch; gap: .15rem; }
  .tb-right .tab, .tb-right .btn { width: 100%; justify-content: flex-start; }
  .tb-right form { width: 100%; }
  .tb-seg-mobile { display: inline-flex; align-self: flex-start; }
  .tb-spacer { display: none; }
  .profile-menu { width: 100%; }
  .profile-trigger { width: 100%; justify-content: flex-start; }
  .profile-dropdown { position: static; box-shadow: none; border: 1px solid var(--line); min-width: 0; margin-top: .3rem; }
  .container { padding: 1rem; }
  .page-title { font-size: 1.7rem; }
}

/* Landing : nav d'ancrage masquée sur petit écran (les CTA suffisent) */
@media (max-width: 760px) {
  .lp-topbar { padding: .6rem 1rem; gap: .5rem; }
  .lp-nav { display: none; }
  .lp-wrap { padding: 1rem; }
  .lp-hero { padding: 1.4rem 0 1rem; }
  .lp-hero h1 { font-size: 2.1rem; }
  .lp-actions .btn { padding: .45rem .7rem; font-size: .82rem; }
  .lp-section, .lp-section.dark { padding: 1.8rem 0; }
  .lp-section.dark { padding: 1.8rem 1rem; border-radius: 0; }
  .lp-cta-av { display: none; }
}

/* Tables larges (backoffice) : défilement horizontal interne sur petit écran */
@media (max-width: 900px) {
  table.games { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   NOUVELLE PARTIE — cartes de config « onglet » + ajout de civ
   ============================================================ */
.civ-configs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.2rem; }
@media (max-width: 900px) { .civ-configs { grid-template-columns: 1fr; } }
.civ-config { padding-top: 0; position: relative; }
.cfg-tab { margin: -1.1rem -1.2rem 1rem; padding: .7rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--title); font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* Onglets de config par slot (0..3). */
.c-a .cfg-tab, .slot0 .cfg-tab { background: #e9f1fb; color: #2e5aa8; }
.c-b .cfg-tab, .slot1 .cfg-tab { background: #fbe9f1; color: #a83b6e; }
.slot2 .cfg-tab { background: #e3f2f8; color: #2e7d97; }
.slot3 .cfg-tab { background: #f9eccd; color: #9a6f18; }
/* Bouton « retirer cette civ » dans l'onglet. */
.civ-del { background: transparent; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
  color: inherit; opacity: .7; padding: .1rem .3rem; border-radius: 6px; }
.civ-del:hover { opacity: 1; background: #00000012; }
/* Carte « + Ajouter une civilisation » — désormais ACTIVE (Alpine). */
.civ-add { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.1rem; background: var(--card-2);
  color: var(--muted); text-align: center; cursor: pointer; min-height: 160px; transition: border-color .15s, background .15s; }
.civ-add:hover { border-color: var(--orange); background: #fbf2e6; }
.civ-add-plus { font-size: 1.7rem; font-weight: 800; color: var(--muted-2); line-height: 1; }
.civ-add-label { font-family: var(--title); font-weight: 800; color: var(--ink-2); }
.civ-add-hint { font-size: .78rem; }
/* Onglets de l'étape Fondateurs (1 par civ). */
.civ-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.civ-tab { font-family: var(--ui); font-weight: 800; font-size: .9rem; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); cursor: pointer; }
.civ-tab.on { color: var(--bg); border-color: var(--ink-2); background: var(--ink-2); box-shadow: 0 2px 0 0 #00000022; }
.civ-tab.on.slot0 { background: var(--green); border-color: var(--green); }
.civ-tab.on.slot1 { background: var(--pink); border-color: var(--pink); color: #3a2030; }
.civ-tab.on.slot2 { background: var(--slot2); border-color: var(--slot2); color: #07303c; }
.civ-tab.on.slot3 { background: var(--slot3); border-color: var(--slot3); color: #3a2a07; }

/* ============================================================
   PAGES D'ERREUR (404 / 500) — autonomes, plein écran
   ============================================================ */
.errpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.2rem; position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-grad-1), var(--bg)) fixed, var(--bg); }
.errpage .brand { font-size: 1.5rem; margin-bottom: 1.4rem; }
.errpage .decor { position: absolute; font-size: 1.5rem; opacity: .8; user-select: none; }
.err-num { font-family: var(--pixel); font-size: 5.2rem; line-height: 1; font-weight: 600; color: var(--orange);
  letter-spacing: .06em; margin: .3rem 0 .2rem; text-shadow: 0 3px 0 rgba(0,0,0,.08); }
.err-title { font-family: var(--title); font-size: 1.9rem; font-weight: 800; margin: 0 0 .5rem; }
.err-sub { color: var(--muted); max-width: 30em; margin: 0 auto 1.4rem; line-height: 1.55; }
.err-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.err-foot { margin-top: 1.6rem; font-family: var(--mono); font-size: .76rem; color: var(--muted-2); }
@media (max-width: 560px) { .err-num { font-size: 3.6rem; } .err-title { font-size: 1.4rem; } }

/* 404 : carte « scène » pixel (avatar perdu + bulle) */
.err-scene { position: relative; width: 230px; height: 150px; border-radius: 16px; margin-bottom: 1.6rem;
  background: repeating-linear-gradient(45deg, #cfe6bf 0 16px, #c6e0b4 16px 32px);
  border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; }
.err-scene img { width: 64px; image-rendering: pixelated; }
.err-bubble { position: absolute; top: 18px; right: -10px; background: rgba(255,255,255,.96); color: #1a2030;
  font-size: .8rem; font-weight: 700; padding: .25rem .55rem; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* 500 : thème sombre (réutilise body.mc) + œuf fêlé */
body.errdark { background: radial-gradient(1000px 560px at 50% -10%, #221a12, #181410) fixed, #181410; }
.egg-broken { position: relative; width: 92px; height: 116px; margin: 0 auto 1.1rem;
  background: radial-gradient(circle at 50% 38%, #fbf3e2, #e6d3a8); border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 -8px 14px rgba(120,90,40,.18); }
.egg-broken .crack { position: absolute; inset: 0; }
.egg-broken .eye { position: absolute; top: 44%; left: 50%; transform: translateX(-50%); font-family: var(--mono);
  font-weight: 700; color: #6b5836; font-size: 1.2rem; letter-spacing: .35rem; }
.err-status { font-family: var(--mono); font-size: .82rem; color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line-2); border-radius: 99px; padding: .35rem .8rem; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; }
.err-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(224,162,60,.6); animation: errpulse 1.4s infinite; }
@keyframes errpulse { 0% { box-shadow: 0 0 0 0 rgba(224,162,60,.55); } 70% { box-shadow: 0 0 0 8px rgba(224,162,60,0); } 100% { box-shadow: 0 0 0 0 rgba(224,162,60,0); } }

/* ============================================================
   LOT SÉCURITÉ / BACKOFFICE — ajouts
   ============================================================ */
/* Champs de formulaire complémentaires (cohérents avec input[type=text]) */
input[type=email], textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line);
  background: #fffdf8; color: var(--ink); font-size: .95rem; font-family: var(--ui);
}
textarea:focus, input[type=email]:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
input[type=color] { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; cursor: pointer; }
input[type=file] { font-family: var(--ui); font-size: .9rem; }

/* Grille de formulaire backoffice : 2 colonnes ≥ 720px, pleine largeur en dessous */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; }
@media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } }

/* Honeypot anti-bot : invisible et hors flux, jamais focusable visuellement */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none; }

/* A2 — pastille « tick live » (état de la simulation) — effet « verre » (glassmorphism) */
.tick-status { gap: .4rem; background: rgba(255,250,240,.55); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.6); }
body.world-fs .tick-status { background: rgba(36,28,21,.42); border-color: rgba(255,255,255,.16); }
.tick-status .tick-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.tick-status.live .tick-dot { background: var(--green); box-shadow: 0 0 0 0 rgba(91,140,62,.55); animation: tickpulse 1.6s infinite; }
.tick-status.live { color: #4e7a35; }
.tick-status.paused .tick-dot { background: #b9a06a; }
.tick-status.paused { color: #9a7426; }
.tick-status.finished .tick-dot { background: var(--muted-2); }
.tick-status.finished { color: var(--muted); }
@keyframes tickpulse { 0% { box-shadow: 0 0 0 0 rgba(91,140,62,.55); } 70% { box-shadow: 0 0 0 7px rgba(91,140,62,0); } 100% { box-shadow: 0 0 0 0 rgba(91,140,62,0); } }

/* Galerie d'avatars (backoffice) */
.avatar-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .7rem; }
.avatar-tile { margin: 0; text-align: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: .5rem; }
.avatar-tile.is-off { opacity: .45; }
.avatar-tile img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.avatar-tile figcaption { font-size: .76rem; margin-top: .25rem; line-height: 1.2; }

/* Cartes KPI des sources d'inscription */
.src-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 560px) { .src-cards { grid-template-columns: 1fr; } }
.src-kpi { text-align: center; padding: 1rem; }
.src-kpi .v { display: block; font-family: var(--title); font-weight: 800; font-size: 1.9rem; }
.src-kpi .k { color: var(--muted); font-size: .82rem; }
.events .tx { flex: 1; } .events .event { display: flex; gap: .5rem; align-items: center; }

/* Page « compte en attente de validation » */
.pending-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.pending-card { max-width: 480px; text-align: center; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 2rem 1.6rem; box-shadow: 0 20px 50px rgba(40,28,12,.12); }
.pending-egg { font-size: 2.6rem; }

/* Codes de secours 2FA */
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 460px) { .recovery-codes { grid-template-columns: 1fr; } }
.recovery-codes code { font-family: var(--mono); font-size: 1rem; letter-spacing: .06rem; text-align: center;
  background: var(--card-2); border: 1px dashed var(--line); border-radius: 8px; padding: .5rem; }

/* Bouton « Back to top » (apparaît au scroll) */
.back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(40,28,12,.22);
  display: none; align-items: center; justify-content: center; transition: transform .15s, opacity .2s; }
.back-to-top.show { display: inline-flex; }
.back-to-top:hover { transform: translateY(-2px); }
body.mc .back-to-top { background: var(--card); color: var(--ink); }

/* ============================================================
   DÉBAT IA (Labo + Négociation civilisation)
   ============================================================ */
.debat-lobby, .debat-live { display: grid; grid-template-columns: 380px 1fr; gap: 1rem; align-items: start; }
/* Négociation : la CONVERSATION (1re colonne) doit être plus large que l'état des civs. */
.debat-live.civ-layout { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 860px) { .debat-lobby, .debat-live, .debat-live.civ-layout { grid-template-columns: 1fr; } }
.debat-conv .debat-stream { max-height: 62vh; }
.debat-part { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; margin-top: .5rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.debat-ico { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.chip.debat-add { cursor: pointer; border: 1px solid var(--line); background: var(--card); }
.chip.debat-add:hover { border-color: var(--orange); }
.debat-start { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; margin-top: .4rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); cursor: pointer; }
.debat-start.on { border-color: var(--green); background: #eef6e6; }
.debat-conv { display: flex; flex-direction: column; min-height: 440px; }
.debat-topic { background: linear-gradient(180deg, #fbeed3, var(--card)); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .6rem; }
.debat-stream { flex: 1; overflow-y: auto; max-height: 56vh; display: flex; flex-direction: column; gap: .7rem; padding: .3rem; }
.debat-empty { margin: auto; text-align: center; color: var(--muted); }
.debat-msg { border-left: 3px solid var(--c, var(--line)); padding-left: .7rem; }
.debat-msg-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.debat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muted)); display: inline-block; }
.debat-bubble { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.debat-foot { display: flex; align-items: center; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); margin-top: .6rem; font-size: .85rem; }
.debat-accord { border: 1px dashed var(--green); background: #f1f7ea; border-radius: 12px; padding: .7rem .9rem; }
/* Posture assignée à un modèle (mode Lab) */
.stance-chip { font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: .08rem .45rem;
  border-radius: 999px;
  color: #4a3f36;                                                        /* repli lisible (contraste AA) */
  color: color-mix(in srgb, var(--c, #888) 42%, #2c2420);               /* teinté foncé sur navigateurs récents */
  background: rgba(140, 120, 100, .12);
  background: color-mix(in srgb, var(--c, #888) 16%, transparent);
  border: 1px solid rgba(140, 120, 100, .28);
  border: 1px solid color-mix(in srgb, var(--c, #888) 38%, transparent); }
/* Apparition d'un message (révélé au rythme de lecture) */
.debat-msg { animation: msgin .26s ease both; }
@keyframes msgin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* Indicateur « écrit… » (trois points qui rebondissent) */
.debat-typing .debat-bubble { display: flex; align-items: center; min-height: 1.6rem; }
.typing-dots { display: inline-flex; gap: .28rem; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted-2));
  opacity: .4; animation: typingdot 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes typingdot { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .debat-msg, .typing-dots span { animation: none; } }
/* Canal chiffré IA·IA : bandeau + bulle « machine » (glyphes braille) */
.cipher-banner { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .6rem;
  padding: .55rem .75rem; border-radius: 12px; font-size: .84rem; line-height: 1.35;
  color: #cfe3ef; background: #1e2733; border: 1px solid #2f3e4d;
  box-shadow: inset 0 0 0 1px rgba(90, 200, 250, .08); }
.cipher-banner .cipher-ico { font-size: 1.05rem; line-height: 1.25; }
.cipher-banner strong { color: #7fd1ff; }
.cipher-banner .muted { color: #8aa0b0; }
.cipher-tag { font-size: .72rem; opacity: .7; }
.debat-bubble.cipher { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em;
  color: #355f79; background: #eef4f8; border-color: #cfe0ea; line-height: 1.55;
  overflow-wrap: anywhere; user-select: none; animation: cipherflick 3.2s ease-in-out infinite; }
.debat-accord.cipher-accord { border-style: dashed; border-color: #9bb3c2; background: #eef3f7; }
@keyframes cipherflick { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .debat-bubble.cipher { animation: none; } }
/* Bascule détectée → séparateur dans le fil + style des messages du canal chiffré */
.msg-wrap { display: flex; flex-direction: column; gap: .5rem; }
.cipher-divider { display: flex; align-items: center; gap: .6rem; margin: .2rem 0;
  color: #5b7186; font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.cipher-divider::before, .cipher-divider::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #9bb3c2, transparent); }
.cipher-divider span { white-space: nowrap; }
.enc-msg .debat-bubble:not(.cipher) { border-style: dashed; }   /* message déchiffré du canal IA·IA */
/* Bannières VS (négociation) */
.civ-vs { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; }
.civ-banner-card { flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; }
.civ-vs-sep { align-self: center; font-family: var(--title); font-weight: 800; color: var(--muted); }
@media (max-width: 560px) { .civ-vs-sep { width: 100%; text-align: center; } }

/* ============================================================
   TERRARIUM — barre de contrôle (recherche / filtres / tri / vue)
   ============================================================ */
.terra-controls { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.terra-search { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .15rem .6rem; }
.terra-search input { border: none; background: none; outline: none; flex: 1; padding: .45rem 0; font: inherit; color: var(--ink); }
.terra-filterchips { display: flex; gap: .3rem; flex-wrap: wrap; }
.chipf { border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
  border-radius: 999px; padding: .35rem .7rem; font: inherit; font-size: .82rem; font-weight: 700; }
.chipf b { color: var(--ink); margin-left: .2rem; }
.chipf.on { background: var(--ink-2); color: var(--bg); border-color: var(--ink-2); }
.chipf.on b { color: var(--bg); }
.terra-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.viewtoggle button { border: none; background: var(--card); color: var(--muted); cursor: pointer; padding: .4rem .6rem; font-size: 1rem; }
.viewtoggle button.on { background: var(--ink-2); color: var(--bg); }
.terra-civs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.terra-civ { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .55rem; }
.terra-civ .ico { font-size: 1.1rem; }
.terra-civ .nm { font-family: var(--mono); font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terra-civs .vs { font-family: var(--title); font-weight: 800; color: var(--muted); font-size: .8rem; }
.terra-tablewrap { overflow-x: auto; }
@media (max-width: 620px) { .terra-right { margin-left: 0; width: 100%; justify-content: space-between; } }

/* Alerte « communauté éteinte » (remplace l'ancien texte rouge brut) */
.extinct-alert { display: flex; flex-direction: column; gap: .15rem; background: #f6dcd6;
  border: 1px solid #ecc4ba; color: #b1483c; border-radius: 10px; padding: .5rem .7rem;
  margin: .3rem 0 .6rem; font-size: .85rem; font-weight: 700; }
.extinct-alert span { font-weight: 500; opacity: .9; font-size: .8rem; }

/* Bandeau « négociation » sur Le Duel (issue des pourparlers) */
.nego-card { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: #fdeef4; border: 1px solid #f0d2df; border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; }
.nego-card .nego-accord { flex: 1; min-width: 200px; font-size: .86rem; color: var(--muted); }
.nego-card .nego-accord strong { color: var(--ink); }

/* ============================================================
   BACKOFFICE — refonte UX (création compte, actions, modale de
   gestion, logs, serveur Ollama, SMTP fusionné). Mobile-first.
   ============================================================ */
input[type=url] {
  width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line);
  background: #fffdf8; color: var(--ink); font-size: .95rem; font-family: var(--ui);
}
input[type=url]:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

/* Utilitaires */
.ta-right { text-align: right; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-divider { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }

/* --- Panneau « Créer un utilisateur » (repliable) --- */
.uc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--title); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.uc-head-t { display: flex; align-items: center; gap: .4rem; }
.uc-chev { transition: transform .2s ease; color: var(--muted); font-size: 1rem; }
.uc-chev.on { transform: rotate(180deg); }
.uc-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 1rem; }
.uc-form .form-row { margin-bottom: 0; }
.uc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1rem; }
.uc-toggles { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .uc-grid { grid-template-columns: 1fr; }
  .uc-foot { flex-direction: column; align-items: stretch; }
  .uc-submit { width: 100%; }
}

/* --- Colonne Actions condensée du tableau utilisateurs --- */
.users-table td.ta-right, .users-table th.ta-right { white-space: nowrap; }
.row-actions { display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-end; }
.row-actions .btn { min-height: 34px; }

/* --- Modale de gestion d'un utilisateur --- */
.manage-box { max-width: 440px; text-align: left; }
.manage-head { margin: 0 2rem .4rem 0; }
.manage-head h3 { font-size: 1.3rem; word-break: break-word; }
.manage-badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }
.manage-sec { padding: .85rem 0; border-top: 1px solid var(--line-2); }
.manage-sec:first-of-type { border-top: none; }
.manage-lbl { display: block; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin-bottom: .5rem; }
.manage-inline { display: flex; gap: .5rem; align-items: center; }
.manage-inline input { flex: 1; min-width: 0; }
.manage-inline .btn { white-space: nowrap; }
.manage-toggle { margin-top: .55rem; }
.btn-block { width: 100%; justify-content: center; }
.manage-danger { border-top: 1px solid #ecc4ba; margin-top: .3rem; }
.manage-danger .manage-lbl { color: #b1483c; }
.manage-confirm { background: #f9e3dc; border: 1px solid #ecc4ba; border-radius: 10px; padding: .7rem .8rem; }
.manage-confirm p { margin: 0 0 .6rem; font-size: .9rem; color: #7a3b28; }
.manage-confirm-row { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

/* --- Onglet Logs --- */
.logs-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.logs-filter .seg { min-height: 32px; }
.log-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center;
  padding: .5rem .2rem; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.log-row:last-child { border-bottom: none; }
.log-row.is-fail { color: var(--red); }
.log-ico { font-size: .95rem; }
.log-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-ip { font-size: .8rem; }
.log-time { font-size: .76rem; }
@media (max-width: 620px) {
  .log-row { grid-template-columns: auto 1fr; row-gap: .2rem; }
  .log-ip { grid-column: 2; }
  .log-time { grid-column: 2; }
}

/* --- Serveur Ollama (Débats IA) --- */
.ollama-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.ollama-save { white-space: nowrap; }
@media (max-width: 560px) {
  .ollama-form { align-items: stretch; }
  .ollama-save { width: 100%; }
}

/* --- SMTP (config + test fusionnés) --- */
.smtp-switches { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .8rem 0 1rem; }
.smtp-test-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.smtp-test-form input { flex: 1; min-width: 220px; }
@media (max-width: 560px) {
  .smtp-test-form input { min-width: 0; width: 100%; }
  .smtp-test-form .btn { width: 100%; }
}