[hidden] { display: none !important; }
:root {
  --bg: #f2f5f1; --card: #fff; --ink: #1c2a21; --muted: #6a756d; --line: #dde4de;
  --brand: #0a5c3a; --or: #f59e0b; --brand2: #e3f0e6; --ok: #2f7d45; --ko: #b23a2c; --ko-bg: #fbe9e6;
  --wait: #946600; --wait-bg: #fcf1d6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; padding-top: calc(.7rem + env(safe-area-inset-top)); background: linear-gradient(110deg, #04301b, #0a5c3a 60%, #11804f) top / 100% calc(100% - 7px) no-repeat, url(icons/ruban.svg) bottom / 100% 9px no-repeat; color: #fff; padding-bottom: calc(.7rem + 7px); background-color: var(--bg); }
#title { flex: 1; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; padding: 0 .4rem; cursor: pointer; }
.net { display: flex; align-items: center; gap: .35rem; font-size: .78rem; background: rgba(255,255,255,.15); padding: .2rem .55rem; border-radius: 99px; }
.net span { width: 9px; height: 9px; border-radius: 50%; background: #f0b84a; }
.net.on span { background: #8de29e; }
main { max-width: 720px; margin: 0 auto; padding-bottom: 6rem; }
.pad { padding: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
h1 { font-size: 1.3rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.08rem; margin: 0 0 .6rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin: .8rem; }
.btn { display: block; width: 100%; text-align: center; background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: .85rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn + .btn { margin-top: .6rem; }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.danger { background: var(--ko); }
.btn.sm { display: inline-block; width: auto; padding: .45rem .8rem; font-size: .9rem; border-radius: 8px; }
.btn[disabled] { background: #b8c0ba; border-color: #b8c0ba; color: #fff; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row > .btn { flex: 1; margin-top: 0; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.tile b { display: block; font-size: 1.6rem; }
.tile span { font-size: .85rem; color: var(--muted); }
.tile small { display: block; font-size: .75rem; margin-top: .15rem; color: var(--ok); }
.tile.alert { border-color: #e9b2aa; background: var(--ko-bg); }

label.f { display: block; font-weight: 600; font-size: .95rem; margin: 1rem 0 .35rem; }
label.f .req { color: var(--ko); }
.help { font-size: .82rem; color: var(--muted); margin: -.1rem 0 .4rem; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: .7rem .75rem; border: 1.5px solid #c8d1ca; border-radius: 9px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #cfe5d4; }
textarea { min-height: 84px; }
.choices { display: flex; flex-direction: column; gap: .4rem; }
.choices.inline { flex-direction: row; flex-wrap: wrap; }
.choice { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .75rem; border: 1.5px solid #c8d1ca; border-radius: 9px; background: #fff; font-weight: 400; cursor: pointer; }
.choices.inline .choice { flex: 1; min-width: 110px; justify-content: center; }
.choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.choice.on { border-color: var(--brand); background: var(--brand2); }
.info { background: #eef4ef; border-radius: 8px; padding: .6rem .75rem; font-size: .9rem; margin-top: 1rem; }
.err-field input, .err-field select, .err-field textarea, .err-field .choice { border-color: var(--ko); }

.section-title { margin: 1rem .8rem .2rem; padding: .55rem .8rem; background: var(--brand); color: #fff; border-radius: 10px; font-weight: 700; font-size: .98rem; }
.repeat { border: 1.5px dashed #b9cdbd; border-radius: 10px; padding: .4rem .7rem .8rem; margin-top: .4rem; }
.repeat-item { border-left: 4px solid var(--brand); background: #f8fbf8; border-radius: 6px; padding: .2rem .7rem .8rem; margin: .7rem 0; }
.repeat-head { display: flex; justify-content: space-between; align-items: center; padding-top: .5rem; font-weight: 700; font-size: .9rem; color: var(--brand); }
.link-danger { background: none; border: 0; color: var(--ko); font: inherit; font-size: .88rem; cursor: pointer; padding: .2rem; }

.geo { border: 1.5px solid #c8d1ca; border-radius: 9px; padding: .7rem; background: #fff; }
.geo .val { font-family: ui-monospace, monospace; font-size: .9rem; margin: .3rem 0; }
.poly-live { display: flex; gap: .8rem; align-items: center; margin: .5rem 0; }
.poly-live svg { flex: none; background: #eef4ef; border-radius: 8px; }
.stat-line { font-size: .9rem; }
.pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ko); animation: p 1s infinite; margin-right: .3rem; }
@keyframes p { 50% { opacity: .3; } }

.list { margin: .4rem .8rem; }
.item { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem; margin-bottom: .5rem; color: inherit; text-decoration: none; cursor: pointer; }
.item .top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.item .top .badge { flex-shrink: 0; margin-top: .1rem; }
.item b { font-size: 1rem; }
.badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; white-space: nowrap; background: #eceeec; color: var(--muted); }
.badge.ok { background: #e2f2e6; color: var(--ok); }
.badge.ko { background: var(--ko-bg); color: var(--ko); }
.badge.wait { background: var(--wait-bg); color: var(--wait); }
.badge.draft { background: #e8eef8; color: #3a5a8c; }
.done-mark { color: var(--ok); font-weight: 700; font-size: .82rem; }

.searchbar { position: sticky; top: 52px; z-index: 5; background: var(--bg); padding: .6rem .8rem; display: flex; gap: .5rem; }
.searchbar select { width: 40%; }
.sticky-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); padding: .7rem .8rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); display: flex; gap: .5rem; }
.sticky-actions .btn { margin: 0; }
.notice { margin: .8rem; padding: .7rem .85rem; border-radius: 10px; font-size: .92rem; }
.notice.ko { background: var(--ko-bg); color: var(--ko); }
.notice.wait { background: var(--wait-bg); color: var(--wait); }
.notice.ok { background: #e2f2e6; color: var(--ok); }
#toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 50; background: #1c2a21; color: #fff; padding: .65rem 1rem; border-radius: 10px; font-size: .92rem; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.login-logo { text-align: center; margin-top: 1.6rem; font-weight: 900; font-size: 1.3rem; letter-spacing: .02em; } .login-logo img { display: block; margin: 0 auto .5rem; }

/* Exigences C / NC / N/A */
.cl-head { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 .3rem; font-size: 1rem; color: var(--brand); }
.cl-count { font-size: .8rem; font-weight: 700; background: #eceeec; color: var(--muted); border-radius: 99px; padding: .1rem .55rem; }
.cl-count.done { background: #e2f2e6; color: var(--ok); }
.cl-item { border: 1.5px solid var(--line); border-radius: 10px; padding: .65rem .7rem; margin: .55rem 0; background: #fff; }
.cl-item[data-r="C"] { border-color: #a9d3b4; background: #f6fbf7; }
.cl-item[data-r="NC"] { border-color: #e7aaa1; background: #fdf6f5; }
.cl-item[data-r="NA"] { border-color: #d5d9d6; background: #f7f8f7; }
.cl-item.err { border-color: var(--ko); box-shadow: 0 0 0 3px #f6d3ce; }
.cl-top { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.cl-code { font-weight: 800; font-size: .9rem; }
.cl-niv { font-size: .7rem; font-weight: 700; border-radius: 99px; padding: .08rem .45rem; background: #eef1ee; color: var(--muted); }
.niv-fondamentale { background: #fbe3df; color: #9c2f22; }
.niv-specialisee { background: #e4ecf8; color: #33507c; }
.niv-ameliorationcontinue { background: #f0e8f8; color: #62408a; }
.niv-rdue { background: #fdf0d2; color: #8a5b00; }
.cl-theme { font-size: .76rem; color: var(--muted); font-style: italic; }
.cl-txt { font-size: .93rem; line-height: 1.4; }
.cl-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; margin: .55rem 0 .45rem; }
.cl-b { font: inherit; font-weight: 800; padding: .6rem 0; border-radius: 9px; border: 1.5px solid #c8d1ca; background: #fff; color: var(--ink); cursor: pointer; }
.cl-b.cl-C.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.cl-b.cl-NC.on { background: var(--ko); border-color: var(--ko); color: #fff; }
.cl-b.cl-NA.on { background: #7a857d; border-color: #7a857d; color: #fff; }
.cl-obs { font-size: 15px; padding: .5rem .6rem; }
.cl-item[data-r="NC"] .cl-obs:placeholder-shown { border-color: #e7aaa1; }

/* Score */
.score-box { border-radius: 12px; padding: .9rem; background: #eef1ee; }
.score-box.ok { background: #e2f2e6; } .score-box.wait { background: var(--wait-bg); } .score-box.ko { background: var(--ko-bg); }
.score-main b { display: block; font-size: 2.2rem; line-height: 1.1; }
.score-box.ok .score-main b { color: var(--ok); } .score-box.wait .score-main b { color: var(--wait); } .score-box.ko .score-main b { color: var(--ko); }
.score-main span { font-size: .9rem; }
.niv-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .85rem; }
.niv-table th, .niv-table td { text-align: left; padding: .25rem .3rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.sc-ok { color: var(--ok); } .sc-wait { color: var(--wait); } .sc-ko { color: var(--ko); }
.nc-row { border-left: 4px solid var(--ko); background: #fdf6f5; border-radius: 6px; padding: .55rem .7rem; margin: .5rem 0; }
.nc-row textarea, .nc-row input { margin-top: .35rem; }

/* Signature / croquis */
.pad-wrap { width: 100%; }
canvas.pad { display: block; border: 1.5px solid #c8d1ca; border-radius: 9px; touch-action: none; background: #fff; }
.pad-img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }

/* Tableaux à lignes fixes : champs côte à côte */
.grid-tab .repeat-item > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.grid-tab [data-field]:has(.choices), .grid-tab [data-field]:has(textarea), .grid-tab [data-field]:has(.geo) { grid-column: 1 / -1; }
.grid-tab label.f { font-size: .82rem; margin: .55rem 0 .25rem; }
.grid-tab input { padding: .5rem .55rem; }
.notice.info { background: #e0e7ff; color: #3730a3; cursor: pointer; font-weight: 600; }
.card.msg { margin: .6rem .8rem; }
.card.msg .top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.card.msg.nouveau { border-left: 4px solid #6366f1; }
.card.msg.passe { opacity: .6; }
.card.msg .btn { display: inline-block; width: auto; }
.item.off { opacity: .5; background: var(--line); cursor: not-allowed; filter: grayscale(1); }
.item.off .badge { background: transparent; border: 1px solid currentColor; }

/* Tuile Formations BPA sur l'accueil */
.tile.tile-bpa { grid-column: 1 / -1; border-left: 4px solid var(--brand, #059669); }
.tile.tile-bpa b { font-size: 1.05rem; }
.tile.tile-bpa.alert-bpa { background: #ecfdf5; }

/* Localisation avant l'activité */
.geo-overlay, .pick-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.geo-box { background: #fff; border-radius: 14px; padding: 1.2rem; max-width: 420px; width: 100%; text-align: center; }
.geo-ic { font-size: 2.4rem; }
.geo-box h2 { margin: .3rem 0; }
.geo-etat { font-weight: 600; margin: .8rem 0; }
.geo-etat.ok { color: var(--ok); } .geo-etat.ko { color: var(--ko); }
.geo-actions { display: flex; flex-direction: column; gap: .5rem; }
.geo-ok { color: var(--ok); margin-top: .3rem; } .geo-ko { color: var(--ko); margin-top: .3rem; }
/* Choix des producteurs (liste de présence) */
.pick-overlay { align-items: stretch; padding: 0; }
.pick-box { background: var(--bg, #f3f4f2); width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; max-height: 100vh; }
.pick-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.pick-tools { display: flex; justify-content: space-between; align-items: center; padding: 0 .8rem; }
.pick-list { flex: 1; overflow: auto; padding: .4rem .8rem; }
.pick-item { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .4rem; }
.pick-item input { width: 22px; height: 22px; accent-color: var(--brand, #059669); flex-shrink: 0; }
.pick-item span { display: flex; flex-direction: column; } .pick-item small { color: var(--muted); }
.pick-item.deja { opacity: .55; }
.pick-foot { padding: .7rem .8rem; background: #fff; border-top: 1px solid var(--line); }
.pick-foot .btn { width: 100%; }
.repeat-btns { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Identité visuelle : ruban or */
.login-logo div span, #title span { color: var(--or) !important; }
#title { padding-left: 36px; min-height: 28px; line-height: 28px; background: url(icons/icon-192.png) left center / 28px 28px no-repeat; }

/* Étiquettes en ruban plié (pointe biseautée à droite, pli sous le bord gauche) */
.tile { --rb: #f26522; --rbd: #b8441a; --tbg: var(--card); position: relative; display: flex; flex-direction: column; padding-top: 1rem; }
.tiles .tile:nth-child(2) { --rb: #2fb04a; --rbd: #1b6b2c; }
.tiles .tile:nth-child(3) { --rb: #8b66b0; --rbd: #55377a; }
.tiles .tile:nth-child(4) { --rb: #1fa7e0; --rbd: #136c97; }
.tiles .tile.tile-bpa { --rb: #a5503f; --rbd: #5e2a20; }
.tile.alert { --tbg: var(--ko-bg); --rb: #e3242b; --rbd: #8f161b; }
.tile.tile-bpa.alert-bpa { --tbg: #ecfdf5; }
.tile > span, .tile.tile-bpa > b { order: -1; position: relative; align-self: flex-start; max-width: calc(100% + .5rem); margin: 0 0 .55rem -1.3rem; padding: .38rem 1.5rem .38rem .85rem;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.06)), var(--rb); color: #fff !important; font-weight: 700; font-size: .8rem; line-height: 1.25; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.tile.tile-bpa > b { font-size: .9rem; }
.tile.tile-bpa > span { order: 0; position: static; align-self: auto; margin: 0; padding: 0; background: none; color: var(--muted) !important; font-weight: 400; text-shadow: none; font-size: .85rem; }
.tile.tile-bpa > span::before, .tile.tile-bpa > span::after { display: none; }
.tile > span::before, .tile.tile-bpa > b::before, .section-title::before { content: ""; position: absolute; left: 0; top: 100%; width: .5rem; height: .5rem; background: var(--rbd); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.tile > span::after, .tile.tile-bpa > b::after, .section-title::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 14px; background: linear-gradient(to bottom right, transparent 49%, var(--tbg) 51%); }
.tile b { font-size: 1.7rem; line-height: 1.1; }
.section-title { --rb: #0a5c3a; --rbd: #04301b; --tbg: var(--bg); position: relative; display: table; min-width: 55%; border-radius: 0; margin: 1.1rem 2rem .5rem .3rem; padding: .55rem 2rem .55rem .95rem;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.08)), var(--rb); text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.tile.tile-bpa { border-left: 1px solid var(--line); }

/* Photos (classe du champ école paysan) */
.photos-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .6rem; }
.photo-mini { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 4 / 3; }
.photo-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-suppr { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1rem; cursor: pointer; }
.photo-btn { margin-bottom: .4rem; }

/* Viseur de la caméra (photo de la classe) */
.cam-overlay { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; color: #fff; }
.cam-titre { padding: .8rem 1rem; padding-top: calc(.8rem + env(safe-area-inset-top)); font-weight: 700; background: linear-gradient(110deg, #04301b, #0a5c3a); border-bottom: 3px solid #f59e0b; }
.cam-video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.cam-etat { position: absolute; left: 1rem; right: 1rem; top: 40%; text-align: center; font-size: 1rem; line-height: 1.5; }
.cam-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); background: #111; }
.cam-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: .6rem .8rem; font: inherit; font-size: .9rem; cursor: pointer; }
.cam-declencheur { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 5px; cursor: pointer; flex: none; }
.cam-declencheur span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #f59e0b; }
.cam-declencheur:disabled { opacity: .4; }
.cam-flash::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .8; }

/* Application Android : réactions d'une vraie application (pas de surbrillance ni de sélection sur les boutons) */
html { -webkit-tap-highlight-color: transparent; }
.natif body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
.natif input, .natif textarea, .natif select, .natif [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.natif .btn:active, .natif .tile:active, .natif .item:active { transform: scale(.98); filter: brightness(.96); }