/* =====================================================================
   mydashly — styles communs (auth + dashboard)
   Couleurs du logo, logo animé, boutons, champs, toasts, animations.
   ===================================================================== */
:root{
  --ink:#0F172A;
  --ink-2:#334155;
  --muted:#64748B;
  --faint:#94A3B8;
  --line:#E2E8F0;
  --bar1:#93C5FD;
  --bar2:#3B82F6;
  --bar3:#1E3A8A;
  --brand:#2563EB;
  --soft:#EFF6FF;
  --bg:#F8FAFC;
  --surface:#FFFFFF;

  /* Séries de données (palette validée daltonisme) */
  --s1:#2563EB;
  --s2:#0D9488;
  --s3:#D97706;
  --good:#15803D;
  --good-bg:#DCFCE7;
  --warn:#92400E;
  --warn-bg:#FEF3C7;
  --bad:#DC2626;

  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 14px -4px rgba(15,23,42,.08);
  --shadow-lg:0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.14),0 40px 80px -24px rgba(30,58,138,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
a{color:var(--brand)}

/* ---------- Logo ---------- */
.md-logo{display:inline-flex;align-items:flex-end;gap:.22em;font:800 30px/.82 var(--font);color:var(--ink);text-decoration:none}
.md-bars{display:flex;align-items:flex-end;gap:.11em;height:1.09em;overflow:hidden;flex:none}
.md-bar{display:block;width:.22em;border-radius:.11em;transform-origin:50% 100%}
.md-b1{height:.44em;background:var(--bar1)}
.md-b2{height:.69em;background:var(--bar2)}
.md-b3{height:.97em;background:var(--bar3)}
.md-word{display:flex;align-items:baseline;white-space:nowrap}
.md-name{letter-spacing:-.042em}
.md-ch{display:inline-block}
.md-tld{display:inline-block;font-weight:500;font-size:.47em;letter-spacing:-.01em;color:var(--brand)}
.md-logo.on-dark{color:#fff}
.md-logo.on-dark .md-b3{background:#3B5FD6}
.md-logo.on-dark .md-tld{color:#7FB3FF}

/* Ouverture (autres/animations/ouverture.html) — le .com monte de 0,8 em */
.md-logo.play .md-bar{animation:md-rise .55s var(--spring) both;animation-delay:calc(var(--i) * .2s)}
.md-logo.play .md-ch{animation:md-letter .38s var(--ease) both;animation-delay:calc(.7s + var(--c) * .06s)}
.md-logo.play .md-tld{animation:md-up .6s cubic-bezier(.22,1.3,.36,1) 1.3s both}
.md-logo.play .md-bars{animation:md-settle .45s ease-in-out 1.9s both}
@keyframes md-rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes md-letter{from{opacity:0;transform:translateX(-.25em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes md-up{0%{transform:translateY(.8em);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
@keyframes md-settle{0%,100%{transform:none}50%{transform:scaleY(1.08)}}

/* Chargement (autres/animations/loading.html) */
.md-loading .md-bars{overflow:visible}
.md-loading .md-bar{animation:md-load 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * .15s)}
.md-loading .md-ch{animation:md-wave 1.6s ease-in-out infinite;animation-delay:calc(var(--c) * .08s)}
.md-loading .md-tld{animation:md-wave 1.6s ease-in-out infinite;animation-delay:.68s}
@keyframes md-load{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes md-wave{0%,60%,100%{transform:none}30%{transform:translateY(-.12em)}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;border:0;font:600 14px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 6px 18px -8px rgba(15,23,42,.6)}
.btn-primary:hover{background:var(--bar3);box-shadow:0 10px 22px -8px rgba(30,58,138,.55);transform:translateY(-1px)}
.btn-blue{background:var(--brand);color:#fff}
.btn-blue:hover{background:var(--bar3)}
.btn-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--bar1);background:var(--soft)}
.btn-danger{background:#FEE2E2;color:#B91C1C}
.btn-danger:hover{background:#FECACA}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--bar1);outline-offset:2px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--soft);color:var(--brand)}
.icon-btn svg{width:18px;height:18px}

/* ---------- Champs ---------- */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld > label,.fld > .lbl{font-size:13px;font-weight:600;color:var(--ink-2)}
.inp{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font:500 15px var(--font);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.inp::placeholder{color:var(--faint)}
.inp:focus{outline:none;border-color:var(--bar2);background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.inp[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px rgba(220,38,38,.1)}
select.inp{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.fld-err{font-size:12px;font-weight:500;color:var(--bad);min-height:0}
.pw-wrap{position:relative}
.pw-wrap .inp{padding-right:46px}
.pw-wrap .icon-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%)}

/* Choix en cartes / pastilles */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .2s}
.chip span:hover{border-color:var(--bar1);color:var(--brand)}
.chip input:checked + span{background:var(--soft);border-color:var(--bar2);color:var(--brand)}
.chip input:focus-visible + span{outline:3px solid var(--bar1);outline-offset:2px}

/* ---------- Toasts ---------- */
/* Pile de notifications : la plus récente devant, les précédentes derrière ; déployée au survol */
.toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1000;width:min(420px,calc(100vw - 32px));height:0;transition:height .45s var(--spring)}
.toast{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 14px 14px;border-radius:16px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,58,138,.94));color:#fff;font-size:14px;font-weight:500;line-height:1.4;
  box-shadow:0 18px 40px -14px rgba(15,23,42,.6),inset 0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform-origin:50% 100%;transition:transform .55s var(--spring),opacity .4s var(--ease)}
.toast .t-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;background:rgba(74,222,128,.18);color:#86EFAC}
.toast .t-ic svg{width:15px;height:15px}
.toast.error .t-ic{background:rgba(248,113,113,.2);color:#FCA5A5}
.toast .t-msg{flex:1;min-width:0;transition:opacity .25s}
.toast .t-act{flex:none;background:rgba(147,197,253,.16);border:0;border-radius:8px;color:var(--bar1);font-weight:700;font-size:13px;cursor:pointer;padding:6px 10px;transition:background .2s,opacity .25s}
.toast .t-act:hover{background:rgba(147,197,253,.28)}
.toast .t-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--bar1),var(--bar2));transform-origin:left;animation:t-bar linear forwards}
.toast.error .t-bar{background:linear-gradient(90deg,#FCA5A5,#F87171)}
.toast.paused .t-bar{animation-play-state:paused}
.toast.behind .t-msg,.toast.behind .t-act,.toast.behind .t-ic{opacity:0}
@keyframes t-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- Animations utilitaires ---------- */
.rise{animation:rise .7s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes pop{from{transform:scale(.4);opacity:0}}