:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --txt:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;

  --primary:#2563eb;
  --primary-soft:#eef2ff;

  --brand:#0b2a72;
  --brand-2:#0a255f;

  --warn:#facc15;
  --danger:#ef4444;

  --green:#16a34a;
  --green-soft: rgba(22,163,74,.10);

  --radius:16px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);

  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;

  /* mis à jour par JS */
  --nav-h: 90px;

  /* padding extra au bas de chaque section */
  --page-bottom-pad: 28px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* IMPORTANT: laisse de la place au footer partout */
  padding-bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));
}

h1,h2,h3,h4{ margin:0 0 8px; }
p{ margin:0 0 8px; }
ul{ margin:8px 0; padding-left:18px; }
li{ margin:6px 0; }

pre{
  margin:0;
  font-family:inherit;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ================= TOP BAR ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brandText{ min-width:0; }

.brand h1{
  font-size:16px;
  line-height:1.2;
  letter-spacing:.2px;
}

.brand p{
  font-size:12px;
  color:var(--muted);
}

.brand-dark{
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-soft);
}

.brand-dark p{ color:rgba(255,255,255,.82); }

.logoBox{
  height:38px;
  width:72px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  flex:0 0 auto;
}

.logoBox img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Toggle (fond jaune demandé) */
.toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px;
}

.toggle-yellow{
  background: #FEF08A; /* jaune visible */
  border-color: rgba(15,23,42,.12);
}

.toggle button{
  border:none;
  background:transparent;
  padding:10px;
  border-radius:999px;
  font-weight:950;
  font-size:13px;
  color:#1f2937;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease, color .12s ease, box-shadow .12s ease, filter .12s ease;
}

.toggle button:active{ transform:scale(.99); }

.toggle button.active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  border:1px solid rgba(15,23,42,.10);
}

@media (min-width: 860px){
  .topbar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .toggle{ width:340px; }
}

/* ================= MAIN ================= */
main{
  padding:14px 14px 18px;
  max-width: 980px;
  margin: 0 auto;
}

/* Important: padding en bas dans chaque page pour “voir le bas” */
.page{
  display:none;
  padding-bottom: calc(var(--nav-h) + var(--page-bottom-pad));
}
.page.active{ display:block; }

/* ================= CARDS ================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:14px;
}

.card.highlight{
  background:var(--primary-soft);
  border:2px solid rgba(37,99,235,.35);
  box-shadow:0 14px 36px rgba(37,99,235,.10);
}

.muted{ color: var(--muted); }

.grid2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:720px){
  .grid2{ grid-template-columns:1fr 1fr; }
}

.miniCard{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

.card h2{ font-size:18px; }
.card h3{ font-size:16px; }
.card h4{ font-size:13px; color:var(--muted); }

.context{
  font-size:12px;
  color:var(--muted);
  background:#f1f5f9;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
}

.callout{
  margin-top:10px;
  padding:12px;
  background:#f1f5f9;
  border:1px solid var(--border);
  border-left:4px solid var(--primary);
  border-radius:12px;
  font-size:14px;
  line-height:1.45;
}

.flow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.flow span{
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(37,99,235,.18);
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:950;
}

/* scripts */
.script{
  background:#f8fafc;
  border:1px dashed rgba(15,23,42,.18);
  border-radius:14px;
  padding:12px;
  font-size:14px;
  line-height:1.5;
}

/* ================= ACTIONS + BUTTONS ================= */
.actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.actions > button{ flex:1 1 140px; }

button{ font-family:inherit; cursor:pointer; }

.copy, .fav, .del{
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.copy{
  background:linear-gradient(180deg, #2f6bff, var(--primary));
  color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}
.copy:active{ transform:scale(.99); }

.fav{
  background:linear-gradient(180deg, #ffe58a, var(--warn));
  color:#111827;
  box-shadow:0 10px 18px rgba(250,204,21,.20);
}
.fav:active{ transform:scale(.99); }

.del{
  width:100%;
  background:#fee2e2;
  color:var(--danger);
  border:1px solid rgba(239,68,68,.18);
  padding:10px 12px;
  font-weight:950;
}
.del:active{ transform:scale(.99); }

button:focus-visible,
a:focus-visible{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
  border-radius:12px;
}

/* ================= FAVORIS ================= */
#favContainer .card{ padding:12px; }
#favContainer pre{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  font-size:14px;
  line-height:1.45;
}

/* ================= BOTTOM NAV (scrollable) ================= */
.bottomNav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--border);
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
}

.bottomNavInner{
  display:flex;
  gap:10px;
  align-items:stretch;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x mandatory;
  padding-bottom:2px;
}

.bottomNavInner::-webkit-scrollbar{ height:8px; }
.bottomNavInner::-webkit-scrollbar-thumb{
  background:#e5e7eb;
  border-radius:999px;
}

.bottomNav button,
.bottomNav .navLink{
  scroll-snap-align:start;
  min-width:92px;
  flex:0 0 auto;

  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 10px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:11px;
  color:var(--muted);
  text-decoration:none;
  user-select:none;

  box-shadow:0 10px 20px rgba(15,23,42,.06);
  transition:transform .10s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}

.bottomNav button:hover,
.bottomNav .navLink:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(15,23,42,.08);
}

.bottomNav button.active{
  color:#0f172a;
  border-color:rgba(15,23,42,.18);
  background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  box-shadow:0 0 0 3px rgba(15,23,42,.06), 0 14px 26px rgba(15,23,42,.08);
  font-weight:950;
}

.bottomNav .navLink{ color:#0f172a; }

.bottomNav .navLinkRDV{
  border-color:rgba(22,163,74,.30);
  background:linear-gradient(180deg, rgba(22,163,74,.18), rgba(22,163,74,.08));
  color:#064e3b;
}
.bottomNav .navLinkRDV:hover{ filter:brightness(1.02); }

@media (min-width: 900px){
  .bottomNav{
    max-width:980px;
    margin:0 auto;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    border-top-left-radius:18px;
    border-top-right-radius:18px;
  }
}

/* ================= TOAST ================= */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--nav-h) + 18px);
  transform:translateX(-50%);
  z-index:999;

  background:rgba(15,23,42,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;

  display:none;
  box-shadow:0 16px 40px rgba(15,23,42,.22);
  max-width:min(92vw, 520px);
  text-align:center;
}
.toast.show{ display:block; }