/* =========================================================================
   COCKPIT DE DÉMONSTRATION — feuille de style
   Client fictif « Piscines Le Dauphin » — support de présentation BNI.
   Charte : turquoise #0E7C86 · sable #B98A4B · encre #10262B
   Structure et composants identiques au cockpit de production : seule la
   palette change, pour montrer l'outil sans qu'un client réel soit
   reconnaissable.
   ========================================================================= */

:root{
  --bg:#EEF4F4;--surface:#fff;--ink:#10262B;--ink2:#5F7378;
  --accent:#0E7C86;--accent-dark:#0A5A62;--gold:#B98A4B;
  --af:#E2F1F2;
  --good:#047A50;--gbg:#E6F4EE;
  --warn:#B45309;--wbg:#FEF3E0;
  --crit:#C0392B;--cbg:#FDECE8;
  --brd:#D2DFE0;--brd2:#E3EDEE;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --serif:ui-serif,Georgia,'Iowan Old Style','Times New Roman',serif;
  --topbar-h:48px;--nav-h:42px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Le clipping doit porter sur html ET body : posé sur body seul, l'élément
   racine continue de défiler et le bandeau pleine largeur laissait quatre
   pixels de balayage latéral. */
html{font-size:15px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  /* Le bandeau d'en-tête sort de la largeur de la page par marge négative :
     sans ce clipping, la page se balaye latéralement sous 940 px. Constaté à
     320, 375 et 768 px. */
  overflow-x:hidden;
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;min-height:100vh;
  overflow-wrap:break-word;
}
h1,h2,h3{line-height:1.2;text-wrap:balance}
img{max-width:100%}

/* ===================== ÉCRAN DE CONNEXION (inchangé) ===================== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--ink);
  /* Seul écran du parcours à information nulle : c'est le seul endroit où une
     photo travaille pour la marque sans repousser un chiffre sous la ligne de
     flottaison. Voile appuyé : l'image est une texture, pas un sujet. */
  background-image:linear-gradient(180deg,rgba(16,38,43,.66) 0%,rgba(16,38,43,.88) 100%),url('/img/login-bg.jpg?v=26');
  background-size:cover;background-position:center;
}
.login-card{position:relative;background:var(--surface);width:100%;max-width:380px;padding:36px 28px 32px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 70%,var(--gold) 100%)}
.login-logo-wrap{display:flex;justify-content:center;margin-bottom:20px}
.login-logo{width:150px;max-width:60%;height:auto;display:block}
.login-eyebrow{font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:600;text-align:center}
.login-card h1{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink);text-align:center}
.login-sub{font-size:0.86rem;color:var(--ink2);margin-bottom:24px;text-align:center}
.login-card label{display:block;font-size:0.8rem;color:var(--ink2);margin-bottom:5px;margin-top:14px}
.login-card input{width:100%;padding:12px 13px;border:1px solid var(--brd);border-radius:7px;font-size:16px;background:var(--bg);color:var(--ink)}
.login-card input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.login-card button{width:100%;margin-top:22px;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:7px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:background .15s}
.login-card button:hover{background:var(--accent-dark)}
.login-card button:disabled{opacity:.6;cursor:default}
.login-error{margin-top:14px;font-size:0.8rem;color:var(--accent-dark);min-height:1em;line-height:1.4}
.login-forgot{text-align:center;margin-top:14px}
.login-forgot a{color:var(--gold);font-size:0.8rem;text-decoration:underline}

/* ===================== COQUILLE APPLICATIVE ===================== */
.app-wrap{display:none}
.app-wrap.is-visible{display:block}

