/* DECISION CEO : plusieurs classes ci-dessous (.hint, .ava, .timeline/.tl,
   .col) etaient scopees `body.pro .suite`, reservees au tableau de bord
   professionnel. Elargies a `body.pro` pour que les pages famille/enseignant
   (qui ne sont pas enveloppees dans .suite) les recoivent aussi -- meme
   bibliotheque de composants, une seule source. Hauteur des lignes de liste
   (.row, .row--link, .row--adr) et des jalons (.tl) reduite pour une
   silhouette plus compacte. Voir docs/rapports/unification-roles-2026-10-13.md. */

/* DYS.MA - suite professionnelle : styles issus du prototype valide.

   PORTEE LIMITEE A `body.pro`. La feuille du prototype redefinissait `body`,
   `.nav` et `.topbar` : appliquee telle quelle, elle repeindrait la coque
   commune a tous les espaces connectes. Les regles de coque sont donc
   neutralisees ci-dessous ; seul le contenu porte le design du prototype.

   LA PALETTE VIENT DE `tokens.css`. Les jetons francais sont des alias.
*/
/* LES JETONS DU PROTOTYPE SONT DES ALIAS, PAS UNE PALETTE.

   `static/css/design-system/tokens.css` reste la source unique. Les noms francais du
   prototype sont conserves pour que les 181 classes extraites fonctionnent
   sans retouche, mais ils ne portent plus de valeur : ils pointent vers le
   jeton officiel, avec la valeur du prototype en repli tant que le jeton
   correspondant n'existe pas.

   Corriger une couleur se fait donc dans `tokens.css`, jamais ici. */

/* Aucune déclaration ici : les variables viennent de
     static/css/design-system/tokens.css, source unique. */
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* ---------- barre haute ---------- */
.topbar{
  position:sticky;top:0;z-index:var(--ds-z-sticky);background:var(--carte);border-bottom:1px solid var(--trait);
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:11px 22px;
}
.wordmark{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em}
.wordmark span{color:var(--bleu)}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-inline-start:14px}
.tb-mid{display:flex;align-items:center;gap:14px}
.statut{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:20px;background:var(--att-bg);color:var(--att);
}
.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.statut.publie{background:var(--ok-bg);color:var(--ok)}
.save{font-size:12.5px;color:var(--doux);display:flex;align-items:center;gap:6px}
.save b{color:var(--ok);font-weight:600}
.tb-right{display:flex;align-items:center;gap:10px}
.ring{position:relative;width:42px;height:42px}
.ring svg{transform:rotate(-90deg)}
.ring i{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;font-style:normal}
.btn{
  border:1.5px solid var(--trait-fort);background:var(--carte);border-radius:var(--r);
  padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--carte-2)}
.btn.pri{background:var(--bleu);border-color:var(--bleu);color:var(--c-ffffff)}
.btn.pri:hover{background:var(--bleu-vif)}
.btn.pri[disabled]{background:var(--trait-fort);border-color:var(--trait-fort);cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12.5px}

/* ---------- espace de travail ---------- */
.work{display:grid;grid-template-columns:236px minmax(0,1fr) 372px;gap:26px;max-width:1520px;margin:0 auto;padding:24px 22px 90px;align-items:start}

/* ---------- étapes ---------- */
.steps{position:sticky;top:78px;display:flex;flex-direction:column;gap:3px}
.step{
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;text-align:start;
  background:none;border:none;border-radius:var(--r);padding:10px 11px;cursor:pointer;
}
.step:hover{background:var(--c-e1e6ee)}
.step.on{background:var(--carte);box-shadow:0 1px 3px rgba(16,23,40,.08)}
.step .num{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;border:1.5px solid var(--trait-fort);color:var(--graphite);background:var(--carte);
}
.step.on .num{border-color:var(--bleu);color:var(--bleu);font-weight:600}
.step.done .num{background:var(--ok);border-color:var(--ok);color:var(--c-ffffff)}
.step .lbl{font-size:13.5px;line-height:1.25}
.step .sub{display:block;font-family:var(--mono);font-size:10px;color:var(--doux);margin-top:2px;letter-spacing:.04em}
.step.on .lbl{font-weight:600}
.rail-note{margin-top:16px;padding:12px;border:1px dashed var(--trait-fort);border-radius:var(--r);font-size:12px;color:var(--graphite);line-height:1.5}
.rail-note b{display:block;color:var(--encre);font-size:12.5px;margin-bottom:3px}

/* ---------- panneau formulaire ---------- */
.pane{background:var(--carte);border:1px solid var(--trait);border-radius:10px;overflow:hidden}
.pane-h{padding:20px 24px 16px;border-bottom:1px solid var(--trait)}
.pane-h .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--bleu);margin:0 0 7px}
.pane-h h1{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.015em;margin:0 0 5px}
.pane-h p{margin:0;color:var(--graphite);max-width:62ch;font-size:13.8px}
.pane-b{padding:6px 24px 24px}

.grp{padding:18px 0;border-bottom:1px solid var(--trait)}
.grp:last-child{border-bottom:none}
.grp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:3px}
.grp-t{font-size:15px;font-weight:600;letter-spacing:-.005em}
.req{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--stop-bg);color:var(--stop);font-weight:600}
.req.ok{background:var(--ok-bg);color:var(--ok)}
.help{color:var(--graphite);font-size:13px;margin:0 0 12px;max-width:64ch}
.impact{
  display:inline-flex;gap:6px;align-items:baseline;font-size:12.3px;color:var(--bleu);
  background:var(--bleu-clair);border-radius:5px;padding:5px 9px;margin:0 0 12px;
}
.impact b{font-weight:600}

/* champs */
.in, textarea.in, select.in{
  width:100%;border:1.5px solid var(--trait-fort);border-radius:var(--r);padding:9px 11px;background:var(--carte);
}
.in::placeholder{color:var(--doux)}
.in:focus{border-color:var(--bleu)}
textarea.in{resize:vertical;min-height:96px;line-height:1.55}
.row{display:grid;gap:12px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:1fr 1fr 1fr}
.lab{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.lab .opt{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:400;margin-inline-start:6px}
.count{float:inline-end;font-family:var(--mono);font-size:11px;color:var(--doux)}
.count.over{color:var(--stop)}

/* jetons */
.picker{border:1.5px solid var(--trait-fort);border-radius:var(--r);background:var(--carte)}
.picker-in{width:100%;border:none;background:none;padding:9px 11px;border-bottom:1px solid var(--trait)}
.picker-in:focus{outline:none}
.opts{max-height:206px;overflow:auto;padding:6px}
.optgrp{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);padding:8px 8px 4px}
.opt-b{
  display:flex;width:100%;align-items:center;gap:9px;text-align:start;background:none;border:none;
  padding:7px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;
}
.opt-b:hover{background:var(--carte-2)}
.opt-b .box{width:15px;height:15px;border:1.5px solid var(--trait-fort);border-radius:3.5px;flex:none;position:relative}
.opt-b[aria-pressed="true"] .box{background:var(--bleu);border-color:var(--bleu)}
.opt-b[aria-pressed="true"] .box::after{content:"";position:absolute;inset-inline-start:4.4px;top:1.2px;width:4px;height:8px;border:solid var(--c-ffffff);border-width:0 2px 2px 0;transform:rotate(42deg)}
.opt-b .tag{margin-inline-start:auto;font-family:var(--mono);font-size:9.5px;color:var(--doux)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tk{
  display:inline-flex;align-items:center;gap:7px;background:var(--bleu-clair);color:var(--bleu);
  border:1px solid var(--c-d5ddf5);border-radius:20px;padding:4px 6px 4px 11px;font-size:12.8px;font-weight:500;
}
.tk button{border:none;background:none;cursor:pointer;color:var(--bleu);opacity:.65;line-height:1;padding:2px 4px;border-radius:50%}
.tk button:hover{opacity:1;background:var(--c-dde4f7)}
.tk.locked{background:var(--ok-bg);color:var(--ok);border-color:var(--c-c6e2da)}
.empty-tk{color:var(--doux);font-size:12.8px;font-style:italic}

/* segments */
.seg{display:inline-flex;border:1.5px solid var(--trait-fort);border-radius:var(--r);overflow:hidden;background:var(--carte)}
.seg button{border:none;background:none;padding:7px 12px;font-size:12.8px;cursor:pointer;border-inline-end:1px solid var(--trait)}
.seg button:last-child{border-inline-end:none}
.seg button[aria-pressed="true"]{background:var(--encre);color:var(--c-ffffff);font-weight:600}
.seg.trois button[aria-pressed="true"][data-v="non"]{background:var(--carte-2);color:var(--graphite)}
.seg.trois button[aria-pressed="true"][data-v="facture"]{background:var(--att);color:var(--c-ffffff)}
.seg.trois button[aria-pressed="true"][data-v="conv"]{background:var(--ok);color:var(--c-ffffff)}

/* listes de sous-blocs */
.card{border:1px solid var(--trait);border-radius:var(--r);padding:14px;margin-bottom:10px;background:var(--carte-2)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.card-h b{font-size:14px}
.linkbtn{background:none;border:none;color:var(--bleu);cursor:pointer;font-size:12.8px;font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}
.linkbtn.danger{color:var(--stop)}
.tbl{width:100%;border-collapse:collapse;font-size:13.3px}
.tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);text-align:start;padding:7px 8px;border-bottom:1.5px solid var(--trait)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--trait);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.nul{font-family:var(--mono);font-size:11.5px;color:var(--att);background:var(--att-bg);padding:2px 7px;border-radius:3px}
.lock{font-family:var(--mono);font-size:10px;color:var(--doux);letter-spacing:.05em}

