/* Base (remplace le gabarit de la maquette) */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one-column phone app — forest header, scrolling cards, fixed bottom tab bar; blaze orange reserved for actions and kills */
:root{
  --bg:#eef0e8; --surface:#fbfcf8; --sunk:#e2e6da; --ink:#1c2419; --muted:#5b6656; --line:#d3d9ca;
  --head:#26402b; --head-ink:#f1f4ec; --head-muted:#b9c8b4;
  --blaze:#e2581a; --blaze-ink:#ffffff; --blaze-soft:#fde3d3;
  --ok:#22703f; --ok-soft:#dcefe2; --warn:#95600f; --warn-soft:#f6ead2; --bad:#b3261e; --bad-soft:#f7dcd9;
  --shadow:0 10px 30px rgba(20,30,18,.18);
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11150f; --surface:#1a2017; --sunk:#242b20; --ink:#e6ebe0; --muted:#9ba696; --line:#2f382b;
  --head:#1c2a1d; --head-ink:#eef2e9; --head-muted:#9fb39a;
  --blaze:#f07a3a; --blaze-ink:#1a0d05; --blaze-soft:#3d2414;
  --ok:#6cc690; --ok-soft:#1c3325; --warn:#e0a54a; --warn-soft:#3a2c13; --bad:#f08a80; --bad-soft:#3e1d1a;
  --shadow:0 10px 30px rgba(0,0,0,.5); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#11150f; --surface:#1a2017; --sunk:#242b20; --ink:#e6ebe0; --muted:#9ba696; --line:#2f382b;
  --head:#1c2a1d; --head-ink:#eef2e9; --head-muted:#9fb39a;
  --blaze:#f07a3a; --blaze-ink:#1a0d05; --blaze-soft:#3d2414;
  --ok:#6cc690; --ok-soft:#1c3325; --warn:#e0a54a; --warn-soft:#3a2c13; --bad:#f08a80; --bad-soft:#3e1d1a;
  --shadow:0 10px 30px rgba(0,0,0,.5); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--head)}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--head);color:var(--head-ink)}
header .wrap{padding-block:12px 14px;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand h1{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1}
.brand h1 span{color:var(--blaze)}
.demo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--head-muted);border:1px solid var(--head-muted);border-radius:3px;padding:1px 6px}
.sub{font-size:14px;color:var(--head-muted)}
.sub b{color:var(--head-ink);font-weight:600}
.me{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--head-muted)}
.me select{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--head-ink);border-radius:6px;padding:6px 8px}
.me select option{color:#1c2419;background:#fff}

main .wrap{padding-block:16px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
h2{font-family:var(--f-display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.03em;margin:0;text-wrap:balance}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-weight:700}
.sec{display:flex;flex-direction:column;gap:10px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.pad{padding:14px}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em}

/* Stat grid */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--f-display);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
button.stat{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.stat:hover{border-color:var(--blaze)}
button.stat:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}

/* Rows */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;cursor:pointer}
.row:first-child{border-top:0}
.row:hover{background:var(--sunk)}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row .name{font-weight:600}
.row .meta{font-size:14px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.kill{background:var(--blaze);color:var(--blaze-ink)}
.badge{flex:none;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:22px;background:var(--sunk);color:var(--ink);overflow:hidden}
.badge.on{background:var(--head);color:var(--head-ink)}
.badge img{width:100%;height:100%;object-fit:cover}
.chev{color:var(--muted);flex:none}

/* Alerts */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.alert:first-child{border-top:0}
.dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--warn)}
.dot.bad{background:var(--bad)}.dot.ok{background:var(--ok)}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:10px 14px;font-weight:700;border:1px solid var(--line);background:var(--surface);cursor:pointer}
a.btn{text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--blaze);border-color:var(--blaze);color:var(--blaze-ink)}
.btn.ghost{background:none}
.btn.sm{padding:6px 10px;font-size:14px}
.btn.block{width:100%}
.seg{display:flex;background:var(--sunk);border-radius:8px;padding:2px;gap:2px}
.seg button{flex:1;border:0;background:none;border-radius:6px;padding:4px 6px;font-size:14px;font-weight:600;line-height:1.25;color:var(--muted);cursor:pointer;min-width:0;min-height:32px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* présence : vert je viens, orange je ne sais pas, rouge je ne viens pas */
.seg button.on[data-a="fonction"],
.seg button.on[data-a="present"][data-v="oui"]{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
.seg button.on[data-a="present"][data-v="?"]{background:var(--blaze-soft);color:var(--blaze);box-shadow:inset 0 0 0 1.5px var(--blaze)}
.seg button.on[data-a="present"][data-v="non"]{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.seg.kill button.on.k{background:var(--blaze);color:var(--blaze-ink)}
.filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.filters button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)}
.filters button.on{background:var(--head);border-color:var(--head);color:var(--head-ink)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select,.field textarea,.search{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
.err{color:var(--bad);font-size:14px;font-weight:600}
.note{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600}

/* Me card */
.mecard{display:flex;flex-direction:column;gap:10px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sw{position:relative;width:46px;height:28px;border-radius:999px;border:0;background:var(--line);cursor:pointer;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .15s}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(18px)}

/* Tasks */
.task{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.slots{display:flex;gap:3px;margin-top:2px}
.slot{width:16px;height:5px;border-radius:2px;background:var(--line)}
.slot.f{background:var(--ok)}

/* Meal stepper */
.step{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none;background:var(--surface)}
.step button{width:38px;height:36px;border:0;background:none;font-size:20px;font-weight:700;cursor:pointer;color:var(--ink)}
.step button:disabled{opacity:.3;cursor:default}
.step b{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-size:17px}

/* Mirador draw */
.mgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.mchip{aspect-ratio:1;max-width:100%;border-radius:6px;border:1px dashed var(--line);background:var(--sunk);color:var(--muted);font-family:var(--f-display);font-weight:700;font-size:18px;cursor:pointer;text-decoration:line-through;padding:0}
.mchip.on{border:1px solid #5fbf7a;background:#c6efcf;color:#14401f;text-decoration:none}
.mchip:disabled{cursor:default;opacity:.75}
.mchip{position:relative}
.mchip.arc::after{content:"arc";position:absolute;left:0;right:0;bottom:1px;font-family:var(--f-body);font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1;color:var(--blaze)}
.btn:disabled{opacity:.45;cursor:default}

/* Rules */
.rule{border-top:1px solid var(--line)}
.rule:first-child{border-top:0}
.rule summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;gap:12px;align-items:baseline}
.rule summary::-webkit-details-marker{display:none}
.rule summary .art{font-family:var(--f-mono);font-size:12px;color:var(--blaze);flex:none;width:42px}
.rule summary .t{flex:1;font-weight:600}
.rule[open] summary .t{color:var(--blaze)}
.rule ol,.rule ul{margin:0;padding:0 14px 14px 68px;display:flex;flex-direction:column;gap:8px;max-width:65ch;font-size:15px}
@media (max-width:420px){.rule ol,.rule ul,.rule p{padding-left:36px!important}.rule summary .art{width:24px}}
mark{background:var(--blaze-soft);color:inherit;border-radius:2px}

/* Tab bar */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .wrap{display:grid;grid-template-columns:repeat(7,1fr);padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px))}
nav.tabs button{border:0;background:none;padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted);cursor:pointer;min-width:0}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button.on{color:var(--blaze)}
.fab{position:fixed;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:var(--shadow);border-radius:999px;padding:13px 18px}

/* Sheet */
.scrim{position:fixed;inset:0;background:rgba(10,14,9,.5);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:88%;overflow:auto;background:var(--bg);border-radius:16px 16px 0 0;box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet .wrap{padding-block:8px 20px;display:flex;flex-direction:column;gap:14px}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 0}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.x{border:0;background:var(--sunk);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;flex:none}
.photo-prev{border-radius:10px;overflow:hidden;border:1px solid var(--line);max-width:100%}
.photo-prev img{display:block;width:100%}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;max-width:calc(100% - 32px)}
textarea.copy{min-height:140px;font-size:14px}
@media (prefers-reduced-motion:reduce){.sw::after{transition:none}}

