/* ============================================================================
   AURA RELANCE, agent 002 · AAA Consulting
   Redesign : reprise du langage visuel de la suite Aura (agent 001 « Factures »)
  , mêmes rayons, ombres, rythme d'espacement, composants et micro-interactions.
   Signature propre à l'agent 002 : accent teal (anneau, avatar, jalons).
   La logique métier (app.js) et toutes les accroches DOM sont préservées.
   ========================================================================== */

@font-face{
  font-family:"DM Sans";
  src:url("assets/DMSans.ttf") format("truetype");
  font-weight:100 1000;font-style:normal;font-display:swap;
}

:root{
  /* Fonds (charte AAA) */
  --ivory:#F7F5F0; --panel:#FAFAF8; --panel-2:#EDE9E0;
  --border:#D9D5CA; --border-soft:#E7E3D9;
  /* Texte */
  --navy:#1B2A4A; --navy-deep:#0F1C35; --muted:#8892A4; --text-soft:#4A5568;
  /* Accent maison (chrome commun à la suite) */
  --accent:#6B6FAE; --accent-d:#565a94; --accent-soft:#ECEDF6;
  /* Signature agent 002 */
  --agent:#2A9D8F; --agent-d:#1f7168; --agent-soft:#E3F1EF; --agent-lt:#4FBFB0;
  /* Sémantique */
  --success:#2A9D8F; --success-d:#1f7168; --success-soft:#E3F1EF;
  --warn:#B87D4B; --warn-d:#8a5a2f; --warn-lt:#D4A574; --warn-soft:#F4E9DD;
  --error:#C4462F; --error-soft:#F6E4E0;
  /* Rayons / ombres / typo */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(15,28,53,.06), 0 1px 3px rgba(15,28,53,.05);
  --shadow-md:0 4px 14px rgba(15,28,53,.08), 0 2px 6px rgba(15,28,53,.05);
  --shadow-lg:0 18px 50px rgba(15,28,53,.18), 0 6px 18px rgba(15,28,53,.10);
  --font:"DM Sans","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --mono:"DM Sans",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* ============================================================================
   RESET
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--navy);background:var(--ivory);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--navy-deep);margin:0;letter-spacing:-.01em}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:none;background:none}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--navy-deep)}
input{font-family:inherit;font-size:inherit;color:var(--navy)}
svg{display:block}
:focus-visible{outline:2.5px solid var(--agent);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted);font-size:.9rem;margin:.15rem 0 0}
.mono{font-variant-numeric:tabular-nums}

/* ============================================================================
   ICÔNES
   ========================================================================== */
.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-.18em}
.ic--send{color:var(--accent-d)}
.ic--check{color:var(--success)}
.ic--alert{color:var(--warn-d)}
.ic--moon{color:var(--muted)}
.ic--zap{color:var(--agent)}
.ic--plus,.ic--pause,.ic--play,.ic--sliders{color:var(--navy)}

/* ============================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:.85rem clamp(16px,3.5vw,34px);
  background:linear-gradient(180deg,var(--panel) 0%, #F4F1E9 100%);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand__logo{width:44px;height:44px;display:block;flex:none;filter:drop-shadow(0 4px 10px rgba(42,157,143,.28))}
.brand strong{display:block;color:var(--navy-deep);font-size:1.1rem;line-height:1.1;font-weight:700}
.brand__name-row{display:flex;align-items:center;gap:.5rem}
.brand__badge{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--agent-d);
  background:var(--agent-soft);border:1px solid color-mix(in srgb,var(--agent) 22%,transparent);padding:.12rem .45rem;border-radius:999px}
.brand__sub{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.brand__sub b{color:var(--navy);font-weight:650}

.tabs{display:flex;gap:4px;background:var(--panel-2);padding:4px;border-radius:999px;border:1px solid var(--border-soft)}
.tab{
  display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 16px;border-radius:999px;
  font-weight:600;font-size:14px;color:var(--muted);transition:.15s;
}
.tab:hover{color:var(--navy-deep)}
.tab.is-active{background:var(--panel);color:var(--navy-deep);box-shadow:var(--shadow-sm)}
.tab-badge{
  font-size:.66rem;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--warn);color:#fff;pointer-events:none;
}
.tab-badge[hidden]{display:none}

.topbar__right{margin-left:auto;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.clock{text-align:right;line-height:1.15;margin-right:.35rem}
.clock__label{display:block;font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.clock__date{font-weight:700;color:var(--navy-deep);font-variant-numeric:tabular-nums}

/* ============================================================================
   BOUTONS
   ========================================================================== */
