/* COPIE de frontend/shared/components.css - NE PAS EDITER ICI ; resynchroniser via scripts/sync_site_shared.sh */
/* ============================================================
   DENICHOR - COMPOSANTS DE BASE (V3)
   ------------------------------------------------------------
   Dépend de tokens.css. Contrat : docs/denichor-v3/UI-SPEC.md.
   Préfixe .dn- pour cohabiter avec n'importe quelle page.
   Chaque composant : état hover (micro-transition 160ms),
   état .static (reduced-motion) propre, focus visible.
   ============================================================ */

.dn-wrap{ max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.dn-mono{ font-family: var(--f-mono); }

/* ============ SECTION SHELL (eyebrow / titre / chapo) ============
   RÈGLE : chaque titre porte AU MOINS un mot en or italique (.gold-i). */
.dn-sec{ padding: var(--sec-pad) 0; position: relative; }
.dn-sec--sm{ padding: var(--sec-pad-sm) 0; }
.dn-sec--alt{ background: var(--ivoire-2); }
.dn-sec--nuit{ background:
  radial-gradient(900px 500px at 50% 55%, rgba(214,168,79,.12), transparent 65%), var(--nuit);
  color: var(--sur-nuit); }
.dn-tag{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono);
  font-size: var(--t-micro); letter-spacing: var(--ls-tag); text-transform: uppercase;
  color: var(--or); margin-bottom: 18px; font-weight: 400; }
.dn-tag::before{ content: ''; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--or), transparent); }
.dn-sec--nuit .dn-tag{ color: var(--or-vif); }
.dn-h1, .dn-h2, .dn-h3{ font-family: var(--f-display); font-weight: 550;
  line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.dn-h1{ font-size: var(--t-hero); }
.dn-h2{ font-size: var(--t-h2); max-width: 22ch; }
.dn-h3{ font-size: var(--t-h3); }
.gold-i{ font-style: italic; color: var(--or); }
.dn-sec--nuit .gold-i{ color: var(--or-vif); }
.dn-sub{ margin-top: 16px; color: var(--dim); max-width: 54ch; font-weight: 500;
  font-size: var(--t-sub); }
.dn-sub b{ color: var(--encre); }
.dn-sub .g{ color: var(--cash); font-weight: 700; }
.dn-sub .o{ color: var(--or); font-weight: 700; }
.dn-sec--nuit .dn-sub{ color: var(--sur-nuit-dim); }
.dn-sec--nuit .dn-sub b{ color: var(--sur-nuit); }

/* ============ BOUTONS (3 niveaux) ============ */
.dn-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: var(--r-btn);
  border: none; cursor: pointer; font-family: var(--f-body); text-decoration: none;
  color: inherit; transition: transform var(--micro-transition),
  box-shadow var(--micro-transition), border-color var(--micro-transition),
  color var(--micro-transition); }
/* 1. Primaire - l'action de valeur (1 seule par écran, idéalement) */
.dn-btn--primary{ background: linear-gradient(180deg, var(--encre-2), var(--encre));
  color: var(--creme); box-shadow: var(--sh-btn); }
.dn-btn--primary:hover{ transform: translateY(-2px); box-shadow: var(--sh-btn-hover); }
/* 2. Secondaire - l'alternative calme */
.dn-btn--ghost{ background: transparent; color: var(--encre);
  border: 1px solid rgba(23,19,12,.25); }
.dn-btn--ghost:hover{ border-color: var(--or); color: var(--or); transform: translateY(-2px); }
.dn-sec--nuit .dn-btn--ghost{ color: var(--sur-nuit); border-color: rgba(246,243,235,.3); }
.dn-sec--nuit .dn-btn--ghost:hover{ border-color: var(--or-vif); color: var(--or-vif); }
/* 3. Tertiaire - le lien fléché */
.dn-btn--link{ background: none; padding: 4px 2px; border-radius: 4px; font-size: 14.5px;
  color: var(--or); border-bottom: 1.5px solid rgba(176,122,30,.4); }
.dn-btn--link::after{ content: '→'; transition: transform var(--micro-transition); }
.dn-btn--link:hover{ border-bottom-color: var(--or); }
.dn-btn--link:hover::after{ transform: translateX(4px); }
/* Tailles */
.dn-btn--sm{ padding: 10px 18px; font-size: 13.5px; }
.dn-btn--xl{ padding: 19px 40px; font-size: 17px; }

