[hidden] { display: none !important; }
:root {
  --bg: #f6f7fb; --card: #ffffff; --ink: #111827; --muted: #6b7280; --line: #e5e7eb; --line2: #d1d5db;
  --brand: #059669; --brand-d: #047857; --brand-ink: #fff; --brand-soft: #ecfdf5;
  --indigo: #4f46e5; --purple: #9333ea; --hero: linear-gradient(100deg, #04301b 0%, #0a5c3a 55%, #11804f 100%); --or: #f59e0b;
  --side: #052e1c; --side-2: #0a3f27; --side-ink: #d1e7da; --side-on: #0f5132; --side-on-ink: #fcd34d;
  --ok: #047857; --ok-bg: #d1fae5; --ko: #dc2626; --ko-bg: #fee2e2; --wait: #b45309; --wait-bg: #fef3c7; --off-bg: #f3f4f6;
  --input: #ffffff; --input-fill: #eef2ff; --th: #f9fafb; --row-hover: #f9fafb; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1120; --card: #111827; --ink: #e5e7eb; --muted: #9ca3af; --line: #1f2937; --line2: #374151;
  --brand-soft: #052e22; --input: #0f172a; --input-fill: #1e1b4b; --th: #0f172a; --row-hover: #172033;
  --ok: #34d399; --ok-bg: #064e3b; --ko: #f87171; --ko-bg: #450a0a; --wait: #fbbf24; --wait-bg: #451a03; --off-bg: #1f2937;
  --side: #021a10; --side-2: #062a1a; --shadow: none; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --card: #111827; --ink: #e5e7eb; --muted: #9ca3af; --line: #1f2937; --line2: #374151;
    --brand-soft: #052e22; --input: #0f172a; --input-fill: #1e1b4b; --th: #0f172a; --row-hover: #172033;
    --ok: #34d399; --ok-bg: #064e3b; --ko: #f87171; --ko-bg: #450a0a; --wait: #fbbf24; --wait-bg: #451a03; --off-bg: #1f2937;
    --side: #021a10; --side-2: #062a1a; --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; margin: 1.4rem 0 .7rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
code { background: var(--off-bg); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
svg { flex: none; vertical-align: middle; }

/* ---------- Mise en page avec barre latérale ---------- */
.side { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; z-index: 40; }
.side-brand { height: 62px; display: flex; align-items: center; gap: .6rem; padding: 0 1.4rem; font-weight: 800; font-size: 1.08rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); }
.side-brand svg { color: var(--side-on-ink); }
.side-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.side-nav a { display: flex; align-items: center; gap: .75rem; padding: .58rem .8rem; border-radius: 8px; color: var(--side-ink); font-weight: 500; font-size: .93rem; }
.side-nav a:hover { background: var(--side-2); color: #fff; text-decoration: none; }
.side-nav a.on { background: var(--side-on); color: var(--side-on-ink); }
.side-nav a span { flex: 1; }
.side-nav .count { background: #f59e0b; color: #111; font-size: .72rem; border-radius: 99px; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }
.side-user { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); }
.side-user b { display: block; color: #fff; font-size: .9rem; }
.side-user small { color: var(--side-on-ink); font-size: .78rem; }
.main-col { margin-left: 252px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 62px; background: var(--side); color: #fff; display: flex; align-items: center; gap: 1rem; padding: 0 1.4rem; }
.top-title { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title svg { color: var(--side-on-ink); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.pill-online { display: inline-flex; align-items: center; gap: .35rem; background: #064e3b; color: #6ee7b7; border-radius: 6px; padding: .3rem .65rem; font-size: .85rem; font-weight: 600; }
.pill-online.off { background: #451a03; color: #fcd34d; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.icon-btn:hover { background: var(--side-2); color: #fff; text-decoration: none; }
.bell .dot { position: absolute; top: 2px; right: 0; background: #ef4444; color: #fff; font-size: .65rem; border-radius: 99px; padding: 0 .3rem; line-height: 1.2rem; min-width: 1.2rem; text-align: center; }
.who { text-align: right; line-height: 1.2; padding-left: .7rem; border-left: 1px solid rgba(255,255,255,.12); }
.who b { display: block; font-size: .88rem; }
.who small { color: var(--side-on-ink); font-size: .76rem; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 800; font-size: .9rem; border: 2px solid #a5b4fc; }
.avatar.sm { width: 32px; height: 32px; font-size: .78rem; border-width: 0; }
.burger { display: none; }
.content { padding: 1.6rem 1.8rem 3rem; width: 100%; max-width: 1400px; }
.side-backdrop { display: none; }
@media (max-width: 960px) {
  .side { transform: translateX(-100%); transition: transform .2s; }
  .nav-open .side { transform: none; }
  .nav-open .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
  .main-col { margin-left: 0; }
  .burger { display: inline-grid; }
  .who, .pill-online span { display: none; }
  .content { padding: 1rem; }
  .topbar { padding: 0 .7rem; gap: .5rem; }
}

/* ---------- Bandeau et titres ---------- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--hero); color: #fff; border-radius: 14px; padding: 1.5rem 1.6rem; margin-bottom: 1.4rem; box-shadow: 0 10px 26px rgba(5,55,31,.28); position: relative; overflow: hidden; padding-bottom: 2rem; }
.hero h1 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.6rem; color: #fff; }
.hero p { margin: .35rem 0 0; opacity: .9; }
.hero .btn { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); color: #fff; }
.hero .btn:hover { background: rgba(255,255,255,.25); }
.page-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-title h1 { margin: 0; }
.page-title p { margin: .2rem 0 0; }

/* ---------- Cartes et statistiques ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.4rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.08rem; font-weight: 700; margin: 0 0 1rem; }
.card-title svg { color: #f59e0b; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stat { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.3rem; color: var(--ink); box-shadow: var(--shadow); }
a.stat:hover { text-decoration: none; border-color: var(--indigo); }
.stat-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; }
.stat span { display: block; color: var(--muted); font-size: .88rem; }
.stat b { display: block; font-size: 1.45rem; line-height: 1.2; }
.tone-indigo .stat-ic { background: #e0e7ff; color: #4f46e5; } .tone-indigo { border-color: #c7d2fe; }
.tone-purple .stat-ic { background: #f3e8ff; color: #9333ea; } .tone-purple { border-color: #e9d5ff; }
.tone-blue .stat-ic { background: #dbeafe; color: #2563eb; } .tone-blue { border-color: #bfdbfe; }
.tone-amber .stat-ic { background: #fef3c7; color: #d97706; } .tone-amber { border-color: #fcd34d; }
.tone-green .stat-ic { background: #d1fae5; color: #059669; } .tone-green { border-color: #a7f3d0; }
.tone-red .stat-ic { background: #fee2e2; color: #dc2626; } .tone-red { border-color: #fecaca; }
.stats.center .stat { flex-direction: column; justify-content: center; text-align: center; gap: .2rem; }
.stats.center .stat b { font-size: 1.6rem; }
.tone-green b { color: #16a34a; } .tone-amber.big b { color: #d97706; }

/* ---------- Formulaires ---------- */
.stack { display: flex; flex-direction: column; gap: .9rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
.grid2 .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
label { display: block; font-weight: 500; font-size: .9rem; color: var(--ink); }
label > input, label > select, label > textarea, label > .with-ic { display: block; margin-top: .35rem; }
label.inline > input, label.inline > select { display: inline-block; margin-top: 0; }
label .req, .req { color: var(--ko); }
input, select, textarea { font: inherit; padding: .62rem .8rem; border: 1px solid var(--line2); border-radius: 8px; background: var(--input); color: var(--ink); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--brand); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--input-fill) inset; }
.with-ic { position: relative; display: block; }
.with-ic > svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.with-ic input { padding-left: 2.5rem; }
.with-ic .eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #9ca3af; cursor: pointer; padding: .2rem; }
.inline { display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.inline input, .inline select { width: auto; padding: .45rem .6rem; }
.form-section { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; margin: .4rem 0 .2rem; }
.form-section svg { color: var(--brand); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand); border-radius: 8px; padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--brand-d); text-decoration: none; }
.btn.block { display: flex; width: 100%; padding: .78rem 1rem; font-size: 1rem; }
.btn.sm { padding: .36rem .75rem; font-size: .86rem; }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.indigo { background: transparent; color: var(--indigo); border: 1.5px solid #c7d2fe; }
.btn.indigo:hover { background: #eef2ff; }
.btn.warn { background: transparent; color: #ea580c; border: 1.5px solid #fdba74; }
.btn.warn:hover { background: #fff7ed; }
.btn.danger { background: transparent; color: var(--ko); border: 1.5px solid #fca5a5; }
.btn.danger:hover { background: #fef2f2; }
.btn.danger.solid { background: var(--ko); color: #fff; }
.btn.soft-red { background: #fef2f2; color: var(--ko); border-color: #fef2f2; }
.btn[disabled], .btn.disabled { background: #d1d5db; border-color: #d1d5db; color: #fff; cursor: not-allowed; pointer-events: none; }

/* ---------- Messages et badges ---------- */
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid transparent; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.ko { background: var(--ko-bg); color: var(--ko); }
.flash.wait { background: var(--wait-bg); color: var(--wait); }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .14rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.ko { background: var(--ko-bg); color: var(--ko); }
.badge.wait { background: var(--wait-bg); color: var(--wait); }
.badge.off { background: var(--off-bg); color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .12rem .55rem; border-radius: 6px; background: #eef2ff; color: #4338ca; }
.chip.green { background: #ecfdf5; color: #047857; } .chip.blue { background: #eff6ff; color: #1d4ed8; }
:root[data-theme="dark"] .chip { background: #1e1b4b; color: #a5b4fc; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--th); font-weight: 600; }
tbody tr:hover td, table tr:hover td { background: var(--row-hover); }
tr.greyed td { color: #9ca3af; background: var(--off-bg); }
tr.greyed td .btn:not(.keep) { background: #d1d5db; border-color: #d1d5db; color: #fff; pointer-events: none; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.toolbar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.toolbar label { font-size: .83rem; }
.toolbar input, .toolbar select { width: auto; }
.search { position: relative; margin-bottom: 1.2rem; }
.search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.search input { padding-left: 2.6rem; }

/* ---------- Listes en cartes (coopératives, demandes) ---------- */
.list-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: .8rem; background: var(--card); }
.list-card h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .25rem; font-size: 1.02rem; }
.list-card .meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .88rem; }
.list-card .meta span { display: inline-flex; align-items: center; gap: .3rem; }
.list-card .chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.list-card .side-actions { display: flex; flex-direction: column; gap: .4rem; min-width: 118px; }
.list-card .side-actions .btn, .list-card .side-actions form .btn { width: 100%; }
.list-card .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 700px) { .list-card { flex-direction: column; align-items: stretch; } .list-card .side-actions { flex-direction: row; } }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tabs a { padding: .7rem 1.4rem; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; display: inline-flex; gap: .5rem; align-items: center; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on { color: var(--brand); border-color: var(--brand); }
.tabs .n { background: var(--ok-bg); color: var(--ok); border-radius: 99px; font-size: .75rem; padding: 0 .5rem; }

.empty { text-align: center; color: var(--muted); padding: 2.4rem 1rem; }
.notif { display: flex; gap: .9rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--row-hover); text-decoration: none; }
.notif.unread { background: #eef2ff; }
:root[data-theme="dark"] .notif.unread { background: #1e1b4b; }
.notif > .badge { align-self: flex-start; }
.notif .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #e0e7ff; color: #4f46e5; flex: none; }
.notif b { display: block; }
.notif small { color: var(--muted); }

dl.data { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: .4rem 1rem; margin: 0; }
dl.data dt { color: var(--muted); }
dl.data dd { margin: 0; font-weight: 500; }
.repeat-row { border-left: 3px solid #a7f3d0; padding: .3rem .8rem; margin: .5rem 0; }
.locked { position: relative; }
.locked::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: .55; border-radius: 12px; }
pre.json { background: #0f172a; color: #d6e8da; padding: 1rem; border-radius: 8px; overflow: auto; max-height: 420px; font-size: .82rem; }

/* ---------- Pages publiques (connexion, inscriptions) ---------- */
body.public { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #d1fae5 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #fde68a 0%, transparent 55%), var(--bg); }
:root[data-theme="dark"] body.public { background: var(--bg); }
.public-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth { width: 100%; max-width: 440px; background: var(--card); border-radius: 16px; padding: 2rem 2rem 1.8rem; box-shadow: 0 20px 50px rgba(15,23,42,.18); border: 1px solid var(--line); }
.auth.wide { max-width: 520px; }
.auth-logo { display: flex; justify-content: center; align-items: center; gap: .5rem; color: var(--indigo); font-weight: 800; margin-bottom: .6rem; }
.auth h1 { text-align: center; font-size: 1.65rem; margin: 0; }
.auth .sub { text-align: center; color: var(--muted); margin: .35rem 0 1.4rem; }
.auth-head { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.2rem; }
.auth-head h1 { text-align: left; }
.auth-head .sub { text-align: left; margin: .2rem 0 0; }
.back { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; padding-top: .45rem; white-space: nowrap; }
.divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .9rem; margin: 1.3rem 0 1rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line2); }
.auth .btn.ghost { width: 100%; margin-top: .65rem; padding: .7rem 1rem; }
.center-wrap { display: flex; justify-content: center; padding-top: 2rem; }
body.center { display: flex; justify-content: center; padding: 2rem 1rem; }
.narrow { width: 100%; max-width: 440px; }
.medium { width: 100%; max-width: 680px; }

/* ---------- Conformité ---------- */
table.checklist td { font-size: .9rem; }
tr.row-nc td { background: #fef2f2; }
:root[data-theme="dark"] tr.row-nc td { background: #2a0f12; }
.score-card { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 1rem; border-radius: 10px; background: var(--off-bg); }
.score-card b { display: block; font-size: 2rem; line-height: 1.1; }
.score-card.ok { background: var(--ok-bg); } .score-card.ok b { color: var(--ok); }
.score-card.wait { background: var(--wait-bg); } .score-card.wait b { color: var(--wait); }
.score-card.ko { background: var(--ko-bg); } .score-card.ko b { color: var(--ko); }
.score-card table.niv { width: auto; background: transparent; }
.score-card table.niv th, .score-card table.niv td { padding: .2rem .7rem; border-bottom: 1px solid rgba(0,0,0,.08); background: transparent; }
.bar { background: var(--line); border-radius: 4px; height: 10px; width: 140px; display: inline-block; vertical-align: middle; }
.bar > i { display: block; height: 10px; border-radius: 4px; background: var(--brand); }

/* Ajustements téléphone et thème sombre */
@media (max-width: 960px) {
  .topbar .avatar { display: none; }
  .hero { padding: 1.1rem 1.1rem; }
  .hero h1 { font-size: 1.25rem; }
  .stat { padding: 1rem; }
}
:root[data-theme="dark"] .btn.soft-red { background: #450a0a; border-color: #450a0a; color: #fca5a5; }
:root[data-theme="dark"] .btn.indigo:hover, :root[data-theme="dark"] .btn.warn:hover, :root[data-theme="dark"] .btn.danger:hover, :root[data-theme="dark"] .btn.ghost:hover { background: var(--side-2); }
:root[data-theme="dark"] .tone-indigo .stat-ic { background: #1e1b4b; } :root[data-theme="dark"] .tone-purple .stat-ic { background: #2e1065; }
:root[data-theme="dark"] .tone-blue .stat-ic { background: #172554; } :root[data-theme="dark"] .tone-amber .stat-ic { background: #451a03; }
:root[data-theme="dark"] .tone-green .stat-ic { background: #052e22; } :root[data-theme="dark"] .tone-red .stat-ic { background: #450a0a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.soft-red { background: #450a0a; border-color: #450a0a; color: #fca5a5; } }

/* Logo DATA COLLECT+ */
.auth-logo { font-size: 1.35rem; letter-spacing: .02em; color: #1e293b; margin-bottom: .9rem; }
:root[data-theme="dark"] .auth-logo { color: #e5e7eb; }
.auth-logo.small-logo { font-size: 1.05rem; justify-content: flex-start; margin-bottom: .6rem; }
.plus { color: var(--brand); font-weight: 900; }
.side-brand { letter-spacing: .02em; }
.side-brand .plus { color: #34d399; }

/* ---------- Activité des inspecteurs et fiches ---------- */
.grow { flex: 1; min-width: 0; }
.tabs { flex-wrap: wrap; }
.tabs .n.hot { background: var(--wait-bg); color: var(--wait); }
.badge.wait a, a.badge:hover { text-decoration: none; }
.chip.amber { background: #fef3c7; color: #b45309; } .chip.red { background: #fee2e2; color: #b91c1c; }
.sc-ok { color: #16a34a; } .sc-wait { color: #d97706; } .sc-ko { color: var(--ko); }
.avatar.green { background: linear-gradient(135deg, #10b981, #047857); border-color: #a7f3d0; }
.insp-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .9rem; background: var(--card); transition: border-color .15s; }
.insp-card:hover, .insp-card.has-wait { border-color: #6ee7b7; }
.insp-card[hidden] { display: none; }
.insp-head { display: flex; gap: .9rem; align-items: flex-start; padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.insp-head h3 { margin: 0 0 .25rem; font-size: 1.02rem; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.insp-head h3 > a:first-child { color: var(--ink); }
.insp-head .meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .85rem; }
.insp-head .meta span { display: inline-flex; align-items: center; gap: .3rem; }
.insp-head .chev { color: var(--muted); padding: .3rem; }
.act-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55rem; }
@media (max-width: 900px) { .act-tiles { grid-template-columns: repeat(3, 1fr); } }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .7rem .3rem; border-radius: 9px; border: 1px solid transparent; text-align: center; }
.act:hover { text-decoration: none; filter: brightness(.97); border-color: currentColor; }
.act span { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.act b { font-size: 1.35rem; line-height: 1.3; }
.t-blue { background: #eff6ff; color: #2563eb; } .t-cyan { background: #ecfeff; color: #0891b2; } .t-indigo { background: #eef2ff; color: #4f46e5; }
.t-amber { background: #fffbeb; color: #d97706; } .t-green { background: #f0fdf4; color: #16a34a; } .t-purple { background: #faf5ff; color: #9333ea; border-color: #e9d5ff; }
:root[data-theme="dark"] .act { background: var(--side-2); }
.insp-foot { display: flex; justify-content: space-between; gap: .6rem 1rem; align-items: flex-start; flex-wrap: wrap; margin-top: .75rem; }
.insp-foot .chips { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.manage > summary, .more-filters > summary, details#ajout > summary { cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; color: var(--brand); font-weight: 600; font-size: .9rem; list-style: none; }
.manage[open] { flex-basis: 100%; border-top: 1px dashed var(--line); padding-top: .7rem; }
.manage[open] > summary { margin-bottom: .6rem; }
details#ajout > summary { color: var(--ink); font-size: 1rem; }
.filterbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.seg { display: inline-flex; background: var(--off-bg); border-radius: 9px; padding: .25rem; gap: .15rem; }
.seg a { padding: .4rem .85rem; border-radius: 7px; color: var(--ink); font-size: .87rem; font-weight: 500; }
.seg a:hover { text-decoration: none; background: var(--card); }
.seg a.on { background: var(--brand); color: #fff; }
.more-filters { padding: .8rem 1.1rem; }
.bulkbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .55rem .9rem; border: 1px dashed var(--line2); border-radius: 10px; margin-bottom: .8rem; }
.list-card.fiche { align-items: center; }
.list-card.fiche h3 { flex-wrap: wrap; font-size: 1.05rem; }
.list-card.fiche h3 > a { color: var(--ink); }
.fiche-main { display: flex; gap: .8rem; align-items: flex-start; }
.fiche-main > input { margin-top: .3rem; width: 18px; height: 18px; }
.fiche-main > div > div { margin-top: .15rem; }
.insp-link { color: #7c3aed; }
.list-card.fiche .row-actions { justify-content: flex-end; }
.card.approval.validee { border-color: #a7f3d0; background: var(--brand-soft); }
:root[data-theme="dark"] .card.approval.validee { background: var(--card); }
.hero .btn.approve-all { background: #fff; color: var(--brand-d); border-color: #fff; font-weight: 700; }
.hero .btn.approve-all:hover { background: var(--brand-soft); }
.hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hero .btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.75); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.22); }
dialog.dlg { border: 0; border-radius: 14px; padding: 1.4rem 1.5rem; width: min(560px, calc(100vw - 32px)); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.dlg::backdrop { background: rgba(15,23,42,.55); }
dialog.dlg h2 { display: flex; gap: .5rem; align-items: center; margin: 0 0 .6rem; color: var(--brand-d); }
.side-nav .nav-label { margin: .9rem .9rem .3rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #8b93a7; font-weight: 700; }
.act-table { margin: 0; box-shadow: none; }
.act-table table td, .act-table table th { padding: .45rem .6rem; text-align: center; }
.act-table table td:first-child, .act-table table th:first-child { text-align: left; }
.act-table td a b { display: inline-flex; gap: .35rem; align-items: center; color: var(--ink); }
.act-table a.n { display: inline-block; min-width: 2.2rem; padding: .2rem .5rem; border-radius: 7px; font-weight: 700; }
.act-table a.n:hover { text-decoration: none; filter: brightness(.95); }
.t-red { background: #fef2f2; color: #dc2626; }
.apk-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-color: #a7f3d0; }
.export-form .choix { display: flex; flex-direction: column; gap: .55rem; }
.export-form .opt { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 500; }
.export-form .opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.export-form .opt svg { color: var(--brand); margin-top: .15rem; }
.btn.big { padding: .8rem 1.6rem; font-size: 1.05rem; }
.recap table td, .recap table th { white-space: nowrap; }
.recap table td:first-child { white-space: normal; min-width: 260px; }
.recap tr.rub td { background: var(--brand-soft); color: var(--brand-d); font-weight: 700; }
.recap tr.tot td { background: var(--off-bg); }
/* ---------- Planification ---------- */
.type-seg, .dest-box .seg { display: inline-flex; flex-wrap: wrap; }
.seg label { display: inline-flex; gap: .4rem; align-items: center; padding: .45rem .9rem; border-radius: 7px; cursor: pointer; font-weight: 500; font-size: .9rem; }
.seg label:has(input:checked) { background: var(--brand); color: #fff; }
.seg label input { display: none; }
.planif-form .grid2 { margin-top: 1rem; }
.dest-box { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--line2); border-radius: 10px; }
.insp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .35rem 1rem; }
.chip.as-btn { border: 0; cursor: pointer; font: inherit; font-size: .8rem; margin: .1rem .15rem; }
.chip.as-btn:hover { text-decoration: none; filter: brightness(.95); }
.list-card.planif { align-items: flex-start; }
.list-card.planif.activite { border-left: 4px solid var(--brand); }
.list-card.planif.message { border-left: 4px solid #6366f1; }
.planif-texte { margin: .6rem 0; white-space: normal; }
.dest { display: inline-block; padding: .05rem .45rem; margin: .1rem; border-radius: 6px; background: var(--off-bg); color: var(--muted); }
.dest.lu { background: var(--ok-bg); color: var(--ok); }

/* Activation des fiches par coopérative */
.chip.purple { background: #f3e8ff; color: #7e22ce; }
a.chip:hover { text-decoration: none; filter: brightness(.97); }
.activ-table th.c, .activ-table td.c { text-align: center; }
.activ-table th small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.activ-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.activ-box { display: inline-flex; padding: .3rem; cursor: pointer; }
.fiche-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.fiche-choix label { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; opacity: .6; }
.fiche-choix label.on { opacity: 1; border-color: var(--brand); background: var(--brand-soft); }
.fiche-choix input { width: 19px; height: 19px; margin-top: .1rem; accent-color: var(--brand); }
.fiche-choix b { display: block; font-size: .92rem; } .fiche-choix small { color: var(--muted); }
.side-nav a.off { opacity: .45; }
.side-nav a.off .lock { font-size: .68rem; border: 1px solid currentColor; border-radius: 99px; padding: 0 .4rem; }
.notice-off { display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; border-radius: 10px; background: var(--off-bg); color: var(--muted); margin-bottom: 1rem; }

/* Procédure d'approbation : décisions du comité, approbation par jour */
.decision-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.decision-choix .dc { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 500; }
.decision-choix .dc input { margin-top: .2rem; accent-color: var(--brand); }
.decision-choix .dc span { display: flex; flex-direction: column; gap: .15rem; }
.decision-choix .dc small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.decision-choix .dc.approuve { border-left: 4px solid #16a34a; }
.decision-choix .dc.averti { border-left: 4px solid #d97706; }
.decision-choix .dc.sanction { border-left: 4px solid var(--ko); }
.decision-choix .dc:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.notice-histo { background: var(--off-bg, #f4f5f7); border-radius: 10px; padding: .6rem .8rem; margin: .4rem 0; }
.notice-histo.warn { background: var(--ko-bg); }
.dlg .regle { background: var(--off-bg); border-radius: 8px; padding: .55rem .7rem; margin: .4rem 0 .6rem; line-height: 1.6; }
.jours-table th.c, .jours-table td.c { text-align: center; }
.jours-table tr.tot td { background: var(--th, #f6f7f9); }
.decision-choix .dc .chip { align-self: flex-start; }

/* Logo AFPA en bas du menu */
.side-afpa { display: flex; align-items: center; gap: .55rem; padding: .45rem 1.1rem .7rem; opacity: .75; }
.side-afpa img { width: 30px; height: auto; border-radius: 6px; background: #fff; flex-shrink: 0; }
.side-afpa small { color: var(--side-ink); font-size: .62rem; line-height: 1.25; letter-spacing: .01em; }
.side-afpa:hover { opacity: 1; }

/* Logo de la coopérative */
.logo-zone { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.logo-apercu { width: 120px; height: 90px; border: 1px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; flex-shrink: 0; }
.logo-apercu img { max-width: 110px; max-height: 80px; object-fit: contain; }
.side-logo { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; flex-shrink: 0; }

/* Formations BPA */
.dl2 { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: .45rem 1rem; margin: 0; }
.dl2 dt { color: var(--muted); font-size: .85rem; } .dl2 dd { margin: 0; font-weight: 600; }
@media (max-width: 760px) { .dl2 { grid-template-columns: max-content 1fr; } }
.prog-table th.c, .prog-table td.c { text-align: center; width: 1%; }
.prog-table tr.on td { background: var(--brand-soft); }
.prog-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); }
.nowrap { white-space: nowrap; }
.sticky-save { position: sticky; bottom: 0; padding: .8rem 0; background: linear-gradient(transparent, var(--bg) 35%); text-align: right; z-index: 2; }
.sig-mini { height: 34px; max-width: 120px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.bpa-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; text-decoration: none; color: inherit; border-left: 4px solid var(--brand); }
.bpa-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.bpa-card .grow { display: flex; flex-direction: column; gap: .15rem; min-width: 220px; }
.bpa-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.bpa-nums { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.bpa-nums span { display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); }
.bpa-nums b { font-size: 1.25rem; color: var(--ink); }
.bpa-nums span.hot b { color: var(--wait); }

/* Localisation de l'inspecteur */
.geo-card { border-left: 4px solid var(--muted); }
.geo-card.ok { border-left-color: var(--ok); } .geo-card.wait { border-left-color: var(--wait); } .geo-card.ko { border-left-color: var(--ko); }
.geo-card h2 { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Récapitulatifs */
.recap-filtres label { display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); gap: .15rem; }
.recap-filtres input, .recap-filtres select { min-width: 130px; }
.recap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: .32rem .2rem; border-bottom: 1px solid var(--line); font-size: .88rem; vertical-align: top; }
table.kv td:last-child { text-align: right; }
.recap table tr.tot td { background: var(--th, #f6f7f9); }
.recap-card { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Identité visuelle : vert cacaoyer, ruban or et bleu */
.logo-cacao { border-radius: 22%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 100%; background: url(img/ruban.svg) no-repeat right bottom / 100% 100%; pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.side-brand { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #fcd34d, #f59e0b 55%, #0b4f8a) 1; }
.side-brand .plus { color: var(--or); }
.auth { position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #0a5c3a, #11804f 35%, #f59e0b 65%, #0b4f8a); }
.avatar { background: linear-gradient(135deg, #0a5c3a, #11804f) !important; color: #fff !important; border-color: #f59e0b !important; }
.auth-logo { color: #064e3b; }
.auth-logo .plus, .plus { color: var(--or); }
@media (max-width: 760px) { .hero::after { width: 100%; height: 45%; opacity: .9; } }

/* Licence : décompte, horloge, calendrier (bande sous la barre du haut) */
.lic-bar { position: sticky; top: 62px; z-index: 29; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem 1.4rem; background: linear-gradient(90deg, #04301b, #0a3f27); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #fcd34d, #f59e0b 55%, #0b4f8a) 1; }
.lic-bar > span:not(.lic-espace), .lic-cal { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .84rem; padding: .28rem .7rem; border-radius: 99px; background: rgba(255,255,255,.08); color: #e2f3ea; border: 1px solid rgba(255,255,255,.14); }
.lic-espace { flex: 1; }
.lic-bar b { font-variant-numeric: tabular-nums; font-weight: 700; }
.lic-compte.ok { background: rgba(52,211,153,.15) !important; border-color: rgba(52,211,153,.45) !important; color: #bbf7d0 !important; }
.lic-compte.rouge { background: #dc2626 !important; border-color: #fca5a5 !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(220,38,38,.3); animation: licPulse 1.6s infinite; }
@keyframes licPulse { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.1); } }
.lic-bar .lic-msg { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; font-weight: 700; }
.lic-bar .lic-msg[hidden] { display: none !important; }
.lic-cal { cursor: pointer; font: inherit; }
.lic-cal:hover { background: rgba(255,255,255,.16); }
.lic-pop { position: absolute; top: calc(100% + 6px); right: 1.4rem; z-index: 60; width: 270px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: .7rem; }
.lic-pop[hidden] { display: none; }
.lic-pop-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; text-transform: capitalize; }
.lic-pop-tete button, .lic-pop-pied button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: .1rem .55rem; cursor: pointer; font: inherit; }
.lic-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .82rem; }
.lic-grille i { font-style: normal; font-weight: 700; color: var(--muted); font-size: .72rem; padding: .2rem 0; }
.lic-grille span { padding: .3rem 0; border-radius: 7px; }
.lic-grille span.auj { background: #0a5c3a; color: #fff; font-weight: 700; }
.lic-grille span.fin { background: #dc2626; color: #fff; font-weight: 700; }
.lic-pop-pied { margin-top: .5rem; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.lic-pop-pied .pastille { width: 10px; height: 10px; border-radius: 3px; background: #dc2626; display: inline-block; }
@media (max-width: 900px) { .lic-bar { top: 62px; padding: .4rem .7rem; } .lic-bar .lic-lib { display: none; } }
@media (max-width: 560px) { .lic-espace { display: none; } .lic-bar .lic-msg { white-space: normal !important; } }

/* Licence expirée : tout est grisé (consultation seulement) */
.lic-fin-bandeau { display: flex; gap: .7rem; align-items: center; margin: 1rem 1.4rem 0; padding: .9rem 1.1rem; border-radius: 12px; background: #dc2626; color: #fff; box-shadow: 0 8px 20px rgba(220,38,38,.25); }
.licence-expiree .content, .licence-expiree .side-nav, .licence-expiree .side-user { filter: grayscale(1); opacity: .6; }
.licence-expiree .content form, .licence-expiree .content button, .licence-expiree .content .btn, .licence-expiree .content input, .licence-expiree .content select, .licence-expiree .content textarea, .licence-expiree .content dialog { pointer-events: none; }

/* Tableau de bord d'une coopérative (administrateur système) */
.coop-onglets { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 1.2rem; }
.coop-onglets a { padding: .6rem .9rem; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; display: inline-flex; gap: .4rem; align-items: center; }
.coop-onglets a.on { color: var(--brand-d); border-bottom-color: var(--brand); }
.licence-card { border-left: 6px solid #0a5c3a; }
.licence-card.rouge { border-left-color: #dc2626; }
.licence-card .lic-grand { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.licence-card.rouge .lic-grand { color: #dc2626; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.act-grid .card { margin: 0; }
.act-grid .card h3 { margin: 0 0 .5rem; font-size: 1rem; display: flex; gap: .45rem; align-items: center; }

/* Photos de la classe CEP (formations BPA) */
.cep-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cep-galerie figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.cep-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #000; }
.cep-galerie figcaption { padding: .55rem .7rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }