/* Engelisboard — composants. Aucune couleur littérale ici : tout passe par les variables de tokens.css. */
[x-cloak] { display: none !important; }
body { background: var(--engelis-bg); font-family: var(--bs-body-font-family); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand, .brand-mini, .kpi-val { font-family: var(--font-display); letter-spacing: -.02em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; color: var(--engelis-navy-darker); margin: 0; line-height: 1.1; }
h2 { font-size: 1.05rem; font-weight: 700; color: var(--engelis-navy-darker); margin: 0; }
.muted { color: var(--engelis-muted); }
.skip { position: absolute; left: -999px; color: var(--engelis-navy); } .skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--white); color: var(--engelis-navy); font-weight: 700; padding: .75rem 1.25rem; min-height: 2.75rem; border-radius: 10px; box-shadow: var(--shadow-skip); }
:focus-visible { outline: 3px solid var(--engelis-orange); outline-offset: 2px; }

/* Boutons */
.btn { border-radius: 10px; font-weight: 600; padding: .55rem 1rem; min-height: 2.75rem; transition: transform .15s ease, background-color .15s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--engelis-orange); color: var(--ink-on-accent); border: 0; }
.btn-accent:hover { background: var(--engelis-orange-soft); color: var(--ink-on-accent); }
.btn-outline-navy { border: 1.5px solid var(--engelis-navy); color: var(--engelis-navy); background: transparent; }
.btn-outline-navy:hover { background: var(--engelis-navy); color: var(--white); }
.btn-primary { background: var(--engelis-navy); border-color: var(--engelis-navy); }
.btn-ghost { background: transparent; border: 0; color: var(--engelis-light); min-width: 2.75rem; min-height: 2.75rem; border-radius: 10px; }
.btn-ghost:hover { background: var(--on-dark-3); color: var(--white); }
.form-control, .form-select { border-radius: 10px; border-color: var(--field-line); padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--engelis-navy); box-shadow: var(--shadow-focus); }
.form-label { font-weight: 600; font-size: .85rem; }
.form-check-input:checked { background-color: var(--engelis-navy); border-color: var(--engelis-navy); }

/* Structure : rail navy (desktop) / tiroir (mobile) */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; height: 3.5rem; padding: 0 1rem; background: var(--engelis-navy-dark); color: var(--white); }
.brand-mini { font-size: 1.15rem; font-weight: 500; } .brand-mini b, .brand b { color: var(--engelis-orange); font-weight: 700; }
.burger { background: none; border: 0; color: var(--white); font-size: 1.25rem; width: 2.75rem; height: 2.75rem; border-radius: 10px; }
.rail { position: fixed; inset: 0 auto 0 0; width: min(18rem, 84vw); z-index: 50; background: linear-gradient(180deg, var(--engelis-navy-dark), var(--engelis-navy-darker)); color: var(--engelis-light);
  display: flex; flex-direction: column; padding: 1.25rem .9rem; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow-y: auto; }
.rail.is-open { transform: none; box-shadow: var(--shadow-rail); }
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--white); text-decoration: none; font-size: 1.35rem; font-weight: 500; padding: .25rem .5rem 1.25rem; }
.brand:hover { color: var(--white); }
.logo-bg { fill: var(--engelis-orange); }
.logo-line { fill: none; stroke: var(--engelis-navy-darker); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-group { display: flex; flex-direction: column; gap: .15rem; }
.rail-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rail-muted); margin: 1.5rem .75rem .5rem; font-weight: 700; }
.rail-link { display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; border-radius: 10px; color: var(--engelis-light); text-decoration: none; font-weight: 500; position: relative; transition: background .15s, color .15s; }
.rail-link i { width: 1.2rem; text-align: center; opacity: .8; }
.rail-link:hover { background: var(--on-dark-1); color: var(--white); }
.rail-link.is-active { background: var(--active-on-dark); color: var(--white); }
.rail-link.is-active::before { content: ''; position: absolute; left: -.9rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--engelis-orange); }
.rail-link.is-active i { color: var(--engelis-orange-soft); opacity: 1; }
.rail-user { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--on-dark-3); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.who { display: flex; align-items: center; gap: .65rem; min-width: 0; } .who strong { display: block; font-size: .88rem; color: var(--white); line-height: 1.1; } .who small { color: var(--rail-soft); }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--engelis-orange); color: var(--engelis-navy-darker); display: grid; place-items: center; font-weight: 700; flex: none; }
.main { padding: 1.25rem 1rem 4rem; max-width: 84rem; }
@media (min-width: 992px) {
  .topbar, .scrim { display: none !important; }
  .rail { transform: none; width: var(--rail-w); }
  .main { margin-left: var(--rail-w); padding: 2.25rem 2.5rem 4rem; }
}

/* En-têtes de page */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.subtitle { color: var(--engelis-muted); margin: .5rem 0 0; max-width: 62ch; text-wrap: pretty; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.section-title { font-size: 1rem; margin: 2rem 0 .9rem; }
.scope-note { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: .6rem .9rem; font-size: .88rem; margin-bottom: 1.25rem; }

/* Chiffres clés : un montant héros, quatre tuiles. Jamais de coupure au milieu d'un nombre. */
.kpis-wrap { container-type: inline-size; margin-bottom: 1rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--engelis-navy); border-radius: var(--radius); overflow: hidden; color: var(--white); }
.kpi { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid var(--on-dark-2); min-width: 0; }
.kpi:nth-child(even) { border-left: 1px solid var(--on-dark-2); }
.kpi.lead { grid-column: 1 / -1; background: var(--engelis-navy-darker); border-top: 0; border-left: 0; padding: 1.25rem 1.25rem 1.1rem; }
.kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy-soft); font-weight: 600; }
.kpi-val { font-size: clamp(1.1rem, 4.6cqi, 1.6rem); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.kpi.lead .kpi-val { font-size: clamp(2rem, 9cqi, 3.2rem); color: var(--white); }
.kpi-var { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 1.6rem; }
.kpi-cmp { font-size: .8rem; color: var(--on-navy-soft); }
.v-compact { display: none; }
@container (min-width: 620px) {
  /* Une seule ligne : le CA en tête, puis les quatre autres indicateurs */
  .kpis { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .kpi { padding: 1rem .85rem; border-top: 0; border-left: 1px solid var(--on-dark-2); }
  .kpi:nth-child(even) { border-left: 1px solid var(--on-dark-2); }
  .kpi.lead { grid-column: auto; border-left: 0; padding: 1.1rem 1rem; }
  .kpi-val { font-size: clamp(.95rem, 2cqi, 1.5rem); }
  .kpi.lead .kpi-val { font-size: clamp(1.4rem, 3cqi, 2.6rem); }
}
/* Entre 620 et 859 px de large, la marge passe en format compact pour ne jamais être coupée */
@container (min-width: 620px) and (max-width: 859px) { .v-full { display: none; } .v-compact { display: inline; } }
.insight { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: 0 0 1.25rem; padding: .25rem .25rem 0; font-size: .95rem; }
.insight i { margin-right: .35rem; color: var(--engelis-navy); } .insight .watch, .insight .watch i { color: var(--warn-ink); }
.kpis .var { background: var(--on-dark-2); }
.kpis .var-up { color: var(--up-on-dark); } .kpis .var-down { color: var(--down-on-dark); } .kpis .var-flat, .kpis .var-na { color: var(--flat-on-dark); }

.var { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.var-up { color: var(--up); background: var(--ok-bg); } .var-down { color: var(--down); background: var(--ko-bg); }
.var-flat, .var-na { color: var(--engelis-muted); background: var(--surface-3); }

/* Panneaux */
.panel { background: var(--engelis-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-panel); }
.panel.p-0 { overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.link-sm { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-size: .9rem; font-weight: 600; }
.grid-main, .grid-two { display: grid; gap: 1.25rem; } .grid-main .panel, .grid-two .panel { margin-bottom: 0; } .grid-two { margin-top: 1.25rem; }
@media (min-width: 1100px) { .grid-main { grid-template-columns: 1.7fr 1fr; } .grid-two { grid-template-columns: 1fr 1fr; } }
.chart-box { position: relative; height: 18rem; } .chart-tall { height: 24rem; }
.legend { font-size: .82rem; color: var(--engelis-muted); display: flex; align-items: center; gap: .35rem; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; } .dot-navy { background: var(--engelis-navy); } .dot-prev { background: var(--series-prev); }

/* Classements : rang, nom (lien vers l'explorateur), valeur compacte, variation ; la barre n'est qu'un renfort visuel */
.ranking { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .25rem; }
.ranking li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; gap: .3rem .6rem; align-items: center; }
.rk-rank { color: var(--engelis-muted); font-weight: 600; font-size: .85rem; text-align: right; }
.rk-name { display: flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--bs-body-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name:hover { color: var(--engelis-navy); text-decoration: underline; text-underline-offset: 3px; }
.rk-val { font-weight: 700; text-align: right; } .rk-var { min-width: 6.5rem; text-align: right; }
progress.rk-bar { grid-column: 2 / -1; width: 100%; height: .4rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: var(--surface-2); color: var(--engelis-navy); }
progress.rk-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 6px; }
progress.rk-bar::-webkit-progress-value { background: var(--engelis-navy); border-radius: 6px; }
progress.rk-bar::-moz-progress-bar { background: var(--engelis-navy); border-radius: 6px; }
.share-bar { display: block; width: 100%; height: 1.1rem; border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.share-seg-0, .sw-0 { fill: var(--share-1); background: var(--share-1); } .share-seg-1, .sw-1 { fill: var(--share-2); background: var(--share-2); }
.share-seg-2, .sw-2 { fill: var(--share-3); background: var(--share-3); } .share-seg-3, .sw-3 { fill: var(--share-4); background: var(--share-4); }
.share-seg-4, .sw-4 { fill: var(--share-5); background: var(--share-5); } .share-seg-5, .sw-5 { fill: var(--share-6); background: var(--share-6); }
.share-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .share-list li { display: grid; grid-template-columns: .8rem minmax(0, 1fr) 4.5rem 5.5rem; gap: .6rem; align-items: center; }
.swatch { width: .8rem; height: .8rem; border-radius: 3px; } .share-pct { font-weight: 700; text-align: right; } .share-val { text-align: right; color: var(--engelis-muted); }
@media (max-width: 420px) { .rk-var { min-width: 0; } .ranking li { grid-template-columns: 1.5rem minmax(0, 1fr) auto; } .rk-var { grid-column: 2 / -1; text-align: left; } }
/* Reportings */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.rcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .4rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--engelis-navy); color: inherit; }
.rcard strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--engelis-navy-darker); line-height: 1.2; }
.rcard-metric { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--engelis-orange); font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .5rem; }
.tag { font-size: .75rem; font-weight: 600; background: var(--surface-3); color: var(--engelis-navy); border-radius: 999px; padding: .15rem .6rem; } .tag-accent { background: var(--accent-bg); color: var(--warn-ink); }