/* ============ NAVIGATION ============ */
.dn-nav{ position: fixed; inset: 0 0 auto; z-index: var(--z-nav); display: flex;
  align-items: center; justify-content: space-between; padding: 14px var(--wrap-pad);
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s; }
.dn-nav.on{ background: var(--veil-nav); backdrop-filter: blur(12px);
  border-color: var(--line); }
.dn-nav .dn-brand img{ height: 26px; width: auto; display: block; }
.dn-nav-links{ display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--dim); }
.dn-nav-links a{ color: inherit; text-decoration: none;
  transition: color var(--micro-transition); }
.dn-nav-links a:hover, .dn-nav-links a[aria-current]{ color: var(--or); }
@media (max-width: 1023px){ .dn-nav-links{ display: none; } }
/* Mobile : le CTA du header reste VISIBLE (c'est le bouton de conversion),
   version compacte pour tenir a cote du logo (retour d'Alexis 2026-07-12). */
@media (max-width: 520px){
  .dn-nav .dn-btn{ padding: 9px 14px; font-size: 12.5px; }
  .dn-nav .dn-brand img{ height: 22px; }
}

/* ============ FOOTER ============
   Structure en colonnes (retour d'Alexis 2026-07-03) : marque + Produit +
   Support + Légal (les 4 pages « règles du site » ensemble), puis barre
   basse avec LE disclaimer légal obligatoire (copy-safety). */
.dn-foot{ border-top: 1px solid var(--line); padding: 56px 0 34px; background: var(--ivoire); }
.dn-foot-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start; }
.dn-foot-brand img{ height: 24px; width: auto; display: block; }
.dn-foot-brand .fb-line{ margin-top: 16px; font-size: 13.5px; color: var(--dim);
  font-weight: 500; line-height: 1.6; max-width: 34ch; }
.dn-foot-brand .fb-line b{ color: var(--encre); }
.dn-foot-brand .fb-mono{ margin-top: 14px; font-family: var(--f-mono);
  font-size: var(--t-nano); letter-spacing: .14em; text-transform: uppercase;
  color: var(--or); font-weight: 700; line-height: 1.9; }
.dn-foot-col{ display: flex; flex-direction: column; gap: 9px; }
.dn-foot-col .fc-t{ font-family: var(--f-mono); font-size: var(--t-nano);
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; margin-bottom: 6px; }
.dn-foot-col a{ font-size: 13.5px; font-weight: 500; color: var(--dim);
  text-decoration: none; width: fit-content;
  transition: color var(--micro-transition); }
.dn-foot-col a:hover, .dn-foot-col a[aria-current]{ color: var(--or); }
.dn-foot-bottom{ margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.dn-foot-copy{ margin-top: 10px; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--faint); letter-spacing: .06em; }
@media (max-width: 900px){ .dn-foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .dn-foot-grid{ grid-template-columns: 1fr; gap: 28px; } }
/* Variante historique en ligne (conservée pour compat) */
.dn-foot-row{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
  align-items: center; }
.dn-foot-row img{ height: 22px; width: auto; display: block; }
.dn-foot-links{ display: flex; gap: 20px; font-size: 13px; color: var(--dim);
  flex-wrap: wrap; font-weight: 500; }
.dn-foot-links a{ color: inherit; text-decoration: none;
  transition: color var(--micro-transition); }
.dn-foot-links a:hover{ color: var(--or); }
/* Le disclaimer légal est OBLIGATOIRE sur toute page publique (copy-safety). */
.dn-foot-legal{ width: 100%; margin-top: 16px; font-size: var(--t-caption);
  color: var(--faint); line-height: 1.7; }
.dn-foot-bottom .dn-foot-legal{ margin-top: 0; max-width: 110ch; }

/* ============ STAT HÉROS ============ */
.dn-stats{ display: flex; gap: clamp(18px, 3.6vw, 50px); flex-wrap: wrap; }
.dn-stat{ text-align: center; }
.dn-stat .n{ font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px); }
.dn-stat .n em{ font-style: normal; color: var(--or); }
.dn-stat .l{ font-size: var(--t-micro); color: var(--faint); text-transform: uppercase;
  letter-spacing: var(--ls-label); font-weight: 600; margin-top: 4px; }
.dn-sec--nuit .dn-stat .n{ color: var(--or-vif); }
.dn-sec--nuit .dn-stat .l{ color: var(--sur-nuit-faint); }

/* ============ PANNEAU PRODUIT (base des écrans) ============
   RÈGLE : le glow or (--sh-glow-or) en second box-shadow sur CHAQUE
   écran/mockup produit - c'est la lumière de la marque. */