/* App connectée */
button.demo{background:none;font:inherit;font-size:11px;cursor:pointer}
button.demo:hover{color:var(--head-ink);border-color:var(--head-ink)}
input[readonly]{background:var(--sunk);color:var(--muted)}
.seg button:disabled{cursor:default}
/* Règlement lu depuis reglement.md */
.rule-p{margin:0;padding:0 14px 10px 68px;max-width:65ch;font-size:15px}
.rule-h{margin:6px 0 8px;padding:0 14px 0 68px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sons{padding:0 14px 12px 68px;display:flex;flex-direction:column;gap:10px}
.son{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:baseline}
.son .mono{color:var(--blaze)}
@media (max-width:420px){.rule-p,.rule-h,.sons{padding-left:36px}.son{grid-template-columns:1fr;gap:2px}}
/* Lieux (rendez-vous, panneaux, déchetterie) */
.lieux summary{cursor:pointer;color:var(--blaze);font-weight:600;padding:2px 0}
.lieux[open] summary{margin-bottom:8px}
.lieux .grid2{margin-top:2px}
.lieu{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.lieu:first-of-type{border-top:0}
/* Mon mirador du jour (accueil) */
.monposte{display:flex;gap:16px;align-items:center;background:var(--head);color:var(--head-ink);border-radius:10px;padding:12px 14px}
.monposte .num-bloc{display:flex;flex-direction:column;align-items:center;flex:none;min-width:64px}
.monposte .num-bloc span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--head-muted)}
.monposte .num-bloc b{font-family:var(--f-display);font-size:46px;line-height:1;color:var(--blaze);font-variant-numeric:tabular-nums}
.monposte .mono{color:var(--head-ink)}
/* Responsable de battue et urgences (accueil) */
.responsable{border-color:var(--bad);gap:12px}
.resp-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.resp-ligne .small{flex-basis:100%}
.resp-nom{font-family:var(--f-display);font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.resp-ligne select{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 10px;font-weight:600}
.tel{font-family:var(--f-mono);font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--muted)}
.urgences{display:grid;grid-template-columns:1fr;gap:6px}
.urg-titre{grid-column:1/-1;color:var(--bad);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.urg{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;background:var(--bad-soft);color:var(--bad);text-decoration:none;min-width:0}
.urg b{color:var(--ink)}
.urg .small{color:var(--muted)}
.urg .mono{font-size:15px;font-weight:700;white-space:nowrap}
@media (max-width:380px){.urgences{grid-template-columns:1fr}}
/* Onglet Urgences */
nav.tabs button[data-v="urgences"]{color:var(--bad)}
nav.tabs button[data-v="urgences"].on{color:var(--bad);font-weight:800}
.responsable{border-color:var(--bad)}
/* Fiches incomplètes */
.bandeau{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;background:var(--bad-soft);color:var(--ink);border:1px solid var(--bad)}
.bandeau b{color:var(--bad)}
.bandeau .btn{flex:none}
.manque-note{background:var(--bad-soft);color:var(--bad)}
.field.manquant label{color:var(--bad)}
.field.manquant input{border-color:var(--bad);border-width:2px}
/* Bouton « Prendre la photo » */
.photo-btn{position:relative;gap:10px;padding:14px;font-size:16px;border:2px dashed var(--blaze);color:var(--blaze);background:var(--blaze-soft);cursor:pointer}
.photo-btn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo-btn:focus-within{outline:2px solid var(--blaze);outline-offset:2px}
.photo-btn.fait{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}.photo-choix .photo-btn{padding:12px 8px;font-size:14px;flex-direction:column;gap:4px;text-align:center}
@media (max-width:380px){.photo-choix{grid-template-columns:1fr 1fr}}
/* Attestation sur l'honneur */
.attestation-texte{font-size:15px;line-height:1.55}
.att-pad{width:100%;height:160px;background:#ffffff;border:2px dashed var(--line);border-radius:8px;touch-action:none;cursor:crosshair;display:block}
.att-img{max-width:100%;width:240px;background:#ffffff;border-radius:6px;border:1px solid var(--line)}
/* Logo de l'association */
.marque{display:flex;align-items:center;gap:10px;min-width:0}
.logo-tete{height:42px;width:auto;flex:none}
.accueil-logo{display:flex;flex-direction:column;align-items:center;gap:8px;padding-block:8px 4px;text-align:center}
.logo-grand{height:150px;width:auto}
.accueil-logo span{font-family:var(--f-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-grand{filter:invert(.92)}}
:root[data-theme="dark"] .logo-grand{filter:invert(.92)}
/* Bouton carte Google Earth */
.carte-btn{justify-content:flex-start;gap:12px;padding:10px 14px;border:2px solid #2f7de1;background:var(--surface);color:var(--ink);text-align:left}
.carte-btn:hover{background:var(--sunk)}
.carte-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.carte-txt b{font-size:16px}
.carte-txt small{font-weight:600;color:#2f7de1;font-size:13px}
.carte-fleche{font-size:26px;line-height:1;color:#2f7de1}
/* Chef de secteur dans la grille du tirage */
.mchip.chef{border:1px solid var(--blaze);background:var(--blaze-soft);color:var(--blaze);text-decoration:none;cursor:default;opacity:1}
.mchip.mini{display:inline-grid;place-items:center;width:20px;height:20px;font-size:12px;aspect-ratio:auto;vertical-align:middle}

/* Carnet du jour */
.carnet-ligne{display:flex;flex-direction:column;gap:4px}
.chip-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;cursor:pointer;color:var(--muted)}
.chip-btn.on{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.carnet-table{width:100%;border-collapse:collapse;font-size:14px}
.carnet-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--sunk);padding:8px 10px;white-space:nowrap}
.carnet-table td{padding:8px 10px;border-top:1px solid var(--line);white-space:nowrap}
.relance-row input{width:22px;height:22px;flex:none;accent-color:var(--blaze)}
.relance-row.off{cursor:default}
.relance-row.off .name{color:var(--muted)}

/* ===== Version 2 : navigation à 5 onglets, jour J, plein soleil ===== */
nav.tabs button{font-size:12px}
.hactions{display:flex;align-items:center;gap:6px;flex:none}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:40px;height:40px;border-radius:20px;border:1px solid rgba(255,255,255,.25);background:none;color:var(--head-ink);cursor:pointer;padding:0 10px}
.hbtn[aria-pressed="true"]{background:#ffd23f;border-color:#ffd23f;color:#1a1400}
.urg-btn{background:#b3261e;border-color:#b3261e;color:#fff;font-weight:700;font-size:14px}
@media (max-width:380px){.logo-tete{height:34px}.brand h1{font-size:22px}}
.dates{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.dates::-webkit-scrollbar{display:none}
.dchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,255,255,.22);background:none;color:var(--head-ink);font-weight:600;font-size:14px;cursor:pointer;text-transform:capitalize}
.dchip.on{border:1.5px solid var(--blaze);background:rgba(240,122,58,.22)}
.dchip.passee{opacity:.6}
.ddot{width:8px;height:8px;border-radius:50%;background:#e0a54a}
.ddot.ok{background:#6cc690}.ddot.bad{background:#f08a80}
.centre{text-align:center}
.titre-ligne{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.titre-ligne a{color:var(--blaze);font-weight:600}
.confirme{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ok)}
.confirme-bloc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 12px;border-radius:10px;background:var(--ok-soft)}
.ligne-choix{display:flex;gap:8px;align-items:center}
.ligne-choix .seg{flex:1}
.repas-case{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;flex:none}
.rappel{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.rappel .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rappel .btn{flex:none;min-height:44px}
.stats4{grid-template-columns:repeat(4,1fr)}
.stats4 .stat{padding:8px 10px}.stats4 .stat b{font-size:26px}
@media (max-width:380px){.stats4{grid-template-columns:repeat(2,1fr)}}
.bureau-box{border:1.5px dashed var(--muted);border-radius:12px;padding:12px 14px;background:var(--surface)}
.bureau-box summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bureau-box summary::-webkit-details-marker{display:none}
.bureau-box[open] summary{margin-bottom:12px}
.bureau-titre{font-family:var(--f-display);font-weight:700;font-size:22px;text-transform:uppercase}
.btn.tuile{flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:56px}
.tuile span{font-size:12px;font-weight:600;color:var(--muted)}
.tuile span.att,.att{color:var(--warn)}
.ok{color:var(--ok)}
.prog .card{margin-top:6px}
.dr-lecture{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:14px}
.dr-lecture:first-child{border-top:0}
/* Bandeau de traque */
.banniere{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px}
.banniere>span{display:flex;flex-direction:column;gap:2px}
.banniere b{font-size:18px}
.banniere span span{font-size:14px;opacity:.95}
.banniere.debut{background:#22703f;color:#fff}
.banniere.fin{background:#b3261e;color:#fff}
.banniere.attente{background:var(--sunk);color:var(--muted)}
.banniere.attente b{font-size:16px;color:var(--ink)}
/* Mon mirador, le jour J */
.mir-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1.5px solid var(--blaze);background:var(--surface)}
.mir-haut{display:flex;align-items:center;gap:14px}
.mir-num{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;flex:none;border-radius:14px;background:var(--blaze-soft);color:var(--blaze)}
.mir-num span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mir-num b{font-family:var(--f-display);font-size:58px;line-height:1}
.mir-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mir-info b{font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.grid3>.btn{min-height:52px}
.btn.wa{background:#25a35a;border-color:#25a35a;color:#fff}
a.btn.wa{color:#fff}
.wa-ligne{justify-content:flex-start;gap:10px;min-height:52px;border-color:#25a35a}
.wa-ligne svg:first-child{color:#25a35a}
.wa-ligne span{flex:1;text-align:left}
.guide-btn{min-height:52px;border:1.5px solid var(--blaze);color:var(--blaze);background:none}
.declarer{min-height:62px;font-size:19px;border-radius:14px}
.alerte-rouge{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:10px;border:0;background:var(--bad-soft);color:var(--bad);font-weight:700;font-size:15px;cursor:pointer}
/* Responsable de battue */
.resp-card{padding:14px;border-radius:16px;border:1.5px solid var(--muted);background:var(--surface)}
.rond-btn{justify-content:flex-start;gap:12px;min-height:60px;background:var(--blaze);border-color:var(--blaze);color:var(--blaze-ink);text-align:left}
.rond-btn span{flex:1;display:flex;flex-direction:column}
.rond-btn small{font-weight:600;opacity:.85}
.sig{min-height:68px;font-size:20px;border-radius:14px;gap:10px;color:#fff}
.sig.debut{background:#22703f;border-color:#22703f}
.sig.fin{background:#b3261e;border-color:#b3261e}
.sig-etat{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;border-radius:12px}
.sig-etat>span{flex:1;display:flex;flex-direction:column}
.sig-etat small{font-size:13px}
.sig-etat.ok{background:var(--ok-soft);color:var(--ok)}
.sig-etat.fin{background:var(--bad-soft);color:var(--bad)}
.dr-ligne{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border-top:1px solid var(--line);cursor:pointer}
.dr-ligne:first-child{border-top:0}
.dr-ligne input[type=checkbox]{width:24px;height:24px;flex:none;accent-color:var(--ok)}
.dr-ligne.cle{background:var(--sunk)}
.dr-lib{flex:1;display:flex;flex-direction:column;font-size:15px}
.dr-lib small{font-size:12px;color:var(--muted)}
.dr-h{display:flex;flex-direction:column;align-items:flex-end;font-size:14px;color:var(--muted);flex:none}
.dr-h b{font-size:15px}.dr-h b.ok{color:var(--ok)}.dr-h .retard{color:var(--warn)}
.dr-h small{font-size:12px}
.dr-ligne.edit{cursor:default}
.dr-ligne.edit input.search{padding:8px 10px}
.dr-ligne.edit input.heure{width:88px;flex:none}
.dr-ajout{display:grid;grid-template-columns:1fr 88px auto;gap:6px}
.resume-txt{font-size:15px;line-height:1.5}
/* Le rond */
.rond-vue{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
.rond-tete{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--head);color:var(--head-ink)}
.rond-tete .x{background:rgba(255,255,255,.15);color:var(--head-ink);width:44px;height:44px}
.rond-titre{display:flex;flex-direction:column}
.rond-titre b{font-family:var(--f-display);font-size:22px;text-transform:uppercase}
.rond-titre small{color:var(--head-muted)}
.rond-prog{display:flex;gap:4px;padding:8px 16px;background:var(--head)}
.rond-prog span{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.rond-prog span.lu{background:#6cc690}.rond-prog span.en-cours{background:var(--blaze)}
.rond-texte{flex:1;overflow-y:auto;padding:18px 20px;line-height:1.4}
.rond-texte section{max-width:640px;margin:0 auto 28px}
.rond-texte h3{font-size:.8em;color:var(--blaze);margin-bottom:10px}
.rond-texte p{margin:0 0 .7em}
.rond-texte b{color:var(--blaze)}
.rond-fin{height:60vh}
.rond-cmd{display:flex;flex-direction:column;gap:8px;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.rond-cmd .grid3 .btn{min-height:54px;font-size:16px}
.reglage{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 4px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted)}
.reglage button{width:40px;height:36px;border:0;border-radius:8px;background:var(--sunk);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer}
.rond-src{min-height:50vh;font-family:var(--f-mono);font-size:13px;line-height:1.5}
/* Guidage */
.g-vue{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.g-etat{align-self:center;padding:6px 12px;border-radius:16px;background:var(--sunk);color:var(--muted);font-size:14px;font-weight:700;text-align:center}
.g-etat.ok{background:var(--ok-soft);color:var(--ok)}.g-etat.moyen{background:var(--warn-soft);color:var(--warn)}
.g-cadran{align-self:center;width:min(300px,78vw);aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--surface);overflow:hidden}
.g-rose{position:relative;width:100%;height:100%;transition:transform .25s linear}
.g-rose>span{position:absolute;font-weight:700;font-size:15px;color:var(--muted)}
.g-n{top:8px;left:50%;transform:translateX(-50%);color:var(--bad)!important}
.g-s{bottom:8px;left:50%;transform:translateX(-50%)}
.g-o{left:10px;top:50%;transform:translateY(-50%)}
.g-e{right:10px;top:50%;transform:translateY(-50%)}
.g-fleche{position:absolute;inset:14%;width:72%;height:72%;transition:transform .25s linear}
.g-fleche path{fill:var(--blaze);stroke:var(--surface);stroke-width:1.5;stroke-linejoin:round}
.g-fleche circle{fill:var(--ink)}
.g-dist{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.g-dist b{font-family:var(--f-display);font-size:64px;line-height:1}
.g-dist span{font-size:17px;font-weight:600}
@media (prefers-reduced-motion:reduce){.g-rose,.g-fleche{transition:none}}
/* Présents */
.compteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.compteurs button{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;cursor:pointer}
.compteurs .c-oui{color:var(--ok)}.compteurs .c-q{color:var(--blaze)}.compteurs .c-non{color:var(--bad)}
.compteurs .c-oui.on{background:var(--ok-soft);border:1.5px solid var(--ok)}
.compteurs .c-q.on{background:var(--blaze-soft);border:1.5px solid var(--blaze)}
.compteurs .c-non.on{background:var(--bad-soft);border:1.5px solid var(--bad)}
.gens-outils{display:grid;grid-template-columns:1fr auto;gap:6px}
.gens-outils select{width:auto;max-width:48vw}
.prow{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 12px;border:0;border-top:1px solid var(--line);background:none;width:100%;text-align:left;cursor:pointer}
.prow:first-child{border-top:0}
.prow:hover{background:var(--sunk)}
.pmain{flex:1;min-width:0;display:flex;flex-direction:column}
.pmain b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptags{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
.pbadge{flex:none;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--sunk);font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--muted)}
.pbadge.on{background:var(--blaze-soft);color:var(--blaze)}
.relance-bandeau{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-weight:700}
/* Tableau : animal blessé */
.blesse-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:2px solid var(--bad);background:var(--bad-soft)}
.blesse-card.close{border-width:1px;opacity:.85}
.blesse-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.blesse-haut>span{display:flex;flex-direction:column;gap:2px}
.blesse-haut b{font-size:17px}
.rech-etat{font-weight:700;color:var(--warn)}
.btn.appel{background:var(--bad);border-color:var(--bad);color:#fff}
a.btn.appel{color:#fff}
.blesse-card .grid2 .btn{min-height:56px}
.blesse-card .btn span{display:flex;flex-direction:column;align-items:center}
.blesse-card .btn small{font-weight:600;font-size:12px}
/* Fiche */
.fprog{display:flex;flex-direction:column;gap:6px}
.fprog-ligne{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.fprog-barre{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.fprog-barre span{display:block;height:100%;background:var(--blaze)}
.a-completer{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;border:1.5px solid var(--bad);background:var(--bad-soft)}
.a-completer h3{color:var(--bad)}
.jour-fiche{gap:10px}
.fsec{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.fsec summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:0 14px;font-weight:600}
.fsec summary::-webkit-details-marker{display:none}
.fsec summary::after{content:"›";font-size:20px;color:var(--muted);transform:rotate(90deg);margin-left:4px}
.fsec[open] summary::after{transform:rotate(-90deg)}
.fsec summary>span:nth-child(2){margin-left:auto;font-size:13px}
.fsec-corps{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
.fiche-pied{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;padding:10px 0 4px;background:var(--bg)}
.fiche-pied .btn.primary{min-height:50px}
.seg button.on[data-a="tarif"]{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
.responsable{gap:8px}
/* Mode plein soleil : fort contraste, fond blanc, texte noir */
:root[data-soleil]{
  --bg:#ffffff; --surface:#ffffff; --sunk:#eef0e8; --ink:#0f150d; --muted:#33402f; --line:#0f150d;
  --head:#1c3320; --head-ink:#ffffff; --head-muted:#d7e4d3;
  --blaze:#c44a0c; --blaze-ink:#ffffff; --blaze-soft:#fde3d3;
  --ok:#145c2e; --ok-soft:#d6efdf; --warn:#7a4a00; --warn-soft:#fbe7c2; --bad:#a3170f; --bad-soft:#fbdcd8;
  color-scheme:light }
:root[data-soleil] body{font-size:17px}
:root[data-soleil] .card,:root[data-soleil] .mir-card,:root[data-soleil] .resp-card{border-width:2px}
:root[data-soleil] .mir-num{background:#0f150d;color:#fff}
:root[data-soleil] .logo-grand{filter:none}.rond-cmd .grid2,.blesse-card .grid2,.resp-card .grid2{grid-template-columns:1fr 1fr}
/* une pastille longue (ce qui manque à une fiche) passe à la ligne au lieu de déborder */
.row .chips .chip,.ptags .chip{white-space:normal;max-width:100%;text-align:left}
/* sécurité : aucun élément ne doit élargir la page, sinon la barre du bas sort de l'écran du téléphone */
main,header{overflow-x:clip}
main .wrap>*,.card,.row,.prow,.mecard{min-width:0;max-width:100%}
nav.tabs{width:100%;max-width:100vw;overflow:hidden}
nav.tabs button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* guidage : avec la boussole, le cadran reste fixe et seule la flèche tourne ; « devant vous » en haut */
.g-devant{display:none;top:8px;left:50%;transform:translateX(-50%);font-size:12px!important;text-transform:uppercase;letter-spacing:.06em}
.g-cadran.avec-cap .g-n,.g-cadran.avec-cap .g-e,.g-cadran.avec-cap .g-s,.g-cadran.avec-cap .g-o{display:none}
.g-cadran.avec-cap .g-devant{display:block}
.g-cadran.avec-cap{border-top:4px solid var(--blaze)}
.note.accident{display:flex;flex-direction:column;gap:4px;background:var(--bad-soft);color:var(--bad);border:1.5px solid var(--bad)}
.note.accident b{font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.note.accident span{color:var(--ink);font-weight:600}