/* Explorateur */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .9rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: .75rem; align-items: end; }
.ctl-metric { grid-column: 1 / -1; } .ctl-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--engelis-muted); margin-bottom: .35rem; }
.ctl-switch { padding-bottom: .5rem; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface-3); border-radius: 11px; padding: 3px; gap: 2px; }
.seg-opt { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: 0 .95rem; border-radius: 9px; font-weight: 600; font-size: .88rem; color: var(--engelis-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-opt:hover { color: var(--engelis-navy); } .seg-opt.on { background: var(--engelis-navy); color: var(--white); box-shadow: var(--shadow-seg); }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--engelis-orange); outline-offset: 2px; }
.seg-sm .seg-opt { font-size: .8rem; }
fieldset.ctl, fieldset.ms-auto { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset legend.ctl-label { float: none; width: auto; padding: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; } .filters .ctl-label { margin: 0 .25rem 0 0; }
.ms { position: relative; } .ms-btn { min-height: 2.4rem; background: var(--white); border: 1.5px solid var(--field-line); border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: .88rem; color: var(--engelis-navy); display: flex; gap: .5rem; align-items: center; }
.ms-btn.has { border-color: var(--engelis-orange); background: var(--warn-bg); } .ms-btn i { font-size: .7rem; opacity: .6; }
.ms-count { background: var(--engelis-orange); color: var(--ink-on-accent); border-radius: 999px; font-size: .72rem; min-width: 1.3rem; text-align: center; padding: 0 .35rem; }
.ms-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 15rem; max-height: 18rem; overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: .4rem; }
.ms-opt { display: flex; gap: .55rem; align-items: center; padding: .4rem .55rem; border-radius: 8px; cursor: pointer; font-size: .9rem; } .ms-opt:hover { background: var(--surface-1); }
.ms-opt input { accent-color: var(--engelis-navy); width: 1rem; height: 1rem; }
.ms-search { margin: .25rem .25rem .4rem; width: calc(100% - .5rem); }
.ms-actions { display: flex; border-top: 1px solid var(--line); margin-top: .3rem; }
.ms-clear { flex: 1; min-height: 2.5rem; border: 0; background: none; color: var(--engelis-navy); font-weight: 700; font-size: .82rem; padding: .5rem; border-radius: 8px; }
.ms-clear:hover { background: var(--surface-1); }
.result { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; transition: opacity .2s; } .result.loading { opacity: .55; }
.result-kpis { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-end; margin-bottom: 1rem; }
.result-kpis .kpi-label { display: block; color: var(--engelis-muted); } .result-kpis .kpi-val { color: var(--engelis-navy-darker); font-size: 2rem; } .kpi-val-sub { color: var(--engelis-muted) !important; }
.state { background: var(--ko-bg); color: var(--down); padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; }
.table-wrap { overflow: auto; margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; max-height: 32rem; }
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .88rem; white-space: nowrap; }
.tbl th, .tbl td { padding: .55rem .85rem; border-bottom: 1px solid var(--surface-2); } .tbl thead th { background: var(--surface-1); position: sticky; top: 0; z-index: 2; font-weight: 700; color: var(--engelis-navy-darker); }
.tbl .num { text-align: right; } .tbl .strong { font-weight: 700; } .tbl .sub { color: var(--engelis-muted); }
.tbl .sticky-col { position: sticky; left: 0; background: var(--white); z-index: 1; text-align: left; font-weight: 600; box-shadow: 1px 0 0 var(--surface-2); } .tbl thead .sticky-col { background: var(--surface-1); z-index: 3; }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--row-hover); }

