/* ===== Permis Côtier — styles (mobile-first, iOS-friendly) ===== */
:root{
  --bg:#eef3f7; --card:#ffffff; --ink:#15212e; --muted:#5b6675;
  --line:#d8e0e8; --brand:#0f5e8c; --brand2:#1d6fb8;
  --accent:#e76f00; --danger:#d62828; --ok:#1b9e4b;
  --shadow:0 1px 3px rgba(20,40,60,.10),0 6px 18px rgba(20,40,60,.06);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --tabh:64px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c1620; --card:#152230; --ink:#e8eef4; --muted:#9fb0c0;
    --line:#26384a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---- top bar ---- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(var(--safe-top) + 10px) 14px 10px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.logo{font-size:22px}
.brandtext{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.brandtext b{font-size:17px;letter-spacing:.2px}
.brandtext small{font-size:11px;opacity:.85}
.sos-btn{
  background:var(--danger);color:#fff;font-weight:800;letter-spacing:1px;
  padding:9px 14px;border-radius:12px;font-size:14px;
  box-shadow:0 2px 8px rgba(214,40,40,.5);
}
.sos-btn:active{transform:scale(.96)}

/* ---- main view ---- */
.view{
  padding:14px 14px calc(var(--tabh) + var(--safe-bot) + 16px);
  max-width:680px;margin:0 auto;
  animation:fade .25s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page-title{font-size:22px;margin:4px 2px 14px;display:flex;align-items:center;gap:10px}
.page-title .em{font-size:26px}
.lead{color:var(--muted);margin:-8px 2px 16px;font-size:14px}

/* ---- home grid ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.topic{
  background:var(--card);border-radius:18px;padding:16px 14px;text-align:left;
  box-shadow:var(--shadow);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;min-height:118px;justify-content:flex-start;
  position:relative;overflow:hidden;
}
.topic:active{transform:scale(.98)}
.topic .ic{font-size:30px}
.topic b{font-size:16px;line-height:1.15}
.topic small{color:var(--muted);font-size:12px;line-height:1.25}
.topic .bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}

.hero{
  background:linear-gradient(135deg,#0f5e8c,#1d6fb8);color:#fff;border:none;
  border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
}
.hero .big{font-size:34px}
.hero b{font-size:17px}
.hero small{opacity:.9;font-size:13px;display:block;margin-top:2px}

/* ---- cards / fiches ---- */
.card{
  background:var(--card);border-radius:16px;padding:16px;margin-bottom:12px;
  box-shadow:var(--shadow);border:1px solid var(--line);
}
.card h3{margin:0 0 8px;font-size:16px;display:flex;gap:8px;align-items:flex-start}
.card p{margin:8px 0;line-height:1.5;font-size:15px}
.card ul,.card ol{margin:8px 0;padding-left:22px;line-height:1.55;font-size:15px}
.card li{margin:4px 0}
.card ul.check{list-style:none;padding-left:2px}
.card ul.check li{position:relative;padding-left:26px}
.card ul.check li::before{content:"✔";position:absolute;left:0;color:var(--ok);font-weight:800}
.card table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.card th,.card td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.card th{background:rgba(29,111,184,.10);font-weight:700}
.tip{background:rgba(27,158,75,.12);border-left:4px solid var(--ok);padding:9px 12px;border-radius:8px}
.warn{background:rgba(214,40,40,.10);border-left:4px solid var(--danger);padding:9px 12px;border-radius:8px}
.key{background:rgba(231,111,0,.12);border-left:4px solid var(--accent);padding:9px 12px;border-radius:8px;font-weight:600}
.script{background:rgba(29,111,184,.08);border:1px dashed var(--brand2);border-radius:10px;padding:12px;font-size:14px;line-height:1.7}

/* balisage SVG */
.buoyrow{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:8px 0 4px}
.buoyrow figure{margin:0;text-align:center}
.buoyrow figcaption{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.2}
svg.buoy{width:74px;height:auto;display:block;margin:0 auto}
svg.diagram{width:min(260px,80%);height:auto;display:block;margin:6px auto 12px}

/* back link */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--brand2);font-weight:600;
  font-size:15px;margin:0 0 12px;padding:6px 2px}

/* ---- quiz ---- */
.quizwrap{display:flex;flex-direction:column;gap:14px}
.qmeta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
.qbar{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0 2px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#3fc26b);transition:width .3s}
.qcard{background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.qtext{font-size:17px;font-weight:600;line-height:1.4;margin:4px 0 14px}
.choice{
  display:block;width:100%;text-align:left;background:var(--bg);border:2px solid var(--line);
  border-radius:13px;padding:14px 16px;margin:9px 0;font-size:15px;line-height:1.35;transition:.15s;
}
.choice:active{transform:scale(.99)}
.choice.correct{border-color:var(--ok);background:rgba(27,158,75,.15);font-weight:600}
.choice.wrong{border-color:var(--danger);background:rgba(214,40,40,.12)}
.choice[disabled]{opacity:1}
.explain{margin-top:12px;font-size:14px;line-height:1.5;background:rgba(29,111,184,.08);
  border-radius:10px;padding:12px;border-left:4px solid var(--brand2)}
.next{display:block;width:100%;margin-top:16px;background:var(--brand);color:#fff;font-weight:700;
  font-size:16px;padding:15px;border-radius:14px;box-shadow:var(--shadow)}
.next:active{transform:scale(.99)}
.score{font-size:54px;font-weight:800;text-align:center;margin:10px 0 0}
.scoremsg{text-align:center;color:var(--muted);margin:4px 0 18px}

/* ---- SOS page ---- */
.sos-hero{background:linear-gradient(135deg,#b51d1d,#d62828);color:#fff;border-radius:18px;
  padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.sos-hero h2{margin:0 0 4px;font-size:20px}
.sos-hero p{margin:0;opacity:.92;font-size:14px}
.callrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.callbtn{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:var(--shadow);text-align:center;color:var(--ink)}
.callbtn .num{font-size:30px;font-weight:800;color:var(--danger);line-height:1}
.callbtn small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.callbtn.vhf .num{color:var(--brand)}

footer.note{color:var(--muted);font-size:12px;text-align:center;padding:18px 6px 4px;line-height:1.5}

/* ---- bottom tab bar ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + var(--safe-bot));
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);
  font-size:11px;font-weight:600;padding:4px 16px;border-radius:12px}
.tab span{font-size:21px;line-height:1}
.tab.active{color:var(--brand)}
@media (prefers-color-scheme:dark){.tab.active{color:#5fb0e8}}