/* ════════════════════════════════════════════════════════════════
   POLISH — couche de motion & finition
   Chargée en dernier : surcharge style.css / extensions.css / cards.css
   Aucune fonctionnalité ajoutée — uniquement animation, fluidité, perf.

   Direction visuelle : dark outil sérieux — fond plat, une seule
   couleur d'accent qui porte l'attention, mouvement discret mais
   soigné (montées courtes, micro-interactions, rythme irrégulier).
════════════════════════════════════════════════════════════════ */

:root {
  /* ── Courbes d'easing ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* décélération franche */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);       /* expo moderne, très douce en fin de course */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* léger rebond */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Durées ── */
  --d-fast:  140ms;
  --d-base:  220ms;
  --d-slow:  340ms;
  --d-lazy:  520ms;

  /* Remplace le --t global (120ms ease) par une courbe plus douce */
  --t: var(--d-fast) var(--ease-out);
}

/* ════════════════════════════════════════
   FOND — vignette neutre très discrète
   Donne juste du relief aux surfaces sur un fond plat : pas de halo
   coloré, pas de grille, pas de particules. Rien de décoratif.
════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 38%, transparent 62%, rgba(0,0,0,0.22) 100%);
}

/* Le contenu passe au-dessus de la couche d'ambiance */
#app-wrapper { position: relative; z-index: 1; }

/* ════════════════════════════════════════
   ENTRÉE DE PAGE — montée courte, sans flou
════════════════════════════════════════ */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseInSoft {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

header        { animation: riseIn var(--d-slow) var(--ease-expo) both; }
.search-panel { animation: riseInSoft var(--d-lazy) var(--ease-expo) 130ms both; }

/* ════════════════════════════════════════
   HEADER — micro-interactions
════════════════════════════════════════ */
header {
  transition: border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
/* Filet sous le header, révélé au scroll (classe posée par motion.js) */
header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out);
  pointer-events: none;
}
header.is-scrolled::after { opacity: 0.45; }
header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(0,0,0,0.7); }

.logo {
  position: relative;
  transition: transform var(--d-base) var(--ease-spring);
  display: inline-block;
}
.logo:hover { transform: translateY(-1px); }
.logo-accent {
  transition: color var(--d-base) var(--ease-out);
}
.logo:hover .logo-accent { color: #818cf8; }

/* Pastille de statut — sobre : la couleur suffit à dire l'état */
.status-dot.online { box-shadow: none; }

.btn-icon {
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}
.btn-icon:hover  { transform: translateY(-1px) scale(1.06); }
.btn-icon:active { transform: scale(0.94); transition-duration: 80ms; }
/* La roue des réglages tourne légèrement au survol */
#settings-btn svg { transition: transform var(--d-slow) var(--ease-spring); }
#settings-btn:hover svg { transform: rotate(90deg); }

a.btn-discord {
  transition: color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}
a.btn-discord:hover  { transform: translateY(-2px) scale(1.12); }
a.btn-discord:active { transform: scale(0.92); }

/* ════════════════════════════════════════
   SECTIONS PLIABLES — vraie animation d'ouverture
   Technique grid 0fr → 1fr (wrapper posé par motion.js)
════════════════════════════════════════ */
.search-section {
  transition: background var(--d-base) var(--ease-out);
}

/* Tant que motion.js n'a pas tourné, on garde le comportement d'origine.
   Une fois prêt (.motion-ready), on bascule sur la version animée. */
.motion-ready .section-body {
  display: grid !important;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: grid-template-rows var(--d-slow) var(--ease-expo),
              opacity var(--d-base) var(--ease-out),
              padding var(--d-slow) var(--ease-expo);
}
.motion-ready .search-section.open .section-body {
  grid-template-rows: 1fr;
  padding-top: 12px;
  padding-bottom: 14px;
  opacity: 1;
}
.motion-ready .section-body-inner {
  overflow: hidden;
  min-height: 0;
}
/* Les champs glissent légèrement pendant l'ouverture */
.motion-ready .section-body-inner > * {
  transition: transform var(--d-slow) var(--ease-expo);
  transform: translate3d(0, -6px, 0);
}
.motion-ready .search-section.open .section-body-inner > * {
  transform: none;
}

.section-header {
  transition: background var(--d-fast) var(--ease-out);
  position: relative;
}
.section-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--d-base) var(--ease-out);
}
.search-section.open .section-header::before { transform: scaleY(1); }