/* checklist publication */
.check{list-style:none;margin:0;padding:0}
.check li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--trait);font-size:13.6px}
.check li:last-child{border-bottom:none}
.check .mk{font-family:var(--mono);font-weight:700;font-size:13px}
.check .ok .mk{color:var(--ok)}
.check .ko .mk{color:var(--stop)}
.check .ko b{font-weight:600}
.check small{color:var(--graphite);display:block;font-size:12.4px}

/* ---------- aperçu ---------- */
.preview{position:sticky;top:78px}
.pv-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.pv-t{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite)}
.phone{
  background:var(--carte);border:1px solid var(--trait);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 30px rgba(16,23,40,.10);
}
.pv-flash{animation:fl .5s ease}
@keyframes fl{0%{box-shadow:0 0 0 3px rgba(34,52,126,.28),0 8px 30px rgba(16,23,40,.10)}100%{box-shadow:0 0 0 0 rgba(34,52,126,0),0 8px 30px rgba(16,23,40,.10)}}
.pv-top{background:linear-gradient(180deg,var(--c-f6f8fb),var(--c-ffffff));padding:18px 18px 14px;border-bottom:1px solid var(--trait)}
.pv-id{display:grid;grid-template-columns:56px 1fr;gap:13px;align-items:center}
.ava{width:56px;height:56px;border-radius:50%;background:var(--carte-2);border:1.5px dashed var(--trait-fort);display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:var(--doux)}
.ava.has{border-style:solid;border-color:var(--bleu);background:var(--bleu-clair);color:var(--bleu)}
.pv-nom{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pv-pro{font-size:12.8px;color:var(--graphite);margin-top:2px}
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:2px 8px;margin-top:5px}
.pv-b{padding:14px 18px 18px}
.pv-line{display:flex;gap:9px;font-size:13px;padding:6px 0;color:var(--c-26303f)}
.pv-line svg{flex:none;margin-top:3px;opacity:.55}
.pv-miss{color:var(--stop);background:var(--stop-bg);border-radius:5px;padding:6px 9px;font-size:12.4px;margin:5px 0;display:flex;gap:7px}
.pv-tags{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 4px}
.pv-tag{font-size:11.6px;background:var(--carte-2);border:1px solid var(--trait);border-radius:20px;padding:2.5px 9px;color:var(--c-33405a)}
.pv-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.pv-cta button{border-radius:var(--r);border:1.5px solid var(--bleu);background:var(--bleu);color:var(--c-ffffff);padding:9px;font-size:13px;font-weight:600;cursor:default}
.pv-cta button.ghost{background:var(--carte);color:var(--bleu)}
.pv-sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--doux);margin:15px 0 5px;border-top:1px solid var(--trait);padding-top:12px}
.pv-price{display:flex;justify-content:space-between;font-size:12.8px;padding:4px 0}
.pv-price span:last-child{font-family:var(--mono);font-size:12px}
.pv-foot{font-size:11.4px;color:var(--doux);margin-top:12px;line-height:1.45}

.mobile-open{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .work{grid-template-columns:200px minmax(0,1fr)}
  .preview{position:fixed;inset:auto 0 0 0;z-index:var(--ds-z-fixed-bar);background:var(--fond);padding:14px;border-top:1px solid var(--trait-fort);max-height:78vh;overflow:auto;box-shadow:0 -8px 30px rgba(16,23,40,.14)}
  .preview.closed{display:none}
  .mobile-open{display:flex;position:fixed;inset-inline-end:16px;bottom:16px;z-index:calc(var(--ds-z-fixed-bar) - 1);gap:8px;align-items:center;
    background:var(--encre);color:var(--c-ffffff);border:none;border-radius:30px;padding:12px 18px;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 6px 22px rgba(16,23,40,.28)}
}
@media (max-width:820px){
  .topbar{grid-template-columns:1fr auto;gap:10px;padding:10px 14px}
  .tb-mid{grid-column:1/-1;order:3;justify-content:space-between}
  .crumb{display:none}
  .work{grid-template-columns:1fr;padding:16px 14px 90px;gap:16px}
  .steps{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .step{flex:none;grid-template-columns:26px auto}
  .rail-note{display:none}
  .row.c2,.row.c3{grid-template-columns:1fr}
  .pane-b{padding:4px 16px 20px}
  .pane-h{padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---------- composants de saisie (même système) ---------- */
select.in{appearance:none;-webkit-appearance:none;padding-inline-end:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235B6678' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
input[type=date].in,input[type=time].in{cursor:pointer}
.drop{border:1.5px dashed var(--trait-fort);border-radius:var(--r);padding:20px 16px;text-align:center;background:var(--carte-2);cursor:pointer;display:block;width:100%}
.drop:hover{border-color:var(--bleu);background:var(--bleu-clair)}
.drop b{display:block;font-size:13.6px}
.drop span{font-size:12.4px;color:var(--graphite)}
.file{display:flex;align-items:center;gap:10px;border:1px solid var(--trait);border-radius:var(--r);padding:9px 11px;background:var(--carte);font-size:13.2px;margin-top:8px}
.file .ext{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;background:var(--bleu-clair);color:var(--bleu);padding:2px 7px;border-radius:3px}
.file .sp{flex:1}
.grid-ck{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px}
.ck{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:5px;cursor:pointer;font-size:13.4px;background:none;border:none;text-align:start;width:100%}
.ck:hover{background:var(--carte-2)}
.ck .box{width:15px;height:15px;border:1.5px solid var(--trait-fort);border-radius:3.5px;flex:none;position:relative}
.ck[aria-pressed="true"] .box{background:var(--bleu);border-color:var(--bleu)}
.ck[aria-pressed="true"] .box::after{content:"";position:absolute;inset-inline-start:4.4px;top:1.2px;width:4px;height:8px;border:solid var(--c-ffffff);border-width:0 2px 2px 0;transform:rotate(42deg)}
.ck .not{margin-inline-start:auto;font-family:var(--mono);font-size:9.5px;color:var(--doux)}
.radio{display:flex;flex-wrap:wrap;gap:8px}
.radio button{border:1.5px solid var(--trait-fort);background:var(--carte);border-radius:var(--r);padding:8px 13px;font-size:13.2px;cursor:pointer;display:flex;gap:9px;align-items:center}
.radio button .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--trait-fort);flex:none}
.radio button[aria-pressed="true"]{border-color:var(--bleu);background:var(--bleu-clair);color:var(--bleu);font-weight:600}
.radio button[aria-pressed="true"] .dot{border-color:var(--bleu);border-width:4.5px}
.num{display:flex;align-items:center;gap:8px}
.num input{width:120px}
.suf{font-family:var(--mono);font-size:11.5px;color:var(--graphite)}
.day{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--trait)}
.day:last-child{border-bottom:none}
.day .hh{display:flex;gap:8px;align-items:center;font-size:12.8px;color:var(--graphite)}
.day .hh input{width:106px}
.day.off .hh{opacity:.38;pointer-events:none}
.day .lab-j{display:flex;gap:9px;align-items:center;font-size:13.4px;cursor:pointer;background:none;border:none;padding:0}
.day .lab-j .box{width:15px;height:15px;border:1.5px solid var(--trait-fort);border-radius:3.5px;position:relative;flex:none}
.day .lab-j[aria-pressed="true"] .box{background:var(--bleu);border-color:var(--bleu)}
.day .lab-j[aria-pressed="true"] .box::after{content:"";position:absolute;inset-inline-start:4.4px;top:1.2px;width:4px;height:8px;border:solid var(--c-ffffff);border-width:0 2px 2px 0;transform:rotate(42deg)}
.mini-sw{display:inline-flex;align-items:center;gap:8px;font-size:12.6px;color:var(--graphite)}
.mini-sw button{width:34px;height:20px;border-radius:20px;background:var(--trait-fort);border:none;position:relative;cursor:pointer}
.mini-sw button::after{content:"";position:absolute;top:2.5px;inset-inline-start:2.5px;width:15px;height:15px;border-radius:50%;background:var(--c-ffffff);transition:transform .15s}
.mini-sw button[aria-pressed="true"]{background:var(--ok)}
.mini-sw button[aria-pressed="true"]::after{transform:translateX(14px)}
.subt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);margin:16px 0 7px}
.hint{font-size:12.3px;color:var(--doux);margin:6px 0 0}
.star{color:var(--stop)}
@media (max-width:820px){.day{grid-template-columns:1fr}.grid-ck{grid-template-columns:1fr}}
/* ============ COMPOSANTS DES MODULES (mêmes tokens) ============ */
.app{display:grid;grid-template-columns:238px minmax(0,1fr);gap:0;min-height:calc(100vh - 58px)}
.nav{background:var(--carte);border-inline-end:1px solid var(--trait);padding:16px 12px;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto}
.nav-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin:16px 8px 6px}
.nav-t:first-child{margin-top:0}
.nv{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;text-align:start;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13.8px;color:var(--encre)}
.nv:hover{background:var(--carte-2)}
.nv.on{background:var(--bleu-clair);color:var(--bleu);font-weight:600}
.nv svg{opacity:.65;flex:none}
.nv.on svg{opacity:1}
.nv .pill{margin-inline-start:auto;font-family:var(--mono);font-size:10px;background:var(--stop);color:var(--c-ffffff);border-radius:20px;padding:1px 6px}
.nv.on .pill{background:var(--bleu)}
.main{padding:22px 26px 70px;max-width:1180px}
.mh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.mh h1{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.015em;margin:4px 0 3px}
.mh p{margin:0;color:var(--graphite);font-size:13.8px;max-width:64ch}
.mh .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--bleu);margin:0}
.mh-act{display:flex;gap:9px;flex-wrap:wrap}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:14px 16px}
.kpi b{display:block;font-family:var(--serif);font-size:27px;line-height:1.1;letter-spacing:-.02em}
.kpi span{font-size:12.6px;color:var(--graphite)}
.kpi i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ok)}
.kpi i.bad{color:var(--stop)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.cols.c3{grid-template-columns:1fr 1fr 1fr}
.box{background:var(--carte);border:1px solid var(--trait);border-radius:10px;overflow:hidden;margin-bottom:14px}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--trait)}
.box-h b{font-size:14.5px}
.box-b{padding:14px 16px}
.box-b.flush{padding:0}