.btn{
  border:1px solid transparent;border-radius:999px;padding:0 1.05rem;height:40px;font:inherit;font-weight:650;
  cursor:pointer;white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
}
a.btn{text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--warn);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--warn-d);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:var(--panel);border-color:var(--border);color:var(--navy)}
.btn--ghost:hover{background:#fff;border-color:#C9C4B6;box-shadow:var(--shadow-sm)}
.btn--danger{background:transparent;color:var(--muted)}
.btn--danger:hover{color:var(--error);background:var(--error-soft)}

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap{max-width:1240px;margin:0 auto;padding:clamp(20px,3.2vw,34px) clamp(16px,3.5vw,34px) 96px}
.view{display:none}
.view.is-active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================================
   KPIS
   ========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.kpi{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;
}
.kpi:hover{box-shadow:var(--shadow-md)}
.kpi__label{font-size:13px;color:var(--muted);font-weight:650;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0}
.kpi__label .ic{width:16px;height:16px;opacity:.95}
.kpi__value{font-size:30px;font-weight:750;letter-spacing:-.5px;color:var(--navy-deep);margin-top:9px;line-height:1;font-variant-numeric:tabular-nums}
.kpi__sub{font-size:12px;color:var(--muted);margin-top:5px}
.kpi--copper .kpi__value{color:var(--warn)}
.kpi--green .kpi__value{color:var(--success)}
.kpi.flash{animation:kpiflash 1.3s ease}
@keyframes kpiflash{
  0%{background:var(--agent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--agent) 40%,transparent) inset}
  100%{background:var(--panel);box-shadow:var(--shadow-sm)}
}

/* ============================================================================
   PANEL
   ========================================================================== */
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:1.4rem 1.5rem;margin-bottom:1.5rem;
}
.panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem}
.panel__head h2{font-size:1.2rem}
.panel__actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.panel__foot{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}
.agent-head{display:flex;align-items:center;gap:.7rem}
.agent-head img{width:36px;height:36px;flex:none;filter:drop-shadow(0 3px 8px rgba(42,157,143,.25))}

/* ============================================================================
   FORMULAIRES
   ========================================================================== */
.input{
  font:inherit;padding:0 .75rem;height:42px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:#fff;color:var(--navy);width:100%;transition:.15s;
}
.input:focus{outline:none;border-color:var(--agent);box-shadow:0 0 0 3px var(--agent-soft)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-weight:650;color:var(--navy-deep);font-size:.88rem}
.field small{color:var(--muted);font-size:.78rem}
.field__inline{display:flex;align-items:center;gap:.55rem}
.field__inline .input{max-width:120px}
.field__inline em{color:var(--muted);font-style:normal}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}

/* ============================================================================
   TABLEAU
   ========================================================================== */