.section-header-left svg {
  transition: color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}
.search-section.open .section-header-left svg {
  color: var(--accent);
  transform: scale(1.08);
}
.section-chevron {
  transition: transform var(--d-slow) var(--ease-spring),
              color var(--d-base) var(--ease-out);
}
.search-section.open .section-chevron { color: var(--accent); }

/* Compteur de critères — petit pop à l'apparition */
.section-count, .criteria-count-badge {
  animation: badgePop var(--d-base) var(--ease-spring);
  transition: background var(--d-base) var(--ease-out);
}
@keyframes badgePop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* Rejoué à chaque changement de valeur (classe posée par motion.js) */
.badge-bump { animation: badgeBump 380ms var(--ease-spring); }
@keyframes badgeBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════
   CHAMPS — focus vivant
════════════════════════════════════════ */
.field-group { position: relative; }
.field-label {
  transition: color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  transform-origin: left center;
}
.field-group:focus-within .field-label {
  color: var(--accent);
  transform: translateX(2px);
}

.field-input, .input-single input, .members-search-input {
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.field-input:hover:not(:focus) { border-color: var(--border-light); }
.field-input:focus {
  border-color: rgba(99,102,241,0.65);
  background: rgba(99,102,241,0.03);
}
/* Champ rempli : liseré discret pour repérer les critères actifs d'un coup d'œil */
.field-input:not(:placeholder-shown) { border-color: rgba(88,101,242,0.28); }

/* ════════════════════════════════════════
   BOUTONS — relief sobre
════════════════════════════════════════ */
.btn, .btn-clear, .rc-btn, .page-btn, .filter-chip, .btn-ghost {
  position: relative;
  transition: transform var(--d-base) var(--ease-spring),
              filter var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}

/* Bouton principal : fond accent uni, survol en relief simple. */
.btn-primary {
  background: var(--accent);
  animation: badgePop var(--d-base) var(--ease-spring);
  transition: transform var(--d-base) var(--ease-spring),
              filter var(--d-fast) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}
.btn-primary:disabled { transform: none; }

.btn-clear:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-clear:active, .btn-ghost:active { transform: scale(0.97); transition-duration: 80ms; }

/* Icône loupe du bouton principal */
#search-btn svg { transition: transform var(--d-base) var(--ease-spring); }
#search-btn:hover:not(:disabled) svg { transform: scale(1.12) rotate(-8deg); }

.help-icon {
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}
.help-icon:hover { transform: scale(1.15) rotate(8deg); }

/* ════════════════════════════════════════
   CHIPS & STATS — apparition en cascade
════════════════════════════════════════ */
.stat-chip, .filter-chip, .smart-chip {
  animation: chipIn var(--d-base) var(--ease-spring) both;
}
@keyframes chipIn {
  from { opacity: 0; transform: translate3d(0, 5px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
/* Cascades volontairement irrégulières : les éléments arrivent par
   petits groupes, jamais au métronome. */
.stats-bar  > *:nth-child(1) { animation-delay: 0ms; }
.stats-bar  > *:nth-child(2) { animation-delay: 50ms; }
.stats-bar  > *:nth-child(3) { animation-delay: 70ms; }
.stats-bar  > *:nth-child(4) { animation-delay: 140ms; }
.stats-bar  > *:nth-child(5) { animation-delay: 160ms; }
.stats-bar  > *:nth-child(n+6) { animation-delay: 200ms; }
.filter-bar > *:nth-child(1) { animation-delay: 0ms; }
.filter-bar > *:nth-child(2) { animation-delay: 40ms; }
.filter-bar > *:nth-child(3) { animation-delay: 100ms; }
.filter-bar > *:nth-child(4) { animation-delay: 130ms; }
.filter-bar > *:nth-child(n+5) { animation-delay: 190ms; }

.filter-chip:hover { transform: translateY(-1px); }
.filter-chip:active { transform: scale(0.96); transition-duration: 80ms; }
.filter-chip.active {
  box-shadow: inset 0 0 0 1px rgba(88,101,242,0.25);
}

/* ════════════════════════════════════════
   CARTES DE RÉSULTAT — stagger + relief
════════════════════════════════════════ */
.result-card, .intelx-card {
  /* will-change permanent = anti-pattern (mémoire GPU retenue en continu).
     On le laisse à 'auto' et on l'active ponctuellement au survol. */
  will-change: auto;
  animation: cardRise var(--d-slow) var(--ease-expo) both;
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  /* Le navigateur saute le rendu des cartes hors écran */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
@keyframes cardRise {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Cascade irrégulière sur les 11 premières cartes : les cartes se
   répondent par paires, le rythme ralentit vers la fin. */
.results-list > *:nth-child(1)  { animation-delay: 0ms; }
.results-list > *:nth-child(2)  { animation-delay: 40ms; }
.results-list > *:nth-child(3)  { animation-delay: 90ms; }
.results-list > *:nth-child(4)  { animation-delay: 130ms; }
.results-list > *:nth-child(5)  { animation-delay: 200ms; }
.results-list > *:nth-child(6)  { animation-delay: 250ms; }
.results-list > *:nth-child(7)  { animation-delay: 330ms; }
.results-list > *:nth-child(8)  { animation-delay: 370ms; }
.results-list > *:nth-child(9)  { animation-delay: 440ms; }
.results-list > *:nth-child(10) { animation-delay: 510ms; }
.results-list > *:nth-child(11) { animation-delay: 560ms; }
.results-list > *:nth-child(n+12) { animation-delay: 620ms; }

.result-card:hover {
  transform: translateY(-3px);
  will-change: transform;
  border-color: var(--border-light);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.65);
}
.intelx-card:hover { transform: translateY(-2px); }

/* Numéro de carte */
.rc-num {
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}
.result-card:hover .rc-num {
  background: var(--accent-dim);
  border-color: rgba(88,101,242,0.35);
  color: var(--accent);
  transform: scale(1.06);
}

/* Icônes de champ — léger relief au survol de la ligne */
.rc-field-item {
  transition: background var(--d-base) var(--ease-out);
}
.rc-field-item:hover { background: rgba(255,255,255,0.014); }
.rc-field-icon {
  transition: transform var(--d-base) var(--ease-spring);
}
.rc-field-item:hover .rc-field-icon { transform: scale(1.1) rotate(-4deg); }

/* Boutons de carte */
.rc-btn:hover  { transform: translateY(-1px); }
.rc-btn:active { transform: scale(0.95); transition-duration: 80ms; }
.rc-btn.copied, .card-copy-btn.copied { animation: badgeBump 420ms var(--ease-spring); }

/* Bannière "résultat possible" */
.possible-banner { animation: riseInSoft var(--d-base) var(--ease-out) both; }
.possible-banner svg { animation: badgePop var(--d-slow) var(--ease-spring) both; }

/* ════════════════════════════════════════
   SKELETON — vague plus douce
════════════════════════════════════════ */
.skeleton-card {
  animation: skelPulse 2s var(--ease-in-out) infinite;
  contain: strict;
}
@keyframes skelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}
.skeleton-card::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.02) 40%,
    rgba(88,101,242,0.07) 50%,
    rgba(255,255,255,0.02) 60%,
    transparent);
  animation: shimmer 1.6s var(--ease-in-out) infinite;
}

/* ════════════════════════════════════════
   ÉTAT VIDE / ERREUR
════════════════════════════════════════ */
.empty-state { animation: riseIn var(--d-slow) var(--ease-expo) both; }
.error-card {
  animation: errorShake 420ms var(--ease-out) both;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.1), 0 8px 26px -12px rgba(0,0,0,0.5);
}
@keyframes errorShake {
  0%   { opacity: 0; transform: translate3d(0, 6px, 0); }
  55%  { opacity: 1; transform: translate3d(-3px, 0, 0); }
  72%  { transform: translate3d(3px, 0, 0); }
  86%  { transform: translate3d(-2px, 0, 0); }
  100% { transform: none; }
}