.rowlist{list-style:none;margin:0;padding:0}
.rowlist li{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--trait);cursor:pointer}
.rowlist li:last-child{border-bottom:none}
.rowlist li:hover{background:var(--carte-2)}
.ini{width:38px;height:38px;border-radius:50%;background:var(--bleu-clair);color:var(--bleu);display:grid;place-items:center;font-family:var(--serif);font-size:14px;font-weight:600}
.ini.g2{background:var(--carte-2);color:var(--graphite)}
.rl-t{font-size:14.2px;font-weight:600}
.rl-s{font-size:12.6px;color:var(--graphite)}
.rl-r{text-align:end;font-size:12.4px;color:var(--graphite)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--trait);margin-bottom:16px;overflow-x:auto}
.tab{background:none;border:none;padding:9px 13px;font-size:13.6px;cursor:pointer;color:var(--graphite);border-bottom:2.5px solid transparent;white-space:nowrap}
.tab:hover{color:var(--encre)}
.tab.on{color:var(--bleu);border-bottom-color:var(--bleu);font-weight:600}

.cal{display:grid;grid-template-columns:56px repeat(6,1fr);border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:var(--carte)}
.cal .hd{padding:9px 6px;text-align:center;border-bottom:1.5px solid var(--trait);border-inline-end:1px solid var(--trait);font-size:12.4px;background:var(--carte-2)}
.cal .hd b{display:block;font-size:13.6px}
.cal .hr{padding:6px;border-inline-end:1px solid var(--trait);border-bottom:1px solid var(--trait);font-family:var(--mono);font-size:10.5px;color:var(--doux);text-align:end}
.cal .cell{border-inline-end:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:3px;min-height:46px}
.rdv{border-radius:5px;padding:5px 7px;font-size:11.6px;line-height:1.3;cursor:pointer;border-inline-start:3px solid var(--bleu);background:var(--bleu-clair);color:var(--bleu);height:100%}
.rdv b{display:block;font-size:12px}
.rdv.bil{border-left-color:var(--att);background:var(--att-bg);color:var(--att)}
.rdv.gr{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.rdv.libre{background:repeating-linear-gradient(135deg,var(--carte-2),var(--carte-2) 6px,var(--c-eef1f5) 6px,var(--c-eef1f5) 12px);border-left-color:var(--trait-fort);color:var(--doux)}

.chat{display:grid;grid-template-columns:250px 1fr;border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:var(--carte);min-height:520px}
.chat-l{border-inline-end:1px solid var(--trait);overflow-y:auto;max-height:600px}
.cv{padding:12px 14px;border-bottom:1px solid var(--trait);cursor:pointer}
.cv:hover{background:var(--carte-2)}
.cv.on{background:var(--bleu-clair)}
.cv b{font-size:13.6px;display:block}
.cv span{font-size:12.2px;color:var(--graphite);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-r{display:flex;flex-direction:column}
.thread{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:470px;background:var(--carte-2)}
.msg{max-width:74%;padding:9px 13px;border-radius:12px;font-size:13.6px;background:var(--carte);border:1px solid var(--trait)}
.msg.me{align-self:flex-end;background:var(--bleu);color:var(--c-ffffff);border-color:var(--bleu)}
.msg .t{display:block;font-size:10.5px;opacity:.6;margin-top:4px;font-family:var(--mono)}
.composer{display:flex;gap:9px;padding:12px;border-top:1px solid var(--trait)}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.tc{background:var(--carte);border:1px solid var(--trait);border-radius:9px;padding:13px 14px;cursor:pointer;text-align:start}
.tc:hover{border-color:var(--bleu);box-shadow:0 3px 14px rgba(34,52,126,.08)}
.tc b{display:block;font-size:14px}
.tc span{font-size:12.2px;color:var(--graphite)}
.tc .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--att);background:var(--att-bg);border-radius:3px;padding:2px 6px;display:inline-block;margin-top:8px}
.tc .st.ok{color:var(--ok);background:var(--ok-bg)}

.edit{border:1px solid var(--trait);border-radius:9px;background:var(--carte);padding:20px 24px;font-size:14.5px;line-height:1.7;min-height:400px}
.edit h3{font-family:var(--serif);font-size:17px;margin:20px 0 6px}
.edit h3:first-child{margin-top:0}
.edit p{margin:0 0 10px;color:var(--c-26303f)}
.edit .slot{background:var(--bleu-clair);border-radius:4px;padding:1px 5px;color:var(--bleu);font-weight:600}
.edit .ia{background:var(--c-f3f0fb);border-inline-start:3px solid var(--c-6b54c8);padding:10px 13px;border-radius:0 6px 6px 0;margin:10px 0;font-size:13.6px}

.bars{display:flex;flex-direction:column;gap:9px}
.bar-r{display:grid;grid-template-columns:132px 1fr 52px;gap:11px;align-items:center;font-size:13.2px}
.bar-x{height:9px;background:var(--carte-2);border-radius:6px;overflow:hidden}
.bar-x i{display:block;height:100%;background:var(--bleu);border-radius:6px}
.bar-r b{text-align:end;font-family:var(--mono);font-size:12px}

.timeline{border-inline-start:2px solid var(--trait);margin-inline-start:7px;padding-inline-start:16px}
.tl{position:relative;padding-bottom:16px}
.tl::before{content:"";position:absolute;inset-inline-start:-22px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--bleu);border:2px solid var(--carte)}
.tl .d{font-family:var(--mono);font-size:10.5px;color:var(--doux)}
.tl b{display:block;font-size:13.8px}
.tl span{font-size:12.8px;color:var(--graphite)}

