/* ════════════════════════════════════════════════════════════════════
   h11k - Framework de composants. Moteur JS : h11k.js.
   Piloté par tokens (harmonie m14r) avec fallbacks → autonome. Thème via
   variables CSS, mode sombre par [data-theme="dark"].
   ════════════════════════════════════════════════════════════════════ */
:where(.h11k-btn,.h11k-badge,.h11k-card,.h11k-alert,.h11k-table,.h11k-tabs,.h11k-acc,.h11k-modal,.h11k-drawer,.h11k-popover,.h11k-toast,.h11k-toasts,.h11k-tip,.h11k-menu,.h11k-switch,.h11k-progress,.h11k-avatar,.h11k-spin,.h11k-dt-bar){
  --_card:var(--color-surface, var(--card,#fff));
  --_bg:var(--color-bg, #f8fafc);
  --_txt:var(--color-text, var(--txt,#0f172a));
  --_mut:var(--color-muted, var(--mut,#64748b));
  --_line:var(--color-line, var(--line,#e2e8f0));
  --_accent:var(--color-primary, var(--accent,#0d9488));
  --_success:var(--color-success,#10b981); --_warn:var(--color-warning,#f59e0b); --_danger:var(--color-danger,#ef4444); --_info:var(--color-primary,#0d9488);
  --_r:var(--radius-md,10px); --_rl:var(--radius-lg,16px);
  --_sh:var(--shadow-md,0 6px 18px -8px rgba(0,0,0,.18));
  font-family:var(--font-sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
}

/* ── Adaptation au corps (harmonie « cap:platform ») ──
   h11k.js pose --h11k-touch / --h11k-density / --h11k-toast-bottom quand une
   enveloppe native est là (a13p, a10lt, a10l). Hors enveloppe, les valeurs par
   défaut ci-dessous s'appliquent : le kit reste autonome sur le Web. */
:root{ --h11k-touch:36px; --h11k-density:1; --h11k-toast-bottom:16px; --h11k-modal-top:16px; }

/* ── Boutons ── */
.h11k-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:600;
  padding:calc(9px * var(--h11k-density)) calc(16px * var(--h11k-density));
  min-height:var(--h11k-touch);
  border-radius:var(--_r); border:1px solid var(--_line); background:var(--_card); color:var(--_txt); cursor:pointer;
  transition:background .12s, border-color .12s, transform .06s, box-shadow .12s; line-height:1.2; }
.h11k-btn:hover{ border-color:color-mix(in srgb, var(--_accent) 45%, var(--_line)); }
.h11k-btn:active{ transform:translateY(1px); }
.h11k-btn:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--_accent) 28%, transparent); }
.h11k-btn.is-primary{ background:var(--_accent); border-color:transparent; color:#fff; }
.h11k-btn.is-primary:hover{ background:color-mix(in srgb, var(--_accent) 88%, #000); }
.h11k-btn.is-soft{ background:color-mix(in srgb, var(--_accent) 12%, transparent); border-color:transparent; color:var(--_accent); }
.h11k-btn.is-ghost{ background:transparent; border-color:transparent; }
.h11k-btn.is-ghost:hover{ background:color-mix(in srgb, var(--_line) 40%, transparent); }
.h11k-btn.is-danger{ background:var(--_danger); border-color:transparent; color:#fff; }
.h11k-btn.is-sm{ padding:6px 11px; font-size:13px; border-radius:calc(var(--_r) - 2px); }
.h11k-btn.is-lg{ padding:12px 22px; font-size:15px; }
.h11k-btn.is-icon{ padding:9px; aspect-ratio:1; }
.h11k-btn[disabled]{ opacity:.5; pointer-events:none; }
.h11k-btn svg{ width:16px; height:16px; }

/* ── Badge / chip ── */
.h11k-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--_line) 55%, transparent); color:var(--_txt); }
.h11k-badge.is-primary{ background:color-mix(in srgb, var(--_accent) 16%, transparent); color:var(--_accent); }
.h11k-badge.is-success{ background:color-mix(in srgb, var(--_success) 16%, transparent); color:var(--_success); }
.h11k-badge.is-warn{ background:color-mix(in srgb, var(--_warn) 18%, transparent); color:color-mix(in srgb, var(--_warn) 75%, #000); }
.h11k-badge.is-danger{ background:color-mix(in srgb, var(--_danger) 16%, transparent); color:var(--_danger); }
.h11k-badge.is-dot::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── Carte ── */
.h11k-card{ background:var(--_card); border:1px solid var(--_line); border-radius:var(--_rl); box-shadow:var(--_sh); color:var(--_txt); overflow:hidden; }
.h11k-card-h{ padding:16px 18px; border-bottom:1px solid color-mix(in srgb, var(--_line) 70%, transparent); font-weight:700; }
.h11k-card-b{ padding:18px; }
.h11k-card-f{ padding:14px 18px; border-top:1px solid color-mix(in srgb, var(--_line) 70%, transparent); display:flex; gap:8px; justify-content:flex-end; background:color-mix(in srgb, var(--_line) 12%, transparent); }

/* ── Alerte ── */
.h11k-alert{ display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:var(--_r); font-size:14px;
  background:color-mix(in srgb, var(--_info) 10%, var(--_card)); border:1px solid color-mix(in srgb, var(--_info) 30%, transparent); color:var(--_txt); }
/* La pastille de l'alerte : un disque de la couleur, et le signe DESSINÉ (trait
   blanc, grille de 24) plutôt qu'une lettre de la fonte : « i », « ✓ » et « ! »
   changeaient de graisse et de centrage d'un poste à l'autre. */
.h11k-alert::before{ content:''; flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--_info) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.h11k-alert.is-success{ background:color-mix(in srgb, var(--_success) 10%, var(--_card)); border-color:color-mix(in srgb, var(--_success) 30%, transparent); }
.h11k-alert.is-success::before{ background:var(--_success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.h11k-alert.is-warn{ background:color-mix(in srgb, var(--_warn) 12%, var(--_card)); border-color:color-mix(in srgb, var(--_warn) 35%, transparent); }
.h11k-alert.is-warn::before{ background:var(--_warn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7M12 17v.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.h11k-alert.is-danger{ background:color-mix(in srgb, var(--_danger) 10%, var(--_card)); border-color:color-mix(in srgb, var(--_danger) 30%, transparent); }
.h11k-alert.is-danger::before{ background:var(--_danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7M12 17v.5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* ── Avatar ── */
.h11k-avatar{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:color-mix(in srgb, var(--_accent) 18%, transparent);
  color:var(--_accent); font-weight:700; font-size:14px; overflow:hidden; }
.h11k-avatar img{ width:100%; height:100%; object-fit:cover; }
.h11k-avatar.is-sm{ width:28px; height:28px; font-size:12px; } .h11k-avatar.is-lg{ width:52px; height:52px; font-size:18px; }

/* ── Progression & spinner ── */
.h11k-progress{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--_line) 80%, transparent); overflow:hidden; }
.h11k-progress > i{ display:block; height:100%; background:var(--_accent); border-radius:999px; transition:width .3s var(--ease,cubic-bezier(.22,1,.36,1)); }
.h11k-spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--_accent) 30%, transparent); border-top-color:var(--_accent); animation:h11k-spin .7s linear infinite; display:inline-block; }
@keyframes h11k-spin{ to{ transform:rotate(360deg) } }

/* ── Interrupteur ── */
.h11k-switch{ position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.h11k-switch input{ position:absolute; opacity:0; width:0; height:0; }
.h11k-switch i{ width:40px; height:23px; border-radius:999px; background:color-mix(in srgb, var(--_line) 90%, transparent); transition:background .15s; position:relative; }
.h11k-switch i::after{ content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s; }
.h11k-switch input:checked + i{ background:var(--_accent); }
.h11k-switch input:checked + i::after{ transform:translateX(17px); }
.h11k-switch input:focus-visible + i{ box-shadow:0 0 0 3px color-mix(in srgb, var(--_accent) 28%, transparent); }

/* ── Tableau ── */
.h11k-table{ width:100%; border-collapse:collapse; font-size:14px; color:var(--_txt); }
.h11k-table th,.h11k-table td{ text-align:start; padding:11px 14px; border-bottom:1px solid color-mix(in srgb, var(--_line) 70%, transparent); }
.h11k-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--_mut); font-weight:700; }
.h11k-table tbody tr{ transition:background .1s; }
.h11k-table tbody tr:hover{ background:color-mix(in srgb, var(--_accent) 6%, transparent); }
.h11k-table.is-card{ background:var(--_card); border:1px solid var(--_line); border-radius:var(--_rl); overflow:hidden; box-shadow:var(--_sh); }

/* ── Onglets ── */
.h11k-tabs{ }
.h11k-tabs > [data-h11k-tab]{ font:inherit; font-size:14px; font-weight:600; border:0; background:transparent; color:var(--_mut); padding:9px 14px; cursor:pointer; border-bottom:2px solid transparent; }
.h11k-tabs > [data-h11k-tab]:hover{ color:var(--_txt); }
.h11k-tabs > [data-h11k-tab].on{ color:var(--_accent); border-bottom-color:var(--_accent); }
.h11k-tabs > [data-h11k-panel]{ padding-top:16px; }

/* ── Accordéon ── */
.h11k-acc > *{ border-bottom:1px solid color-mix(in srgb, var(--_line) 70%, transparent); }
.h11k-acc [data-h11k-head]{ width:100%; text-align:start; font:inherit; font-weight:600; background:transparent; border:0; color:var(--_txt); padding:14px 4px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
/* Le chevron de l'accordéon est un dessin (masque sur currentColor), pas le
   « ⌄ » de la fonte, qui n'existait pas dans toutes et tombait en boîte vide. */
.h11k-acc [data-h11k-head]::after{ content:''; flex:none; width:18px; height:18px; background:currentColor; color:var(--_mut); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .15s; }
.h11k-acc .open [data-h11k-head]::after{ transform:rotate(180deg); }
.h11k-acc [data-h11k-body]{ max-height:0; overflow:hidden; transition:max-height .22s var(--ease,cubic-bezier(.22,1,.36,1)); }
/* La hauteur ouverte est posée par h11k.js (scrollHeight réel, puis none) : pas de plafond qui tronque. */
.h11k-acc .open [data-h11k-body]{ max-height:none; }
.h11k-acc [data-h11k-body][hidden]{ display:none; }
.h11k-acc [data-h11k-body] > *{ padding:0 4px 16px; color:var(--_mut); }

/* ── Modale ── */
.h11k-modal{ border:0; padding:0; border-radius:var(--_rl); background:var(--_card); color:var(--_txt); box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  max-width:min(92vw,520px); width:100%; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .15s, transform .15s var(--ease,cubic-bezier(.22,1,.36,1)); }
.h11k-modal.h11k-in{ opacity:1; transform:none; }
.h11k-modal::backdrop{ background:rgba(8,15,30,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.h11k-modal-h{ padding:18px 20px 0; font-size:17px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.h11k-modal-b{ padding:14px 20px; color:var(--_txt); }
.h11k-modal-f{ padding:14px 20px 20px; display:flex; gap:8px; justify-content:flex-end; }

/* ── Toasts ── */
/* bottom : remonte au-dessus de la barre gestuelle sur mobile (var. posée par h11k.js). */
.h11k-toasts{ position:fixed; right:16px; bottom:var(--h11k-toast-bottom,16px); z-index:1200; display:grid; gap:9px; max-width:340px; }
.h11k-toast{ display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:var(--_r); background:var(--_card); color:var(--_txt);
  border:1px solid var(--_line); box-shadow:0 12px 32px -10px rgba(0,0,0,.4); cursor:pointer;
  opacity:0; transform:translateX(20px); transition:opacity .2s, transform .2s var(--ease,cubic-bezier(.22,1,.36,1)); }
.h11k-toast.in{ opacity:1; transform:none; }
.h11k-toast-i{ flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--_info); }
.h11k-toast.is-success .h11k-toast-i{ background:var(--_success); } .h11k-toast.is-warn .h11k-toast-i{ background:var(--_warn); }
/* 'error' est un alias de 'danger' : h11k.js normalise la classe, la règle couvre les deux. */
.h11k-toast.is-danger .h11k-toast-i,.h11k-toast.is-error .h11k-toast-i{ background:var(--_danger); }
.h11k-toast-m{ flex:1; font-size:14px; }
/* Bouton d'action et croix : le toast se ferme au clavier, pas seulement au clic. */
.h11k-toast-a{ flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; padding:5px 11px; border:0; border-radius:calc(var(--_r) - 3px);
  background:var(--_accent); color:var(--h11k-on-accent,#fff); cursor:pointer; }
.h11k-toast-a:hover{ background:color-mix(in srgb, var(--_accent) 88%, #000); }
.h11k-toast-x{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; font:inherit; font-size:13px;
  border:0; border-radius:6px; background:transparent; color:var(--_mut); cursor:pointer; }
.h11k-toast-x:hover{ background:color-mix(in srgb, var(--_line) 55%, transparent); color:var(--_txt); }
.h11k-toast-a:focus-visible,.h11k-toast-x:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--_accent) 32%, transparent); }
/* Compte à rebours en pause (survol, focus dedans) : le toast reste net. */
.h11k-toast.hold{ box-shadow:0 14px 36px -10px rgba(0,0,0,.5); }

/* ── Tiroir (drawer) : même moteur que la modale, entrée par un bord ── */
.h11k-drawer{ position:fixed; z-index:1150; border:0; padding:0; margin:0; max-width:100%; max-height:100%;
  background:var(--_card); color:var(--_txt); box-shadow:0 24px 80px -20px rgba(0,0,0,.5);
  transition:transform .18s var(--ease,cubic-bezier(.22,1,.36,1)), opacity .18s; opacity:0; }
.h11k-drawer:not([open]){ display:none; }
.h11k-drawer::backdrop{ background:rgba(8,15,30,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.h11k-drawer[data-h11k-side="end"],.h11k-drawer[data-h11k-side="start"]{ top:0; bottom:0; height:100%; width:min(92vw,380px); border-radius:0; }
.h11k-drawer[data-h11k-side="end"]{ inset-inline-end:0; inset-inline-start:auto; transform:translateX(100%); }
.h11k-drawer[data-h11k-side="start"]{ inset-inline-start:0; inset-inline-end:auto; transform:translateX(-100%); }
[dir="rtl"] .h11k-drawer[data-h11k-side="end"]{ transform:translateX(-100%); }
[dir="rtl"] .h11k-drawer[data-h11k-side="start"]{ transform:translateX(100%); }
.h11k-drawer[data-h11k-side="top"],.h11k-drawer[data-h11k-side="bottom"]{ left:0; right:0; width:100%; max-height:80vh; border-radius:0; }
.h11k-drawer[data-h11k-side="top"]{ top:0; bottom:auto; transform:translateY(-100%); }
.h11k-drawer[data-h11k-side="bottom"]{ bottom:0; top:auto; transform:translateY(100%); border-radius:var(--_rl) var(--_rl) 0 0; }
.h11k-drawer.h11k-in{ opacity:1; transform:none; }
.h11k-drawer-h{ padding:18px 20px 0; font-size:17px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.h11k-drawer-b{ padding:14px 20px; overflow:auto; }

/* ── Popover déclaratif (non modal) : posé par H11K.place() ── */
.h11k-popover{ display:none; position:fixed; z-index:1120; background:var(--_card); color:var(--_txt); border:1px solid var(--_line);
  border-radius:12px; padding:12px; min-width:200px; max-width:min(92vw,340px); box-shadow:0 18px 48px -14px rgba(0,0,0,.4); }
.h11k-popover.open{ display:block; }
.h11k-popover:focus-visible{ outline:2px solid var(--_accent); outline-offset:2px; }

/* ── Table de données (tri, filtre, pagination, sélection) ── */
.h11k-table tr[hidden]{ display:none; }
.h11k-table th[aria-sort]{ padding:0; }
.h11k-dt-sort{ display:flex; align-items:center; gap:6px; width:100%; font:inherit; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--_mut); background:transparent; border:0; padding:11px 14px; cursor:pointer; text-align:start; }
.h11k-dt-sort:hover{ color:var(--_txt); }
.h11k-dt-sort:focus-visible{ outline:0; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--_accent) 45%, transparent); }
/* Le sens du tri est porté par aria-sort ; le glyphe n'est qu'un écho visuel
   (le span est aria-hidden : le lecteur d'écran lit aria-sort, pas la flèche). */
.h11k-dt-arrow{ display:inline-block; vertical-align:-2px; opacity:.45; }
.h11k-dt-arrow::after{ content:''; display:block; width:13px; height:13px; background:currentColor; }
.h11k-table th[aria-sort="none"] .h11k-dt-arrow::after{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 9.5 12 6l3.5 3.5M8.5 14.5 12 18l3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 9.5 12 6l3.5 3.5M8.5 14.5 12 18l3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.h11k-table th[aria-sort="ascending"] .h11k-dt-arrow::after{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18V6M7.5 10.5 12 6l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18V6M7.5 10.5 12 6l4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.h11k-table th[aria-sort="descending"] .h11k-dt-arrow::after{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M7.5 13.5 12 18l4.5-4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M7.5 13.5 12 18l4.5-4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.h11k-table th[aria-sort="ascending"] .h11k-dt-sort,.h11k-table th[aria-sort="descending"] .h11k-dt-sort{ color:var(--_accent); }
.h11k-table th[aria-sort="ascending"] .h11k-dt-arrow,.h11k-table th[aria-sort="descending"] .h11k-dt-arrow{ opacity:1; }
.h11k-dt-sel{ width:38px; text-align:center; }
.h11k-dt-sel input{ width:16px; height:16px; accent-color:var(--_accent); cursor:pointer; }
.h11k-table tbody tr.is-selected{ background:color-mix(in srgb, var(--_accent) 12%, transparent); }
.h11k-dt-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; padding:10px 2px; font-size:13px; color:var(--_mut); }
.h11k-dt-pager{ display:flex; align-items:center; gap:4px; }
.h11k-dt-pages{ display:flex; gap:4px; }
.h11k-dt-prev,.h11k-dt-next,.h11k-dt-page{ min-width:var(--h11k-touch,32px); height:32px; padding:0 9px; font:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--_line); border-radius:8px; background:var(--_card); color:var(--_txt); cursor:pointer; }
.h11k-dt-prev:hover,.h11k-dt-next:hover,.h11k-dt-page:hover{ border-color:color-mix(in srgb, var(--_accent) 45%, var(--_line)); }
.h11k-dt-prev:focus-visible,.h11k-dt-next:focus-visible,.h11k-dt-page:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--_accent) 28%, transparent); }
/* Page courante : le texte sur l'accent est noir ou blanc selon sa luminance (--h11k-on-accent, posée par h11k.js). */
.h11k-dt-page.on{ background:var(--_accent); border-color:transparent; color:var(--h11k-on-accent,#fff); }
.h11k-dt-prev[disabled],.h11k-dt-next[disabled]{ opacity:.4; cursor:not-allowed; }

/* ── Infobulle ── */
/* Le texte REPLIE. `white-space:nowrap` avec un `max-width` se contredisent :
   sans retour à la ligne possible, la largeur maximale ne réduit rien, elle
   coupe. Une infobulle porte souvent une phrase entière ; elle doit tenir sur
   deux ou trois lignes courtes plutôt que se perdre hors de l'écran. */
.h11k-tip{ position:fixed; z-index:1300; background:var(--color-text,#0f172a); color:var(--color-surface,#fff); font-size:12.5px; font-weight:500;
  padding:6px 10px; border-radius:7px; pointer-events:none; box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
  white-space:normal; line-height:1.4; max-width:min(22rem,80vw); overflow-wrap:anywhere; text-wrap:pretty;
  opacity:0; transform:scale(.96); transition:opacity .1s, transform .1s; }
.h11k-tip.in{ opacity:1; transform:none; }

/* ── Menu déroulant ── */
.h11k-menu{ display:none; position:fixed; z-index:1100; background:var(--_card); border:1px solid var(--_line); border-radius:12px; padding:5px;
  box-shadow:0 18px 48px -14px rgba(0,0,0,.4); min-width:180px; }
.h11k-menu.open{ display:block; }
.h11k-menu a,.h11k-menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:start; font:inherit; font-size:14px; color:var(--_txt);
  background:transparent; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; text-decoration:none; }
.h11k-menu a:hover,.h11k-menu button:hover{ background:color-mix(in srgb, var(--_accent) 12%, transparent); }

@media (prefers-reduced-motion: reduce){
  .h11k-btn,.h11k-modal,.h11k-drawer,.h11k-toast,.h11k-tip,.h11k-acc [data-h11k-body],.h11k-progress > i,.h11k-switch i,.h11k-switch i::after{ transition:none; }
  .h11k-drawer{ transform:none; }
  .h11k-spin{ animation:none; }
}

/* ── RTL (arabe, hébreu…) : i18n pose dir="rtl" sur <html>, tout en hérite ── */
[dir="rtl"] .h11k-toasts{ right:auto; left:16px; }
[dir="rtl"] .h11k-toast{ transform:translateX(-20px); }
[dir="rtl"] .h11k-toast.in{ transform:none; }
[dir="rtl"] .h11k-switch i::after{ left:auto; right:2px; }
[dir="rtl"] .h11k-switch input:checked + i::after{ transform:translateX(-17px); }