/* Terrain Sûr — barre d'onglets flottante */
:root{
  --tb-ink:#1E1B16;
  --tb-paper:#F6F0E4;
  --tb-orange:#E07A1F;
  --tb-gold:#D4A72C;
  --tb-green:#2F7D4A;
  --tb-glass:rgba(30,27,22,.72);
  --tb-edge:rgba(246,240,228,.14);
  --tb-text:rgba(246,240,228,.78);
  --tb-h:64px;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --tb-glass:rgba(30,27,22,.82);
  }
}

/* espace réservé en bas de page pour ne rien masquer */
body.has-tabbar{padding-bottom:calc(var(--tb-h) + 32px + env(safe-area-inset-bottom))}

/* ---------- écrans : un seul visible à la fois ---------- */
body[data-scr="accueil"]  main > [data-screen]:not([data-screen="accueil"]),
body[data-scr="actu"]     main > [data-screen]:not([data-screen="actu"]),
body[data-scr="video"]    main > [data-screen]:not([data-screen="video"]),
body[data-scr="communes"] main > [data-screen]:not([data-screen="communes"]),
body[data-scr="avis"]     main > [data-screen]:not([data-screen="avis"]){display:none}
/* le premier bloc de chaque écran colle au haut de la page */
body.has-screens main > [data-screen].scr-first{margin-top:28px}
body[data-scr="video"] .foot,body[data-scr="video"] .kitaband{display:none}
html.scr-video,html.scr-video body{overflow:hidden;overscroll-behavior:none}
/* transition d'écran : léger glissement dans le sens de l'onglet */
@keyframes scrIn{from{opacity:0;transform:translateX(var(--scr-dx,0))}to{opacity:1;transform:none}}
body.scr-anim main > [data-screen]:not(.reels){animation:scrIn .34s cubic-bezier(.2,.9,.25,1) both}
/* lien actif de l'en-tête (ordinateur) */
.nav .links a[aria-current="page"]{background:var(--contour);box-shadow:inset 0 -2px 0 var(--orange)}
/* bouton Aide de l'en-tête (téléphone) */
.ts-help{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  place-items:center;cursor:pointer;margin-right:4px;-webkit-tap-highlight-color:transparent}
.ts-help svg{width:22px;height:22px}
.ts-help:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:899px){.ts-help{display:grid}body.has-screens .nav .links a.cta{display:none}}

.ts-dock{
  position:fixed;left:0;right:0;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:900;
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:0 14px;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.15),opacity .3s;
}
.ts-dock.is-hidden{transform:translateY(calc(100% + 24px));opacity:0}

.ts-tabbar,.ts-fab{
  pointer-events:auto;
  background:var(--tb-glass);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--tb-edge);
  box-shadow:
    0 18px 40px -12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.ts-tabbar{
  position:relative;
  flex:1;max-width:420px;height:var(--tb-h);
  border-radius:999px;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:5px;
}

/* capsule active qui glisse d'un onglet à l'autre */
.ts-pill{
  position:absolute;top:5px;bottom:5px;left:5px;
  width:calc((100% - 10px) / 4);
  border-radius:999px;
  background:
    radial-gradient(120% 140% at 30% 0%,rgba(224,122,31,.38),transparent 60%),
    rgba(246,240,228,.08);
  border:1px solid rgba(224,122,31,.35);
  box-shadow:0 0 22px -4px rgba(224,122,31,.45);
  transition:transform .5s cubic-bezier(.2,.9,.25,1.2);
  overflow:hidden;
}
/* fil kita discret sous la capsule */
.ts-pill::after{
  content:"";position:absolute;left:22%;right:22%;bottom:4px;height:3px;border-radius:2px;
  background:repeating-linear-gradient(90deg,
    var(--tb-orange) 0 6px,var(--tb-gold) 6px 9px,var(--tb-green) 9px 15px,var(--tb-paper) 15px 18px);
  opacity:.9;
}

.ts-tab{
  position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;border:0;background:none;cursor:pointer;
  color:var(--tb-text);text-decoration:none;
  font:600 11px/1 "Public Sans",system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;padding-bottom:4px;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s;
}
.ts-tab svg{width:24px;height:24px;transition:transform .35s cubic-bezier(.2,.9,.25,1.4)}
.ts-tab[aria-current="page"]{color:var(--tb-orange)}
.ts-tab[aria-current="page"] svg{transform:translateY(-1px) scale(1.08)}
.ts-tab:active svg{transform:scale(.88)}
.ts-tab:focus-visible{outline:2px solid var(--tb-gold);outline-offset:-4px;border-radius:999px}

/* pastille de notification (ex. nouvel incident) */
.ts-dot{
  position:absolute;top:9px;left:calc(50% + 8px);
  width:8px;height:8px;border-radius:50%;
  background:var(--tb-orange);box-shadow:0 0 0 2px var(--tb-ink);
}

/* bouton rond séparé : Vérifier */
.ts-fab{
  width:var(--tb-h);height:var(--tb-h);flex:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:var(--tb-ink);
  background:radial-gradient(circle at 35% 30%,#F29A45,var(--tb-orange) 60%,#B85E12);
  border-color:rgba(255,255,255,.25);
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.9,.25,1.4);
}
.ts-fab svg{width:26px;height:26px}
.ts-fab:active{transform:scale(.9)}
.ts-fab:focus-visible{outline:2px solid var(--tb-gold);outline-offset:3px}

.ts-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:900px){
  .ts-tabbar{max-width:520px}
}
@media print{
  .ts-dock{display:none}
}
@media (prefers-reduced-motion:reduce){
  body.scr-anim main > [data-screen]{animation:none}
  .ts-dock,.ts-pill,.ts-tab svg,.ts-fab{transition:none}
}
@media (max-width:370px){
  .ts-dock{gap:8px;padding:0 10px}
  .ts-tab{font-size:9.5px;letter-spacing:0}
  .ts-tab svg{width:22px;height:22px}
}