.alert{border-radius:8px;padding:12px 14px;font-size:13.4px;display:flex;gap:10px;margin-bottom:14px}
.alert.att{background:var(--att-bg);color:var(--c-7a4e05)}
.alert.info{background:var(--bleu-clair);color:var(--bleu)}
.alert.stop{background:var(--stop-bg);color:var(--stop)}
.alert b{white-space:nowrap}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters .in{width:auto;min-width:180px}
.sp{flex:1}
.money{font-family:var(--mono);font-size:12.6px}
.st-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:600}
.st-pill.ok{background:var(--ok-bg);color:var(--ok)}
.st-pill.att{background:var(--att-bg);color:var(--att)}
.st-pill.stop{background:var(--stop-bg);color:var(--stop)}
.st-pill.n{background:var(--carte-2);color:var(--graphite)}
.wip{border:1.5px dashed var(--trait-fort);border-radius:10px;padding:26px;text-align:center;background:var(--carte-2)}
.wip b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:6px}
.wip p{max-width:56ch;margin:0 auto 12px;color:var(--graphite);font-size:13.6px}

@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .nav{position:static;height:auto;display:flex;gap:6px;overflow-x:auto;border-inline-end:none;border-bottom:1px solid var(--trait);padding:10px}
  .nav-t,.nav .foot{display:none}
  .nv{white-space:nowrap;width:auto}
  .cols,.cols.c3{grid-template-columns:1fr}
  .chat{grid-template-columns:1fr}
  .chat-l{max-height:190px}
  .cal{font-size:11px}
  .main{padding:16px 14px 60px}
}

.cyc{width:30px;height:26px;border-radius:5px;border:1.5px solid var(--trait);background:var(--carte-2);
  color:var(--doux);font-family:var(--mono);font-size:12px;cursor:pointer;line-height:1}
.cyc:hover{border-color:var(--bleu)}
.cyc.c1{background:var(--att-bg);border-color:var(--c-ebd9b4);color:var(--att);font-weight:700}
.cyc.c2{background:var(--ok-bg);border-color:var(--c-c6e2da);color:var(--ok);font-weight:700}

/* intégration du formulaire de fiche dans la suite */
.main.wide{max-width:1440px}
.ficheEmbed .fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--carte);
  border:1px solid var(--trait);border-radius:10px;padding:11px 16px;margin-bottom:12px}
.ficheEmbed .fwork{display:grid;grid-template-columns:222px minmax(0,1fr);gap:22px;align-items:start}
.ficheEmbed.pv .fwork{grid-template-columns:222px minmax(0,1fr) 330px}
.ficheEmbed .steps{position:sticky;top:78px}
.ficheEmbed .preview{position:sticky;top:78px;inset:auto;background:none;border:none;box-shadow:none;
  padding:0;max-height:none;overflow:visible}
.ficheEmbed .preview.closed{display:none}
.ficheEmbed .pane-h{padding:18px 22px 14px}
.ficheEmbed .pane-b{padding:4px 22px 20px}
@media (max-width:1100px){
  .ficheEmbed .fwork,.ficheEmbed.pv .fwork{grid-template-columns:1fr}
  .ficheEmbed .steps{position:static;flex-direction:row;overflow-x:auto}
  .ficheEmbed .rail-note{display:none}
}

/* Neutralisation des regles de coque : la laterale, la barre du haut et la
   grille d'application appartiennent a `base_private.html`. Les redefinir
   ici creerait deux systemes de navigation superposes. */

.app,
.nav,
.nav-t,
.nv,
.topbar,
.tb-mid,
.tb-right,
.wordmark,
.crumb,
.ini {
    all: unset;
    display: revert;
}

/* ---- Composants de contenu, portee `.suite` -------------------------- */

body.pro .mh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--trait);
}

body.pro .eyebrow {
    margin: 0 0 6px;
    color: var(--graphite);
    font-family: var(--mono);
    font-size: 11.8px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.pro h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 31px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--encre);
}

body.pro .mh p {
    margin: 6px 0 0;
    color: var(--graphite);
    font-size: 14.6px;
}

body.pro .mh-act {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

body.pro .box {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    margin-bottom: 18px;
    overflow: hidden;
}

body.pro .box-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--trait);
    background: var(--carte-2);
    font-size: 14px;
}

body.pro .box-h b {
    font-weight: 600;
    color: var(--encre);
}

body.pro .box-b {
    padding: 18px;
    font-size: 14.6px;
}

body.pro .box-b.flush {
    padding: 0;
}

body.pro .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

body.pro .kpi {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    padding: 18px;
}

body.pro .kpi .n {
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.1;
    color: var(--bleu);
}

body.pro .kpi .lbl {
    margin-top: 4px;
    color: var(--graphite);
    font-size: 13.4px;
}

body.pro .cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

body.pro .tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.2px;
}

body.pro .tbl th {
    padding: 11px 18px;
    text-align: start;
    color: var(--graphite);
    font-size: 11.8px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--trait);
    background: var(--carte-2);
}

body.pro .tbl td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--trait);
    vertical-align: middle;
}

body.pro .tbl tr:last-child td {
    border-bottom: none;
}

body.pro .tbl tr:hover td {
    background: var(--carte-2);
}

body.pro .rowlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pro .row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--trait);
    font-size: 14.2px;
}

body.pro .row:last-child {
    border-bottom: none;
}

body.pro .row .t {
    flex: 1;
    color: var(--encre);
    font-weight: 500;
}

body.pro .row .sub {
    color: var(--graphite);
    font-size: 13.2px;
}

body.pro .mono {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--graphite);
}

body.pro .tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--carte-2);
    border: 1px solid var(--trait);
    color: var(--graphite);
    font-size: 12.2px;
    font-weight: 500;
}

body.pro .tag.stop {
    background: var(--stop-bg);
    border-color: var(--stop-bg);
    color: var(--stop);
}

body.pro .tag.att {
    background: var(--att-bg);
    border-color: var(--att-bg);
    color: var(--att);
}

body.pro .tag.ok {
    background: var(--ok-bg);
    border-color: var(--ok-bg);
    color: var(--ok);
}

body.pro .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid var(--trait-fort);
    border-radius: var(--r);
    background: var(--carte);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 13.8px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

body.pro .btn:hover {
    background: var(--carte-2);
    border-color: var(--graphite);
}

body.pro .btn.pri {
    background: var(--bleu);
    border-color: var(--bleu);
    color: var(--c-ffffff);
}

body.pro .btn.pri:hover {
    background: var(--bleu-vif);
    border-color: var(--bleu-vif);
}

body.pro .btn.ghost {
    background: transparent;
    border-color: var(--trait);
    color: var(--graphite);
}

body.pro .btn.sm {
    padding: 5px 11px;
    font-size: 12.8px;
}

body.pro .linkbtn {
    background: none;
    border: none;
    padding: 0;
    color: var(--bleu-vif);
    font-size: 13.4px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

body.pro .linkbtn:hover {
    text-decoration: underline;
}

body.pro .in {
    padding: 8px 11px;
    border: 1px solid var(--trait-fort);
    border-radius: var(--r);
    background: var(--carte);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 14px;
    width: 100%;
}

body.pro .in:focus {
    border-color: var(--bleu-vif);
    outline: none;
    box-shadow: 0 0 0 3px var(--bleu-clair);
}

body.pro .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body.pro .filters .in {
    width: auto;
    min-width: 220px;
}

body.pro .lbl {
    display: block;
    margin-bottom: 12px;
    color: var(--graphite);
    font-size: 13.2px;
    font-weight: 500;
}

body.pro .lbl .in {
    margin-top: 5px;
}

body.pro .g2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

body.pro .g2 .lab {
    display: block;
    color: var(--graphite);
    font-size: 12.4px;
}

body.pro .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--trait);
}

