/* Tuile Dashboard (558 x 718) : onglets cliqués par un curseur, page qui défile.
   La mise en page est dessinée à 1000 px de large puis réduite à 558 px (échelle 0,558) ;
   les translations de défilement sont donc exprimées en pixels de mise en page.
   Boucle de 24 s :  0-30 %  « À faire » défile · 36 % clic « Vue étoile »
                    40-60 %  l'étoile défile     · 68 % clic « Idées »
                    72-92 %  les idées défilent  · 98 % clic « À faire » */

.db {
  --loop: 24s;
  --bg: #f8f1e4; --card: #fffcf5; --panel2: #fff5e0;
  --mint: #cfebd6; --butter: #fdebb8; --sky: #dceef8; --lilac: #e7def6; --peach: #fbe2c6; --rose: #f8cfc9;
  --ink: #111; --muted: #777; --hub: #e5322d; --bad: #e5484d; --ok: #2fa35a;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", var(--sans);
}

.db__chrome {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: #1a1b20;
}
.db__chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.db__url { margin-left: 14px; padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }

.db__view { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; overflow: hidden; }
.db__scale { position: absolute; left: 0; top: 0; width: 1000px; transform: scale(0.558); transform-origin: 0 0; }
.db__page { position: relative; padding: 26px 28px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; will-change: transform; animation: db-scroll var(--loop) infinite; }

/* ---------- En-tête ---------- */

.db__head { display: flex; align-items: center; gap: 16px; }
.db__logo { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--hub); box-shadow: 4px 4px 0 var(--ink); }
.db h1 { margin: 0; font: 800 46px/1.02 "Archivo", var(--sans); letter-spacing: -0.02em; }
.db__hl { display: inline-block; padding: 0 0.16em; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--mint); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1.2deg); }
.db__head p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

.db__stats { display: flex; gap: 12px; }
.db__stats div { flex: 1; padding: 8px 14px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); font: 700 11px/1.2 "Inter", var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.db__stats b { display: block; margin-top: 2px; font: 800 30px/1.1 "Archivo", var(--sans); letter-spacing: 0; color: var(--ink); }

/* ---------- Onglets ---------- */

.db__tabs { display: flex; gap: 12px; padding: 2px 8px 10px 2px; }
.db__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 12px "Inter", var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.db__tab em { padding: 3px 8px; border-radius: 999px; background: #111; color: #fff; font-style: normal; letter-spacing: 0.04em; }
.db__tab.is-a { animation: db-sel-a var(--loop) steps(1, end) infinite; }
.db__tab.is-b { animation: db-sel-b var(--loop) steps(1, end) infinite; }
.db__tab.is-c { animation: db-sel-c var(--loop) steps(1, end) infinite; }

/* ---------- Volets : empilés dans la même cellule, un seul visible ---------- */

.db__pane { grid-row: 4; grid-column: 1; visibility: hidden; }
.db__pane--a { animation: db-show-a var(--loop) steps(1, end) infinite; }
.db__pane--b { animation: db-show-b var(--loop) steps(1, end) infinite; }
.db__pane--c { animation: db-show-c var(--loop) steps(1, end) infinite; }

.db__tgrp { margin-bottom: 18px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.db__tghead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--panel2); }
.db__tghead b { flex: 1; font: 700 15px "Inter", var(--sans); }
.db__tghead small { font: 600 11px "Inter", var(--sans); color: var(--muted); }
.db__trow { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-top: 1px solid rgba(17, 17, 17, 0.18); }
.db__tghead + .db__trow { border-top: 0; }
.db__tt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.db__tt b { font: 600 14px/1.35 "Inter", var(--sans); }
.db__trow.is-done .db__tt b { color: var(--muted); text-decoration: line-through; }
.db__tmeta { display: flex; gap: 6px; align-items: center; }

.db__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border: 1.5px solid var(--ink); border-radius: 50%; }
.db__tghead .db__dot { margin-top: 0; width: 14px; height: 14px; }
.db__dot--ok { background: var(--ok); }
.db__dot--todo { background: var(--card); }
.db__dot--done { background: var(--muted); }
.db__dot--bad { background: var(--bad); }

.db__pri, .db__pill { display: inline-block; padding: 1px 9px; border: 1.5px solid var(--ink); border-radius: 999px; font: 700 11px "Inter", var(--sans); }
.db__pri--h { background: var(--rose); }
.db__pri--m { background: var(--butter); }
.db__pri--b { background: var(--sky); }
.db__pill--bad { background: var(--rose); }

/* ---------- Étoile ---------- */