.table-scroll{overflow-x:auto;margin:0 -1.5rem -1.4rem;border-top:1px solid var(--border-soft)}
.table{width:100%;border-collapse:collapse;min-width:720px}
.table th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;
  padding:13px 16px;background:var(--panel-2);border-bottom:1px solid var(--border);white-space:nowrap;
}
.table th:first-child{padding-left:1.5rem}
.table th:last-child{padding-right:1.5rem}
.table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.table td:first-child{padding-left:1.5rem}
.table td:last-child{padding-right:1.5rem}
.table tbody tr:last-child td{border-bottom:none}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr{cursor:pointer;transition:background .12s}
.table tbody tr:hover{background:#FCFBF7}
.table tbody tr:hover .chev{color:var(--agent);transform:translateX(3px)}
.table tbody tr:focus-visible{outline:2px solid var(--agent);outline-offset:-2px}
.table tbody tr.empty-row,.table tbody tr.empty-row:hover{cursor:default;background:transparent}
.cell-client{font-weight:650;color:var(--navy-deep)}
.cell-sub{font-size:.78rem;color:var(--muted)}
.late{color:var(--warn);font-weight:700}
.late--ok{color:var(--muted);font-weight:500}
.chev{color:#C4BEAF;font-size:1.25rem;font-weight:700;text-align:right;transition:.15s;width:24px}

/* état vide */
.empty-state{text-align:center;padding:3.4rem 1rem 3rem}
.empty-state .empty-state__icon{width:52px;height:52px;color:var(--agent);opacity:.8;margin:0 auto .8rem}
.empty-state p{margin:.2rem 0}
.empty-state p strong{color:var(--navy-deep);font-size:1.05rem}

/* pastilles de progression */
.dots{display:inline-flex;gap:4px;vertical-align:middle}
.dot{width:9px;height:9px;border-radius:50%;background:#CFC9BB;opacity:.6}
.dot.on{background:var(--accent);opacity:1}
.dot.max{background:var(--warn);opacity:1}

/* ============================================================================
   BADGES
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;
  padding:.25rem .6rem;border-radius:999px;white-space:nowrap;line-height:1.1}
.badge .ic{width:13px;height:13px}
.badge--en_cours{background:var(--accent-soft);color:var(--accent-d)}
.badge--paye{background:var(--success-soft);color:var(--success-d)}
.badge--pause{background:var(--panel-2);color:var(--navy)}
.badge--litige{background:var(--warn-soft);color:var(--warn-d)}
.badge--escalade{background:var(--warn);color:#fff}
.badge--l1{background:var(--accent-soft);color:var(--accent-d)}
.badge--l2{background:var(--warn-soft);color:var(--warn-d)}
.badge--l3{background:var(--navy-deep);color:var(--ivory)}

/* ============================================================================
   JOURNAL
   ========================================================================== */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:flex;gap:.85rem;padding:.7rem .5rem;border-bottom:1px solid var(--border-soft);font-size:.9rem;
  align-items:flex-start;border-radius:8px;transition:background .2s}
.log li:last-child{border-bottom:0}
.log li.is-new{animation:lognew 2.6s ease}
@keyframes lognew{0%{background:var(--agent-soft)}100%{background:transparent}}
.log__time{color:var(--muted);font-size:.76rem;white-space:nowrap;min-width:120px;padding-top:1px;font-variant-numeric:tabular-nums}
.log__icon{display:inline-flex;align-self:flex-start;width:26px;height:26px;border-radius:8px;align-items:center;justify-content:center;
  background:var(--panel-2);flex:none}
.log__icon .ic{width:15px;height:15px}
.log__empty{color:var(--muted);padding:.5rem .25rem}

/* ============================================================================
   MODALES
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1.25rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);animation:fade .2s}
.modal__box{position:relative;background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  padding:1.9rem;width:100%;max-width:520px;max-height:90vh;overflow:auto;animation:pop .24s cubic-bezier(.2,.9,.3,1.1)}
.modal__box--wide{max-width:740px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__x{position:absolute;top:1rem;right:1.15rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:1.4rem;line-height:1;color:var(--muted);transition:.15s}
.modal__x:hover{color:var(--navy-deep);background:var(--panel-2)}
.modal h2{margin-bottom:1.2rem;font-size:1.35rem}

/* ============================================================================
   FICHE DÉTAIL
   ========================================================================== */
.dt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.dt-head h2{font-size:1.4rem;margin-bottom:.35rem}
.dt-amount{font-size:1.7rem;font-weight:800;color:var(--navy-deep);line-height:1;font-variant-numeric:tabular-nums}
.dt-amount+span{display:inline-block;margin-top:.4rem}
.dt-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 1.5rem;
  background:var(--ivory);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:1.1rem 1.2rem;margin-bottom:1.4rem}
.dt-meta div{font-size:.9rem}
.dt-meta dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.dt-meta dd{margin:.2rem 0 0;font-weight:650;color:var(--navy-deep)}
.dt-section{margin-bottom:1.5rem}
.dt-section h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.8rem;font-weight:700}
.dt-actions{display:flex;gap:.5rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--border-soft)}

.override{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--ivory);border:1px solid var(--border-soft);
  padding:1.15rem;border-radius:var(--r-md)}

/* ============================================================================
   TIMELINE, aperçus d'emails
   ========================================================================== */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 1.4rem 1.7rem;border-left:2px solid var(--border);margin-left:.35rem}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-8px;top:2px;width:13px;height:13px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent);box-shadow:0 0 0 3px var(--panel)}
.timeline li.tl-paye::before{border-color:var(--success);background:var(--success)}
.tl-row{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.55rem}
.tl-date{font-weight:700;color:var(--navy-deep);font-size:.88rem}
.tl-empty{color:var(--muted);font-size:.9rem;padding:.2rem 0 .2rem 0;margin-left:-1.7rem;border-left:none}