/* ════════════════════════════════════════
   PAGINATION
════════════════════════════════════════ */
.page-btn:hover:not(:disabled):not(.page-btn--dots) { transform: translateY(-2px); }
.page-btn:active:not(:disabled) { transform: scale(0.94); transition-duration: 80ms; }
.page-btn.active {
  animation: badgePop var(--d-base) var(--ease-spring);
}

/* ════════════════════════════════════════
   TOASTS — glissée latérale + sortie fluide
════════════════════════════════════════ */
.toast {
  animation: toastSlideIn var(--d-slow) var(--ease-spring) both;
  transition: transform var(--d-base) var(--ease-out),
              opacity var(--d-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translate3d(24px, 0, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.toast:hover { transform: translateX(-3px); }
.toast.removing {
  animation: toastSlideOut var(--d-base) var(--ease-out) forwards;
}
@keyframes toastSlideOut {
  to { opacity: 0; transform: translate3d(24px, 0, 0) scale(0.96); }
}

/* ════════════════════════════════════════
   OVERLAYS & MODALES
════════════════════════════════════════ */
.admin-overlay, .settings-overlay, .ad-popup-overlay {
  animation: overlayIn var(--d-base) var(--ease-out) both;
}
/* On n'anime QUE l'opacité : interpoler backdrop-filter recalculerait un flou
   plein écran à chaque frame (très coûteux sur GPU mobile). Le flou est posé
   d'emblée à sa valeur finale et c'est le fondu qui le révèle. */
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.admin-panel, .settings-panel, .ad-popup-box {
  animation: modalIn var(--d-slow) var(--ease-spring) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.admin-close:hover { transform: rotate(90deg); }
.admin-close {
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-spring);
}

/* Contenu des réglages en cascade */
.settings-body > * {
  animation: riseInSoft var(--d-base) var(--ease-out) both;
}
.settings-body > *:nth-child(1) { animation-delay: 0ms; }
.settings-body > *:nth-child(2) { animation-delay: 80ms; }
.settings-body > *:nth-child(3) { animation-delay: 140ms; }
.settings-body > *:nth-child(n+4) { animation-delay: 220ms; }

.color-swatch {
  transition: transform var(--d-base) var(--ease-spring),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.color-swatch:hover { transform: scale(1.2) translateY(-2px); }
.color-swatch:active { transform: scale(0.92); transition-duration: 80ms; }
.color-swatch.active { animation: badgePop var(--d-base) var(--ease-spring); }

/* Cartes de mode API */
.api-mode-card {
  transition: border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.api-mode-card:hover { transform: translateY(-2px); }
.api-mode-card.active .api-mode-check { animation: badgePop var(--d-base) var(--ease-spring); }
.api-mode-icon { transition: all var(--d-base) var(--ease-out); }

/* Éléments de service / membre */
.service-item, .member-item {
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
  animation: riseInSoft var(--d-base) var(--ease-out) both;
}
.service-item:hover, .member-item:hover {
  transform: translateX(2px);
  border-color: var(--border-light);
}
.toggle-slider::before {
  transition: transform var(--d-base) var(--ease-spring),
              background var(--d-base) var(--ease-out);
}
.member-ban-btn:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════
   HISTORIQUE
════════════════════════════════════════ */
.history-dropdown { animation: riseInSoft var(--d-fast) var(--ease-out) both; }
.history-item {
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              padding-left var(--d-base) var(--ease-out);
}
.history-item:hover, .history-item.focused { padding-left: 15px; }
.history-remove { transition: opacity var(--d-fast) var(--ease-out),
                              color var(--d-fast) var(--ease-out),
                              transform var(--d-fast) var(--ease-spring); }
.history-remove:hover { transform: scale(1.2); }

/* ════════════════════════════════════════
   LIVE COUNTER
════════════════════════════════════════ */
.live-dot { box-shadow: none; }

/* ════════════════════════════════════════
   SPINNER — double anneau
════════════════════════════════════════ */
.spinner {
  animation: spin 0.7s var(--ease-in-out) infinite;
  border-width: 2px;
  position: relative;
}
.spinner-wrap { animation: fadeIn var(--d-base) var(--ease-out) both; }
.spinner-text { animation: textBreathe 1.8s var(--ease-in-out) infinite; }
@keyframes textBreathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ════════════════════════════════════════
   MAINTENANCE
════════════════════════════════════════ */
.maintenance-overlay { animation: overlayIn var(--d-base) var(--ease-out) both; }
.maintenance-content > * { animation: riseInSoft var(--d-slow) var(--ease-out) both; }
.maintenance-content > *:nth-child(2) { animation-delay: 90ms; }
.maintenance-content > *:nth-child(3) { animation-delay: 150ms; }
.maintenance-content > *:nth-child(4) { animation-delay: 230ms; }

/* ════════════════════════════════════════
   ONGLETS PANNEAU (sp-tab)
════════════════════════════════════════ */
.sp-tab { transition: color var(--d-base) var(--ease-out),
                      background var(--d-base) var(--ease-out); }
.sp-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--d-base) var(--ease-spring);
}
.sp-tab.active::after { transform: scaleX(1); }

/* ════════════════════════════════════════
   FOCUS CLAVIER — visible et cohérent
════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* Les champs ont déjà leur propre halo au focus (glow + bordure accent) :
   l'outline viendrait doubler le cadre. Le focus reste visible sans lui. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}

/* ════════════════════════════════════════
   MICRO-INTERACTIONS — retours d'appui sobres
   Rien de décoratif : juste un retour physique net au toucher,
   ce qui fait la différence sur téléphone.
════════════════════════════════════════ */
/* Pas de flash gris iOS au tap */
button, a, .section-header, .filter-chip, .history-item, .color-swatch {
  -webkit-tap-highlight-color: transparent;
}

/* Pas de zoom au double-tap sur mobile (le scroll et le pinch restent) */
html, body { touch-action: manipulation; }

/* Appui sur les en-têtes de section */
.section-header:active { background: rgba(255,255,255,0.03); }

/* Pop discret du compteur live à son montage */
.live-counter { animation: badgePop var(--d-base) var(--ease-spring); }

/* Appui sur l'icône d'aide */
.help-icon:active { transform: scale(0.9); transition-duration: 80ms; }

/* ════════════════════════════════════════
   PERFORMANCE
════════════════════════════════════════ */
/* Isole le repaint des zones lourdes */
.search-panel  { contain: layout style; }
.results-list  { contain: layout style; }
#toast-container { contain: layout style; }

/* Les couches du fond sont statiques, rien à couper ici. */

/* ════════════════════════════════════════
   TACTILE — pas de :hover collant
   Sur un écran tactile il n'y a pas de survol : le navigateur applique
   quand même :hover au tap et l'y laisse jusqu'au tap suivant. Une carte
   restait donc soulevée avec son ombre, et le balayage du bouton principal
   se déclenchait à chaque appui. On neutralise les effets de survol dès que
   le pointeur ne sait pas survoler — les états :active, eux, restent.
════════════════════════════════════════ */
@media (hover: none) {
  .result-card:hover,
  .intelx-card:hover,
  .btn-primary:hover:not(:disabled),
  .btn-clear:hover, .btn-ghost:hover,
  .btn-icon:hover, a.btn-discord:hover,
  .rc-btn:hover, .page-btn:hover:not(:disabled):not(.page-btn--dots),
  .filter-chip:hover, .toast:hover,
  .api-mode-card:hover, .service-item:hover, .member-item:hover,
  .color-swatch:hover, .help-icon:hover, .logo:hover,
  .member-ban-btn:hover, .admin-close:hover,
  .history-remove:hover {
    transform: none;
  }
  .btn-primary:hover:not(:disabled) { filter: none; }
  .result-card:hover { box-shadow: none; will-change: auto; }
  .result-card:hover .rc-num,
  .rc-field-item:hover .rc-field-icon,
  #settings-btn:hover svg,
  #search-btn:hover:not(:disabled) svg { transform: none; }
  .history-item:hover { padding-left: 11px; }
  .rc-btn-json:hover,
  .rc-btn-json:hover svg,
  .search-section:not(.open) .section-header:hover .section-chevron {
    transform: none;
  }
  /* Le survol ne doit pas non plus repeindre les fonds au tap */
  .rc-field-item:hover, .section-header:hover { background: transparent; }
}

/* ════════════════════════════════════════
   MOTION V2 — profondeur, rythme, micro-interactions
   Transform / opacity uniquement. Les effets souris sont réservés
   aux écrans précis (pointer:fine) et coupés en reduced-motion.
════════════════════════════════════════ */

/* ── Le panneau se construit : une séquence, pas un seul fade ── */
@keyframes rowIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
.search-panel-header { animation: rowIn var(--d-base) var(--ease-out) 190ms both; }
.search-section      { animation: rowIn var(--d-base) var(--ease-out) both; }
#section-identity { animation-delay: 220ms; }
#section-birth    { animation-delay: 260ms; }
#section-contact  { animation-delay: 310ms; }
#section-location { animation-delay: 360ms; }
#section-advanced { animation-delay: 410ms; }
.search-panel-footer { animation: rowIn var(--d-base) var(--ease-out) 450ms both; }

/* ── Scroll = timeline : filet de progression sous le header ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index: 120;
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease-out);
}
#scroll-progress.is-active { opacity: 0.85; }

/* ── Vignette du fond : dérive très lentement pendant le scroll ── */
body::before { transform: translate3d(0, var(--vignette-y, 0px), 0); }

/* ── Les résultats coulent hors du panneau ── */
#results-area { animation: resultsReveal 300ms var(--ease-expo) both; }
@keyframes resultsReveal {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Barre de stats : flotte sous le header pendant le scroll ── */
@media (min-width: 1024px) {
  #search-stats-bar { padding: 7px 12px; }
  #search-stats-bar.is-toolbar {
    position: sticky;
    top: var(--sticky-top, 62px);
    z-index: 45;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: rgba(9,9,13,0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background var(--d-slow) var(--ease-out),
                border-color var(--d-slow) var(--ease-out),
                box-shadow var(--d-slow) var(--ease-out);
  }
  #search-stats-bar.is-toolbar.is-stuck {
    background: rgba(10,10,15,0.82);
    border-color: var(--border);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,0.9);
  }
}

/* ── Header compact au scroll (visuel seul, hauteur inchangée) ── */
header .logo { transition: transform var(--d-slow) var(--ease-expo); }
header.is-scrolled .logo { transform: scale(0.94); }
header .header-status { transition: opacity var(--d-slow) var(--ease-out); }
header.is-scrolled .header-status { opacity: 0.6; }

/* ── Pastille de statut : respiration lente ── */
.status-dot.online { animation: dotBreath 3.8s ease-in-out infinite; }
@keyframes dotBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* ── Compteur "en ligne" : petit rebond à chaque mise à jour ── */
.live-count-bump { animation: badgeBump 380ms var(--ease-spring); }

/* ── Chevron des sections : il répond au survol quand c'est fermé ── */
.search-section:not(.open) .section-header:hover .section-chevron {
  transform: translateY(2px);
}

/* ── Cartes de résultat : tilt doux au curseur (desktop précis) ── */
.result-card {
  transition: transform 160ms var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
/* L'entrée cardRise est prioritaire sur le transform tant qu'elle tourne ;
   on la libère avec .rc-entered (posé par motion.js à la fin). */
.result-card.rc-entered { animation: none; }
@media (pointer: fine) and (hover: hover) {
  .result-card.rc-tilt:hover {
    transform: perspective(1000px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg))
               translateY(-3px);
  }
}

/* ── Boutons magnétiques (CTA, JSON) ── */
@media (pointer: fine) and (hover: hover) {
  .btn-primary:hover:not(:disabled) {
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0);
  }
  .rc-btn-json:hover {
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  }
}
.rc-btn-json svg {
  transition: transform var(--d-base) var(--ease-spring);
}
.rc-btn-json:hover svg { transform: translateX(2px); }

/* ════════════════════════════════════════
   RÉDUCTION DE MOUVEMENT
   Prioritaire sur tout le reste de ce fichier.
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .result-card, .intelx-card, .stat-chip, .filter-chip, .smart-chip,
  .empty-state, .error-card, .toast, .settings-body > *,
  .service-item, .member-item, .maintenance-content > *,
  .search-panel-header, .search-section, .search-panel-footer,
  #results-area {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .result-card:hover, .intelx-card:hover, .btn-primary:hover,
  .btn-icon:hover, .page-btn:hover, .filter-chip:hover,
  .rc-btn-json:hover,
  .result-card.rc-tilt:hover,
  .search-section:not(.open) .section-header:hover .section-chevron {
    transform: none !important;
  }
  #scroll-progress { opacity: 0 !important; }
  .status-dot.online { animation: none !important; }
  body::before { transform: none !important; }
  .motion-ready .section-body,
  .motion-ready .section-body-inner > * { transition: none !important; }
}