body.pro .tab {
    padding: 9px 16px;
    color: var(--graphite);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

body.pro .tab:hover {
    color: var(--encre);
}

body.pro .tab.on {
    color: var(--bleu);
    font-weight: 600;
    border-bottom-color: var(--bleu-vif);
}

body.pro .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

body.pro .card {
    display: block;
    padding: 15px;
    border: 1px solid var(--trait);
    border-radius: var(--r);
    background: var(--carte-2);
    text-decoration: none;
}

body.pro .card:hover {
    border-color: var(--bleu-vif);
    background: var(--bleu-clair);
}

body.pro .card b {
    display: block;
    color: var(--encre);
    font-size: 14.6px;
}

body.pro .card span {
    color: var(--graphite);
    font-size: 13.2px;
}

body.pro .empty-tk {
    margin: 0;
    padding: 26px 18px;
    color: var(--doux);
    font-size: 14px;
    text-align: center;
}

body.pro .alert {
    padding: 12px 16px;
    border-radius: var(--r);
    margin-bottom: 14px;
    font-size: 14px;
    background: var(--ok-bg);
    color: var(--ok);
}

body.pro .alert.error,
body.pro .alert.danger {
    background: var(--stop-bg);
    color: var(--stop);
}

body.pro .alert.warning {
    background: var(--att-bg);
    color: var(--att);
}

body.pro .fbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

body.pro .seg {
    display: inline-flex;
    gap: 5px;
}

body.pro .cal {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.6px;
}

body.pro .cal th {
    padding: 10px;
    border: 1px solid var(--trait);
    background: var(--carte-2);
    color: var(--graphite);
    font-size: 12.4px;
    font-weight: 600;
}

body.pro .cal th .d {
    display: block;
    color: var(--encre);
    font-size: 14px;
}

body.pro .cal .hh {
    width: 78px;
}

body.pro .cell {
    padding: 5px;
    border: 1px solid var(--trait);
    vertical-align: top;
    height: 56px;
}

body.pro .rdv {
    padding: 7px 9px;
    border-radius: 5px;
    background: var(--bleu-clair);
    border-inline-start: 3px solid var(--bleu-vif);
    color: var(--bleu);
    font-size: 12.8px;
}

body.pro .slot.libre {
    padding: 7px 9px;
    color: var(--doux);
    font-size: 12.4px;
}

body.pro .pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--stop);
    color: var(--c-ffffff);
    font-family: var(--mono);
    font-size: 10.8px;
}

body.pro .foot {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 9px 0;
}

body.pro .foot .btn.sm {
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
    padding: 0;
}

/* ==== Grille d'agenda ================================================ */

/* LARGEURS FIXES. Sans `table-layout: fixed`, une cellule au libelle long
   elargit sa colonne et decale toute la semaine : les heures ne tombent
   plus en face des jours, et la grille ment. */

body.pro .suite .cal {
    table-layout: fixed;
    width: 100%;
    border: none;
}

body.pro .suite .cal thead th {
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--trait);
    background: var(--carte-2);
    white-space: nowrap;
}

body.pro .suite .cal thead th:first-child {
    width: 78px;
    background: var(--carte);
    border-inline-start: none;
    border-block-start: none;
}

body.pro .suite .cal thead th .d {
    display: block;
    color: var(--encre);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body.pro .suite .cal thead th .lab-j {
    display: block;
    margin-top: 2px;
    color: var(--graphite);
    font-family: var(--mono);
    font-size: 11.6px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
}

body.pro .suite .cal tbody th.hh {
    width: 78px;
    padding: 10px 12px;
    text-align: end;
    vertical-align: top;
    border: 1px solid var(--trait);
    background: var(--carte);
    color: var(--doux);
    font-family: var(--mono);
    font-size: 11.8px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
}

body.pro .suite .cal td.cell {
    padding: 4px;
    height: 62px;
    border: 1px solid var(--trait);
    background: var(--carte);
    vertical-align: top;
}

body.pro .suite .cal .rdv {
    height: 100%;
    padding: 8px 10px;
    border-radius: 5px;
    background: var(--ok-bg);
    border-inline-start: 3px solid var(--ok);
    color: var(--ok);
    font-size: 12.6px;
    line-height: 1.35;
    overflow: hidden;
}

body.pro .suite .cal .rdv b {
    display: block;
    color: var(--encre);
    font-weight: 600;
}

body.pro .suite .cal .slot.libre {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: repeating-linear-gradient(
        135deg,
        var(--carte-2),
        var(--carte-2) 6px,
        var(--carte) 6px,
        var(--carte) 12px
    );
    color: var(--doux);
    font-size: 12px;
}

/* ==== Barre de filtres et tableau patients =========================== */

body.pro .suite .filters--head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

body.pro .suite .filters--head .in {
    min-width: 260px;
}

body.pro .suite .seg--tabs {
    display: inline-flex;
    border: 1px solid var(--trait-fort);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--carte);
}

body.pro .suite .seg--tabs .seg-tab {
    padding: 7px 15px;
    color: var(--graphite);
    font-size: 13.6px;
    text-decoration: none;
    border-inline-end: 1px solid var(--trait);
}

body.pro .suite .seg--tabs .seg-tab:last-child {
    border-inline-end: none;
}

body.pro .suite .seg--tabs .seg-tab:hover {
    background: var(--carte-2);
    color: var(--encre);
}

body.pro .suite .seg--tabs .seg-tab.on {
    background: var(--bleu);
    color: var(--c-ffffff);
    font-weight: 600;
}

body.pro .suite .count-note {
    margin-inline-start: auto;
    color: var(--doux);
    font-size: 12.4px;
}

body.pro .suite .tbl--patients td {
    vertical-align: top;
    padding: 15px 18px;
}

body.pro .suite .pat-n {
    display: block;
    color: var(--encre);
    font-weight: 600;
    font-size: 14.8px;
    text-decoration: none;
}

body.pro .suite .pat-n:hover {
    color: var(--bleu-vif);
}

body.pro .suite .pat-s {
    display: block;
    margin-top: 3px;
    color: var(--doux);
    font-size: 11.8px;
}

body.pro .suite .tbl--patients .t {
    display: block;
    color: var(--encre);
}

body.pro .suite .st-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--ok-bg);
    color: var(--ok);
    font-family: var(--mono);
    font-size: 10.8px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ==== Tableau de bord ================================================ */

/* LES CINQ MESURES TIENNENT SUR UNE LIGNE. Le prototype les aligne : cinq
   colonnes egales, le nombre au-dessus du libelle, la precision en dessous
   en petite capitale. Un retour a la ligne casse la lecture d'un coup d'oeil. */

body.pro .suite .kpis--5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

body.pro .suite .kpis--5 .kpi {
    padding: 18px 20px;
    min-width: 0;
}

body.pro .suite .kpis--5 .kpi .n {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--encre);
}

body.pro .suite .kpis--5 .kpi .lbl {
    margin-top: 6px;
    color: var(--graphite);
    font-size: 13.2px;
    line-height: 1.4;
}

body.pro .suite .kpi-note {
    display: block;
    margin-top: 4px;
    color: var(--att);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.45;
}

/* ---- Bandeaux d'alerte ---------------------------------------------- */

body.pro .suite .alert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: var(--r);
    background: var(--att-bg);
    font-size: 14.2px;
    color: var(--att);
}

body.pro .suite .alert-row b {
    color: var(--encre);
    font-weight: 600;
    flex: 0 0 auto;
}

body.pro .suite .alert-row span {
    flex: 1;
    color: var(--att);
}

body.pro .suite .alert-row .linkbtn {
    color: var(--att);
    text-decoration: underline;
    flex: 0 0 auto;
}

/* ---- Colonnes du tableau de bord ------------------------------------ */

body.pro .col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

body.pro .ava {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bleu-clair);
    color: var(--bleu);
    font-family: var(--mono);
    font-size: 11.4px;
    font-weight: 600;
    flex: 0 0 auto;
}

/* ---- A faire : jalons dates ----------------------------------------- */
/* Non suite-scope : reutilise aussi par les pages famille/enseignant
   (aucune n'est enveloppee dans .suite, reservee au tableau de bord pro). */

body.pro .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pro .tl {
    position: relative;
    padding: 10px 18px 10px 36px;
    border-bottom: 1px solid var(--trait);
}

body.pro .tl:last-child {
    border-bottom: none;
}

body.pro .tl::before {
    content: "";
    position: absolute;
    inset-inline-start: 18px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bleu-vif);
}