.dn-panel{ position: relative; background: var(--papier); border: 1px solid var(--or-border);
  border-radius: var(--r-panel); overflow: hidden;
  box-shadow: var(--sh-panel), var(--sh-glow-or); }
.dn-panel--calm{ border-color: var(--line); }  /* variante sans bordure or (chat, coffre) */
.dn-panel-head{ display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--ls-badge);
  text-transform: uppercase; color: var(--faint); }
.dn-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--cash);
  display: inline-block; margin-right: 8px; flex: none; }

/* ============ CARTE OPPORTUNITÉ ============ */
.dn-opp{ position: relative; background: var(--papier); border: 1px solid var(--or-border);
  border-radius: var(--r-card); width: 100%; max-width: 340px;
  box-shadow: var(--sh-card), var(--sh-glow-or);
  transition: transform var(--micro-transition), box-shadow var(--micro-transition); }
  /* pas d'overflow:hidden : le ruban .dn-reperee dépasse au-dessus de la carte */
.dn-opp:hover{ transform: translateY(-4px);
  box-shadow: var(--sh-card-hover), var(--sh-glow-or); }
.dn-opp img{ display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.dn-opp-body{ padding: 16px 18px 18px; }
.dn-opp-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dn-opp-t{ font-weight: 700; font-size: 15px; line-height: 1.35; }
.dn-opp-m{ font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.dn-opp-nums{ display: flex; align-items: baseline; gap: 14px; margin-top: 12px;
  font-family: var(--f-mono); }
.dn-opp-price{ font-size: 21px; font-weight: 700; }
.dn-opp-marge{ font-size: 13px; font-weight: 700; color: var(--cash); }
.dn-opp-meta{ font-size: 10.5px; color: var(--faint); margin-left: auto; }
/* Ligne « comment vendre » - le conseil qui fait gagner de l'argent */
.dn-opp-detail{ margin-top: 12px; padding: 9px 12px; border-radius: var(--r-chip);
  background: var(--or-bg); border: 1px solid rgba(176,122,30,.2);
  font-family: var(--f-mono); font-size: 10.5px; color: var(--or); font-weight: 700;
  letter-spacing: .03em; }
/* Score /100 - dégradé or, réservé aux valeurs réelles */
.dn-score{ font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  border-radius: var(--r-chip); padding: 5px 9px; flex: none;
  background: linear-gradient(180deg, var(--or-vif), var(--or)); color: var(--blanc-chaud); }
/* Badge de confiance (élevée / moyenne / faible) */
.dn-conf{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono);
  font-size: var(--t-nano); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-tag); }
.dn-conf::before{ content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; }
.dn-conf--haute{ background: var(--cash-bg); color: var(--cash); }
.dn-conf--moyenne{ background: var(--or-bg-2); color: var(--or); }
.dn-conf--faible{ background: rgba(23,19,12,.07); color: var(--dim); }
/* Ruban « REPÉRÉE PAR DENICHOR » - posable sur toute carte (.dn-reperee) */
.dn-reperee{ border-color: rgba(176,122,30,.8); box-shadow: var(--sh-lit), var(--sh-glow-or); }
.dn-reperee::after{ content: 'REPÉRÉE PAR DENICHOR'; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono);
  font-size: 8.5px; font-weight: 700; letter-spacing: var(--ls-badge);
  background: var(--or); color: var(--blanc-chaud); border-radius: 4px; padding: 3px 8px;
  z-index: 2; }

/* ============ CARTE SIGNAL (avec mini-courbe) ============ */
.dn-signal{ background: var(--papier); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px 24px; position: relative; overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--micro-transition), box-shadow var(--micro-transition); }
.dn-signal:hover{ transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.dn-signal-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.dn-kind{ font-family: var(--f-mono); font-size: var(--t-nano); letter-spacing: .18em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-tag); font-weight: 700; }
.dn-kind--up{ background: var(--cash-bg); color: var(--cash); }
.dn-kind--down{ background: var(--bad-bg); color: var(--bad); }
.dn-kind--hot{ background: var(--or-bg-2); color: var(--or); }
.dn-signal h3{ font-size: var(--t-card); margin-top: 12px; font-weight: 650;
  font-family: var(--f-body); }
.dn-signal .s-sub{ font-size: 13px; color: var(--dim); margin-top: 6px; font-weight: 500; }
.dn-signal canvas{ width: 120px; height: 52px; flex: none; }
.dn-signal .s-act{ margin-top: 16px; font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: .08em; color: var(--or); font-weight: 700; }
.dn-signal .s-act::before{ content: '→ '; color: var(--faint); }

/* ============ CARTE PAYWALL (verrouillée) ============
   Le SERVEUR décide (descriptor velora.saas.paywall.v1), le front REND.
   Rendu par DN.renderPaywall(el, descriptor) - jamais de logique
   d'unlock côté client. Le flou est statique (pas animé) : autorisé. */
.dn-paywall{ position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--papier);
  box-shadow: var(--sh-card), var(--sh-glow-or); }
.dn-paywall-under{ filter: blur(7px) saturate(.85); opacity: .7; pointer-events: none;
  user-select: none; padding: 22px; min-height: 300px; display: flex;
  flex-direction: column; justify-content: center; }
.dn-paywall-over{ position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding: 24px; background: radial-gradient(420px 260px at 50% 42%,
    rgba(255,254,250,.55), rgba(255,254,250,.14)); }
.dn-paywall-lock{ width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--encre);
  color: var(--creme); box-shadow: var(--sh-btn); }
.dn-paywall-plan{ font-family: var(--f-mono); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--or);
  background: var(--or-bg-2); border: 1px solid var(--or-border-2);
  border-radius: var(--r-tag); padding: 4px 10px; }
.dn-paywall-msg{ font-size: 14.5px; font-weight: 600; max-width: 34ch; line-height: 1.45; }
.dn-paywall-quota{ font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); }
.dn-paywall-quota b{ color: var(--encre); }
.dn-paywall .dn-btn{ margin-top: 8px; }

/* ============ TABLEAU DE DONNÉES ============ */
.dn-tablewrap{ overflow-x: auto; }           /* le tableau défile DANS son conteneur */
.dn-table{ width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.dn-table th{ font-family: var(--f-mono); font-size: var(--t-nano); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); text-align: left;
  padding: 12px 22px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dn-table td{ padding: 11px 22px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; }
.dn-table tr:last-child td{ border-bottom: none; }
.dn-table tbody tr{ transition: background var(--micro-transition); }
.dn-table tbody tr:hover{ background: rgba(214,168,79,.05); }
.dn-table tbody tr.is-first{ background: var(--or-bg); }
.dn-table .t-title{ font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.dn-table .t-meta{ font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); }
.dn-table .num{ font-family: var(--f-mono); font-size: 12px; color: var(--dim);
  text-align: right; white-space: nowrap; }
.dn-table .num b{ color: var(--cash); font-weight: 700; }
.dn-table .thumb{ width: 44px; height: 38px; object-fit: cover; border-radius: var(--r-thumb);
  display: block; }

/* ============ FORMULAIRE ============ */
.dn-field{ display: flex; flex-direction: column; gap: 8px; }
.dn-label{ font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.dn-input, .dn-select, .dn-textarea{ font-family: var(--f-body); font-size: 15px;
  font-weight: 500; color: var(--encre); background: var(--papier);
  border: 1px solid rgba(23,19,12,.18); border-radius: var(--r-btn); padding: 13px 16px;
  width: 100%; transition: border-color var(--micro-transition),
  box-shadow var(--micro-transition); }
.dn-input::placeholder, .dn-textarea::placeholder{ color: var(--faint); }
.dn-input:hover, .dn-select:hover, .dn-textarea:hover{ border-color: rgba(23,19,12,.32); }
.dn-input:focus, .dn-select:focus, .dn-textarea:focus{ outline: none;
  border-color: var(--or); box-shadow: 0 0 0 3px rgba(214,168,79,.22); }
.dn-select{ appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B07A1E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.dn-textarea{ min-height: 110px; resize: vertical; }
.dn-hint{ font-size: var(--t-caption); color: var(--faint); }
.dn-error{ font-family: var(--f-mono); font-size: 11.5px; color: var(--bad); font-weight: 700; }
.dn-field.is-error .dn-input, .dn-field.is-error .dn-select,
.dn-field.is-error .dn-textarea{ border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(179,54,74,.14); }
/* Case à cocher maison */
.dn-check{ display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--dim); }
.dn-check input{ position: absolute; opacity: 0; pointer-events: none; }
.dn-check .box{ flex: none; width: 19px; height: 19px; border-radius: 5px; margin-top: 1px;
  border: 1.5px solid rgba(23,19,12,.3); background: var(--papier); position: relative;
  transition: background var(--micro-transition), border-color var(--micro-transition); }
.dn-check .box::after{ content: ''; position: absolute; inset: 3px 4px 5px;
  border-left: 2px solid var(--blanc-chaud); border-bottom: 2px solid var(--blanc-chaud);
  transform: rotate(-45deg) scale(0); transition: transform var(--micro-transition); }
.dn-check input:checked + .box{ background: var(--or); border-color: var(--or); }
.dn-check input:checked + .box::after{ transform: rotate(-45deg) scale(1); }
.dn-check input:focus-visible + .box{ outline: 2px solid var(--or); outline-offset: 3px; }

/* ============ CHIPS & PILULES ============ */
.dn-chip{ font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--or-border-2); color: var(--or); background: var(--or-bg);
  display: inline-flex; align-items: center; gap: 7px; }
.dn-chan{ font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--dim); display: inline-flex;
  transition: border-color var(--micro-transition), color var(--micro-transition); }