/* Administration */
.form-wrap { max-width: 78rem; } .scope-box { border: 1px solid var(--line); border-radius: 12px; padding: .6rem; max-height: 15rem; overflow: auto; } .scope-box legend { float: none; width: auto; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 0 .4rem; margin: 0; color: var(--engelis-muted); }
.fusion-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--engelis-navy); color: var(--white); border-radius: 12px; padding: .6rem 1rem; margin-bottom: 1rem; opacity: .55; transition: opacity .2s; } .fusion-bar.on { opacity: 1; }
.dup { border-color: var(--warn-line); background: var(--warn-panel); }
.dup-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0 1rem; position: sticky; top: 0; z-index: 5; background: var(--warn-panel); border-bottom: 1px solid var(--warn-line); }
.dup-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dup-titre { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.dup-list { display: grid; gap: .75rem; max-height: 32rem; overflow: auto; padding-right: .25rem; }
.dup-group { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; margin: 0; min-width: 0; }
.dup-head { display: flex; gap: .65rem; align-items: center; min-height: 2.75rem; cursor: pointer; }
.dup-members { list-style: none; margin: 0; padding: 0 0 0 1.75rem; }
.dup-member { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-height: 2.5rem; cursor: pointer; }
.dup-name { font-weight: 600; } .dup-data { font-size: .85rem; }
.col-fusion { width: 3.5rem; }
.fusion-hint { flex: 1; font-size: .85rem; color: var(--on-navy-soft); }
.fusion-bar .btn:disabled { opacity: .6; }
.cell-detail { max-width: 32rem; }
.table > :not(caption) > * > * { padding: .75rem 1rem; } table.dt thead th { color: var(--engelis-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
div.dt-container { padding: 1rem; }
.empty { text-align: center; padding: 5rem 1rem; } .empty h1 { margin-bottom: 1rem; }

/* Connexion */
.login-body { display: grid; min-height: 100vh; background: var(--engelis-bg); }
.login-art { background: radial-gradient(120% 90% at 20% 0%, var(--engelis-navy) 0%, var(--engelis-navy-darker) 70%); color: var(--white); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; min-height: 15rem; }
.login-word { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 4vw, 4rem); font-weight: 500; letter-spacing: -.03em; } .login-word b { color: var(--engelis-orange); }
.login-chart { position: absolute; inset: auto 0 4rem 0; width: 100%; height: 42%; opacity: .95; }
.login-line-1 { fill: none; stroke: var(--engelis-orange); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.login-line-2 { fill: none; stroke: var(--engelis-light); stroke-opacity: .35; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; }
.login-tag { position: relative; font-size: 1.05rem; color: var(--engelis-light); margin: 0; }
.login-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
.login-card { width: min(24rem, 100%); background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-login); } .login-card h1 { font-size: 1.8rem; }
@media (min-width: 900px) { .login-body { grid-template-columns: 1.15fr 1fr; } .login-art { padding: 3rem; } }

/* Imports & clés API */
.tag-ok { background: var(--ok-bg); color: var(--up); } .tag-ko { background: var(--ko-bg); color: var(--down); }
.drop { display: grid; gap: 1rem; } .drop-form { display: grid; gap: 1rem; align-items: end; } @media (min-width: 800px) { .drop-form { grid-template-columns: 1fr auto; } }
.format summary { cursor: pointer; font-weight: 700; color: var(--engelis-navy); } .format[open] summary { margin-bottom: .75rem; }
.kpis-import { background: var(--white); color: var(--bs-body-color); border: 1px solid var(--line); } .kpis-import .kpi { border-color: var(--line); } .kpis-import .kpi-label { color: var(--engelis-muted); }
.kpis-import .kpi-val { color: var(--engelis-navy-darker); font-size: 1.35rem; } .kpis-import .kpi-txt { font-size: 1rem; } .kpis-import .kpi:first-child { background: transparent; }
@media (min-width: 900px) { .kpis-import { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.panel h2 i { margin-right: .4rem; } .panel-ko { border-color: var(--danger-line); } .panel-ko h2 { color: var(--down); } .panel-warn { border-color: var(--warn-line); background: var(--warn-panel); } .panel-warn h2 i { color: var(--engelis-orange); }
.plain { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; } .alerts li { display: flex; gap: .6rem; align-items: baseline; } .alerts .warn i { color: var(--engelis-orange); } .alerts .info i { color: var(--engelis-navy); }
.new-block { border-top: 1px solid var(--line); padding: .75rem 0; } .new-block:first-of-type { border-top: 0; } .new-block summary { cursor: pointer; } .new-block .plain { max-height: 14rem; overflow: auto; padding-left: 1rem; }
.action-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .75rem; background: var(--frost); backdrop-filter: blur(6px); padding: 1rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }
.result-banner { display: flex; gap: 1rem; align-items: center; background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .result-banner i { font-size: 1.6rem; color: var(--up); } .result-banner span { display: block; }
.key-banner { background: var(--warn-bg); border-color: var(--warn-line); } .key-banner i { color: var(--engelis-orange); }
code.key { display: block; margin-top: .4rem; font-size: 1rem; padding: .5rem .75rem; background: var(--white); border: 1px dashed var(--engelis-orange); border-radius: 8px; user-select: all; word-break: break-all; }
pre.code { background: var(--engelis-navy-darker); color: var(--engelis-light); padding: 1rem 1.25rem; border-radius: 12px; overflow: auto; font-size: .82rem; }
.tbl .text-start { text-align: left; white-space: normal; }

.btn-sm { min-height: 2.25rem; }

/* Explorateur : mode lecture, puces de filtres, états */
.tags-line { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; } .tags-line:empty { display: none; }
.tag-mod { background: var(--warn-bg); color: var(--warn-ink); }
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: 1rem; }
.btn-link { color: var(--engelis-navy); font-weight: 600; text-decoration: none; } .btn-link:hover { color: var(--engelis-orange); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: .15rem; background: var(--white); border: 1.5px solid var(--field-line); border-radius: 999px; padding: 0 .2rem 0 .8rem; min-height: 2.25rem; font-size: .85rem; font-weight: 600; }
.chip-dim { color: var(--engelis-muted); font-weight: 500; } .chip button { width: 2rem; height: 2rem; border: 0; background: none; border-radius: 50%; color: var(--engelis-muted); } .chip button:hover { background: var(--surface-2); color: var(--down); }
.toast-pill { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; background: var(--engelis-navy-darker); color: var(--white); padding: .7rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow-toast); margin: 0; }
.hint { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--engelis-muted); } .hint-warn { color: var(--warn-ink); font-weight: 600; }
.switch-row { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding-left: 0; margin: 0; } .switch-row .form-check-input { float: none; margin: 0; flex: none; } .switch-row label { cursor: pointer; padding: .5rem 0; font-weight: 600; }
.empty-state { text-align: center; padding: 3rem 1rem; } .empty-state i { font-size: 2rem; color: var(--engelis-muted); margin-bottom: .75rem; } .empty-state p { margin: 0 0 .4rem; }
.pill-busy { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--engelis-muted); }
.save-summary { background: var(--surface-1); border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; }
.table-wrap:focus-visible { outline: 3px solid var(--engelis-orange); outline-offset: 2px; }
@media (max-width: 600px) { .tbl .sticky-col { min-width: 6.5rem; max-width: 7.5rem; white-space: normal; overflow-wrap: anywhere; } .toast-pill { left: 1rem; } }

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; } .btn:active { transform: none; } .rcard:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* Cibles tactiles de 44 px sur mobile et tablette (en fin de fichier pour l'emporter sur les valeurs de base) */
@media (max-width: 991px) { .seg-opt, .ms-btn { min-height: 2.75rem; } }

/* Objectifs */
.st { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; padding: .15rem .65rem; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--engelis-muted); }
.st-en_avance, .st-atteint { background: var(--ok-bg); color: var(--up); }
.st-dans_trajectoire { background: var(--surface-3); color: var(--engelis-navy); }
.st-en_retard { background: var(--warn-bg); color: var(--warn-ink); }
.st-non_atteint { background: var(--ko-bg); color: var(--down); }
.obj-list { list-style: none; margin: 0; padding: 0; }
.obj-list li + li { border-top: 1px solid var(--line); }
.obj-row { display: grid; gap: .5rem 1.25rem; padding: 1rem 1.25rem; text-decoration: none; color: inherit; align-items: center; grid-template-columns: 1fr; transition: background-color .15s; }
.obj-row:hover { background: var(--surface-1); color: inherit; }
.obj-main { display: grid; gap: .2rem; min-width: 0; } .obj-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.obj-fig { display: flex; align-items: baseline; gap: .5rem; } .obj-val { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--engelis-navy-darker); }
.obj-track { display: flex; align-items: center; gap: .6rem; } .obj-pct { font-weight: 700; min-width: 3.2rem; text-align: right; }
.obj-status { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; } .obj-gap { font-size: .8rem; }
@media (min-width: 900px) { .obj-row { grid-template-columns: minmax(0, 2fr) 11rem minmax(8rem, 1.2fr) 13rem; } }
progress.obj-bar { flex: 1; width: 100%; height: .55rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: var(--surface-2); color: var(--engelis-navy); }
progress.obj-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 6px; }
progress.obj-bar::-webkit-progress-value { background: var(--engelis-navy); border-radius: 6px; }
progress.obj-bar::-moz-progress-bar { background: var(--engelis-navy); border-radius: 6px; }
progress.bar-en_avance::-webkit-progress-value, progress.bar-atteint::-webkit-progress-value { background: var(--up); }
progress.bar-en_avance::-moz-progress-bar, progress.bar-atteint::-moz-progress-bar { background: var(--up); }
progress.bar-en_retard::-webkit-progress-value { background: var(--engelis-orange); } progress.bar-en_retard::-moz-progress-bar { background: var(--engelis-orange); }
progress.bar-non_atteint::-webkit-progress-value { background: var(--down); } progress.bar-non_atteint::-moz-progress-bar { background: var(--down); }
.obj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.obj-kpis > div { display: flex; flex-direction: column; gap: .2rem; }
.obj-big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--engelis-navy-darker); line-height: 1.15; }
.table-flat { margin-top: 0; border: 0; border-radius: 0; }
.goal-helper { margin-top: 1rem; }
.obj-dash { margin-top: 0; }