.db__star { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.db__edge { stroke: #111; stroke-width: 2.4; opacity: 0.5; }
.db__edge--thin { stroke-width: 1.8; opacity: 0.4; }
.db__node { stroke: #111; stroke-width: 2.4; }
.db__lbl { font: 800 15px "Archivo", sans-serif; fill: #111; }
.db__lbl--hub { fill: #fff; font-size: 17px; }

/* ---------- Idées ---------- */

.db__ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.db__item { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); }
.db__item b { display: block; margin-top: 8px; font: 700 16px/1.35 "Inter", var(--sans); }
.db__meta { display: flex; }
.db__tag { padding: 1px 9px; border-radius: 999px; background: var(--lilac); font: 700 10px "Inter", var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Assistant, curseur, clics ---------- */

.db__fab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--butter);
  box-shadow: 3px 3px 0 var(--ink);
  font: 800 11px "Inter", var(--sans);
}
.db__fab i { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }

.db__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
  animation: db-cursor var(--loop) ease-in-out infinite;
}

.db__ripple { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2.5px solid var(--hub); border-radius: 50%; opacity: 0; }
.db__ripple--a { left: 51px; top: 131px; animation: db-click var(--loop) ease-out calc(var(--loop) * 0.98) infinite; }
.db__ripple--b { left: 134px; top: 131px; animation: db-click var(--loop) ease-out calc(var(--loop) * 0.36) infinite; }
.db__ripple--c { left: 214px; top: 131px; animation: db-click var(--loop) ease-out calc(var(--loop) * 0.68) infinite; }

/* ---------- Animations ---------- */

@keyframes db-show-a { 0% { visibility: visible; } 35.9% { visibility: hidden; } 98% { visibility: visible; } }
@keyframes db-show-b { 0% { visibility: hidden; } 36% { visibility: visible; } 67.9% { visibility: hidden; } }
@keyframes db-show-c { 0% { visibility: hidden; } 68% { visibility: visible; } 97.9% { visibility: hidden; } }

@keyframes db-sel-a { 0% { background: var(--butter); box-shadow: none; transform: translate(4px, 4px); } 35.9% { background: var(--card); box-shadow: 4px 4px 0 var(--ink); transform: none; } 98% { background: var(--butter); box-shadow: none; transform: translate(4px, 4px); } }
@keyframes db-sel-b { 0% { background: var(--card); box-shadow: 4px 4px 0 var(--ink); transform: none; } 36% { background: var(--butter); box-shadow: none; transform: translate(4px, 4px); } 67.9% { background: var(--card); box-shadow: 4px 4px 0 var(--ink); transform: none; } }
@keyframes db-sel-c { 0% { background: var(--card); box-shadow: 4px 4px 0 var(--ink); transform: none; } 68% { background: var(--butter); box-shadow: none; transform: translate(4px, 4px); } 97.9% { background: var(--card); box-shadow: 4px 4px 0 var(--ink); transform: none; } }

@keyframes db-scroll {
  0%, 4% { transform: translate3d(0, 0, 0); }
  28% { transform: translate3d(0, -620px, 0); }
  30% { transform: translate3d(0, -620px, 0); }
  35%, 40% { transform: translate3d(0, 0, 0); }
  60% { transform: translate3d(0, -90px, 0); }
  62% { transform: translate3d(0, -90px, 0); }
  67%, 72% { transform: translate3d(0, 0, 0); }
  92% { transform: translate3d(0, -230px, 0); }
  94% { transform: translate3d(0, -230px, 0); }
  97%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes db-cursor {
  0% { transform: translate3d(500px, 690px, 0); opacity: 0; }
  4% { transform: translate3d(330px, 380px, 0); opacity: 1; }
  27% { transform: translate3d(340px, 450px, 0); }
  33% { transform: translate3d(130px, 128px, 0) scale(1); }
  36% { transform: translate3d(130px, 128px, 0) scale(0.82); }
  37% { transform: translate3d(130px, 128px, 0) scale(1); }
  42% { transform: translate3d(330px, 380px, 0); }
  62% { transform: translate3d(340px, 440px, 0); }
  65% { transform: translate3d(210px, 128px, 0) scale(1); }
  68% { transform: translate3d(210px, 128px, 0) scale(0.82); }
  69% { transform: translate3d(210px, 128px, 0) scale(1); }
  74% { transform: translate3d(330px, 380px, 0); }
  92% { transform: translate3d(340px, 440px, 0); }
  96% { transform: translate3d(47px, 128px, 0) scale(1); }
  98% { transform: translate3d(47px, 128px, 0) scale(0.82); }
  99% { transform: translate3d(47px, 128px, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(500px, 690px, 0); opacity: 0; }
}

@keyframes db-click {
  0% { opacity: 0.9; transform: scale(0.3); }
  4% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}