.dn-chan.on{ border-color: rgba(176,122,30,.5); color: var(--or); background: var(--or-bg); }

/* ============ TOAST ============ */
.dn-toasts{ position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); }
.dn-toast{ display: grid; grid-template-columns: auto 1fr; gap: 4px 13px;
  align-items: start; background: var(--veil-panel); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-left: 3px solid var(--or);
  border-radius: var(--r-hud); padding: 14px 18px 14px 15px; box-shadow: var(--sh-hud); }
.dn-toast .ic{ grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--or-bg-2); color: var(--or); margin-top: 1px; }
.dn-toast .tt{ font-weight: 700; font-size: 14px; }
.dn-toast .tm{ font-size: 13px; color: var(--dim); font-weight: 500; line-height: 1.45; }
.dn-toast--cash{ border-left-color: var(--cash); }
.dn-toast--cash .ic{ background: var(--cash-bg); color: var(--cash); }
.dn-toast--bad{ border-left-color: var(--bad); }
.dn-toast--bad .ic{ background: var(--bad-bg); color: var(--bad); }

/* ============ ÉTAT VIDE (une invitation à agir) ============ */
.dn-empty{ text-align: center; padding: clamp(40px, 7vh, 80px) 24px;
  border: 1.5px dashed rgba(176,122,30,.35); border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(214,168,79,.05), transparent 70%); }
.dn-empty .star{ width: 34px; height: 34px; margin: 0 auto 16px; display: block;
  filter: drop-shadow(0 4px 12px rgba(176,122,30,.35)); }
.dn-empty h3{ font-family: var(--f-display); font-weight: 550; font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--encre); }
.dn-empty p{ margin: 10px auto 0; max-width: 44ch; color: var(--dim); font-size: 14.5px;
  font-weight: 500; }
.dn-empty .dn-btn{ margin-top: 22px; }

/* ============ SKELETON DE CHARGEMENT ============ */
.dn-skel{ position: relative; overflow: hidden; background: rgba(23,19,12,.07);
  border-radius: var(--r-thumb); }
.dn-skel::after{ content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(214,168,79,.16), transparent);
  animation: dn-shimmer 1.5s ease-in-out infinite; }
.dn-skel--line{ height: 13px; }
.dn-skel--title{ height: 22px; width: 60%; }
.dn-skel--thumb{ aspect-ratio: 4/3; border-radius: var(--r-card); }
.dn-skel--pill{ height: 30px; width: 110px; border-radius: var(--r-pill); }
@keyframes dn-shimmer{ 100%{ transform: translateX(100%); } }
html.static .dn-skel::after{ animation: none; }

/* ============ CONTENEUR DU CHAMP DE PARTICULES ============ */
.dn-particles{ position: relative; overflow: clip; }
.dn-particles > canvas, .dn-particles > .dn-particles-static{
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dn-particles-static{ background:
  radial-gradient(560px 330px at var(--px, 50%) var(--py, 45%), rgba(214,168,79,.28), transparent 68%); }
.dn-particles-static::after{ content: ''; position: absolute; left: var(--px, 50%);
  top: var(--py, 45%); width: 10px; height: 10px; transform: translate(-50%, -50%);
  background: var(--or-vif); border-radius: 50%;
  box-shadow: 0 0 22px 6px rgba(214,168,79,.65); }

/* ============ REVEALS (état initial posé en CSS, animé par JS) ============
   [data-r] / [data-rg] via DN.initReveals() - rejouables au re-scroll. */
html.static [data-r], html.static [data-rg] > *{ opacity: 1 !important;
  transform: none !important; }