/* Carte des clients */
.carte-layout { display: grid; gap: 1rem; }
.carte-map-wrap { position: sticky; top: 3.5rem; z-index: 20; background: var(--engelis-bg); padding-bottom: .5rem; }
.carte-map { height: 45vh; min-height: 16rem; border-radius: var(--radius); border: 1px solid var(--line); z-index: 0; }
.carte-search { position: relative; margin-bottom: .5rem; z-index: 25; }
.carte-res { position: absolute; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); max-height: 16rem; overflow: auto; }
.carte-res button { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; min-height: 2.75rem; align-items: center; text-align: left; border: 0; background: none; border-radius: 8px; padding: 0 .75rem; }
.carte-res button:hover, .carte-res button:focus-visible { background: var(--surface-1); }
.carte-panel { margin-bottom: 0; scroll-margin-top: calc(3.5rem + 45vh + 7rem); }
.carte-panel .is-stale { opacity: .55; }
.fiche-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.fiche-nom { font-size: 1.25rem; margin: 0 0 .25rem; }
.fiche-adr { margin: 0 0 .75rem; } .fiche-adr i { margin-right: .3rem; }
.fiche-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin: 1rem 0; }
.fiche-kpis dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--engelis-muted); font-weight: 600; }
.fiche-kpis dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: 1.15rem; }
.fiche-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--engelis-muted); margin: 1.25rem 0 .5rem; font-family: var(--bs-body-font-family); }
.fiche-chart { position: relative; height: 9rem; }
.fiche-acts, .fiche-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fiche-acts li { display: grid; gap: .25rem; } .fiche-part { display: flex; align-items: center; gap: .6rem; } .fiche-part strong { white-space: nowrap; font-size: .85rem; }
.fiche-objs a { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; text-decoration: none; min-height: 2.75rem; }
.fiche-codes { margin: 1rem 0; }
.marker-cluster div { width: 32px; height: 32px; margin: 4px; border-radius: 50%; background: var(--engelis-navy); color: var(--white); text-align: center; font: 700 .8rem/32px var(--bs-body-font-family); box-shadow: 0 0 0 4px var(--map-halo); }
.marker-cluster { background: none; }
.leaflet-container { font-family: var(--bs-body-font-family); }
@media (min-width: 992px) { .carte-map-wrap { top: 0; } .carte-map { height: 50vh; } .carte-panel { scroll-margin-top: calc(50vh + 7rem); } }
@media (min-width: 1200px) {
  .carte-layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .carte-map-wrap { position: static; padding: 0; z-index: auto; }
  .carte-map { height: calc(100vh - 14rem); min-height: 28rem; }
  .carte-panel { max-height: calc(100vh - 11rem); overflow: auto; position: sticky; top: 1rem; }
}

/* Localisations (admin) */
.loc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.loc-stats > div { background: var(--engelis-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.loc-form { display: grid; gap: 1rem; max-width: 40rem; }
.loc-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (min-width: 992px) { .loc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.text-warn { color: var(--warn-ink); }
.leaflet-container path.leaflet-interactive:focus:not(:focus-visible) { outline: none; }