body.pro .tl .when {
    display: block;
    margin-bottom: 4px;
    color: var(--doux);
    font-family: var(--mono);
    font-size: 10.8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.pro .tl b {
    display: block;
    color: var(--encre);
    font-size: 14.4px;
    font-weight: 600;
}

body.pro .tl .sub {
    display: block;
    margin-top: 3px;
    color: var(--graphite);
    font-size: 13.2px;
    line-height: 1.45;
}

/* ---- Objectifs : une barre par objectif ------------------------------ */

/* AUCUN POURCENTAGE N'EST AFFICHE tant qu'aucune seance n'a ete saisie :
   une barre remplie au hasard donnerait a une absence de mesure l'apparence
   d'un resultat. La barre reste vide et la note le dit. */

body.pro .suite .bars {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pro .suite .bar-x {
    display: grid;
    grid-template-columns: 1fr 220px 44px;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--trait);
}

body.pro .suite .bar-x:last-child {
    border-bottom: none;
}

body.pro .suite .bar-x .lbl {
    margin: 0;
    color: var(--encre);
    font-size: 14px;
    font-weight: 400;
}

body.pro .suite .bar-r {
    height: 8px;
    border-radius: 20px;
    background: var(--carte-2);
    overflow: hidden;
}

body.pro .suite .bar-r span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: var(--bleu);
}

body.pro .suite .bar-x .pct {
    color: var(--graphite);
    font-family: var(--mono);
    font-size: 12.4px;
    text-align: end;
}

body.pro .hint {
    margin: 14px 0 0;
    color: var(--doux);
    font-size: 12.6px;
    line-height: 1.5;
}

@media (max-width: 1500px) {
    body.pro .suite .kpis--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.pro .suite .kpis--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.pro .suite .bar-x {
        grid-template-columns: 1fr 120px 40px;
    }
}

/* ==== Correctifs d'affichage ========================================= */

/* CINQ COLONNES, PAS QUATRE PUIS UNE. La regle generique `.kpis` utilise
   `auto-fit` : a poids egal, la derniere declaration l'emporte et casse la
   ligne. Deux classes sur le meme element donnent le poids necessaire sans
   recourir a `!important`. */

body.pro .suite .kpis.kpis--5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

/* La regle a cinq colonnes ci-dessus l'emporte sur les paliers plus haut :
   sans ces deux paliers, les tuiles restent a 59 px sur un telephone. Memes
   valeurs que les autres bandeaux (page-pro-sidebar.css). */
@media (max-width: 1100px) {
    body.pro .suite .kpis.kpis--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.pro .suite .kpis.kpis--5 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* UNE LIGNE D'OBJECTIF A TROIS COLONNES ALIGNEES. Sans hauteur minimale ni
   interligne, le libelle est rogne par la jauge et devient illisible. */

body.pro .suite .bars .bar-x {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 46px;
    align-items: center;
    gap: 16px;
    min-height: 34px;
    padding: 10px 0;
}

body.pro .suite .bars .bar-x .lbl {
    display: block;
    margin: 0;
    color: var(--encre);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    overflow: visible;
}

body.pro .suite .bars .bar-r {
    display: block;
    height: 8px;
    width: 100%;
    border-radius: 20px;
    background: var(--carte-2);
    overflow: hidden;
}

body.pro .suite .bars .bar-x .pct {
    color: var(--doux);
    font-family: var(--mono);
    font-size: 12.4px;
    text-align: end;
}

/* L'EN-TETE DE PAGE NE SE DECOLLE PAS DU HAUT. */

body.pro .suite > .mh:first-child {
    margin-top: 0;
}

body.pro .suite .mh h1 {
    line-height: 1.2;
}

/* ==== Agenda : jauges et rang ======================================== */

/* CENT ET UNE CLASSES PLUTOT QU'UN ATTRIBUT style. La largeur est une
   donnee mesuree ; l'ecrire en ligne mettrait une valeur calculee dans
   le gabarit, ce que le depot interdit. */

body.pro .suite .bar-fill--0 { width: 0%; }
body.pro .suite .bar-fill--1 { width: 1%; }
body.pro .suite .bar-fill--2 { width: 2%; }
body.pro .suite .bar-fill--3 { width: 3%; }
body.pro .suite .bar-fill--4 { width: 4%; }
body.pro .suite .bar-fill--5 { width: 5%; }
body.pro .suite .bar-fill--6 { width: 6%; }
body.pro .suite .bar-fill--7 { width: 7%; }
body.pro .suite .bar-fill--8 { width: 8%; }
body.pro .suite .bar-fill--9 { width: 9%; }
body.pro .suite .bar-fill--10 { width: 10%; }
body.pro .suite .bar-fill--11 { width: 11%; }
body.pro .suite .bar-fill--12 { width: 12%; }
body.pro .suite .bar-fill--13 { width: 13%; }
body.pro .suite .bar-fill--14 { width: 14%; }
body.pro .suite .bar-fill--15 { width: 15%; }
body.pro .suite .bar-fill--16 { width: 16%; }
body.pro .suite .bar-fill--17 { width: 17%; }
body.pro .suite .bar-fill--18 { width: 18%; }
body.pro .suite .bar-fill--19 { width: 19%; }
body.pro .suite .bar-fill--20 { width: 20%; }
body.pro .suite .bar-fill--21 { width: 21%; }
body.pro .suite .bar-fill--22 { width: 22%; }
body.pro .suite .bar-fill--23 { width: 23%; }
body.pro .suite .bar-fill--24 { width: 24%; }
body.pro .suite .bar-fill--25 { width: 25%; }
body.pro .suite .bar-fill--26 { width: 26%; }
body.pro .suite .bar-fill--27 { width: 27%; }
body.pro .suite .bar-fill--28 { width: 28%; }
body.pro .suite .bar-fill--29 { width: 29%; }
body.pro .suite .bar-fill--30 { width: 30%; }
body.pro .suite .bar-fill--31 { width: 31%; }
body.pro .suite .bar-fill--32 { width: 32%; }
body.pro .suite .bar-fill--33 { width: 33%; }
body.pro .suite .bar-fill--34 { width: 34%; }
body.pro .suite .bar-fill--35 { width: 35%; }
body.pro .suite .bar-fill--36 { width: 36%; }
body.pro .suite .bar-fill--37 { width: 37%; }
body.pro .suite .bar-fill--38 { width: 38%; }
body.pro .suite .bar-fill--39 { width: 39%; }
body.pro .suite .bar-fill--40 { width: 40%; }
body.pro .suite .bar-fill--41 { width: 41%; }
body.pro .suite .bar-fill--42 { width: 42%; }
body.pro .suite .bar-fill--43 { width: 43%; }
body.pro .suite .bar-fill--44 { width: 44%; }
body.pro .suite .bar-fill--45 { width: 45%; }
body.pro .suite .bar-fill--46 { width: 46%; }
body.pro .suite .bar-fill--47 { width: 47%; }
body.pro .suite .bar-fill--48 { width: 48%; }
body.pro .suite .bar-fill--49 { width: 49%; }
body.pro .suite .bar-fill--50 { width: 50%; }
body.pro .suite .bar-fill--51 { width: 51%; }
body.pro .suite .bar-fill--52 { width: 52%; }
body.pro .suite .bar-fill--53 { width: 53%; }
body.pro .suite .bar-fill--54 { width: 54%; }
body.pro .suite .bar-fill--55 { width: 55%; }
body.pro .suite .bar-fill--56 { width: 56%; }
body.pro .suite .bar-fill--57 { width: 57%; }
body.pro .suite .bar-fill--58 { width: 58%; }
body.pro .suite .bar-fill--59 { width: 59%; }
body.pro .suite .bar-fill--60 { width: 60%; }
body.pro .suite .bar-fill--61 { width: 61%; }
body.pro .suite .bar-fill--62 { width: 62%; }
body.pro .suite .bar-fill--63 { width: 63%; }
body.pro .suite .bar-fill--64 { width: 64%; }
body.pro .suite .bar-fill--65 { width: 65%; }
body.pro .suite .bar-fill--66 { width: 66%; }
body.pro .suite .bar-fill--67 { width: 67%; }
body.pro .suite .bar-fill--68 { width: 68%; }
body.pro .suite .bar-fill--69 { width: 69%; }
body.pro .suite .bar-fill--70 { width: 70%; }
body.pro .suite .bar-fill--71 { width: 71%; }
body.pro .suite .bar-fill--72 { width: 72%; }
body.pro .suite .bar-fill--73 { width: 73%; }
body.pro .suite .bar-fill--74 { width: 74%; }
body.pro .suite .bar-fill--75 { width: 75%; }
body.pro .suite .bar-fill--76 { width: 76%; }
body.pro .suite .bar-fill--77 { width: 77%; }
body.pro .suite .bar-fill--78 { width: 78%; }
body.pro .suite .bar-fill--79 { width: 79%; }
body.pro .suite .bar-fill--80 { width: 80%; }
body.pro .suite .bar-fill--81 { width: 81%; }
body.pro .suite .bar-fill--82 { width: 82%; }
body.pro .suite .bar-fill--83 { width: 83%; }
body.pro .suite .bar-fill--84 { width: 84%; }
body.pro .suite .bar-fill--85 { width: 85%; }
body.pro .suite .bar-fill--86 { width: 86%; }
body.pro .suite .bar-fill--87 { width: 87%; }
body.pro .suite .bar-fill--88 { width: 88%; }
body.pro .suite .bar-fill--89 { width: 89%; }
body.pro .suite .bar-fill--90 { width: 90%; }
body.pro .suite .bar-fill--91 { width: 91%; }
body.pro .suite .bar-fill--92 { width: 92%; }
body.pro .suite .bar-fill--93 { width: 93%; }
body.pro .suite .bar-fill--94 { width: 94%; }
body.pro .suite .bar-fill--95 { width: 95%; }
body.pro .suite .bar-fill--96 { width: 96%; }
body.pro .suite .bar-fill--97 { width: 97%; }
body.pro .suite .bar-fill--98 { width: 98%; }
body.pro .suite .bar-fill--99 { width: 99%; }
body.pro .suite .bar-fill--100 { width: 100%; }

body.pro .suite .row .rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--carte-2);
    color: var(--graphite);
    font-size: 12px;
    flex: 0 0 auto;
}

