/* Qlynk : feuille de style du site (direction A2).
   Assemblée à partir des maquettes validées (_travail/refonte/maquettes/a-consigne).
   Aucune dépendance extérieure : polices et icônes hébergées dans assets/.
   Règles fermes : ni dégradé, ni emoji. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Icônes Lucide (assets/icons.svg) */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }

/* ===== Base ===== */
/* Maquettes Qlynk : structure commune. Chaque direction fournit ses jetons
   (couleurs, typos, rayons) et ses propres partis pris. Aucun dégradé. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 140ms;
  --mid: 220ms;
  --gutter: clamp(16px, 4vw, 40px);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius-sm);
  text-decoration: none; transition: top var(--mid) var(--ease-out);
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icônes Lucide */


/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--fast) var(--ease-out), color var(--fast), border-color var(--fast), transform var(--fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .spin { display: none; }
.btn.is-loading .spin { display: block; animation: spin 0.8s linear infinite; }
.btn.is-loading .btn-ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; min-width: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast), transform var(--fast) var(--ease-out);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn:active { transform: scale(0.95); }

/* Bouton copier : l'icône se change en coche */
.copy-btn { position: relative; }
.copy-btn .ic-wrap { position: relative; width: 18px; height: 18px; }
.copy-btn .ic-wrap > * { position: absolute; inset: 0; transition: opacity var(--mid) var(--ease-out), transform var(--mid) var(--ease-out); }
.copy-btn .ic-check { opacity: 0; transform: scale(0.4) rotate(-20deg); color: var(--ok); }
.copy-btn.is-copied { color: var(--ok); border-color: var(--ok); }
.copy-btn.is-copied .ic-copy { opacity: 0; transform: scale(0.4); }
.copy-btn.is-copied .ic-check { opacity: 1; transform: none; }

/* ---------- Champs ---------- */
.field-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--focus-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.prefixed { display: flex; align-items: stretch; }
.prefixed .prefix {
  display: flex; align-items: center; padding: 0 10px 0 14px;
  border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2); color: var(--ink-2); font-family: var(--font-code); font-size: 0.875rem;
}
.prefixed .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.form-error { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--danger); font-size: 0.9rem; font-weight: 500; }
.shake { animation: shake 360ms var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* ---------- Parcours animé (accueil) ---------- */
.journey { position: relative; }
.j-stage {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "field field" "short share" "track track";
}
.j-field { grid-area: field; display: flex; align-items: center; gap: 10px; min-width: 0; transition: opacity 400ms var(--ease-out); }
.j-field .j-url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-code); font-size: 0.85rem; }
.j-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.j-go { flex: none; }
.j-short { grid-area: short; align-self: start; }
.j-share { grid-area: share; display: grid; gap: 8px; align-self: start; }
.j-track { grid-area: track; }

.j-short, .j-share, .j-track, .j-target { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-expo), clip-path 620ms var(--ease-expo); }
.j-short { opacity: 0; transform: translateY(-14px) scale(0.96); clip-path: inset(0 100% 0 0 round 10px); }
.j-target { opacity: 0; transform: translateX(-12px); }
.j-target .j-line { transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-expo); }
.j-track { opacity: 0; transform: translateY(12px); }
.j-bars span { transform: scaleY(0.05); transform-origin: bottom; transition: transform 700ms var(--ease-expo); transition-delay: calc(var(--i) * 70ms); }

.journey[data-step="2"] .j-go, .journey[data-step="2"] .j-press { animation: press 420ms var(--ease-out) 120ms; }
@keyframes press { 40% { transform: scale(0.92); } 100% { transform: none; } }
.journey:not([data-step="1"]) .j-caret { display: none; }
.journey:not([data-step="1"]):not([data-step="2"]) .j-field { opacity: 0.45; }
.journey:not([data-step="1"]) .j-short { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 10px); transition-delay: 220ms; }
.journey[data-step="3"] .j-target,
.journey[data-step="4"] .j-target { opacity: 1; transform: none; transition-delay: calc(var(--i) * 140ms + 120ms); }
.journey[data-step="3"] .j-target .j-line,
.journey[data-step="4"] .j-target .j-line { transform: scaleX(1); transition-delay: calc(var(--i) * 140ms); }
.journey[data-step="4"] .j-share { opacity: 0.55; transition: opacity 400ms; }
.journey[data-step="4"] .j-track { opacity: 1; transform: none; transition-delay: 120ms; }
.journey[data-step="4"] .j-bars span { transform: scaleY(1); }

/* Navigation entre les étapes */
.j-steps { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: end; margin-top: 22px; }
.j-step {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 0 12px; border: 0; background: none; text-align: left; color: var(--ink-3);
  font-size: 0.875rem; font-weight: 600; transition: color var(--mid);
}
.j-step small { font-weight: 500; font-size: 0.75rem; opacity: 0.8; }
.j-step::before, .j-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); }
.j-step::after { background: var(--accent); transform: scaleX(0); transform-origin: left; }
.j-step[aria-current="step"] { color: var(--ink); }
.j-step[aria-current="step"]::after { animation: fill var(--dur, 3s) linear forwards; }
.journey.is-paused .j-step[aria-current="step"]::after { animation: none; transform: scaleX(1); }
.journey[data-static] .j-step[aria-current="step"]::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }
.j-pause { align-self: center; }

@media (max-width: 640px) {
  .j-stage { grid-template-columns: 1fr; grid-template-areas: "field" "short" "out"; }
  .j-share, .j-track { grid-area: out; }
  .journey[data-step="4"] .j-share { opacity: 0; }
  .j-steps { grid-template-columns: repeat(4, 1fr); }
  .j-step small { display: none; }
  .j-pause { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Tableau de bord ---------- */
.links-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 38px; min-height: 42px; }
.search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 0.75rem var(--font-code); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 0.875rem; font-weight: 600;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast), transform var(--mid) var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.chip-count { font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 500; }
body.is-dragging .chip:not([data-cat="all"]) { border-style: dashed; border-color: var(--accent-line); }
.chip.is-over { transform: scale(1.06); background: var(--accent-soft); color: var(--ink); border-style: solid !important; }
.chip.bump { animation: bump 420ms var(--ease-out); }
@keyframes bump { 35% { transform: scale(1.12); } 100% { transform: none; } }

.link {
  display: grid; align-items: center; gap: 6px 20px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main meta actions";
  padding: 14px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  transition: background-color var(--fast), opacity var(--mid), transform var(--mid) var(--ease-out);
  animation: rowIn 360ms var(--ease-out) both; animation-delay: calc(var(--i) * 28ms);
}
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.link:hover { background: var(--surface-hover); }
.link[draggable="true"] { cursor: grab; }
.link.is-dragging { opacity: 0.45; }
.link.is-new { animation: rowNew 1600ms var(--ease-out) both; }
@keyframes rowNew { 0% { opacity: 0; transform: translateY(-10px); background: var(--accent-soft); } 25% { opacity: 1; transform: none; background: var(--accent-soft); } 100% { background: var(--surface); } }
.link-main { grid-area: main; min-width: 0; display: grid; gap: 2px; }
.link-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.link .short { font-family: var(--font-code); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link .short:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.link-sub { display: flex; gap: 8px; min-width: 0; font-size: 0.875rem; color: var(--ink-2); }
.link-sub .title { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.link-sub .dest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-meta { grid-area: meta; display: flex; align-items: center; gap: 14px; }
.spark { display: flex; align-items: flex-end; gap: 2px; width: 56px; height: 22px; }
.spark span { flex: 1; height: var(--h); background: var(--spark, var(--accent)); border-radius: 1px; opacity: 0.85; }
.clicks { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.clicks small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); }
.link-actions { grid-area: actions; display: flex; gap: 6px; }

.empty { padding: 48px 20px; text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: 10px; }
.empty .empty-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }

/* Résultat de création */
.result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--ok-line); border-radius: var(--radius-sm); background: var(--ok-soft);
}
.result.is-in { animation: resultIn 520ms var(--ease-expo); }
@keyframes resultIn { from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.result .r-text { flex: 1 1 200px; min-width: 0; display: grid; }
.result .r-text small { color: var(--ink-2); font-size: 0.8rem; }
.result .r-short { font-family: var(--font-code); font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.result .r-ok { color: var(--ok); }

/* Menu « Ranger dans » */
.move-menu {
  position: absolute; z-index: 60; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  animation: pop 180ms var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.move-title { padding: 6px 10px 8px; font-size: 0.8rem; color: var(--ink-3); }
.move-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: calc(var(--radius-sm) - 2px); background: none; text-align: left; font-size: 0.925rem;
}
.move-menu button:hover, .move-menu button:focus-visible { background: var(--surface-2); }
.move-menu button[aria-disabled] { color: var(--ink-3); cursor: default; }
.move-cur { margin-left: auto; font-size: 0.75rem; }

/* Fenêtre QR */
dialog.qr {
  width: min(380px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
dialog.qr[open] { animation: dlgIn 260ms var(--ease-expo); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
dialog.qr::backdrop { background: var(--scrim); }
.qr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.qr-code { color: var(--qr-ink, #111); background: var(--qr-bg, #fff); padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.qr-code svg { width: 100%; height: auto; }
.qr-label { margin: 12px 0 4px; text-align: center; font-family: var(--font-code); font-weight: 700; }
.qr-note { text-align: center; color: var(--ink-2); font-size: 0.85rem; margin-bottom: 16px; }
.qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Notification */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
  font-size: 0.925rem; font-weight: 500;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity var(--mid) var(--ease-out), transform 320ms var(--ease-expo);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }

/* Barre d'onglets mobile */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; min-height: 48px; text-decoration: none; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
  .tabbar a[aria-current="page"] { color: var(--accent-text); }
  body.has-tabbar { padding-bottom: 72px; }
  body.has-tabbar .toast { bottom: 88px; }

  .link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main meta" "actions actions";
    padding: 14px;
  }
  .link-sub .title { display: none; }
  .link-meta .spark { display: none; }
  .link-actions { justify-content: flex-start; }
  .link-actions .icon-btn { flex: 1; min-height: 40px; }
  .link-actions .icon-btn.move { flex: 0 0 44px; }
}

/* Mouvement réduit : tout s'affiche sans déplacement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* Les blocs d'une page ne dépassent jamais leur colonne */
.page > *, .main > *, .overview > * { min-width: 0; }
@media (max-width: 860px) { .overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
@media (max-width: 420px) { .wk-day { font-size: 0.6rem; } }

/* ---------- Ajouts v2 : sous-catégories, applications, offres ---------- */
.move-menu { max-height: min(70vh, 440px); overflow-y: auto; }
.move-menu button.is-sub { padding-left: 30px; font-size: 0.9rem; }
.move-menu button.is-sub .chip-dot { width: 6px; height: 6px; opacity: 0.7; }

.app-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; line-height: 1.5;
  background: var(--app-bg, var(--surface-2)); color: var(--app-ink, var(--ink-2));
}
.app-badge svg { width: 13px; height: 13px; }

/* Démonstration navigateur ou application (accueil) */
.dl-demo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.phone { margin: 0; display: grid; gap: 10px; justify-items: center; }
.phone figcaption { font-weight: 700; font-size: 0.9rem; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.screen {
  position: relative; width: min(100%, 230px); aspect-ratio: 9 / 17; overflow: hidden;
  border: 6px solid var(--phone-frame, var(--ink)); border-radius: 28px; background: var(--phone-bg, var(--surface));
}
.screen .msg { position: absolute; left: 12px; right: 12px; top: 40px; display: grid; gap: 6px; }
.screen .msg small { font-size: 0.7rem; color: var(--ink-3); }
.bubble { justify-self: start; position: relative; max-width: 100%; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); font-size: 0.78rem; font-weight: 600; color: var(--accent-text); text-decoration: underline; overflow-wrap: anywhere; }
.tap { position: absolute; left: 40%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(0.4); }
.web, .app { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding: 12px; transform: translateY(102%); }
.web { background: var(--surface); }
.web .bar { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 0.7rem; color: var(--ink-3); }
.web .wall { margin-top: 30%; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 0.8rem; color: var(--ink-2); }
.web .wall b { font-size: 0.95rem; color: var(--ink); }
.web .fake-btn { width: 70%; height: 30px; border-radius: 8px; background: var(--ink-3); opacity: 0.35; }
.web .slow { height: 3px; width: 100%; background: var(--line); position: relative; overflow: hidden; }
.web .slow::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--ink-3); }
.app { background: var(--app-screen, var(--ink)); color: var(--app-screen-ink, var(--bg)); transform: scale(0.2); transform-origin: 30% 22%; opacity: 0; border-radius: 18px; }
.app .app-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85rem; }
.app .video { aspect-ratio: 16 / 9; border-radius: 8px; background: currentColor; opacity: 0.18; }
.app .lines { display: grid; gap: 6px; }
.app .lines span { height: 7px; border-radius: 4px; background: currentColor; opacity: 0.25; }
.app .lines span:nth-child(2) { width: 70%; }
.app .ok { display: inline-flex; gap: 6px; align-items: center; font-size: 0.75rem; font-weight: 600; opacity: 0.9; }

.dl-demo.is-on .tap { animation: tap 700ms var(--ease-out) 700ms both; }
@keyframes tap { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 0.25; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.dl-demo.is-on .web { animation: webUp 700ms var(--ease-expo) 1300ms both; }
@keyframes webUp { to { transform: translateY(0); } }
.dl-demo.is-on .web .slow::after { animation: slow 1.6s linear 2000ms infinite; }
@keyframes slow { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.dl-demo.is-on .app { animation: appIn 650ms var(--ease-expo) 1300ms both; }
@keyframes appIn { to { transform: none; opacity: 1; } }
.dl-demo.is-static .web, .dl-demo.is-static .app { transform: none; opacity: 1; animation: none; }
@media (max-width: 520px) { .screen { border-width: 5px; border-radius: 22px; } }

/* Offres */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { display: grid; gap: 18px; align-content: start; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.plan-name { font-weight: 800; font-size: 1.2rem; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price span { color: var(--ink-2); }
.plan-lead { color: var(--ink-2); }
.plan ul { display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 3px; color: var(--ok); }
.plan li.key { font-weight: 700; }
.plan .btn { justify-self: start; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.dl-list-title { margin-top: 24px; font-weight: 700; font-size: 0.95rem; }
.dl-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dl-apps li { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--surface); }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } }
.plan-pro { border-color: var(--accent-line); box-shadow: inset 0 3px 0 var(--accent); }

/* ===== Direction A : jetons, accueil, thème sombre ===== */
/* Direction A : Consigne. Le lien court comme un ticket qu'on remet.
   Blanc papier, encre bleu-noir, un seul signal vermillon. */
:root {
  --bg: oklch(98.6% 0.003 95);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96.2% 0.004 95);
  --surface-hover: oklch(98.4% 0.003 95);
  --field: oklch(100% 0 0);
  --ink: oklch(21% 0.016 265);
  --ink-2: oklch(42% 0.014 265);
  --ink-3: oklch(53% 0.012 265);
  --line: oklch(91.5% 0.006 95);
  --line-strong: oklch(84% 0.008 95);
  --accent: oklch(56% 0.205 33);
  --accent-hover: oklch(50% 0.19 32);
  --accent-ink: oklch(100% 0 0);
  --accent-text: oklch(52% 0.19 32);
  --accent-soft: oklch(95.5% 0.028 40);
  --accent-line: oklch(68% 0.16 34);
  --focus: oklch(52% 0.19 32);
  --focus-soft: oklch(91% 0.05 38);
  --ok: oklch(50% 0.13 155);
  --ok-soft: oklch(96.5% 0.03 155);
  --ok-line: oklch(84% 0.07 155);
  --danger: oklch(48% 0.17 12);
  --danger-soft: oklch(94% 0.04 12);
  --scrim: oklch(21% 0.016 265 / 0.45);
  --cat-0: oklch(72% 0.01 265);
  --cat-1: oklch(56% 0.205 33);
  --cat-2: oklch(48% 0.14 258);
  --cat-3: oklch(58% 0.13 152);
  --cat-5: oklch(55% 0.11 300);
  --cat-4: oklch(72% 0.14 82);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 12px -8px oklch(21% 0.016 265 / 0.18), 0 2px 4px oklch(21% 0.016 265 / 0.06);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, sans-serif;
  --font-code: "Figtree", system-ui, sans-serif;
}

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg { width: 40px; height: auto; }
.logo b { font: 800 1.375rem/1 var(--font-display); letter-spacing: -0.03em; }

/* En-tête public */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid transparent; }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav { align-items: center; }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.head-cta { display: flex; gap: 10px; }
.site-head .logo, .head-cta { flex: none; }
.menu-btn { display: none; }
/* Très petits écrans : l'en-tête tient en 375 px sans débordement */
@media (max-width: 420px) { .site-head .wrap { gap: 12px; } .head-cta { gap: 6px; } .head-cta .btn-ghost { padding-inline: 10px; } }
/* Menu replié sous 1240 px : en dessous, liens, sélecteur de langue et boutons ne tiennent pas sur une ligne */
@media (max-width: 1240px) {
  .site-nav, .head-cta .btn-primary { display: none; }
  .head-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .site-nav.is-open { display: grid; position: absolute; top: 72px; left: 0; right: 0; gap: 0; padding: 8px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .site-nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* Héros */
.hero { padding: clamp(32px, 7vw, 88px) 0 clamp(48px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 {
  font: 800 clamp(2.5rem, 5.6vw, 4.75rem)/0.98 var(--font-display);
  letter-spacing: -0.035em; font-variation-settings: "wdth" 92;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero .lead { margin-top: 22px; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .members { margin-top: 18px; display: flex; gap: 8px; align-items: center; color: var(--ink-3); font-size: 0.9rem; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Le ticket qui porte l'animation */
.ticket {
  position: relative; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 26px 26px 18px;
  box-shadow: 0 1px 0 var(--line), 0 18px 0 -10px var(--surface-2), 0 18px 0 -9px var(--line);
}
.j-stage { grid-template-areas: "field field" "perf perf" "short share" "track track"; }
.j-perf { grid-area: perf; position: relative; margin: 0 -26px; border-top: 2px dashed var(--line-strong); }
.j-perf::before, .j-perf::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong);
}
.j-perf::before { left: -12px; clip-path: inset(0 0 0 50%); }
.j-perf::after { right: -12px; clip-path: inset(0 50% 0 0); }
@media (max-width: 640px) { .j-stage { grid-template-areas: "field" "perf" "short" "out"; } }
.ticket-tag { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }

.j-field { height: 50px; padding: 0 6px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--ink-2); }
.j-go { padding: 8px 14px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; }
.j-stage { row-gap: 18px; }
.j-short { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); }
.j-short-label { font-size: 0.75rem; font-weight: 600; opacity: 0.7; }
.j-short strong { font: 800 1.35rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.j-target { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; font-size: 0.925rem; }
.j-line { width: 28px; height: 2px; background: var(--accent); border-radius: 2px; }
.j-target [data-lucide], .j-target svg { color: var(--accent-text); }
.j-track { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.j-count { font: 800 2.6rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.j-track .j-unit { display: block; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.j-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.j-bars span { flex: 1; height: var(--h); background: var(--ink); border-radius: 3px 3px 0 0; }
.j-bars span:last-child { background: var(--accent); }
.j-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; color: var(--ink-2); }
.j-legend b { color: var(--ink); }
.j-pause .ic-play { display: none; }
.j-pause[aria-pressed="true"] .ic-play { display: block; }
.j-pause[aria-pressed="true"] .ic-pause { display: none; }

/* Sections */
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section-head { max-width: 40rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section h2 { font: 800 clamp(2rem, 3.8vw, 3.1rem)/1.02 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.section .intro { margin-top: 14px; color: var(--ink-2); font-size: 1.1rem; }

.uses { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.use { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(24px, 6vw, 96px); align-items: center; padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line-strong); }
.use h3 { font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.use p { margin-top: 10px; color: var(--ink-2); max-width: 32rem; }
.specimen { justify-self: start; }
.specimen-link { font: 800 clamp(1.7rem, 4vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.03em; }
.specimen-link span { color: var(--ink-3); }
.specimen-link b { color: var(--accent-text); }
.specimen-qr { display: flex; align-items: center; gap: 18px; }
.specimen-qr .qr-mini { width: 112px; color: var(--ink); background: var(--surface); padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.specimen-qr .files { display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }
.specimen-qr .files span { display: inline-flex; gap: 8px; align-items: center; }
.specimen-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.specimen-apps span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: var(--surface); }
.mini-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 28px; }
.mini-stats b { display: block; font: 800 2rem/1 var(--font-display); letter-spacing: -0.03em; }
.mini-stats small { color: var(--ink-2); font-size: 0.85rem; }
@media (max-width: 760px) { .use { grid-template-columns: 1fr; } }

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 96px); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { transition: transform var(--mid) var(--ease-out); color: var(--ink-3); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--accent-text); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 40rem; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* Bandeau final, couleur pleine */
.band { background: var(--accent); color: var(--accent-ink); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px, 6vw, 72px) 0; }
.band h2 { font: 800 clamp(1.9rem, 3.6vw, 2.9rem)/1.02 var(--font-display); letter-spacing: -0.03em; max-width: 22ch; }
.band .btn-light { background: var(--surface); color: var(--ink); }
.band .btn-light:hover { background: var(--surface-2); }
.band .btn-outline { border-color: oklch(100% 0 0 / 0.6); color: var(--accent-ink); }
.band .btn-outline:hover { background: oklch(100% 0 0 / 0.12); }

.site-foot { padding: 36px 0 48px; font-size: 0.9rem; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
/* Signature ClosiQode : discrète sur toutes les pages publiques, en bandeau sur l'accueil */
.site-foot .made-by a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.site-foot .made-by a:hover { text-decoration-color: currentColor; }
.studio { padding: clamp(24px, 4vw, 40px) 0 8px; }
.studio .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.studio p { max-width: 60ch; color: var(--ink-2); }
.studio p b { color: var(--ink); }

/* Bandeau de consentement (mesure d'audience, publicité) : Tout accepter et Tout refuser de même poids, sans fermeture implicite */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  max-width: 760px; margin: 0 auto; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow);
  font-size: 0.925rem;
  animation: consent-in 320ms var(--ease-expo);
}
.consent[hidden] { display: none; }
.consent p { flex: 1 1 320px; }
.consent p strong { color: var(--ink); }
.consent a { color: var(--accent-text); text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { min-width: 112px; }
@media (max-width: 480px) { .consent-actions { width: 100%; } .consent-actions .btn { flex: 1; min-width: 0; } }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.site-foot .foot-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.site-foot .foot-btn:hover { color: var(--ink); text-decoration: underline; }

/* Sélecteur de langue : un seul bouton (globe + code) qui déroule la liste des langues, chacune écrite dans sa langue.
   Dans l'en-tête sur grand écran, dans le menu déroulant sur mobile, et dans le pied de page (ouvert vers le haut). */
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; cursor: pointer; list-style: none; user-select: none; }
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover, .lang-menu[open] > .lang-btn { color: var(--ink); background: var(--surface-2); }
.lang-btn .ic { width: 18px; height: 18px; }
.lang-btn .lang-chev { width: 14px; height: 14px; transition: transform 160ms var(--ease-expo, ease); }
.lang-menu[open] .lang-chev { transform: rotate(180deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); animation: lang-in 160ms var(--ease-expo, ease); }
.lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-item small { margin-left: auto; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.04em; }
a.lang-item:hover, a.lang-item:focus-visible { background: var(--surface-2); }
.lang-item[aria-current] { color: var(--accent-text); }
.lang-item .lang-ok { width: 16px; height: 16px; flex: none; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .lang-list { animation: none; } .lang-btn .lang-chev { transition: none; } }
.site-nav .lang-in-menu { display: none; }
@media (max-width: 1240px) {
  .head-cta .lang-head { display: none; }
  .site-nav.is-open .lang-in-menu { display: block; padding: 12px 0; }
  .site-nav.is-open .lang-in-menu .lang-list { position: static; margin-top: 8px; box-shadow: none; animation: none; }
  .site-nav.is-open .lang-in-menu .lang-item { padding: 10px 12px; border-bottom: 0; }
}
.site-foot .lang-menu .lang-list { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
/* Espace membre : même bouton, en ligne du menu du bas, liste ouverte vers le haut */
.nav-bottom .lang-nav .lang-btn { display: flex; gap: 10px; width: 100%; min-height: 38px; border: 0; font-size: 0.925rem; letter-spacing: 0; }
.nav-bottom .lang-nav .lang-btn:hover, .nav-bottom .lang-nav[open] > .lang-btn { background: var(--surface); }
.nav-bottom .lang-nav .lang-btn .lang-chev { margin-left: auto; }
.nav-bottom .lang-nav .lang-list { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 0; }
.site-foot .foot-note { color: var(--ink-2); }
.plans-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 20px; color: var(--ink-2); font-size: 0.925rem; text-align: center; }
.plans-note .ic { flex: none; width: 18px; height: 18px; }
.lang-note { margin-bottom: 16px; }

/* ---------- Espace connecté ---------- */
.app-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.app-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.app-nav { display: flex; gap: 4px; }
.app-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 0 0; }
.user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 0.8rem; font-weight: 700; }
@media (max-width: 760px) { .app-nav, .user span { display: none; } }

.page { padding: clamp(24px, 4vw, 40px) 0 64px; display: grid; gap: 28px; }
.page h1 { font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -0.03em; }

.create { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); }
.create-row { display: flex; gap: 10px; }
.create-row .input { min-height: 52px; font-size: 1.05rem; }
.create-row .btn { min-height: 52px; padding: 0 22px; }
.create-more-toggle { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0; font-weight: 600; color: var(--ink-2); }
.create-more-toggle svg { transition: transform var(--mid) var(--ease-out); }
.create-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.create-more { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 10px; animation: rowIn 260ms var(--ease-out); }
.create-more select.input { appearance: none; padding-right: 36px; background-image: none; }
@media (max-width: 640px) {
  .create-row { flex-direction: column; }
  .create-more { grid-template-columns: 1fr; }
}

.overview { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.ov { background: var(--surface); padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.ov-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.ov-num { font: 800 2rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ov-sub { font-size: 0.85rem; color: var(--ink-2); }
.ov-week { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; }
.week { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.wk-col { flex: 1; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; justify-items: center; }
.wk-bar { align-self: end; width: 100%; height: var(--h); background: var(--ink); border-radius: 3px 3px 0 0; animation: grow 600ms var(--ease-expo) both; animation-delay: calc(var(--i) * 50ms); transform-origin: bottom; }
.wk-col:last-child .wk-bar { background: var(--accent); }
.wk-day { font-size: 0.7rem; color: var(--ink-3); }
@keyframes grow { from { transform: scaleY(0); } }
.ov-top { font: 800 1.35rem/1.1 var(--font-display); color: var(--accent-text); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .overview { grid-template-columns: 1fr 1fr; } .ov-week { grid-column: 1 / -1; } }

.links-box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.links-box .links-head { padding: 18px 20px 12px; }
.links-box h2 { font: 800 1.4rem/1 var(--font-display); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; }
.links-box h2 small { font: 600 0.85rem var(--font-ui); color: var(--ink-3); letter-spacing: 0; }
.links-box .chips { padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.link { border-bottom-color: var(--line); }
.link .short { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.spark { --spark: var(--ink-3); }
.qr-code { --qr-ink: var(--ink); }

@media (max-width: 640px) { .ov-week { grid-template-columns: 1fr; } }

/* v2 : applications et offres */
.deeplinks { background: var(--surface); border-block: 1px solid var(--line-strong); }
.deeplinks .intro { max-width: 34rem; }
.app { --app-screen: var(--ink); }
.phone-app figcaption { color: var(--accent-text); }
.offres .plan-name { font: 800 1.5rem var(--font-display); letter-spacing: -0.02em; }
.offres .plan-price b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
.plan-pro { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
.plan-pro .plan-price span, .plan-pro .plan-lead { color: oklch(85% 0.01 265); }
.plan-pro li svg { color: oklch(78% 0.15 40); }

/* ---------- Thème sombre (mêmes couleurs, encre et papier inversés) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(17% 0.012 265);
  --surface: oklch(21% 0.013 265);
  --surface-2: oklch(24.5% 0.014 265);
  --surface-hover: oklch(23% 0.013 265);
  --field: oklch(15.5% 0.012 265);
  --ink: oklch(95% 0.006 95);
  --ink-2: oklch(79% 0.01 265);
  --ink-3: oklch(67% 0.012 265);
  --line: oklch(29% 0.012 265);
  --line-strong: oklch(37% 0.014 265);
  --accent: oklch(68% 0.19 37);
  --accent-hover: oklch(73% 0.17 38);
  --accent-ink: oklch(17% 0.02 265);
  --accent-text: oklch(73% 0.17 38);
  --accent-soft: oklch(30% 0.07 35);
  --accent-line: oklch(60% 0.17 35);
  --focus: oklch(73% 0.17 38);
  --focus-soft: oklch(40% 0.1 35 / 0.6);
  --ok: oklch(77% 0.14 155);
  --ok-soft: oklch(27% 0.05 155);
  --ok-line: oklch(45% 0.09 155);
  --danger: oklch(71% 0.17 20);
  --danger-soft: oklch(32% 0.08 20);
  --scrim: oklch(8% 0.01 265 / 0.65);
  --cat-0: oklch(58% 0.01 265);
  --cat-1: oklch(68% 0.19 37);
  --cat-2: oklch(70% 0.12 255);
  --cat-3: oklch(72% 0.13 152);
  --cat-4: oklch(80% 0.13 85);
  --cat-5: oklch(72% 0.11 300);
  --shadow: 0 12px 12px -8px oklch(5% 0.01 265 / 0.7);
}
/* Les QR restent sombres sur fond blanc pour être lus par tous les téléphones */
:root[data-theme="dark"] .qr-code { --qr-ink: oklch(15% 0.01 265); --qr-bg: oklch(100% 0 0); color: var(--qr-ink); background: var(--qr-bg); }
:root[data-theme="dark"] .qr-mini { color: oklch(15% 0.01 265) !important; background: oklch(100% 0 0) !important; }
:root[data-theme="dark"] .plan-pro { background: var(--surface-2); color: var(--ink); border-color: var(--accent-line); }
:root[data-theme="dark"] .plan-pro .plan-price span, :root[data-theme="dark"] .plan-pro .plan-lead { color: var(--ink-2); }
:root[data-theme="dark"] .band .btn-outline { border-color: oklch(17% 0.02 265 / 0.5); color: var(--accent-ink); }
.theme-switching, .theme-switching * { transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out) !important; }
@media (prefers-reduced-motion: reduce) { .theme-switching, .theme-switching * { transition: none !important; } }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
.theme-btn-s .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn-s .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn-s .ic-moon { display: none; }
.site-head { transition: background-color var(--mid); }

/* ===== Espace membre : menu et volets ===== */
/* Direction A, tableau de bord en trois volets.
   Références : boîtes de réception à trois colonnes (Apple Mail, Superhuman),
   panneau de détail de lien façon Dub, arborescence à un niveau façon Linear. */

.panes {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: 252px minmax(340px, 1fr) minmax(360px, 420px);
}
.pane-nav, .pane-list, .pane-detail { min-height: 0; overflow-y: auto; }

/* Volet 1 */
.pane-nav { display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; background: var(--surface-2); border-right: 1px solid var(--line-strong); }
.nav-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.nav-top .logo b { font-size: 1.25rem; }
.nav-close { display: none; }
.nav-new { width: 100%; }
.nav-label { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.icon-btn.mini { min-height: 28px; min-width: 28px; padding: 0; border-color: transparent; background: transparent; }
.tree { display: grid; gap: 1px; }
.tree-item { display: flex; align-items: center; }
.tree-toggle, .tree-gap { flex: none; width: 22px; height: 34px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); padding: 0; }
.tree-toggle svg { width: 15px; height: 15px; transition: transform var(--mid) var(--ease-out); }
.tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tree-row {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none; text-align: left;
  font-weight: 600; font-size: 0.925rem; color: var(--ink-2);
  transition: background-color var(--fast), color var(--fast), transform var(--mid) var(--ease-out);
}
.tree-row svg { width: 16px; height: 16px; }
.tree-row:hover { background: var(--surface); color: var(--ink); }
.tree-row[aria-current="true"] { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--accent); }
.tree-item.is-sub .tree-row { font-weight: 500; font-size: 0.9rem; padding-left: 14px; }
.tree-item.is-sub .chip-dot { width: 6px; height: 6px; }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--ink-3); }
body.is-dragging .tree-row[data-drop]:not([data-drop="all"]) { border-style: dashed; border-color: var(--accent-line); }
.tree-row.is-over { background: var(--accent-soft) !important; color: var(--ink); transform: translateX(4px); }
.tree-row.bump { animation: bump 420ms var(--ease-out); }
.nav-section { flex: 1; }
.nav-bottom { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.nav-bottom a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.925rem; color: var(--ink-2); }
.nav-bottom a:hover { background: var(--surface); color: var(--ink); }
.nav-bottom .me { margin-top: 6px; min-height: 48px; }
.nav-bottom .me small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--ink-3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 0.75rem; font-weight: 700; }

/* Volet 2 */
.pane-list { display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line-strong); }
.list-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.nav-open { display: none; }
.list-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.list-title h1 { font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-title small { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.pane-list .create { margin: 0 20px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.pane-list .create-row { display: flex; gap: 8px; }
.pane-list .create-row .input { min-height: 46px; font-size: 1rem; }
.pane-list .create-row .btn { min-height: 46px; padding: 0 16px; }
.pane-list .create-more-toggle { margin-top: 8px; font-size: 0.875rem; }
.pane-list .create-more { grid-template-columns: 1fr; gap: 10px; }
.pane-list .result { margin-top: 10px; }
.list-search { margin: 14px 20px 6px; max-width: none; flex: none; }
.items { padding: 6px 12px 24px; display: grid; gap: 2px; }
.item { animation: rowIn 320ms var(--ease-out) both; animation-delay: calc(var(--i) * 22ms); border-radius: var(--radius-sm); }
.item.is-new { animation: rowNew 1600ms var(--ease-out) both; }
.item.is-dragging { opacity: 0.4; }
.item-btn {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top meta" "sub meta";
  gap: 2px 14px; align-items: center; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; text-align: left; cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast);
}
.item-btn:hover { background: var(--surface); }
.item.is-sel .item-btn { background: var(--surface); border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--accent); }
.item-top { grid-area: top; display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-top .cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.item-short { font: 700 1rem/1.3 var(--font-display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { grid-area: sub; font-size: 0.875rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { grid-area: meta; display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.item-meta b { min-width: 44px; text-align: right; }
.item .spark { width: 44px; height: 18px; }
.app-badge { --app-bg: var(--accent-soft); --app-ink: var(--accent-text); }

/* Volet 3 */
.pane-detail { padding: 22px 24px 40px; background: var(--surface); display: grid; gap: 22px; align-content: start; }
.pane-detail.is-swap > * { animation: swap 260ms var(--ease-out) both; }
.pane-detail.is-swap > *:nth-child(2) { animation-delay: 30ms; }
.pane-detail.is-swap > *:nth-child(3) { animation-delay: 60ms; }
.pane-detail.is-swap > *:nth-child(n+4) { animation-delay: 90ms; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
.d-back { display: none; justify-self: start; }
.d-head { display: grid; gap: 8px; }
.d-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.d-short { font: 800 clamp(1.5rem, 2.2vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink-3); overflow-wrap: anywhere; }
.d-short b { color: var(--ink); }
.d-dest { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.d-dest:hover { color: var(--ink); text-decoration: underline; }
.d-dest svg { width: 15px; height: 15px; flex: none; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.d-actions .btn { min-height: 40px; }
.d-actions .icon-btn { min-height: 40px; min-width: 40px; }
.d-app { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: 0.925rem; }
.d-app svg { color: var(--accent-text); margin-top: 2px; }
.d-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.d-kpis > div { background: var(--surface); padding: 12px 14px; }
.d-kpis p { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.d-kpis b { display: block; font: 800 1.8rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.d-kpis small { color: var(--ink-3); font-size: 0.8rem; }
.d-block h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; }
.d-block .week { height: 86px; }
.d-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-strong); }
.d-split span { width: var(--w); background: var(--ink); }
.d-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 0.85rem; color: var(--ink-2); }
.d-legend span { display: inline-flex; align-items: center; gap: 6px; }
.d-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.d-legend i.k2 { background: var(--line-strong); }
.d-bars { display: grid; gap: 8px; }
.d-bars li { display: grid; grid-template-columns: 110px 1fr 46px; gap: 10px; align-items: center; font-size: 0.875rem; }
.d-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.d-track span { display: block; height: 100%; width: var(--w); background: var(--ink-2); border-radius: 4px; transform-origin: left; animation: barIn 600ms var(--ease-expo) both; }
@keyframes barIn { from { transform: scaleX(0); } }
.d-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.d-foot { font-size: 0.8rem; color: var(--ink-3); }
.d-empty { display: grid; justify-items: center; gap: 10px; padding: 80px 20px; text-align: center; color: var(--ink-2); }

.scrim { display: none; }

/* Écran moyen : le détail glisse par-dessus */
@media (max-width: 1180px) {
  .panes { grid-template-columns: 236px minmax(0, 1fr); }
  .pane-detail {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100%);
    border-left: 1px solid var(--line-strong); box-shadow: var(--shadow);
    transform: translateX(100%); transition: transform 320ms var(--ease-expo);
  }
  .show-detail .pane-detail { transform: none; }
  .d-back { display: inline-flex; }
}
/* Téléphone : une seule colonne, menu et détail en panneaux */
@media (max-width: 760px) {
  .panes { grid-template-columns: 1fr; }
  .pane-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 45; width: min(300px, 86vw);
    transform: translateX(-100%); transition: transform 320ms var(--ease-expo);
  }
  .show-nav .pane-nav { transform: none; }
  .nav-close, .nav-open { display: inline-flex; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 42; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--mid); }
  .show-nav .scrim { opacity: 1; pointer-events: auto; }
  .pane-detail { width: 100%; border-left: 0; }
  .list-head { padding: 14px 16px 10px; }
  .pane-list .create, .list-search { margin-left: 16px; margin-right: 16px; }
  .items { padding: 6px 6px 24px; }
  .item .spark { display: none; }
}

/* ===== Espace membre : pages ===== */
/* Direction A : pages de l'espace membre avec la coque commune
   (variantes A2 et A3, statistiques détaillées, administration). */
.shell-a { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.shell-a .pane-nav { position: sticky; top: 0; height: 100vh; }
.theme-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; font-weight: 600; font-size: 0.925rem; color: var(--ink-2); text-align: left; }
.theme-btn:hover { background: var(--surface); color: var(--ink); }
.nav-bottom a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
a.nav-new { text-decoration: none; }

.main-a { min-width: 0; padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 40px) 64px; display: grid; gap: 22px; align-content: start; max-width: 1240px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.page-head .nav-open { display: none; }
.page-head h1 { font: 800 clamp(1.7rem, 3vw, 2.3rem)/1.05 var(--font-display); letter-spacing: -0.03em; }
.page-head .count { color: var(--ink-3); font-weight: 600; }
.page-head .search { margin-left: auto; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs svg { width: 14px; height: 14px; }

/* Création large */
.main-a .create { padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.main-a .create-row { display: flex; gap: 10px; }
.main-a .create-row .input { min-height: 50px; font-size: 1.02rem; }
.main-a .create-row .btn { min-height: 50px; padding: 0 22px; }
.main-a .create-more-toggle { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.main-a .create-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.main-a .create-more { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 8px; }

/* Liste pleine largeur */
.lbox { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) 170px 64px 84px 196px; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; color: var(--ink-3); }
.lrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 64px 84px 196px; gap: 16px; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  transition: background-color var(--fast); animation: rowIn 300ms var(--ease-out) both; animation-delay: calc(var(--i) * 20ms);
}
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--surface-hover); }
.lrow.is-open { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lrow.is-new { animation: rowNew 1600ms var(--ease-out) both; }
.lrow.is-dragging { opacity: 0.4; }
.lrow-main { min-width: 0; display: grid; gap: 2px; text-decoration: none; color: inherit; }
.lrow-main:hover .lrow-short { color: var(--accent-text); }
.lrow-host { color: var(--ink-3); font-weight: 600; }
.lrow-main:hover .lrow-host { color: inherit; }
.lrow-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lrow-top .cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.lrow-short { font: 700 1.02rem/1.3 var(--font-display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--fast); }
.lrow-sub { display: flex; gap: 8px; min-width: 0; font-size: 0.85rem; color: var(--ink-3); }
.lrow-title { flex: none; max-width: 50%; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-dest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-cat { font-size: 0.85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-spark { width: 64px; height: 20px; --spark: var(--ink-3); }
.lrow-num { text-align: right; font-variant-numeric: tabular-nums; }
.lrow-num b { display: block; }
.lrow-num small { font-size: 0.72rem; color: var(--ink-3); }
.lrow-act { display: flex; gap: 6px; justify-content: flex-end; }
.lrow-act .icon-btn { min-height: 34px; }
@media (max-width: 1100px) {
  .lhead, .lrow { grid-template-columns: minmax(0, 1fr) 84px 196px; }
  .lhead .h-cat, .lhead .h-spark, .lrow-cat, .lrow-spark { display: none; }
}

/* Tiroir de détail (A3) */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(440px, 100%);
  display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow); transform: translateX(104%); visibility: hidden;
  transition: transform 340ms var(--ease-expo), visibility 0s linear 340ms;
}
.show-drawer .drawer { transform: none; visibility: visible; transition: transform 340ms var(--ease-expo), visibility 0s; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink-2); }
.drawer-body { overflow-y: auto; padding: 20px 22px 32px; display: grid; gap: 20px; align-content: start; }
.show-drawer .drawer-body > * { animation: swap 280ms var(--ease-out) both; }
.d-more { justify-self: start; }
@media (min-width: 1360px) { .show-drawer .main-a { margin-right: 440px; transition: margin 340ms var(--ease-expo); } }

/* Téléphone */
@media (max-width: 860px) {
  .shell-a { grid-template-columns: 1fr; }
  .shell-a .pane-nav { position: fixed; inset: 0 auto 0 0; z-index: 45; width: min(300px, 86vw); height: auto; transform: translateX(-100%); transition: transform 320ms var(--ease-expo); }
  .show-nav .shell-a .pane-nav { transform: none; }
  .shell-a .nav-close, .page-head .nav-open { display: inline-flex; }
  .scrim-a { position: fixed; inset: 0; z-index: 42; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--mid); }
  .show-nav .scrim-a { opacity: 1; pointer-events: auto; }
  .page-head .search { margin-left: 0; flex-basis: 100%; max-width: none; }
  .main-a .create-row { flex-direction: column; }
  .main-a .create-more { grid-template-columns: 1fr; }
  .lhead { display: none; }
  .lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main num" "act act"; gap: 10px; padding: 14px; }
  .lrow-main { grid-area: main; } .lrow-num { grid-area: num; }
  .lrow-act { grid-area: act; justify-content: stretch; }
  .lrow-act .icon-btn { flex: 1; min-height: 40px; }
  .lrow-title { display: none; }
}
@media (min-width: 861px) { .scrim-a { display: none; } }
a.ov-top { text-decoration: none; display: block; }
a.ov-top:hover { text-decoration: underline; }

/* ---------- Statistiques détaillées ---------- */
.stats { gap: 20px; }
.s-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.s-id { display: grid; gap: 6px; min-width: 0; }
.s-short { font: 800 clamp(1.8rem, 3.6vw, 2.8rem)/1.02 var(--font-display); letter-spacing: -0.035em; color: var(--ink-3); overflow-wrap: anywhere; }
.s-short b { color: var(--ink); }
.s-app { justify-self: start; margin-top: 4px; font-size: 0.8rem; padding: 4px 10px; }
.s-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-actions .btn { min-height: 42px; }
.pro-chip { margin-left: 2px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; }

.s-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.seg button { position: relative; z-index: 1; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); transition: color var(--mid); }
.seg button[aria-checked="true"] { color: var(--ink); }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px oklch(21% 0.016 265 / 0.12), inset 0 -2px 0 var(--accent); transition: transform 280ms var(--ease-expo), width 280ms var(--ease-expo); }
.s-period { color: var(--ink-3); font-size: 0.9rem; }
.s-period b { color: var(--ink); }

.s-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.s-kpis > div { background: var(--surface); padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.s-kpis p { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.s-kpis b { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.s-kpis small { font-size: 0.78rem; color: var(--ink-3); }
.s-kpis .muted b { color: var(--ink-3); }

.s-card { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 18px 20px 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.s-card h2 { font: 700 1rem/1.2 var(--font-ui); }
.s-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-wide { grid-column: span 2; }
.s-note { font-size: 0.82rem; color: var(--ink-3); }

.chart { display: flex; align-items: stretch; gap: 3px; height: 220px; padding-top: 30px; }
.c-col { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 20px; gap: 6px; }
.c-bar { position: relative; align-self: end; height: var(--h); background: var(--ink); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: grow 520ms var(--ease-expo) both; animation-delay: calc(var(--i) * 14ms); outline: none; transition: background-color var(--fast); }
.c-col:last-child .c-bar { background: var(--accent); }
.c-bar:hover, .c-bar:focus-visible { background: var(--accent); }
.c-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px); display: grid; gap: 1px; padding: 6px 9px; border-radius: 7px; background: var(--ink); color: var(--bg); font-size: 0.75rem; white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--fast), transform var(--fast) var(--ease-out); }
.c-bar:hover .c-tip, .c-bar:focus-visible .c-tip { opacity: 1; transform: translate(-50%, 0); }
.c-lab { font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; overflow: visible; text-align: center; }
.chart[data-n="30"] .c-col, .chart[data-n="24"] .c-col { gap: 6px; }

.s-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.s-stack span { width: var(--w); transform-origin: left; animation: barIn 600ms var(--ease-expo) both; }
.k0 { background: var(--ink); } .k1 { background: var(--accent); } .k2 { background: var(--line-strong); }
.s-legend { display: grid; gap: 8px; }
.s-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.s-legend i { width: 10px; height: 10px; border-radius: 3px; }
.s-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.s-bars { display: grid; gap: 9px; }
.s-bars li { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.4fr) 48px 40px; gap: 10px; align-items: center; font-size: 0.875rem; }
.s-bars .s-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-bars .d-track span { background: var(--ink-2); animation-delay: calc(var(--i) * 40ms); }
.s-bars li:first-child .d-track span { background: var(--accent); }
.s-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.s-bars small { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.hcell { position: relative; height: 44px; border-radius: 5px; background: var(--accent); }
.hcell.l0 { opacity: 0.1; } .hcell.l1 { opacity: 0.3; } .hcell.l2 { opacity: 0.5; } .hcell.l3 { opacity: 0.75; } .hcell.l4 { opacity: 1; }
.hcell small { position: absolute; top: calc(100% + 4px); left: 0; font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }
.hours + .s-note { margin-top: 16px; }

.s-table-wrap { overflow-x: auto; }
.s-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.s-table th { text-align: left; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.s-table td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.s-table tr:last-child td { border-bottom: 0; }
.s-table .ip { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }

@media (max-width: 1180px) { .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .s-grid { grid-template-columns: 1fr; } .s-wide { grid-column: auto; }
  .s-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-kpis > div:last-child { grid-column: 1 / -1; }
  .chart { height: 170px; gap: 2px; }
  .c-lab { font-size: 0.6rem; }
  .seg { width: 100%; overflow-x: auto; }
  .seg button { flex: 1; padding: 0 8px; white-space: nowrap; }
  .hours { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 22px; }
  .s-bars li { grid-template-columns: minmax(80px, 1fr) minmax(40px, 1fr) 44px 38px; }
}
a.tree-row { text-decoration: none; }

/* ---------- Administration ---------- */
.reg-line { margin-left: auto; color: var(--ink-2); font-size: 0.9rem; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { background: var(--ok-soft); color: var(--ok); }
.status.warn { background: oklch(94% 0.06 85); color: oklch(45% 0.1 70); }
.status.bad { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .status.warn { background: oklch(30% 0.06 80); color: oklch(85% 0.12 85); }
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; }
.tabs [role=tab] { min-height: 44px; padding: 0 14px; border: 0; background: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tabs [role=tab][aria-selected="true"] { color: var(--ink); }
.tabs [role=tab]:hover { color: var(--ink); }
.tab-ind { position: absolute; left: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--accent); transition: transform 300ms var(--ease-expo), width 300ms var(--ease-expo); }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; line-height: 20px; text-align: center; }
.panel { display: grid; gap: 18px; animation: swap 260ms var(--ease-out); }
.a-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-s { min-height: 34px; padding: 0 12px; font-size: 0.85rem; }
.btn-danger { background: var(--danger); color: oklch(100% 0 0); }
.btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; }
.todo { display: grid; gap: 2px; }
.todo li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo p { flex: 1 1 200px; font-size: 0.925rem; }
.todo small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.todo-empty { color: var(--ink-2); gap: 8px !important; }
.todo-empty svg { color: var(--ok); }
.chart-s { height: 170px; }
.chart-s .c-bar { background: var(--ink-2); }

.m-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.m-tools .chips { padding: 0; }
.m-card { padding: 4px 6px; }
.m-table td { vertical-align: middle; }
.mrow { animation: rowIn 300ms var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); }
.mrow.is-flash td { animation: flash 1400ms var(--ease-out); }
@keyframes flash { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }
.who { display: flex; align-items: center; gap: 10px; }
.who b { display: flex; align-items: center; gap: 6px; }
.who small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.admin-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 0.7rem; font-weight: 700; color: var(--ink-2); }
.admin-tag svg { width: 12px; height: 12px; }
.plan-badge { display: inline-grid; padding: 3px 10px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; line-height: 1.25; }
.plan-badge small { font-weight: 500; font-size: 0.72rem; }
.plan-badge.free { background: var(--surface-2); color: var(--ink-2); }
.plan-badge.pro { background: var(--accent-soft); color: var(--accent-text); }
.plan-badge.pro.soon { box-shadow: inset 0 0 0 1.5px var(--accent); }
.usage { display: grid; gap: 4px; font-size: 0.875rem; }
.usage small { color: var(--ink-3); font-size: 0.75rem; }
.u-bar { width: 110px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.u-bar span { display: block; height: 100%; width: var(--w); background: var(--ink-2); }
.u-bar.high span { background: var(--accent); }
.since { color: var(--ink-2); }
.m-act { text-align: right; }
.m-act > * { margin-left: 6px; vertical-align: middle; }
.locked { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-3); }
.locked svg { width: 15px; height: 15px; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.pop .pop-sub { padding: 2px 10px 4px; font-size: 0.75rem; color: var(--ink-3); }
.pop button.danger { color: var(--danger); }
.pop button svg { width: 16px; height: 16px; }

.sw-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); transition: opacity var(--mid); }
.sw-row.is-off { opacity: 0.45; }
.sw-title { font-weight: 700; }
.sw-desc { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); max-width: 44ch; }
.switch { position: relative; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.sw-track { display: block; width: 46px; height: 28px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background-color var(--mid); }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.25); transition: transform 240ms var(--ease-expo); }
.switch input:checked + .sw-track { background: var(--accent); }
.switch input:checked + .sw-track::after { transform: translateX(18px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.visitor { display: grid; gap: 10px; justify-items: start; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); }
.visitor.is-swap { animation: swap 280ms var(--ease-out); }
.visitor h3 { font: 800 1.25rem var(--font-display); letter-spacing: -0.02em; }
.visitor p { color: var(--ink-2); font-size: 0.925rem; }
.fake-field { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); }
.limits td { vertical-align: middle; }
.limits .input { width: 110px; min-height: 38px; }
.limits small { margin-left: 8px; color: var(--ink-3); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 600; }
dialog.confirm { width: min(460px, calc(100vw - 32px)); display: grid; gap: 12px; }
dialog.confirm:not([open]) { display: none; }
dialog.confirm h2 { font: 800 1.3rem/1.2 var(--font-display); }
dialog.confirm p { color: var(--ink-2); }
@media (max-width: 980px) { .a-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .reg-line { margin-left: 0; flex-basis: 100%; }
  .m-table thead { display: none; }
  .m-table, .m-table tbody, .m-table tr, .m-table td { display: block; }
  .m-table tr { padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .m-table td { border: 0; padding: 4px 0; white-space: normal; }
  .m-act { text-align: left; } .m-act > * { margin: 6px 6px 0 0; }
  .fields { grid-template-columns: 1fr; }
}
.tabs { scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
.main-a > * { min-width: 0; }
.s-card { overflow-x: clip; }

/* ===== Composants du site (pages réelles) ===== */
/* Messages : succès, erreur, information, avertissement */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font-size: 0.925rem; }
.alert .ic { margin-top: 1px; }
.alert p { margin: 0; }
.alert-success { border-color: var(--ok-line); background: var(--ok-soft); }
.alert-success .ic { color: var(--ok); }
.alert-error { border-color: var(--danger); background: var(--danger-soft); }
.alert-error .ic { color: var(--danger); }
.alert-info .ic { color: var(--accent-text); }
.alert-warning { border-color: oklch(75% 0.12 80); background: oklch(96% 0.05 85); }
:root[data-theme="dark"] .alert-warning { border-color: oklch(55% 0.1 80); background: oklch(28% 0.05 80); }

/* Cartes génériques */
.card { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: clamp(18px, 3vw, 24px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.card > h2, .card-title { font: 700 1.05rem/1.25 var(--font-ui); }
.card-sub { color: var(--ink-2); font-size: 0.9rem; margin-top: -8px; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: var(--ink-3); }

/* Formulaires */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field .hint { font-size: 0.82rem; color: var(--ink-3); }
.field .error { font-size: 0.85rem; color: var(--danger); font-weight: 600; }
textarea.input { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 36px; background-color: var(--field); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.925rem; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-danger { background: var(--danger); color: oklch(100% 0 0); }
.btn-danger:hover { filter: brightness(0.94); }
.btn-s { min-height: 34px; padding: 0 12px; font-size: 0.85rem; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 38px; min-width: 38px; border: 0; background: none; color: var(--ink-3); border-radius: 6px; }
.pw-toggle:hover { color: var(--ink); }

/* Pages d'authentification : carte centrée */
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.auth-main { display: grid; place-items: center; padding: 32px 16px 56px; }
.auth-card { width: min(440px, 100%); display: grid; gap: 20px; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.auth-card h1 { font: 800 clamp(1.7rem, 4vw, 2.1rem)/1.05 var(--font-display); letter-spacing: -0.03em; }
.auth-card .lead { color: var(--ink-2); margin-top: -10px; }
.auth-alt { text-align: center; font-size: 0.925rem; color: var(--ink-2); }
.auth-alt a { color: var(--accent-text); font-weight: 600; }
.a-link { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.a-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Textes longs : pages légales, documentation */
.prose { max-width: 72ch; display: grid; gap: 14px; }
.prose h1 { font: 800 clamp(2rem, 4vw, 2.8rem)/1.05 var(--font-display); letter-spacing: -0.03em; }
.prose h2 { font: 800 1.45rem/1.2 var(--font-display); letter-spacing: -0.02em; margin-top: 18px; }
.prose h3 { font-size: 1.05rem; font-weight: 700; margin-top: 6px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.prose a { color: var(--accent-text); }
.prose code { font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); }
.prose pre { overflow-x: auto; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.85rem; }
.page-public { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }

/* Page 404 */
.notfound { display: grid; justify-items: start; gap: 16px; padding: clamp(48px, 10vw, 120px) 0; }
.notfound .code { font: 800 clamp(4rem, 14vw, 9rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--accent-text); }

/* Badges d'offre */
.plan-badge { display: inline-grid; padding: 3px 10px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; line-height: 1.25; }
.plan-badge small { font-weight: 500; font-size: 0.72rem; }
.plan-badge.free { background: var(--surface-2); color: var(--ink-2); }
.plan-badge.pro { background: var(--accent-soft); color: var(--accent-text); }
.pro-chip { margin-left: 2px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; }
.upsell { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 0.925rem; }

/* Pied de page de l'espace membre (liens légaux) */
.app-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: var(--ink-3); }
.app-foot a { color: inherit; text-decoration: none; }
.app-foot a:hover { color: var(--ink); text-decoration: underline; }

/* Menu : sous-catégories repliables */
.tree-kids ul { display: grid; gap: 1px; }
.tree-kids[hidden] { display: none; }
.nav-bottom form { margin: 0; }
.nav-bottom form .theme-btn { color: var(--ink-3); }
body.is-dragging .tree-row[data-drop-cat]:not([data-drop-cat="all"]) { border-style: dashed; border-color: var(--accent-line); }
.tree-row.is-over { background: var(--accent-soft) !important; color: var(--ink); transform: translateX(4px); }

/* Tableau de bord : quota, création, parcours d'accueil */
.main-a .create-more { grid-template-columns: 1.3fr 1fr 0.8fr; }
@media (max-width: 860px) { .main-a .create-more { grid-template-columns: 1fr; } }
.quota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 0.85rem; color: var(--ink-2); }
.quota .u-bar { width: 120px; }
.quota.is-high .u-bar span { background: var(--accent); }
.lbox-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.onboard { display: grid; gap: 18px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.onboard h2 { font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
.onboard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: ob; }
.onboard-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--radius-sm); background: var(--surface-2); counter-increment: ob; }
.onboard-steps li b { font-size: 1rem; }
.onboard-steps li span:last-child { font-size: 0.875rem; color: var(--ink-2); }
.ob-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
/* Les quatre étapes s'allument tour à tour : on comprend l'ordre du parcours */
.onboard-steps li { animation: obStep 8s var(--ease-out) infinite; animation-delay: calc(var(--i) * 2s); }
.onboard-steps li .ob-ico { animation: obIco 8s var(--ease-out) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes obStep { 0%, 22% { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); } 30%, 100% { background: var(--surface-2); box-shadow: none; } }
@keyframes obIco { 0%, 22% { color: var(--accent-text); border-color: var(--accent-line); transform: translateY(-2px); } 30%, 100% { color: var(--ink-2); border-color: var(--line-strong); transform: none; } }
@media (max-width: 760px) { .onboard-steps { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .onboard-steps li, .onboard-steps li .ob-ico { animation: none; } }
.u-bar { display: inline-block; width: 110px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.u-bar span { display: block; height: 100%; width: var(--w); background: var(--ink-2); }
.lrow.is-leaving { animation: rowOut 260ms var(--ease-out) forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateX(16px); } }

/* ===== Grands écrans ===== */
/* Le menu ne déborde jamais : les compteurs restent visibles, les noms longs se coupent proprement */
.pane-nav { overflow-x: hidden; }
.tree-count { flex: none; padding-left: 6px; }
.tree-item, .tree-kids, .tree-kids ul { min-width: 0; }
/* Le contenu occupe la largeur disponible, jusqu'à une mesure confortable, centré dans sa colonne */
.main-a { max-width: 1480px; width: 100%; margin-inline: auto; }
@media (min-width: 1800px) {
  html { font-size: 17px; }
  .shell-a { grid-template-columns: 280px minmax(0, 1fr); }
  .main-a { max-width: 1640px; }
  .lhead, .lrow { grid-template-columns: minmax(0, 1fr) 220px 80px 96px 210px; }
}
@media (min-width: 2400px) {
  html { font-size: 18px; }
  .shell-a { grid-template-columns: 300px minmax(0, 1fr); }
  .main-a { max-width: 1840px; }
}

/* Pause des liens en trop (offre Gratuit après la fin de Pro) */
.pause-banner > div { display: grid; gap: 8px; min-width: 0; }
.pause-banner-sub { color: var(--ink-2); font-size: 0.875rem; }
.pause-banner-act { margin-top: 2px; }
.lrow.is-paused .lrow-main, .lrow.is-paused .lrow-cat, .lrow.is-paused .lrow-spark, .lrow.is-paused .lrow-num { opacity: 0.6; }
.lrow.has-pause .lrow-pause { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--ink-3); }
.lrow-pause-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.lrow-pause-btns form { margin: 0; }
@media (max-width: 860px) {
  .lrow.has-pause { grid-template-areas: "main num" "act act" "pause pause"; }
  .lrow.has-pause .lrow-pause { grid-area: pause; }
  .lrow-pause-btns { margin-left: 0; width: 100%; }
  .lrow-pause-btns .btn { flex: 1; min-height: 40px; }
  .lrow-pause-btns form { flex: 1; display: flex; }
  .lrow-pause-btns form .btn { width: 100%; }
}

/* Bandeau « Cette page existe en … » (langue du navigateur), sous l'en-tête des pages publiques */
.lang-suggest { border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 0.925rem; }
.lang-suggest[hidden] { display: none; }
.lang-suggest .wrap { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 0; }
.lang-suggest p { flex: 1 1 200px; margin: 0; }
.lang-suggest .ic { width: 18px; height: 18px; flex: none; }
.lang-suggest .btn { min-height: 36px; padding-block: 0; }
.lang-suggest .icon-btn { margin-left: auto; }
@media (max-width: 480px) { .lang-suggest .btn { flex: 1; } }