/* carte email */
.tl-email{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.tl-email__head{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;background:var(--ivory);border-bottom:1px solid var(--border-soft)}
.tl-email__avatar{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--agent-soft);color:var(--agent-d)}
.tl-email__avatar .ic{width:16px;height:16px}
.tl-email__meta{min-width:0;flex:1}
.tl-email__from{font-weight:700;color:var(--navy-deep);font-size:.82rem}
.tl-email__from span{font-weight:500;color:var(--muted);font-size:.76rem}
.tl-email__to{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-email__body{padding:.8rem .95rem;font-size:.86rem;color:var(--text-soft);line-height:1.55;font-style:italic}
.tl-msg{font-size:.85rem;color:var(--muted);margin-top:.3rem;font-style:italic} /* fallback */

/* ============================================================================
   RÉCAP (après simulation)
   ========================================================================== */
.recap{position:fixed;top:82px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:55;
  background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1rem 1.25rem;min-width:330px;max-width:min(480px,92vw);opacity:0;transition:.28s cubic-bezier(.2,.9,.3,1.1)}
.recap.show{opacity:1;transform:translateX(-50%) translateY(0)}
.recap[hidden]{display:none}
.recap__title{font-weight:800;color:var(--navy-deep);font-size:.94rem;display:flex;align-items:center;gap:.5rem}
.recap__title .ic{color:var(--warn)}
.recap ul{margin:.55rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.recap ul li{display:flex;align-items:center;gap:.5rem}
.recap ul li>span{display:inline-flex}
.recap__link{border:0;background:none;color:var(--accent-d);font:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;padding:0;margin-top:.7rem;display:inline-flex;align-items:center;gap:.35rem}
.recap__link .ic{width:15px;height:15px}
.recap__link:hover{color:var(--navy-deep)}

/* ============================================================================
   TOAST
   ========================================================================== */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(20px);z-index:65;
  background:var(--navy-deep);color:#fff;padding:.75rem 1.2rem;border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  font-weight:600;font-size:.92rem;opacity:0;transition:.28s cubic-bezier(.2,.9,.3,1.15);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}

/* ============================================================================
   DEMO FLAG
   ========================================================================== */
.demo-flag{position:fixed;bottom:0;right:0;background:var(--warn);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;padding:.32rem .75rem;border-top-left-radius:10px;z-index:44;pointer-events:none;opacity:.94}

/* ============================================================================
   CTA FLOTTANT, commander l'agent
   ========================================================================== */
.cta-float{
  position:fixed;right:1.4rem;bottom:2.2rem;z-index:58;display:inline-flex;align-items:center;gap:.55rem;
  height:52px;padding:0 1.4rem;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,var(--agent),var(--agent-d));
  box-shadow:0 10px 26px rgba(42,157,143,.42), var(--shadow-md);transition:.18s;
  animation:ctaIn .5s .6s both;
}
.cta-float:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(42,157,143,.5), var(--shadow-lg)}
.cta-float:active{transform:translateY(0)}
.cta-float .ic{width:19px;height:19px}
@keyframes ctaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:520px){
  .cta-float{right:.9rem;bottom:1.9rem;height:48px;padding:0 1.1rem;font-size:.9rem}
}

/* ============================================================================
   VISITE GUIDÉE
   ========================================================================== */
.tut-layer{position:fixed;inset:0;z-index:70;pointer-events:none}
.tut-layer[hidden]{display:none}
.tut-shade{position:fixed;background:rgba(10,17,32,.66);pointer-events:auto;backdrop-filter:blur(1px)}
.tut-ring{position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 3px var(--agent), 0 0 0 9999px rgba(10,17,32,.02);animation:tutpulse 1.9s ease-out infinite}
.tut-layer.is-block .tut-ring{box-shadow:0 0 0 3px var(--agent)}
@keyframes tutpulse{
  0%{box-shadow:0 0 0 3px var(--agent), 0 0 0 0 color-mix(in srgb,var(--agent) 55%,transparent)}
  70%{box-shadow:0 0 0 3px var(--agent), 0 0 0 16px color-mix(in srgb,var(--agent) 0%,transparent)}
  100%{box-shadow:0 0 0 3px var(--agent), 0 0 0 0 color-mix(in srgb,var(--agent) 0%,transparent)}
}
.tut-tip{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1.1rem 1.25rem 1.15rem;pointer-events:auto}
.tut-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.65rem;padding-bottom:.65rem;border-bottom:1px solid var(--border-soft)}
.tut-head img{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 6px rgba(42,157,143,.3))}
.tut-name{font-weight:800;color:var(--navy-deep);font-size:.92rem}
.tut-count{margin-left:auto;font-size:.64rem;font-weight:800;letter-spacing:.06em;color:var(--agent-d);
  text-transform:uppercase;background:var(--agent-soft);padding:.2rem .55rem;border-radius:999px}