body.pro .suite .row .t .sub {
    display: block;
    margin-top: 2px;
}

body.pro .suite .cal .rdv span {
    display: block;
    color: var(--graphite);
    font-size: 11.8px;
}

/* ==== Agenda : grille alignee et cliquable =========================== */

/* LES LARGEURS SONT DECLAREES PAR `colgroup`. Sans elles, `table-layout:
   fixed` repartit selon la premiere ligne rendue et une seule colonne de
   jour apparait : la semaine devient illisible. */

body.pro .suite .cal-wrap {
    width: 100%;
    overflow-x: auto;
}

body.pro .suite .cal {
    table-layout: fixed;
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

body.pro .suite .cal .col-hour {
    width: 82px;
}

body.pro .suite .cal .col-day {
    width: auto;
}

body.pro .suite .cal th.corner {
    background: var(--carte);
    border-block-start: none;
    border-inline-start: none;
}

body.pro .suite .cal .rdv,
body.pro .suite .cal .slot.libre {
    display: block;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
}

body.pro .suite .cal .rdv:hover {
    background: var(--ok);
    color: var(--c-ffffff);
}

body.pro .suite .cal .rdv:hover b,
body.pro .suite .cal .rdv:hover span {
    color: var(--c-ffffff);
}

body.pro .suite .cal .slot.libre:hover {
    background: var(--bleu-clair);
    color: var(--bleu);
}

body.pro .suite .ck {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--encre);
    font-size: 14px;
}

body.pro .suite .ck input {
    width: auto;
}

body.pro .suite .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==== Semantique de tableau =========================================== */

/* LA FEUILLE DU PROTOTYPE REDEFINIT `.cal` SANS PORTEE, en grille. Appliquee
   a un vrai `<table>`, elle annule `thead`, `tbody` et `tr` : les six jours,
   les heures et les cellules se deversent en une seule coulee.

   On retablit donc explicitement l'affichage tabulaire dans `.suite`, sans
   toucher a la declaration d'origine. */

body.pro .suite table.cal {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    grid-template-columns: none;
    gap: 0;
}

body.pro .suite table.cal > colgroup {
    display: table-column-group;
}

body.pro .suite table.cal > colgroup > col {
    display: table-column;
}

body.pro .suite table.cal > thead {
    display: table-header-group;
}

body.pro .suite table.cal > tbody {
    display: table-row-group;
}

body.pro .suite table.cal > thead > tr,
body.pro .suite table.cal > tbody > tr {
    display: table-row;
}

body.pro .suite table.cal th,
body.pro .suite table.cal td {
    display: table-cell;
    float: none;
    position: static;
}

body.pro .suite table.tbl {
    display: table;
}

body.pro .suite table.tbl > thead {
    display: table-header-group;
}

body.pro .suite table.tbl > tbody {
    display: table-row-group;
}

body.pro .suite table.tbl > thead > tr,
body.pro .suite table.tbl > tbody > tr {
    display: table-row;
}

body.pro .suite table.tbl th,
body.pro .suite table.tbl td {
    display: table-cell;
}

/* Un solde du se lit d un coup d oeil : le prototype le porte en rouge. */
body.pro .suite .money .due {
    color: var(--stop);
    font-weight: 600;
}
/* Dossier patient : barre d onglets et tableau d identite. */
body.pro .suite .seg--patient {
    margin-bottom: 18px;
    flex-wrap: wrap;
}

body.pro .suite .tbl--id th {
    inline-size: 190px;
    color: var(--graphite);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.4px;
}

body.pro .suite .gaps {
    margin: 0;
    padding-inline-start: 18px;
    color: var(--att);
    font-size: 13.4px;
}

/* Liste patients : toute la ligne ouvre le dossier */
/* AUCUN JAVASCRIPT. Le lien du nom projette une couche invisible sur
   toute la ligne : le clic aboutit depuis n'importe quelle cellule, et
   le clic-milieu, le clic droit et l'ouverture en nouvel onglet
   continuent de fonctionner -- ce qu'un `onclick` sur `<tr>` supprime.
   Le survol de ligne existait deja, seul le curseur est ajoute. */
body.pro .suite .tbl--patients tbody tr { position: relative; cursor: pointer; }
body.pro .suite .tbl--patients .pat-n::after {
  content: ""; position: absolute; inset: 0;
}
body.pro .suite .tbl--patients .st-pill,
body.pro .suite .tbl--patients .due,
body.pro .suite .tbl--patients input[type="checkbox"] { position: relative; }

/* ---------- Tableau de bord : tuiles cliquables, graphique, lignes ----------
   Chaque valeur var() porte sa valeur de repli : une feuille chargee sans le
   socle de variables reste lisible. */

body.pro .kpi--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.pro .kpi--link:hover,
body.pro .kpi--link:focus-visible,
body.pro .kpi--link.is-active {
    border-color: var(--bleu, var(--c-1c6146));
    box-shadow: 0 1px 6px rgba(16, 42, 32, .10);
}

body.pro .kpi--link .n {
    display: block;
    font-family: var(--serif, Georgia, serif);
    font-size: 34px;
    line-height: 1.1;
    color: var(--bleu, var(--c-1c6146));
}

body.pro .kpi--link .lbl {
    display: block;
    margin-top: 4px;
    color: var(--graphite, var(--c-5a6b64));
    font-size: 13.4px;
}

/* La ligne entiere est la cible : viser un mot de trois lettres est un defaut. */
body.pro .row--link {
    padding: 0;
}

body.pro .row--link .row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 18px;
    color: inherit;
    text-decoration: none;
}

body.pro .row--link .row-link:hover,
body.pro .row--link .row-link:focus-visible {
    background: var(--carte-2, var(--c-f3f7f5));
}

body.pro .row--link .row-link .t {
    flex: 1;
}

/* Graphique a barres : la longueur se compare, la valeur se lit. */
body.pro .chart-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.pro .chart-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) 48px;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--trait, var(--c-e9efed));
}

body.pro .chart-bar:last-child {
    border-bottom: none;
}

body.pro .chart-bar-label {
    min-width: 0;
    color: var(--encre, var(--c-15241e));
    font-size: 14px;
    font-weight: 500;
}

body.pro .chart-bar-track {
    display: block;
    height: 10px;
    border-radius: 20px;
    background-color: var(--carte-2, var(--c-f3f7f5));
    background-image: linear-gradient(
        to right,
        var(--trait, var(--c-e9efed)) 0,
        var(--trait, var(--c-e9efed)) 1px,
        transparent 1px,
        transparent 25%
    );
    background-size: 25% 100%;
    overflow: hidden;
}

body.pro .chart-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 20px;
    background: var(--bleu, var(--c-1c6146));
    transition: width .4s ease;
}

body.pro .chart-bar-value {
    color: var(--graphite, var(--c-5a6b64));
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 12.4px;
    text-align: end;
}