.topbar{
  position:sticky;top:0;z-index:120;background:var(--ink);color:#fff;
  height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 16px;
}
.topbar-brand{display:flex;align-items:center;gap:9px;min-width:0}
.topbar-logo{height:22px;width:auto;display:block;flex-shrink:0}
.topbar-title{font-family:var(--sans);font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;color:#9FD0D4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar-date{font-family:var(--sans);font-size:0.8rem;color:#9FB2B5;display:flex;align-items:center;gap:6px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:#34D399;display:inline-block;flex-shrink:0}
.btn-logout{
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.04em;background:transparent;color:#fff;
  border:1px solid #35494D;padding:7px 12px;border-radius:6px;cursor:pointer;transition:background .15s;white-space:nowrap;
  min-height:34px;   /* la barre du haut fait 48 px : on ne peut pas aller à 44 */
}
.btn-logout:hover{background:#1B3438}

/* ---- Navigation 6 onglets : rail horizontal scrollable ---- */
.tabnav{
  position:sticky;top:var(--topbar-h);z-index:110;background:var(--surface);
  border-bottom:2px solid var(--brd);
}
.tabnav-inner{
  display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  max-width:960px;margin:0 auto;padding:0 8px;
}
.tabnav-inner::-webkit-scrollbar{display:none}
.tabbtn{
  flex:0 0 auto;scroll-snap-align:start;
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);background:none;border:none;border-bottom:3px solid transparent;
  padding:12px 14px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;
  min-height:44px;   /* cible tactile : 43 px passaient sous le seuil */
}
.tabbtn:hover{color:var(--accent)}
.tabbtn[aria-selected="true"]{color:var(--accent);border-color:var(--accent);font-weight:700}
.tabbtn .tabbtn-badge{
  display:inline-block;margin-left:6px;background:var(--accent);color:#fff;
  font-size:0.8rem;line-height:1;padding:3px 5px;border-radius:9px;vertical-align:1px;font-weight:700;
}
/* Sans cette règle, `display:inline-block` l'emporterait sur l'attribut hidden
   et laisserait une pastille vide sur chaque onglet. */
.tabbtn .tabbtn-badge[hidden]{display:none}
/* Onglet interne : signalé discrètement, il n'existe que pour l'administrateur. */
.tabbtn-admin{color:var(--gold)}
.tabbtn-admin::before{content:'· ';opacity:.6}
.tabbtn-admin[aria-selected="true"]{color:var(--gold);border-color:var(--gold)}

/* ---- Page ---- */
.page{max-width:900px;margin:0 auto;padding:0 18px 70px}
.panel{display:none}
.panel.is-active{display:block;animation:fade .18s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.loadbox{padding:56px 20px;text-align:center;font-family:var(--sans);font-size:0.8rem;color:var(--ink2)}
.errbox{background:var(--cbg);border-left:3px solid var(--crit);color:var(--crit);padding:12px 15px;font-size:0.85rem;margin:20px 0}

/* ---- En-tête d'onglet ---- */
.phead{padding:26px 0 0;margin-bottom:26px}
.brandrow{margin-bottom:20px}
.brandlogo{height:52px;width:auto;display:block}
.eyebrow{font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:600}
.phead h1{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.phead .psub{font-size:0.92rem;color:var(--ink2);margin-bottom:20px}
.freshness{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:0.82rem;
  color:var(--ink2);background:#E9F1F1;border-left:3px solid var(--gold);
  padding:8px 13px;margin-bottom:20px;
}
/* Donnée qui a cessé d'être rafraîchie : le bandeau cesse d'être discret.
   Il s'aligne à gauche en pleine largeur — un avertissement qui se replie à la
   largeur de son texte se lit comme une étiquette, pas comme une alerte. */
.freshness.stale{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  background:var(--wbg);border-left-color:var(--warn);color:var(--warn);
  line-height:1.45;
}
.freshness.stale strong{font-weight:700}
.stale-pin{
  flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:50%;
  background:var(--warn);color:var(--wbg);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.78rem;line-height:1;
}

/* Co-signature : une seule ligne, sous un filet fin en pied d'en-tête. */
.cobrand{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--brd);
}
.cobrand-lbl{font-family:var(--sans);font-size:.8rem;color:var(--ink2);letter-spacing:0;text-transform:none}
.cobrand-logo{height:27px;width:auto;opacity:1;display:block}

/* ---- Cartouche KPI ---- */
.kstrip{display:flex;flex-wrap:wrap;gap:1px;background:var(--brd);border:1px solid var(--brd)}
.ki{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:3px;
     flex:1 1 150px;min-width:0}   /* chaque carte grandit pour combler sa ligne */
.kl{font-family:var(--sans);font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.3}
.kv{font-family:var(--sans);font-size:1.38rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.12;letter-spacing:-.015em}
/* Le chiffre que le dirigeant vient chercher, à TOUTES les largeurs : la règle
   était bornée au mobile et le héros retombait à 23 px sur vidéoprojecteur —
   exactement là où quarante personnes le regardent. Rapport de 1 à 2,2 : en
   deçà, l'œil ne trie pas par la taille. */
.ki.k-hero{flex-basis:100%;padding:20px 18px 18px}
.ki.k-hero .kv{font-size:3rem;letter-spacing:-.03em}
.ki.k-hero .kv.kv-sm{font-size:1.7rem}
.ki.k-hero .kl{font-size:0.84rem}

/* L'écart chiffré, en pastille : « 37 € » ne dit rien, « 37 € ▼ 56 % » dit tout. */
.kdelta{
  display:inline-flex;align-items:center;gap:4px;margin-left:12px;vertical-align:.32em;
  font-size:0.86rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:0;
}
.kdelta.bon{background:var(--gbg);color:var(--good)}
.kdelta.mauvais{background:var(--wbg);color:var(--warn)}
.ki.k-hero .kdelta{font-size:1rem;padding:4px 11px}
.kv.good{color:var(--good)}.kv.warn{color:var(--warn)}.kv.crit{color:var(--crit)}
.kv.kv-sm{font-size:1.02rem;line-height:1.3;font-weight:700}
.ks{font-family:var(--sans);font-size:0.8rem;color:var(--ink2);line-height:1.35}
/* ===================== SECTIONS ===================== */
.sec{margin-bottom:44px}
.shead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:9px;border-bottom:3px solid var(--accent)}
.stitle{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.stag{font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;background:var(--af);color:var(--accent);padding:3px 8px}
.sub{margin-bottom:28px}
.subt{font-family:var(--sans);font-size:0.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.subt::after{content:'';flex:1;height:1px;background:var(--brd)}
.pref{font-family:var(--sans);font-size:0.8rem;color:var(--ink2);background:#E9F1F1;border-left:3px solid var(--brd);padding:6px 12px;margin-bottom:12px;letter-spacing:.03em}
.pref strong{color:var(--accent);font-weight:700}

/* Répartition d'un reste à faire : la grille se resserre, elle ne déborde pas */
.cvg{display:flex;flex-wrap:wrap;gap:8px}
.cvgi{font-family:var(--sans);font-size:0.82rem;color:var(--ink2);background:var(--surface);border:1px solid var(--brd);padding:7px 12px;letter-spacing:.02em}
.cvgi b{font-family:var(--serif,inherit);font-size:1.02rem;color:var(--accent);font-weight:700;margin-right:5px;font-variant-numeric:tabular-nums}

/* ===================== TABLEAUX ===================== */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--brd);background:var(--surface)}
.tw table{margin:0}
table{width:100%;border-collapse:collapse;font-size:0.86rem;background:var(--surface)}
thead{background:var(--ink);color:#fff}
thead th{font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;padding:9px 12px;text-align:right;white-space:nowrap}
thead th:first-child{text-align:left}
tbody tr{border-bottom:1px solid var(--brd)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--af)}
tbody td{padding:8px 12px;font-variant-numeric:tabular-nums;text-align:right;font-family:var(--sans);font-size:0.81rem;color:var(--ink);white-space:nowrap}
tbody td:first-child{text-align:left;font-family:system-ui,sans-serif;font-size:0.86rem;white-space:normal}
tbody tr.hl{background:var(--af)}
tbody tr.hl td{font-weight:600}
tfoot td{padding:9px 12px;text-align:right;font-family:var(--sans);font-size:0.81rem;font-weight:700;border-top:2px solid var(--ink);background:#ECF3F3;font-variant-numeric:tabular-nums}
tfoot td:first-child{text-align:left}
.tscroll{max-height:360px;overflow-y:auto}
.thint{font-family:var(--sans);font-size:0.8rem;color:var(--ink2);margin-top:6px;letter-spacing:.05em}

/* Repli d'une longue liste */
details.fold{margin:0}
details.fold>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);background:var(--surface);border:1px solid var(--brd);padding:11px 14px;
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{
  content:'';width:8px;height:8px;flex-shrink:0;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s;margin-top:-3px;
}
details.fold[open]>summary::before{transform:rotate(-135deg);margin-top:2px}
details.fold>summary:hover{background:var(--af);color:var(--accent)}
details.fold[open]>summary{border-bottom:none}
details.fold>div{margin-top:0}

/* ===================== BADGES / PUCES ===================== */
.badge{display:inline-block;font-family:var(--sans);font-size:0.8rem;font-weight:600;padding:2px 7px}
.bg{background:var(--gbg);color:var(--good)}
.bw{background:var(--wbg);color:var(--warn)}
.bc{background:var(--cbg);color:var(--crit)}
.chip{display:inline-block;font-family:var(--sans);font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;font-weight:600;white-space:nowrap}
.cg{background:var(--gbg);color:var(--good)}
.cw{background:var(--wbg);color:var(--warn)}
.cc{background:var(--cbg);color:var(--crit)}
.cn{background:#E9F1F1;color:var(--ink2)}
.ca{background:var(--af);color:var(--accent)}

/* ===================== ENCARTS ===================== */
.info{background:var(--af);border-left:3px solid var(--accent);padding:11px 15px;font-size:0.84rem;color:var(--ink2);margin:14px 0;line-height:1.5}
.warn-box{background:var(--wbg);border-left:3px solid var(--warn);padding:11px 15px;font-size:0.84rem;color:var(--warn);margin:14px 0;line-height:1.5}
.good-box{background:var(--gbg);border-left:3px solid var(--good);padding:11px 15px;font-size:0.84rem;color:var(--good);margin:14px 0;line-height:1.5}

/* ---- Chemin de page (URL) : lisible sans police à chasse fixe ---- */
.upath{font-size:0.8rem;color:var(--ink2);letter-spacing:.01em;overflow-wrap:anywhere}

/* ---- Bandeau d'état daté : la synthèse chiffrée d'un bloc ---- */
.statebar{
  background:var(--surface);border:1px solid var(--brd);border-left:3px solid var(--accent);
  padding:12px 15px;margin-bottom:14px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
}
.statebar-figs{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;min-width:0}
.sfig{font-size:0.84rem;color:var(--ink2);white-space:nowrap}
.sfig b{font-family:var(--sans);font-size:1.12rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);margin-right:3px}
.sfig-on b{color:var(--good)}
.sfig-next b{color:var(--gold)}
.sfig-goal{color:var(--ink2)}
.sfig-goal b{color:var(--ink2);font-size:1rem}
.statebar-date{
  font-size:0.8rem;color:var(--ink2);letter-spacing:.04em;white-space:nowrap;
  border-left:1px solid var(--brd);padding-left:14px;
}

/* ---- État vide : rien à faire, et c'est une bonne nouvelle ---- */
.emptybox{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--gbg);border:1px solid #C9E6D9;border-left:3px solid var(--good);
  padding:18px 20px;
}
.emptybox-mark{
  width:22px;height:22px;flex-shrink:0;margin-top:2px;border-radius:50%;
  background:var(--good);position:relative;
}
.emptybox-mark::after{
  content:'';position:absolute;left:7px;top:4px;width:6px;height:11px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(42deg);
}
.emptybox-body{min-width:0}
.emptybox-title{font-size:1rem;font-weight:700;color:var(--good);margin-bottom:5px;line-height:1.35}
.emptybox-text{font-size:0.86rem;color:var(--ink2);line-height:1.55}

/* ---- Historique des validations ---- */
.histgroup{background:var(--surface);border:1px solid var(--brd);margin-bottom:12px}
.histhead{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 15px;border-bottom:1px solid var(--brd);background:#F6FAFA;
}
.histlbl{font-size:0.86rem;font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0}
.histcount{font-size:0.8rem;color:var(--ink2);letter-spacing:.05em;white-space:nowrap}
.histlist{list-style:none;margin:0;padding:4px 0}
.histlist li{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:7px 15px;border-bottom:1px solid var(--brd2);font-size:0.85rem;
}
.histlist li:last-child{border-bottom:none}
.histcode{font-size:0.8rem;color:var(--ink2);letter-spacing:.06em;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.histtitre{flex:1 1 200px;min-width:0;line-height:1.4}

/* ===================== BARRES DE CANAUX ===================== */
.cbars{display:flex;flex-direction:column;gap:9px}
.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clabel{font-family:var(--sans);font-size:0.8rem;width:150px;flex-shrink:0;color:var(--ink2)}
.cbwrap{flex:1 1 120px;display:block;background:var(--brd2);height:20px;min-width:80px}
.cbar{display:block;height:100%;background:var(--accent)}
.cbar.org{background:var(--good)}
.cbar.dir{background:var(--ink2)}
.cbar.oth{background:var(--gold)}
.cval{font-family:var(--sans);font-size:0.8rem;width:130px;text-align:right;color:var(--ink);flex-shrink:0}

/* ===================== CARTES ===================== */
.scard{background:var(--surface);border:1px solid var(--brd);padding:16px 18px;margin-bottom:14px}
.scard h3{font-size:0.95rem;font-weight:600;margin-bottom:10px}
.regle-titre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:2px solid var(--accent);margin-bottom:4px}
.exemple{font-size:0.84rem;color:var(--ink2);line-height:1.5;
  background:#E9F1F1;border-left:3px solid var(--gold);padding:10px 13px;margin-top:12px}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--brd);font-size:0.86rem}
.srow:last-child{border-bottom:none}
.sk{color:var(--ink2);flex-shrink:0}
.sv{font-family:var(--sans);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.mg{display:grid;gap:1px;background:var(--brd);border:1px solid var(--brd)}
.mg2{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mg3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mg4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.mgc{background:var(--surface);padding:13px 16px;min-width:0;display:flex;flex-direction:column;gap:3px}
.mgc .kl{margin-bottom:2px}
.mgc .kv{margin-bottom:1px}
.steps{display:flex;flex-direction:column;gap:9px}
.step{display:flex;gap:12px;align-items:flex-start;padding:11px;background:var(--surface);border:1px solid var(--brd)}
.snum{font-family:var(--sans);font-size:0.8rem;background:var(--ink);color:#fff;padding:2px 6px;flex-shrink:0;margin-top:2px}
.stitle2{font-weight:600;font-size:0.88rem;margin-bottom:2px}
.sdesc{font-size:0.82rem;color:var(--ink2);line-height:1.5}

/* ===================== LÉGENDES / PROGRESSION ===================== */
.leg{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.li{display:flex;align-items:center;gap:5px;font-family:var(--sans);font-size:0.8rem;color:var(--ink2)}
.ld{width:10px;height:10px;flex-shrink:0}
.ll{width:20px;height:2px;flex-shrink:0}
.pw{display:block;background:var(--brd2);height:8px;margin:7px 0;overflow:hidden}
.pb{display:block;height:100%;background:var(--accent)}
.chartwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chartwrap svg{display:block;min-width:520px;width:100%;overflow:visible}

/* ===================== JOURNAL — TIMELINE ===================== */
.tl{position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--brd)}
.tl-month{
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:22px 0 12px;position:relative;
}
.tl-month:first-child{margin-top:0}
.tl-item{position:relative;margin-bottom:14px;background:var(--surface);border:1px solid var(--brd);padding:16px 18px 16px 20px}
.tl-item::before{
  content:'';position:absolute;left:-21px;top:16px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
}
.tl-item[data-levier="seo"]::before{background:var(--good)}
.tl-item[data-levier="cm"]::before{background:var(--gold)}
.tl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
/* La date était un filet gris parmi d'autres. Elle devient un repère : c'est
   par elle qu'on lit une chronologie. */
.tl-date{
  font-family:var(--sans);font-size:0.76rem;font-weight:700;letter-spacing:.06em;
  color:var(--accent);background:var(--af);padding:3px 9px;border-radius:20px;
  flex-shrink:0;white-space:nowrap;
}
.tl-title{font-weight:700;font-size:1.02rem;flex:1 1 200px;min-width:0;line-height:1.3;letter-spacing:-.01em}
.tl-text{font-size:0.87rem;color:var(--ink2);line-height:1.6;margin-top:2px}

/* ===================== À VALIDER ===================== */
.vfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.vfilter{
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--brd);background:var(--surface);color:var(--ink2);
  display:inline-flex;align-items:center;
  padding:10px 14px;min-height:44px;cursor:pointer;border-radius:4px;
}
.vfilter[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.vitem{background:var(--surface);border:1px solid var(--brd);margin-bottom:10px;transition:box-shadow .15s}
.vitem.is-valide{border-left:4px solid var(--good)}
.vitem.is-attente{border-left:4px solid var(--gold)}
.vitem:hover{box-shadow:0 2px 10px rgba(16,38,43,.08)}
/* La trace de validation porte le nom et la date : c'est elle qui prouve que
   l'outil a servi. Elle était grise au milieu du reste ; elle devient verte,
   précédée d'une coche. */
.vitem.is-valide .vmeta{
  color:var(--good);font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gbg);padding:4px 10px;border-radius:20px;margin-top:7px;
}
.vitem.is-valide .vmeta::before{content:'\2713';font-weight:700}
.vhead{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 15px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.vhead:hover{background:var(--af)}
.vhead-main{flex:1;min-width:0}
.vcode{font-family:var(--sans);font-size:0.8rem;letter-spacing:.08em;color:var(--ink2);display:block;margin-bottom:3px}
.vtitre{font-weight:600;font-size:0.92rem;line-height:1.35;display:block}
.vmeta{font-family:var(--sans);font-size:0.8rem;color:var(--ink2);margin-top:4px;display:block}
.vhead-right{display:flex;align-items:center;gap:9px;flex-shrink:0}
.vchevron{width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);transition:transform .18s;flex-shrink:0}
.vhead[aria-expanded="true"] .vchevron{transform:rotate(-135deg)}
.vbody{display:none;padding:0 15px 18px;border-top:1px solid var(--brd)}
.vbody.is-open{display:block}
/* Pas de hauteur plafonnée : ces pages se lisent en entier. Un cadre à
   défilement interne imbriqué dans la page rend la lecture pénible au doigt. */
.vcontent{
  font-size:0.9rem;line-height:1.65;color:var(--ink);
  padding:14px 0 4px;
}
.vcontent h2{font-size:1.05rem;margin:16px 0 7px;color:var(--ink)}
.vcontent h3{font-size:0.95rem;margin:14px 0 6px;color:var(--accent)}
/* Les intertitres des pages sont écrits en <h4> (### dans la source) : sans
   cette règle, 28 pages sur 32 les affichent au style par défaut du navigateur. */
.vcontent h4{font-size:0.95rem;font-weight:700;margin:15px 0 6px;color:var(--accent);line-height:1.35}
.vcontent p{margin-bottom:11px}
.vcontent ul,.vcontent ol{margin:0 0 12px 20px}
.vcontent li{margin-bottom:5px}
.vcontent strong{font-weight:600}
.vcontent a{color:var(--gold);text-decoration:underline}
.vcontent table{font-size:0.8rem;margin:10px 0}

/* ---- Bloc d'identification, repris du dossier de relecture PDF ---- */
/* Le client a validé une page sur un dossier qui affichait ces lignes en tête.
   Il doit les retrouver ici, sinon il ne reconnaît pas ce qu'il a approuvé. */
.vfiche{margin:14px 0 2px;border:1px solid var(--brd);background:var(--bg)}
.vfiche-l{
  display:flex;gap:12px;padding:8px 13px;border-bottom:1px solid var(--brd2);
  font-size:0.82rem;line-height:1.5;
}
.vfiche-l:last-child{border-bottom:none}
.vfiche-k{
  flex:0 0 128px;font-family:var(--sans);color:var(--ink2);
  letter-spacing:.04em;text-transform:uppercase;font-size:0.8rem;
}
.vfiche-v{flex:1 1 auto;min-width:0;color:var(--ink);overflow-wrap:break-word}
.vactions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--brd);
}
.btn{
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;
  border:none;padding:10px 16px;border-radius:5px;cursor:pointer;transition:background .15s;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.btn-primary{background:var(--good);color:#fff}
.btn-primary:hover{background:#036440}
.btn-ghost{background:var(--surface);color:var(--ink2);border:1px solid var(--brd)}
.btn-ghost:hover{background:var(--bg)}
.btn:disabled{opacity:.55;cursor:default}
.vstatus{font-family:var(--sans);font-size:0.8rem;color:var(--ink2);line-height:1.5}
.vstatus strong{color:var(--good)}
/* Zone tactile confortable : au moins 32 px de haut, doigt sur écran. */
.vlink{display:inline-flex;align-items:center;font-family:var(--sans);font-size:0.8rem;color:var(--gold);
  text-decoration:underline;word-break:break-word;padding:12px 2px;line-height:1.4;min-height:44px}

/* ===================== NAVIGATION AU CLAVIER ===================== */
/* Seuls les champs de connexion avaient un état de focus. Tout le cockpit
   s'utilisait donc au clavier sans jamais savoir où l'on se trouvait — un
   défaut d'accessibilité (WCAG 2.4.7), pas un détail esthétique.
   `:focus-visible` n'apparaît qu'au clavier : la souris ne déclenche rien. */
.btn:focus-visible,
.btn-logout:focus-visible,
.tabbtn:focus-visible,
.vfilter:focus-visible,
.vhead:focus-visible,
.vlink:focus-visible,
a:focus-visible,
summary:focus-visible,
[data-goto]:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:3px;
}
/* Sur fond sombre, l'or manque de contraste : on passe au blanc. */
.topbar .btn-logout:focus-visible,
.tabbtn:focus-visible{outline-color:var(--accent)}
.topbar .btn-logout:focus-visible{outline-color:#fff}

/* ===================== RUPTURE DANS UNE SÉRIE ===================== */
/* Bande pleine largeur signalant un changement de régime dans un tableau. */
tbody tr.tsep td{
  background:var(--ink);color:#fff;text-align:left;white-space:normal;
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;padding:8px 12px;
}
tbody tr.tsep:hover td{background:var(--ink)}

/* ===================== CE QUI ATTEND UNE DÉCISION ===================== */
/* Sémantique de couleur du cockpit : l'or dit « ça attend vous », le vert dit
   « c'est fait », le rouge est la marque et ne porte jamais un statut. */
.decide{border-left:3px solid var(--gold);padding-left:16px}
.decide .shead{border-bottom-color:var(--gold)}
.decide .stag{background:#F7F0E2;color:#8A6534}
.dnone{
  display:flex;align-items:center;gap:11px;background:var(--gbg);
  border-left:3px solid var(--good);padding:13px 16px;font-size:0.88rem;color:var(--good);font-weight:600;
}

/* ===================== PIED DE PAGE ===================== */
.pfooter{
  margin-top:44px;padding:20px 0;border-top:1px solid var(--brd);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--sans);font-size:0.8rem;color:var(--ink2);letter-spacing:.05em;
}
.pfooter img{height:27px;opacity:1}
.pfooter-co{display:flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:0;text-transform:none}

/* ===================== RESPONSIVE ===================== */
/* Tablette et moins */
@media(max-width:768px){
  .page{padding:0 14px 60px}
  .phead h1{font-size:1.5rem}
  .brandlogo{height:44px}
  .clabel{width:118px;font-size:0.8rem}
  .cval{width:100%;text-align:left;order:3}
}

/* Mobile — tableaux transformés en fiches empilées */
@media(max-width:640px){
  .topbar{padding:0 12px}
  .topbar-date{display:none}
  .topbar-title{font-size:0.8rem;letter-spacing:.05em}
  .brandrow{flex-direction:column;align-items:flex-start;gap:12px}
  .cobrand{align-items:flex-start}
  .kv{font-size:1.35rem}
  .tabbtn{padding:11px 12px;font-size:0.8rem}
  .sec{margin-bottom:34px}
  .stitle{font-size:1.12rem}

  /* Le défilement interne est neutralisé : sur mobile, les fiches se déroulent
     dans le flux (un conteneur qui défile dans la page est un piège tactile). */
  /* Cartes clé/valeur : le libellé passe au-dessus, comme les fiches de tableau. */
  .srow{flex-direction:column;align-items:stretch;gap:2px}
  .sk{font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase}
  .sv{text-align:left}

  .rtable-wrap{border:none;background:none;overflow:visible;max-height:none}
  table.rtable{background:none}
  table.rtable thead{display:none}
  /* La table elle-même doit passer en bloc : restée en display:table, elle
     s'élargit au contenu le plus long et déborde de l'écran. */
  table.rtable{display:block;width:100%}
  table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:100%}
  /* Adresses e-mail et URL : mots longs sans espace, à couper sinon ils
     imposent leur largeur à toute la fiche. */
  table.rtable tbody td,table.rtable tbody td .ks{overflow-wrap:anywhere;word-break:break-word}
  table.rtable tbody td>*{min-width:0}
  /* Une puce ne doit jamais imposer sa largeur à l'écran. */
  .chip,.badge{white-space:normal}
  table.rtable tbody tr{
    background:var(--surface);border:1px solid var(--brd);margin-bottom:9px;padding:10px 12px;
  }
  table.rtable tbody tr:hover{background:var(--surface)}
  table.rtable tbody td{
    padding:4px 0;text-align:right;white-space:normal;
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  }
  table.rtable tbody td::before{
    content:attr(data-l);font-family:var(--sans);font-size:0.8rem;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink2);text-align:left;flex-shrink:0;
  }
  table.rtable tbody td:first-child{
    font-weight:600;font-size:0.9rem;display:block;text-align:left;
    padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--brd);
  }
  table.rtable tbody td:first-child::before{display:none}
  table.rtable tfoot{display:block}
  table.rtable tfoot tr{display:block;background:#ECF3F3;border:1px solid var(--ink)}
  table.rtable tfoot td{display:flex;justify-content:space-between;gap:12px;border:none;padding:5px 12px}
  table.rtable tfoot td::before{content:attr(data-l);font-size:0.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
  .thint{display:none}

  /* Bandeau d'état : les chiffres d'abord, la date du relevé en dessous —
     un filet vertical n'a plus de sens quand tout s'empile. */
  .statebar{flex-direction:column;align-items:stretch;gap:9px;padding:12px 13px}
  .statebar-date{border-left:none;padding-left:0;padding-top:8px;
    border-top:1px solid var(--brd);white-space:normal}

  .emptybox{padding:15px 16px;gap:12px}
  .emptybox-title{font-size:0.96rem}

  .histhead{padding:10px 13px}
  .histlist li{padding:8px 13px}

  /* Libellé au-dessus de la valeur : à cette largeur, deux colonnes hacheraient
     la meta description en mots isolés. */
  .vfiche-l{flex-direction:column;gap:2px;padding:9px 12px}
  .vfiche-k{flex:0 0 auto}
}

/* Très petits écrans (320 px) */
@media(max-width:360px){
  .page{padding:0 11px 56px}
  .topbar-title{font-size:0.8rem}
  .btn-logout{padding:6px 9px;font-size:0.8rem}
  .topbar-logo{height:19px}
  .phead h1{font-size:1.32rem}
  .tabbtn{padding:11px 10px;font-size:0.8rem;letter-spacing:.06em}
  .clabel{width:100%;order:1}
  .cbwrap{order:2;flex-basis:100%}
  .vactions{gap:9px}
  .btn{width:100%;text-align:center}

  /* 320 px : les quatre chiffres du bandeau se lisent l'un sous l'autre
     plutôt que de se couper au milieu d'un libellé. */
  .statebar-figs{flex-direction:column;gap:6px}
  .sfig{white-space:normal}
  .emptybox{padding:14px;gap:11px}
  .emptybox-mark{width:20px;height:20px}
  .emptybox-mark::after{left:6px;top:3px;height:10px}
  .histcode{flex-basis:100%}
}

/* Grand écran */
@media(min-width:1100px){
  .page{max-width:960px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===================== IMPRESSION ===================== */
@media print{
  :root{--bg:#fff}
  *,*::before,*::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:12mm 11mm}
  body{background:#fff;font-size:10.5pt}
  .topbar,.tabnav,.btn,.vfilters,.thint{display:none!important}
  .page{max-width:100%;padding:0}
  .panel{display:block!important}
  .sec{margin-bottom:18px}
  .shead,.subt,.leg{page-break-after:avoid}
  table,svg,.scard,.info,.warn-box,.good-box,.mg,.kstrip,.cbars,.tl-item,.vitem,
  .statebar,.emptybox,.histgroup{page-break-inside:avoid}
  .tscroll,.vcontent{max-height:none;overflow:visible}
  .vbody{display:block}
  a{text-decoration:none;color:var(--ink)}
}

/* ===================== HABILLAGE DE DÉMONSTRATION =====================
   Deux ajouts, et deux seulement : la mention sous le bouton de connexion
   et la pastille dans la barre du haut. Le reste de l'interface est celui
   du cockpit de production, sans retouche. */
.demo-note{
  margin-top:16px;padding:11px 13px;
  background:var(--af);border-left:3px solid var(--accent);
  font-size:0.78rem;line-height:1.5;color:var(--ink2);border-radius:0 5px 5px 0;
}
.demo-note strong{color:var(--accent-dark)}
.topbar-demo{
  flex-shrink:0;font-size:0.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#0E7C86;background:#9FD0D4;padding:3px 7px;border-radius:4px;line-height:1.4;
}
@media (max-width:520px){ .topbar-demo{display:none} }


/* ===================== BLOC REPLIABLE =====================
   Les contenus de première visite (règles de comptage, dispositif d'un salon)
   sont utiles une fois et encombrants ensuite. Repliés, ils rendent cinq écrans
   de scroll au dirigeant sans rien lui retirer. */
.fold{margin-bottom:20px;background:var(--surface);border:1px solid var(--brd);border-top:3px solid var(--accent)}
.fold-head{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:15px 16px;min-height:52px;   /* cible tactile confortable */
}
.fold-head::-webkit-details-marker{display:none}
.fold-head:hover .fold-title{color:var(--accent)}
.fold-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fold-title{font-family:var(--serif);font-size:1.06rem;font-weight:700;color:var(--ink);flex:1;line-height:1.28}
.fold-tag{font-family:var(--sans);font-size:0.74rem;letter-spacing:.07em;text-transform:uppercase;background:var(--af);color:var(--accent);padding:3px 8px;white-space:nowrap}
.fold-chev{width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);margin-top:-4px;flex-shrink:0;transition:transform .18s}
details[open] .fold-chev{transform:rotate(-135deg);margin-top:3px}
.fold-body{padding:0 16px 4px}
.fold-body .sec{margin-bottom:14px}
.fold-body .shead{display:none}      /* le titre est porté par le summary */

/* ===================== KPI — DEUX COLONNES SUR MOBILE ===================== */
@media (max-width:640px){
  .kstrip .ki{flex:1 1 calc(50% - 1px)}
  /* La ligne ci-dessus écrase le flex-basis du héros : il faut le rétablir,
     sinon la carte vedette repasse à mi-largeur et son écart chiffré déborde
     sur une deuxième ligne. */
  .ki.k-hero{flex:1 1 100%}
  .ki.k-hero .kv{font-size:2.6rem}
  .ki.k-hero .kv.kv-sm{font-size:1.5rem}
}

/* ===================== EN-TÊTE COMPACTE SUR MOBILE =====================
   L'en-tête complète occupait près de 300 px avant le premier chiffre : sur un
   écran de 812 px, le graphe tombait sous la ligne de flottaison. La
   co-signature Tremplin Digital reste présente, en pied de page. */
@media (max-width:640px){
  .freshness{padding:7px 11px;font-size:0.78rem}
  .sec{margin-bottom:30px}
}

/* ---- Journal : les mois anciens se replient ---- */
.tl-fold{display:block}
.tl-month-fold{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:44px}
.tl-month-fold::-webkit-details-marker{display:none}
.tl-month-fold .fold-chev{margin-left:auto;border-color:var(--accent)}
.tl-month-fold:hover{color:var(--accent)}
.tl-month-fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* =========================================================================
   BANDEAU PHOTOGRAPHIQUE D'EN-TÊTE
   Chaque onglet s'ouvre sur une bande pleine largeur : photo de bassin,
   dégradé sombre, titre en blanc par-dessus.

   Les trois couches de background sont empilées à dessein. Si pool-hero.jpg
   n'est pas encore déposée, le navigateur ignore simplement cette couche et
   peint le dégradé turquoise en dessous : l'en-tête reste habillé, jamais cassé.
   ========================================================================= */
.phead{padding:0;margin-bottom:26px}
.phero{
  position:relative;margin:0 -18px;min-height:212px;display:flex;align-items:flex-end;
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-hero.jpg?v=26'),
    linear-gradient(118deg,#12909B 0%,#0A5A62 52%,#10262B 100%);
  background-size:cover,cover,cover;
  background-position:center,center 60%,center;
  background-repeat:no-repeat;
}

/* --- Une photo par onglet -------------------------------------------------
   Même empilement que .phero : voile sombre, photo, dégradé turquoise de
   secours. Une variante dont la photo n'est pas encore déposée retombe
   proprement sur le dégradé — l'en-tête reste habillé, jamais cassé.
   -------------------------------------------------------------------------- */
.phero--seo{
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-seo.jpg?v=26'),
    linear-gradient(118deg,#12909B 0%,#0A5A62 52%,#10262B 100%);
}
.phero--ads{
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-ads.jpg?v=26'),
    linear-gradient(118deg,#0F7F8A 0%,#0A5058 52%,#10262B 100%);
}
.phero--cm{
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-cm.jpg?v=26'),
    linear-gradient(118deg,#1499A4 0%,#0C646D 52%,#10262B 100%);
}
.phero--relire{
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-relire.jpg?v=26'),
    linear-gradient(118deg,#0D8791 0%,#0A555D 52%,#10262B 100%);
}
.phero--journal{
  background-image:
    linear-gradient(180deg,rgba(16,38,43,.28) 0%,rgba(16,38,43,.62) 50%,rgba(16,38,43,.93) 100%),
    url('/img/pool-journal.jpg?v=26'),
    linear-gradient(118deg,#11737D 0%,#094A52 52%,#10262B 100%);
}
.phero-in{position:relative;z-index:1;width:100%;padding:26px 20px 20px}
.phero-logo{height:34px;width:auto;display:block;margin-bottom:16px}
.phero-eyebrow{
  font-family:var(--sans);font-size:0.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:#9FD0D4;font-weight:600;margin-bottom:7px;
}
.phero h1{
  font-family:var(--serif);font-size:2.05rem;font-weight:700;letter-spacing:-.015em;
  color:#fff;margin-bottom:6px;text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.phero-sub{font-size:0.95rem;color:#D6E3E4;max-width:52ch}
.phead-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:18px}
.phead-foot .freshness{margin-bottom:0}
.phead-foot .cobrand{margin:0}


@media (max-width:640px){
  .phero{min-height:168px;margin:0 -18px}
  .phero-in{padding:20px 18px 16px}
  .phero-logo{height:27px;margin-bottom:12px}
  .phero h1{font-size:1.55rem}
  .phero-sub{font-size:0.88rem}
  .phead{margin-bottom:18px}
  .phead-foot{padding-top:12px}
  .phead-foot .cobrand{display:none}   /* la co-signature reste en pied de page */
}

/* =========================================================================
   OBJECTIFS DE LA MISSION
   Quatre cartes : trois cibles tenues, une en cours. Le vert n'est pas décoratif
   — il ne s'affiche que si la donnée dit que l'objectif est atteint.
   ========================================================================= */
.objgrid{display:flex;flex-wrap:wrap;gap:1px;background:var(--brd);border:1px solid var(--brd)}
.obj{
  flex:1 1 200px;min-width:0;background:var(--surface);padding:16px 17px 15px;
  display:flex;flex-direction:column;gap:4px;position:relative;
  border-top:3px solid var(--brd2);
}
.obj-ok{border-top-color:var(--good)}
.obj-encours{border-top-color:var(--gold)}
.obj-mark{
  position:absolute;top:14px;right:15px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:700;line-height:1;
}
.obj-ok .obj-mark{background:var(--gbg);color:var(--good)}
.obj-encours .obj-mark{background:#F7F0E2;color:#8A6534}
.obj-titre{
  font-family:var(--sans);font-size:0.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink2);line-height:1.32;padding-right:30px;
}
.obj-val{font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em;margin-top:3px}
.obj-ok .obj-val{color:var(--good)}
.obj-encours .obj-val{color:var(--warn)}
.obj-detail{font-size:0.8rem;color:var(--ink2);line-height:1.4}

@media (max-width:640px){
  .obj{flex:1 1 calc(50% - 1px);padding:14px 14px 13px}
  .obj-val{font-size:1.45rem}
  .obj-titre{font-size:0.75rem;padding-right:26px}
}