/* DAKOR · jetons visuels recopies de la maquette (SPEC §7.2).
   Ils sont definis ici, et nulle part ailleurs. */
:root{
  --ink:#16181A; --ink2:#6B7278; --paper:#FFFFFF; --paper2:#F1F3F4; --line:#D6DADD;
  --slate:#16181A; --mark:#FFC400; --ok:#0F8A3C; --bad:#D32F1E; --warn:#F07000; --steel:#0B63C5;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rayon:6px; --tactile:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--sans);font-size:17px;line-height:1.4;font-weight:500;color:var(--ink);
     background:var(--paper);margin:0;display:flex;flex-direction:column;min-height:100vh}

/* ---------- barre du haut ---------- */
.topbar{background:var(--slate);color:#fff;padding:10px 18px 14px;flex:none;
        display:flex;align-items:flex-end;gap:10px}
.topbar .retour{background:none;border:0;color:#C6CCD0;font-size:1.4rem;line-height:1;
                padding:0 4px 2px 0;cursor:pointer;min-height:auto}
.topbar .logo{width:30px;height:30px;flex:none;display:block}
.topbar h1{font-weight:700;font-size:1.4rem;margin:0;letter-spacing:-.02em;white-space:nowrap}
.topbar .droite{margin-left:auto;text-align:right}
.topbar .sous{color:#A8AFB4;font-size:.76rem;line-height:1.3}
.profil{display:inline-flex;align-items:center;gap:6px;background:#2A2E32;border:1px solid #4A5055;
        border-radius:var(--rayon);padding:2px 8px 2px 4px;font-size:.66rem;color:#DDE2DC;
        cursor:pointer;margin-bottom:4px}
.profil .av{width:18px;height:18px;border-radius:4px;background:var(--mark);color:var(--ink);
            font-size:.6rem;font-weight:700;display:grid;place-items:center}

/* ---------- corps ---------- */
.corps{flex:1;overflow-y:auto;padding:14px 16px 22px;max-width:560px;width:100%;margin:0 auto}
h2{font-size:1.1rem;margin:0 0 10px}

.lbl{font-size:.8rem;letter-spacing:.06em;font-weight:700;margin:20px 0 8px;
     display:flex;align-items:center;gap:8px;text-transform:uppercase}
.lbl:first-child{margin-top:2px}
.lbl .d{width:14px;height:14px;border-radius:3px;flex:none;background:var(--ink2)}
.lbl.go{color:var(--ok)} .lbl.go .d{background:var(--ok)}
.lbl.stop{color:var(--bad)} .lbl.stop .d{background:var(--bad)}
.lbl.soon{color:var(--warn)} .lbl.soon .d{background:var(--warn)}
.lbl.n{color:var(--ink2)}

/* ---------- cartes ---------- */
.card{background:var(--paper2);border:0;border-left:5px solid var(--line);border-radius:var(--rayon);
      padding:13px 14px;margin-bottom:8px;min-height:var(--tactile);display:flex;gap:11px;
      align-items:flex-start;cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit;
      text-decoration:none}
.card .g{flex:1;min-width:0}
.card b{font-weight:700;display:block;font-size:1rem;letter-spacing:-.01em}
.card small{color:var(--ink2);font-size:.88rem;display:block;margin-top:3px;font-weight:500}
.card .r{flex:none;text-align:right;font-size:.85rem;font-weight:700;white-space:nowrap;
         font-variant-numeric:tabular-nums}
.card .chev{color:var(--line);font-size:1.1rem;flex:none;align-self:center}
.card.ok{border-left-color:var(--ok)}
.card.warn{border-left-color:var(--warn)}
.card.bad{border-left-color:var(--bad)}
.card.n{border-left-color:var(--ink2)}
.card[disabled]{opacity:.55;cursor:default}
.vide{color:var(--ink2);font-size:.9rem;padding:10px 2px}

.dot{width:14px;height:14px;border-radius:3px;flex:none;margin-top:4px;background:var(--ink2)}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.pill{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 9px;border-radius:4px;
      letter-spacing:.04em;text-transform:uppercase;background:var(--ink2);color:#fff}
.pill.ok{background:var(--ok)} .pill.warn{background:var(--warn)} .pill.bad{background:var(--bad)}

/* ---------- boutons et champs ---------- */
.btn{display:block;width:100%;margin-top:16px;background:var(--slate);color:#fff;border:0;
     border-radius:var(--rayon);padding:17px;font:inherit;font-weight:700;font-size:1rem;
     cursor:pointer;min-height:var(--tactile)}
.btn:active{opacity:.85}
.btn.gold{background:var(--mark);color:var(--ink)}
.btn.ghost{background:none;border:2px solid var(--ink);color:var(--ink)}
.champ{display:block;margin-top:14px}
.champ span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.05em;
            text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.champ input{width:100%;border:2px solid var(--line);border-radius:var(--rayon);padding:14px 12px;
             font:inherit;font-size:1.05rem;background:var(--paper);min-height:var(--tactile)}
.champ input:focus{outline:none;border-color:var(--ink)}
.champ input.gros{font-size:1.6rem;font-weight:700;letter-spacing:.14em;text-align:center}
.recherche{width:100%;border:2px solid var(--line);border-radius:var(--rayon);padding:13px 12px;
           font:inherit;font-size:1rem;background:var(--paper);min-height:52px}
.recherche:focus{outline:none;border-color:var(--ink)}

.alerte{background:#FFF3CC;border:0;border-left:6px solid var(--mark);border-radius:4px;
        padding:12px 14px;font-size:.92rem;margin:12px 0;font-weight:500}
.alerte.mauvais{background:#FBEAE7;border-left-color:var(--bad)}
.note{font-size:.76rem;color:var(--ink2);margin-top:14px;border-top:1px solid var(--line);
      padding-top:10px}

/* ---------- gestes ---------- */
.gestes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.geste{background:var(--paper2);border:0;border-radius:var(--rayon);padding:14px 13px;cursor:pointer;
       border-top:6px solid var(--gc,var(--slate));min-height:76px;display:flex;gap:11px;
       align-items:flex-start;font:inherit;color:inherit;text-align:left}
.geste .ico{width:34px;height:34px;flex:none;border-radius:var(--rayon);background:var(--gc,var(--slate));
            display:grid;place-items:center}
.geste .ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.1;
                stroke-linecap:round;stroke-linejoin:round}
.geste .n{font-weight:700;font-size:1rem;line-height:1.15}
.geste small{color:var(--ink2);font-size:.82rem;display:block;margin-top:4px;font-weight:500}
.geste[disabled]{opacity:.5;cursor:default}

/* ---------- avancement ---------- */
.bars{display:grid;gap:7px;margin-top:6px}
.br{display:grid;grid-template-columns:92px 1fr 38px;gap:9px;align-items:center;font-size:.84rem}
.br .tr{height:9px;background:var(--paper2);border-radius:5px;overflow:hidden}
.br .fi{height:100%;background:var(--slate);border-radius:5px}
.br .pc{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums;font-size:.78rem}

/* ---------- onglets ---------- */
.tabs{flex:none;display:grid;background:var(--paper);border-top:3px solid var(--ink);
      position:sticky;bottom:0}
.tabs.trois{grid-template-columns:repeat(3,1fr)}
.tabs.quatre{grid-template-columns:repeat(4,1fr)}
.tabs a{background:none;border:0;padding:10px 2px 13px;font:inherit;font-size:.74rem;font-weight:700;
        color:var(--ink2);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
        position:relative;min-height:60px;text-decoration:none}
.tabs a.on{color:var(--ink)}
.tabs a.on .ic{background:var(--slate);color:#fff}
.ic{width:30px;height:30px;border-radius:var(--rayon);background:var(--paper2);display:grid;
    place-items:center;font-size:.88rem;color:var(--ink)}
.badge{position:absolute;top:5px;right:calc(50% - 20px);background:var(--bad);color:#fff;
       font-size:.6rem;font-weight:700;min-width:15px;height:15px;border-radius:8px;
       display:grid;place-items:center;padding:0 4px}

/* ---------- pages d'entree ---------- */
.entree{max-width:420px;margin:0 auto;padding:34px 22px}
.entree .marque{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.entree .marque svg{width:38px;height:38px}
.entree .marque b{font-size:1.5rem;letter-spacing:-.02em}
.entree .slogan{color:var(--ink2);font-size:.9rem;margin-bottom:22px}
.entree .bascule{display:block;text-align:center;margin-top:18px;color:var(--steel);font-size:.9rem}

/* ---------- geste Point de chantier ---------- */
.bandeau-chantier{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
                  flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bandeau-chantier b{font-size:1.02rem}
.bandeau-chantier a{color:var(--steel);font-size:.86rem}
.micwrap{text-align:center;margin-top:18px}
.mic{width:96px;height:96px;border-radius:50%;background:var(--bad);border:0;margin:0 auto;
     display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(179,64,47,.35)}
.mic svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mic:disabled{opacity:.4}
.mic.rec{animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.mic.rec{animation:none;outline:4px solid var(--bad);outline-offset:4px}}
.chrono{margin-top:10px;font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bad)}
.hint{text-align:center;color:var(--ink2);font-size:.86rem;margin-top:10px}
.pastille-audio{margin-top:8px;font-size:.86rem;font-weight:700;color:var(--ok)}
.vignette{position:relative;margin-top:10px}
.vignette img{width:100%;border-radius:var(--rayon);display:block}
.vignette button{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;
                 border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;cursor:pointer}
.lien-repli{background:none;border:0;color:var(--steel);font:inherit;font-size:.9rem;
            padding:12px 0;cursor:pointer;text-decoration:underline}
.champ textarea{width:100%;border:2px solid var(--line);border-radius:var(--rayon);padding:12px;
                font:inherit;font-size:1rem;background:var(--paper)}
.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--ink)}
.champ select{width:100%;border:2px solid var(--line);border-radius:var(--rayon);padding:14px 12px;
              font:inherit;font-size:1rem;background:var(--paper);min-height:var(--tactile)}

/* ---------- ecran A valider ---------- */
.hazard{height:10px;border-radius:3px 3px 0 0;margin:0 0 14px;
  background:repeating-linear-gradient(135deg,var(--mark) 0 10px,var(--ink) 10px 20px)}
.card.modifiable{align-items:flex-start;cursor:default}
.card .modif{width:100%;border:1px solid var(--line);border-radius:var(--rayon);padding:8px 10px;
             font:inherit;font-size:.95rem;background:var(--paper);margin-top:4px;resize:vertical}
.card .modif:focus{outline:none;border-color:var(--ink)}
.card .supprimer{background:none;border:0;color:var(--ink2);font-size:1rem;cursor:pointer;
                 padding:6px;min-width:36px;min-height:36px}
.card .supprimer:active{color:var(--bad)}
.citation{font-size:1rem;background:var(--paper);border:1px solid var(--line);
          border-radius:11px;padding:12px 14px;margin:8px 0;font-style:italic}
.photo-preuve{width:100%;border-radius:var(--rayon);display:block;margin:8px 0 4px}
.meta-preuve{color:var(--ink2);font-size:.82rem;font-variant-numeric:tabular-nums}
.case-envoi{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:.95rem;
            min-height:var(--tactile);cursor:pointer}
.case-envoi input{width:22px;height:22px;flex:none;accent-color:var(--ok)}