@media (max-width: 640px) {
    body.pro .chart-bar {
        grid-template-columns: minmax(0, 1fr) 48px;
    }
    body.pro .chart-bar-track {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* Squelette du graphique vide : silhouette du meme bloc rempli, sans
   aucune valeur chiffree puisqu'aucune mesure n'existe. */
body.pro .chart-bars--skeleton {
    gap: 10px;
    margin-bottom: 10px;
}

body.pro .chart-bars--skeleton .chart-bar {
    display: block;
    padding: 0;
    border-bottom: none;
}

body.pro .chart-bar-skel {
    display: block;
    height: 10px;
    border-radius: 20px;
    background: var(--carte-2, var(--c-f3f7f5));
}

/* Jours de la semaine de l'ouverture en serie : sept cases tiennent sur une
   ligne. Empilees, elles repoussaient le bouton hors de l'ecran. */
body.pro .fwork .f-fieldset > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

body.pro .fwork .f-fieldset > div > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.pro .fwork .f-fieldset label {
    margin: 0;
    font-weight: 400;
}

/* Relance en attente : bouton grise avec compte a rebours de 24 h. */
body.pro button[data-relance-until][disabled] {
    background: var(--carte-2, var(--c-f4f6f9));
    border-color: var(--trait, var(--c-dee3ea));
    color: var(--doux, var(--c-8a94a4));
    cursor: not-allowed;
    font-variant-numeric: tabular-nums;
}

/* ---- Lignes d'adressage : trois colonnes alignees (patient, confrere ou motif, action) ---- */
/* `.rowlist` ajoute un cran de specificite : `theme-pro.css` porte une regle
   generique `.row` de meme poids (`body.private .suite .row`), chargee apres
   celle-ci, qui sinon lui reprend ce padding compact. */
body.pro .suite .rowlist .row--adr,
body.pro .suite .rowlist .row--link .row-link {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    min-height: 44px;
}
body.pro .suite .row--link { padding: 0; }
body.pro .suite .row--adr .t,
body.pro .suite .row--adr .sub,
body.pro .suite .row--link .row-link .t,
body.pro .suite .row--link .row-link .sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pro .suite .row--adr form { margin: 0; justify-self: end; }

/* ---- Ligne entiere cliquable sans imbriquer de lien dans un lien -------
   .row-main porte un ::after etire sur toute la ligne (position:relative) ;
   tout element independant (bouton, badge) reprend le dessus par z-index. */
body.pro .suite .row--adr.row--stretch {
    position: relative;
    cursor: pointer;
}
body.pro .suite .row--adr.row--stretch .row-main {
    position: static;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}
body.pro .suite .row--adr.row--stretch .row-main::after {
    content: "";
    position: absolute;
    inset: 0;
}
body.pro .suite .row--adr.row--stretch > :not(.row-main) {
    position: relative;
    z-index: 1;
}
body.pro .suite .row--adr.row--stretch:hover {
    background: var(--carte-2);
}
body.pro .suite .row--adr.row--stretch:focus-within {
    background: var(--carte-2);
    outline: 2px solid var(--bleu-vif);
    outline-offset: -2px;
}

/* "A faire" : meme grille que les adressages, troisieme colonne = date,
   texte secondaire dans la police de l'UI (jamais de mono en majuscules). */
body.pro .suite .row--adr .meta {
    color: var(--graphite);
    font-size: 12.2px;
    text-align: end;
    white-space: nowrap;
}

/* ---- Boutons : bleu de la charte pro, jamais de vert ---- */
body.pro .suite .btn.pri {
    background: var(--bleu);
    border-color: var(--bleu);
    color: var(--c-ffffff);
}
body.pro .suite .btn.pri:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); }
body.pro .suite .rowlist .btn.sm:not(.pri):not(.ghost),
body.pro .suite .seg .btn.sm:not(.pri):not(.ghost) {
    background: var(--carte);
    border: 1px solid var(--bleu);
    color: var(--bleu);
    /* `min-height` et non juste `height` : `shell-public.css` porte un
       plancher tactile generique `.btn{min-height:44px}` qu'un `height`
       seul ne peut jamais battre (min-height prime toujours sur un height
       plus petit, quelle que soit la specificite). */
    height: 32px;
    min-height: 32px;
    min-width: 132px;
    padding: 0 10px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
body.pro .suite .rowlist .btn.sm:not(.pri):not(.ghost):hover,
body.pro .suite .seg .btn.sm:not(.pri):not(.ghost):hover { background: var(--bleu-clair); }
body.pro .suite .rowlist .btn.sm[disabled],
body.pro .suite .seg .btn.sm[disabled] {
    background: var(--carte-2);
    border-color: var(--trait);
    color: var(--graphite);
    cursor: not-allowed;
}

/* ---- Espacement unique entre blocs : 18 px ---- */
body.pro .suite .cols,
body.pro .suite .kpis { gap: 18px; }
body.pro .suite .alert-row { margin-bottom: 18px; }
body.pro .ava { overflow: hidden; line-height: 1; }
body.pro .suite .row--link + .row--link,
body.pro .suite .row--adr + .row--adr { border-top: 0; }

/* Objectifs travailles : lignes de totaux sous les barres de pourcentage. */
body.pro .chart-bars--counts {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--trait, var(--c-dee3ea));
}
body.pro .chart-bar--count {
    grid-template-columns: minmax(0, 1fr) auto;
}
body.pro .chart-bar--count .chart-bar-value {
    color: var(--encre, var(--c-101728));
    font-weight: 600;
    font-size: 14px;
}

/* ---- Etat vide : icone discrete, texte centre, lien contextuel -----
   Remplace un simple "empty-tk" italique quand le bloc beneficie d'une
   action de reprise connue (ex. ouvrir l'agenda) ; compact, pas de grand
   blanc. */
body.pro .suite .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    text-align: center;
    color: var(--doux);
}
body.pro .suite .empty-state svg {
    width: 22px;
    height: 22px;
    opacity: 0.55;
}
body.pro .suite .empty-state p {
    margin: 0;
    font-size: 12.8px;
}
body.pro .suite .empty-state .linkbtn {
    font-size: 12.8px;
}

/* ---- Mini-graphique : volume de seances par semaine, en tete du bloc
   Objectifs. Barres verticales courtes (piste 64px), silhouette compacte
   meme a zero. Meme palette que le reste du tableau de bord (--bleu). ---- */
body.pro .suite .mini-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--trait);
}
body.pro .suite .mini-bar-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
body.pro .suite .mini-bar-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 28px;
    height: 64px;
    border-radius: 4px;
    background: var(--carte-2);
    overflow: hidden;
}
body.pro .suite .mini-bar-fill {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 4px 4px 0 0;
    background: var(--bleu);
    transition: height 0.4s ease;
}
body.pro .suite .mini-bar-fill.mini-h-0 { height: 0%; }
body.pro .suite .mini-bar-fill.mini-h-10 { height: 10%; }
body.pro .suite .mini-bar-fill.mini-h-20 { height: 20%; }
body.pro .suite .mini-bar-fill.mini-h-30 { height: 30%; }
body.pro .suite .mini-bar-fill.mini-h-40 { height: 40%; }
body.pro .suite .mini-bar-fill.mini-h-50 { height: 50%; }
body.pro .suite .mini-bar-fill.mini-h-60 { height: 60%; }
body.pro .suite .mini-bar-fill.mini-h-70 { height: 70%; }
body.pro .suite .mini-bar-fill.mini-h-80 { height: 80%; }
body.pro .suite .mini-bar-fill.mini-h-90 { height: 90%; }
body.pro .suite .mini-bar-fill.mini-h-100 { height: 100%; }
body.pro .suite .mini-bar-n {
    color: var(--encre);
    font-size: 12px;
    font-weight: 600;
}
body.pro .suite .mini-bar-label {
    color: var(--doux);
    font-size: 10.6px;
}

/* Infobulle en couche (composant partagé, voir static/js/ui/tooltip.js) : posée au niveau du
   <body>, en position fixe, donc jamais rognée par un conteneur ni masquée par une carte voisine. */
.ui-tip {
  position: fixed;
  z-index: 80;
  max-inline-size: min(320px, calc(100vw - 16px));
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--encre, var(--c-122019));
  color: var(--c-ffffff);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.ui-tip[hidden] { display: none; }
.ui-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Montant sous le chiffre principal d'une carte : même police et même corps que l'étiquette, jamais en monospace. */
body.pro .suite .kpi-amount { display: block; margin-top: 2px; font-weight: 600; color: var(--bleu); font-variant-numeric: tabular-nums; }