.tut-tip h3{font-size:1.08rem;margin-bottom:.4rem;color:var(--navy-deep)}
.tut-tip p{margin:.4rem 0;font-size:.9rem;color:var(--text-soft);line-height:1.55}
.tut-tip p b,.tut-tip p strong{color:var(--navy-deep);font-weight:700}
.tut-tip p.late{color:var(--warn-d);font-weight:600}
.tut-tip a{color:var(--accent-d);font-weight:700}
.tut-actions{display:flex;align-items:center;gap:.9rem;margin-top:.9rem}
.tut-actions .btn{height:38px}
.tut-skip{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;padding:0}
.tut-skip:hover{color:var(--navy-deep)}

/* carte d'accueil / conclusion (mode centré) : mascotte héroïque + centrage */
.tut-layer.is-center .tut-tip{
  width:min(480px,calc(100vw - 32px));text-align:center;padding:2rem 2.1rem 1.8rem;border-radius:var(--r-xl);
}
.tut-layer.is-center .tut-head{border:none;justify-content:center;margin-bottom:.3rem;padding-bottom:0}
.tut-layer.is-center .tut-head img{display:none}
.tut-layer.is-center .tut-tip::before{
  content:"";display:block;width:88px;height:88px;margin:0 auto .3rem;
  background:url("assets/aura-002.svg") center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(42,157,143,.32));animation:auraBob 3.4s ease-in-out infinite;
}
@keyframes auraBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tut-layer.is-center .tut-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--agent-d)}
.tut-layer.is-center .tut-count{display:none}
.tut-layer.is-center .tut-tip h3{font-size:1.55rem;margin-top:.2rem}
.tut-layer.is-center .tut-actions{flex-direction:column;gap:.7rem;margin-top:1.3rem}
.tut-layer.is-center .tut-actions .btn{width:100%;max-width:340px;height:48px;font-size:.98rem}
.tut-layer.is-center .tut-skip{order:2}

/* ============================================================================
   COMMENT ÇA MARCHE ?
   ========================================================================== */
.how-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.how-head img{flex:none;filter:drop-shadow(0 4px 10px rgba(42,157,143,.28))}
.how-head h2{margin-bottom:.15rem}
.how-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.how-step{display:flex;gap:1rem;align-items:flex-start}
.how-step__ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--agent-soft);
  display:grid;place-items:center;color:var(--agent-d)}
.how-step__ic .ic{width:20px;height:20px}
.how-step h4{margin:0 0 .2rem;color:var(--navy-deep);font-size:.98rem}
.how-step p{margin:0;font-size:.88rem;color:var(--text-soft);line-height:1.5}
.how-note{margin-top:1.3rem;padding:1rem 1.15rem;background:var(--accent-soft);border-radius:var(--r-md);
  font-size:.84rem;color:#4a4e87;line-height:1.55}
.how-cta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;border-radius:var(--r-lg);
  padding:1.3rem 1.5rem;margin-top:1.1rem;box-shadow:var(--shadow-md)}
.how-cta h4{margin:0 0 .3rem;color:#fff;font-size:1.1rem}
.how-cta p{margin:0;font-size:.9rem;color:#C6CBDE;max-width:440px;line-height:1.5}
.how-cta .btn--primary{background:var(--warn);color:#fff;flex:none}
.how-cta .btn--primary:hover{background:var(--warn-lt)}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:960px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpis .kpi:first-child{grid-column:1/-1}
}
@media(max-width:900px){
  .col-due{display:none}
  .table{min-width:600px}
}
@media(max-width:720px){
  .grid2,.override,.dt-meta{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .kpis .kpi:first-child{grid-column:auto}
  .topbar{gap:.7rem}
  .brand{order:1}
  .tabs{order:3;width:100%;justify-content:center}
  .topbar__right{order:2;width:100%;margin-left:0;justify-content:space-between}
  .clock{margin-right:auto}
  .log__time{min-width:96px}
  .how-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .kpi__value{font-size:25px}
  .modal__box{padding:1.4rem}
}