:root{
  --bg:#e8f3ff; --bg2:#e6f9ff; --card:#f7fbff; --text:#0f172a; --muted:#475569; --line:#cfe1ff;
  --primary:#0ea5e9; --primary-strong:#0284c7; --accent:#8b5cf6; --shadow: 0 12px 34px rgba(2,132,199,.18);
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --vio:#7c3aed; --idle:#64748b;
  --sos-grad: linear-gradient(135deg, #ff6a3d, #ff0033);
  --sos-btn: #ff4d4f;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1400px 700px at -10% -10%, var(--bg2), transparent),
    radial-gradient(1400px 700px at 110% 20%, #dff6ff, transparent),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.app-header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.logo{ width:44px; height:44px; border-radius:12px; box-shadow: var(--shadow); }
.brand h1{ margin:0; letter-spacing:.5px; font-size:28px; }
.slogan{ margin:2px 0 0; color:var(--muted); }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.plan-status{ padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: linear-gradient(90deg, rgba(14,165,233,.12), rgba(139,92,246,.12)); color:#0b213a; font-weight:700; }

.tabs{ display:flex; gap:6px; padding:8px 12px; justify-content:center; border-bottom:1px solid var(--line); background: linear-gradient(90deg, rgba(14,165,233,.10), rgba(139,92,246,.10)); position:sticky; top:72px; z-index:9; flex-wrap:wrap; }
.tab{ background: #e6f4ff; border:1px solid var(--line); color:#0b213a; padding:10px 14px; border-radius:999px; cursor:pointer; }
.tab.active{ background: linear-gradient(90deg, rgba(14,165,233,.2), rgba(139,92,246,.2)); border-color: var(--primary-strong); }

.ticker{ --ticker-speed:24s; position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: linear-gradient(90deg, rgba(14,165,233,.10), rgba(139,92,246,.10)); }
.ticker__track{ display:inline-flex; align-items:center; gap:40px; white-space:nowrap; padding:10px 0; animation: ticker-marquee var(--ticker-speed) linear infinite; }
.ticker__item{ font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#0b213a; }
@keyframes ticker-marquee{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }
.ticker:hover .ticker__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

.container{ padding:24px; max-width:1100px; margin:0 auto; }
.pane{ display:none; }
.pane.active{ display:block; }

.card{ background: var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow: var(--shadow); }
.hero{ text-align:center; }
.row{ display:flex; gap:10px; align-items:center; }
.wrap{ flex-wrap:wrap; }
.input{ background:#eef7ff; border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:12px; outline:none; }
.input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.25); }

.btn{ background:#e6f4ff; border:1px solid var(--line); color:#0b213a; padding:10px 14px; border-radius:12px; cursor:pointer; transition:.2s transform ease, .2s box-shadow ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary{ background: linear-gradient(90deg, var(--primary), var(--accent)); border:1px solid var(--primary-strong); color:white; }
.btn.big{ padding:12px 18px; font-size:18px; }
.btn.ghost{ background: transparent; border-color: var(--line); color:#3a5e82; }
.btn.outline{ background: white; border-color: var(--primary-strong); color: #0b213a; }
.btn.strong{ background: var(--sos-btn); color:#fff; border:1px solid #d9363e; }

.tip{ color:var(--muted); }
.result{ margin-top:16px; font-size:16px; color:#0b213a; }

.weather-output{ margin-top:10px; color:var(--muted); min-height:42px; }
.weather-flex{ display:flex; align-items:center; gap:12px; }
.weather-flex img{ width:64px; height:64px; }

.items{ list-style:none; padding:0; margin:12px 0; }
.items li{ display:flex; align-items:center; justify-content:space-between; background: #edf6ff; padding:10px 12px; border-radius:10px; margin-bottom:8px; border:1px solid var(--line); }
.items .left{ display:flex; align-items:center; gap:10px; }
.items input[type="checkbox"]{ transform: scale(1.2); margin-right:8px; }
.items .remove{ cursor:pointer; border:0; background:transparent; color:#d14b4b; }

.agenda-form{ display:grid; grid-template-columns: repeat(6,1fr); gap:8px; margin-bottom:10px; }
.agenda-actions{ display:flex; gap:10px; margin-bottom:8px; }
.agenda-list{ display:flex; flex-direction:column; gap:10px; max-height:360px; overflow:auto; }
.event{ display:flex; gap:10px; align-items:flex-start; background: #edf6ff; border:1px solid var(--line); border-radius:12px; padding:10px; }
.event .color{ width:8px; border-radius:4px; align-self:stretch; background: linear-gradient(var(--primary), var(--accent)); opacity:.9; }
.event .meta{ font-size:12px; color:var(--muted); }
.event .actions{ margin-left:auto; display:flex; gap:8px; }
.event .tag{ font-size:11px; padding:2px 6px; border-radius:10px; background: #e7f4ff; border:1px solid var(--line); color:#0b213a; }

/* Health */
.tag{ font-size:12px; padding:4px 8px; border-radius:999px; background:#e0f2ff; border:1px solid var(--line); color:#0b213a; }
.breath{ margin-top:12px; }
.breath-circle{ width:120px; height:120px; border-radius:60px; display:flex; align-items:center; justify-content:center; margin:10px 0; color:#fff; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: var(--shadow); }
.health-lists{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.list-card{ background:#edf6ff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.bullet{ margin:6px 0 0; padding-left:18px; }
.bullet li{ margin-bottom:6px; }
.bullet li button{ margin-left:8px; }

/* SOS */
.sos-theme{
  background: var(--sos-grad);
  color:#fff;
  border:1px solid #ffb3a7;
}
.sos-theme .caption.light{ color:#ffefef; }
.sos-header{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sos-icon{ width:40px; height:40px; border-radius:10px; background:#fff3; padding:4px; box-shadow: 0 6px 18px rgba(255,0,0,.35); }

.sos-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width: 900px){ .sos-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Transport traffic */
.traffic{ margin-top:14px; }
.transport-actions .btn{ white-space:nowrap; }
.traffic-table{ width:100%; border-collapse: collapse; background:#ffffff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.traffic-table th, .traffic-table td{ padding:10px; border-bottom:1px solid var(--line); text-align:left; }
.traffic-table th{ background:#eef7ff; }
.status{ display:inline-block; padding:4px 8px; border-radius:999px; font-weight:700; color:#fff; }
.status-fluide{ background: var(--ok); }
.status-ral{ background: var(--warn); }
.status-bouchon{ background: var(--bad); }
.status-accident{ background: var(--vio); }
.status-panne{ background: var(--idle); }

/* Emergency grid */
.emergency-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width: 800px){ .emergency-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Plans modal */
dialog{ border:none; border-radius:16px; padding:0; background: transparent; }
.plans{ background: #ffffff; border:1px solid var(--line); border-radius:16px; padding:16px; min-width: 780px; box-shadow: var(--shadow); }
.plans-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:8px; }
.plan-card{ background: #edf6ff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.plan-card h4{ margin:6px 0 8px; }
.plan-card ul{ margin:0; padding-left:18px; color:#475569; }
.plan-card .row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pay-config{ display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.qr-wrap{ display:flex; align-items:center; gap:12px; margin:8px 0 4px; }
.qr-wrap img{ width:120px; height:120px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.donate{ margin:10px 0; padding:10px; background:#edf6ff; border:1px solid var(--line); border-radius:12px; }
.donate h4{ margin:6px 0 8px; color:#0b213a; }

@media (max-width: 1000px){
  .plans{ min-width: unset; width: calc(100vw - 24px); }
  .agenda-form{ grid-template-columns: repeat(2,1fr); }
  .health-lists{ grid-template-columns:1fr; }
}

.brand-img{ max-width:520px; height:auto; display:block; }
.app-header{ align-items:center; gap:16px; }
.brand .slogan{ margin-top:6px; font-weight:600;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Header brand fix */
.app-header{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 12px;gap:6px}
.brand-img{max-width:520px;height:auto;display:block}
.slogan{margin-top:6px;font-size:1.2rem;font-weight:600;text-align:center;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* Header left placement */
.app-header{
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
  z-index: 20;
}
.brand-img{ max-width: 360px; height:auto; display:block }
.slogan{ margin: 0; font-size: 0.95rem; font-weight: 600;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 640px){
  .brand-img{ max-width: 260px }
}

/* Slogan badge under the logo */
.slogan-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(14,165,233,0.7), rgba(139,92,246,0.7));
  font-size:0.9rem;
  font-weight:600;
  color:#fff;
  margin-top:6px;
  text-align:center;
  backdrop-filter: saturate(120%) blur(1px);
}


/* SOS grid & buttons */
.sos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px}
.btn-sos{padding:10px 12px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(90deg, #ef4444, #f59e0b); color:#fff; font-weight:600}
.btn-sos:hover{opacity:.95; transform: translateY(-1px)}


/* Stats */
.stats-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.stats-actions input{padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:8px}
.chart-wrap{background:rgba(0,0,0,.03);border-radius:12px;padding:8px;margin:8px 0}
.stats-table table{width:100%;border-collapse:collapse;margin-top:8px}
.stats-table th,.stats-table td{border-bottom:1px solid rgba(0,0,0,.08);padding:8px;text-align:left}


/* Loisirs */
#loisirs .error{ color:#ef4444; margin-top:8px }


/* Santé – Fièvre */
.fever-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.fever-row{display:flex;flex-direction:column;gap:6px}
.fever-row input,.fever-row select{padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:10px}
.fever-result{margin-top:8px;font-weight:800;padding:8px 12px;border-radius:10px}
.fever-result.ok{background:rgba(16,185,129,.12);color:#065f46}
.fever-result.warn{background:rgba(245,158,11,.12);color:#7c2d12}
.fever-result.danger{background:rgba(239,68,68,.12);color:#7f1d1d}
.fever-tips ul{margin:6px 0 0 18px}
@media (max-width:760px){
  .fever-form{grid-template-columns:1fr}
}


/* Modal Fever */
.modal.hidden{ display:none }
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-content{
  width:min(720px, 92vw); background:#fff; border-radius:16px; padding:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.modal-close{ background:transparent; border:0; font-size:18px; cursor:pointer }
.sante-tools{ margin-top:8px }
.fever-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.error{ color:#ef4444 }




/* Stats pie layout improvement */
#stats .chart-wrap{ display:flex; align-items:center; justify-content:center }
#stats canvas{ max-width: 560px; }


/* Espace Abonné */
.subtabs{ display:flex; gap:8px; margin:8px 0 14px 0; flex-wrap:wrap }
.btn.small{ padding:8px 10px; font-size:14px }
.subt-active{ border-color: var(--primary-strong); box-shadow: 0 0 0 2px rgba(14,165,233,.15) inset }

.panel{ margin-top:8px }
.muted{ color: var(--muted); font-size:14px }

.plans{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:10px 0 14px 0 }
.plan-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:8px }
.plan-card.featured{ border-color: var(--primary-strong) }
.plan-card.picked{ outline: 2px solid var(--primary-strong) }
.plan-title{ font-weight:700; font-size:18px }
.plan-price{ font-size:22px; font-weight:800 }
.plan-price .per{ font-size:14px; font-weight:500; color: var(--muted) }
.plan-features{ margin:0; padding-left:18px; color:#0b213a }
.plan-features li{ margin:4px 0 }

.signup-form .row .input{ min-width: 200px }

@media (max-width: 900px){
  .plans{ grid-template-columns: 1fr; }
}